{"version":3,"file":"useCouponCode-DXz9sEf2.js","sources":["../../../app/javascript/assets/images/badge-plan-team.png","../../../app/javascript/modules/growthmentor/wizard/components/BillingCycleToggle.vue","../../../app/javascript/modules/growthmentor/wizard/components/MembershipSubscriptions.vue","../../../app/javascript/shared/composables/useCouponCode.ts"],"sourcesContent":["export default \"__VITE_ASSET__Dx$4Wc0u__\"","<template>\n  <div>\n    <div\n      class=\"tw-flex tw-items-center tw-space-x-3 tw-text-sm sm:tw-text-base\"\n    >\n      <div\n        :class=\"[\n          modelValue === leftBillingCycle\n            ? 'tw-font-medium'\n            : 'tw-text-neutral-500',\n        ]\"\n      >\n        <span class=\"tw-capitalize\">{{ leftBillingCycle }}</span>\n      </div>\n      <FormToggle\n        v-model=\"isToggleActive\"\n        size=\"small\"\n        test_id=\"billing-cycle-toggle\"\n      />\n      <div\n        :class=\"[\n          modelValue === rightBillingCycle\n            ? 'tw-font-medium'\n            : 'tw-text-neutral-500',\n        ]\"\n      >\n        <span class=\"tw-capitalize\">{{\n          rightBillingCycle === BILLING_CYCLES.ANNUALLY\n            ? 'Yearly'\n            : rightBillingCycle\n        }}</span>\n        <span\n          v-if=\"\n            rightBillingCycle === BILLING_CYCLES.ANNUALLY && !annualBonusHidden\n          \"\n          class=\"tw-ml-1 tw-hidden sm:tw-inline-block\"\n        >\n          - {{ $page.props.content.toggleYearlyText }}\n        </span>\n      </div>\n    </div>\n\n    <div\n      v-if=\"modelValue === BILLING_CYCLES.ANNUALLY && !annualBonusHidden\"\n      class=\"tw-mt-4 tw-text-sm sm:tw-hidden\"\n    >\n      Bonus: {{ $page.props.content.toggleYearlyText }}\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed, onMounted, ref, watch } from 'vue'\nimport FormToggle from '@/shared/components/forms/FormToggle.vue'\n\nconst BILLING_CYCLES = {\n  MONTHLY: 'monthly',\n  QUARTERLY: 'quarterly',\n  ANNUALLY: 'annually',\n}\nconst BILLING_CYCLES_PRIORITIES = {\n  [BILLING_CYCLES.MONTHLY]: 1,\n  [BILLING_CYCLES.QUARTERLY]: 2,\n  [BILLING_CYCLES.ANNUALLY]: 3,\n}\n\nconst props = defineProps({\n  modelValue: {\n    type: String,\n    required: true,\n  },\n  annualBonusHidden: {\n    type: Boolean,\n    default: false,\n  },\n  billingCycles: {\n    type: Array,\n    required: true,\n  },\n})\nconst emit = defineEmits(['update:modelValue'])\n\nconst sortedBillingCycles = computed(() =>\n  [...props.billingCycles].sort(\n    (a, b) => BILLING_CYCLES_PRIORITIES[a] - BILLING_CYCLES_PRIORITIES[b],\n  ),\n)\nconst leftBillingCycle = computed(() => sortedBillingCycles.value[0])\nconst rightBillingCycle = computed(() => sortedBillingCycles.value[1])\n\nconst isToggleActive = ref(props.modelValue === rightBillingCycle.value)\n\nwatch(isToggleActive, (newValue) => {\n  if (newValue) {\n    emit('update:modelValue', rightBillingCycle.value)\n  } else {\n    emit('update:modelValue', leftBillingCycle.value)\n  }\n})\n\nwatch(\n  () => props.modelValue,\n  (newValue) => {\n    isToggleActive.value = newValue === rightBillingCycle.value\n  },\n)\n\nonMounted(() => {\n  if (props.modelValue === null) {\n    emit('update:modelValue', leftBillingCycle.value)\n  }\n})\n</script>\n","<template>\n  <div class=\"tw-flex tw-flex-col tw-items-center tw-@container\">\n    <BillingCycleToggle\n      v-model=\"currentBillingCycle\"\n      :billing-cycles=\"availableBillingCycles\"\n    />\n\n    <div\n      class=\"tw-mt-6 tw-grid tw-w-full tw-max-w-6xl tw-gap-4 @3xl:tw-grid-cols-3\"\n    >\n      <!--Personal Subscription-->\n      <div\n        v-for=\"visiblePersonalPlan in visiblePersonalPlans\"\n        :key=\"visiblePersonalPlan.id\"\n        class=\"tw-relative tw-flex tw-flex-col tw-overflow-hidden tw-rounded-3xl tw-border tw-border-neutral-200 tw-bg-white tw-text-black tw-shadow-sm\"\n      >\n        <div\n          class=\"tw-bg-error-100 tw-py-2 tw-text-center tw-text-xs tw-font-semibold tw-uppercase tw-text-error-900\"\n          :class=\"{ 'tw-invisible': !visiblePersonalPlan.discounted }\"\n        >\n          {{ coupon.isLimitedTimeOffer ? 'Limited time offer' : 'Discount' }}\n          {{ visiblePersonalPlan.discounted?.discount * 100 }}%\n        </div>\n\n        <div class=\"tw-flex tw-grow tw-flex-col tw-px-8 tw-pb-8 tw-pt-4\">\n          <div class=\"tw-flex tw-justify-between\">\n            <span class=\"tw-text-xl tw-font-semibold tw-capitalize\">\n              {{ visiblePersonalPlan.group }}\n            </span>\n            <SubscriptionPlanBadge\n              :group=\"visiblePersonalPlan.group\"\n              class=\"tw-size-12\"\n            />\n          </div>\n\n          <!--Discounted pricing-->\n          <template v-if=\"visiblePersonalPlan.discounted\">\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              <div>\n                <span class=\"tw-text-3xl tw-font-semibold\">\n                  {{\n                    formatCurrency(\n                      visiblePersonalPlan.discounted.amountPerMonth.total,\n                    )\n                  }}\n                </span>\n                <span class=\"tw-text-sm tw-text-neutral-400\">/month</span>\n              </div>\n              <s class=\"tw-font-semibold tw-text-error-300\">\n                Was:\n                {{ formatCurrency(visiblePersonalPlan.amountPerMonth.total) }}\n              </s>\n            </div>\n            <div\n              class=\"tw-mt-3 tw-flex tw-h-8 tw-items-center tw-text-xs tw-text-neutral-400\"\n            >\n              {{ formatCurrency(visiblePersonalPlan.discounted.amount) }} billed\n              {{ visiblePersonalPlan.humanBillingInterval }}\n            </div>\n          </template>\n          <!--Normal pricing-->\n          <template v-else>\n            <div>\n              <span class=\"tw-text-3xl tw-font-semibold\">\n                {{ formatCurrency(visiblePersonalPlan.amountPerMonth.total) }}\n              </span>\n              <span class=\"tw-text-sm tw-text-neutral-400\">/month</span>\n            </div>\n            <div\n              class=\"tw-mt-3 tw-flex tw-h-8 tw-items-center tw-text-xs tw-text-neutral-400\"\n            >\n              {{ formatCurrency(visiblePersonalPlan.amount) }} billed\n              {{ visiblePersonalPlan.humanBillingInterval }}\n            </div>\n          </template>\n\n          <p class=\"tw-mt-6 tw-h-14\">\n            {{\n              $page.props.content[\n              visiblePersonalPlan.group === 'pro'\n                ? 'proPlanCardDescription'\n                : 'lightPlanCardDescription'\n            ]\n            }}\n          </p>\n          <div\n            v-if=\"withSubscriptionBenefits\"\n            class=\"tw-mt-6 tw-grow tw-space-y-3 tw-text-sm\"\n          >\n            <div>\n              {{ $page.props.content[\n                visiblePersonalPlan.group === 'pro'\n                  ? 'proPlanPerks'\n                  : 'lightPlanPerks'\n              ] }}\n            </div>\n            <div\n              v-for=\"perk in visiblePersonalPlan.perks\"\n              :key=\"perk.text\"\n              class=\"tw-flex tw-items-center\"\n            >\n              <component\n                :is=\"perk.icon\"\n                class=\"tw-mr-3 tw-h-5 tw-w-5 tw-shrink-0 tw-text-secondary-500\"\n              />\n              <span class=\"tw-text-sm\">{{ perk.text }}</span>\n              <InfoTooltip\n                v-if=\"perk.tooltip\"\n                :title=\"perk.text\"\n                :tooltip=\"perk.tooltip\"\n                placement=\"right\"\n                class=\"tw-ml-1\"\n              />\n            </div>\n          </div>\n          <div\n            v-tooltip=\"\n              visiblePersonalPlan.group === 'light' &&\n              isSubscriptionTrialInterval(SUBSCRIPTION_TRIAL_INTERVAL.MONTHLY)\n                ? 'You are on a gifted light membership, so you can\\'t buy the Light plan.'\n                : ''\n            \"\n            class=\"tw-mt-7\"\n          >\n            <BaseButton\n              @click=\"\n                type === 'wizard'\n                  ? startPersonalMembership(visiblePersonalPlan.id)\n                  : redirectToRegisterPage()\n              \"\n              color=\"purple\"\n              is-block\n              :is-disabled=\"\n                isPurchasingPersonalPlan ||\n                !canBuyPersonalSubscription(visiblePersonalPlan.group)\n              \"\n              size=\"large\"\n            >\n              {{\n                isPurchasingPersonalPlan\n                  ? 'Starting your membership...'\n                  : 'Get Started'\n              }}\n            </BaseButton>\n          </div>\n        </div>\n      </div>\n\n      <!--Team Subscription-->\n      <div\n        v-if=\"visibleTeamPlan\"\n        class=\"tw-relative tw-flex tw-flex-col tw-overflow-hidden tw-rounded-3xl tw-bg-[#1D2939] tw-text-white tw-shadow-sm\"\n      >\n        <div\n          class=\"tw-bg-error-100 tw-py-2 tw-text-center tw-text-xs tw-font-semibold tw-uppercase tw-text-error-900\"\n          :class=\"{ 'tw-invisible': !visibleDiscountedTeamPlan }\"\n        >\n          {{ coupon.isLimitedTimeOffer ? 'Limited time offer' : 'Discount' }}\n          {{ visibleDiscountedTeamPlan?.discount * 100 }}%\n        </div>\n\n        <div class=\"tw-flex tw-grow tw-flex-col tw-px-8 tw-pb-8 tw-pt-4\">\n          <div class=\"tw-flex tw-justify-between\">\n            <span class=\"tw-text-xl tw-font-semibold tw-capitalize\">Teams</span>\n            <img\n              src=\"@/assets/images/badge-plan-team.png\"\n              alt=\"\"\n              class=\"tw-h-12 tw-w-12\"\n            />\n          </div>\n\n          <template v-if=\"visibleDiscountedTeamPlan\">\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              <div>\n                <!--                {{-->\n                <!--                  formatCurrency(discountedInvoiceTotalWithoutTaxPerMonth)-->\n                <!--                }}/mo-->\n                <span class=\"tw-text-3xl tw-font-semibold\">\n                  {{ formatCurrency(discountedPerSeatRateMonth) }}\n                </span>\n                <span class=\"tw-text-sm tw-text-neutral-400\">/month/user</span>\n              </div>\n              <s class=\"tw-font-semibold tw-text-error-300\">\n                Was:\n                <!--                {{ formatCurrency(invoiceTotalWithoutTaxPerMonth) }}-->\n                {{ formatCurrency(perSeatRateMonth) }}\n              </s>\n            </div>\n          </template>\n          <template v-else>\n            <div>\n              <!--              {{ formatCurrency(invoiceTotalWithoutTaxPerMonth) }}/mo-->\n              <span class=\"tw-text-3xl tw-font-semibold\">\n                {{ formatCurrency(perSeatRateMonth) }}\n              </span>\n              <span class=\"tw-text-sm tw-text-neutral-400\">/month/user</span>\n            </div>\n          </template>\n\n          <div\n            class=\"tw-mt-3 tw-flex tw-h-8 tw-flex-wrap tw-items-center tw-gap-x-3 tw-gap-y-2\"\n          >\n            <select\n              v-model=\"form.seats\"\n              class=\"tw-w-24 tw-shrink-0 tw-border-neutral-600 tw-bg-[#1D2939] tw-px-2 tw-py-1 tw-text-xs tw-text-white focus:tw-border-neutral-600 focus:tw-bg-[#1D2939] focus:tw-text-white focus:tw-outline-none focus:tw-ring-0\"\n            >\n              <option\n                v-for=\"seat in TEAM_SEATS_OPTIONS_VALUES\"\n                :key=\"seat\"\n                :value=\"seat\"\n              >\n                {{ seat }} seats\n              </option>\n            </select>\n            <!--            <div class=\"tw-text-xs tw-text-neutral-400\">-->\n            <!--              {{-->\n            <!--                formatCurrency(-->\n            <!--                  visibleDiscountedTeamPlan-->\n            <!--                    ? discountedPerSeatRateMonth-->\n            <!--                    : perSeatRateMonth,-->\n            <!--                )-->\n            <!--              }}/mo/user-->\n            <!--            </div>-->\n            <div class=\"tw-text-xs tw-text-success-500\">\n              (Save {{ percentageSavePerUserComparedToPersonalPlan }}%/user)\n            </div>\n          </div>\n          <p class=\"tw-mt-6 tw-h-14\">\n            {{ $page.props.content.teamPlanCardDescription }}\n          </p>\n          <div\n            v-if=\"withSubscriptionBenefits\"\n            class=\"tw-mt-6 tw-grow tw-space-y-3 tw-text-sm\"\n          >\n            <div>\n              {{ $page.props.content.teamPlanPerks }}\n            </div>\n            <div\n              v-for=\"perk in teamPerks\"\n              :key=\"perk.text\"\n              class=\"tw-flex tw-items-center\"\n            >\n              <component\n                :is=\"perk.icon\"\n                class=\"tw-mr-3 tw-h-5 tw-w-5 tw-shrink-0\"\n              />\n              <span>{{ perk.text }}</span>\n              <InfoTooltip\n                v-if=\"perk.tooltip\"\n                :title=\"perk.text\"\n                :tooltip=\"perk.tooltip\"\n                placement=\"right\"\n                class=\"tw-ml-1\"\n              />\n            </div>\n          </div>\n          <BaseButton\n            @click=\"\n              type === 'wizard'\n                ? createTeam(String(visibleTeamPlan.id), coupon.code)\n                : redirectToRegisterPage()\n            \"\n            color=\"white\"\n            is-block\n            :is-disabled=\"isPurchasingTeamSubscription\"\n            size=\"large\"\n            class=\"tw-mt-7\"\n          >\n            {{\n              isPurchasingTeamSubscription\n                ? 'Starting your membership...'\n                : 'Get Started'\n            }}\n          </BaseButton>\n        </div>\n      </div>\n    </div>\n\n    <div v-if=\"withCouponCodeSection\" class=\"tw-mt-6\">\n      <button\n        class=\"tw--ml-1 tw-rounded-md tw-p-1 tw-text-sm tw-font-medium tw-text-neutral-500 focus:tw-outline-none focus-visible:tw-ring focus-visible:tw-ring-secondary-50\"\n        @click=\"toggleCouponCodeInput\"\n        test_id=\"have-a-coupon-btn\"\n      >\n        {{ coupon.isInputShown ? 'Enter a discount code' : 'Have a coupon?' }}\n      </button>\n      <transition name=\"fade\">\n        <div v-if=\"coupon.isInputShown\">\n          <form\n            @submit.prevent=\"applyCouponCode\"\n            class=\"tw-mt-2 tw-flex tw-items-center tw-space-x-2\"\n          >\n            <FormInput\n              v-model=\"couponCodeField\"\n              :is-error=\"Boolean(coupon.errors)\"\n              @input=\"clearCouponErrors\"\n              type=\"text\"\n              class=\"tw-grow\"\n              test_id=\"coupon-input\"\n            />\n            <BaseButton\n              color=\"outline-gray\"\n              :is-rounded=\"false\"\n              class=\"tw-h-[50px] tw-rounded-lg\"\n              :is-disabled=\"coupon.isLoading\"\n              test_id=\"apply-btn\"\n              type=\"submit\"\n            >\n              Apply code\n              <LoadingCircle\n                v-if=\"coupon.isLoading\"\n                size=\"16\"\n                class=\"tw-ml-2\"\n              />\n            </BaseButton>\n          </form>\n          <FormErrors\n            v-if=\"Boolean(coupon.errors)\"\n            :errors=\"coupon.errors\"\n            class=\"tw-mt-2\"\n          />\n          <p\n            v-if=\"coupon.isValid && !coupon.isLimitedTimeOffer\"\n            class=\"tw-mt-2 tw-text-xs tw-text-neutral-500\"\n          >\n            Your coupon code has been applied.\n          </p>\n        </div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { router, usePage } from '@inertiajs/vue3'\nimport { computed, inject, ref } from 'vue'\nimport BillingCycleToggle from '@/modules/growthmentor/wizard/components/BillingCycleToggle.vue'\nimport { getHumanBillingInterval } from '@/shared/utils/subscriptionPlanInterval.js'\nimport { formatCurrency } from '@/shared/utils/formatCurrency.js'\nimport InfoTooltip from '@/shared/components/InfoTooltip.vue'\nimport { comparePlans, getPlanPerksWithIcons } from '@/shared/data/planPerks.js'\nimport BaseButton from '@/shared/components/BaseButton.vue'\nimport axios from 'axios'\nimport FormErrors from '@/shared/components/forms/FormErrors.vue'\nimport LoadingCircle from '@/shared/components/LoadingCircle.vue'\nimport FormInput from '@/shared/components/forms/FormInput.vue'\nimport { calculateTeamInvoiceTotal } from '@/shared/utils/calculateTeamInvoiceTotal.js'\nimport { useCreateTeam } from '@/modules/growthmentor/team/composables/useCreateTeam.ts'\nimport { CouponCodeContext } from '@/modules/growthmentor/wizard/types/coupon-code-context.ts'\nimport { notify } from '@kyvg/vue3-notification'\nimport { TEAM_SEATS_OPTIONS_VALUES } from '@/shared/data/teamSeatsOptions.ts'\nimport { usePermissionSystem } from '@/shared/composables/usePermissionSystem.js'\nimport SubscriptionPlanBadge from '@/shared/components/SubscriptionPlanBadge.vue'\nimport { SUBSCRIPTION_TRIAL_INTERVAL } from '@/shared/data/permissionSystem'\n\nconst props = withDefaults(\n  defineProps<{\n    withCouponCodeSection?: boolean\n    withSubscriptionBenefits?: boolean\n    type: 'wizard' | 'unlock-full-access-modal'\n  }>(),\n  {\n    withCouponCodeSection: false,\n    withSubscriptionBenefits: false,\n  },\n)\n\nconst page = usePage()\nconst { isSubscriptionGroup, isSubscriptionTrialInterval } =\n  usePermissionSystem()\n\nconst canBuyPersonalSubscription = (planGroup: 'light' | 'pro') => {\n  // People on monthly trial can't buy light plan\n  if (\n    planGroup === 'light' &&\n    isSubscriptionTrialInterval(SUBSCRIPTION_TRIAL_INTERVAL.MONTHLY)\n  ) {\n    return false\n  }\n  return !isSubscriptionGroup(planGroup.toUpperCase())\n}\n\nconst currentBillingCycle = ref<'monthly' | 'quarterly' | 'annually'>(null)\nconst availableBillingCycles = computed(() => {\n  const billingCycles = [\n    ...personalPlans.value.map((plan) => plan.humanBillingInterval),\n    ...teamPlans.value.map((plan) => plan.humanBillingInterval),\n  ]\n  return [...new Set(billingCycles)]\n})\n\nconst redirectToRegisterPage = () => {\n  router.visit('/mentees/sign_up')\n}\n\nconst {\n  coupon,\n  couponCodeField,\n  applyCouponCode,\n  toggleCouponCodeInput,\n  clearCouponErrors,\n  discountedPersonalPlans,\n  discountedTeamPlans,\n} = inject<CouponCodeContext>('coupon')\n\nconst isPurchasingPersonalPlan = ref(false)\nconst personalPlans = computed(() => {\n  const plans = (\n    props.type === 'wizard'\n      ? page.props.plans\n      : page.props.unlockFullAccessModalData.plans\n  ) as {\n    id: number\n    name: string\n    interval: 'year' | 'month'\n    intervalCount: 1 | 3\n    group: 'light' | 'pro'\n    amount: number\n    amountPerMonth: { subtotal: number; total: number; tax: number }\n    discount?: number\n    savingAmount?: number\n  }[]\n  return plans.map((plan) => ({\n    ...plan,\n    humanBillingInterval: getHumanBillingInterval(\n      plan.interval,\n      plan.intervalCount,\n    ) as 'monthly' | 'quarterly' | 'annually',\n  }))\n})\nconst visiblePersonalPlans = computed(() => {\n  return personalPlans.value\n    .filter((plan) => plan.humanBillingInterval === currentBillingCycle.value)\n    .map((plan) => ({\n      ...plan,\n      discounted: discountedPersonalPlans.value.find(\n        (discountedPlan) => discountedPlan.id === plan.id,\n      ),\n      perks: getPlanPerksWithIcons(page.props.planPerks[plan.group]),\n    }))\n})\nconst startPersonalMembership = async (planId) => {\n  try {\n    isPurchasingPersonalPlan.value = true\n\n    const { data } = await axios.post(\n      page.props.openCheckoutSessionPath as string,\n      {\n        plan_id: planId,\n        success_path: page.props.successPath,\n        coupon_code: coupon.value.code,\n      },\n    )\n\n    const stripe = Stripe(page.props.stripePublicKey)\n    stripe.redirectToCheckout({ sessionId: data.checkout_session_stripe_id })\n  } catch (error) {\n    notify({\n      type: 'error',\n      text: 'An error occurred while starting your membership. Please try again.',\n    })\n  } finally {\n    isPurchasingPersonalPlan.value = false\n  }\n}\n\n// Teams\n\nconst {\n  form,\n  createTeam,\n  isLoading: isPurchasingTeamSubscription,\n} = useCreateTeam()\nconst teamPlans = computed(() => {\n  const plans = (\n    props.type === 'wizard'\n      ? page.props.teamPlans\n      : page.props.unlockFullAccessModalData.teamPlans\n  ) as {\n    id: number\n    name: string\n    interval: 'year' | 'month'\n    intervalCount: 1 | 3\n    amount: number\n    amountInDollars: number\n    mostPopular: boolean\n    minimumSeats: number\n    maximumSeats: number\n    old: boolean\n    tiers: { id: number; upTo: number; unitAmount: number; flatAmount: 0 }[]\n  }[]\n  return plans.map((plan) => ({\n    ...plan,\n    humanBillingInterval: getHumanBillingInterval(\n      plan.interval,\n      plan.intervalCount,\n    ) as 'monthly' | 'quarterly' | 'annually',\n  }))\n})\nconst visibleTeamPlan = computed(() => {\n  return teamPlans.value.find(\n    (plan) => plan.humanBillingInterval === currentBillingCycle.value,\n  )\n})\nconst visibleDiscountedTeamPlan = computed(() => {\n  return discountedTeamPlans.value.find(\n    (plan) => plan.id === visibleTeamPlan.value.id,\n  )\n})\nconst teamPerks = computed(() => {\n  return comparePlans(page.props.planPerks, 'team', 'pro')\n})\nconst invoiceTotalWithoutTax = computed(() => {\n  return calculateTeamInvoiceTotal(form.seats, visibleTeamPlan.value.tiers)\n})\nconst discountedInvoiceTotalWithoutTax = computed(() => {\n  return calculateTeamInvoiceTotal(\n    form.seats,\n    visibleDiscountedTeamPlan.value.tiers,\n  )\n})\nconst invoiceTotalWithoutTaxPerMonth = computed(() => {\n  const divider = {\n    monthly: 1,\n    quarterly: 3,\n    annually: 12,\n  }\n\n  return (\n    invoiceTotalWithoutTax.value /\n    divider[visibleTeamPlan.value.humanBillingInterval]\n  )\n})\nconst discountedInvoiceTotalWithoutTaxPerMonth = computed(() => {\n  const divider = {\n    monthly: 1,\n    quarterly: 3,\n    annually: 12,\n  }\n\n  return (\n    discountedInvoiceTotalWithoutTax.value /\n    divider[visibleTeamPlan.value.humanBillingInterval]\n  )\n})\nconst perSeatRateMonth = computed(() => {\n  return invoiceTotalWithoutTaxPerMonth.value / form.seats\n})\nconst discountedPerSeatRateMonth = computed(() => {\n  return discountedInvoiceTotalWithoutTaxPerMonth.value / form.seats\n})\nconst percentageSavePerUserComparedToPersonalPlan = computed(() => {\n  const proPlan = visiblePersonalPlans.value.find(\n    (plan) => plan.group === 'pro',\n  )\n  const personal = proPlan.discounted\n    ? proPlan.discounted.amountPerMonth.total\n    : proPlan.amountPerMonth.total\n  const team = visibleDiscountedTeamPlan.value\n    ? discountedPerSeatRateMonth.value\n    : perSeatRateMonth.value\n  return Math.round(((personal - team) / personal) * 100)\n})\n</script>\n","import { computed, ref } from 'vue'\nimport axios from 'axios'\nimport camelcaseKeys from 'camelcase-keys'\n\nexport type CouponCodeFormType = {\n  code: string\n  isInputShown: boolean\n  isLoading: boolean\n  errors: string\n  isValid: boolean\n  isLimitedTimeOffer: boolean\n}\n\nexport const useCouponCode = () => {\n  const coupon = ref<CouponCodeFormType>({\n    code: '',\n    isInputShown: false,\n    isLoading: false,\n    errors: '',\n    isValid: false,\n    isLimitedTimeOffer: false,\n  })\n\n  const couponCodeField = computed({\n    get: () => {\n      if (coupon.value.isLimitedTimeOffer) return ''\n      return coupon.value.code\n    },\n    set: (value: string) => {\n      coupon.value.code = value\n      coupon.value.isLimitedTimeOffer = false\n      coupon.value.errors = ''\n      coupon.value.isValid = false\n    },\n  })\n\n  const checkCouponCode = async (successCallback) => {\n    try {\n      coupon.value.isLoading = true\n      const { data } = await axios.get('/stripe/coupon_check', {\n        params: { coupon_code: coupon.value.code },\n      })\n\n      coupon.value.isValid = data.is_valid\n\n      if (!data.is_valid) {\n        return (coupon.value.errors = 'Invalid coupon code')\n      }\n\n      successCallback({\n        plans: camelcaseKeys(data.plans),\n        teamPlans: camelcaseKeys(data.teamPlans),\n      })\n    } catch (_) {\n      coupon.value.errors =\n        'Something went wrong while applying the coupon code. Please try again.'\n    } finally {\n      coupon.value.isLoading = false\n    }\n  }\n\n  const toggleCouponCodeInput = () => {\n    coupon.value.isInputShown = !coupon.value.isInputShown\n  }\n\n  const clearCouponErrors = () => {\n    coupon.value.errors = ''\n  }\n\n  return {\n    coupon,\n    couponCodeField,\n    checkCouponCode,\n    toggleCouponCodeInput,\n    clearCouponErrors,\n  }\n}\n"],"names":["_imports_0","BILLING_CYCLES","BILLING_CYCLES_PRIORITIES","props","__props","emit","__emit","sortedBillingCycles","computed","a","b","leftBillingCycle","rightBillingCycle","isToggleActive","ref","watch","newValue","onMounted","page","usePage","isSubscriptionGroup","isSubscriptionTrialInterval","usePermissionSystem","canBuyPersonalSubscription","planGroup","SUBSCRIPTION_TRIAL_INTERVAL","currentBillingCycle","availableBillingCycles","billingCycles","personalPlans","plan","teamPlans","redirectToRegisterPage","router","coupon","couponCodeField","applyCouponCode","toggleCouponCodeInput","clearCouponErrors","discountedPersonalPlans","discountedTeamPlans","inject","isPurchasingPersonalPlan","getHumanBillingInterval","visiblePersonalPlans","discountedPlan","getPlanPerksWithIcons","startPersonalMembership","planId","data","axios","notify","form","createTeam","isPurchasingTeamSubscription","useCreateTeam","visibleTeamPlan","visibleDiscountedTeamPlan","teamPerks","comparePlans","invoiceTotalWithoutTax","calculateTeamInvoiceTotal","discountedInvoiceTotalWithoutTax","invoiceTotalWithoutTaxPerMonth","divider","discountedInvoiceTotalWithoutTaxPerMonth","perSeatRateMonth","discountedPerSeatRateMonth","percentageSavePerUserComparedToPersonalPlan","proPlan","personal","team","useCouponCode","value","successCallback","camelcaseKeys"],"mappings":"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"}