{"version":3,"mappings":";ukDAaA,MAAMA,EAAeC,EAAW,EAC1BC,EAAYC,EAAa,EACzBC,EAAYC,EAAU,EACtBC,EAAWC,EAAS,IAAMH,EAAU,WAAW,EAC/CI,EAAiBD,EAAS,IAAML,EAAU,iBAAiB,EAC3DO,EAAYF,EAAS,IAAML,EAAU,YAAY,EACjDQ,EAAmBH,EAAS,IAAML,EAAU,mBAAmB,EAC/DS,EAAwBJ,EAAS,IAAMP,EAAa,wBAAwB,EAC5EY,EAAiBL,EAAS,IAAML,EAAU,cAAc,EACxDW,EAAUN,EAAS,IAAML,EAAU,eAAe,EAClDY,EAAcC,GACdH,EAAe,MAAcG,EACrBA,GAAOA,EAAK,QAAQ,QAAS,KAAK","names":["tariffsStore","useTariffs","mainStore","useMainStore","cityStore","useCities","houseUrl","computed","providerClient","oldClient","addressWOTariffs","passThroughProviderId","disabledPortal","partner","shortMonth","text"],"ignoreList":[],"sources":["../../../../components/tariff-page/TariffModalPrice.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useMainStore } from '~/store/main/main.store'\nimport { useTariffs } from '~/store/tariffs/tariffs.store'\nimport { useCities } from '~/store/cites/cities.store'\n\ndefineProps({\n  tariff: {},\n  selectedTvBox: {},\n  selectedRouter: {},\n  routerPayment: {},\n  tvBoxPayment: {},\n})\n\nconst tariffsStore = useTariffs()\nconst mainStore = useMainStore()\nconst cityStore = useCities()\nconst houseUrl = computed(() => cityStore.getHouseUrl)\nconst providerClient = computed(() => mainStore.getProviderClient)\nconst oldClient = computed(() => mainStore.getOldClient)\nconst addressWOTariffs = computed(() => mainStore.getAddressWOTariffs)\nconst passThroughProviderId = computed(() => tariffsStore.getPassThroughProviderId)\nconst disabledPortal = computed(() => mainStore.disabledPortal)\nconst partner = computed(() => mainStore.getDomainConfig)\nconst shortMonth = (text: string) => {\n  if (disabledPortal.value) return text\n  else return text ? text.replace(/мес.*/, 'мес') : text\n}\n</script>\n\n<template>\n  <div\n    class=\"d-flex flex-column tm-price\"\n  >\n    <p class=\"tm-price__title headline-3\">\n      Стоимость тарифа\n    </p>\n\n    <div\n      v-if=\"\n        tariff.payment.complexPrice?.length > 1\n      \"\n      class=\"tm-price__complex d-flex flex-column\"\n    >\n      <div\n        v-for=\"(price, index) in tariff.payment.complexPrice\"\n        :key=\"'complex' + index\"\n        class=\"tm-price__complex-price d-flex flex-column align-start\"\n        :class=\"{\n          'white--text tm-price__complex-promo title-5':\n            price.isPromoPrice,\n          'white--text tm-price__complex-overpromo subhead-3':\n            price.promoDisplayPercents && !price.isPromoPrice,\n          'tm-price__complex-month':\n            !price.promoDisplayPercents,\n        }\"\n      >\n        <div\n          v-if=\"price.promoDisplayPercents\"\n          class=\"d-flex align-center\"\n        >\n          <p\n            v-if=\"price.isPromoPrice\"\n            class=\"headline-4 text-no-wrap\"\n            style=\"margin-right: 6px;\"\n          >\n            {{ price.price }} ₽/мес\n          </p>\n          <span class=\"d-block\">{{\n            price.isPromoPrice\n              ? shortMonth(price.promoDisplayPercents)\n              : price.promoDisplay\n          }}</span>\n        </div>\n        <p\n          v-else\n          class=\"title-4\"\n        >\n          {{ price.price }} ₽/мес\n          <span class=\"title-5\">с{{ price.fromMonth === 2 ? \"о\" : \"\" }}\n            {{ price.fromMonth }}-го мес<span>яца</span></span>\n        </p>\n      </div>\n    </div>\n    <div\n      v-else\n      class=\"tm-price__price-monthly headline-4\"\n    >\n      {{ tariff.payment.complexPrice[0].price }} ₽/мес\n    </div>\n    <p class=\"gray-dark--text title-5\">\n      <span\n        class=\"tm-price__total-key black--text gray-darker--bg\"\n        style=\"border-radius: 4px; padding: 0 4px\"\n      >Подключение {{\n        tariff.payment.installPayment || tariff.payment.installPaymentMax || tariff.payment.installPaymentVaries\n          ? (tariff.payment.installPayment || 0) + (tariff.payment.installPaymentMax ? '-' + tariff.payment.installPaymentMax : '') + \" ₽\"\n          : \"бесплатно\"\n      }}<span\n        v-if=\"tariff.payment.installPaymentVaries\"\n        class=\"mask-icon mask-info mask-size-md secondary-dark--text d-inline-flex\"\n        style=\"margin-left: 4px; margin-bottom: -4px; min-width: 20px\"\n      ><LazyVTooltip\n        activator=\"parent\"\n      >\n        <p style=\"max-width: 280px\">Точную стоимость специалист провайдера рассчитает индивидуально во время телефонного звонка. Конечная сумма зависит от сложности монтажа и технических условий при подключении по вашему адресу.</p>\n      </LazyVTooltip></span></span>\n    </p>\n    <div\n      v-if=\"\n        tariff.payment.prepaidPayment\n          && tariff.payment.prepaidPayment\n            > (tariff.payment.promoPrice || tariff.payment.price)\n      \"\n      class=\"d-flex justify-between relative title-5 tm-price__price-prepay\"\n    >\n      <span\n        class=\"tm-price__total-key gray-dark--text d-flex align-center\"\n      >Авансовый платеж\n        <span>\n          <img\n            loading=\"lazy\"\n            src=\"@/assets/images/svg/help.svg\"\n            alt=\"help\"\n            class=\"d-flex\"\n            style=\"margin-left: 4px; opacity: .7; width: 20px; height: 20px;\"\n          >\n          <LazyVTooltip\n            activator=\"parent\"\n          >\n            <div\n              data-test=\"popper-mouseover\"\n              class=\"subhead-3\"\n              style=\"max-width: 250px\"\n            >\n              Оплата провайдеру аванса сразу за несколько первых месяцев. В счет абонентской платы\n            </div>\n          </LazyVTooltip>\n        </span>\n      </span><span>{{\n        (tariff.payment.prepaidPayment\n          && tariff.payment.prepaidPayment\n            > (tariff.payment.promoPrice || tariff.payment.price)\n          ? tariff.payment.prepaidPayment\n          : 0) + \" ₽\"\n      }}</span>\n    </div>\n\n    <div\n      v-if=\"tariff.devices?.length\n        && (selectedTvBox?.length\n          || selectedRouter?.length)\n      \"\n      class=\"tm-price__order title-5\"\n    >\n      <div class=\"tm-price__order-device\">\n        <template v-if=\"routerPayment?.length\">\n          <div\n            v-for=\"(router, i) in routerPayment\"\n            :key=\"'router' + i\"\n            class=\"d-flex justify-between\"\n          >\n            <span class=\"gray-dark--text text-no-wrap\">\n              {{ router?.type }}\n            </span>\n            <span class=\"text-no-wrap\">{{\n              router && router.included\n                ? \"входит в тариф\"\n                : router && router.monthlyPayment\n                  ? router.monthlyPayment + \" ₽/мес\"\n                  : router && router.cost\n                    ? router.cost + \" ₽\"\n                    : \"входит в тариф\"\n            }}\n            </span>\n          </div>\n        </template>\n        <template v-if=\"tvBoxPayment?.length\">\n          <div\n            v-for=\"(tvBox, i) in tvBoxPayment\"\n            :key=\"`tvBPayment` + i\"\n            class=\"d-flex justify-between title-5\"\n          >\n            <span class=\"gray-dark--text\">\n              ТВ-приставка {{ i ? i + 1 + \"-я\" : \"\" }}\n            </span>\n            <span>{{\n              tvBox.included\n                ? \"входит в тариф\"\n                : tvBox.monthlyPayment\n                  ? tvBox.monthlyPayment + \" ₽/мес\"\n                  : tvBox.cost\n                    ? tvBox.cost + \" ₽\"\n                    : \"\"\n            }}</span>\n          </div>\n        </template>\n      </div>\n    </div>\n    <div\n      v-if=\"!(((houseUrl && !tariff.fromAddress) || (oldClient && +providerClient === +tariff.provider.id) || (addressWOTariffs && passThroughProviderId !== tariff.provider.id)))\"\n      class=\"d-flex flex-column tm-price__actions\"\n    >\n      <d-btn\n        class=\"flex-grow fwm tm-price__action\"\n        color=\"primary\"\n        data-test=\"connect-button-tariff-side-from\"\n        style=\"background: var(--mainColor); color: var(--font2);\"\n        @click=\"$emit('showOrderFast')\"\n      >\n        Подключить\n      </d-btn>\n      <d-btn\n        v-if=\"!partner\"\n        class=\"flex-grow fwm tm-price__action\"\n        color=\"primary-light\"\n        data-test=\"consultation-button-tariff-side-form\"\n        @click=\"$emit('showOrderConsult')\"\n      >\n        Консультация\n      </d-btn>\n    </div>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.tm-price {\n\n  .mask-info {\n    mask-image: url('@/assets/images/svg/info.svg');\n  }\n  &__title {\n    margin-bottom: 12px;\n    //@media (max-width: getBreakpoint(desktop)) {\n    //  display: none;\n    //}\n  }\n  &__order {\n    &-title {\n      margin-bottom: 12px;\n    }\n    &-device {\n      margin-top: 8px;\n      border-top: 1px solid color(gray-darker);\n      padding-top: 8px;\n      padding-bottom: 4px;\n      & > div {\n        span:first-child {\n          width: 60px;\n          margin-right: 12px;\n          flex-grow: 1;\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n      }\n    }\n  }\n\n  &__complex {\n    &-promo {\n      p {\n        background: var(--price);\n        border-radius: 8px;\n        padding: 0 8px;\n        margin-right: auto;\n        margin-bottom: 4px;\n        @media (max-width: getBreakpoint(tablet)) {\n          border-radius: 5px;\n          padding: 0 5px;\n        }\n      }\n      span {\n        background: var(--price);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n      }\n    }\n    &-overpromo {\n      background: var(--price);\n      position: relative;\n      border-radius: 4px;\n      margin-right: auto;\n      margin-bottom: 6px;\n      @media (max-width: getBreakpoint(tablet)) {\n        margin-bottom: 8px;\n      }\n      span {\n        position: relative;\n        padding: 2px 4px;\n        background: color(gradient);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        @media (max-width: getBreakpoint(tablet)) {\n          padding: 0 3px;\n        }\n      }\n      &:before {\n        content: \"\";\n        position: absolute;\n        top: 1px;\n        left: 1px;\n        right: 1px;\n        bottom: 1px;\n        background: color(white);\n        border-radius: 3px;\n      }\n    }\n    &-month {\n      margin-bottom: 8px;\n      @media (max-width: getBreakpoint(desktop)) {\n        margin-bottom: 4px;\n      }\n      span {\n        @media (max-width: getBreakpoint(tablet)) {\n          span {\n            display: none;\n          }\n        }\n      }\n    }\n  }\n\n  &__price {\n    &-monthly {\n      padding: 2px 4px;\n      background-color: color(white);\n      border-radius: 8px;\n      margin-right: auto;\n      @media (max-width: getBreakpoint(tablet)) {\n        border-radius: 5px;\n      }\n    }\n    &-prepay {\n      margin-top: 8px;\n      @media (max-width: getBreakpoint(desktop)) {\n        margin-top: 4px;\n        justify-content: flex-start;\n      }\n      span:last-child {\n        @media (max-width: getBreakpoint(desktop)) {\n          margin-left: 8px;\n        }\n      }\n    }\n  }\n\n  &__total {\n    & > div {\n      margin-bottom: 8px;\n\n      & > span {\n        .d-icon {\n          margin-left: 4px;\n        }\n      }\n    }\n\n    &-promo {\n      margin-bottom: -8px !important;\n      color: color(white);\n      background: color(gradient);\n      padding: 2px 12px;\n      border-radius: 28px;\n      margin-left: auto;\n    }\n    & > p.gray-dark--text {\n      margin-bottom: 12px;\n    }\n\n    &:deep(.d-btn) {\n      &.d-btn--white-primary {\n        border: none;\n        box-shadow: none;\n      }\n\n      @media (max-width: getBreakpoint(tablet)) {\n        height: 44px;\n      }\n      @media (max-width: getBreakpoint(mobile-lg)) {\n        height: 40px;\n      }\n      @media (max-width: getBreakpoint(mobile-md)) {\n        height: 36px;\n      }\n    }\n  }\n  &__actions {\n    gap: 16px;\n    margin-top: 8px;\n    @media (max-width: getBreakpoint(desktop)) {\n      flex-direction: row-reverse;\n      gap: 8px;\n    }\n  }\n\n  &__action {\n    max-height: 48px;\n    @media (max-width: getBreakpoint(tablet)) {\n      height: 48px;\n    }\n    @media (max-width: getBreakpoint(mobile-lg)) {\n      height: 42px;\n    }\n    @media (max-width: getBreakpoint(mobile-md)) {\n      height: 40px;\n    }\n    &.d-btn--white-primary {\n      color: var(--mainColor);\n      border: unset !important;\n      box-shadow: unset !important;\n      padding: 0 !important;\n      margin-left: auto;\n      margin-right: auto;\n      width: unset !important;\n      @media (max-width: getBreakpoint(desktop)) {\n        padding: 8px 16px !important;\n        border: 1px solid var(--mainColor) !important;\n      }\n    }\n  }\n}\n</style>\n"],"file":"_nuxt/B5oQUog1.js"}