{"version":3,"file":"FCiIjHvx.js","sources":["../../../../src/components/overlays/OverlayAddSeats.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { mdiSofaSingleOutline } from '@mdi/js'\n\nimport CouponSubtotals from '@/components/business/coupons/CouponSubtotals.vue'\nimport DancingDotsLoader from '@/components/DancingDotsLoader.vue'\nimport NumberIncrement from '@/components/NumberIncrement.vue'\nimport OverlayBase from '@/components/overlays/OverlayBase.vue'\nimport SkrAlert from '@/components/SkrAlert.vue'\nimport ToolbarBase from '@/components/ToolbarBase.vue'\n\nconst props = defineProps<{\n  currentSeats: number\n  maxSeatsDelta: number\n  isLoading: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'action', type: OverlayAction, data?: unknown): void\n  (e: 'close'): void\n}>()\n\nconst { t } = useI18n()\n\nconst { formatCurrency } = useCurrency()\nconst { paymentRepository } = useApi()\n\nconst businessStore = useBusinessStore()\n\nconst widgetStore = useWidgetStore()\nconst paymentStore = usePaymentStore()\nconst { currentPricePlan, billing, id: businessId } = storeToRefs(useBusinessStore())\n\nconst planId = computed(() => currentPricePlan.value?.type ?? '')\nconst currency = computed(() => billing.value.currency ?? 'EUR')\nconst cycle = computed(() => (currentPricePlan.value?.cycle === 'YEARLY' ? 'yearly' : 'monthly'))\n\nconst icons = reactive({\n  sofa: mdiSofaSingleOutline,\n})\n\nconst pricePlan = ref<PricePlan>()\n\nconst updatePlanDetails = async () => {\n  await paymentStore.getBusinessPricePlans()\n  pricePlan.value = paymentStore.pricePlans.find(plan => plan.id === planId.value)\n}\n\nonBeforeMount(() => {\n  void updatePlanDetails()\n})\n\nconst selection = reactive({\n  seats: 0,\n  timestamp: '',\n  price: 0,\n  displayPrice: '',\n  discountPriceData: {} as PreviewUpgradeSubscriptionPriceResponse,\n})\n\nconst previewTimeout = ref(0)\n\nconst isFetching = ref(false)\n\nconst isCalculatingPrice = computed(() => isFetching.value || previewTimeout.value !== 0)\n\nconst { isDiscountActive: discountIsActive, discountPromoCode } = storeToRefs(businessStore)\n\nconst fetchPreviewPrice = async (seats: number) => {\n  if (!selection.seats) {\n    selection.displayPrice = formatCurrency(0, currency.value)\n    isFetching.value = false\n    return\n  }\n\n  isFetching.value = true\n\n  try {\n    const { amountDue, amountDiscountApplied, percentOff, amountSubtotal, timestamp } =\n      await paymentRepository.previewSeatsUpgradePrice(businessId.value, seats)\n\n    selection.price = amountDue\n    selection.displayPrice = formatCurrency(amountDue, currency.value)\n    selection.timestamp = timestamp\n    selection.discountPriceData = {\n      amountDiscountApplied,\n      amountDiscountTotal: 0,\n      amountDue: amountDue || selection.price,\n      amountSubtotal,\n      currency: currency.value,\n      percentOff,\n    }\n  } catch {\n    widgetStore.createSnackbar({ message: t('global.general_error') })\n    selection.seats = 0\n    selection.displayPrice = formatCurrency(0, currency.value)\n  }\n\n  isFetching.value = false\n}\n\nconst isPreviewLoaded = computed(() => selection.seats > 0 && isFetching.value === false && selection.timestamp !== '')\n\nwatch(\n  () => selection.seats,\n  seatsToAdd => {\n    if (previewTimeout.value) window.clearTimeout(previewTimeout.value)\n\n    previewTimeout.value = window.setTimeout(\n      () => {\n        void fetchPreviewPrice(props.currentSeats + seatsToAdd)\n        previewTimeout.value = 0\n      },\n      seatsToAdd > 0 ? 1000 : 0\n    )\n  },\n  { immediate: true }\n)\n\nconst seatPrice = computed<number>(() => {\n  // FIXME: The backend uses inconsistent casing for currency values\n  const lowercaseCurrency = currency.value.toLowerCase() as Lowercase<Currency>\n  return pricePlan.value?.[cycle.value][lowercaseCurrency].seat ?? 0\n})\n\nconst formatPackageName = (name: string) => {\n  const screamingSnake = name.replace(/[A-Z]/g, char => `_${char}`).toUpperCase()\n  const orString = t('global.or') as string\n  return screamingSnake.replace('_', ` ${orString} `)\n}\n\nconst signaturePackages = computed(() => {\n  if (!pricePlan.value) return []\n\n  return (\n    Object.entries(pricePlan.value[cycle.value].signaturesIncluded)\n      // Filter out packages with 0 or unlimited (-1) seats, those we don't need to show\n      .filter(([_, count]) => count > 0)\n      .map(([name, count]) => ({\n        id: name,\n        name: formatPackageName(name),\n        count: selection.seats * count,\n      }))\n  )\n})\n\nconst colorClass = computed(() => `bg-plan-${pricePlan.value?.name.toLowerCase()}`)\n\nconst submit = () => {\n  if (props.isLoading) return\n  // TODO: Refactor this\n  emit('action', 'complete', { count: selection.seats, timestamp: selection.timestamp })\n}\n\nconst submitAddSeatsButtonContent = computed(() => {\n  if (selection.price === 0) return t('business.add_seats.add_at_no_cost', selection.seats, { count: selection.seats })\n  return t('business.add_seats.add_and_pay', selection.seats, { count: selection.seats })\n})\n\nconst couponAppliedText = computed(() => {\n  if (selection.discountPriceData.percentOff && selection.discountPriceData.percentOff > 0) {\n    const appliedText = String(t('business.coupon.input.banner_applied'))\n    return `${appliedText} (-${selection.discountPriceData.percentOff}%)`\n  }\n  return t('business.add_seats.coupon_applied')\n})\n</script>\n\n<template>\n  <overlay-base>\n    <template #header>\n      <toolbar-base\n        class=\"toolbar\"\n        :title=\"String(t('business.billing.seats.add'))\"\n        :app=\"false\"\n        is-closeable\n        @close=\"emit('close')\"\n      />\n    </template>\n    <v-container class=\"content fill-height\">\n      <v-row align=\"center\" justify=\"center\">\n        <v-col cols=\"auto\">\n          <div>\n            <div class=\"upgrade-card\" data-cy=\"upgrade_card\">\n              <div :class=\"['upgrade-card__hue mb-4', colorClass]\" />\n              <section class=\"pa-8\">\n                <div class=\"text-h5 font-weight-bold mb-6\">\n                  {{ t('business.billing.seats.add') }}\n                </div>\n                <skr-alert type=\"warning\" class=\"mb-0\">\n                  <i18n-t keypath=\"business.add_seats.disclaimer.charged_directly\">\n                    <template #emphasis>\n                      <span class=\"font-weight-bold\">{{ t('business.add_seats.disclaimer.emphasis') }}</span>\n                    </template>\n                  </i18n-t>\n                </skr-alert>\n              </section>\n              <v-divider />\n              <section class=\"d-flex align-start px-8 py-6\">\n                <v-icon color=\"grey-darker\">{{ icons.sofa }}</v-icon>\n                <div class=\"flex-grow-1 ml-4\">\n                  <div class=\"d-flex align-start justify-space-between\">\n                    <div>\n                      <div>\n                        <span class=\"font-weight-bold\">{{ t('business.upgrade.plan.seats') }}</span>\n                        <br />\n                        <span data-cy=\"seat_price_text\">\n                          {{\n                            t('business.upgrade.plan.at_price', {\n                              // Yearly prices need to be divided by 12 for comparison with monthly prices\n                              price: formatCurrency(cycle === 'monthly' ? seatPrice : seatPrice / 12, currency),\n                            })\n                          }}\n                        </span>\n                        {{ ' ' }}\n                        <span>{{ t('billing.billing_cycle.per_month') }}</span>\n                      </div>\n                    </div>\n                    <number-increment\n                      :incr-enabled=\"true\"\n                      :decr-enabled=\"selection.seats > 0\"\n                      :min=\"0\"\n                      @input=\"newSeats => (selection.seats = newSeats)\"\n                    />\n                  </div>\n                </div>\n              </section>\n              <v-divider />\n              <section class=\"d-flex align-start px-8 py-6\">\n                <v-icon color=\"grey-darker\">custom:signature</v-icon>\n                <div class=\"flex-grow-1 ml-4 space-y-4\">\n                  <div\n                    v-for=\"signaturePackage in signaturePackages\"\n                    :key=\"signaturePackage.id\"\n                    class=\"d-flex align-center justify-space-between\"\n                  >\n                    <span>\n                      <span class=\"font-weight-bold\">{{ signaturePackage.name }}</span>\n                      <span v-if=\"signaturePackage.count !== -1\">\n                        {{ ' ' }}\n                        {{\n                          cycle === 'yearly'\n                            ? t('billing.billing_cycle.per_year')\n                            : t('billing.billing_cycle.per_month')\n                        }}\n                      </span>\n                    </span>\n                    <span class=\"font-weight-bold\">\n                      {{ signaturePackage.count === -1 ? t('global.unlimited') : signaturePackage.count }}\n                    </span>\n                  </div>\n                </div>\n              </section>\n              <v-divider />\n              <section\n                v-if=\"discountIsActive\"\n                data-cy=\"add_seats_coupon_info\"\n                class=\"pa-8 pb-0 coupon-applied-add-seats\"\n              >\n                <v-banner v-if=\"isPreviewLoaded\" two-line color=\"#E1FFF6\" rounded>\n                  <template #prepend>\n                    <v-avatar size=\"16\">\n                      <v-icon :size=\"16\">custom:coupon_tag</v-icon>\n                    </v-avatar>\n                  </template>\n                  <strong>{{ discountPromoCode }}</strong> {{ couponAppliedText }}\n                </v-banner>\n                <coupon-subtotals\n                  v-if=\"isPreviewLoaded && selection.discountPriceData\"\n                  :coupon-code=\"discountPromoCode\"\n                  :price-data=\"selection.discountPriceData\"\n                  :is-fetching-price=\"false\"\n                />\n              </section>\n              <section class=\"pa-8\">\n                <div class=\"text-center mb-6\">\n                  <i18n-t keypath=\"business.add_seats.due_money\">\n                    <template #price>\n                      <dancing-dots-loader v-if=\"isCalculatingPrice\" />\n                      <span v-else class=\"font-weight-bold\" data-cy=\"total_price_text\">{{\n                        selection.displayPrice\n                      }}</span>\n                    </template>\n                  </i18n-t>\n                </div>\n                <v-btn\n                  color=\"primary\"\n                  size=\"x-large\"\n                  block\n                  data-cy=\"upgrade_button\"\n                  :disabled=\"selection.seats === 0 || isCalculatingPrice\"\n                  :loading=\"isLoading\"\n                  @click=\"submit\"\n                >\n                  {{ submitAddSeatsButtonContent }}\n                </v-btn>\n              </section>\n            </div>\n          </div>\n        </v-col>\n      </v-row>\n    </v-container>\n  </overlay-base>\n</template>\n\n<style lang=\"sass\" scoped>\n$card-width: 460px\n\n.toolbar\n  position: fixed\n  top: 0\n\n.content\n  padding-top: 90px\n\n.upgrade-card\n  color: $c-grey-darker\n  width: $card-width\n  max-width: 100%\n  box-shadow: 0px 2px 5px rgba(40, 62, 102, 0.19)\n  border-radius: 4px\n  overflow: hidden\n  background-color: $c-white\n  margin-top: 4 * $bw\n  margin-bottom: 4 * $bw\n  &__hue\n    height: 12px\n\n\n\n.coupon-applied-add-seats :deep(.v-banner)\n  border-bottom: none !important\n  padding-top: 16px\n  color: $c-skribbleu\n  background-color: #E1FFF6 !important\n\n  .v-banner__prepend\n    margin: 0\n    .v-avatar\n      min-width: fit-content !important\n      width: auto !important\n      height: 100% !important\n      border-radius: 0%\n      margin-right: 12px\n      padding-top: 4px\n\n  .v-banner__content\n    display: inline\n    line-height: 20px\n</style>\n"],"names":["props","__props","emit","__emit","t","useI18n","formatCurrency","useCurrency","paymentRepository","useApi","businessStore","useBusinessStore","widgetStore","useWidgetStore","paymentStore","usePaymentStore","currentPricePlan","billing","businessId","storeToRefs","planId","computed","_b","_a","currency","cycle","icons","reactive","mdiSofaSingleOutline","pricePlan","ref","updatePlanDetails","plan","onBeforeMount","selection","previewTimeout","isFetching","isCalculatingPrice","discountIsActive","discountPromoCode","fetchPreviewPrice","seats","amountDue","amountDiscountApplied","percentOff","amountSubtotal","timestamp","e","isPreviewLoaded","watch","seatsToAdd","seatPrice","lowercaseCurrency","formatPackageName","name","screamingSnake","char","orString","signaturePackages","_","count","colorClass","submit","submitAddSeatsButtonContent","couponAppliedText","appliedText"],"mappings":"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"}