{"version":3,"file":"PlatinumMembershipTier-B6OfnuwB.js","sources":["../../../app/javascript/vuecomponents/PaymentScheduleTier.vue","../../../app/javascript/vuecomponents/PlatinumMembershipTier.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport OzBadge, { OzBadgeColorScheme } from '@@/library/v4/components/OzBadge.vue'\nimport OzContainedButton, { OzContainedButtonColorScheme } from '@@/library/v4/components/OzContainedButton.vue'\nimport OzIcon from '@@/library/v4/components/OzIcon.vue'\nimport OzLoadingSpinner from '@@/library/v4/components/OzLoadingSpinner.vue'\nimport type { PlansState, UpgradeSource } from '@@/pinia/personal_plans_store'\nimport { PaymentSchedule, Tier } from '@@/pinia/personal_plans_store'\nimport { computed } from 'vue'\n\nconst emit = defineEmits(['upgrade'])\n\nconst props = withDefaults(\n  defineProps<{\n    plans: PlansState['plans']\n    isLoadingPlanInformation: boolean\n    tier: Tier\n    paymentSchedule: PaymentSchedule\n    upgradeSource: UpgradeSource | null\n    isExpanded: boolean\n    useTierColor?: boolean\n  }>(),\n  {\n    useTierColor: true,\n  },\n)\n\nconst buttonColorScheme = computed<OzContainedButtonColorScheme>(() => {\n  if (!props.useTierColor) {\n    return !props.isExpanded ? OzContainedButtonColorScheme.Secondary : OzContainedButtonColorScheme.Primary\n  }\n  if (props.tier === Tier.Gold) return OzContainedButtonColorScheme.Orange\n  return OzContainedButtonColorScheme.Green\n})\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'grid items-center',\n      !isExpanded && 'grid-cols-payment-schedule-grid gap-x-2 gap-y-0.5',\n      isExpanded && 'grid-cols-4',\n    ]\"\n  >\n    <div\n      class=\"flex items-center tablet-portrait:flex-col tablet-portrait:items-start order-1 tablet-portrait:col-span-2 grow ps-1 tablet-portrait:ps-0\"\n    >\n      <p class=\"text-heading-4 font-semibold\">\n        <template v-if=\"paymentSchedule === PaymentSchedule.Monthly\">{{ __('Pay monthly') }}</template>\n        <template v-if=\"paymentSchedule === PaymentSchedule.Annual\">{{ __('Pay annually') }}</template>\n      </p>\n\n      <template v-if=\"tier === Tier.Gold && paymentSchedule === PaymentSchedule.Annual && !isLoadingPlanInformation\">\n        <OzBadge\n          v-if=\"!isExpanded\"\n          :color-scheme=\"OzBadgeColorScheme.Selection\"\n          class=\"ms-2\"\n          :text=\"__('Save %{discountPercentage}%', { discountPercentage: plans.gold.annual.annual_savings_percentage })\"\n        ></OzBadge>\n        <p v-else class=\"text-body-small text-grape-500 dark:text-canary-500\">\n          {{ __('Save %{discountPercentage}%', { discountPercentage: plans.gold.annual.annual_savings_percentage }) }}\n        </p>\n      </template>\n\n      <template\n        v-else-if=\"tier === Tier.Platinum && paymentSchedule === PaymentSchedule.Annual && !isLoadingPlanInformation\"\n      >\n        <OzBadge\n          v-if=\"!isExpanded\"\n          :color-scheme=\"OzBadgeColorScheme.Selection\"\n          class=\"ms-2\"\n          :text=\"\n            __('Save %{discountPercentage}%', { discountPercentage: plans.platinum.annual.annual_savings_percentage })\n          \"\n        ></OzBadge>\n        <p v-else class=\"text-body-small text-grape-500 dark:text-canary-500\">\n          {{\n            __('Save %{discountPercentage}%', { discountPercentage: plans.platinum.annual.annual_savings_percentage })\n          }}\n        </p>\n      </template>\n    </div>\n\n    <div\n      class=\"order-3 tablet-portrait:order-2 flex tablet-portrait:flex-col justify-self-start items-baseline tablet-portrait:h-11 tablet-portrait:justify-center ps-1 tablet-portrait:ps-0\"\n    >\n      <div v-if=\"isLoadingPlanInformation\" class=\"ps-2 tablet-portrait:ps-4\">\n        <OzLoadingSpinner :size=\"24\" />\n      </div>\n      <template v-else>\n        <template v-if=\"paymentSchedule === PaymentSchedule.Monthly\">\n          <p class=\"text-body\">\n            <template v-if=\"tier === Tier.Gold\">{{ plans.gold.monthly.formattedPrice }}</template>\n            <template v-if=\"tier === Tier.Platinum\">{{ plans.platinum.monthly.formattedPrice }}</template>\n          </p>\n        </template>\n        <template v-if=\"paymentSchedule === PaymentSchedule.Annual\">\n          <p class=\"text-body\">\n            <template v-if=\"tier === Tier.Gold\">{{ plans.gold.annual.formattedPrice }}</template>\n            <template v-if=\"tier === Tier.Platinum\">{{ plans.platinum.annual.formattedPrice }}</template>\n          </p>\n        </template>\n      </template>\n    </div>\n    <div class=\"order-2 tablet-portrait:order-3 row-span-2 tablet-portrait:row-span-1 justify-self-end\">\n      <OzContainedButton\n        v-if=\"!isExpanded\"\n        key=\"icon-button\"\n        :aria-label=\"__('Continue')\"\n        :color-scheme=\"buttonColorScheme\"\n        :disabled=\"isLoadingPlanInformation\"\n        @click=\"emit('upgrade')\"\n      >\n        <template #icon><OzIcon name=\"chevron_right_center\" :size=\"16\" /></template>\n      </OzContainedButton>\n      <OzContainedButton\n        v-else\n        key=\"text-button\"\n        data-testid=\"continuePaymentButton\"\n        :color-scheme=\"buttonColorScheme\"\n        :disabled=\"isLoadingPlanInformation\"\n        :text=\"__('Continue')\"\n        @click=\"emit('upgrade')\"\n      />\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.grid-cols-payment-schedule-grid {\n  grid-template-columns: auto max-content;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { trackEvent } from '@@/bits/analytics'\nimport { __ } from '@@/bits/intl'\nimport OzBadge, { OzBadgeColorScheme } from '@@/library/v4/components/OzBadge.vue'\nimport OzBox, { OzBoxColors } from '@@/library/v4/components/OzBox.vue'\nimport OzContainedButton, {\n  OzContainedButtonColorScheme,\n  OzContainedButtonSizePreset,\n} from '@@/library/v4/components/OzContainedButton.vue'\nimport OzDivider, { OzDividerColorScheme, OzDividerOrientation } from '@@/library/v4/components/OzDivider.vue'\nimport OzIcon from '@@/library/v4/components/OzIcon.vue'\nimport OzLoadingSpinner from '@@/library/v4/components/OzLoadingSpinner.vue'\nimport OzMembershipTierGrid, { OzMembershipTierGridVariant } from '@@/library/v4/components/OzMembershipTierGrid.vue'\nimport { computed, ref } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    variant: Variant // defines which variant should be displayed\n    isExpanded: boolean // Determines whether the OzMembershipTierGrid component should be expanded or not.\n    isWhiteboard: boolean\n    advertisedWhiteboardFrameQuota: number\n    isLoadingPlanInformation: boolean // Determines whether the plan information is being loaded or not.\n    monthlyPrice?: string // The plan's monthly price.\n    annualPrice: string // The plan's annual price.\n    advertisedFileSizeQuota: string // The maximum upload file size allowed in this Tier.\n    isLoadingAdvertisedQuotas: boolean // Whether Advertised Quotas have been fetched.\n    xChecked?: boolean // Determines whether to show the checkmark next to the tier name or not.\n    isUserLoggedIn?: boolean // Whether the user is logged in or not. Used by the \"SignUp\" variant.\n    annualSavingsPercentage?: number | null // The annual savings percentage for the Platinum tier.\n  }>(),\n  {\n    xChecked: false,\n    isUserLoggedIn: undefined,\n    monthlyPrice: undefined,\n    annualSavingsPercentage: null,\n  },\n)\n\ndefineEmits(['upgrade', 'continue', 'upgrade-monthly', 'upgrade-annual'])\n\nconst xPaymentSchedules = ref<boolean>(false)\n\nconst colorScheme = computed<OzBoxColors | null>(() => {\n  if (\n    props.variant === Variant.Upgrade ||\n    props.variant === Variant.UpgradeSingleStep ||\n    props.variant === Variant.Loading ||\n    props.variant === Variant.Continue\n  )\n    return OzBoxColors.Green\n  return null\n})\n\nconst showPaymentSchedules = (): void => {\n  trackEvent('Billing', 'Chose Platinum plan', null, null, null)\n  xPaymentSchedules.value = true\n}\n</script>\n\n<script lang=\"ts\">\nexport enum Variant {\n  Upgrade,\n  UpgradeSingleStep,\n  Loading,\n  Continue,\n  SignUp,\n}\n\nexport default {}\n</script>\n\n<template>\n  <OzBox :color=\"colorScheme\">\n    <OzMembershipTierGrid\n      :is-expanded=\"isExpanded\"\n      :class=\"[isExpanded && 'min-h-13', !isExpanded && 'min-h-25']\"\n      :variant=\"\n        variant === Variant.UpgradeSingleStep\n          ? OzMembershipTierGridVariant.SingleStep\n          : OzMembershipTierGridVariant.Default\n      \"\n    >\n      <template #first>\n        <div class=\"flex items-center\" :class=\"[!isExpanded && 'ps-1']\">\n          <p class=\"text-heading-3 font-semibold\">{{ __('Platinum') }}</p>\n          <OzIcon\n            v-if=\"xChecked\"\n            :size=\"16\"\n            class=\"text-grape-500 dark:text-canary-500 ms-2\"\n            name=\"checkmark_thicker\"\n          />\n        </div>\n      </template>\n      <template #second>\n        <div v-if=\"isLoadingAdvertisedQuotas\" :class=\"[isExpanded && 'ms-4', !isExpanded && 'ms-2']\">\n          <OzLoadingSpinner :size=\"24\" />\n        </div>\n        <div v-else class=\"text-body-posts\" :class=\"[!isExpanded && 'ps-1']\">\n          <p>{{ __('Unlimited padlets') }}</p>\n\n          <slot name=\"secondaryBenefitText\">\n            <p v-if=\"isWhiteboard\">\n              {{ __('%{frameLimit} card limit', { frameLimit: advertisedWhiteboardFrameQuota }) }}\n            </p>\n            <p>\n              {{\n                __('%{fileSizeLimit}MB /upload', {\n                  fileSizeLimit: advertisedFileSizeQuota,\n                })\n              }}\n            </p>\n          </slot>\n        </div>\n      </template>\n      <template #third>\n        <div :class=\"[isExpanded && 'pe-0', !isExpanded && 'pe-1']\">\n          <div v-if=\"isLoadingPlanInformation\" :class=\"[isExpanded && 'ms-4', !isExpanded && 'me-2']\">\n            <OzLoadingSpinner :size=\"24\" />\n          </div>\n          <div v-else :class=\"['text-body-posts', isExpanded && 'text-start', !isExpanded && 'text-end']\">\n            <p v-if=\"monthlyPrice\">{{ __('%{amount} /month', { amount: monthlyPrice }) }}</p>\n            <p>{{ __('%{amount} /year', { amount: annualPrice }) }}</p>\n            <template v-if=\"monthlyPrice && annualSavingsPercentage\">\n              <OzBadge\n                v-if=\"isExpanded\"\n                :color-scheme=\"OzBadgeColorScheme.SelectionInverse\"\n                :text=\"__('Save %{discountPercentage}%', { discountPercentage: annualSavingsPercentage })\"\n                class=\"w-fit\"\n              />\n              <p v-else class=\"text-body-small text-grape-500 dark:text-canary-500\">\n                {{ __('Save %{discountPercentage}%', { discountPercentage: annualSavingsPercentage }) }}\n              </p>\n            </template>\n          </div>\n        </div>\n      </template>\n      <template #fourth>\n        <div v-if=\"variant === Variant.Loading\" :class=\"[isExpanded && 'pe-4', !isExpanded && 'pe-2']\">\n          <OzLoadingSpinner :size=\"24\" />\n        </div>\n        <div v-if=\"variant === Variant.UpgradeSingleStep\" class=\"flex max-w-41\">\n          <OzContainedButton\n            v-if=\"!xPaymentSchedules\"\n            :color-scheme=\"OzContainedButtonColorScheme.Green\"\n            :size-preset=\"isExpanded ? OzContainedButtonSizePreset.H40px : OzContainedButtonSizePreset.H32px\"\n            :text=\"__('Upgrade')\"\n            @click=\"showPaymentSchedules\"\n          />\n          <template v-else>\n            <OzContainedButton\n              class=\"!rounded-e-none min-w-0\"\n              :color-scheme=\"OzContainedButtonColorScheme.Green\"\n              :size-preset=\"OzContainedButtonSizePreset.H32px\"\n              :text=\"__('Monthly')\"\n              @click=\"$emit('upgrade-monthly')\"\n            />\n            <OzDivider\n              class=\"shrink-0\"\n              :color-scheme=\"OzDividerColorScheme.Translucent\"\n              :orientation=\"OzDividerOrientation.Vertical\"\n            />\n            <OzContainedButton\n              class=\"!rounded-s-none min-w-0\"\n              :color-scheme=\"OzContainedButtonColorScheme.Green\"\n              :size-preset=\"OzContainedButtonSizePreset.H32px\"\n              :text=\"__('Annual')\"\n              @click=\"$emit('upgrade-annual')\"\n            />\n          </template>\n        </div>\n        <OzContainedButton\n          v-if=\"variant === Variant.Upgrade\"\n          :color-scheme=\"OzContainedButtonColorScheme.Green\"\n          :size-preset=\"isExpanded ? OzContainedButtonSizePreset.H40px : OzContainedButtonSizePreset.H32px\"\n          :text=\"__('Upgrade')\"\n          @click=\"$emit('upgrade')\"\n        />\n        <OzContainedButton\n          v-if=\"variant === Variant.SignUp\"\n          :size-preset=\"isExpanded ? OzContainedButtonSizePreset.H40px : OzContainedButtonSizePreset.H32px\"\n          :text=\"isUserLoggedIn ? __('Go to billing') : __('Sign up')\"\n          :href=\"isUserLoggedIn ? '/dashboard/settings/billing' : '/auth/signup'\"\n        />\n        <OzContainedButton\n          v-if=\"variant === Variant.Continue\"\n          :color-scheme=\"OzContainedButtonColorScheme.Green\"\n          :size-preset=\"isExpanded ? OzContainedButtonSizePreset.H40px : OzContainedButtonSizePreset.H32px\"\n          :text=\"__('Continue')\"\n          @click=\"$emit('continue')\"\n        />\n      </template>\n    </OzMembershipTierGrid>\n  </OzBox>\n</template>\n"],"names":["buttonColorScheme","computed","props","useTierColor","tier","Tier","Gold","OzContainedButtonColorScheme","Orange","Green","isExpanded","Primary","Secondary","Variant","Variant2","__default__","xPaymentSchedules","ref","colorScheme","variant","OzBoxColors","showPaymentSchedules","trackEvent","value"],"mappings":"suCA0BMA,EAAoBC,EAAuC,IAC1DC,EAAMC,aAGPD,EAAME,OAASC,EAAKC,KAAaC,EAA6BC,OAC3DD,EAA6BE,MAH1BP,EAAMQ,WAAsDH,EAA6BI,QAAtEJ,EAA6BK,SAI3D,i0GC4BWC,GAAAA,IACVA,EAAAC,EAAA,QAAA,CAAA,EAAA,UACAD,EAAAC,EAAA,kBAAA,CAAA,EAAA,oBACAD,EAAAC,EAAA,QAAA,CAAA,EAAA,UACAD,EAAAC,EAAA,SAAA,CAAA,EAAA,WACAD,EAAAC,EAAA,OAAA,CAAA,EAAA,SALUD,IAAAA,GAAA,CAAA,CAAA,EAQZ,MAAAE,EAAe,CAAA,kgBA5BTC,EAAoBC,EAAa,EAAK,EAEtCC,EAAcjB,EAA6B,IAE7CC,EAAMiB,UAAY,GAClBjB,EAAMiB,UAAY,GAClBjB,EAAMiB,UAAY,GAClBjB,EAAMiB,UAAY,EAEXC,EAAYX,MACd,IACR,2FAE4BY,IAAY,CACvCC,EAAW,UAAW,sBAAuB,KAAM,KAAM,IAAI,EAC7DN,EAAkBO,MAAQ"}