{"version":3,"file":"P9IiGPpo.js","sources":["../../../../components/Modal/CallMeSegmentation.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"parent\"\n    class=\"relative modal-segmentation d-flex white--bg\"\n  >\n    <div\n      class=\"modal-segmentation__close d-flex align-center justify-center\"\n      @click=\"$emit('close')\"\n    >\n      <img\n        loading=\"lazy\"\n        src=\"@/assets/images/svg/close.svg\"\n        alt=\"close\"\n      >\n    </div>\n    <div\n      v-if=\"!qTypeResult\"\n      class=\"d-flex flex-column modal-segmentation__wrap\"\n      data-test=\"segmentation-modal\"\n    >\n      <div class=\"modal-segmentation__title relative\">\n        <p class=\"headline-3\">\n          Вас интересует?\n        </p>\n      </div>\n\n      <p\n        class=\"modal-segmentation__chbx\"\n        data-test=\"new-connection\"\n        :class=\"{ active: qType === 'new' }\"\n        @click=\"qType = 'new'\"\n      >\n        <span\n          class=\"white--text d-flex\"\n          :class=\"qType === 'new' ? 'primary--bg' : 'white--bg'\"\n        >\n          <span\n            class=\"mask-icon mask-size-lg mask-ischecked\"\n          /></span>Новое подключение домашнего интернета\n      </p>\n      <p\n        class=\"modal-segmentation__chbx\"\n        data-test=\"current-user\"\n        :class=\"{ active: qType === 'old' }\"\n        @click=\"qType = 'old'\"\n      >\n        <span\n          class=\"white--text d-flex\"\n          :class=\"qType === 'old' ? 'primary--bg' : 'white--bg'\"\n        >\n          <span\n            class=\"mask-icon mask-size-lg mask-ischecked\"\n          /></span>Вопросы по действующему подключению\n        <span class=\"gray-dark--text\">(техподдержка, отключение, оплата)</span>\n      </p>\n      <d-btn\n        :disabled=\"!qType\"\n        class=\"modal-segmentation__submit modal-segmentation__chbx-submit\"\n        color=\"primary\"\n        size=\"medium\"\n        data-test=\"submit\"\n        @click=\"selectQType\"\n      >\n        Выбрать\n      </d-btn>\n    </div>\n    <div\n      v-else-if=\"qType === 'old'\"\n      class=\"d-flex flex-column modal-segmentation__wrap\"\n      data-test=\"segmentation-modal\"\n    >\n      <div class=\"modal-segmentation__title relative\">\n        <p class=\"headline-3\">\n          Вопросы по действующему подключению\n        </p>\n      </div>\n\n      <div class=\"modal-segmentation__support\">\n        <p>Вы являетесь действующим абонентом {{ provider.name }}</p>\n        <p>\n          Мы не сможем ответить на вопросы по действующему подключению или\n          сменить ваш текущий тариф.\n        </p>\n        <p>Рекомендуем позвонить по номеру</p>\n        <a\n          class=\"secondary-dark--text fwm\"\n          :href=\"\n            'tel:' + (phone && phone.support ? phone.support.call_number : '')\n          \"\n          @click.prevent=\"callClick(phone.support.call_number, 'SHOW_SUPPORT')\"\n        >{{\n          phone && phone.support && phone.support.call_number\n            ? phone.support.display_number\n            : \"8 800 ... .. ..\"\n        }}</a>\n        <span class=\"gray-dark--text d-block\">Звонок бесплатный по РФ</span>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useMainStore } from '~/store/main/main.store'\nimport { createInteraction } from '~/composible/createInteraction'\nimport { callsApi } from '~/api'\n\nconst props = defineProps({\n  target: {\n    type: String,\n  },\n  provider: {},\n})\nconst emit = defineEmits(['close', 'showCallDialog'])\n\nconst $gtm = useGtm()\nconst parent = ref()\nconst qType = ref()\nconst qTypeResult = ref()\nconst interactionsSended = computed(() => mainStore.getInteractionsSended)\nconst phone = ref()\nconst segmentationActive = computed(() => mainStore.getSegmentationActive)\n\nconst mainStore = useMainStore()\nconst mainDomain = computed(() => mainStore.getMainDomain)\nconst oldClientCookie = useCookie('oldClient', { maxAge: 60 * 60 * 24 })\nconst providerClientCookie = useCookie('providerClient', { maxAge: 60 * 60 * 24 })\n\nconst getPhone = async () => {\n  phone.value = (\n    await callsApi.getCallsGeneral({\n      providerId: props.provider!.id,\n      domain: mainDomain.value,\n    })\n  ).data\n}\n\nonBeforeMount(async () => {\n  if (segmentationActive.value) {\n    qType.value = 'old'\n    selectQType()\n    getPhone()\n  }\n})\nconst { cI } = createInteraction()\n\nconst callClick = (number: string, type: string) => {\n  window.open('tel:' + number, '_self')\n  if (!interactionsSended.value) {\n    $gtm.trackEvent({\n      event: 'trackEvent',\n      category: 'phonelink',\n      action: 'support',\n    })\n    mainStore.$patch({\n      interactionsSended: true,\n    })\n    cI(\n      true,\n      undefined,\n      { provider_id: props.provider?.id },\n      { request_type: type },\n      undefined,\n      undefined,\n    )\n  }\n}\nconst selectQType = () => {\n  if (qType.value === 'old') {\n    qTypeResult.value = qType.value\n    getPhone()\n    if (!interactionsSended.value) {\n      mainStore.$patch({\n        interactionsSended: true,\n      })\n      cI(\n        true,\n        undefined,\n        { provider_id: props.provider?.id },\n        { request_type: 'SHOW_SUPPORT' },\n        undefined,\n        undefined,\n      )\n    }\n    $gtm.trackEvent({\n      event: 'trackEvent',\n      category: 'segmentation',\n      action: 'blocked',\n    })\n    mainStore.$patch({\n      oldClient: true,\n      providerClient: props.provider?.id,\n    })\n    oldClientCookie.value = true\n    providerClientCookie.value = props.provider?.id\n  }\n  else if (qType.value === 'new') {\n    emit('showCallDialog')\n    emit('close')\n  }\n}\n</script>\n\n<style scoped lang=\"scss\">\n.modal-segmentation {\n  width: 600px;\n  border-radius: 16px;\n  @media (max-width: getBreakpoint(tablet)) {\n    border-radius: 0;\n  }\n\n  .mask-ischecked {\n    mask-image: url('@/assets/images/svg/ischecked.svg');\n  }\n  &__close {\n    position: absolute;\n    right: 12px;\n    top: 12px;\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    cursor: pointer;\n    background: color(gray-darker);\n    img {\n      opacity: .7;\n      transition: opacity .24s;\n    }\n\n    &:hover {\n      img {\n        opacity: 1;\n      }\n    }\n  }\n  &__title {\n    margin-bottom: 16px;\n  }\n\n  &__wrap {\n    padding: 56px 24px;\n  }\n\n  &__support {\n    p {\n      font-size: fontSize(headline-8);\n      line-height: 1.4;\n      margin-bottom: 8px;\n\n      @media (max-width: getBreakpoint(mobile-lg)) {\n        font-size: 17px;\n      }\n      @media (max-width: getBreakpoint(mobile-md)) {\n        font-size: fontSize(title);\n        line-height: 1.5;\n      }\n    }\n    a {\n      font-size: fontSize(headline-5);\n      line-height: 1.4;\n      transition: color 0.24s;\n      &:hover {\n        color: color(primary);\n      }\n      @media (max-width: getBreakpoint(mobile-lg)) {\n        font-size: 23px;\n      }\n      @media (max-width: getBreakpoint(mobile-md)) {\n        font-size: fontSize(headline-6);\n      }\n    }\n    span {\n      font-size: fontSize(label);\n      @media (max-width: getBreakpoint(mobile-lg)) {\n        font-size: 10px;\n      }\n      @media (max-width: getBreakpoint(mobile-md)) {\n        font-size: fontSize(small);\n      }\n    }\n  }\n\n  &__chbx {\n    position: relative;\n    padding-left: 32px;\n    cursor: pointer;\n    margin-bottom: 16px;\n    &>span.d-flex {\n      position: absolute;\n      border-radius: 50%;\n      left: 0;\n    }\n\n    &:not(.active) {\n      & > span {\n        border: 1px solid color(gray-p);\n      }\n    }\n\n    &-submit {\n      margin-top: 8px;\n      margin-bottom: 16px !important;\n      margin-right: auto;\n      padding: 16px 32px;\n    }\n  }\n\n  @media (max-width: getBreakpoint(tablet)) {\n    flex-wrap: wrap;\n    width: unset;\n    &.focus-active {\n      .focus-hide {\n        display: none;\n      }\n    }\n  }\n}\n</style>\n"],"names":["props","__props","emit","__emit","$gtm","useGtm","parent","ref","qType","qTypeResult","interactionsSended","computed","mainStore","phone","segmentationActive","useMainStore","mainDomain","oldClientCookie","useCookie","providerClientCookie","getPhone","callsApi","onBeforeMount","selectQType","cI","createInteraction","callClick","number","type","_a","_b","_c"],"mappings":"8wBA0GA,MAAMA,EAAQC,EAMRC,EAAOC,EAEPC,EAAOC,IACPC,EAASC,IACTC,EAAQD,IACRE,EAAcF,IACdG,EAAqBC,EAAS,IAAMC,EAAU,qBAAqB,EACnEC,EAAQN,IACRO,EAAqBH,EAAS,IAAMC,EAAU,qBAAqB,EAEnEA,EAAYG,IACZC,EAAaL,EAAS,IAAMC,EAAU,aAAa,EACnDK,EAAkBC,EAAU,YAAa,CAAE,OAAQ,GAAK,GAAK,GAAI,EACjEC,EAAuBD,EAAU,iBAAkB,CAAE,OAAQ,GAAK,GAAK,GAAI,EAE3EE,EAAW,SAAY,CACrBP,EAAA,OACJ,MAAMQ,EAAS,gBAAgB,CAC7B,WAAYrB,EAAM,SAAU,GAC5B,OAAQgB,EAAW,KACpB,CAAA,GACD,IAAA,EAGJM,EAAc,SAAY,CACpBR,EAAmB,QACrBN,EAAM,MAAQ,MACFe,IACHH,IACX,CACD,EACK,KAAA,CAAE,GAAAI,GAAOC,IAETC,EAAY,CAACC,EAAgBC,IAAiB,OAC3C,OAAA,KAAK,OAASD,EAAQ,OAAO,EAC/BjB,EAAmB,QACtBN,EAAK,WAAW,CACd,MAAO,aACP,SAAU,YACV,OAAQ,SAAA,CACT,EACDQ,EAAU,OAAO,CACf,mBAAoB,EAAA,CACrB,EACDY,EACE,GACA,OACA,CAAE,aAAaK,EAAA7B,EAAM,WAAN,YAAA6B,EAAgB,EAAG,EAClC,CAAE,aAAcD,CAAK,EACrB,OACA,MAAA,EAEJ,EAEIL,EAAc,IAAM,WACpBf,EAAM,QAAU,OAClBC,EAAY,MAAQD,EAAM,MACjBY,IACJV,EAAmB,QACtBE,EAAU,OAAO,CACf,mBAAoB,EAAA,CACrB,EACDY,EACE,GACA,OACA,CAAE,aAAaK,EAAA7B,EAAM,WAAN,YAAA6B,EAAgB,EAAG,EAClC,CAAE,aAAc,cAAe,EAC/B,OACA,MAAA,GAGJzB,EAAK,WAAW,CACd,MAAO,aACP,SAAU,eACV,OAAQ,SAAA,CACT,EACDQ,EAAU,OAAO,CACf,UAAW,GACX,gBAAgBkB,EAAA9B,EAAM,WAAN,YAAA8B,EAAgB,EAAA,CACjC,EACDb,EAAgB,MAAQ,GACHE,EAAA,OAAQY,EAAA/B,EAAM,WAAN,YAAA+B,EAAgB,IAEtCvB,EAAM,QAAU,QACvBN,EAAK,gBAAgB,EACrBA,EAAK,OAAO,EACd"}