{"version":3,"file":"RzQnuUCr.js","sources":["../../../../src/components/dialog/productSubscriptionPause/useProductSubscriptionPause.ts","../../../../src/components/dialog/productSubscriptionPause/productSubscriptionPause.vue"],"sourcesContent":["import { useSecureSessionPost } from '~/composables/dataFetching/genericFetchers';\nimport type { ProductSubscriptionItem } from '~/server/transformers/shop/productSubscriptionListTransformer';\nimport { DialogResponses, useDialogStore } from '@/stores/useDialogStore';\nimport { handleLoadingError } from '~/utils/handleLoadingError';\n\ninterface INextOrderDatesStatus {\n  nextOrderStatus: boolean;\n  secondOrderStatus: boolean;\n  thirdOrderStatus: boolean;\n}\n\nexport function useProductSubscriptionPause(\n  subscription: ProductSubscriptionItem,\n) {\n  const dialogStore = useDialogStore();\n  const status = subscription.orderDates;\n  const nextOrderStatus = ref(status.nextOrderDate.status);\n  const secondOrderStatus = ref(status.secondOrderDate.status);\n  const thirdOrderStatus = ref(status.thirdOrderDate.status);\n  const nextOrderDate = ref(\n    formateDateToLocaleString(status.nextOrderDate.date),\n  );\n  const secondOrderDate = ref(\n    formateDateToLocaleString(status.secondOrderDate.date),\n  );\n  const thirdOrderDate = ref(\n    formateDateToLocaleString(status.thirdOrderDate.date),\n  );\n\n  async function onSubmit(nextOrderDateStatus: INextOrderDatesStatus) {\n    try {\n      const site = useSiteIdent();\n      const response = await useSecureSessionPost<string>(\n        `/api/${site}/shop/product/productSubscription/update/${subscription.id}`,\n        {\n          interval: subscription.interval,\n          status: nextOrderDateStatus,\n        },\n      );\n      if (response) {\n        dialogStore.closeDialog(DialogResponses.SUCCESS);\n      } else {\n        dialogStore.closeDialog(DialogResponses.CANCEL);\n      }\n    } catch (e: any) {\n      dialogStore.closeDialog(DialogResponses.CANCEL);\n      handleLoadingError(e);\n    }\n  }\n\n  return {\n    nextOrderStatus,\n    nextOrderDate,\n    secondOrderStatus,\n    secondOrderDate,\n    thirdOrderStatus,\n    thirdOrderDate,\n    onSubmit,\n  };\n}\n\nfunction formateDateToLocaleString(date: string) {\n  const deliveryDate = new Date(date);\n  return {\n    weekDayShort: deliveryDate.toLocaleDateString('de-DE', {\n      weekday: 'short',\n    }),\n    weekDay: deliveryDate.toLocaleDateString('de-DE', {\n      weekday: 'long',\n    }),\n    date: deliveryDate.toLocaleDateString('de-DE', {\n      day: 'numeric',\n      month: 'short',\n      year: 'numeric',\n    }),\n  };\n}\n","<template>\n  <Dialog>\n    <Form\n      id=\"product-subscription-pause-form\"\n      submit-label=\"formFields.form.confirm\"\n      cancel-label=\"formFields.form.cancel\"\n      class=\"px-md\"\n      @submit=\"\n        onSubmit({\n          nextOrderStatus: nextOrderStatus,\n          secondOrderStatus: secondOrderStatus,\n          thirdOrderStatus: thirdOrderStatus,\n        })\n      \"\n      @cancel=\"dialogStore.closeDialog(DialogResponses.CANCEL)\"\n    >\n      <template #default>\n        <div class=\"text-sm product-grid md:text-md\">\n          <div class=\"product-grid__infoBanner\">\n            <div\n              v-if=\"data.disabled\"\n              class=\"flex h-full rounded-alt-md px-sm bg-status-warn-lighter\"\n            >\n              <div class=\"flex items-center icon-box bg-status-warn-light\">\n                <FaIcon\n                  icon-class=\"fal fa-circle-exclamation\"\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                <Trans\n                  keypath=\"shop.productSubscription.pause.infoText\"\n                  tag=\"span\"\n                >\n                  <span class=\"font-bold\">{{ notedDeliveryDate }}</span>\n                </Trans>\n              </div>\n            </div>\n            <div v-else>\n              <div class=\"font-bold text-md md:text-lg font-text mb-sm\">\n                {{ t('shop.productSubscription.pause.subHeadline') }}\n              </div>\n              <div class=\"mb-sm\">\n                {{ t('shop.productSubscription.pause.text') }}\n              </div>\n            </div>\n          </div>\n          <div class=\"product-grid__orderDates\">\n            <div class=\"grid grid-cols-1 md:grid-cols-3 gap-sm\">\n              <div\n                class=\"grid grid-cols-3 rounded-alt-md p-sm md:grid-cols-1\"\n                :class=\"\n                  disableFirst\n                    ? 'bg-[var(--thm-bg-base-opc50)]'\n                    : nextOrderStatus\n                      ? 'bg-[var(--thm-status-success-base-opc15)] text-status-success-dark'\n                      : 'bg-[var(--thm-status-danger-base-opc15)]'\n                \"\n              >\n                <div class=\"col-span-2 md:col-span-1\">\n                  <div class=\"float-left md:float-none mr-2xs\">\n                    {{ nextOrderDate.weekDay }}\n                  </div>\n                  <div class=\"float-left font-bold md:float-none\">\n                    {{ nextOrderDate.date }}\n                  </div>\n                </div>\n                <Toggle\n                  id=\"nextOrder\"\n                  v-model:model-value=\"nextOrderStatus\"\n                  name=\"nextOrder\"\n                  class=\"md:py-xs\"\n                  :disabled=\"disableFirst\"\n                />\n              </div>\n              <div\n                class=\"grid grid-cols-3 rounded-alt-md p-sm md:grid-cols-1\"\n                :class=\"\n                  secondOrderStatus\n                    ? 'bg-[var(--thm-status-success-base-opc15)] text-status-success-dark'\n                    : 'bg-[var(--thm-status-danger-base-opc15)]'\n                \"\n              >\n                <div class=\"col-span-2 md:col-span-1\">\n                  <div class=\"float-left md:float-none mr-2xs\">\n                    {{ secondOrderDate.weekDay }}\n                  </div>\n                  <div class=\"float-left font-bold md:float-none\">\n                    {{ secondOrderDate.date }}\n                  </div>\n                </div>\n                <div class=\"flex items-end\">\n                  <Toggle\n                    id=\"secondOrder\"\n                    v-model:model-value=\"secondOrderStatus\"\n                    name=\"secondOrder\"\n                    class=\"md:py-xs\"\n                  />\n                </div>\n              </div>\n              <div\n                class=\"grid grid-cols-3 rounded-alt-md p-sm md:grid-cols-1\"\n                :class=\"\n                  thirdOrderStatus\n                    ? 'bg-[var(--thm-status-success-base-opc15)] text-status-success-dark'\n                    : 'bg-[var(--thm-status-danger-base-opc15)]'\n                \"\n              >\n                <div class=\"col-span-2 md:col-span-1\">\n                  <div class=\"float-left md:float-none mr-2xs\">\n                    {{ thirdOrderDate.weekDay }}\n                  </div>\n                  <div class=\"float-left font-bold md:float-none\">\n                    {{ thirdOrderDate.date }}\n                  </div>\n                </div>\n                <Toggle\n                  id=\"thirdOrder\"\n                  v-model:model-value=\"thirdOrderStatus\"\n                  name=\"thirdOrder\"\n                  class=\"md:py-xs\"\n                />\n              </div>\n            </div>\n\n            <ContentSeparator class=\"relative separator-overwrite mt-lg\" />\n          </div>\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=\"data.product?.media?.cover\"\n                :alt-text=\"data.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=\"text-lg font-bold font-deco-alt\">\n              {{ data.product.name }}\n            </div>\n            <div>\n              <span v-if=\"data.product.variantName\">\n                {{ data.product.variantName }}\n                <span v-if=\"data.product.manufacturer\"> | </span>\n              </span>\n              <span v-if=\"data.product.manufacturer\">\n                {{ data.product.manufacturer.name }}\n              </span>\n            </div>\n            <div>\n              <span\n                >{{ t('shop.cart.productFinder.itemNumber') }}\n                {{ data.product.productNumber }}</span\n              >\n            </div>\n          </div>\n          <div class=\"product-grid__quantity\">\n            <div class=\"md:w-[200px] flex flex-col flex-nowrap\">\n              {{ t('checkoutSubView.cart.articleAmount') }}\n              {{ data.subscription.quantity }}\n            </div>\n          </div>\n        </div>\n      </template>\n    </Form>\n  </Dialog>\n</template>\n<script setup lang=\"ts\">\nimport Dialog from '@/components/dialog/components/dialogFrame/local/dialogFrame.vue';\nimport { DialogResponses, useDialogStore } from '@/stores/useDialogStore';\nimport Form from '@/components/formFields/localDialogForm/localDialogForm.vue';\nimport type { Product } from '~/server/transformers/shop/product/types';\nimport { Toggle, ProductImage } from '@/complib';\nimport ContentSeparator from '@/components/block/seperator/contentSeparator.vue';\nimport FaIcon from '@/components/fa-icon.vue';\nimport { useProductSubscriptionPause } from './useProductSubscriptionPause';\nimport { useSubscriptionDeliveryNow } from '@/components/page/product/components/buyBox/components/options/subscription/useSubscriptionBox';\nimport type { ProductSubscriptionItem } from '~/server/transformers/shop/productSubscriptionListTransformer';\nimport Trans from '~/components/Trans.vue';\n\nconst { t } = useTrans();\nconst dialogStore = useDialogStore();\ndialogStore.setHeadline(t('shop.productSubscription.pause.title'));\nconst data = dialogStore.getDialogData<{\n  subscription: ProductSubscriptionItem;\n  product: Product;\n  disabled: boolean;\n}>();\nconst {\n  nextOrderStatus,\n  nextOrderDate,\n  secondOrderStatus,\n  secondOrderDate,\n  thirdOrderStatus,\n  thirdOrderDate,\n  onSubmit,\n} = useProductSubscriptionPause(data.subscription);\n\nconst notedDeliveryDate = new Date(\n  data.subscription.notedDeliveryDate,\n).toLocaleDateString('de-DE', {\n  day: 'numeric',\n  month: 'long',\n  year: 'numeric',\n  weekday: 'short',\n});\nconst { checkDateDiff } = useSubscriptionDeliveryNow(data.subscription);\n\nconst disableFirst = checkDateDiff(data.subscription.nextOrderDate);\n</script>\n<style scoped lang=\"postcss\">\n.product-grid {\n  width: 100%;\n  display: grid;\n  grid-template-areas:\n    'infoBanner infoBanner'\n    'orderDates orderDates'\n    'separator separator'\n    'image productInfo'\n    'image quantity';\n\n  grid-template-columns: 70px 1fr;\n  @apply overflow-visible;\n  & > div {\n    @apply flex flex-col;\n  }\n}\n\n.product-grid__infoBanner {\n  grid-area: infoBanner;\n}\n.product-grid__orderDates {\n  grid-area: orderDates;\n  @apply mt-sm mb-md;\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.product-grid__quantity {\n  grid-area: quantity;\n  @apply my-sm pl-sm;\n}\n\n.separator-overwrite :deep(.separator) {\n  @apply !pb-md !px-0;\n}\n\n@media (min-width: 960px) {\n  .product-grid {\n    width: 100%;\n    display: grid;\n    grid-template-areas:\n      'infoBanner infoBanner'\n      'orderDates orderDates'\n      'separator separator'\n      'image productInfo'\n      'image quantity';\n\n    grid-template-columns: 150px;\n    @apply overflow-visible;\n    & > div {\n      @apply flex flex-col;\n    }\n  }\n\n  .product-grid__infoBanner {\n    grid-area: infoBanner;\n  }\n  .product-grid__orderDates {\n    grid-area: orderDates;\n    @apply mt-sm mb-0;\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  .product-grid__quantity {\n    grid-area: quantity;\n    @apply my-sm;\n  }\n}\n</style>\n"],"names":["useProductSubscriptionPause","subscription","dialogStore","useDialogStore","status","nextOrderStatus","ref","secondOrderStatus","thirdOrderStatus","nextOrderDate","formateDateToLocaleString","secondOrderDate","thirdOrderDate","onSubmit","nextOrderDateStatus","site","useSiteIdent","useSecureSessionPost","DialogResponses","e","handleLoadingError","date","deliveryDate","t","useTrans","data","notedDeliveryDate","checkDateDiff","useSubscriptionDeliveryNow","disableFirst"],"mappings":"2yBAWO,SAASA,EACdC,EACA,CACA,MAAMC,EAAcC,IACdC,EAASH,EAAa,WACtBI,EAAkBC,EAAIF,EAAO,cAAc,MAAM,EACjDG,EAAoBD,EAAIF,EAAO,gBAAgB,MAAM,EACrDI,EAAmBF,EAAIF,EAAO,eAAe,MAAM,EACnDK,EAAgBH,EACpBI,EAA0BN,EAAO,cAAc,IAAI,CAAA,EAE/CO,EAAkBL,EACtBI,EAA0BN,EAAO,gBAAgB,IAAI,CAAA,EAEjDQ,EAAiBN,EACrBI,EAA0BN,EAAO,eAAe,IAAI,CAAA,EAGtD,eAAeS,EAASC,EAA4C,CAC9D,GAAA,CACF,MAAMC,EAAOC,IACI,MAAMC,EACrB,QAAQF,CAAI,4CAA4Cd,EAAa,EAAE,GACvE,CACE,SAAUA,EAAa,SACvB,OAAQa,CACV,CAAA,EAGYZ,EAAA,YAAYgB,EAAgB,OAAO,EAEnChB,EAAA,YAAYgB,EAAgB,MAAM,QAEzCC,EAAQ,CACHjB,EAAA,YAAYgB,EAAgB,MAAM,EAC9CE,EAAmBD,CAAC,CACtB,CACF,CAEO,MAAA,CACL,gBAAAd,EACA,cAAAI,EACA,kBAAAF,EACA,gBAAAI,EACA,iBAAAH,EACA,eAAAI,EACA,SAAAC,CAAA,CAEJ,CAEA,SAASH,EAA0BW,EAAc,CACzC,MAAAC,EAAe,IAAI,KAAKD,CAAI,EAC3B,MAAA,CACL,aAAcC,EAAa,mBAAmB,QAAS,CACrD,QAAS,OAAA,CACV,EACD,QAASA,EAAa,mBAAmB,QAAS,CAChD,QAAS,MAAA,CACV,EACD,KAAMA,EAAa,mBAAmB,QAAS,CAC7C,IAAK,UACL,MAAO,QACP,KAAM,SAAA,CACP,CAAA,CAEL,ssCCwGM,KAAA,CAAE,EAAAC,GAAMC,IACRtB,EAAcC,IACRD,EAAA,YAAYqB,EAAE,sCAAsC,CAAC,EAC3D,MAAAE,EAAOvB,EAAY,gBAKnB,CACJ,gBAAAG,EACA,cAAAI,EACA,kBAAAF,EACA,gBAAAI,EACA,iBAAAH,EACA,eAAAI,EACA,SAAAC,CAAA,EACEb,EAA4ByB,EAAK,YAAY,EAE3CC,EAAoB,IAAI,KAC5BD,EAAK,aAAa,iBAAA,EAClB,mBAAmB,QAAS,CAC5B,IAAK,UACL,MAAO,OACP,KAAM,UACN,QAAS,OAAA,CACV,EACK,CAAE,cAAAE,CAAkB,EAAAC,EAA2BH,EAAK,YAAY,EAEhEI,EAAeF,EAAcF,EAAK,aAAa,aAAa"}