{"version":3,"file":"AddressSearch.vue_vue_type_script_setup_true_lang-BFGkaghQ.js","sources":["../../src/components/AddressSearch.vue"],"sourcesContent":["<template>\n  <div class=\"my-4 rounded-xl\">\n    <div class=\"relative\">\n      <form @submit.prevent=\"handleKeydown()\">\n        <div class=\"relative flex\">\n          <label for=\"deliver-address\" class=\"flex-1\">\n            <span class=\"absolute uppercase top-3 left-4 text-xxs\" :class=\"{ 'sr-only': !text }\">\n              Enter your delivery address\n            </span>\n            <input\n              id=\"deliver-address\"\n              ref=\"addressInput\"\n              :value=\"text\"\n              class=\"pasta-input\"\n              placeholder=\"Enter your delivery address\"\n              type=\"text\"\n              autocomplete=\"off\"\n              spellcheck=\"false\"\n              aria-autocomplete=\"both\"\n              :class=\"{ 'pt-5': text, [inputClasses || '']: true }\"\n              @input=\"handleInputUpdate\"\n              @change=\"handleInputUpdate\"\n              @focus=\"handleFocus\"\n              @blur=\"handleInputBlur\"\n            />\n          </label>\n          <GeoLocationButton\n            :is-focused=\"isFocused\"\n            class=\"mt-2\"\n            @on-position=\"handleGeoLocationSearch\"\n          />\n        </div>\n        <button id=\"deliver-address-btn\" type=\"submit\" hidden=\"true\"></button>\n        <ul\n          id=\"address-suggestions-box\"\n          :aria-expanded=\"isExpanded\"\n          class=\"absolute inset-x-0 overflow-x-hidden text-sm bg-extra-light-linen z-20 max-h-64 overflow-y-auto list-inside list-none scrollbar-thin scrollbar-thumb-[#806E61] scrollbar-track-sienna-muted border border-t-0\"\n          :class=\"{\n            'border-sienna-muted': !isFocused,\n            'border-terracota-dark': isFocused,\n            'border-0': !isFocused && !isFetchingUserGpsLocation && !suggestionList?.length,\n          }\"\n        >\n          <GeoLocationPinnedBtn\n            v-if=\"((!text && isExpanded) || isFetchingUserGpsLocation) && isMobile\"\n            @on-position=\"handleGeoLocationSearch\"\n          />\n          <li\n            v-if=\"suggestionList?.length\"\n            class=\"flex items-center justify-between px-4 py-3 text-off-black bg-beige/50\"\n          >\n            Keep typing to find your address\n            <span><ArrowNarrowDownIcon class=\"text-gray-400 size-4\" /></span>\n          </li>\n          <li\n            v-for=\"suggestion in suggestionList\"\n            :key=\"suggestion.Id\"\n            class=\"border-b border-gray-300 border-dashed hover:bg-beige hover:border-0\"\n          >\n            <button\n              class=\"relative flex items-center justify-between w-full h-16 px-4 py-3 cursor-pointer\"\n              role=\"option\"\n              aria-selected=\"false\"\n              @click=\"handleSuggestionPress(suggestion, $event)\"\n            >\n              <div class=\"flex flex-col items-start\">\n                <BaseAddressSuggestion\n                  :suggestion=\"suggestion\"\n                  highlight-class-style=\"font-semibold\"\n                  class=\"text-left\"\n                />\n                <p class=\"text-xs text-dark-linen\">\n                  {{ suggestion.Description }}\n                </p>\n              </div>\n              <ChevronRightIcon\n                v-if=\"suggestion.Type === 'Container'\"\n                class=\"absolute flex text-black bg-white size-5 right-1 sm:bg-transparent\"\n              />\n            </button>\n          </li>\n        </ul>\n      </form>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import useAddressFinder, { FindItem } from '@/composables/useAddressFinder';\n  import { computed, ref } from 'vue';\n  import BaseAddressSuggestion from '@/components/BaseAddressSuggestion.vue';\n  import { ManualAddressInputPayload } from '@/components/BaseAddressInputs.vue';\n  import useSafariBlur from '@/composables/useSafariBlur';\n  import { ChevronRightIcon, ArrowNarrowDownIcon } from '@heroicons/vue/solid';\n  import useReverGeoLocation from '@/composables/useReverseGeoLocation';\n  import { trackCustomEvent } from '@/utils/analytics';\n  import { useMutationState } from '@tanstack/vue-query';\n  import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';\n\n  interface Emits {\n    (e: 'suggestionPress', value: ManualAddressInputPayload): void;\n    (e: 'press', value: string): void;\n    (e: 'focus', value: FocusEvent): void;\n  }\n\n  const emit = defineEmits<Emits>();\n\n  interface Props {\n    inputClasses?: string;\n  }\n  defineProps<Props>();\n\n  const breakpoints = useBreakpoints(breakpointsTailwind);\n  const { text, suggestionList, retrieve, find } = useAddressFinder();\n  const { getAddressFromLocation } = useReverGeoLocation();\n  const addressInput = ref<HTMLInputElement>();\n  const isFocused = ref(false);\n\n  const handleBlur = () => {\n    suggestionList.value = [];\n  };\n\n  const handleFocus = (e: FocusEvent) => {\n    emit('focus', e);\n    isFocused.value = true;\n  };\n\n  const handleInputBlur = () => {\n    isFocused.value = false;\n  };\n\n  useSafariBlur(handleBlur, e => e.id === 'deliver-address-btn' || e.id === 'deliver-address');\n\n  const isExpanded = computed(() => !!suggestionList.value?.length);\n\n  const userGpsLocationMutationStatus = useMutationState({\n    filters: { mutationKey: ['userGpsLocation'] },\n    select: mutation => mutation.state.status,\n  });\n\n  const isFetchingUserGpsLocation = computed(() => {\n    if (!userGpsLocationMutationStatus.value.length) return false;\n    const mutationStatusLength = userGpsLocationMutationStatus.value.length;\n    return userGpsLocationMutationStatus.value[mutationStatusLength - 1] === 'pending';\n  });\n\n  const isMobile = breakpoints.isSmaller('lg');\n\n  const handleSuggestionPress = async (suggestion: FindItem, event?: Event) => {\n    // stops the propagation of the click so the `handleBlur` won't trigger\n    if (event) {\n      event.preventDefault();\n    }\n    if (suggestion.Type === 'Address') {\n      handleSuggestionSubmission(suggestion.Id);\n      return;\n    }\n    const results = await find({ text: text.value, containerId: suggestion.Id });\n\n    if (!results) return;\n\n    suggestionList.value = results.Items;\n  };\n\n  const handleSuggestionSubmission = async (id: string) => {\n    const { Items } = await retrieve(id);\n\n    emit('suggestionPress', {\n      address1: Items[0].Line1,\n      address2: Items[0].Line2,\n      city: Items[0].City,\n      zip: Items[0].PostalCode,\n      region: Items[0].ProvinceName,\n      regionCode: Items[0].ProvinceCode,\n      company: Items[0].Company,\n      country: Items[0].CountryName,\n      countryCode: Items[0].CountryIso2,\n    });\n\n    emit('press', Items[0].Id);\n\n    text.value = '';\n  };\n\n  const handleKeydown = () => {\n    if (text.value && suggestionList.value?.[0]) {\n      handleSuggestionPress(suggestionList.value[0]);\n    }\n  };\n\n  const handleGeoLocationSearch = async (position: GeolocationPosition['coords']) => {\n    trackCustomEvent('geolocation-search');\n    const result = await getAddressFromLocation({\n      latitude: position.latitude,\n      longitude: position.longitude,\n    });\n\n    if (result) {\n      text.value = result.Postcode;\n    }\n  };\n\n  const handleInputUpdate = (e: Event) => {\n    text.value = (e.target as HTMLInputElement).value;\n  };\n</script>\n"],"names":["emit","__emit","breakpoints","useBreakpoints","breakpointsTailwind","text","suggestionList","retrieve","find","useAddressFinder","getAddressFromLocation","useReverGeoLocation","addressInput","ref","isFocused","handleFocus","e","value","handleInputBlur","useSafariBlur","id","isExpanded","computed","_a","length","userGpsLocationMutationStatus","useMutationState","filters","mutationKey","select","mutation","state","status","isFetchingUserGpsLocation","mutationStatusLength","isMobile","isSmaller","handleSuggestionPress","async","suggestion","event","preventDefault","Type","handleSuggestionSubmission","Id","results","containerId","Items","address1","Line1","address2","Line2","city","City","zip","PostalCode","region","ProvinceName","regionCode","ProvinceCode","company","Company","country","CountryName","countryCode","CountryIso2","handleGeoLocationSearch","position","trackCustomEvent","result","latitude","longitude","Postcode","handleInputUpdate","target"],"mappings":"qyBAyGE,MAAMA,EAAOC,EAOPC,EAAcC,EAAeC,IAC7BC,KAAEA,EAAMC,eAAAA,EAAAC,SAAgBA,EAAUC,KAAAA,GAASC,KAC3CC,uBAAEA,GAA2BC,IAC7BC,EAAeC,IACfC,EAAYD,GAAI,GAMhBE,EAAeC,IACnBhB,EAAK,QAASgB,GACdF,EAAUG,OAAQ,CAAA,EAGdC,EAAkB,KACtBJ,EAAUG,OAAQ,CAAA,EAGNE,GAbK,KACjBb,EAAeW,MAAQ,EAAC,IAYKD,GAAS,wBAATA,EAAEI,IAAyC,oBAATJ,EAAEI,KAE7D,MAAAC,EAAaC,GAAS,WAAO,SAAC,OAAAC,EAAejB,EAAAW,YAAO,EAAAM,EAAAC,OAAA,IAEpDC,EAAgCC,EAAiB,CACrDC,QAAS,CAAEC,YAAa,CAAC,oBACzBC,OAAoBC,GAAAA,EAASC,MAAMC,SAG/BC,EAA4BX,GAAS,KACzC,IAAKG,EAA8BR,MAAMO,OAAe,OAAA,EAClD,MAAAU,EAAuBT,EAA8BR,MAAMO,OACjE,MAAyE,YAAlEC,EAA8BR,MAAMiB,EAAuB,EAAO,IAGrEC,EAAWjC,EAAYkC,UAAU,MAEjCC,GAAwBC,MAAOC,EAAsBC,KAKrD,GAHAA,GACFA,EAAMC,iBAEgB,YAApBF,EAAWG,KAEb,YADAC,GAA2BJ,EAAWK,IAGlC,MAAAC,QAAgBrC,EAAK,CAAEH,KAAMA,EAAKY,MAAO6B,YAAaP,EAAWK,KAElEC,IAELvC,EAAeW,MAAQ4B,EAAQE,MAAA,EAG3BJ,GAA6BL,MAAOlB,IACxC,MAAM2B,MAAEA,SAAgBxC,EAASa,GAEjCpB,EAAK,kBAAmB,CACtBgD,SAAUD,EAAM,GAAGE,MACnBC,SAAUH,EAAM,GAAGI,MACnBC,KAAML,EAAM,GAAGM,KACfC,IAAKP,EAAM,GAAGQ,WACdC,OAAQT,EAAM,GAAGU,aACjBC,WAAYX,EAAM,GAAGY,aACrBC,QAASb,EAAM,GAAGc,QAClBC,QAASf,EAAM,GAAGgB,YAClBC,YAAajB,EAAM,GAAGkB,cAGxBjE,EAAK,QAAS+C,EAAM,GAAGH,IAEvBvC,EAAKY,MAAQ,EAAA,EASTiD,GAA0B5B,MAAO6B,IACrCC,EAAiB,sBACX,MAAAC,QAAe3D,EAAuB,CAC1C4D,SAAUH,EAASG,SACnBC,UAAWJ,EAASI,YAGlBF,IACFhE,EAAKY,MAAQoD,EAAOG,SAAA,EAIlBC,GAAqBzD,IACpBX,EAAAY,MAASD,EAAE0D,OAA4BzD,KAAA,4GAnBxB,YAChBZ,EAAKY,QAAS,OAAAM,EAAejB,EAAAW,gBAAQ,KACjBoB,GAAA/B,EAAeW,MAAM,GAAE"}