{"version":3,"file":"RelatedProductsList-mn7dkVIf.js","sources":["../../../../node-apps/site/src/utils/shop.ts","../../../../node-apps/site/src/components/shop/TimedButton.vue","../../../../node-apps/site/src/components/shop/EventForm.vue","../../../../node-apps/site/src/components/shop/AddToCart.vue","../../../../node-apps/site/src/components/shop/DownloadButton.vue","../../../../node-apps/site/src/components/shop/ImageZoomer.vue","../../../../node-apps/site/src/components/shop/ImageGallery.vue","../../../../node-apps/site/src/components/shop/product_utils.ts","../../../../node-apps/site/src/components/shop/RelatedProductsList.vue"],"sourcesContent":["import {\n  colorLabels,\n  extraIdentifiers,\n  typeOptions,\n  type Product,\n} from \"@/stores/defs/shop_defs\";\nimport { useShopStore } from \"@/stores/shop\";\nimport { destem } from \"./utilities\";\n\nexport interface ProductErrorMessage {\n  level: string;\n  message: string;\n  oos: boolean;\n  product: Product;\n  products: Product[];\n}\n\nexport function getCategoryLabels(product: Product): string[] {\n  const shop = useShopStore();\n  const categories = shop.objects.categories.filter((c) =>\n    product.categories.includes(c.id),\n  );\n  const retval = [] as string[];\n\n  // // FOR DEBUGGING\n  // if (localStorage.tester) {\n  //   for (const cat of categories) {\n  //     retval.push(\n  //       \"*\" +\n  //         shop.ancestors[cat.id].map((c) => `[${c.id}] ${c.name}`).join(\" > \"),\n  //     );\n  //   }\n  // }\n\n  for (const cat of categories) {\n    const name = cat.name.replace(\"Accessories\", \"\").trim();\n    if (colorLabels.includes(name)) {\n      retval.push(name);\n    }\n  }\n\n  let foundType = false;\n  for (const cat of categories) {\n    for (const ancestor of shop.ancestors[cat.id]) {\n      if (typeOptions.includes(ancestor.name)) {\n        retval.push(destem(ancestor.name));\n        foundType = true;\n        break;\n      }\n    }\n    if (foundType) {\n      break;\n    }\n  }\n\n  for (const cat of categories) {\n    for (const ancestor of shop.ancestors[cat.id]) {\n      if (\n        extraIdentifiers.includes(ancestor.name) &&\n        !retval.includes(ancestor.name)\n      ) {\n        retval.push(ancestor.name);\n      }\n    }\n  }\n  return retval;\n}\n\nconst MINUTES = 60 * 1000;\nexport var timeComponents: [string, number][] = [\n  [\"day\", 24 * 60 * 60 * 1000],\n  [\"hour\", 60 * 60 * 1000],\n  [\"minute\", MINUTES],\n  [\"second\", 1000],\n];\n\nexport function formatInterval(milli: number) {\n  milli = Math.floor(milli);\n\n  if (milli > 1000 * 60 * 5) {\n    for (let key in timeComponents) {\n      let [component, interval] = timeComponents[key];\n      if (milli > interval) {\n        const value = Math.ceil(milli / interval);\n        let label = component;\n        if (value !== 1) {\n          label = component + \"s\";\n        }\n        return `${value} ${label}`;\n      }\n    }\n  }\n  const minutes = Math.floor(milli / MINUTES);\n  milli -= minutes * MINUTES;\n  const seconds = \"\" + Math.floor(milli / 1000);\n  return `${minutes}:${seconds.padStart(2, \"0\")}`;\n}\n","<template>\n  <Button\n    type=\"button\"\n    :class=\"`${disabled ? 'disabled' : ''} ${classes}`\"\n    :disabled=\"disabled\"\n    :state=\"state\"\n    v-on:click=\"disabled ? null : emit('click', $event)\"\n  >\n    <slot v-if=\"!text\"></slot>\n    <span v-else>{{ text }}</span>\n  </Button>\n</template>\n\n<script setup lang=\"ts\">\nimport { useTimesyncStore } from \"@/stores/timesync\";\nimport { formatInterval } from \"@/utils/shop\";\nimport Button from \"primevue/button\";\nimport type { Ref } from \"vue\";\nimport { computed, onUnmounted, ref, watchEffect } from \"vue\";\n// import {timer} from \"../utils/promise\";\n\nconst props = withDefaults(\n  defineProps<{\n    state: string;\n    unlock?: string;\n  }>(),\n  {\n    state: \"reset\",\n  },\n);\nconst emit = defineEmits([\"click\"]);\nconst timesync = useTimesyncStore();\n\nconst classes: Ref<string[]> = ref([]);\nconst disabled = ref(false);\nconst last = ref(0);\nconst now = ref(Date.now());\nconst text = ref(\"\");\nlet __timer = -1;\n\nconst unlockTimestamp = computed(() => {\n  let unlock = props.unlock ? new Date(props.unlock).getTime() : 0;\n\n  // TODO: remove this testing\n  // unlock = new Date(Date.now() + 1000 * 5).getTime();\n\n  // compensate for server time offset\n  if (unlock) {\n    unlock -= timesync.offset;\n  }\n\n  return unlock;\n});\n\nwatchEffect(() => {\n  now.value = timesync.now;\n  let retval = \"\";\n  const dt = Math.abs(last.value - timesync.now);\n  last.value = timesync.now;\n  if (dt > 30 * 1000) {\n    timesync.calculate();\n  }\n\n  if (props.unlock) {\n    let interval = unlockTimestamp.value - timesync.now;\n    if (interval > 0) {\n      retval = formatInterval(interval);\n      disabled.value = true;\n    } else if (disabled.value) {\n      disabled.value = false;\n    }\n  }\n  text.value = retval;\n});\n\nonUnmounted(() => {});\n</script>\n\n<style scoped></style>\n","<template>\n  <div v-if=\"data.object\" class=\"event-form text-left\">\n    \n    <Message v-if=\"data.formStatus === 'error'\" severity=\"error\">\n      Please ensure that you have filled out the form entirely and correctly\n    </Message>\n    <Message v-if=\"!canBuyPrimary && !canBuyGuest\" severity=\"warn\">\n      You have added the maximum allowed tickets\n    </Message>\n    <form v-else @submit.prevent=\"isValid\" ref=\"form\" class=\"gap-sm\">\n      <fieldset class=\"flex-column gap-sm\">\n        <div v-if=\"canBuyGuest\" class=\"flex-row gap-sm\">\n          <label\n            class=\"checkbox-row flex-row gap-sm\"\n            :class=\"{ disabled: !canBuyPrimary || !canBuyGuest }\"\n          >\n            <!-- :model-value=\"!data.properties.guest\"\n            @update:model-value=\"data.properties.guest = $event\" -->\n            <Checkbox\n              @change=\"emits('change')\"\n              v-model=\"primary\"\n              binary\n              type=\"checkbox\"\n              :disabled=\"!canBuyPrimary || !canBuyGuest\"\n            />\n            Primary Ticket\n          </label>\n          <label\n            class=\"checkbox-row flex-row gap-sm\"\n            :class=\"{ disabled: !canBuyPrimary || !canBuyGuest }\"\n          >\n            <Checkbox\n              @change=\"emits('change')\"\n              v-model=\"data.properties.guest\"\n              binary\n              type=\"checkbox\"\n              :disabled=\"!canBuyPrimary || !canBuyGuest\"\n            />\n            Guest Ticket\n          </label>\n        </div>\n      </fieldset>\n      <fieldset v-for=\"grouper of groups\" class=\"flex-column gap-3xs\">\n        <!-- <legend v-if=\"grouper.label\">\n          {{ grouper.label }}\n        </legend> -->\n        <template v-for=\"field of grouper.fields\">\n          <div v-if=\"field.field_type === 'checkbox'\">\n            <label class=\"checkbox-row flex-row gap-sm overflow\">\n              <Checkbox\n                binary\n                v-model=\"data.properties[field.field_name]\"\n                @change=\"emits('change')\"\n                :name=\"field.field_name\"\n                :required=\"field.is_required\"\n                :autocomplete=\"field.autocomplete || 'off'\"\n              />\n              <span>{{ field.label || field.field_name }}</span> <br />\n            </label>\n            <div v-if=\"field.help_html\" v-html=\"field.help_html\" class=\"help\" />\n          </div>\n          <div v-else class=\"flex-column gap-3xs\">\n            <label>{{ field.label || field.field_name }}</label>\n            <div>\n              <InputNumber\n                v-if=\"['number'].includes(field.field_type)\"\n                v-model=\"data.properties[field.field_name]\"\n                @change=\"emits('change')\"\n                :type=\"field.field_type\"\n                :name=\"field.field_name\"\n                :required=\"field.is_required\"\n                :autocomplete=\"field.autocomplete || 'off'\"\n                maxlength=\"255\"\n              />\n              <InputText\n                v-else-if=\"['email', 'text'].includes(field.field_type)\"\n                v-model=\"data.properties[field.field_name]\"\n                @change=\"emits('change')\"\n                :type=\"field.field_type\"\n                :name=\"field.field_name\"\n                :required=\"field.is_required\"\n                :autocomplete=\"field.autocomplete || 'off'\"\n                maxlength=\"255\"\n              />\n              <Textarea\n                v-else-if=\"field.field_type === 'textarea'\"\n                v-model=\"data.properties[field.field_name]\"\n                @change=\"emits('change')\"\n                :name=\"field.field_name\"\n                :required=\"field.is_required\"\n                :autocomplete=\"field.autocomplete || 'off'\"\n                maxlength=\"1000\"\n              />\n              <Dropdown\n                v-else-if=\"field.field_type === 'select'\"\n                v-model=\"data.properties[field.field_name]\"\n                @change=\"emits('change')\"\n                :name=\"field.field_name\"\n                :required=\"field.is_required\"\n                :autocomplete=\"field.autocomplete || 'off'\"\n                :options=\"field.choices\"\n              />\n              <div\n                v-if=\"field.help_html\"\n                v-html=\"field.help_html\"\n                class=\"help\"\n              />\n            </div>\n          </div>\n        </template>\n      </fieldset>\n      <div v-if=\"canBuyGuest || canBuyPrimary\">\n        <slot>\n          <div class=\"form-row\">\n            <label></label>\n            <div>\n              <Button class=\"btn btn-default\">Save</Button>\n            </div>\n          </div>\n        </slot>\n      </div>\n    </form>\n  </div>\n  <div v-else-if=\"data.status === 'loading'\" class=\"p-md\">\n    <i>Loading...</i>\n  </div>\n  <div v-else>\n    <i>Product form failed to load</i>\n    {{ data.status }}\n    <Button>Try Again</Button>\n  </div>\n  <div v-if=\"sourceProblem\" class=\"note m-sm-b\">\n    NOTE: Event tickets must be purchased separately from all other products.\n    Please empty your shopping bag or move the items you’ve selected to your\n    wishlist before completing your event registration.\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useCartStore } from \"@/stores/cart\";\nimport type { Category } from \"@/stores/defs/shop_defs\";\nimport { useShopStore } from \"@/stores/shop\";\nimport type { Product } from \"@paparazzi/types/paparazzi.api.serializers\";\nimport type {\n  EventForm,\n  EventFormEntry,\n  EventFormField,\n} from \"@paparazzi/types/paparazzi.eventforms.serializers\";\nimport api from \"@virgodev/bazaar/functions/api\";\nimport Button from \"primevue/button\";\nimport Checkbox from \"primevue/checkbox\";\nimport Dropdown from \"primevue/dropdown\";\nimport InputNumber from \"primevue/inputnumber\";\nimport InputText from \"primevue/inputtext\";\nimport Message from \"primevue/message\";\nimport Textarea from \"primevue/textarea\";\nimport { computed, nextTick, onMounted, reactive, ref, watch } from \"vue\";\n\nconst emits = defineEmits([\"update:values\", \"change\", \"error\"]);\nconst props = defineProps<{\n  product: Product;\n  form: string | number;\n  values?: Record<string, any>;\n}>();\n\nconst cart = useCartStore();\nconst shop = useShopStore();\n\nconst form = ref();\nconst data = reactive({\n  status: \"\",\n  formStatus: \"\",\n  properties: props.values || {},\n  existing: undefined,\n  object: undefined,\n} as {\n  status: string;\n  formStatus: string;\n  properties: Record<string, any>;\n  existing?: EventFormEntry[];\n  object?: EventForm;\n});\n\nconst primaryCategory = computed(() => {\n  let category = props.product.category;\n  return shop.allowedCategories.find((c: Category) => c.id === category);\n});\nconst itemSource = computed(() => {\n  if (primaryCategory.value) {\n    return primaryCategory.value.inventory_source || \"default\";\n  }\n  return \"default\";\n});\nconst cartSource = computed(() => cart.inventorySource);\nconst sourceProblem = computed(() => {\n  return itemSource.value != cartSource.value && cart.items.length > 0;\n});\n\nconst groups = computed(() => {\n  const retval = [];\n  if (data.object?.fields) {\n    let grouper = { label: \"\", fields: [] as EventFormField[] };\n    for (const field of data.object.fields.filter(\n      (f: EventFormField) => !f.is_internal,\n    )) {\n      if (field.field_group !== grouper.label) {\n        if (grouper.fields.length > 0) {\n          retval.push(grouper);\n        }\n        grouper = { label: field.field_group || \"\", fields: [] };\n      }\n      grouper.fields.push(field);\n    }\n    if (grouper.fields.length > 0) {\n      retval.push(grouper);\n    }\n  }\n  return retval;\n});\n\nconst maxGuests = computed(() => {\n  return data.object?.max_guests || 1000;\n});\n\nconst primary = computed({\n  get: () => !data.properties.guest,\n  set: (v) => (data.properties.guest = !v),\n});\n\nconst hasPrimaryTicket = computed(() => {\n  if (data.existing?.some((s) => !s.guest)) {\n    return true;\n  }\n\n  if (data.object) {\n    for (const item of cart.items) {\n      const forms = item.extras?.eventforms;\n      if (\n        forms &&\n        forms[data.object.form_name] &&\n        forms[data.object.form_name].guest === false\n      ) {\n        return true;\n      }\n    }\n  }\n  return false;\n});\n\nconst guestTickets = computed(() => {\n  const retval = data.existing ? data.existing.filter((e) => e.guest) : [];\n  if (data.object) {\n    for (const item of cart.items) {\n      const forms = item.extras?.eventforms;\n      if (forms && forms[data.object.form_name]?.guest) {\n        retval.push(forms[data.object.form_name]);\n      }\n    }\n  }\n  return retval;\n});\nconst canBuyPrimary = computed(() => {\n  return !hasPrimaryTicket.value;\n});\nconst canBuyGuest = computed(() => {\n  if (data.object && data.existing) {\n    return maxGuests.value > guestTickets.value.length;\n  }\n  return null;\n});\n\nwatch(\n  () => props.values,\n  () => {\n    if (props.values) {\n      data.properties = props.values;\n    }\n  },\n  { deep: true },\n);\nwatch([canBuyGuest, canBuyPrimary], checkIfPossible);\n\nonMounted(async () => {\n  await loadForm();\n  const response = await api({\n    url: `event_form_entries/`,\n    params: {\n      form: props.form,\n    },\n  });\n  if (response.ok) {\n    data.existing = response.body.results as EventFormEntry[];\n    await nextTick();\n    if (!canBuyPrimary.value && canBuyGuest.value) {\n      emits(\"update:values\", { guest: true });\n    } else {\n      emits(\"update:values\", { guest: false });\n    }\n  }\n});\n\nfunction checkIfPossible() {\n  if (!canBuyPrimary.value && !canBuyGuest.value) {\n    emits(\n      \"error\",\n      `Maximum tickets reached (${guestTickets.value.length}/${maxGuests.value})`,\n    );\n  } else {\n    emits(\"error\", undefined);\n  }\n}\n\nasync function loadForm() {\n  data.status = \"loading\";\n  try {\n    const response = await api({ url: `event_forms/${props.form}/` });\n    if (response.ok) {\n      if (response.body.detail === \"Not found.\") {\n        throw new Error(response.body.detail);\n      }\n      data.object = response.body as EventForm;\n      if (Object.keys(data.properties).length === 0) {\n        clearForm();\n      }\n    }\n    data.status = \"\";\n  } catch (ex) {\n    console.error(ex);\n    data.status = `${ex}`;\n    data.object = undefined;\n  }\n}\n\nfunction clearForm() {\n  const retval: Record<string, any> = { guest: !canBuyPrimary.value };\n  if (data.object?.fields) {\n    data.object.fields.forEach((f: EventFormField) => {\n      if (f.field_type === \"checkbox\") {\n        retval[f.field_name] = !!f.default_value;\n      } else {\n        retval[f.field_name] = f.default_value || null;\n      }\n    });\n  }\n  emits(\"update:values\", retval);\n  data.properties = retval;\n}\n\nfunction isValid() {\n  data.formStatus = \"\";\n  if (data.object) {\n    if (form.value.checkValidity()) {\n      const retval: Record<string, any> = {};\n      for (const prop in data.properties) {\n        retval[prop] = data.properties[prop];\n      }\n      emits(\"update:values\", retval);\n      return retval;\n    } else {\n      data.formStatus = \"error\";\n    }\n  }\n  form.value.reportValidity();\n  return null;\n}\n\ndefineExpose({\n  data: data,\n  isValid,\n  clearForm,\n});\n</script>\n\n<style scoped>\nfieldset {\n  padding-bottom: 5px;\n}\n\n.eventforms {\n  width: 100%;\n}\n.event-form {\n  margin: 0 -15px 0 -15px;\n  width: 100%;\n  min-width: 460px;\n  max-width: 500px;\n}\n.event-form p {\n  white-space: wrap;\n}\n\n.event-form b.title {\n  font-size: 300;\n}\n.event-form legend {\n  width: 100%;\n  padding: var(--2XS) 0;\n  border-bottom: 1px solid var(--30);\n}\n.event-form input,\n.event-form .p-dropdown {\n  width: 100%;\n}\n.event-form label {\n  text-transform: uppercase;\n  font-size: 14px;\n  font-weight: 300;\n}\n.event-form :deep(.help) {\n  margin-top: 10px !important;\n}\n\n.event-form :deep(h3) {\n  margin: 0;\n  font-weight: 400;\n  font-size: 16px;\n}\n\n.disabled :deep(input[disabled]) {\n  border: 2px dashed red;\n  opacity: 0.015 !important;\n}\n\n.checkbox-row.overflow {\n  text-wrap: pretty;\n}\n.note {\n  width: auto;\n  text-wrap: pretty;\n  text-align: left;\n  font-size: 14px;\n  color: var(--Paparazzi-Pink);\n  line-height: normal;\n}\n\n@media (max-width: 900px) {\n  .event-form {\n    max-width: 460px;\n    min-width: 330px;\n  }\n}\n\n@media (max-width: 800px) and (min-width: 701px) {\n  .event-form {\n    min-width: 200px;\n    max-width: 300px;\n  }\n}\n\n@media (max-width: 700px) {\n  .event-form {\n    width: 100vw;\n    min-width: 100%;\n    max-width: 100%;\n  }\n}\n</style>\n","<template>\n  <div\n    class=\"add-to-bag\"\n    :id=\"`addtocart-${props.object.id}`\"\n    aria-label=\"Change Quantity\"\n  >\n    <div v-if=\"expanded && props.object.is_parent\" class=\"dropdown-options\">\n      <p class=\"dropdown-header\">Select Size</p>\n      <Dropdown\n        v-if=\"subproductOptions.length > 0\"\n        v-model=\"selectedOption\"\n        :options=\"subproductOptions\"\n        optionDisabled=\"disabled\"\n        optionLabel=\"name\"\n        optionValue=\"key\"\n        name=\"add_item_id\"\n        placeholder=\"Select an option\"\n        required\n      />\n      <div v-else class=\"alert alert-warning\">Sold out</div>\n    </div>\n    <div v-if=\"expanded && object.extras\">\n      <div class=\"extras\">\n        <div v-if=\"object.extras.eventforms\" class=\"eventforms\">\n          <EventForm\n            v-for=\"form of object.extras.eventforms\"\n            :product=\"object\"\n            :key=\"form\"\n            :form=\"form\"\n            :ref=\"(ref) => (eventforms[form] = ref)\"\n            @error=\"handleEventFormError\"\n            @change=\"button = 'reset'\"\n          >\n            <span />\n          </EventForm>\n        </div>\n        <div class=\"flex-row flex-space-between\">\n          <div key=\"voucher\">\n            <p v-if=\"message\" class=\"alert alert-warning\">\n              {{ message }}\n            </p>\n            <div class=\"flex-row\">\n              <InputText\n                placeholder=\"Voucher code\"\n                v-model=\"voucher\"\n                @input=\"handleVoucherCode\"\n              />\n              <div class=\"flex-stretch block\">\n                <i\n                  v-if=\"voucher && voucher === promos.couponCode\"\n                  class=\"fa fa-check-circle text-success\"\n                />\n                <i v-else-if=\"voucher && !message\" class=\"fa fa-sync fa-spin\" />\n              </div>\n            </div>\n          </div>\n          <div class=\"flex-stretch flex-align-center\" />\n          <div class=\"flex-column flex-align-bottom flex-center\">\n            <Message v-if=\"error\" class=\"m-2xs\">{{ error }}</Message>\n            <div class=\"flex-row\">\n              <Button\n                v-if=\"error || sourceProblem\"\n                disabled\n                class=\"btn btn-default\"\n              >\n                Can't Add\n              </Button>\n              <Button\n                v-else-if=\"!object.active\"\n                disabled\n                class=\"btn btn-default\"\n              >\n                Out of stock\n              </Button>\n              <Button v-else @click=\"handleCustomize\" class=\"btn btn-default\">\n                <template v-if=\"voucher && voucher != promos.couponCode\">\n                  Verifying\n                </template>\n                <template v-else-if=\"button === 'added'\">Added!</template>\n                <template v-else>Add</template>\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex-row\" v-else-if=\"isStatic\">\n      <em></em>\n    </div>\n    <div class=\"buttons flex-row flex-align-center flex-static\" v-else>\n      <router-link\n        class=\"btn btn-link\"\n        :to=\"{ name: 'product-detail', params: { slug: object.slug } }\"\n        v-if=\"props.object.is_parent && !expanded\"\n      >\n        <Button class=\"grey\">Choose Size</Button>\n      </router-link>\n      <router-link\n        class=\"btn btn-link\"\n        :to=\"{ name: 'product-detail', params: { slug: object.slug } }\"\n        v-if=\"object.extras && !expanded\"\n      >\n        <Button class=\"grey\"> More info... </Button>\n      </router-link>\n      <Button\n        v-else-if=\"!primaryCategory || (price == 0 && itemSource === 'default')\"\n        class=\"grey\"\n        :disabled=\"true\"\n      >\n        <span v-if=\"!primaryCategory\"> Unavailable [1] </span>\n        <span v-if=\"price == 0 && itemSource === 'default'\">\n          Unavailable [2]\n        </span>\n      </Button>\n      <span v-else class=\"flex-row\">\n        <InputNumber\n          v-if=\"\n            (props.showQuantity || (cartItem && cartItem.quantity > 0)) &&\n            object.stock > 0\n          \"\n          @update:model-value=\"updateQuantity\"\n          :model-value=\"cartItem?.quantity || qty || 1\"\n          class=\"add-quantity\"\n          showButtons\n          buttonLayout=\"horizontal\"\n          :min=\"0\"\n          :max=\"object.stock\"\n          fluid\n        >\n          <template #incrementbuttonicon>\n            <span class=\"pi pi-plus\" />\n          </template>\n          <template #decrementbuttonicon>\n            <span class=\"pi pi-minus\" />\n          </template>\n        </InputNumber>\n\n        <TimedButton\n          v-if=\"!cartItem || props.showQuantity\"\n          data-adding-text=\"Adding...\"\n          data-added-text=\"Added!\"\n          data-failed-text=\"Failed!\"\n          type=\"button\"\n          @click.prevent=\"handleAddToCart\"\n          :unlock=\"releaseDate\"\n          :state=\"button\"\n          :disabled=\"!object.active || !productSlug || !allowed\"\n          class=\"grey\"\n          :aria-label=\"'Add to Cart'\"\n        >\n          <span v-if=\"!object.active\">Out of stock</span>\n          <span v-else-if=\"productSlug\">\n            <template v-if=\"!allowed\"> Can`t Add </template>\n            <template v-else-if=\"error || sourceProblem\"> Can't Add </template>\n            <!-- <template v-else-if=\"added > 0\">Added {{ added }}</template> -->\n            <template v-else>Add</template>\n          </span>\n          <span v-else>Add</span>\n        </TimedButton>\n      </span>\n      <WishlistAdd\n        v-if=\"primaryCategory && showWishlist\"\n        :product=\"object.id\"\n        class=\"add-wishlist-btn flex-static\"\n      >\n        <span />\n      </WishlistAdd>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport TimedButton from \"@/components/shop/TimedButton.vue\";\nimport WishlistAdd from \"@/components/shop/WishlistAdd.vue\";\nimport type { Category, Product } from \"@/stores/defs/shop_defs\";\nimport { useShopStore } from \"@/stores/shop\";\nimport { useUserStore } from \"@/stores/user\";\nimport { addItemsToCart } from \"@/stores/utils/add_to_cart\";\nimport copy from \"@virgodev/bazaar/functions/copy\";\nimport Button from \"primevue/button\";\nimport Dropdown from \"primevue/dropdown\";\nimport InputNumber from \"primevue/inputnumber\";\nimport Message from \"primevue/message\";\nimport type { Ref } from \"vue\";\nimport { computed, ref, watch } from \"vue\";\n\nimport { useCartStore } from \"@/stores/cart\";\nimport { useWindowStore } from \"@/stores/window\";\n\nimport { useJoinStore } from \"@/stores/join\";\nimport { usePromosStore } from \"@/stores/promos\";\nimport { cancelDebounce, debounce } from \"@/utils/bouncer\";\nimport type { CartItem } from \"@paparazzi/types/paparazzi.api.serializers.base\";\nimport InputText from \"primevue/inputtext\";\nimport EventForm from \"./EventForm.vue\";\n// import BlinkTransition from \"paparazzi/components/blink_transition\";\n\nconst props = withDefaults(\n  defineProps<{\n    object: Product;\n    quantity?: number;\n    expanded?: boolean;\n    placeholder?: number;\n    showQuantity?: boolean;\n    showWishlist?: boolean;\n  }>(),\n  {\n    quantity: 1,\n    expanded: false,\n    placeholder: 1,\n    showQuantity: false,\n    showWishlist: true,\n  },\n);\nconst emit = defineEmits([\"added\", \"update:quantity\"]);\n\nconst win = useWindowStore();\nconst user = useUserStore();\nconst cart = useCartStore();\nconst shop = useShopStore();\nconst promos = usePromosStore();\nconst join = useJoinStore();\n\nconst message = ref(\"\");\nconst voucher = ref(cart.object.coupon_code || promos.couponCode);\nconst qty = ref(props.quantity);\nconst selectedOption = ref(\"\");\nconst button = ref(\"reset\");\nconst error: Ref<Error | string | null> = ref(null);\nconst editing = ref(false);\nconst eventforms: Ref<{ [index: string]: any }> = ref({});\nconst sizeOrder = [\n  \"X-Small\",\n  \"XS\",\n  \"S\",\n  \"Small\",\n  \"M\",\n  \"Medium\",\n  \"L\",\n  \"Large\",\n  \"XL\",\n  \"X-Large\",\n  \"2XL\",\n  \"2X-Large\",\n  \"3XL\",\n  \"3X-Large\",\n  \"4XL\",\n  \"4X-Large\",\n];\n\nlet timeout = -1;\nlet __couponCode = -1;\n\nconst allowed = computed(() => {\n  const names = [];\n  let excluded: number[] = [];\n  if (join.kit) {\n    names.push(\"Zi Bracelets 2024\");\n    for (const name of names) {\n      const cat = shop.categories.find((c) => c.name === name);\n      if (cat) {\n        excluded.push(cat.id);\n        excluded = excluded.concat(shop.descendents[cat.id].map((c) => c.id));\n      }\n    }\n  }\n  return !props.object.categories.some((c) => excluded.includes(c));\n});\n\nconst myQuantity = computed(() => {\n  let retval = qty.value;\n  // if (win.ctrlDown) {\n  //   retval = qty.value * 50;\n  // }\n  // if (win.shiftDown) {\n  //   retval = qty.value * 5;\n  // }\n  return retval;\n});\nconst price = computed(() => {\n  if (user.groups.indexOf(\"wholesale\") > -1) {\n    return props.object.prices.wholesale;\n  }\n  return props.object.prices.null;\n});\nconst productSlug = computed(() => {\n  let slug = props.object.slug;\n  if (props.object.is_parent) {\n    slug = selectedOption.value;\n  }\n  return slug;\n});\nconst isStatic = computed(() => {\n  return shop.staticCategoriesId.indexOf(props.object.category) > -1;\n});\nconst primaryCategory = computed(() => {\n  let category = props.object.category;\n  return shop.allowedCategories.find((c: Category) => c.id === category);\n});\nconst itemSource = computed(() => {\n  if (primaryCategory.value) {\n    return primaryCategory.value.inventory_source || \"default\";\n  }\n  return \"default\";\n});\nconst cartSource = computed(() => cart.inventorySource);\nconst sourceProblem = computed(() => {\n  return itemSource.value != cartSource.value && cart.items.length > 0;\n});\nconst cartItem = computed(() => {\n  return cart.items.find((item: CartItem) => {\n    return item.product?.slug === productSlug.value;\n  });\n});\nconst added: Ref<number> = computed(() => {\n  if (cartItem.value) {\n    return cartItem.value.quantity;\n  }\n  return 0;\n});\nconst subproducts = computed<Record<string, Product>>(() => {\n  return shop.objects.products\n    .filter((p) => {\n      return p.parent?.id === props.object.id;\n    })\n    .reduce(\n      (a, b) => {\n        a[b.id] = b;\n        return a;\n      },\n      {} as Record<string, Product>,\n    );\n});\nconst subproductOptions = computed<{ name: string; key: string }[]>(() => {\n  return (props.object.subproducts ?? [])\n    .slice()\n    .sort((a, b) => {\n      return sizeOrder.indexOf(a.option) - sizeOrder.indexOf(b.option);\n    })\n    .map((o: any) => ({\n      key: o.slug,\n      name:\n        `${o.option}` +\n        (subproducts.value[o.child]?.active ? \"\" : \" - Not Available\"),\n      disabled: !subproducts.value[o.child]?.active,\n    }));\n});\n\nconst releaseDate = computed<string | undefined>(() => {\n  let min: Date | undefined;\n  if (props.object.release_dates) {\n    for (const key in props.object.release_dates) {\n      if (user.groups.includes(key)) {\n        const date = new Date(props.object.release_dates[key]);\n        if (!min || min > date) {\n          min = date;\n        }\n      }\n    }\n  }\n  if (!min && props.object.release_date) {\n    min = new Date(props.object.release_date);\n  }\n  if (min) {\n    return min.toISOString();\n  }\n  return;\n});\n\n//   computed: {\n//     dbObject() {\n//       return this.$store.getters.indexedProducts.find((p) => p.id === this.object.id);\n//     },\n//     cart() { return this.$store.state.shop.cart; },\n//     user() { return this.$store.state.auth.user; },\n//   },\n//   watch: {\n//     myQuantity() {\n//       this.$emit(\"update:quantity\", this.myQuantity);\n//     },\n//   },\n//   methods: {\n\nwatch(\n  () => props.quantity,\n  () => {\n    qty.value = props.quantity;\n  },\n);\n\nwatch(cartItem, () => {\n  if (cartItem.value) {\n    qty.value = cartItem.value.quantity;\n  } else {\n    qty.value = 0;\n  }\n});\n\nfunction updateQuantity(changedTo: number) {\n  qty.value = changedTo;\n  if (cartItem.value) {\n    const original = cartItem.value.quantity;\n    cartItem.value.quantity = qty.value;\n    if (qty.value <= 0) {\n      if (cart.object.items) {\n        const index = cart.object.items.indexOf(cartItem.value);\n        if (index > -1) {\n          cart.object.items.splice(index, 1);\n        }\n      }\n    }\n\n    // cart item might have been removed\n    if (cartItem.value) {\n      if (cartItem.value.quantity > shop.orderMax) {\n        cartItem.value.quantity = shop.orderMax;\n      }\n    }\n\n    if (!cartItem.value || original !== cartItem.value.quantity) {\n      cart.object.changed = new Date().toISOString();\n    }\n  }\n\n  emit(\"update:quantity\", changedTo);\n}\n\nasync function handleVoucherCode() {\n  clearTimeout(__couponCode);\n  message.value = \"\";\n  if (voucher.value) {\n    if (await debounce(\"test-voucher\")) {\n      if (!(await promos.getCouponPromo(voucher.value))) {\n        message.value = \"Invalid Voucher Code\";\n        promos.couponPromo = undefined;\n      }\n      editing.value = false;\n    }\n  } else {\n    cancelDebounce(\"test-voucher\");\n    editing.value = false;\n    promos.couponCode = \"\";\n    promos.couponPromo = undefined;\n  }\n}\n\nasync function handleAddToCart() {\n  if (sourceProblem.value) {\n    if (itemSource.value === \"default\") {\n      console.warn(`Clear your cart before you add normal shop items`);\n      //   toaster.add({\n      //     severity: \"warn\",\n      //     detail: `Clear your cart before you add normal shop items`,\n      //   });\n    } else {\n      console.warn(\n        `Clear your cart before you add exclusive items from ${itemSource.value}`,\n      );\n      //   toaster.add({\n      //     severity: \"warn\",\n      //     detail: `Clear your cart before you add exclusive items from ${itemSource.value}`,\n      //   });\n    }\n  } else {\n    clearTimeout(timeout);\n    timeout = window.setTimeout(async () => {\n      button.value = \"adding\";\n\n      // verify product\n      let slug = productSlug.value;\n      if (slug) {\n        const response = await addItemsToCart([\n          {\n            slug,\n            quantity: myQuantity.value,\n          },\n        ]);\n        emit(\"added\", response);\n        button.value = \"added\";\n      } else {\n        button.value = \"reset\";\n      }\n    }, 11);\n\n    return false;\n  }\n}\n\nasync function handleCustomize() {\n  let valid = true;\n  const extras: { [index: string]: any } = {};\n\n  for (const key in eventforms.value) {\n    const el = eventforms.value[key] as typeof EventForm;\n    const data = el.isValid();\n    if (data === null) {\n      valid = false;\n    } else {\n      extras[el.data.object.form_name] = copy(data);\n    }\n  }\n\n  if (valid) {\n    // remove existing voucher item\n    if (promos.couponPromo) {\n      cart.object.items = cart.object.items.filter(\n        (item) => item.promotion !== promos.couponPromo,\n      );\n    }\n\n    const response = await addItemsToCart([\n      {\n        slug: productSlug.value,\n        quantity: myQuantity.value,\n        extras: { eventforms: extras },\n        promotion: promos.couponPromo,\n      },\n    ]);\n    if (response.ok) {\n      voucher.value = \"\";\n      button.value = \"added\";\n\n      for (const key in eventforms.value) {\n        eventforms.value[key].clearForm();\n      }\n    } else {\n      error.value = Object.values(response.errors).join(\", \");\n    }\n  } else {\n    button.value = \"reset\";\n  }\n}\n\nfunction handleEventFormError(ex: Error) {\n  error.value = ex;\n}\n</script>\n\n<style scoped>\ninput[type=\"number\"]::-webkit-outer-spin-button,\ninput[type=\"number\"]::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.flex-row {\n  gap: var(--2XS, 8px);\n}\n.flex-row .form-control {\n  width: 30px;\n  display: flex;\n}\n.extras {\n  border-radius: 5px;\n  padding: 0;\n  max-width: 550px;\n}\n.extra-buttons {\n  padding: 5px;\n  text-align: right;\n}\n.grey {\n  flex: 0 0 auto;\n}\n\n.add-to-bag {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  .dropdown-options {\n    margin-bottom: var(--XL, 56px);\n  }\n}\n\n.add-to-bag :deep(.p-inputnumber-button) {\n  background-color: #fff;\n  color: #000;\n  padding: 14px 0;\n}\n\n.add-to-bag :deep(.p-button.p-button-icon-only) {\n  width: 7px !important;\n}\n\n/* .add-to-bag :deep(.p-inputtext) {\n  border: none;\n} */\n\np.dropdown-header {\n  font-size: 14px;\n  text-transform: uppercase;\n  font-weight: 300;\n  margin: var(--3XS, 4px) 0;\n  text-align: left;\n}\n\n:deep(svg.p-icon) {\n  width: 11px;\n}\n.qty :deep(input) {\n  padding: 0;\n  text-align: center;\n  max-width: 4em;\n}\n.add-quantity {\n  padding: 0 2px;\n  & :deep(input) {\n    padding: 0;\n    width: 3em;\n    text-align: center;\n  }\n  & :deep(input.p-inputtext) {\n    border: none;\n  }\n}\n\nspan.pi {\n  font-size: 6px;\n}\n</style>\n","<template>\n  <a v-if=\"user.isRep\" href=\"#\" @click.prevent=\"downloadAll\">\n    <slot name=\"icon\"><i class=\"pi pi-download\" /></slot>\n    <slot></slot>\n  </a>\n</template>\n\n<script setup lang=\"ts\">\nimport { useUserStore } from \"@/stores/user\";\nimport { download, zip, type DownloadLink } from \"@/utils/download\";\nimport { extname, filename } from \"@/utils/formats\";\n\nconst props = withDefaults(\n  defineProps<{\n    images: any[];\n    download?: string;\n    zip?: boolean;\n  }>(),\n  {\n    zip: false,\n    download: \"image\",\n  },\n);\n\nconst user = useUserStore();\n\nasync function downloadAll() {\n  let images = [];\n  images = await getDownloadLinks();\n  if (props.zip) {\n    images = [await zip(images)];\n  }\n  await download(images);\n}\n\nasync function getDownloadLinks(): Promise<DownloadLink[]> {\n  return props.images.map((image, index) => {\n    if (typeof image === \"string\") {\n      return {\n        filename: filename(image),\n        url: image,\n      };\n    } else {\n      return {\n        filename: `${props.download}-${index}.${extname(image.original)}`,\n        url: image.original,\n      };\n    }\n  });\n}\n</script>\n\n<style scoped></style>\n","<template>\n  <div\n    class=\"zoomer\"\n    :class=\"{ zooming: data.zooming }\"\n    v-on:touchstart.prevent=\"zoomEnter\"\n    v-on:touchmove.prevent=\"zoomMove\"\n    v-on:touchend.prevent=\"zoomExit\"\n    v-on:mouseenter=\"zoomEnter\"\n    v-on:mouseleave=\"zoomExit\"\n    v-on:mousemove=\"zoomMove\"\n  >\n    <img ref=\"image\" :src=\"props.image\" :alt=\"props.alt\" @load=\"loaded\" />\n    <div\n      v-if=\"data.img\"\n      ref=\"zoom\"\n      class=\"img zoom\"\n      :style=\"{\n        'background-position': `${data.x}% ${data.y}%`,\n        'background-image': `url('${data.img}')`,\n        // width: `${width}px`,\n        // height: `${height}px`,\n      }\"\n    />\n    <!-- <div>{{ x }}, {{ y }}</div> -->\n    <!-- <div>{{ zoomed }}</div> -->\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { onMounted, reactive, ref, watch } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    image: string;\n    zoomedImage: string;\n    alt: string;\n    scale?: number;\n  }>(),\n  { scale: 4 },\n);\n\nconst image = ref<HTMLImageElement>();\nconst data = reactive({\n  zooming: false,\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0,\n  img: \"\",\n  box: undefined as undefined | DOMRect,\n  event: undefined as undefined | MouseEvent | TouchEvent,\n  frame: -1,\n});\n\nwatch(\n  () => props.zoomedImage,\n  () => {\n    thumbnailImage();\n  },\n);\n\nonMounted(() => {\n  thumbnailImage();\n});\n\nasync function thumbnailImage() {\n  data.img = \"\";\n  if (image.value) {\n    const zoomer = await new Promise<HTMLImageElement>((resolve) => {\n      const img = new Image();\n      img.crossOrigin = \"anonymous\";\n      img.onload = () => resolve(img);\n      img.src = props.zoomedImage;\n    });\n    const w = zoomer.width;\n    const h = zoomer.height;\n\n    const canvas = document.createElement(\"canvas\");\n    data.box = image.value.getBoundingClientRect();\n    canvas.width = data.box.width * props.scale;\n    canvas.height = data.box.height * props.scale;\n    const ctx = canvas.getContext(\"2d\");\n    if (ctx) {\n      ctx.drawImage(zoomer, 0, 0, w, h, 0, 0, canvas.width, canvas.height);\n      data.img = canvas.toDataURL(\"png\");\n    }\n  }\n}\n\nfunction loaded(e: any) {\n  data.width = e.target.width;\n  data.height = e.target.height;\n}\nfunction zoomExit() {\n  data.zooming = false;\n}\nfunction zoomEnter() {\n  data.zooming = true;\n}\nfunction zoomMove(ev: MouseEvent | TouchEvent) {\n  data.event = ev;\n  if (data.frame === -1) {\n    data.frame = window.requestAnimationFrame(frameMove);\n  }\n}\nfunction frameMove() {\n  if ((data.event as TouchEvent).touches) {\n    const te = data.event as TouchEvent;\n    let x = 0;\n    let y = 0;\n    Array.prototype.forEach.call(te.touches, (touch) => {\n      x += touch.clientX;\n      y += touch.clientY;\n    });\n    doMove(x, y);\n  } else {\n    const me = data.event as MouseEvent;\n    doMove(me.clientX, me.clientY);\n  }\n  data.frame = -1;\n}\nfunction doMove(x: number, y: number) {\n  if (data.box && image.value) {\n    data.x = (x - data.box.left) / (data.box.width / 100);\n    data.y = (y - data.box.top) / (data.box.height / 100);\n  }\n}\n</script>\n\n<style scoped>\n.zoomer {\n  position: relative;\n  border: 0;\n  overflow: hidden;\n  max-width: 100%;\n  max-height: 100%;\n  cursor: move;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\nimg {\n  max-width: 100%;\n  max-height: 100%;\n}\n.img {\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-position: center center;\n  background-repeat: no-repeat;\n  background-color: white;\n}\n\n.zoom {\n  z-index: 10;\n  transition: opacity 100ms;\n  opacity: 0;\n}\n\n.zooming .zoom {\n  opacity: 1;\n}\n</style>\n","<template>\n  <div>\n    <div v-if=\"current\" class=\"flex-row img-detail\">\n      <div class=\"flex-column flex-center\">\n        <i\n          @click=\"imageIndex = (media.length - 1 + imageIndex) % media.length\"\n          class=\"pi pi-chevron-left\"\n        />\n      </div>\n      <div class=\"main-image flex-stretch\">\n        <div v-if=\"current.type === 'video'\" class=\"main video-frame\">\n          <iframe\n            v-if=\"/player.vimeo.com/.test(current.source)\"\n            :src=\"current.source\"\n            frameborder=\"0\"\n            allow=\"autoplay; fullscreen; picture-in-picture\"\n            allowfullscreen\n          />\n          <video v-else :src=\"current.source\" controls autoplay />\n        </div>\n        <ImageZoomer\n          v-else-if=\"current.source && props.zoom\"\n          :image=\"current.source.w500\"\n          :zoomed-image=\"current.source.original\"\n          :alt=\"props.alt\"\n          class=\"main\"\n        />\n        <ThumbnailedImage\n          v-else-if=\"current.source\"\n          :images=\"current.source\"\n          :alt=\"props.alt\"\n          class=\"main\"\n        />\n      </div>\n      <div class=\"flex-column flex-center\">\n        <i\n          @click=\"imageIndex = (imageIndex + 1) % media.length\"\n          class=\"pi pi-chevron-right\"\n        />\n      </div>\n    </div>\n    <div v-if=\"props.includeSmall\" class=\"small flex-row\">\n      <template v-for=\"(group, index) of media\">\n        <img\n          v-if=\"group.thumb\"\n          v-bind=\"group.thumb\"\n          @click=\"imageIndex = index\"\n          class=\"video-thumbnail\"\n        />\n        <div\n          v-else-if=\"group.type === 'video'\"\n          @click=\"imageIndex = index\"\n          class=\"small-frame\"\n        >\n          <i class=\"pi pi-video\" />\n        </div>\n        <ThumbnailedImage\n          v-else\n          @click=\"imageIndex = index\"\n          :images=\"group.source\"\n          :alt=\"props.alt\"\n          size=\"72px\"\n          class=\"thumbnail\"\n        />\n      </template>\n\n      <div class=\"image-button\">\n        <DownloadButton\n          :images=\"media.map((i) => i.source)\"\n          :download=\"props.download\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { ProductVideo } from \"@/stores/defs/shop_defs\";\nimport { expandThumb } from \"paparazzi/components/stores/thumbnail_conversion\";\nimport { computed, ref, watch } from \"vue\";\nimport ThumbnailedImage from \"../ThumbnailedImage.vue\";\nimport DownloadButton from \"./DownloadButton.vue\";\nimport ImageZoomer from \"./ImageZoomer.vue\";\n\nconst props = defineProps<{\n  images: any[];\n  videos?: ProductVideo[];\n  alt: string;\n  download?: string;\n  video?: { source: string; thumb: any };\n  includeSmall?: boolean;\n  zoom?: boolean;\n}>();\n// const videoThumbs = ref<Record<string, string>>({});\n\nconst imageIndex = ref(0);\nconst media = computed<{ type: string; source: any; thumb: any }[]>(() => {\n  return [\n    ...props.images.map((i) => {\n      const retval: { [key: string]: string } = {};\n      for (const key in i) {\n        retval[key] = expandThumb(i[key]);\n      }\n      return { type: \"image\", source: retval };\n    }),\n    // ...(props.videos\n    //   ? props.videos.map((v) => ({\n    //       type: \"video\",\n    //       source: v.url,\n    //     }))\n    //   : []),\n    ...(props.video ? [{ type: \"video\", ...props.video }] : []),\n  ];\n});\n\nconst current = computed(() => {\n  return media.value[imageIndex.value];\n});\n\nwatch(media, () => {\n  imageIndex.value = 0;\n});\n\n// onMounted(async () => {\n//   if (props.videos) {\n//     props.videos.forEach(async (video) => {\n//       if (!videoThumbs.value[video.url]) {\n//         const response = await fetch(\n//           `https://vimeo.com/api/oembed.json?url=${video.url}`,\n//         );\n//         const json = await response.json();\n//         // videoThumbs.value[video.url] = json[\"thumbnail_url_with_play_button\"];\n//         videoThumbs.value[video.url] = json[\"thumbnail_url\"];\n//       }\n//     });\n//   }\n// });\n</script>\n\n<style scoped>\n.img-detail {\n  width: 394px;\n  max-width: 100%;\n}\n.img-detail .pi.pi-chevron-left,\n.img-detail .pi.pi-chevron-right {\n  font-size: 12px;\n  padding: 6px;\n  cursor: pointer;\n}\n.small {\n  gap: 24px;\n  margin-top: var(--Sm, 24px);\n  max-width: 346px;\n  overflow: hidden;\n  position: relative;\n}\n.video-thumbnail,\n.thumbnail {\n  cursor: pointer;\n}\n.small .image-button {\n  opacity: 0.5;\n  margin-left: auto;\n}\n.small > .video-thumbnail {\n  display: grid;\n  align-items: center;\n  text-align: center;\n  justify-content: center;\n  flex: 1 1 calc(100% / 3);\n  max-width: calc(100% / 3);\n  max-width: 72px;\n  object-fit: cover;\n  aspect-ratio: 8 / 10;\n}\n\n.small > img {\n  flex: 1 1 calc(100% / 3);\n  max-width: calc(100% / 3);\n  max-width: 72px;\n  min-width: 20px;\n  aspect-ratio: 8 / 10;\n}\n\n.main > iframe,\n.main > video,\n.main-image > img {\n  width: 100%;\n  height: auto;\n  aspect-ratio: 8 / 10;\n  object-fit: contain;\n}\n\n.main-image {\n  max-width: 346px;\n  aspect-ratio: 8 / 10;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.video-frame {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: auto;\n  aspect-ratio: 8 / 10;\n}\n\n.small-frame {\n  width: 60px;\n  height: 90px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  i {\n    font-size: 2em;\n  }\n}\nvideo {\n  width: 100%;\n}\n\n@media screen and (max-width: 800px) {\n  .main-image > img {\n    width: 345px;\n  }\n}\n</style>\n","import { useShopStore } from \"@/stores/shop\";\nimport type { Product } from \"@/stores/shop_defs\";\nimport api from \"@virgodev/bazaar/functions/api\";\nimport fastShuffle from \"fast-shuffle\";\n\nconst shuffle = fastShuffle(Math.random());\n\nexport async function loadRelated(object: Product): Promise<Product[]> {\n  const shop = useShopStore();\n  let related: Product[] = [];\n\n  const collections = shop.collections\n    .filter((c) => object.categories.includes(c.id))\n    .map((c) => c.id);\n\n  if (collections.length > 0) {\n    related = shuffle(\n      shop.products.filter((p) =>\n        p.categories.some((c) => collections.includes(c)),\n      ),\n    ).slice(0, 6);\n  } else if (object.complete_look) {\n    related = object.complete_look;\n  } else if (object.cl_refs) {\n    related = object.cl_refs\n      .map((pid: number) => {\n        return shop.products.find((p) => p.id === pid);\n      })\n      .filter((a) => a) as Product[];\n  } else if (object.slug) {\n    let response = await api({ url: `products/${object.slug}/related/` });\n    if (response.ok) {\n      related = response.body.related;\n    } else {\n      related = [];\n    }\n  }\n\n  return related;\n}\n","<template>\n  <div\n    v-if=\"related.length > 0 && (isFashionFix || !props.setsOnly)\"\n    class=\"related-products\"\n  >\n    <h4>\n      {{ isFashionFix ? \"Other pieces in this set\" : \"You might also like\" }}\n    </h4>\n    <div v-if=\"props.extended && isFashionFix\" class=\"sets-text\">\n      <p>\n        This look features pieces hand-selected by our Paparazzi stylists. Each\n        set has been paired together by coordinating textures, colors, and other\n        design elements to create a flawless cohesive look! Take the guesswork\n        out of accessorizing and add all of these coordinating pieces to your\n        bag now! Each accessory is just $5!\n      </p>\n    </div>\n\n    <div class=\"product-list\">\n      <RouterLink\n        v-for=\"mini of related.slice(0, count)\"\n        :to=\"{ name: 'product-detail', params: { slug: mini.slug } }\"\n        class=\"mini\"\n      >\n        <ThumbnailedImage\n          v-if=\"mini.images?.length > 0\"\n          :images=\"mini.images[0]\"\n          size=\"167\"\n          :alt=\"mini.name\"\n        />\n        <span class=\"mini-name\">{{ mini.name }}</span>\n      </RouterLink>\n    </div>\n    <div v-if=\"props.extended && isFashionFix\" class=\"sets-button\">\n      <RouterLink :to=\"{}\">\n        <Button class=\"p-button\">Add Collection to Bag</Button>\n      </RouterLink>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { Product } from \"@/stores/defs/shop_defs\";\nimport { useShopStore } from \"@/stores/shop\";\nimport Button from \"primevue/button\";\nimport { computed, onMounted, ref, watch, type Ref } from \"vue\";\nimport ThumbnailedImage from \"../ThumbnailedImage.vue\";\nimport { loadRelated } from \"./product_utils\";\n\nconst props = withDefaults(\n  defineProps<{\n    object: Product;\n    count?: number;\n    setsOnly?: boolean;\n    extended?: boolean;\n  }>(),\n  {\n    count: 6,\n    setsOnly: false,\n    showDescription: false,\n    extended: false,\n  },\n);\n\nconst related: Ref<Product[]> = ref([]);\n\nconst shop = useShopStore();\n\nconst categories = computed(() => {\n  return shop.categories.filter((category) => {\n    return (props.object.categories || []).includes(category.id);\n  });\n});\nconst isFashionFix = computed(() => {\n  return categories.value.some((c) => /fashion fix/gi.test(c.name));\n});\n\nwatch(\n  () => props.object?.slug,\n  async () => {\n    if (props.object) {\n      related.value = await loadRelated(props.object);\n    }\n  },\n);\n\nonMounted(async () => {\n  if (props.object) {\n    related.value = await loadRelated(props.object);\n  }\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.related-products {\n  padding: var(--Sm);\n  background: var(--10, #ededed);\n}\n.related-products h4 {\n  color: var(--Black, #000);\n  margin-top: 0;\n  margin-bottom: var(--Sm);\n  letter-spacing: 0.25px;\n\n  /* Heading 4 */\n  font-family: Indivisible;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: normal;\n  text-transform: uppercase;\n  text-align: center;\n}\n.related-products > * {\n  justify-content: center;\n  gap: var(--Sm);\n}\n.sets-text {\n  max-width: 738px;\n  margin: 0 auto var(--Sm, 24px);\n  font-size: 12px;\n  line-height: normal;\n}\n.sets-button {\n  margin: var(--Sm, 24px) auto 0;\n  text-align: center;\n}\n.product-list {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(0px, auto));\n  grid-template-rows: auto;\n  justify-content: center;\n  align-items: stretch;\n  flex-direction: row;\n  overflow: hidden;\n  // border: 1px solid red;\n  width: 100%;\n  gap: var(--Sm);\n}\n.mini {\n  flex: 1 1 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex-shrink: 0;\n  min-width: 10px;\n  // width: var(--Component-sizes-XS, 167px);\n  width: 100%;\n  max-width: 100%;\n  // max-width: min-content;\n  // border: 1px solid orangered;\n  overflow: hidden;\n}\n.mini img {\n  width: 167px;\n  min-width: 0px;\n  max-width: 100%;\n  object-fit: cover;\n  object-position: center;\n  // height: 209px;\n  margin-bottom: var(--2XS, 8px);\n  aspect-ratio: 8 / 10;\n}\n@media (max-width: 800px) {\n  #app .product-list {\n    display: flex;\n    justify-content: flex-start;\n    overflow: auto;\n  }\n  #app .mini {\n    flex: 0 0 auto;\n    width: 167px;\n  }\n}\n\nspan.mini-name {\n  color: var(--Black, #000);\n  text-align: center;\n  font-family: Indivisible;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n  display: block;\n  // display: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  max-width: 90%;\n}\n</style>\n"],"names":["getCategoryLabels","product","shop","useShopStore","categories","c","retval","cat","name","colorLabels","foundType","ancestor","typeOptions","destem","extraIdentifiers","MINUTES","timeComponents","formatInterval","milli","key","component","interval","value","label","minutes","seconds","props","__props","emit","__emit","timesync","useTimesyncStore","classes","ref","disabled","last","now","text","unlockTimestamp","computed","unlock","watchEffect","dt","onUnmounted","emits","cart","useCartStore","form","data","reactive","primaryCategory","category","itemSource","cartSource","sourceProblem","groups","_a","grouper","field","f","maxGuests","primary","v","hasPrimaryTicket","s","item","forms","_b","guestTickets","e","canBuyPrimary","canBuyGuest","watch","checkIfPossible","onMounted","loadForm","response","api","nextTick","clearForm","ex","isValid","prop","__expose","useWindowStore","user","useUserStore","promos","usePromosStore","join","useJoinStore","message","voucher","qty","selectedOption","button","error","editing","eventforms","sizeOrder","timeout","__couponCode","allowed","names","excluded","myQuantity","price","productSlug","slug","isStatic","cartItem","subproducts","p","a","b","subproductOptions","o","releaseDate","min","date","updateQuantity","changedTo","original","index","handleVoucherCode","debounce","cancelDebounce","handleAddToCart","addItemsToCart","handleCustomize","valid","extras","el","copy","handleEventFormError","downloadAll","images","getDownloadLinks","zip","download","image","filename","extname","thumbnailImage","zoomer","resolve","img","w","h","canvas","ctx","loaded","zoomExit","zoomEnter","zoomMove","ev","frameMove","te","x","y","touch","doMove","me","imageIndex","media","i","expandThumb","current","shuffle","fastShuffle","loadRelated","object","related","collections","pid","isFashionFix"],"mappings":"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"}