{"version":3,"file":"DgKXKEy1.js","sources":["../../../../../domains/commerce/components/bopis/Stores.vue","../../../../../domains/commerce/components/form/bopis-store-search/BopisStoreSearch.vue"],"sourcesContent":["<template>\n  <ul>\n    <define-store-address v-slot=\"{ store }\">\n      <span>\n        {{ store.address1 }}<br>\n        <template v-if=\"store.address2\">{{ store.address2 }}<br></template>\n        {{ store.city }} {{ store.state }}. {{ store.postalcode }}<br>\n        {{ store.country }}<br>\n      </span>\n    </define-store-address>\n    <li v-for=\"store in stores\" :key=\"store.storeid\" class=\"mt-4 b-t b-grey-70 pt-4 \">\n      <div class=\"w-full gap-x-4 align-top i-flex\">\n        <base-button\n          :aria-label=\"store.name\"\n          :aria-pressed=\"store.storeid === selectedStore?.storeid\"\n          class=\"h-6 w-6 shrink-0 rounded-full p-1 ring ring-grey-40 ring-inset duration peer-focus-visible:outline-auto peer-focus-within:ring-grey-10 \"\n          @click=\"selectedStore = store\"\n        >\n          <span\n            class=\"block full rounded-full duration bg-grey-10 \"\n            :class=\"store.storeid === selectedStore?.storeid ? 'op-100 ' : 'op-0'\"\n          />\n        </base-button>\n        <div class=\"w-full text-base c-grey-10\">\n          <base-collapse class-toggle=\"w-full\">\n            <template #toggle=\"{ expanded }\">\n              <span class=\"flex between\">\n                <span >{{ store.name }}</span>\n                <vf-icon :dir=\"expanded ? 'up' : 'down'\" name=\"chevron\" size=\"md\" />\n              </span>\n              <span class=\"flex text-sm between \">\n                <slot name=\"store-body-collapsed\" :store>\n                  <store-address v-if=\"showAddressPreview\" class=\"mt-2 fw-light\" :store />\n                  <template v-else>\n                    <span v-if=\"store.quantity && store.bopis_enabled === '1'\">{{ $t.readyIn24hours }}.</span>\n                    <span v-else-if=\"store.sts_enabled === '1'\">{{ $t.readyIn3Days }}.</span>\n                    <span>({{ store._distance }} {{ store._distanceuom }})</span>\n                  </template>\n                </slot>\n              </span>\n              <span v-if=\"store.quantity && store.quantity < qtyThreshold\" class=\"text-sm \">\n                {{ replaceAll($t.qtyLimitLow, { limit: store.quantity }) }}\n              </span>\n            </template>\n            <div class=\"pt-4 space-y-6\">\n              <address class=\"text-sm\">\n                <store-address v-if=\"!showAddressPreview\" class=\"fw-light\" :store />\n                <span class=\"mt-4 flex items-center gap-2\">\n                  <vf-icon name=\"location\" size=\"lg\" />\n                  <vf-link :to=\"`http://maps.google.com/?q=${store.latitude},${store.longitude}`\">\n                    {{ $t.getDirections }}\n                  </vf-link>\n                </span>\n                <span class=\"mt-4 flex items-center gap-2\">\n                  <vf-icon name=\"phone\" size=\"lg\" />\n                  <vf-link :to=\"`tel:${store.phone}`\">\n                    {{ store.phone }}\n                  </vf-link>\n                </span>\n              </address>\n              <div>\n                <div class=\"mb-2 fw-medium\">\n                  {{ $t.storeHours }}\n                </div>\n                <ul class=\"fw-light\">\n                  <li>{{ $t.weekday }}: {{ store.m }}</li>\n                  <li>{{ $t.saturday }}: {{ store.sa }}</li>\n                  <li>{{ $t.sunday }}: {{ store.su }}</li>\n                </ul>\n              </div>\n              <div v-if=\"store.store_description\">\n                <div class=\"mb-2 fw-medium\">\n                  {{ $t.getStoreInstruction }}\n                </div>\n                <span class=\"fw-light\">\n                  {{ store.store_description }}\n                </span>\n              </div>\n            </div>\n          </base-collapse>\n        </div>\n      </div>\n    </li>\n  </ul>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { LocatorSearchItem } from '#types/brandify'\n\ndefineProps<{\n  stores: LocatorSearchItem[]\n  showAddressPreview?: boolean\n}>()\n\nconst [DefineStoreAddress, StoreAddress] = createReusableTemplate()\n\nconst selectedStore = defineModel<LocatorSearchItem>()\nconst { qtyThreshold } = useAppConfig().components.form.bopisStoreSearch\n</script>\n","<template>\n  <div v-show=\"visible\">\n    <div class=\"flex center between\">\n      <p :class=\"brandClasses.heading\">\n        {{ $t.storeSearch.enterLocation }}\n      </p>\n      <base-button v-if=\"showCloseButton\" :aria-label=\"$t.close\" @click=\"$emit('close')\">\n        <vf-icon name=\"close\" size=\"md\" />\n      </base-button>\n    </div>\n    <base-form\n      ref=\"formRef\"\n      :class=\"brandClasses.form\"\n      :form\n      validate-on=\"submit\"\n      @submit=\"submit\"\n    >\n      <vf-form-field v-slot=\"{ invalid }\" name=\"postalCode\" :rule=\"searchValidation\">\n        <div class=\"group flex\">\n          <vf-input\n            v-model=\"form.postalCode\"\n            class=\"grow rounded-r-0 group-focus-within:b-grey-10\"\n            :disabled=\"loading\"\n            :invalid\n            required\n            @change=\"searchAsyncMessage = ''\"\n          >\n            {{ $t.cityStateOrZipCode }}\n          </vf-input>\n          <base-button\n            :aria-label=\"$t.searchLabel\"\n            class=\"w-12 flex center b b-l-0 rounded-l-0 rounded-r-sm c-grey-30 group-focus-within:b-grey-10\"\n            :class=\"[loading ? 'bg-grey-90 b-grey-50' : 'bg-white b-grey-40', {\n              'b-red-30': !loading && invalid,\n            }]\"\n            :disabled=\"loading\"\n            type=\"submit\"\n          >\n            <vf-icon name=\"search\" size=\"lg\" />\n          </base-button>\n        </div>\n      </vf-form-field>\n      <vf-checkbox v-if=\"!filterBopisStores\" v-model=\"form.onlyStoresWithAvailability\" :size=\"availabilityCheckboxSize\">\n        {{ $t.storeSearch.sortByAvailability }}\n      </vf-checkbox>\n      <p v-if=\"noStores\" class=\"text-sm fw-light\">\n        {{ replaceAll($t.storeSearch[filterBopisStores ? 'noStoresFilter' : 'noStores'], { distance }) }}\n      </p>\n      <p v-else-if=\"visibleStores.length && visibleStores.length < limitStores\" class=\"text-sm fw-light\">\n        {{ replaceAll($t.storeSearch.lessStores, { distance }) }}\n      </p>\n    </base-form>\n    <bopis-stores\n      v-if=\"visibleStores.length\"\n      :class=\"[{ '<lg:mb-4': showSaveButton }, brandClasses.list]\"\n      :model-value=\"showSaveButton ? preselectedStore : selectedStore\"\n      :show-address-preview=\"filterBopisStores\"\n      :stores=\"visibleStores\"\n      @update:model-value=\"changeStore\"\n    >\n      <template #store-body-collapsed=\"{ store }\">\n        <slot name=\"store-body-collapsed\" :store />\n      </template>\n    </bopis-stores>\n    <template v-if=\"showSaveButton\">\n      <div v-if=\"visibleStores.length\" :class=\"brandClasses.footer\">\n        <vf-button\n          :class=\"brandClasses.submitButton\"\n          :disabled=\"loading || !preselectedStore\"\n          @click=\"applyPreselectedStore\"\n        >\n          {{ $t.save }}\n        </vf-button>\n      </div>\n      <div v-else class=\"mt-4\" />\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { LocatorSearchItem } from '#types/brandify'\nimport type { BaseForm as BaseFormType } from '#components'\nimport type { SearchPayload } from '#root/api/clients/stores/data-contracts'\n\nconst props = defineProps<{\n  /**\n   * Injection point for modified store objects;\n   * The parent has the option to read the stores from the Pinia store,\n   * modify them and pass them in this prop for visibility checks.\n   * If the prop is not provided, the Pinia store values will be used directly\n   */\n  stores?: LocatorSearchItem[]\n  /**\n   * Hides the content of the form if there is no selected store until a round of geolocation has been done\n   */\n  initiallyHidden?: boolean\n  /**\n   * If true, the store search will be filtered\n   * and the checkbox that allows stores to be filtered by availability will be removed\n   */\n  filterBopisStores?: boolean\n  /**\n   * Displays save button on BOPIS PLP only\n   */\n  showSaveButton?: boolean\n  /**\n   * Displays close button\n   */\n  showCloseButton?: boolean\n}>()\n\nconst emit = defineEmits<{\n  close: []\n}>()\n\nconst enum ApiErrorCode {\n  INVALID_CRITERIA = 8009,\n  NO_STORES = 5001,\n}\n\nconst { stores: storesApi } = useApi()\nconst {\n  availabilityCheckboxSize,\n  brandClasses,\n  distance,\n  limitStores\n} = useAppConfig().components.form.bopisStoreSearch\nconst { validateMaxLength, validateRequired } = useLocalizedValidators()\nconst { $t } = useNuxtApp()\nconst toast = useToaster()\n\nconst { form, stores: _stores, selectedStore } = storeToRefs(useBopisStore())\nconst stores = computed(() => props.stores || _stores.value)\nconst preselectedStore = ref(selectedStore.value)\nconst formRef = ref<InstanceType<typeof BaseFormType>>()\nconst visible = ref(!props.initiallyHidden || !!selectedStore.value)\nconst loading = ref(false)\nconst noStores = ref(false)\nlet searchAsyncMessage = ''\n\nconst isSTS = ({ sts_enabled }: LocatorSearchItem) => sts_enabled === '1'\nconst isBopis = ({ bopis_enabled, quantity }: LocatorSearchItem) => (props.filterBopisStores || quantity) && bopis_enabled === '1'\n\nconst visibleStores = computed(() => {\n  if (!props.filterBopisStores && form.value.onlyStoresWithAvailability) {\n    const bopisStores: LocatorSearchItem[] = []\n    const stsStores: LocatorSearchItem[] = []\n\n    for (const store of stores.value) {\n      if (isBopis(store)) bopisStores.push(store)\n      else if (isSTS(store)) stsStores.push(store)\n\n      if (bopisStores.length === limitStores)\n        return bopisStores\n    }\n    return bopisStores.concat(\n      stsStores.slice(0, limitStores - bopisStores.length)\n    )\n  }\n  else {\n    return stores.value.filter((store) => isSTS(store) || isBopis(store)).slice(0, limitStores)\n  }\n})\n\nconst searchValidation: Record<string, Validator> = {\n  searchRequired: validateRequired($t.cityStateOrZipCode),\n  searchMaxLength: validateMaxLength(256),\n  searchAsyncError: () => searchAsyncMessage\n}\n\nconst setErrorMessage = (code: ApiErrorCode) => {\n  if (code === ApiErrorCode.INVALID_CRITERIA) {\n    searchAsyncMessage = $t.storeSearch.locationNotRecognized\n    formRef.value?.validate(true)\n  }\n  else if (code === ApiErrorCode.NO_STORES) {\n    noStores.value = true\n  }\n}\n\nconst getStores = async (payload: SearchPayload) => {\n  let _stores: LocatorSearchItem[] = []\n  noStores.value = false\n  loading.value = true\n  try {\n    const { response: storeCollection, code } = await storesApi.$search(payload, {\n      enhancedStoreSearch: true,\n      ...(props.filterBopisStores ? { filterBOPISStores: true } : {})\n    }).then((res) => ({\n      response: res.response.collection.map((store) => ({\n        ...store,\n        display_url: store.url,\n        storeid: store.enterprise_store_identifier,\n        store_description: store.localpagedescription\n      })),\n      code: null\n    })).catch((res) => {\n      return { response: [], code: res.response._data.errorDetails?.[0]?.code }\n    })\n\n    _stores = storeCollection\n\n    if (!_stores.length)\n      setErrorMessage(code)\n  }\n  catch (error) {\n    log.warn(error)\n  }\n  finally {\n    loading.value = false\n  }\n  return _stores\n}\n\nconst showSuccessToast = (store: LocatorSearchItem) => {\n  toast.add({ props: {\n    title: $t.storeSearch.toastTitle,\n    message: replaceAll($t.storeSearch.toastMessage, { name: store.name })\n  }, delay: 2000 })\n}\n\nconst changeStore = (store: LocatorSearchItem, background?: boolean) => {\n  if (props.showSaveButton) {\n    preselectedStore.value = store\n    return\n  }\n\n  selectedStore.value = store\n  if (!background)\n    showSuccessToast(store)\n}\n\nlet unwatchVisibleStores = () => {}\nconst presetStore = () => {\n  unwatchVisibleStores()\n  if (!selectedStore.value) {\n    unwatchVisibleStores = watchImmediate(visibleStores, () => {\n      if (visibleStores.value.length) {\n        changeStore(visibleStores.value[0], true)\n        unwatchVisibleStores()\n      }\n    })\n  }\n  else if (selectedStore.value && props.showSaveButton) {\n    preselectedStore.value = selectedStore.value\n  }\n}\n\nconst applyPreselectedStore = () => {\n  if (preselectedStore.value) {\n    selectedStore.value = preselectedStore.value\n    showSuccessToast(selectedStore.value)\n    closeDialogs()\n  }\n}\n\nconst searchByGeolocation = () => {\n  if (!(navigator && 'geolocation' in navigator))\n    return\n\n  loading.value = true\n\n  navigator.geolocation.getCurrentPosition(\n    async ({ coords: { latitude, longitude } }) => {\n      _stores.value = await getStores({\n        distance,\n        unitOfMeasure: 'mile',\n        lat: latitude,\n        lng: longitude,\n      })\n      presetStore()\n      loading.value = false\n\n      if (visibleStores.value.length)\n        emit('close')\n      else\n        visible.value = true\n    },\n    (error) => {\n      log.warn(error)\n      visible.value = true\n      loading.value = false\n    }\n  )\n}\n\nconst submit = async () => {\n  preselectedStore.value = undefined\n\n  _stores.value = await getStores({\n    postalCode: form.value.postalCode,\n    distance,\n    unitOfMeasure: 'mile',\n  })\n  presetStore()\n}\n\nonMounted(() => {\n  if (form.value.postalCode && !stores.value.length)\n    submit()\n  else if (!selectedStore.value)\n    searchByGeolocation()\n})\n\ndefineExpose({\n  loading,\n})\n</script>\n"],"names":["DefineStoreAddress","StoreAddress","createReusableTemplate","selectedStore","_useModel","qtyThreshold","useAppConfig","props","__props","emit","__emit","storesApi","useApi","availabilityCheckboxSize","brandClasses","distance","limitStores","validateMaxLength","validateRequired","useLocalizedValidators","$t","useNuxtApp","toast","useToaster","form","_stores","storeToRefs","useBopisStore","stores","computed","preselectedStore","ref","formRef","visible","loading","noStores","searchAsyncMessage","isSTS","sts_enabled","isBopis","bopis_enabled","quantity","visibleStores","bopisStores","stsStores","store","searchValidation","setErrorMessage","code","_a","getStores","payload","storeCollection","res","_b","error","log","showSuccessToast","replaceAll","changeStore","background","unwatchVisibleStores","presetStore","watchImmediate","applyPreselectedStore","closeDialogs","searchByGeolocation","latitude","longitude","submit","onMounted","__expose"],"mappings":"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"}