{"version":3,"file":"PlanCard.931d9528.js","sources":["../../../../components/global/products/PlanCard.vue"],"sourcesContent":["<template>\n  <div class=\"plan-card\" :class=\"`is-${type}`\">\n    <div class=\"plan-card__inner\">\n      <div class=\"plan-card__price-wrapper\">\n        <div class=\"plan-card__price\">\n          <sup v-if=\"planOldPrice\" class=\"plan-card__price-old\">{{ getFormattedMoney(planOldPrice) }}</sup>\n          <sup class=\"plan-card__price-sup\">$</sup>\n          <span class=\"plan-card__price-dollars\" v-html=\"getFormattedDollars(planPrice)\" />\n          <span class=\"plan-card__price-cents\" v-html=\"getFormattedCents(planPrice)\" />\n          <span class=\"plan-card__price-cents\">/m</span>\n          <div v-if=\"hasPromoPrice\" class=\"plan-card__details is-text\">\n            <slot name=\"detailsText\" :offer=\"offerHalfPrice\">6 months half price</slot>\n          </div>\n          <div v-else-if=\"(hasTerm && planOldPrice) || freeDiscount\" class=\"plan-card__details is-text\">\n            <slot name=\"detailsText\" :offer=\"offerHalfPrice\">For the first {{ offerHalfPrice }} months</slot>\n          </div>\n          <div v-else-if=\"hasNoTermDiscount\" class=\"plan-card__details is-text\">\n            <slot name=\"detailsText\" :offer=\"offerHalfPrice\">15% discount for Student Card</slot>\n          </div>\n        </div>\n      </div>\n      <h4 class=\"plan-card__name is-text is-semi-bold is-capitalize\">{{ plan.name }}</h4>\n      <div class=\"plan-card__icons is-text\">\n        <div class=\"plan-card__icon-wrapper\">\n          <gauge-icon class=\"plan-card__icon\" :fill-percentage=\"plan.gaugeFill\" />\n          <div class=\"plan-card__icon-text is-text is-semi-bold\">\n            <div>{{ plan.speed.download }}{{ mbps ? 'Mbps' : '' }} down<sup>†</sup></div>\n            <div>{{ plan.speed.upload }}{{ mbps ? 'Mbps' : '' }} up<sup>†</sup></div>\n          </div>\n        </div>\n        <div v-if=\"plan.hyper && hyperCta\" class=\"plan-card__icon-wrapper is-hyperfibre\">\n          <div class=\"plan-card__link is-text is-semi-bold\">\n            <ui-button\n              tag=\"app-link\"\n              to=\"/hyperfibre/\"\n              class=\"plan-card__link-button is-narrow\"\n              :class=\"hyperCtaModifier ? `is-${hyperCtaModifier}` : ''\"\n            >\n              <slot name=\"hyperCtaLabel\">Find out more</slot>\n            </ui-button>\n          </div>\n        </div>\n        <div v-else class=\"plan-card__icon-wrapper\">\n          <household-icons class=\"plan-card__icon\" :quantity=\"plan.householdSize\" />\n          <div class=\"plan-card__icon-text is-text is-semi-bold\">\n            <span>Household <br />size</span>\n          </div>\n        </div>\n      </div>\n      <div class=\"plan-card__footer\">\n        <ui-button expanded class=\"plan-card__button\" :class=\"ctaModifier ? `is-${ctaModifier}` : ''\" @click=\"onSelect\">\n          <slot name=\"ctaLabel\">Select plan</slot>\n        </ui-button>\n      </div>\n    </div>\n    <popular-plan-icon v-if=\"displayPopularIcon && plan.isMostPopular\" class=\"plan-card__popular-icon\" />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { type PropType } from 'vue';\nimport { type Plan } from '@/types/products';\nimport { getFormattedDollars, getFormattedCents, getFormattedMoney } from '@/utils/money';\nimport UiButton from '@/components/global/ui/UiButton.vue';\nimport HouseholdIcons from '@/components/global/elements/HouseholdIcons.vue';\nimport GaugeIcon from '@/components/global/elements/GaugeIcon.vue';\nimport { BBC_PROMO_CODE, useMemberSignup } from '~/stores/signup';\nimport { computed } from '#imports';\nimport PopularPlanIcon from '~/components/global/elements/PopularPlanIcon.vue';\n\nconst emit = defineEmits(['selected']);\n\ntype PlanType = 'page' | 'signup';\n\nconst props = defineProps({\n  plan: {\n    type: Object as PropType<Plan>,\n    default: () => ({}),\n  },\n  type: {\n    type: String as PropType<PlanType>,\n    default: 'page',\n  },\n  displayPopularIcon: {\n    type: Boolean,\n    default: false,\n  },\n  noTermDiscount: {\n    type: Boolean,\n    default: false,\n  },\n  ctaModifier: {\n    type: String,\n    default: '',\n  },\n  hyperCta: {\n    type: Boolean,\n    default: true,\n  },\n  hyperCtaModifier: {\n    type: String,\n    default: '',\n  },\n  mbps: {\n    type: Boolean,\n    default: true,\n  },\n  promo: {\n    type: String,\n    default: null,\n  },\n});\n\nconst signup = useMemberSignup();\n\nconst hasTerm = computed(() => !signup.signupNoTerm);\n\nconst hasNoTermDiscount = computed(() => !hasTerm.value && props.noTermDiscount);\n\nconst planPrice = computed(() => {\n  if (hasPromo.value) {\n    return hasPromoPrice.value ? props.plan.promo.bbc.price : props.plan.price;\n  }\n\n  if (hasNoTermDiscount.value && props.plan?.noTermDiscountPrice) {\n    return props.plan.noTermDiscountPrice;\n  }\n\n  if (!hasTerm.value && props.plan?.noTermPrice) {\n    return props.plan.noTermPrice;\n  }\n  if (signup.signupDetails.term?.signupPrice && props.plan?.signupPrice) {\n    return props.plan.signupPrice;\n  }\n  return props.plan.price;\n});\n\nconst hasPromo = computed(() => props.promo === BBC_PROMO_CODE);\n\nconst hasPromoPrice = computed(() => !!(hasPromo.value && props.plan?.promo?.bbc?.price && hasTerm.value));\n\nconst planOldPrice = computed(() => {\n  if (hasPromo.value) {\n    if (hasPromoPrice.value) {\n      return props.plan.price;\n    }\n    return null;\n  }\n\n  if (hasNoTermDiscount.value && props.plan?.noTermPrice) {\n    return props.plan.noTermPrice;\n  }\n\n  if (signup.signupDetails.term?.signupPrice && props.plan?.signupPrice) {\n    return props.plan.price;\n  }\n\n  return null;\n});\n\nconst offerHalfPrice = computed(() => signup.offerHalfPrice);\n\nconst freeDiscount = ref(false);\n\nconst onSelect = () => {\n  emit('selected', props.plan);\n};\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@/assets/mixins/__index' as mix;\n\n.plan-card {\n  position: relative;\n\n  &__inner {\n    display: grid;\n    grid-template-columns: max-content 1fr;\n    padding-right: rem(15);\n    overflow: hidden;\n    border-radius: rem(30);\n    gap: rem(10) rem(20);\n    background: var(--dark-pink);\n    color: var(--primary);\n\n    @include mobile {\n      gap: rem(10) rem(18);\n    }\n    @include tiny {\n      gap: rem(10) rem(10);\n    }\n\n    @include desktop {\n      gap: rem(20);\n      padding-right: rem(40);\n      grid-template-columns: max-content 1fr max-content;\n    }\n  }\n\n  &__name {\n    font-size: calc-clamp($mobile, $desktop, 19, 30);\n    place-self: end start;\n\n    @include touch {\n      padding-top: rem(16);\n    }\n\n    @include desktop {\n      font-size: rem(22);\n      grid-column: span 2;\n    }\n\n    &.is-hyper {\n      svg {\n        width: rem(160);\n        height: rem(30);\n        @include mobile {\n          width: rem(140);\n          height: rem(30);\n        }\n      }\n    }\n  }\n\n  &__price {\n    font-weight: 500;\n    display: grid;\n    grid-auto-flow: column;\n    place-content: center;\n    place-items: baseline;\n    place-self: center;\n    line-height: 1;\n    position: relative;\n\n    &-wrapper {\n      display: grid;\n      background: var(--secondary);\n      border-top-right-radius: rem(30);\n      border-bottom-right-radius: rem(30);\n      grid-row: span 3;\n      @include mobile {\n        padding: rem(15) rem(10);\n        min-width: rem(180);\n      }\n      @include tiny {\n        padding: rem(15) rem(5);\n        min-width: rem(110);\n      }\n      @include tablet {\n        min-width: rem(280);\n        padding: rem(15) rem(20);\n      }\n      @include desktop {\n        grid-row: span 2;\n        min-width: rem(300);\n        padding: rem(50) rem(20) rem(45);\n      }\n    }\n\n    &-dollars {\n      font-size: calc-clamp($tablet, $desktop, 24, 70);\n      @include tiny {\n        font-size: rem(20);\n      }\n    }\n\n    &-old {\n      position: absolute;\n      right: 0;\n      top: 0;\n      font-size: calc-clamp($tablet, $desktop, 14, 18);\n      transform: translateY(-90%);\n      @include mobile {\n        left: 50%;\n        right: auto;\n        transform: translate(-50%, -90%);\n        top: rem(-10);\n      }\n\n      &:after {\n        content: '';\n        position: absolute;\n        //background: var(--primary);\n        background: var(--error);\n        display: block;\n        height: rem(2);\n        border-radius: 90px;\n        width: 100%;\n        transform: skew(0, -10deg);\n        bottom: rem(2);\n        transform-origin: left bottom;\n      }\n    }\n\n    &-cents,\n    &-sup {\n      top: rem(10);\n    }\n\n    &-sup {\n      font-size: calc-clamp($tablet, $desktop, 12, 20);\n      align-self: start;\n      transform: translateY(40%);\n      margin-right: 0.2em;\n    }\n\n    &-cents {\n      font-size: calc-clamp($tablet, $desktop, 14, 35);\n    }\n  }\n\n  &__details {\n    font-size: calc-clamp($tablet, $desktop, 13, 14);\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    transform: translateY(100%);\n    font-weight: 400;\n    @include mobile {\n      text-align: center;\n      bottom: rem(-10);\n    }\n    @include tablet {\n      font-weight: 400;\n      padding-left: rem(15);\n    }\n  }\n\n  &__icons {\n    display: grid;\n    gap: rem(7);\n    white-space: nowrap;\n    place-self: start;\n    width: 100%;\n\n    @include desktop {\n      grid-auto-columns: max-content;\n      gap: rem(20);\n      grid-auto-flow: column;\n    }\n  }\n\n  &__icon-wrapper {\n    display: grid;\n    grid-template-columns: rem(70) max-content;\n    align-self: center;\n    justify-items: center;\n    align-items: center;\n    gap: rem(10);\n\n    @include tiny {\n      grid-template-columns: rem(56) max-content;\n      gap: rem(8);\n    }\n\n    @include tablet {\n      grid-template-columns: max-content max-content;\n    }\n\n    &.is-hyperfibre {\n      grid-template-columns: 1fr;\n      display: block;\n      @include touch {\n        margin-top: rem(10);\n      }\n    }\n  }\n\n  &__link {\n    width: 100%;\n    &-button {\n      max-width: rem(240);\n      width: 100%;\n      min-width: 0;\n    }\n  }\n\n  &__icon {\n    &.is-tree {\n      height: rem(35);\n    }\n  }\n\n  &__icon-text {\n    font-size: rem(14);\n    line-height: 1.1;\n    @include tiny {\n      font-size: rem(12);\n    }\n  }\n\n  &__button {\n    width: auto;\n    max-width: rem(240);\n    @include tiny {\n      padding-left: 1em;\n      padding-right: 1em;\n      min-width: 0;\n    }\n\n    &.is-red {\n      background-color: var(--red);\n      border-color: var(--red);\n      @include hover {\n        border-color: var(--red);\n        color: var(--red);\n      }\n    }\n  }\n\n  &__footer {\n    @include touch {\n      padding-bottom: rem(15);\n    }\n  }\n\n  &__popular-icon {\n    position: absolute;\n    top: rem(-40);\n    right: rem(-50);\n    width: rem(180);\n    height: auto;\n\n    @include mobile {\n      top: rem(-20);\n      right: rem(-25);\n      width: rem(120);\n    }\n\n    @include tiny {\n      right: unset;\n      left: rem(-25);\n      width: rem(100);\n    }\n  }\n}\n</style>\n"],"names":["signup","useMemberSignup","hasTerm","computed","hasNoTermDiscount","props","planPrice","hasPromo","hasPromoPrice","_a","_b","_c","_d","BBC_PROMO_CODE","planOldPrice","offerHalfPrice","freeDiscount","ref","onSelect","emit"],"mappings":"2gEAiHMA,EAASC,IAETC,EAAUC,EAAS,IAAM,CAACH,EAAO,YAAY,EAE7CI,EAAoBD,EAAS,IAAM,CAACD,EAAQ,OAASG,EAAM,cAAc,EAEzEC,EAAYH,EAAS,IAAM,aAC/B,OAAII,EAAS,MACJC,EAAc,MAAQH,EAAM,KAAK,MAAM,IAAI,MAAQA,EAAM,KAAK,MAGnED,EAAkB,SAASK,EAAAJ,EAAM,OAAN,MAAAI,EAAY,qBAClCJ,EAAM,KAAK,oBAGhB,CAACH,EAAQ,SAASQ,EAAAL,EAAM,OAAN,MAAAK,EAAY,aACzBL,EAAM,KAAK,aAEhBM,EAAAX,EAAO,cAAc,OAArB,MAAAW,EAA2B,eAAeC,EAAAP,EAAM,OAAN,MAAAO,EAAY,aACjDP,EAAM,KAAK,YAEbA,EAAM,KAAK,KAAA,CACnB,EAEKE,EAAWJ,EAAS,IAAME,EAAM,QAAUQ,CAAc,EAExDL,EAAgBL,EAAS,IAAM,WAAA,OAAC,EAAEI,EAAS,SAASI,GAAAD,GAAAD,EAAAJ,EAAM,OAAN,YAAAI,EAAY,QAAZ,YAAAC,EAAmB,MAAnB,MAAAC,EAAwB,QAAST,EAAQ,OAAM,EAEnGY,EAAeX,EAAS,IAAM,WAClC,OAAII,EAAS,MACPC,EAAc,MACTH,EAAM,KAAK,MAEb,KAGLD,EAAkB,SAASK,EAAAJ,EAAM,OAAN,MAAAI,EAAY,aAClCJ,EAAM,KAAK,aAGhBK,EAAAV,EAAO,cAAc,OAArB,MAAAU,EAA2B,eAAeC,EAAAN,EAAM,OAAN,MAAAM,EAAY,aACjDN,EAAM,KAAK,MAGb,IAAA,CACR,EAEKU,EAAiBZ,EAAS,IAAMH,EAAO,cAAc,EAErDgB,EAAeC,EAAI,EAAK,EAExBC,EAAW,IAAM,CAChBC,EAAA,WAAYd,EAAM,IAAI,CAAA"}