{"version":3,"file":"BXQ7SUyn.js","sources":["../../../../components/os-variant-card.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Option } from '#imports'\nimport { isTest } from '#imports'\n\nconst props = defineProps<{\n  variant?: Variant\n  mode?: 'buy' | 'add'\n  displaySymbol?: boolean\n  hidesSelectedOptions?: boolean\n}>()\n\nconst emit = defineEmits<{\n  (event: 'select', option: Option): void\n}>()\n\nconst optionsDialog = ref()\n\nconst mediaQuery = useMediaQuery()\n\nconst isSoldOut = computed(() => {\n  if (isTest()) {\n    return false\n  }\n\n  const optionsWithStock = (props.variant ? (options.value ?? []) : []).filter(\n    (option: Option) => !(option.stock === 0),\n  )\n  return optionsWithStock.length === 0\n})\n\nconst options = computed(() => {\n  return (props.variant?.options ?? []).filter((option: Option) => true) // !props.hidesSelectedOptions || !order.isOptionSelected(option));\n})\n\nconst lowestOptions = computed(() => {\n  return getLowestDiscountOption(props.variant?.options)\n})\n\nfunction openOptionPicker() {\n  // do we have options\n  if (options.value.length === 0) {\n    return\n  }\n\n  // only one option?\n  if (options.value.length === 1) {\n    selectOption(options.value[0])\n    return\n  }\n\n  // show the option picker\n  optionsDialog.value.open()\n}\n\nfunction selectOption(option: Option) {\n  optionsDialog.value &&\n    optionsDialog.value.isOpen &&\n    optionsDialog.value.close()\n  emit('select', option)\n}\n\nfunction getLowestDiscountOption(options: Option[]): Option | null {\n  return options.reduce((lowest: Option | null, option: Option) => {\n    return lowest === null ||\n      parseFloat(option.discountPrice) < parseFloat(lowest.discountPrice)\n      ? option\n      : lowest\n  }, null)\n}\n</script>\n\n<template>\n  <ion-card\n    v-if=\"variant\"\n    class=\"os-variant-card\"\n    :class=\"{ 'os-variant-card--compact': !mediaQuery.isSmall }\"\n    @click=\"openOptionPicker\"\n    :inert=\"isSoldOut\"\n  >\n    <os-row cross-axis-alignment=\"stretch\" gap=\"none\">\n      <img\n        v-if=\"variant?.image\"\n        class=\"os-variant-card__image\"\n        :alt=\"variant.name\"\n        :src=\"variant.image.lg\"\n        :style=\"mediaQuery.isSmall ? 'width: 25%' : 'width: 40%'\"\n      />\n\n      <os-expanded>\n        <os-column\n          cross-axis-alignment=\"stretch\"\n          gap=\"narrow\"\n          class=\"os-variant-card__details\"\n        >\n          <ion-card-title>\n            <os-clamp :lines=\"2\">{{ stripTags(variant.name) }}</os-clamp>\n            <div\n              v-if=\"options.length > 1\"\n              class=\"os-variant-card__option-count\"\n            >\n              {{\n                $t('deal.option_count', options.length, {\n                  count: options.length,\n                })\n              }}\n            </div>\n            <div\n              v-else-if=\"options[0] && options[0].name !== variant.name\"\n              class=\"os-variant-card__option-count\"\n            >\n              {{ stripTags(options[0].name) }}\n            </div>\n          </ion-card-title>\n\n          <os-expanded />\n\n          <template v-if=\"mediaQuery.isLarge\">\n            <os-row gap=\"narrow\" cross-axis-alignment=\"end\">\n              <os-column cross-axis-alignment=\"start\" gap=\"none\">\n                <s\n                  class=\"h3\"\n                  v-if=\"\n                    variant.originalPrice &&\n                    parseFloat(variant.originalPrice) >\n                      parseFloat(variant.discountPrice)\n                  \"\n                  ><os-currency\n                    :value=\"\n                      lowestOptions\n                        ? lowestOptions.originalPrice\n                        : variant.originalPrice\n                    \"\n                    :display-symbol=\"displaySymbol\"\n                /></s>\n                <div class=\"h1\">\n                  <os-currency\n                    :value=\"\n                      lowestOptions\n                        ? lowestOptions.discountPrice\n                        : variant.discountPrice\n                    \"\n                    :display-symbol=\"displaySymbol\"\n                  />\n                </div>\n              </os-column>\n\n              <os-expanded />\n\n              <ion-button\n                secondary\n                inert\n                size=\"small\"\n                v-if=\"variant.percentOff && !isSoldOut\"\n              >\n                <b><os-percent :value=\"variant.percentOff * -1\" /></b>\n              </ion-button>\n\n              <ion-button size=\"small\" v-if=\"mode\">\n                <template v-if=\"isSoldOut\" />\n                <ion-icon\n                  v-else-if=\"mode === 'add'\"\n                  slot=\"end\"\n                  :icon=\"ioniconsAddOutline\"\n                ></ion-icon>\n                <ion-icon\n                  v-else-if=\"mode === 'buy'\"\n                  slot=\"end\"\n                  :icon=\"ioniconsChevronForward\"\n                ></ion-icon>\n                <b v-if=\"isSoldOut\">{{ $t('label.sold_out') }}</b>\n                <b v-else-if=\"mode === 'add'\">{{ $t('label.add') }}</b>\n                <b v-else-if=\"mode === 'buy'\">{{ $t('label.order_now') }}</b>\n              </ion-button>\n            </os-row>\n          </template>\n\n          <template v-else>\n            <os-row\n              main-axis-alignment=\"space-between\"\n              cross-axis-alignment=\"center\"\n              gap=\"none\"\n            >\n              <os-expanded>\n                <os-row\n                  cross-axis-alignment=\"center\"\n                  main-axis-alignment=\"start\"\n                  gap=\"narrow\"\n                >\n                  <s\n                    class=\"h3\"\n                    v-if=\"\n                      variant.originalPrice &&\n                      parseFloat(variant.originalPrice) >\n                        parseFloat(variant.discountPrice)\n                    \"\n                    ><os-currency\n                      :value=\"\n                        lowestOptions\n                          ? lowestOptions.originalPrice\n                          : variant.originalPrice\n                      \"\n                      :display-symbol=\"displaySymbol\"\n                  /></s>\n                  <div class=\"h1\">\n                    &nbsp;<os-currency\n                      :value=\"\n                        lowestOptions\n                          ? lowestOptions.discountPrice\n                          : variant.discountPrice\n                      \"\n                      :display-symbol=\"displaySymbol\"\n                    />\n                  </div>\n                </os-row>\n              </os-expanded>\n\n              <os-column\n                class=\"os-variant-card__percent-off\"\n                v-if=\"variant.percentOff && !isSoldOut\"\n              >\n                <os-percent :value=\"variant.percentOff * -1\" />\n              </os-column>\n            </os-row>\n\n            <ion-button size=\"small\" v-if=\"mode\">\n              <template v-if=\"isSoldOut\" />\n              <ion-icon\n                v-else-if=\"mode === 'add'\"\n                slot=\"end\"\n                :icon=\"ioniconsAddOutline\"\n              ></ion-icon>\n              <ion-icon\n                v-else-if=\"mode === 'buy'\"\n                slot=\"end\"\n                :icon=\"ioniconsChevronForward\"\n              ></ion-icon>\n              <b v-if=\"isSoldOut\">{{ $t('label.sold_out') }}</b>\n              <b v-else-if=\"mode === 'add'\">{{ $t('label.add') }}</b>\n              <b v-else-if=\"mode === 'buy'\">{{ $t('label.order_now') }}</b>\n            </ion-button>\n          </template>\n        </os-column>\n      </os-expanded>\n    </os-row>\n\n    <os-dialog ref=\"optionsDialog\" :title=\"$t('label.make_your_choice')\">\n      <os-column\n        cross-axis-alignment=\"stretch\"\n        :gap=\"mediaQuery.isMedium ? 'default' : 'narrow'\"\n        class=\"os-variant-card__options-list\"\n      >\n        <os-option-card\n          v-for=\"option in options ?? []\"\n          :option=\"option\"\n          :mode=\"mode ?? 'buy'\"\n          :display-symbol=\"displaySymbol\"\n          @select=\"selectOption(option)\"\n        />\n      </os-column>\n    </os-dialog>\n  </ion-card>\n</template>\n\n<style scoped>\n.os-variant-card {\n  background-color: var(--background--primary);\n  cursor: pointer;\n}\n\n.os-variant-card[inert] {\n  opacity: 0.5;\n}\n\n.os-variant-card > .os-row {\n  height: 100%;\n}\n\n.os-variant-card__image {\n  object-fit: contain;\n  background-color: white;\n  display: flex;\n  flex: 0 0 0%;\n  flex-basis: auto;\n}\n\n.os-variant-card__details {\n  padding: 1rem;\n}\n\n.os-variant-card--compact .os-variant-card__details {\n  padding: 0.75rem 1rem;\n}\n\n.os-variant-card__option-count {\n  opacity: 0.75;\n  font-weight: normal;\n}\n\n.os-variant-card__options-list {\n  padding-bottom: 2rem;\n}\n\n.os-variant-card__percent-off {\n  background-color: var(--header);\n  color: var(--white);\n  border-radius: 0.25rem;\n  padding: 5px;\n  flex-shrink: 1;\n  flex-grow: 0;\n  font-size: 0.65rem;\n  font-weight: bold;\n}\n</style>\n"],"names":["props","__props","emit","__emit","optionsDialog","ref","mediaQuery","useMediaQuery","isSoldOut","computed","isTest","options","option","_a","lowestOptions","getLowestDiscountOption","openOptionPicker","selectOption","lowest"],"mappings":"2wBAIA,MAAMA,EAAQC,EAORC,EAAOC,EAIPC,EAAgBC,EAAI,EAEpBC,EAAaC,EAAc,EAE3BC,EAAYC,EAAS,IACrBC,IACK,IAGiBV,EAAM,QAAWW,EAAQ,OAAS,CAAA,EAAM,CAAA,GAAI,OACnEC,GAAqBA,EAAO,QAAU,CACzC,EACwB,SAAW,CACpC,EAEKD,EAAUF,EAAS,IAAM,OACrB,SAAAI,EAAAb,EAAM,UAAN,YAAAa,EAAe,UAAW,IAAI,OAAQD,GAAmB,EAAI,CAAA,CACtE,EAEKE,EAAgBL,EAAS,IAAM,OAC5B,OAAAM,GAAwBF,EAAAb,EAAM,UAAN,YAAAa,EAAe,OAAO,CAAA,CACtD,EAED,SAASG,GAAmB,CAEtB,GAAAL,EAAQ,MAAM,SAAW,EAKzB,IAAAA,EAAQ,MAAM,SAAW,EAAG,CACjBM,EAAAN,EAAQ,MAAM,CAAC,CAAC,EAC7B,MAAA,CAIFP,EAAc,MAAM,KAAK,EAAA,CAG3B,SAASa,EAAaL,EAAgB,CACpCR,EAAc,OACZA,EAAc,MAAM,QACpBA,EAAc,MAAM,MAAM,EAC5BF,EAAK,SAAUU,CAAM,CAAA,CAGvB,SAASG,EAAwBJ,EAAkC,CACjE,OAAOA,EAAQ,OAAO,CAACO,EAAuBN,IACrCM,IAAW,MAChB,WAAWN,EAAO,aAAa,EAAI,WAAWM,EAAO,aAAa,EAChEN,EACAM,EACH,IAAI,CAAA"}