{"version":3,"file":"MembershipTierUpgradeModal-875de834.js","sources":["../../../app/javascript/vuecomponents/SilverMembershipTier.vue","../../../app/javascript/vuecomponents/MembershipTierUpgradeModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { __ } from '@@/bits/intl'\nimport { numberToHumanSize } from '@@/bits/numbers_helper'\nimport { FileSizeUnit } from '@@/bits/units'\nimport type { LibraryType } from '@@/enums'\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\ndefineEmits(['upgrade', 'continue', 'upgrade-monthly', 'upgrade-annual'])\n\nconst props = withDefaults(\n  defineProps<{\n    variant: Variant\n    type?: Type // Determines whether the tier is a \"Personal\" tier or a \"Library\" tier.\n    libraryType?: LibraryType | null // Type of Library. Ignored if type is \"Personal\".\n    isExpanded: boolean\n    isWhiteboard: boolean\n    monthlyPrice?: string\n    annualPrice?: string\n    isLoadingPlanInformation: boolean\n    isLoadingAdvertisedQuotas: boolean\n    advertisedWhiteboardFrameQuota: number\n    advertisedFileSizeQuota: string // The maximum upload file size allowed in this Tier.\n    advertisedFileSizeQuotaUnit?: FileSizeUnit // The unit of the maximum upload file size allowed in this Tier.\n    advertisedWallsQuota?: number // The maximum amount of walls allowed in this Tier.\n    wallsUsed?: number // Number of walls used by the user/library. Used for quota variants.\n    fileSize?: number // File size to display if the variant is \"FileSize\".\n    isUserLoggedIn?: boolean // Whether the user is logged in or not. Used by the \"SignUp\" variant.\n    continueUrl?: string // The URL to redirect in the \"StartFreeTrial\" variant.\n    xChecked?: boolean // Determines whether to show the checkmark next to the tier name or not.\n    colorScheme?: OzBoxColors // Allow parent to override color scheme\n  }>(),\n  {\n    type: Type.Personal,\n    libraryType: null,\n    monthlyPrice: undefined,\n    annualPrice: undefined,\n    advertisedFileSizeQuotaUnit: FileSizeUnit.MB,\n    advertisedWallsQuota: undefined,\n    wallsUsed: undefined,\n    fileSize: undefined,\n    isUserLoggedIn: undefined,\n    continueUrl: undefined,\n    xChecked: false,\n    colorScheme: undefined,\n  },\n)\n\nconst xPaymentSchedules = ref<boolean>(false)\n\nconst isPadletQuotaOrFileSizeVariant = computed<boolean>(\n  () =>\n    props.variant === Variant.AtFrameQuota ||\n    props.variant === Variant.UnderPadletQuota ||\n    props.variant === Variant.AtPadletQuota ||\n    props.variant === Variant.OverPadletQuota ||\n    props.variant === Variant.FileSize,\n)\n\nconst colorScheme = computed<OzBoxColors | null>(() => {\n  if (props.colorScheme) return props.colorScheme\n  if (isPadletQuotaOrFileSizeVariant.value) return OzBoxColors.Secondary\n  if (\n    props.variant === Variant.Upgrade ||\n    props.variant === Variant.UpgradeSingleStep ||\n    props.variant === Variant.Continue ||\n    props.variant === Variant.StartFreeTrial\n  )\n    return OzBoxColors.Highlight\n  return null\n})\n</script>\n\n<script lang=\"ts\">\nexport enum Type {\n  Personal,\n  Library,\n}\n\nexport enum Variant {\n  UnderFrameQuota,\n  AtFrameQuota,\n  OverFrameQuota,\n  Upgrade,\n  UpgradeSingleStep,\n  UnderPadletQuota,\n  AtPadletQuota,\n  OverPadletQuota,\n  FileSize,\n  SignUp,\n  Continue,\n  StartFreeTrial,\n}\n\nexport default {}\n</script>\n\n<template>\n  <OzBox :color=\"colorScheme\">\n    <OzMembershipTierGrid\n      :class=\"[\n        colorScheme === OzBoxColors.Secondary\n          ? 'text-dark-text-300 dark:text-light-text-300'\n          : 'text-dark-text-100 dark:text-light-text-100',\n      ]\"\n      :is-expanded=\"isExpanded\"\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\">\n            {{ __('Silver') }}\n          </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>{{ __('%{wallQuota} padlets', { wallQuota: advertisedWallsQuota }) }}</p>\n\n          <slot name=\"secondaryBenefitText\">\n            <p v-if=\"isWhiteboard\">\n              {{ __('%{frameLimit} card limit', { frameLimit: advertisedWhiteboardFrameQuota }) }}\n            </p>\n            <p v-else>\n              {{\n                advertisedFileSizeQuotaUnit === FileSizeUnit.MB\n                  ? __('%{fileSizeLimit}MB /upload', {\n                      fileSizeLimit: advertisedFileSizeQuota,\n                    })\n                  : __('%{fileSizeLimit}GB /upload', {\n                      fileSizeLimit: advertisedFileSizeQuota,\n                    })\n              }}\n            </p>\n          </slot>\n        </div>\n      </template>\n      <template #third>\n        <div :class=\"[isExpanded && 'pe-0 flex items-center', !isExpanded && 'pe-1', 'min-h-13']\">\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 v-if=\"annualPrice\">{{ __('%{amount} /year', { amount: annualPrice }) }}</p>\n          </div>\n        </div>\n      </template>\n      <template #fourth>\n        <slot name=\"endContent\">\n          <div v-if=\"type === Type.Personal && variant === Variant.UpgradeSingleStep\" class=\"flex max-w-41\">\n            <OzContainedButton\n              v-if=\"!xPaymentSchedules\"\n              :color-scheme=\"OzContainedButtonColorScheme.Orange\"\n              :size-preset=\"isExpanded ? OzContainedButtonSizePreset.H40px : OzContainedButtonSizePreset.H32px\"\n              :text=\"__('Upgrade')\"\n              data-testid=\"upgradeSilverMembershipButton\"\n              @click=\"xPaymentSchedules = true\"\n            />\n            <template v-else>\n              <OzContainedButton\n                class=\"!rounded-e-none min-w-0\"\n                :color-scheme=\"OzContainedButtonColorScheme.Orange\"\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.Orange\"\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.Orange\"\n            :size-preset=\"isExpanded ? OzContainedButtonSizePreset.H40px : OzContainedButtonSizePreset.H32px\"\n            :text=\"__('Upgrade')\"\n            data-testid=\"upgradeSilverMembershipButton\"\n            @click=\"$emit('upgrade')\"\n          />\n          <div\n            v-if=\"variant === Variant.AtFrameQuota\"\n            :class=\"['text-end text-body-small', isExpanded && 'pe-2', !isExpanded && 'pe-1']\"\n          >\n            <p class=\"font-semibold\">{{ __('At card limit') }}</p>\n          </div>\n          <div\n            v-if=\"variant === Variant.UnderPadletQuota\"\n            :class=\"['text-end text-body-small', isExpanded && 'pe-2', !isExpanded && 'pe-1']\"\n          >\n            <p>{{ __('%{wallsUsed} padlets made', { wallsUsed }) }}</p>\n            <p class=\"font-semibold\">{{ __('under limit') }}</p>\n          </div>\n          <div\n            v-if=\"variant === Variant.AtPadletQuota\"\n            :class=\"['text-end text-body-small', isExpanded && 'pe-2', !isExpanded && 'pe-1']\"\n          >\n            <p>{{ __('%{wallsUsed} padlets made', { wallsUsed }) }}</p>\n            <p class=\"font-semibold\">{{ __('at limit') }}</p>\n          </div>\n          <div\n            v-if=\"variant === Variant.OverPadletQuota\"\n            :class=\"['text-end text-body-small', isExpanded && 'pe-2', !isExpanded && 'pe-1']\"\n          >\n            <p>{{ __('%{wallsUsed} padlets made', { wallsUsed }) }}</p>\n            <p class=\"font-semibold\">{{ __('over limit') }}</p>\n          </div>\n          <div\n            v-if=\"variant === Variant.FileSize\"\n            :class=\"['text-end text-body-small', isExpanded && 'pe-2', !isExpanded && 'pe-1']\"\n          >\n            <p>{{ __('%{fileSize} file', { fileSize: numberToHumanSize(fileSize) }) }}</p>\n            <p class=\"font-semibold\">{{ __('exceeds limit') }}</p>\n          </div>\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.Orange\"\n            :size-preset=\"isExpanded ? OzContainedButtonSizePreset.H40px : OzContainedButtonSizePreset.H32px\"\n            :text=\"__('Continue')\"\n            @click=\"$emit('continue')\"\n          />\n          <OzContainedButton\n            v-if=\"variant === Variant.StartFreeTrial\"\n            :color-scheme=\"OzContainedButtonColorScheme.Orange\"\n            :size-preset=\"isExpanded ? OzContainedButtonSizePreset.H40px : OzContainedButtonSizePreset.H32px\"\n            :text=\"__('Start free trial')\"\n            :href=\"continueUrl\"\n          />\n        </slot>\n      </template>\n    </OzMembershipTierGrid>\n  </OzBox>\n</template>\n","<script setup lang=\"ts\">\nimport { getPrettyCurrentDate } from '@@/bits/date'\nimport { isAppUsing } from '@@/bits/flip'\nimport { __ } from '@@/bits/intl'\nimport { currentUrl, transformCurrentUrl } from '@@/bits/location'\nimport { PricingPlansExperimentVariant } from '@@/enums'\nimport OzBox, { OzBoxColors } from '@@/library/v4/components/OzBox.vue'\nimport OzCloseButton from '@@/library/v4/components/OzCloseButton.vue'\nimport OzContainedButton, {\n  OzContainedButtonColorScheme,\n  OzContainedButtonSizePreset,\n} from '@@/library/v4/components/OzContainedButton.vue'\nimport OzDivider, { OzDividerColorScheme } from '@@/library/v4/components/OzDivider.vue'\nimport OzIndeterminateSpinner from '@@/library/v4/components/OzIndeterminateSpinner.vue'\nimport OzScreenSizeAwareCenterModal from '@@/library/v4/components/OzScreenSizeAwareCenterModal.vue'\nimport {\n  UpgradeModalCopyAExperimentVariant,\n  UpgradeModalSingleStepExperimentVariant,\n  useExperimentsStore,\n} from '@@/pinia/experiments'\nimport { PaymentSchedule, Tier, UpgradeSource, UpgradeStep, usePersonalPlansStore } from '@@/pinia/personal_plans_store'\nimport { useWindowSizeStore } from '@@/pinia/window_size'\nimport { type User } from '@@/types'\nimport BillingCollectionItems from '@@/vuecomponents/BillingCollectionItems.vue'\nimport DashboardSettingsBillingModalTitle from '@@/vuecomponents/DashboardSettingsBillingModalTitle.vue'\nimport GoldMembershipTier, { Variant as GoldMembershipTierVariant } from '@@/vuecomponents/GoldMembershipTier.vue'\nimport MembershipTierActionButton from '@@/vuecomponents/MembershipTierActionButton.vue'\nimport NeonMembershipTier, { Variant as NeonMembershipTierVariant } from '@@/vuecomponents/NeonMembershipTier.vue'\nimport PaymentScheduleTier from '@@/vuecomponents/PaymentScheduleTier.vue'\nimport PlatinumMembershipTier, {\n  Variant as PlatinumMembershipTierVariant,\n} from '@@/vuecomponents/PlatinumMembershipTier.vue'\nimport SilverMembershipTier, { Variant as SilverMembershipTierVariant } from '@@/vuecomponents/SilverMembershipTier.vue'\nimport { storeToRefs } from 'pinia'\nimport { computed, ref } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    user: User\n    whiteboardFramesUsed?: number\n    fileThatExceededSize?: File\n  }>(),\n  {\n    whiteboardFramesUsed: undefined,\n    fileThatExceededSize: undefined,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'cancel'): void\n  (e: 'request-another-free-padlet'): void\n}>()\n\nconst currentDate = getPrettyCurrentDate()\n\nconst { isSmallerThanTabletPortrait, windowHeight } = storeToRefs(useWindowSizeStore())\n\nconst personalPlansStore = usePersonalPlansStore()\nconst {\n  displayedEstimatedUpgradeCost,\n  displayedPrices,\n  displayedQuotas,\n  isProcessingUpgrade,\n  plans,\n  plansFetched,\n  advertisedQuotas,\n  isLoadingAdvertisedQuotas,\n  upgradeStep,\n  upgradeError,\n  upgradeSource,\n  hasUserTriggeredUpgrade,\n  estimatedCancellationRefundAmount,\n  isLoadingCancellationRefundInformation,\n} = storeToRefs(personalPlansStore)\nconst {\n  upgradeToGold,\n  upgradeToGoldDifferentCurrency,\n  upgradeToPlatinum,\n  upgradeToPlatinumDifferentCurrency,\n  showPlanUpgradeToGoldModal,\n  showUpgradeToPlatinumModalCheckingScheduledChanges,\n  handleUpgrade,\n} = personalPlansStore\n\nconst experimentsStore = useExperimentsStore()\nconst { upgradeModalCopyAExperimentVariant, upgradeModalSingleStepExperimentVariant } = storeToRefs(experimentsStore)\n\nconst xFrameLimitInsteadOfFileLimit = computed(() => upgradeStep.value === UpgradeStep.ChooseTierFrameQuota)\n\nconst currentPlanFrameLimit = computed(() => {\n  switch (props.user.membership_tier) {\n    case 'neon':\n      return advertisedQuotas.value.neon.max_whiteboard_frames\n    case 'silver':\n      return advertisedQuotas.value.silver.max_whiteboard_frames\n    case 'gold':\n      return advertisedQuotas.value.gold.max_whiteboard_frames\n    case 'platinum':\n      return advertisedQuotas.value.platinum.max_whiteboard_frames\n    default:\n      return 0\n  }\n})\n\nconst padletQuotaNeonMembershipTierVariant = computed((): NeonMembershipTierVariant => {\n  if (\n    xFrameLimitInsteadOfFileLimit.value &&\n    props.whiteboardFramesUsed &&\n    advertisedQuotas.value.neon.max_whiteboard_frames\n  ) {\n    if (props.whiteboardFramesUsed > advertisedQuotas.value.neon.max_whiteboard_frames)\n      return NeonMembershipTierVariant.OverFrameQuota\n    if (props.whiteboardFramesUsed === advertisedQuotas.value.neon.max_whiteboard_frames)\n      return NeonMembershipTierVariant.AtFrameQuota\n    return NeonMembershipTierVariant.UnderFrameQuota\n  }\n\n  if (props.user.quota.walls_used > advertisedQuotas.value.neon.max_walls!)\n    return NeonMembershipTierVariant.OverPadletQuota\n  if (props.user.quota.walls_used === advertisedQuotas.value.neon.max_walls)\n    return NeonMembershipTierVariant.AtPadletQuota\n  return NeonMembershipTierVariant.UnderPadletQuota\n})\n\nconst padletQuotaSilverMembershipTierVariant = computed((): SilverMembershipTierVariant => {\n  if (\n    xFrameLimitInsteadOfFileLimit.value &&\n    props.whiteboardFramesUsed &&\n    advertisedQuotas.value.silver.max_whiteboard_frames\n  ) {\n    if (props.user.membership_tier === 'silver') {\n      if (props.whiteboardFramesUsed > advertisedQuotas.value.silver.max_whiteboard_frames)\n        return SilverMembershipTierVariant.OverFrameQuota\n      if (props.whiteboardFramesUsed === advertisedQuotas.value.silver.max_whiteboard_frames)\n        return SilverMembershipTierVariant.AtFrameQuota\n      return SilverMembershipTierVariant.UnderFrameQuota\n    }\n\n    if (props.whiteboardFramesUsed > advertisedQuotas.value.silver.max_whiteboard_frames) {\n      return SilverMembershipTierVariant.OverFrameQuota\n    }\n    return SilverMembershipTierVariant.Upgrade\n  }\n\n  if (props.user.membership_tier === 'silver') {\n    if (props.user.quota.walls_used > advertisedQuotas.value.silver.max_walls!)\n      return SilverMembershipTierVariant.OverPadletQuota\n    if (props.user.quota.walls_used === advertisedQuotas.value.silver.max_walls)\n      return SilverMembershipTierVariant.AtPadletQuota\n    return SilverMembershipTierVariant.UnderPadletQuota\n  }\n  if (props.user.quota.walls_used > 10) return SilverMembershipTierVariant.OverPadletQuota\n  if (\n    xPlatinumMonthlyPrice.value &&\n    upgradeModalSingleStepExperimentVariant.value === UpgradeModalSingleStepExperimentVariant.Variation\n  )\n    return SilverMembershipTierVariant.UpgradeSingleStep\n  return SilverMembershipTierVariant.Upgrade\n})\n\nconst padletQuotaGoldMembershipTierVariant = computed((): GoldMembershipTierVariant => {\n  if (\n    xFrameLimitInsteadOfFileLimit.value &&\n    props.whiteboardFramesUsed &&\n    advertisedQuotas.value.gold.max_whiteboard_frames\n  ) {\n    if (props.user.membership_tier === 'gold') {\n      if (props.whiteboardFramesUsed > advertisedQuotas.value.gold.max_whiteboard_frames)\n        return GoldMembershipTierVariant.OverFrameQuota\n      if (props.whiteboardFramesUsed === advertisedQuotas.value.gold.max_whiteboard_frames)\n        return GoldMembershipTierVariant.AtFrameQuota\n      return GoldMembershipTierVariant.UnderFrameQuota\n    }\n\n    if (props.whiteboardFramesUsed > advertisedQuotas.value.gold.max_whiteboard_frames) {\n      return GoldMembershipTierVariant.OverFrameQuota\n    }\n    return GoldMembershipTierVariant.Upgrade\n  }\n\n  if (props.user.membership_tier === 'gold') {\n    if (props.user.quota.walls_used > advertisedQuotas.value.gold.max_walls!)\n      return GoldMembershipTierVariant.OverPadletQuota\n    if (props.user.quota.walls_used === advertisedQuotas.value.gold.max_walls)\n      return GoldMembershipTierVariant.AtPadletQuota\n    return GoldMembershipTierVariant.UnderPadletQuota\n  }\n  if (props.user.quota.walls_used > 20) return GoldMembershipTierVariant.OverPadletQuota\n  if (\n    xPlatinumMonthlyPrice.value &&\n    upgradeModalSingleStepExperimentVariant.value === UpgradeModalSingleStepExperimentVariant.Variation\n  )\n    return GoldMembershipTierVariant.UpgradeSingleStep\n  return GoldMembershipTierVariant.Upgrade\n})\n\nconst platinumMembershipTierVariant = computed((): PlatinumMembershipTierVariant => {\n  // We don't need to handle whiteboard because we don't allow the modal to be shown for whiteboards at/over the platinum limit\n\n  if (hasUserTriggeredUpgrade.value) return PlatinumMembershipTierVariant.Loading\n  if (\n    xPlatinumMonthlyPrice.value &&\n    upgradeModalSingleStepExperimentVariant.value === UpgradeModalSingleStepExperimentVariant.Variation &&\n    props.user.membership_tier === 'neon'\n  )\n    return PlatinumMembershipTierVariant.UpgradeSingleStep\n  return PlatinumMembershipTierVariant.Upgrade\n})\n\nconst fileSizeQuotaSilverMembershipTierVariant = computed((): SilverMembershipTierVariant => {\n  if (\n    props.user.membership_tier === 'silver' ||\n    sizeOfFileOverQuota.value > advertisedQuotas.value.silver.max_upload_megabytes! * 1000000\n  )\n    return SilverMembershipTierVariant.FileSize\n  if (\n    xPlatinumMonthlyPrice.value &&\n    upgradeModalSingleStepExperimentVariant.value === UpgradeModalSingleStepExperimentVariant.Variation\n  )\n    return SilverMembershipTierVariant.UpgradeSingleStep\n  return SilverMembershipTierVariant.Upgrade\n})\n\nconst fileSizeQuotaGoldMembershipTierVariant = computed((): GoldMembershipTierVariant => {\n  if (\n    props.user.membership_tier === 'gold' ||\n    sizeOfFileOverQuota.value > advertisedQuotas.value.gold.max_upload_megabytes! * 1000000\n  )\n    return GoldMembershipTierVariant.FileSize\n  if (\n    xPlatinumMonthlyPrice.value &&\n    upgradeModalSingleStepExperimentVariant.value === UpgradeModalSingleStepExperimentVariant.Variation\n  )\n    return GoldMembershipTierVariant.UpgradeSingleStep\n  return GoldMembershipTierVariant.Upgrade\n})\n\nconst sizeOfFileOverQuota = computed(() => {\n  return props.fileThatExceededSize ? props.fileThatExceededSize.size : 0\n})\n\nconst membershipConfirmationPageUrl = computed((): string => {\n  return transformCurrentUrl({}, { path: '/memberships/confirmation', search: { next: currentUrl() } })\n})\n\nconst chooseTierPadletQuotaTitle = computed((): string => {\n  if (\n    upgradeSource.value === UpgradeSource.UntrashWallQuota ||\n    upgradeSource.value === UpgradeSource.UnarchiveWallQuota\n  ) {\n    return __(\"You've reached your padlet quota limit.\")\n  }\n\n  return __('We see you flying. Maybe it’s time to soar?')\n})\n\nconst chooseTierPadletQuotaSubtitle = computed((): string => {\n  if (upgradeSource.value === UpgradeSource.UntrashWallQuota) {\n    return __('Upgrade to restore this padlet.')\n  }\n  if (upgradeSource.value === UpgradeSource.UnarchiveWallQuota) {\n    return __('Upgrade to unarchive this padlet.')\n  }\n  return __('Upgrade your membership to continue making padlets.')\n})\n\nconst xGoldMonthlyPrice = computed((): boolean => {\n  if (!isAppUsing('personalPricingPlansExperiment')) {\n    return true\n  }\n  // Show gold monthly plan when variant is 'platinum_only' or 'control'\n  if (props.user.personal_pricing_plan_variant === PricingPlansExperimentVariant.AnnualOnly) {\n    return false\n  }\n  return true\n})\n\nconst xPlatinumMonthlyPrice = computed((): boolean => {\n  // Show platinum monthly plan when variant is 'platinum_only' or 'control'\n  if (\n    (isAppUsing('personalPricingPlansExperiment') &&\n      props.user.personal_pricing_plan_variant === PricingPlansExperimentVariant.AnnualOnly) ||\n    (isAppUsing('personalPricingPlansExperimentV2') &&\n      props.user.personal_pricing_plan_variant === PricingPlansExperimentVariant.PlatinumSilverAnnualOnly)\n  ) {\n    return false\n  }\n  return true\n})\n\nconst xGoldPlans = computed((): boolean => {\n  // Show gold plans when variant is 'annual_only' or 'control'\n  if (\n    (isAppUsing('personalPricingPlansExperiment') &&\n      props.user.personal_pricing_plan_variant === PricingPlansExperimentVariant.PlatinumOnly) ||\n    (isAppUsing('personalPricingPlansExperimentV2') &&\n      props.user.personal_pricing_plan_variant === PricingPlansExperimentVariant.PlatinumSilverAnnualOnly)\n  ) {\n    return false\n  }\n  return true\n})\n\nconst xSilverPlans = computed((): boolean => {\n  // Show silver plans when variant is 'platinum_silver_annual_only'\n  if (!isAppUsing('personalPricingPlansExperimentV2')) {\n    return false\n  }\n  return props.user.personal_pricing_plan_variant === PricingPlansExperimentVariant.PlatinumSilverAnnualOnly\n})\n\n// #region video recorder quotas\nfunction formatVideoLengthQuota(seconds: number | null): string {\n  if (seconds == null) return ''\n  const minutes = Math.floor(seconds / 60)\n  const remainingSeconds = seconds % 60\n\n  if (minutes > 0 && remainingSeconds > 0) {\n    return __('%{minutes} minute %{remainingSeconds} second videos', {\n      minutes,\n      remainingSeconds,\n    })\n  } else if (minutes > 0) {\n    // Note: as of sept 2024, this should be the only case that gets called, since all max video length quotas can be represented in whole minutes.\n    return __('%{minutes} minute videos', {\n      minutes,\n    })\n  } else {\n    return __('%{remainingSeconds} second videos', {\n      remainingSeconds,\n    })\n  }\n}\n\nconst displayedVideoLengthQuotas = computed(() => {\n  return {\n    neon: formatVideoLengthQuota(advertisedQuotas.value.neon.max_video_length_seconds),\n    gold: formatVideoLengthQuota(advertisedQuotas.value.gold.max_video_length_seconds),\n    silver: formatVideoLengthQuota(advertisedQuotas.value.silver.max_video_length_seconds),\n    platinum: formatVideoLengthQuota(advertisedQuotas.value.platinum.max_video_length_seconds),\n  }\n})\n// #endregion\n\nfunction initiateUpgradeToGold() {\n  if (props.user.membership_tier == null) return\n\n  if (!xGoldMonthlyPrice.value) {\n    handleUpgrade({\n      paymentSchedule: PaymentSchedule.Annual,\n      tier: Tier.Gold,\n      postCheckoutRedirectUrl: membershipConfirmationPageUrl.value,\n    })\n    return\n  }\n\n  showPlanUpgradeToGoldModal({ upgradeSource: null })\n}\n\nfunction initiateUpgradeToSilver() {\n  handleUpgrade({\n    paymentSchedule: PaymentSchedule.Annual,\n    tier: Tier.Silver,\n    postCheckoutRedirectUrl: membershipConfirmationPageUrl.value,\n  })\n}\n\nfunction initiateUpgradeToPlatinum() {\n  if (props.user.membership_tier == null) return\n  if (!xPlatinumMonthlyPrice.value && props.user.membership_tier === 'neon') {\n    handleUpgrade({\n      paymentSchedule: PaymentSchedule.Annual,\n      tier: Tier.Platinum,\n      postCheckoutRedirectUrl: membershipConfirmationPageUrl.value,\n    })\n    return\n  }\n\n  showUpgradeToPlatinumModalCheckingScheduledChanges({\n    membershipTier: props.user.membership_tier,\n    paymentSchedule: props.user.period ?? undefined,\n  })\n}\n\n// Every method that confirms an upgrade has the same call signature\n// This function handles input validation before calling such a method.\nfunction confirmUpgrade(upgradeFn: (payload: { paymentSchedule: string }) => void) {\n  if (props.user.period == null) return\n\n  upgradeFn({ paymentSchedule: props.user.period })\n}\n\nconst hasRequestedAnotherFreePadlet = ref(false)\n\nconst xGetAnotherFreePadletButton = computed((): boolean => {\n  if (props.user.tenant_id !== 1) return false\n  if (!props.user.quota?.can_make) return false\n  if (hasRequestedAnotherFreePadlet.value) return false\n  if (\n    props.user.membership_tier === 'neon' &&\n    (props.user.quota.walls_used === 3 || props.user.quota.walls_used === 4)\n  ) {\n    return true\n  }\n  if (\n    props.user.membership_tier === 'gold' &&\n    (props.user.quota.walls_used === 20 || props.user.quota.walls_used === 21)\n  ) {\n    return true\n  }\n  return false\n})\n\nfunction getAnotherFreePadlet(): void {\n  hasRequestedAnotherFreePadlet.value = true\n  emit('request-another-free-padlet')\n}\n\nfunction getTierSelectionTitleFromExperiment(defaultTitle: string): string {\n  if (xFrameLimitInsteadOfFileLimit.value) {\n    return __('You’ve hit your limit of %{currentPlanFrameLimit} cards.', {\n      currentPlanFrameLimit: currentPlanFrameLimit.value,\n    })\n  }\n\n  return upgradeModalCopyAExperimentVariant.value === UpgradeModalCopyAExperimentVariant.Control\n    ? defaultTitle\n    : __('Upgrade and join 3.5 million paying users.')\n}\n\nfunction getTierSelectionSubtitleFromExperiment(defaultTitle: string): string {\n  if (xFrameLimitInsteadOfFileLimit.value) {\n    return __('Upgrade your membership to add more.')\n  }\n\n  return upgradeModalCopyAExperimentVariant.value === UpgradeModalCopyAExperimentVariant.Control\n    ? defaultTitle\n    : __('Cancel anytime with our flexible refund policy.')\n}\n</script>\n\n<template>\n  <OzScreenSizeAwareCenterModal\n    :is-draggable-drawer=\"false\"\n    :is-phone=\"isSmallerThanTabletPortrait\"\n    :window-height=\"windowHeight\"\n    :x-scrim=\"true\"\n    @scrim-click=\"\n      isProcessingUpgrade ||\n      isLoadingCancellationRefundInformation ||\n      hasUserTriggeredUpgrade ||\n      upgradeStep === UpgradeStep.EstimatePlatinumCost ||\n      upgradeStep === UpgradeStep.EstimateUpgradePlatinumPlanCost ||\n      upgradeStep === UpgradeStep.EstimateUpgradeGoldPlanCost\n        ? null\n        : $emit('cancel')\n    \"\n    @scrim-esc=\"\n      isProcessingUpgrade ||\n      isLoadingCancellationRefundInformation ||\n      hasUserTriggeredUpgrade ||\n      upgradeStep === UpgradeStep.EstimatePlatinumCost ||\n      upgradeStep === UpgradeStep.EstimateUpgradePlatinumPlanCost ||\n      upgradeStep === UpgradeStep.EstimateUpgradeGoldPlanCost\n        ? null\n        : $emit('cancel')\n    \"\n  >\n    <template #body>\n      <div class=\"p-4\" data-testid=\"membershipTierUpgradeModal\">\n        <!-- Show tiers -->\n        <template v-if=\"upgradeStep === UpgradeStep.ChooseTier || upgradeStep === UpgradeStep.ChooseTierFrameQuota\">\n          <OzCloseButton :disabled=\"hasUserTriggeredUpgrade\" @click=\"$emit('cancel')\" />\n          <DashboardSettingsBillingModalTitle\n            :title=\"getTierSelectionTitleFromExperiment(__('We see you flying. Maybe it’s time to soar?'))\"\n            :subtitle=\"getTierSelectionSubtitleFromExperiment(__('Upgrade to get the most out of Padlet.'))\"\n          />\n          <div class=\"tablet-portrait:mx-2 mb-4 tablet-portrait:mb-6\">\n            <OzContainedButton\n              v-if=\"xGetAnotherFreePadletButton\"\n              :text=\"__('Get another free padlet')\"\n              :color-scheme=\"OzContainedButtonColorScheme.Secondary\"\n              :size-preset=\"OzContainedButtonSizePreset.H40px\"\n              class=\"mb-4 tablet-portrait:mb-5\"\n              @click=\"getAnotherFreePadlet\"\n            />\n            <PlatinumMembershipTier\n              class=\"mb-4 tablet-portrait:mb-3 p-4 tablet-portrait:py-3 tablet-portrait:px-6\"\n              :is-expanded=\"!isSmallerThanTabletPortrait\"\n              :variant=\"platinumMembershipTierVariant\"\n              :is-loading-plan-information=\"!plansFetched\"\n              :monthly-price=\"xPlatinumMonthlyPrice ? displayedPrices.platinum.monthly : ''\"\n              :annual-price=\"displayedPrices.platinum.annual\"\n              :advertised-file-size-quota=\"displayedQuotas.platinum.max_upload_megabytes\"\n              :is-loading-advertised-quotas=\"isLoadingAdvertisedQuotas\"\n              :is-whiteboard=\"xFrameLimitInsteadOfFileLimit\"\n              :advertised-whiteboard-frame-quota=\"displayedQuotas.platinum.max_whiteboard_frames\"\n              :annual-savings-percentage=\"\n                isAppUsing('higherMonthlyPricingPlans')\n                  ? personalPlansStore.getAnnualSavingsPercentageForTier('platinum')\n                  : undefined\n              \"\n              @upgrade=\"initiateUpgradeToPlatinum\"\n              @upgrade-monthly=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Monthly,\n                  tier: Tier.Platinum,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n              @upgrade-annual=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Annual,\n                  tier: Tier.Platinum,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n            />\n            <GoldMembershipTier\n              v-if=\"xGoldPlans\"\n              class=\"mb-4 tablet-portrait:mb-3 p-4 tablet-portrait:py-3 tablet-portrait:px-6\"\n              :is-expanded=\"!isSmallerThanTabletPortrait\"\n              :walls-used=\"user.quota.walls_used\"\n              :whiteboard_frames_used=\"whiteboardFramesUsed\"\n              :x-checked=\"user.membership_tier === 'gold'\"\n              :variant=\"padletQuotaGoldMembershipTierVariant\"\n              :is-loading-plan-information=\"!plansFetched\"\n              :monthly-price=\"xGoldMonthlyPrice ? displayedPrices.gold.monthly : ''\"\n              :annual-price=\"displayedPrices.gold.annual\"\n              :advertised-walls-quota=\"displayedQuotas.gold.max_walls\"\n              :advertised-file-size-quota=\"displayedQuotas.gold.max_upload_megabytes\"\n              :is-loading-advertised-quotas=\"isLoadingAdvertisedQuotas\"\n              :is-whiteboard=\"xFrameLimitInsteadOfFileLimit\"\n              :whiteboard-frames-used=\"whiteboardFramesUsed\"\n              :advertised-whiteboard-frame-quota=\"displayedQuotas.gold.max_whiteboard_frames\"\n              :annual-savings-percentage=\"\n                isAppUsing('higherMonthlyPricingPlans')\n                  ? personalPlansStore.getAnnualSavingsPercentageForTier('gold')\n                  : undefined\n              \"\n              @upgrade=\"initiateUpgradeToGold\"\n              @upgrade-monthly=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Monthly,\n                  tier: Tier.Gold,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n              @upgrade-annual=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Annual,\n                  tier: Tier.Gold,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n            />\n            <SilverMembershipTier\n              v-if=\"xSilverPlans\"\n              class=\"mb-4 tablet-portrait:mb-3 p-4 tablet-portrait:py-3 tablet-portrait:px-6\"\n              :is-expanded=\"!isSmallerThanTabletPortrait\"\n              :walls-used=\"user.quota.walls_used\"\n              :whiteboard_frames_used=\"whiteboardFramesUsed\"\n              :x-checked=\"user.membership_tier === 'silver'\"\n              :variant=\"padletQuotaSilverMembershipTierVariant\"\n              :is-loading-plan-information=\"!plansFetched\"\n              :annual-price=\"displayedPrices.silver.annual\"\n              :advertised-walls-quota=\"displayedQuotas.silver.max_walls\"\n              :advertised-file-size-quota=\"displayedQuotas.silver.max_upload_megabytes\"\n              :is-loading-advertised-quotas=\"isLoadingAdvertisedQuotas\"\n              :is-whiteboard=\"xFrameLimitInsteadOfFileLimit\"\n              :whiteboard-frames-used=\"whiteboardFramesUsed\"\n              :advertised-whiteboard-frame-quota=\"displayedQuotas.silver.max_whiteboard_frames\"\n              @upgrade=\"initiateUpgradeToSilver\"\n              @upgrade-monthly=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Monthly,\n                  tier: Tier.Silver,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n              @upgrade-annual=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Annual,\n                  tier: Tier.Silver,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n            />\n            <NeonMembershipTier\n              class=\"p-4 tablet-portrait:py-3 tablet-portrait:px-6\"\n              :is-expanded=\"!isSmallerThanTabletPortrait\"\n              :walls-used=\"user.quota.walls_used\"\n              :whiteboard_frames_used=\"whiteboardFramesUsed\"\n              :x-checked=\"user.membership_tier === 'neon'\"\n              :variant=\"padletQuotaNeonMembershipTierVariant\"\n              :is-loading-plan-information=\"!plansFetched\"\n              :advertised-walls-quota=\"displayedQuotas.neon.max_walls\"\n              :advertised-file-size-quota=\"displayedQuotas.neon.max_upload_megabytes\"\n              :is-whiteboard=\"xFrameLimitInsteadOfFileLimit\"\n              :whiteboard-frames-used=\"whiteboardFramesUsed\"\n              :advertised-whiteboard-frame-quota=\"displayedQuotas.neon.max_whiteboard_frames\"\n              :is-loading-advertised-quotas=\"isLoadingAdvertisedQuotas\"\n            />\n          </div>\n        </template>\n        <!-- Show tiers when over padlet quota -->\n        <template v-else-if=\"upgradeStep === UpgradeStep.ChooseTierPadletQuota\">\n          <OzCloseButton :disabled=\"hasUserTriggeredUpgrade\" @click=\"$emit('cancel')\" />\n          <DashboardSettingsBillingModalTitle\n            :title=\"getTierSelectionTitleFromExperiment(chooseTierPadletQuotaTitle)\"\n            :subtitle=\"getTierSelectionSubtitleFromExperiment(chooseTierPadletQuotaSubtitle)\"\n          />\n          <div class=\"tablet-portrait:mx-2 mb-4 tablet-portrait:mb-6\">\n            <OzContainedButton\n              v-if=\"xGetAnotherFreePadletButton\"\n              :text=\"__('Get another free padlet')\"\n              :color-scheme=\"OzContainedButtonColorScheme.Secondary\"\n              :size-preset=\"OzContainedButtonSizePreset.H40px\"\n              class=\"mb-4 tablet-portrait:mb-5\"\n              @click=\"getAnotherFreePadlet\"\n            />\n            <PlatinumMembershipTier\n              class=\"mb-4 tablet-portrait:mb-3 p-4 tablet-portrait:py-3 tablet-portrait:px-6\"\n              :is-expanded=\"!isSmallerThanTabletPortrait\"\n              :variant=\"platinumMembershipTierVariant\"\n              :is-loading-plan-information=\"!plansFetched\"\n              :monthly-price=\"xPlatinumMonthlyPrice ? displayedPrices.platinum.monthly : ''\"\n              :annual-price=\"displayedPrices.platinum.annual\"\n              :advertised-file-size-quota=\"displayedQuotas.platinum.max_upload_megabytes\"\n              :is-loading-advertised-quotas=\"isLoadingAdvertisedQuotas\"\n              :is-whiteboard=\"xFrameLimitInsteadOfFileLimit\"\n              :advertised-whiteboard-frame-quota=\"displayedQuotas.platinum.max_whiteboard_frames\"\n              :annual-savings-percentage=\"\n                isAppUsing('higherMonthlyPricingPlans')\n                  ? personalPlansStore.getAnnualSavingsPercentageForTier('platinum')\n                  : undefined\n              \"\n              @upgrade=\"initiateUpgradeToPlatinum\"\n              @upgrade-monthly=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Monthly,\n                  tier: Tier.Platinum,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n              @upgrade-annual=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Annual,\n                  tier: Tier.Platinum,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n            />\n            <GoldMembershipTier\n              v-if=\"xGoldPlans\"\n              class=\"mb-4 tablet-portrait:mb-3 p-4 tablet-portrait:py-3 tablet-portrait:px-6\"\n              :is-expanded=\"!isSmallerThanTabletPortrait\"\n              :walls-used=\"user.quota.walls_used\"\n              :whiteboard_frames_used=\"whiteboardFramesUsed\"\n              :x-checked=\"user.membership_tier === 'gold'\"\n              :variant=\"padletQuotaGoldMembershipTierVariant\"\n              :is-loading-plan-information=\"!plansFetched\"\n              :monthly-price=\"xGoldMonthlyPrice ? displayedPrices.gold.monthly : ''\"\n              :annual-price=\"displayedPrices.gold.annual\"\n              :advertised-walls-quota=\"displayedQuotas.gold.max_walls\"\n              :advertised-file-size-quota=\"displayedQuotas.gold.max_upload_megabytes\"\n              :is-loading-advertised-quotas=\"isLoadingAdvertisedQuotas\"\n              :is-whiteboard=\"xFrameLimitInsteadOfFileLimit\"\n              :whiteboard-frames-used=\"whiteboardFramesUsed\"\n              :advertised-whiteboard-frame-quota=\"displayedQuotas.gold.max_whiteboard_frames\"\n              :annual-savings-percentage=\"\n                isAppUsing('higherMonthlyPricingPlans')\n                  ? personalPlansStore.getAnnualSavingsPercentageForTier('gold')\n                  : undefined\n              \"\n              @upgrade=\"initiateUpgradeToGold\"\n              @upgrade-monthly=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Monthly,\n                  tier: Tier.Gold,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n              @upgrade-annual=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Annual,\n                  tier: Tier.Gold,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n            />\n            <SilverMembershipTier\n              v-if=\"xSilverPlans\"\n              class=\"mb-4 tablet-portrait:mb-3 p-4 tablet-portrait:py-3 tablet-portrait:px-6\"\n              :is-expanded=\"!isSmallerThanTabletPortrait\"\n              :walls-used=\"user.quota.walls_used\"\n              :whiteboard_frames_used=\"whiteboardFramesUsed\"\n              :x-checked=\"user.membership_tier === 'silver'\"\n              :variant=\"padletQuotaSilverMembershipTierVariant\"\n              :is-loading-plan-information=\"!plansFetched\"\n              :annual-price=\"displayedPrices.silver.annual\"\n              :advertised-walls-quota=\"displayedQuotas.silver.max_walls\"\n              :advertised-file-size-quota=\"displayedQuotas.silver.max_upload_megabytes\"\n              :is-loading-advertised-quotas=\"isLoadingAdvertisedQuotas\"\n              :is-whiteboard=\"xFrameLimitInsteadOfFileLimit\"\n              :whiteboard-frames-used=\"whiteboardFramesUsed\"\n              :advertised-whiteboard-frame-quota=\"displayedQuotas.silver.max_whiteboard_frames\"\n              @upgrade=\"initiateUpgradeToSilver\"\n              @upgrade-monthly=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Monthly,\n                  tier: Tier.Silver,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n              @upgrade-annual=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Annual,\n                  tier: Tier.Silver,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n            />\n            <NeonMembershipTier\n              class=\"p-4 tablet-portrait:py-3 tablet-portrait:px-6\"\n              :is-expanded=\"!isSmallerThanTabletPortrait\"\n              :walls-used=\"user.quota.walls_used\"\n              :whiteboard_frames_used=\"whiteboardFramesUsed\"\n              :x-checked=\"user.membership_tier === 'neon'\"\n              :variant=\"padletQuotaNeonMembershipTierVariant\"\n              :is-loading-plan-information=\"!plansFetched\"\n              :advertised-walls-quota=\"displayedQuotas.neon.max_walls\"\n              :advertised-file-size-quota=\"displayedQuotas.neon.max_upload_megabytes\"\n              :is-whiteboard=\"xFrameLimitInsteadOfFileLimit\"\n              :whiteboard-frames-used=\"whiteboardFramesUsed\"\n              :advertised-whiteboard-frame-quota=\"displayedQuotas.neon.max_whiteboard_frames\"\n              :is-loading-advertised-quotas=\"isLoadingAdvertisedQuotas\"\n            />\n          </div>\n        </template>\n        <!-- Show tiers when over file size quota -->\n        <template v-else-if=\"upgradeStep === UpgradeStep.ChooseTierFileSizeQuota\">\n          <OzCloseButton :disabled=\"hasUserTriggeredUpgrade\" @click=\"$emit('cancel')\" />\n          <DashboardSettingsBillingModalTitle\n            :title=\"getTierSelectionTitleFromExperiment(__('We see you flying. Maybe it’s time to soar?'))\"\n            :subtitle=\"getTierSelectionSubtitleFromExperiment(__('Upgrade your membership to upload bigger files.'))\"\n          />\n          <div class=\"tablet-portrait:mx-2 mb-4 tablet-portrait:mb-2\">\n            <OzContainedButton\n              v-if=\"xGetAnotherFreePadletButton\"\n              :text=\"__('Get another free padlet')\"\n              :color-scheme=\"OzContainedButtonColorScheme.Secondary\"\n              :size-preset=\"OzContainedButtonSizePreset.H40px\"\n              class=\"mb-4 tablet-portrait:mb-5\"\n              @click=\"getAnotherFreePadlet\"\n            />\n            <PlatinumMembershipTier\n              class=\"mb-4 tablet-portrait:mb-3 p-4 tablet-portrait:py-3 tablet-portrait:px-6\"\n              :is-expanded=\"!isSmallerThanTabletPortrait\"\n              :variant=\"platinumMembershipTierVariant\"\n              :is-loading-plan-information=\"!plansFetched\"\n              :monthly-price=\"xPlatinumMonthlyPrice ? displayedPrices.platinum.monthly : ''\"\n              :annual-price=\"displayedPrices.platinum.annual\"\n              :advertised-file-size-quota=\"displayedQuotas.platinum.max_upload_megabytes\"\n              :is-loading-advertised-quotas=\"isLoadingAdvertisedQuotas\"\n              :is-whiteboard=\"xFrameLimitInsteadOfFileLimit\"\n              :advertised-whiteboard-frame-quota=\"displayedQuotas.platinum.max_whiteboard_frames\"\n              :annual-savings-percentage=\"\n                isAppUsing('higherMonthlyPricingPlans')\n                  ? personalPlansStore.getAnnualSavingsPercentageForTier('platinum')\n                  : undefined\n              \"\n              @upgrade=\"initiateUpgradeToPlatinum\"\n              @upgrade-monthly=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Monthly,\n                  tier: Tier.Platinum,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n              @upgrade-annual=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Annual,\n                  tier: Tier.Platinum,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n            />\n            <GoldMembershipTier\n              v-if=\"xGoldPlans\"\n              class=\"mb-4 tablet-portrait:mb-3 p-4 tablet-portrait:py-3 tablet-portrait:px-6\"\n              :is-expanded=\"!isSmallerThanTabletPortrait\"\n              :walls-used=\"user.quota.walls_used\"\n              :x-checked=\"user.membership_tier === 'gold'\"\n              :variant=\"fileSizeQuotaGoldMembershipTierVariant\"\n              :file-size=\"sizeOfFileOverQuota\"\n              :is-loading-plan-information=\"!plansFetched\"\n              :monthly-price=\"xGoldMonthlyPrice ? displayedPrices.gold.monthly : ''\"\n              :annual-price=\"displayedPrices.gold.annual\"\n              :advertised-walls-quota=\"displayedQuotas.gold.max_walls\"\n              :advertised-file-size-quota=\"displayedQuotas.gold.max_upload_megabytes\"\n              :is-loading-advertised-quotas=\"isLoadingAdvertisedQuotas\"\n              :is-whiteboard=\"xFrameLimitInsteadOfFileLimit\"\n              :whiteboard-frames-used=\"whiteboardFramesUsed\"\n              :advertised-whiteboard-frame-quota=\"displayedQuotas.gold.max_whiteboard_frames\"\n              :annual-savings-percentage=\"\n                isAppUsing('higherMonthlyPricingPlans')\n                  ? personalPlansStore.getAnnualSavingsPercentageForTier('gold')\n                  : undefined\n              \"\n              @upgrade=\"initiateUpgradeToGold\"\n              @upgrade-monthly=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Monthly,\n                  tier: Tier.Gold,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n              @upgrade-annual=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Annual,\n                  tier: Tier.Gold,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n            />\n            <SilverMembershipTier\n              v-if=\"xSilverPlans\"\n              class=\"mb-4 tablet-portrait:mb-3 p-4 tablet-portrait:py-3 tablet-portrait:px-6\"\n              :is-expanded=\"!isSmallerThanTabletPortrait\"\n              :walls-used=\"user.quota.walls_used\"\n              :x-checked=\"user.membership_tier === 'silver'\"\n              :variant=\"fileSizeQuotaSilverMembershipTierVariant\"\n              :is-loading-plan-information=\"!plansFetched\"\n              :annual-price=\"displayedPrices.silver.annual\"\n              :advertised-walls-quota=\"displayedQuotas.silver.max_walls\"\n              :advertised-file-size-quota=\"displayedQuotas.silver.max_upload_megabytes\"\n              :is-loading-advertised-quotas=\"isLoadingAdvertisedQuotas\"\n              :is-whiteboard=\"xFrameLimitInsteadOfFileLimit\"\n              :whiteboard-frames-used=\"whiteboardFramesUsed\"\n              :advertised-whiteboard-frame-quota=\"displayedQuotas.silver.max_whiteboard_frames\"\n              @upgrade=\"initiateUpgradeToSilver\"\n              @upgrade-monthly=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Monthly,\n                  tier: Tier.Silver,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n              @upgrade-annual=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Annual,\n                  tier: Tier.Silver,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n            />\n            <NeonMembershipTier\n              class=\"p-4 tablet-portrait:py-3 tablet-portrait:px-6\"\n              :is-expanded=\"!isSmallerThanTabletPortrait\"\n              :walls-used=\"user.quota.walls_used\"\n              :x-checked=\"user.membership_tier === 'neon'\"\n              :variant=\"NeonMembershipTierVariant.FileSize\"\n              :file-size=\"sizeOfFileOverQuota\"\n              :is-loading-plan-information=\"!plansFetched\"\n              :advertised-walls-quota=\"displayedQuotas.neon.max_walls\"\n              :advertised-file-size-quota=\"displayedQuotas.neon.max_upload_megabytes\"\n              :is-whiteboard=\"xFrameLimitInsteadOfFileLimit\"\n              :whiteboard-frames-used=\"whiteboardFramesUsed\"\n              :advertised-whiteboard-frame-quota=\"displayedQuotas.neon.max_whiteboard_frames\"\n              :is-loading-advertised-quotas=\"isLoadingAdvertisedQuotas\"\n            />\n          </div>\n        </template>\n        <!-- Show tiers when user wants to upgrade to record longer videos -->\n        <template v-else-if=\"upgradeStep === UpgradeStep.ChooseTierVideoRecorderQuota\">\n          <OzCloseButton\n            :disabled=\"hasUserTriggeredUpgrade\"\n            data-testid=\"membershipTierUpgradeModalCloseButton\"\n            @click=\"$emit('cancel')\"\n          />\n          <DashboardSettingsBillingModalTitle\n            :title=\"__('We love that you love video.')\"\n            :subtitle=\"__('Upgrade to record longer videos.')\"\n          />\n          <div class=\"tablet-portrait:mx-2 mb-4 tablet-portrait:mb-2\">\n            <PlatinumMembershipTier\n              class=\"mb-4 tablet-portrait:mb-3 p-4 tablet-portrait:py-3 tablet-portrait:px-6\"\n              :is-expanded=\"!isSmallerThanTabletPortrait\"\n              :variant=\"PlatinumMembershipTierVariant.Upgrade\"\n              :is-loading-plan-information=\"!plansFetched\"\n              :monthly-price=\"xPlatinumMonthlyPrice ? displayedPrices.platinum.monthly : ''\"\n              :annual-price=\"displayedPrices.platinum.annual\"\n              :advertised-file-size-quota=\"displayedQuotas.platinum.max_upload_megabytes\"\n              :is-loading-advertised-quotas=\"isLoadingAdvertisedQuotas\"\n              :is-whiteboard=\"xFrameLimitInsteadOfFileLimit\"\n              :advertised-whiteboard-frame-quota=\"displayedQuotas.platinum.max_whiteboard_frames\"\n              :annual-savings-percentage=\"\n                isAppUsing('higherMonthlyPricingPlans')\n                  ? personalPlansStore.getAnnualSavingsPercentageForTier('platinum')\n                  : undefined\n              \"\n              @upgrade=\"initiateUpgradeToPlatinum\"\n              @upgrade-monthly=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Monthly,\n                  tier: Tier.Platinum,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n              @upgrade-annual=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Annual,\n                  tier: Tier.Platinum,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n            >\n              <template #secondaryBenefitText>\n                <p>{{ displayedVideoLengthQuotas.platinum }}</p>\n              </template>\n            </PlatinumMembershipTier>\n            <GoldMembershipTier\n              v-if=\"xGoldPlans\"\n              class=\"mb-4 tablet-portrait:mb-3 p-4 tablet-portrait:py-3 tablet-portrait:px-6\"\n              :is-expanded=\"!isSmallerThanTabletPortrait\"\n              :variant=\"GoldMembershipTierVariant.Upgrade\"\n              :color-scheme=\"user.membership_tier === 'gold' ? OzBoxColors.Secondary : undefined\"\n              :x-checked=\"user.membership_tier === 'gold'\"\n              :is-loading-plan-information=\"!plansFetched\"\n              :monthly-price=\"xGoldMonthlyPrice ? displayedPrices.gold.monthly : ''\"\n              :annual-price=\"displayedPrices.gold.annual\"\n              :advertised-walls-quota=\"displayedQuotas.gold.max_walls\"\n              :advertised-file-size-quota=\"displayedQuotas.gold.max_upload_megabytes\"\n              :is-loading-advertised-quotas=\"isLoadingAdvertisedQuotas\"\n              :is-whiteboard=\"xFrameLimitInsteadOfFileLimit\"\n              :whiteboard-frames-used=\"whiteboardFramesUsed\"\n              :advertised-whiteboard-frame-quota=\"displayedQuotas.gold.max_whiteboard_frames\"\n              :annual-savings-percentage=\"\n                isAppUsing('higherMonthlyPricingPlans')\n                  ? personalPlansStore.getAnnualSavingsPercentageForTier('gold')\n                  : undefined\n              \"\n              @upgrade=\"initiateUpgradeToGold\"\n              @upgrade-monthly=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Monthly,\n                  tier: Tier.Gold,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n              @upgrade-annual=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Annual,\n                  tier: Tier.Gold,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n            >\n              <template #secondaryBenefitText>\n                <p>{{ displayedVideoLengthQuotas.gold }}</p>\n              </template>\n\n              <!-- If user is already on gold plan, just show a \"current plan\" text -->\n              <template v-if=\"user.membership_tier === 'gold'\" #endContent>\n                <p\n                  :class=\"[\n                    'text-end text-body-small font-semibold',\n                    !isSmallerThanTabletPortrait && 'pe-2',\n                    isSmallerThanTabletPortrait && 'pe-1',\n                  ]\"\n                >\n                  {{ __('Current plan') }}\n                </p>\n              </template>\n            </GoldMembershipTier>\n            <!-- Sept 2024: new users will not see silver anymore; however we need to show this to users who had seen or upgraded to the silver plan before -->\n            <SilverMembershipTier\n              v-if=\"xSilverPlans\"\n              class=\"mb-4 tablet-portrait:mb-3 p-4 tablet-portrait:py-3 tablet-portrait:px-6\"\n              :is-expanded=\"!isSmallerThanTabletPortrait\"\n              :variant=\"SilverMembershipTierVariant.Upgrade\"\n              :x-checked=\"user.membership_tier === 'silver'\"\n              :is-whiteboard=\"xFrameLimitInsteadOfFileLimit\"\n              :is-loading-plan-information=\"!plansFetched\"\n              :is-loading-advertised-quotas=\"isLoadingAdvertisedQuotas\"\n              :advertised-whiteboard-frame-quota=\"displayedQuotas.silver.max_whiteboard_frames\"\n              :advertised-file-size-quota=\"displayedQuotas.silver.max_upload_megabytes\"\n              :advertised-walls-quota=\"displayedQuotas.silver.max_walls\"\n              :annual-price=\"displayedPrices.silver.annual\"\n              :color-scheme=\"user.membership_tier === 'silver' ? OzBoxColors.Secondary : undefined\"\n              @upgrade=\"initiateUpgradeToSilver\"\n              @upgrade-monthly=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Monthly,\n                  tier: Tier.Silver,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n              @upgrade-annual=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Annual,\n                  tier: Tier.Silver,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n            >\n              <template #secondaryBenefitText>\n                <p>{{ displayedVideoLengthQuotas.silver }}</p>\n              </template>\n\n              <!-- If user is already on silver plan, just show a \"current plan\" text -->\n              <template v-if=\"user.membership_tier === 'silver'\" #endContent>\n                <p\n                  :class=\"[\n                    'text-end text-body-small font-semibold',\n                    !isSmallerThanTabletPortrait && 'pe-2',\n                    isSmallerThanTabletPortrait && 'pe-1',\n                  ]\"\n                >\n                  {{ __('Current plan') }}\n                </p>\n              </template>\n            </SilverMembershipTier>\n            <NeonMembershipTier\n              v-if=\"user.membership_tier === 'neon'\"\n              class=\"p-4 tablet-portrait:py-3 tablet-portrait:px-6\"\n              :variant=\"NeonMembershipTierVariant.Default\"\n              :is-whiteboard=\"xFrameLimitInsteadOfFileLimit\"\n              :is-expanded=\"!isSmallerThanTabletPortrait\"\n              :is-loading-plan-information=\"!plansFetched\"\n              :is-loading-advertised-quotas=\"isLoadingAdvertisedQuotas\"\n              :advertised-walls-quota=\"displayedQuotas.neon.max_walls\"\n              :advertised-file-size-quota=\"displayedQuotas.neon.max_upload_megabytes\"\n              :advertised-whiteboard-frame-quota=\"displayedQuotas.neon.max_whiteboard_frames\"\n              :walls-used=\"user.quota.walls_used\"\n              :x-checked=\"user.membership_tier === 'neon'\"\n              :color-scheme=\"user.membership_tier === 'neon' ? OzBoxColors.Secondary : undefined\"\n            >\n              <template #secondaryBenefitText>\n                <p>{{ displayedVideoLengthQuotas.neon }}</p>\n              </template>\n\n              <!-- If user is already on neon plan, just show a \"current plan\" text -->\n              <template v-if=\"user.membership_tier === 'neon'\" #endContent>\n                <p\n                  :class=\"[\n                    'text-end text-body-small font-semibold',\n                    !isSmallerThanTabletPortrait && 'pe-2',\n                    isSmallerThanTabletPortrait && 'pe-1',\n                  ]\"\n                >\n                  {{ __('Current plan') }}\n                </p>\n              </template>\n            </NeonMembershipTier>\n          </div>\n        </template>\n        <!-- Show Gold payment schedules -->\n        <template v-else-if=\"upgradeStep === UpgradeStep.ScheduleGold\">\n          <OzCloseButton @click=\"$emit('cancel')\" />\n          <DashboardSettingsBillingModalTitle :title=\"__('Upgrade to Gold')\" :subtitle=\"__('Choose payment plan')\" />\n          <OzBox class=\"mb-4 py-1 tablet-portrait:mx-2 tablet-portrait:mb-6\" :color=\"OzBoxColors.Secondary\">\n            <PaymentScheduleTier\n              class=\"px-4 py-3 tablet-portrait:px-6\"\n              :tier=\"Tier.Gold\"\n              :payment-schedule=\"PaymentSchedule.Monthly\"\n              :use-tier-color=\"false\"\n              :upgrade-source=\"upgradeSource\"\n              :plans=\"plans\"\n              :is-loading-plan-information=\"!plansFetched\"\n              :is-expanded=\"!isSmallerThanTabletPortrait\"\n              @upgrade=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Monthly,\n                  tier: Tier.Gold,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n            />\n            <OzDivider\n              :color-scheme=\"OzDividerColorScheme.Solid\"\n              class=\"mx-4 tablet-portrait:ms-5 tablet-portrait:me-6\"\n            />\n            <PaymentScheduleTier\n              class=\"px-4 py-3 tablet-portrait:px-6\"\n              :tier=\"Tier.Gold\"\n              :payment-schedule=\"PaymentSchedule.Annual\"\n              :use-tier-color=\"false\"\n              :upgrade-source=\"upgradeSource\"\n              :plans=\"plans\"\n              :is-loading-plan-information=\"!plansFetched\"\n              :is-expanded=\"!isSmallerThanTabletPortrait\"\n              @upgrade=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Annual,\n                  tier: Tier.Gold,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n            />\n          </OzBox>\n          <p\n            class=\"mb-4 px-1 tablet-portrait:mb-2 tablet-portrait:px-4 text-body-extra-small text-dark-text-200 dark:text-light-text-200\"\n          >\n            {{ __('*Subscription auto-renews at the end of the payment period. You can cancel at any time.') }}\n          </p>\n        </template>\n        <!-- Show Platinum payment schedules -->\n        <template v-else-if=\"upgradeStep === UpgradeStep.SchedulePlatinum\">\n          <OzCloseButton @click=\"$emit('cancel')\" />\n          <DashboardSettingsBillingModalTitle\n            :title=\"__('Upgrade to Platinum')\"\n            :subtitle=\"__('Choose payment plan')\"\n          />\n          <OzBox class=\"mb-4 py-1 tablet-portrait:mx-2 tablet-portrait:mb-6\" :color=\"OzBoxColors.Secondary\">\n            <PaymentScheduleTier\n              class=\"px-4 py-3 tablet-portrait:px-6\"\n              :tier=\"Tier.Platinum\"\n              :payment-schedule=\"PaymentSchedule.Monthly\"\n              :use-tier-color=\"false\"\n              :upgrade-source=\"upgradeSource\"\n              :plans=\"plans\"\n              :is-loading-plan-information=\"!plansFetched\"\n              :is-expanded=\"!isSmallerThanTabletPortrait\"\n              @upgrade=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Monthly,\n                  tier: Tier.Platinum,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n            />\n            <OzDivider\n              :color-scheme=\"OzDividerColorScheme.Solid\"\n              class=\"mx-4 tablet-portrait:ms-5 tablet-portrait:me-6\"\n            />\n            <PaymentScheduleTier\n              class=\"px-4 py-3 tablet-portrait:px-6\"\n              :tier=\"Tier.Platinum\"\n              :payment-schedule=\"PaymentSchedule.Annual\"\n              :use-tier-color=\"false\"\n              :upgrade-source=\"upgradeSource\"\n              :plans=\"plans\"\n              :is-loading-plan-information=\"!plansFetched\"\n              :is-expanded=\"!isSmallerThanTabletPortrait\"\n              @upgrade=\"\n                handleUpgrade({\n                  paymentSchedule: PaymentSchedule.Annual,\n                  tier: Tier.Platinum,\n                  postCheckoutRedirectUrl: membershipConfirmationPageUrl,\n                })\n              \"\n            />\n          </OzBox>\n          <p\n            class=\"mb-4 px-1 tablet-portrait:mb-2 tablet-portrait:px-4 text-body-extra-small text-dark-text-200 dark:text-light-text-200\"\n          >\n            {{ __('*Subscription auto-renews at the end of the payment period. You can cancel at any time.') }}\n          </p>\n        </template>\n        <!-- Show loading spinner while fetching the Platinum upgrade cost -->\n        <template v-else-if=\"upgradeStep === UpgradeStep.EstimatePlatinumCost\">\n          <OzCloseButton :disabled=\"true\" @click=\"$emit('cancel')\" />\n          <DashboardSettingsBillingModalTitle :title=\"__('Upgrade to Platinum')\" :subtitle=\"__('Confirm changes')\" />\n          <div class=\"flex justify-center py-7\">\n            <OzIndeterminateSpinner />\n          </div>\n        </template>\n        <template\n          v-else-if=\"\n            upgradeStep === UpgradeStep.ConfirmMonthlyPlatinum || upgradeStep === UpgradeStep.ConfirmAnnualPlatinum\n          \"\n        >\n          <OzCloseButton :disabled=\"isProcessingUpgrade\" @click=\"$emit('cancel')\" />\n          <DashboardSettingsBillingModalTitle :title=\"__('Upgrade to Platinum')\" :subtitle=\"__('Confirm changes')\" />\n          <div\n            v-if=\"upgradeError\"\n            :class=\"[\n              'mx-0 tablet-portrait:mx-4 mb-4 tablet-portrait:mb-6',\n              'py-7',\n              'flex flex-col items-center',\n              'text-dark-text-100 dark:text-light-text-100',\n            ]\"\n          >\n            {{ upgradeError }}\n          </div>\n          <div v-else class=\"mx-0 tablet-portrait:mx-2\">\n            <!-- Show Platinum monthly payment schedule information -->\n            <BillingCollectionItems\n              v-if=\"upgradeStep === UpgradeStep.ConfirmMonthlyPlatinum\"\n              class=\"mb-4 tablet-portrait:mb-3\"\n              :items=\"[\n                __('You are upgrading to <strong>Platinum</strong> starting now (<strong>%{currentDate}</strong>).', {\n                  currentDate,\n                }),\n                __('Your recurring charges will be <strong>%{amount}</strong> a month.', {\n                  amount: displayedPrices.platinum.monthly,\n                }),\n                __('You can cancel or change your membership anytime.'),\n              ]\"\n            />\n            <!-- Show Platinum annual payment schedule information -->\n            <BillingCollectionItems\n              v-if=\"upgradeStep === UpgradeStep.ConfirmAnnualPlatinum\"\n              class=\"mb-4 tablet-portrait:mb-3\"\n              :items=\"[\n                __('You are upgrading to <strong>Platinum</strong> starting now (<strong>%{currentDate}</strong>).', {\n                  currentDate,\n                }),\n                __('Your recurring charges will be <strong>%{amount}</strong> a year.', {\n                  amount: displayedPrices.platinum.annual,\n                }),\n                __('You can cancel or change your membership anytime.'),\n              ]\"\n            />\n            <BillingCollectionItems\n              :items=\"[\n                __(\n                  'The unused portion of your current payment period amounts to <strong>%{amountUnused}</strong>. We will apply it as a credit towards your first invoice.',\n                  {\n                    amountUnused: displayedEstimatedUpgradeCost.unused_portion,\n                  },\n                ),\n                __('We will charge your card <strong>%{amount}</strong> now.', {\n                  amount: displayedEstimatedUpgradeCost.amount_due,\n                }),\n              ]\"\n            />\n            <div class=\"my-4 tablet-portrait:mt-6 tablet-portrait:mb-2 flex justify-end\">\n              <MembershipTierActionButton\n                class=\"w-full tablet-portrait:w-auto\"\n                :button-text=\"__('Confirm')\"\n                :processing-text=\"__('Upgrading...')\"\n                :is-processing=\"isProcessingUpgrade\"\n                @click=\"confirmUpgrade(upgradeToPlatinum)\"\n              />\n            </div>\n          </div>\n        </template>\n        <template\n          v-else-if=\"\n            upgradeStep === UpgradeStep.ConfirmMonthlyPlatinumDifferentCurrency ||\n            upgradeStep === UpgradeStep.ConfirmAnnualPlatinumDifferentCurrency\n          \"\n        >\n          <OzCloseButton\n            :disabled=\"isProcessingUpgrade || isLoadingCancellationRefundInformation\"\n            @click=\"$emit('cancel')\"\n          />\n          <DashboardSettingsBillingModalTitle :title=\"__('Upgrade to Platinum')\" :subtitle=\"__('Confirm changes')\" />\n          <div\n            v-if=\"upgradeError\"\n            :class=\"[\n              'mx-0 tablet-portrait:mx-4 mb-4 tablet-portrait:mb-6',\n              'py-7',\n              'flex flex-col items-center',\n              'text-dark-text-100 dark:text-light-text-100',\n            ]\"\n          >\n            {{ upgradeError }}\n          </div>\n          <div v-else-if=\"isLoadingCancellationRefundInformation\" class=\"flex justify-center py-7\">\n            <OzIndeterminateSpinner />\n          </div>\n          <div v-else class=\"mx-0 tablet-portrait:mx-2\">\n            <!-- Show Platinum monthly payment schedule information -->\n            <template v-if=\"upgradeStep === UpgradeStep.ConfirmMonthlyPlatinumDifferentCurrency\">\n              <BillingCollectionItems\n                class=\"mb-4 tablet-portrait:mb-3\"\n                :items=\"[\n                  __('You are upgrading to <strong>Platinum</strong> starting now (<strong>%{currentDate}</strong>).', {\n                    currentDate,\n                  }),\n                  __('Your recurring charges will be <strong>%{amount}</strong> a month.', {\n                    amount: displayedPrices.platinum.monthly,\n                  }),\n                  __('You can cancel or change your membership anytime.'),\n                ]\"\n              />\n              <BillingCollectionItems\n                :items=\"[\n                  __(\n                    'The unused portion of your current payment period amounts to <strong>%{refundAmount}</strong>. We will refund it to your card now.',\n                    {\n                      refundAmount: estimatedCancellationRefundAmount,\n                    },\n                  ),\n                  __('We will charge your card <strong>%{amount}</strong> now.', {\n                    amount: displayedPrices.platinum.monthly,\n                  }),\n                ]\"\n              />\n            </template>\n            <!-- Show Platinum annual payment schedule information -->\n            <template v-if=\"upgradeStep === UpgradeStep.ConfirmAnnualPlatinumDifferentCurrency\">\n              <BillingCollectionItems\n                class=\"mb-4 tablet-portrait:mb-3\"\n                :items=\"[\n                  __('You are upgrading to <strong>Platinum</strong> starting now (<strong>%{currentDate}</strong>).', {\n                    currentDate,\n                  }),\n                  __('Your recurring charges will be <strong>%{amount}</strong> a year.', {\n                    amount: displayedPrices.platinum.annual,\n                  }),\n                  __('You can cancel or change your membership anytime.'),\n                ]\"\n              />\n              <BillingCollectionItems\n                :items=\"[\n                  __(\n                    'The unused portion of your current payment period amounts to <strong>%{refundAmount}</strong>. We will refund it to your card now.',\n                    {\n                      refundAmount: estimatedCancellationRefundAmount,\n                    },\n                  ),\n                  __('We will charge your card <strong>%{amount}</strong> now.', {\n                    amount: displayedPrices.platinum.annual,\n                  }),\n                ]\"\n              />\n            </template>\n            <div class=\"my-4 tablet-portrait:mt-6 tablet-portrait:mb-2 flex justify-end\">\n              <MembershipTierActionButton\n                class=\"w-full tablet-portrait:w-auto\"\n                :button-text=\"__('Confirm')\"\n                :processing-text=\"__('Upgrading...')\"\n                :is-processing=\"isProcessingUpgrade\"\n                @click=\"confirmUpgrade(upgradeToPlatinumDifferentCurrency)\"\n              />\n            </div>\n          </div>\n        </template>\n        <!-- Show loading spinner while fetching the Gold switch cost -->\n        <template v-else-if=\"upgradeStep === UpgradeStep.EstimateUpgradeGoldPlanCost\">\n          <OzCloseButton :disabled=\"true\" @click=\"$emit('cancel')\" />\n          <DashboardSettingsBillingModalTitle :title=\"__('Switch to Gold')\" :subtitle=\"__('Confirm changes')\" />\n          <div class=\"flex justify-center py-7\">\n            <OzIndeterminateSpinner />\n          </div>\n        </template>\n        <template\n          v-else-if=\"\n            upgradeStep === UpgradeStep.ConfirmUpgradeGoldPlanMonthly ||\n            upgradeStep === UpgradeStep.ConfirmUpgradeGoldPlanAnnual\n          \"\n        >\n          <OzCloseButton :disabled=\"isProcessingUpgrade\" @click=\"$emit('cancel')\" />\n          <DashboardSettingsBillingModalTitle :title=\"__('Switch to Gold')\" :subtitle=\"__('Confirm changes')\" />\n          <div\n            v-if=\"upgradeError\"\n            :class=\"[\n              'mx-0 tablet-portrait:mx-4 mb-4 tablet-portrait:mb-6',\n              'py-7',\n              'flex flex-col items-center',\n              'text-dark-text-100 dark:text-light-text-100',\n            ]\"\n          >\n            {{ upgradeError }}\n          </div>\n          <div v-else class=\"mx-0 tablet-portrait:mx-2\">\n            <!-- Show Gold monthly payment schedule information -->\n            <BillingCollectionItems\n              v-if=\"upgradeStep === UpgradeStep.ConfirmUpgradeGoldPlanMonthly\"\n              class=\"mb-4 tablet-portrait:mb-3\"\n              :items=\"[\n                __('You are switching to <strong>Gold</strong> starting now (<strong>%{currentDate}</strong>).', {\n                  currentDate,\n                }),\n                __('Your recurring charges will be <strong>%{amount}</strong> a month.', {\n                  amount: displayedPrices.gold.monthly,\n                }),\n                __('You can cancel or change your membership anytime.'),\n              ]\"\n            />\n            <!-- Show Gold annual payment schedule information -->\n            <BillingCollectionItems\n              v-if=\"upgradeStep === UpgradeStep.ConfirmUpgradeGoldPlanAnnual\"\n              class=\"mb-4 tablet-portrait:mb-3\"\n              :items=\"[\n                __('You are switching to <strong>Gold</strong> starting now (<strong>%{currentDate}</strong>).', {\n                  currentDate,\n                }),\n                __('Your recurring charges will be <strong>%{amount}</strong> a year.', {\n                  amount: displayedPrices.gold.annual,\n                }),\n                __('You can cancel or change your membership anytime.'),\n              ]\"\n            />\n            <BillingCollectionItems\n              v-if=\"displayedEstimatedUpgradeCost.is_refund\"\n              :items=\"[\n                __(\n                  'The unused portion of your current payment period amounts to <strong>%{amountUnused}</strong>. We will subtract <strong>%{amount}</strong> for your first monthly payment.',\n                  {\n                    amountUnused: displayedEstimatedUpgradeCost.unused_portion,\n                    amount: displayedEstimatedUpgradeCost.invoice_amount,\n                  },\n                ),\n                __('We will issue a <strong>%{refundAmount}</strong> refund to your card now.', {\n                  refundAmount: displayedEstimatedUpgradeCost.refund_amount,\n                }),\n              ]\"\n            />\n            <BillingCollectionItems\n              v-else\n              :items=\"[\n                __(\n                  'The unused portion of your current payment period amounts to <strong>%{amountUnused}</strong>. We will apply it as a credit towards your first invoice.',\n                  {\n                    amountUnused: displayedEstimatedUpgradeCost.unused_portion,\n                  },\n                ),\n                __('We will charge your card <strong>%{amount}</strong> now.', {\n                  amount: displayedEstimatedUpgradeCost.amount_due,\n                }),\n              ]\"\n            />\n            <div class=\"my-4 tablet-portrait:mt-6 tablet-portrait:mb-2 flex justify-end\">\n              <MembershipTierActionButton\n                class=\"w-full tablet-portrait:w-auto\"\n                :button-text=\"__('Confirm')\"\n                :processing-text=\"__('Switching...')\"\n                :is-processing=\"isProcessingUpgrade\"\n                @click=\"confirmUpgrade(upgradeToGold)\"\n              />\n            </div>\n          </div>\n        </template>\n        <template\n          v-else-if=\"\n            upgradeStep === UpgradeStep.ConfirmUpgradeGoldPlanDifferentCurrencyMonthly ||\n            upgradeStep === UpgradeStep.ConfirmUpgradeGoldPlanDifferentCurrencyAnnual\n          \"\n        >\n          <OzCloseButton\n            :disabled=\"isProcessingUpgrade || isLoadingCancellationRefundInformation\"\n            @click=\"$emit('cancel')\"\n          />\n          <DashboardSettingsBillingModalTitle :title=\"__('Switch to Gold')\" :subtitle=\"__('Confirm changes')\" />\n          <div\n            v-if=\"upgradeError\"\n            :class=\"[\n              'mx-0 tablet-portrait:mx-4 mb-4 tablet-portrait:mb-6',\n              'py-7',\n              'flex flex-col items-center',\n              'text-dark-text-100 dark:text-light-text-100',\n            ]\"\n          >\n            {{ upgradeError }}\n          </div>\n          <div v-else-if=\"isLoadingCancellationRefundInformation\" class=\"flex justify-center py-7\">\n            <OzIndeterminateSpinner />\n          </div>\n          <div v-else class=\"mx-0 tablet-portrait:mx-2\">\n            <!-- Show Gold monthly payment schedule information -->\n            <template v-if=\"upgradeStep === UpgradeStep.ConfirmUpgradeGoldPlanDifferentCurrencyMonthly\">\n              <BillingCollectionItems\n                class=\"mb-4 tablet-portrait:mb-3\"\n                :items=\"[\n                  __('You are switching to <strong>Gold</strong> starting now (<strong>%{currentDate}</strong>).', {\n                    currentDate,\n                  }),\n                  __('Your recurring charges will be <strong>%{amount}</strong> a month.', {\n                    amount: displayedPrices.gold.monthly,\n                  }),\n                  __('You can cancel or change your membership anytime.'),\n                ]\"\n              />\n              <BillingCollectionItems\n                :items=\"[\n                  __(\n                    'The unused portion of your current payment period amounts to <strong>%{refundAmount}</strong>. We will refund it to your card now.',\n                    {\n                      refundAmount: estimatedCancellationRefundAmount,\n                    },\n                  ),\n                  __('We will charge your card <strong>%{amount}</strong> now.', {\n                    amount: displayedPrices.gold.monthly,\n                  }),\n                ]\"\n              />\n            </template>\n            <!-- Show Gold annual payment schedule information -->\n            <template v-if=\"upgradeStep === UpgradeStep.ConfirmUpgradeGoldPlanDifferentCurrencyAnnual\">\n              <BillingCollectionItems\n                class=\"mb-4 tablet-portrait:mb-3\"\n                :items=\"[\n                  __('You are switching to <strong>Gold</strong> starting now (<strong>%{currentDate}</strong>).', {\n                    currentDate,\n                  }),\n                  __('Your recurring charges will be <strong>%{amount}</strong> a year.', {\n                    amount: displayedPrices.gold.annual,\n                  }),\n                  __('You can cancel or change your membership anytime.'),\n                ]\"\n              />\n              <BillingCollectionItems\n                :items=\"[\n                  __(\n                    'The unused portion of your current payment period amounts to <strong>%{refundAmount}</strong>. We will refund it to your card now.',\n                    {\n                      refundAmount: estimatedCancellationRefundAmount,\n                    },\n                  ),\n                  __('We will charge your card <strong>%{amount}</strong> now.', {\n                    amount: displayedPrices.gold.annual,\n                  }),\n                ]\"\n              />\n            </template>\n            <div class=\"my-4 tablet-portrait:mt-6 tablet-portrait:mb-2 flex justify-end\">\n              <MembershipTierActionButton\n                class=\"w-full tablet-portrait:w-auto\"\n                :button-text=\"__('Confirm')\"\n                :processing-text=\"__('Switching...')\"\n                :is-processing=\"isProcessingUpgrade\"\n                @click=\"confirmUpgrade(upgradeToGoldDifferentCurrency)\"\n              />\n            </div>\n          </div>\n        </template>\n        <!-- Show loading spinner while fetching the Platinum switch cost -->\n        <template v-else-if=\"upgradeStep === UpgradeStep.EstimateUpgradePlatinumPlanCost\">\n          <OzCloseButton :disabled=\"true\" @click=\"$emit('cancel')\" />\n          <DashboardSettingsBillingModalTitle :title=\"__('Switch to Platinum')\" :subtitle=\"__('Confirm changes')\" />\n          <div class=\"flex justify-center py-7\">\n            <OzIndeterminateSpinner />\n          </div>\n        </template>\n        <template\n          v-else-if=\"\n            upgradeStep === UpgradeStep.ConfirmUpgradePlatinumPlanMonthly ||\n            upgradeStep === UpgradeStep.ConfirmUpgradePlatinumPlanAnnual\n          \"\n        >\n          <OzCloseButton :disabled=\"isProcessingUpgrade\" @click=\"$emit('cancel')\" />\n          <DashboardSettingsBillingModalTitle :title=\"__('Switch to Platinum')\" :subtitle=\"__('Confirm changes')\" />\n          <div\n            v-if=\"upgradeError\"\n            :class=\"[\n              'mx-0 tablet-portrait:mx-4 mb-4 tablet-portrait:mb-6',\n              'py-7',\n              'flex flex-col items-center',\n              'text-dark-text-100 dark:text-light-text-100',\n            ]\"\n          >\n            {{ upgradeError }}\n          </div>\n          <div v-else class=\"mx-0 tablet-portrait:mx-2\">\n            <!-- Show Platinum monthly payment schedule information -->\n            <BillingCollectionItems\n              v-if=\"upgradeStep === UpgradeStep.ConfirmUpgradePlatinumPlanMonthly\"\n              class=\"mb-4 tablet-portrait:mb-3\"\n              :items=\"[\n                __('You are switching to <strong>Platinum</strong> starting now (<strong>%{currentDate}</strong>).', {\n                  currentDate,\n                }),\n                __('Your recurring charges will be <strong>%{amount}</strong> a month.', {\n                  amount: displayedPrices.platinum.monthly,\n                }),\n                __('You can cancel or change your membership anytime.'),\n              ]\"\n            />\n            <!-- Show Platinum annual payment schedule information -->\n            <BillingCollectionItems\n              v-if=\"upgradeStep === UpgradeStep.ConfirmUpgradePlatinumPlanAnnual\"\n              class=\"mb-4 tablet-portrait:mb-3\"\n              :items=\"[\n                __('You are switching to <strong>Platinum</strong> starting now (<strong>%{currentDate}</strong>).', {\n                  currentDate,\n                }),\n                __('Your recurring charges will be <strong>%{amount}</strong> a year.', {\n                  amount: displayedPrices.platinum.annual,\n                }),\n                __('You can cancel or change your membership anytime.'),\n              ]\"\n            />\n            <BillingCollectionItems\n              v-if=\"displayedEstimatedUpgradeCost.is_refund\"\n              :items=\"[\n                __(\n                  'The unused portion of your current payment period amounts to <strong>%{amountUnused}</strong>. We will subtract <strong>%{amount}</strong> for your first monthly payment.',\n                  {\n                    amountUnused: displayedEstimatedUpgradeCost.unused_portion,\n                    amount: displayedEstimatedUpgradeCost.invoice_amount,\n                  },\n                ),\n                __('We will issue a <strong>%{refundAmount}</strong> refund to your card now.', {\n                  refundAmount: displayedEstimatedUpgradeCost.refund_amount,\n                }),\n              ]\"\n            />\n            <BillingCollectionItems\n              v-else\n              :items=\"[\n                __(\n                  'The unused portion of your current payment period amounts to <strong>%{amountUnused}</strong>. We will apply it as a credit towards your first invoice.',\n                  {\n                    amountUnused: displayedEstimatedUpgradeCost.unused_portion,\n                  },\n                ),\n                __('We will charge your card <strong>%{amount}</strong> now.', {\n                  amount: displayedEstimatedUpgradeCost.amount_due,\n                }),\n              ]\"\n            />\n            <div class=\"my-4 tablet-portrait:mt-6 tablet-portrait:mb-2 flex justify-end\">\n              <MembershipTierActionButton\n                class=\"w-full tablet-portrait:w-auto\"\n                :button-text=\"__('Confirm')\"\n                :processing-text=\"__('Switching...')\"\n                :is-processing=\"isProcessingUpgrade\"\n                @click=\"confirmUpgrade(upgradeToPlatinum)\"\n              />\n            </div>\n          </div>\n        </template>\n        <template\n          v-else-if=\"\n            upgradeStep === UpgradeStep.ConfirmUpgradePlatinumPlanDifferentCurrencyMonthly ||\n            upgradeStep === UpgradeStep.ConfirmUpgradePlatinumPlanDifferentCurrencyAnnual\n          \"\n        >\n          <OzCloseButton\n            :disabled=\"isProcessingUpgrade || isLoadingCancellationRefundInformation\"\n            @click=\"$emit('cancel')\"\n          />\n          <DashboardSettingsBillingModalTitle :title=\"__('Switch to Platinum')\" :subtitle=\"__('Confirm changes')\" />\n          <div\n            v-if=\"upgradeError\"\n            :class=\"[\n              'mx-0 tablet-portrait:mx-4 mb-4 tablet-portrait:mb-6',\n              'py-7',\n              'flex flex-col items-center',\n              'text-dark-text-100 dark:text-light-text-100',\n            ]\"\n          >\n            {{ upgradeError }}\n          </div>\n          <div v-else-if=\"isLoadingCancellationRefundInformation\" class=\"flex justify-center py-7\">\n            <OzIndeterminateSpinner />\n          </div>\n          <div v-else class=\"mx-0 tablet-portrait:mx-2\">\n            <!-- Show Platinum monthly payment schedule information -->\n            <template v-if=\"upgradeStep === UpgradeStep.ConfirmUpgradePlatinumPlanDifferentCurrencyMonthly\">\n              <BillingCollectionItems\n                class=\"mb-4 tablet-portrait:mb-3\"\n                :items=\"[\n                  __('You are switching to <strong>Platinum</strong> starting now (<strong>%{currentDate}</strong>).', {\n                    currentDate,\n                  }),\n                  __('Your recurring charges will be <strong>%{amount}</strong> a month.', {\n                    amount: displayedPrices.platinum.monthly,\n                  }),\n                  __('You can cancel or change your membership anytime.'),\n                ]\"\n              />\n              <BillingCollectionItems\n                :items=\"[\n                  __(\n                    'The unused portion of your current payment period amounts to <strong>%{refundAmount}</strong>. We will refund it to your card now.',\n                    {\n                      refundAmount: estimatedCancellationRefundAmount,\n                    },\n                  ),\n                  __('We will charge your card <strong>%{amount}</strong> now.', {\n                    amount: displayedPrices.platinum.monthly,\n                  }),\n                ]\"\n              />\n            </template>\n            <!-- Show Platinum annual payment schedule information -->\n            <template v-if=\"upgradeStep === UpgradeStep.ConfirmUpgradePlatinumPlanDifferentCurrencyAnnual\">\n              <BillingCollectionItems\n                class=\"mb-4 tablet-portrait:mb-3\"\n                :items=\"[\n                  __('You are switching to <strong>Platinum</strong> starting now (<strong>%{currentDate}</strong>).', {\n                    currentDate,\n                  }),\n                  __('Your recurring charges will be <strong>%{amount}</strong> a year.', {\n                    amount: displayedPrices.platinum.annual,\n                  }),\n                  __('You can cancel or change your membership anytime.'),\n                ]\"\n              />\n              <BillingCollectionItems\n                :items=\"[\n                  __(\n                    'The unused portion of your current payment period amounts to <strong>%{refundAmount}</strong>. We will refund it to your card now.',\n                    {\n                      refundAmount: estimatedCancellationRefundAmount,\n                    },\n                  ),\n                  __('We will charge your card <strong>%{amount}</strong> now.', {\n                    amount: displayedPrices.platinum.annual,\n                  }),\n                ]\"\n              />\n            </template>\n            <div class=\"my-4 tablet-portrait:mt-6 tablet-portrait:mb-2 flex justify-end\">\n              <MembershipTierActionButton\n                class=\"w-full tablet-portrait:w-auto\"\n                :button-text=\"__('Confirm')\"\n                :processing-text=\"__('Switching...')\"\n                :is-processing=\"isProcessingUpgrade\"\n                @click=\"confirmUpgrade(upgradeToPlatinumDifferentCurrency)\"\n              />\n            </div>\n          </div>\n        </template>\n      </div>\n    </template>\n  </OzScreenSizeAwareCenterModal>\n</template>\n\n<style lang=\"scss\" scoped>\n:deep(.modal-container) {\n  height: auto !important;\n  box-shadow: none !important;\n  // ensure modal height is set based on content height\n}\n</style>\n"],"names":["Type","Type2","Variant","Variant2","__default__","xPaymentSchedules","ref","isPadletQuotaOrFileSizeVariant","computed","props","variant","colorScheme","value","OzBoxColors","Secondary","Highlight","currentDate","getPrettyCurrentDate","isSmallerThanTabletPortrait","windowHeight","storeToRefs","useWindowSizeStore","personalPlansStore","usePersonalPlansStore","displayedEstimatedUpgradeCost","displayedPrices","displayedQuotas","isProcessingUpgrade","plans","plansFetched","advertisedQuotas","isLoadingAdvertisedQuotas","upgradeStep","upgradeError","upgradeSource","hasUserTriggeredUpgrade","estimatedCancellationRefundAmount","isLoadingCancellationRefundInformation","upgradeToGold","upgradeToGoldDifferentCurrency","upgradeToPlatinum","upgradeToPlatinumDifferentCurrency","showPlanUpgradeToGoldModal","showUpgradeToPlatinumModalCheckingScheduledChanges","handleUpgrade","experimentsStore","useExperimentsStore","upgradeModalCopyAExperimentVariant","upgradeModalSingleStepExperimentVariant","xFrameLimitInsteadOfFileLimit","UpgradeStep","ChooseTierFrameQuota","currentPlanFrameLimit","user","membership_tier","neon","max_whiteboard_frames","silver","gold","platinum","padletQuotaNeonMembershipTierVariant","whiteboardFramesUsed","NeonMembershipTierVariant","OverFrameQuota","AtFrameQuota","UnderFrameQuota","quota","walls_used","max_walls","OverPadletQuota","AtPadletQuota","UnderPadletQuota","padletQuotaSilverMembershipTierVariant","SilverMembershipTierVariant","Upgrade","xPlatinumMonthlyPrice","UpgradeModalSingleStepExperimentVariant","Variation","UpgradeSingleStep","padletQuotaGoldMembershipTierVariant","GoldMembershipTierVariant","platinumMembershipTierVariant","PlatinumMembershipTierVariant","Loading","fileSizeQuotaSilverMembershipTierVariant","sizeOfFileOverQuota","max_upload_megabytes","FileSize","fileSizeQuotaGoldMembershipTierVariant","fileThatExceededSize","size","membershipConfirmationPageUrl","transformCurrentUrl","path","search","next","currentUrl","chooseTierPadletQuotaTitle","UpgradeSource","UntrashWallQuota","UnarchiveWallQuota","__","chooseTierPadletQuotaSubtitle","xGoldMonthlyPrice","isAppUsing","personal_pricing_plan_variant","PricingPlansExperimentVariant","AnnualOnly","PlatinumSilverAnnualOnly","xGoldPlans","PlatinumOnly","xSilverPlans","formatVideoLengthQuota","seconds","minutes","Math","floor","remainingSeconds","displayedVideoLengthQuotas","max_video_length_seconds","initiateUpgradeToGold","paymentSchedule","PaymentSchedule","Annual","tier","Tier","Gold","postCheckoutRedirectUrl","initiateUpgradeToSilver","Silver","initiateUpgradeToPlatinum","Platinum","membershipTier","period","confirmUpgrade","upgradeFn","hasRequestedAnotherFreePadlet","xGetAnotherFreePadletButton","tenant_id","can_make","getAnotherFreePadlet","emit","getTierSelectionTitleFromExperiment","defaultTitle","UpgradeModalCopyAExperimentVariant","Control","getTierSelectionSubtitleFromExperiment"],"mappings":"2iGAkFY,IAAAA,GAAAA,IACVA,EAAAC,EAAA,SAAA,CAAA,EAAA,WACAD,EAAAC,EAAA,QAAA,CAAA,EAAA,UAFUD,IAAAA,GAAA,CAAA,CAAA,EAKAE,GAAAA,IACVA,EAAAC,EAAA,gBAAA,CAAA,EAAA,kBACAD,EAAAC,EAAA,aAAA,CAAA,EAAA,eACAD,EAAAC,EAAA,eAAA,CAAA,EAAA,iBACAD,EAAAC,EAAA,QAAA,CAAA,EAAA,UACAD,EAAAC,EAAA,kBAAA,CAAA,EAAA,oBACAD,EAAAC,EAAA,iBAAA,CAAA,EAAA,mBACAD,EAAAC,EAAA,cAAA,CAAA,EAAA,gBACAD,EAAAC,EAAA,gBAAA,CAAA,EAAA,kBACAD,EAAAC,EAAA,SAAA,CAAA,EAAA,WACAD,EAAAC,EAAA,OAAA,CAAA,EAAA,SACAD,EAAAC,EAAA,SAAA,EAAA,EAAA,WACAD,EAAAC,EAAA,eAAA,EAAA,EAAA,iBAZUD,IAAAA,GAAA,CAAA,CAAA,EAeZ,MAAAE,GAAe,CAAA,mtBA9CTC,EAAoBC,EAAa,EAAK,EAEtCC,EAAiCC,EACrC,IACEC,EAAMC,UAAY,GAClBD,EAAMC,UAAY,GAClBD,EAAMC,UAAY,GAClBD,EAAMC,UAAY,GAClBD,EAAMC,UAAY,GAGhBC,EAAcH,EAA6B,IAC3CC,EAAME,YAAoBF,EAAME,YAChCJ,EAA+BK,MAAcC,EAAYC,UAE3DL,EAAMC,UAAY,GAClBD,EAAMC,UAAY,GAClBD,EAAMC,UAAY,IAClBD,EAAMC,UAAY,GAEXG,EAAYE,UACd,IACR,82MCzBKC,EAAcC,KAEd,CAAEC,4BAAAA,EAA6BC,aAAAA,EAAa,EAAIC,EAAYC,IAAoB,EAEhFC,EAAqBC,KACrB,CACJC,8BAAAA,GACAC,gBAAAA,GACAC,gBAAAA,GACAC,oBAAAA,GACAC,MAAAA,GACAC,aAAAA,GACAC,iBAAAA,EACAC,0BAAAA,GACAC,YAAAA,EACAC,aAAAA,GACAC,cAAAA,EACAC,wBAAAA,EACAC,kCAAAA,GACAC,uCAAAA,EACF,EAAIjB,EAAYE,CAAkB,EAC5B,CACJgB,cAAAA,GACAC,+BAAAA,GACAC,kBAAAA,GACAC,mCAAAA,GACAC,2BAAAA,EACAC,mDAAAA,EACAC,cAAAA,CACE,EAAAtB,EAEEuB,EAAmBC,KACnB,CAAEC,mCAAAA,EAAoCC,wCAAAA,CAAwC,EAAI5B,EAAYyB,CAAgB,EAE9GI,EAAgCzC,EAAS,IAAMwB,EAAYpB,QAAUsC,EAAYC,oBAAoB,EAErGC,EAAwB5C,EAAS,IAAM,CACnC,OAAAC,EAAM4C,KAAKC,gBAAiB,CAClC,IAAK,OACI,OAAAxB,EAAiBlB,MAAM2C,KAAKC,sBACrC,IAAK,SACI,OAAA1B,EAAiBlB,MAAM6C,OAAOD,sBACvC,IAAK,OACI,OAAA1B,EAAiBlB,MAAM8C,KAAKF,sBACrC,IAAK,WACI,OAAA1B,EAAiBlB,MAAM+C,SAASH,sBACzC,QACS,MAAA,EACX,CACF,CAAC,EAEKI,GAAuCpD,EAAS,IAElDyC,EAA8BrC,OAC9BH,EAAMoD,sBACN/B,EAAiBlB,MAAM2C,KAAKC,sBAExB/C,EAAMoD,qBAAuB/B,EAAiBlB,MAAM2C,KAAKC,sBACpDM,EAA0BC,eAC/BtD,EAAMoD,uBAAyB/B,EAAiBlB,MAAM2C,KAAKC,sBACtDM,EAA0BE,aAC5BF,EAA0BG,gBAG/BxD,EAAM4C,KAAKa,MAAMC,WAAarC,EAAiBlB,MAAM2C,KAAKa,UACrDN,EAA0BO,gBAC/B5D,EAAM4C,KAAKa,MAAMC,aAAerC,EAAiBlB,MAAM2C,KAAKa,UACvDN,EAA0BQ,cAC5BR,EAA0BS,gBAClC,EAEKC,GAAyChE,EAAS,IAEpDyC,EAA8BrC,OAC9BH,EAAMoD,sBACN/B,EAAiBlB,MAAM6C,OAAOD,sBAE1B/C,EAAM4C,KAAKC,kBAAoB,SAC7B7C,EAAMoD,qBAAuB/B,EAAiBlB,MAAM6C,OAAOD,sBACtDiB,EAA4BV,eACjCtD,EAAMoD,uBAAyB/B,EAAiBlB,MAAM6C,OAAOD,sBACxDiB,EAA4BT,aAC9BS,EAA4BR,gBAGjCxD,EAAMoD,qBAAuB/B,EAAiBlB,MAAM6C,OAAOD,sBACtDiB,EAA4BV,eAE9BU,EAA4BC,QAGjCjE,EAAM4C,KAAKC,kBAAoB,SAC7B7C,EAAM4C,KAAKa,MAAMC,WAAarC,EAAiBlB,MAAM6C,OAAOW,UACvDK,EAA4BJ,gBACjC5D,EAAM4C,KAAKa,MAAMC,aAAerC,EAAiBlB,MAAM6C,OAAOW,UACzDK,EAA4BH,cAC9BG,EAA4BF,iBAEjC9D,EAAM4C,KAAKa,MAAMC,WAAa,GAAWM,EAA4BJ,gBAEvEM,EAAsB/D,OACtBoC,EAAwCpC,QAAUgE,EAAwCC,UAEnFJ,EAA4BK,kBAC9BL,EAA4BC,OACpC,EAEKK,GAAuCvE,EAAS,IAElDyC,EAA8BrC,OAC9BH,EAAMoD,sBACN/B,EAAiBlB,MAAM8C,KAAKF,sBAExB/C,EAAM4C,KAAKC,kBAAoB,OAC7B7C,EAAMoD,qBAAuB/B,EAAiBlB,MAAM8C,KAAKF,sBACpDwB,EAA0BjB,eAC/BtD,EAAMoD,uBAAyB/B,EAAiBlB,MAAM8C,KAAKF,sBACtDwB,EAA0BhB,aAC5BgB,EAA0Bf,gBAG/BxD,EAAMoD,qBAAuB/B,EAAiBlB,MAAM8C,KAAKF,sBACpDwB,EAA0BjB,eAE5BiB,EAA0BN,QAG/BjE,EAAM4C,KAAKC,kBAAoB,OAC7B7C,EAAM4C,KAAKa,MAAMC,WAAarC,EAAiBlB,MAAM8C,KAAKU,UACrDY,EAA0BX,gBAC/B5D,EAAM4C,KAAKa,MAAMC,aAAerC,EAAiBlB,MAAM8C,KAAKU,UACvDY,EAA0BV,cAC5BU,EAA0BT,iBAE/B9D,EAAM4C,KAAKa,MAAMC,WAAa,GAAWa,EAA0BX,gBAErEM,EAAsB/D,OACtBoC,EAAwCpC,QAAUgE,EAAwCC,UAEnFG,EAA0BF,kBAC5BE,EAA0BN,OAClC,EAEKO,GAAgCzE,EAAS,IAGzC2B,EAAwBvB,MAAcsE,EAA8BC,QAEtER,EAAsB/D,OACtBoC,EAAwCpC,QAAUgE,EAAwCC,WAC1FpE,EAAM4C,KAAKC,kBAAoB,OAExB4B,EAA8BJ,kBAChCI,EAA8BR,OACtC,EAEKU,GAA2C5E,EAAS,IAEtDC,EAAM4C,KAAKC,kBAAoB,UAC/B+B,EAAoBzE,MAAQkB,EAAiBlB,MAAM6C,OAAO6B,qBAAwB,IAE3Eb,EAA4Bc,SAEnCZ,EAAsB/D,OACtBoC,EAAwCpC,QAAUgE,EAAwCC,UAEnFJ,EAA4BK,kBAC9BL,EAA4BC,OACpC,EAEKc,GAAyChF,EAAS,IAEpDC,EAAM4C,KAAKC,kBAAoB,QAC/B+B,EAAoBzE,MAAQkB,EAAiBlB,MAAM8C,KAAK4B,qBAAwB,IAEzEN,EAA0BO,SAEjCZ,EAAsB/D,OACtBoC,EAAwCpC,QAAUgE,EAAwCC,UAEnFG,EAA0BF,kBAC5BE,EAA0BN,OAClC,EAEKW,EAAsB7E,EAAS,IAC5BC,EAAMgF,qBAAuBhF,EAAMgF,qBAAqBC,KAAO,CACvE,EAEKC,EAAgCnF,EAAS,IACtCoF,GAAoB,CAAA,EAAI,CAAEC,KAAM,4BAA6BC,OAAQ,CAAEC,KAAMC,GAAW,CAAE,CAAE,CAAC,CACrG,EAEKC,GAA6BzF,EAAS,IAExC0B,EAActB,QAAUsF,EAAcC,kBACtCjE,EAActB,QAAUsF,EAAcE,mBAE/BC,EAAG,yCAAyC,EAG9CA,EAAG,6CAA6C,CACxD,EAEKC,GAAgC9F,EAAS,IACzC0B,EAActB,QAAUsF,EAAcC,iBACjCE,EAAG,iCAAiC,EAEzCnE,EAActB,QAAUsF,EAAcE,mBACjCC,EAAG,mCAAmC,EAExCA,EAAG,qDAAqD,CAChE,EAEKE,EAAoB/F,EAAS,IAC5BgG,EAAW,gCAAgC,EAI5C/F,EAAM4C,KAAKoD,gCAAkCC,EAA8BC,WAHtE,EAOV,EAEKhC,EAAwBnE,EAAS,IAGlCgG,EAAAA,EAAW,gCAAgC,GAC1C/F,EAAM4C,KAAKoD,gCAAkCC,EAA8BC,YAC5EH,EAAW,kCAAkC,GAC5C/F,EAAM4C,KAAKoD,gCAAkCC,EAA8BE,yBAKhF,EAEKC,GAAarG,EAAS,IAGvBgG,EAAAA,EAAW,gCAAgC,GAC1C/F,EAAM4C,KAAKoD,gCAAkCC,EAA8BI,cAC5EN,EAAW,kCAAkC,GAC5C/F,EAAM4C,KAAKoD,gCAAkCC,EAA8BE,yBAKhF,EAEKG,GAAevG,EAAS,IAEvBgG,EAAW,kCAAkC,EAG3C/F,EAAM4C,KAAKoD,gCAAkCC,EAA8BE,yBAFzE,EAGV,EAGD,SAASI,EAAuBC,EAAgC,CAC9D,GAAIA,GAAW,KAAa,MAAA,GAC5B,MAAMC,EAAUC,KAAKC,MAAMH,EAAU,EAAE,EACjCI,EAAmBJ,EAAU,GAE/B,OAAAC,EAAU,GAAKG,EAAmB,EAC7BhB,EAAG,sDAAuD,CAC/Da,QAAAA,EACAG,iBAAAA,CACF,CAAC,EACQH,EAAU,EAEZb,EAAG,2BAA4B,CACpCa,QAAAA,CACF,CAAC,EAEMb,EAAG,oCAAqC,CAC7CgB,iBAAAA,CACF,CAAC,CAEL,CAEM,MAAAC,GAA6B9G,EAAS,KACnC,CACL+C,KAAMyD,EAAuBlF,EAAiBlB,MAAM2C,KAAKgE,wBAAwB,EACjF7D,KAAMsD,EAAuBlF,EAAiBlB,MAAM8C,KAAK6D,wBAAwB,EACjF9D,OAAQuD,EAAuBlF,EAAiBlB,MAAM6C,OAAO8D,wBAAwB,EACrF5D,SAAUqD,EAAuBlF,EAAiBlB,MAAM+C,SAAS4D,wBAAwB,GAE5F,EAGD,SAASC,IAAwB,CAC3B,GAAA/G,EAAM4C,KAAKC,iBAAmB,KAE9B,IAAA,CAACiD,EAAkB3F,MAAO,CACdgC,EAAA,CACZ6E,gBAAiBC,EAAgBC,OACjCC,KAAMC,EAAKC,KACXC,wBAAyBpC,EAA8B/E,KACzD,CAAC,EACD,MACF,CAE2B8B,EAAA,CAAER,cAAe,IAAK,CAAC,EACpD,CAEA,SAAS8F,IAA0B,CACnBpF,EAAA,CACZ6E,gBAAiBC,EAAgBC,OACjCC,KAAMC,EAAKI,OACXF,wBAAyBpC,EAA8B/E,KACzD,CAAC,CACH,CAEA,SAASsH,IAA4B,CAC/B,GAAAzH,EAAM4C,KAAKC,iBAAmB,KAClC,IAAI,CAACqB,EAAsB/D,OAASH,EAAM4C,KAAKC,kBAAoB,OAAQ,CAC3DV,EAAA,CACZ6E,gBAAiBC,EAAgBC,OACjCC,KAAMC,EAAKM,SACXJ,wBAAyBpC,EAA8B/E,KACzD,CAAC,EACD,MACF,CAEmD+B,EAAA,CACjDyF,eAAgB3H,EAAM4C,KAAKC,gBAC3BmE,gBAAiBhH,EAAM4C,KAAKgF,QAAU,MACxC,CAAC,EACH,CAIA,SAASC,GAAeC,EAA2D,CAC7E9H,EAAM4C,KAAKgF,QAAU,MAEzBE,EAAU,CAAEd,gBAAiBhH,EAAM4C,KAAKgF,MAAO,CAAC,CAClD,CAEM,MAAAG,EAAgClI,EAAI,EAAK,EAEzCmI,GAA8BjI,EAAS,IAAe,OAG1D,OAFIC,EAAM4C,KAAKqF,YAAc,GACzB,GAACjI,EAAAA,EAAM4C,KAAKa,QAAXzD,MAAAA,EAAkBkI,WACnBH,EAA8B5H,MAAc,GAE9CH,EAAM4C,KAAKC,kBAAoB,SAC9B7C,EAAM4C,KAAKa,MAAMC,aAAe,GAAK1D,EAAM4C,KAAKa,MAAMC,aAAe,IAKtE1D,EAAM4C,KAAKC,kBAAoB,SAC9B7C,EAAM4C,KAAKa,MAAMC,aAAe,IAAM1D,EAAM4C,KAAKa,MAAMC,aAAe,GAK3E,CAAC,EAED,SAASyE,IAA6B,CACpCJ,EAA8B5H,MAAQ,GACtCiI,EAAK,6BAA6B,CACpC,CAEA,SAASC,GAAoCC,EAA8B,CACzE,OAAI9F,EAA8BrC,MACzByF,EAAG,2DAA4D,CACpEjD,sBAAuBA,EAAsBxC,KAC/C,CAAC,EAGImC,EAAmCnC,QAAUoI,EAAmCC,QACnFF,EACA1C,EAAG,4CAA4C,CACrD,CAEA,SAAS6C,GAAuCH,EAA8B,CAC5E,OAAI9F,EAA8BrC,MACzByF,EAAG,sCAAsC,EAG3CtD,EAAmCnC,QAAUoI,EAAmCC,QACnFF,EACA1C,EAAG,iDAAiD,CAC1D"}