\r\n \r\n \r\n
\r\n);\r\n\r\nexport default LoadingSkeleton;\r\n","import React from \"react\";\r\n\r\nimport \"./container.styles.scss\";\r\ninterface ContainerProps {\r\n children: any;\r\n}\r\n\r\nconst Container = ({ children }: ContainerProps) => (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {children}
\r\n);\r\n\r\nexport default Container;\r\n","import React from \"react\";\r\n\r\nimport \"./visuallyHidden.styles.scss\";\r\n\r\ninterface VisuallyHiddenProps {\r\n children: any;\r\n}\r\n\r\nconst VisuallyHidden = ({ children }: VisuallyHiddenProps) => (\r\n {children}
\r\n);\r\n\r\nexport default VisuallyHidden;\r\n","// react\r\nimport React, { useEffect, useState, useContext } from \"react\";\r\n\r\n// context\r\nimport ProductContext from \"../../context/ProductContext\";\r\n\r\n// components\r\nimport VisuallyHidden from \"../visuallyHidden/VisuallyHidden\";\r\n\r\n// styles\r\nimport \"./counter.styles.scss\";\r\n\r\ninterface CounterProps {\r\n min?: number;\r\n max?: number;\r\n onCountChanged?: (count: string) => void;\r\n onKeyPress?: (e: any) => void;\r\n}\r\n\r\nconst Counter = ({ min, max, onKeyPress }: CounterProps) => {\r\n const context: any = useContext(ProductContext);\r\n\r\n const {\r\n productDispatch,\r\n productState: { Quantity },\r\n }: {\r\n productDispatch: any;\r\n productState: {\r\n Quantity: string;\r\n };\r\n } = context;\r\n\r\n const [count, setStateCount]: [count: string, setStateCount: any] =\r\n useState(Quantity);\r\n\r\n const parsedCountInt = parseInt(count);\r\n const minCheck = (val: number) => (min ? val >= min : true);\r\n const maxCheck = (val: number) => (max ? val <= max : true);\r\n const setCountStringHandler = (count: any) => setStateCount(count.toString());\r\n\r\n const increment = () => {\r\n const updatedCount = parsedCountInt + 1;\r\n\r\n if (maxCheck(updatedCount)) setCountStringHandler(updatedCount);\r\n };\r\n\r\n const decrement = () => {\r\n const updatedCount = parsedCountInt - 1;\r\n\r\n if (minCheck(updatedCount)) return setCountStringHandler(updatedCount);\r\n };\r\n\r\n const numberChangeInput = (event: React.ChangeEvent\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Counter;\r\n","import React from \"react\";\r\n\r\nimport styled from \"styled-components\";\r\n\r\nimport \"./copy.styles.scss\";\r\n\r\ninterface CopyProps {\r\n element: any;\r\n children: any;\r\n props: any;\r\n}\r\n\r\nconst StyledCopy = styled.p``;\r\n\r\nexport const Copy = ({ element = \"p\", children, ...props }: CopyProps) => (\r\n \r\n \r\n {items &&\r\n items.map((item, i) => (\r\n
\r\n );\r\n};\r\n\r\nexport default TypeAhead;\r\n\r\n//https://stackoverflow.com/questions/42036865/react-how-to-navigate-through-list-by-arrow-keys\r\n","import React from \"react\";\r\n\r\nimport \"./formControl.styles.scss\";\r\n\r\ninterface FormControlProps {\r\n children: any;\r\n isInvalid?: any;\r\n}\r\n\r\nconst FormControl = ({ children, isInvalid }: FormControlProps) => (\r\n \r\n
\r\n )}\r\n {text}
\r\n ) : (\r\nPlease enter a valid product number.
\r\n )}\r\n \r\n);\r\n\r\nexport default ErrorMessage;\r\n","// react\r\nimport { useState, useEffect, useContext } from \"react\";\r\n\r\n// components\r\nimport Counter from \"../counter/Counter\";\r\nimport { Heading } from \"../heading/Heading\";\r\nimport { Copy } from \"../copy/Copy\";\r\nimport Shelf from \"../shelf/shelf.component\";\r\nimport Button from \"../button/Button\";\r\nimport TypeAhead from \"../typeahead/typeahead\";\r\nimport FormControl from \"../formControl/FormControl\";\r\nimport FormLabel from \"../formLabel/FormLabel\";\r\nimport ErrorMessage from \"../errorMessage/ErrorMessage\";\r\n\r\n// context\r\nimport InitialContext from \"../../context/InitialContext\";\r\nimport ProductContext from \"../../context/ProductContext\";\r\n\r\n// styles\r\nimport \"./searchForm.styles.scss\";\r\n\r\n// Parent: InventorySearchForm.tsx\r\n// we aren't using invalid input state yet. commented out state and function would make them work\r\nfunction SearchForm(\r\n { productNumberParent }: { productNumberParent: any },\r\n props: any,\r\n) {\r\n // context\r\n const initialContext: any = useContext(InitialContext);\r\n const productContext: any = useContext(ProductContext);\r\n\r\n const {\r\n productDispatch,\r\n productState: { ProductNumber },\r\n }: {\r\n productDispatch: any;\r\n productState: {\r\n ProductNumber: string;\r\n Quantity: string;\r\n isSubmitted: boolean;\r\n };\r\n } = productContext;\r\n\r\n const {\r\n initialState: {\r\n data: { BodyHeadline, BodyCopy },\r\n },\r\n }: {\r\n initialState: {\r\n data: { BodyHeadline: string; BodyCopy: string };\r\n };\r\n } = initialContext;\r\n\r\n // locally scoped hooks\r\n const [invalid, setInvalid] = useState(false);\r\n const [isFirstRun, setIsFirstRun] = useState(true);\r\n\r\n const onSubmitHandler = () =>\r\n productDispatch({\r\n type: \"SET_SUBMITTED\",\r\n payload: true,\r\n });\r\n\r\n useEffect(() => {\r\n \"\" === ProductNumber && !isFirstRun ? setInvalid(true) : setInvalid(false);\r\n setIsFirstRun(false);\r\n }, [ProductNumber]);\r\n\r\n const handleCounterChange = (count: string) =>\r\n productDispatch({\r\n type: \"SET_COUNTER_QUANTITY\",\r\n payload: count,\r\n });\r\n\r\n const productNumberContext = (product: string) =>\r\n productNumberParent(product);\r\n\r\n const handleInputChange = (productNumber?: string) => {\r\n if (productNumber) {\r\n const valueWithSpacesTrimmed = productNumber.trim();\r\n productNumberContext(valueWithSpacesTrimmed);\r\n }\r\n };\r\n\r\n const onSearchBoxKeyPress = (e: any) => {\r\n if (e && e.key === \"Enter\") {\r\n onSubmitHandler();\r\n }\r\n };\r\n\r\n const getProductFromQueryString = () => {\r\n const urlSearchParams = new URLSearchParams(window.location.search);\r\n const params = Object.fromEntries(urlSearchParams.entries());\r\n\r\n productNumberContext(params.sku ?? \"\");\r\n };\r\n\r\n useEffect(() => {\r\n getProductFromQueryString();\r\n }, []);\r\n\r\n // useEffect(() => {\r\n // console.log('productNumber changed', productNumber)\r\n // }, [productNumber]);\r\n\r\n return (\r\n <>\r\n\r\n \r\n \r\n {BodyHeadline}\r\n \r\n \r\n\r\n \r\n \r\n {BodyCopy}\r\n \r\n \r\n\r\n
\r\n \r\n );\r\n}\r\n\r\nexport default SearchForm;\r\n","// react\r\nimport { useContext, useEffect, useState } from \"react\";\r\n\r\n// context\r\nimport ProductContext from \"../../context/ProductContext\";\r\n\r\n// components\r\nimport { Heading } from \"../heading/Heading\";\r\nimport NonBreakingSpace from \"../nonbreakingSpace/NonBreakingSpace\";\r\n\r\n// styles\r\nimport \"./pricingAvailability.styles.scss\";\r\n\r\nexport enum AvailabilityOption {\r\n Pricing,\r\n Availability,\r\n NoResult,\r\n Discontinued,\r\n NoCatalogs,\r\n ComingSoon,\r\n}\r\n\r\ninterface PriceAvailablityProps {\r\n children: any;\r\n availabilityOption: AvailabilityOption;\r\n}\r\n\r\nconst PricingAvailability = (\r\n { children, availabilityOption }: PriceAvailablityProps,\r\n props: any,\r\n) => {\r\n const context: any = useContext(ProductContext);\r\n\r\n const { Pricing, Availability, NoResult, Discontinued, NoCatalogs } =\r\n AvailabilityOption;\r\n\r\n const {\r\n productState: { ProductNumber },\r\n }: {\r\n productState: {\r\n ProductNumber: string;\r\n };\r\n } = context;\r\n\r\n const [localProductNumber, setProductNumber] = useState(ProductNumber);\r\n\r\n const beforeProductNumberMsg = () => {\r\n switch (availabilityOption) {\r\n case Pricing:\r\n return `Pricing`;\r\n case Availability:\r\n return `Availability`;\r\n case NoResult:\r\n return `There are no results for`;\r\n case NoCatalogs:\r\n return `Sorry, we are unable to look up inventory details for`;\r\n default:\r\n return \"\";\r\n }\r\n };\r\n\r\n const afterProductNumberMsg = () => {\r\n switch (availabilityOption) {\r\n case Discontinued:\r\n return `has been discontinued.`;\r\n default:\r\n return ``;\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n setProductNumber(ProductNumber);\r\n }, [ProductNumber]);\r\n\r\n return (\r\n <>\r\n {localProductNumber && (\r\n \r\n \r\n \r\n \r\n \r\n Product Number\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Quantity \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default CartItem;\r\n","import { useContext, useState, createContext, useRef, useMemo } from \"react\";\r\n\r\nimport { CSSTransition } from \"react-transition-group\";\r\n\r\nimport \"./modal.styles.scss\";\r\n\r\nconst TriggersState = createContext();\r\n\r\nconst Store = (fn) => {\r\n const ref = useRef();\r\n let current = ref.current;\r\n\r\n if (!current) current = { v: fn() };\r\n\r\n return current.v;\r\n};\r\n\r\nexport const ModalWrapper = ({ children }) => {\r\n const state = useState(false);\r\n\r\n return (\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n {ProductTitle}\r\n \r\n \r\n {`SKU: ${SAPPricingInfo?.ProductId}`}\r\n \r\n \r\n {`Quantity: ${Quantity}`}\r\n \r\n \r\n {`${totalPriceStr} ${SAPPricingInfo?.CurrencyCode}`}\r\n \r\n \r\n {`MSRP: ${totalMSRPStr}`}\r\n \r\n
\r\n \r\n {ModalClose()}\r\n {children}\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nconst ModalBackdrop = () => (\r\n \r\n close\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default CartNavigation;\r\n","// react\r\nimport { useContext } from \"react\";\r\n\r\n// context\r\nimport ProductContext from \"../../context/ProductContext\";\r\n\r\n// components\r\nimport CartItem from \"./CartItem\";\r\n// import CartTotal from \"./CartTotal\";\r\nimport CartNavigation from \"./CartNavigation\";\r\nimport Shelf from \"../shelf/shelf.component\";\r\nimport { Heading } from \"../heading/Heading\";\r\n\r\n// styles\r\nimport \"./addToCartModal.styles.scss\";\r\nimport { useEffect } from \"react\";\r\n\r\nconst AddToCartModal = (...props: any) => {\r\n const context: any = useContext(ProductContext);\r\n\r\n const {\r\n productState: { Quantity },\r\n }: {\r\n productState: {\r\n Quantity: number;\r\n };\r\n } = context;\r\n\r\n const ItemDisplayHandler = () => (Quantity == 1 ? \"item\" : \"items\");\r\n\r\n useEffect(() => {\r\n ItemDisplayHandler();\r\n }, [Quantity]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AddToCartModal;\r\n","// react\r\nimport { useContext, useState, useEffect } from \"react\";\r\n\r\n// context\r\nimport ProductContext from \"../../context/ProductContext\";\r\n\r\n// helpers\r\nimport { legacyAddToCart } from \"../../helpers\";\r\n\r\n// components\r\nimport Button from \"../button/Button\";\r\nimport LoginLink from \"../loginLink/LoginLink\";\r\nimport AddToCartModal from \"../AddToCartModal/AddToCartModal\";\r\nimport { ModalWrapper, Modal, useTriggerState } from \"../modal/Modal\";\r\n\r\n// styles\r\nimport \"./pricing.styles.scss\";\r\n\r\ninterface TableCellProps {\r\n Label?: string;\r\n Value?: any;\r\n AdditionalInfo?: string;\r\n className?: string | undefined;\r\n children?: any;\r\n}\r\n\r\nconst TableCell = ({\r\n Label,\r\n Value,\r\n AdditionalInfo,\r\n className,\r\n children,\r\n}: TableCellProps) => (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n ({Quantity}) {ItemDisplayHandler()} added to your cart\r\n \r\n
\r\n \r\n {/*
\r\n \r\n {Label ? (\r\n
\r\n);\r\n\r\nfunction PricingSection() {\r\n const context: any = useContext(ProductContext);\r\n\r\n const {\r\n productState: {\r\n SAPLeadTime,\r\n IsUserLoggedIn,\r\n SAPPricingInfo,\r\n Quantity,\r\n ProductNumber,\r\n ProductStatus,\r\n User,\r\n PricingStatusMessage,\r\n },\r\n }: {\r\n productState: {\r\n SAPLeadTime: any;\r\n IsUserLoggedIn: boolean;\r\n SAPPricingInfo: any;\r\n ProductNumber: string;\r\n ProductStatus: any[];\r\n Quantity: number;\r\n User: any;\r\n PricingStatusMessage: string;\r\n };\r\n } = context;\r\n\r\n const handleAddToCartBtnOnClick = () =>\r\n legacyAddToCart(ProductNumber, Quantity, \"\", \"order\");\r\n\r\n const [unitPrice, setUnitPrice] = useState(null);\r\n const [unitMSRP, setUnitMSRP] = useState(null);\r\n const [totalPriceStr, setTotalPriceStr] = useState(\"\");\r\n const [totalMSRPStr, setTotalMSRPStr] = useState(\"\");\r\n const [localQty, setLocalQty] = useState(Quantity);\r\n\r\n const currencyConverter = (type: any, formatted: any) =>\r\n SAPPricingInfo?.RawPrice !== 0\r\n ? `${SAPPricingInfo?.Currency}${type?.toLocaleString(undefined, {\r\n minimumFractionDigits: 2,\r\n })} ${SAPPricingInfo?.CurrencyCode}`\r\n : formatted ?? \"\";\r\n\r\n const totalCalculator = (type: any) => (type ? type * (localQty ?? 1) : 0);\r\n\r\n const quantityHandler = () => {\r\n const totalPrice = totalCalculator(SAPPricingInfo?.RawPrice);\r\n const totalMSRP = totalCalculator(SAPPricingInfo?.RawMSRP);\r\n\r\n const unitPrice: any = currencyConverter(\r\n SAPPricingInfo?.RawPrice,\r\n SAPPricingInfo?.FormattedPrice,\r\n );\r\n\r\n setUnitPrice(unitPrice);\r\n\r\n const unitMSRP: any = currencyConverter(\r\n SAPPricingInfo?.RawMSRP,\r\n SAPPricingInfo?.FormattedMSRP,\r\n );\r\n\r\n setUnitMSRP(unitMSRP);\r\n\r\n const totalPriceStr: any = currencyConverter(\r\n totalPrice,\r\n SAPPricingInfo?.FormattedPrice,\r\n );\r\n\r\n setTotalPriceStr(totalPriceStr);\r\n\r\n const totalMSRPStr: any = currencyConverter(\r\n totalMSRP,\r\n SAPPricingInfo?.FormattedMSRP,\r\n );\r\n\r\n setTotalMSRPStr(totalMSRPStr);\r\n };\r\n\r\n const showPriceMessage = () => {\r\n return (\r\n ProductStatus[0]?.ProductStatus === \"Coming Soon\" &&\r\n SAPPricingInfo?.RawPrice === 0\r\n );\r\n };\r\n\r\n useEffect(() => {\r\n setLocalQty(Quantity);\r\n // eslint-disable-next-line\r\n }, [Quantity, ProductNumber]);\r\n\r\n useEffect(() => {\r\n quantityHandler();\r\n // eslint-disable-next-line\r\n }, [localQty, ProductNumber]);\r\n\r\n const TriggerModal = () => {\r\n const { isActive, onClick } = useTriggerState();\r\n\r\n return (\r\n {Label}
\r\n ) : null}\r\n\r\n {Value ? (\r\n {Value}
\r\n ) : null}\r\n\r\n {AdditionalInfo ? (\r\n \r\n {AdditionalInfo}\r\n
\r\n ) : null}\r\n {children}\r\n \r\n {showPriceMessage() ? (\r\n \r\n ) : (\r\n <>\r\n
\r\n \r\n ) : null}\r\n \r\n );\r\n}\r\n\r\nexport default PricingSection;\r\n","// react\r\nimport { useContext } from \"react\";\r\nimport _ from \"lodash\";\r\n\r\n// context\r\nimport ProductContext from \"../../context/ProductContext\";\r\n\r\n// component\r\nimport LoginLink from \"../loginLink/LoginLink\";\r\n\r\n// styles\r\nimport \"./AvailabilitySection.styles.scss\";\r\n\r\nconst AvailabilityTableRow = ({\r\n Location,\r\n CommittedQty,\r\n UOM,\r\n}: {\r\n Location: any;\r\n CommittedQty: any;\r\n UOM: any;\r\n}) => (\r\n \r\n
\r\n {!SAPLeadTime?.IsAddToCartHidden &&\r\n ProductStatus[0]?.ShowAddToCart && (\r\n \r\n
\r\n \r\n {SAPPricingInfo && IsUserLoggedIn ? (\r\n <>\r\n \r\n
\r\n \r\n {SAPPricingInfo &&\r\n IsUserLoggedIn &&\r\n !User?.IsUserLimited ? (\r\n \r\n \r\n \r\n \r\n ) : null}\r\n
\r\n )}\r\n \r\n )}\r\n | Stock Location | \r\nQty Available | \r\nUnit of Measure | \r\n
|---|
\r\n
\r\n )}\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\ninterface SAPLeadTimeProps {\r\n OutlineColor?: string;\r\n IconColor?: string;\r\n Icon?: string;\r\n SAPDelivaryDate?: string;\r\n SAPStatusCode?: string;\r\n Message?: string;\r\n}\r\n\r\nexport const LeadTimeSection = () => {\r\n const context: any = useContext(ProductContext);\r\n const {\r\n productState: { SAPLeadTime },\r\n }: {\r\n productState: {\r\n SAPLeadTime: SAPLeadTimeProps;\r\n };\r\n } = context;\r\n\r\n const delivaryDateHandler = () =>\r\n SAPLeadTime &&\r\n SAPLeadTime.SAPDelivaryDate &&\r\n SAPLeadTime.SAPStatusCode !== \"0\" &&\r\n SAPLeadTime.SAPStatusCode !== \"99\" &&\r\n SAPLeadTime.SAPStatusCode !== \"98\" &&\r\n SAPLeadTime.SAPStatusCode !== \"86\" ? (\r\n {` ${SAPLeadTime.SAPStatusCode} ${\r\n SAPLeadTime.SAPStatusCode === \"1\" ? \" Day - \" : \" Days - \"\r\n } ${SAPLeadTime.SAPDelivaryDate}`}\r\n ) : null;\r\n\r\n if (SAPLeadTime != null) {\r\n return (\r\n <>\r\n {SAPLeadTime ? (\r\n \r\n
\r\n \r\n ) : null}\r\n \r\n );\r\n } else {\r\n return null;\r\n }\r\n};\r\n\r\nconst AvailabilitySection = () => (\r\n \r\n \r\n {SAPLeadTime.Icon}\r\n
\r\n \r\n <>\r\n \r\n {delivaryDateHandler()}\r\n \r\n
\r\n \r\n
\r\n);\r\nexport default AvailabilitySection;\r\n","import React from \"react\";\r\n\r\nimport styled from \"styled-components\";\r\n\r\nimport \"./productStatusText.styles.scss\";\r\n\r\ninterface ProductStatusProps {\r\n mainText: string;\r\n mainTextColor: string;\r\n altText?: string;\r\n altTextColor?: string;\r\n}\r\n\r\nconst StyledHeading = styled.span``;\r\n\r\nexport const ProductStatusText = ({\r\n mainText,\r\n mainTextColor,\r\n altText = \"\",\r\n altTextColor = \"black\",\r\n}: ProductStatusProps) => (\r\n \r\n
\r\n \r\n
\r\n \r\n {mainText} \r\n {altText}\r\n
\r\n\r\n \r\n {localProductNumber.toUpperCase()}\r\n \r\n {ProductUrl ? (\r\n \r\n GO TO PRODUCT\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ) : (\r\n GO TO PRODUCT\r\n )}\r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default PdpLink;\r\n","import Shelf from \"./shelf/shelf.component\";\r\nimport PricingAvailability, {\r\n AvailabilityOption,\r\n} from \"./pricingAvailability/PricingAvailability\";\r\nimport PricingSection from \"./PricingSection/PricingSection\";\r\nimport AvailabilitySection from \"./AvailabilitySection/AvailabilitySection\";\r\nimport Message from \"./Message/Message\";\r\nimport { ProductStatusText } from \"./productStatus/ProductStatusText\";\r\nimport Link from \"./link/Link\";\r\nimport PdpLink from \"./pdpLink/PdpLink\";\r\nimport { LeadTimeSection } from \"./AvailabilitySection/AvailabilitySection\";\r\n\r\ninterface InventoryResultsPricingAndAvailibilityProps {\r\n isProductDiscontinued: boolean;\r\n ProductNumber: string;\r\n ProductStatus: any[];\r\n ReplacementProductText: string | null;\r\n ReplacementProductUrl: string | null;\r\n InventoryStatusMessage: string;\r\n}\r\n\r\nconst InventoryResultsPricingAndAvailibility = ({\r\n ProductStatus,\r\n isProductDiscontinued,\r\n ReplacementProductUrl,\r\n ReplacementProductText,\r\n InventoryStatusMessage,\r\n}: InventoryResultsPricingAndAvailibilityProps) => {\r\n // to prevent the chevron icon from breaking onto a new line by itself on small screens\r\n // we're wrapping the chevron and the last word of the text in their own span so they\r\n // will break onto a new line together\r\n const renderReplacementProductLinkText = () => {\r\n const wordsArray = ReplacementProductText?.split(\" \") ?? [];\r\n const lastWord = wordsArray.pop();\r\n\r\n return (\r\n <>\r\n {wordsArray.join(\" \") + \" \"}\r\n \r\n {lastWord}\r\n chevron_right\r\n \r\n \r\n );\r\n };\r\n\r\n return isProductDiscontinued ? (\r\n \r\n \r\n \r\n <>{renderReplacementProductLinkText()}\r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n {BodyHeadline}\r\n \r\n \r\n\r\n \r\n \r\n {UnAuthBodyCopy}\r\n \r\n \r\n\r\n
\r\n \r\n );\r\n}\r\n\r\nexport default SignIn;\r\n","// React\r\nimport { useState, useReducer, useEffect, useContext } from \"react\";\r\n\r\n// context\r\nimport ProductContext, { ProductProvider } from \"../context/ProductContext\";\r\nimport { initProductData, productReducer } from \"../context/productReducer\";\r\n\r\n// api\r\nimport getProduct from \"../api/product\";\r\nimport getUser from \"../api/user\";\r\n\r\n// Components\r\nimport LoadingSkeleton from \"./loadingSkeleton/loadingSkeleton.component\";\r\nimport Container from \"./container/Container\";\r\nimport InventorySearchForm from \"./InventorySearchForm\";\r\nimport InventoryNoResults from \"./InventoryNoResults\";\r\nimport InventoryResultsPricingAndAvailibility from \"./InventoryResultsPricingAndAvailibility\";\r\nimport SignIn from \"./SignIn/SignIn\";\r\n\r\nconst Inventory = () => {\r\n const context: any = useContext(ProductContext);\r\n\r\n const {\r\n productDispatch,\r\n productState: {\r\n IsUserLoggedIn,\r\n InventoryStatusCode,\r\n InventoryStatusMessage,\r\n isProductDiscontinued,\r\n ProductNumber,\r\n ProductStatus,\r\n Quantity,\r\n isSubmitted,\r\n ReplacementProductText,\r\n ReplacementProductUrl,\r\n },\r\n }: {\r\n productDispatch: any;\r\n productState: {\r\n IsUserLoggedIn: boolean;\r\n InventoryStatusCode: number;\r\n InventoryStatusMessage: string;\r\n isProductDiscontinued: boolean;\r\n ProductNumber: string;\r\n ProductStatus: any[];\r\n Quantity: string;\r\n isSubmitted: boolean;\r\n ReplacementProductText: string | null;\r\n ReplacementProductUrl: string | null;\r\n };\r\n } = context;\r\n\r\n const [localProductNumber, setLocalProductNumber] = useState(\"\");\r\n\r\n const [isLoading, setLoading] = useState(false);\r\n\r\n const scrollToResultsMobile = () => {\r\n const screenWidth: number = window.screen.width;\r\n const notMobileView = 481;\r\n if (ProductNumber && screenWidth < notMobileView) {\r\n const heroPxlHeight: number =\r\n document.getElementsByClassName(\"_hero\")[0].clientHeight;\r\n const boxPxlHeight: number =\r\n document.getElementsByClassName(\"box\")[0].clientHeight;\r\n const overlapDiff: number = boxPxlHeight - heroPxlHeight;\r\n const finalOffSet: number = boxPxlHeight + overlapDiff;\r\n window.parent.scrollTo({\r\n top: finalOffSet,\r\n behavior: \"smooth\",\r\n });\r\n }\r\n };\r\n\r\n const setQuery = (skuItemName: string, qty: string) => {\r\n const qtyAsInt: number = parseInt(qty);\r\n if (window.history.pushState) {\r\n let newUrl =\r\n window.location.protocol +\r\n \"//\" +\r\n window.location.host +\r\n window.location.pathname;\r\n\r\n if (skuItemName) {\r\n newUrl += \"?sku=\" + skuItemName;\r\n\r\n if (qtyAsInt > 1) newUrl += \"&qty=\" + qtyAsInt;\r\n }\r\n\r\n window.history.pushState({ path: newUrl }, \"\", newUrl);\r\n }\r\n };\r\n\r\n // skuParameterUrl and qtyParameterUrl are only used on the inital load if there are no url parameters\r\n // this is where the logic for the url to maintain state on redirect and refresh\r\n const getProductHandler = (\r\n skuParameterUrl: any = null,\r\n qtyParameterUrl: any = null,\r\n ) => {\r\n setLoading(true);\r\n setTimeout(() => {\r\n scrollToResultsMobile();\r\n }, 100);\r\n\r\n // these variables are used to determine if we are querying the product based on url or state from user\r\n const nonUrlProductSku = localProductNumber ?? \"\";\r\n const productSku =\r\n null !== skuParameterUrl ? skuParameterUrl : nonUrlProductSku;\r\n const nonUrlQty = Quantity ?? \"1\";\r\n const productQty = qtyParameterUrl ? qtyParameterUrl : nonUrlQty;\r\n\r\n getProduct({\r\n skuItemName: productSku,\r\n qty: productQty,\r\n }).then((data) => {\r\n setLoading(false);\r\n\r\n productDispatch({\r\n type: \"SET_PRODUCT\",\r\n payload: data,\r\n });\r\n\r\n data.InventoryStatusCode === 0 && removeQuery();\r\n if (data && data.InventoryStatusCode !== 2) {\r\n setQuery(data.ProductNumber, data.Quantity);\r\n } else {\r\n removeQuery();\r\n }\r\n });\r\n };\r\n\r\n const removeQuery = () => {\r\n const url = window.location.href;\r\n return url.split(/[?#]/)[0];\r\n };\r\n\r\n const ifQueryStringUpdateState = () => {\r\n const urlParams = new URLSearchParams(window.location.search);\r\n const sku = urlParams.get(\"sku\");\r\n const qty = urlParams.get(\"qty\");\r\n // set qty in state\r\n if (qty) {\r\n const qtyAsString: string = JSON.stringify(qty);\r\n productDispatch({\r\n type: \"SET_COUNTER_QUANTITY\",\r\n payload: qtyAsString,\r\n });\r\n }\r\n // set product in state then submit\r\n if (sku) {\r\n productDispatch({\r\n type: \"SET_PRODUCT_NUMBER\",\r\n payload: sku,\r\n });\r\n const optionalQty = qty ? qty : \"1\";\r\n getProductHandler(sku, optionalQty);\r\n }\r\n };\r\n\r\n // stops skeleton showing on initial load,\r\n // empty array causes useEffect to only fire on load once\r\n useEffect(() => {\r\n setLoading(false);\r\n // eslint-disable-next-line\r\n ifQueryStringUpdateState();\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (isSubmitted) {\r\n getProductHandler();\r\n\r\n productDispatch({\r\n type: \"SET_SUBMITTED\",\r\n payload: false,\r\n });\r\n }\r\n }, [isSubmitted]);\r\n\r\n async function getCurrentUser() {\r\n const result = await getUser();\r\n productDispatch({\r\n type: \"SET_USER\",\r\n payload: result,\r\n });\r\n if (result.User !== null) {\r\n productDispatch({\r\n type: \"SET_SUBMITTED\",\r\n payload: true,\r\n });\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (IsUserLoggedIn === false) {\r\n getCurrentUser();\r\n }\r\n }, [IsUserLoggedIn]);\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n