{"version":3,"file":"QuickViewSearch.epqtlmht.js","sources":["../../../wwwdev/esm/components/storeList/shared/helpers.ts","../../../wwwdev/esm/components/QuickViewSearch/components/Headline.tsx","../../../wwwdev/esm/components/QuickViewSearch/Atoms/useLocationAtom.ts","../../../wwwdev/esm/components/QuickViewSearch/components/LocationSearch.tsx","../../../wwwdev/esm/components/QuickViewSearch/components/Search.tsx","../../../wwwdev/esm/components/QuickViewSearch/QuickViewSearch.tsx"],"sourcesContent":["import { SearchRequestBody } from 'components/QuickViewSearch/shared/types';\r\nimport { createContext } from 'react';\r\nimport { FindStoreResult } from 'autogen/swagger/all';\r\n\r\nexport const OnSearchCallbackContext = createContext<((data: SearchRequestBody) => void) | undefined>(undefined);\r\nexport const OnGeoLocationCallbackContext = createContext<((latitude: number, longitude: number) => void) | undefined>(\r\n undefined\r\n);\r\nexport const OnSelectParcelPickupContext = createContext<(() => void) | undefined>(undefined);\r\nexport const FindStoreResultContext = createContext(undefined);\r\n","import React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Spacing24 } from 'autogen/design-tokens/tokens';\r\nimport { Headline } from 'components/generic/typography';\r\nimport type { IHeadlineTranslations } from '../shared/types';\r\n\r\nconst StyledHeadline = styled(Headline)`\r\n margin-bottom: ${Spacing24};\r\n`;\r\n\r\nexport default function Header({ headline }: IHeadlineTranslations) {\r\n return {headline};\r\n}\r\n","import { atom } from 'recoil';\r\n\r\n// eslint-disable-next-line import/prefer-default-export\r\nexport const quickViewSearchUseLocationAtom = atom({ key: `quickViewSearchUseLocationAtom`, default: false });\r\n","import React, { useCallback, useContext, useEffect, useState } from 'react';\r\nimport styled from 'styled-components';\r\nimport { Spacing4 } from 'autogen/design-tokens/tokens';\r\nimport { OnGeoLocationCallbackContext } from 'components/storeList/shared/helpers';\r\nimport { ButtonWithIcon } from 'components/Button';\r\nimport mediator from 'modules/mediator';\r\nimport { quickViewSearchUseLocationAtom } from '../Atoms/useLocationAtom';\r\nimport type { ILocationSearch } from '../shared/types';\r\nimport UAEventTracking from 'modules/tracking/UAEventTracking';\r\nimport { useRecoilState } from 'recoil';\r\nimport Icon from 'components/Icon';\r\nimport Spinner from 'modules/shared/circleSpinner';\r\n\r\nconst LocationButton = styled(ButtonWithIcon)`\r\n position: relative;\r\n display: block;\r\n white-space: nowrap;\r\n font-weight: bold;\r\n margin-left: auto;\r\n margin-right: auto;\r\n padding: ${Spacing4};\r\n height: unset;\r\n`;\r\n\r\nexport default function LocationSearch(props: ILocationSearch) {\r\n const { translations, trackingCategory } = props;\r\n const { errorText } = translations;\r\n const onGeoLocationCallback = useContext(OnGeoLocationCallbackContext);\r\n const [useLocation, setUseLocationSearch] = useRecoilState(quickViewSearchUseLocationAtom);\r\n const [geoLocationLoading, setGeoLocationLoading] = useState(false);\r\n\r\n const getGeolocation = useCallback(() => {\r\n navigator.geolocation.getCurrentPosition(\r\n (position) => {\r\n const {\r\n coords: { latitude, longitude }\r\n } = position;\r\n\r\n if (onGeoLocationCallback) onGeoLocationCallback(latitude, longitude);\r\n setGeoLocationLoading(false);\r\n },\r\n (error) => {\r\n mediator.publish('growl', {\r\n message: errorText,\r\n remove: 5000\r\n });\r\n console.warn(error);\r\n }\r\n );\r\n }, []);\r\n\r\n const onClickHandler = useCallback(async (event?) => {\r\n setGeoLocationLoading(true);\r\n\r\n getGeolocation();\r\n\r\n if (trackingCategory) {\r\n UAEventTracking({\r\n eventCategory: trackingCategory,\r\n eventAction: 'useMyLocation'\r\n });\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (useLocation) {\r\n onClickHandler();\r\n }\r\n\r\n return () => {\r\n if (useLocation) {\r\n setUseLocationSearch(false);\r\n }\r\n };\r\n }, [onClickHandler, setUseLocationSearch, useLocation]);\r\n\r\n if (geoLocationLoading) {\r\n return ;\r\n }\r\n\r\n return } />;\r\n}\r\n","import { useContext, useEffect, useRef, useState } from 'react';\r\nimport styled from 'styled-components';\r\nimport { Spacing24 } from 'autogen/design-tokens/tokens';\r\nimport { OnGeoLocationCallbackContext, OnSearchCallbackContext } from 'components/storeList/shared/helpers';\r\nimport serializeForm from 'helpers/formatting';\r\nimport TextInput from 'components/shared/inputs/text';\r\nimport UAEventTracking from 'modules/tracking/UAEventTracking';\r\nimport type { ISearch, SearchRequestBody } from '../shared/types';\r\nimport LocationSearch from './LocationSearch';\r\nimport Icon from 'components/Icon';\r\nimport { useIsMobile } from 'hooks/responsive';\r\n\r\n// #region Styles\r\nconst Container = styled.div`\r\n margin-bottom: ${Spacing24};\r\n`;\r\n\r\nconst Form = styled.form`\r\n display: flex;\r\n flex-direction: column;\r\n`;\r\n\r\nconst InputContainer = styled.div`\r\n display: grid;\r\n`;\r\n// #endregion Styles\r\n\r\nexport default function Search(props: ISearch) {\r\n const { translations, inputType = 'text', searchQuery, inputRef, trackingCategory } = props;\r\n const { placeholder, textFieldTitle, geoLocation } = translations;\r\n const [searchQueryValue, setSearchQueryValue] = useState(searchQuery);\r\n const [submitValue, setSubmitValue] = useState();\r\n const onSearchCallback = useContext(OnSearchCallbackContext);\r\n const onGeoLocationCallback = useContext(OnGeoLocationCallbackContext);\r\n const formRef = useRef(null);\r\n const isMobile = useIsMobile();\r\n\r\n useEffect(() => {\r\n if (searchQuery) setSearchQueryValue(searchQuery);\r\n }, [searchQuery]);\r\n\r\n async function onSubmit(event) {\r\n event.preventDefault();\r\n const form = formRef.current;\r\n\r\n if (!form || searchQueryValue === submitValue) {\r\n return;\r\n }\r\n\r\n const data = serializeForm(form as HTMLFormElement) as SearchRequestBody;\r\n\r\n setSubmitValue(data.searchQuery);\r\n\r\n if (onSearchCallback) await onSearchCallback(data);\r\n\r\n if (trackingCategory) {\r\n UAEventTracking({ eventCategory: trackingCategory, eventAction: 'submitQuickViewSearch' });\r\n }\r\n }\r\n\r\n function handleSubmit(event) {\r\n event.preventDefault();\r\n }\r\n\r\n function onKeyDown(event) {\r\n if (event.key === 'Enter') {\r\n onSubmit(event);\r\n }\r\n }\r\n\r\n // used to hide keyboard when clicking \"Search\" on mobile\r\n function onKeyUp(event) {\r\n if (event.key === 'Enter' && isMobile) {\r\n event.target.blur();\r\n }\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n {\r\n setSearchQueryValue(event.target.value);\r\n }}\r\n onBlur={onSubmit}\r\n onKeyDown={onKeyDown}\r\n onKeyUp={onKeyUp}\r\n enterKeyHint=\"search\"\r\n leftIcon={}\r\n {...(geoLocation && onGeoLocationCallback\r\n ? {\r\n rightIcon: (\r\n \r\n )\r\n }\r\n : {})}\r\n />\r\n \r\n
\r\n
\r\n );\r\n}\r\n","import type { HTMLAttributes } from 'react';\r\nimport styled from 'styled-components';\r\nimport {\r\n ColorNeutralWhite,\r\n Spacing16,\r\n Spacing24,\r\n Spacing32,\r\n Spacing40,\r\n Spacing56,\r\n Spacing72\r\n} from 'autogen/design-tokens/tokens';\r\nimport { breakpoint, sizes } from 'variables';\r\nimport { customScrollbar } from 'modules/helpers/mixins';\r\nimport imageOverlayStyle from 'components/shared/style/imageOverlay';\r\nimport Image from 'components/generic/Image';\r\nimport { ProductNameCompact } from 'components/generic/productName/ProductName';\r\nimport { Typography } from 'components/generic/typography';\r\nimport Header from './components/Headline';\r\nimport Search from './components/Search';\r\nimport type { IQuickViewSearch } from './shared/types';\r\n\r\n// #region Styles\r\nconst Wrapper = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n gap: ${Spacing32};\r\n min-height: 0;\r\n flex: 0 1 100%;\r\n`;\r\n\r\nconst Container = styled.div`\r\n width: 100%;\r\n padding: 0 ${Spacing24} ${Spacing24};\r\n overflow: auto;\r\n ${customScrollbar};\r\n\r\n ${breakpoint.up(sizes.md)} {\r\n width: 480px;\r\n }\r\n`;\r\n\r\nconst TopContainer = styled.div`\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n padding-top: ${Spacing72};\r\n padding-bottom: ${Spacing56};\r\n gap: ${Spacing24};\r\n\r\n &:after {\r\n content: '';\r\n\r\n ${imageOverlayStyle}\r\n }\r\n`;\r\n\r\nconst ProductImage = styled(Image.WithScaling)`\r\n align-self: center;\r\n max-width: 136px;\r\n max-height: 136px;\r\n\r\n ${breakpoint.up(sizes.lg)} {\r\n max-width: 206px;\r\n max-height: 206px;\r\n }\r\n`;\r\n\r\nconst StyledProductNameCompact = styled(ProductNameCompact)`\r\n padding-bottom: ${Spacing16};\r\n position: sticky;\r\n top: 0;\r\n background-color: ${ColorNeutralWhite};\r\n z-index: 1;\r\n`;\r\n\r\nconst SubHeadline = styled(Typography.Body)`\r\n margin-bottom: ${Spacing16};\r\n`;\r\n\r\n// #endregion Styles\r\n\r\nexport default function QuickViewSearch(props: IQuickViewSearch & HTMLAttributes) {\r\n const {\r\n translations: { headline, subHeadline, search },\r\n inputType,\r\n searchQuery,\r\n trackingCategory,\r\n children,\r\n inputRef,\r\n productInfo,\r\n ...restProps\r\n } = props;\r\n\r\n return (\r\n \r\n {productInfo?.image && (\r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n {productInfo?.productName && (\r\n \r\n )}\r\n {subHeadline && {subHeadline}}\r\n \r\n {children}\r\n \r\n \r\n );\r\n}\r\n"],"names":["OnSearchCallbackContext","createContext","undefined","OnGeoLocationCallbackContext","OnSelectParcelPickupContext","FindStoreResultContext","StyledHeadline","styled","Headline","withConfig","displayName","componentId","Spacing24","Header","headline","jsx","quickViewSearchUseLocationAtom","atom","key","default","LocationButton","ButtonWithIcon","Spacing4","LocationSearch","props","translations","trackingCategory","errorText","onGeoLocationCallback","useContext","useLocation","setUseLocationSearch","useRecoilState","geoLocationLoading","setGeoLocationLoading","useState","getGeolocation","useCallback","geolocation","getCurrentPosition","position","coords","latitude","longitude","error","mediator","publish","message","remove","onClickHandler","event","UAEventTracking","eventCategory","eventAction","useEffect","Spinner","Icon","Container","div","Form","form","InputContainer","Search","inputType","searchQuery","inputRef","placeholder","textFieldTitle","geoLocation","searchQueryValue","setSearchQueryValue","submitValue","setSubmitValue","onSearchCallback","formRef","useRef","isMobile","useIsMobile","onSubmit","preventDefault","current","data","serializeForm","handleSubmit","onKeyDown","onKeyUp","target","blur","TextInput","value","rightIcon","Wrapper","Spacing32","customScrollbar","breakpoint","up","sizes","md","TopContainer","Spacing72","Spacing56","imageOverlayStyle","ProductImage","Image","WithScaling","lg","StyledProductNameCompact","ProductNameCompact","Spacing16","ColorNeutralWhite","SubHeadline","Typography","Body","QuickViewSearch","subHeadline","search","children","productInfo","restProps","image","xl","jsxs","productName"],"mappings":"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"}