{"version":3,"file":"s-gift-certificate-C7MATgGl.js","sources":["../../../app/frontend/images/logo-v3.svg","../../../app/frontend/vue/src/components/shared/s-gift-certificate.vue","../../../app/frontend/images/gifts-certificate-pic.svg","../../../app/frontend/images/card-arrow.svg"],"sourcesContent":["export default \"__VITE_ASSET__BJv74nMd__\"","<template>\n  <div class=\"cert-preview\">\n    <div class=\"certificate\">\n      <div class=\"certificate__textblock\">\n        <h3 class=\"certificate__header\">\n          Самый важный подарок\n        </h3>\n        <p class=\"certificate__question\">\n          Как начать?\n        </p>\n        <ul class=\"certificate__steps _list-none\">\n          <li class=\"_relative\">\n            <div class=\"_absolute _w-[7px] _h-[7px] _bg-blue-500 _rounded-full _left-[-7px] _top-[4px]\" />\n            Зайдите на&nbsp;yasno.live<br>или скачайте приложение Ясно\n          </li>\n          <li class=\"_relative\">\n            <div class=\"_absolute _w-[7px] _h-[7px] _bg-blue-500 _rounded-full _left-[-7px] _top-[4px]\" />\n            Введите промокод при регистрации или в личном кабинете\n          </li>\n        </ul>\n      </div>\n      <div class=\"certificate__card\">\n        <img\n          alt=\"\"\n          class=\"logo\"\n          src=\"@/images/logo-v3.svg\"\n        >\n        <img\n          alt=\"\"\n          class=\"svg\"\n          src=\"@/images/gifts-certificate-pic.svg\"\n        >\n        <p class=\"_text-center _leading-4\">\n          Промокод\n          <span class=\"certificate__num\">{{ certCode ? certCode : 'GIFT-XXXXXXXXX' }}</span>\n          <br>\n          <span class=\"certificate__num__text\">\n            {{ certText }}\n            <template v-if=\"!isNewGiftsPrices\">по {{ sessionPriceText }}</template>\n          </span>\n        </p>\n        <div class=\"certificate__info-wrapper\">\n          <div class=\"certificate__info\">\n            <div class=\"certificate__info-row\">\n              <p class=\"certificate__name\">\n                <span>{{ fromName }}</span>\n              </p>\n              <p class=\"certificate__names-divider\">\n                <img\n                  alt=\"\"\n                  src=\"@/images/card-arrow.svg\"\n                >\n              </p>\n              <p class=\"certificate__name\">\n                <span>{{ toName }}</span>\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div\n        class=\"certificate-annotation\"\n      >\n        <span class=\"certificate-annotation__text\">Зарегистрироваться до {{ activateResult }}, использовать до {{ expiresResult }}</span>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport moment from 'moment';\n\nconst props = defineProps({\n  certText: {\n    type: String,\n    default: '1 сессия',\n  },\n  fromName: {\n    type: String,\n    default: 'Отправитель',\n  },\n  toName: {\n    type: String,\n    default: 'Получатель',\n  },\n  certCode: {\n    type: [Boolean, String],\n    default: false,\n  },\n  activateBefore: {\n    type: String,\n    default: '',\n  },\n  expiresAfter: {\n    type: String,\n    default: '',\n  },\n  sessionPriceText: {\n    type: String,\n    default: '',\n  },\n  isNewGiftsPrices: Boolean,\n});\n\nconst activateToday = moment(new Date(new Date().setMonth(new Date().getMonth() + 6))).format('dd MMM yyyy');\n// expires since today plus 12 months with RU locale\nconst expiresToday = moment(new Date(new Date().setMonth(new Date().getMonth() + 12))).format('dd MMM yyyy');\n\nconst expiresResult = computed(() => props.expiresAfter || expiresToday);\nconst activateResult = computed(() => props.activateBefore || activateToday);\n\n</script>\n\n<style lang=\"scss\" scoped>\n.cert-preview{\n  display: flex;\n  flex-direction: column;\n  padding-bottom: 46px;\n  @include md() {\n    display: block;\n  }\n}\n\n.certificate-title{\n  padding-top: 74px;\n  position: relative;\n  margin: 0 auto 16px;\n  font-weight: normal;\n  font-size: 12px;\n  line-height: 24px;\n  color: #a2adb8;\n  padding-left: 77px;\n  &:before{\n    position: absolute;\n    content: \"\";\n    width: 115px;\n    height: 106px;\n    background-image: url('@/images/arrow-long.svg');\n    background-size: contain;\n    background-repeat: no-repeat;\n    background-position: center bottom;\n    left: -38px;\n    top: -17px;\n    @include md() {\n      left: 24%;\n    }\n    @include sm() {\n      display: none;\n    }\n  }\n  @include md() {\n\n    padding-left: 0;\n    text-align: center;\n  }\n  @include sm() {\n    padding-top: 13px;\n    padding-left: 0;\n  }\n}\n\n.certificate{\n  border: none;\n  background-image: url('@/images/cert-line.svg');\n  background-repeat: no-repeat;\n  background-position: center bottom;\n  box-sizing: border-box;\n  border-radius: 16px;\n  width: 735px;\n  margin: 0 auto;\n  background-color: #ffffff;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 40px 60px 38px 30px;\n  position: relative;\n  border: 1px solid #EBEBEB;\n\n  &-annotation {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    right: 0;\n    top: 0;\n    height: 100%;\n    width: 34px;\n    &__text {\n      transform: rotate(-90deg);\n      color: #8497A6;\n      position: absolute;\n      font-size: 10px;\n      width: 344px;\n      text-align: center;\n      @include md() {\n        font-size: 3px;\n        z-index: 9;\n        width: 100px;\n        right: -10px;\n      }\n    }\n  }\n  &__info{\n    display: table !important;\n    white-space: nowrap;\n  }\n\n  &__info-wrapper{\n    display: inline-block;\n    margin: 0 auto;\n    margin-bottom: 16px;\n    @include md() {\n      margin-bottom: 0px;\n    }\n  }\n\n  &__info-row{\n    display: table-row;\n  }\n\n  &__name{\n    display: table-cell !important;\n    font-weight: 500;\n    span{\n      vertical-align: middle;\n      font-weight: 500;\n    }\n  }\n\n  &__bg{\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    height: 100%;\n    img{\n      width: 75%;\n      position: absolute;\n      right: 0;\n      bottom: 0;}\n  }\n\n  &__names-divider{\n    display: table-cell;\n    width: 35px;\n    padding: 0 5px;\n    vertical-align: middle;\n    position: relative;\n    top: 1px;\n    @include sm() {\n      width: 30px;\n    }\n    @media print{\n      height: 10px;\n      width: 35px;\n    }\n    img{\n      width: 100%;\n      display: block;\n    }\n  }\n\n  @include md() {\n    box-sizing: border-box;\n    border-radius: 1.0416666667vw;\n    width: 90vw;\n    margin: 0 auto;\n    background-color: #ffffff;\n    display: flex;\n    justify-content: space-between;\n    padding: 6.38vw 3.64vw 5.20vw;\n    padding-top: 20px;\n    padding-bottom: 26px;\n    background-repeat: no-repeat;\n    background-size: 100%;\n    background-position: right bottom;\n  }\n\n  &__textblock:before{\n    width: 30%;\n    position: relative;\n\n    &:before{\n      position: absolute;\n      width: 0.91vw;\n      height: 0.91vw;\n      background-color: $--blue-bright;\n      border-radius: 50%;\n      top: -0.39vw;\n      right: -0.39vw;\n    }\n\n    &:after{\n      position: absolute;\n      width: 0.91vw;\n      height: 0.91vw;\n      background-color: $--blue-bright;\n      border-radius: 50%;\n      bottom: -0.39vw;\n      right: -0.39vw;\n    }\n  }\n\n  &__dots{\n    position: absolute;\n    width: 1px;\n    height: 34px;\n    background-color: $--blue-bright;\n    left: -23px;\n    top: 32px;\n    -webkit-print-color-adjust: exact;\n\n    &-before{\n      content: \"\";\n      position: absolute;\n      width: 7px;\n      height: 7px;\n      background-color: #42B2FC;\n      border-radius: 50%;\n      top: -3px;\n      right: -3px;\n\n      @include md() {\n        position: absolute;\n        width: 0.9114583333vw;\n        height: 0.9114583333vw;\n        background-color: #42B2FC;\n        border-radius: 50%;\n        top: -0.390625vw;\n        right: -0.390625vw;\n      }\n    }\n\n    &-after{\n      content: \"\";\n      position: absolute;\n      width: 7px;\n      height: 7px;\n      background-color: #42b2fc;\n      border-radius: 50%;\n      bottom: -3px;\n      right: -3px;\n\n      @include md() {\n        position: absolute;\n        width: 0.9114583333vw;\n        height: 0.9114583333vw;\n        background-color: #42b2fc;\n        border-radius: 50%;\n        bottom: -0.390625vw;\n        right: -0.390625vw;\n      }\n    }\n\n    @include md() {\n      position: absolute;\n      width: 0.1302083333vw;\n      height: 4.4270833333vw;\n      background-color: $--blue-bright;\n      left: -2.9947916667vw;\n      top: 4.1666666667vw;\n    }\n  }\n\n  &__header{\n    font-size: 36px;\n    line-height: 38px;\n    margin: 5px 26px;\n    font-weight: 500;\n\n    @include md() {\n      font-size: 15px;\n      line-height: 18px;\n      margin: 8px;\n    }\n  }\n\n  &__question{\n    font-size: 12px;\n    font-weight: 500;\n    margin-left: 28px;\n    margin-top: 21px;\n    margin-bottom: 16px;\n    text-transform: uppercase;\n    letter-spacing: 0px;\n    position: relative;\n    color: #a2adb8;\n\n    @include md() {\n      font-size: 6px !important;\n      font-weight: 500;\n      margin: 8px;\n      letter-spacing: normal;\n      line-height: 7.5px;\n    }\n  }\n\n  &__steps{\n    font-size: 12px;\n    margin-top: 1px;\n    letter-spacing: 0px;\n    line-height: 16px;\n    margin: 0;\n    padding: 0;\n    position: relative;\n\n    @include md() {\n      font-size: 2.08vw;\n      margin-top: 0.13vw;\n      letter-spacing: 0.03vw;\n      line-height: 2.86vw;\n      margin: 0;\n      padding: 0;\n      position: relative;\n    }\n\n    li {\n      margin-bottom: 13px;\n      padding-left: 26px;\n\n      &:nth-child(1)::before {\n        content: '';\n        width: 1px;\n        height: 140%;\n        display: block;\n        position: absolute;\n        left: -4px;\n        top: 7px;\n        max-height: 90px;\n        background: #7bc2ff;\n\n        @include md() {\n          height: 120%;\n        }\n      }\n      @include md() {\n        margin-bottom: 4px;\n        padding-left: 8px;\n      }\n    }\n  }\n\n  &__card{\n    box-shadow: 0 7px 44px rgba(193, 193, 193, 0.4);\n    border-radius: 24px;\n    position: relative;\n    width: 383px;\n    height: 250px;\n    display: flex;\n    flex-direction: column;\n    z-index: 9;\n    background-color: #ffffff;\n    -webkit-print-color-adjust: exact;\n    -webkit-filter: blur(0);\n\n    > p{\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 16px;\n      margin: 0 auto;\n      color: #282828 !important;\n      margin-top: auto;\n      margin-bottom: 4px;\n    }\n\n    .svg{\n      margin: 12px auto 8px;\n      width: 53%;\n    }\n\n    .logo{\n      position: absolute;\n      top: 19px;\n      left: 18px;\n      height: 19px;\n      width: 80px;\n    }\n\n    @include md() {\n      box-shadow: 0 0.91vw 5.72vw rgba(193, 193, 193, 0.4);\n      border-radius: 8px;\n      position: relative;\n      width: 100%;\n      height: auto;\n      padding-bottom: 10px;\n      display: flex;\n      flex-direction: column;\n      margin-right: 4.42vw;\n      z-index: 9;\n      background-color: #ffffff;\n\n      .logo{\n        top: 1.43vw;\n        left: 1.30vw;\n        height: 5.20vw;\n        width: 40px;\n      }\n\n      .svg{\n        margin: 5px auto 3px;\n        width: 84px;\n      }\n\n      p{\n        font-size: 7px;\n        line-height: 8px;\n        margin-top: 6px;\n      }\n    }\n  }\n\n  &__num{\n    background: rgba(214, 215, 216, 0.4);\n    border-radius: 4px;\n    padding: 2px 4px;\n    display: inline-block;\n    padding: 0 6px;\n    text-align: center;\n    &__text {\n      font-size: 12px;\n      line-height: 16px;\n      @include md() {\n        font-size: 7px;\n        line-height: 8px;\n      }\n    }\n    @include md() {\n      border-radius: 1.0416666667vw;\n      padding: 0 0.78125vw;\n    }\n  }\n\n  &__textblock{\n    max-width: 240px;\n    position: relative;\n  }\n\n  &__turn{\n    position: absolute;\n    font-size: 10px;\n    text-align: center;\n    color: rgba(40, 40, 40, 0.4);\n    transform: rotate(-90deg);\n    top: 155px;\n    bottom: 0;\n    right: -137px;\n    width: -webkit-fit-content;\n    width: -moz-fit-content;\n    width: fit-content;\n    height: -webkit-fit-content;\n    height: -moz-fit-content;\n    height: fit-content;\n    margin: 0;\n\n    @include md() {\n      font-size: 1.3020833333vw;\n      right: -17.8385416667vw;\n      top: 20.1822916667vw;\n    }\n  }\n}\n</style>\n","export default \"__VITE_ASSET__DC_spQu0__\"","export default \"data:image/svg+xml,%3csvg%20width='44'%20height='16'%20viewBox='0%200%2044%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M32.636%2015.3838C33.8814%2012.8128%2035.0464%2010.8845%2036.131%209.59895H1V7.06807H36.131C35.0464%205.78255%2033.8814%203.85426%2032.636%201.2832H34.7451C37.276%204.21581%2039.9274%206.38514%2042.6993%207.79118V8.87585C39.9274%2010.2417%2037.276%2012.411%2034.7451%2015.3838H32.636Z'%20fill='%23282828'%20stroke='white'/%3e%3c/svg%3e\""],"names":["props","__props","activateToday","moment","Date","setMonth","getMonth","format","expiresToday","expiresResult","computed","expiresAfter","activateResult","activateBefore"],"mappings":"qMAAA,uxBC0EA,MAAMA,EAAQC,EAgCRC,EAAgBC,EAAO,IAAIC,UAASA,MAAOC,UAAS,IAAID,MAAOE,WAAa,KAAKC,OAAO,eAExFC,EAAeL,EAAO,IAAIC,UAASA,MAAOC,UAAS,IAAID,MAAOE,WAAa,MAAMC,OAAO,eAExFE,EAAgBC,GAAS,IAAMV,EAAMW,cAAgBH,IACrDI,EAAiBF,GAAS,IAAMV,EAAMa,gBAAkBX,wzBD/G/C,qHEAA,0eCAA"}