{"version":3,"file":"FunnelRoot-gZOQ3xr-.js","sources":["../../src/components/utils/FunnelHeader.vue","../../src/components/utils/MessageBanner.vue","../../src/assets/content/pinter-funnel-banner.yml?raw","../../src/components/funnel/FunnelRoot.vue"],"sourcesContent":["<template>\n  <section class=\"w-full px-2 lg:my-8 lg:px-0\">\n    <div class=\"grid grid-cols-12 mx-auto funnel-container 2xl:max-w-7xl\">\n      <div class=\"col-span-12 lg:col-span-4 xl:col-span-5 2xl:col-span-6\">\n        <img\n          src=\"https://cdn.shopify.com/s/files/1/0825/9298/9465/files/GRG_Pinter_Single_line_RGB300dpi_1.png?v=1718700884\"\n          class=\"py-5 mx-auto lg:mx-0 max-w-44 xl:max-w-80 lg:py-0\"\n          alt=\"Pinter logo\"\n        />\n      </div>\n      <div\n        class=\"flex col-span-12 gap-2 mx-auto lg:justify-end lg:gap-10 lg:col-span-8 xl:col-span-7 2xl:col-span-6 lg:mx-0\"\n      >\n        <button\n          class=\"flex w-fit\"\n          :class=\"{ 'opacity-50': step !== 1, 'cursor-not-allowed': maxStep < 1 }\"\n          @click=\"goToStep(1)\"\n        >\n          <div class=\"flex content-center m-auto rounded-full size-6 md:size-9 bg-pacific-blue\">\n            <img\n              v-if=\"step > 1\"\n              class=\"p-1 size-6 md:size-9\"\n              src=\"https://cdn.shopify.com/s/files/1/0825/9298/9465/files/material-symbols_check_1.svg?v=1718901230\"\n              alt=\"check icon\"\n            />\n            <span v-else class=\"m-auto text-base font-bold text-white lg:text-xl\">1</span>\n          </div>\n          <span\n            class=\"text-[10px] m-auto lg:text-base text-left content-center font-bold pl-1 lg:pl-2.5 whitespace-nowrap leading-snug lg:leading-tight\"\n          >\n            CHOOSE\n            <br />\n            YOUR PINTER\n          </span>\n        </button>\n        <button\n          class=\"flex w-fit\"\n          :class=\"{ 'opacity-50': step !== 2, 'cursor-not-allowed': maxStep < 2 }\"\n          @click=\"goToStep(2)\"\n        >\n          <div class=\"flex content-center m-auto rounded-full size-6 md:size-9 bg-pacific-blue\">\n            <img\n              v-if=\"step > 2\"\n              class=\"p-1 size-6 md:size-9\"\n              src=\"https://cdn.shopify.com/s/files/1/0825/9298/9465/files/material-symbols_check_1.svg?v=1718901230\"\n              alt=\"check icon\"\n            />\n            <span v-else class=\"m-auto text-sm font-bold text-white lg:text-xl\">2</span>\n          </div>\n          <span\n            class=\"text-[10px] m-auto text-left lg:text-base font-bold pl-1 lg:pl-2.5 content-center whitespace-nowrap leading-snug lg:leading-tight\"\n          >\n            CHOOSE\n            <br />\n            FRESH BEERS\n          </span>\n        </button>\n        <button\n          class=\"flex w-fit\"\n          :class=\"{ 'opacity-50': step !== 3, 'cursor-not-allowed': maxStep < 3 }\"\n          @click=\"goToStep(3)\"\n        >\n          <div class=\"flex content-center m-auto rounded-full size-6 md:size-9 bg-pacific-blue\">\n            <img\n              v-if=\"step > 3\"\n              class=\"p-1 size-6 md:size-9\"\n              src=\"https://cdn.shopify.com/s/files/1/0825/9298/9465/files/material-symbols_check_1.svg?v=1718901230\"\n              alt=\"check icon\"\n            />\n            <span v-else class=\"m-auto text-sm font-bold text-white lg:text-xl\">3</span>\n          </div>\n          <span\n            class=\"text-[10px] lg:text-base m-auto text-left font-bold pl-1 lg:pl-2.5 content-center whitespace-nowrap leading-snug lg:leading-tight\"\n          >\n            CHOOSE\n            <br />\n            YOUR PLAN\n          </span>\n        </button>\n      </div>\n    </div>\n  </section>\n</template>\n\n<script setup lang=\"ts\">\n  import { useRouter } from 'vue-router';\n\n  const router = useRouter();\n\n  interface Props {\n    step: number;\n    maxStep: number;\n  }\n  const props = defineProps<Props>();\n\n  const goToStep = (newStep: number) => {\n    if (newStep > props.maxStep) return;\n    router.push({ name: `step-${newStep}` });\n  };\n</script>\n","<template>\n  <div\n    v-if=\"isVisible\"\n    class=\"flex p-2 text-center size-full max-h-14 md:max-h-9\"\n    :style=\"{ backgroundColor: backgroundColor }\"\n  >\n    <div class=\"m-auto\">\n      <p class=\"inline text-sm font-bold uppercase banner-color-text\" v-html=\"banner.text\"></p>\n      <button\n        v-if=\"banner?.text && banner?.button?.url\"\n        class=\"inline px-5 py-1 ml-2 capitalize bg-white rounded-md btn-secondary\"\n        @click=\"goTo(banner.button.url)\"\n      >\n        {{ banner.button.text }}\n      </button>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import bannerContent from '@/assets/content/pinter-funnel-banner.yml?raw';\n  import { InfoBanner } from '@/types/types';\n  import { load } from 'js-yaml';\n\n  interface Props {\n    step: string;\n  }\n  const props = defineProps<Props>();\n\n  const banner = load(bannerContent) as InfoBanner;\n\n  const goTo = (url: string) => {\n    window.location.href = url;\n  };\n\n  const textColor = computed(() => {\n    return banner?.textcolor ?? '#ffffff';\n  });\n\n  const visibleInUrls = computed(() => {\n    const locationUrl = window.location.href;\n    if ((banner?.Visible_in_urls ?? []).length === 0) return true;\n    return banner?.Visible_in_urls?.find(url => locationUrl.includes(url));\n  });\n\n  const isVisible = computed(() => {\n    return (\n      banner?.toggle &&\n      visibleInUrls.value &&\n      (banner?.steps === 'all' ? true : banner?.steps === props.step)\n    );\n  });\n\n  const backgroundColor = computed(() => {\n    return banner?.bgcolor ?? '#000000';\n  });\n</script>\n\n<style scoped>\n  .banner-color-text {\n    color: v-bind('textColor');\n  }\n</style>\n","export default \"toggle: true\\nbgcolor: \\\"#F0C971\\\"\\ntext: Claim 2 Pinter Packs FREE when you select Auto Delivery\\nsteps: all\\ntextcolor: \\\"#000000\\\"\\nbutton:\\n  text: \\\"\\\"\\n  url: \\\"\\\"\\n  bgcolor: \\\"\\\"\\n  textcolor: \\\"\\\"\\nVisible_in_urls: []\\n\"","<template>\n  <router-view v-slot=\"{ Component }\">\n    <div class=\"block h-screen\">\n      <LocationBanner />\n      <MessageBanner :step=\"currentStep.toString()\" />\n      <DiscountBanner :voucher-in-url=\"voucherInURL\" />\n      <FunnelHeader :step=\"currentStep\" :max-step=\"maxStep\" />\n      <component :is=\"Component\" :funnel-data=\"funnelData\" @update:funnel-data=\"updateFunnelData\" />\n      <Footer />\n    </div>\n  </router-view>\n</template>\n\n<script lang=\"ts\" setup>\n  import { cartFromId } from '@/api/cart';\n  import useFetchOffers from '@/api/queries/getOffers';\n  import useGetPricingPlans from '@/api/queries/getPricingPlanDefault';\n  import useGetSellingPlans from '@/api/queries/getSellingPlans';\n  import useCartStore from '@/stores/cartStore';\n  import { FunnelData, ShopifyCartMutation } from '@/types/types';\n  import { useCookies } from '@vueuse/integrations/useCookies';\n  import { useRouter } from 'vue-router';\n  // import { snowPlowExperimentEvent } from '@/utils/gtm';\n  // import useABTestDimension from '@/composables/useABTestDimension';\n\n  useFetchOffers('pinter_funnel_offers');\n  useGetPricingPlans();\n  useGetSellingPlans();\n  const cookies = useCookies();\n  const router = useRouter();\n  const basketStore = useCartStore();\n\n  // const data: SnowplowExperimentData = {\n  //   experiment_name: 'auto_delivery_2412',\n  //   experiment_variant: 'B',\n  // };\n  // snowPlowExperimentEvent(data);\n\n  const funnelData = ref<FunnelData | undefined>(undefined);\n\n  // read url voucher\n  const urlParams = new URLSearchParams(window.location.search);\n\n  const currentStep = computed(() => funnelData.value?.currentStep ?? 0);\n  const maxStep = computed(() => funnelData.value?.maxStep ?? 0);\n\n  const typeInUrl = urlParams.get('type');\n  const type = typeInUrl === 'payg' ? 'one-off' : typeInUrl === 'sub' ? 'subscription' : undefined;\n\n  funnelData.value = {\n    currentStep: 1,\n    maxStep: 1,\n    urlVoucher: urlParams.get('discount') ?? undefined,\n    purchaseType: type ?? 'subscription',\n  };\n\n  const voucherInURL = computed(\n    () => urlParams.get('discount') ?? funnelData.value?.urlVoucher ?? ''\n  );\n\n  const updateFunnelData = (newData: FunnelData): void => {\n    funnelData.value = newData;\n  };\n\n  watch(voucherInURL, newVoucher => {\n    updateFunnelData({\n      urlVoucher: newVoucher,\n    } as FunnelData);\n  });\n\n  provide('beerLimit', 50);\n  // useABTestDimension();\n\n  onMounted(async () => {\n    const urlParams = new URLSearchParams(window.location.search);\n    const code = urlParams.get('discount') || funnelData.value?.urlVoucher || '';\n    updateFunnelData({ ...funnelData.value, urlVoucher: code } as FunnelData);\n\n    const hasSearchParams = urlParams.has('type') || urlParams.has('pinter');\n\n    const cartId = cookies.get('cart');\n    if (cartId && !hasSearchParams) {\n      cookies.remove('cart');\n      const result = await cartFromId(cartId);\n      if (result) {\n        basketStore.loadBasket(result as ShopifyCartMutation, true);\n\n        const hasSellingPlan = !!result.lines.edges.find(\n          line => line.node.sellingPlanAllocation?.sellingPlan.id\n        );\n\n        updateFunnelData({\n          ...funnelData.value,\n          purchaseType: hasSellingPlan ? 'subscription' : 'one-off',\n          currentStep: 3,\n          maxStep: 3,\n        } as FunnelData);\n\n        if (code) await basketStore.applyDiscount(code);\n        router.push({ name: `step-3` });\n      } else await basketStore.createBasket({ simpleBasketItems: [], code });\n    } else await basketStore.createBasket({ simpleBasketItems: [], code });\n  });\n</script>\n"],"names":["router","useRouter","props","__props","goToStep","newStep","maxStep","push","name","concat","banner","load","textColor","computed","_a","textcolor","visibleInUrls","locationUrl","window","location","href","Visible_in_urls","length","_b","find","includes","url","isVisible","toggle","value","steps","step","backgroundColor","bgcolor","useFetchOffers","useGetPricingPlanDefault","useGetSellingPlans","cookies","useCookies","basketStore","useCartStore","funnelData","ref","urlParams","URLSearchParams","search","currentStep","typeInUrl","get","type","urlVoucher","purchaseType","voucherInURL","_c","updateFunnelData","newData","watch","newVoucher","provide","onMounted","async","code","hasSearchParams","has","cartId","remove","result","cartFromId","loadBasket","hasSellingPlan","lines","edges","line","node","sellingPlanAllocation","sellingPlan","id","applyDiscount","createBasket","simpleBasketItems"],"mappings":"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"}