{"version":3,"file":"2YyAb8Zr.js","sources":["../../../../src/components/dialog/productSubscriptionReactivate/productSubscriptionReactivate.vue"],"sourcesContent":["<template>\n  <Dialog>\n    <template v-if=\"product.productSubscription.discount\" #headline-suffix\n      ><SubscripitonDiscountBadge\n        :discount=\"product.productSubscription.discount\"\n    /></template>\n    <Form\n      id=\"product-subscription-reactivate-form\"\n      submit-label=\"shop.productSubscription.reactive.title\"\n      :btn-style=\"EButtonStyle.CTA\"\n      cancel-label=\"formFields.form.cancel\"\n      @submit=\"\n        onSubmit(data.subscription, interval, quantity, desiredDeliveryDay)\n      \"\n      @cancel=\"dialogStore.closeDialog(DialogResponses.CANCEL)\"\n    >\n      <template #default>\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 separator-overwrite\" />\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-[100px] sm:max-w-[150px] w-full\"\n                :lower-limit=\"product.productSubscription.lowerLimit\"\n                :step-size=\"product.productSubscription.increaseQuantity\"\n                :debounce-emit=\"500\"\n                @click.prevent\n                @update:model-value=\"(nv) => (quantity = nv)\"\n              />\n            </div>\n          </div>\n          <div class=\"productEdit-grid__interval\">\n            <Dropdown\n              id=\"aboInterval\"\n              v-model=\"interval\"\n              :value=\"deliveryIntervals[2]\"\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=\"desiredDeliveryDay\"\n              :value=\"deliveryDays[3]\"\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              v-if=\"!disabled\"\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      </template>\n    </Form>\n    <div class=\"px-md leading-2xs md:leading-sm\">\n      <Trans\n        keypath=\"shop.productSubscription.agb\"\n        tag=\"span\"\n        class=\"text-xs md:text-sm pb-sm\"\n      >\n        <NuxtLink\n          :to=\"t('forms.agb.slug')\"\n          class=\"font-bold text-primary-base\"\n          target=\"_blank\"\n          >{{ t('forms.agb') }}</NuxtLink\n        >\n        <NuxtLink\n          :to=\"t('shop.productSubscription.conditions.slug')\"\n          class=\"font-bold text-primary-base\"\n          target=\"_blank\"\n          >{{ t('shop.productSubscription.conditions') }}</NuxtLink\n        >\n        <NuxtLink\n          :to=\"t('forms.privacy.slug')\"\n          class=\"font-bold text-primary-base\"\n          target=\"_blank\"\n          >{{ t('shop.productSubscription.privacy') }}</NuxtLink\n        >\n        <a\n          :href=\"\n            'javascript:' + linkTo_UnCryptMailto(`mailto:${mailAddress}`, -13)\n          \"\n          class=\"font-bold text-primary-base\"\n          @click=\"openMailer(mailAddress)\"\n        >\n          {{ t('shop.productSubscription.contradict') }}\n        </a>\n      </Trans>\n    </div>\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 { useToastStore } from '@/stores/useToastStore';\nimport { Dropdown, QuantityPicker, ProductImage } from '@/complib';\nimport FaIcon from '@/components/fa-icon.vue';\nimport { EButtonStyle } from '~~/src/@types/basic-button';\nimport type { ProductSubscriptionItem } from '~/server/transformers/shop/productSubscriptionListTransformer';\nimport {\n  useSubscriptionBox,\n  useSubscriptionDeliveryNow,\n} from '@/components/page/product/components/buyBox/components/options/subscription/useSubscriptionBox';\nimport Form from '@/components/formFields/localDialogForm/localDialogForm.vue';\nimport { useProductSubscriptionEdit } from '@/components/dialog/productSubscriptionEdit/useProductSubscriptionEdit';\nimport { useSecureSessionPost } from '~/composables/dataFetching/genericFetchers';\nimport Trans from '~/components/Trans.vue';\nimport { linkTo_UnCryptMailto } from '@/helpers/encryptMail';\nimport ContentSeparator from '@/components/block/seperator/contentSeparator.vue';\nimport type { Product } from '~/server/transformers/shop/product/types';\nimport { handleLoadingError } from '~/utils/handleLoadingError';\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 } = useTrans();\nconst dialogStore = useDialogStore();\nconst toastStore = useToastStore();\ndialogStore.setHeadline(t('shop.productSubscription.reactivate.title'));\nconst data = dialogStore.getDialogData<{\n  subscription: ProductSubscriptionItem;\n}>();\n\nconst { nextOrderDate, disabled } = useSubscriptionDeliveryNow(\n  data.subscription,\n);\nconst { quantity, interval, desiredDeliveryDay, getNewDeliveryDate } =\n  useProductSubscriptionEdit(data.subscription);\nconst product = ref<Product>(data.subscription.product);\nconst { deliveryIntervals, deliveryDays } = useSubscriptionBox({\n  product: product.value as Product,\n});\n\nfunction openMailer(mail: string) {\n  window.location.href = 'mailto:' + mail;\n}\n\nconst mailAddress =\n  useSiteIdent() === SiteIdent.default\n    ? 'datenschutz@vanderven.de'\n    : 'datenschutz@minilu.de';\n\nwatch(\n  () => [interval.value, desiredDeliveryDay.value],\n  async () => {\n    const newDate = await getNewDeliveryDate(\n      data.subscription.id,\n      interval.value,\n      desiredDeliveryDay.value,\n    );\n    nextOrderDate.value = newDate;\n  },\n);\n\nasync function onSubmit(\n  subscription: ProductSubscriptionItem,\n  interval: string,\n  quantity: number,\n  desiredDeliveryDay: string,\n) {\n  try {\n    const site = useSiteIdent();\n    const deliveryDay: number = +desiredDeliveryDay;\n    const response = await useSecureSessionPost<string>(\n      `/api/${site}/shop/product/productSubscription/updateCanceled/${subscription.id}`,\n      {\n        interval: interval,\n        quantity: quantity,\n        desiredDeliveryDay: deliveryDay,\n        canceled: false,\n      },\n    );\n    if (response) {\n      toastStore.success({\n        text: t('shop.productSubscription.reactivate.notification', {\n          name: subscription.product.name,\n        }),\n      });\n      dialogStore.closeDialog(DialogResponses.SUCCESS);\n    } else {\n      dialogStore.closeDialog(DialogResponses.CANCEL);\n    }\n  } catch (e) {\n    dialogStore.closeDialog(DialogResponses.CANCEL);\n    handleLoadingError(e);\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.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      '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 my-sm;\n  }\n\n  .productEdit-grid__interval {\n    grid-area: interval;\n    @apply my-sm 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":["t","useTrans","dialogStore","useDialogStore","toastStore","useToastStore","data","nextOrderDate","disabled","useSubscriptionDeliveryNow","quantity","interval","desiredDeliveryDay","getNewDeliveryDate","useProductSubscriptionEdit","product","ref","deliveryIntervals","deliveryDays","useSubscriptionBox","openMailer","mail","mailAddress","useSiteIdent","SiteIdent","watch","newDate","onSubmit","subscription","site","deliveryDay","useSecureSessionPost","DialogResponses","e","handleLoadingError"],"mappings":"spEA0LM,KAAA,CAAE,EAAAA,GAAMC,IACRC,EAAcC,IACdC,EAAaC,IACPH,EAAA,YAAYF,EAAE,2CAA2C,CAAC,EAChE,MAAAM,EAAOJ,EAAY,gBAInB,CAAE,cAAAK,EAAe,SAAAC,CAAA,EAAaC,GAClCH,EAAK,YAAA,EAED,CAAE,SAAAI,EAAU,SAAAC,EAAU,mBAAAC,EAAoB,mBAAAC,GAC9CC,GAA2BR,EAAK,YAAY,EACxCS,EAAUC,EAAaV,EAAK,aAAa,OAAO,EAChD,CAAE,kBAAAW,EAAmB,aAAAC,CAAa,EAAIC,GAAmB,CAC7D,QAASJ,EAAQ,KAAA,CAClB,EAED,SAASK,EAAWC,EAAc,CACzB,OAAA,SAAS,KAAO,UAAYA,CACrC,CAEA,MAAMC,EACJC,EAAmB,IAAAC,EAAU,QACzB,2BACA,wBAENC,EACE,IAAM,CAACd,EAAS,MAAOC,EAAmB,KAAK,EAC/C,SAAY,CACV,MAAMc,EAAU,MAAMb,EACpBP,EAAK,aAAa,GAClBK,EAAS,MACTC,EAAmB,KAAA,EAErBL,EAAc,MAAQmB,CACxB,CAAA,EAGF,eAAeC,EACbC,EACAjB,EACAD,EACAE,EACA,CACI,GAAA,CACF,MAAMiB,EAAON,IACPO,EAAsB,CAAClB,EACZ,MAAMmB,EACrB,QAAQF,CAAI,oDAAoDD,EAAa,EAAE,GAC/E,CACE,SAAUjB,EACV,SAAUD,EACV,mBAAoBoB,EACpB,SAAU,EACZ,CAAA,GAGA1B,EAAW,QAAQ,CACjB,KAAMJ,EAAE,mDAAoD,CAC1D,KAAM4B,EAAa,QAAQ,IAAA,CAC5B,CAAA,CACF,EACW1B,EAAA,YAAY8B,EAAgB,OAAO,GAEnC9B,EAAA,YAAY8B,EAAgB,MAAM,QAEzCC,EAAG,CACE/B,EAAA,YAAY8B,EAAgB,MAAM,EAC9CE,EAAmBD,CAAC,CACtB,CACF"}