\r\n {renderIcon(sortOrder ?? -1, state)}\r\n {isMobile && (\r\n \r\n \r\n {\r\n {\r\n if (nextShow) {\r\n sendDataToGTM({\r\n event: \"eventTracking\",\r\n category: \"Construction\",\r\n action: `Tooltip Opened - ${phase?.name ?? \"\"}`,\r\n label: \"Project Details - Phase List\",\r\n });\r\n }\r\n }}\r\n overlay={TOOL_TIP({\r\n phaseName: phase?.name ?? \"\",\r\n })}\r\n >\r\n {phase?.name ?? \"\"}\r\n \r\n }\r\n
\r\n {changeDate(completionDate)}
\r\n \r\n )}\r\n {!isMobile && (\r\n <>\r\n \r\n {\r\n {\r\n if (nextShow) {\r\n sendDataToGTM({\r\n event: \"eventTracking\",\r\n category: \"Construction\",\r\n action: `Tooltip Opened - ${phase?.name ?? \"\"}`,\r\n label: \"Project Details - Phase List\",\r\n });\r\n }\r\n }}\r\n overlay={TOOL_TIP({\r\n phaseName: phase?.name ?? \"\",\r\n })}\r\n >\r\n {phase?.name ?? \"\"}\r\n \r\n }\r\n
\r\n {changeDate(completionDate)}
\r\n >\r\n )}\r\n\r\n \r\n {state &&\r\n state.id &&\r\n state.id.toLowerCase() === EPhaseStates.ACTIVE &&\r\n renderBadge(status, sendDataToGTM)}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default PHASE_LIST_ITEM;\r\n","import React from \"react\";\r\nimport ButtonStyles from \"../../../button/Button.styles\";\r\nimport { IPhaseListProps } from \"./PhaseList.types\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faExternalLinkAlt } from \"@fortawesome/free-solid-svg-icons\";\r\nimport PHASE_LIST_ITEM from \"./PhaseList.renderer\";\r\nimport { Stack } from \"react-bootstrap\";\r\nimport {\r\n DetailsList,\r\n DetailsListHeader,\r\n} from \"../../../../shared/styles/Card.styles\";\r\nimport { PackageDetailsPhase } from \"../../../../api/models\";\r\nimport { isMobile } from \"react-device-detect\";\r\nimport { useGTMDispatch } from \"@elgorditosalsero/react-gtm-hook\";\r\n\r\nconst renderPhases = (phases: Array