{"version":3,"file":"NeonMembershipTier-e7c3a913.js","sources":["../../../app/javascript/vuecomponents/NeonMembershipTier.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { __ } from '@@/bits/intl'\nimport { numberToHumanSize } from '@@/bits/numbers_helper'\nimport OzBox, { OzBoxColors } from '@@/library/v4/components/OzBox.vue'\nimport OzContainedButton, {\n  OzContainedButtonColorScheme,\n  OzContainedButtonSizePreset,\n} from '@@/library/v4/components/OzContainedButton.vue'\nimport OzIcon from '@@/library/v4/components/OzIcon.vue'\nimport OzLoadingSpinner from '@@/library/v4/components/OzLoadingSpinner.vue'\nimport OzMembershipTierGrid from '@@/library/v4/components/OzMembershipTierGrid.vue'\nimport { computed } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    variant: Variant\n    type?: Type\n    isWhiteboard: boolean\n    isExpanded: boolean\n    isLoadingPlanInformation: boolean\n    advertisedWallsQuota: number\n    advertisedFileSizeQuota: string\n    advertisedWhiteboardFrameQuota: number\n    isLoadingAdvertisedQuotas: boolean\n    whiteboardFramesUsed?: number\n    wallsUsed?: number\n    fileSize?: number\n    xChecked?: boolean\n    isUserLoggedIn?: boolean\n    continueUrl?: string\n    colorScheme?: OzBoxColors // allow parent to override color scheme\n  }>(),\n  {\n    type: Type.Personal,\n    wallsUsed: undefined,\n    whiteboardFramesUsed: undefined,\n    fileSize: undefined,\n    xChecked: false,\n    isUserLoggedIn: undefined,\n    continueUrl: undefined,\n    colorScheme: undefined,\n  },\n)\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 (props.variant === Variant.Continue) return OzBoxColors.Pink\n  return null\n})\n</script>\n\n<script lang=\"ts\">\nexport enum Type {\n  Library,\n  Personal,\n}\n\nexport enum Variant {\n  UnderFrameQuota,\n  AtFrameQuota,\n  OverFrameQuota,\n  UnderPadletQuota,\n  AtPadletQuota,\n  OverPadletQuota,\n  FileSize,\n  SignUp,\n  Continue,\n  Default,\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        isExpanded && 'min-h-13',\n        !isExpanded && 'min-h-25',\n      ]\"\n      :is-expanded=\"isExpanded\"\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\">{{ __('Neon') }}</template>\n            <template v-if=\"type === Type.Library\">{{ __('Team Neon') }}</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\">\n            {{ __('%{wallQuota} padlets /team', { wallQuota: advertisedWallsQuota }) }}\n          </p>\n\n          <slot name=\"secondaryBenefitText\">\n            <p v-if=\"isWhiteboard\">\n              {{ __('%{frameLimit} card limit', { frameLimit: advertisedWhiteboardFrameQuota }) }}\n            </p>\n            <p v-else>\n              {{ __('%{fileSizeLimit}MB /upload', { fileSizeLimit: advertisedFileSizeQuota }) }}\n            </p>\n          </slot>\n        </div>\n      </template>\n      <template #third>\n        <div :class=\"[isExpanded && 'pe-0', !isExpanded && 'pe-1']\">\n          <div v-if=\"isLoadingPlanInformation\" :class=\"[isExpanded && 'ms-4', !isExpanded && 'me-2']\">\n            <OzLoadingSpinner :size=\"24\" />\n          </div>\n          <div v-else :class=\"['text-body-posts', isExpanded && 'text-start', !isExpanded && 'text-end']\">\n            <p>{{ __('Free') }}</p>\n          </div>\n        </div>\n      </template>\n      <template #fourth>\n        <slot name=\"endContent\">\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          <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            :color-scheme=\"OzContainedButtonColorScheme.Blue\"\n            :text=\"isUserLoggedIn ? __('Create team') : __('Sign up')\"\n            :href=\"isUserLoggedIn ? '/account/create/team' : '/auth/signup'\"\n          />\n          <OzContainedButton\n            v-if=\"variant === Variant.Continue\"\n            data-testid=\"libraryNeonContinueButton\"\n            :size-preset=\"isExpanded ? OzContainedButtonSizePreset.H40px : OzContainedButtonSizePreset.H32px\"\n            :text=\"__('Continue')\"\n            :href=\"continueUrl\"\n          />\n        </slot>\n      </template>\n    </OzMembershipTierGrid>\n  </OzBox>\n</template>\n"],"names":["Type","Type2","Variant","Variant2","__default__","isPadletQuotaOrFileSizeVariant","computed","props","variant","colorScheme","value","OzBoxColors","Secondary","Pink"],"mappings":"swBAgEYA,GAAAA,IACVA,EAAAC,EAAA,QAAA,CAAA,EAAA,UACAD,EAAAC,EAAA,SAAA,CAAA,EAAA,WAFUD,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,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,CAAA,EAAA,WACAD,EAAAC,EAAA,QAAA,CAAA,EAAA,UAVUD,IAAAA,GAAA,CAAA,CAAA,EAaZ,MAAAE,EAAe,CAAA,wiBAtCTC,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,UACzDL,EAAMC,UAAY,EAAyBG,EAAYE,KACpD,IACR"}