logout()}>\n logout\n \n ),\n }}\n />\n );\n\n return ;\n};\n\nexport default AuthError;\n","import styled from 'styled-components';\n\nexport const PageLoaderWrapper = styled.div`\n width: 100%;\n height: 100%;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const SpinContainer = styled.div`\n text-align: center;\n margin-top: 15%;\n`;\n\nexport const InnerSpinner = styled.div`\n border: 3px solid #DB011C;\n width: 200px;\n height: 200px;\n margin: 0 auto;\n border-radius: 50%;\n border-left-color: transparent;\n border-right-color: transparent;\n animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;\n opacity: 50%;\n \n @keyframes rotate {\n 0% {\n transform: rotateZ(-360deg)\n }\n 100% {\n transform: rotateZ(0deg)\n }\n }\n @keyframes rotate2 {\n 0% {\n transform: rotateZ(360deg)\n }\n 100% {\n transform: rotateZ(0deg)\n }\n`;\n\nexport const OuterSpinner = styled.div`\n margin: 0 auto;\n border-radius: 50%;\n \n border: 3px solid #DB011C;\n width: 220px;\n height: 220px;\n position: relative;\n top: -210px;\n border-left-color: transparent;\n border-right-color: transparent;\n animation: rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;\n \n @keyframes rotate {\n 0% {\n transform: rotateZ(-360deg)\n }\n 100% {\n transform: rotateZ(0deg)\n }\n }\n @keyframes rotate2 {\n 0% {\n transform: rotateZ(360deg)\n }\n 100% {\n transform: rotateZ(0deg)\n }\n`;\n\nexport const LogoWrapper = styled.div`\n margin: 0 auto;\n position: relative;\n top: -345px;\n`;\n\n// Small Scale Spinner \n\nexport const InnerSpinnerJr = styled.div`\n border: 2px solid #DB011C;\n width: 100px;\n height: 100px;\n margin: 0 auto;\n border-radius: 50%;\n border-left-color: transparent;\n border-right-color: transparent;\n animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;\n opacity: 50%;\n \n @keyframes rotate {\n 0% {\n transform: rotateZ(-360deg)\n }\n 100% {\n transform: rotateZ(0deg)\n }\n }\n @keyframes rotate2 {\n 0% {\n transform: rotateZ(360deg)\n }\n 100% {\n transform: rotateZ(0deg)\n }\n`;\n\nexport const OuterSpinnerJr = styled.div`\n margin: 0 auto;\n border-radius: 50%;\n \n border: 2px solid #DB011C;\n width: 110px;\n height: 110px;\n position: relative;\n top: -105px;\n border-left-color: transparent;\n border-right-color: transparent;\n animation: rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;\n \n @keyframes rotate {\n 0% {\n transform: rotateZ(-360deg)\n }\n 100% {\n transform: rotateZ(0deg)\n }\n }\n @keyframes rotate2 {\n 0% {\n transform: rotateZ(360deg)\n }\n 100% {\n transform: rotateZ(0deg)\n }\n`;\n\nexport const SpinContainerJr = styled.div`\n text-align: center;\n margin-top: 10%;\n`;\n\nexport const LogoWrapperJr = styled.div`\n margin: 0 auto;\n position: relative;\n top: -172px;\n`;","import React from \"react\";\nimport {LogoWrapper, InnerSpinner, OuterSpinner, PageLoaderWrapper, SpinContainer} from './styled';\nimport {ReactComponent as Logo} from \"../../assets/logo-milwaukeetool.svg\";\n\nconst PageLoader = () => {\n return (\n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default PageLoader;\n","import React from 'react';\nimport {LogoWrapperJr, InnerSpinnerJr, OuterSpinnerJr, PageLoaderWrapper, SpinContainerJr} from './styled';\nimport {ReactComponent as Logo} from \"../../assets/logo-milwaukeetool.svg\";\n\nconst PageLoaderJr = () => {\n return (\n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default PageLoaderJr;\n","import {Alert, Col, Row} from 'antd';\nimport styled, { keyframes } from 'styled-components';\n\nconst fadeIn = keyframes`\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n`;\n\nexport const Content = styled.div`\n min-height: calc(100vh - 84px);\n`;\n\nexport const Main = styled.div`\n display: flex;\n flex-direction: row;\n height: 100%;\n min-height: 100%;\n animation: ${fadeIn} 300ms ease-in-out;\n transition: transform 0.3s;\n flex: 1 0 auto;\n\n * {\n font-family: Helvetica Neue, Helvetica, Arial, sans-serif;\n }\n`;\n\nexport const InnerContent = styled.div`\n max-width: 100%;\n flex: 1 0 auto;\n`;\n\nexport const RightContent = styled.div`\n display: flex;\n flex-direction: column;\n flex: 1;\n max-width: 100%;\n overflow: hidden;\n`;\n\nexport const PageLoaderWrapper = styled.div`\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n`;\n\nexport const BannerAlert = styled(Alert)`\n padding: 1.5rem;\n margin: 0;\n`;\n\nexport const FooterMenu = styled.div`\n color: white;\n width: 100%;\n background-color: #222;\n font-size: 14px;\n line-height: 14px;\n`;\n\nexport const FooterExternalLink = styled.a`\n color: white;\n &:hover {\n text-decoration: underline;\n color: white;\n }\n`;\n\nexport const LinkDivider = styled.span`\n margin-left: 3px;\n margin-right: 3px;\n`;\n\nexport const FooterImage = styled.img`\n max-height: 1rem;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nexport const StyledRow = styled(Row)`\n margin: 32px auto 32px auto;\n font-size: 1rem !important;\n`;\n\nexport const CenteredFooterCol = styled(Col)`\n @media screen and (max-width: 973px) {\n text-align: center !important;\n padding-bottom: 15px !important;\n }\n`;\n","import { TranslationOutlined } from '@ant-design/icons';\nimport { useAuth0 } from '@auth0/auth0-react';\nimport { useAppInsightsContext } from '@microsoft/applicationinsights-react-js';\nimport { useToggle } from '../../../hooks';\nimport { Col, Popover, Row, Typography } from 'antd';\nimport React, { useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useHistory } from 'react-router';\nimport { toast } from 'react-toastify';\nimport { WhatsNewModal } from '../../../containers/Home/components/WhatsNewModal';\nimport { withAppInsights } from '../../../helpers/appInsights';\nimport { getShowWhatsNew, hasMetSession, setShowWhatsNew } from '../../../helpers/sessionStorage';\nimport { useFeatureToggles, useLocale, useMetAuth, useUser } from '../../../hooks';\nimport { announcementsActions, configurationActions, localesActions, usersActions } from '../../../store';\nimport { NavMenu } from '../../NavMenu';\nimport { AuthError } from '../../PageError';\nimport { useBaseContext } from './BaseContext';\nimport { PageLoader } from '../../PageLoader';\nimport {\n BannerAlert,\n CenteredFooterCol,\n Content,\n FooterExternalLink,\n FooterImage,\n FooterMenu,\n InnerContent,\n LinkDivider,\n Main,\n RightContent,\n StyledRow,\n} from './styled';\nimport { parseUserIdFromClaims } from '../../../helpers/user';\nimport { setUserId } from '../../../helpers/sessionStorage';\n\nconst BaseLayout = withAppInsights((props) => {\n const { Link } = Typography;\n const { isAuthenticated, isLoading, getAccessTokenSilently, user: auth0user } = useAuth0();\n const { user, email, loadingUser, errorLoadingUser, preferredLanguage, accountNumber } = useUser();\n const { languages, storedLocale, isCaLocale } = useLocale();\n const { loadingMetUserToken } = useMetAuth();\n const intl = useIntl();\n const dispatch = useDispatch();\n const history = useHistory();\n const { localesSupport } = useFeatureToggles();\n const { Text } = Typography;\n const { authenticationError } = useBaseContext();\n const [showWhatsNewModal, toggleWhatsNewModal] = useToggle(false);\n const [languagePopover, setLanguagePopover] = useState(false);\n const { locale } = useSelector((state) => state.locales);\n const { announcements } = useSelector((state) => state.announcements.getActiveAnnouncements);\n const [siteLanguage, setSiteLanguage] = useState('English');\n const [isInitializing, setIsInitializing] = useState(true);\n\n const appInsights = useAppInsightsContext();\n\n useEffect(() => {\n if (locale && languages) {\n for (let i = 0; i < languages.length; i++) {\n if (locale.toLowerCase() == languages[i].value.toLowerCase()) {\n setSiteLanguage(intl.formatMessage({ id: languages[i].id }));\n return;\n }\n }\n setSiteLanguage(intl.formatMessage({ id: 'profile.preferredLanguage.english' }));\n } else {\n setSiteLanguage(intl.formatMessage({ id: 'profile.preferredLanguage.english' }));\n }\n }, [locale, languages]);\n\n useEffect(() => {\n // fetch stored language preference from footer button\n let language = storedLocale();\n\n // check if user is authenticated before checking language\n if (isAuthenticated && hasMetSession()) {\n const userId = parseUserIdFromClaims(auth0user);\n setUserId(userId);\n\n if (user && language) {\n // if users preferred language does not match the one in the UI, updates the app to match the preferred language\n if (preferredLanguage != language) {\n dispatch(localesActions.updateLocale(preferredLanguage));\n }\n } else if (user && locale) {\n // if the browser has a selected language that is not english set the users preference to that language.\n if (preferredLanguage != locale && locale.toLowerCase().indexOf('en') < 0) {\n dispatch(usersActions.updateUserPreferredLanguage(locale));\n }\n // locale is english and no stored language so if there is a language preference use that\n else if (preferredLanguage) {\n dispatch(localesActions.updateLocale(preferredLanguage));\n }\n }\n }\n }, [locale, user, preferredLanguage]);\n\n useEffect(() => {\n if (!isAuthenticated) {\n // Enable seamless SSO w/ Auth0 by asynchronously requesting access token if user is not logged in\n // If request succeeds, it will change the isAuthenticated state and the site will refresh itself to show the user as logged in!\n getAccessTokenSilently()\n .catch((error) => {\n if (error.error !== 'login_required') {\n appInsights.trackEvent({\n name: 'GetAccessTokenSilently_Error',\n properties: {\n error,\n },\n });\n throw error;\n }\n })\n .finally(() => {\n setIsInitializing(false);\n });\n } else {\n setIsInitializing(false);\n }\n\n if (isAuthenticated && !hasMetSession() && !authenticationError) {\n // User has active auth cookie but is missing session data\n history.replace(`/login/?r=${window.location.pathname}`);\n }\n\n if (getShowWhatsNew()) {\n toggleWhatsNewModal();\n }\n\n if (isAuthenticated && hasMetSession() && !email && !loadingUser) {\n // Populate Redux with user object\n dispatch(usersActions.getCurrentUser()).catch(() => {\n // Upsert User because the user is authenticated via auth0 but does not exist in our eService database\n dispatch(usersActions.upsertUser())\n .then(() => {\n history.push('/');\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'profile.loadingUserErrorMessage' }), { autoClose: false });\n });\n });\n }\n }, [isAuthenticated]);\n\n useEffect(() => {\n if (announcements.length < 1) {\n // Announcements\n let userCountryCode = 'US';\n\n if (isCaLocale()) {\n userCountryCode = 'CA';\n }\n\n dispatch(announcementsActions.getActiveAnnouncements(userCountryCode));\n }\n\n dispatch(configurationActions.getActiveFeatures());\n }, []);\n\n const handleToggleWhatsNewModal = () => {\n setShowWhatsNew(false);\n\n toggleWhatsNewModal();\n };\n\n const handleLocaleChange = (newLocale) => {\n dispatch(localesActions.updateLocale(newLocale));\n dispatch(usersActions.updateUserPreferredLanguage(newLocale));\n if (languagePopover) {\n setLanguagePopover(false);\n }\n };\n\n const handleVisibleChange = (visibility) => {\n setLanguagePopover(visibility);\n };\n\n const getLanguageBody = (index) => {\n let body = '';\n if (announcements.length > 0) {\n let lang = preferredLanguage?.toLowerCase() ?? '';\n switch (lang) {\n case 'fr-ca':\n body = announcements[index]?.body.filter((x) => x.lang.toLowerCase() === 'fr-ca')[0];\n\n if (!body) {\n body = announcements[index]?.body.filter((x) => x.lang.toLowerCase() === 'en-us')[0];\n }\n break;\n case 'en-us':\n default:\n body = announcements[index]?.body.filter((x) => x.lang.toLowerCase() === 'en-us')[0];\n break;\n }\n }\n return body.text;\n };\n\n // If processing Auth0, MET session, or loading user into Redux\n if (\n isLoading ||\n loadingMetUserToken ||\n isInitializing ||\n (isAuthenticated && !email && !authenticationError && !errorLoadingUser)\n ) {\n return ;\n }\n\n const announcementsList =\n announcements &&\n announcements.length > 0 &&\n announcements.map((element, index) => {\n return ;\n });\n\n const localePopoverContent = (\n \n \n \n handleLocaleChange('en-US')}\n />\n
\n \n handleLocaleChange('en-US')}>\n {intl.formatMessage({ id: 'profile.preferredLanguage.english' })}\n \n
\n
\n \n \n handleLocaleChange('fr-CA')}\n className='mr-3'\n />\n
\n \n handleLocaleChange('fr-CA')}>\n {intl.formatMessage({ id: 'profile.preferredLanguage.french' })}\n \n
\n
\n \n );\n\n const localesMarkup = localesSupport && (\n \n \n handleVisibleChange(!languagePopover)}\n />\n handleVisibleChange(!languagePopover)}>\n {siteLanguage}\n \n \n \n );\n\n const content = authenticationError ? : props.children;\n //const showChat = isAuthenticated && accountNumber && !isCaLocale();\n\n return (\n \n \n \n \n \n {announcementsList}\n {content}\n \n \n \n \n © {new Date().getFullYear()} - Milwaukee Tool\n \n \n \n \n \n \n | \n \n \n \n | \n \n {intl.formatMessage({ id: 'footer.oneTrust' })}\n \n
\n \n {localesMarkup}\n \n \n \n \n \n \n );\n});\n\nexport default BaseLayout;\n","import { Layout as AntLayout } from 'antd';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { BaseLayout } from './BaseLayout';\n\nconst { Content } = AntLayout;\n\nconst ContentWrapper = styled(Content)`\n max-width: 1500px;\n height: 100%;\n padding: 1rem 0;\n margin: 2rem auto;\n box-sizing: border-box;\n`;\n\nconst Layout = props => {\n return (\n \n {props.children}\n \n );\n};\n\nexport default Layout;\n","import Enumerable from 'linq';\nimport React, { createContext, useContext, useEffect, useState } from 'react';\nimport { useSelector } from 'react-redux';\n\nconst RepairProcessContext = createContext({\n submittingServiceOrder: false,\n repairItems: [],\n setRepairItems: () => {},\n shipping: {},\n setShipping: () => {},\n getServiceOrder: () => {},\n batteryIncluded: false,\n});\n\nconst useRepairProcessContext = () => useContext(RepairProcessContext);\n\nconst RepairProcessProvider = ({ children }) => {\n const submittingServiceOrder = useSelector(state => state.serviceOrders.submitServiceOrder.isLoading);\n\n const [repairItems, setRepairItems] = useState([]);\n const [shipping, setShipping] = useState({});\n const [batteryIncluded, setBatteryIncluded] = useState(false);\n\n useEffect(() => {\n if (repairItems && repairItems.length > 0) {\n let repairIncludesBattery = Enumerable.from(repairItems).any(x => x.batteryIncluded);\n\n setBatteryIncluded(repairIncludesBattery);\n }\n }, [repairItems]);\n\n const getServiceOrder = () => {\n let serviceOrder = {};\n serviceOrder.repairItems = repairItems;\n serviceOrder.shipping = shipping;\n\n return serviceOrder;\n };\n\n return (\n \n {children}\n \n );\n};\n\nexport { RepairProcessContext, useRepairProcessContext, RepairProcessProvider };\n","import RepairProcessLayout from './RepairProcessLayout';\n\nexport default RepairProcessLayout;\n","import React from 'react';\nimport { RepairProcessProvider } from '../../../containers/RepairProcess/RepairProcessContext';\nimport Layout from '../Layout';\n\nconst RepairProcessLayout = props => {\n return (\n \n \n {props.children}\n \n \n );\n};\n\nexport default RepairProcessLayout;\n","import { ListGroup, ListGroupItem, Text } from '@met/react-components';\nimport styled from 'styled-components';\n\nexport const StyledImg = styled.img`\n max-width: 100%;\n max-height: 150px;\n`;\n\nexport const StyledText = styled(Text)`\n margin-bottom: 0.25rem;\n`;\n\nexport const ActionText = styled(Text)`\n color: #db011c;\n font-weight: bold;\n`;\n\nexport const SearchResults = styled(ListGroup)`\n margin-top: 0.5rem;\n`;\n\nexport const SearchResult = styled(ListGroupItem)`\n padding-top: 1rem;\n padding-bottom: 1rem;\n`;\n\nexport const ActionWrapper = styled.div`\n margin-left: 1rem;\n text-align: center;\n\n @media (max-width: ${props => props.theme.screenSize.md}) {\n margin-top: 1rem;\n margin-bottom: 0.5rem;\n margin-left: 0;\n }\n`;\n","import { useAuth0 } from '@auth0/auth0-react';\nimport { Button, Col, Row, Text } from '@met/react-components';\nimport React, { useEffect, useState } from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { ActionText, ActionWrapper, SearchResult, StyledImg, StyledText } from './styled';\nimport { useFeatureToggles } from '../../hooks';\n\nconst ProductSearchResult = ({ sku, skuAlias, description, imageUrl, serviceEligible, handleAddClick }) => {\n const { isAuthenticated } = useAuth0();\n const { largeProductSkuProgram } = useFeatureToggles();\n\n const [largeProductSku, setLargeProductSku] = useState(false);\n\n //Due to the rebuild of eService/ServiceApps, the decision was made to \n //hard-code these values rather than building a scalable solution. \n //These values will NOT be maintained/updated over time\n const largeProductSkus = [\n 'MXF5122XC',\n 'MXF2202HD',\n 'MXF3363HD',\n 'MXF3242HD',\n 'MXF5011CP',\n 'MXF5001CP',\n 'MXF3022HD',\n 'MXF0411XC',\n 'MXF0410',\n 'MXF3162XC',\n 'MXF3681XC',\n '3302',\n 'MXF3012CXS',\n '3300R']\n\n useEffect(() => {\n if (largeProductSkuProgram && largeProductSkus.includes(sku)) {\n setLargeProductSku(true);\n }\n })\n\n const largeProductSkuMarkup = (\n \n \n \n \n
\n \n \n \n \n )\n\n const actionMarkup = serviceEligible ? (\n \n \n \n ) : (\n \n \n \n \n
\n \n \n \n \n );\n\n return (\n \n \n \n \n \n
\n \n \n \n {skuAlias}\n \n \n {description}\n \n \n \n {largeProductSku ? largeProductSkuMarkup : actionMarkup}\n \n
\n \n );\n};\n\nexport default ProductSearchResult;\n","import { useAuth0 } from '@auth0/auth0-react';\nimport {\n Button,\n Col,\n Icon,\n InputGroup,\n InputGroupAppend,\n Loader,\n Modal,\n ModalBody,\n ModalContent,\n ModalFooter,\n ModalHeader,\n Row,\n Text,\n TextInput,\n} from '@met/react-components';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useHistory } from 'react-router';\nimport { toast } from 'react-toastify';\nimport { productsActions } from '../../store';\nimport ProductSearchResult from './ProductSearchResult';\nimport { SearchResult, SearchResults } from './styled';\n\nconst ProductSearchModal = ({ hidden, toggle }) => {\n const dispatch = useDispatch();\n const intl = useIntl();\n const history = useHistory();\n\n const searchTermRef = useRef(null);\n\n const [searchTerm, setSearchTerm] = useState('');\n const [searched, setSearched] = useState(false);\n\n let searchingProducts = useSelector(state => state.products.searchProducts.isLoading);\n let searchResults = useSelector(state => state.products.searchProducts.products);\n\n useEffect(() => {\n if (hidden === false) {\n setSearchTerm('');\n setSearched(false);\n searchTermRef.current.focus();\n }\n }, [hidden]);\n\n const handleSearchClick = () => {\n dispatch(productsActions.searchProducts(searchTerm))\n .then(() => {\n setSearched(true);\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'productSearch.productSearchError' }));\n });\n };\n\n const handleAddClick = sku => {\n toggle();\n\n history.push(`/repairprocess/warrantyinformation/${sku}`);\n };\n\n let searchResultsMarkup = '';\n\n if (searchingProducts) {\n searchResultsMarkup = (\n \n \n \n \n \n
\n \n );\n }\n\n if (!searchingProducts && searched && searchResults.length === 0) {\n searchResultsMarkup = (\n \n \n \n \n \n \n \n \n \n \n \n
\n \n );\n }\n\n if (!searchingProducts && searched && searchResults.length > 0) {\n searchResultsMarkup =\n searchResults &&\n searchResults.map((searchResult, index) => {\n return (\n handleAddClick(searchResult.sku)}\n />\n );\n });\n }\n\n return (\n \n \n \n \n \n \n \n setSearchTerm(e.target.value)}\n value={searchTerm}\n onSubmit={handleSearchClick}\n inputRef={searchTermRef}\n data-hj-allow\n />\n \n \n \n \n {searchResultsMarkup}\n \n \n \n \n \n \n \n );\n};\n\nProductSearchModal.propTypes = {\n hidden: PropTypes.bool,\n toggle: PropTypes.func,\n};\n\nexport default ProductSearchModal;\n","import styled from 'styled-components';\nimport { Button } from 'antd';\n\nexport const StyledButton = styled(Button)`\n background-color: rgb(219, 1, 28);\n color: rgb(255, 255, 255);\n`;\n","import { Modal } from 'antd';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { useLocale } from '../../hooks';\nimport { StyledButton } from './styled.js';\n\nconst { getCurrentLocale } = useLocale();\n\nconst IneligibleToolModal = (props) => {\n const handleFindServiceCenter = () => {\n const currentLocale = getCurrentLocale();\n\n var url = '';\n\n switch (currentLocale) {\n case 'CA':\n url = 'https://www.milwaukeetool.ca/Support/Find-A-Service-Centre';\n\n break;\n\n case 'US':\n default:\n url = 'https://www.milwaukeetool.com/Support/Find-A-Service-Center';\n\n break;\n }\n const newWindow = window.open(url, '_blank', 'noreferrer');\n if (newWindow) newWindow.opener = null;\n };\n\n return (\n props.toggle()}\n title={}\n footer={[\n handleFindServiceCenter()}>\n \n ,\n ]}\n >\n \n - \n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n
\n \n );\n};\n\nIneligibleToolModal.propTypes = {\n hidden: PropTypes.bool,\n toggle: PropTypes.func,\n};\n\nexport default IneligibleToolModal;\n","import { useToggle } from '../../hooks';\nimport { Button, Typography } from 'antd';\nimport React, { Fragment } from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { IneligibleToolModal } from '../IneligibleToolModal';\nimport { useLocale } from '../../hooks';\n\nconst { Title } = Typography;\n\nconst MoreInformation = ({ handleDownloadTermsConditions }) => {\n const [showIneligibleToolModal, toggleIneligibleToolModal] = useToggle(false);\n\n const { isCaLocale } = useLocale();\n\n const isCa = isCaLocale();\n\n const additionalBodyMarkup = isCa ? (\n \n ) : (\n \n );\n\n return (\n \n \n <FormattedMessage id={'moreInformation.moreInformationTitle'} />\n \n \n - \n \n
\n - \n \n
\n
\n {additionalBodyMarkup}
\n \n \n );\n};\n\nexport default MoreInformation;\n","import styled from 'styled-components';\nimport { Row, Typography } from 'antd';\nconst { Text } = Typography;\n\nexport const SuggestionText = styled(Text)`\n margin-top: 0.25rem;\n color: rgb(23, 162, 184);\n cursor: pointer;\n\n :hover {\n color: rgb(17, 122, 139);\n }\n`;\n\nexport const SuggestionRow = styled(Row)`\n margin-top: -25px;\n`;\n","import Enumerable from 'linq';\nimport PropTypes from 'prop-types';\nimport React, { Fragment, useEffect, useRef, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { toast } from 'react-toastify';\nimport { useAddresses, useLocale } from '../../hooks';\nimport { usersActions } from '../../store';\n\nimport { SuggestionRow, SuggestionText } from './styled';\nimport { formatPostalCode } from '../../helpers/formatter';\nimport { Button, Checkbox, Col, Form, Input, Modal, Row, Select, Space, Typography } from 'antd';\n\nconst { isCaLocale } = useLocale();\nconst { Option } = Select;\nconst { Text } = Typography;\n\nconst AddressModal = ({\n hidden,\n toggle,\n address,\n showDeleteAddressView,\n showDefaultAddressView,\n onCancelClick,\n onDeleteClick,\n onSetDefaultClick,\n onSaveChangesClick,\n}) => {\n //Refs\n const formRef = useRef();\n const dispatch = useDispatch();\n const intl = useIntl();\n const {\n defaultUserAddress,\n countries,\n states,\n validatingAddress,\n savingAddress,\n sanitizedAddress,\n addressValidationWarnings,\n addressValidationErrors,\n } = useAddresses();\n\n const [countriesOptions, setCountriesOptions] = useState([]);\n const [statesOptions, setStatesOptions] = useState([]);\n const [defaultShippingAddress, setDefaultShippingAddress] = useState(false);\n const [selectedCountry, setSelectedCountry] = useState(null);\n const [addressLine1, setAddressLine1] = useState('');\n const [addressLine1Suggestion, setAddressLine1Suggestion] = useState('');\n const [addressLine2, setAddressLine2] = useState('');\n const [addressLine2Suggestion, setAddressLine2Suggestion] = useState(''); // eslint-disable-line no-unused-vars\n const [citySuggestion, setCitySuggestion] = useState('');\n const [selectedState, setSelectedState] = useState(null);\n const [stateSuggestion, setStateSuggestion] = useState(null);\n const [postalCode, setPostalCode] = useState('');\n const [postalCodeSuggestion, setPostalCodeSuggestion] = useState('');\n const [addressLatitude, setAddressLatitude] = useState();\n const [addressLongitude, setAddressLongitude] = useState();\n const [addressIsResidential, setAddressIsResidential] = useState(false);\n const [isDirty, setIsDirty] = useState(false);\n const [isInitiallyDefault, setIsInitiallyDefault] = useState(false);\n const [countryList, setCountryList] = useState([]);\n const [stateList, setStateList] = useState([]);\n const [, setPostalCodeInvalid] = useState(false);\n\n useEffect(() => {\n setIsDirty(true);\n if (address) {\n if (defaultUserAddress) {\n let isDefault = address.id === defaultUserAddress.id;\n setDefaultShippingAddress(isDefault);\n setIsInitiallyDefault(isDefault);\n } else {\n setDefaultShippingAddress(false);\n }\n setSelectedState(address.state || '');\n setAddressIsResidential(address.isResidential || false);\n setPostalCodeInvalid(false);\n }\n }, [address]);\n\n useEffect(() => {\n if (countries && countries.length > 0) {\n setCountriesOptions(createCountriesOptions());\n }\n }, [countryList, countries]);\n\n useEffect(() => {\n if (countryList.length === 0) {\n setCountryList(\n Enumerable.from(countries)\n .where((x) => x.iso3 === 'USA' || x.iso3 == 'CAN')\n .toArray()\n ); // SVC-372: Only allow USA\n }\n }, [countries]);\n\n useEffect(() => {\n if (countryList.length > 0) {\n if (address && address.countryCode) {\n setSelectedCountry(address.countryCode);\n } else {\n let defaultVal = 'USA';\n if (isCaLocale()) {\n defaultVal = 'CAN';\n }\n\n let defaultOption = countryList.find((x) => x.iso3 === defaultVal).iso3;\n\n setSelectedCountry(defaultOption);\n }\n }\n }, [address, countryList]);\n\n useEffect(() => {\n if (states && states.length > 0) {\n setStatesOptions(createStatesOptions());\n }\n }, [states]);\n\n useEffect(() => {\n if (stateList && stateList.length > 0 && address && address.state) {\n let option = stateList.find((x) => x.abbreviation === address.state)?.abbreviation;\n\n if (option) {\n setSelectedState(option);\n } else {\n setSelectedState('');\n }\n }\n }, [address, stateList]);\n\n useEffect(() => {\n let list = [];\n if (states && states.length > 0) {\n list = states.filter((state) => {\n if (selectedCountry) {\n return state.countryCode?.toLowerCase() == selectedCountry.toLowerCase();\n }\n return true;\n });\n\n setStateList(list);\n }\n }, [states, selectedCountry]);\n\n useEffect(() => {\n if (selectedCountry !== null) {\n setStatesOptions(createStatesOptions());\n }\n\n setIsDirty(true);\n }, [stateList]);\n\n useEffect(() => {\n if (addressLine1.length > 0) {\n // Handle clearing AddressLine2 if suggestion for AddressLine1 includes it\n if (\n addressLine1 === addressLine1Suggestion &&\n addressLine1Suggestion.toLowerCase().includes(addressLine2.toLowerCase())\n ) {\n setAddressLine2('');\n }\n }\n setAddressLine1Suggestion('');\n setIsDirty(true);\n }, [addressLine1]);\n\n useEffect(() => {\n setAddressLine2Suggestion('');\n setIsDirty(true);\n }, [addressLine2]);\n\n useEffect(() => {\n if (selectedState !== null) {\n setStateSuggestion(null);\n\n if (formRef.current) {\n formRef.current.setFieldsValue({\n state: selectedState,\n });\n }\n }\n\n setIsDirty(true);\n }, [selectedState]);\n\n useEffect(() => {\n setPostalCodeSuggestion('');\n setIsDirty(true);\n }, [postalCode]);\n\n useEffect(() => {\n if (sanitizedAddress) {\n const { addressLine1, city, state, postalCode, latitude, longitude } = sanitizedAddress;\n if (latitude) {\n setAddressLatitude(latitude);\n }\n if (longitude) {\n setAddressLongitude(longitude);\n }\n if (addressLine1) {\n setAddressLine1Suggestion(addressLine1);\n }\n if (city) {\n setCitySuggestion(city);\n }\n if (state && statesOptions.length > 0) {\n let option = stateList.find((x) => x.abbreviation === state).abbreviation;\n if (option) {\n setStateSuggestion(option);\n }\n }\n if (postalCode) {\n setPostalCodeSuggestion(postalCode);\n }\n }\n }, [sanitizedAddress]);\n\n const createCountriesOptions = () => {\n let countriesOptions = [];\n\n if (countryList.length > 0) {\n countriesOptions = countryList.map((country, index) => {\n return (\n \n );\n });\n }\n\n return countriesOptions;\n };\n\n const createStatesOptions = () => {\n let statesOptions = [];\n\n if (stateList && stateList.length > 0) {\n statesOptions = stateList.map((state, index) => {\n return (\n \n );\n });\n }\n\n return statesOptions;\n };\n\n const validate = (formVal) => {\n let isValid = true;\n\n if (formVal.postalCode) {\n if (selectedCountry) {\n isValid = validatePostalCode(formVal.postalCode);\n }\n }\n\n if (formVal.addressLine1) {\n isValid = validatePoBox(formVal.addressLine1);\n }\n\n return isValid;\n };\n\n const validatePostalCode = (postalCode) => {\n let isValid = true;\n\n let isUS = selectedCountry == 'USA' || selectedCountry == 'US';\n let isCA = selectedCountry == 'CAN' || selectedCountry == 'CA';\n let re = /(^\\d{5}$)|(^\\d{9}$)|(^\\d{5}-\\d{4}$)/;\n if (isCA) {\n re = /^[A-Za-z]\\d[A-Za-z][ -]?\\d[A-Za-z]\\d$/;\n }\n if (!re.test(postalCode)) {\n setPostalCodeInvalid(true);\n isValid = false;\n }\n\n return isValid;\n };\n\n const validatePoBox = (address) => {\n let isValid = true;\n\n let re = /\\b(?:p\\.?\\s*o\\.?|post\\s+office)(\\s+)?(?:box|[0-9]*)?\\b/i;\n\n if (re.test(address)) {\n isValid = false;\n }\n\n return isValid;\n };\n\n const onBlurPostalCode = (e) => {\n let formatted = formatPostalCode(selectedCountry, e);\n setPostalCode(formatted);\n\n if (formRef.current) {\n formRef.current.setFieldsValue({\n postalCode: formatted,\n });\n }\n };\n\n const onCountryChange = (country) => {\n setSelectedState('');\n formRef.current.setFieldsValue({\n state: '',\n });\n setSelectedCountry(country);\n };\n\n const clearAddressModal = () => {\n dispatch(usersActions.clearAddressModal());\n setSelectedCountry(null);\n setAddressLine1('');\n setAddressLine1Suggestion('');\n setAddressLine2('');\n setAddressLine2Suggestion('');\n setCitySuggestion('');\n setSelectedState(null);\n setStateSuggestion(null);\n setPostalCode('');\n setPostalCodeSuggestion('');\n setAddressLatitude(null);\n setAddressLongitude(null);\n setAddressIsResidential(false);\n setIsDirty(false);\n setIsInitiallyDefault(false);\n setPostalCodeInvalid(false);\n setPostalCodeSuggestion('');\n setStateSuggestion('');\n setCitySuggestion('');\n setAddressLine1Suggestion('');\n setAddressLine2Suggestion('');\n };\n\n const handleSaveChangesClick = (formVal) => {\n let isValid = validate(formVal);\n\n if (!isValid) {\n toast.error(intl.formatMessage({ id: 'address.pleaseCorrectLabel' }), { autoClose: 5000 });\n } else if (!isDirty) {\n onSaveChangesClick(\n address.id,\n defaultShippingAddress,\n formVal.addressLine1,\n addressLine2,\n formVal.city,\n formVal.state,\n formVal.country,\n formVal.postalCode,\n formVal.addressName,\n addressIsResidential,\n addressLatitude,\n addressLongitude\n );\n } else {\n dispatch(\n usersActions.validateUserAddress(\n formVal.addressLine1,\n addressLine2,\n formVal.city,\n formVal.state,\n formVal.country,\n formVal.postalCode\n )\n )\n .then((payload) => {\n if (payload.data.data.isValid) {\n setIsDirty(false);\n toast.success(intl.formatMessage({ id: 'address.addressIsValid' }), { autoClose: 5000 });\n } else if (payload.data.data.errors) {\n setIsDirty(true);\n toast.error(intl.formatMessage({ id: 'address.addressIsInvalid' }), { autoClose: 5000 });\n } else if (payload.data.data.warnings) {\n setIsDirty(true);\n toast.error(intl.formatMessage({ id: 'address.addressNotFound' }), { autoClose: 5000 });\n }\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'address.sanitizationError' }), { autoClose: 5000 });\n setIsDirty(true);\n });\n }\n };\n\n const deleteAddressMarkup = showDeleteAddressView && address && (\n \n \n \n\n {address.name}\n {address.addressLine1}\n \n {address.city}, {address.state} {address.postalCode}\n \n {address.countryCode}\n \n \n );\n\n const defaultAddressMarkup = showDefaultAddressView && address && (\n \n \n \n\n {address.name}\n {address.addressLine1}\n \n {address.city}, {address.state} {address.postalCode}\n \n {address.countryCode}\n \n \n );\n\n const addressValidationWarningList =\n !isDirty &&\n !addressValidationErrors &&\n addressValidationWarnings &&\n addressValidationWarnings.map((warning, index) => {\n return (\n \n \n \n {warning.text}\n \n \n
\n );\n });\n\n const addressValidationWarningMarkup = addressValidationWarningList && (\n {addressValidationWarningList}\n );\n\n const addressValidationErrorList =\n isDirty &&\n addressValidationErrors &&\n addressValidationErrors.map((error, index) => {\n return (\n \n \n \n {error.text}\n \n \n
\n );\n });\n\n const addressValidationErrorMarkup = addressValidationErrorList && {addressValidationErrorList};\n\n const addressLine1SuggestionMarkup = addressLine1Suggestion && (\n \n \n setFieldValue('addressLine1', addressLine1Suggestion)}\n >\n \n \n \n \n );\n\n const citySuggestionMarkup = citySuggestion && (\n \n \n setFieldValue('city', citySuggestion)}\n >\n \n \n \n \n );\n\n const stateSuggestionMarkup = stateSuggestion && (\n \n \n setFieldValue('state', stateSuggestion)}\n >\n x.abbreviation === stateSuggestion).name }}\n />\n \n \n \n );\n\n const postalCodeSuggestionMarkup = postalCodeSuggestion && (\n \n \n setFieldValue('postalCode', postalCodeSuggestion)}\n >\n \n \n \n \n );\n\n const defaultAddressCheckbox = !isInitiallyDefault && (\n setDefaultShippingAddress(e.target.checked)}\n value={true}\n >\n {intl.formatMessage({ id: 'address.defaultShippingAddressLabel' })}\n \n );\n\n const setFieldValue = (field, value) => {\n if (field) {\n setIsDirty(true);\n\n switch (field) {\n case 'addressLine1':\n formRef.current.setFieldsValue({\n addressLine1: value,\n });\n setAddressLine1Suggestion('');\n return;\n case 'city':\n formRef.current.setFieldsValue({\n city: value,\n });\n setCitySuggestion('');\n return;\n case 'state':\n formRef.current.setFieldsValue({\n state: value,\n });\n setStateSuggestion('');\n return;\n case 'postalCode':\n formRef.current.setFieldsValue({\n postalCode: value,\n });\n setPostalCodeSuggestion('');\n setPostalCodeInvalid(false);\n return;\n }\n }\n };\n\n const editAddressMarkup = !hidden && !showDeleteAddressView && !showDefaultAddressView && address && (\n {\n handleSaveChangesClick(formVal);\n }}\n scrollToFirstError={true}\n onValuesChange={(field, allValues) => {\n let key = Object.keys(field)[0];\n let value = field[key];\n\n setFieldValue(key, value);\n }}\n initialValues={{\n addressName: address.name,\n country: selectedCountry,\n addressLine1: address.addressLine1,\n city: address.city,\n state: selectedState,\n postalCode: address.postalCode,\n }}\n >\n \n \n \n \n onCountryChange(e)}\n optionFilterProp='children'\n filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}\n >\n {countriesOptions}\n \n \n ({\n validator(_, value) {\n if (value && validatePoBox(value)) {\n return Promise.resolve();\n }\n\n if (!value) {\n return Promise.resolve();\n }\n return Promise.reject(new Error(intl.formatMessage({ id: 'address.poBoxesAreNotAllowed' })));\n },\n }),\n ]}\n >\n \n \n {addressLine1SuggestionMarkup}\n \n \n \n {citySuggestionMarkup}\n \n \n \n option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}\n >\n {statesOptions}\n \n \n {stateSuggestionMarkup}\n \n \n ({\n validator(_, value) {\n if (value && validatePostalCode(value)) {\n return Promise.resolve();\n }\n\n if (!value) {\n return Promise.reject(new Error(intl.formatMessage({ id: 'address.postalCodeRequired' })));\n }\n return Promise.reject(new Error(intl.formatMessage({ id: 'address.postalCodeInvalid' })));\n },\n }),\n ]}\n >\n onBlurPostalCode(e.target.value)} />\n \n {postalCodeSuggestionMarkup}\n \n
\n \n setAddressIsResidential(e.target.checked)}\n >\n {intl.formatMessage({ id: 'address.residentialAddressLabel' })}\n \n {defaultAddressCheckbox}\n \n {addressValidationWarningMarkup}\n {addressValidationErrorMarkup}\n \n );\n\n return (\n \n ) : showDefaultAddressView ? (\n \n ) : address.id ? (\n \n ) : (\n \n )\n }\n open={!hidden}\n footer={[\n onCancelClick()}\n >\n Cancel\n ,\n !showDeleteAddressView && !showDefaultAddressView && (\n formRef?.current?.submit()}\n loading={validatingAddress || savingAddress}\n >\n {isDirty ? (\n \n ) : address.id ? (\n \n ) : (\n \n )}\n \n ),\n showDeleteAddressView && (\n onDeleteClick(address.id, defaultShippingAddress)}\n >\n \n \n ),\n showDefaultAddressView && (\n onSetDefaultClick(address.id)}\n >\n \n \n ),\n ]}\n onCancel={toggle}\n destroyOnClose={true}\n afterClose={clearAddressModal}\n >\n {deleteAddressMarkup}\n {defaultAddressMarkup}\n {editAddressMarkup}\n \n );\n};\n\nAddressModal.propTypes = {\n hidden: PropTypes.bool,\n toggle: PropTypes.func,\n address: PropTypes.object,\n showDeleteAddressView: PropTypes.bool,\n showDefaultAddressView: PropTypes.bool,\n onCancelClick: PropTypes.func,\n onDeleteClick: PropTypes.func,\n onSetDefaultClick: PropTypes.func,\n onSaveChangesClick: PropTypes.func,\n};\n\nAddressModal.defaultProps = {\n showDeleteAddressView: false,\n showDefaultAddressView: false,\n};\n\nexport default AddressModal;\n","var _path;\nvar _excluded = [\"svgRef\", \"title\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport React from \"react\";\nvar SvgMapMarker = function SvgMapMarker(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n \"aria-hidden\": \"true\",\n focusable: \"false\",\n \"data-prefix\": \"fas\",\n \"data-icon\": \"map-marker-alt\",\n className: \"svg-inline--fa fa-map-marker-alt fa-w-12\",\n role: \"img\",\n viewBox: \"0 0 384 512\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"currentColor\",\n d: \"M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z\"\n })));\n};\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgMapMarker, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/map-marker.febe9696.svg\";\nexport { ForwardRef as ReactComponent };","import {Button, Form, Input, Select, Typography} from 'antd';\nimport styled from 'styled-components';\n\nconst { Title } = Typography;\n\nexport const DisabledInput = styled(Input)`\n cursor: default !important;\n color: #4a4a4a !important;\n background-color: #f2f2f2 !important;\n padding: 0.375rem 0.75rem;\n`;\n\nexport const UserModalDataFormItem = styled(Form.Item)`\n font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;\n margin-bottom: 0;\n\n label.ant-form-item-required::before {\n display: none !important;\n }\n\n .ant-form-item-explain-error {\n font-size: 0.9rem;\n color: #db011c\n }\n`;\n\nexport const UserModalInput = styled(Input)`\n padding: 0.375rem 0.75rem;\n width: 100%;\n`;\n\nexport const UserModalSelect = styled(Select)`\n font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;\n width: 100% !important;\n font-size: 16px !important;\n`;\n\nexport const SelectTitle = styled(Title)`\n font-size: 1rem !important;\n font-weight: 400;\n font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n`;\n\nexport const SubmitButton = styled(Button)`\n background-color: #db011c; \n color: #fff;\n`;\n\nexport const CancelButton = styled(Button)`\n background-color: #cccccc\n`;","import React, { forwardRef } from \"react\";\nimport InputMask from \"react-input-mask\";\nimport { Input } from \"antd\";\nimport PropTypes from 'prop-types';\n\nexport const MaskedInput = forwardRef((props, ref) => {\n return (\n \n {inputProps => (\n \n )}\n \n );\n});\n \nMaskedInput.propTypes = {\n mask: PropTypes.string,\n};","import { Col, Form, Modal, Row, Typography} from 'antd';\nimport Enumerable from 'linq';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { toast } from 'react-toastify';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faXmark } from '@fortawesome/free-solid-svg-icons';\n\nimport {\n SelectTitle,\n UserModalInput,\n UserModalSelect,\n UserModalDataFormItem, \n SubmitButton, \n CancelButton,\n DisabledInput,\n} from './styled'\nimport { stripNonNumeric } from '../../helpers/formatter';\nimport { MaskedInput } from '../../helpers/maskedInput'\nimport { useUser } from '../../hooks';\nimport { usersActions, localesActions } from '../../store';\n\nconst { Text } = Typography;\n\nconst UserMetadataModal = ({ hidden, toggle }) => {\n const intl = useIntl();\n const dispatch = useDispatch();\n const {\n email,\n accountNumber,\n firstName,\n lastName,\n phoneNumber,\n updatingUserMetadata,\n userMetadataIncomplete,\n preferredContactMethod,\n preferredLanguage,\n } = useUser();\n\n const [form] = Form.useForm();\n\n const [firstNameVal, setFirstNameVal] = useState(firstName);\n const [lastNameVal, setLastNameVal] = useState(lastName);\n const [phoneNumberVal, setPhoneNumberVal] = useState(phoneNumber);\n const [preferredContactMethodOptions, setPreferredContactMethodOptions] = useState([]);\n const [preferredLanguageOptions, setPreferredLanguageOptions] = useState([]);\n const [selectedPreferredContactMethod, setSelectedPreferredContactMethod] = useState(null);\n const [selectedPreferredLanguage, setselectedPreferredLanguage] = useState(null);\n\n useEffect(() => {\n setPreferredContactMethodOptions(createPreferredContactMethodOptions());\n setPreferredLanguageOptions(createPreferredLanguageOptions());\n }, []);\n\n useEffect(() => {\n if (preferredContactMethodOptions.length > 0) {\n let option = Enumerable.from(preferredContactMethodOptions).firstOrDefault(\n x => x.value === preferredContactMethod\n );\n if (option) {\n setSelectedPreferredContactMethod(option.value);\n }\n }\n }, [preferredContactMethod, preferredContactMethodOptions]);\n\n useEffect(() => {\n if (preferredLanguageOptions.length > 0) {\n let option = Enumerable.from(preferredLanguageOptions).firstOrDefault(x => x.value === preferredLanguage);\n if (option) {\n setselectedPreferredLanguage(option?.value);\n } else {\n setselectedPreferredLanguage(preferredLanguageOptions[0].value)\n }\n }\n }, [preferredLanguage, preferredLanguageOptions]);\n\n const handleSaveChanges = () => {\n let preferredContactMethodVal = selectedPreferredContactMethod;\n let preferredLanguageVal = selectedPreferredLanguage;\n dispatch(\n usersActions.updateUserPreferences(\n firstNameVal,\n lastNameVal,\n phoneNumberVal,\n preferredContactMethodVal,\n preferredLanguageVal\n )\n )\n .then(() => {\n toggle();\n if (preferredLanguageVal) {\n dispatch(localesActions.updateLocale(preferredLanguageVal));\n }\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'profile.profileSaveError' }), { autoClose: false });\n });\n };\n\n const createPreferredContactMethodOptions = () => {\n return [\n {\n label: intl.formatMessage({ id: 'profile.preferredContactMethods.label1' }),\n value: 1,\n },\n {\n label: intl.formatMessage({ id: 'profile.preferredContactMethods.label2' }),\n value: 2,\n },\n ];\n };\n\n const createPreferredLanguageOptions = () => {\n return [\n {\n label: intl.formatMessage({ id: 'profile.preferredLanguage.english' }),\n value: 'en-US',\n },\n {\n label: intl.formatMessage({ id: 'profile.preferredLanguage.french' }),\n value: 'fr-CA',\n },\n ];\n };\n\n const incompleteMetadataMarkup = userMetadataIncomplete() && (\n \n \n \n \n \n \n
\n );\n\n return (\n }\n\n footer={[\n {\n toggle();\n form.resetFields();\n }} \n className='mr-2'>\n \n ,\n form.submit()} loading={updatingUserMetadata}>\n \n \n ]}\n >\n {incompleteMetadataMarkup}\n handleSaveChanges()}\n layout='vertical'\n >\n \n \n setFirstNameVal(e.target.value)}\n rules={[\n {\n required: 'true',\n message: intl.formatMessage({ id: 'userMetadataModal.firstNameInvalid' }),\n \n },\n ]}\n >\n \n \n \n \n setLastNameVal(e.target.value)}\n rules={[\n {\n required: 'true',\n message: intl.formatMessage({ id: 'userMetadataModal.lastNameInvalid' }),\n },\n ]}\n >\n \n \n \n
\n \n {email && (\n \n \n \n \n \n )}\n {accountNumber && (\n \n \n \n \n \n )}\n
\n \n \n setPhoneNumberVal(stripNonNumeric(e.target.value))}\n rules={[\n {\n required: 'true',\n pattern: new RegExp(/^(\\+\\d{1,2}\\s?)?1?-?\\.?\\s?\\(?\\d{3}\\)?[\\s.-]?\\d{3}[\\s.-]?\\d{4}$/),\n message: intl.formatMessage({ id: 'userMetadataModal.phoneNumberInvalid' }),\n }\n ]}\n >\n \n \n \n
\n \n \n \n {intl.formatMessage({ id: 'userMetadataModal.preferredContactMethodLabel' })}\n \n setSelectedPreferredContactMethod(obj)}\n size='large'\n />\n \n
\n \n \n \n {intl.formatMessage({ id: 'userMetadataModal.preferredLanguageLabel' })}\n \n setselectedPreferredLanguage(obj)}\n placeholder={intl.formatMessage({ id: 'general.pleaseSelect' })}\n size='large'\n />\n \n
\n \n \n );\n};\n\nUserMetadataModal.propTypes = {\n hidden: PropTypes.bool,\n toggle: PropTypes.func,\n};\n\nexport default UserMetadataModal;\n","import { Space } from 'antd';\nimport React from 'react';\nimport styled, { css } from 'styled-components';\n\nexport const PizzaSpace = styled(Space)`\n > .ant-space-item {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n`;\n\nexport const StepIconWrapper = styled.div`\n width: 3.5em;\n height: 3.5em;\n border-radius: 50%;\n font-size: 1rem;\n ${props => (props.isActive ? 'background-color: #17a2b8;' : completeColor)};\n color: #ffffff;\n display: flex;\n align-items: center;\n justify-content: center;\n ${props => props.isActive && pulseAnimation};\n\n > svg {\n font-size: 1.25em;\n }\n`;\n\nconst completeColor = css`\n background-color: ${props => (props.isComplete ? '#28a745' : '#cccccc')};\n`;\n\nconst pulseAnimation = css`\n animation: pulse-animation 1.75s infinite;\n\n @keyframes pulse-animation {\n 0% {\n box-shadow: 0 0 0 0px rgba(23, 162, 184, 0.4);\n }\n 100% {\n box-shadow: 0 0 0 20px rgba(23, 162, 184, 0);\n }\n }\n`;\n","import { Grid, Space, Typography } from 'antd';\nimport React from 'react';\nimport { PizzaSpace, StepIconWrapper } from './styled';\n\nconst { useBreakpoint } = Grid;\nconst { Text } = Typography;\n\nconst PizzaTracker = ({ steps, currentId }) => {\n const breakpoints = useBreakpoint();\n\n const stepsMarkup =\n steps &&\n steps.map(step => {\n if (step.isVisible === undefined) {\n step.isVisible = true;\n }\n\n if (step.isVisible !== false) {\n return (\n \n \n {step.icon}\n \n {step.label}\n \n );\n }\n });\n\n return (\n \n {stepsMarkup}\n \n );\n};\n\nexport default PizzaTracker;\n","import PizzaTracker from './PizzaTracker';\n\nexport default PizzaTracker;\n","import { Descriptions } from 'antd';\nimport styled from 'styled-components';\n\nexport const StyledDescriptions = styled(Descriptions)`\n .ant-descriptions-view {\n border: none;\n\n tr,\n th,\n td {\n padding: 0;\n border: none;\n background: none;\n }\n\n th.ant-descriptions-item-label {\n width: 1px;\n padding-right: 1em;\n vertical-align: top;\n white-space: nowrap;\n font-weight: 600;\n }\n }\n`;\n\nexport const StyledDescriptionsItem = styled(Descriptions.Item)``;\n","import React from 'react';\nimport { StyledDescriptions, StyledDescriptionsItem } from './styled';\n\nconst InfoGrid = ({ children, ...rest }) => {\n return (\n \n {children}\n \n );\n};\n\nconst InfoGridItem = ({ children, ...rest }) => {\n return {children};\n};\n\nexport { InfoGrid, InfoGridItem };\n","import React from 'react';\nimport { Collapse, List } from 'antd';\nimport styled from 'styled-components';\n\nexport const CollapsiblePanel = styled(Collapse.Panel)`\n .ant-collapse-header {\n display: flex;\n align-items: center;\n }\n`;\n\nexport const UncollapsibleItem = styled(List.Item)`\n background-color: #ffffff;\n`;\n","import { faFileDownload } from '@fortawesome/free-solid-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { Button, Col, Collapse, Descriptions, Image, List, Row, Typography } from 'antd';\nimport React, { useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { useHistory } from 'react-router';\nimport { useProofOfPurchase } from '../../hooks';\nimport { CollapsiblePanel, UncollapsibleItem } from './styled';\n\nconst { Text } = Typography;\n\nconst CollapsibleOrderList = ({ orders, showViewButton }) => {\n const intl = useIntl();\n const history = useHistory();\n const dispatch = useDispatch();\n const { downloadProofOfPurchase, downloadingProofOfPurchase } = useProofOfPurchase();\n\n const [isRecycleOrder, setIsRecycleOrder] = useState(false);\n\n useEffect(() => {\n if (orders && orders.length > 0) {\n setIsRecycleOrder(orders[0].serviceOrderRecyclingId ? true : false);\n }\n }, [orders]);\n\n const handleProofOfPurchaseClick = serviceOrderId => {\n dispatch(downloadProofOfPurchase(serviceOrderId)).then(response => {\n window.open(response.data.data.url);\n });\n };\n\n const ordersMarkup =\n orders &&\n orders.map(order => {\n let primaryTool = order.serviceOrderLines.find(x => x.isPrimaryTool === true);\n\n if (!primaryTool) {\n return null;\n }\n\n let serialNumber =\n primaryTool.serialNumber && primaryTool.serialNumber.length > 0\n ? primaryTool.serialNumber\n : intl.formatMessage({ id: 'general.notProvided' });\n let tagNumber =\n order.mcaCustomerRef && order.mcaCustomerRef.length > 0\n ? order.mcaCustomerRef\n : intl.formatMessage({ id: 'general.notProvided' });\n\n let viewButtonMarkup = showViewButton && (\n history.push(`/repairdetail/${order.id}`)}\n data-test-id='viewOrderDetailsButton'\n >\n \n \n );\n\n let headerMarkup = (\n \n \n \n \n \n {primaryTool.sku}\n
\n {primaryTool.description}\n \n \n \n \n \n
\n {serialNumber}\n \n \n {viewButtonMarkup}\n \n
\n );\n\n let proofOfPurchaseMarkup = order.proofOfPurchaseIncluded ? (\n \n ) : order.proofOfPurchaseBlob ? (\n handleProofOfPurchaseClick(order.id)}\n icon={}\n loading={downloadingProofOfPurchase}\n data-test-id='downloadProofOfPurchaseButton'\n >\n \n \n \n \n ) : (\n \n );\n\n let serviceOrderIncluded = order?.serviceOrderIncluded\n ?.map((id, index) => {\n return intl.formatMessage({ id: `productInclusions.${id}` });\n })\n .join(', ');\n\n let serviceOrderProblems = order?.serviceOrderProblems\n ?.map((id, index) => {\n return intl.formatMessage({ id: `productProblems.${id}` });\n })\n .join(', ');\n\n return isRecycleOrder ? (\n {headerMarkup}\n ) : (\n \n \n \n {serialNumber}\n \n \n {tagNumber}\n \n \n {proofOfPurchaseMarkup}\n \n \n {serviceOrderProblems ? serviceOrderProblems : order.problemDescription}\n {serviceOrderProblems && order.problemDescriptionOther ? ', ' + order.problemDescriptionOther : ''}\n \n \n {serviceOrderIncluded ? serviceOrderIncluded : order.included}\n {serviceOrderIncluded && order.includedOther ? ', ' + order.includedOther : ''}\n \n \n \n );\n });\n\n return isRecycleOrder ? {ordersMarkup}
: {ordersMarkup};\n};\n\nexport default CollapsibleOrderList;\n","import { Typography } from 'antd';\nimport React, { Fragment } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { InfoGrid, InfoGridItem } from '../InfoGrid';\n\nconst { Title } = Typography;\n\nconst AccountInfo = ({ accountName, accountNumber, phone, email }) => {\n const intl = useIntl();\n\n return (\n \n \n <FormattedMessage id='repairDetails.accountInfoTitle' />\n \n \n \n {accountName}\n \n \n {accountNumber}\n \n {phone}\n {email}\n \n \n );\n};\n\nexport default AccountInfo;\n","import { Typography } from 'antd';\nimport React, { Fragment } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nconst { Text, Title } = Typography;\n\nconst ShippingInfo = ({ senderName, senderLine1, senderCity, senderState, senderPostalCode, senderCountry }) => {\n return (\n \n \n <FormattedMessage id='repairDetails.shippingInfoTitle' />\n \n {senderName}\n
\n {senderLine1}\n
\n {`${senderCity}, ${senderState} ${senderPostalCode} ${senderCountry}`}\n \n );\n};\n\nexport default ShippingInfo;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { Card } from 'antd';\n\nexport const StyledCard = styled(Card)`\n border: 1px solid rgba(0, 0, 0, 0.1);\n margin-bottom: 20px;\n box-shadow: rgba(0, 0, 0, 0.075) 0px 0px 3px 0px;\n`;\n","import React from 'react';\nimport { StyledCard } from './styled';\n\nconst ServiceCard = ({ children, ...rest }) => {\n return {children};\n};\n\nexport default ServiceCard;\n","import React from 'react';\nimport { Typography } from 'antd';\nimport { FormattedMessage } from 'react-intl';\n\nconst { Text } = Typography;\n\nconst LmrOptions = ({ lmrMappings, country, ...rest }) => {\n if ((!lmrMappings && country.toLowerCase() === 'us') || country.toLowerCase() === 'usa') {\n return (\n \n \n \n );\n } else if ((!lmrMappings && country.toLowerCase() === 'ca') || country.toLowerCase() === 'can') {\n return (\n \n \n \n );\n } else if (!lmrMappings) {\n return null;\n }\n\n const lmrMappingsList = lmrMappings.length > 0 ? lmrMappings : [lmrMappings];\n\n if (!country || country.toLowerCase() === 'us' || country.toLowerCase() === 'usa') {\n return lmrMappingsList.map((mapping, index) => {\n return lmrMappingsList.length >= 1 && mapping.lmrPrice > 0 ? (\n \n \n \n \n
\n ) : lmrMappingsList.length === 1 && mapping.lmrPrice === 0 ? (\n \n ) : null;\n });\n } else if (country.toLowerCase() === 'ca' || country.toLowerCase() === 'can') {\n return lmrMappingsList.map((mapping, index) => {\n return lmrMappingsList.length >= 1 && mapping.lmrPriceCa > 0 ? (\n \n \n \n \n
\n ) : lmrMappingsList.length === 1 && mapping.lmrPriceCa === 0 ? (\n \n ) : null;\n });\n } else {\n return null;\n }\n};\n\nexport default LmrOptions;\n","import LmrOptions from './LmrOptions';\n\nexport default LmrOptions;\n","export default {\n PRODUCTS: 'ProductsAdmin',\n SERVICECENTERS: 'ServiceCenterAdmin',\n PRODUCTPROBLEMS: 'ProductProblemsAdmin',\n PRODUCTINCLUSIONS: 'ProductIncludedAdmin',\n SERVICEORDERS: 'ServiceOrdersAdmin',\n PRODUCTS_LMR: 'ProductsAdmin.Lmr',\n PRODUCTS_INCLUSIONS: 'ProductsAdmin.Included',\n PRODUCTS_PROBLEMS: 'ProductsAdmin.Problems',\n PRODUCTS_STATES: 'ProductsAdmin.States',\n SERVICECENTERS_SERVICECENTERS: 'ServiceCenterAdmin.ServiceCenters',\n SERVICECENTERS_STATES: 'ServiceCenterAdmin.States',\n ANNOUNCEMENTS: 'AnnouncementsAdmin',\n SERVICEORDERS_RESYNC_INDEX: 'ServiceOrdersAdmin.ResyncIndex',\n};\n","export default {\n PAYLATER: 1,\n PURCHASEORDER: 2,\n CREDITCARD: 3,\n};\n","export default {\n REPAIR: 1,\n RETURN: 2,\n RECYCLE: 3,\n};\n","export default {\n EMAIL: 1,\n PHONE: 2,\n};\n","export default {\n GENERAL: 'general',\n NOTIFICATIONS: 'notifications',\n LINKEDEMAILS: 'linkedEmails',\n ADDRESSES: 'addresses',\n PAYMENTMETHOD: 'paymentMethod'\n}","export default {\n DENIEDWARRANTY: 10,\n WILLCALL: 15,\n};\n","export default {\n REPAIR: 'Repair',\n RECYCLE: 'Recycle',\n RETURN: 'Return'\n};\n","import { Icon, ModalBody } from '@met/react-components';\nimport { Breadcrumb, Button, Col, Collapse, Descriptions, Form, Pagination, Row, Table, Typography } from 'antd';\nimport styled from 'styled-components';\n\nconst { Text } = Typography;\nconst { Panel } = Collapse;\n\nexport const ProductsContainer = styled.div`\n margin-top: 1rem;\n`;\n\nexport const ProductImage = styled.img`\n max-width: 100%;\n max-height: 150px;\n padding: 0.5em;\n`;\n\nexport const CollapsibleHeaderRow = styled(Row)`\n width: 100%;\n`;\n\nexport const ServiceOrderLinesWrapper = styled.div`\n max-height: 500px;\n overflow-x: hidden;\n overflow-y: auto;\n`;\n\nexport const ServiceOrderLineRow = styled(Row)`\n &:nth-child(odd) {\n background-color: ${props => props.theme.colors.lightGray};\n }\n`;\n\nexport const Divider = styled.hr`\n height: 1px;\n margin-top: 1em;\n margin-bottom: 1em;\n border: none;\n background-color: ${props => props.theme.colors.lightGray};\n`;\n\nexport const ServiceOrderLine = styled(Row)`\n &:nth-child(even) {\n background-color: ${props => props.theme.colors.lightGray};\n }\n`;\n\nexport const Image = styled.img`\n max-width: 100%;\n max-height: 130px;\n`;\n\nexport const LmrMappingsTable = styled(Table)`\n tbody {\n td:first-child,\n td:last-child {\n width: 1px;\n }\n`;\n\nexport const ServiceMappingsTable = styled(Table)`\n thead {\n display: none;\n }\n\n tbody {\n td:first-child,\n td:last-child {\n width: 1px;\n }\n }\n`;\n\nexport const ProblemMappingsTable = styled(Table)`\n tbody {\n td:first-child,\n td:last-child {\n width: 1px;\n }\n }\n`;\n\nexport const IncludedMappingsTable = styled(Table)`\n thead {\n display: none;\n }\n\n tbody {\n td:first-child,\n td:last-child {\n width: 1px;\n }\n }\n`;\n\nexport const ServiceCenterMappingModalBody = styled(ModalBody)`\n min-height: 15em;\n`;\n\nexport const ProductProblemMappingModalBody = styled(ModalBody)`\n min-height: 30em;\n`;\nexport const ProductIncludedMappingModalBody = styled(ModalBody)`\n min-height: 30em;\n`;\n\nexport const ButtonWrapper = styled.div`\n margin-top: 1rem;\n\n @media (max-width: ${props => props.theme.screenSize.md}) {\n margin-top: 0;\n margin-bottom: 0;\n }\n`;\n\nexport const PostalCodeCol = styled(Col)`\n @media (max-width: ${props => props.theme.screenSize.md}) {\n margin-top: 1rem;\n }\n`;\n\nexport const StyledButton = styled(Button)`\n margin-left: 1rem;\n`;\n\nexport const SuggestionText = styled(Text)`\n margin-top: 0.25rem;\n color: rgb(23, 162, 184);\n cursor: pointer;\n\n :hover {\n color: rgb(17, 122, 139);\n }\n`;\n\nexport const SuggestionRow = styled(Row)`\n margin-top: -25px;\n`;\n\nexport const StyledIcon = styled(Icon)`\n margin-right: 0.5rem;\n`;\n\nexport const Pager = styled(Pagination)`\n display: flex;\n justify-content: center;\n margin: 1rem 0;\n`;\n\nexport const NoServiceOrderFound = styled(Row)`\n border: 1px solid rgba(0, 0, 0, 0.1);\n padding: 10px;\n`;\n\nexport const MaxRow = styled(Row)`\n width: 100%;\n`;\nexport const ButtonIconWrapper = styled.div`\n padding-right: 5px;\n visibility: visible;\n height: 100%;\n @media (max-width: ${props => props.theme.responsive.xl}) {\n visibility: hidden;\n height: 0;\n }\n`;\nexport const IncludedResultsDiv = styled.div`\n max-height: 70vh;\n overflow-y: scroll;\n overflow-x: hidden;\n`;\nexport const RowIconWrapper = styled.div`\n font-size: 150%;\n`;\nexport const FilterBarRow = styled(Row)`\n padding-bottom: 16px;\n`;\nexport const IncludedFilterLabelWrapper = styled.div`\n padding-top: 5px;\n`;\n\nexport const IncludedButtonWrapper = styled.div`\n display: flex;\n justify-content: flex-end;\n`;\n\nexport const StyledBreadcrumb = styled(Breadcrumb)`\n margin-bottom: 1rem;\n padding: 10px;\n\n background-color: ${props => props.theme.colors.lightGray};\n`;\n\nexport const StyledCol = styled(Col)`\n padding-left: 2rem;\n align-self: center;\n`;\n\nexport const StyledUpdatedCol = styled(Col)`\n align-self: center;\n`;\n\nexport const DeleteTextWrapper = styled(Typography)`\n cursor: pointer;\n color: rgb(220, 1, 28);\n text-decoration: underline;\n`;\n\nexport const MappingsButtonWrapper = styled(Button)`\n float: right;\n background-color: rgb(220, 1, 28);\n color: white;\n font-size: 18px;\n`;\n\nexport const StyledSpan = styled.span`\n padding-left: 0.0625rem;\n }\n`;\n\nexport const ProductProblemForm = styled(Form)`\n #insertProductProblem_addProblemItem {\n box-shadow: none;\n }\n`;\n\nexport const StyledDescription = styled(Descriptions)`\n .ant-descriptions-title {\n font-weight: normal;\n }\n\n .ant-descriptions-view {\n border: none;\n }\n\n .ant-descriptions-item-label {\n width: 30%;\n font-weight: bold;\n white-space: normal;\n }\n\n table tr.ant-descriptions-row {\n border-bottom: none;\n }\n\n table th.ant-descriptions-item-label {\n background-color: #ffffff;\n }\n\n table th.ant-descriptions-item-label {\n padding: 5px 24px;\n border-right: none;\n }\n\n table td.ant-descriptions-item-content {\n padding: 5px 24px;\n }\n\n .ant-descriptions-row > th,\n .ant-descriptions-row > td {\n padding-bottom: 10px;\n }\n`;\n\nexport const AnnouncementsAddButtonWrapper = styled(Button)`\n float: right;\n background-color: rgb(220, 1, 28);\n color: white;\n font-size: 18px;\n`;\n\nexport const AnnouncementsButtonWrapper = styled(Button)`\n background-color: rgb(220, 1, 28);\n color: white;\n font-size: 18px;\n`;\n\nexport const CenteredPanel = styled(Panel)`\n .ant-collapse-header {\n padding: 1em !important;\n\n > div {\n align-self: center;\n }\n }\n`;\n\nexport const StyledDescriptions = styled(Descriptions) `\n .ant-descriptions-title {\n font-weight: 500;\n }\n .ant-descriptions-item-label {\n font-weight: bold;\n }\n`;\n","import {\n Button,\n Col,\n Icon,\n InputGroup,\n InputGroupAppend,\n ListGroup,\n ListGroupItem,\n Loader,\n Row,\n Text,\n TextInput,\n} from '@met/react-components';\nimport React, { Fragment, useEffect, useRef, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useHistory } from 'react-router';\nimport { toast } from 'react-toastify';\nimport { StringParam, useQueryParams, withDefault } from 'use-query-params';\nimport { productsActions } from '../../../../store';\nimport { ProductImage } from '../styled';\nimport { Button as AntButton, PageHeader, Popconfirm } from 'antd';\nimport { RedoOutlined } from '@ant-design/icons';\n\nconst ProductsTab = () => {\n const intl = useIntl();\n const dispatch = useDispatch();\n const history = useHistory();\n const searchTermRef = useRef(null);\n\n const [query, setQuery] = useQueryParams({\n q: withDefault(StringParam, undefined),\n });\n\n const searchingProducts = useSelector(state => state.products.searchProducts.isLoading);\n const products = useSelector(state => state.products.searchProducts.products);\n\n const [searchTerm, setSearchTerm] = useState(query.q || '');\n const [refreshAllLmrTriggered, setRefreshAllLmrTriggered] = useState(false);\n\n useEffect(() => {\n searchTermRef.current.focus();\n }, []);\n\n useEffect(() => {\n if (query.q !== undefined) {\n searchProducts();\n } else {\n clearSearchProducts();\n }\n }, [query]);\n\n useEffect(() => {\n if (refreshAllLmrTriggered) {\n dispatch(productsActions.loadAllLmrMappings())\n .then(() => {\n setTimeout(() => {\n setRefreshAllLmrTriggered(false);\n\n toast.success(intl.formatMessage({ id: 'admin.products.refreshLmrMappingsSuccess' }));\n }, 2000);\n })\n .catch(() => {\n setRefreshAllLmrTriggered(false);\n\n toast.error(intl.formatMessage({ id: 'admin.products.refreshLmrMappingsError' }));\n });\n }\n }, [refreshAllLmrTriggered]);\n\n const search = () => {\n setQuery({ q: searchTerm });\n\n searchProducts();\n };\n\n const handleEditClick = product => {\n history.push(`/admin/products/${product.sku}`);\n };\n\n const searchProducts = () => {\n dispatch(productsActions.searchProducts(searchTerm)).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.products.searchError' }));\n });\n };\n\n const clearSearchProducts = () => {\n dispatch(productsActions.clearSearchProducts());\n };\n\n const searchResultsList =\n products &&\n products.map((product, index) => {\n return (\n \n \n \n \n \n \n {product.sku}\n \n {product.description}\n \n \n \n \n \n
\n \n );\n });\n\n const loadingSearchResultsMarkup = searchingProducts && (\n \n \n \n \n
\n );\n\n const searchResultsMarkup = products && products.length > 0 && (\n \n \n \n \n \n
\n \n \n
\n \n \n {searchResultsList}\n \n
\n \n );\n\n const noSearchResultsMarkup = query.q && !searchingProducts && products && products.length === 0 && (\n \n \n \n \n \n \n \n \n
\n \n \n \n
\n );\n\n return (\n setRefreshAllLmrTriggered(true)}\n >\n }\n >\n \n \n \n \n ,\n ]}\n >\n \n \n \n \n \n \n setSearchTerm(e.target.value)}\n value={searchTerm}\n onSubmit={search}\n inputRef={searchTermRef}\n />\n \n \n \n \n \n
\n {loadingSearchResultsMarkup}\n {searchResultsMarkup}\n {noSearchResultsMarkup}\n \n );\n};\n\nexport default ProductsTab;\n","import { Button, Col, Icon, Row, Text } from '@met/react-components';\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { CheckOutlined, CloseOutlined } from '@ant-design/icons';\n\nconst ServiceCenterLine = ({ serviceCenter, editServiceCenterClickOnClick, toggleServiceCenter }) => {\n const isActiveIcon = serviceCenter.isActive ? (\n \n \n \n ) : (\n \n \n \n );\n return (\n \n \n \n \n \n \n {serviceCenter.description}\n \n \n \n \n \n \n \n {serviceCenter.axId}\n \n \n \n \n \n \n \n {serviceCenter.countryCode}\n \n \n \n \n \n \n {isActiveIcon}\n \n \n \n \n
\n );\n};\n\nexport default ServiceCenterLine;\n","import Enumerable from 'linq';\nimport PropTypes from 'prop-types';\nimport React, { Fragment, useEffect, useRef, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { toast } from 'react-toastify';\nimport { useAddresses, useLocale} from '../../../../hooks';\nimport { usersActions } from '../../../../store';\n\nimport { SuggestionText, SuggestionRow } from '../styled';\nimport { formatPostalCode } from '../../../../helpers/formatter';\nimport { Button, Switch, Col, Form, Input, Modal, Row, Select, Typography } from 'antd';\n\nconst { isCaLocale } = useLocale();\nconst { Option } = Select;\nconst { Text } = Typography;\n\nconst ServiceCenterModal = ({ hidden, toggle, serviceCenter, onCancelClick, onSaveChangesClick }) => {\n //Refs\n const formRef = useRef();\n\n const intl = useIntl();\n const dispatch = useDispatch();\n const {\n countries,\n states,\n validatingAddress,\n savingAddress,\n sanitizedAddress,\n addressValidationWarnings,\n addressValidationErrors,\n } = useAddresses();\n\n const [countriesOptions, setCountriesOptions] = useState([]);\n const [statesOptions, setStatesOptions] = useState([]);\n const [selectedCountry, setSelectedCountry] = useState(null);\n const [addressLine1Suggestion, setAddressLine1Suggestion] = useState('');\n const [addressLine2, setAddressLine2] = useState('');\n const [citySuggestion, setCitySuggestion] = useState('');\n const [selectedState, setSelectedState] = useState(null);\n const [stateSuggestion, setStateSuggestion] = useState(null);\n const [postalCodeSuggestion, setPostalCodeSuggestion] = useState('');\n const [isDirty, setIsDirty] = useState(false);\n const [addressLine2Suggestion, setAddressLine2Suggestion] = useState(''); // eslint-disable-line no-unused-vars\n const [countryList, setCountryList] = useState([]);\n const [stateList, setStateList] = useState([]);\n\n useEffect(() => {\n if (serviceCenter) {\n setSelectedState(serviceCenter.state || '');\n setSelectedCountry(serviceCenter.country || '');\n }\n }, [serviceCenter]);\n\n useEffect(() => {\n if (countryList && countryList.length > 0) {\n setCountriesOptions(createCountriesOptions());\n }\n }, [countryList]);\n\n useEffect(() => {\n if (countries && countries.length > 0) {\n setCountryList(\n Enumerable.from(countries)\n .where(x => x.iso3 === 'USA' || x.iso3 === 'CAN')\n .toArray()\n ); // SVC-372: Only allow USA\n }\n }, [countries]);\n\n useEffect(() => {\n if (countryList.length > 0) {\n if (serviceCenter && serviceCenter.countryCode) {\n setSelectedCountry(serviceCenter.countryCode);\n } else {\n let defaultVal = 'USA';\n if (isCaLocale()) {\n defaultVal = 'CAN';\n }\n\n let defaultOption = countryList.find(x => x.iso3 === defaultVal).iso3;\n\n setSelectedCountry(defaultOption);\n }\n }\n }, [serviceCenter, countryList]);\n\n useEffect(() => {\n let list = [];\n if (states && states.length > 0) {\n list = states.filter(state => {\n if (selectedCountry) {\n return state.countryCode?.toLowerCase() == selectedCountry.toLowerCase();\n }\n return true;\n });\n\n setStateList(list);\n }\n }, [states, selectedCountry]);\n\n useEffect(() => {\n if (selectedCountry !== null) {\n setStatesOptions(createStatesOptions());\n }\n\n setIsDirty(true);\n }, [stateList]);\n\n useEffect(() => {\n if (statesOptions.length > 0 && serviceCenter && serviceCenter.state) {\n let option = Enumerable.from(statesOptions).firstOrDefault(x => x.value === serviceCenter.state);\n if (option) setSelectedState(option);\n } else {\n setSelectedState('');\n }\n }, [serviceCenter, statesOptions]);\n\n useEffect(() => {\n if (selectedState !== null) {\n setStateSuggestion(null);\n\n if (formRef.current) {\n formRef.current.setFieldsValue({\n state: selectedState,\n });\n }\n }\n }, [selectedState]);\n\n useEffect(() => {\n if (sanitizedAddress) {\n const { addressLine1, city, state, postalCode } = sanitizedAddress;\n\n if (addressLine1) {\n setAddressLine1Suggestion(addressLine1);\n }\n if (city) {\n setCitySuggestion(city);\n }\n if (state && statesOptions.length > 0) {\n let option = stateList.find(x => x.abbreviation === state).abbreviation;\n if (option) {\n setStateSuggestion(option);\n }\n }\n if (postalCode) {\n setPostalCodeSuggestion(postalCode);\n }\n }\n }, [sanitizedAddress]);\n\n const createCountriesOptions = () => {\n let countriesOptions = [];\n if (countryList.length > 0) {\n countriesOptions = countryList.map((country, index) => {\n return (\n \n );\n });\n }\n\n return countriesOptions;\n };\n\n const createStatesOptions = () => {\n let statesOptions = [];\n\n if (stateList && stateList.length > 0) {\n statesOptions = stateList.map((state, index) => {\n return (\n \n );\n });\n }\n\n return statesOptions;\n };\n\n const validate = formVal => {\n let isValid = true;\n if (formVal.postalCode && selectedCountry) {\n isValid = validatePostalCode(formVal.postalCode);\n }\n\n return isValid;\n };\n\n const onCountryChange = country => {\n setSelectedState('');\n formRef.current.setFieldsValue({\n state: '',\n });\n setSelectedCountry(country);\n };\n\n const onBlurPostalCode = postalCode => {\n let formatted = formatPostalCode(selectedCountry, postalCode);\n\n if (formRef.current) {\n formRef.current.setFieldsValue({\n postalCode: formatted,\n });\n }\n };\n\n const validatePostalCode = postalCode => {\n let isValid = true;\n\n let isUS = selectedCountry == 'USA' || selectedCountry == 'US';\n let isCA = selectedCountry == 'CAN' || selectedCountry == 'CA';\n let re = /(^\\d{5}$)|(^\\d{9}$)|(^\\d{5}-\\d{4}$)/;\n if (isCA) {\n re = /^[A-Za-z]\\d[A-Za-z][ -]?\\d[A-Za-z]\\d$/;\n }\n if (!re.test(postalCode)) {\n isValid = false;\n }\n\n return isValid;\n };\n\n const clearSuggestions = () => {\n setPostalCodeSuggestion('');\n setStateSuggestion('');\n setCitySuggestion('');\n setAddressLine1Suggestion('');\n setAddressLine2Suggestion('');\n };\n\n const setFieldValue = (field, value) => {\n if (field) {\n setIsDirty(true);\n\n switch (field) {\n case 'addressLine1':\n formRef.current.setFieldsValue({\n addressLine1: value,\n });\n setAddressLine1Suggestion('');\n return;\n case 'city':\n formRef.current.setFieldsValue({\n city: value,\n });\n setCitySuggestion('');\n return;\n case 'state':\n formRef.current.setFieldsValue({\n state: value,\n });\n setStateSuggestion('');\n return;\n case 'postalCode':\n formRef.current.setFieldsValue({\n postalCode: value,\n });\n setPostalCodeSuggestion('');\n return;\n }\n }\n };\n\n const handleSaveChangesClick = formVal => {\n let isValid = validate(formVal);\n if (!isValid) {\n toast.error(intl.formatMessage({ id: 'address.pleaseCorrectLabel' }), { autoClose: 5000 });\n } else {\n if (isDirty) {\n dispatch(\n usersActions.validateUserAddress(\n formVal.addressLine1,\n addressLine2,\n formVal.city,\n formVal.state,\n formVal.country,\n formVal.postalCode\n )\n )\n .then(payload => {\n if (payload.data.data.isValid) {\n setIsDirty(false);\n toast.success(intl.formatMessage({ id: 'address.addressIsValid' }), { autoClose: 5000 });\n } else if (payload.data.data.errors) {\n setIsDirty(true);\n toast.error(intl.formatMessage({ id: 'address.addressIsInvalid' }), { autoClose: 5000 });\n } else if (payload.data.data.warnings) {\n setIsDirty(true);\n toast.error(intl.formatMessage({ id: 'address.addressNotFound' }), { autoClose: 5000 });\n }\n })\n .catch(() => {\n setIsDirty(true);\n toast.error(intl.formatMessage({ id: 'address.sanitizationError' }), { autoClose: 5000 });\n });\n } else {\n onSaveChangesClick(\n serviceCenter.id,\n formVal.addressLine1,\n addressLine2,\n formVal.city,\n formVal.state,\n formVal.country,\n formVal.postalCode,\n formVal.description,\n formVal.axId,\n formVal.isActive\n );\n setIsDirty(false);\n }\n }\n };\n\n const addressValidationWarningList =\n !isDirty &&\n !addressValidationErrors &&\n addressValidationWarnings &&\n addressValidationWarnings.map((warning, index) => {\n return (\n \n \n \n {warning.text}\n \n \n
\n );\n });\n\n const addressValidationWarningMarkup = addressValidationWarningList && (\n {addressValidationWarningList}\n );\n\n const addressValidationErrorList =\n isDirty &&\n addressValidationErrors &&\n addressValidationErrors.map((error, index) => {\n return (\n \n \n \n {error.text}\n \n \n
\n );\n });\n\n const addressValidationErrorMarkup = addressValidationErrorList && {addressValidationErrorList};\n\n const addressLine1SuggestionMarkup = addressLine1Suggestion && (\n \n \n setFieldValue('addressLine1', addressLine1Suggestion)}>\n \n \n \n \n );\n\n const citySuggestionMarkup = citySuggestion && (\n \n \n setFieldValue('city', citySuggestion)}>\n \n \n \n \n );\n\n const stateSuggestionMarkup = stateSuggestion && (\n \n \n setFieldValue('state', stateSuggestion)}>\n x.abbreviation === stateSuggestion).name }}\n />\n \n \n \n );\n\n const postalCodeSuggestionMarkup = postalCodeSuggestion && (\n \n \n setFieldValue('postalCode', postalCodeSuggestion)}>\n \n \n \n \n );\n\n const editServiceCenterMarkup = serviceCenter && (\n {\n handleSaveChangesClick(formVal);\n }}\n initialValues={{\n description: serviceCenter.description,\n axId: serviceCenter.axId,\n country: selectedCountry,\n addressLine1: serviceCenter.addressLine1,\n city: serviceCenter.city,\n state: selectedState,\n postalCode: serviceCenter.postalCode,\n isActive: serviceCenter.isActive,\n }}\n onValuesChange={(field, allValues) => {\n let key = Object.keys(field)[0];\n let value = field[key];\n\n setFieldValue(key, value);\n }}\n scrollToFirstError={true}\n >\n \n \n \n \n \n \n \n onCountryChange(e)}\n optionFilterProp='children'\n filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}\n >\n {countriesOptions}\n \n \n \n \n \n {addressLine1SuggestionMarkup}\n \n \n \n {citySuggestionMarkup}\n \n \n \n option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}\n >\n {statesOptions}\n \n \n {stateSuggestionMarkup}\n \n \n ({\n validator(_, value) {\n if (value && validatePostalCode(value)) {\n return Promise.resolve();\n }\n\n if (!value) {\n return Promise.reject(new Error(intl.formatMessage({ id: 'address.postalCodeRequired' })));\n }\n return Promise.reject(new Error(intl.formatMessage({ id: 'address.postalCodeInvalid' })));\n },\n }),\n ]}\n >\n onBlurPostalCode(e.target.value)} />\n \n {postalCodeSuggestionMarkup}\n \n
\n \n \n \n \n \n \n
\n {addressValidationWarningMarkup}\n {addressValidationErrorMarkup}\n \n );\n\n return (\n \n ) : (\n \n )\n }\n footer={[\n ,\n formRef?.current?.submit()}\n loading={validatingAddress || savingAddress}\n data-test-id='save-changes-button'\n >\n {isDirty ? (\n \n ) : serviceCenter.id ? (\n \n ) : (\n \n )}\n ,\n ]}\n onCancel={toggle}\n destroyOnClose={true}\n afterClose={clearSuggestions}\n >\n {editServiceCenterMarkup}\n \n );\n};\n\nServiceCenterModal.propTypes = {\n hidden: PropTypes.bool,\n toggle: PropTypes.func,\n serviceCenter: PropTypes.object,\n onCancelClick: PropTypes.func,\n onDeleteClick: PropTypes.func,\n onSaveChangesClick: PropTypes.func,\n};\nexport default ServiceCenterModal;\n","import { Col, Text, Row, Icon, Button } from '@met/react-components';\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nconst ServiceCenterMappingLine = ({ serviceCenterMapping, editServiceCenterMappingOnClick }) => {\n return (\n \n \n \n \n \n \n {serviceCenterMapping.state}\n \n \n \n \n {serviceCenterMapping.description}\n \n \n \n \n \n
\n );\n};\n\nexport default ServiceCenterMappingLine;\n","import { Button, Form, Modal, Popconfirm, Select } from 'antd';\nimport React, { useEffect, useRef } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { toast } from 'react-toastify';\nimport { useAddresses } from '../../../../hooks';\nimport { serviceCenterActions } from '../../../../store';\n\nconst { Option } = Select;\n\nconst StateMappingModal = ({ hidden, stateMapping, onFormSubmit, onCancel, onDelete, isNew }) => {\n const intl = useIntl();\n const dispatch = useDispatch();\n\n const { states } = useAddresses();\n\n //Refs\n const formRef = useRef();\n\n const serviceCenters = useSelector((state) => state.serviceCenters.getServiceCenters.serviceCenters);\n\n useEffect(() => {\n if (!serviceCenters) {\n dispatch(serviceCenterActions.getServiceCenters()).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.serviceOrders.loadingServiceOrderStatusesErrorMessage' }), {\n autoClose: false,\n });\n });\n }\n }, [serviceCenters]);\n\n useEffect(() => {\n if (formRef?.current) {\n formRef.current.setFieldsValue({\n state: stateMapping?.state,\n serviceCenterId: stateMapping?.serviceCenterId,\n });\n }\n }, [stateMapping, formRef]);\n\n const stateOptions =\n states &&\n states.map((item, index) => {\n return (\n \n );\n });\n\n const serviceCenterOptions =\n serviceCenters &&\n serviceCenters.map((item, index) => {\n return (\n \n );\n });\n\n return (\n \n ) : (\n \n )\n }\n open={hidden}\n closable={true}\n onOk={() => formRef?.current?.submit()}\n onCancel={onCancel}\n footer={[\n ,\n !isNew && (\n onDelete(stateMapping.state)}\n okText={}\n cancelText={}\n >\n \n \n \n \n ),\n formRef.current.submit()}\n >\n \n ,\n ]}\n width={800}\n >\n \n }\n rules={[{ required: true, message: }]}\n >\n \n \n }\n rules={[{ required: true, message: }]}\n >\n \n \n \n \n );\n};\n\nexport default StateMappingModal;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { useUser } from '../../hooks';\n\nconst PermissionGatedComponent = ({ permissionRequired, children }) => {\n const { permissions } = useUser();\n const shouldRender = permissions()[permissionRequired];\n\n return shouldRender ? {children} : ;\n};\n\nPermissionGatedComponent.propTypes = {\n permissionRequired: PropTypes.string,\n};\n\nexport default PermissionGatedComponent;\n","var _path;\nvar _excluded = [\"svgRef\", \"title\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport React from \"react\";\nvar SvgPencilAltSolid = function SvgPencilAltSolid(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n \"aria-hidden\": \"true\",\n focusable: \"false\",\n \"data-prefix\": \"fas\",\n \"data-icon\": \"pencil-alt\",\n className: \"svg-inline--fa fa-pencil-alt fa-w-16\",\n role: \"img\",\n viewBox: \"0 0 512 512\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"currentColor\",\n d: \"M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z\"\n })));\n};\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgPencilAltSolid, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/pencil-alt-solid.99576dbd.svg\";\nexport { ForwardRef as ReactComponent };","import { List, Row, Col, Typography, Button } from 'antd';\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport Icon, { EditOutlined } from '@ant-design/icons';\nimport { ReactComponent as MapMarker } from '../../../../assets/map-marker.svg';\nimport { ReactComponent as Pencil } from '../../../../assets/pencil-alt-solid.svg';\n\nconst { Text } = Typography;\n\nconst DefaultServiceCenterLine = ({ defaultServiceCenter, editDefaultServiceCenterClick, index }) => {\n return (\n \n \n \n \n \n \n {defaultServiceCenter.countryCode}\n \n \n \n Service Center\n \n {defaultServiceCenter.serviceCenterDescription}\n \n \n }\n onClick={() => editDefaultServiceCenterClick()}\n data-test-id={'editDefaultServiceCenterBtn-' + index}\n >\n \n \n \n \n \n
\n \n );\n};\n\nexport default DefaultServiceCenterLine;\n","import { Button, Form, Modal, Popconfirm, Select } from 'antd';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { toast } from 'react-toastify';\nimport { useAddresses } from '../../../../hooks';\nimport { serviceCenterActions } from '../../../../store';\n\nconst { Option } = Select;\n\nconst DefaultServiceCenterModal = ({ hidden, defaultServiceCenter, onFormSubmit, onCancel }) => {\n const intl = useIntl();\n const dispatch = useDispatch();\n\n const { countries } = useAddresses();\n\n //Refs\n const formRef = useRef();\n\n const serviceCenters = useSelector((state) => state.serviceCenters.getServiceCenters.serviceCenters);\n\n const [serviceCenterFiltered, setServiceCenterFiltered] = useState([]);\n useEffect(() => {\n if (!serviceCenters) {\n dispatch(serviceCenterActions.getServiceCenters()).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.serviceOrders.loadingServiceOrderStatusesErrorMessage' }), {\n autoClose: false,\n });\n });\n }\n }, [serviceCenters]);\n\n useEffect(() => {\n if (formRef?.current) {\n formRef.current.setFieldsValue({\n countryCode: defaultServiceCenter?.countryCode,\n serviceCenterId: defaultServiceCenter?.serviceCenterId,\n });\n }\n\n if (defaultServiceCenter && serviceCenters) {\n let sc = serviceCenters.filter((x) => x.countryCode === defaultServiceCenter.countryCode && x.isActive);\n\n setServiceCenterFiltered(sc);\n }\n }, [defaultServiceCenter, formRef]);\n\n const countryOptions =\n countries &&\n countries.map((item, index) => {\n return (\n \n );\n });\n\n const serviceCenterOptions =\n serviceCenterFiltered &&\n serviceCenterFiltered.map((item, index) => {\n return (\n \n );\n });\n\n return (\n formRef?.current?.submit()}\n onCancel={onCancel}\n footer={[\n ,\n formRef.current.submit()}\n okText={intl.formatMessage({ id: 'general.yes' })}\n cancelText={intl.formatMessage({ id: 'general.no' })}\n cancelButtonProps={{ 'data-test-id': 'cancelBtn', style: { height: 'auto' } }}\n okButtonProps={{ 'data-test-id': 'yesBtn', style: { height: 'auto' } }}\n >\n \n ,\n ]}\n width={800}\n >\n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default DefaultServiceCenterModal;\n","import { Button, ListGroup, ListGroupItem, Loader, useToggle } from '@met/react-components';\nimport { Button as AntButton, Card, Col, List, PageHeader, Row, Space, Typography } from 'antd';\n\nimport React, { Fragment, useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { toast } from 'react-toastify';\nimport { countriesActions, serviceCenterActions, statesActions, usersActions } from '../../../../store';\nimport ServiceCenterLine from './ServiceCenterLine';\nimport ServiceCenterModal from './ServiceCenterModal';\nimport ServiceCenterMappingLine from './ServiceCenterMappingLine';\nimport StateMappingModal from './StateMappingModal';\nimport PermissionGatedComponent from '../../../../components/PermissionGatedComponent/PermissionGatedComponent';\nimport { Permissions } from '../../../../enums';\nimport { useUser } from '../../../../hooks';\nimport DefaultServiceCenterLine from './DefaultServiceCenterLine';\nimport DefaultServiceCenterModal from './DefaultServiceCenterModal';\nimport { PlusOutlined } from '@ant-design/icons';\n\nconst { Title } = Typography;\n\nconst ServiceCentersTab = () => {\n const intl = useIntl();\n const dispatch = useDispatch();\n\n const fetchingServiceCenters = useSelector(state => state.serviceCenters.getServiceCenters.isLoading);\n const serviceCenters = useSelector(state => state.serviceCenters.getServiceCenters.serviceCenters);\n const defaultServiceCenters = useSelector(\n state => state.serviceCenters.getDefaultServiceCenterMappings.defaultServiceCenterMappings\n );\n const fetchingServiceCenterMappings = useSelector(state => state.serviceCenters.getServiceCenterMappings.isLoading);\n const serviceCenterMappings = useSelector(\n state => state.serviceCenters.getServiceCenterMappings.serviceCenterMappings\n );\n\n const { permissions } = useUser();\n const userPermissions = permissions();\n const [currentServiceCenter, setCurrentServiceCenter] = useState({});\n const [currentStateMapping, setCurrentStateMapping] = useState({});\n const [currentDefaultServiceCenter, setCurrentDefaultServiceCenter] = useState({});\n const [isStateMappingNew, setIsStateMappingNew] = useState(false);\n\n const [showServiceCenterModal, toggleServiceCenterModal] = useToggle(false);\n const [showStateMappingModal, toggleStateMappingModal] = useToggle(false);\n const [showDefaultServiceCenterModal, toggleDefaultServiceCenterModal] = useToggle(false);\n\n useEffect(() => {\n if (userPermissions[Permissions.SERVICECENTERS_SERVICECENTERS]) {\n dispatch(serviceCenterActions.getServiceCenters()).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.serviceOrders.loadingServiceOrderStatusesErrorMessage' }), {\n autoClose: false,\n });\n });\n\n dispatch(serviceCenterActions.getDefaultServiceCenterMappings()).catch(() => {\n toast.error(\n intl.formatMessage({\n id: 'admin.defaultServiceCenterMapping.loadingDefaultServiceCenterMappingsErrorMessage',\n }),\n {\n autoClose: false,\n }\n );\n });\n }\n if (userPermissions[Permissions.SERVICECENTERS_STATES]) {\n dispatch(serviceCenterActions.getServiceCenterMappings()).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.serviceOrders.loadingServiceOrderStatusesErrorMessage' }), {\n autoClose: false,\n });\n });\n }\n dispatch(countriesActions.getCountries()).catch(() => {\n toast.error(intl.formatMessage({ id: 'address.loadingCountriesErrorMessage' }), { autoClose: false });\n });\n dispatch(statesActions.getStates()).catch(() => {\n toast.error(intl.formatMessage({ id: 'address.loadingStatesErrorMessage' }), { autoClose: false });\n });\n }, [dispatch]);\n\n const handleNewServiceCenterClick = () => {\n handleClearAddressValidation();\n setCurrentServiceCenter({ isActive: true });\n toggleServiceCenterModal();\n };\n\n const handleEditServiceCenterClick = center => {\n if (defaultServiceCenters && defaultServiceCenters.some(x => x.serviceCenterId == center.id)) {\n center.isDefault = true;\n } else {\n center.isDefault = false;\n }\n handleClearAddressValidation();\n setCurrentServiceCenter(center);\n toggleServiceCenterModal();\n };\n\n const handleCancelClick = () => {\n handleClearAddressValidation();\n toggleServiceCenterModal();\n };\n\n const handleClearAddressValidation = () => {\n dispatch(usersActions.clearAddressValidation());\n };\n\n const handleConfirmEditClick = (\n id,\n addressLine1,\n addressLine2,\n city,\n state,\n countryCode,\n postalCode,\n description,\n axId,\n isActive\n ) => {\n dispatch(\n serviceCenterActions.upsertServiceCenter(\n id,\n axId,\n description,\n addressLine1,\n addressLine2,\n city,\n state,\n countryCode,\n postalCode,\n isActive\n )\n )\n .then(payload => {\n toggleServiceCenterModal();\n toast.success(intl.formatMessage({ id: 'admin.serviceCenter.serviceCenterUpdated' }), { autoClose: 5000 });\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.serviceCenter.serviceCenterUpdateError' }), { autoClose: 5000 });\n });\n };\n\n const handleEditMappingClick = mapping => {\n setIsStateMappingNew(false);\n setCurrentStateMapping(mapping);\n toggleStateMappingModal();\n };\n const handleNewStateMappingClick = () => {\n setIsStateMappingNew(true);\n setCurrentStateMapping({});\n toggleStateMappingModal();\n };\n\n const handleStateMappingCancel = () => {\n setCurrentStateMapping({});\n toggleStateMappingModal();\n };\n\n const handleStateMappingDelete = state => {\n dispatch(serviceCenterActions.deleteServiceCenterMapping(state)).then(() => {\n toast.success(intl.formatMessage({ id: 'admin.stateMapping.successDeleteMessage' }), { autoClose: 5000 });\n handleStateMappingCancel();\n\n dispatch(serviceCenterActions.getServiceCenterMappings()).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.serviceOrders.loadingServiceOrderStatusesErrorMessage' }), {\n autoClose: false,\n });\n });\n });\n };\n\n const handleEditDefaultServiceCenterClick = serviceCenter => {\n setCurrentDefaultServiceCenter(serviceCenter);\n toggleDefaultServiceCenterModal();\n };\n\n const handleDefaultServiceCenterCancel = () => {\n setCurrentDefaultServiceCenter({});\n toggleDefaultServiceCenterModal();\n };\n\n const handleDefaultServiceCenterSubmit = values => {\n if (values) {\n dispatch(serviceCenterActions.updateDefaultServiceCenter(values)).then(() => {\n toast.success(\n intl.formatMessage(\n { id: 'admin.defaultServiceCenterMapping.successUpdateMessage' },\n { countryCode: values.countryCode }\n ),\n { autoClose: 5000 }\n );\n handleDefaultServiceCenterCancel();\n\n dispatch(serviceCenterActions.getDefaultServiceCenterMappings());\n });\n }\n };\n\n const handleStateMappingSubmit = values => {\n if (isStateMappingNew) {\n //Insert\n\n // Check for duplicate state mapping\n if (!checkDuplicateStateMapping(values.state)) {\n // Run insert\n dispatch(serviceCenterActions.insertServiceCenterMapping(values)).then(() => {\n toast.success(intl.formatMessage({ id: 'admin.stateMapping.successAddMessage' }), { autoClose: 5000 });\n handleStateMappingCancel();\n\n dispatch(serviceCenterActions.getServiceCenterMappings()).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.serviceOrders.loadingServiceOrderStatusesErrorMessage' }), {\n autoClose: false,\n });\n });\n });\n } else {\n // Throw duplicate error\n toast.error(intl.formatMessage({ id: 'admin.stateMapping.duplicateMapping' }), { autoClose: 5000 });\n }\n } else {\n //Update\n\n // Run update\n dispatch(serviceCenterActions.updateServiceCenterMapping(values)).then(() => {\n toast.success(intl.formatMessage({ id: 'admin.stateMapping.successUpdateMessage' }), { autoClose: 5000 });\n handleStateMappingCancel();\n\n dispatch(serviceCenterActions.getServiceCenterMappings()).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.serviceOrders.loadingServiceOrderStatusesErrorMessage' }), {\n autoClose: false,\n });\n });\n });\n }\n };\n\n const checkDuplicateStateMapping = checkState => {\n //NOTE: This will only currently work for the United States as they will only have 1 service center per state\n //TODO: Change logic around to support Canadian state/provinces to support multiple service centers\n\n const res = serviceCenterMappings.filter(({ state }) => state.toLowerCase() === checkState.toLowerCase());\n // .map(({state}) => state);\n return res.length > 0;\n };\n\n const searchResultsList =\n serviceCenters &&\n serviceCenters.map((serviceCenter, soi) => {\n return (\n \n handleEditServiceCenterClick(serviceCenter)}\n />\n \n );\n });\n\n const defaultServiceCenterMappingList = defaultServiceCenters && (\n (\n handleEditDefaultServiceCenterClick(item)}\n index={index}\n />\n )}\n />\n );\n\n const serviceCenterMappingsList =\n serviceCenterMappings &&\n serviceCenterMappings.map((mapping, soi) => {\n return (\n \n handleEditMappingClick(mapping)}\n />\n \n );\n });\n\n const fetchingResultsMarkup = (fetchingServiceCenters || fetchingServiceCenterMappings) && (\n \n \n \n \n
\n );\n\n const serviceCenterTitleMarkup = (\n \n \n \n \n
\n \n \n \n \n
\n );\n\n const serviceCentersMarkup = serviceCenters && (\n \n } onClick={() => handleNewServiceCenterClick()}>\n \n \n \n ,\n ]}\n >\n {searchResultsList}\n \n \n );\n\n const defaultServiceCenterMarkup = defaultServiceCenters && (\n \n \n {defaultServiceCenterMappingList}\n \n \n );\n\n const stateMappingMarkup = (\n \n } onClick={() => handleNewStateMappingClick()}>\n \n \n \n ,\n ]}\n >\n {serviceCenterMappingsList}\n \n \n );\n\n const resultsMarkup = !fetchingServiceCenters && !fetchingServiceCenterMappings && (\n \n {defaultServiceCenterMarkup}\n {serviceCentersMarkup}\n {stateMappingMarkup}\n \n );\n\n const stateMappingModal = (\n \n );\n\n const serviceCenterModal = (\n \n );\n\n const defaultServiceCenterModal = (\n \n );\n\n return (\n \n \n {fetchingResultsMarkup}\n {resultsMarkup}\n \n {serviceCenterModal}\n {defaultServiceCenterModal}\n {stateMappingModal}\n \n );\n};\n\nexport default ServiceCentersTab;\n","import moment from 'moment';\nimport React from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { ProductImage, ServiceOrderLineRow } from '../styled';\nimport { Col, Space, Typography } from 'antd';\n\nconst { Text } = Typography;\n\nconst ServiceOrderLine = ({ sku, description, serialNumber, isDeniedWarranty, updatedAt }) => {\n const intl = useIntl();\n\n let formattedUpdatedAt = () => {\n return moment(updatedAt)\n .local()\n .format('MM/DD/YYYY h:mm:ss A');\n };\n\n return (\n \n \n \n \n \n \n {sku}\n {description}\n \n \n \n \n \n \n \n {serialNumber || intl.formatMessage({ id: 'general.na' })}\n \n \n \n \n \n \n \n \n {isDeniedWarranty ? intl.formatMessage({ id: 'general.yes' }) : intl.formatMessage({ id: 'general.no' })}\n \n \n \n \n \n \n \n \n {formattedUpdatedAt()}\n \n \n \n );\n};\n\nexport default ServiceOrderLine;\n","import { Button, Col, Modal, notification, Row, Spin, Typography } from 'antd';\nimport React, { useEffect, useState } from 'react';\nimport moment from 'moment';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { serviceOrdersActions } from '../../../store';\n\nconst { Text } = Typography;\n\nconst ResubmitBulkServiceOrderModal = ({ datesQuery, handleSearch, hidden, serviceOrders, toggle }) => {\n const intl = useIntl();\n const dispatch = useDispatch();\n const displayDateFormat = 'MM/DD/YYYY';\n\n const resubmitLabel = useSelector((state) => state.serviceOrders.resubmitBulkServiceOrderLabel);\n\n const [momentStartDate, setMomentStartDate] = useState(datesQuery.s);\n const [momentEndDate, setMomentEndDate] = useState(datesQuery.e);\n\n useEffect(() => {\n setMomentStartDate(moment(datesQuery.s).format(displayDateFormat));\n setMomentEndDate(moment(datesQuery.e).format(displayDateFormat));\n }, [datesQuery]);\n\n const handleResubmit = () => {\n if (serviceOrders.data.length === 0) {\n noOrdersNotification();\n } else {\n dispatch(serviceOrdersActions.resubmitFailedServiceOrderLabel(datesQuery.s, datesQuery.e)).then((res) => {\n if (!resubmitLabel.isLoading) {\n toggle();\n handleSearch();\n completedNotification();\n }\n });\n }\n };\n\n const noOrdersNotification = () => {\n notification.error({\n placement: 'bottomRight',\n message: intl.formatMessage({ id: 'admin.serviceOrders.reprocessModal.header' }),\n description: intl.formatMessage({ id: 'admin.serviceOrders.reprocessModal.noOrdersReprocess' }),\n });\n };\n\n const completedNotification = () => {\n notification.success({\n placement: 'bottomRight',\n message: intl.formatMessage({ id: 'admin.serviceOrders.reprocessModal.header' }),\n description: intl.formatMessage({ id: 'admin.serviceOrders.reprocessModal.completedReprocess' }),\n });\n };\n\n const bodyContent = (\n \n {resubmitLabel.isLoading ? (\n \n \n \n \n \n \n \n
\n ) : (\n \n \n \n )}\n \n );\n return (\n toggle()}\n className='mr-2'\n >\n \n ,\n {\n handleResubmit();\n }}\n >\n \n ,\n ]}\n destroyOnClose\n >\n {bodyContent}\n \n );\n};\n\nexport default ResubmitBulkServiceOrderModal;\n","import React from 'react';\nimport { Button, Col, DatePicker, Form, Input, Modal, notification, Row, Spin, Tooltip } from 'antd';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { serviceOrdersActions } from '../../../store';\nimport { QuestionCircleOutlined } from '@ant-design/icons';\nconst { RangePicker } = DatePicker;\n\nconst ResyncOrderIndexModal = ({ hidden, toggle }) => {\n const dispatch = useDispatch();\n const resyncIndex = useSelector((state) => state.serviceOrders.resyncUserOrderIndex);\n const [form] = Form.useForm();\n\n const handleResync = () => {\n form\n .validateFields()\n .then((values) => {\n const startDate = values.dateRange[0].format('YYYY-MM-DD');\n const endDate = values.dateRange[1].format('YYYY-MM-DD');\n\n dispatch(serviceOrdersActions.resyncUserOrderIndex(values.userEmail, startDate, endDate))\n .then((res) => {\n if (!resyncIndex.isLoading) {\n toggle();\n completedNotification();\n }\n })\n .catch((e) => {\n if (e.response.status === 400) {\n errorNotification(e.response.data);\n } else {\n errorNotification('Something went wrong. Please try again later.');\n }\n\n toggle();\n });\n\n form.resetFields();\n })\n .catch((e) => {});\n };\n\n const errorNotification = (description) => {\n notification.error({\n placement: 'bottomRight',\n message: 'Oops! Something went wrong.',\n description: description,\n });\n };\n\n const completedNotification = () => {\n notification.success({\n placement: 'bottomRight',\n message: 'Orders Have Been Queued for Resync',\n description: 'Give it a few minutes to complete before you check for changes.',\n });\n };\n\n const bodyContent = (\n \n {resyncIndex.isLoading ? (\n \n Retrieving and queuing orders for search index resync. This may take a few minutes.\n \n \n \n
\n ) : (\n <>\n \n \n \n \n \n \n \n
\n \n \n \n Created Date Range\n \n \n \n \n }\n rules={[\n {\n required: true,\n message: 'Required',\n },\n ]}\n >\n \n \n \n
\n \n \n )}\n \n );\n\n return (\n \n Resync Order Search Index\n \n \n \n \n open={!hidden}\n onCancel={toggle}\n closable={!resyncIndex.isLoading}\n maskClosable={!resyncIndex.isLoading}\n afterClose={form.resetFields()}\n footer={[\n toggle()}\n className='mr-2'\n >\n Cancel\n ,\n {\n form.submit();\n }}\n >\n Resync\n ,\n ]}\n destroyOnClose\n >\n {bodyContent}\n \n );\n};\n\nexport default ResyncOrderIndexModal;\n","import { Collapsible, Icon, ListGroup, ListGroupItem, Loader } from '@met/react-components';\nimport Enumerable from 'linq';\nimport moment from 'moment';\nimport React, { Fragment, useEffect, useRef, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useHistory } from 'react-router';\nimport { toast } from 'react-toastify';\nimport { NumberParam, StringParam, useQueryParams, withDefault } from 'use-query-params';\nimport { useServiceOrder, useToggle, useUser } from '../../../../hooks';\nimport { serviceOrdersActions } from '../../../../store';\nimport ServiceOrderLine from './ServiceOrderLine';\nimport ResubmitBulkServiceOrderModal from '../ResubmitBulkServiceOrderModal';\nimport { CollapsibleHeaderRow, Divider, NoServiceOrderFound, Pager, ServiceOrderLinesWrapper } from '../styled';\nimport { Button, Checkbox, Col, DatePicker, Form, Input, PageHeader, Row, Select, Space, Typography } from 'antd';\nimport { ReloadOutlined, FileSyncOutlined } from '@ant-design/icons';\nimport ResyncOrderIndexModal from '../ResyncOrderIndexModal';\nimport { Permissions } from '../../../../enums';\n\nconst { RangePicker } = DatePicker;\nconst { Option } = Select;\nconst { Search } = Input;\nconst { Text } = Typography;\nconst ServiceOrdersTab = () => {\n const { permissions } = useUser();\n const intl = useIntl();\n const dispatch = useDispatch();\n const history = useHistory();\n const { generateIssuesList, generateWarningsList } = useServiceOrder();\n const formRef = useRef();\n const searchTermRef = useRef(null);\n\n const displayDateFormat = 'MM/DD/YYYY';\n const calendarDateFormat = 'YYYY-MM-DD';\n let defaultStartDate = moment().add(-30, 'd').format(calendarDateFormat);\n let defaultEndDate = moment().format(calendarDateFormat);\n const defaultPage = 1;\n const defaultPageSize = 15;\n const defaultShowOnlyFailed = '';\n\n const [query, setQuery] = useQueryParams({\n q: withDefault(StringParam, ''),\n });\n\n // eslint-disable-next-line no-unused-vars\n const [statusQuery, setStatusQuery] = useQueryParams({\n st: withDefault(NumberParam, undefined),\n });\n\n const [datesQuery, setDatesQuery] = useQueryParams({\n s: withDefault(StringParam, defaultStartDate),\n e: withDefault(StringParam, defaultEndDate),\n });\n\n const [paginationQuery, setPaginationQuery] = useQueryParams({\n p: withDefault(NumberParam, defaultPage),\n ps: withDefault(NumberParam, defaultPageSize),\n });\n\n const [, setFailedShippingOrdersQuery] = useQueryParams({\n shipstatus: withDefault(StringParam, defaultShowOnlyFailed),\n });\n\n const searchingServiceOrders = useSelector((state) => state.serviceOrders.searchServiceOrdersAdmin.isLoading);\n const serviceOrders = useSelector((state) => state.serviceOrders.searchServiceOrdersAdmin.data);\n const searchServiceOrdersAdmin = useSelector((state) => state.serviceOrders.searchServiceOrdersAdmin);\n const loadingServiceOrderStatuses = useSelector((state) => state.serviceOrders.getServiceOrderStatuses.isLoading);\n const serviceOrderStatuses = useSelector((state) => state.serviceOrders.getServiceOrderStatuses.serviceOrderStatuses);\n\n const [serviceOrderStatusOptions, setServiceOrderStatusOptions] = useState([]);\n const [, setSelectedServiceOrderStatus] = useState(null);\n const [issuesMap, setIssuesMap] = useState([]);\n const [warningsMap, setWarningsMap] = useState([]);\n const [isFailed, setIsFailed] = useState(false);\n const [showResubmitModal, toggleResubmitModal] = useToggle(false);\n const [showResyncModal, toggleResyncModal] = useToggle(false);\n\n useEffect(() => {\n if (datesQuery.s || datesQuery.e) {\n let momentStartDate = moment(datesQuery.s, displayDateFormat, true);\n let momentEndDate = moment(datesQuery.e, displayDateFormat, true);\n\n if (momentStartDate.isValid()) {\n setDatesQuery({ s: momentStartDate.format(displayDateFormat) });\n }\n\n if (momentEndDate.isValid()) {\n setDatesQuery({ e: momentEndDate.format(displayDateFormat) });\n }\n\n if (formRef.current && momentStartDate.isValid() && momentEndDate.isValid()) {\n formRef.current.setFieldsValue({\n date: [moment(momentStartDate, displayDateFormat, true), moment(momentEndDate, displayDateFormat, true)],\n });\n } else if (formRef.current && !momentStartDate.isValid() && momentEndDate.isValid()) {\n formRef.current.setFieldsValue({\n date: [moment(defaultStartDate, calendarDateFormat, true), moment(momentEndDate, displayDateFormat, true)],\n });\n } else if (formRef.current && momentStartDate.isValid() && !momentEndDate.isValid()) {\n formRef.current.setFieldsValue({\n date: [moment(momentStartDate, displayDateFormat, true), moment(defaultEndDate, calendarDateFormat, true)],\n });\n }\n }\n }, [datesQuery]);\n\n useEffect(() => {\n clearSearchServiceOrders();\n\n searchTermRef.current.focus();\n }, []);\n\n useEffect(() => {\n dispatch(serviceOrdersActions.getServiceOrderStatuses()).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.serviceOrders.loadingServiceOrderStatusesErrorMessage' }), {\n autoClose: false,\n });\n });\n }, [dispatch]);\n\n useEffect(() => {\n if (serviceOrderStatuses && serviceOrderStatuses.length > 0) {\n setServiceOrderStatusOptions(createServiceOrderStatusOptions());\n }\n }, [serviceOrderStatuses]);\n\n useEffect(() => {\n if (serviceOrderStatusOptions && serviceOrderStatusOptions.length > 0) {\n let option = Enumerable.from(serviceOrderStatusOptions).firstOrDefault((x) => x.value === statusQuery.st);\n\n if (option) {\n setSelectedServiceOrderStatus(option);\n }\n }\n }, [serviceOrderStatusOptions]);\n\n useEffect(() => {\n if (serviceOrders.length > 0) {\n setIssuesMap(\n serviceOrders.map((serviceOrder, index) => {\n let issuesList = generateIssuesList(serviceOrder);\n\n return (\n issuesList.length > 0 && { key: serviceOrder.hashedServiceOrderId, value: generateIssuesList(serviceOrder) }\n );\n })\n );\n\n setWarningsMap(\n serviceOrders.map((serviceOrder, index) => {\n let warningsList = generateWarningsList(serviceOrder);\n\n return (\n warningsList.length > 0 && {\n key: serviceOrder.hashedServiceOrderId,\n value: generateWarningsList(serviceOrder),\n }\n );\n })\n );\n }\n }, [serviceOrders]);\n\n useEffect(() => {\n if (window.location.search) {\n searchServiceOrders(window.location.search);\n }\n }, [window.location.search]);\n\n const handleSearch = (formVal) => {\n if (formVal.query) {\n setQuery({ q: formVal.query });\n } else {\n setQuery({ q: '' });\n }\n\n setPaginationQuery({ p: defaultPage });\n\n searchServiceOrders(window.location.search);\n };\n\n const clearSearchServiceOrders = () => {\n dispatch(serviceOrdersActions.clearServiceOrdersAdmin());\n };\n\n const searchServiceOrders = (searchParameters) => {\n clearSearchServiceOrders();\n\n dispatch(serviceOrdersActions.searchServiceOrdersAdmin(1, searchParameters)).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.serviceOrders.searchError' }));\n });\n };\n\n const handleManageClick = (serviceOrder) => {\n history.push(`/admin/serviceorders/${serviceOrder.hashedServiceOrderId}`);\n };\n\n const handleServiceOrderStatusSelect = (selectedServiceOrderStatus) => {\n setSelectedServiceOrderStatus(selectedServiceOrderStatus);\n\n setStatusQuery({ st: selectedServiceOrderStatus });\n setPaginationQuery({ p: defaultPage });\n };\n\n const handleDateChange = (dates) => {\n // Start date\n if (dates && dates[0] && dates[0].isValid()) {\n setDatesQuery({ s: dates[0].format(displayDateFormat) });\n } else {\n setDatesQuery({});\n }\n // End Date\n if (dates && dates[1] && dates[1].isValid()) {\n setDatesQuery({ e: dates[1].format(displayDateFormat) });\n } else {\n setDatesQuery({});\n }\n\n setPaginationQuery({ p: defaultPage });\n };\n\n const createServiceOrderStatusOptions = () => {\n let serviceOrderStatusOptions = [];\n\n if (!loadingServiceOrderStatuses && serviceOrderStatuses) {\n serviceOrderStatusOptions = serviceOrderStatuses.map((status, index) => {\n return (\n \n );\n });\n }\n serviceOrderStatusOptions.unshift(\n \n );\n\n return serviceOrderStatusOptions;\n };\n\n const handleShowOnlyFailedOrdersClick = (isChecked) => {\n if (isChecked) {\n setIsFailed(true);\n setFailedShippingOrdersQuery({ shippostatus: 'failed' });\n } else {\n setIsFailed(false);\n setFailedShippingOrdersQuery({ shippostatus: '' });\n }\n\n setPaginationQuery({ p: defaultPage });\n };\n\n const loadingSearchResultsMarkup = searchingServiceOrders && (\n \n \n \n \n
\n );\n\n const searchResultsList =\n serviceOrders &&\n serviceOrders.map((serviceOrder, soi) => {\n let formattedSubmittedDate = () => {\n return moment(serviceOrder.serviceOrderDate).local().format('MM/DD/YYYY');\n };\n\n let hasIssues =\n Enumerable.from(issuesMap).firstOrDefault((x) => x.key === serviceOrder.hashedServiceOrderId) != null;\n let hasWarnings =\n Enumerable.from(warningsMap).firstOrDefault((x) => x.key === serviceOrder.hashedServiceOrderId) != null;\n\n let collapsibleHeaderMarkup = (\n \n \n \n \n \n \n {formattedSubmittedDate()}\n \n \n \n \n \n \n \n \n {serviceOrder.status\n ? intl.formatMessage({ id: 'admin.serviceOrders.statuses.' + serviceOrder.status })\n : intl.formatMessage({ id: 'general.na' })}\n \n \n \n \n \n \n \n \n {serviceOrder.serviceOrderLines.length}\n \n \n \n \n \n \n \n {serviceOrder.serviceOrderNumber || }\n \n \n \n \n \n \n \n {serviceOrder.emailAddress || }\n \n \n \n \n {hasIssues && }\n {hasWarnings && }\n
\n \n \n \n \n \n );\n\n let serviceOrderLinesMarkup =\n serviceOrder.serviceOrderLines &&\n serviceOrder.serviceOrderLines.map((serviceOrderLine, soli) => {\n return (\n \n );\n });\n\n return (\n \n \n \n \n {serviceOrderLinesMarkup}\n \n \n \n );\n });\n\n const searchResultsMarkup = !searchingServiceOrders && serviceOrders && serviceOrders.length > 0 && (\n \n \n {searchResultsList}\n \n
\n );\n\n const pagination = searchServiceOrdersAdmin?.totalCount > 0 && (\n `${range[0]}-${range[1]} of ${total} items`}\n total={searchServiceOrdersAdmin.totalCount}\n showSizeChanger={true}\n onChange={(res) => setPaginationQuery({ p: res })}\n onShowSizeChange={(current, to) => setPaginationQuery({ ps: to })}\n pageSizeOptions={[15, 25, 50, 100]}\n responsive={true}\n />\n );\n\n const searchMarkup = (\n \n \n \n \n \n \n \n \n \n \n {serviceOrderStatusOptions}\n \n \n \n \n \n formRef?.current?.submit()}\n />\n \n \n \n \n }\n disabled={!isFailed}\n onClick={() => toggleResubmitModal()}\n >\n \n \n \n \n \n \n \n {permissions()[Permissions.SERVICEORDERS_RESYNC_INDEX] && (\n }\n onClick={() => toggleResyncModal()}\n >\n Sync Index\n \n )}\n \n \n \n handleShowOnlyFailedOrdersClick(val.target.checked)}\n >\n \n \n \n \n \n
\n );\n\n const noSearchResultsMarkup = query.q && !searchingServiceOrders && serviceOrders && serviceOrders.length === 0 && (\n \n \n \n \n \n );\n\n return (\n \n \n {searchMarkup}\n {loadingSearchResultsMarkup}\n {searchResultsMarkup}\n {noSearchResultsMarkup}\n {pagination}\n \n toggleResubmitModal()}\n serviceOrders={searchServiceOrdersAdmin}\n datesQuery={datesQuery}\n handleSearch={() => formRef?.current?.submit()}\n />\n toggleResyncModal()}\n />\n \n );\n};\n\nexport default ServiceOrdersTab;\n","import { LoadingDots } from '@met/react-components';\nimport styled from 'styled-components';\n\nexport const InlineLoadingDots = styled(LoadingDots)`\n display: inline-block;\n`;\n","import { Button, Card, Col, message, Popconfirm, Row, Space, Typography } from 'antd';\nimport { PlusOutlined, RedoOutlined } from '@ant-design/icons';\nimport React, { Fragment, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { InlineLoadingDots } from '../../styled';\nimport { DeleteTextWrapper, LmrMappingsTable, StyledUpdatedCol } from '../styled';\nimport { ProductLmrMappingModal } from '../index';\nimport { useToggle } from '../../../../hooks';\nimport { useDispatch } from 'react-redux';\nimport { productsActions } from '../../../../store';\n\nconst { Text } = Typography;\n\nconst ProductLmrMappings = ({ product, lastUpdatedFormatted, refreshTriggered, handleReloadLmrClick }) => {\n const intl = useIntl();\n const dispatch = useDispatch();\n\n const lmrRegex = /^(:?LMR|C)_.*$/i; // Only allow LMR_ or C_ prefix\n\n const [isAdd, setIsAdd] = useState(true);\n const [selectedLmrMapping, setSelectedLmrMapping] = useState(null);\n const [showLmrMappingModal, toggleLmrMappingModal] = useToggle(false);\n\n const handleLmrMappingAddClick = () => {\n setSelectedLmrMapping(null);\n setIsAdd(true);\n toggleLmrMappingModal();\n };\n\n const handleLmrMappingEditClick = mapping => {\n setSelectedLmrMapping(mapping);\n setIsAdd(false);\n toggleLmrMappingModal();\n };\n\n const handleLmrValidation = mapping => {\n let isValid = true;\n if (isAdd) {\n if (product?.productLmrMappings.find(x => x.lmrId === mapping.lmrId)) {\n isValid = false;\n message.error(intl.formatMessage({ id: 'admin.product.lmrMappingAlreadyExists' }));\n }\n\n if (!lmrRegex.test(mapping.lmrId)) {\n isValid = false;\n message.error(intl.formatMessage({ id: 'admin.product.lmrMappingFormatInvalid' }));\n }\n }\n\n return isValid;\n };\n\n const handleSubmitClick = mapping => {\n mapping.lmrId = mapping.lmrId.toUpperCase();\n if (handleLmrValidation(mapping)) {\n dispatch(productsActions.upsertLmrMapping(product.sku, mapping))\n .then(() => {\n getLmrMappingsBySku();\n toggleLmrMappingModal();\n message.success('Success');\n })\n .catch(() => {\n message.error('Error');\n });\n }\n };\n\n const handleDeleteClick = mapping => {\n dispatch(productsActions.deleteLmrMapping(product.sku, mapping.lmrId))\n .then(() => {\n getLmrMappingsBySku();\n if (showLmrMappingModal) {\n toggleLmrMappingModal();\n }\n message.success(intl.formatMessage({ id: 'admin.product.lmrMappingDeleteSuccess' }));\n })\n .catch(() => {\n message.error(intl.formatMessage({ id: 'admin.product.lmrMappingDeleteError' }));\n });\n };\n\n const getLmrMappingsBySku = () => {\n dispatch(productsActions.getLmrMappingsBySku(product.sku));\n };\n\n const lastUpdatedMarkup = refreshTriggered ? (\n \n \n \n
\n ) : (\n \n \n {lastUpdatedFormatted || }\n
\n );\n\n const getLmrPriceMarkup = lmrPrice => {\n return lmrPrice != null ? ${lmrPrice} : ;\n };\n const getLmrPriceCaMarkup = lmrPriceCa => {\n return lmrPriceCa != null ? ${lmrPriceCa} : ;\n };\n const getWarrantyPeriodMarkup = warrantyPeriod => {\n return warrantyPeriod != null ? (\n \n {warrantyPeriod}\n \n \n ) : (\n \n );\n };\n\n const getServiceEligibleMarkup = serviceEligible => {\n return serviceEligible == null ? (\n \n ) : serviceEligible ? (\n \n ) : (\n \n );\n };\n\n const lmrTableMarkup = (\n (index % 2 === 0 ? 'table-row-odd' : 'table-row-even')}\n bordered={false}\n pagination={false}\n columns={[\n {\n title: 'LMR ID',\n dataIndex: 'lmrId',\n key: 'lmrId',\n },\n {\n title: 'Category',\n dataIndex: 'lmrCategoryDescription',\n key: 'lmrCategoryDescription',\n },\n {\n title: 'Label',\n dataIndex: 'lmrLabel',\n key: 'lmrLabel',\n },\n {\n title: 'Price (USD)',\n dataIndex: 'lmrPrice',\n key: 'lmrPrice',\n render: (item, index) => {\n return getLmrPriceMarkup(item);\n },\n },\n {\n title: 'Price (CAD)',\n dataIndex: 'lmrPriceCa',\n key: 'lmrPriceCa',\n render: (item, index) => {\n return getLmrPriceCaMarkup(item);\n },\n },\n {\n title: 'Warranty Period',\n dataIndex: 'warrantyPeriod',\n key: 'warrantyPeriod',\n render: (item, index) => {\n return getWarrantyPeriodMarkup(item);\n },\n },\n {\n title: 'Service Eligible',\n dataIndex: 'serviceEligible',\n key: 'serviceEligible',\n render: (item, index) => {\n return getServiceEligibleMarkup(item);\n },\n },\n {\n title: 'Actions',\n key: 'delete',\n render: mapping => (\n \n handleLmrMappingEditClick(mapping)}>\n Edit\n \n handleDeleteClick(mapping)}\n okText={intl.formatMessage({ id: 'general.yes' })}\n cancelText={intl.formatMessage({ id: 'general.no' })}\n cancelButtonProps={{ 'data-test-id': 'cancelBtn', style: { height: 'auto' } }}\n okButtonProps={{ 'data-test-id': 'yesBtn', style: { height: 'auto' } }}\n >\n Delete\n \n \n ),\n },\n ]}\n dataSource={product.productLmrMappings}\n rowKey={item => item.lmrId}\n />\n );\n\n return (\n \n \n \n \n \n \n
\n \n \n {lastUpdatedMarkup}\n \n \n \n \n }\n onClick={() => handleReloadLmrClick()}\n loading={refreshTriggered}\n type='primary'\n >\n \n \n \n \n \n \n }\n onClick={() => handleLmrMappingAddClick()}\n type='primary'\n >\n \n \n \n \n \n
\n \n
\n {lmrTableMarkup}\n \n handleSubmitClick(mapping)}\n handleDelete={mapping => handleDeleteClick(mapping)}\n />\n \n );\n};\n\nexport default ProductLmrMappings;\n","import React, { Fragment, useRef } from 'react';\nimport { useIntl } from 'react-intl';\nimport { Button, Checkbox, Form, Input, Modal, Popconfirm, Select } from 'antd';\nimport { useSelector } from 'react-redux';\n\nconst ProductLmrMappingModal = ({ hidden, toggle, isAdd, currentLmrMapping, handleSubmit, handleDelete }) => {\n const formRef = useRef();\n const intl = useIntl();\n\n const lmrCategoryTypes = useSelector(state => state.lmrCategoryTypes.getLmrCategoryTypes.lmrCategoryTypes);\n\n const lmrCategoryTypeOptions =\n lmrCategoryTypes &&\n lmrCategoryTypes.map((item, index) => {\n return (\n \n {item.description}\n \n );\n });\n\n return (\n \n Cancel\n ,\n ,\n !isAdd && (\n handleDelete(currentLmrMapping)}\n okText={intl.formatMessage({ id: 'general.yes' })}\n cancelText={intl.formatMessage({ id: 'general.no' })}\n cancelButtonProps={{ 'data-test-id': 'cancelBtn', style: { height: 'auto' } }}\n okButtonProps={{ 'data-test-id': 'yesBtn', style: { height: 'auto' } }}\n >\n \n \n ),\n ]}\n destroyOnClose={true}\n >\n \n \n \n \n \n \n \n \n \n \n {!isAdd && (\n \n \n \n \n \n \n \n \n \n \n \n \n Is Service Eligible\n \n \n \n )}\n \n \n );\n};\n\nexport default ProductLmrMappingModal;\n","import React, { createContext, useContext, useState } from 'react';\nimport { useIntl } from 'react-intl';\nimport { useSelector } from 'react-redux';\n\nconst ServiceCenterMappingContext = createContext({\n addMode: '',\n deleteMode: '',\n mappingMode: '',\n setMappingMode: () => {},\n currentMapping: null,\n setCurrentMapping: () => {},\n serviceCenters: [],\n loadingServiceCenters: false,\n serviceSkuMappings: [],\n addingServiceSkuMapping: false,\n deletingServiceSkuMapping: false,\n});\n\nconst useServiceCenterMappingContext = () => useContext(ServiceCenterMappingContext);\n\nconst ServiceCenterMappingProvider = ({ children }) => {\n const intl = useIntl();\n\n const addMode = intl.formatMessage({ id: 'admin.product.addMapping' });\n const deleteMode = intl.formatMessage({ id: 'admin.product.deleteMapping' });\n\n const [mappingMode, setMappingMode] = useState('');\n const [currentMapping, setCurrentMapping] = useState(null);\n\n const serviceCenters = useSelector(state => state.serviceCenters.getServiceCenters.serviceCenters);\n const loadingServiceCenters = useSelector(state => state.serviceCenters.getServiceCenters.isLoading);\n const serviceSkuMappings = useSelector(\n state =>\n state.products.getProduct &&\n state.products.getProduct.product &&\n state.products.getProduct.product.serviceSkuMappings\n );\n const addingServiceSkuMapping = useSelector(state => state.products.upsertServiceSkuMapping.isLoading);\n const deletingServiceSkuMapping = useSelector(state => state.products.deleteServiceSkuMapping.isLoading);\n\n return (\n \n {children}\n \n );\n};\n\nexport { ServiceCenterMappingContext, useServiceCenterMappingContext, ServiceCenterMappingProvider };\n","import { useToggle } from '@met/react-components';\nimport { Card, Col, Row, Typography } from 'antd';\nimport { CompassOutlined, PlusOutlined, PlusCircleOutlined } from '@ant-design/icons';\nimport React, { Fragment } from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { ServiceCenterMappingModal } from '../index';\nimport { useServiceCenterMappingContext } from './ServiceCenterMappingContext';\nimport { MappingsButtonWrapper, ServiceMappingsTable, DeleteTextWrapper, StyledSpan } from '../styled';\n\nconst Text = { Typography };\n\nconst ServiceCenterMappings = ({ sku, handleAddAll }) => {\n const {\n addMode,\n deleteMode,\n setMappingMode,\n setCurrentMapping,\n serviceSkuMappings,\n addingServiceSkuMapping,\n } = useServiceCenterMappingContext();\n\n const [showModal, toggleModal] = useToggle(false);\n\n const handleAddClick = () => {\n setMappingMode(addMode);\n setCurrentMapping({ sku: sku });\n toggleModal();\n };\n\n const handleDeleteClick = mappingToDelete => {\n setMappingMode(deleteMode);\n setCurrentMapping(mappingToDelete);\n toggleModal();\n };\n\n const serviceMappingsMarkup = serviceSkuMappings && (\n \n \n (index % 2 === 0 ? 'table-row-odd' : 'table-row-even')}\n bordered={false}\n showHeader={false}\n pagination={false}\n columns={[\n {\n key: 'compassIcon',\n render: () => ,\n },\n {\n key: 'description',\n dataIndex: 'description',\n },\n {\n key: 'axId',\n dataIndex: 'axId',\n },\n {\n key: 'delete',\n render: serviceMapping => (\n {\n handleDeleteClick(serviceMapping);\n }}\n >\n Delete\n \n ),\n },\n ]}\n dataSource={serviceSkuMappings}\n rowKey={item => item.serviceCenterId}\n />\n
\n \n );\n\n return (\n \n \n \n \n \n \n
\n \n \n \n \n }\n onClick={() => handleAddAll()}\n loading={addingServiceSkuMapping}\n >\n \n \n \n \n \n \n }\n onClick={() => handleAddClick()}\n >\n \n \n \n \n \n
\n \n
\n {serviceMappingsMarkup}
\n \n \n \n );\n};\n\nexport default ServiceCenterMappings;\n","import { Button, Col, Dropdown, Modal, ModalContent, ModalFooter, ModalHeader, Row, Text } from '@met/react-components';\nimport Enumerable from 'linq';\nimport React, { useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { toast } from 'react-toastify';\nimport { productsActions } from '../../../../store';\nimport { useServiceCenterMappingContext } from './ServiceCenterMappingContext';\nimport { ServiceCenterMappingModalBody } from '../styled';\n\nconst ServiceCenterMappingModal = ({ hidden, toggle }) => {\n const intl = useIntl();\n const dispatch = useDispatch();\n\n const {\n addMode,\n deleteMode,\n currentMapping,\n mappingMode,\n serviceCenters,\n loadingServiceCenters,\n serviceSkuMappings,\n deletingServiceSkuMapping,\n addingServiceSkuMapping,\n } = useServiceCenterMappingContext();\n\n const [serviceCentersOptions, setServiceCentersOptions] = useState([]);\n const [selectedServiceCenter, setSelectedServiceCenter] = useState(null);\n const [invalidServiceCenterMessage, setInvalidServiceCenterMessage] = useState('');\n\n useEffect(() => {\n if (serviceCenters && serviceCenters.length > 0) {\n setServiceCentersOptions(createServiceCentersOptions());\n }\n }, [serviceCenters]);\n\n useEffect(() => {\n if (selectedServiceCenter !== null) {\n setInvalidServiceCenterMessage('');\n }\n }, [selectedServiceCenter]);\n\n useEffect(() => {\n if (hidden) {\n setSelectedServiceCenter(null);\n setInvalidServiceCenterMessage('');\n }\n }, [hidden]);\n\n const createServiceCentersOptions = () => {\n let serviceCentersOptions = [];\n\n if (serviceCenters && serviceCenters.length > 0) {\n serviceCentersOptions = serviceCenters.map((serviceCenter, index) => {\n return {\n label: serviceCenter.description,\n value: serviceCenter.id,\n };\n });\n }\n\n return serviceCentersOptions;\n };\n\n const handleDeleteClick = () => {\n dispatch(productsActions.deleteServiceSkuMapping(currentMapping.serviceCenterId, currentMapping.sku))\n .then(() => {\n toggle();\n toast.success(\n intl.formatMessage({ id: 'admin.product.serviceCenterMappings.serviceCenterModal.deleteSuccess' })\n );\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.product.serviceCenterMappings.serviceCenterModal.deleteError' }));\n });\n };\n\n const handleAddClick = () => {\n if (selectedServiceCenter === null) {\n // No service center selected\n setInvalidServiceCenterMessage(\n intl.formatMessage({ id: 'admin.product.serviceCenterMappings.serviceCenterModal.pleaseSelect' })\n );\n } else {\n let mappedServiceCenterIds = Enumerable.from(serviceSkuMappings)\n .select(x => x.serviceCenterId)\n .toArray();\n if (mappedServiceCenterIds.includes(selectedServiceCenter.value)) {\n // Service center mapping already exists\n setInvalidServiceCenterMessage(\n intl.formatMessage({ id: 'admin.product.serviceCenterMappings.serviceCenterModal.alreadyExists' })\n );\n } else {\n // Service center mapping doesn't exist\n dispatch(productsActions.upsertServiceSkuMapping(selectedServiceCenter.value, currentMapping.sku))\n .then(() => {\n toggle();\n toast.success(\n intl.formatMessage({ id: 'admin.product.serviceCenterMappings.serviceCenterModal.createSuccess' })\n );\n })\n .catch(() => {\n toast.error(\n intl.formatMessage({ id: 'admin.product.serviceCenterMappings.serviceCenterModal.createError' })\n );\n });\n }\n }\n };\n\n const invalidMarkup = invalidServiceCenterMessage && (\n \n {invalidServiceCenterMessage}\n \n );\n\n const deleteMarkup = mappingMode === deleteMode && (\n \n \n \n \n
\n \n
\n );\n\n const addMarkup = mappingMode === addMode && (\n \n \n option.value}\n getOptionLabel={option => option.label}\n onChange={obj => setSelectedServiceCenter(obj)}\n label={intl.formatMessage({\n id: 'admin.product.serviceCenterMappings.serviceCenterModal.serviceCenterLabel',\n })}\n loading={loadingServiceCenters}\n />\n {invalidMarkup}\n \n
\n );\n\n const deleteButtonMarkup = mappingMode === deleteMode && (\n \n );\n\n const addButtonMarkup = mappingMode === addMode && (\n handleAddClick()}\n loading={addingServiceSkuMapping}\n disabled={!selectedServiceCenter}\n >\n {mappingMode}\n \n );\n\n return (\n \n \n \n {mappingMode}\n \n \n \n {deleteMarkup}\n {addMarkup}\n \n \n \n \n \n \n {deleteButtonMarkup}\n {addButtonMarkup}\n
\n \n
\n \n \n \n );\n};\n\nexport default ServiceCenterMappingModal;\n","import {\n Col,\n Modal,\n ModalBody,\n ModalContent,\n ModalFooter,\n ModalHeader,\n Row,\n Text,\n TextInput,\n} from '@met/react-components';\nimport PropTypes from 'prop-types';\nimport React, { Fragment, useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { ButtonWrapper, StyledButton } from '../styled';\n\nconst ProductProblemModal = ({\n hidden,\n toggle,\n problem,\n onCancelClick,\n onSaveChangesClick,\n problems,\n upsertingProblem,\n}) => {\n const intl = useIntl();\n const [description, setDescription] = useState('');\n const [descriptionInvalid, setDescriptionInvalid] = useState(false);\n const [isDirty, setIsDirty] = useState(false);\n const [problemValidationErrors, setProblemValidationErrors] = useState([]);\n\n const isValid = () => {\n let isValid = true;\n const regex = /([-!@#$%^&*()_+|~=`{}\\[\\]:\";'<>?,.\\/])/gm; // eslint-disable-line no-useless-escape\n setIsDirty(false);\n setDescriptionInvalid(false);\n setProblemValidationErrors([]);\n if (!description || description.length <= 0) {\n setDescriptionInvalid(true);\n isValid = false;\n }\n if (checkForDuplicate(problems, description)) {\n isValid = false;\n setProblemValidationErrors([intl.formatMessage({ id: 'admin.problems.noDuplicates' })]);\n }\n if (regex.test(description)) {\n isValid = false;\n setProblemValidationErrors([intl.formatMessage({ id: 'admin.problems.noSpecialCharacters' })]);\n }\n return isValid;\n };\n\n const checkForDuplicate = (allProblems, currentDescription) => {\n let result = false;\n let foundProblem = allProblems.find(x => x.description?.toLowerCase() === currentDescription?.toLowerCase());\n if (foundProblem) {\n result = true;\n } else {\n result = false;\n }\n return result;\n };\n\n const handleSaveChangesClick = () => {\n if (isValid()) {\n onSaveChangesClick(problem.id, description);\n }\n };\n\n useEffect(() => {\n if (problem && problem.description && problem.description.length > 0) setDescription(problem.description);\n else setDescription('');\n setIsDirty(false);\n }, [problem]);\n\n useEffect(() => {\n setDescriptionInvalid(false);\n setIsDirty(true);\n }, [description]);\n\n const problemValidationErrorList =\n !isDirty &&\n problemValidationErrors &&\n problemValidationErrors.length > 0 &&\n problemValidationErrors.map((error, index) => {\n return (\n \n \n \n {error}\n \n \n
\n );\n });\n\n const problemValidationErrorMarkup = problemValidationErrorList && {problemValidationErrorList};\n\n const editProductProblemModal = problem && (\n \n \n {problem.id ? (\n \n ) : (\n \n )}\n \n \n \n \n setDescription(e.target.value)}\n invalid={descriptionInvalid}\n errorMessage={intl.formatMessage({ id: 'admin.problems.descriptionRequired' })}\n />\n \n
\n {problemValidationErrorMarkup}\n \n \n \n \n {/* eslint-disable-next-line test-selectors/button */}\n \n onCancelClick()} loading={upsertingProblem}>\n \n \n \n \n \n \n \n
\n \n \n );\n\n return (\n \n {editProductProblemModal}\n \n );\n};\nProductProblemModal.propTypes = {\n hidden: PropTypes.bool,\n toggle: PropTypes.func,\n problem: PropTypes.object,\n onCancelClick: PropTypes.func,\n onSaveChangesClick: PropTypes.func,\n};\nexport default ProductProblemModal;\n","import {\n Button,\n Col,\n Icon,\n InputGroup,\n ListGroup,\n ListGroupItem,\n Loader,\n Row,\n Text,\n TextInput,\n useToggle,\n} from '@met/react-components';\nimport React, { Fragment, useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { toast } from 'react-toastify';\nimport { intlSyncActions, productProblemActions } from '../../../../store';\nimport ProductProblemModal from './ProductProblemModal';\nimport { Button as AntButton, PageHeader } from 'antd';\nimport { PlusOutlined } from '@ant-design/icons';\n\nconst ProductProblemTab = () => {\n const intl = useIntl();\n const dispatch = useDispatch();\n\n const loadingProblems = useSelector(state => state.productProblems.getProductProblems.isLoading);\n const problems = useSelector(state => state.productProblems.getProductProblems.productProblems);\n const upsertingProblem = useSelector(state => state.productProblems.upsertProductProblem.isLoading);\n const isSyncingProblems = useSelector(state => state.intlSync.syncProductProblemsToIntl.isLoading);\n const [filter, setFilter] = useState('');\n const [filteredProblems, setFilteredProblems] = useState([]);\n const [selectedProblem, setSelectedProblem] = useState({});\n const [showModal, setShowModal] = useToggle(false);\n\n useEffect(() => {\n dispatch(productProblemActions.getProductProblems()).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.serviceOrders.loadingServiceOrderStatusesErrorMessage' }), {\n autoClose: false,\n });\n });\n }, [dispatch]);\n\n useEffect(() => {\n let probs = problems.filter(problem => {\n return (\n !filter || 0 === filter.length || problem.description?.toLocaleLowerCase()?.includes(filter.toLocaleLowerCase())\n );\n });\n setFilteredProblems([...probs]);\n }, [filter]);\n\n useEffect(() => {\n setFilteredProblems([...problems]);\n }, [problems]);\n\n const handleNewProblemClick = () => {\n setSelectedProblem({});\n setShowModal();\n };\n\n const handleEditProblemClick = problem => {\n setSelectedProblem(problem);\n setShowModal();\n };\n\n const handleCancelClick = () => {\n setShowModal();\n };\n const handleSaveChangesClick = (id, description) => {\n dispatch(productProblemActions.upsertProductProblem(id, description))\n .then(payload => {\n setShowModal();\n toast.success(intl.formatMessage({ id: 'admin.problems.problemUpdated' }), { autoClose: 5000 });\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.problems.problemError' }), { autoClose: 5000 });\n });\n };\n\n const handleSyncProblems = () => {\n dispatch(intlSyncActions.syncProductProblemsToIntl()).then(res => {\n toast.success('Successfully Synced Problems to Intl', { autoClose: 5000 });\n });\n };\n\n const searchResultsList =\n filteredProblems &&\n filteredProblems.map((problem, index) => {\n return (\n \n \n \n \n \n \n \n {problem.description}\n \n \n \n \n \n
\n \n );\n });\n\n const loadingSearchResultsMarkup = loadingProblems && (\n \n \n \n \n
\n );\n\n const searchResultsMarkup = problems && problems.length > 0 && (\n \n \n \n {searchResultsList}\n \n
\n \n );\n\n const noSearchResultsMarkup = !loadingProblems && problems && problems.length === 0 && (\n \n \n \n \n \n \n \n \n
\n \n \n \n
\n );\n const productProblemModal = (\n \n );\n const filterBarMarkup = (\n \n \n \n \n \n \n \n \n setFilter(e.target.value)} value={filter} />\n \n \n
\n );\n return (\n \n handleSyncProblems()}>\n Sync Problems to Intl\n ,\n handleNewProblemClick()} icon={}>\n \n \n \n ,\n ]}\n >\n {filterBarMarkup}\n {loadingSearchResultsMarkup}\n {searchResultsMarkup}\n {noSearchResultsMarkup}\n \n {productProblemModal}\n \n );\n};\n\nexport default ProductProblemTab;\n","import {\n Col,\n Modal,\n ModalBody,\n ModalContent,\n ModalFooter,\n ModalHeader,\n Row,\n Text,\n TextInput,\n} from '@met/react-components';\nimport PropTypes from 'prop-types';\nimport React, { Fragment, useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { ButtonWrapper, StyledButton } from '../styled';\n\nconst ProductIncludedModal = ({\n hidden,\n toggle,\n inclusion,\n onCancelClick,\n onSaveChangesClick,\n inclusions,\n upsertingInclusion,\n}) => {\n const intl = useIntl();\n const [description, setDescription] = useState('');\n const [descriptionInvalid, setDescriptionInvalid] = useState(false);\n const [isDirty, setIsDirty] = useState(false);\n const [inclusionValidationErrors, setInclusionValidationErrors] = useState([]);\n\n const isValid = () => {\n let isValid = true;\n setIsDirty(false);\n setDescriptionInvalid(false);\n setInclusionValidationErrors([]);\n if (!description || description.length <= 0) {\n setDescriptionInvalid(true);\n isValid = false;\n }\n if (checkForDuplicateInclusion(inclusion, description, inclusions)) {\n isValid = false;\n setInclusionValidationErrors(['Inclusion description already exists']);\n }\n return isValid;\n };\n\n const checkForDuplicateInclusion = (currentInclusion, currentDescription, allInclusions) => {\n const regex = /(\\s|[-!$%^&*()_+|~=`{}\\[\\]:\";'<>?,.\\/])/gm; // eslint-disable-line no-useless-escape\n let result = allInclusions.some(x => {\n if (x.id === currentInclusion.id) return false;\n else if (x.description.replace(regex, '').toLowerCase() === currentDescription.replace(regex, '').toLowerCase())\n return true;\n else return false;\n });\n return result;\n };\n\n const handleSaveChangesClick = () => {\n if (isValid()) {\n onSaveChangesClick(inclusion.id, description);\n }\n };\n\n useEffect(() => {\n if (inclusion && inclusion.description && inclusion.description.length > 0) setDescription(inclusion.description);\n else setDescription('');\n setIsDirty(false);\n }, [inclusion]);\n\n useEffect(() => {\n setDescriptionInvalid(false);\n setIsDirty(true);\n }, [description]);\n\n const inclusionValidationErrorList =\n !isDirty &&\n inclusionValidationErrors &&\n inclusionValidationErrors.length > 0 &&\n inclusionValidationErrors.map((error, index) => {\n return (\n \n \n \n {error}\n \n \n
\n );\n });\n\n const inclusionValidationErrorMarkup = inclusionValidationErrorList && (\n {inclusionValidationErrorList}\n );\n\n const editProductIncludedModal = inclusion && (\n \n \n {inclusion.id ? (\n \n ) : (\n \n )}\n \n \n \n \n setDescription(e.target.value)}\n invalid={descriptionInvalid}\n errorMessage={intl.formatMessage({ id: 'admin.included.descriptionRequired' })}\n />\n \n
\n {inclusionValidationErrorMarkup}\n \n \n \n \n {/* eslint-disable-next-line test-selectors/button */}\n \n onCancelClick()} loading={upsertingInclusion}>\n \n \n \n \n \n \n \n
\n \n \n );\n\n return (\n \n {editProductIncludedModal}\n \n );\n};\nProductIncludedModal.propTypes = {\n hidden: PropTypes.bool,\n toggle: PropTypes.func,\n inclusion: PropTypes.object,\n onCancelClick: PropTypes.func,\n onSaveChangesClick: PropTypes.func,\n inclusions: PropTypes.array,\n};\nexport default ProductIncludedModal;\n","/* eslint-disable test-selectors/button */\nimport { useToggle } from '@met/react-components';\nimport React, { Fragment, useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { toast } from 'react-toastify';\nimport { productIncludedActions, batteriesActions, intlSyncActions } from '../../../../store';\nimport ProductIncludedModal from './ProductIncludedModal';\nimport { Button, Col, Collapse, Empty, Input, List, PageHeader, Row, Spin, Switch, Typography } from 'antd';\nimport { EditOutlined, WalletTwoTone, RedoOutlined, PlusCircleOutlined, ThunderboltTwoTone } from '@ant-design/icons';\nimport {\n ButtonIconWrapper,\n MaxRow,\n IncludedResultsDiv,\n RowIconWrapper,\n FilterBarRow,\n IncludedFilterLabelWrapper,\n IncludedButtonWrapper,\n} from '../styled';\n\nconst ProductIncludedTab = () => {\n const intl = useIntl();\n const dispatch = useDispatch();\n\n const { Panel } = Collapse;\n\n const loadingInclusions = useSelector(state => state.productIncluded.getProductInclusions.isLoading);\n const loadingBatteries = useSelector(state => state.batteries.getBatteries.isLoading);\n const updatingBattery = useSelector(state => state.batteries.upsertBattery.isLoading);\n const batteries = useSelector(state => state.batteries.getBatteries.batteries);\n const refreshingInclusions = useSelector(state => state.productIncluded.refreshProductInclusions.isLoading);\n const inclusions = useSelector(state => state.productIncluded.getProductInclusions.productInclusions);\n const upsertingInclusion = useSelector(state => state.productIncluded.upsertProductInclusions.isLoading);\n const isSyncingInclusionsToIntl = useSelector(state => state.intlSync.syncProductInclusionsToIntl.isLoading);\n\n const [filter, setFilter] = useState('');\n const [filteredInclusions, setFilteredInclusions] = useState([]);\n const [selectedInclusion, setSelectedInclusion] = useState({});\n const [showModal, setShowModal] = useToggle(false);\n\n useEffect(() => {\n dispatch(productIncludedActions.getProductInclusions()).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.productInclusionMappings.errorLoadingInclusion' }), {\n autoClose: false,\n });\n });\n dispatch(batteriesActions.getBatteries()).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.productInclusionMappings.errorLoadingBattery' }), {\n autoClose: false,\n });\n });\n }, [dispatch]);\n\n useEffect(() => {\n let incs = inclusions.filter(inclusion => {\n return (\n !Boolean(filter) ||\n 0 === filter.length ||\n inclusion.description.toLocaleLowerCase().includes(filter.toLocaleLowerCase())\n );\n });\n setFilteredInclusions([...incs]);\n }, [filter]);\n\n useEffect(() => {\n setFilteredInclusions([...inclusions]);\n }, [inclusions]);\n\n const handleNewInclusionClick = () => {\n setSelectedInclusion({});\n setShowModal();\n };\n\n const refreshInclusionsClick = () => {\n dispatch(productIncludedActions.refreshProductInclusions())\n .then(payload => {\n toast.success(intl.formatMessage({ id: 'admin.included.includedUpdated' }), { autoClose: 5000 });\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.included.includedError' }), { autoClose: 5000 });\n });\n };\n\n const handleEditInclusionClick = inclusion => {\n setSelectedInclusion(inclusion);\n setShowModal();\n };\n\n const handleCancelClick = () => {\n setShowModal();\n };\n\n const handleSaveChangesClick = (id, description) => {\n dispatch(productIncludedActions.upsertProductInclusion(id, description))\n .then(payload => {\n setShowModal();\n toast.success(intl.formatMessage({ id: 'admin.included.includedUpdated' }), { autoClose: 5000 });\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.included.includedError' }), { autoClose: 5000 });\n });\n };\n\n const handleEligibleBatteryToggle = (value, sku) => {\n let battery = batteries.find(b => b.sku === sku);\n if (battery) {\n battery.eligible = value;\n dispatch(batteriesActions.upsertBattery(battery)).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.included.errorUpdatingBattery' }), { autoClose: 5000 });\n });\n }\n };\n\n const handleActiveBatteryToggle = (value, sku) => {\n let battery = batteries.find(b => b.sku === sku);\n if (battery) {\n battery.isActive = value;\n dispatch(batteriesActions.upsertBattery(battery)).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.included.errorUpdatingBattery' }), { autoClose: 5000 });\n });\n }\n };\n\n const handleSyncInclusionsToIntlClick = () => {\n dispatch(intlSyncActions.syncProductInclusionsToIntl()).then(res => {\n toast.success('Successfully Synced Inclusions to Intl', { autoClose: 5000 });\n });\n };\n\n const loadingSearchResultsMarkup = (loadingInclusions || refreshingInclusions) && ;\n\n const searchResultsMarkup = !refreshingInclusions && inclusions && inclusions.length > 0 && (\n (\n \n \n \n \n \n \n \n {inclusion.description} \n \n \n handleEditInclusionClick(inclusion)}\n data-test-id={`editButton${inclusion.description}`}\n >\n \n \n \n \n \n
\n \n \n \n )}\n >\n );\n\n const productIncludedModal = (\n \n );\n\n const filterBarMarkup = (\n \n \n \n \n \n \n \n setFilter(e.target.value)} value={filter} />\n \n \n \n handleSyncInclusionsToIntlClick()}\n className='mr-2'\n >\n Sync Inclusions to Intl\n \n refreshInclusionsClick()}\n className='mr-2'\n >\n \n \n \n \n \n
\n \n handleNewInclusionClick()}\n >\n \n \n \n \n \n
\n \n \n \n \n );\n\n const includedItemsHeader = Inclusions;\n\n const batteryHeader = Batteries;\n\n const includedItemsPanel = (\n \n {filterBarMarkup}\n \n {searchResultsMarkup}\n {loadingSearchResultsMarkup}\n \n \n );\n\n const includedBatteryPanel = (\n \n \n \n \n \n Sku\n
\n \n \n \n Description\n
\n \n \n \n Is Eligible\n
\n \n \n \n Is Active\n
\n \n
\n \n (\n \n \n \n \n \n \n \n {battery.skuAlias}\n \n \n {battery.description}\n \n \n handleEligibleBatteryToggle(v, battery.sku)}\n disabled={updatingBattery}\n />\n \n \n handleActiveBatteryToggle(v, battery.sku)}\n disabled={updatingBattery}\n />\n \n \n )}\n >\n {loadingBatteries && (\n \n \n
\n )}\n \n \n );\n\n return (\n \n \n \n {includedItemsPanel}\n {includedBatteryPanel}\n \n \n {productIncludedModal}\n \n );\n};\n\nexport default ProductIncludedTab;\n","import React, { createContext, useContext, useState } from 'react';\nimport { useIntl } from 'react-intl';\nimport { useSelector } from 'react-redux';\n\nconst ProductProblemMappingContext = createContext({\n addMode: '',\n deleteMode: '',\n mappingMode: '',\n setMappingMode: () => {},\n currentMapping: null,\n setCurrentMapping: () => {},\n productProblems: [],\n loadingProductProblem: false,\n productProblemMappings: [],\n addingProductProblemMapping: false,\n deletingProductProblemMapping: false,\n selectedProductProblemMappings: [],\n setSelectedProductProblemMappings: () => {},\n});\n\nconst useProductProblemMappingContext = () => useContext(ProductProblemMappingContext);\n\nconst ProductProblemMappingProvider = ({ children }) => {\n const intl = useIntl();\n\n const addMode = intl.formatMessage({ id: 'admin.product.addMapping' });\n const deleteMode = intl.formatMessage({ id: 'admin.product.deleteMapping' });\n\n const [mappingMode, setMappingMode] = useState('');\n const [currentMapping, setCurrentMapping] = useState(null);\n const [selectedProductProblemMappings, setSelectedProductProblemMappings] = useState([]);\n\n const productProblems = useSelector(state => state.productProblems.getProductProblems.productProblems);\n const loadingProductProblems = useSelector(state => state.productProblems.getProductProblems.isLoading);\n const productProblemMappings = useSelector(\n state =>\n state.products.getProduct &&\n state.products.getProduct.product &&\n state.products.getProduct.product.productProblems\n );\n const addingProductProblemMapping = useSelector(state => state.products.upsertProductProblemMapping.isLoading);\n const deletingProductProblemMapping = useSelector(state => state.products.deleteProductProblemMapping.isLoading);\n\n return (\n \n {children}\n \n );\n};\n\nexport { ProductProblemMappingContext, useProductProblemMappingContext, ProductProblemMappingProvider };\n","import { Button, Modal, Typography } from 'antd';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { toast } from 'react-toastify';\nimport { productsActions } from '../../../../store';\nimport { useProductProblemMappingContext } from './ProductProblemMappingContext';\n\nconst { Text } = Typography;\n\nconst ProductProblemBulkDeleteModal = ({ hidden, toggle, deleteConfirm }) => {\n const intl = useIntl();\n const dispatch = useDispatch();\n\n const { currentMapping, productProblems, selectedProductProblemMappings } = useProductProblemMappingContext();\n\n const [deletionList, setDeletionList] = useState([]);\n\n useEffect(() => {\n if (!hidden) {\n createDeletionList();\n }\n }, [toggle]);\n\n const createDeletionList = () => {\n if (\n productProblems &&\n productProblems.length > 0 &&\n selectedProductProblemMappings &&\n selectedProductProblemMappings.length > 0\n ) {\n setDeletionList(\n selectedProductProblemMappings.map(\n (x, index) => productProblems.find((problem) => problem.id === x)?.description\n )\n );\n }\n };\n\n const handleDeleteClick = () => {\n if (selectedProductProblemMappings && selectedProductProblemMappings.length > 0 && currentMapping.sku) {\n dispatch(productsActions.deleteBulkProductProblems(selectedProductProblemMappings, currentMapping.sku))\n .then(() => {\n deleteConfirm();\n toggle();\n toast.success(\n intl.formatMessage({ id: 'admin.product.productProblemMappings.productProblemModal.deleteSuccess' })\n );\n })\n .catch(() => {\n toast.error(\n intl.formatMessage({ id: 'admin.product.productProblemMappings.productProblemModal.deleteError' })\n );\n });\n }\n };\n\n const bodyContent = (\n \n \n \n \n \n {deletionList.map((x, index) => {\n return - {x}
;\n })}\n
\n \n );\n return (\n toggle()}\n className='mr-2'\n >\n \n ,\n handleDeleteClick()}\n >\n \n ,\n ]}\n destroyOnClose\n >\n {bodyContent}\n \n );\n};\n\nexport default ProductProblemBulkDeleteModal;\n","import { useToggle } from '@met/react-components';\nimport { Button, Card, Col, Popconfirm, Row } from 'antd';\nimport { DeleteOutlined, PlusOutlined } from '@ant-design/icons';\nimport React, { Fragment, useEffect } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { ProductProblemMappingModal } from '../index';\nimport { useProductProblemMappingContext } from './ProductProblemMappingContext';\nimport { DeleteTextWrapper, ProblemMappingsTable } from '../styled';\nimport { toast } from 'react-toastify';\nimport { productsActions } from '../../../../store';\nimport ProductProblemBulkDeleteModal from './ProductProblemBulkDeleteModal';\n\nconst ProductProblemMappings = ({ sku }) => {\n const {\n addMode,\n deleteMode,\n setMappingMode,\n setCurrentMapping,\n productProblemMappings,\n selectedProductProblemMappings,\n setSelectedProductProblemMappings,\n } = useProductProblemMappingContext();\n\n const dispatch = useDispatch();\n const intl = useIntl();\n\n const [showModal, toggleModal] = useToggle(false);\n const [showDeleteModal, toggleDeleteModal] = useToggle(false);\n\n useEffect(() => {\n setCurrentMapping({ sku: sku });\n }, [sku]);\n\n const handleAddClick = () => {\n setMappingMode(addMode);\n toggleModal();\n };\n\n const handleDeleteClick = mappingToDelete => {\n // Removes from list of selected mappings\n if (\n selectedProductProblemMappings &&\n selectedProductProblemMappings.length > 0 &&\n selectedProductProblemMappings.find(x => x === mappingToDelete.id)\n ) {\n let mappings = selectedProductProblemMappings;\n mappings.splice(mappings.indexOf(mappingToDelete.id), 1);\n\n setSelectedProductProblemMappings(mappings);\n }\n\n dispatch(productsActions.deleteProductProblemMapping(mappingToDelete.id, mappingToDelete.sku))\n .then(() => {\n toast.success(\n intl.formatMessage({ id: 'admin.product.productProblemMappings.productProblemModal.deleteSuccess' })\n );\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.product.productProblemMappings.productProblemModal.deleteError' }));\n });\n };\n\n const handleDeleteBulkConfirm = () => {\n setSelectedProductProblemMappings([]);\n };\n\n const onSelectChange = selectedRowKeys => {\n setSelectedProductProblemMappings(selectedRowKeys);\n };\n\n const productProblemMappingMarkup = productProblemMappings && (\n \n \n
(index % 2 === 0 ? 'table-row-odd' : 'table-row-even')}\n rowSelection={{\n selectedProductProblemMappings,\n onChange: onSelectChange,\n preserveSelectedRowKeys: false,\n }}\n bordered={false}\n pagination={false}\n showHeader={true}\n columns={[\n {\n key: 'description',\n dataIndex: 'description',\n },\n {\n title: 'Actions',\n key: 'delete',\n render: productProblemMapping => (\n handleDeleteClick(productProblemMapping)}\n okText={intl.formatMessage({ id: 'general.yes' })}\n cancelText={intl.formatMessage({ id: 'general.no' })}\n cancelButtonProps={{ 'data-test-id': 'cancelBtn', style: { height: 'auto' } }}\n okButtonProps={{ 'data-test-id': 'yesBtn', style: { height: 'auto' } }}\n >\n Delete\n \n ),\n },\n ]}\n dataSource={productProblemMappings}\n rowKey={item => item.id}\n />\n {productProblemMappingMarkup}
\n \n \n toggleDeleteModal()}\n deleteConfirm={() => handleDeleteBulkConfirm()}\n />\n \n );\n};\n\nexport default ProductProblemMappings;\n","import { PlusOutlined } from '@ant-design/icons';\nimport { Button, Col, Divider, Form, Input, Modal, Row, Select } from 'antd';\nimport Enumerable from 'linq';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { toast } from 'react-toastify';\nimport { productsActions } from '../../../../store';\nimport { useProductProblemMappingContext } from './ProductProblemMappingContext';\nimport { productProblemActions } from '../../../../store';\nimport { ProductProblemForm } from '../styled.js';\n\nconst ProductProblemMappingModal = ({ hidden, toggle }) => {\n const formRef = useRef();\n const formRef2 = useRef();\n const intl = useIntl();\n const dispatch = useDispatch();\n\n const {\n addMode,\n deleteMode,\n mappingMode,\n currentMapping,\n productProblems,\n loadingProductProblems,\n productProblemMappings,\n addingProductProblemMapping,\n } = useProductProblemMappingContext();\n\n const [productProblemsOptions, setProductProblemsOptions] = useState([]);\n const [mappedIds, setMappedIds] = useState([]);\n\n useEffect(() => {\n if (productProblems && productProblems.length > 0) {\n setProductProblemsOptions(createProductProblemsOptions());\n }\n }, [productProblems, mappedIds, productProblemMappings]);\n\n useEffect(() => {\n if (productProblemMappings && productProblemMappings.length > 0) {\n let problemIds = Enumerable.from(productProblemMappings)\n .select(x => x.id || x.problemId)\n .toArray();\n\n setMappedIds(problemIds);\n } else {\n setMappedIds([]);\n }\n }, [productProblemMappings]);\n\n const createProductProblemsOptions = () => {\n let productProblemsOptions = [];\n\n if (productProblems && productProblems.length > 0) {\n productProblemsOptions = productProblems.map((productProblems, index) => {\n return {\n key: 'productProblem-' + index,\n label: productProblems.description,\n value: productProblems.id,\n disabled: mappedIds.includes(productProblems.id),\n };\n });\n }\n\n return productProblemsOptions;\n };\n\n const checkForSpecialCharacters = formVal => {\n let isValid = true;\n const regex = /([-!@#$%^&*()_+|~=`{}\\[\\]:\";'<>?,.\\/])/gm; // eslint-disable-line no-useless-escape\n if (regex.test(formVal)) {\n isValid = false;\n }\n return isValid;\n };\n\n const checkForDuplicate = formVal => {\n let duplicate = false;\n let foundProblem = productProblemsOptions.find(x => x.label?.toLowerCase() === formVal?.toLowerCase());\n if (foundProblem) {\n duplicate = true;\n } else {\n duplicate = false;\n }\n return duplicate;\n };\n\n const handleAddClick = formVal => {\n if (formVal.addProblemItem && formVal.addProblemItem.length > 0) {\n dispatch(productProblemActions.upsertProductProblem(formVal.id, formVal.addProblemItem))\n .then(payload => {\n toast.success(intl.formatMessage({ id: 'admin.problems.problemUpdated' }), { autoClose: 5000 });\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.problems.problemError' }), { autoClose: 5000 });\n });\n }\n };\n\n const handleSubmit = formVal => {\n if (formVal.productProblems && formVal.productProblems.length > 0 && currentMapping.sku) {\n dispatch(productsActions.insertBulkProductProblems(formVal.productProblems, currentMapping.sku))\n .then(() => {\n toggle();\n toast.success(\n intl.formatMessage({ id: 'admin.product.productProblemMappings.productProblemModal.createSuccess' })\n );\n })\n .catch(() => {\n toast.error(\n intl.formatMessage({ id: 'admin.product.productProblemMappings.productProblemModal.createError' })\n );\n });\n }\n };\n\n const addMarkup = mappingMode === addMode && (\n {\n handleSubmit(formVal);\n }}\n ref={formRef}\n >\n \n (\n \n )}\n >\n \n \n );\n\n return (\n toggle()} className='mr-2'>\n \n ,\n formRef.current.submit()}\n loading={addingProductProblemMapping}\n >\n {mappingMode}\n ,\n ]}\n destroyOnClose\n >\n {addMarkup}\n \n );\n};\n\nexport default ProductProblemMappingModal;\n","import React, { createContext, useContext, useState } from 'react';\nimport { useIntl } from 'react-intl';\nimport { useSelector } from 'react-redux';\n\nconst ProductIncludedMappingContext = createContext({\n addMode: '',\n deleteMode: '',\n mappingMode: '',\n setMappingMode: () => {},\n currentMapping: null,\n setCurrentMapping: () => {},\n productInclusions: [],\n loadingProductInclusions: false,\n productInclusionMappings: [],\n addingProductInclusionMapping: false,\n deletingProductInclusionMapping: false,\n refreshingProductInclusions: false,\n});\n\nconst useProductIncludedMappingContext = () => useContext(ProductIncludedMappingContext);\n\nconst ProductIncludedMappingProvider = ({ children }) => {\n const intl = useIntl();\n\n const addMode = intl.formatMessage({ id: 'admin.product.addMapping' });\n const deleteMode = intl.formatMessage({ id: 'admin.product.deleteMapping' });\n\n const [mappingMode, setMappingMode] = useState('');\n const [currentMapping, setCurrentMapping] = useState(null);\n\n const productInclusions = useSelector(state => state.productIncluded.getProductInclusions.productInclusions);\n const loadingProductInclusions = useSelector(state => state.productIncluded.getProductInclusions.isLoading);\n const productInclusionMappings = useSelector(\n state =>\n state.products.getProduct &&\n state.products.getProduct.product &&\n state.products.getProduct.product.productIncludedMappings\n );\n const addingProductInclusionMapping = useSelector(state => state.products.upsertProductIncludedMapping.isLoading);\n const deletingProductInclusionMapping = useSelector(state => state.products.deleteProductIncludedMapping.isLoading);\n const refreshingProductInclusions = useSelector(state => state.products.refreshProductInclusions.isLoading);\n\n return (\n \n {children}\n \n );\n};\n\nexport { ProductIncludedMappingContext, useProductIncludedMappingContext, ProductIncludedMappingProvider };\n","import { Button, Col, Dropdown, Modal, ModalContent, ModalFooter, ModalHeader, Row, Text } from '@met/react-components';\nimport Enumerable from 'linq';\nimport React, { useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { toast } from 'react-toastify';\nimport { productsActions } from '../../../../store';\nimport { useProductIncludedMappingContext } from './ProductIncludedMappingContext';\nimport { ProductIncludedMappingModalBody } from '../styled';\n\nconst ProductIncludedMappingModal = ({ hidden, toggle }) => {\n const intl = useIntl();\n const dispatch = useDispatch();\n\n const {\n addMode,\n deleteMode,\n mappingMode,\n currentMapping,\n productInclusions,\n loadingProductInclusions,\n productInclusionMappings,\n addingProductInclusionMapping,\n deletingProductInclusionMapping,\n } = useProductIncludedMappingContext();\n\n const [productInclusionsOptions, setProductInclusionOptions] = useState([]);\n const [selectedProductInclusion, setSelectedProductInclusion] = useState(null);\n const [invalidProductInclusionMessage, setInvalidProductInclusionMessage] = useState('');\n\n useEffect(() => {\n if (productInclusions && productInclusions.length > 0) {\n setProductInclusionOptions(createProductInclusionOptions());\n }\n }, [productInclusions]);\n\n useEffect(() => {\n if (selectedProductInclusion !== null) {\n setInvalidProductInclusionMessage('');\n }\n }, [selectedProductInclusion]);\n\n useEffect(() => {\n if (hidden) {\n setSelectedProductInclusion(null);\n setInvalidProductInclusionMessage('');\n }\n }, [hidden]);\n\n const createProductInclusionOptions = () => {\n let productInclusionsOptions = [];\n\n if (productInclusions && productInclusions.length > 0) {\n productInclusionsOptions = productInclusions.map((productInclusions, index) => {\n return {\n label: productInclusions.description,\n value: productInclusions.id,\n };\n });\n }\n\n return productInclusionsOptions;\n };\n\n const handleDeleteClick = () => {\n dispatch(productsActions.deleteProductIncludedMapping(currentMapping.includedId, currentMapping.sku))\n .then(() => {\n toggle();\n toast.success(\n intl.formatMessage({ id: 'admin.product.productInclusionMappings.productInclusionModal.deleteSuccess' })\n );\n })\n .catch(() => {\n toast.error(\n intl.formatMessage({ id: 'admin.product.productInclusionMappings.productInclusionModal.deleteError' })\n );\n });\n };\n\n const handleAddClick = () => {\n if (selectedProductInclusion === null) {\n setInvalidProductInclusionMessage(\n intl.formatMessage({ id: 'admin.product.productInclusionMappings.productInclusionModal.pleaseSelect' })\n );\n } else {\n let mappedProductInclusionIds = Enumerable.from(productInclusionMappings)\n .select(x => x.includedId)\n .toArray();\n if (mappedProductInclusionIds.includes(selectedProductInclusion.value)) {\n setInvalidProductInclusionMessage(\n intl.formatMessage({ id: 'admin.product.productInclusionMappings.productInclusionModal.alreadyExists' })\n );\n } else {\n dispatch(productsActions.upsertProductIncludedMapping(selectedProductInclusion.value, currentMapping.sku))\n .then(() => {\n toggle();\n toast.success(\n intl.formatMessage({ id: 'admin.product.productInclusionMappings.productInclusionModal.createSuccess' })\n );\n })\n .catch(() => {\n toast.error(\n intl.formatMessage({ id: 'admin.product.productInclusionMappings.productInclusionModal.createError' })\n );\n });\n }\n }\n };\n\n const invalidMarkup = invalidProductInclusionMessage && (\n \n {invalidProductInclusionMessage}\n \n );\n\n const deleteMarkup = mappingMode === deleteMode && (\n \n \n \n \n
\n \n
\n );\n\n const addMarkup = mappingMode === addMode && (\n \n \n option.value}\n getOptionLabel={option => option.label}\n onChange={obj => setSelectedProductInclusion(obj)}\n label={intl.formatMessage({\n id: 'admin.product.productInclusionMappings.productInclusionModal.productInclusionLabel',\n })}\n loading={loadingProductInclusions}\n />\n {invalidMarkup}\n \n
\n );\n\n const deleteButtonMarkup = mappingMode === deleteMode && (\n \n );\n\n const addButtonMarkup = mappingMode === addMode && (\n handleAddClick()}\n loading={addingProductInclusionMapping}\n disabled={!selectedProductInclusion}\n >\n {mappingMode}\n \n );\n\n return (\n \n \n \n {mappingMode}\n \n \n \n {deleteMarkup}\n {addMarkup}\n \n \n \n \n \n toggle()}\n className='mr-2'\n loading={addingProductInclusionMapping || deletingProductInclusionMapping}\n >\n \n \n {deleteButtonMarkup}\n {addButtonMarkup}\n
\n \n
\n \n \n \n );\n};\n\nexport default ProductIncludedMappingModal;\n","import { useToggle, Loader } from '@met/react-components';\nimport { Card, Col, Row, Typography } from 'antd';\nimport React, { Fragment, useEffect } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { toast } from 'react-toastify';\nimport ProductIncludedMappingModal from './ProductIncludedMappingModal';\nimport { useProductIncludedMappingContext } from './ProductIncludedMappingContext';\nimport { productsActions } from '../../../../store';\nimport { DeleteTextWrapper, IncludedMappingsTable, MappingsButtonWrapper, StyledSpan } from '../styled';\nimport { InboxOutlined, PlusOutlined, RedoOutlined } from '@ant-design/icons';\n\nconst Text = { Typography };\n\nconst ProductIncludedMappings = ({ sku }) => {\n const intl = useIntl();\n const dispatch = useDispatch();\n\n const {\n addMode,\n deleteMode,\n setMappingMode,\n setCurrentMapping,\n productInclusionMappings,\n refreshingProductInclusions,\n } = useProductIncludedMappingContext();\n\n const [showModal, toggleModal] = useToggle(false);\n\n const handleAddClick = () => {\n setMappingMode(addMode);\n setCurrentMapping({ sku: sku });\n toggleModal();\n };\n\n const handleRefreshClick = () => {\n dispatch(productsActions.refreshProductInclusions(sku))\n .then(payload => {\n toast.success(intl.formatMessage({ id: 'admin.included.includedUpdated' }), { autoClose: 5000 });\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.included.includedError' }), { autoClose: 5000 });\n });\n };\n\n const handleDeleteClick = mappingToDelete => {\n setMappingMode(deleteMode);\n setCurrentMapping(mappingToDelete);\n toggleModal();\n };\n\n const productInclusionMappingMarkup = !refreshingProductInclusions && productInclusionMappings && (\n \n \n (index % 2 === 0 ? 'table-row-odd' : 'table-row-even')}\n bordered={false}\n showHeader={false}\n pagination={false}\n columns={[\n {\n key: 'boxIcon',\n render: () => ,\n },\n {\n key: 'description',\n dataIndex: 'description',\n },\n {\n key: 'delete',\n render: inclusionMapping => (\n {\n handleDeleteClick(inclusionMapping);\n }}\n >\n Delete\n \n ),\n },\n ]}\n dataSource={productInclusionMappings}\n rowKey={item => item.includedId}\n />\n
\n \n );\n\n return (\n \n \n \n \n \n \n
\n \n \n }\n disabled={refreshingProductInclusions}\n loading={refreshingProductInclusions}\n onClick={() => handleRefreshClick()}\n >\n \n \n \n \n \n \n }\n disabled={refreshingProductInclusions}\n loading={refreshingProductInclusions}\n onClick={() => handleAddClick()}\n >\n \n \n \n \n \n
\n {productInclusionMappingMarkup}
\n \n \n \n );\n};\n\nexport default ProductIncludedMappings;\n","import { Button, Col, Form, Layout, List, Row, Select, Spin, Typography } from 'antd';\nimport { CheckCircleTwoTone, MinusCircleOutlined } from '@ant-design/icons';\nimport React, { useEffect } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nconst { Content } = Layout;\nconst { Title, Paragraph } = Typography;\nconst RoutingResult = ({ result }) => {\n const intl = useIntl();\n\n const serviceCenterDisplay = (\n \n
\n
\n {result?.selectedServiceCenter?.city},{' '}\n {result?.selectedServiceCenter?.state}\n
\n
\n \n \n {' '}\n {item.serviceCenter?.city}, {item.serviceCenter?.state}{' '}\n \n \n \n {item.distance.toFixed(1)} mi \n \n
\n \n )}\n />\n \n );\n\n const rulingDisplay = (\n \n \n {result.ruleUsed}
\n \n
\n );\n\n return (\n \n {serviceCenterDisplay}
\n {rulingDisplay}
\n \n {skuMappingDisplay}\n {stateMappingDisplay}\n {serviceCenterDistanceDisplay}\n
\n \n );\n};\nexport default RoutingResult;\n","import { CheckCircleTwoTone, MinusCircleOutlined } from '@ant-design/icons';\nimport { Button, Col, Form, Layout, List, PageHeader, Row, Select, Spin, Typography } from 'antd';\nimport React, { useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { toast } from 'react-toastify';\nimport { useDebounce } from 'use-debounce';\nimport { useAddresses } from '../../../../hooks';\nimport { productsActions, serviceOrdersActions, statesActions } from '../../../../store';\nimport RoutingResult from './RoutingResult';\n\nconst { Content } = Layout;\nconst { Title, Paragraph } = Typography;\n\nconst RoutingRulesTab = () => {\n const intl = useIntl();\n const dispatch = useDispatch();\n\n const { loadingStates, states, userAddresses, defaultUserAddress } = useAddresses();\n const [stateOrigin, setStateOrigin] = useState('');\n const [selectedOption, setSelectedOption] = useState('STATE');\n const [addressOrigin, setAddressOrigin] = useState({});\n const [statesOptions, setStatesOptions] = useState([]);\n const [modeOptions, setModeOptions] = useState([]);\n const [addressOptions, setAddressOptions] = useState([]);\n const [products, setProducts] = useState([]);\n const [searchTerm, setSearchTerm] = useState('');\n const [debouncedSearchTerm] = useDebounce(searchTerm, 300);\n const [showRoutingResult, setShowRoutingResult] = useState(false);\n\n let searchingProducts = useSelector(state => state.products.searchProducts.isLoading);\n let productSearchResults = useSelector(state => state.products.searchProducts.products);\n let verifyingRouting = useSelector(state => state.serviceOrders.getServiceOrderRouting.isLoading);\n let routingResult = useSelector(state => state.serviceOrders.getServiceOrderRouting.routingResult);\n\n useEffect(() => {\n let options = [\n { label: 'States', value: 'STATE' },\n { label: 'Geolocation', value: 'GEOLOCATION' },\n ];\n setModeOptions(options);\n dispatch(statesActions.getStates()).catch(() => {\n toast.error(intl.formatMessage({ id: 'address.loadingStatesErrorMessage' }), { autoClose: false });\n });\n }, []);\n\n useEffect(() => {\n if (states && states.length > 0) {\n setStatesOptions(\n states.map((state, index) => {\n return { label: state.name, value: state.abbreviation };\n })\n );\n }\n }, [states]);\n\n useEffect(() => {\n let addresses = [];\n if (userAddresses && userAddresses.length > 0) {\n addresses = userAddresses.map((address, index) => {\n return {\n label: `${address.name} - ${address.addressLine1} ${address.city} ${address.state} ${address.postalCode}`,\n value: address.id,\n };\n });\n }\n if (defaultUserAddress) {\n addresses.push({\n label: `${defaultUserAddress.name} - ${defaultUserAddress.addressLine1} ${defaultUserAddress.city} ${defaultUserAddress.state} ${defaultUserAddress.postalCode} (Default Address)`,\n value: defaultUserAddress.id,\n });\n }\n setAddressOptions(addresses);\n }, [userAddresses, defaultUserAddress]);\n\n useEffect(() => {\n if (debouncedSearchTerm) {\n handleProductSearch(debouncedSearchTerm);\n }\n }, [debouncedSearchTerm]);\n\n useEffect(() => {\n setShowRoutingResult(false);\n }, [products]);\n\n const handleStateOriginChange = state => {\n setShowRoutingResult(false);\n setStateOrigin(state);\n };\n const handleModeChange = mode => {\n setShowRoutingResult(false);\n setSelectedOption(mode);\n };\n\n const handleAddressOriginChange = address => {\n setShowRoutingResult(false);\n if (userAddresses && userAddresses.length > 0) {\n for (let i = 0; i < userAddresses.length; i++) {\n if (userAddresses[i].id == address) {\n setAddressOrigin(userAddresses[i]);\n return;\n }\n }\n }\n };\n\n const handleSubmit = () => {\n const skus = products.map((product, index) => {\n return product.sku;\n });\n switch (selectedOption) {\n case 'STATE':\n let countryCode;\n for (let state in states) {\n if (state.abbreviation == stateOrigin) {\n countryCode = state.countryCode;\n }\n }\n dispatch(serviceOrdersActions.getServiceOrderRouting(stateOrigin, skus, countryCode))\n .then(() => {\n setShowRoutingResult(true);\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.routingRules.verifyRoutingError' }));\n });\n break;\n case 'GEOLOCATION':\n dispatch(serviceOrdersActions.getServiceOrderRoutingGeolocation(addressOrigin, skus))\n .then(() => {\n setShowRoutingResult(true);\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.routingRules.verifyRoutingError' }));\n });\n break;\n default:\n break;\n }\n };\n\n const handleProductSearch = searchTerm => {\n dispatch(productsActions.searchProducts(searchTerm)).catch(() => {\n toast.error(intl.formatMessage({ id: 'productSearch.productSearchError' }));\n });\n };\n\n const handleProductSelect = sku => {\n const product = productSearchResults.filter(productSearchResult => {\n return productSearchResult.sku === sku;\n })[0];\n\n setProducts([...products, product]);\n };\n\n const handleRemoveProductClick = productIndex => {\n setProducts(\n products.filter((product, index) => {\n return index !== productIndex;\n })\n );\n };\n\n const searchResultsSearchingMarkup = searchingProducts && (\n \n \n \n
\n \n );\n\n const searchResultsOptionsMarkup =\n !searchingProducts &&\n productSearchResults &&\n productSearchResults.length > 0 &&\n productSearchResults.map((searchResult, index) => {\n return (\n \n {searchResult.sku} - {searchResult.description}\n \n );\n });\n\n const searchResultsNoResultsMarkup = !searchingProducts &&\n debouncedSearchTerm &&\n debouncedSearchTerm.length > 0 &&\n (!productSearchResults || productSearchResults.length < 1) && (\n \n \n \n );\n\n const productsList =\n products &&\n products.map((product, index) => {\n return (\n \n \n {product.sku} - {product.description}\n
\n handleRemoveProductClick(index)} />\n \n );\n });\n\n const productsMarkup = productsList && productsList.length > 0 && {productsList}
;\n\n const routingResultMarkup = !verifyingRouting && showRoutingResult && routingResult && (\n \n );\n\n const stateFormMarkup = selectedOption == 'STATE' && (\n \n \n \n );\n const addressFormMarkup = selectedOption == 'GEOLOCATION' && (\n \n \n \n );\n const instructionsMarkup = () => {\n switch (selectedOption) {\n case 'STATE':\n return ;\n case 'GEOLOCATION':\n return ;\n default:\n return;\n }\n };\n\n return (\n \n \n \n \n \n \n \n <FormattedMessage id='admin.routingRules.modeLabel' />\n \n \n \n
\n \n \n {instructionsMarkup()}\n \n \n {routingResultMarkup}\n
\n \n
\n \n );\n};\n\nexport default RoutingRulesTab;\n","import React, { useEffect, useRef, useState } from 'react';\nimport { Fragment } from 'react';\nimport {\n Button,\n Card,\n Col,\n DatePicker,\n Form,\n Input,\n Modal,\n PageHeader,\n Popconfirm,\n Row,\n Select,\n Space,\n Table,\n Typography,\n} from 'antd';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { announcementsActions } from '../../../../store';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { toast } from 'react-toastify';\nimport moment from 'moment';\nimport { AnnouncementsAddButtonWrapper, AnnouncementsButtonWrapper, StyledSpan } from '../styled';\nimport { PlusOutlined } from '@ant-design/icons';\nimport { useToggle } from '../../../../hooks';\nimport { Text } from '@met/react-components';\n\nconst AnnouncementsTab = () => {\n const dispatch = useDispatch();\n const intl = useIntl();\n const [form] = Form.useForm();\n const formRef = useRef();\n const { Text } = Typography;\n const { TextArea } = Input;\n const { Option } = Select;\n\n const announcements = useSelector((state) => state.announcements.getAnnouncements.announcements);\n\n const [isVisible, toggleModal] = useToggle(false);\n const [isNew, setIsNew] = useState(true);\n const [selectedAnnouncement, setSelectedAnnouncement] = useState(null);\n\n const dateFormat = 'MM/DD/YYYY';\n\n useEffect(() => {\n if (announcements === undefined || announcements.length === 0) {\n grabAnnouncements();\n }\n }, []);\n\n const grabAnnouncements = () => {\n dispatch(announcementsActions.getAnnouncements()).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.announcements.loadingAnnouncementsErrorMessage' }), {\n autoClose: 5000,\n });\n });\n };\n\n const deleteAnnouncement = (id) => {\n dispatch(announcementsActions.deleteAnnouncement(id))\n .then(() => {\n grabAnnouncements();\n toast.success(intl.formatMessage({ id: 'admin.announcements.successDeleted' }), { autoClose: 5000 });\n })\n .catch((error) => {\n toast.error(intl.formatMessage({ id: 'admin.announcements.errorDeleted' }), { autoClose: 5000 });\n });\n };\n\n const handleSubmit = (form) => {\n let translationList = [];\n if (form?.englishTranslation) {\n let object = {\n Text: form?.englishTranslation,\n Lang: 'en-us',\n };\n translationList.push(object);\n }\n if (form?.frenchTranslation) {\n let object = {\n Text: form?.frenchTranslation,\n Lang: 'fr-ca',\n };\n translationList.push(object);\n }\n if (form?.spanishTranslation) {\n let object = {\n Text: form?.spanishTranslation,\n Lang: 'es-us',\n };\n translationList.push(object);\n }\n\n let newId = null;\n if (selectedAnnouncement) {\n newId = selectedAnnouncement.id;\n } else {\n newId = null;\n }\n\n let activeFrom = moment(form?.activeFrom).format('MM/DD/YYYY 00:00:00');\n let activeTo = moment(form?.activeTo).format('MM/DD/YYYY 23:59:59');\n\n dispatch(announcementsActions.upsertAnnouncement(newId, translationList, activeFrom, activeTo, form?.countryCode))\n .then((payload) => {\n grabAnnouncements();\n toast.success(intl.formatMessage({ id: 'admin.announcements.addAnnouncementSuccess' }), { autoClose: 5000 });\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.announcements.addAnnouncementError' }), { autoClose: 5000 });\n });\n toggleModal();\n };\n\n const handleEditClick = (record) => {\n setIsNew(false);\n setSelectedAnnouncement(record);\n fillForm(record);\n toggleModal();\n };\n\n const handleAddClick = () => {\n form.resetFields();\n setIsNew(true);\n setSelectedAnnouncement(null);\n toggleModal();\n };\n\n const findAnnouncement = (objectList) => {\n let obj = objectList.body.find((o) => o.lang === 'en-us');\n return {obj.text};\n };\n\n const formatDate = (announcementDate) => {\n let date = moment(announcementDate).format('MM/DD/YYYY');\n return {date};\n };\n\n const fillForm = (record) => {\n form.setFieldsValue({\n countryCode: record.countryCode,\n activeFrom: moment(record.activeFrom),\n activeTo: moment(record.activeTo),\n englishTranslation: record.body.find((item) => item.lang.toLowerCase() === 'en-us')?.text || '',\n frenchTranslation: record.body.find((item) => item.lang.toLowerCase() === 'fr-ca')?.text || '',\n spanishTranslation: record.body.find((item) => item.lang.toLowerCase() === 'es-us')?.text || '',\n });\n };\n\n const columns = [\n {\n title: 'Announcement',\n key: 'body',\n ellipsis: true,\n render: (record) => {\n return findAnnouncement(record);\n },\n },\n {\n title: 'Country',\n dataIndex: 'countryCode',\n key: 'countryCode',\n width: 100,\n },\n {\n title: 'Start Date',\n key: 'activeFrom',\n width: 150,\n render: (record) => {\n return formatDate(record.activeFrom);\n },\n },\n {\n title: 'End Date',\n key: 'activeTo',\n width: 150,\n render: (record) => {\n return formatDate(record.activeTo);\n },\n },\n {\n title: 'Action',\n key: 'action',\n fixed: 'right',\n width: 200,\n render: (record) => (\n \n handleEditClick(record)}\n >\n \n \n deleteAnnouncement(record.id)}\n okText={intl.formatMessage({ id: 'general.yes' })}\n cancelText={intl.formatMessage({ id: 'general.no' })}\n >\n \n \n \n \n \n ),\n },\n ];\n\n const announcementsFormMarkup = (\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n
\n \n );\n\n const announcementsModal = (\n \n ) : (\n \n )\n }\n open={isVisible}\n closable={true}\n onCancel={toggleModal}\n width={800}\n destroyOnClose={true}\n footer={[\n {\n toggleModal();\n }}\n style={{ backgroundColor: '#CCCCCC', color: 'black' }}\n >\n Cancel\n ,\n formRef.current.submit()}\n >\n Submit\n ,\n ]}\n >\n {announcementsFormMarkup}\n \n );\n\n return (\n \n handleAddClick()}\n icon={}\n >\n \n \n \n ,\n ]}\n >\n \n \n {announcementsModal}\n \n );\n};\n\nexport default AnnouncementsTab;\n","export const downloadUrl = (title, url) => {\n let a = document.createElement('a');\n a.href = url;\n a.setAttribute('type', 'hidden');\n a.download = title;\n document.body.appendChild(a); //this is also for firefox\n a.click();\n return a;\n};\n\nexport const downloadBlob = (title, blob, parseTitle = false) => {\n if (parseTitle) {\n var filename = 'Export.xlsx';\n var disposition = title.headers['content-disposition'];\n if (disposition && disposition.indexOf('attachment') !== -1) {\n var filenameRegex = /filename[^;=\\n]*=((['\"]).*?\\2|[^;\\n]*)/;\n var matches = filenameRegex.exec(disposition);\n if (matches != null && matches[1]) {\n filename = matches[1].replace(/['\"]/g, '');\n }\n }\n title = filename;\n }\n if (window.navigator && window.navigator.msSaveOrOpenBlob) {\n // This is for Internet Exploder\n window.navigator.msSaveOrOpenBlob(blob, title);\n } else {\n let url = URL.createObjectURL(blob);\n let a = downloadUrl(title, url);\n setTimeout(function() {\n // For Firefox it is necessary to delay revoking the ObjectURL\n URL.revokeObjectURL(url);\n a.remove();\n }, 100);\n }\n};\n","import React from 'react';\nimport {Button, Col, Collapse, DatePicker, Form, PageHeader, Row, Space, Typography} from 'antd';\nimport {FormattedMessage, useIntl} from 'react-intl';\nimport {FileExcelFilled} from '@ant-design/icons';\nimport {CenteredPanel} from '../styled';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {\n faBoxesStacked,\n faMapLocation,\n faScrewdriverWrench,\n faToolbox,\n faWrench\n} from '@fortawesome/free-solid-svg-icons';\nimport moment from 'moment';\nimport {useDispatch, useSelector} from 'react-redux';\nimport {reportActions} from '../../../../store';\nimport {downloadBlob} from '../../../../helpers/downloadBlob';\nimport {toast} from 'react-toastify';\n\nconst { Text } = Typography;\nconst { RangePicker } = DatePicker;\n\nconst ReportsTab = () => {\n const intl = useIntl();\n const dispatch = useDispatch();\n\n const dateFormat = 'MM/DD/YYYY';\n\n const isSkuHubVolumeReportLoading = useSelector(state => state.reports.getSkuHubVolumeReport.isLoading);\n const isSkuStateVolumeReportLoading = useSelector(state => state.reports.getSkuStateVolumeReport.isLoading);\n const isSkuHubMappingsReportLoading = useSelector(state => state.reports.getSkuHubMappingsReport.isLoading);\n const isWillCallServiceOrdersLoading = useSelector(state => state.reports.getWillCallServiceOrdersReport.isLoading);\n const isDeniedWarrantyServiceOrdersLoading = useSelector(state => state.reports.getDeniedWarrantyServiceOrdersReport.isLoading);\n\n const extractDatesFromRange = dateRange => {\n return {\n startDate: dateRange[0].format(dateFormat),\n endDate: dateRange[1].format(dateFormat),\n };\n };\n\n const downloadSkuHubVolumeReport = dateRange => {\n const { startDate, endDate } = extractDatesFromRange(dateRange);\n\n dispatch(reportActions.getSkuHubVolumeReport(startDate, endDate))\n .then(d => {\n downloadBlob(d, d.data, true);\n })\n .catch(err => {\n toast.error(intl.formatMessage({ id: 'dashboard.exportErrorMessage' }), {\n autoClose: false,\n });\n });\n };\n\n const downloadSkuStateVolumeReport = dateRange => {\n const { startDate, endDate } = extractDatesFromRange(dateRange);\n\n dispatch(reportActions.getSkuStateVolumeReport(startDate, endDate))\n .then(d => {\n downloadBlob(d, d.data, true);\n })\n .catch(err => {\n toast.error(intl.formatMessage({ id: 'dashboard.exportErrorMessage ' }), {\n autoClose: false,\n });\n });\n };\n\n const downloadSkuHubMappingReport = () => {\n dispatch(reportActions.getSkuHubMappingsReport())\n .then(d => {\n downloadBlob(d, d.data, true);\n })\n .catch(err => {\n toast.error(intl.formatMessage({ id: 'dashboard.exportErrorMessage' }), {\n autoClose: false,\n });\n });\n };\n\n const downloadWillCallServiceOrdersReport = (dateRange) => {\n const { startDate, endDate } = extractDatesFromRange(dateRange);\n \n dispatch(reportActions.getWillCallServiceOrdersReport(startDate, endDate))\n .then(d => {\n downloadBlob(d, d.data, true);\n })\n .catch(err => {\n toast.error(intl.formatMessage({ id: 'dashboard.exportErrorMessage' }), {\n autoClose: false,\n });\n });\n };\n\n const downloadDeniedWarrantyServiceOrdersReport = (dateRange) => {\n const { startDate, endDate } = extractDatesFromRange(dateRange);\n\n dispatch(reportActions.getDeniedWarrantyServiceOrdersReport(startDate, endDate))\n .then(d => {\n downloadBlob(d, d.data, true);\n })\n .catch(err => {\n toast.error(intl.formatMessage({ id: 'dashboard.exportErrorMessage' }), {\n autoClose: false,\n });\n });\n };\n \n const deniedWarrantyReport = (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n }\n >\n downloadDeniedWarrantyServiceOrdersReport(values.dateRange)}\n >\n \n \n \n \n \n }\n htmlType='submit'\n loading={isDeniedWarrantyServiceOrdersLoading}\n >\n \n \n \n \n \n \n \n \n );\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n }\n >\n downloadSkuHubVolumeReport(values.dateRange)}\n >\n \n \n \n \n \n }\n htmlType='submit'\n loading={isSkuHubVolumeReportLoading}\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n }\n >\n downloadSkuStateVolumeReport(values.dateRange)}\n >\n \n \n \n \n \n }\n htmlType='submit'\n loading={isSkuStateVolumeReportLoading}\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n }\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n }\n >\n downloadWillCallServiceOrdersReport(values.dateRange)}\n >\n \n \n \n \n \n }\n htmlType='submit'\n loading={isWillCallServiceOrdersLoading}\n >\n \n \n \n \n \n \n \n \n {deniedWarrantyReport}\n \n \n );\n};\n\nexport default ReportsTab;\n","import React, { Fragment, useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useHistory, useLocation } from 'react-router';\nimport { Permissions } from '../../enums';\nimport { useFeatureToggles, useUser } from '../../hooks';\nimport { Card, Col, Row, Tabs } from 'antd';\nimport {\n AnnouncementsTab,\n ProductIncludedTab,\n ProductProblemTab,\n ProductsTab,\n RoutingRulesTab,\n ServiceCentersTab,\n ServiceOrdersTab,\n ReportsTab,\n} from './components';\n\nconst { TabPane } = Tabs;\n\nconst Admin = () => {\n const intl = useIntl();\n const location = useLocation();\n const history = useHistory();\n const { permissions } = useUser();\n const [currentTab, setCurrentTab] = useState('');\n const [tabOptions, setTabOptions] = useState([]);\n\n useEffect(() => {\n let tabs = [];\n if (permissions()[Permissions.ANNOUNCEMENTS]) {\n tabs.push(\n \n \n \n );\n }\n if (permissions()[Permissions.PRODUCTINCLUSIONS]) {\n tabs.push(\n \n \n \n );\n }\n if (permissions()[Permissions.PRODUCTS]) {\n tabs.push(\n \n \n \n );\n }\n if (permissions()[Permissions.PRODUCTPROBLEMS]) {\n tabs.push(\n \n \n \n );\n }\n tabs.push(\n \n \n \n );\n if (permissions()[Permissions.SERVICECENTERS]) {\n tabs.push(\n \n \n \n );\n }\n if(permissions()[Permissions.SERVICECENTERS] || permissions()[Permissions.SERVICEORDERS]) {\n tabs.push(\n \n \n \n );\n }\n if (permissions()[Permissions.SERVICEORDERS]) {\n tabs.push(\n \n \n \n );\n }\n\n setTabOptions(tabs);\n }, []);\n\n useEffect(() => {\n let pathParts = location.pathname.split('/');\n if (pathParts.length < 3) {\n if (permissions()[Permissions.PRODUCTS]) {\n history.replace('/admin/products');\n } else if (permissions()[Permissions.SERVICEORDERS]) {\n history.replace('/admin/serviceorders');\n } else if (permissions()[Permissions.SERVICECENTERS]) {\n history.replace('/admin/serviceCenters');\n } else if (permissions()[Permissions.PRODUCTPROBLEMS]) {\n history.replace('/admin/productProblems');\n } else if (permissions()[Permissions.PRODUCTINCLUSIONS]) {\n history.replace('/admin/productIncluded');\n } else if (permissions()[Permissions.ANNOUNCEMENTS]) {\n history.replace('/admin/announcements');\n } else {\n history.replace('/admin/routingRules');\n }\n } else {\n setCurrentTab(pathParts[2]);\n }\n }, [location.pathname]);\n\n const handleTabChange = tabId => {\n history.push(`/admin/${tabId}`);\n };\n\n const tabsMarkup = currentTab && (\n handleTabChange(tabId)}>\n {tabOptions}\n \n );\n\n return (\n \n \n \n \n \n
\n \n
\n \n \n {tabsMarkup}\n \n
\n \n );\n};\n\nexport default Admin;\n","import { Loader } from '@met/react-components';\nimport { Breadcrumb, Card, Col, Row, Space, Typography } from 'antd';\nimport moment from 'moment';\nimport React, { Fragment, useEffect, useRef, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useParams } from 'react-router';\nimport { toast } from 'react-toastify';\nimport PermissionGatedComponent from '../../../../components/PermissionGatedComponent/PermissionGatedComponent';\nimport { Permissions } from '../../../../enums';\nimport { useUser } from '../../../../hooks';\nimport {\n lmrCategoryTypeActions,\n productIncludedActions,\n productProblemActions,\n productsActions,\n serviceCenterActions,\n} from '../../../../store';\nimport {\n ProductIncludedMappings,\n ProductLmrMappings,\n ProductProblemMappings,\n ServiceCenterMappings,\n} from '../../components';\nimport { ProductIncludedMappingProvider } from '../ProductIncludedMapping/ProductIncludedMappingContext';\nimport { ProductProblemMappingProvider } from '../ProductProblemMappings/ProductProblemMappingContext';\nimport { ServiceCenterMappingProvider } from '../ServiceCenterMappings/ServiceCenterMappingContext';\nimport { ProductImage, StyledBreadcrumb, StyledCol } from '../styled';\n\nconst { Text } = Typography;\n\nconst Product = () => {\n return (\n \n \n \n );\n};\n\nconst ProductContent = () => {\n const dispatch = useDispatch();\n const intl = useIntl();\n\n const refreshDelay = 8000;\n\n const { sku } = useParams();\n\n const product = useSelector(state => state.products.getProduct.product);\n const loadingProduct = useSelector(state => state.products.getProduct.isLoading);\n\n const [refreshTriggered, setRefreshTriggered] = useState(false);\n const [lastUpdated, setLastUpdated] = useState(null);\n\n const refreshInterval = useRef(null);\n\n const { permissions } = useUser();\n const userPermissions = permissions();\n\n useEffect(() => {\n return () => {\n clearInterval(refreshInterval.current);\n };\n }, []);\n\n useEffect(() => {\n if (sku) {\n getProduct();\n getServiceCenters();\n getProductProblems();\n getProductIncluded();\n getLmrCategoryTypes();\n }\n }, [sku]);\n\n useEffect(() => {\n if (product && product.sku === sku && product.lmrMappingsUpdatedAt) {\n if (product && lastUpdated && lastUpdated >= product.lmrMappingsUpdatedAt) {\n // LMR data unchanged\n toast.info(intl.formatMessage({ id: 'admin.product.refreshLmrMappingsUnchanged' }));\n } else if (product && lastUpdated && lastUpdated < product.lmrMappingsUpdatedAt) {\n // LMR data updated\n toast.success(intl.formatMessage({ id: 'admin.product.refreshLmrMappingsSuccess' }));\n }\n\n setLastUpdated(product.lmrMappingsUpdatedAt);\n }\n }, [product]);\n\n useEffect(() => {\n if (refreshTriggered) {\n // Fire and forget request to update LMR data\n dispatch(productsActions.loadSkuLmrMappings(sku))\n .then(() => {\n // Get updated LMR data after delay\n setTimeout(() => {\n setRefreshTriggered(false);\n\n dispatch(productsActions.getLmrMappingsBySku(sku)).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.product.refreshLmrMappingsError' }));\n });\n }, refreshDelay);\n })\n .catch(() => {\n setRefreshTriggered(false);\n\n toast.error(intl.formatMessage({ id: 'admin.product.refreshLmrMappingsError' }));\n });\n }\n }, [refreshTriggered]);\n\n const getProduct = () => {\n dispatch(productsActions.getProductForAdmin(sku)).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.product.loadingError' }));\n });\n };\n\n const getServiceCenters = () => {\n if (userPermissions[Permissions.PRODUCTS_STATES]) {\n dispatch(serviceCenterActions.getServiceCenters()).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.product.loadingError' }));\n });\n }\n };\n\n const getProductIncluded = () => {\n if (userPermissions[Permissions.PRODUCTS_INCLUSIONS]) {\n dispatch(productIncludedActions.getProductInclusions()).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.product.loadingError' }));\n });\n }\n };\n\n const handleAddAllServiceCenters = () => {\n if (userPermissions[Permissions.PRODUCTS_STATES]) {\n dispatch(productsActions.upsertAllServiceMappingsForSku(sku)).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.product.loadingError' }));\n });\n }\n };\n\n const getLmrCategoryTypes = () => {\n dispatch(lmrCategoryTypeActions.getLmrCategoryTypes()).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.product.loadingError' }));\n });\n };\n\n const getProductProblems = () => {\n if (userPermissions[Permissions.PRODUCTS_PROBLEMS]) {\n dispatch(productProblemActions.getProductProblems()).catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.product.loadingError' }));\n });\n }\n };\n\n if (!product || loadingProduct) {\n return ;\n }\n\n const lmrMappingsMarkup = (\n \n \n setRefreshTriggered(true)}\n />\n \n \n );\n\n const stateMappingMarkup = (\n \n \n \n \n \n \n \n );\n\n const problemMappingMarkup = (\n \n \n \n \n \n \n \n );\n\n const inclusionMappingMarkup = (\n \n \n \n \n \n \n \n );\n\n return (\n \n \n \n \n \n
\n \n
\n \n \n \n \n \n \n Products Admin\n \n \n {sku}\n \n \n \n \n \n \n \n \n \n \n \n {product.skuAlias}\n \n
\n \n \n \n {product.description}\n \n \n
\n \n
\n \n \n {lmrMappingsMarkup}\n {stateMappingMarkup}\n {problemMappingMarkup}\n {inclusionMappingMarkup}\n \n
\n \n );\n};\n\nexport default Product;\n","import InfiniteScroll from 'react-infinite-scroll-component';\nimport styled from 'styled-components';\nimport { Row, Col, Text } from '@met/react-components';\n\nexport const Image = styled.img`\n max-width: 100%;\n bomax-height: 130px;\n`;\n\nexport const CollapsibleContent = styled.div`\n width: 100%;\n max-width: 100%;\n max-height: 500px;\n border-top: 1px solid ${props => props.theme.colors.lightGray};\n overflow-y: auto;\n overflow-x: hidden;\n`;\n\nexport const CollapseHeaderRow = styled(Row)`\n width: 100%;\n`;\n\nexport const StyledInfiniteScroll = styled(InfiniteScroll)`\n > * {\n width: 100%;\n max-width: 100%;\n overflow: hidden;\n }\n`;\n\nexport const PurchaseOrderLine = styled(Row)`\n padding: 1rem;\n\n &:nth-child(even) {\n background-color: ${props => props.theme.colors.lightGray};\n }\n`;\n\nexport const NoResultsCol = styled(Col)`\n margin: 3rem 0;\n`;\n\nexport const WrapText = styled(Text)`\n width: 100%:\n max-width: 100%;\n word-wrap: break-word;\n`;\n","import { Col, Text } from '@met/react-components';\nimport moment from 'moment';\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { CollapseHeaderRow } from './styled';\n\nconst DashboardCollapsibleHeader = ({ purchaseOrder, serviceOrderDate }) => {\n let formattedSubmittedDate = () => {\n return moment(serviceOrderDate)\n .local()\n .format('MM/DD/YYYY');\n };\n\n return (\n \n \n \n \n \n \n \n {formattedSubmittedDate()}\n \n
\n \n \n \n \n \n \n {purchaseOrder.purchaseOrderLines.length}\n \n \n \n );\n};\n\nexport default DashboardCollapsibleHeader;\n","import React from 'react';\nimport { DashboardCollapsibleContentLine } from './index';\nimport { CollapsibleContent } from './styled';\n\nconst DashboardCollapsibleContentList = ({ purchaseOrderLines }) => {\n let purchaseOrderLinesMarkup =\n purchaseOrderLines &&\n purchaseOrderLines.map((purchaseOrderLine, index) => (\n \n ));\n\n return {purchaseOrderLinesMarkup};\n};\n\nexport default DashboardCollapsibleContentList;\n","import { Col, Link, Text } from '@met/react-components';\nimport React from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { Image, PurchaseOrderLine, WrapText } from './styled';\n\nconst DashboardCollapsibleContentLine = ({ purchaseOrderLine }) => {\n const intl = useIntl();\n\n return (\n \n \n \n \n
\n \n \n \n {purchaseOrderLine.sku}\n \n \n {purchaseOrderLine.description}\n \n \n \n \n \n \n \n {purchaseOrderLine.serialNumber || intl.formatMessage({ id: 'general.na' })}\n \n \n \n \n \n \n \n {purchaseOrderLine.serviceOrderNumber || }\n \n \n \n \n \n \n \n {purchaseOrderLine.tagNumber || intl.formatMessage({ id: 'general.na' })}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default DashboardCollapsibleContentLine;\n","import { Col, Link, ListGroupItem, Row, Text } from '@met/react-components';\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nconst DashboardDeniedContentLine = ({ purchaseOrderLine }) => {\n return (\n \n \n \n \n \n \n \n
\n \n \n \n \n \n {purchaseOrderLine.serialNumber || '-'}\n \n \n \n \n \n {purchaseOrderLine.serviceOrderNumber || '-'}\n \n
\n \n );\n};\n\nexport default DashboardDeniedContentLine;\n","import { ListGroup } from '@met/react-components';\nimport React from 'react';\nimport { DashboardDeniedContentLine } from './index';\n\nconst DashboardDeniedContentList = ({ purchaseOrderLines }) => {\n return (\n \n {purchaseOrderLines.map(purchaseOrderLine => (\n \n ))}\n \n );\n};\n\nexport default DashboardDeniedContentList;\n","import React from 'react';\nimport { Collapsible, ListGroupItem, ListGroup } from '@met/react-components';\nimport { DashboardCollapsibleHeader, DashboardCollapsibleContentList } from './index';\n\nconst DashboardListGroup = ({ purchaseOrders }) => {\n let purchaseOrdersMarkup = purchaseOrders.map((purchaseOrder, index) => {\n let headerMarkup = (\n \n );\n\n return (\n \n \n \n \n \n );\n });\n\n return {purchaseOrdersMarkup};\n};\n\nexport default DashboardListGroup;\n","import styled from 'styled-components';\n\nexport const StyledCode = styled.code`\n font-size: 97.5%;\n color: #da1783;\n word-wrap: break-word;\n padding: 0.15rem;\n`;\n","import { Modal, ModalBody, ModalContent, ModalHeader, Grid } from '@met/react-components';\nimport React from 'react';\nimport { StyledCode } from './styled';\nimport { FormattedMessage } from 'react-intl';\n\nconst SearchHelpModal = props => {\n let searchHelpModalContent = (\n \n
\n \n \n hammer drill\n \n hammer AND drill.\n
\n
\n \n
\n
\n - \n \n (|)\n {' '}\n \n hammer|drill\n \n hammer OR drill\n
\n - \n \n (-)\n {' '}\n hammer -drill\n hammer\n \n drill\n
\n - \n \n (*)\n {' '}\n \n impact*\n \n impact\n
\n - \n \n (\"\")\n {' '}\n \n \"m12 impact\"\n \n \"m12 impact\"\n \n
\n
\n
{searchHelpModalContent}
\n \n \n \n \n );\n};\n\nexport default SearchHelpModal;\n","import {\n Button,\n Col,\n DateRange,\n Icon,\n InputGroup,\n InputGroupAppend,\n Loader,\n LoadingDots,\n Row,\n Text,\n TextInput,\n useToggle,\n} from '@met/react-components';\nimport moment from 'moment';\nimport React, { Fragment, useEffect, useRef, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { toast } from 'react-toastify';\nimport { NumberParam, StringParam, useQueryParams, withDefault } from 'use-query-params';\nimport { SearchHelpModal } from '../../../components/SearchHelpModal';\nimport { downloadBlob } from '../../../helpers/downloadBlob';\nimport { serviceOrdersActions } from '../../../store';\nimport { NoResultsCol, StyledInfiniteScroll } from './styled';\n\nconst DashboardTab = ({ searchResultsMarkup }) => {\n const intl = useIntl();\n const dispatch = useDispatch();\n const searchRef = useRef(null);\n\n const pageSize = 15;\n const displayDateFormat = 'MM/DD/YYYY';\n const calendarDateFormat = 'YYYY-MM-DD';\n const maxResults = 500;\n const defaultStartDate = moment()\n .add(-180, 'd')\n .format(calendarDateFormat);\n const defaultEndDate = moment().format(calendarDateFormat);\n\n const [query, setQuery] = useQueryParams({\n q: withDefault(StringParam, ''),\n p: withDefault(NumberParam, 1),\n ps: withDefault(NumberParam, pageSize),\n });\n\n const [datesQuery, setDatesQuery] = useQueryParams({\n s: withDefault(StringParam, defaultStartDate),\n e: withDefault(StringParam, defaultEndDate),\n });\n\n const [searchTerm, setSearchTerm] = useState(query.q);\n const [startDateInvalid, setStartDateInvalid] = useState(false);\n const [endDateInvalid, setEndDateInvalid] = useState(false);\n const [dateRangeInvalid, setDateRangeInvalid] = useState(false);\n\n const { isLoading, totalCount, count } = useSelector(state => state.serviceOrders.searchServiceOrders);\n const purchaseOrders = useSelector(state => state.serviceOrders.searchServiceOrders.data || []);\n const exportIsLoading = useSelector(state => state.serviceOrders.exportServiceOrders.isLoading);\n\n const [showSearchHelpModal, toggleSearchHelpModal] = useToggle(false);\n\n useEffect(() => {\n searchRef.current.focus();\n\n setQuery({ p: 1 });\n }, []);\n\n useEffect(() => {\n if (datesQuery.s || datesQuery.e) {\n let momentStartDate = moment(datesQuery.s, calendarDateFormat, true);\n let momentEndDate = moment(datesQuery.e, calendarDateFormat, true);\n\n let dateRangeValid = momentEndDate.diff(momentStartDate) >= 0;\n setDateRangeInvalid(!dateRangeValid);\n\n if (dateRangeValid) {\n clearServiceOrders();\n searchServiceOrders(1, window.location.search);\n }\n }\n }, [datesQuery]);\n\n const searchServiceOrders = (page, searchParameters) => {\n dispatch(serviceOrdersActions.searchServiceOrders(page, searchParameters)).catch(() => {\n toast.error(intl.formatMessage({ id: 'dashboard.loadingErrorMessage' }), { autoClose: false });\n });\n };\n\n const clearServiceOrders = () => {\n dispatch(serviceOrdersActions.clearServiceOrders());\n };\n\n const exportServiceOrders = () => {\n let searchParameters = window.location.search;\n dispatch(serviceOrdersActions.exportServiceOrders(searchParameters))\n .then(d => {\n downloadBlob(d, d.data, true);\n })\n .catch(err => {\n alert(err.message);\n toast.error(intl.formatMessage({ id: 'dashboard.exportErrorMessage' }), {\n autoClose: false,\n });\n });\n };\n\n const handleStartDateChange = startDate => {\n let momentStartDate = moment(startDate, calendarDateFormat, true);\n\n setStartDateInvalid(!momentStartDate.isValid());\n\n if (momentStartDate.isValid()) {\n setDatesQuery({ s: momentStartDate.format(calendarDateFormat) });\n }\n };\n\n const handleEndDateChange = endDate => {\n let momentEndDate = moment(endDate, calendarDateFormat, true);\n\n setEndDateInvalid(!momentEndDate.isValid());\n\n if (momentEndDate.isValid()) {\n setDatesQuery({ e: momentEndDate.format(calendarDateFormat) });\n }\n };\n\n const handleSearchClick = () => {\n setQuery({ q: searchTerm, p: 1 });\n\n clearServiceOrders();\n searchServiceOrders(1, window.location.search);\n };\n\n const handleLoadNextPage = () => {\n let nextPage = query.p + 1;\n\n setQuery({ p: nextPage });\n\n searchServiceOrders(nextPage, window.location.search);\n };\n\n const dateRangeMarkup = (\n handleStartDateChange(date)}\n onEndChange={date => handleEndDateChange(date)}\n dateFormat={displayDateFormat}\n />\n );\n\n const startDateErrorMarkup = startDateInvalid && (\n \n \n \n );\n\n const endDateErrorMarkup = endDateInvalid && (\n \n \n \n );\n\n const dateRangeErrorMarkup = dateRangeInvalid && (\n \n \n \n );\n\n const resultsLabelMarkup = isLoading ? (\n \n \n \n \n
\n ) : (\n \n \n \n \n
\n );\n\n const loadingResultsMarkup = (\n \n \n \n \n
\n );\n\n const noResultsMarkup = (\n \n \n \n \n \n \n
\n );\n\n const resultsListMarkup = (\n \n {searchResultsMarkup}\n \n );\n\n const resultsMarkup =\n isLoading && query.p === 1 ? loadingResultsMarkup : purchaseOrders.length > 0 ? resultsListMarkup : noResultsMarkup;\n\n return (\n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n {dateRangeMarkup}\n \n {startDateErrorMarkup}\n {endDateErrorMarkup}\n {dateRangeErrorMarkup}\n
\n \n
\n \n \n \n setSearchTerm(e.target.value)}\n loading={isLoading}\n inputRef={searchRef}\n onSubmit={handleSearchClick}\n data-hj-allow\n />\n \n \n \n \n \n \n \n \n
\n {resultsLabelMarkup}\n {resultsMarkup}\n \n \n );\n};\n\nexport default DashboardTab;\n","import styled from 'styled-components';\n\nexport const NewRepairTitle = styled.h3`\n margin-bottom: 0;\n`;\n","import { Alert, Button, Card, CardBody, Col, Grid, Icon, Row, Tab, Tabs, useToggle } from '@met/react-components';\nimport React, { Fragment, useEffect } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useHistory } from 'react-router';\nimport { toast } from 'react-toastify';\nimport { StringParam, useQueryParams, withDefault } from 'use-query-params';\nimport { ProductSearchModal } from '../../components';\nimport { useUser } from '../../hooks';\nimport { serviceOrdersActions } from '../../store';\nimport DashboardDeniedContentList from './components/DashboardDeniedContentList';\nimport DashboardListGroup from './components/DashboardListGroup';\nimport DashboardTab from './components/DashboardTab';\nimport { NewRepairTitle } from './styled';\n\nconst Dashboard = () => {\n const { user } = useUser();\n const history = useHistory();\n const intl = useIntl();\n const dispatch = useDispatch();\n\n const [query, setQuery] = useQueryParams({\n t: withDefault(StringParam, 'current'),\n });\n\n const [showSearchModal, toggleSearchModal] = useToggle(false);\n\n const purchaseOrders = useSelector(state => state.serviceOrders.searchServiceOrders.data);\n const { deniedServiceOrders } = useSelector(state => state.serviceOrders.getDeniedServiceOrders);\n\n useEffect(() => {\n getDeniedServiceOrders();\n }, [dispatch]);\n\n const getDeniedServiceOrders = () => {\n dispatch(serviceOrdersActions.getDeniedServiceOrders()).catch(() => {\n toast.error(intl.formatMessage({ id: 'dashboard.loadingErrorMessage' }), { autoClose: false });\n });\n };\n\n const handleAddToolClick = () => {\n if (user.acceptedTermsAndConditions) {\n toggleSearchModal();\n } else {\n history.push('/');\n toast.warn(intl.formatMessage({ id: 'home.authenticatedContent.termsAndConditionsRequired' }));\n }\n };\n\n const handleChangeTab = tab => {\n setQuery({ t: tab }, 'push');\n };\n\n const searchResultsMarkup = purchaseOrders && ;\n\n const deniedServiceOrdersMarkup = deniedServiceOrders && deniedServiceOrders.length > 0 && (\n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n
\n \n \n
\n );\n\n const currentTabMarkup = query.t === 'current' && ;\n\n const completedTabMarkup = query.t === 'completed' && ;\n\n return (\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n
\n {deniedServiceOrdersMarkup}\n \n \n \n \n \n \n {currentTabMarkup}\n \n \n {completedTabMarkup}\n \n \n \n \n \n
\n \n \n \n );\n};\n\nexport default Dashboard;\n","import styled, {css} from \"styled-components\";\nimport theme from '../../styled-config'\n\n\nconst lightOrDark = props => {\n if (props.light)\n return css`\n background-color: #ffffff;\n `;\n else if (props.dark)\n return css`\n background-color: #000000;\n `;\n}\n\n\nconst background = props => {\n if (props.background && props.background.toLowerCase().includes('http'))\n return css`\n background-image: url('${props.background}');\n background-size: cover;\n `;\n else if (props.background && props.background.startsWith('#'))\n return css`\n background-color: ${props.background};\n `;\n\n return css``;\n};\n\nexport const HeroBackdrop = styled.div`\n padding: 2rem 1rem;\n position: relative;\n text-align: center;\n z-index: 1;\n ${props => lightOrDark(props)};\n\n &:before {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n content: '';\n opacity: ${props => props.opacity};\n z-index: -1;\n ${props => background(props)};\n }\n`;\n\nexport const HeroContent = styled.div`\n width: 100%;\n display: inline-block;\n background: transparent;\n text-align: center;\n\n @media (min-width: ${theme.responsive.md}) {\n max-width: ${props => props.maxWidth};\n }\n`;","import React from 'react';\nimport { HeroBackdrop, HeroContent } from './styled';\nimport PropTypes from \"prop-types\";\n\nconst Hero = props => {\n return (\n \n {props.children}\n \n );\n};\n\nHero.propTypes = {\n background: PropTypes.string,\n opacity: PropTypes.string,\n light: PropTypes.bool,\n dark: PropTypes.bool,\n maxWidth: PropTypes.string,\n className: PropTypes.string,\n};\n\nHero.defaultProps = {\n opacity: '.5',\n light: false,\n dark: true,\n maxWidth: '1100px',\n};\n\nexport default Hero;","import styled from 'styled-components';\n\nexport const Image = styled.img`\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n`;\n","import { useLocale } from '../hooks';\n\nconst { isCaLocale } = useLocale();\nconst isCa = isCaLocale();\n\nconst intlCom = {\n carrier: 'FedEx',\n carrierLocationAmount: '8,000',\n};\n\nconst intlCa = {\n carrier: 'Purolator',\n carrierLocationAmount: '1 300',\n};\n\nexport const getCountryIntlValues = () => {\n return isCa ? intlCa : intlCom;\n};\n","import { SearchOutlined, UnorderedListOutlined } from '@ant-design/icons';\nimport { useToggle } from '@met/react-components';\nimport { Button, Col, Layout, Row, Space, Typography } from 'antd';\nimport React, { Fragment } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { ProductSearchModal } from '../../../../components';\nimport IneligibleToolModal from '../../../../components/IneligibleToolModal/IneligibleToolModal';\nimport { Image } from './styled';\nimport { useLocale } from '../../../../hooks';\nimport { getCountryIntlValues } from '../../../../helpers/intl';\n\nconst { Title } = Typography;\nconst { Content } = Layout;\n\nconst AnonymousContent = () => {\n const intl = useIntl();\n const { isCaLocale } = useLocale();\n\n const [showSearchModal, toggleSearchModal] = useToggle(false);\n const [showIneligibleToolModal, toggleIneligibleToolModal] = useToggle(false);\n\n const isCa = isCaLocale();\n\n const dropOffMarkup = isCa ? (\n \n ) : (\n \n );\n return (\n \n \n \n \n \n \n
\n <FormattedMessage id='home.anonymousContent.howDoIKnow' />\n \n \n \n }\n onClick={() => toggleSearchModal()}\n style={{ width: '100%' }}\n >\n \n \n \n \n \n \n }\n onClick={() => toggleIneligibleToolModal()}\n style={{ width: '100%' }}\n >\n \n \n \n \n \n
\n \n \n
\n <FormattedMessage id='home.anonymousContent.solutionHeader' />\n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n
\n
\n
\n <FormattedMessage id='home.anonymousContent.benefitsHeader' />\n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n
\n
\n \n \n \n \n );\n};\n\nexport default AnonymousContent;\n","import { PlusOutlined } from '@ant-design/icons';\nimport { Button, Checkbox, Col, Layout, Row, Space, Typography } from 'antd';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { MoreInformation } from '../../../../components';\n\nconst { Content } = Layout;\nconst { Title } = Typography;\n\nconst AuthenticatedContent = ({\n termsConditions,\n handleAddNewClick,\n handleTermsConditionsCheck,\n handleDownloadTermsConditions,\n}) => {\n return (\n \n \n \n \n \n \n \n <FormattedMessage id='home.authenticatedContent.startOrderHeading' />\n \n handleTermsConditionsCheck(true)}\n >\n \n handleDownloadTermsConditions()}\n style={{ padding: '0', margin: '0' }}\n >\n \n \n \n \n
\n \n \n }\n onClick={() => handleAddNewClick()}\n >\n \n \n \n \n \n
\n \n \n \n \n
\n \n \n
\n \n );\n};\n\nAuthenticatedContent.propTypes = {\n termsConditions: PropTypes.bool,\n handleAddNewClick: PropTypes.func,\n handleTermsConditionsCheck: PropTypes.func,\n handleDownloadTermsConditions: PropTypes.func,\n};\n\nexport default AuthenticatedContent;\n","const isDevelopment = process.env.NODE_ENV === 'development';\nconst baseDevUrl = 'https://service-dev.milwaukeetool.com';\n\nconst supportCenterRedirectMap = {\n '/': { redirectPath: '/support', param: null },\n '/dashboard': { redirectPath: '/support', param: null },\n '/repairprocess/warrantyinformation': { redirectPath: '/support', param: null },\n '/repairprocess/warrantyinformation/:id': { redirectPath: '/support', param: null },\n '/repairprocess/productdetail/:id': { redirectPath: '/support', param: null },\n '/repairprocess/productdetail': { redirectPath: '/support', param: null },\n '/repairprocess/addanother': { redirectPath: '/support', param: null },\n '/repairprocess/shipping': { redirectPath: '/support', param: null },\n '/repairprocess/confirmation': { redirectPath: '/support', param: null },\n '/repairprocess/ordersummary/:hash': { redirectPath: '/support', param: 'hash' },\n '/preferences': { redirectPath: '/support/account-settings', param: null },\n '/repairdetail/:id': { redirectPath: '/support/service-order-details/:id', param: 'id' },\n '/recoveremail': { redirectPath: '/support/account-settings', param: null },\n '/verifyemail/:token': { redirectPath: '/support/verifyemail/:token', param: 'token' },\n};\n\nexport function getSupportCenterRedirectRoute(path, params) {\n const pathConfig = supportCenterRedirectMap[path];\n if (!pathConfig) return null;\n\n const { redirectPath, param } = pathConfig;\n\n const formattedPath = !!param\n ? redirectPath.replace(`:${param}`, params[param])\n : redirectPath;\n\n const caTldRegex = new RegExp('.ca$', 'i');\n const isCaTld = caTldRegex.test(window.location.origin);\n\n if (isCaTld) {\n const baseUrl = window.location.origin.replace(caTldRegex, '.com');\n return `${baseUrl}${formattedPath}`;\n }\n\n // isDevelopment logic really just needed for local development\n // as it runs on service-local.milwaukeetool.com\n return isDevelopment ? `${baseDevUrl}${formattedPath}` : formattedPath;\n}","import { useAuth0 } from '@auth0/auth0-react';\nimport { Hero } from '../../components/Hero';\nimport { Button, Typography } from 'antd';\nimport React, { Fragment, useEffect } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { useHistory } from 'react-router';\nimport { toast } from 'react-toastify';\nimport { ProductSearchModal } from '../../components';\nimport { downloadUrl } from '../../helpers/downloadBlob';\nimport { userHasOrders, hasRedirectToSupportCenterEnabled } from '../../helpers/sessionStorage';\nimport { useUser } from '../../hooks';\nimport { docsActions, usersActions } from '../../store';\nimport { AnonymousContent, AuthenticatedContent } from './components';\nimport { useToggle } from '../../hooks';\nimport { getSupportCenterRedirectRoute } from '../../helpers/supportCenterRedirect';\n\nconst { Title } = Typography;\n\nconst Home = () => {\n const { isAuthenticated, loginWithRedirect } = useAuth0();\n const intl = useIntl();\n const { acceptedTermsAndConditions } = useUser();\n const dispatch = useDispatch();\n const history = useHistory();\n\n const [showSearchModal, toggleSearchModal] = useToggle(false);\n\n useEffect(() => {\n // Here we disregard the specific user - if any user has been approved for the new experience\n // in a previous login, we will redirect\n if (hasRedirectToSupportCenterEnabled()) {\n const redirectRoute = getSupportCenterRedirectRoute('/', {});\n if (redirectRoute) {\n window.location.href = redirectRoute;\n }\n }\n }, []);\n\n useEffect(() => {\n if (isAuthenticated && acceptedTermsAndConditions && userHasOrders()) {\n history.replace('/dashboard');\n }\n }, [isAuthenticated]);\n\n const handleLoginClick = () => {\n loginWithRedirect();\n };\n\n const handleAddNewClick = () => {\n if (!acceptedTermsAndConditions) {\n toast.warn(intl.formatMessage({ id: 'home.authenticatedContent.termsAndConditionsRequired' }));\n } else {\n toggleSearchModal();\n }\n };\n\n const handleTermsConditionsCheck = accepted => {\n dispatch(usersActions.upsertUserTermsAndConditions(accepted)).catch(() => {\n toast.error(intl.formatMessage({ id: 'home.authenticatedContent.termsAndConditionsNotSaved' }), {\n autoClose: false,\n });\n });\n };\n\n const handleDownloadTermsConditions = () => {\n dispatch(docsActions.downloadTermsAndConditions())\n .then(response => {\n downloadUrl('termsconditions.pdf', response.data.data);\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'home.authenticatedContent.termsAndConditionsDownloadFailed' }), {\n autoClose: false,\n });\n });\n };\n\n const anonymousContent = !isAuthenticated && ;\n\n const authenticatedContent = isAuthenticated && (\n \n );\n\n const loginButton = !isAuthenticated && (\n \n );\n\n return (\n \n \n eService Tool Repair\n {loginButton}\n \n {anonymousContent}\n {authenticatedContent}\n \n \n );\n};\n\nexport default Home;\n","import Login from './Login';\n\nexport default Login;\n","import { useAuth0 } from '@auth0/auth0-react';\nimport { Col, Row } from 'antd';\nimport React, { useEffect, useState } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { useHistory } from 'react-router';\nimport { StringParam, useQueryParams, withDefault } from 'use-query-params';\nimport { useBaseContext } from '../../components/Layout/BaseLayout/BaseContext';\nimport { useAppInsightsContext } from '@microsoft/applicationinsights-react-js';\nimport {\n setAiInstrumentationKey,\n setMetSessionExpiry,\n setShowWhatsNew,\n setUserHasOrders,\n setUserMetadata,\n updateMetSession,\n} from '../../helpers/sessionStorage';\nimport {\n getMetToken,\n parseUserIdFromClaims,\n parseUserMetadataFromClaims,\n upsertUser,\n upsertUserEmail,\n} from '../../helpers/user';\nimport { serviceOrdersActions } from '../../store';\nimport {PageLoader} from \"../../components\";\n\nconst Login = () => {\n const history = useHistory();\n const dispatch = useDispatch();\n const { isAuthenticated, isLoading, user, getAccessTokenSilently, loginWithRedirect } = useAuth0();\n const { authenticationError, setAuthenticationError } = useBaseContext();\n const appInsights = useAppInsightsContext();\n\n // eslint-disable-next-line no-unused-vars\n const [query, setQuery] = useQueryParams({\n r: withDefault(StringParam, '/'),\n });\n\n const [session, setSession] = useState(null);\n // eslint-disable-next-line no-unused-vars\n const [metSession, setMetSession] = useState(null);\n\n useEffect(() => {\n if (isAuthenticated && !isLoading) {\n initUserSession().catch(() => {\n setAuthenticationError(true);\n });\n }\n if (!isAuthenticated && !isLoading) {\n loginWithRedirect();\n }\n }, [isAuthenticated, isLoading]);\n\n useEffect(() => {\n if (session) {\n initUserState().catch(() => {\n setAuthenticationError(true);\n });\n }\n }, [session]);\n\n useEffect(() => {\n if (authenticationError) {\n history.replace(query.r);\n }\n }, [authenticationError]);\n\n const initUserSession = () => {\n appInsights.trackEvent({\n name: 'Login',\n properties: {\n user,\n },\n });\n\n // Check if user is missing legacy user ID in Auth0\n let userId = parseUserIdFromClaims(user);\n if (userId === '') {\n return Promise.reject();\n }\n\n let userMetadata = parseUserMetadataFromClaims(user);\n setUserMetadata(userMetadata);\n\n return getAccessTokenSilently().then(token => {\n setSession({ token });\n });\n };\n\n const initMetSession = () => {\n return dispatch(getMetToken()).then(response => {\n const { token, expires } = response.data.data;\n\n updateMetSession({ token });\n setMetSessionExpiry(Math.floor(new Date(expires) / 1000));\n setMetSession({ token });\n });\n };\n\n const initUserState = () => {\n return dispatch(upsertUser()).then(user => {\n initMetSession().then(() => {\n const { loginCount } = user.data.data;\n setShowWhatsNew(loginCount <= 1);\n\n dispatch(upsertUserEmail(true)).then(() => {\n dispatch(serviceOrdersActions.searchServiceOrders(1, '')).then(response => {\n setUserHasOrders(response.data.count > 0);\n // Set Ai Instrumentation Key on successful authentication\n setAiKey();\n history.replace(query.r); // Redirect user after successful authentication\n });\n });\n });\n });\n };\n\n const getConfiguration = () => {\n return fetch('/api/v1/configuration').then(response => {\n return response.json();\n });\n };\n\n const setAiKey = () => {\n getConfiguration().then(config => {\n const { appInsights } = config.data;\n if (appInsights.instrumentationKey) {\n setAiInstrumentationKey(appInsights.instrumentationKey);\n }\n });\n };\n\n return (\n \n \n \n \n
\n );\n};\n\nexport default Login;\n","import {Button, Card, Form, Input, Radio, Row, Space, Tabs, Typography } from 'antd';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport styled from 'styled-components';\nimport theme from '../../styled-config'\n\nconst { Text } = Typography;\n\nexport const DetailsContainer = styled.div`\n margin-top: 1rem;\n`;\n\nexport const NotificationTypesList = styled.ul`\n padding: 0;\n margin: 0;\n list-style-type: none;\n display: block;\n`;\n\nexport const AddressCard = styled(Card)`\n height: 100%;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.1);\n\n .ant-card-body {\n height: 100%;\n }\n`;\n\nexport const NewAddressCard = styled(AddressCard)`\n text-align: center;\n cursor: pointer;\n`;\n\nexport const FullHeightRow = styled(Row)`\n height: 100%;\n justify-content: center;\n\n .ant-col {\n align-self: center;\n }\n`;\n\nexport const DefaultAddressLabel = styled(Text)`\n font-size: 0.8em;\n color: #db011a;\n`;\n\nexport const ActionLinks = styled(Space)`\n cursor: pointer;\n\n .ant-typography {\n color: #db011a;\n }\n`;\n\nexport const CreditCardContainer = styled(Card)`\n height: 100%;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.1);\n\n .ant-card-body {\n height: 100%;\n }\n`;\n\nexport const DisclaimerText = styled(Text)`\n color: ${props => props.theme.colors.darkGray};\n margin-left: .25em;\n\n @media (max-width: ${theme.responsive.lg}) {\n margin-left: 0;\n margin-top: -1em;\n }\n`;\n\nexport const PreferencesTabs = styled(Tabs)`\n display: unset;\n\n .ant-tabs-tab {\n padding: 16px 30px;\n margin: 0;\n }\n\n .ant-tabs-tab-btn {\n font-weight: 600;\n color: #a6a8a9;\n }\n\n .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {\n color: #212529;\n }\n\n .ant-tabs-ink-bar {\n height: 3px !important;\n }\n \n @media only screen and (max-width: 964px) {\n display: none;\n }\n \n @media only screen and (min-width: 965px) {\n display: unset;\n }\n`;\n\nexport const GeneralInput = styled(Input)`\n cursor: default !important;\n color: #4a4a4a !important;\n background-color: #f2f2f2 !important;\n padding: 0.375rem 0.75rem;\n`;\n\nexport const UserFormItem = styled(Form.Item)`\n margin-bottom: 0.85rem;\n`;\n\nexport const CancelButton = styled(Button)`\n border: none;\n box-shadow: none;\n text-shadow: none;\n background: #cccccc;\n color: black;\n`;\n\nexport const DefaultButton = styled(Button)`\n border: none;\n box-shadow: none;\n text-shadow: none;\n background: #db011c;\n`;\n\nexport const StyledContainer = styled(Card)`\n padding: '1.25rem',\n border: '1px solid rgba(0, 0, 0, 0.1)',\n box-shadow: 'rgb(0 0 0 / 3%) 0px 0px 3px 0px',\n width: '100%';\n`;\n\nexport const BackButton = styled(Button)`\n border: none;\n color: #db011c;\n box-shadow: none !important;\n padding: unset;\n\n @media only screen and (max-width: 964px) {\n display: block;\n }\n \n @media only screen and (min-width: 965px) {\n display: none;\n }\n`;\n\nexport const MobileButton = styled(Radio.Button)`\n width: 100%;\n height: 52px;\n font-weight: bold;\n align-items: center; \n padding: 8px 16px 8px 16px;\n \n @media only screen and (max-width: 964px) {\n display: block;\n }\n \n @media only screen and (min-width: 965px) {\n display: none;\n }\n \n span:nth-child(2) {\n width: 100%;\n }\n`;\n\nexport const StyledDiv = styled.div`\n @media only screen and (min-width: 965px) {\n display: none;\n }\n`;\n\nexport const MobileButtonSpace = styled(Space)`\n width: 100%;\n gap: 0px !important;\n`;\n\nexport const StyledBackIcon = styled(FontAwesomeIcon)`\n vertical-align: middle !important;\n margin-bottom: 4.6px;\n`;\n","import styled from 'styled-components';\nimport { CreditCardContainer } from '../../containers/Preferences/styled';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nexport const NewCreditCard = styled(CreditCardContainer)`\n text-align: center;\n cursor: pointer;\n`;\n\nexport const DisclaimerContainer = styled.div`\n text-align: center;\n font-style: italic;\n color: ${props => props.theme.colors.darkGray};\n`\n\nexport const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`\n color: rgb(204, 204, 204);\n stroke-width: 40;\n stroke: rgb(204, 204, 204);\n margin-bottom: .5rem;\n`;\n","import React, { Fragment, useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { toast } from 'react-toastify';\n\nimport { AddressModal } from '../../components';\nimport { PageLoaderJr } from '../../components';\nimport { useUser, useAddresses, useToggle } from '../../hooks';\nimport { countriesActions, statesActions, usersActions } from '../../store';\nimport {\n ActionLinks,\n AddressCard,\n DefaultAddressLabel,\n DetailsContainer,\n FullHeightRow,\n NewAddressCard,\n} from './styled';\nimport { StyledFontAwesomeIcon } from '../../components/SquarePayments/styled'\nimport { Col, Row, Space, Typography } from 'antd';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faTruckFast, faPlus } from '@fortawesome/free-solid-svg-icons';\n\nconst { Text } = Typography;\n\nconst Addresses = () => {\n const dispatch = useDispatch();\n const intl = useIntl();\n const { loadingUser } = useUser();\n const { defaultUserAddress, userAddresses } = useAddresses();\n\n const [currentAddress, setCurrentAddress] = useState({});\n const [showDeleteAddressView, setShowDeleteAddressView] = useState(false);\n const [showDefaultAddressView, setShowDefaultAddressView] = useState(false);\n const [showAddressModal, toggleAddressModal] = useToggle(false);\n\n useEffect(() => {\n dispatch(countriesActions.getCountries()).catch(() => {\n toast.error(intl.formatMessage({ id: 'address.loadingCountriesErrorMessage' }), { autoClose: false });\n });\n dispatch(statesActions.getStates()).catch(() => {\n toast.error(intl.formatMessage({ id: 'address.loadingStatesErrorMessage' }), { autoClose: false });\n });\n getUserAddresses();\n }, [dispatch]);\n\n const getUserAddresses = () => {\n dispatch(usersActions.getUserAddressesWithDefault()).catch(() => {\n toast.error(intl.formatMessage({ id: 'profile.loadingUserErrorMessage' }), { autoClose: false });\n });\n };\n\n const handleNewAddressClick = () => {\n handleClearAddressValidation();\n setCurrentAddress({});\n setShowDeleteAddressView(false);\n setShowDefaultAddressView(false);\n toggleAddressModal();\n };\n\n const handleEditAddressClick = address => {\n handleClearAddressValidation();\n setCurrentAddress(address);\n setShowDeleteAddressView(false);\n setShowDefaultAddressView(false);\n toggleAddressModal();\n };\n\n const handleDeleteAddressClick = address => {\n setCurrentAddress(address);\n setShowDeleteAddressView(true);\n setShowDefaultAddressView(false);\n toggleAddressModal();\n };\n\n const handleSetDefaultClick = address => {\n setCurrentAddress(address);\n setShowDeleteAddressView(false);\n setShowDefaultAddressView(true);\n toggleAddressModal();\n };\n\n const handleCancelClick = () => {\n handleClearAddressValidation();\n toggleAddressModal();\n };\n\n const handleClearAddressValidation = () => {\n dispatch(usersActions.clearAddressValidation());\n };\n\n const handleConfirmDeleteClick = (id, defaultShippingAddress) => {\n dispatch(usersActions.deleteUserAddress(id, defaultShippingAddress))\n .then(() => {\n getUserAddresses();\n toggleAddressModal();\n toast.success(intl.formatMessage({ id: 'address.addressDeleted' }), { autoClose: 5000 });\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'address.deleteError' }), { autoClose: 5000 });\n });\n };\n\n const handleConfirmDefaultClick = id => {\n dispatch(usersActions.updateUserDefaultAddress(id))\n .then(() => {\n getUserAddresses();\n toggleAddressModal();\n toast.success(intl.formatMessage({ id: 'address.addressUpdated' }), { autoClose: 5000 });\n })\n .catch(error => {\n toast.error(intl.formatMessage({ id: 'address.saveChangesError' }), { autoClose: 5000 });\n });\n };\n\n const handleConfirmEditClick = (\n id,\n defaultShippingAddress,\n addressLine1,\n addressLine2,\n city,\n state,\n countryCode,\n postalCode,\n name,\n isResidential,\n latitude,\n longitude\n ) => {\n dispatch(\n usersActions.upsertUserAddress(\n id,\n defaultShippingAddress,\n addressLine1,\n addressLine2,\n city,\n state,\n countryCode,\n postalCode,\n name,\n isResidential,\n latitude,\n longitude\n )\n )\n .then(() => {\n getUserAddresses();\n toggleAddressModal();\n toast.success(intl.formatMessage({ id: 'address.addressUpdated' }), { autoClose: 5000 });\n })\n .catch(error => {\n toast.error(intl.formatMessage({ id: 'address.saveChangesError' }), { autoClose: 5000 });\n });\n };\n\n const newAddressMarkup = (\n \n handleNewAddressClick()}>\n \n \n \n \n \n \n \n \n \n \n \n \n );\n\n const defaultAddressMarkup = defaultUserAddress && defaultUserAddress.id && (\n \n \n \n \n \n \n \n }\n >\n \n {defaultUserAddress.name}\n {defaultUserAddress.addressLine1}\n {defaultUserAddress.addressLine2}\n \n {defaultUserAddress.city}, {defaultUserAddress.state} {defaultUserAddress.postalCode}\n \n {defaultUserAddress.countryCode}\n \n handleEditAddressClick(defaultUserAddress)}>\n \n \n handleDeleteAddressClick(defaultUserAddress)}>\n \n \n \n \n \n \n );\n\n const addressesMarkup =\n userAddresses &&\n userAddresses.map((userAddress, index) => {\n let setDefaultMarkup = !userAddress.defaultShippingAddress && (\n handleSetDefaultClick(userAddresses[index])}>\n \n \n );\n\n return (\n \n \n \n {userAddress.name}\n {userAddress.addressLine1}\n {userAddress.addressLine2}\n \n {userAddress.city}, {userAddress.state} {userAddress.postalCode}\n \n {userAddress.countryCode}\n \n handleEditAddressClick(userAddress)}>\n \n \n handleDeleteAddressClick(userAddress)}>\n \n \n {setDefaultMarkup}\n \n \n \n \n );\n });\n\n if (loadingUser) {\n return (\n \n );\n }\n\n return (\n \n \n \n {newAddressMarkup}\n {defaultAddressMarkup}\n {addressesMarkup}\n
\n \n \n \n );\n};\n\nexport default Addresses;\n","import { Button, Form, Input, Modal } from 'antd';\nimport React, { Fragment, useRef } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { CloseOutlined } from '@ant-design/icons';\n\nconst MissingAccountNumberModal = ({ showModal, toggleModal, onSaveClick }) => {\n const intl = useIntl();\n const formRef = useRef();\n\n const handleSubmit = form => {\n onSaveClick(form);\n };\n\n const modalMarkup = showModal && (\n }\n visible={showModal}\n title={intl.formatMessage({ id: 'profile.missingAccountNumberModal.requestAccountNumber' })}\n footer={[\n ,\n ,\n ]}\n width={750}\n onCancel={() => toggleModal()}\n destroyOnClose={true}\n >\n \n \n );\n\n return {modalMarkup};\n};\n\nexport default MissingAccountNumberModal;\n","import { Col, Button, Form, Row } from 'antd';\nimport Enumerable from 'linq';\nimport React, { Fragment, useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport {UserMetadataModal, PageLoaderJr, PageLoader} from '../../components';\nimport { formatPhoneNumber } from '../../helpers/formatter';\nimport { useUser, useToggle } from '../../hooks';\nimport { DetailsContainer, GeneralInput, UserFormItem, CancelButton, DefaultButton } from './styled';\nimport { Alert, Space } from 'antd';\nimport {\n getHideMissingAccountNumberNotification,\n setHideMissingAccountNumberNotification,\n} from '../../helpers/sessionStorage';\nimport MissingAccountNumberModal from './components/MissingAccountNumberModal/MissingAccountNumberModal';\nimport { usersActions } from '../../store';\nimport { toast } from 'react-toastify';\nimport { useDispatch } from 'react-redux';\n\nconst General = () => {\n const intl = useIntl();\n const dispatch = useDispatch();\n const {\n loadingUser,\n email,\n firstName,\n lastName,\n phoneNumber,\n preferredContactMethod,\n accountNumber,\n preferredLanguage,\n requestedAccountNumber,\n } = useUser();\n\n const [showUserMetadataModal, toggleUserMetadataModal] = useToggle(false);\n const [preferredUserLanguage, setPreferredUserLanguage] = useState(\n intl.formatMessage({ id: 'profile.preferredLanguage.english' })\n );\n const [showMissingAccountNumberModal, toggleMissingAccountNumberModal] = useToggle(false);\n const [showMissingAccountNumberNotification, setShowMissingAccountNumberNotification] = useState(false);\n\n const languages = [\n {\n label: intl.formatMessage({ id: 'profile.preferredLanguage.english' }),\n value: 'en-US',\n },\n {\n label: intl.formatMessage({ id: 'profile.preferredLanguage.french' }),\n value: 'fr-CA',\n },\n ];\n\n useEffect(() => {\n if (!requestedAccountNumber && !getHideMissingAccountNumberNotification() && !accountNumber) {\n setShowMissingAccountNumberNotification(true);\n }\n }, [accountNumber, requestedAccountNumber]);\n\n useEffect(() => {\n if (preferredLanguage) {\n let lang = Enumerable.from(languages).firstOrDefault(x => x.value === preferredLanguage);\n if (lang) {\n setPreferredUserLanguage(lang.label);\n }\n }\n }, [preferredLanguage]);\n\n const [form] = Form.useForm();\n\n const initialValues = {\n email: email,\n firstName: firstName,\n lastName: lastName,\n accountNumber: accountNumber,\n phoneNumber: formatPhoneNumber(phoneNumber),\n preferredContactMethod:\n preferredContactMethod &&\n intl.formatMessage({ id: `profile.preferredContactMethods.label${preferredContactMethod}` }),\n preferredLanguage: preferredUserLanguage,\n };\n\n useEffect(() => {\n form.setFieldsValue(initialValues);\n }, [form, initialValues]);\n\n if (loadingUser) {\n return (\n \n );\n }\n\n const onDismissMissingAccountNumberNotificationClick = () => {\n setShowMissingAccountNumberNotification(false);\n setHideMissingAccountNumberNotification(true);\n };\n\n const updateRequestedAccountNumber = form => {\n dispatch(usersActions.updateUserRequestedAccountNumber(form.requestedAccountNumber))\n .then(() => {\n toast.success(intl.formatMessage({ id: 'profile.missingAccountNumberModal.successMessage' }));\n setShowMissingAccountNumberNotification(false);\n setHideMissingAccountNumberNotification(true);\n toggleMissingAccountNumberModal();\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'profile.missingAccountNumberModal.errorMessage' }));\n });\n };\n\n const missingAccountNumberMarkup = showMissingAccountNumberNotification && (\n \n onDismissMissingAccountNumberNotificationClick()}\n >\n \n \n toggleMissingAccountNumberModal()}\n >\n \n \n \n }\n />\n );\n\n return (\n \n {missingAccountNumberMarkup}\n \n \n \n \n \n
\n \n \n toggleUserMetadataModal()}\n >\n \n \n \n
\n \n form.resetFields()}\n />\n updateRequestedAccountNumber(form)}\n />\n \n );\n};\n\nexport default General;\n","import { Button, Col, Row, Space, Table, Typography } from 'antd';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCheck } from '@fortawesome/free-solid-svg-icons';\nimport React, { useEffect } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { useHistory } from 'react-router-dom';\nimport { toast } from 'react-toastify';\nimport { useUser } from '../../hooks';\nimport { usersActions } from '../../store';\nimport { DetailsContainer, DefaultButton } from './styled';\nimport { PageLoaderJr } from '../../components';\n\nconst LinkedEmails = () => {\n const dispatch = useDispatch();\n const intl = useIntl();\n const history = useHistory();\n const { userEmails, loadingUserEmails } = useUser();\n const { Text } = Typography;\n\n useEffect(() => {\n dispatch(usersActions.getUserEmails()).catch(() => {\n toast.error(intl.formatMessage({ id: 'profile.loadingUserEmailsErrorMessage' }));\n });\n }, [dispatch]);\n\n if (loadingUserEmails) {\n return (\n \n );\n }\n\n const columns = [\n {\n title: intl.formatMessage({ id: 'profile.emailAddressHeader' }),\n key: 'userEmail',\n render: record => {\n return record.email;\n },\n ellipsis: true,\n },\n {\n title: intl.formatMessage({ id: 'profile.isVerifiedHeader' }),\n key: 'isVerified',\n render: record => {\n return record.isVerified ? (\n \n \n \n ) : (\n ''\n );\n },\n ellipsis: true,\n },\n ];\n\n return (\n \n \n \n \n \n
\n \n \n \n history.push('/recoveremail?r=/preferences?t=linkedEmails')}\n >\n \n \n \n
\n \n \n \n \n \n \n
\n \n );\n};\n\nexport default LinkedEmails;\n","import React, { createContext, useContext, useState } from 'react';\nimport { useSelector } from 'react-redux';\n\nconst PreferencesContext = createContext({\n notificationTypes: [],\n loadingNotificationTypes: false,\n upsertingUserNotification: false,\n userNotifications: [],\n disableEmailNotifications: false,\n});\n\nconst usePreferencesContext = () => useContext(PreferencesContext);\n\nconst PreferencesProvider = ({ children }) => {\n const notificationTypes = useSelector(state => state.notifications.getNotificationTypes.notificationTypes);\n const loadingNotificationTypes = useSelector(state => state.notifications.getNotificationTypes.isLoading);\n const upsertingUserNotification = useSelector(state => state.users.upsertUserNotifications.isLoading);\n\n const userNotifications = useSelector(state => state.users.user && state.users.user.userNotifications);\n const disableEmailNotifications = useSelector(\n state => state.users.user && state.users.user.disableEmailNotifications\n );\n\n return (\n \n {children}\n \n );\n};\n\nexport { PreferencesProvider, usePreferencesContext, PreferencesContext };\n","import { useAuth0 } from '@auth0/auth0-react';\nimport { Checkbox, Col, message, Row, Switch } from 'antd';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { toast } from 'react-toastify';\nimport { useUser } from '../../hooks';\nimport { notificationsActions, usersActions } from '../../store';\nimport { usePreferencesContext } from './PreferencesContext';\nimport { DetailsContainer, NotificationTypesList } from './styled';\nimport { PageLoaderJr } from '../../components';\n\nconst Notifications = () => {\n const intl = useIntl();\n const { loadingUser, user } = useUser();\n const dispatch = useDispatch();\n\n const {\n notificationTypes,\n loadingNotificationTypes,\n upsertingUserNotification,\n userNotifications,\n disableEmailNotifications,\n } = usePreferencesContext();\n const { isAuthenticated } = useAuth0();\n\n const [notifications, setNotifications] = useState([]);\n const [disableEmail, setDisableEmail] = useState(false);\n\n useEffect(() => {\n if (isAuthenticated) {\n dispatch(notificationsActions.getNotificationTypes()).catch(() => {\n toast.error(intl.formatMessage({ id: 'profile.loadingErrorMessage' }), {\n autoClose: false,\n });\n });\n if (!user.userNotifications) {\n dispatch(usersActions.getCurrentUser());\n }\n }\n }, [dispatch, intl]);\n\n useEffect(() => {\n if (userNotifications) {\n setNotifications(userNotifications);\n }\n\n if (disableEmailNotifications) {\n setDisableEmail(disableEmailNotifications);\n }\n }, [userNotifications, disableEmailNotifications]);\n\n if (loadingUser || loadingNotificationTypes) {\n return (\n \n );\n }\n\n const handleDisableEmail = disabled => {\n setDisableEmail(disabled);\n\n dispatch(usersActions.upsertUserNotifications(userNotifications, disabled, null))\n .then(() => {\n message.success(intl.formatMessage({ id: 'profile.saveChangesSuccessMessage' }));\n })\n .catch(() => {\n message.error(intl.formatMessage({ id: 'profile.saveChangesErrorMessage' }));\n });\n };\n\n const handleEmailNotificationClick = (id, isActive) => {\n let index = userNotifications?.findIndex(x => x.notificationType === id);\n let updatedUserNotifications;\n\n if (index > -1) {\n updatedUserNotifications = [\n ...userNotifications.filter(x => x.notificationType !== id),\n {\n notificationType: id,\n receiveEmail: isActive,\n },\n ];\n } else {\n updatedUserNotifications = [\n ...userNotifications,\n {\n notificationType: id,\n receiveEmail: isActive,\n },\n ];\n }\n\n setNotifications(updatedUserNotifications);\n\n dispatch(usersActions.upsertUserNotifications(updatedUserNotifications, disableEmail, null))\n .then(() => {\n message.success(intl.formatMessage({ id: 'profile.saveChangesSuccessMessage' }));\n })\n .catch(() => {\n message.error(intl.formatMessage({ id: 'profile.saveChangesErrorMessage' }));\n });\n };\n\n const emailNotificationsList =\n notificationTypes &&\n notificationTypes.map((notificationType, index) => {\n let notification = notifications?.filter(x => x.notificationType === notificationType.key);\n let isActive = notification.length > 0 ? notification[0].receiveEmail : true;\n\n return (\n \n handleEmailNotificationClick(notificationType.key, checked)}\n disabled={disableEmail || upsertingUserNotification}\n />\n \n \n
\n \n );\n });\n\n return (\n \n \n \n \n \n
\n {emailNotificationsList}\n handleDisableEmail(event.target.checked)}\n style={{ marginTop: '.5em' }}\n >\n \n \n \n
\n \n );\n};\n\nNotifications.propTypes = {\n saveChanges: PropTypes.func,\n};\n\nexport default Notifications;\n","export const squareProdUrl = 'https://web.squarecdn.com/v1/square.js';\nexport const squareSandboxUrl = 'https://sandbox.web.squarecdn.com/v1/square.js';\n\nexport const isSquareSandbox = applicationId => {\n return applicationId && applicationId.indexOf('sandbox') >= 0;\n};\n\nexport const getSquareUrl = applicationId => {\n if (applicationId && isSquareSandbox(applicationId)) {\n // Is sandbox\n return squareSandboxUrl;\n } else if (applicationId && !isSquareSandbox(applicationId)) {\n // Is Prod\n return squareProdUrl;\n } else {\n return '';\n }\n};\n","import React, {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react';\nimport {Form, Input, message, Skeleton, Typography} from 'antd';\nimport {FormattedMessage, useIntl} from 'react-intl';\nimport {useDispatch, useSelector} from 'react-redux';\nimport {useDynamicScript, useSquarePaymentFormConfig} from '../../../hooks';\nimport {getSquareUrl, isSquareSandbox, squareProdUrl, squareSandboxUrl} from '../../../helpers/squareHelper';\nimport {squareActions} from '../../../store';\nimport {DisclaimerContainer} from \"../styled\";\nimport PageError from \"../../PageError/PageError\";\n\nconst { Text } = Typography;\n\nconst SquarePaymentForm = forwardRef(({ onCardNonceSuccess, showSaveCard, showDisclaimer }, ref) => {\n const intl = useIntl();\n const formRef = useRef();\n const dispatch = useDispatch();\n\n useImperativeHandle(ref, () => ({\n handleFormSubmit: () => {\n formRef?.current?.submit();\n },\n }));\n\n const squareApplicationId = useSelector(state => state.square.squareApplicationId);\n\n const [sqCard, setSqCard] = useState(undefined);\n const [sqCardLoading, setSqCardLoading] = useState(true);\n const [squareUpJsConfig, setSquareUpJsConfig] = useState({\n async: true,\n container: 'body',\n src: getSquareUrl(squareApplicationId),\n clearCacheOnSrcChange: true,\n loadAutomatically: false,\n });\n const [loaded, loadError, loadTheScript] = useDynamicScript(squareUpJsConfig);\n const [configured, sqPaymentFormConfig] = useSquarePaymentFormConfig(squareApplicationId, null);\n\n useEffect(() => {\n if (!squareApplicationId) {\n dispatch(squareActions.getSquareConfig());\n }\n\n if (squareApplicationId && isSquareSandbox(squareApplicationId) && squareUpJsConfig.src !== squareSandboxUrl) {\n setSquareUpJsConfig({\n ...squareUpJsConfig,\n src: squareSandboxUrl,\n });\n } else if (squareApplicationId && !isSquareSandbox(squareApplicationId) && squareUpJsConfig.src !== squareProdUrl) {\n setSquareUpJsConfig({\n ...squareUpJsConfig,\n src: squareProdUrl,\n });\n }\n }, [squareApplicationId]);\n\n useEffect(() => {\n if (squareApplicationId && squareUpJsConfig) {\n loadTheScript();\n }\n }, [squareUpJsConfig, squareApplicationId]);\n\n useEffect(() => {\n if (loadError) {\n setSqCardLoading(false);\n message.error(intl.formatMessage({ id: 'general.genericError' }));\n }\n }, [loadError]);\n\n const getSquareCard = async () => {\n const payments = window.Square.payments(sqPaymentFormConfig.applicationId, sqPaymentFormConfig.locationId);\n const card = await payments.card({});\n\n await card.attach('#card-container');\n\n setSqCard(card);\n setSqCardLoading(false);\n };\n\n useEffect(() => {\n if (configured && loaded && !loadError) {\n setSqCardLoading(true);\n getSquareCard().then(r => {});\n }\n }, [configured, loaded]);\n\n const requestCardNonce = async formVal => {\n const result = await sqCard.tokenize();\n const saveCard = true;\n\n if (result.status === 'OK') {\n const cardData = {\n card_brand: result.details.card.brand,\n last_4: result.details.card.last4,\n billing_postal_code: result.details.billing ? result.details.billing.postalCode : undefined,\n };\n\n onCardNonceSuccess(cardData, result.token, formVal.cardholderName, saveCard);\n }\n\n if (result.status === 'INVALID') {\n if (result.errors && result.errors.length) {\n message.error(`${result.errors[0].field}: ${result.errors[0].message}`);\n }\n }\n };\n \n const formMarkup = !loadError && (\n \n \n \n );\n \n const disclaimer = showDisclaimer && !loadError && (\n \n \n \n \n \n );\n \n const errorLoadingSquare = loadError && (\n \n );\n\n return (\n <>\n \n { disclaimer }\n {errorLoadingSquare}\n \n );\n});\n\nexport default SquarePaymentForm;\n","import React, {createRef} from 'react';\nimport {Modal} from 'antd';\nimport {useIntl} from 'react-intl';\nimport SquarePaymentForm from './SquarePaymentForm';\nimport {useSelector} from 'react-redux';\n\nconst AddCreditCardModal = ({ isVisible, onCreditCardAdded, toggleIsVisible }) => {\n const intl = useIntl();\n const ref = createRef();\n\n const isLoading = useSelector(state => state.square.addCreditCard.isLoading);\n\n return (\n ref?.current?.handleFormSubmit()}\n onCancel={() => toggleIsVisible()}\n okButtonProps={{\n loading: isLoading,\n }}\n destroyOnClose\n >\n \n \n );\n};\n\nexport default AddCreditCardModal;\n","import React, {useEffect} from 'react';\nimport {FormattedMessage, useIntl} from 'react-intl';\nimport {useDispatch, useSelector} from 'react-redux';\nimport {squareActions} from '../../store';\nimport {ActionLinks, CreditCardContainer, DetailsContainer, DisclaimerText, FullHeightRow} from './styled';\nimport {Col, message, Popconfirm, Row, Space, Typography} from 'antd';\nimport {CreditCardOutlined} from '@ant-design/icons';\nimport {PageLoaderJr} from '../../components';\nimport {NewCreditCard, StyledFontAwesomeIcon} from '../../components/SquarePayments/styled';\nimport AddCreditCardModal from '../../components/SquarePayments/Add/AddCreditCardModal';\nimport {useToggle} from '../../hooks';\nimport {faPlus} from \"@fortawesome/free-solid-svg-icons\";\nimport PageError from \"../../components/PageError/PageError\";\n\nconst { Text } = Typography;\n\nconst PaymentMethod = () => {\n const dispatch = useDispatch();\n const intl = useIntl();\n\n const [showAddCreditCard, toggleShowAddCreditCard] = useToggle(false);\n\n const squareApplicationId = useSelector(state => state.square.squareApplicationId);\n const userCreditCards = useSelector(state => state.square.creditCards);\n const creditCardsIsLoading = useSelector(state => state.square.getCreditCards.isLoading);\n const squareApplicationIsLoading = useSelector(state => state.square.getSquareConfig.isLoading);\n const squareApplicationIsError = useSelector(state => state.square.getSquareConfig.isError);\n \n useEffect(() => {\n if (!squareApplicationId) {\n dispatch(squareActions.getSquareConfig()).catch(e => {\n message.error(intl.formatMessage({ id: 'general.genericError' }));\n });\n } else {\n getUserCreditCards();\n }\n }, [squareApplicationId]);\n\n const getUserCreditCards = () => {\n dispatch(squareActions.getCreditCards())\n .then(() => {})\n .catch(e => {\n message.error(intl.formatMessage({ id: 'square.getPaymentMethodError' }));\n });\n };\n\n const deleteCard = cardId => {\n dispatch(squareActions.deleteCreditCard(cardId)).then(() => {\n getUserCreditCards();\n message.success(intl.formatMessage({ id: 'square.deletePaymentMethodSuccess' }));\n }).catch(() => {\n message.error(intl.formatMessage({ id: 'square.deletePaymentMethodError' }))\n });\n };\n\n const handleCreditCardAdded = (cardData, nonce, cardholderNameValue, saveCard) => {\n dispatch(squareActions.addCreditCard(cardData.billing_postal_code, cardholderNameValue, nonce))\n .then(r => {\n toggleShowAddCreditCard();\n getUserCreditCards();\n message.success(intl.formatMessage({ id: 'square.paymentMethodAddedSuccess' }));\n })\n .catch(e => {\n message.error(intl.formatMessage({ id: 'square.addCreditCardError' }));\n });\n };\n\n const creditCardList = userCreditCards.map((item, index) => {\n return (\n \n \n \n \n {item?.cardholderName}\n ****{item?.cardLast4}\n \n {item?.cardExpMonth}/{item?.cardExpYear}\n \n deleteCard(item?.id)}>\n \n \n \n \n \n \n \n \n \n );\n });\n \n const newCardMarkup = (!squareApplicationIsLoading && !squareApplicationIsError) && (\n \n toggleShowAddCreditCard()}\n >\n \n \n \n \n \n \n \n \n \n \n \n \n );\n \n const disclaimerText = !squareApplicationIsError && (\n <>\n \n \n \n \n \n \n \n );\n \n const creditCardListMarkup = !squareApplicationIsError && (\n \n \n {newCardMarkup}\n toggleShowAddCreditCard()}\n />\n {creditCardList}\n
\n \n );\n \n const errorLoadingSquare = squareApplicationIsError && (\n \n );\n\n if (creditCardsIsLoading || squareApplicationIsLoading) {\n return (\n \n );\n }\n\n return (\n <>\n {disclaimerText}\n {creditCardListMarkup}\n {errorLoadingSquare}\n \n );\n};\n\nexport default PaymentMethod;\n","import { Col, Radio, Row, Typography } from 'antd';\nimport React, { Fragment } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport Addresses from './Addresses';\nimport General from './General';\nimport LinkedEmails from './LinkedEmails';\nimport Notifications from './Notifications';\nimport { PreferencesProvider } from './PreferencesContext';\nimport PaymentMethod from './PaymentMethod';\nimport { useFeatureToggles } from '../../hooks';\nimport {\n BackButton,\n MobileButton,\n MobileButtonSpace,\n PreferencesTabs,\n StyledContainer,\n StyledBackIcon,\n StyledDiv,\n} from './styled';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faAngleRight, faChevronLeft } from '@fortawesome/free-solid-svg-icons';\nimport { StringParam, useQueryParam } from 'use-query-params';\nimport { PreferenceTabTypes } from '../../enums';\n\nconst Preferences = () => {\n return (\n \n \n \n );\n};\n\nconst PreferencesContent = () => {\n const intl = useIntl();\n const { Text } = Typography;\n const { creditCardPayments } = useFeatureToggles();\n const [currentTab, setCurrentTab] = useQueryParam('t', StringParam);\n\n const tabs = [\n {\n key: PreferenceTabTypes.GENERAL,\n label: (\n \n \n \n ),\n children: ,\n },\n {\n key: PreferenceTabTypes.NOTIFICATIONS,\n label: (\n \n \n \n ),\n children: ,\n },\n {\n key: PreferenceTabTypes.LINKEDEMAILS,\n label: (\n \n \n \n ),\n children: ,\n },\n {\n key: PreferenceTabTypes.ADDRESSES,\n label: (\n \n \n \n ),\n children: ,\n },\n creditCardPayments && {\n key: PreferenceTabTypes.PAYMENTMETHOD,\n label: (\n \n \n \n ),\n children: ,\n },\n ];\n\n const getTabContent = () => {\n switch (currentTab) {\n case PreferenceTabTypes.GENERAL:\n return ;\n\n case PreferenceTabTypes.NOTIFICATIONS:\n return ;\n\n case PreferenceTabTypes.LINKEDEMAILS:\n return ;\n\n case PreferenceTabTypes.ADDRESSES:\n return ;\n\n case PreferenceTabTypes.PAYMENTMETHOD:\n return creditCardPayments ? : null;\n\n default:\n return null;\n }\n };\n\n const handleNavigation = (e) => {\n setCurrentTab(e.target.value);\n };\n\n const mobileContent = {getTabContent()};\n\n const tabsMarkup = (\n \n );\n\n const mobileMenuMarkup = !currentTab && (\n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n
\n \n {creditCardPayments && (\n \n \n \n \n \n \n \n \n
\n \n )}\n \n \n );\n\n const backButtonMarkup = currentTab && (\n {\n setCurrentTab(null);\n }}\n icon={}\n >\n {intl.formatMessage({ id: 'general.back' })}\n \n );\n\n return (\n \n \n \n
\n \n {tabsMarkup}\n {backButtonMarkup}\n {mobileMenuMarkup}\n {mobileContent}\n \n \n );\n};\n\nexport default Preferences;\n","import { Button, Card } from 'antd';\nimport styled from 'styled-components';\n\nexport const StyledContainer = styled(Card)`\n padding: '1.25rem',\n border: '1px solid rgba(0, 0, 0, 0.1)',\n box-shadow: 'rgb(0 0 0 / 3%) 0px 0px 3px 0px',\n`;\n\nexport const OkButton = styled(Button)`\n border: none;\n box-shadow: none;\n text-shadow: none;\n background: #db011c;\n`;","import { Button, Card, Col, Form, Input, Row, Typography } from 'antd';\nimport React, { Fragment, useState, useRef } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useHistory } from 'react-router';\nimport { toast } from 'react-toastify';\nimport { StringParam, useQueryParam } from 'use-query-params';\nimport { usersActions } from '../../store';\nimport { OkButton, StyledContainer } from './styled';\n\nconst RecoverEmail = () => {\n const intl = useIntl();\n const dispatch = useDispatch();\n const history = useHistory();\n const { Text } = Typography;\n const formRef = useRef();\n\n const [returnUrl, setReturnUrl] = useQueryParam('r', StringParam); // eslint-disable-line no-unused-vars\n\n const [emailAddress, setEmailAddress] = useState('');\n const [submitted, setSubmitted] = useState(false);\n\n const isLoading = useSelector(state => state.users.submitEmailRecovery.isLoading);\n\n const handleEmailAddressChange = emailAddress => {\n setEmailAddress(emailAddress);\n };\n\n const handleSubmitClick = () => {\n dispatch(usersActions.submitEmailRecovery(emailAddress))\n .then(() => {\n setSubmitted(true);\n toast.success(intl.formatMessage({ id: 'recoverEmail.submissionSuccess' }));\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'recoverEmail.submissionError' }));\n });\n };\n\n const handleReturnClick = () => {\n history.push(returnUrl ? returnUrl : '/dashboard');\n };\n\n const submitButtonText = submitted ? (\n \n ) : (\n \n );\n\n const submitMarkup = !submitted && (\n \n \n \n \n \n
\n \n \n \n \n
\n \n \n {\n handleSubmitClick();\n }}\n >\n \n handleEmailAddressChange(e.target.value)}\n style={{ width: 'max-content' }}\n />\n \n \n \n \n formRef?.current?.submit()}\n loading={isLoading}\n disabled={submitted}\n >\n {submitButtonText}\n \n \n
\n \n \n \n
\n \n );\n\n const submittedMarkup = submitted && (\n \n \n \n \n \n
\n \n \n \n \n
\n \n \n handleReturnClick()}>\n \n \n \n
\n \n );\n\n return (\n \n Email Recovery
\n \n {submitMarkup}\n {submittedMarkup}\n \n \n );\n};\n\nexport default RecoverEmail;\n","import RecoverEmail from './RecoverEmail';\n\nexport default RecoverEmail;\n","import { Space, Typography } from 'antd';\nimport moment from 'moment';\nimport React, { Fragment } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { InfoGrid, InfoGridItem } from '../../../../components';\nimport { useServiceOrder, useShipping } from '../../../../hooks';\n\nconst { Title } = Typography;\n\nconst OrderInfo = () => {\n const intl = useIntl();\n const { serviceOrder } = useServiceOrder();\n const { getTrackingMarkup } = useShipping();\n\n const serviceOrderNumberMarkup = serviceOrder && serviceOrder.serviceOrderNumber && (\n \n {serviceOrder.serviceOrderNumber}\n \n );\n\n // If status is Submitted -> In Transit\n let inboundTrackingMarkup =\n serviceOrder &&\n serviceOrder.trackingNumber &&\n [1, 2].includes(serviceOrder.status) &&\n getTrackingMarkup(0, serviceOrder.countryCode, serviceOrder.trackingNumber);\n\n // If status is Shipped -> Delivered\n let returnTrackingMarkup =\n serviceOrder &&\n serviceOrder.serviceOrderShipments &&\n serviceOrder.serviceOrderShipments.length > 0 &&\n [5, 6].includes(serviceOrder.status) &&\n getTrackingMarkup(0, serviceOrder.countryCode, serviceOrder.serviceOrderShipments[0].trackingNumber);\n\n let trackingMarkup = (inboundTrackingMarkup || returnTrackingMarkup) && (\n \n \n {inboundTrackingMarkup}\n {returnTrackingMarkup}\n \n \n );\n\n const proofOfPurchaseMarkup = serviceOrder.proofOfPurchaseIncluded ? (\n \n ) : serviceOrder.proofOfPurchaseBlob ? (\n \n ) : (\n \n );\n\n return (\n \n \n <FormattedMessage id='repairDetails.orderInfoTitle' />\n \n \n \n {moment(serviceOrder.serviceOrderDate)\n .local()\n .format('M/D/YYYY')}\n \n {serviceOrderNumberMarkup}\n \n {proofOfPurchaseMarkup}\n \n \n \n \n {trackingMarkup}\n \n \n );\n};\n\nexport default OrderInfo;\n","import {\n faBox,\n faBoxOpen,\n faPaperPlane,\n faRecycle,\n faShippingFast,\n faSpinner,\n faTools,\n} from '@fortawesome/free-solid-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { Space } from 'antd';\nimport React, { useEffect, useState } from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport PizzaTracker from '../../../../components/PizzaTracker';\nimport { useServiceOrder } from '../../../../hooks';\n\nconst OrderProgress = ({ trackingNumber }) => {\n const { serviceOrder } = useServiceOrder();\n\n const [serviceOrderStatus, setServiceOrderStatus] = useState(serviceOrder.status);\n\n useEffect(() => {\n if (serviceOrder.status === 1) {\n if (!trackingNumber) {\n setServiceOrderStatus(0); // When order is processing, use \"Processing\" status\n } else {\n setServiceOrderStatus(1); // When order is done processing, use \"Submitted\" status\n }\n } else if (serviceOrder.status === 9) {\n setServiceOrderStatus(4); // If an order needs additional info in repair, use \"In Repair\" status\n } else if (serviceOrder.status === 10) {\n setServiceOrderStatus(4); // If an order is denied warranty, use \"In Repair\" status\n }\n }, [trackingNumber]);\n\n const detailsMarkup = (\n \n );\n\n return (\n \n ,\n label: ,\n isVisible: !trackingNumber,\n },\n {\n id: 1,\n icon: ,\n label: ,\n },\n {\n id: 2,\n icon: ,\n label: ,\n },\n {\n id: 3,\n icon: ,\n label: ,\n },\n {\n id: 4,\n icon: ,\n label: ,\n },\n {\n id: 5,\n icon: ,\n label: ,\n isVisible: ![8, 9].includes(serviceOrderStatus),\n },\n {\n id: 6,\n icon: ,\n label: ,\n isVisible: ![7, 8].includes(serviceOrderStatus),\n },\n {\n id: 7,\n icon: ,\n label: ,\n isVisible: serviceOrderStatus === 7,\n },\n {\n id: 8,\n icon: ,\n label: ,\n isVisible: serviceOrderStatus === 8,\n },\n ]}\n currentId={serviceOrderStatus}\n />\n {detailsMarkup}\n \n );\n};\n\nexport default OrderProgress;\n","import { Modal, Typography } from 'antd';\nimport React from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useUser } from '../../../../hooks';\n\nconst { Title, Paragraph } = Typography;\n\nconst DeniedWarrantyModal = ({ visible, onOk, onCancel, state }) => {\n const intl = useIntl();\n const { email, phoneNumber, preferredContactMethod } = useUser();\n\n let description;\n if (state.action === 1) {\n description = (\n \n );\n } else if ([2, 3].includes(state.action)) {\n description = ;\n }\n\n const contactMethodDescription =\n state.action === 1 &&\n state.paymentMethod === 1 &&\n (preferredContactMethod === 1 ? (\n \n ) : (\n \n ));\n\n return (\n \n \n <FormattedMessage id={`repairDetails.deniedWarranty.deniedWarrantyAction${state.action}`} />\n \n {description}\n {contactMethodDescription}\n \n );\n};\n\nexport default DeniedWarrantyModal;\n","import { Modal, Typography } from 'antd';\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nconst { Title, Paragraph } = Typography;\n\nconst LmrDefinitionModal = ({ isVisible, toggle }) => {\n return (\n \n \n <FormattedMessage id='productDetail.toolInfo.lmrModalHeader' />\n \n \n \n \n \n \n \n \n \n - \n \n
\n - \n \n
\n - \n \n
\n - \n \n
\n
\n \n \n );\n};\n\nexport default LmrDefinitionModal;\n","import { Button, Input, Radio, Space, Typography } from 'antd';\nimport React, { Fragment, useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useLocale, useServiceOrder, useUser, useToggle } from '../../../../hooks';\nimport LmrOptions from '../../../../components/LmrOptions';\nimport { Icon } from '@met/react-components';\nimport LmrDefinitionModal from '../../../RepairProcess/RepairItems/components/WarrantyInformation/components/LmrDefinitionModal';\n\nconst { Paragraph, Text } = Typography;\n\nconst DeniedWarrantyActions = ({ onSubmit }) => {\n const intl = useIntl();\n const { serviceOrder } = useServiceOrder();\n const { isCaLocale } = useLocale();\n const { email, phoneNumber, accountNumber, preferredContactMethod } = useUser();\n const [selectedAction, setSelectedAction] = useState(null);\n const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(null);\n const [poNumber, setPoNumber] = useState(null);\n const [formIsValid, setFormIsValid] = useState(false);\n const [showLmrModal, toggleLmrModal] = useToggle(false);\n\n const canadaLmrLines = serviceOrder && (\n \n );\n\n const usLmrLines = serviceOrder && (\n \n );\n\n const warrantyLines = isCaLocale() ? canadaLmrLines : usLmrLines;\n\n useEffect(() => {\n setSelectedPaymentMethod(null);\n }, [selectedAction]);\n\n useEffect(() => {\n setPoNumber(null);\n }, [selectedPaymentMethod]);\n\n useEffect(() => {\n setFormIsValid(false);\n\n if ([2, 3].includes(selectedAction)) {\n // Return or Recycle are selected\n setFormIsValid(true);\n } else {\n // Repair is selected\n if (selectedPaymentMethod === 1) {\n // Credit Card is selected\n setFormIsValid(true);\n } else {\n // PO Number is selected\n if (poNumber) {\n setFormIsValid(true);\n }\n }\n }\n }, [selectedAction, selectedPaymentMethod, poNumber]);\n\n const handleSubmit = () => {\n let deniedWarrantyState = {\n action: selectedAction,\n paymentMethod: selectedPaymentMethod,\n poNumber: poNumber,\n };\n\n onSubmit(deniedWarrantyState);\n };\n\n const contactMethodDescription =\n preferredContactMethod === 1 ? (\n \n ) : (\n \n );\n\n const ccPaymentDescription = selectedAction === 1 && selectedPaymentMethod === 1 && (\n \n {contactMethodDescription}\n \n \n \n \n );\n\n const poPaymentDescription = selectedAction === 1 && selectedPaymentMethod === 2 && (\n \n setPoNumber(e.target.value)}\n placeholder={intl.formatMessage({ id: 'repairDetails.deniedWarranty.poNumberPlaceholder' })}\n />\n \n \n \n \n );\n\n // Hide PO payment option if user has no account number\n const poPaymentOptionMarkup = accountNumber && (\n \n \n \n {poPaymentDescription}\n \n \n );\n\n const paymentOptionsMarkup = selectedAction === 1 && (\n setSelectedPaymentMethod(e.target.value)}>\n \n \n \n \n {ccPaymentDescription}\n \n \n {poPaymentOptionMarkup}\n \n \n );\n\n const repairDescription = ;\n\n const lmrMarkup = selectedAction === 1 && warrantyLines && (\n \n \n \n \n \n {warrantyLines}\n \n );\n\n return (\n \n setSelectedAction(e.target.value)}>\n \n \n \n \n \n \n {repairDescription}\n {lmrMarkup}\n toggleLmrModal()} />\n {paymentOptionsMarkup}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default DeniedWarrantyActions;\n","import { Card, Radio, Space } from 'antd';\nimport styled from 'styled-components';\n\nexport const RadioContainer = styled(Radio)`\n padding: 15px;\n background: rgba(255, 255, 255, 0.5);\n border: 1px solid #abacad;\n border-radius: 2px;\n width: 100%;\n\n .ant-radio-wrapper {\n width: 100%;\n }\n`;\n\nexport const CreditCardSpace = styled(Space)`\n width: 90%;\n .ant-radio-wrapper-checked {\n border: 3px solid #076ae6;\n }\n\n .ant-radio-wrapper-disabled {\n border: 1px solid #abacad;\n }\n`;\n\nexport const InfoCardContainer = styled(Card)`\n background: #e6f7ff;\n border: 1px solid #91d5ff;\n`;\n\nexport const InnerInfoCardContainer = styled(Card)`\n background: rgba(255, 255, 255, 0.5);\n border: 1px solid #abacad;\n`;\n\nexport const Space100 = styled(Space)`\n width: 100%;\n`;\n","import {Button, Col, Input, message, Radio, Row, Skeleton, Space, Typography} from 'antd';\nimport React, {createRef, useEffect, useState} from 'react';\nimport {FormattedMessage, useIntl} from 'react-intl';\nimport {useServiceOrder, useToggle, useUser} from '../../../../hooks';\nimport LmrOptions from '../../../../components/LmrOptions';\nimport {Icon} from '@met/react-components';\nimport LmrDefinitionModal\n from '../../../RepairProcess/RepairItems/components/WarrantyInformation/components/LmrDefinitionModal';\nimport {CreditCardSpace, RadioContainer} from '../../styled';\nimport {squareActions} from '../../../../store';\nimport {useDispatch, useSelector} from 'react-redux';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCreditCard} from '@fortawesome/free-solid-svg-icons';\nimport {DeniedWarrantyTypes, PaymentMethodTypes, PreferredContactMethodTypes} from '../../../../enums';\nimport SquarePaymentForm from '../../../../components/SquarePayments/Add/SquarePaymentForm';\nimport {toast} from 'react-toastify';\n\nconst { Paragraph, Text } = Typography;\n\nconst DeniedWarrantyActionsWithCreditCards = ({ onSubmit }) => {\n const intl = useIntl();\n const dispatch = useDispatch();\n const ref = createRef();\n\n const { serviceOrder } = useServiceOrder();\n const { email, phoneNumber, accountNumber, preferredContactMethod } = useUser();\n \n const [selectedAction, setSelectedAction] = useState(null);\n const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(null);\n const [selectedCreditCard, setSelectedCreditCard] = useState(null);\n const [poNumber, setPoNumber] = useState(null);\n const [formIsValid, setFormIsValid] = useState(false);\n const [showLmrModal, toggleLmrModal] = useToggle(false);\n const [showAddCreditCard, toggleShowAddCreditCard] = useToggle(false);\n \n const userCreditCards = useSelector(state => state.square.creditCards);\n const squareApplicationId = useSelector(state => state.square.squareApplicationId);\n const userCreditCardsIsLoading = useSelector(state => state.square.getCreditCards.isLoading);\n const useCreditCardIsSaving = useSelector(state => state.square.addCreditCard.isLoading);\n const squareConfigIsLoading = useSelector(state => state.square.getSquareConfig.isLoading);\n\n const warrantyLines = serviceOrder && (\n \n );\n\n useEffect(() => {\n if (!squareApplicationId) {\n dispatch(squareActions.getSquareConfig()).then(() => {\n getUserCreditCards();\n });\n }\n }, [squareApplicationId]);\n\n useEffect(() => {\n setSelectedPaymentMethod(null);\n }, [selectedAction]);\n\n useEffect(() => {\n setPoNumber(null);\n }, [selectedPaymentMethod]);\n\n useEffect(() => {\n setFormIsValid(false);\n\n if ([DeniedWarrantyTypes.RETURN, DeniedWarrantyTypes.RECYCLE].includes(selectedAction)) {\n setFormIsValid(true);\n } else {\n switch (selectedPaymentMethod) {\n case PaymentMethodTypes.PAYLATER:\n setFormIsValid(true);\n break;\n case PaymentMethodTypes.PURCHASEORDER:\n if (poNumber) {\n setFormIsValid(true);\n }\n break;\n case PaymentMethodTypes.CREDITCARD:\n if (selectedCreditCard) {\n setFormIsValid(true);\n }\n break;\n }\n }\n }, [selectedAction, selectedPaymentMethod, poNumber, selectedCreditCard]);\n\n const getUserCreditCards = () => {\n dispatch(squareActions.getCreditCards()).catch(e => {\n message.error(intl.formatMessage({ id: 'square.getPaymentMethodError' }));\n });\n };\n\n const handleSelectedActionChange = e => {\n setSelectedAction(e.target.value);\n setSelectedCreditCard(null);\n };\n\n const handleSubmit = () => {\n let deniedWarrantyState = {\n action: selectedAction,\n paymentMethod: selectedPaymentMethod,\n poNumber: poNumber,\n creditCard: selectedCreditCard,\n };\n\n onSubmit(deniedWarrantyState);\n };\n\n const addCardClick = () => {\n setSelectedCreditCard(null);\n setSelectedPaymentMethod(null);\n toggleShowAddCreditCard();\n };\n\n const handleCreditCardAdded = (cardData, nonce, cardholderNameValue, saveCard) => {\n dispatch(squareActions.addCreditCard(cardData.billing_postal_code, cardholderNameValue, nonce))\n .then(r => {\n getUserCreditCards();\n toast.success(intl.formatMessage({ id: 'square.paymentMethodAddedSuccess' }));\n toggleShowAddCreditCard();\n })\n .catch(e => {\n message.error(intl.formatMessage({ id: 'square.addCreditCardError' }));\n });\n };\n\n const contactMethodDescription =\n preferredContactMethod === PreferredContactMethodTypes.EMAIL ? (\n \n ) : (\n \n );\n\n const payLaterPaymentDescription = selectedAction === DeniedWarrantyTypes.REPAIR &&\n selectedPaymentMethod === PaymentMethodTypes.PAYLATER && (\n \n {contactMethodDescription}\n \n \n \n \n );\n\n const plPaymentOptionMarkup = !serviceOrder.isNationalAccount && (\n \n \n \n \n \n {payLaterPaymentDescription}\n \n \n );\n\n const poPaymentDescription = selectedAction === DeniedWarrantyTypes.REPAIR &&\n selectedPaymentMethod === PaymentMethodTypes.PURCHASEORDER && (\n \n setPoNumber(e.target.value)}\n placeholder={intl.formatMessage({ id: 'repairDetails.deniedWarranty.poNumberPlaceholder' })}\n />\n \n \n \n \n );\n\n // Hide PO payment option if user has no account number\n const poPaymentOptionMarkup = accountNumber && (\n \n \n \n {poPaymentDescription}\n \n \n );\n\n const creditCardListMarkup =\n !showAddCreditCard &&\n userCreditCards &&\n userCreditCards.map((item, index) => {\n return (\n \n \n \n \n Card Ending in {item.cardLast4}\n {item.cardholderName}\n \n \n \n \n \n
\n \n );\n });\n\n // pay with existing credit card\n const existingCCPaymentOptionMarkup = !showAddCreditCard && (\n \n setSelectedCreditCard(e.target.value)}\n disabled={selectedPaymentMethod !== PaymentMethodTypes.CREDITCARD}\n >\n {creditCardListMarkup}\n \n \n );\n\n const addCreditCardMarkup = showAddCreditCard && (\n \n \n \n \n \n \n \n \n \n \n \n \n );\n \n const addCreditCardButton = !showAddCreditCard && (\n addCardClick()}\n disabled={selectedPaymentMethod !== PaymentMethodTypes.CREDITCARD}\n >\n \n \n );\n\n const ccPaymentOptionMarkup = !serviceOrder.isNationalAccount && (\n \n \n \n \n \n \n {existingCCPaymentOptionMarkup}\n {addCreditCardButton}\n \n \n \n );\n \n const paymentOptionsMarkup = selectedAction === DeniedWarrantyTypes.REPAIR && (\n <>\n {\n !showAddCreditCard && (\n <>\n \n \n \n setSelectedPaymentMethod(e.target.value)}\n style={{ width: '100%' }}\n >\n \n {ccPaymentOptionMarkup}\n \n \n {poPaymentOptionMarkup}\n {plPaymentOptionMarkup}\n \n \n
\n \n \n )\n }\n {addCreditCardMarkup}\n \n );\n\n const repairDescription = ;\n\n const lmrMarkup = selectedAction === DeniedWarrantyTypes.REPAIR && warrantyLines && (\n <>\n \n \n \n \n {warrantyLines}\n \n );\n\n const deniedWarranty = (\n \n handleSelectedActionChange(e)}\n size='large'\n buttonStyle='solid'\n >\n \n \n \n \n \n \n \n {repairDescription}\n \n {lmrMarkup}\n toggleLmrModal()} />\n {paymentOptionsMarkup}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n );\n\n return <>{deniedWarranty};\n};\n\nexport default DeniedWarrantyActionsWithCreditCards;\n","import { Button, Col, Row, Space, Typography } from 'antd';\nimport React, { Fragment } from 'react';\nimport { useServiceOrder, useUser } from '../../../../hooks';\nimport {\n InfoCardContainer,\n InnerInfoCardContainer,\n Space100,\n} from '../../styled';\nimport { Icon, Text } from '@met/react-components';\nimport { FormattedMessage } from 'react-intl';\nimport LmrOptions from '../../../../components/LmrOptions';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCreditCard } from '@fortawesome/free-solid-svg-icons';\nimport { useSelector } from 'react-redux';\nimport {\n DeniedWarrantyTypes,\n PaymentMethodTypes,\n PreferredContactMethodTypes,\n} from '../../../../enums';\n\nconst { Title } = Typography;\n\nconst RepairOrderSummary = ({\n deniedWarrantyState,\n onBackClick,\n onSubmitClick,\n toggleLmrModal,\n}) => {\n const { serviceOrder, upsertingWarrantyOption } = useServiceOrder();\n const { email, phoneNumber, preferredContactMethod } = useUser();\n const { action, creditCard, paymentMethod, poNumber } = deniedWarrantyState;\n const isAuthorizingCard = useSelector(\n (state) => state.square.authorizeCreditCard.isLoading\n );\n\n const usLmrLines = serviceOrder && (\n \n );\n\n const lmrMarkup = (\n \n \n \n \n \n {usLmrLines}\n \n );\n\n const authorizationNotice = paymentMethod ===\n PaymentMethodTypes.CREDITCARD && (\n \n \n {' '}\n {usLmrLines}\n \n \n );\n\n const contactMethodDescription =\n preferredContactMethod === PreferredContactMethodTypes.EMAIL ? (\n \n ) : (\n \n );\n\n const getPaymentMethodType = () => {\n switch (paymentMethod) {\n case PaymentMethodTypes.PAYLATER:\n return ;\n case PaymentMethodTypes.PURCHASEORDER:\n return (\n \n );\n case PaymentMethodTypes.CREDITCARD:\n return (\n \n );\n }\n };\n\n const buttonMarkup = (\n \n \n \n \n \n \n \n \n \n \n \n
\n );\n\n const payLaterMarkup = paymentMethod === PaymentMethodTypes.PAYLATER && (\n \n \n \n \n {contactMethodDescription}\n \n );\n const purchaseOrderMarkup = paymentMethod ===\n PaymentMethodTypes.PURCHASEORDER && (\n \n \n \n \n \n \n \n \n );\n\n const creditCardMarkup = paymentMethod === PaymentMethodTypes.CREDITCARD && (\n \n \n {' '}\n {creditCard?.cardLast4}{' '}\n \n \n {creditCard?.cardholderName}\n \n );\n\n const repairMarkup = action === DeniedWarrantyTypes.REPAIR && (\n \n \n \n \n \n \n \n {lmrMarkup}\n \n <FormattedMessage id='repairDetails.deniedWarranty.billingInformation' />{' '}\n - {getPaymentMethodType()}\n \n {payLaterMarkup}\n {purchaseOrderMarkup}\n {creditCardMarkup}\n \n );\n\n const returnMarkup = action === DeniedWarrantyTypes.RETURN && (\n \n \n \n \n \n \n \n \n );\n\n const recycleMarkup = action === DeniedWarrantyTypes.RECYCLE && (\n \n \n \n \n \n \n \n \n );\n\n return (\n \n \n \n <FormattedMessage id='repairDetails.deniedWarranty.repairOrderSummary' />\n \n {repairMarkup}\n {recycleMarkup}\n {returnMarkup}\n {buttonMarkup}\n \n {authorizationNotice}\n \n );\n};\n\nexport default RepairOrderSummary;\n","import { Alert, Button, notification, Space, Typography } from 'antd';\nimport React, { Fragment, useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { InfoGrid, InfoGridItem } from '../../../../components';\nimport { downloadBlob } from '../../../../helpers/downloadBlob';\nimport {\n useContact,\n useFeatureToggles,\n useLocale,\n useServiceOrder,\n useServiceOrders,\n useShipping,\n useToggle,\n} from '../../../../hooks';\nimport DeniedWarrantyModal from './DeniedWarrantyModal';\nimport DeniedWarrantyActions from './DeniedWarrantyActions';\nimport DeniedWarrantyActionsWithCreditCards from './DeniedWarrantyActionsWithCreditCards';\nimport RepairOrderSummary from './RepairOrderSummary';\nimport LmrDefinitionModal from '../../../RepairProcess/RepairItems/components/WarrantyInformation/components/LmrDefinitionModal';\nimport { squareActions } from '../../../../store';\nimport { DeniedWarrantyTypes, PaymentMethodTypes } from '../../../../enums';\n\nconst { Paragraph, Text } = Typography;\n\nconst OrderStatus = ({ trackingNumber, shippoTrackingFailure }) => {\n const intl = useIntl();\n const dispatch = useDispatch();\n const { creditCardPayments } = useFeatureToggles();\n const { serviceOrder, upsertWarrantyOption, warrantyOption, paymentMethodId } = useServiceOrder();\n const { getEmailLink, getPhoneLink, getServiceCenterLink } = useContact();\n const { getTrackingMarkup, getProviderLocationMarkup } = useShipping();\n const { getServiceOrdersPdf, generatingPaperwork } = useServiceOrders();\n const { isCaLocale } = useLocale();\n\n const [serviceOrderStatus, setServiceOrderStatus] = useState(serviceOrder.status);\n const [deniedWarrantyState, setDeniedWarrantyState] = useState(null);\n const [showDeniedWarrantyModal, setShowDeniedWarrantyModal] = useState(false);\n const [showLmrModal, toggleLmrModal] = useToggle(false);\n const [lmrPrice, setLmrPrice] = useState(null);\n const [showRepairOrderSummary, setShowRepairOrderSummary] = useState(false);\n const [usePaymentMethodV2, setUsePaymentMethodV2] = useState(false);\n\n useEffect(() => {\n if (creditCardPayments && serviceOrder && serviceOrder.countryCode.toLowerCase() === 'usa') {\n setUsePaymentMethodV2(true);\n }\n }, [serviceOrder]);\n\n useEffect(() => {\n if (serviceOrder.status === 1) {\n if (!trackingNumber) {\n setServiceOrderStatus(0); // When order is processing, use pseudo-status of 0 (Processing)\n } else {\n setServiceOrderStatus(1); // When order is done processing, use real status of 1 (Submitted)\n }\n }\n }, [trackingNumber]);\n\n useEffect(() => {\n if (serviceOrder && serviceOrder.serviceOrderLines && serviceOrder.serviceOrderLines.length > 0) {\n let deniedWarrantyLines = serviceOrder.serviceOrderLines.filter(x => x.isDeniedWarranty);\n\n if (deniedWarrantyLines.length > 0) {\n if (isCaLocale()) {\n setLmrPrice(deniedWarrantyLines[0].lmrPriceCa);\n } else {\n setLmrPrice(deniedWarrantyLines[0].lmrPrice);\n }\n }\n }\n }, [serviceOrder]);\n\n const handlePrintPaperworkClick = () => {\n notification.success({\n message: intl.formatMessage({ id: 'orderDetails.pdfDownloading' }),\n description: intl.formatMessage({ id: 'orderDetails.pdfDownloadingDetail' }),\n });\n\n dispatch(getServiceOrdersPdf(serviceOrder.serviceOrderGroupId))\n .then(response => {\n downloadBlob(`${serviceOrder.serviceOrderGroupId}.pdf`, response.data);\n })\n .catch(() => {\n notification.error({\n message: intl.formatMessage({ id: 'orderDetails.pdfDownloadError' }),\n description: intl.formatMessage({ id: 'orderDetails.pdfDownloadErrorDetail' }),\n });\n })\n .finally(() => {\n notification.destroy();\n });\n };\n\n const handleUpsertWarrantyOption = () => {\n dispatch(\n upsertWarrantyOption(serviceOrder.serviceOrderNumber, deniedWarrantyState.poNumber, deniedWarrantyState.action, deniedWarrantyState.paymentMethod)\n )\n .then(() => {\n notification.success({\n message: intl.formatMessage({ id: 'repairDetails.orderInfo.warrantyUpserted' }),\n description: intl.formatMessage({ id: 'repairDetails.orderInfo.warrantyUpsertedDetail' }),\n });\n setShowRepairOrderSummary(false);\n })\n .catch(() => {\n notification.error({\n message: intl.formatMessage({ id: 'repairDetails.orderInfo.warrantyUpsertError' }),\n description: intl.formatMessage({ id: 'repairDetails.orderInfo.warrantyUpsertErrorDetail' }),\n });\n });\n };\n\n const handleDeniedWarrantyClick = state => {\n setDeniedWarrantyState(state);\n\n if (usePaymentMethodV2) {\n setShowRepairOrderSummary(true);\n } else {\n // Original method\n setShowDeniedWarrantyModal(true);\n }\n };\n\n const handleDeniedWarrantyConfirm = () => {\n setShowDeniedWarrantyModal(false);\n handleUpsertWarrantyOption();\n };\n\n const handleDeniedWarrantyConfirmV2 = () => {\n if (\n deniedWarrantyState.action === DeniedWarrantyTypes.REPAIR &&\n deniedWarrantyState.paymentMethod === PaymentMethodTypes.CREDITCARD\n ) {\n dispatch(squareActions.authorizeCreditCard(deniedWarrantyState?.creditCard?.id, serviceOrder?.serviceOrderNumber))\n .then(() => {\n handleUpsertWarrantyOption();\n })\n .catch(() => {\n notification.error({\n message: intl.formatMessage({ id: 'general.error' }),\n description: intl.formatMessage({ id: 'repairDetails.deniedWarranty.authorizationError' })\n });\n });\n } else {\n handleUpsertWarrantyOption();\n }\n };\n\n const messageType = shippoTrackingFailure ? 'error' : 'info';\n\n let message;\n if (shippoTrackingFailure) {\n message = ;\n } else {\n let warrantyOptionMarkup = warrantyOption && (\n \n - \n \n \n );\n\n message = (\n \n \n {warrantyOptionMarkup}\n \n );\n }\n\n // If status is In Transit\n const inboundTrackingMarkup =\n serviceOrder &&\n serviceOrder.trackingNumber &&\n serviceOrder.status === 2 &&\n getTrackingMarkup(0, serviceOrder.countryCode, serviceOrder.trackingNumber);\n\n // If status is Shipped -> Delivered\n let returnTrackingMarkup =\n serviceOrder &&\n serviceOrder.serviceOrderShipments &&\n serviceOrder.serviceOrderShipments.length > 0 &&\n [5, 6].includes(serviceOrder.status) &&\n getTrackingMarkup(0, serviceOrder.countryCode, serviceOrder.serviceOrderShipments[0].trackingNumber);\n\n let trackingMarkup = (inboundTrackingMarkup || returnTrackingMarkup) && (\n \n \n {inboundTrackingMarkup}\n {returnTrackingMarkup}\n \n \n );\n \n const repairDescription = (\n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n
\n \n \n \n \n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n )\n )\n\n let actions;\n if (shippoTrackingFailure) {\n actions = (\n \n {getPhoneLink()}\n {getEmailLink()}\n \n );\n } else if (serviceOrderStatus === 1 && trackingNumber) {\n // Shipment generated but not yet in transit\n actions = (\n \n handlePrintPaperworkClick()}\n loading={generatingPaperwork}\n >\n \n \n {getProviderLocationMarkup(serviceOrder.countryCode)}\n \n );\n } else if ([2, 5, 6].includes(serviceOrderStatus)) {\n // Shipment in transit to service center or customer\n actions = {trackingMarkup};\n } else if (serviceOrderStatus === 7) {\n // Order is ready for pickup at service center\n actions = getServiceCenterLink();\n } else if (serviceOrderStatus === 9) {\n // Order requires customer input\n actions = (\n \n {getPhoneLink()}\n {getEmailLink()}\n \n );\n } else if (serviceOrderStatus === 10 && ['Repair', 'Recycle'].includes(warrantyOption)) {\n // Order needs payment\n actions = (\n \n {getPhoneLink()}\n {getEmailLink()}\n \n );\n } else if (serviceOrderStatus === 10 && !warrantyOption) {\n // Order is denied warranty but no action selected\n actions = usePaymentMethodV2 ? (\n \n ) : (\n \n );\n }\n\n let description;\n if (shippoTrackingFailure) {\n description = ;\n } else if (serviceOrderStatus === 0) {\n description = (\n \n );\n } else if (serviceOrderStatus === 10) {\n // Order is denied warranty\n if (warrantyOption === 'Repair') {\n // Customer wants tool repaired but needs to provide payment(\n if (usePaymentMethodV2) {\n description = repairWithCreditCardDescription;\n } else {\n description = repairDescription;\n }\n } else if (warrantyOption === 'Return') {\n // Customer wants tool returned\n description = (\n \n );\n } else if (warrantyOption === 'Recycle') {\n // Customer wants tool recycled\n description = (\n \n );\n } else {\n // Tool was denied warranty, customer needs to select preference\n let diagnosesMarkup =\n serviceOrder &&\n serviceOrder.serviceOrderRepairLines &&\n serviceOrder.serviceOrderRepairLines.map((line, index) => {\n return (\n \n \n {line.symptomCode}\n \n \n {line.diagnosisAreaName}\n \n \n );\n });\n\n description = (\n \n {diagnosesMarkup}\n \n
\n \n \n
\n \n \n
\n \n \n
\n {warrantyOptionMarkup}\n
\n \n \n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n <FormattedMessage id='repairDetails.repairDetailsTitle' />\n \n \n \n \n \n
\n \n {progressMarkup()}\n
\n \n \n \n \n \n {orderInfoMarkup}\n \n \n \n \n \n \n \n
\n \n \n
\n \n
\n <FormattedMessage id='repairDetails.orderItemsTitle' />\n \n {orderItemsStatusMarkup}\n \n \n \n \n <FormattedMessage id='orderSummary.contactCustomerExperience' />\n \n \n {getPhoneLink()}\n {getEmailLink()}\n \n \n \n );\n};\n\nexport default RepairDetail;\n","const handleNavigateAway = (location, unsavedChanges, message) => {\n let isRepairProcessPage = location.pathname.startsWith('/repairprocess');\n if (!isRepairProcessPage) {\n return message;\n }\n\n return true;\n};\n\nexport { handleNavigateAway };\n","import { Button, Col, Modal, ModalBody, ModalContent, Row, Text } from '@met/react-components';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nconst ConfirmDeleteModal = ({ hidden, toggle, deleteRepairItem }) => {\n return (\n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n );\n};\n\nConfirmDeleteModal.propTypes = {\n hidden: PropTypes.bool,\n toggle: PropTypes.func,\n handleSubmitClick: PropTypes.func,\n};\n\nexport default ConfirmDeleteModal;\n","import styled from 'styled-components';\nimport { Card, Col, Row, Text } from '@met/react-components';\n\nexport const ImageWrapper = styled.div`\n width: 100%;\n max-width: 100px;\n`;\n\nexport const Image = styled.img`\n max-width: 100%;\n max-height: 100%;\n`;\n\nexport const RepairItemImage = styled(Col)`\n padding: 0;\n`;\n\nexport const RepairItemActions = styled(Col)`\n padding: 0;\n`;\n\nexport const RepairItemAction = styled(Text)`\n margin: 0 1rem;\n`;\n\nexport const PackagesSummaryCard = styled(Card)`\n height: 100%;\n background-color: ${props => props.theme.colors.gray};\n`;\n\nexport const PackagesSummaryRow = styled(Row)`\n height: 100%;\n`;\n\nexport const ShippingInfoSummaryCard = styled(Card)`\n height: 100%;\n`;\n\nexport const RepairItemsRow = styled(Row)`\n width: 100%;\n margin: 1rem 0;\n`;\n\nexport const RepairItemDetail = styled.div`\n margin-bottom: 0.5rem;\n`;\n\nexport const StyledImg = styled.img`\n max-width: 50px;\n`;\n","import { Button, Col, Icon, Row, Text, useToggle } from '@met/react-components';\nimport PropTypes from 'prop-types';\nimport React, { Fragment, useState } from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { useHistory } from 'react-router';\nimport ConfirmDeleteModal from './ConfirmDeleteModal';\nimport { useRepairProcessContext } from '../RepairProcessContext';\nimport {\n Image,\n ImageWrapper,\n RepairItemAction,\n RepairItemActions,\n RepairItemImage,\n} from './styled';\n\nconst RepairItemsList = ({ showButtons, handleContinueClick }) => {\n const history = useHistory();\n\n const { repairItems, setRepairItems } = useRepairProcessContext();\n\n const [showConfirmDeleteModal, toggleConfirmDeleteModal] = useToggle(false);\n const [deleteGuid, setDeleteGuid] = useState(null);\n\n const handleEditClick = (sku, guid) => {\n history.push(`/repairprocess/productdetail/${sku}?g=${guid}`);\n };\n\n const deleteRepairItem = () => {\n toggleConfirmDeleteModal();\n\n setRepairItems(repairItems.filter((r, i) => r.guid !== deleteGuid));\n\n setDeleteGuid(null);\n };\n\n const handleOpenDeleteModal = (guid) => {\n toggleConfirmDeleteModal();\n\n setDeleteGuid(guid);\n };\n\n const repairItemsTitle = (\n \n \n \n \n
\n \n
\n );\n\n const repairItemsList =\n repairItems &&\n repairItems.map((repairItem, index) => {\n return (\n \n \n \n \n \n \n \n {repairItem.sku}\n {repairItem.description}\n \n \n \n handleEditClick(repairItem.sku, repairItem.guid)}\n />\n \n \n handleOpenDeleteModal(repairItem.guid)}\n />\n \n \n
\n );\n });\n\n const noRepairItemsMarkup =\n !repairItems ||\n (repairItems.length === 0 && (\n \n \n \n \n \n \n
\n ));\n\n const buttonsMarkup = showButtons && (\n \n \n handleContinueClick()}\n >\n \n \n \n
\n );\n\n const repairItemsMarkup = (\n \n {repairItemsTitle}\n {repairItemsList}\n {noRepairItemsMarkup}\n {buttonsMarkup}\n \n \n );\n\n return {repairItemsMarkup};\n};\n\nRepairItemsList.propTypes = {\n handleContinueClick: PropTypes.func,\n showButtons: PropTypes.bool,\n};\n\nexport default RepairItemsList;\n","import { Row } from '@met/react-components';\nimport styled from 'styled-components';\n\nexport const AddAnotherRow = styled(Row)`\n margin-top: 2rem !important;\n`;\n","import React from 'react';\nimport { Card, Divider, Typography } from 'antd';\nimport { WarningOutlined } from '@ant-design/icons';\nimport { FormattedMessage } from 'react-intl';\n\nconst UsShippingRestrictionWarning = () => {\n const { Text } = Typography;\n const { Meta } = Card;\n\n const cardTitle = (\n }\n title={}\n />\n );\n\n return (\n \n {cardTitle}\n \n \n \n \n \n );\n};\n\nexport default UsShippingRestrictionWarning;\n","import React from 'react';\nimport { Card, Divider, Typography } from 'antd';\nimport { WarningOutlined } from '@ant-design/icons';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nconst CaShippingRestrictionWarning = () => {\n const intl = useIntl();\n\n const { Text } = Typography;\n const { Meta } = Card;\n\n const cardTitle = (\n }\n title={}\n />\n );\n\n return (\n \n {cardTitle}\n \n \n \n \n \n );\n};\n\nexport default CaShippingRestrictionWarning;\n","import { Form } from 'antd';\nimport styled from 'styled-components';\n\nexport const ShippingInstructionContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-around;\n`;\n\nexport const ShippingInstructionAcknowledgementForm = styled(Form)`\n display: flex;\n justify-content: center;\n`\n","import { Image, Modal, Button, Checkbox, Form } from 'antd';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useHistory } from 'react-router';\nimport { ShippingInstructionAcknowledgementForm, ShippingInstructionContainer } from './styled';\n\nconst ShippingInstructionModal = ({ hidden, toggle }) => {\n const intl = useIntl();\n const history = useHistory();\n const [form] = Form.useForm();\n\n const submitAndContinue = () => {\n history.push('/repairprocess/shipping');\n }\n\n return (\n \n {intl.formatMessage({ id: 'repairProcess.shippingInstructions.cancelButton' })}\n ,\n \n ]}\n >\n \n \n \n \n \n (value || undefined), \n type:'boolean', \n message: intl.formatMessage({ id: 'repairProcess.shippingInstructions.acknowledgementRequiredMessage'})\n }]}\n >\n {intl.formatMessage({ id: 'repairProcess.shippingInstructions.acknowledgementCheckboxLabel'})}\n \n \n \n );\n};\n\nShippingInstructionModal.propTypes = {\n hidden: PropTypes.bool,\n toggle: PropTypes.func,\n};\n\nexport default ShippingInstructionModal;\n","import AddAnother from './AddAnother';\n\nexport default AddAnother;\n","import { Button, Card, CardBody, Col, Grid, Row, useToggle } from '@met/react-components';\nimport React, { Fragment } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { Prompt, useHistory } from 'react-router';\nimport { toast } from 'react-toastify';\nimport { MoreInformation, ProductSearchModal } from '../../../components';\nimport { useLocale } from '../../../hooks';\nimport { downloadUrl } from '../../../helpers/downloadBlob';\nimport { handleNavigateAway } from '../../../helpers/navigation';\nimport { docsActions } from '../../../store';\nimport RepairItemsList from '../components/RepairItemsList';\nimport { useRepairProcessContext } from '../RepairProcessContext';\nimport { AddAnotherRow } from './styled';\nimport UsShippingRestrictionWarning from '../components/UsShippingRestrictionWarning';\nimport CaShippingRestrictionWarning from '../components/CaShippingRestrictionWarning';\nimport { ShippingInstructionModal } from '../../../components/ShippingInstructionModal';\nimport Enumerable from 'linq';\n\nexport const AddAnother = () => {\n const history = useHistory();\n const intl = useIntl();\n const dispatch = useDispatch();\n\n const { isEnLocale } = useLocale();\n\n const { repairItems } = useRepairProcessContext();\n\n const [showSearchModal, toggleSearchModal] = useToggle(false);\n const [showProductShippingInstruction, toggleShowProductShippingInstruction] = useToggle(false);\n\n const isUsLocale = isEnLocale();\n\n const handleContinueClick = () => {\n if(Enumerable.from(repairItems).any(x => x.shippingInstructions.length > 0)) {\n toggleShowProductShippingInstruction();\n } else {\n history.push('/repairprocess/shipping');\n }\n };\n\n const handleDownloadTermsConditions = () => {\n dispatch(docsActions.downloadTermsAndConditions())\n .then(response => {\n downloadUrl('termsconditions.pdf', response.data.data);\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'home.authenticatedContent.termsAndConditionsDownloadFailed' }), {\n autoClose: false,\n });\n });\n };\n\n const restrictionMarkup = isUsLocale ? (\n \n \n \n ) : (\n \n \n \n );\n\n return (\n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {restrictionMarkup}\n \n
\n \n \n \n handleNavigateAway(\n location,\n repairItems.length > 0,\n intl.formatMessage({ id: 'general.unsavedChangesWarning' })\n )\n }\n />\n \n );\n};\n\nexport default AddAnother;\n","import { Button, Col, Collapsible, Icon, ListGroup, ListGroupItem, Row, Text } from '@met/react-components';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { toast } from 'react-toastify';\nimport { proofOfPurchaseActions } from '../../../store';\nimport { Image, ImageWrapper, RepairItemDetail, RepairItemsRow } from './styled';\n\nconst RepairItemsSummary = ({ repairItems, handleEditClick, handleOpenDeleteModal, handleViewDetailsClick }) => {\n const intl = useIntl();\n const dispatch = useDispatch();\n\n const downloadProofOfPurchase = hashedServiceOrderId => {\n dispatch(proofOfPurchaseActions.downloadProofOfPurchase(hashedServiceOrderId))\n .then(d => {\n window.open(d.data.data.url);\n })\n .catch(err => {\n alert(err.message);\n toast.error(intl.formatMessage({ id: 'dashboard.exportErrorMessage' }), {\n autoClose: false,\n });\n });\n };\n\n let getProofOfPurchaseIncludedLine = repairItem => {\n if (repairItem.proofOfPurchase) return {repairItem.proofOfPurchase.name};\n if (repairItem.id)\n return (\n \n );\n return ;\n };\n\n const repairItemsList =\n repairItems &&\n repairItems.map((repairItem, index) => {\n let editMarkup = handleEditClick && (\n \n handleEditClick(repairItem.guid)}\n className='mr-3 hidden-xs visible-sm'\n />\n \n
\n );\n\n let deleteMarkup = handleOpenDeleteModal && (\n \n handleOpenDeleteModal(repairItem.guid)}\n className='hidden-xs visible-sm'\n />\n \n
\n );\n\n let detailsMarkup = handleViewDetailsClick && (\n \n \n
\n );\n\n let buttonMarkup = (\n \n {editMarkup}\n {deleteMarkup}\n {detailsMarkup}\n \n );\n\n let collapsibleLabel = (\n \n \n \n \n \n \n \n \n {repairItem.sku}\n \n \n {repairItem.description}\n \n \n \n \n \n \n \n {repairItem.serialNumber\n ? repairItem.serialNumber\n : intl.formatMessage({ id: 'repairProcess.repairItemsSummary.serialNumberNotProvided' })}\n \n \n {buttonMarkup}\n \n );\n\n let batteryIncludedMarkup = repairItem.batteryIncluded !== '' && (\n \n \n \n \n {repairItem.batteryIncluded}\n \n );\n\n let proofOfPurchaseMarkup = repairItem.proofOfPurchaseIncluded ? (\n \n \n \n ) : repairItem.proofOfPurchaseBlob ? (\n getProofOfPurchaseIncludedLine(repairItem)\n ) : (\n \n \n \n );\n\n let problemsMarkup =\n repairItem.selectedProblemIds &&\n repairItem.selectedProblemIds\n .map((id, index) => {\n return intl.formatMessage({ id: `productProblems.${id}` });\n })\n .join(', ');\n\n let inclusionsMarkup =\n repairItem.selectedIncludedIds &&\n repairItem.selectedIncludedIds\n .map((id, index) => {\n return intl.formatMessage({ id: `productInclusions.${id}` });\n })\n .join(', ');\n\n return (\n \n \n \n \n \n \n \n {repairItem.serialNumber\n ? repairItem.serialNumber\n : intl.formatMessage({ id: 'confirmation.serialNumberNotProvided' })}\n \n \n \n \n \n \n {repairItem.tagNumber}\n \n \n \n \n \n {proofOfPurchaseMarkup}\n \n \n \n \n \n {problemsMarkup}\n \n \n \n \n \n {inclusionsMarkup}\n \n {batteryIncludedMarkup}\n \n \n );\n });\n\n const noRepairItemsMarkup =\n !repairItems ||\n (repairItems.length === 0 && (\n \n \n \n \n \n \n \n
\n \n ));\n\n return (\n \n {repairItemsList}\n {noRepairItemsMarkup}\n \n );\n};\n\nRepairItemsSummary.propTypes = {\n repairItems: PropTypes.array,\n handleEditClick: PropTypes.func,\n handleOpenDeleteModal: PropTypes.func,\n handleViewDetailsClick: PropTypes.func,\n};\n\nexport default RepairItemsSummary;\n","import { Button, CardBody, Col, Link, Row, Text } from '@met/react-components';\nimport PropTypes from 'prop-types';\nimport React, { Fragment } from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { formatPhoneNumber } from '../../../helpers/formatter';\n\nimport { ShippingInfoSummaryCard } from './styled';\n\nconst ShippingInfoSummary = ({\n shippingAddress,\n name,\n email,\n accountNumber,\n phoneNumber,\n preferredContactMethod,\n toggleUserMetadataModal,\n editable,\n}) => {\n const shippingInfoButtons = editable && (\n \n \n \n \n \n \n \n \n );\n\n const accountInfoButtons = editable && (\n \n toggleUserMetadataModal()} className='hidden-xs visible-sm mt-2'>\n \n \n \n \n );\n\n return (\n \n \n \n \n \n \n
\n \n {shippingAddress.name}\n \n \n {shippingAddress.addressLine1}\n \n \n {shippingAddress.city}, {shippingAddress.state} {shippingAddress.postalCode}\n \n {shippingInfoButtons}\n \n \n \n \n
\n \n {email}\n \n {accountNumber && (\n \n {accountNumber}\n \n )}\n \n {' '}\n {formatPhoneNumber(phoneNumber)}\n \n \n {' '}\n {preferredContactMethod}\n \n \n {name}\n \n {accountInfoButtons}\n \n
\n \n \n );\n};\n\nShippingInfoSummary.propTypes = {\n shippingAddress: PropTypes.object,\n name: PropTypes.string,\n phoneNumber: PropTypes.string,\n accountNumber: PropTypes.string,\n email: PropTypes.string,\n preferredContactMethod: PropTypes.string,\n toggleUserMetadataModal: PropTypes.func,\n editable: PropTypes.bool,\n};\n\nexport default ShippingInfoSummary;\n","import { Button, Col, Modal, ModalBody, ModalContent, ModalHeader, Row, Text } from '@met/react-components';\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport PropTypes from 'prop-types';\nimport { StyledImg } from '../../components/styled';\n\nconst BatteryInstructionsModal = ({ hidden, toggle, handleSubmitClick, loading }) => {\n return (\n \n \n \n \n \n \n \n \n
\n \n \n
\n \n \n \n
\n \n \n \n \n
\n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n
\n \n - \n \n
\n - \n \n
\n - \n \n
\n
\n \n \n \n \n \n
\n \n \n \n );\n};\n\nBatteryInstructionsModal.propTypes = {\n hidden: PropTypes.bool,\n toggle: PropTypes.func,\n handleSubmitClick: PropTypes.func,\n};\n\nexport default BatteryInstructionsModal;\n","import Confirmation from './Confirmation';\n\nexport default Confirmation;\n","import { Button, Col, Grid, Row, useToggle } from '@met/react-components';\nimport Enumerable from 'linq';\nimport React, { Fragment, useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { Prompt, useHistory } from 'react-router';\nimport { toast } from 'react-toastify';\nimport { ProductSearchModal } from '../../../components/ProductSearchModal';\nimport { handleNavigateAway } from '../../../helpers/navigation';\nimport { useUser } from '../../../hooks';\nimport { serviceOrdersActions } from '../../../store';\nimport ConfirmDeleteModal from '../components/ConfirmDeleteModal';\nimport PackagesSummary from '../components/PackagesSummary';\nimport RepairItemsSummary from '../components/RepairItemsSummary';\nimport ShippingInfoSummary from '../components/ShippingInfoSummary';\nimport { useRepairProcessContext } from '../RepairProcessContext';\nimport BatteryInstructionsModal from './components/BatteryInstructionsModal';\nimport { useAppInsightsContext } from '@microsoft/applicationinsights-react-js';\nimport { UserMetadataModal } from '../../../components';\n\nconst Confirmation = () => {\n const dispatch = useDispatch();\n const history = useHistory();\n const intl = useIntl();\n const appInsights = useAppInsightsContext();\n\n const { user, email, name, phoneNumber, preferredContactMethod, accountNumber } = useUser();\n\n const { submittingServiceOrder, repairItems, setRepairItems, getServiceOrder, shipping } = useRepairProcessContext();\n\n const [showSearchModal, toggleSearchModal] = useToggle(false);\n const [showBatteryInstructionsModal, toggleBatteryInstructionsModal] = useToggle(false);\n const [showConfirmDeleteModal, toggleConfirmDeleteModal] = useToggle(false);\n const [showUserMetadataModal, toggleUserMetadataModal] = useToggle(false);\n\n const [deleteGuid, setDeleteGuid] = useState(null);\n\n const handleEditRepairItemClick = guid => {\n history.push(`/repairprocess/productdetail/?g=${guid}`);\n };\n\n const deleteRepairItem = () => {\n toggleConfirmDeleteModal();\n setRepairItems(repairItems.filter((r, i) => r.guid !== deleteGuid));\n setDeleteGuid(null);\n };\n\n const handleOpenDeleteModal = guid => {\n toggleConfirmDeleteModal();\n setDeleteGuid(guid);\n };\n\n useEffect(() => {\n if (repairItems.length === 0) {\n history.replace('/repairprocess/addanother');\n }\n }, []);\n\n const handleSubmitClick = () => {\n let batteryIncluded =\n Enumerable.from(repairItems).firstOrDefault(x => x.batteryIncluded !== '') ||\n Enumerable.from(repairItems).firstOrDefault(x => x.isBattery);\n\n if (batteryIncluded) {\n toggleBatteryInstructionsModal();\n } else {\n submit();\n }\n };\n\n const submit = () => {\n let serviceOrderData = getServiceOrder();\n\n appInsights.trackEvent({\n name: 'createServiceOrder',\n properties: {\n serviceOrderData,\n user,\n },\n });\n\n dispatch(serviceOrdersActions.submitServiceOrder(serviceOrderData))\n .then(response => {\n toast.success(intl.formatMessage({ id: 'confirmation.submitted' }));\n\n history.push(`/repairprocess/ordersummary/${response.data.data}`);\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'confirmation.submittedError' }));\n });\n };\n\n const shippingSummaryMarkup = shipping && shipping.shippingAddress && (\n \n \n \n );\n\n const repairItemsMarkup = repairItems && (\n \n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n );\n\n return (\n \n \n \n \n \n \n
\n \n
\n {shippingSummaryMarkup}
\n {repairItemsMarkup}\n \n \n \n history.push('/repairprocess/shipping')}\n loading={submittingServiceOrder}\n className='mr-2'\n >\n \n \n handleSubmitClick()}\n loading={submittingServiceOrder}\n data-test-id='confirmationPageSubmitButton'\n disabled={repairItems.length < 1}\n >\n \n \n
\n \n
\n \n \n \n \n handleNavigateAway(\n location,\n repairItems.length > 0,\n intl.formatMessage({ id: 'general.unsavedChangesWarning' })\n )\n }\n />\n \n \n \n );\n};\n\nexport default Confirmation;\n","import { Alert, Button, notification, Space } from 'antd';\nimport React from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { downloadBlob } from '../../../../helpers/downloadBlob';\nimport { useContact, useServiceOrders, useShipping } from '../../../../hooks';\n\nconst OrderStatus = ({ serviceOrder, shippoTrackingFailure }) => {\n const intl = useIntl();\n const dispatch = useDispatch();\n const { generatingPaperwork, getServiceOrdersPdf } = useServiceOrders();\n const { getPhoneLink, getEmailLink } = useContact();\n const { getProviderLocationMarkup } = useShipping();\n\n const handlePrintPaperworkClick = () => {\n notification.success({\n message: intl.formatMessage({ id: 'orderDetails.pdfDownloading' }),\n description: intl.formatMessage({ id: 'orderDetails.pdfDownloadingDetail' }),\n });\n\n dispatch(getServiceOrdersPdf(serviceOrder.serviceOrderGroupId))\n .then(response => {\n downloadBlob(`${serviceOrder.serviceOrderGroupId}.pdf`, response.data);\n })\n .catch(() => {\n notification.error({\n message: intl.formatMessage({ id: 'orderDetails.pdfDownloadError' }),\n description: intl.formatMessage({ id: 'orderDetails.pdfDownloadErrorDetail' }),\n });\n })\n .finally(() => {\n notification.destroy();\n });\n };\n\n const messageType = shippoTrackingFailure ? 'error' : 'info';\n\n let message;\n if (shippoTrackingFailure) {\n message = ;\n } else if (serviceOrder.trackingNumber) {\n message = ;\n } else {\n message = ;\n }\n\n let description;\n if (shippoTrackingFailure) {\n description = ;\n } else if (serviceOrder.trackingNumber) {\n description = ;\n } else {\n description = ;\n }\n\n let actions;\n if (shippoTrackingFailure) {\n actions = (\n \n {getPhoneLink()}\n {getEmailLink()}\n \n );\n } else if (serviceOrder.trackingNumber) {\n actions = (\n \n \n {getProviderLocationMarkup(serviceOrder.countryCode)}\n \n );\n }\n\n const descriptionMarkup = (\n \n {description}\n {actions}\n \n );\n\n return ;\n};\n\nexport default OrderStatus;\n","import { Alert, Button, Space } from 'antd';\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { useHistory } from 'react-router-dom';\n\nconst RecycleOrderStatus = ({ serviceOrderId, orderProcessed, callToRecycleFailure }) => {\n const history = useHistory();\n\n let messageType = callToRecycleFailure ? 'error' : 'info';\n\n let message;\n if (callToRecycleFailure) {\n message = ;\n } else if (orderProcessed) {\n message = ;\n } else {\n message = ;\n }\n\n let description;\n if (callToRecycleFailure) {\n description = ;\n } else if (orderProcessed) {\n description = ;\n } else {\n description = ;\n }\n\n let actions;\n if (!callToRecycleFailure) {\n actions = (\n \n );\n }\n\n let descriptionMarkup = (\n \n {description}\n {actions}\n \n );\n\n return ;\n};\n\nexport default RecycleOrderStatus;\n","import { Alert, Button, Card, Col, notification, Row, Space, Typography } from 'antd';\nimport React, { Fragment, useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { useHistory, useLocation } from 'react-router';\nimport { AccountInfo, CollapsibleOrderList, NotFound, PageLoader, ShippingInfo } from '../../../components';\nimport { useContact, useOrderStatus, useRecycling, useServiceOrders, useUser } from '../../../hooks';\nimport { useRepairProcessContext } from '../RepairProcessContext';\nimport { OrderStatus, RecycleOrderStatus } from './components';\n\nconst { Title } = Typography;\n\nconst OrderSummary = () => {\n const history = useHistory();\n const dispatch = useDispatch();\n const location = useLocation();\n const intl = useIntl();\n const { serviceOrdersByGroup, loadingServiceOrdersByGroup, getServiceOrdersByGroup } = useServiceOrders();\n const { setRepairItems: setContextRepairItems, setShipping } = useRepairProcessContext();\n const { getEmailLink, getPhoneLink } = useContact();\n const { name, phoneNumber, email, accountNumber } = useUser();\n const {\n shippoTrackingFailure,\n callToRecycleFailure,\n startListeningForShippoTracking,\n stopListeningForShippoTracking,\n trackingNumber,\n setTrackingNumber,\n } = useOrderStatus();\n const { serviceOrderRecycling, getServiceOrderRecycling } = useRecycling();\n\n const [notFound, setNotFound] = useState(false);\n const [groupId, setGroupId] = useState(null);\n const [serviceOrderInfo, setServiceOrderInfo] = useState(null);\n const [serviceOrderIsCanadian, setServiceOrderIsCanadian] = useState(false);\n const [repairItems, setRepairItems] = useState([]);\n const [otherItems, setOtherItems] = useState([]);\n\n useEffect(() => {\n return () => {\n stopTracking();\n };\n }, []);\n\n useEffect(() => {\n let pathParts = location.pathname.split('/');\n\n if (pathParts.length < 4) {\n history.replace('/dashboard');\n } else {\n setGroupId(pathParts[3]);\n\n dispatch(getServiceOrdersByGroup(pathParts[3])).catch(payload => {\n stopListeningForShippoTracking();\n\n notification.error({\n message: intl.formatMessage({ id: 'orderSummary.getServiceOrdersError' }),\n description: intl.formatMessage({ id: 'orderSummary.getServiceOrdersErrorDetail' }),\n duration: null,\n });\n\n if ([400, 403, 404].includes(payload.response.status)) {\n setNotFound(true);\n }\n });\n }\n }, [location.pathname]);\n\n useEffect(() => {\n if (serviceOrdersByGroup && serviceOrdersByGroup.length > 0) {\n let serviceOrder = serviceOrdersByGroup[0];\n\n setServiceOrderInfo(serviceOrder);\n setServiceOrderIsCanadian(['ca', 'can'].includes(serviceOrder.countryCode.toLowerCase()));\n setRepairItems(serviceOrdersByGroup.filter(x => !x.serviceOrderRecyclingId));\n setOtherItems(serviceOrdersByGroup.filter(x => x.serviceOrderRecyclingId));\n }\n }, [serviceOrdersByGroup]);\n\n useEffect(() => {\n if (repairItems && repairItems.length > 0) {\n let serviceOrder = repairItems[0];\n\n setTrackingNumber(serviceOrder.trackingNumber);\n\n if (!serviceOrder.trackingNumber && serviceOrder.shippoStatus !== 5) {\n // If tracking is not found and Shippo didn't fail, listen for tracking\n startTracking(groupId);\n }\n }\n }, [repairItems]);\n\n useEffect(() => {\n if (otherItems && otherItems.length > 0) {\n let serviceOrder = otherItems[0];\n\n if (serviceOrder.serviceOrderRecyclingId) {\n dispatch(getServiceOrderRecycling(serviceOrder.serviceOrderRecyclingId));\n }\n }\n }, [otherItems]);\n\n useEffect(() => {\n if (shippoTrackingFailure) {\n stopTracking();\n\n notification.error({\n message: intl.formatMessage({ id: 'orderDetails.trackingInfoError' }),\n description: intl.formatMessage({ id: 'orderDetails.trackingInfoErrorDetail' }),\n duration: null,\n });\n }\n }, [shippoTrackingFailure]);\n\n useEffect(() => {\n if (trackingNumber) {\n stopTracking();\n }\n }, [trackingNumber]);\n\n const startTracking = groupId => {\n startListeningForShippoTracking(groupId, trackingNumber => {\n for (let i = 0; i < repairItems.length; i++) {\n repairItems[i].trackingNumber = trackingNumber;\n }\n });\n\n notification.destroy();\n\n notification.info({\n message: intl.formatMessage({ id: 'general.processing' }),\n description: intl.formatMessage({ id: 'orderDetails.processingDetail' }),\n duration: null,\n });\n };\n\n const stopTracking = () => {\n notification.destroy();\n\n stopListeningForShippoTracking();\n };\n\n const handleNewOrderClick = () => {\n setContextRepairItems([]);\n setShipping({});\n\n history.push('/repairprocess/addanother');\n };\n\n if (notFound) {\n return ;\n }\n\n if (loadingServiceOrdersByGroup || !serviceOrderInfo) {\n return ;\n }\n\n const repairItemsMarkup = repairItems && repairItems.length > 0 && (\n \n \n \n \n <FormattedMessage id='orderSummary.repairItemsLabel' values={{ count: repairItems.length }} />\n \n \n \n \n \n
\n \n \n \n \n
\n \n );\n\n const otherItemsMarkup = serviceOrderRecycling && otherItems && otherItems.length > 0 && (\n \n \n \n \n <FormattedMessage id='orderSummary.otherItemsLabel' values={{ count: otherItems.length }} />\n \n \n \n 1}\n callToRecycleFailure={callToRecycleFailure}\n />\n \n
\n \n \n \n \n
\n \n );\n\n return (\n \n \n \n \n <FormattedMessage id='orderSummary.title' />\n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n
\n \n \n
\n {repairItemsMarkup}\n {otherItemsMarkup}\n \n \n <FormattedMessage id='orderSummary.contactCustomerExperience' />\n \n \n {getPhoneLink()}\n {getEmailLink()}\n \n \n \n );\n};\n\nexport default OrderSummary;\n","import OrderSummary from './OrderSummary';\n\nexport default OrderSummary;\n","import moment from 'moment';\n\n// NULL = Unknown\n// true = Is covered based on information provided\n// false = Is not covered based on information provided\nconst calculateWarrantyEligibility = (manufactureDate, purchaseDate, warrantyPeriod) => {\n const today = new moment().format('MM/DD/YYYY');\n\n // If no warranty period given we can't do anything\n if (!warrantyPeriod) {\n return null;\n }\n\n // If given manufacture date, try using that first\n if (manufactureDate && !purchaseDate) {\n let manufactureDateMoment = moment(manufactureDate).format('MM/DD/YYYY');\n let lastDayOfWarranty = moment(manufactureDateMoment).add(warrantyPeriod, 'years');\n\n return moment(today).isBefore(lastDayOfWarranty);\n }\n // Otherwise, try to use purchase date\n else if (purchaseDate && !manufactureDate) {\n let purchaseDateMoment = moment(purchaseDate).format('MM/DD/YYYY');\n let lastDayOfWarranty = moment(purchaseDateMoment).add(warrantyPeriod, 'years');\n\n return moment(today).isBefore(lastDayOfWarranty);\n }\n //If both exist and purchaseDate was earlier than manufactured date use purchaseDate\n else if (manufactureDate && purchaseDate) {\n let manufactureDateMoment = moment(manufactureDate).format('MM/DD/YYYY');\n let lastDayOfManufactureWarranty = moment(manufactureDateMoment).add(warrantyPeriod, 'years');\n\n let purchaseDateMoment = moment(purchaseDate).format('MM/DD/YYYY');\n let lastDayOfPurchaseWarranty = moment(purchaseDateMoment).add(warrantyPeriod, 'years');\n\n if (lastDayOfManufactureWarranty <= lastDayOfPurchaseWarranty) {\n return moment(today).isBefore(lastDayOfPurchaseWarranty);\n } else {\n return moment(today).isBefore(lastDayOfManufactureWarranty);\n }\n }\n // Without manufacture or purchase date, we can't make determination\n else {\n return null;\n }\n};\n\nexport { calculateWarrantyEligibility };\n","import Enumerable from 'linq';\nimport React, { createContext, useContext, useEffect, useState } from 'react';\nimport { useSelector } from 'react-redux';\nimport { generateGuid } from '../../../helpers/guid';\nimport { calculateWarrantyEligibility } from '../../../helpers/calculateWarrantyEligibility';\n\nconst RepairItemsContext = createContext({\n guid: '',\n sku: '',\n setSku: () => {},\n loadingProduct: false,\n product: {},\n isServiceEligible: null,\n loadingBatteries: false,\n batteries: [],\n uploadingProofOfPurchase: false,\n serialNumber: '',\n setSerialNumber: () => {},\n serialNumberInvalid: false,\n tagNumber: '',\n setTagNumber: () => {},\n serialNumberUnreadable: false,\n setSerialNumberUnreadable: () => {},\n manufactureDate: null,\n setManufactureDate: () => {},\n purchaseDate: null,\n setPurchaseDate: () => {},\n underWarranty: null,\n setUnderWarranty: () => {},\n underWarrantyInvalid: false,\n proofOfPurchase: null,\n setProofOfPurchase: () => {},\n proofOfPurchaseToBeUploaded: false,\n setProofOfPurchaseToBeUploaded: () => {},\n proofOfPurchaseIncluded: false,\n setProofOfPurchaseIncluded: () => {},\n proofOfPurchaseNotIncluded: false,\n setProofOfPurchaseNotIncluded: () => {},\n proofOfPurchaseInvalid: false,\n setProofOfPurchaseInvalid: () => {},\n proofOfPurchaseBlob: '',\n setProofOfPurchaseBlob: () => {},\n problems: [],\n setProblems: () => {},\n selectedProblemIds: [],\n setSelectedProblemIds: () => {},\n hasOtherProblem: false,\n setHasOtherProblem: () => {},\n otherProblem: '',\n setOtherProblem: () => {},\n otherProblemInvalid: false,\n setOtherProblemInvalid: () => {},\n problemsInvalid: false,\n included: [],\n setIncluded: () => {},\n selectedIncludedIds: [],\n setSelectedIncludedIds: () => {},\n hasOtherIncluded: false,\n setHasOtherIncluded: () => {},\n otherIncluded: '',\n setOtherIncluded: () => {},\n otherIncludedInvalid: false,\n setOtherIncludedInvalid: () => {},\n hasBatteryIncluded: false,\n setHasBatteryIncluded: () => {},\n batteryIncluded: false,\n setBatteryIncluded: () => {},\n batteryIncludedInvalid: false,\n setBatteryIncludedInvalid: () => {},\n includedInvalid: false,\n validate: () => {},\n getRepairItem: () => {},\n setRepairItem: () => {},\n userTriedSubmit: false,\n setUserTriedSubmit: () => {},\n shouldScroll: false,\n setShouldScroll: () => {},\n unsavedChanges: false,\n setUnsavedChanges: () => {},\n productBatteryDetails: {},\n warrantyEvaluation: null,\n});\n\nconst useRepairItemsContext = () => useContext(RepairItemsContext);\n\nconst RepairItemsProvider = ({ children }) => {\n const proofOfPurchaseIncludedValue = 'Proof of Purchase';\n const oneOrMoreBatteriesValue = 'One or More Batteries';\n\n const loadingProduct = useSelector(state => state.products.getProduct.isLoading);\n const product = useSelector(state => state.products.getProduct.product);\n const isServiceEligible = useSelector(state => state.products.getProduct.isServiceEligible);\n const loadingBatteries = useSelector(state => state.batteries.getBatteries.isLoading);\n const batteries = useSelector(state => state.batteries.getBatteries.batteries);\n const productBatteryDetails = useSelector(state => state.batteries.selectedBattery.battery);\n const uploadingProofOfPurchase = useSelector(state => state.proofOfPurchase.uploadProofOfPurchase.isLoading);\n\n const [guid, setGuid] = useState('');\n const [sku, setSku] = useState('');\n const [serialNumber, setSerialNumber] = useState('');\n const [serialNumberInvalid, setSerialNumberInvalid] = useState(false);\n const [serialNumberUnreadable, setSerialNumberUnreadable] = useState(false);\n const [manufactureDate, setManufactureDate] = useState(null);\n const [purchaseDate, setPurchaseDate] = useState(null);\n const [tagNumber, setTagNumber] = useState('');\n const [proofOfPurchase, setProofOfPurchase] = useState(null);\n const [proofOfPurchaseToBeUploaded, setProofOfPurchaseToBeUploaded] = useState(false);\n const [proofOfPurchaseIncluded, setProofOfPurchaseIncluded] = useState(false);\n const [proofOfPurchaseNotIncluded, setProofOfPurchaseNotIncluded] = useState(false);\n const [proofOfPurchaseInvalid, setProofOfPurchaseInvalid] = useState(false);\n const [proofOfPurchaseBlob, setProofOfPurchaseBlob] = useState('');\n\n const [problems, setProblems] = useState([]);\n const [selectedProblemIds, setSelectedProblemIds] = useState([]);\n const [hasOtherProblem, setHasOtherProblem] = useState(false);\n const [isRecycled, setIsRecycled] = useState(false);\n const [otherProblem, setOtherProblem] = useState('');\n const [otherProblemInvalid, setOtherProblemInvalid] = useState(false);\n const [problemsInvalid, setProblemsInvalid] = useState(false);\n const [included, setIncluded] = useState([]);\n const [selectedIncludedIds, setSelectedIncludedIds] = useState([]);\n const [hasOtherIncluded, setHasOtherIncluded] = useState(false);\n const [otherIncluded, setOtherIncluded] = useState('');\n const [otherIncludedInvalid, setOtherIncludedInvalid] = useState(false);\n const [hasBatteryIncluded, setHasBatteryIncluded] = useState(false);\n const [batteryIncluded, setBatteryIncluded] = useState('');\n const [includedInvalid, setIncludedInvalid] = useState(false);\n const [userTriedSubmit, setUserTriedSubmit] = useState(false);\n const [shouldScroll, setShouldScroll] = useState(false);\n const [batteryIncludedInvalid, setBatteryIncludedInvalid] = useState(false);\n const [unsavedChanges, setUnsavedChanges] = useState(false);\n const [warrantyEvaluation, setWarrantyEvaluation] = useState(null);\n\n useEffect(() => {\n if (userTriedSubmit) setSerialNumberInvalid(false);\n }, [serialNumber]);\n\n useEffect(() => {\n if (serialNumberUnreadable) {\n setSerialNumber('');\n setSerialNumberInvalid(false);\n }\n }, [serialNumberUnreadable]);\n\n useEffect(() => {\n if (proofOfPurchase && proofOfPurchase.name) {\n setProofOfPurchaseInvalid(false);\n }\n }, [proofOfPurchase]);\n\n useEffect(() => {\n if (proofOfPurchaseBlob !== '') {\n setProofOfPurchaseInvalid(false);\n }\n }, [proofOfPurchaseBlob]);\n\n useEffect(() => {\n if (proofOfPurchaseToBeUploaded) {\n setProofOfPurchaseInvalid(false);\n setProofOfPurchaseIncluded(false);\n setProofOfPurchaseNotIncluded(false);\n }\n }, [proofOfPurchaseToBeUploaded]);\n\n useEffect(() => {\n if (proofOfPurchaseIncluded) {\n setProofOfPurchaseInvalid(false);\n setProofOfPurchaseToBeUploaded(false);\n setProofOfPurchaseNotIncluded(false);\n }\n }, [proofOfPurchaseIncluded]);\n\n useEffect(() => {\n if (proofOfPurchaseNotIncluded) {\n setProofOfPurchaseInvalid(false);\n setProofOfPurchaseToBeUploaded(false);\n setProofOfPurchaseIncluded(false);\n }\n }, [proofOfPurchaseNotIncluded]);\n\n useEffect(() => {\n setProblemsInvalid(false);\n }, [problems]);\n\n useEffect(() => {\n if (userTriedSubmit && hasOtherProblem) {\n setOtherProblemInvalid(false);\n }\n }, [hasOtherProblem, otherProblem]);\n\n useEffect(() => {\n setIncludedInvalid(false);\n }, [included]);\n\n useEffect(() => {\n if (userTriedSubmit && hasBatteryIncluded) {\n setBatteryIncludedInvalid(false);\n }\n }, [hasBatteryIncluded, batteryIncluded]);\n\n useEffect(() => {\n if (userTriedSubmit && hasOtherIncluded) {\n setOtherIncludedInvalid(false);\n }\n }, [hasOtherIncluded, otherIncluded]);\n\n useEffect(() => {\n if (product && !loadingProduct) {\n setWarrantyEvaluation(calculateWarrantyEligibility(manufactureDate, purchaseDate, product.warrantyPeriod));\n }\n }, [manufactureDate, purchaseDate, product]);\n\n const validate = () => {\n let isValid = true;\n\n if (problems.length === 0 && otherProblem === '') {\n setProblemsInvalid(true);\n isValid = false;\n }\n if (hasOtherProblem && otherProblem === '') {\n setOtherProblemInvalid(true);\n isValid = false;\n }\n if (hasOtherIncluded && otherIncluded === '') {\n setOtherIncludedInvalid(true);\n isValid = false;\n }\n if (hasBatteryIncluded && batteryIncluded === '') {\n setBatteryIncludedInvalid(true);\n isValid = false;\n }\n\n return isValid;\n };\n\n const getRepairItem = () => {\n let repairItem = {\n guid: guid !== '' ? guid : generateGuid(),\n sku,\n description: product.description,\n image: product.image,\n shippingInstructions: product.shippingInstructions,\n serialNumber,\n serialNumberUnreadable,\n tagNumber,\n underWarranty: 'Warranty',\n proofOfPurchase,\n proofOfPurchaseToBeUploaded,\n proofOfPurchaseIncluded,\n proofOfPurchaseNotIncluded,\n proofOfPurchaseBlob,\n isBattery: product.isBattery,\n problems,\n otherProblem,\n isRecycled,\n mergedProblems: Enumerable.from(problems)\n .select(x => x.value)\n .toArray()\n .join(', '),\n included,\n otherIncluded,\n mergedIncluded: Enumerable.from(included)\n .select(x => x.description)\n .toArray()\n .join(', '),\n batteryIncluded,\n warrantyEvaluation,\n manufactureDate,\n purchaseDate,\n selectedIncludedIds: Enumerable.from(included)\n .select(x => x.includedId)\n .toArray(),\n selectedProblemIds: Enumerable.from(problems)\n .select(x => x.id)\n .toArray(),\n includedOther: '',\n problemDescriptionOther: '',\n };\n\n if (otherProblem) {\n if (problems.length > 0) {\n repairItem.mergedProblems += ', ';\n }\n\n repairItem.mergedProblems += otherProblem;\n repairItem.problemDescriptionOther += otherProblem;\n }\n\n if (otherIncluded) {\n if (included.length > 0) {\n repairItem.mergedIncluded += ', ';\n\n if (repairItem.includedOther && repairItem.includedOther.length > 0) {\n repairItem.includedOther += ', ';\n }\n }\n\n repairItem.mergedIncluded += otherIncluded;\n repairItem.includedOther += otherIncluded;\n }\n\n if (proofOfPurchaseIncluded) {\n if (included.length > 0) {\n repairItem.mergedIncluded += ', ';\n if (repairItem.includedOther && repairItem.includedOther.length > 0) {\n repairItem.includedOther += ', ';\n }\n }\n\n repairItem.mergedIncluded += proofOfPurchaseIncludedValue;\n repairItem.includedOther += proofOfPurchaseIncludedValue;\n }\n\n if (batteryIncluded || product.isBattery) {\n if (included.length > 0) {\n repairItem.mergedIncluded += ', ';\n if (repairItem.includedOther && repairItem.includedOther.length > 0) {\n repairItem.includedOther += ', ';\n }\n }\n repairItem.mergedIncluded += oneOrMoreBatteriesValue;\n repairItem.includedOther += oneOrMoreBatteriesValue;\n }\n return repairItem;\n };\n\n const setRepairItem = repairItem => {\n setGuid(repairItem.guid);\n setSku(repairItem.sku);\n setSerialNumber(repairItem.serialNumber);\n setSerialNumberUnreadable(repairItem.serialNumberUnreadable);\n setTagNumber(repairItem.tagNumber);\n setProofOfPurchase(repairItem.proofOfPurchase);\n setProofOfPurchaseToBeUploaded(repairItem.proofOfPurchaseToBeUploaded);\n setProofOfPurchaseIncluded(repairItem.proofOfPurchaseIncluded);\n setProofOfPurchaseNotIncluded(repairItem.proofOfPurchaseNotIncluded);\n setProofOfPurchaseBlob(repairItem.proofOfPurchaseBlob);\n setProblems(repairItem.problems);\n setOtherProblem(repairItem.otherProblem);\n setIncluded(repairItem.included);\n setOtherIncluded(repairItem.otherIncluded);\n setBatteryIncluded(repairItem.batteryIncluded);\n setIsRecycled(repairItem.isRecycled);\n setWarrantyEvaluation(repairItem.warrantyEvaluation);\n setManufactureDate(repairItem.manufactureDate);\n setPurchaseDate(repairItem.purchaseDate);\n setSelectedIncludedIds(repairItem.selectedIncludedIds);\n };\n\n return (\n \n {children}\n \n );\n};\n\nexport { RepairItemsContext, useRepairItemsContext, RepairItemsProvider };\n","const generateGuid = () => {\n let baseString = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';\n let parsedString = baseString.replace(/[xy]/g, c => {\n let r = (Math.random() * 16) | 0,\n v = c === 'x' ? r : (r & 0x3) | 0x8;\n return v.toString(16);\n });\n\n return parsedString;\n};\n\nexport { generateGuid };\n","import { FileUploadInput, PlaceholderContent, Row, Text } from '@met/react-components';\nimport styled from 'styled-components';\n\nexport const PlaceholderGapRow = styled(Row)`\n padding-top: 1.5rem;\n`;\n\nexport const PlaceholderSquareContent = styled(PlaceholderContent)`\n height: 250px;\n\n @media (max-width: ${props => props.theme.screenSize.md}) {\n height: 125px;\n }\n`;\n\nexport const SerialNumberCheckboxWrapper = styled.div`\n margin-top: 2.5rem;\n\n @media (max-width: ${props => props.theme.screenSize.md}) {\n margin-top: 0.5rem;\n margin-bottom: 0;\n }\n`;\n\nexport const OtherInputWrapper = styled.div`\n max-width: 350px;\n margin-top: 0.5rem;\n`;\n\nexport const BatteryInputWrapper = styled.div`\n max-width: 350px;\n margin-top: 0.5rem;\n`;\n\nexport const ToolInfoImageWrapper = styled.div`\n height: 100%;\n`;\n\nexport const ToolInfoImage = styled.img`\n max-width: 100%;\n max-height: 100%;\n`;\n\nexport const TitleWrapper = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const StyledFileUploadInput = styled(FileUploadInput)`\n margin-bottom: 0;\n`;\n\nexport const CheckboxWrapper = styled.div`\n margin-top: 0.5rem;\n`;\n\nexport const UploadWrapper = styled.div`\n margin-top: 0.5rem;\n`;\n\nexport const UploadErrorText = styled(Text)`\n margin-top: 0.25rem;\n`;\n\nexport const NotIncludedText = styled(Text)`\n margin-top: 0.5rem;\n`;\n\nexport const SerialNumberImg = styled.img`\n max-width: 300px;\n`;\n\nexport const DamagedBatteryimg = styled.img`\n max-height: 200px;\n border: 1px solid gray;\n`;\n\nexport const Battery9Img = styled.img`\n max-width: 325px;\n border: 1px solid gray;\n`;\n\nexport const StyledFileName = styled.div`\n margin-top: 0.5rem;\n font-size: 0.9rem;\n font-weight: 300;\n`;\n\nexport const ErrorMessage = styled.span`\n margin-top: 0.1rem;\n display: block;\n color: #db011c;\n font-size: 0.9rem;\n`;\n","import { Button, Col, Modal, Row, Typography } from 'antd';\nimport React, { Fragment } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useHistory } from 'react-router';\nimport { CloseOutlined } from '@ant-design/icons';\nimport { Text, useToggle } from '@met/react-components';\nimport { Battery9Img, DamagedBatteryimg } from '../ProductDetail/styled';\nimport { useFeatureToggles, useLocale } from '../../../../../hooks';\n\nconst { Paragraph } = Typography;\n\nconst BatteryEvaluationModal = ({\n selectedProduct,\n showBatteryModal,\n toggleBatteryModal,\n setIsRecycled,\n batterySafetyLink,\n includedBatteryCancelClick,\n}) => {\n const intl = useIntl();\n const history = useHistory();\n const { isCaLocale } = useLocale();\n\n const isCa = isCaLocale();\n\n const [showBatteryDamageMarkup, toggleBatteryDamageMarkup] = useToggle(true);\n const [showBatteryDamageNotEligibleMarkup, toggleBatteryDamageNotEligibleMarkup] = useToggle(false);\n const [showBattery9Markup, toggleBattery9Markup] = useToggle(false);\n const [showIneligibleBatteryMarkup, toggleIneligibleBatteryMarkup] = useToggle(false);\n const [showBatteryShippingNoticeMarkup, toggleBatteryShippingNoticeMarkup] = useToggle(false);\n const [showMxFBatteryShippingNoticeMarkup, toggleMxFBatteryShippingNoticeMarkup] = useToggle(false);\n const { batteryRecycle } = useFeatureToggles();\n\n const findServiceCenterLink = isCa ? (\n \n \n \n ) : (\n \n \n \n );\n\n const handleConfirmCancel = () => {\n if (selectedProduct && (selectedProduct.isBattery || selectedProduct.isMXFuel)) {\n history.push('/repairprocess/addanother');\n } else {\n resetBatteryMarkupState();\n includedBatteryCancelClick();\n toggleBatteryModal();\n }\n };\n\n const handleIUnderstandClick = () => {\n resetBatteryMarkupState();\n toggleBatteryModal();\n };\n\n const handleBattery9Yes = () => {\n toggleBattery9Markup();\n if (batteryRecycle) {\n setIsRecycled(false);\n }\n toggleBatteryShippingNoticeMarkup();\n };\n\n const handleBattery9No = () => {\n toggleBattery9Markup();\n if (batteryRecycle) {\n setIsRecycled(true);\n toggleBatteryShippingNoticeMarkup();\n } else {\n toggleIneligibleBatteryMarkup();\n }\n };\n\n const handleBatteryDamageYes = () => {\n toggleBatteryDamageMarkup();\n toggleBatteryDamageNotEligibleMarkup();\n };\n\n const handleBatteryDamageNo = () => {\n if (selectedProduct.sku === '48-11-1890' || selectedProduct.sku === '48111890') {\n // Check if 9.0 battery\n toggleBatteryDamageMarkup();\n toggleBattery9Markup();\n } else if (selectedProduct.isMXFuel) {\n // Check for MX Fuel battery\n toggleBatteryDamageMarkup();\n toggleMxFBatteryShippingNoticeMarkup();\n } else {\n toggleBatteryDamageMarkup();\n toggleBatteryShippingNoticeMarkup();\n }\n };\n\n const resetBatteryMarkupState = () => {\n if (!showBatteryDamageMarkup) {\n toggleBatteryDamageMarkup();\n }\n if (showBattery9Markup) {\n toggleBattery9Markup();\n }\n if (showBatteryDamageNotEligibleMarkup) {\n toggleBatteryDamageNotEligibleMarkup();\n }\n if (showIneligibleBatteryMarkup) {\n toggleIneligibleBatteryMarkup();\n }\n if (showBatteryShippingNoticeMarkup) {\n toggleBatteryShippingNoticeMarkup();\n }\n if (showMxFBatteryShippingNoticeMarkup) {\n toggleMxFBatteryShippingNoticeMarkup();\n }\n };\n\n const batteryDamageMarkup = showBatteryDamageMarkup && (\n \n \n \n \n \n \n - \n \n
\n - \n \n
\n - \n \n
\n
\n \n \n \n \n \n \n \n \n
\n\n \n {isCa ? (\n \n ) : (\n \n )}\n \n \n );\n\n const batteryDamageNotEligible = showBatteryDamageNotEligibleMarkup && (\n \n \n \n \n \n {isCa ? (\n \n ) : (\n \n )}\n \n \n );\n\n const battery9Markup = showBattery9Markup && (\n \n \n \n \n \n \n \n \n \n \n \n
\n \n );\n\n const ineligibleBatteryMarkup = showIneligibleBatteryMarkup && (\n \n \n \n \n {batterySafetyLink && (\n \n \n https://www.milwaukeetool.ca/News/Safety-Notices\n \n ) : (\n \n https://milwaukeetool.com/safetynotices\n \n ),\n }}\n />\n \n )}\n \n \n \n \n );\n\n const batteryShippingNoticeMarkup = showBatteryShippingNoticeMarkup && (\n \n \n \n \n \n \n \n {findServiceCenterLink}\n \n );\n\n const mxfModalLinkMarkup = isCa ? (\n \n \n \n \n \n ) : (\n \n \n \n \n \n );\n\n const mxfBody2Markup = isCa ? (\n \n \n \n ) : (\n \n \n \n );\n\n const mxFuelBatteryShippingNoticeMarkup = showMxFBatteryShippingNoticeMarkup && (\n \n \n \n \n {mxfBody2Markup}\n \n \n \n \n \n \n {mxfModalLinkMarkup}\n \n );\n\n const batteryModalMarkup = showBatteryModal && (\n }\n open={showBatteryModal}\n title={\n showBatteryDamageMarkup ? (\n \n ) : showBatteryDamageNotEligibleMarkup ? (\n \n ) : showIneligibleBatteryMarkup ? (\n \n ) : showBattery9Markup ? (\n \n ) : showBatteryShippingNoticeMarkup ? (\n \n ) : showMxFBatteryShippingNoticeMarkup ? (\n \n ) : (\n ''\n )\n }\n footer={\n showBatteryDamageMarkup\n ? [\n ,\n \n \n ,\n ,\n ]\n : showBatteryDamageNotEligibleMarkup || showIneligibleBatteryMarkup\n ? [\n \n \n ,\n ]\n : showBattery9Markup\n ? [\n ,\n ,\n ,\n ]\n : showBatteryShippingNoticeMarkup || showMxFBatteryShippingNoticeMarkup\n ? [\n ,\n \n \n ,\n ]\n : []\n }\n width={750}\n onCancel={handleConfirmCancel}\n destroyOnClose={true}\n >\n {batteryDamageMarkup}\n {batteryDamageNotEligible}\n {ineligibleBatteryMarkup}\n {battery9Markup}\n {batteryShippingNoticeMarkup}\n {mxFuelBatteryShippingNoticeMarkup}\n \n );\n\n return {batteryModalMarkup};\n};\n\nexport default BatteryEvaluationModal;\n","import { Button, DatePicker, Input, Row, Upload } from 'antd';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { ServiceCard } from '../../../../../../components';\n\nconst { Search } = Input;\nconst { Dragger } = Upload;\n\nexport const StyledDatePicker = styled(DatePicker)`\n margin-top: 0.5em;\n border: 2px solid #db011c;\n`;\n\nexport const ButtonRow = styled(Row)`\n padding-top: 10px;\n justify-content: flex-end;\n`;\n\nexport const RepairDetailsButton = styled(Button)`\n background-color: rgb(220, 1, 28);\n color: white;\n`;\n\nexport const ProductImage = styled.img`\n max-width: 100%;\n max-height: 150px;\n padding: 0.5em;\n`;\n\nexport const FocusedServiceCard = styled(ServiceCard)`\n border: 2px solid #db011c;\n`;\n\nexport const SerialNumberSearch = styled(Search)`\n input {\n border: 1px solid #5c5c5c;\n }\n`;\n\nexport const StyledDragger = styled(Dragger)`\n padding: 1em;\n border: 2px solid #db011c !important;\n`;\n\nexport const WideButton = styled(Button)`\n height: auto;\n white-space: normal;\n`;\n","import { InboxOutlined } from '@ant-design/icons';\nimport { Button, Col, Divider, Modal, Row, Space, Typography } from 'antd';\nimport moment from 'moment';\nimport React, { Fragment, useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { toast } from 'react-toastify';\nimport { PageLoader, ServiceCard } from '../../../../../../components';\nimport { getFileExtension } from '../../../../../../helpers/formatter';\nimport { proofOfPurchaseActions } from '../../../../../../store';\nimport RepairItemsList from '../../../../components/RepairItemsList';\nimport { useRepairItemsContext } from '../../../RepairItemsContext';\nimport { StyledDatePicker, StyledDragger, WideButton } from './styled';\n\nconst { Paragraph, Text, Title } = Typography;\n\nconst ProofOfPurchase = ({ onBack, onCheckWarrantyStatus }) => {\n const validFileTypes = ['image/jpeg', 'application/pdf', 'image/png'];\n const maxFileSizeBytes = 5000000;\n const dateFormat = 'MM/DD/YYYY';\n\n const intl = useIntl();\n const dispatch = useDispatch();\n const {\n proofOfPurchase,\n setProofOfPurchase,\n uploadingProofOfPurchase,\n setProofOfPurchaseBlob,\n setProofOfPurchaseIncluded,\n setProofOfPurchaseNotIncluded,\n serialNumberUnreadable,\n purchaseDate,\n setPurchaseDate,\n } = useRepairItemsContext();\n\n const uploadingToast = React.useRef(null);\n\n const [uploadingFile, setUploadingFile] = useState(false);\n const [showNotIncludedModal, setShowNotIncludedModal] = useState(false);\n const [detectedPurchaseDate, setDetectedPurchaseDate] = useState(null);\n const [specifiedPurchaseDate, setSpecifiedPurchaseDate] = useState(null);\n const [fileTypeIsInvalid, setFileTypeIsInvalid] = useState(false);\n const [fileSizeIsInvalid, setFileSizeIsInvalid] = useState(false);\n\n useEffect(() => {\n setSpecifiedPurchaseDate(purchaseDate);\n }, []);\n\n useEffect(() => {\n if (detectedPurchaseDate) {\n setSpecifiedPurchaseDate(detectedPurchaseDate);\n }\n }, [detectedPurchaseDate]);\n\n useEffect(() => {\n setPurchaseDate(specifiedPurchaseDate);\n }, [specifiedPurchaseDate]);\n\n const validateFile = (file) => {\n let isValidType = validFileTypes.indexOf(file.type.toLowerCase()) > -1;\n let isValidSize = file.size <= maxFileSizeBytes;\n\n if (!isValidType) {\n toast.error(intl.formatMessage({ id: 'repairProcess.warrantyInformation.invalidFileType' }));\n }\n if (!isValidSize) {\n toast.error(intl.formatMessage({ id: 'repairProcess.warrantyInformation.invalidFileSize' }));\n }\n\n setFileTypeIsInvalid(!isValidType);\n setFileSizeIsInvalid(!isValidSize);\n\n return isValidType && isValidSize;\n };\n\n const handleUploadChange = (upload) => {\n if (!upload.file) {\n return;\n }\n\n const { status } = upload.file;\n\n if (status === 'uploading' && !uploadingFile) {\n setUploadingFile(true);\n\n handleClearProofOfPurchase(); // Clear state since we're uploading a new file\n\n uploadingToast.current = toast.info(\n intl.formatMessage({ id: 'repairProcess.warrantyInformation.uploadInProgress' })\n );\n } else if (status === 'done') {\n setUploadingFile(false);\n\n toast.dismiss(uploadingToast.current);\n\n toast.success(intl.formatMessage({ id: 'repairProcess.warrantyInformation.uploadSuccess' }));\n } else if (status === 'error') {\n toast.dismiss(uploadingToast.current);\n\n toast.error(intl.formatMessage({ id: 'repairProcess.warrantyInformation.uploadError' }));\n }\n };\n\n const handleUploadProofOfPurchase = (upload) => {\n const { onSuccess, onError, file } = upload;\n\n try {\n setProofOfPurchase(file);\n\n let formData = new FormData();\n formData.append('proofOfPurchase', file);\n formData.append('fileExtension', getFileExtension(file.name));\n\n dispatch(proofOfPurchaseActions.uploadProofOfPurchase(formData))\n .then((response) => {\n const { blobInfo, possiblePurchaseDates } = response.data.data;\n\n setProofOfPurchaseBlob(blobInfo?.itemPath);\n\n if (possiblePurchaseDates && possiblePurchaseDates.length > 0) {\n setDetectedPurchaseDate(moment(possiblePurchaseDates[0]));\n }\n\n onSuccess();\n })\n .catch(() => {\n onError();\n });\n } catch (error) {\n onError();\n }\n };\n\n const handleIncludeProofOfPurchaseClick = () => {\n setProofOfPurchaseIncluded(true);\n onCheckWarrantyStatus();\n };\n\n const handleNotIncludeProofOfPurchaseClick = () => {\n setProofOfPurchaseNotIncluded(true);\n\n // If user specified serial number was not readable and they aren't including a POP, have them confirm\n if (serialNumberUnreadable) {\n setShowNotIncludedModal(true);\n } else {\n onCheckWarrantyStatus();\n }\n };\n\n const handleClearProofOfPurchase = () => {\n setProofOfPurchase(null);\n setProofOfPurchaseBlob(null);\n setDetectedPurchaseDate(null);\n setSpecifiedPurchaseDate(null);\n setFileTypeIsInvalid(false);\n setFileSizeIsInvalid(false);\n };\n\n const loadingMarkup = uploadingProofOfPurchase && ;\n\n const repairItemsListMarkup = (\n \n \n \n );\n\n const invalidFileTypeMessage = !uploadingProofOfPurchase && fileTypeIsInvalid && (\n \n \n \n \n
\n );\n\n const invalidFileSizeMessage = !uploadingProofOfPurchase && fileSizeIsInvalid && (\n \n \n \n \n
\n );\n\n const alternativeOptionsMarkup = !uploadingProofOfPurchase && !proofOfPurchase && (\n \n handleIncludeProofOfPurchaseClick()}>\n \n \n handleNotIncludeProofOfPurchaseClick(true)}\n >\n \n \n \n );\n\n const purchaseDateValidationMessage = !uploadingProofOfPurchase && proofOfPurchase && !specifiedPurchaseDate && (\n \n \n \n );\n\n const purchaseDateMarkup = !uploadingProofOfPurchase && proofOfPurchase && (\n \n \n
\n <FormattedMessage id='repairProcess.warrantyInformation.detectedPurchaseDate' />\n \n {!detectedPurchaseDate && (\n
\n \n \n \n \n \n \n \n )}\n {detectedPurchaseDate && (\n
\n \n \n \n \n \n \n \n )}\n
\n \n \n \n <FormattedMessage id='repairProcess.warrantyInformation.uploadProofOfPurchase' />\n \n \n \n
\n <FormattedMessage id='repairProcess.warrantyInformation.whyUpload' />\n \n
\n \n \n
\n \n \n
\n
\n <FormattedMessage id='repairProcess.warrantyInformation.upload' />\n \n
\n
\n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n {invalidFileTypeMessage}\n {invalidFileSizeMessage}\n \n {loadingMarkup}\n {purchaseDateMarkup}\n {alternativeOptionsMarkup}\n
\n \n \n \n \n onCheckWarrantyStatus()}\n >\n \n \n \n \n
\n onCheckWarrantyStatus()}\n onCancel={() => setShowNotIncludedModal(false)}\n >\n \n \n \n );\n};\n\nexport default ProofOfPurchase;\n","import { Icon } from '@met/react-components';\nimport {\n Button,\n Card,\n Col,\n Descriptions,\n Form,\n Image,\n Modal,\n Row,\n Space,\n Typography,\n} from 'antd';\nimport moment from 'moment';\nimport React, { Fragment, useEffect, useRef, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { useHistory } from 'react-router';\nimport { toast } from 'react-toastify';\nimport { PageLoader, ServiceCard } from '../../../../../../components';\nimport { useToggle } from '../../../../../../hooks';\nimport { serialNumberActions } from '../../../../../../store';\nimport RepairItemsList from '../../../../components/RepairItemsList';\nimport { useRepairItemsContext } from '../../../RepairItemsContext';\nimport { FocusedServiceCard, SerialNumberSearch } from './styled';\n\nconst { Paragraph, Text, Title } = Typography;\n\nconst SerialNumber = ({ onSerialNumberUnreadableClick, onContinueClick }) => {\n const intl = useIntl();\n const formRef = useRef();\n const dispatch = useDispatch();\n const history = useHistory();\n\n const {\n product,\n serialNumber,\n setSerialNumberUnreadable,\n setSerialNumber,\n manufactureDate,\n setManufactureDate,\n } = useRepairItemsContext();\n\n const [parsingSerialNumber, setParsingSerialNumber] = useState(false);\n const [serialNumberInvalid, setSerialNumberInvalid] = useState(false);\n const [isM4Battery, setIsM4Battery] = useState(false);\n const [isM28Battery, setIsM28Battery] = useState(false);\n const [showModal, toggleModal] = useToggle(false);\n\n useEffect(() => {\n if (product.isBattery) {\n if (product.description.toLowerCase().includes('m4')) {\n setIsM4Battery(true);\n } else if (product.description.toLowerCase().includes('m28')) {\n setIsM28Battery(true);\n }\n }\n }, [product]);\n\n const onLookupClick = (form) => {\n if (form) {\n setParsingSerialNumber(true);\n\n // Use artificial load for better UX\n setTimeout(() => {\n setParsingSerialNumber(false);\n setSerialNumberInvalid(false);\n\n if (product?.isBattery && (isM4Battery || isM28Battery)) {\n setManufactureDate(null);\n setSerialNumber(form.serialNumber);\n setSerialNumberUnreadable(false);\n } else {\n dispatch(\n serialNumberActions.parseSerialNumber(\n form.serialNumber,\n product.isBattery\n )\n )\n .then((res) => {\n setManufactureDate(res.data.data);\n setSerialNumber(form.serialNumber);\n setSerialNumberUnreadable(false);\n })\n .catch(() => {\n toast.error(\n intl.formatMessage({\n id: 'repairProcess.warrantyInformation.serialNumberView.parseError',\n })\n );\n setManufactureDate(null);\n setSerialNumber(form.serialNumber);\n setSerialNumberUnreadable(false);\n setSerialNumberInvalid(true);\n });\n }\n }, 1500);\n }\n };\n\n if (!product) {\n return ;\n }\n\n const repairItemsListMarkup = (\n \n \n \n );\n\n const serialInvalidMarkup = serialNumberInvalid && !parsingSerialNumber && (\n \n \n \n \n \n );\n\n const serialResultsMarkup = serialNumber && (\n \n \n \n {serialNumber}\n \n {!isM4Battery && !isM28Battery && (\n \n \n {manufactureDate\n ? moment(manufactureDate).local().format('MM/DD/YYYY')\n : intl.formatMessage({\n id: 'repairProcess.warrantyInformation.general.unknown',\n })}\n \n \n )}\n \n \n {product?.warrantyPeriod}{' '}\n \n \n \n \n \n );\n\n const serialNumberInfoModal = (\n \n \n
\n <FormattedMessage id='repairProcess.warrantyInformation.serialNumberView.isMyToolCovered' />\n \n
\n \n \n
\n \n - \n \n
\n - \n \n
\n - \n \n
\n
\n \n
\n
\n <FormattedMessage id='repairProcess.warrantyInformation.serialNumberView.findSerialNumber' />\n \n
\n \n \n
\n
\n \n \n \n <FormattedMessage id='repairProcess.warrantyInformation.serialNumberView.serialNumberSearchTitle' />\n <Icon\n data-test-id='serialNumberSearchTitle'\n className='ml-2'\n type='question-circle'\n xs\n onClick={toggleModal}\n />\n \n \n ({\n validator(_, value) {\n if (value && product.isBattery) {\n return Promise.resolve();\n } else if (\n value &&\n !product.isBattery &&\n (value.length < 13 || value.length > 15)\n ) {\n return Promise.reject(\n new Error(\n intl.formatMessage({\n id: 'repairProcess.warrantyInformation.serialNumberView.serialLengthRequirementMessage',\n })\n )\n );\n }\n\n return Promise.resolve();\n },\n }),\n ]}\n >\n formRef?.current?.submit()}\n enterButton={intl.formatMessage({\n id: 'repairProcess.warrantyInformation.serialNumberView.lookup',\n })}\n size='large'\n style={{ maxWidth: '750px' }}\n data-test-id='serialNumberInput'\n disabled={parsingSerialNumber}\n loading={parsingSerialNumber}\n data-hj-allow\n />\n \n \n {serialInvalidMarkup}\n {!parsingSerialNumber && (!serialNumber || serialNumberInvalid) && (\n \n onSerialNumberUnreadableClick()}\n >\n \n \n onSerialNumberUnreadableClick()}\n >\n \n \n \n )}\n {serialResultsMarkup}\n \n {serialNumberInfoModal}\n \n \n {repairItemsListMarkup}\n \n
\n \n \n history.push(`/repairprocess/addanother`)}\n >\n \n \n onContinueClick()}\n disabled={!manufactureDate && !serialNumber}\n >\n \n \n \n
\n \n );\n};\n\nexport default SerialNumber;\n","import { Col, Image, Row, Space, Typography } from 'antd';\nimport moment from 'moment';\nimport React, { Fragment } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { ServiceCard } from '../../../../../../components';\nimport { useRepairItemsContext } from '../../../RepairItemsContext';\nimport { ProductImage } from './styled';\n\nconst { Text, Title } = Typography;\n\nconst ToolInfoHeader = ({ productInfo }) => {\n const {\n serialNumber,\n serialNumberUnreadable,\n manufactureDate,\n purchaseDate,\n proofOfPurchaseIncluded,\n proofOfPurchaseNotIncluded,\n } = useRepairItemsContext();\n\n const intl = useIntl();\n\n const serialMarkup = (serialNumber || serialNumberUnreadable) && (\n \n \n
\n <FormattedMessage id='repairProcess.warrantyInformation.general.serialNumber' />\n \n \n {serialNumberUnreadable\n ? intl.formatMessage({\n id: 'repairProcess.warrantyInformation.general.notLegible',\n })\n : serialNumber}\n \n \n \n );\n\n const manufactureDateMarkup = manufactureDate && (\n \n \n
\n <FormattedMessage id='repairProcess.warrantyInformation.general.manufactureDate' />\n \n \n {serialNumberUnreadable\n ? intl.formatMessage({\n id: 'repairProcess.warrantyInformation.general.unknown',\n })\n : manufactureDate\n ? moment(manufactureDate).local().format('MM/DD/YYYY')\n : intl.formatMessage({\n id: 'repairProcess.warrantyInformation.general.unknown',\n })}\n \n \n \n );\n\n const purchaseDateMarkup = (purchaseDate ||\n proofOfPurchaseIncluded ||\n proofOfPurchaseNotIncluded) && (\n \n \n
\n <FormattedMessage id='repairProcess.warrantyInformation.general.purchaseDate' />\n \n \n {purchaseDate\n ? moment(purchaseDate).local().format('MM/DD/YYYY')\n : intl.formatMessage({\n id: 'repairProcess.warrantyInformation.general.unknown',\n })}\n \n \n \n );\n\n const warrantyPeriodMarkup = (serialMarkup || purchaseDateMarkup) && (\n \n \n
\n <FormattedMessage id='repairProcess.warrantyInformation.general.warrantyPeriod' />\n \n \n {productInfo?.warrantyPeriod}{' '}\n \n \n \n \n );\n\n const warrantyStatusMarkup = (serialMarkup ||\n manufactureDateMarkup ||\n purchaseDateMarkup ||\n warrantyPeriodMarkup) && (\n \n {serialMarkup}\n {manufactureDateMarkup}\n {purchaseDateMarkup}\n {warrantyPeriodMarkup}\n
\n );\n\n return (\n \n \n <FormattedMessage id='repairProcess.warrantyInformation.toolInfoHeader.yourToolsWarrantyStatus' />\n \n \n \n \n \n \n \n \n \n {productInfo?.skuAlias}\n \n
\n \n \n \n {productInfo?.description}\n \n \n
\n {warrantyStatusMarkup}\n \n
\n \n \n );\n};\n\nexport default ToolInfoHeader;\n","import { Icon } from '@met/react-components';\nimport { Button, Space, Typography } from 'antd';\nimport React, { Fragment } from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { ServiceCard } from '../../../../../../components';\nimport { useToggle } from '../../../../../../hooks';\nimport LmrDefinitionModal from './LmrDefinitionModal';\n\nconst { Text, Title, Paragraph } = Typography;\n\nconst MoreInformationNeeded = ({ warrantyLine, onBack, onGoToSerialNumber }) => {\n const [showLmrModal, toggleLmrModal] = useToggle(false);\n\n const underWarrantyMarkup = (\n \n \n \n <FormattedMessage id='repairProcess.warrantyInformation.moreInformation.title' />\n \n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n \n
\n
\n <FormattedMessage id='repairProcess.warrantyInformation.warrantyCoverage.title' />\n \n
\n \n - \n \n
\n - \n \n
\n - \n \n
\n
\n \n
\n
\n <FormattedMessage id='repairProcess.warrantyInformation.noWarranty' />\n \n
\n \n \n \n \n \n {warrantyLine}\n \n \n
\n
\n <FormattedMessage id='productDetail.toolInfo.lmrTitle' />\n <Icon data-test-id='outOfWarrantyLMRQuestionCircle' className='ml-2' type='question-circle' sm onClick={toggleLmrModal} />\n \n \n {warrantyLine}\n \n \n \n
\n <FormattedMessage id='repairProcess.warrantyInformation.warrantyCoverage.title' />\n \n
\n \n - \n \n
\n - \n \n
\n - \n \n
\n
\n \n
\n
\n <FormattedMessage id='repairProcess.warrantyInformation.warrantyCoverage.title' />\n \n
\n \n - \n \n
\n - \n \n
\n - \n \n
\n
\n \n
\n
\n <FormattedMessage id='repairProcess.warrantyInformation.noWarranty' />\n \n
\n \n \n \n \n \n {warrantyLine}\n \n \n
\n
\n <FormattedMessage id='repairProcess.warrantyInformation.underWarranty.title' />\n \n
\n \n \n
\n \n - \n \n
\n - \n \n
\n - \n \n
\n
\n \n
\n
\n <FormattedMessage id='repairProcess.warrantyInformation.noWarranty' />\n \n
\n \n \n \n \n \n {warrantyLine}\n \n \n
\n \n {underWarranty}\n {pendingWarranty}\n {outWarranty}\n {moreInformation}\n \n \n {repairItemsListMarkup}\n \n
\n \n \n \n onBack()}\n >\n \n \n \n \n {\n history.push(`/repairprocess/productdetail/${sku}`);\n }}\n >\n \n \n \n \n
\n \n );\n};\n\nexport default WarrantyEvaluation;\n","import WarrantyInformation from './WarrantyInformation';\n\nexport default WarrantyInformation;\n","import { Content } from 'antd/es/layout/layout';\nimport React, { useEffect, useState } from 'react';\nimport { useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { useHistory, useLocation } from 'react-router';\nimport { toast } from 'react-toastify';\nimport { NotFound, PageLoader } from '../../../../../components';\nimport { useToggle } from '../../../../../hooks';\nimport { productsActions } from '../../../../../store';\nimport { useRepairItemsContext } from '../../RepairItemsContext';\nimport BatteryEvaluationModal from '../BatteryEveluationModal/BatteryEvaluationModal';\nimport { ProofOfPurchase } from './components';\nimport SerialNumber from './components/SerialNumber';\nimport ToolInfoHeader from './components/ToolInfoHeader';\nimport WarrantyEvaluation from './components/WarrantyEvaluation';\n\nconst WarrantyInformation = () => {\n const dispatch = useDispatch();\n const intl = useIntl();\n const location = useLocation();\n const history = useHistory();\n\n const {\n product,\n loadingProduct,\n sku,\n setSku,\n manufactureDate,\n setManufactureDate,\n serialNumber,\n setSerialNumber,\n serialNumberUnreadable,\n setSerialNumberUnreadable,\n setIsRecycled,\n productBatteryDetails,\n } = useRepairItemsContext();\n\n const [notFound, setNotFound] = useState(false);\n const [showSerialNumberMarkup, setShowSerialNumberMarkup] = useState(true);\n const [showProofOfPurchaseMarkup, setShowProofOfPurchaseMarkup] =\n useState(false);\n const [showWarrantyStatusMarkup, setShowWarrantyStatusMarkup] =\n useState(false);\n const [showBatteryModal, toggleBatteryModal] = useToggle(false);\n const [batterySafetyLink, setBatterySafetyLink] = useState(null);\n\n useEffect(() => {\n if (productBatteryDetails) {\n if (productBatteryDetails.safetyLink) {\n setBatterySafetyLink(productBatteryDetails.safetyLink);\n } else {\n setBatterySafetyLink(null);\n }\n }\n }, [productBatteryDetails]);\n\n useEffect(() => {\n if (sku !== '' && product && product.isBattery && !showBatteryModal) {\n toggleBatteryModal();\n }\n }, [product]);\n\n useEffect(() => {\n let pathParts = location.pathname.split('/');\n pathParts = pathParts.filter((part) => {\n if (part && part !== '') {\n return part;\n }\n });\n\n if (pathParts[1] === 'warrantyinformation') {\n setSku(pathParts[2]);\n }\n }, [location.pathname]);\n\n useEffect(() => {\n if (sku !== '') {\n dispatch(productsActions.getProduct(sku)).catch((payload) => {\n if (\n (payload.response && payload.response.status === 400) ||\n payload.response.status === 404\n ) {\n setNotFound(true);\n }\n\n toast.error(\n intl.formatMessage({ id: 'productDetail.getProductError' })\n );\n });\n }\n }, [sku]);\n\n if (notFound) {\n return ;\n }\n\n if (loadingProduct || !product) {\n return ;\n }\n\n const onSerialNumberUnreadableClick = () => {\n setManufactureDate(null);\n setSerialNumber(null);\n setSerialNumberUnreadable(true);\n setShowSerialNumberMarkup(false);\n setShowProofOfPurchaseMarkup(true);\n };\n\n const onSerialNumberContinueClick = () => {\n setShowSerialNumberMarkup(false);\n setShowProofOfPurchaseMarkup(true);\n };\n\n const handleProofOfPurchaseBackClick = () => {\n setShowProofOfPurchaseMarkup(false);\n setShowSerialNumberMarkup(true);\n };\n\n const handleWarrantyStatusBackClick = () => {\n setShowWarrantyStatusMarkup(false);\n setShowProofOfPurchaseMarkup(true);\n };\n\n const handleEnterRepairDetailsClick = () => {\n history.push(`/repairprocess/productdetail/${sku}`);\n };\n\n const handleCheckWarrantyStatusClick = () => {\n setShowProofOfPurchaseMarkup(false);\n setShowWarrantyStatusMarkup(true);\n };\n\n const handleGoToSerialNumber = () => {\n setShowWarrantyStatusMarkup(false);\n setShowSerialNumberMarkup(true);\n };\n\n const serialNumberMarkup = showSerialNumberMarkup && (\n onSerialNumberUnreadableClick()}\n onContinueClick={() => onSerialNumberContinueClick()}\n />\n );\n\n const proofOfPurchaseMarkup = showProofOfPurchaseMarkup && (\n handleProofOfPurchaseBackClick()}\n onCheckWarrantyStatus={() => handleCheckWarrantyStatusClick()}\n />\n );\n\n const warrantyStatusMarkup = showWarrantyStatusMarkup && (\n handleWarrantyStatusBackClick()}\n onEnterRepairDetails={() => handleEnterRepairDetailsClick()}\n onGoToSerialNumber={() => handleGoToSerialNumber()}\n />\n );\n\n return (\n \n \n {serialNumberMarkup}\n {proofOfPurchaseMarkup}\n {warrantyStatusMarkup}\n setIsRecycled(isRecycled)}\n batterySafetyLink={batterySafetyLink}\n />\n \n );\n};\n\nexport default WarrantyInformation;\n","import { Checkbox, Dropdown, Placeholder, PlaceholderContent, Text, TextInput, useToggle } from '@met/react-components';\nimport Enumerable from 'linq';\nimport React, { Fragment, useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useHistory } from 'react-router';\n\nimport { useRepairItemsContext } from '../../../RepairItemsContext';\nimport { BatteryInputWrapper, CheckboxWrapper, OtherInputWrapper } from '../styled';\nimport { Button, Col, Modal, Row } from 'antd';\nimport { useLocale } from '../../../../../../hooks';\nimport BatteryEvaluationModal from '../../BatteryEveluationModal/BatteryEvaluationModal';\n\nconst Included = () => {\n const intl = useIntl();\n const history = useHistory();\n\n const { isCaLocale } = useLocale();\n\n const isCa = isCaLocale();\n\n const {\n sku,\n included,\n setIncluded,\n hasOtherIncluded,\n setHasOtherIncluded,\n otherIncluded,\n setOtherIncluded,\n otherIncludedInvalid,\n hasBatteryIncluded,\n setHasBatteryIncluded,\n batteryIncluded,\n setBatteryIncluded,\n batteryIncludedInvalid,\n includedInvalid,\n loadingProduct,\n product,\n loadingBatteries,\n batteries,\n setUnsavedChanges,\n } = useRepairItemsContext();\n\n const [batteryOptions, setBatteryOptions] = useState([]);\n const [selectedBattery, setSelectedBattery] = useState(null);\n const [batterySafetyLink, setBatterySafetyLink] = useState(null);\n\n const [showBatteryModal, toggleBatteryModal] = useToggle(false);\n const [showIneligibleBatteryModal, toggleIneligibleBatteryModal] = useToggle(false);\n\n useEffect(() => {\n if (!hasOtherIncluded) {\n setOtherIncluded('');\n }\n }, [hasOtherIncluded]);\n\n useEffect(() => {\n setHasOtherIncluded(otherIncluded.length > 0);\n }, [otherIncluded]);\n\n useEffect(() => {\n if (!hasBatteryIncluded) {\n setBatteryIncluded('');\n }\n }, [hasBatteryIncluded]);\n\n useEffect(() => {\n setHasBatteryIncluded(batteryIncluded.length > 0);\n\n let option = Enumerable.from(batteryOptions).firstOrDefault(x => x.value === batteryIncluded);\n if (option) {\n setSelectedBattery(option);\n }\n }, [batteryIncluded]);\n\n useEffect(() => {\n if (selectedBattery) {\n if (selectedBattery && selectedBattery.safetyLink) {\n setBatterySafetyLink(selectedBattery.safetyLink);\n }\n\n setBatteryIncluded(selectedBattery.value);\n }\n }, [selectedBattery]);\n\n useEffect(() => {\n if (batteries && batteries.length > 0) {\n setBatteryOptions(createBatteryOptions());\n }\n }, [batteries]);\n\n const handleBatteryCheck = batteryChecked => {\n setHasBatteryIncluded(batteryChecked);\n };\n\n const createBatteryOptions = () => {\n let batteryOptions = [];\n\n if (!loadingBatteries && batteries) {\n batteryOptions = batteries\n .filter(battery => battery.isActive)\n .map((battery, index) => {\n return {\n label: battery.skuAlias,\n value: battery.sku,\n description: battery.description,\n safetyLink: battery.safetyLink,\n isMXFuel: battery.isMXFuel,\n };\n });\n }\n\n return batteryOptions;\n };\n\n const handleCheckIncluded = includedItem => {\n let existingIncludedIndex = Enumerable.from(included).indexOf(x => x.description === includedItem.description);\n\n if (existingIncludedIndex > -1) {\n let updatedIncluded = included.filter((value, index) => {\n return index !== existingIncludedIndex;\n });\n\n if (included.length !== updatedIncluded.length) {\n setUnsavedChanges(true);\n }\n\n setIncluded(updatedIncluded);\n } else {\n let newIncluded = includedItem;\n\n setUnsavedChanges(true);\n setIncluded([...included, newIncluded]);\n }\n };\n\n const handleConfirmCancel = () => {\n setHasBatteryIncluded(false);\n setBatteryIncluded('');\n };\n\n const handleBatterySelect = selectedBattery => {\n setBatterySafetyLink(null);\n let battery = Enumerable.from(batteries).firstOrDefault(x => x.sku === selectedBattery.value);\n\n setSelectedBattery(selectedBattery);\n\n if (!battery.eligible) {\n toggleIneligibleBatteryModal();\n } else {\n toggleBatteryModal();\n }\n };\n\n const handleCloseIneligibleBatteryModal = () => {\n setHasBatteryIncluded(false);\n setBatteryIncluded('');\n setSelectedBattery(null);\n toggleIneligibleBatteryModal();\n };\n\n const includedTitle = (\n \n \n \n \n
\n \n
\n );\n\n const includedErrorMarkup = includedInvalid && (\n \n \n \n );\n\n const includedPlaceholderMarkup = loadingProduct && (\n \n {includedTitle}\n \n \n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n
\n \n );\n\n const includedList =\n product &&\n product.productIncludedMappings.map((includedItem, index) => {\n let existingIncluded = Enumerable.from(included).firstOrDefault(x => x.description === includedItem.description);\n return (\n \n \n handleCheckIncluded(includedItem)}\n label={intl.formatMessage({ id: 'productInclusions.' + includedItem.includedId, defaultMessage: includedItem.description })}\n checked={existingIncluded}\n data-test-id={`included-${index}`}\n />\n \n \n );\n });\n\n const includedOther = (\n \n \n setHasOtherIncluded(!hasOtherIncluded)}\n label={intl.formatMessage({ id: 'productDetail.included.includedOtherLabel' })}\n checked={hasOtherIncluded}\n data-test-id='included-other'\n />\n \n setOtherIncluded(e.target.value)}\n disabled={!hasOtherIncluded}\n value={otherIncluded}\n invalid={otherIncludedInvalid}\n errorMessage={intl.formatMessage({ id: 'productDetail.included.includedOtherInvalid' })}\n data-hj-allow\n />\n \n \n \n );\n\n const includedBattery = product && !product.isBattery && (\n \n \n handleBatteryCheck(batteryChecked.checked)}\n label={intl.formatMessage({ id: 'productDetail.included.includedBatteryLabel' })}\n checked={hasBatteryIncluded}\n data-test-id='included-battery'\n />\n \n \n );\n\n const selectBatteryMarkup = hasBatteryIncluded && (\n \n \n \n \n
\n \n option.value}\n getOptionLabel={option => option.label}\n onChange={handleBatterySelect}\n disabled={!hasBatteryIncluded}\n windowMode\n windowMaxHeight={175}\n invalid={batteryIncludedInvalid}\n />\n \n \n
\n );\n\n const ineligibleBatteryModalMarkup = selectedBattery && (\n }\n footer={[\n ,\n ]}\n >\n \n \n
\n {selectedBattery.safetyLink && (\n \n \n https://www.milwaukeetool.ca/News/Safety-Notices\n \n ) : (\n \n https://milwaukeetool.com/safetynotices\n \n ),\n }}\n />\n
\n )}\n \n \n
\n \n );\n\n const includedMarkup = !loadingProduct && product && (\n \n {includedTitle}\n {includedErrorMarkup}\n \n {includedList}\n {includedBattery}\n {includedOther}\n
\n {selectBatteryMarkup}\n \n );\n\n return (\n \n {includedPlaceholderMarkup}\n {includedMarkup}\n handleConfirmCancel()}\n />\n {ineligibleBatteryModalMarkup}\n \n );\n};\n\nexport default Included;\n","import { Checkbox, Col, Placeholder, PlaceholderContent, Row, Text, TextInput } from '@met/react-components';\nimport Enumerable from 'linq';\nimport React, { Fragment, useEffect } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { useRepairItemsContext } from '../../../RepairItemsContext';\nimport { CheckboxWrapper, OtherInputWrapper } from '../styled';\n\nconst Problem = ({ problemRef }) => {\n const intl = useIntl();\n const {\n loadingProduct,\n product,\n problems,\n setProblems,\n hasOtherProblem,\n setHasOtherProblem,\n otherProblem,\n setOtherProblem,\n otherProblemInvalid,\n problemsInvalid,\n setUnsavedChanges,\n } = useRepairItemsContext();\n\n useEffect(() => {\n if (!hasOtherProblem) setOtherProblem('');\n }, [hasOtherProblem]);\n\n useEffect(() => {\n setHasOtherProblem(otherProblem.length > 0);\n }, [otherProblem]);\n\n const handleCheckProblem = problem => {\n let existingProblemIndex = Enumerable.from(problems).indexOf(x => x.id === problem.id);\n\n if (existingProblemIndex > -1) {\n let updatedProblems = problems.filter((value, index) => {\n return index !== existingProblemIndex;\n });\n\n if (problems.length !== updatedProblems.length) {\n setUnsavedChanges(true);\n }\n\n setProblems(updatedProblems);\n } else {\n let newProblem = {\n id: problem.id,\n value: problem.description,\n };\n\n setUnsavedChanges(true);\n\n setProblems([...problems, newProblem]);\n }\n };\n\n const problemTitle = (\n \n \n \n \n
\n \n
\n );\n\n const problemsErrorMarkup = problemsInvalid && (\n \n \n \n );\n\n const problemPlaceholderMarkup = loadingProduct && (\n \n {problemTitle}\n \n \n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n
\n \n );\n\n const problemList =\n product &&\n product.productProblems.map((problem, index) => {\n let existingProblem = Enumerable.from(problems).firstOrDefault(x => x.id === problem.id);\n\n return (\n \n \n handleCheckProblem(problem)}\n label={intl.formatMessage({ id: 'productProblems.' + problem.id, defaultMessage: problem.description })}\n checked={existingProblem}\n data-test-id={`problem-${index}`}\n />\n \n \n );\n });\n\n const problemOther = (\n \n \n setHasOtherProblem(!hasOtherProblem)}\n label={intl.formatMessage({\n id: 'productDetail.problem.problemOtherLabel',\n })}\n checked={hasOtherProblem}\n data-test-id='problem-other'\n />\n \n setOtherProblem(e.target.value)}\n disabled={!hasOtherProblem}\n value={otherProblem}\n invalid={otherProblemInvalid}\n errorMessage={intl.formatMessage({ id: 'productDetail.problem.problemOtherInvalid' })}\n data-hj-allow\n />\n \n \n \n );\n\n const problemMarkup = !loadingProduct && product && (\n \n {problemTitle}\n {problemsErrorMarkup}\n \n {problemList}\n {problemOther}\n
\n \n );\n\n return (\n \n {problemPlaceholderMarkup}\n {problemMarkup}\n \n );\n};\n\nexport default Problem;\n","import {\n Button,\n Col,\n Icon,\n Modal,\n ModalBody,\n ModalContent,\n ModalFooter,\n ModalHeader,\n Placeholder,\n PlaceholderContent,\n PlaceholderInput,\n PlaceholderParagraph,\n Row,\n Text,\n useToggle,\n} from '@met/react-components';\nimport moment from 'moment';\nimport React, { Fragment, useEffect, useState } from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport LmrOptions from '../../../../../../components/LmrOptions';\nimport { useLocale } from '../../../../../../hooks';\nimport { useRepairItemsContext } from '../../../RepairItemsContext';\nimport LmrDefinitionModal from '../../WarrantyInformation/components/LmrDefinitionModal';\nimport {\n PlaceholderGapRow,\n PlaceholderSquareContent,\n SerialNumberImg,\n ToolInfoImage,\n ToolInfoImageWrapper,\n} from '../styled';\n\nconst ToolInfo = () => {\n const {\n loadingProduct,\n manufactureDate,\n product,\n purchaseDate,\n serialNumber,\n serialNumberUnreadable,\n proofOfPurchaseIncluded,\n proofOfPurchaseNotIncluded,\n warrantyEvaluation,\n } = useRepairItemsContext();\n const { isCaLocale, isEnLocale } = useLocale();\n const [showWarrantyModal, toggleWarrantyModal] = useToggle(false);\n const [showLmrModal, toggleLmrModal] = useToggle(false);\n const [showProofOfPurchaseModal, toggleProofOfPurchaseModal] = useToggle(false);\n const [showSerialNumberModal, toggleSerialNumberModal] = useToggle(false);\n const [toolManufactureDate, setToolManufactureDate] = useState(null);\n const [toolPurchaseDate, setToolPurchaseDate] = useState(null);\n\n useEffect(() => {\n if (manufactureDate) {\n setToolManufactureDate(moment(manufactureDate).format('MM/DD/YYYY'));\n }\n }, [manufactureDate]);\n\n useEffect(() => {\n if (purchaseDate) {\n setToolPurchaseDate(moment(purchaseDate).format('MM/DD/YYYY'));\n }\n }, [manufactureDate]);\n\n const toolInfoTitle = (\n \n \n \n \n
\n \n
\n );\n\n const canadaLmrLines = product && (\n \n );\n\n const usLmrLines = product && (\n \n );\n\n const warrantyLines = isCaLocale() ? canadaLmrLines : usLmrLines;\n\n const serialNumberLine =\n serialNumber || !serialNumberUnreadable ? (\n {serialNumber}\n ) : (\n serialNumberUnreadable && (\n \n \n \n )\n );\n\n const manufactureLine = manufactureDate ? (\n {toolManufactureDate}\n ) : (\n \n \n \n );\n\n const purchaseDateLine = purchaseDate ? (\n {toolPurchaseDate}\n ) : (!warrantyEvaluation && serialNumber && !purchaseDate && proofOfPurchaseIncluded) ||\n (warrantyEvaluation === null && serialNumberUnreadable && proofOfPurchaseIncluded) ||\n (warrantyEvaluation && serialNumber && !purchaseDate && proofOfPurchaseIncluded) ? (\n \n \n \n ) : (\n \n \n \n );\n\n const warrantyEligibility = warrantyEvaluation ? (\n \n \n \n ) : (!warrantyEvaluation && serialNumber && !purchaseDate && proofOfPurchaseIncluded) ||\n (warrantyEvaluation === null && serialNumberUnreadable && proofOfPurchaseIncluded) ? (\n \n \n \n ) : warrantyEvaluation === null &&\n ((serialNumberUnreadable && proofOfPurchaseNotIncluded) ||\n (serialNumber && manufactureDate && purchaseDate) ||\n (serialNumber && !manufactureDate && !purchaseDate && proofOfPurchaseNotIncluded)) ? (\n \n \n \n ) : (\n \n \n \n );\n\n const toolInfoPlaceholderMarkup = loadingProduct && (\n \n {toolInfoTitle}\n \n \n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n
\n \n );\n\n const toolInfoMarkup = !loadingProduct && product && (\n \n \n {toolInfoTitle}\n
\n \n \n \n \n {product.skuAlias}\n \n \n \n {product.description}\n \n \n
\n \n \n \n \n \n \n
\n \n {serialNumberLine}\n
\n \n \n \n \n \n \n
\n \n {manufactureLine}\n
\n \n \n \n \n \n \n
\n \n {purchaseDateLine}\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n {warrantyEligibility}\n \n
\n \n \n \n \n \n \n \n \n \n \n \n {warrantyLines}\n \n
\n \n \n \n \n \n \n
\n \n );\n\n const underWarrantyModalMarkup = (\n \n \n \n \n \n \n \n \n
\n \n \n
\n \n \n \n \n \n \n );\n\n const proofOfPurchaseModalMarkup = (\n \n \n \n \n \n \n \n \n
\n \n \n
\n \n \n \n \n \n \n );\n\n const serialNumberModalMarkup = (\n \n \n \n \n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n \n
\n \n \n \n \n \n \n );\n\n return (\n \n {toolInfoPlaceholderMarkup}\n {toolInfoMarkup}\n {underWarrantyModalMarkup}\n toggleLmrModal()} />\n {proofOfPurchaseModalMarkup}\n {serialNumberModalMarkup}\n \n );\n};\n\nexport default ToolInfo;\n","import { Button, Col, Modal, Row } from 'antd';\nimport { TextInput } from '@met/react-components';\nimport React, { Fragment } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useRepairItemsContext } from '../../../RepairItemsContext';\nimport { Icon } from '@met/react-components';\nimport { useToggle } from '../../../../../../hooks';\n\nconst TagReference = () => {\n const intl = useIntl();\n const { product, isServiceEligible, tagNumber, tagNumberInvalid, setTagNumber, setUnsavedChanges } =\n useRepairItemsContext();\n\n const [showReferenceModal, toggleReferenceModal] = useToggle(false);\n\n const handleTagNumberChange = (updatedTagNumber) => {\n if (tagNumber !== updatedTagNumber) {\n setUnsavedChanges(true);\n setTagNumber(updatedTagNumber);\n }\n };\n\n const tagNumberTitle = (\n \n \n \n \n
\n \n \n \n
\n
\n );\n\n const tagNumberRef = isServiceEligible && product && (\n \n {tagNumberTitle}\n \n \n handleTagNumberChange(e.target.value)}\n invalid={tagNumberInvalid}\n data-test-id='tagNumberInput'\n data-hj-allow\n />\n \n
\n \n );\n\n const referenceModalMarkup = (\n \n \n ,\n ]}\n >\n \n \n );\n\n return (\n \n {tagNumberRef}\n {referenceModalMarkup}\n \n );\n};\n\nexport default TagReference;\n","import ProductDetail from './ProductDetail';\n\nexport default ProductDetail;\n","import { Alert, Button, Card, CardBody, Col, Grid, Row, useToggle } from '@met/react-components';\nimport Enumerable from 'linq';\nimport React, { Fragment, useEffect, useRef, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { Prompt, useHistory, useLocation } from 'react-router';\nimport { toast } from 'react-toastify';\nimport { StringParam, useQueryParam } from 'use-query-params';\nimport { NotFound } from '../../../../../components/PageError';\nimport { ProductSearchModal } from '../../../../../components/ProductSearchModal';\nimport { handleNavigateAway } from '../../../../../helpers/navigation';\nimport { batteriesActions, productsActions } from '../../../../../store';\nimport { useRepairItemsContext } from '../../RepairItemsContext';\nimport RepairItemsList from '../../../components/RepairItemsList';\nimport { useRepairProcessContext } from '../../../RepairProcessContext';\nimport Included from './components/Included';\nimport Problem from './components/Problem';\nimport ToolInfo from './components/ToolInfo';\nimport TagReference from './components/TagReference';\n\nexport const ProductDetail = () => {\n const dispatch = useDispatch();\n const intl = useIntl();\n const history = useHistory();\n const location = useLocation();\n const problemRef = useRef(null);\n\n const { repairItems, setRepairItems } = useRepairProcessContext();\n const {\n uploadingProofOfPurchase,\n product,\n sku,\n setSku,\n isServiceEligible,\n getRepairItem,\n setRepairItem,\n setUserTriedSubmit,\n validate,\n serialNumber,\n serialNumberUnreadable,\n shouldScroll,\n setShouldScroll,\n unsavedChanges,\n problemsInvalid,\n } = useRepairItemsContext();\n\n const [guidParam, setGuidParam] = useQueryParam('g', StringParam); // eslint-disable-line no-unused-vars\n\n const [usingExistingItem, setUsingExistingItem] = useState(false);\n const [notFound, setNotFound] = useState(false);\n\n const [showSearchModal, toggleSearchModal] = useToggle(false);\n\n useEffect(() => {\n if (!serialNumber && !serialNumberUnreadable && !guidParam) {\n history.push(`/repairprocess/warrantyinformation/${sku}`);\n }\n }, []);\n\n useEffect(() => {\n if (shouldScroll) {\n if (problemsInvalid === true) {\n problemRef.current.scrollIntoView(false);\n }\n setShouldScroll(false);\n }\n }, [shouldScroll]);\n\n useEffect(() => {\n let pathParts = location.pathname.split('/');\n pathParts = pathParts.filter(part => {\n if (part && part !== '') {\n return part;\n }\n });\n\n if (pathParts[1] === 'productdetail') {\n setSku(pathParts[2]);\n\n if (guidParam) {\n let existingRepairItem = Enumerable.from(repairItems).firstOrDefault(x => x.guid === guidParam);\n\n if (existingRepairItem) {\n setUsingExistingItem(true);\n setRepairItem(existingRepairItem);\n } else {\n history.replace('/repairprocess/addanother');\n }\n }\n }\n }, [location.pathname]);\n\n useEffect(() => {\n let existingRepairItem = Enumerable.from(repairItems).firstOrDefault(x => x.guid === guidParam);\n\n if (existingRepairItem) {\n setUsingExistingItem(true);\n setRepairItem(existingRepairItem);\n }\n }, [guidParam]);\n\n useEffect(() => {\n if (sku !== '') {\n dispatch(productsActions.getProduct(sku)).catch(payload => {\n if (payload.response.status === 400 || payload.response.status === 404) {\n setNotFound(true);\n }\n\n toast.error(intl.formatMessage({ id: 'productDetail.getProductError' }));\n });\n dispatch(batteriesActions.getBatteries()).catch(() => {\n toast.error(intl.formatMessage({ id: 'productDetail.getBatteriesError' }));\n });\n }\n }, [sku]);\n\n useEffect(() => {\n if (product && product.isBattery) {\n dispatch(batteriesActions.getBatteryBySku(product.sku));\n } else {\n dispatch(batteriesActions.clearSelectedBattery());\n }\n }, [product]);\n\n const handleSubmitClick = () => {\n setUserTriedSubmit(true);\n\n if (validate()) {\n if (usingExistingItem) {\n let otherRepairItems = repairItems.filter((r, i) => {\n return r.guid !== guidParam;\n });\n\n setRepairItems([...otherRepairItems, getRepairItem()]);\n } else {\n setRepairItems([...repairItems, getRepairItem()]);\n }\n\n if (usingExistingItem) {\n toast.success(intl.formatMessage({ id: 'productDetail.repairItemSaveSuccess' }), { autoClose: 5000 });\n } else {\n toast.success(intl.formatMessage({ id: 'productDetail.repairItemAddSuccess' }), { autoClose: 5000 });\n }\n\n history.push('/repairprocess/addanother');\n } else {\n toast.error(intl.formatMessage({ id: 'productDetail.pleaseCorrectLabel' }), { autoClose: 5000 });\n }\n\n setShouldScroll(true);\n };\n\n const handleCancelClick = () => {\n history.push('/repairprocess/addanother');\n };\n\n if (notFound) {\n return ;\n }\n\n const toolNotEligibleMessage = !isServiceEligible && (\n \n \n \n );\n\n const toolInfoMarkup = isServiceEligible && (\n \n \n \n \n \n );\n\n const tagNumberMarkup = isServiceEligible && (\n \n \n \n \n \n );\n\n const problemMarkup = isServiceEligible && (\n \n \n \n \n \n );\n\n const includedMarkup = isServiceEligible && (\n \n \n \n \n \n );\n\n const buttonMarkup = isServiceEligible ? (\n \n \n \n \n \n
\n \n
\n ) : (\n \n \n \n \n \n
\n \n
\n );\n\n return (\n \n \n {toolNotEligibleMessage}\n \n \n {toolInfoMarkup}\n {tagNumberMarkup}\n {problemMarkup}\n {includedMarkup}\n \n \n \n \n \n \n \n \n
\n {buttonMarkup}\n \n \n \n handleNavigateAway(location, unsavedChanges, intl.formatMessage({ id: 'general.unsavedChangesWarning' }))\n }\n />\n \n );\n};\n\nexport default ProductDetail;\n","import RepairItems from './RepairItems';\n\nexport default RepairItems;\n","import React, { useEffect, useState } from 'react';\nimport { useHistory, useLocation } from 'react-router-dom';\nimport { PageLoader } from '../../../components';\nimport { WarrantyInformation, ProductDetail } from './components';\nimport { RepairItemsProvider } from './RepairItemsContext';\nimport WarrantyEvaluation from './components/WarrantyInformation/components/WarrantyEvaluation';\n\nconst RepairItems = () => {\n const location = useLocation();\n const history = useHistory();\n\n const [showWarrantyInformation, setShowWarrantyInformation] = useState(false);\n const [showProductDetail, setShowProductDetail] = useState(false);\n\n useEffect(() => {\n let pathParts = location.pathname.split('/');\n pathParts = pathParts.filter(part => {\n if (part && part !== '') {\n return part;\n }\n });\n\n // If SKU is not specified in URL\n // Ex. /repairprocess/warrantyinformation/285720\n if (pathParts.length < 3) {\n history.replace('/repairprocess/addanother');\n }\n\n let repairItemsStep = pathParts[1].toLowerCase();\n\n if (repairItemsStep === 'warrantyinformation') {\n setShowWarrantyInformation(true);\n setShowProductDetail(false);\n } else if (repairItemsStep === 'productdetail') {\n setShowProductDetail(true);\n setShowWarrantyInformation(false);\n } else {\n history.replace('/repairprocess/addanother');\n }\n }, [location.pathname]);\n\n const warrantyInformationMarkup = showWarrantyInformation && ;\n\n const productDetailMarkup = showProductDetail && ;\n\n return (\n \n {warrantyInformationMarkup}\n {productDetailMarkup}\n \n );\n};\n\nexport default RepairItems;\n","import Enumerable from 'linq';\nimport React, { createContext, useContext, useEffect, useState } from 'react';\n\nimport { useUser, useFeatureToggles } from '../../../hooks';\nimport useAddresses from '../../../hooks/useAddresses';\nimport { stripNonNumeric } from '../../../helpers/formatter';\n\nconst ShippingContext = createContext({\n packagesCount: 1,\n setPackagesCount: () => {},\n packagesCountInvalid: false,\n setPackagesCountInvalid: () => {},\n shippingAddress: {},\n setShippingAddress: () => {},\n shippingAddressInvalid: false,\n setShippingAddressInvalid: () => {},\n validate: () => {},\n getShippingInfo: () => {},\n setShippingInfo: () => {},\n batteryRestrictedStates: [],\n shippingAddressIsRestricted: false,\n accountInfoInvalid: false,\n setAccountInfoInvalid: () => {},\n});\n\nconst useShippingContext = () => useContext(ShippingContext);\n\nconst ShippingProvider = ({ children }) => {\n const { batteryRecycle } = useFeatureToggles();\n const { email, lastName, firstName, phoneNumber, preferredContactMethod, userMetadataIncomplete } = useUser();\n const { states } = useAddresses();\n\n const [packagesCount, setPackagesCount] = useState(1);\n const [packagesCountInvalid, setPackagesCountInvalid] = useState(false);\n const [shippingAddress, setShippingAddress] = useState({});\n const [shippingAddressInvalid, setShippingAddressInvalid] = useState(false);\n const [shippingAddressIsRestricted, setShippingAddressIsRestricted] = useState(false);\n const [batteryRestrictedStates, setBatteryRestrictedStates] = useState(null);\n const [accountInfoInvalid, setAccountInfoInvalid] = useState(false);\n\n useEffect(() => {\n if (states && states.length > 0) {\n let restrictedStates = Enumerable.from(states)\n .where(x => x.hasBatteryRestrictions === true)\n .select(x => x.abbreviation)\n .toArray();\n\n setBatteryRestrictedStates(restrictedStates);\n }\n }, [states]);\n\n useEffect(() => {\n if (shippingAddress && batteryRestrictedStates) {\n if (batteryRestrictedStates.includes(shippingAddress.state)) {\n setShippingAddressIsRestricted(true);\n } else {\n setShippingAddressIsRestricted(false);\n }\n }\n }, [batteryRestrictedStates, shippingAddress]);\n\n useEffect(() => {\n if (shippingAddress && shippingAddress.addressLine1) {\n setShippingAddressInvalid(false);\n }\n }, [shippingAddress]);\n\n useEffect(() => {\n if (firstName && lastName && phoneNumber) {\n setAccountInfoInvalid(false);\n }\n }, [firstName, lastName, phoneNumber]);\n\n const validate = batteryIncluded => {\n let isValid = true;\n\n if (packagesCount === 0) {\n if (!batteryRecycle) {\n setPackagesCountInvalid(true);\n isValid = false;\n }\n }\n if (!shippingAddress.addressLine1) {\n setShippingAddressInvalid(true);\n isValid = false;\n }\n if (batteryIncluded && shippingAddressIsRestricted) {\n setShippingAddressInvalid(true);\n isValid = false;\n }\n if (userMetadataIncomplete()) {\n setAccountInfoInvalid(true);\n isValid = false;\n }\n\n return isValid;\n };\n\n const getShippingInfo = () => {\n return {\n email,\n lastName,\n firstName,\n phoneNumber: stripNonNumeric(phoneNumber),\n packagesCount,\n shippingAddress,\n preferredContactMethod,\n };\n };\n\n const setShippingInfo = shipping => {\n setPackagesCount(shipping.packagesCount);\n setShippingAddress(shipping.shippingAddress);\n };\n\n return (\n \n {children}\n \n );\n};\n\nexport { ShippingContext, useShippingContext, ShippingProvider };\n","import React from 'react';\nimport { Modal, Button } from 'antd';\nimport { CloseOutlined } from '@ant-design/icons';\nimport { FormattedMessage } from 'react-intl';\n\nconst MaxPackagesAlertModal = ({ showModal, handleConfirmClick }) => {\n return (\n }\n visible={showModal}\n title={}\n footer={\n \n }\n onCancel={handleConfirmClick}\n destroyOnClose={true}\n >\n \n \n \n \n );\n};\n\nexport default MaxPackagesAlertModal;\n","import { Button, Card, Col, InputNumber, Row, Typography, Space } from 'antd';\nimport React, { useEffect, useState } from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { useShippingContext } from '../ShippingContext';\nimport { PlusOutlined, MinusOutlined } from '@ant-design/icons';\nimport MaxPackagesAlertModal from './MaxPackagesAlertModal';\n\nconst isAddressCanadian = address => {\n if (address.countryCode) {\n return address.countryCode.toLowerCase() === 'can' || address.countryCode.toLowerCase() === 'ca';\n } else {\n return false;\n }\n};\n\nconst Packages = () => {\n const minPackages = 1;\n const { Text } = Typography;\n\n const {\n packagesCount,\n setPackagesCount,\n packagesCountInvalid,\n setPackagesCountInvalid,\n shippingAddress,\n } = useShippingContext();\n\n const [isEnabled, setIsEnabled] = useState(true);\n const [maxPackages, setMaxPackages] = useState(8);\n const [shouldShowMaxPackagesModal, setShouldShowMaxPackagesModal] = useState(false);\n\n useEffect(() => {\n setPackagesCountInvalid(false);\n }, [packagesCount]);\n\n useEffect(() => {\n if (shippingAddress && isAddressCanadian(shippingAddress)) {\n setIsEnabled(false);\n setMaxPackages(1);\n } else {\n setMaxPackages(8);\n setIsEnabled(true);\n }\n }, [shippingAddress]);\n\n const handleMaxPackagesModalClick = e => {\n setShouldShowMaxPackagesModal(false);\n };\n\n const handlePackagesCountChange = updatedPackagesCount => {\n if (!updatedPackagesCount) return;\n if (packagesCount !== updatedPackagesCount) {\n if (updatedPackagesCount > maxPackages) {\n setShouldShowMaxPackagesModal(true);\n setPackagesCount(maxPackages);\n } else {\n setPackagesCount(updatedPackagesCount);\n }\n }\n };\n\n const maxPackagesAlert = shouldShowMaxPackagesModal && (\n \n );\n\n const warningMarkup = packagesCountInvalid && (\n \n \n \n \n
\n );\n\n return (\n \n \n
\n \n \n \n
\n \n
\n
\n \n \n handlePackagesCountChange(e)}\n disabled={!isEnabled}\n value={packagesCount}\n />\n
\n \n \n \n \n \n \n
\n \n \n \n
\n \n
\n {warningMarkup}\n
\n \n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n
\n \n );\n }\n\n const handleShippingAddressChange = updatedShippingAddress => {\n if (shippingAddress.id !== updatedShippingAddress.id) {\n setShippingAddress(updatedShippingAddress);\n }\n };\n\n const generateAddressText = address => {\n return address.addressLine2 ? (\n \n {address.addressLine1} {address.addressLine2}, {address.city}, {address.state}, {address.postalCode}{' '}\n {address.countryCode}\n \n ) : (\n \n {address.addressLine1}, {address.city}, {address.state}, {address.postalCode} {address.countryCode}\n \n );\n };\n\n const editButtonMarkup = address => {\n if (shippingAddress && shippingAddress.id === address.id) {\n return (\n onEditAddressClick(address)}>\n \n \n );\n }\n };\n\n const defaultAddressMarkup = defaultUserAddress && (\n \n \n \n \n \n \n \n
\n \n \n \n handleShippingAddressChange(defaultUserAddress)}\n data-test-id='default-user-address'\n />\n
\n \n \n {editButtonMarkup(defaultUserAddress)}\n \n
\n \n );\n\n const otherAddressesList =\n userAddresses &&\n userAddresses.map((userAddress, index) => {\n return (\n \n \n handleShippingAddressChange(userAddress)}\n data-test-id={`other-user-address-${index}`}\n />\n \n \n {editButtonMarkup(userAddress)}\n \n
\n );\n });\n\n const otherAddressesMarkup = (defaultUserAddress || (userAddresses && userAddresses.length > 0)) && (\n \n \n \n \n \n \n \n
\n {otherAddressesList}\n \n \n \n \n
\n \n );\n\n const noAddressesMarkup = !defaultUserAddress && (!userAddresses || (userAddresses && userAddresses.length === 0)) && (\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n \n \n \n
\n \n );\n\n const addressInvalidMarkup = shippingAddressInvalid && (\n \n \n \n \n \n \n
\n );\n\n const accountInfoMarkup = user && (\n \n \n \n \n \n
\n \n {name}\n \n \n {formatPhoneNumber(phoneNumber)}\n \n \n {email}\n \n {accountNumber && (\n \n {accountNumber}\n \n )}\n \n {' '}\n \n \n \n
\n \n \n \n \n
\n \n );\n\n const accountInfoInvalidMarkup = accountInfoInvalid && (\n \n \n \n \n \n \n
\n );\n\n return (\n \n \n \n \n \n \n \n \n \n \n
\n \n
\n {defaultAddressMarkup}\n {otherAddressesMarkup}\n {noAddressesMarkup}\n {addressInvalidMarkup}\n {accountInfoMarkup}\n {accountInfoInvalidMarkup}\n \n \n \n );\n};\n\nShippingInfo.propTypes = {\n onEditAddressClick: PropTypes.func,\n onAddAddressClick: PropTypes.func,\n onEditProfileClick: PropTypes.func,\n};\n\nexport default ShippingInfo;\n","import {\n Button,\n Card,\n CardBody,\n Col,\n Grid,\n Modal,\n ModalBody,\n ModalContent,\n ModalFooter,\n ModalHeader,\n Row,\n useToggle,\n} from '@met/react-components';\nimport Enumerable from 'linq';\nimport React, { Fragment, useEffect, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { Prompt, useHistory } from 'react-router';\nimport { toast } from 'react-toastify';\n\nimport { AddressModal } from '../../../components/AddressModal';\nimport { UserMetadataModal } from '../../../components/UserMetadataModal';\nimport { handleNavigateAway } from '../../../helpers/navigation';\nimport { useAddresses, useLocale, useFeatureToggles } from '../../../hooks';\nimport { countriesActions, statesActions, usersActions } from '../../../store';\nimport CaShippingRestrictionWarning from '../components/CaShippingRestrictionWarning';\nimport UsShippingRestrictionWarning from '../components/UsShippingRestrictionWarning';\nimport RepairItemsList from '../components/RepairItemsList';\nimport { useRepairProcessContext } from '../RepairProcessContext';\nimport Packages from './components/Packages';\nimport ShippingInfo from './components/ShippingInfo';\nimport { ShippingProvider, useShippingContext } from './ShippingContext';\n\nconst Shipping = props => {\n return (\n \n \n \n );\n};\n\nconst isAddressCanadian = address => {\n if (address.countryCode) {\n return address.countryCode.toLowerCase() === 'can' || address.countryCode.toLowerCase() === 'ca';\n } else {\n return false;\n }\n};\n\nexport const ShippingContent = () => {\n const history = useHistory();\n const intl = useIntl();\n const dispatch = useDispatch();\n const { defaultUserAddress } = useAddresses();\n const { batteryRecycle } = useFeatureToggles();\n\n const {\n validate,\n setShippingAddress,\n shippingAddress,\n getShippingInfo,\n setShippingInfo,\n shippingAddressIsRestricted,\n shippingAddressInvalid,\n setPackagesCount,\n packagesCount,\n } = useShippingContext();\n\n const { isEnLocale } = useLocale();\n\n const { repairItems, shipping, setShipping } = useRepairProcessContext();\n\n const [currentAddress, setCurrentAddress] = useState({});\n\n const [isOnlyRecycle, setIsOnlyRecycle] = useState(false);\n\n const [showAddressModal, toggleAddressModal] = useToggle(false);\n const [showUserMetadataModal, toggleUserMetadataModal] = useToggle(false);\n const [showShippingRestrictedModal, toggleShippingRestrictedModal] = useToggle(false);\n\n useEffect(() => {\n if (shipping.shippingAddress) {\n setShippingInfo(shipping);\n }\n }, []);\n useEffect(() => {\n if (repairItems.length === 0) {\n history.replace('/repairprocess/addanother');\n }\n if (batteryRecycle) {\n if (repairItems.every(x => x.isRecycled)) {\n setIsOnlyRecycle(true);\n setPackagesCount(0);\n } else {\n setIsOnlyRecycle(false);\n }\n }\n }, [repairItems]);\n\n useEffect(() => {\n getUser();\n\n dispatch(countriesActions.getCountries()).catch(() => {\n toast.error(intl.formatMessage({ id: 'address.loadingCountriesErrorMessage' }), { autoClose: false });\n });\n dispatch(statesActions.getStates()).catch(() => {\n toast.error(intl.formatMessage({ id: 'address.loadingStatesErrorMessage' }), { autoClose: false });\n });\n }, [dispatch]);\n\n useEffect(() => {\n if (defaultUserAddress && !currentAddress.id && !shipping.shippingAddress && !shippingAddress.id) {\n setShippingAddress(defaultUserAddress);\n setCurrentAddress(defaultUserAddress);\n }\n }, [defaultUserAddress]);\n\n useEffect(() => {\n if (shippingAddress && isAddressCanadian(shippingAddress)) {\n if (packagesCount > 1) {\n setPackagesCount(1);\n }\n\n if (isEnLocale()) {\n toast.error(intl.formatMessage({ id: 'repairDetails.caShippingRestrictionToast' }));\n }\n }\n }, [shippingAddress]);\n\n const getUser = () => {\n return dispatch(usersActions.getCurrentUser()).catch(() => {\n toast.error(intl.formatMessage({ id: 'profile.loadingUserErrorMessage' }), { autoClose: false });\n });\n };\n\n const isUsLocale = isEnLocale();\n\n const handleSubmitClick = () => {\n let batteryIncluded =\n Enumerable.from(repairItems).firstOrDefault(x => x.batteryIncluded !== '') ||\n Enumerable.from(repairItems).firstOrDefault(x => x.isBattery);\n\n if (validate(batteryIncluded)) {\n setShipping(getShippingInfo());\n history.push('/repairprocess/confirmation');\n } else {\n if (batteryIncluded && shippingAddressIsRestricted) {\n toggleShippingRestrictedModal();\n }\n\n toast.error(intl.formatMessage({ id: 'shipping.pleaseCorrectLabel' }), { autoClose: 5000 });\n }\n };\n\n const handleBackClick = () => {\n history.push('/repairprocess/addanother');\n };\n\n const handleEditAddressClick = address => {\n handleClearAddressValidation();\n setCurrentAddress(address);\n toggleAddressModal();\n };\n\n const handleAddAddressClick = () => {\n handleClearAddressValidation();\n setCurrentAddress({});\n toggleAddressModal();\n };\n\n const handleClearAddressValidation = () => {\n dispatch(usersActions.clearAddressValidation());\n };\n const handleConfirmEditClick = (\n id,\n defaultShippingAddress,\n addressLine1,\n addressLine2,\n city,\n state,\n countryCode,\n postalCode,\n name,\n isResidential,\n latitude,\n longitude\n ) => {\n dispatch(\n usersActions.upsertUserAddress(\n id,\n defaultShippingAddress,\n addressLine1,\n addressLine2,\n city,\n state,\n countryCode,\n postalCode,\n name,\n isResidential,\n latitude,\n longitude\n )\n )\n .then(payload => {\n getUser().then(() => {\n toast.success(intl.formatMessage({ id: 'address.addressUpdated' }), { autoClose: 5000 });\n handleClearAddressValidation();\n toggleAddressModal();\n\n if (payload.data.data) {\n setShippingAddress(payload.data.data);\n }\n });\n })\n .catch(error => {\n toast.error(intl.formatMessage({ id: 'address.saveChangesError' }), { autoClose: 5000 });\n });\n };\n\n const shippingTitle = (\n \n \n \n \n
\n \n
\n );\n\n const packagesMarkup = batteryRecycle ? isOnlyRecycle ? <> : : isUsLocale && ;\n\n const restrictionMarkup = isUsLocale ? (\n \n \n \n ) : (\n \n \n \n );\n\n const shippingRestrictedModalMarkup = shippingAddressIsRestricted && shippingAddressInvalid && (\n \n \n \n \n \n \n \n \n
\n \n \n https://www.milwaukeetool.com/Support/Find-A-Service-Center\n \n ),\n }}\n />\n
\n \n \n \n \n \n \n );\n\n return (\n \n \n {shippingTitle}\n \n \n {packagesMarkup}\n \n \n \n \n \n \n \n \n {restrictionMarkup}\n \n
\n \n \n \n \n handleSubmitClick()}\n data-test-id='submit-button'\n disabled={repairItems.length < 1}\n >\n \n \n
\n \n
\n \n \n {shippingRestrictedModalMarkup}\n \n handleNavigateAway(\n location,\n repairItems.length > 0,\n intl.formatMessage({ id: 'general.unsavedChangesWarning' })\n )\n }\n />\n \n \n );\n};\n\nexport default Shipping;\n","import Shipping from './Shipping';\n\nexport default Shipping;\n","import { PageLoader } from '@met/react-components';\nimport React, { useEffect } from 'react';\nimport { useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\nimport { useHistory } from 'react-router';\nimport { toast } from 'react-toastify';\nimport { PageLoaderWrapper } from '../../components/Layout/BaseLayout/styled';\nimport { usersActions } from '../../store';\n\nconst VerifyEmail = props => {\n const intl = useIntl();\n const dispatch = useDispatch();\n const history = useHistory();\n\n useEffect(() => {\n dispatch(usersActions.verifyUserEmail(props.match.params.token))\n .then(() => {\n history.push('/login');\n toast.success(intl.formatMessage({ id: 'verifyEmail.updateEmailSuccessMessage' }));\n })\n .catch(er => {\n let messageId = 'verifyEmail.verifyErrorMessage';\n if (er.response.status === 400) messageId = 'verifyEmail.verifyErrorMessageBadRequest';\n toast.error(intl.formatMessage({ id: messageId }), {\n autoClose: false,\n });\n });\n }, [dispatch, intl]);\n\n return (\n \n \n \n );\n};\n\nexport default VerifyEmail;\n","import { Col, Icon, LoadingDots, Row, Text } from '@met/react-components';\nimport React, { Fragment, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useAddresses } from '../../../../hooks';\n\nconst ShippingDetails = ({\n name,\n line1,\n city,\n state,\n countryCode,\n postalCode,\n trackingNumber,\n shippoStatus,\n numberOfPackages,\n loadingServiceOrder,\n resubmittingShippingLabel,\n toggleAddressModal,\n resubmitShippingLabel,\n isAx,\n}) => {\n const intl = useIntl();\n const {\n validatingAddress,\n addressIsValid,\n addressValidationWarnings,\n addressValidationErrors,\n validateAddress,\n } = useAddresses();\n const [validatedAddress, setValidatedAddress] = useState(false);\n\n const handleValidateAddressClick = () => {\n setValidatedAddress(true);\n\n validateAddress(line1, '', city, state, countryCode, postalCode);\n };\n\n if (!line1) {\n return (\n \n \n \n );\n }\n\n const validatingAddressMarkup = validatedAddress && validatingAddress && ;\n\n const validateAddressMarkup = !trackingNumber && !validatedAddress && !validatingAddress && (\n handleValidateAddressClick()} className='mt-1 mb-3'>\n \n \n );\n\n const warningsMarkup =\n validatedAddress &&\n !validatingAddress &&\n addressValidationWarnings &&\n addressValidationWarnings.map((warning, index) => {\n return (\n \n \n \n \n {warning.text}\n
\n );\n });\n\n const errorsMarkup =\n validatedAddress &&\n !validatingAddress &&\n addressValidationErrors &&\n addressValidationErrors.map((error, index) => {\n return (\n \n \n \n \n {error.text}\n
\n );\n });\n\n const addressIsValidMarkup = validatedAddress && !validatingAddress && addressIsValid && (\n \n \n \n \n \n \n \n
\n );\n\n const resubmitLabelButtonMarkup = !isAx && !trackingNumber && !(loadingServiceOrder || resubmittingShippingLabel) && (\n resubmitShippingLabel()} style={{ padding: '5px' }}>\n \n \n );\n const editAddressButtonMarkup = !(loadingServiceOrder || resubmittingShippingLabel) && !isAx && (\n toggleAddressModal()} className='mt-2'>\n \n \n );\n\n const trackingNumberMarkup =\n loadingServiceOrder || resubmittingShippingLabel ? (\n \n ) : (\n trackingNumber || intl.formatMessage({ id: 'general.na' })\n );\n return (\n \n \n \n \n {editAddressButtonMarkup}\n \n {name}\n {line1}\n \n {city}, {state} {postalCode}\n \n {validatingAddressMarkup}\n {validateAddressMarkup}\n \n \n \n \n {resubmitLabelButtonMarkup}\n \n {trackingNumberMarkup}\n \n \n \n \n \n {intl.formatMessage({ id: `admin.serviceOrder.shippoStatus.${shippoStatus}` })}\n \n \n \n \n \n {numberOfPackages}\n \n \n {addressIsValidMarkup}\n {warningsMarkup}\n {errorsMarkup}\n \n \n );\n};\n\nexport default ShippingDetails;\n","import { Col, Text } from '@met/react-components';\nimport moment from 'moment';\nimport React, { Fragment } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nconst OrderDetails = ({ submittedAt, serviceOrderNumber, accountNumber, status }) => {\n const intl = useIntl();\n\n let formattedSubmittedAt = () => {\n return moment(submittedAt)\n .local()\n .format('MM/DD/YYYY h:mm:ss A');\n };\n\n return (\n \n \n \n \n \n {formattedSubmittedAt()}\n \n \n \n \n \n {serviceOrderNumber || intl.formatMessage({ id: 'general.na' })}\n \n \n \n \n \n {accountNumber || intl.formatMessage({ id: 'general.na' })}\n \n \n \n \n \n \n {status\n ? intl.formatMessage({ id: 'admin.serviceOrders.statuses.' + status })\n : intl.formatMessage({ id: 'general.na' })}\n \n \n \n );\n};\n\nexport default OrderDetails;\n","import {\n Card,\n CardBody,\n Col\n} from '@met/react-components';\nimport { Table, Typography } from 'antd';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport React, { useState, useEffect } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { notificationsActions } from '../../../../store'\nimport moment from 'moment';\nimport {NotificationTypes} from '../../../../enums';\n\nconst CommunicationHistory = (serviceOrder) => {\n const { Text } = Typography;\n const dispatch = useDispatch();\n const intl = useIntl();\n const [communicationTableData, setCommunicationTableData] = useState([]);\n\n useEffect(() => {\n if(serviceOrder?.serviceOrder?.id) {\n getCommunicationHistory();\n }\n }, [serviceOrder]);\n\n const getCommunicationHistory = async () => {\n try {\n const response = await dispatch(notificationsActions.getNotificationHistoryByServiceOrder(serviceOrder.serviceOrder.id))\n setCommunicationTableData(response.data.data)\n } catch (error) {\n toast.error(intl.formatMessage({ id: 'admin.serviceOrder.communicationHistory.error' }));\n }\n };\n\n const getEmailType = (notificationType) => {\n switch(notificationType) {\n case NotificationTypes.WILLCALL:\n return 'Will Call';\n case NotificationTypes.DENIEDWARRANTY:\n return 'Denied Warranty';\n default:\n return notificationType;\n }}\n\n const columns = [\n {\n name: 'emailTemplate',\n id: 'notificationType',\n dataIndex: 'notificationType',\n title: intl.formatMessage({ id: 'admin.serviceOrder.communicationHistory.emailTemplate' }),\n render: record => {return getEmailType(record)}\n },\n {\n name: 'emailAddress',\n id: 'email',\n dataIndex: 'email',\n title: intl.formatMessage({ id: 'admin.serviceOrder.communicationHistory.email' }),\n },\n {\n name: 'dateTime',\n id: 'createdAt',\n dataIndex: 'createdAt',\n title: intl.formatMessage({ id: 'admin.serviceOrder.communicationHistory.dateSent' }),\n defaultSortOrder: 'descend',\n sorter: (a, b) => moment(a.createdAt).unix() - moment(b.createdAt).unix(),\n render: date => {\n return {moment.utc(date).local().format('MM/DD/YYYY hh:mm A')};\n },\n },\n {\n name: 'deliveryStatus',\n id: 'latestDeliveryEvent',\n dataIndex: 'latestDeliveryEvent',\n title: intl.formatMessage({ id: 'admin.serviceOrder.communicationHistory.deliveryStatus' }),\n render: record => {return record?.emailEventTypeId}\n },\n {\n name: 'eventStatus',\n id: 'latestEngagementEvent',\n dataIndex: 'latestEngagementEvent',\n title: intl.formatMessage({ id: 'admin.serviceOrder.communicationHistory.eventStatus' }),\n render: record => {return record?.emailEventTypeId}\n },\n ];\n \n return (\n <>\n {communicationTableData.length > 0 &&\n \n \n \n \n \n
\n \n \n \n \n }\n \n );\n}\n\nexport default CommunicationHistory;","import {FormattedMessage, useIntl} from \"react-intl\";\nimport React, {useEffect, useState} from \"react\";\nimport {Card, Descriptions, Typography} from \"antd\";\nimport {NotificationTypes, PaymentMethodTypes, WarrantyOptionTypes} from \"../../../../enums\";\nimport dayjs from \"dayjs\";\nimport {StyledDescriptions} from \"../styled\";\nimport {useServiceOrder} from \"../../../../hooks\";\nimport {useDispatch} from \"react-redux\";\n\nconst { Text } = Typography;\n\nconst DeniedWarranty = ({serviceOrder}) => {\n const intl = useIntl();\n const dispatch = useDispatch();\n \n const {id, warrantyOption, warrantyOptionSubmittedDate, paymentMethodId, purchaseOrderNumber} = serviceOrder;\n \n const { getServiceOrderEstimatedScrapDate} = useServiceOrder();\n\n const [estimatedScrapDate, setEstimatedScrapDate] = useState(null);\n \n useEffect(() => {\n if(id) {\n getEstimatedScrapDate()\n }\n }, [id])\n \n const getEstimatedScrapDate = async () => {\n try {\n let response = await dispatch(getServiceOrderEstimatedScrapDate(id, NotificationTypes.DENIEDWARRANTY));\n \n if(response?.data?.data?.estimatedScrapDate) {\n setEstimatedScrapDate(response.data.data.estimatedScrapDate)\n }\n } catch (e) {\n message.error(intl.formatMessage({ id: 'general.genericError' }))\n }\n }\n\n const getPaymentTypeString = (paymentMethodTypeId) => {\n switch (paymentMethodTypeId) {\n case PaymentMethodTypes.CREDITCARD:\n return intl.formatMessage({ id: 'admin.serviceOrders.deniedWarranty.creditCard' })\n case PaymentMethodTypes.PURCHASEORDER:\n return intl.formatMessage({ id: 'admin.serviceOrders.deniedWarranty.purchaseOrder' })\n case PaymentMethodTypes.PAYLATER:\n return intl.formatMessage({ id: 'admin.serviceOrders.deniedWarranty.payLater' })\n default:\n return intl.formatMessage({ id: 'admin.serviceOrders.deniedWarranty.unknown' })\n }\n }\n \n const decisionDateMarkup = (\n \n \n {\n warrantyOptionSubmittedDate ? \n dayjs(warrantyOptionSubmittedDate).format('MM/DD/YYYY h:mm:ss A')\n :\n intl.formatMessage({ id: 'admin.serviceOrders.deniedWarranty.pending' })\n }\n \n \n );\n \n const repairDecisionMarkup = warrantyOption && (\n \n {warrantyOption}\n \n );\n \n const estimatedScrapDateMarkup = (\n \n {\n estimatedScrapDate ?\n {dayjs(estimatedScrapDate).format('MM/DD/YYYY')}\n :\n \n \n \n\n }\n \n );\n \n const purchaseOrderMarkup = purchaseOrderNumber && (\n \n {purchaseOrderNumber}\n \n );\n \n const paymentMethodTypeMarkup = warrantyOption === WarrantyOptionTypes.REPAIR && paymentMethodId && (\n \n {getPaymentTypeString(paymentMethodId)}\n \n );\n \n return (\n \n \n {estimatedScrapDateMarkup}\n {decisionDateMarkup}\n {repairDecisionMarkup}\n {paymentMethodTypeMarkup}\n {purchaseOrderMarkup}\n \n \n );\n};\n\nexport default DeniedWarranty;","import {FormattedMessage} from \"react-intl\";\nimport React from \"react\";\nimport {Card, Space, Typography} from \"antd\";\n\nconst { Text } = Typography;\n\nconst ContactInfo = ({ name, email, phone}) => {\n \n return (\n \n \n \n \n \n {name}\n {email}\n {phone}\n \n \n );\n};\n\nexport default ContactInfo;","import {\n Breadcrumb,\n BreadcrumbItem,\n Button,\n Card,\n CardBody,\n Col,\n Icon,\n Link,\n Loader,\n Row,\n Text,\n useToggle,\n} from '@met/react-components';\nimport Enumerable from 'linq';\nimport React, { Fragment, useEffect, useRef, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useParams } from 'react-router';\nimport { toast } from 'react-toastify';\n\nimport { AddressModal } from '../../../../components/AddressModal';\nimport { NotFound } from '../../../../components/PageError';\nimport { downloadBlob } from '../../../../helpers/downloadBlob';\nimport { useServiceOrder } from '../../../../hooks';\nimport { countriesActions, serviceOrdersActions, statesActions } from '../../../../store';\nimport ShippingDetails from './ShippingDetails';\nimport OrderDetails from './OrderDetails';\nimport ServiceOrderLine from './ServiceOrderLine';\nimport CommunicationHistory from './CommunicationHistory';\nimport DeniedWarranty from \"./DeniedWarranty\";\nimport ContactInfo from \"./ContactInfo\";\n\nconst ServiceOrder = () => {\n const dispatch = useDispatch();\n const intl = useIntl();\n const { generateIssuesList, generateWarningsList } = useServiceOrder();\n\n const pdfDownloadingToast = useRef(null);\n\n const { id } = useParams();\n\n const loadingServiceOrder = useSelector(state => state.serviceOrders.getServiceOrder.isLoading);\n const resubmittingShippingLabel = useSelector(state => state.serviceOrders.resubmitSubmitServiceOrderLabel.isLoading);\n const serviceOrder = useSelector(state => state.serviceOrders.getServiceOrder.data);\n const generatingPaperwork = useSelector(state => state.serviceOrders.getServiceOrdersPdf.isLoading);\n\n const [showAddressModal, toggleAddressModal] = useToggle(false);\n\n const [notFound, setNotFound] = useState(false);\n const [primaryTool, setPrimaryTool] = useState({});\n const [otherTools, setOtherTools] = useState([]);\n const [issues, setIssues] = useState([]);\n const [warnings, setWarnings] = useState([]);\n const [pdfRequested, setPdfRequested] = useState(false);\n const [currentAddress, setCurrentAddress] = useState({});\n const [isAx, setIsAx] = useState(false);\n\n useEffect(() => {\n if (id) {\n getServiceOrder();\n }\n }, [id]);\n \n useEffect(() => {\n dispatch(countriesActions.getCountries()).catch(() => {\n toast.error(intl.formatMessage({ id: 'address.loadingCountriesErrorMessage' }), { autoClose: false });\n });\n dispatch(statesActions.getStates()).catch(() => {\n toast.error(intl.formatMessage({ id: 'address.loadingStatesErrorMessage' }), { autoClose: false });\n });\n }, [dispatch]);\n\n useEffect(() => {\n if (serviceOrder && serviceOrder.serviceOrderLines) {\n let lines = serviceOrder.serviceOrderLines;\n let explicitPrimaryTool = Enumerable.from(lines).firstOrDefault(x => x.isPrimaryTool);\n\n setPrimaryTool(explicitPrimaryTool || lines[0]);\n setOtherTools(\n explicitPrimaryTool\n ? Enumerable.from(lines)\n .where(x => !x.isPrimaryTool)\n .toArray()\n : lines.slice(1, lines.length)\n );\n\n setIssues(generateIssuesList(serviceOrder));\n setWarnings(generateWarningsList(serviceOrder));\n }\n\n if (serviceOrder) {\n if (serviceOrder.serviceOrderGroupId) {\n setIsAx(false);\n } else {\n setIsAx(true);\n }\n var address = {\n id: 1000,\n name: serviceOrder.addressName,\n addressLine1: serviceOrder.addressLine1,\n addressLine2: '',\n city: serviceOrder.city,\n state: serviceOrder.state,\n countryCode: serviceOrder.countryCode,\n postalCode: serviceOrder.postalCode,\n addressIsResidential: serviceOrder.addressIsResidential,\n };\n setCurrentAddress(address);\n }\n }, [serviceOrder]);\n\n useEffect(() => {\n if (serviceOrder?.trackingNumber && serviceOrder?.serviceOrderGroupId) {\n if (pdfRequested) {\n printPaperwork();\n }\n }\n }, [serviceOrder, pdfRequested]);\n\n const printPaperwork = () => {\n setPdfRequested(false);\n\n dispatch(serviceOrdersActions.getServiceOrdersPdf(serviceOrder.serviceOrderGroupId))\n .then(response => {\n downloadBlob(`${serviceOrder.serviceOrderGroupId}.pdf`, response.data);\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'orderSummary.pdfDownloadError' }));\n })\n .finally(() => {\n toast.dismiss(pdfDownloadingToast.current);\n });\n };\n\n const handlePrintPaperworkClick = () => {\n setPdfRequested(true);\n pdfDownloadingToast.current = toast.info(intl.formatMessage({ id: 'orderSummary.pdfDownloading' }), {\n autoClose: false,\n });\n };\n\n const getServiceOrder = () => {\n dispatch(serviceOrdersActions.getServiceOrder(id)).catch(payload => {\n if (payload.response.status === 404) {\n setNotFound(true);\n } else {\n toast.error(intl.formatMessage({ id: 'admin.serviceOrder.loadingError' }));\n }\n });\n };\n\n const resubmitShippingLabel = () => {\n dispatch(serviceOrdersActions.resubmitServiceOrderLabel(serviceOrder.id))\n .then(payload => {\n if (payload.data.data.trackingNumber) {\n toast.success(intl.formatMessage({ id: 'admin.serviceOrder.resubmitLabelSuccess' }), { autoClose: 5000 });\n } else if (payload.data.id) {\n toast.error(intl.formatMessage({ id: 'admin.serviceOrder.resubmitLabelRefresh' }), { autoClose: 5000 });\n } else {\n toast.error(intl.formatMessage({ id: 'admin.serviceOrder.resubmitLabelFailure' }), { autoClose: 5000 });\n }\n })\n .catch(() => {\n toast.error(intl.formatMessage({ id: 'admin.serviceOrder.resubmitLabelFailure' }), { autoClose: 5000 });\n });\n };\n\n const handleCancelAddressClick = () => {\n toggleAddressModal();\n };\n\n const handleConfirmAddressEditClick = (\n id,\n defaultShippingAddress,\n addressLine1,\n addressLine2,\n city,\n state,\n countryCode,\n postalCode,\n addressName,\n addressIsResidential,\n latitude,\n longitude\n ) => {\n serviceOrder.addressLine1 = addressLine1;\n serviceOrder.AddressName = addressName;\n serviceOrder.city = city;\n serviceOrder.state = state;\n serviceOrder.PostalCode = postalCode;\n serviceOrder.countryCode = countryCode;\n dispatch(serviceOrdersActions.updateServiceOrderAddress(serviceOrder))\n .then(() => {\n toggleAddressModal();\n toast.success(intl.formatMessage({ id: 'address.addressUpdated' }), { autoClose: 5000 });\n })\n .catch(error => {\n toast.error(intl.formatMessage({ id: 'address.saveChangesError' }), { autoClose: 5000 });\n });\n };\n\n if (notFound) {\n return ;\n }\n\n if (!serviceOrder || loadingServiceOrder) {\n return ;\n }\n\n const primaryToolMarkup = primaryTool && (\n \n \n \n \n \n \n
\n \n
\n \n \n \n );\n\n const otherToolsList =\n otherTools.length > 0 &&\n otherTools.map((tool, index) => {\n return (\n \n );\n });\n\n const otherToolsMarkup = otherToolsList && (\n \n \n \n \n \n \n
\n \n
\n {otherToolsList}\n \n \n );\n\n const problemsListItems =\n serviceOrder && serviceOrder.problemDescriptionList && serviceOrder.problemDescriptionList.length > 0 ? (\n serviceOrder.problemDescriptionList.map((problem, index) => {\n return {problem};\n })\n ) : (\n \n \n \n );\n\n let includedListItems =\n serviceOrder && serviceOrder.included && serviceOrder.included.length > 0 ? (\n serviceOrder.included.split(', ').map((included, index) => {\n return {included};\n })\n ) : (\n \n \n \n );\n\n const issuesList =\n issues &&\n issues.map((issue, index) => {\n return (\n \n \n \n \n {issue}\n
\n );\n });\n\n const warningsList =\n warnings &&\n warnings.map((warning, index) => {\n return (\n \n \n \n \n {warning}\n
\n );\n });\n\n const issuesAndWarningsMarkup = (issuesList.length > 0 || warningsList.length > 0) && (\n \n \n \n \n \n \n
\n \n \n {issuesList}\n {warningsList}\n \n
\n \n \n );\n\n const downloadMarkup = serviceOrder && serviceOrder.trackingNumber && (\n \n \n \n \n
\n \n
\n );\n \n const deniedWarrantyMarkup = serviceOrder && (serviceOrder.warrantyOption || serviceOrder.status === 10) && (\n \n );\n \n return (\n \n \n \n \n \n
\n \n
\n \n \n \n \n Service Orders Admin\n \n {id}\n \n \n {issuesAndWarningsMarkup}\n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n
\n \n \n \n \n \n \n
\n \n resubmitShippingLabel()}\n toggleAddressModal={() => toggleAddressModal()}\n loadingServiceOrder={loadingServiceOrder}\n resubmittingShippingLabel={resubmittingShippingLabel}\n isAx={isAx}\n />\n
\n {downloadMarkup}\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n
\n \n \n \n \n {deniedWarrantyMarkup}\n \n \n {primaryToolMarkup}\n {otherToolsMarkup}\n \n \n {}}\n onSetDefaultClick={() => {}}\n onSaveChangesClick={handleConfirmAddressEditClick}\n />\n
\n \n );\n};\n\nexport default ServiceOrder;\n","import { useAuth0, withAuthenticationRequired } from '@auth0/auth0-react';\nimport { GlobalStyle } from './components/GlobalStyle';\nimport React, { Fragment, useEffect } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { Route, Switch, useHistory } from 'react-router';\n\nimport { AccessDenied, BaseLayout, Layout, NotFound, RepairProcessLayout } from './components';\nimport Admin from './containers/Admin/Admin';\nimport Product from './containers/Admin/components/ProductsTab/Product';\nimport Dashboard from './containers/Dashboard/Dashboard';\nimport Home from './containers/Home/Home';\nimport Login from './containers/Login';\nimport Preferences from './containers/Preferences/Preferences';\nimport RecoverEmail from './containers/RecoverEmail';\nimport RepairDetail from './containers/RepairDetail/RepairDetail';\nimport AddAnother from './containers/RepairProcess/AddAnother';\nimport Confirmation from './containers/RepairProcess/Confirmation';\nimport OrderSummary from './containers/RepairProcess/OrderSummary';\nimport RepairItems from './containers/RepairProcess/RepairItems';\nimport Shipping from './containers/RepairProcess/Shipping';\nimport VerifyEmail from './containers/VerifyEmail/VerifyEmail';\nimport ServiceOrder from './containers/Admin/components/ServiceOrdersTab/ServiceOrder';\nimport { Permissions } from './enums';\nimport { auth0 } from './helpers/auth0';\nimport useUser from './hooks/useUser';\nimport { NAVIGATION } from './store/types';\nimport './styles/app.scss';\nimport { useFeatureToggles } from './hooks';\nimport { getSupportCenterRedirectRoute } from './helpers/supportCenterRedirect';\n\nconst AppRoute = ({ component: Component, layout: Layout, isProtected, title, ...rest }) => {\n const dispatch = useDispatch();\n const history = useHistory();\n\n // Trigger navigation event in Redux\n useEffect(() => {\n history.listen(() => {\n dispatch({ type: NAVIGATION });\n });\n }, []);\n\n const render = props => {\n return (\n \n \n \n );\n };\n\n document.title = title ? `${title} | Milwaukee Service Dashboard` : `Milwaukee Service Dashboard`;\n\n return ;\n};\n\nconst ProtectedRoute = ({ component, ...rest }) => {\n const { isAuthenticated } = useAuth0();\n const { redirectToSupportCenter } = useFeatureToggles();\n\n if (!isAuthenticated) {\n return ;\n }\n\n if (redirectToSupportCenter) {\n const { path, computedMatch } = rest;\n const redirectRoute = getSupportCenterRedirectRoute(path, computedMatch.params);\n if (redirectRoute) {\n window.location.href = redirectRoute;\n }\n }\n\n return ;\n};\n\nconst AdminRoute = ({ permissionRequired, secondaryPermissionRequired, component, ...rest }) => {\n const { permissions, isAdmin } = useUser();\n if (permissionRequired) {\n if (permissions()[permissionRequired] || permissions()[secondaryPermissionRequired]) {\n return ;\n } else {\n return ;\n }\n } else if (isAdmin) {\n return ;\n } else {\n return ;\n }\n};\n\n// The router runs FIRST matching on the incoming path.\nconst App = () => {\n const { isAuthenticated, getAccessTokenSilently } = useAuth0();\n\n if (isAuthenticated) {\n auth0.setGetAccessTokenSilently(getAccessTokenSilently);\n }\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default App;\n","import React from 'react';\nimport { useIntl } from 'react-intl';\nimport PageError from '../PageError';\n\nconst ServerError = () => {\n const intl = useIntl();\n\n return (\n \n );\n};\n\nexport default ServerError;\n","import { library } from '@fortawesome/fontawesome-svg-core';\n\nimport {\n faUsers,\n faCalendarAlt,\n faCaretLeft,\n faCaretRight,\n} from '@fortawesome/free-solid-svg-icons';\n\nimport { faEdit } from '@fortawesome/free-regular-svg-icons';\n\nlibrary.add(faEdit, faCalendarAlt, faCaretLeft, faCaretRight, faUsers);\n","import {IntlProvider} from 'react-intl';\nimport {connect} from 'react-redux';\n\nimport {LOCALES_INTL_LOCALE} from './utils';\n\nconst mapStateToProps = ({locales: {locale, messages}}) => ({\n key: LOCALES_INTL_LOCALE[locale],\n locale,\n messages\n});\n\nexport default connect(mapStateToProps)(IntlProvider);","// In production, we register a service worker to serve assets from local cache.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on the \"N+1\" visit to a page, since previously\n// cached resources are updated in the background.\n\n// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.\n// This link also includes instructions on opting out of this behavior.\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport default function register() {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Lets check if a service worker still exists or not.\n checkValidServiceWorker(swUrl);\n } else {\n // Is not local host. Just register service worker\n registerValidSW(swUrl);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the old content will have been purged and\n // the fresh content will have been added to the cache.\n // It's the perfect time to display a \"New content is\n // available; please refresh.\" message in your web app.\n console.log('New content is available; please refresh.');\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n if (\n response.status === 404 ||\n response.headers.get('content-type').indexOf('javascript') === -1\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n","export default {\n isEnabled: category => {\n return isEnabled(category);\n },\n canLogGTM: () => {\n return isEnabled('C0002') || isEnabled('2');\n },\n canLogAI: () => {\n return isEnabled('C0002') || isEnabled('2');\n },\n};\n\nconst isEnabled = category => {\n if (window.OnetrustActiveGroups) {\n let activeGroups = window.OnetrustActiveGroups.split(',').filter(Boolean);\n return activeGroups.includes(category);\n }\n};\n","import TagManager from 'react-gtm-module';\nimport oneTrust from './oneTrust';\n\nlet isInitialized = false;\nlet gtmId = window.location.host === 'service.milwaukeetool.ca' ? 'GTM-5GDBV9F' : 'GTM-WHMZXVB';\n\nlet init = function() {\n if (oneTrust.canLogGTM()) {\n TagManager.initialize({ gtmId: gtmId });\n isInitialized = true;\n } else {\n isInitialized = false;\n }\n};\n\nconst googleTagManager = {\n pageView: function(path, trackerNames, title) {\n if (oneTrust.canLogGTM()) {\n if (!isInitialized) {\n init();\n }\n let pageData = {\n event: 'PageView',\n url: path,\n trackerNames: trackerNames,\n title: title,\n };\n TagManager.dataLayer(pageData);\n }\n },\n event: function(category, action, label) {\n if (oneTrust.canLogGTM()) {\n if (!isInitialized) {\n init();\n }\n let eventData = {\n event: category,\n action: action,\n label: label,\n };\n TagManager.dataLayer(eventData);\n }\n },\n};\n\nexport default googleTagManager;\n","import './App.less';\n\nimport { Auth0Provider } from '@auth0/auth0-react';\nimport { theme as metTheme } from '@met/react-components';\nimport { notification } from 'antd';\nimport theme from './styled-config';\nimport '@met/react-components/dist/polyfill';\nimport { ConnectedRouter } from 'connected-react-router';\nimport React from 'react';\nimport 'react-app-polyfill/ie11';\nimport 'react-dates/initialize';\nimport 'react-dates/lib/css/_datepicker.css';\nimport ReactDOM from 'react-dom';\nimport { Provider } from 'react-redux';\nimport { Route } from 'react-router';\nimport { toast } from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css';\nimport { ThemeProvider } from 'styled-components';\nimport { QueryParamProvider } from 'use-query-params';\nimport { AppInsightsContext } from '@microsoft/applicationinsights-react-js';\nimport { reactPlugin } from './helpers/appInsights';\n\nimport App from './App';\nimport { BaseProvider } from './components/Layout';\nimport BaseLayout from './components/Layout/BaseLayout/BaseLayout';\nimport ServerError from './components/PageError/types/ServerError';\nimport './config/fontAwesome';\nimport { getAiInstrumentationKey, setAiInstrumentationKey } from './helpers/sessionStorage';\nimport history from './history';\nimport IntlProvider from './locales/IntlProvider';\nimport { unregister } from './registerServiceWorker';\nimport configureStore from './store/configureStore';\nimport googleTagManager from './helpers/googleTagManager';\n\n// configure react toastify\ntoast.configure({\n autoClose: 8000,\n draggable: false,\n position: toast.POSITION.BOTTOM_RIGHT,\n});\n\n// Configure Antd notifications\nnotification.config({\n placement: 'bottomRight',\n});\n\n// Get the application-wide store instance, prepopulating with state from the server where available.\nconst initialState = window.initialReduxState;\nconst store = configureStore(history, initialState);\n\nconst rootElement = document.getElementById('root');\n\n// Auth0 redirect that routes user to right place after login\nconst onRedirectCallback = appState => {\n let redirect = appState?.returnTo || window.location.pathname;\n\n history.replace(`/login/?r=${redirect}`);\n};\n\nconst getConfiguration = () => {\n return fetch('/api/v1/configuration').then(response => {\n return response.json();\n });\n};\n\nhistory.listen((location, action) => {\n googleTagManager.pageView(`${location.pathname}${location.search}`);\n window.scrollTo(0, 0);\n});\n\ngetConfiguration()\n .then(config => {\n const { auth0, appInsights } = config.data;\n\n // Configure client-side AppInsights\n if (appInsights.instrumentationKey && getAiInstrumentationKey() === '') {\n setAiInstrumentationKey(appInsights.instrumentationKey);\n }\n\n let completeTheme = { ...theme, ...metTheme };\n\n ReactDOM.render(\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ,\n rootElement\n );\n })\n .catch(() => {\n ReactDOM.render(\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ,\n rootElement\n );\n });\n\nunregister();\n","import { connectRouter, routerMiddleware } from 'connected-react-router';\nimport { applyMiddleware, combineReducers, compose, createStore } from 'redux';\nimport thunk from 'redux-thunk';\n\nimport * as Locales from './Locales';\nimport * as Users from './Users';\nimport * as Notifications from './Notifications';\nimport * as ServiceOrders from './ServiceOrders';\nimport * as Products from './Products';\nimport * as Batteries from './Batteries';\nimport * as Countries from './Countries';\nimport * as States from './States';\nimport * as ProofOfPurchase from './ProofOfPurchase';\nimport * as ServiceCenters from './ServiceCenters';\nimport * as ProductProblems from './ProductProblems';\nimport * as ProductIncluded from './ProductIncluded';\nimport * as Announcements from './Announcements';\nimport * as Configuration from './Configuration';\nimport * as SignalR from './SignalR';\nimport * as Recycling from './Recycling';\nimport * as LmrCategoryTypes from './LmrCategoryTypes';\nimport * as SerialNumber from './SerialNumber';\nimport * as Reports from './Reports';\nimport * as GenesysChatWidget from './GenesysChatWidget';\nimport * as IntlSync from './IntlSync';\nimport * as Square from './Square';\n\nexport default function configureStore(history, initialState) {\n const reducers = {\n locales: Locales.reducer,\n users: Users.reducer,\n notifications: Notifications.reducer,\n serviceOrders: ServiceOrders.reducer,\n products: Products.reducer,\n batteries: Batteries.reducer,\n countries: Countries.reducer,\n states: States.reducer,\n userMetadata: Users.userMetadataReducer,\n proofOfPurchase: ProofOfPurchase.reducer,\n serviceCenters: ServiceCenters.reducer,\n productProblems: ProductProblems.reducer,\n productIncluded: ProductIncluded.reducer,\n announcements: Announcements.reducer,\n configuration: Configuration.reducer,\n signalR: SignalR.reducer,\n recycling: Recycling.reducer,\n lmrCategoryTypes: LmrCategoryTypes.reducer,\n serialNumber: SerialNumber.reducer,\n reports: Reports.reducer,\n chatSchedule: GenesysChatWidget.reducer,\n intlSync: IntlSync.reducer,\n square: Square.reducer,\n };\n\n const middleware = [thunk, routerMiddleware(history)];\n\n // In development, use the browser's Redux dev tools extension if installed\n const enhancers = [];\n const isDevelopment = process.env.NODE_ENV === 'development';\n if (isDevelopment && typeof window !== 'undefined' && window.devToolsExtension) {\n enhancers.push(window.devToolsExtension());\n }\n\n const rootReducer = combineReducers({\n ...reducers,\n router: connectRouter(history),\n });\n\n return createStore(rootReducer, initialState, compose(applyMiddleware(...middleware), ...enhancers));\n}\n","import { adalFetch, AuthenticationContext, withAdalLogin } from 'react-adal';\n\nconst appId = '1f623664-c117-4337-82de-d7455344b25c';\nexport const adalConfig = {\n cacheLocation: 'localStorage',\n clientId: appId,\n redirectUri: 'https://' + window.location.host,\n endpoints: {\n api: appId,\n },\n postLogoutRedirectUri: window.location.origin,\n};\n\nexport const authContext = new AuthenticationContext(adalConfig);\n\nexport const adalApiFetch = (fetch, url, options) => {\n // only use the azure ad wrapper if we are actually logged in\n if (authContext.getCachedUser() !== null) {\n return adalFetch(authContext, adalConfig.endpoints.api, fetch, url, options);\n } else {\n return fetch(options);\n }\n};\n\nexport const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api);\n","import { runWithAdal } from 'react-adal';\nimport { authContext } from './helpers/azureAd';\n\nconst DO_NOT_LOGIN =\n window.location.host === 'service.milwaukeetool.com' || window.location.host === 'service.milwaukeetool.ca';\n\nrunWithAdal(\n authContext,\n () => {\n // eslint-disable-next-line\n require('./indexApp.js');\n },\n DO_NOT_LOGIN\n);\n"],"sourceRoot":""}
\n \n