{"version":3,"file":"RepSearch-DZjmToaw.js","sources":["../../../../node-apps/site/src/components/rep/RepSearch.vue"],"sourcesContent":["<template>\n  <div class=\"rep-search\">\n    <div class=\"flex-row gap-x-2\">\n      <div class=\"flex-static rep-search-width\">\n        <p class=\"m-no-t m-sm-b\">\n          Search by any of the criteria below.\n          <br />One or more fields may be used.\n        </p>\n        <PapaAutoForm\n          v-model=\"formData\"\n          :fields=\"[\n            { name: 'rep_number', label: 'Consultant Number' },\n            { name: 'first_name', label: 'Consultant First Name' },\n            { name: 'last_name', label: 'Consultant Last Name' },\n            { name: 'zip_code', label: 'Zip Code' },\n          ]\"\n          sub\n        />\n      </div>\n      <div class=\"flex-stretch\">\n        <div class=\"alert alert-danger\" v-if=\"context.error\">\n          {{ context.error }}\n        </div>\n        <Message\n          v-if=\"!context.status && hasSearchParams && activeReps.length == 0\"\n          severity=\"error\"\n          :closable=\"false\"\n        >\n          No Consultants match your search. Please review your search criteria\n          and try again.\n        </Message>\n        <div class=\"reps-container\" v-else-if=\"activeReps.length > 0\">\n          <p class=\"m-no-t m-sm-b\">Here are the Consultants we found for you</p>\n\n          <dialog\n            v-if=\"context.rep\"\n            @click=\"closeDialog\"\n            ref=\"selected\"\n            class=\"rep-detail\"\n          >\n            <div class=\"flex-column gap-md\">\n              <div class=\"flex-row flex-center gap-x-2\">\n                <div class=\"main\">\n                  <ThumbnailedImage\n                    v-if=\"context.rep?.images\"\n                    :images=\"context.rep.images\"\n                    :alt=\"context.rep.name ?? 'Consultant'\"\n                  />\n                  <img\n                    v-else\n                    :src=\"context.fallbackImage\"\n                    :alt=\"context.rep.name\"\n                  />\n                </div>\n                <div class=\"flex-column flex-center gap-2xs rep-info\">\n                  <div class=\"title\">{{ context.rep.name }}</div>\n                  <div class=\"title\">\n                    {{ context.rep.rep_number }}\n                  </div>\n                  <div v-if=\"context.rep.email\" class=\"email\">\n                    <a target=\"_blank\" :href=\"`mailto: ${context.rep.email}`\">{{\n                      context.rep.email\n                    }}</a>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"bio\">{{ context.rep.bio }}</div>\n\n              <div class=\"buttons flex-row flex-center\">\n                <Button\n                  @click.prevent=\"chooseConsultant()\"\n                  class=\"choose-consultant grey\"\n                  aria-label=\"Choose Consultant\"\n                >\n                  Choose Consultant\n                </Button>\n              </div>\n            </div>\n          </dialog>\n\n          <div class=\"reps gap-sm\">\n            <a\n              href=\"#\"\n              v-for=\"object of activeReps\"\n              :key=\"object.id\"\n              :class=\"{ active: context.rep && object.id == context.rep.id }\"\n              @click.prevent=\"handleSelect($event, object)\"\n              class=\"consultant-icon\"\n              :aria-label=\"`Choose ${object.rep_number}`\"\n            >\n              <ThumbnailedImage\n                v-if=\"object.images\"\n                :images=\"object.images\"\n                :alt=\"object.name ?? 'Consultant'\"\n              />\n              <img\n                v-else\n                :src=\"context.fallbackImage\"\n                :alt=\"object.name ?? 'Consultant'\"\n              />\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { debounce } from \"@/utils/bouncer\";\nimport type { Rep } from \"@paparazzi/types/paparazzi.api.serializers.profiles\";\nimport api from \"@virgodev/bazaar/functions/api\";\nimport { useLocalStorageStore } from \"@virgodev/bazaar/functions/localstorage/store\";\nimport Button from \"primevue/button\";\nimport Message from \"primevue/message\";\nimport { computed, nextTick, onMounted, reactive, ref, watch } from \"vue\";\nimport PapaAutoForm from \"../PapaAutoForm.vue\";\nimport ThumbnailedImage from \"../ThumbnailedImage.vue\";\n\nconst props = defineProps<{\n  modelValue?: Rep | null;\n  initialRepNumber?: string;\n}>();\nconst emits = defineEmits([\"update:modelValue\"]);\n\nconst storage = useLocalStorageStore();\n\nconst selected = ref();\nconst context = reactive({\n  submitId: 1,\n  error: null,\n  distance: 10,\n  geolocate: new Boolean(navigator.geolocation),\n  rep: null as Rep | null,\n  reps: [] as Rep[],\n  status: \"\",\n  fallbackImage:\n    \"https://paparazziaccessories.com/media/static/site/images/paparazzi-consultant-logo-150.png\",\n});\n\nconst formData = ref({\n  first_name: \"\",\n  last_name: \"\",\n  rep_number: \"\",\n  zip_code: storage.get(\"findConsultantZip\", \"\"),\n} as {\n  first_name?: string;\n  last_name?: string;\n  rep_number?: string;\n  zip_code?: string;\n});\n\nconst activeReps = computed(() => {\n  let reps = context.reps;\n\n  // Filter out paparazzi accounts if not tester\n  // filter out a bug where undefined was set to tester as a string\n  // can remove this after the site goes live\n  if (!localStorage.tester || localStorage.tester === \"undefined\") {\n    reps = reps.filter((r) => {\n      const retval =\n        `${r.rep_number}` === formData.value.rep_number ||\n        !r.email?.includes(\"@paparazziaccessories.com\");\n      return retval;\n    });\n  }\n\n  return reps.filter((r) => r.is_active);\n});\nconst hasSearchParams = computed(() => {\n  return Object.values(formData.value).filter((a) => a).length > 0;\n});\n\nwatch(\n  () => formData.value.zip_code,\n  () => {\n    if (formData.value.zip_code !== null) {\n      storage.put(\"findConsultantZip\", formData.value.zip_code);\n    }\n  },\n);\nwatch(formData, () => {\n  handleSubmit();\n});\n\nonMounted(() => {\n  if (props.initialRepNumber) {\n    formData.value = { rep_number: props.initialRepNumber };\n    handleSubmit();\n  } else if (formData.value.zip_code) {\n    handleSubmit();\n  }\n});\n\nfunction loadImage(src: string) {\n  if (import.meta.env.VITEST) {\n    return;\n  }\n  return new Promise((resolve, reject) => {\n    let i = new Image();\n    i.onload = () => {\n      resolve(src);\n    };\n    i.onerror = () => {\n      resolve(context.fallbackImage);\n    };\n    i.src = src;\n  });\n}\n\nasync function handleSubmit(preload = true) {\n  context.status = \"loading\";\n  if (await debounce(\"find-consultant\", 500)) {\n    let submitId = ++context.submitId;\n    context.error = null;\n    context.rep = null;\n    let data = {\n      distance: 10,\n      search_by: \"zip_code\",\n      ...formData.value,\n    };\n    let response = await api({ url: \"profile/nearby/\", params: data });\n    let fallbackLoaded = loadImage(context.fallbackImage);\n    if (context.submitId == submitId) {\n      context.reps = [];\n    }\n    if (response.ok) {\n      if (preload) {\n        await Promise.all(\n          response.body.map(async (rep: Rep) => {\n            if (rep.images?.cropped_100) {\n              await loadImage(rep.images.cropped_100);\n            } else {\n              await fallbackLoaded;\n            }\n            if (context.submitId == submitId) {\n              const index = Math.floor(Math.random() * context.reps.length);\n              context.reps.splice(index, 0, rep);\n            }\n          }),\n        );\n      } else {\n        if (context.submitId == submitId) {\n          context.reps = response.body;\n        }\n      }\n    }\n    context.status = \"\";\n  }\n}\n\nasync function handleSelect(e: MouseEvent, object: Rep) {\n  if (object.is_active !== false) {\n    if (context.rep == object) {\n      context.rep = null;\n    } else {\n      context.rep = object;\n      await nextTick();\n      if (selected.value.showModal) {\n        selected.value.showModal();\n      }\n    }\n  }\n}\n\nasync function closeDialog(e: MouseEvent) {\n  if (e.target === selected.value) {\n    selected.value.close();\n    context.rep = null;\n  }\n}\n\nfunction chooseConsultant() {\n  if (context.rep) {\n    emits(\"update:modelValue\", context.rep);\n    selected.value.close();\n  }\n}\n</script>\n\n<style scoped>\n.reps {\n  flex: 1 1 auto;\n  display: grid;\n  grid-template-columns: repeat(3, minmax(99px, 100px));\n}\n.reps img {\n  display: flex;\n  flex-direction: row;\n  min-width: 100px;\n}\n.close {\n  float: right;\n}\n\n::backdrop {\n  background-image: linear-gradient(90deg, #333, #000);\n  opacity: 0.5;\n}\ndialog {\n  width: min(100vw, 650px);\n}\ndialog img {\n  width: 160px;\n  height: 160px;\n}\n.rep-search-width {\n  min-width: 356px;\n}\n.reps-container {\n}\n.rep-detail {\n  padding: var(--3XL, 80px) var(--4-xl, 126px);\n}\n.rep-info {\n  width: 130px;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n.p-button {\n  width: fit-content;\n  margin: 0 auto;\n}\n@media (max-width: 945px) {\n  .rep-search:deep(.flex-row) {\n    flex-direction: column !important;\n  }\n  .reps-container {\n    margin-top: var(--2XL, 72px);\n  }\n  .rep-search:deep(.flex-row.flex-center.gap-x-2) {\n    flex-direction: row !important;\n  }\n}\n\n@media (max-width: 800px) {\n  dialog {\n    width: min(100vw, 390px);\n  }\n  .reps-container {\n  }\n  .rep-detail {\n    padding: var(--Sm, 24px);\n  }\n  .rep-info {\n    width: 130px;\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n    .title.text-nowrap, .email.text-nowrap {\n      white-space: revert-layer!important;\n    }\n  }\n  .reps {\n    justify-content: center;\n  }\n\n}\n</style>\n"],"names":["props","__props","emits","__emit","storage","useLocalStorageStore","selected","ref","context","reactive","formData","activeReps","computed","reps","r","_a","hasSearchParams","a","watch","handleSubmit","onMounted","loadImage","src","resolve","reject","i","preload","debounce","submitId","data","response","api","fallbackLoaded","rep","index","handleSelect","e","object","nextTick","closeDialog","chooseConsultant"],"mappings":"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"}