{"version":3,"file":"iasab7pp.js","sources":["../../../../../common/assets/images/howToBuy/1.svg","../../../../../common/assets/images/howToBuy/2.svg","../../../../../common/assets/images/howToBuy/3.svg","../../../../../common/components/AwHowToBuy.vue"],"sourcesContent":["export default \"__VITE_ASSET__DTQ_6ktr__\"","export default \"__VITE_ASSET__BVbHHYa6__\"","export default \"__VITE_ASSET__CliGtwem__\"","<template>\n  <div>\n    <div :class=\"$style.cardWrapper\">\n      <template v-for=\"(item, index) in cards\">\n        <template v-if=\"item.arrow\">\n          <lv-icon\n            v-if=\"screenRange['tablet-min']\"\n            :key=\"`if-${index}`\"\n            name=\"dashed-arrow-right\"\n            :size=\"24\"\n            :class=\"$style.arrow\"\n          />\n          <lv-icon\n            v-else\n            :key=\"`else-${index}`\"\n            name=\"dashed-arrow-down\"\n            :size=\"24\"\n            :class=\"$style.arrow\"\n          />\n        </template>\n        <div v-else :key=\"index\" :class=\"[$style.card, {[$style.cardActive]: item.status === tileStatus.SELECTED}]\">\n          <div v-if=\"item.status === tileStatus.SELECTED\" :class=\"$style.stepCheck\">\n            <lv-icon :size=\"18\" name=\"check-18\" />\n          </div>\n          <img\n            :src=\"item.image\"\n            alt=\"\"\n            :class=\"$style.image\"\n            width=\"96\"\n            height=\"96\"\n            loading=\"lazy\"\n          >\n          <div :class=\"$style.contentWrapper\">\n            <lv-heading\n              level=\"4\"\n              tag=\"h3\"\n              version2\n              :class=\"$style.title\"\n            >\n              {{ item.title }}\n            </lv-heading>\n            <lv-button\n              styling=\"small-secondary-dark\"\n              :class=\"$style.button\"\n              :disabled=\"item.status === tileStatus.DISABLED\"\n              @click=\"openDeliveryMethodAndTimeframeModalAtStep(item)\"\n            >\n              {{ item.button }}\n            </lv-button>\n          </div>\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<script>\n  import { mapState } from 'pinia';\n  import firstStep from '~~/common/assets/images//howToBuy/1.svg';\n  import secondStep from '~~/common/assets/images//howToBuy/2.svg';\n  import thirdStep from '~~/common/assets/images//howToBuy/3.svg';\n  import { LvIcon, LvButton, LvHeading } from '~~/common/components/loginet-vue-shop/index.mjs';\n  import ModalStepsEnum from '~~/shop/components/Common/Modals/AwDeliveryMethodAndTimeframeModal/enum/modalStepsEnum';\n  import analyticsBannerInteractionMixin from '~~/common/mixins/analyticsBannerInteractionMixin.js';\n\n  import { useModalStore } from '~~/common/stores/modal';\n  import { useUserInterfaceStore } from '~~/common/stores/userInterface';\n  import { useUserStore } from '~~/common/stores/user';\n  import { useDeliveryStore } from '~~/shop/stores/delivery';\n\n  const tileStatus = {\n    DISABLED: 'DISABLED',\n    READY_FOR_SELECT: 'READY_FOR_SELECT',\n    SELECTED: 'SELECTED',\n  };\n\n  export default {\n    name: 'AwHowToBuy',\n    components: {\n      LvIcon,\n      LvButton,\n      LvHeading,\n    },\n    mixins: [analyticsBannerInteractionMixin],\n    inheritAttrs: false,\n    data () {\n      return {\n        tileStatus,\n        ModalStepsEnum,\n      };\n    },\n    computed: {\n      cards () {\n        return [\n          {\n            step: this.ModalStepsEnum.DELIVERY_METHOD,\n            title: this.$awt('aw.cms.how_to_buy.step_1.title'),\n            image: firstStep,\n            button: this.$awt('aw.cms.how_to_buy.step_1.button'),\n            status: this.deliveryMethod ? this.tileStatus.SELECTED : this.tileStatus.READY_FOR_SELECT,\n          },\n          {\n            arrow: true,\n          },\n          {\n            step: this.ModalStepsEnum.DELIVERY_POSTCODE,\n            title: this.$awt('aw.cms.how_to_buy.step_2.title'),\n            image: secondStep,\n            button: this.$awt('aw.cms.how_to_buy.step_2.button'),\n            status: this.deliveryMethod ? this.tileStatus.SELECTED : this.tileStatus.DISABLED,\n          },\n          {\n            arrow: true,\n          },\n          {\n            step: this.ModalStepsEnum.DELIVERY_TIMEFRAME,\n            title: this.$awt('aw.cms.how_to_buy.step_3.title'),\n            image: thirdStep,\n            button: this.$awt('aw.cms.how_to_buy.step_3.button'),\n            status: this.isEcomUser ? (this.currentSelectedTimeframe ? this.tileStatus.SELECTED : (this.deliveryMethod ? this.tileStatus.READY_FOR_SELECT : this.tileStatus.DISABLED)) : tileStatus.DISABLED,\n          },\n        ];\n      },\n      ...mapState(useDeliveryStore, {\n        deliveryMethod: state => state.setup,\n        currentSelectedTimeframe: state => state.selectedTimeframe,\n      }),\n      ...mapState(useUserInterfaceStore, {\n        screenRange: state => state.mediaQueries,\n      }),\n      ...mapState(useUserStore, {\n        isEcomUser: state => state.isEcomUser,\n      }),\n    },\n    mounted () {\n      this.sendBannerViewInteraction();\n    },\n    methods: {\n      openDeliveryMethodAndTimeframeModalAtStep ({\n        step,\n      }) {\n        const modalStore = useModalStore();\n        modalStore.openDeliveryMethodModal({ step });\n        try {\n          this.sendBannerInteractionAnalytics();\n        } catch (err) {\n          this.$logger.error(err);\n        }\n      },\n    },\n  };\n</script>\n\n<style module lang=\"scss\" rel=\"stylesheet/scss\">\n.mainTitle {\n  font-family: $secondary-font;\n  margin-right: 16px !important;\n  margin-bottom: 20px !important;\n  margin-left: 16px !important;\n  color: $color-text-primary;\n\n  @include tablet(min) {\n    margin-bottom: 40px !important;\n  }\n}\n\n.cardWrapper {\n  font-family: $secondary-font;\n  display: grid;\n  align-items: center;\n  flex-direction: column;\n  justify-content: space-between;\n  grid-template-columns: 1fr;\n  gap: 16px;\n\n  @include tablet(min) {\n    grid-template-columns: 1fr 24px 1fr 24px 1fr;\n  }\n\n  @include desktop-small(min) {\n    grid-template-columns: 1fr 36px 1fr 36px 1fr;\n  }\n\n  @include desktop-medium(min) {\n    gap: 32px;\n  }\n\n  .arrow {\n    width: unset;\n    height: 16px;\n\n    @include tablet(only) {\n      width: 24px;\n      height: unset;\n    }\n\n    @include desktop-medium(min) {\n      width: 36px;\n      height: unset;\n    }\n  }\n\n  .card {\n    position: relative;\n    display: grid;\n    width: 100%;\n    height: 100%;\n    padding: 24px 16px;\n    border-radius: 16px;\n    background-color: $color-white;\n    grid-template-columns: 64px auto;\n    gap: 24px;\n\n    @include tablet(only) {\n      padding: 24px;\n      grid-template-columns: 1fr;\n      grid-template-rows: 96px auto;\n    }\n\n    @include desktop-small(only) {\n      grid-template-columns: 1fr;\n      grid-template-rows: 96px auto;\n    }\n\n    @include desktop-small(min) {\n      padding: 32px;\n    }\n\n    @include desktop-medium(only) {\n      display: flex;\n      flex-wrap: wrap;\n\n      .image {\n        width: 96px;\n        height: 96px;\n      }\n\n      .contentWrapper {\n        flex-grow: 1;\n        width: calc(100% - 120px);\n        min-width: 136px;\n        height: unset !important;\n        min-height: calc(100% - 120px);\n\n        .title {\n          width: 100% !important;\n        }\n      }\n    }\n\n    @include desktop-large(min) {\n      grid-template-columns: 96px auto;\n      width: 413px;\n    }\n\n    &Active {\n      border-radius: 16px;\n      box-shadow: inset 0 0 0 4px $color-sage-450;\n    }\n\n    .stepCheck {\n      position: absolute;\n      top: -16px;\n      right: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 32px;\n      height: 32px;\n      color: $color-white;\n      border-radius: 1000px;\n      background-color: $color-sage-450;\n    }\n\n    .contentWrapper {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      height: 100%;\n      gap: 16px;\n\n      .title {\n        word-break: break-word;\n\n        @include tablet(only) {\n          width: 136px;\n        }\n      }\n\n      .button {\n        width: 126px;\n      }\n    }\n  }\n}\n</style>\n"],"names":["firstStep","secondStep","thirdStep","tileStatus","_sfc_main","LvIcon","LvButton","LvHeading","analyticsBannerInteractionMixin","ModalStepsEnum","mapState","useDeliveryStore","state","useUserInterfaceStore","useUserStore","step","useModalStore","err","_hoisted_1","_createElementBlock","_createElementVNode","_normalizeClass","_ctx","_openBlock","_Fragment","_renderList","$options","item","index","_createBlock","_component_lv_icon","$data","_createVNode","_createCommentVNode","_component_lv_heading","_withCtx","_createTextVNode","_toDisplayString","_component_lv_button","$event"],"mappings":"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"}