{"version":3,"file":"ProductSuggestion-D4Bbsz3A.js","sources":["../../src/components/Product/Replace/ReplaceProduct.vue","../../src/components/Product/Replace/ProductSuggestion.vue"],"sourcesContent":["<template>\n  <!-- prettier-ignore -->\n  <div\n    class=\"product\"\n    :class=\"{'product--selected': $props.isSelected}\"\n    :data-product-id=\"$props.productId\"\n  >\n    <product-price\n      class=\"product__price\"\n      :price=\"options.price\"\n      :suffix=\"$t('product.currency')\"\n    />\n    <div class=\"product__options\">\n      <the-typography\n        tag=\"span\"\n        type=\"bodyMediumLong\"\n        v-text=\"productOptions\"\n      />\n      <the-typography\n        tag=\"div\"\n        type=\"bodyMediumLong\"\n        v-text=\"$props.doctor\"\n      />\n    </div>\n    <the-typography\n      tag=\"div\"\n      type=\"heading03\"\n      v-text=\"$t(`content.products.${$props.productId}.name`)\"\n    />\n    <the-typography\n      tag=\"div\"\n      type=\"bodyLargeLong\"\n      v-html=\"$t(`content.products.${$props.productId}.description`)\"\n    />\n\n    <template v-if=\"!$props.disableBullets\">\n      <ul class=\"product-bullets\">\n        <li\n          v-for=\"(bullet, key) in $t(`content.products.${$props.productId}.bulletPoints`)\"\n          :key=\"key\"\n          v-text=\"bullet\"\n        />\n      </ul>\n    </template>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue'\n\nimport useProduct from '@/hooks/useProduct'\n\nimport ProductPrice from '@/components/Product/ProductPrice'\n\n// HOOKS\nconst { composeOptions, getCategoryIdFromProduct } = useProduct()\n\n// INIT\nconst props = defineProps({\n  disableBullets: {\n    type: Boolean,\n    default: false,\n  },\n  doctor: {\n    type: String,\n    default: null,\n  },\n  groupId: {\n    type: String,\n    required: true,\n  },\n  product: {\n    type: Object,\n    required: true,\n  },\n  productId: {\n    type: String,\n    required: true,\n  },\n  isSelected: {\n    type: Boolean,\n    default: false,\n  },\n})\n\n// COMPUTED\nconst options = computed(() => {\n  return props.product.prices.find(p => p.selected)\n})\n\nconst productOptions = computed(() => {\n  const categoryId = getCategoryIdFromProduct(props.productId)\n  return composeOptions(Object.assign({}, props.product, { productId: props.productId }), props.groupId, categoryId)\n})\n</script>\n\n<style name=\"mobile\" scoped>\n.product {\n  display: grid;\n  height: 100%;\n  grid-template-rows:\n    50px /* price */\n    minmax(0, auto) /* criteria */\n    45px /* name */\n    minmax(0, auto) /* description */\n    1fr /* bullets */\n    minmax(0, auto) /* actions */;\n\n  padding: 15px;\n}\n\n.product {\n  &__price {\n    font-weight: bold;\n    font-size: 36px;\n    line-height: 50px;\n  }\n\n  &__name {\n    font-size: 24px;\n    padding: 8px 0 4px 0;\n  }\n\n  &__description {\n    padding: 0 0 14px 0;\n  }\n\n  &-bullets {\n    margin: 5px 0 0 0;\n    padding: 0 20px 24px 20px;\n\n    li {\n      letter-spacing: 0;\n      line-height: 20px;\n      color: var(--c-primary-neutral-1);\n    }\n  }\n\n  &-actions {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    justify-content: space-between;\n    align-items: baseline;\n\n    button {\n      margin: 0;\n    }\n  }\n\n  &--selected {\n    background-color: var(--c-primary-color-3-c);\n    border-color: transparent !important;\n  }\n}\n</style>\n\n<style name=\"desktop\" scoped>\n@media (--md) {\n  .product {\n    &-actions {\n      flex-direction: row;\n    }\n  }\n}\n</style>\n","<template>\n  <!-- prettier-ignore -->\n  <div class=\"suggestion\">\n    <Modal.Header :text=\"$t('product.suggestion.title', { savings })\" />\n    <Modal.Content>\n      <the-typography\n        type=\"bodyLargeLong\"\n        v-text=\"$t('product.suggestion.subtitle')\"\n      />\n      <div class=\"suggestion-products\">\n        <loading-alt v-if=\"!ready\" />\n        <template v-else>\n          <div class=\"suggestion-product\">\n            <the-typography\n              type=\"heading04\"\n              v-text=\"$t('product.suggestion.selected')\"\n            />\n            <replace-product\n              disable-bullets\n              :doctor=\"doctorName\"\n              :group-id=\"$props.groupId\"\n              :product-id=\"sortedProducts[1].productId\"\n              :product=\"sortedProducts[1]\"\n              @replace=\"addProduct($props.personId, sortedProducts[1], $props.doctor)\"\n            />\n          </div>\n          <div class=\"suggestion-product\">\n            <the-typography\n              type=\"heading04\"\n              v-text=\"$t('product.suggestion.savings')\"\n            />\n            <replace-product\n              disable-bullets\n              is-selected\n              :doctor=\"doctorName\"\n              :group-id=\"$props.groupId\"\n              :product-id=\"sortedProducts[0].productId\"\n              :product=\"sortedProducts[0]\"\n              @replace=\"addProduct($props.personId, sortedProducts[0], $props.doctor)\"\n            />\n          </div>\n        </template>\n      </div>\n    </Modal.Content>\n\n    <Modal.Footer>\n      <template #secondary>\n        <Form.Button\n          :disabled=\"!ready\"\n          has-loading-indicator\n          secondary\n          :text=\"$t('product.suggestion.btn.no')\"\n          @click=\"addProduct($props.personId, sortedProducts[1], $props.doctor)\"\n        />\n      </template>\n      <template #primary>\n        <Form.Button\n          :disabled=\"!ready\"\n          has-loading-indicator\n          primary\n          :text=\"$t('product.suggestion.btn.yes')\"\n          @click=\"addProduct($props.personId, sortedProducts[0], $props.doctor)\"\n        />\n      </template>\n    </Modal.Footer>\n  </div>\n</template>\n\n<script setup>\nimport { computed, onMounted, ref } from 'vue'\n\nimport cloneDeep from 'lodash/cloneDeep'\n\nimport { SortUtil } from '@/utils/Sorting'\nimport { events$, loading$ } from '@/services'\n\nimport { logError } from '@/helpers/Logger'\nimport { getDoctorName } from '@/utils/Doctor'\n\nimport basketStore from '@/store/basket'\nimport usePersonSpecificProduct from '@/hooks/usePersonSpecificProduct'\nimport useProductPersons from '@/hooks/useProductPersons'\n\nimport * as Form from '@/components/Form'\nimport * as Modal from '@/components/Modal'\nimport LoadingAlt from '@/components/Container/LoadingAlt'\nimport ReplaceProduct from '@/components/Product/Replace/ReplaceProduct'\n\nimport { EVENT_PRODUCT } from '@/config/events'\n\n// HOOKS\nconst { selectProductOption } = usePersonSpecificProduct()\n\n// INIT\nconst emit = defineEmits(['added'])\nconst props = defineProps({\n  categoryId: {\n    type: String,\n    required: true,\n  },\n  doctor: {\n    type: Object,\n    required: true,\n  },\n  groupId: {\n    type: String,\n    required: true,\n  },\n  personId: {\n    type: String,\n    required: true,\n  },\n  product: {\n    type: Object,\n    required: true,\n  },\n  source: {\n    type: String,\n    required: true,\n  },\n})\n\n// DATA\nconst products = ref([])\nconst ready = ref(false)\n\n// COMPUTED\nconst doctorName = computed(() => {\n  return getDoctorName(props.doctor)\n})\n\nconst savings = computed(() => {\n  if (sortedProducts.value.length === 2) {\n    const __savings =\n      sortedProducts.value[1].prices.find(p => p.selected).price -\n      sortedProducts.value[0].prices.find(p => p.selected).price\n    return parseFloat(__savings).toFixed(2)\n  } else {\n    return 0.0\n  }\n})\n\nconst sortedProducts = computed(() => {\n  const __products = cloneDeep(products.value)\n  return __products.sort(SortUtil.sortByParam(item => item.prices.find(p => p.selected).price))\n})\n\n// METHODS\nfunction addProduct(personId, __product, doctor) {\n  const { addProductDoctorToBasket } = useProductPersons()\n  loading$.start({ blocking: false })\n  const productId = __product.productId\n  const selectedOption = __product.prices.find(p => p.selected)\n  return addProductDoctorToBasket(personId, productId, doctor)\n    .then(basket => selectProductOption({ personId, productId, option: selectedOption, __basket: basket }))\n    .then(basket => basketStore.updateOvpBasket(basket))\n    .then(basket => {\n      events$.emit(EVENT_PRODUCT.ADDED, {\n        basket,\n        personId,\n        categoryId: props.categoryId,\n        productId,\n        source: props.source,\n      })\n      emit('added')\n      loading$.end()\n      return basket\n    })\n    .catch(error => logError(error))\n}\n\nfunction simulate() {\n  const { addProductToOvpBasket } = useProductPersons()\n  const { getProductsFromGroup } = usePersonSpecificProduct()\n  const __products = getProductsFromGroup(props.groupId, props.personId)\n  const triggerAmount = __products.length\n  let trigger = 0\n  // use the same criteria selection for both products\n  const selectedOption = props.product.prices.find(p => p.selected)\n  __products.forEach(product => {\n    addProductToOvpBasket(props.personId, product.productId, { doctor: props.doctor })\n      .then(basket =>\n        selectProductOption({\n          personId: props.personId,\n          productId: product.productId,\n          option: selectedOption,\n          __basket: basket,\n        })\n      )\n      .then(basket => basketStore.updateOvpBasket(basket, { simulate: true }))\n      .then(basket => {\n        products.value.push(\n          Object.assign(\n            {},\n            { productId: product.productId },\n            basket.persons.find(p => p.personId === props.personId).products.products[product.productId]\n          )\n        )\n        trigger++\n        if (triggerAmount === trigger) {\n          ready.value = true\n        }\n      })\n  })\n}\n\n// LIFECYCLE HOOKS\nonMounted(() => {\n  simulate()\n\n  events$.emit(EVENT_PRODUCT.SUGGESTION_DISPLAYED)\n})\n</script>\n\n<style name=\"mobile\" scoped>\n.suggestion-products {\n  display: grid;\n  gap: 50px;\n}\n\n.suggestion-product {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 100%;\n\n  .product {\n    margin: 8px 0 0 0;\n    border: 1px solid var(--c-primary-neutral-1);\n  }\n}\n</style>\n\n<style name=\"desktop\" scoped>\n@media (--md) {\n  .suggestion-products {\n    grid-template-columns: 1fr 1fr;\n    gap: 24px;\n  }\n}\n</style>\n"],"names":["composeOptions","getCategoryIdFromProduct","useProduct","props","__props","options","computed","p","productOptions","categoryId","selectProductOption","usePersonSpecificProduct","emit","__emit","products","ref","ready","doctorName","getDoctorName","savings","sortedProducts","__savings","cloneDeep","SortUtil","item","addProduct","personId","__product","doctor","addProductDoctorToBasket","useProductPersons","loading$","productId","selectedOption","basket","basketStore","events$","EVENT_PRODUCT","error","logError","simulate","addProductToOvpBasket","getProductsFromGroup","__products","triggerAmount","trigger","product","onMounted"],"mappings":"+wBAuDA,KAAM,CAAE,eAAAA,EAAgB,yBAAAC,CAA0B,EAAGC,EAAY,EAG3DC,EAAQC,EA4BRC,EAAUC,EAAS,IAChBH,EAAM,QAAQ,OAAO,KAAKI,GAAKA,EAAE,QAAQ,CACjD,EAEKC,EAAiBF,EAAS,IAAM,CACpC,MAAMG,EAAaR,EAAyBE,EAAM,SAAS,EAC3D,OAAOH,EAAe,OAAO,OAAO,CAAE,EAAEG,EAAM,QAAS,CAAE,UAAWA,EAAM,SAAW,CAAA,EAAGA,EAAM,QAASM,CAAU,CACnH,CAAC,06CCFD,KAAM,CAAE,oBAAAC,CAAqB,EAAGC,EAA0B,EAGpDC,EAAOC,EACPV,EAAQC,EA4BRU,EAAWC,EAAI,EAAE,EACjBC,EAAQD,EAAI,EAAK,EAGjBE,EAAaX,EAAS,IACnBY,EAAcf,EAAM,MAAM,CAClC,EAEKgB,EAAUb,EAAS,IAAM,CAC7B,GAAIc,EAAe,MAAM,SAAW,EAAG,CACrC,MAAMC,EACJD,EAAe,MAAM,CAAC,EAAE,OAAO,KAAKb,GAAKA,EAAE,QAAQ,EAAE,MACrDa,EAAe,MAAM,CAAC,EAAE,OAAO,KAAKb,GAAKA,EAAE,QAAQ,EAAE,MACvD,OAAO,WAAWc,CAAS,EAAE,QAAQ,CAAC,CAC1C,KACI,OAAO,EAEX,CAAC,EAEKD,EAAiBd,EAAS,IACXgB,EAAUR,EAAS,KAAK,EACzB,KAAKS,EAAS,YAAYC,GAAQA,EAAK,OAAO,KAAKjB,GAAKA,EAAE,QAAQ,EAAE,KAAK,CAAC,CAC7F,EAGD,SAASkB,EAAWC,EAAUC,EAAWC,EAAQ,CAC/C,KAAM,CAAE,yBAAAC,CAA0B,EAAGC,EAAmB,EACxDC,EAAS,MAAM,CAAE,SAAU,EAAK,CAAE,EAClC,MAAMC,EAAYL,EAAU,UACtBM,EAAiBN,EAAU,OAAO,KAAKpB,GAAKA,EAAE,QAAQ,EAC5D,OAAOsB,EAAyBH,EAAUM,EAAWJ,CAAM,EACxD,KAAKM,GAAUxB,EAAoB,CAAE,SAAAgB,EAAU,UAAAM,EAAW,OAAQC,EAAgB,SAAUC,CAAM,CAAE,CAAC,EACrG,KAAKA,GAAUC,EAAY,gBAAgBD,CAAM,CAAC,EAClD,KAAKA,IACJE,EAAQ,KAAKC,EAAc,MAAO,CAChC,OAAAH,EACA,SAAAR,EACA,WAAYvB,EAAM,WAClB,UAAA6B,EACA,OAAQ7B,EAAM,MACtB,CAAO,EACDS,EAAK,OAAO,EACZmB,EAAS,IAAK,EACPG,EACR,EACA,MAAMI,GAASC,GAASD,CAAK,CAAC,CACnC,CAEA,SAASE,GAAW,CAClB,KAAM,CAAE,sBAAAC,CAAuB,EAAGX,EAAmB,EAC/C,CAAE,qBAAAY,CAAsB,EAAG/B,EAA0B,EACrDgC,EAAaD,EAAqBvC,EAAM,QAASA,EAAM,QAAQ,EAC/DyC,EAAgBD,EAAW,OACjC,IAAIE,EAAU,EAEd,MAAMZ,EAAiB9B,EAAM,QAAQ,OAAO,KAAKI,GAAKA,EAAE,QAAQ,EAChEoC,EAAW,QAAQG,GAAW,CAC5BL,EAAsBtC,EAAM,SAAU2C,EAAQ,UAAW,CAAE,OAAQ3C,EAAM,OAAQ,EAC9E,KAAK+B,GACJxB,EAAoB,CAClB,SAAUP,EAAM,SAChB,UAAW2C,EAAQ,UACnB,OAAQb,EACR,SAAUC,CACpB,CAAS,CACF,EACA,KAAKA,GAAUC,EAAY,gBAAgBD,EAAQ,CAAE,SAAU,EAAI,CAAE,CAAC,EACtE,KAAKA,GAAU,CACdpB,EAAS,MAAM,KACb,OAAO,OACL,CAAE,EACF,CAAE,UAAWgC,EAAQ,SAAW,EAChCZ,EAAO,QAAQ,KAAK3B,GAAKA,EAAE,WAAaJ,EAAM,QAAQ,EAAE,SAAS,SAAS2C,EAAQ,SAAS,CAC5F,CACF,EACDD,IACID,IAAkBC,IACpB7B,EAAM,MAAQ,GAExB,CAAO,CACP,CAAG,CACH,CAGA,OAAA+B,EAAU,IAAM,CACdP,EAAU,EAEVJ,EAAQ,KAAKC,EAAc,oBAAoB,CACjD,CAAC"}