{"version":3,"file":"DPAOk6Y8.js","sources":["../../../../src/components/dialog/productSubscriptionDeliveryNow/productSubscriptionDeliveryNow.vue"],"sourcesContent":["<template>\n  <Dialog>\n    <Form\n      id=\"product-subscription-delivery-now-form\"\n      submit-label=\"formFields.form.confirm\"\n      cancel-label=\"formFields.form.cancel\"\n      @submit=\"onSubmit(data.subscription.id, quantity)\"\n      @cancel=\"dialogStore.closeDialog(DialogResponses.CANCEL)\"\n    >\n      <template #default>\n        <div class=\"font-bold md:text-lg text-md font-text mb-sm\">\n          {{ t('shop.productSubscription.deliveryNow.subHeadline') }}\n        </div>\n        <div class=\"text-sm mb-sm md:text-md\">\n          {{ t('shop.productSubscription.deliveryNow.text') }}\n        </div>\n        <ContentSeparator class=\"relative mt-lg separator-overwrite\" />\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=\"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            <div class=\"font-deco-alt\">\n              <div\n                class=\"text-lg font-bold leading-none md:text-2xl sm:leading-sm\"\n              >\n                {{\n                  n(\n                    data.subscription.unitPrice * data.subscription.quantity,\n                    'currency',\n                  )\n                }}\n              </div>\n              <div class=\"flex flex-row text-sm md:text-md\">\n                <VatShippingHint\n                  keypath=\"shop.productList.excludingVAT\"\n                  tag=\"p\"\n                  classes=\"w-full text-right font-roboto md:w-auto md:hidden md:mb-md\"\n                />\n                <VatShippingHint\n                  keypath=\"shop.productList.excludingVAT\"\n                  tag=\"p\"\n                  classes=\"hidden w-full ml-auto text-right font-roboto md:w-auto md:block\"\n                />\n              </div>\n            </div>\n          </div>\n          <div class=\"product-grid__deliveryTime\">\n            <DeliveryTime\n              class=\"!py-0 !my-0 text-sm md:text-md\"\n              :delivery-time=\"data.product.deliveryTime\"\n              :availability-state=\"data.product.availabilityState\"\n            />\n          </div>\n          <div class=\"product-grid__quantity\">\n            <div class=\"md:w-[200px] flex flex-col flex-nowrap\">\n              <QuantityPicker\n                :key=\"quantity\"\n                v-model=\"quantity\"\n                class=\"max-w-[100px] sm:max-w-[150px] w-full\"\n                :lower-limit=\"data.product.productSubscription.lowerLimit\"\n                :step-size=\"data.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=\"product-grid__infoBanner\">\n            <div class=\"flex h-full text-sm px-sm md:text-md\">\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                {{ t('shop.productSubscription.deliveryNow.infoText') }}\n              </div>\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 { DeliveryTime, QuantityPicker, ProductImage } from '@/complib';\nimport ContentSeparator from '@/components/block/seperator/contentSeparator.vue';\nimport FaIcon from '@/components/fa-icon.vue';\nimport { useSecureSessionPost } from '~/composables/dataFetching/genericFetchers';\nimport type { ProductSubscriptionItem } from '~/server/transformers/shop/productSubscriptionListTransformer';\nimport VatShippingHint from '@/components/shop/atoms/vatShippingHint.vue';\nimport { handleLoadingError } from '~/utils/handleLoadingError';\n\nconst { t, n } = useTrans();\nconst dialogStore = useDialogStore();\ndialogStore.setHeadline(t('shop.productSubscription.deliveryNow.title'));\nconst data = dialogStore.getDialogData<{\n  subscription: ProductSubscriptionItem;\n  product: Product;\n}>();\nconst quantity = ref(data.subscription.quantity);\n\nasync function onSubmit(subscriptionId: string, quantity: number) {\n  try {\n    const site = useSiteIdent();\n    const response = await useSecureSessionPost<string>(\n      `/api/${site}/shop/product/productSubscription/deliverNow/${subscriptionId}`,\n      {\n        quantity: quantity,\n      },\n    );\n    if (response) {\n      dialogStore.closeDialog(DialogResponses.SUCCESS);\n    } else {\n      dialogStore.closeDialog(DialogResponses.CANCEL);\n    }\n  } catch (e) {\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    'image deliveryTime'\n    'image quantity'\n    'infoBanner infoBanner';\n\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.product-grid__quantity {\n  grid-area: quantity;\n  @apply my-sm pl-sm;\n}\n.product-grid__deliveryTime {\n  grid-area: deliveryTime;\n  @apply pl-sm;\n}\n\n.product-grid__infoBanner {\n  grid-area: infoBanner;\n  @apply bg-status-warn-lighter rounded-alt-md my-sm;\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      'image deliveryTime'\n      'image quantity'\n      'infoBanner infoBanner';\n\n    grid-template-columns: 150px;\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  .product-grid__quantity {\n    grid-area: quantity;\n    @apply my-sm;\n  }\n  .product-grid__deliveryTime {\n    grid-area: deliveryTime;\n  }\n\n  .product-grid__infoBanner {\n    grid-area: infoBanner;\n    @apply bg-status-warn-lighter 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","n","useTrans","dialogStore","useDialogStore","data","quantity","ref","onSubmit","subscriptionId","site","useSiteIdent","useSecureSessionPost","DialogResponses","e","handleLoadingError"],"mappings":"6yDA6HA,KAAM,CAAE,EAAAA,EAAG,EAAAC,CAAE,EAAIC,EAAS,EACpBC,EAAcC,IACRD,EAAA,YAAYH,EAAE,4CAA4C,CAAC,EACjE,MAAAK,EAAOF,EAAY,gBAInBG,EAAWC,EAAIF,EAAK,aAAa,QAAQ,EAEhC,eAAAG,EAASC,EAAwBH,EAAkB,CAC5D,GAAA,CACF,MAAMI,EAAOC,IACI,MAAMC,EACrB,QAAQF,CAAI,gDAAgDD,CAAc,GAC1E,CACE,SAAUH,CACZ,CAAA,EAGYH,EAAA,YAAYU,EAAgB,OAAO,EAEnCV,EAAA,YAAYU,EAAgB,MAAM,QAEzCC,EAAG,CACVC,EAAmBD,CAAC,CACtB,CACF"}