{"version":3,"file":"GoldMembershipTier-ebab51c9.js","sources":["../../../app/javascript/vuecomponents/GoldMembershipTier.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { trackEvent } from '@@/bits/analytics'\nimport { __ } from '@@/bits/intl'\nimport { numberToHumanSize } from '@@/bits/numbers_helper'\nimport { FileSizeUnit } from '@@/bits/units'\nimport { LibraryType } from '@@/enums'\nimport OzBadge, { OzBadgeColorScheme } from '@@/library/v4/components/OzBadge.vue'\nimport OzBox, { OzBoxColors } from '@@/library/v4/components/OzBox.vue'\nimport OzContainedButton, {\n  OzContainedButtonColorScheme,\n  OzContainedButtonSizePreset,\n} from '@@/library/v4/components/OzContainedButton.vue'\nimport OzDivider, { OzDividerColorScheme, OzDividerOrientation } from '@@/library/v4/components/OzDivider.vue'\nimport OzIcon from '@@/library/v4/components/OzIcon.vue'\nimport OzLoadingSpinner from '@@/library/v4/components/OzLoadingSpinner.vue'\nimport OzMembershipTierGrid, { OzMembershipTierGridVariant } from '@@/library/v4/components/OzMembershipTierGrid.vue'\nimport { computed, ref } from 'vue'\n\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    whiteboardFramesUsed?: number\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    annualSavingsPercentage?: number | null // The annual savings percentage for the Gold tier.\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    whiteboardFramesUsed: undefined,\n    fileSize: undefined,\n    isUserLoggedIn: undefined,\n    continueUrl: undefined,\n    xChecked: false,\n    annualSavingsPercentage: null,\n    colorScheme: undefined,\n  },\n)\n\nconst xPaymentSchedules = ref<boolean>(false)\n\nconst isPadletQuotaOrFileSizeVariant = computed<boolean>(\n  () =>\n    props.variant === Variant.UnderFrameQuota ||\n    props.variant === Variant.AtFrameQuota ||\n    props.variant === Variant.OverFrameQuota ||\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\nconst showPaymentSchedules = (): void => {\n  trackEvent('Billing', 'Chose Gold plan', null, null, null)\n  xPaymentSchedules.value = true\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  VideoLengthLimit,\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            <template v-if=\"type === Type.Personal\">{{ __('Gold') }}</template>\n            <template v-if=\"type === Type.Library\">\n              <template v-if=\"libraryType == LibraryType.Classroom\">{{ __('Classroom') }}</template>\n              <template v-else>{{ __('Team Gold') }}</template>\n            </template>\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 v-if=\"type === Type.Personal\">{{ __('%{wallQuota} padlets', { wallQuota: advertisedWallsQuota }) }}</p>\n          <p v-if=\"type === Type.Library\">{{ __('Unlimited padlets') }}</p>\n\n          <slot v-else 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\n          :class=\"[\n            isExpanded && 'pe-0 flex items-center',\n            !isExpanded && 'pe-1',\n            type === Type.Personal && 'min-h-13',\n            type === Type.Library && 'min-h-17.25',\n          ]\"\n        >\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            <p\n              v-if=\"type === Type.Library && libraryType == LibraryType.Team\"\n              class=\"text-body-extra-small text-dark-text-200 dark:text-light-text-200\"\n            >\n              {{ __('per Maker') }}\n            </p>\n            <template v-if=\"monthlyPrice && annualSavingsPercentage\">\n              <OzBadge\n                v-if=\"isExpanded\"\n                :color-scheme=\"\n                  isPadletQuotaOrFileSizeVariant\n                    ? OzBadgeColorScheme.DisabledInverse\n                    : OzBadgeColorScheme.SelectionInverse\n                \"\n                :text=\"__('Save %{discountPercentage}%', { discountPercentage: annualSavingsPercentage })\"\n                class=\"w-fit\"\n              />\n              <p\n                v-else\n                :class=\"[\n                  'text-body-small',\n                  isPadletQuotaOrFileSizeVariant\n                    ? 'text-dark-text-300 dark:text-light-text-300'\n                    : 'text-grape-500 dark:text-canary-500',\n                ]\"\n              >\n                {{ __('Save %{discountPercentage}%', { discountPercentage: annualSavingsPercentage }) }}\n              </p>\n            </template>\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=\"upgradeGoldMembershipButton\"\n              @click=\"showPaymentSchedules\"\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=\"upgradeGoldMembershipButton\"\n            @click=\"$emit('upgrade')\"\n          />\n          <div\n            v-if=\"variant === Variant.UnderFrameQuota\"\n            :class=\"['text-end text-body-small', isExpanded && 'pe-2', !isExpanded && 'pe-1']\"\n          >\n            <p>{{ __('%{whiteboardFramesUsed} cards made', { whiteboardFramesUsed }) }}</p>\n            <p class=\"font-semibold\">{{ __('under limit') }}</p>\n          </div>\n          <div\n            v-if=\"variant === Variant.AtFrameQuota\"\n            :class=\"['text-end text-body-small', isExpanded && 'pe-2', !isExpanded && 'pe-1']\"\n          >\n            <p>{{ __('%{whiteboardFramesUsed} cards made', { whiteboardFramesUsed }) }}</p>\n            <p class=\"font-semibold\">{{ __('at limit') }}</p>\n          </div>\n          <div\n            v-if=\"variant === Variant.OverFrameQuota\"\n            :class=\"['text-end text-body-small', isExpanded && 'pe-2', !isExpanded && 'pe-1']\"\n          >\n            <p>{{ __('%{whiteboardFramesUsed} cards made', { whiteboardFramesUsed }) }}</p>\n            <p class=\"font-semibold\">{{ __('over 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\n          <OzContainedButton\n            v-if=\"variant === Variant.SignUp && type === Type.Personal\"\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.SignUp && type === Type.Library\"\n            :size-preset=\"isExpanded ? OzContainedButtonSizePreset.H40px : OzContainedButtonSizePreset.H32px\"\n            :text=\"isUserLoggedIn ? __('Create team') : __('Sign up')\"\n            :color-scheme=\"OzContainedButtonColorScheme.Blue\"\n            :href=\"isUserLoggedIn ? '/account/create/team' : '/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"],"names":["Type","Type2","Variant","Variant2","__default__","xPaymentSchedules","ref","isPadletQuotaOrFileSizeVariant","computed","props","variant","colorScheme","value","OzBoxColors","Secondary","Highlight","showPaymentSchedules","trackEvent"],"mappings":"6hCA+FYA,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,iBACAD,EAAAC,EAAA,iBAAA,EAAA,EAAA,mBAbUD,IAAAA,GAAA,CAAA,CAAA,EAgBZ,MAAAE,EAAe,CAAA,4xBAtDTC,EAAoBC,EAAa,EAAK,EAEtCC,EAAiCC,EACrC,IACEC,EAAMC,UAAY,GAClBD,EAAMC,UAAY,GAClBD,EAAMC,UAAY,GAClBD,EAAMC,UAAY,GAClBD,EAAMC,UAAY,GAClBD,EAAMC,UAAY,GAClBD,EAAMC,UAAY,CAAA,EAGhBC,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,mIAE4BC,IAAY,CACvCC,EAAW,UAAW,kBAAmB,KAAM,KAAM,IAAI,EACzDZ,EAAkBO,MAAQ"}