{"version":3,"file":"B7JD6jSb.js","sources":["../../../../components/Payment/PaymentTypes.vue","../../../../components/Payment/PaymentAttentions.vue","../../../../components/Payment/PaymentInfo.vue","../../../../pages/payment.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst paymentTypes = [\n  {\n    title: 'Банковской картой онлайн*',\n    desc: 'Мы принимаем VISA, Mastercard, МИР. Также внедряем Apple Pay и Google Pay**',\n    img: '/card-online.webp',\n  },\n  {\n    title: 'Оплата картой курьеру*',\n    desc: 'Курьер приедет с терминалом. Мы принимаем VISA, Mastercard, МИР',\n    img: '/card.webp',\n  },\n  {\n    title: 'Наличными курьеру',\n    desc: 'Если вы указали в корзине, что необходима сдача, курьер приедет с нужной суммой',\n    img: '/cash.webp',\n  },\n]\n</script>\n\n<template>\n  <ul class=\"payment-types\">\n    <li\n      v-for=\"paymentType in paymentTypes\"\n      :key=\"paymentType.title\"\n      class=\"payment-types__item\"\n    >\n      <div class=\"payment-types__image-wrapper\">\n        <nuxt-img\n          :src=\"paymentType.img\"\n          :alt=\"paymentType.title\"\n          class=\"payment-types__image\"\n          fit=\"contain\"\n          format=\"webp\"\n        />\n      </div>\n\n      <div class=\"payment-types__text\">\n        <div class=\"payment-types__title\">\n          {{ paymentType.title }}\n        </div>\n\n        <div class=\"payment-types__description\">\n          {{ paymentType.desc }}\n        </div>\n      </div>\n    </li>\n  </ul>\n</template>\n\n<style lang=\"scss\" scoped>\n.payment-types {\n  padding: 0;\n  list-style-type: none;\n  @include media('>=desktop-mini') {\n    display: flex;\n    gap: 50px;\n    justify-content: center;\n  }\n\n  &__item {\n    display: flex;\n    gap: 15px;\n    margin-bottom: 20px;\n    &:nth-child(odd) {\n      flex-direction: row-reverse;\n    }\n    @include media('>=desktop-mini') {\n      flex: 0 1 100%;\n      flex-direction: column;\n      gap: 0;\n      align-items: center;\n      max-width: 290px;\n      margin-bottom: 0;\n      font-size: 16px;\n      &:nth-child(odd) {\n        flex-direction: column;\n      }\n    }\n  }\n\n  &__text {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    width: 50%;\n    @include media('>=desktop-mini') {\n      width: auto;\n      text-align: center;\n    }\n  }\n\n  &__title {\n    margin-bottom: 10px;\n    font-size: 16px;\n    font-weight: 800;\n    color: $text-black;\n  }\n\n  &__description {\n    font-size: 14px;\n    font-weight: 600;\n    color: $text-black;\n  }\n\n  &__image-wrapper {\n    width: 50%;\n    height: auto;\n    text-align: center;\n    @include media('>=desktop-mini') {\n      margin-bottom: 30px;\n    }\n  }\n\n  &__image {\n    width: 100%;\n    max-width: 168px;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\n/* Types */\nimport { PaymentPage } from '@/types/api/api-v3/payment'\n\n/* Components */\nimport AppIcon from '@/components/App/AppIcon.vue'\n\ntype Props = {\n  page: PaymentPage\n}\nconst props = defineProps<Props>()\n\nconst attentionsList = computed(() => {\n  const attentions: string[] = []\n\n  if (props.page?.required_1) attentions.push(props.page.required_1)\n  if (props.page?.required_2) attentions.push(props.page.required_2)\n\n  return attentions\n})\n</script>\n\n<template>\n  <ul class=\"payment-attentions\">\n    <li\n      v-for=\"(attention, index) in attentionsList\"\n      :key=\"index\"\n      class=\"payment-attentions__item\"\n    >\n      <div\n        class=\"payment-attentions__icons\"\n        :class=\"{\n          'payment-attentions__icons--duo': attentionsList.length === 2,\n        }\"\n      >\n        <app-icon\n          v-for=\"iconIndex in index + 1\"\n          :key=\"iconIndex\"\n          name=\"star\"\n          size=\"20\"\n          fill-color=\"#837a76\"\n        />\n      </div>\n      <span class=\"payment-attentions__text\">{{ attention }}</span>\n    </li>\n  </ul>\n</template>\n\n<style lang=\"scss\" scoped>\n.payment-attentions {\n  list-style-type: none;\n  @include media('>=desktop-mini') {\n    display: flex;\n    gap: 70px;\n  }\n\n  &__item {\n    display: flex;\n    align-items: baseline;\n    &:not(:last-child) {\n      margin-bottom: 30px;\n    }\n    @include media('>=desktop-mini') {\n      flex-basis: 50%;\n      align-items: flex-start;\n      max-width: 50%;\n      &:not(:last-child) {\n        margin-bottom: 0;\n      }\n    }\n  }\n\n  &__icons {\n    display: flex;\n    flex-shrink: 0;\n    gap: 5px;\n    width: 20px;\n    margin-right: 15px;\n    white-space: nowrap;\n    &--duo {\n      width: 45px;\n    }\n    @include media('>=desktop-mini') {\n      width: auto;\n    }\n  }\n\n  &__text {\n    font-size: 12px;\n    font-weight: 600;\n    color: $text-light;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\ntype Props = {\n  text: string\n}\ndefineProps<Props>()\n\nconst paymentInfo = ref<HTMLDivElement | null>(null)\n</script>\n\n<template>\n  <div ref=\"paymentInfo\" class=\"payment-info\" v-html=\"text\" />\n</template>\n\n<style lang=\"scss\" scoped>\n.payment-info {\n  font-size: 14px;\n\n  :deep(h4) {\n    margin-top: 30px;\n    font-size: 14px;\n    @include media('>=tablet') {\n      font-size: 20px;\n    }\n    @include media('>=desktop-mini') {\n      font-size: 20px;\n    }\n  }\n\n  :deep(h5) {\n    margin-top: 20px;\n    font-size: 12px;\n    font-weight: bold;\n    @include media('>=tablet') {\n      margin-top: 30px;\n      font-size: 14px;\n    }\n    @include media('>=desktop-mini') {\n      margin-top: 30px;\n      font-size: 14px;\n    }\n  }\n\n  :deep(p) {\n    margin-top: 10px;\n    margin-bottom: 0;\n    font-size: 12px;\n    @include media('>=tablet') {\n      margin-top: 20px;\n      font-size: 14px;\n    }\n    @include media('>=desktop-mini') {\n      margin-top: 20px;\n      font-size: 14px;\n    }\n  }\n\n  :deep(a) {\n    margin: 10px 0;\n    font-size: 14px;\n    font-weight: bold;\n    text-decoration: none;\n    &[href*='tel:'] {\n      display: inline-block;\n    }\n    img {\n      width: 24px;\n      height: 24px;\n      margin-right: 10px;\n      vertical-align: middle;\n    }\n  }\n\n  :deep(ul) {\n    padding-left: 16px;\n    margin-bottom: 16px;\n    font-size: 12px;\n    list-style-type: disc;\n    @include media('>=tablet') {\n      font-size: 14px;\n      list-style-type: disc;\n    }\n    @include media('>=desktop-mini') {\n      font-size: 14px;\n      list-style-type: disc;\n    }\n  }\n\n  :deep(li) {\n    margin: 8px 0;\n    @include media('>=tablet') {\n      margin: 4px 0;\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\n/* Stores */\nimport { useAppStore } from '@/store/app/app'\nimport { useCityStore } from '@/store/city/city'\n\n/* Types */\nimport {\n  NotFoundError,\n  ServerError,\n  HttpStatusCode,\n  Success,\n} from '@/api/results'\n\n/* Components */\nimport PaymentTypes from '@/components/Payment/PaymentTypes.vue'\nimport PaymentAttentions from '@/components/Payment/PaymentAttentions.vue'\nimport PaymentWarnings from '@/components/Payment/PaymentWarnings.vue'\nimport PaymentInfo from '@/components/Payment/PaymentInfo.vue'\n\nconst appStore = useAppStore()\n\nconst {\n  cityInfo: { domain },\n} = useCityStore()\n\nusePopupFetch()\n\nconst { data: page, error } = await useAsyncData(async (nuxtApp) => {\n  const result = await nuxtApp?.$apiService.site.fetchPaymentPage()\n\n  if (result instanceof NotFoundError) {\n    createError({\n      statusCode: HttpStatusCode.NOT_FOUND,\n    })\n  }\n\n  if (result instanceof ServerError) {\n    throw createError({\n      statusCode: HttpStatusCode.INTERNAL_SERVER_ERROR,\n    })\n  }\n\n  if (result instanceof Success) {\n    return result.data\n  }\n})\n\nif (error.value) showError(error.value)\n\nconst breadcrumbs = computed(() => page.value?.breadcrumbs || [])\n\nconst isWebview = computed(() => appStore.isWebview)\n\nconst showBreadcrumb = computed(\n  () => breadcrumbs.value?.length !== 0 && !isWebview.value,\n)\n</script>\n\n<template>\n  <div class=\"payment-page\">\n    <app-head\n      :title=\"page?.seo.seo_title\"\n      :seo=\"{\n        title: page?.seo?.seo_title,\n        description: page?.seo?.seo_description,\n        keywords: page?.seo?.seo_keywords,\n      }\"\n    />\n\n    <div class=\"payment-page__wrapper\">\n      <the-breadcrumbs\n        v-if=\"showBreadcrumb\"\n        class=\"payment-page__breadcrumbs\"\n        :breadcrumbs=\"breadcrumbs\"\n        :domain=\"domain\"\n      />\n\n      <h1 class=\"payment-page__title\">\n        {{ page?.page_title }}\n      </h1>\n\n      <div class=\"payment-page__types\">\n        <payment-types />\n      </div>\n\n      <div class=\"payment-page__attentions\">\n        <payment-attentions :page=\"page\" />\n      </div>\n\n      <div class=\"payment-page__warnings\">\n        <payment-warnings :page=\"page\" />\n      </div>\n\n      <div v-if=\"page?.howto_payment\" class=\"payment-page__info\">\n        <payment-info :text=\"page?.howto_payment\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.payment-page {\n  padding-top: 15px;\n  padding-bottom: 50px;\n  @include media('>=tablet') {\n    padding-top: 25px;\n  }\n  @include media('>=desktop-mini') {\n    padding-top: 50px;\n    padding-bottom: 120px;\n  }\n\n  &__wrapper {\n    max-width: 960px;\n    margin: 0 auto;\n  }\n\n  &__breadcrumbs {\n    margin-bottom: 20px;\n  }\n\n  &__title {\n    margin-bottom: 20px;\n    font-size: 18px;\n    font-weight: 800;\n    color: $text-black;\n    @include media('>=tablet') {\n      margin-bottom: 30px;\n      font-size: 24px;\n    }\n    @include media('>=desktop-mini') {\n      margin-bottom: 50px;\n      font-size: 28px;\n    }\n  }\n\n  &__types {\n    margin-bottom: 30px;\n    @include media('>=desktop-mini') {\n      margin-bottom: 70px;\n    }\n  }\n\n  &__attentions {\n    margin-bottom: 40px;\n    @include media('>=desktop-mini') {\n      margin-bottom: 65px;\n    }\n  }\n\n  &__warnings {\n    margin-bottom: 40px;\n    @include media('>=desktop-mini') {\n      margin-bottom: 65px;\n    }\n  }\n}\n</style>\n"],"names":["paymentTypes","props","__props","attentionsList","computed","attentions","_a","_b","paymentInfo","ref","appStore","useAppStore","domain","useCityStore","usePopupFetch","page","error","__temp","__restore","_withAsyncContext","useAsyncData","nuxtApp","result","NotFoundError","createError","HttpStatusCode","ServerError","Success","showError","breadcrumbs","isWebview","showBreadcrumb"],"mappings":";;o4BACA,MAAMA,EAAe,CACnB,CACE,MAAO,4BACP,KAAM,8EACN,IAAK,mBACP,EACA,CACE,MAAO,yBACP,KAAM,kEACN,IAAK,YACP,EACA,CACE,MAAO,oBACP,KAAM,kFACN,IAAK,YACP,CAAA,weCNF,MAAMC,EAAQC,EAERC,EAAiBC,EAAS,IAAM,SACpC,MAAMC,EAAuB,CAAA,EAE7B,OAAIC,EAAAL,EAAM,OAAN,MAAAK,EAAY,cAAuB,KAAKL,EAAM,KAAK,UAAU,GAC7DM,EAAAN,EAAM,OAAN,MAAAM,EAAY,cAAuB,KAAKN,EAAM,KAAK,UAAU,EAE1DI,CAAA,CACR,4jCCbK,MAAAG,EAAcC,EAA2B,IAAI,ubCanD,MAAMC,EAAWC,IAEX,CACJ,SAAU,CAAE,OAAAC,CAAO,GACjBC,EAAa,EAEHC,IAEd,KAAM,CAAE,KAAMC,EAAM,MAAAC,CAAU,GAAA,CAAAC,EAAAC,CAAA,EAAAC,EAAA,SAAMC,EAAa,MAAOC,GAAY,CAClE,MAAMC,EAAS,MAAMD,GAAA,YAAAA,EAAS,YAAY,KAAK,oBAQ/C,GANIC,aAAkBC,GACRC,EAAA,CACV,WAAYC,EAAe,SAAA,CAC5B,EAGCH,aAAkBI,EACpB,MAAMF,EAAY,CAChB,WAAYC,EAAe,qBAAA,CAC5B,EAGH,GAAIH,aAAkBK,EACpB,OAAOL,EAAO,IAChB,EACF,aAAC,CAAA,mBAEGN,EAAM,OAAiBY,EAAAZ,EAAM,KAAK,EAEtC,MAAMa,EAAczB,EAAS,IAAM,OAAA,QAAAE,EAAAS,EAAK,QAAL,YAAAT,EAAY,cAAe,CAAA,EAAE,EAE1DwB,EAAY1B,EAAS,IAAMM,EAAS,SAAS,EAE7CqB,EAAiB3B,EACrB,IAAM,OAAA,QAAAE,EAAAuB,EAAY,QAAZ,YAAAvB,EAAmB,UAAW,GAAK,CAACwB,EAAU,MAAA","debug_id":"3debd420-2490-5dd7-8559-9a4d76825623"}