{"version":3,"file":"BOoOvQ_z.js","sources":["../../../../src/components/dialog/productSubscriptionEdit/productSubscriptionEdit.vue"],"sourcesContent":["<template>\n  <Dialog>\n    <Form\n      id=\"product-subscription-edit-form\"\n      submit-label=\"formFields.form.confirm\"\n      cancel-label=\"formFields.form.cancel\"\n      @submit=\"\n        onSubmit(data.subscription.id, quantity, interval, desiredDeliveryDay)\n      \"\n      @cancel=\"dialogStore.closeDialog(DialogResponses.CANCEL)\"\n    >\n      <template #default>\n        <div class=\"product-grid\">\n          <div\n            v-if=\"data.product?.productSubscription?.discount\"\n            class=\"flex product-grid__discount\"\n          >\n            <SubscriptionDiscountInfoBox\n              class=\"w-full mb-md\"\n              text=\"shop.subscription.discount.edit.label\"\n              :discount=\"data.product.productSubscription.discount\"\n            />\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=\"font-bold text-md md:text-lg font-deco-alt\">\n              {{ data.product.name }}\n            </div>\n            <div class=\"text-sm md:text-md\">\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 class=\"text-sm md:text-md\">\n              <span\n                >{{ t('shop.cart.productFinder.itemNumber') }}\n                {{ data.product?.productNumber }}</span\n              >\n            </div>\n          </div>\n          <div class=\"text-sm product-grid__price md:text-md\">\n            <SubscripitonPrice\n              :product=\"data.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 gap-2xs\">\n              <span class=\"font-bold\">{{ t('shop.cart.general.amount') }}</span>\n              <QuantityPicker\n                :key=\"quantity\"\n                v-model=\"quantity\"\n                :teleport-to=\"'#dialogBody'\"\n                class=\"max-w-[167px] w-full\"\n                :lower-limit=\"data.product?.productSubscription?.lowerLimit\"\n                :step-size=\"data.product?.productSubscription?.increaseQuantity\"\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              :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=\"!productIsAvailable\"\n              class=\"flex h-full text-sm px-sm md:text-md bg-status-danger-lighter rounded-alt-md\"\n            >\n              <div\n                class=\"flex items-center icon-box bg- bg-status-danger-light\"\n              >\n                <FaIcon\n                  icon-class=\"fal fa-truck-fast\"\n                  classes=\"text-white mx-xs !w-sm !h-sm md:!h-[20px] md:!w-[20px]\"\n                />\n              </div>\n              <div class=\"my-xs mx-sm\">\n                {{ t('shop.productSubscription.edit.notAvailableText') }}\n              </div>\n            </div>\n            <div\n              v-else-if=\"!disabled\"\n              class=\"flex h-full text-sm px-sm md:text-md bg-[var(--thm-bg-base)] rounded-alt-md\"\n            >\n              <div\n                class=\"flex items-center icon-box bg-[var(--thm-grey-light)]\"\n              >\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                {{ t('shop.productSubscription.nextDelivery.long') }}\n                <span class=\"font-bold text-status-success-dark\">{{\n                  nextOrderDate\n                }}</span>\n                <SubscriptionBookedPrice\n                  v-if=\"data.subscription.bookedOrderPrice\"\n                  :booked-order-price=\"data.subscription.bookedOrderPrice\"\n                  :quantity=\"data.subscription.quantity\"\n                />\n              </div>\n            </div>\n            <div\n              v-else\n              class=\"flex h-full rounded-alt-md px-sm bg-status-warn-lighter my-sm\"\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.edit.infoText\"\n                  tag=\"span\"\n                >\n                  <span class=\"font-bold\">{{ notedDeliveryDate }}</span>\n                </Trans>\n              </div>\n            </div>\n          </div>\n        </div>\n      </template>\n      <template #buttons>\n        <BasicButton\n          class=\"mb-xs md:mb-0 mt-md px-sm md:px-0\"\n          :label=\"t('shop.productSubscription.cancel.title')\"\n          :type=\"EButtonType.BUTTON\"\n          :btn-style=\"EButtonStyle.LIGHT\"\n          full-width\n          @click=\"openCancelDialog(data.subscription, data.product)\"\n        ></BasicButton>\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 { BasicButton, Dropdown, QuantityPicker, ProductImage } from '@/complib';\nimport ContentSeparator from '@/components/block/seperator/contentSeparator.vue';\nimport FaIcon from '@/components/fa-icon.vue';\nimport type { ProductSubscriptionItem } from '~/server/transformers/shop/productSubscriptionListTransformer';\nimport { useProductSubscriptionEdit } from '@/components/dialog/productSubscriptionEdit/useProductSubscriptionEdit';\nimport { EButtonStyle, EButtonType } from '@/@types/basic-button';\nimport {\n  useSubscriptionBox,\n  useSubscriptionDeliveryNow,\n} from '@/components/page/product/components/buyBox/components/options/subscription/useSubscriptionBox';\nimport Trans from '~/components/Trans.vue';\nimport SubscriptionBookedPrice from '@/components/page/product/components/buyBox/components/options/subscription/components/subscriptionBookedPrice.vue';\nimport SubscripitonPrice from '@/components/page/product/components/buyBox/components/options/subscription/components/subscription-price.vue';\nimport SubscriptionDiscountInfoBox from '@/components/page/product/components/buyBox/components/options/subscription/components/subscriptionDiscountInfoBox.vue';\nconst { t } = useTrans();\nconst dialogStore = useDialogStore();\nconst data = dialogStore.getDialogData<{\n  subscription: ProductSubscriptionItem;\n  product: Product;\n  triggerReload: boolean;\n}>();\n\nconst { deliveryIntervals, deliveryDays } = useSubscriptionBox({\n  product: data.product,\n});\n\nconst productIsAvailable = !data.subscription?.tempNotAvailable;\n\nconst { nextOrderDate, disabled, openCancelDialog } =\n  useSubscriptionDeliveryNow(data.subscription);\n\nconst { quantity, interval, desiredDeliveryDay, onSubmit, getNewDeliveryDate } =\n  useProductSubscriptionEdit(data.subscription);\n\ndialogStore.setHeadline(t('shop.productSubscription.edit.title'));\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});\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</script>\n<style scoped lang=\"postcss\">\n.product-grid {\n  width: 100%;\n  display: grid;\n  grid-template-areas:\n    'discount discount'\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\n.product-grid__discount {\n  grid-area: discount;\n}\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      'discount discount'\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\n  .product-grid__discount {\n    grid-area: discount;\n  }\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":["t","useTrans","dialogStore","useDialogStore","data","deliveryIntervals","deliveryDays","useSubscriptionBox","productIsAvailable","_a","nextOrderDate","disabled","openCancelDialog","useSubscriptionDeliveryNow","quantity","interval","desiredDeliveryDay","onSubmit","getNewDeliveryDate","useProductSubscriptionEdit","notedDeliveryDate","watch","newDate"],"mappings":"49EAqMM,KAAA,CAAE,EAAAA,GAAMC,IACRC,EAAcC,IACdC,EAAOF,EAAY,gBAMnB,CAAE,kBAAAG,EAAmB,aAAAC,CAAa,EAAIC,GAAmB,CAC7D,QAASH,EAAK,OAAA,CACf,EAEKI,EAAqB,GAACC,EAAAL,EAAK,eAAL,MAAAK,EAAmB,kBAEzC,CAAE,cAAAC,EAAe,SAAAC,EAAU,iBAAAC,CAC/B,EAAAC,GAA2BT,EAAK,YAAY,EAExC,CAAE,SAAAU,EAAU,SAAAC,EAAU,mBAAAC,EAAoB,SAAAC,EAAU,mBAAAC,CAAmB,EAC3EC,GAA2Bf,EAAK,YAAY,EAElCF,EAAA,YAAYF,EAAE,qCAAqC,CAAC,EAEhE,MAAMoB,EAAoB,IAAI,KAC5BhB,EAAK,aAAa,iBAAA,EAClB,mBAAmB,QAAS,CAC5B,IAAK,UACL,MAAO,OACP,KAAM,UACN,QAAS,OAAA,CACV,EAED,OAAAiB,EACE,IAAM,CAACN,EAAS,MAAOC,EAAmB,KAAK,EAC/C,SAAY,CACV,MAAMM,EAAU,MAAMJ,EACpBd,EAAK,aAAa,GAClBW,EAAS,MACTC,EAAmB,KAAA,EAErBN,EAAc,MAAQY,CACxB,CAAA"}