{"version":3,"file":"YJ4t3rmc.js","sources":["../../../../src/components/dialog/productSubscriptionActivate/useProductSubscriptionActivate.ts","../../../../src/components/dialog/productSubscriptionActivate/productSubscriptionActivate.vue"],"sourcesContent":["import { useSecureSessionPost } from '~/composables/dataFetching/genericFetchers';\nimport { DialogResponses, useDialogStore } from '@/stores/useDialogStore';\nimport { EDeliveryIntervalValues } from '@/@types/product-subscription';\nimport type { OrderAlarm } from '@/server/transformers/shop/orderAlarmTransformer';\nimport type { ProductSubscriptionCounter } from '@/server/gateway/connections/shopware/loaders/loadProductSubscriptionTotalCounter';\nimport type { NewDeliveryDate } from '@/server/gateway/connections/shopware/loaders/loadNewDeliveryDate';\nimport { useCartStore } from '~/stores/useCart';\nimport { handleLoadingError } from '~/utils/handleLoadingError';\n\nexport async function useProductSubscriptionActivate(orderAlarm: OrderAlarm) {\n  const intervalMap = new Map<number, string>([\n    [2, EDeliveryIntervalValues.TWO_WEEKS],\n    [3, EDeliveryIntervalValues.THREE_WEEKS],\n    [4, EDeliveryIntervalValues.MONTHLY],\n    [5, EDeliveryIntervalValues.FIVE_WEEKS],\n    [6, EDeliveryIntervalValues.SIX_WEEKS],\n    [8, EDeliveryIntervalValues.TWO_MONTHS],\n    [12, EDeliveryIntervalValues.QUARTERLY],\n    [24, EDeliveryIntervalValues.HALFYEARLY],\n    [36, EDeliveryIntervalValues.NINE_MONTHS],\n  ]);\n  const site = useSiteIdent();\n  const product = ref(orderAlarm.product);\n  const quantity = ref(orderAlarm.packsPerWeek);\n  const interval = ref(\n    intervalMap.get(\n      orderAlarm.selectedOrderInterval ?? orderAlarm.recommendedOrderInterval,\n    ),\n  );\n\n  const productSubscriptionCounter = await (async () => {\n    try {\n      const result = await useSecureSessionPost<ProductSubscriptionCounter>(\n        `/api/${site}/shop/product/productSubscription/counter`,\n      );\n      if (!result?.counter) {\n        return {\n          counter: 0,\n        };\n      }\n      return result;\n    } catch (e: any) {\n      handleLoadingError(e);\n      return {\n        counter: 0,\n      };\n    }\n  })();\n\n  async function getNewDeliveryDate(\n    interval: string,\n    desiredDeliveryDay: string,\n  ) {\n    try {\n      const deliveryDay: number = +desiredDeliveryDay;\n      const response = await useSecureSessionPost<NewDeliveryDate>(\n        `/api/${site}/shop/product/productSubscription/deliveryDate/load`,\n        {\n          interval: interval,\n          desiredDeliveryDay: deliveryDay,\n        },\n      );\n      return response?.date;\n    } catch (e: any) {\n      handleLoadingError(e);\n      return null;\n    }\n  }\n\n  async function onSubmit(\n    productId: string,\n    quantity: number,\n    interval: string,\n    desiredDeliveryDay: string,\n  ) {\n    const { addProductSubscription } = useCartStore();\n    const dialogStore = useDialogStore();\n    const deliveryDay: number = +desiredDeliveryDay;\n    addProductSubscription(productId, quantity, deliveryDay, interval);\n    dialogStore.closeDialog(DialogResponses.SUCCESS);\n  }\n\n  return {\n    product,\n    quantity,\n    interval,\n    productSubscriptionCounter,\n    getNewDeliveryDate,\n    onSubmit,\n  };\n}\n","<template>\n  <Dialog>\n    <template v-if=\"product.productSubscription.discount\" #headline-suffix\n      ><SubscripitonDiscountBadge\n        :discount=\"product.productSubscription.discount\"\n    /></template>\n    <template #default>\n      <div v-if=\"productSubscriptionCounter.counter === 0\">\n        <div\n          v-if=\"product.productSubscription.discount\"\n          class=\"font-bold pt-md font-deco-alt text-md md:text-lg mx-md\"\n        >\n          {{\n            t('shop.subscription.buyBox.discount', {\n              discount: product.productSubscription.discount,\n            })\n          }}\n        </div>\n        <BulletList\n          space-between-list-items=\"xs\"\n          :list-type=\"EListType.CheckMarksPrimary\"\n          :list-items=\"tList('shop.aboBox.productSubscription.list')\"\n          class=\"text-sm font-text md:text-md m-md\"\n        />\n        <ContentSeparator class=\"relative mt-lg\" />\n      </div>\n\n      <div class=\"p-md\">\n        <div class=\"product-grid\">\n          <div class=\"flex product-grid__image\">\n            <div class=\"relative w-[65px] sm:w-[150px] h-auto shrink-0\">\n              <ProductImage\n                :image-url=\"product.media?.cover\"\n                :alt-text=\"product.media?.alt\"\n                class=\"w-[65px] h-[65px] sm:h-[120px] sm:w-[120px] object-scale-down mr-auto\"\n              />\n            </div>\n          </div>\n          <div class=\"product-grid__productInfo\">\n            <div class=\"font-bold text-md md:text-lg font-deco-alt\">\n              {{ product.name }}\n            </div>\n            <div class=\"text-sm md:text-md\">\n              <span v-if=\"product.variantName\">\n                {{ product.variantName }}\n                <span v-if=\"product.manufacturer\"> | </span>\n              </span>\n              <span v-if=\"product.manufacturer\">\n                {{ product.manufacturer.name }}\n              </span>\n            </div>\n            <div class=\"text-sm md:text-md\">\n              <span\n                >{{ t('shop.cart.productFinder.itemNumber') }}\n                {{ product.productNumber }}</span\n              >\n            </div>\n          </div>\n          <div class=\"text-sm product-grid__price md:text-md\">\n            <SubscripitonPrice\n              :product=\"product\"\n              :dialog=\"true\"\n              :quantity=\"quantity\"\n            />\n          </div>\n        </div>\n        <ContentSeparator class=\"relative mt-md\" />\n        <div class=\"productEdit-grid\">\n          <div class=\"productEdit-grid__quantity\">\n            <div class=\"flex flex-col w-full flex-nowrap\">\n              <span class=\"font-bold\">{{ t('shop.cart.general.amount') }}</span>\n              <QuantityPicker\n                :key=\"quantity\"\n                v-model=\"quantity\"\n                class=\"max-w-[167px] w-full\"\n                :lower-limit=\"product.minPurchase\"\n                :upper-limit=\"product.maxPurchase\"\n                :step-size=\"product.purchaseSteps\"\n                :debounce-emit=\"500\"\n                @update:model-value=\"(nv) => (quantity = nv)\"\n                @click.prevent\n              />\n            </div>\n          </div>\n          <div class=\"productEdit-grid__interval\">\n            <Dropdown\n              id=\"aboInterval\"\n              v-model=\"interval\"\n              :options=\"deliveryIntervals\"\n              name=\"aboInterval\"\n              :label=\"t('shop.pdp.productSubscription.aboInterval')\"\n            ></Dropdown>\n          </div>\n          <div class=\"productEdit-grid__delivery\">\n            <Dropdown\n              id=\"aboDeliveryDay\"\n              v-model=\"selectedDeliveryDay\"\n              :options=\"deliveryDays\"\n              name=\"aboDeliveryDay\"\n              :label=\"t('shop.pdp.productSubscription.deliveryDay')\"\n            >\n              <template #info>\n                {{ t('shop.pdp.productSubscription.edit.info') }}\n              </template>\n            </Dropdown>\n          </div>\n          <div class=\"productEdit-grid__infoBanner\">\n            <div\n              class=\"flex h-full text-sm px-sm md:text-md bg-background-base rounded-alt-md\"\n            >\n              <div class=\"flex items-center icon-box bg-grey-light\">\n                <FaIcon\n                  icon-class=\"fal fa-truck-fast\"\n                  classes=\"text-black mx-xs w-sm h-sm md:h-[20px] md:w-[20px]\"\n                />\n              </div>\n              <div class=\"my-xs mx-sm\">\n                <div>\n                  {{ t('shop.productSubscription.reactivate.firstOrder') }}\n                  <span class=\"font-bold text-status-success-dark\">{{\n                    t('shop.productSubscription.reactivate.hint')\n                  }}</span>\n                </div>\n                <div>\n                  {{ t('shop.productSubscription.reactivate.secondOrder') }}\n                  <span class=\"font-bold text-status-success-dark\">{{\n                    nextOrderDate\n                  }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <AddToCart\n          label=\"shop.productList.addToCart\"\n          class=\"!w-full !h-fit mt-sm\"\n          @click=\"onSubmit(product.id, quantity, interval, selectedDeliveryDay)\"\n        />\n        <div\n          class=\"flex items-center justify-center w-full gap-2 cursor-pointer text-primary-base mt-md\"\n          @click=\"dialogStore.closeDialog()\"\n        >\n          <span class=\"anim__underline-link anim-link\">\n            {{ t('formFields.form.cancel') }}\n          </span>\n        </div>\n      </div>\n    </template>\n  </Dialog>\n</template>\n<script setup lang=\"ts\">\nimport Dialog from '@/components/dialog/components/dialogFrame/local/dialogFrame.vue';\nimport { useDialogStore } from '@/stores/useDialogStore';\nimport { Dropdown, QuantityPicker, ProductImage } from '@/complib';\nimport FaIcon from '@/components/fa-icon.vue';\nimport { useSubscriptionBox } from '@/components/page/product/components/buyBox/components/options/subscription/useSubscriptionBox';\nimport ContentSeparator from '@/components/block/seperator/contentSeparator.vue';\nimport AddToCart from '@/components/components/shop/inputs/add-to-cart.vue';\nimport { useProductSubscriptionActivate } from '@/components/dialog/productSubscriptionActivate/useProductSubscriptionActivate';\nimport type { OrderAlarm } from '@/server/transformers/shop/orderAlarmTransformer';\nimport BulletList from '@/components/components/core/bullet-list/bullet-list.vue';\nimport { EListType } from '@/@types/bullet-list';\nimport { useUserContext } from '@/stores/useUserContext';\nimport { useSessionStore } from '~/stores/useSessionStore';\nimport { EDeliveryDaysValues } from '@/@types/product-subscription';\nimport SubscripitonDiscountBadge from '@/components/page/product/components/buyBox/components/options/subscription/components/subscriptionDiscountBadge.vue';\nimport SubscripitonPrice from '@/components/page/product/components/buyBox/components/options/subscription/components/subscription-price.vue';\n\nconst { t, tList } = useTrans();\nconst userContext = useUserContext();\nconst session = useSessionStore();\nconst dialogStore = useDialogStore();\ndialogStore.setHeadline(t('shop.productSubscription.activate.title'));\nconst data = dialogStore.getDialogData<{\n  orderAlarm: OrderAlarm;\n}>();\n\nconst {\n  product,\n  quantity,\n  interval,\n  productSubscriptionCounter,\n  getNewDeliveryDate,\n  onSubmit,\n} = await useProductSubscriptionActivate(data.orderAlarm);\n\nconst { deliveryIntervals, deliveryDays } = useSubscriptionBox({\n  product: product.value,\n});\n\nconst selectedDeliveryDay =\n  session.isLoggedIn && userContext.initialized && userContext.accountData\n    ? ref(userContext.accountData.desiredDeliveryDay.toString())\n    : ref(EDeliveryDaysValues.WEDNESDAY);\n\nconst nextOrderDate = ref(\n  await getNewDeliveryDate(interval.value, selectedDeliveryDay.value),\n);\n\nwatch(\n  () => [interval.value, selectedDeliveryDay.value],\n  async () => {\n    const newDate = await getNewDeliveryDate(\n      interval.value,\n      selectedDeliveryDay.value,\n    );\n    nextOrderDate.value = newDate;\n  },\n);\n</script>\n<style scoped lang=\"postcss\">\n.product-grid {\n  width: 100%;\n  display: grid;\n  grid-template-areas:\n    'image productInfo'\n    'image price';\n\n  grid-template-columns: 70px 1fr;\n  @apply overflow-visible;\n  & > div {\n    @apply flex flex-col;\n  }\n}\n\n.productEdit-grid {\n  width: 100%;\n  display: grid;\n  grid-template-areas:\n    'quantity quantity'\n    'interval interval'\n    'delivery delivery'\n    'infoBanner infoBanner';\n  grid-template-columns: 70px 1fr;\n  @apply overflow-visible;\n  & > div {\n    @apply flex flex-col;\n  }\n}\n.product-grid__image {\n  grid-area: image;\n  @apply mr-sm mt-2xs;\n}\n.product-grid__productInfo {\n  grid-area: productInfo;\n  @apply pl-sm;\n}\n.productEdit-grid__interval {\n  grid-area: interval;\n  @apply my-sm;\n}\n.productEdit-grid__quantity {\n  grid-area: quantity;\n  @apply my-sm;\n}\n.productEdit-grid__delivery {\n  grid-area: delivery;\n}\n\n.productEdit-grid__infoBanner {\n  grid-area: infoBanner;\n  @apply my-sm;\n}\n\n.product-grid__price {\n  grid-area: price;\n  @apply items-start my-sm pl-sm  justify-center;\n}\n\n@media (min-width: 960px) {\n  .product-grid {\n    width: 100%;\n    display: grid;\n    grid-template-areas:\n      'image productInfo'\n      'image price';\n\n    grid-template-columns: 150px;\n    @apply overflow-visible;\n    & > div {\n      @apply flex flex-col;\n    }\n  }\n\n  .productEdit-grid {\n    width: 100%;\n    display: grid;\n    grid-template-areas:\n      'quantity interval'\n      'delivery delivery'\n      'infoBanner infoBanner';\n    grid-template-columns: 200px;\n    @apply overflow-visible;\n    & > div {\n      @apply flex flex-col;\n    }\n  }\n\n  .product-grid__image {\n    grid-area: image;\n    @apply mr-sm mt-2xs;\n  }\n  .product-grid__productInfo {\n    grid-area: productInfo;\n  }\n  .productEdit-grid__quantity {\n    grid-area: quantity;\n    @apply mb-sm mt-0;\n  }\n\n  .productEdit-grid__interval {\n    grid-area: interval;\n    @apply mb-sm mt-0 pl-sm;\n  }\n  .product-gridEdit__delivery {\n    grid-area: delivery;\n  }\n\n  .product-gridEdit__infoBanner {\n    grid-area: infoBanner;\n    @apply rounded-alt-md my-sm;\n  }\n  .product-grid__price {\n    grid-area: price;\n    @apply items-start my-sm  justify-center;\n  }\n}\n</style>\n"],"names":["useProductSubscriptionActivate","orderAlarm","intervalMap","EDeliveryIntervalValues","site","useSiteIdent","product","ref","quantity","interval","productSubscriptionCounter","result","useSecureSessionPost","handleLoadingError","getNewDeliveryDate","desiredDeliveryDay","deliveryDay","response","e","onSubmit","productId","addProductSubscription","useCartStore","dialogStore","useDialogStore","DialogResponses","t","tList","useTrans","userContext","useUserContext","session","useSessionStore","data","__temp","__restore","_withAsyncContext","deliveryIntervals","deliveryDays","useSubscriptionBox","selectedDeliveryDay","EDeliveryDaysValues","nextOrderDate","watch","newDate"],"mappings":"0gCASA,eAAsBA,GAA+BC,EAAwB,CACrE,MAAAC,MAAkB,IAAoB,CAC1C,CAAC,EAAGC,EAAwB,SAAS,EACrC,CAAC,EAAGA,EAAwB,WAAW,EACvC,CAAC,EAAGA,EAAwB,OAAO,EACnC,CAAC,EAAGA,EAAwB,UAAU,EACtC,CAAC,EAAGA,EAAwB,SAAS,EACrC,CAAC,EAAGA,EAAwB,UAAU,EACtC,CAAC,GAAIA,EAAwB,SAAS,EACtC,CAAC,GAAIA,EAAwB,UAAU,EACvC,CAAC,GAAIA,EAAwB,WAAW,CAAA,CACzC,EACKC,EAAOC,IACPC,EAAUC,EAAIN,EAAW,OAAO,EAChCO,EAAWD,EAAIN,EAAW,YAAY,EACtCQ,EAAWF,EACfL,EAAY,IACVD,EAAW,uBAAyBA,EAAW,wBACjD,CAAA,EAGIS,EAA6B,MAAO,SAAY,CAChD,GAAA,CACF,MAAMC,EAAS,MAAMC,EACnB,QAAQR,CAAI,2CAAA,EAEV,OAACO,GAAA,MAAAA,EAAQ,QAKNA,EAJE,CACL,QAAS,CAAA,QAIN,EAAQ,CACf,OAAAE,EAAmB,CAAC,EACb,CACL,QAAS,CAAA,CAEb,CAAA,KAGa,eAAAC,EACbL,EACAM,EACA,CACI,GAAA,CACF,MAAMC,EAAsB,CAACD,EACvBE,EAAW,MAAML,EACrB,QAAQR,CAAI,sDACZ,CACE,SAAUK,EACV,mBAAoBO,CACtB,CAAA,EAEF,OAAOC,GAAA,YAAAA,EAAU,WACVC,EAAQ,CACf,OAAAL,EAAmBK,CAAC,EACb,IACT,CACF,CAEA,eAAeC,EACbC,EACAZ,EACAC,EACAM,EACA,CACM,KAAA,CAAE,uBAAAM,GAA2BC,IAC7BC,EAAcC,IACdR,EAAsB,CAACD,EACNM,EAAAD,EAAWZ,EAAUQ,EAAaP,CAAQ,EACrDc,EAAA,YAAYE,EAAgB,OAAO,CACjD,CAEO,MAAA,CACL,QAAAnB,EACA,SAAAE,EACA,SAAAC,EACA,2BAAAC,EACA,mBAAAI,EACA,SAAAK,CAAA,CAEJ,olCC8EA,KAAM,CAAE,EAAAO,EAAG,MAAAC,CAAM,EAAIC,EAAS,EACxBC,EAAcC,IACdC,EAAUC,IACVT,EAAcC,IACRD,EAAA,YAAYG,EAAE,yCAAyC,CAAC,EAC9D,MAAAO,EAAOV,EAAY,gBAInB,CACJ,QAAAjB,EACA,SAAAE,EACA,SAAAC,EACA,2BAAAC,EACA,mBAAAI,EACA,SAAAK,CAAA,GACQ,CAAAe,EAAAC,CAAA,EAAAC,EAAA,IAAApC,GAA+BiC,EAAK,UAAU,CAAA,mBAElD,CAAE,kBAAAI,EAAmB,aAAAC,CAAa,EAAIC,GAAmB,CAC7D,QAASjC,EAAQ,KAAA,CAClB,EAEKkC,EACJT,EAAQ,YAAcF,EAAY,aAAeA,EAAY,YACzDtB,EAAIsB,EAAY,YAAY,mBAAmB,SAAS,CAAC,EACzDtB,EAAIkC,GAAoB,SAAS,EAEjCC,EAAgBnC,GACd,CAAA2B,EAAAC,CAAA,EAAAC,EAAA,IAAAtB,EAAmBL,EAAS,MAAO+B,EAAoB,KAAK,CAAA,oBAGpE,OAAAG,EACE,IAAM,CAAClC,EAAS,MAAO+B,EAAoB,KAAK,EAChD,SAAY,CACV,MAAMI,EAAU,MAAM9B,EACpBL,EAAS,MACT+B,EAAoB,KAAA,EAEtBE,EAAc,MAAQE,CACxB,CAAA"}