{"version":3,"file":"_bundle_page.min.js","sources":["../_src/icons/subscription.svg?component","../_src/apps/LandingPageUpsellApp.vue","../_src/icons/loading-dots.svg?raw","../_src/modules/starterKitLp.ts","../_src/page.ts"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = {\n  class: \"Icon\",\n  viewBox: \"0 0 20 20\",\n  fill: \"none\",\n  xmlns: \"http://www.w3.org/2000/svg\"\n}\nconst _hoisted_2 = /*#__PURE__*/_createElementVNode(\"path\", {\n  d: \"M10.56 1a8.5 8.5 0 1 1-5.883 2.367\",\n  stroke: \"currentColor\",\n  \"stroke-width\": \"1.5\",\n  \"stroke-linecap\": \"round\",\n  \"stroke-linejoin\": \"round\"\n}, null, -1)\nconst _hoisted_3 = /*#__PURE__*/_createElementVNode(\"path\", {\n  d: \"m1 4.187 3.678-.82.822 3.287M10.562 6.312V9.5l2.125 2.124\",\n  stroke: \"currentColor\",\n  \"stroke-width\": \"1.5\",\n  \"stroke-linecap\": \"round\",\n  \"stroke-linejoin\": \"round\"\n}, null, -1)\nconst _hoisted_4 = [\n  _hoisted_2,\n  _hoisted_3\n]\n\nexport function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", _hoisted_1, _hoisted_4))\n}\nexport default { render: render }","<script lang=\"ts\" setup>\nimport Button from '@/components/Button.vue'\nimport Modal from '@/components/Modal.vue'\nimport Message from '@/components/Message.vue'\nimport type { Product } from '@/lib/types/Product'\nimport * as CartService from '../services/cart'\nimport { computed, onMounted, ref } from 'vue'\nimport formatMoney from '@/lib/formatters/money'\nimport IconSubscription from '@/icons/subscription.svg?component'\nimport { track } from '@/services/analytics'\n\nconst props = defineProps<{\n  product: Product\n}>()\n\nconst onCheckout = () => {\n  CartService.checkout()\n}\n\nconst onAcceptOffer = async () => {\n  track('landingpage_upsell_add', {\n    product_id: props.product.id,\n  })\n  await CartService.add({\n    id: props.product.id,\n    selectedVariantId: props.product.selectedVariantId.toString(),\n    selectedSellingPlanId:\n      props.product.variants[\n        props.product.selectedVariantId\n      ].sellingPlanAllocations[0]?.sellingPlan.id.toString(),\n    quantity: 1,\n  })\n  CartService.checkout()\n}\n\nconst selectedVariant = computed(\n  () => props.product.variants[props.product.selectedVariantId],\n)\n\nconst selectedSellingPlanId = computed(\n  () => selectedVariant.value.sellingPlanAllocations[0].sellingPlan.id,\n)\n\nconst selectedSellingPlan = computed(() =>\n  selectedVariant.value.sellingPlanAllocations.find(\n    (spa) => `${spa.sellingPlan.id}` === `${selectedSellingPlanId.value}`,\n  ),\n)\n\nconst originalPrice = computed(() => selectedVariant.value.price)\n\nconst price = computed(() => {\n  if (selectedSellingPlan.value) {\n    return (\n      parseInt(selectedVariant.value.price) *\n      ((100 -\n        selectedSellingPlan.value.sellingPlan.price_adjustments[0].value) /\n        100)\n    )\n  } else {\n    return selectedVariant.value.price\n  }\n})\n\nconst productDescriptionEl = ref<HTMLElement | null>(null)\n\nconst checkingHeight = ref(true)\nconst moreContentThanSpace = ref(true)\nconst showingMoreButton = ref(false)\n\nconst showMore = () => {\n  if (productDescriptionEl.value) {\n    showingMoreButton.value = false\n  }\n}\n\nconst showLess = () => {\n  if (productDescriptionEl.value) {\n    showingMoreButton.value = true\n  }\n}\n\nonMounted(() => {\n  if (productDescriptionEl.value) {\n    const height = productDescriptionEl.value.getBoundingClientRect().height\n    const scrollHeight = productDescriptionEl.value.scrollHeight\n    if (height < scrollHeight) {\n      moreContentThanSpace.value = true\n      showingMoreButton.value = true\n    } else {\n      moreContentThanSpace.value = false\n    }\n    checkingHeight.value = false\n  }\n  track('landingpage_upsell_view', {\n    product_id: props.product.id,\n  })\n})\n</script>\n\n<template>\n  <Modal title=\"Before you go…\" :no-close=\"true\">\n    <div class=\"LandingPageUpsell__Skip\">\n      <Button @click=\"onCheckout\" :modifiers=\"['link', 'small']\"> Skip </Button>\n    </div>\n    <div class=\"LandingPageUpsell\">\n      <div class=\"Stack Stack--tiny\">\n        <p>\n          We've picked another product from our range to complement your\n          selection:\n        </p>\n\n        <div class=\"LandingPageUpsell__Product\">\n          <div class=\"LandingPageUpsell__ProductHead\">\n            <div\n              class=\"Label Label--dark Label--small\"\n              v-if=\"selectedSellingPlan?.sellingPlan.price_adjustments[0].value\"\n            >\n              Save\n              {{ selectedSellingPlan?.sellingPlan.price_adjustments[0].value }}%\n            </div>\n            <img :src=\"product.image\" :alt=\"product.title\" />\n            <div>\n              <h5>{{ product.title }}</h5>\n              <p>\n                {{ formatMoney(price) }}\n                <s>{{ formatMoney(originalPrice) }}</s>\n              </p>\n            </div>\n          </div>\n\n          <div\n            class=\"LandingPageUpsell__ProductDescription\"\n            :class=\"{\n              'is-expanded': !showingMoreButton && !checkingHeight,\n              'can-expand': showingMoreButton && moreContentThanSpace,\n            }\"\n            v-html=\"product.description\"\n            ref=\"productDescriptionEl\"\n          ></div>\n          <Button\n            v-if=\"moreContentThanSpace && showingMoreButton\"\n            :modifiers=\"['link', 'block']\"\n            @click=\"showMore\"\n          >\n            Read more\n          </Button>\n          <Button\n            v-if=\"moreContentThanSpace && !showingMoreButton\"\n            :modifiers=\"['link', 'block']\"\n            @click=\"showLess\"\n          >\n            Show less\n          </Button>\n        </div>\n\n        <Message mode=\"success\">\n          <template #icon><IconSubscription /></template>\n          <template #content>\n            <p>\n              The initial frequency of this product is set to\n              <strong>{{\n                selectedSellingPlan?.sellingPlan.name\n                  .toLowerCase()\n                  .replace('delivery', '')\n              }}</strong\n              >. You can change or cancel this at any time, no lock-in.\n            </p>\n          </template>\n        </Message>\n        <Button :modifiers=\"['block']\" @click=\"onAcceptOffer\">\n          Add subscription for {{ formatMoney(price) }}\n        </Button>\n        <Button :modifiers=\"['block', 'link']\" @click=\"onCheckout\">\n          No thanks, go to checkout\n        </Button>\n      </div>\n    </div>\n  </Modal>\n</template>\n\n<style>\n.LandingPageUpsell__Product {\n  background-color: var(--color-lichen-25);\n  border-radius: var(--radius-large);\n  padding: calc(var(--grid-gap) / 2);\n  position: relative;\n}\n\n.LandingPageUpsell__ProductHead {\n  margin-bottom: calc(var(--grid-gap) / 2);\n\n  & > .Label {\n    position: absolute;\n    top: calc((var(--grid-gap) / 2) + 5px);\n    left: calc((var(--grid-gap) / 2) + 5px);\n  }\n\n  & > img {\n    width: 100%;\n    border-radius: var(--radius-small);\n    margin-bottom: calc(var(--grid-gap) / 2);\n  }\n\n  & > div {\n    flex-grow: 1;\n  }\n\n  & p {\n    margin: 0;\n\n    &:first-child h5 {\n      margin: 0 0 5px;\n    }\n  }\n}\n\n.LandingPageUpsell__ProductDescription {\n  max-height: 300px;\n  overflow: hidden;\n\n  &.is-expanded {\n    max-height: none;\n  }\n\n  &.can-expand {\n    position: relative;\n\n    &::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      height: 50px;\n      background: linear-gradient(\n        to bottom,\n        rgba(255, 255, 255, 0%),\n        var(--color-lichen-25)\n      );\n    }\n  }\n}\n\n.LandingPageUpsell__Skip {\n  position: absolute;\n  top: 0;\n  right: 10px;\n}\n</style>\n","export default \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\" standalone=\\\"no\\\"?><svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" viewBox=\\\"0 0 100 50\\\" preserveAspectRatio=\\\"xMidYMid\\\">\\n  <circle cx=\\\"23\\\" cy=\\\"25\\\" r=\\\"6\\\" fill=\\\"currentColor\\\">\\n    <animate attributeName=\\\"cy\\\" calcMode=\\\"spline\\\" keySplines=\\\"0 0.5 0.5 1;0.5 0 1 0.5;0.5 0.5 0.5 0.5\\\" repeatCount=\\\"indefinite\\\" values=\\\"25;15;25;25\\\" keyTimes=\\\"0;0.115;0.23;1\\\" dur=\\\"1.0526315789473684s\\\" begin=\\\"-0.24210526315789474s\\\"></animate>\\n  </circle>\\n  <circle cx=\\\"41\\\" cy=\\\"25\\\" r=\\\"6\\\" fill=\\\"currentColor\\\">\\n    <animate attributeName=\\\"cy\\\" calcMode=\\\"spline\\\" keySplines=\\\"0 0.5 0.5 1;0.5 0 1 0.5;0.5 0.5 0.5 0.5\\\" repeatCount=\\\"indefinite\\\" values=\\\"25;15;25;25\\\" keyTimes=\\\"0;0.115;0.23;1\\\" dur=\\\"1.0526315789473684s\\\" begin=\\\"-0.18157894736842106s\\\"></animate>\\n  </circle>\\n  <circle cx=\\\"59\\\" cy=\\\"25\\\" r=\\\"6\\\" fill=\\\"currentColor\\\">\\n    <animate attributeName=\\\"cy\\\" calcMode=\\\"spline\\\" keySplines=\\\"0 0.5 0.5 1;0.5 0 1 0.5;0.5 0.5 0.5 0.5\\\" repeatCount=\\\"indefinite\\\" values=\\\"25;15;25;25\\\" keyTimes=\\\"0;0.115;0.23;1\\\" dur=\\\"1.0526315789473684s\\\" begin=\\\"-0.12105263157894737s\\\"></animate>\\n  </circle>\\n  <circle cx=\\\"77\\\" cy=\\\"25\\\" r=\\\"6\\\" fill=\\\"currentColor\\\">\\n    <animate attributeName=\\\"cy\\\" calcMode=\\\"spline\\\" keySplines=\\\"0 0.5 0.5 1;0.5 0 1 0.5;0.5 0.5 0.5 0.5\\\" repeatCount=\\\"indefinite\\\" values=\\\"25;15;25;25\\\" keyTimes=\\\"0;0.115;0.23;1\\\" dur=\\\"1.0526315789473684s\\\" begin=\\\"-0.060526315789473685s\\\"></animate>\\n  </circle>\\n</svg>\\n\"","import LandingPageUpsellApp from '@/apps/LandingPageUpsellApp.vue'\nimport { createApp } from 'vue'\nimport type { Product } from '@/lib/types/Product'\nimport * as CartService from '../services/cart'\nimport IconLoading from '@/icons/loading-dots.svg?raw'\n\nexport default function init() {\n  document\n    .querySelectorAll('[data-starter-kit-landing-page-purchase]')\n    .forEach((el, i) => {\n      const element = el as HTMLButtonElement | null\n      if (element && element.dataset && element.dataset.productJson) {\n        const product = JSON.parse(element.dataset.productJson) as Product\n        element.addEventListener('click', async () => {\n          window.mixpanel.track('starter_kit_lp_purchase_click', {\n            product,\n            button_index: i,\n          })\n          el.classList.add('Button--loading')\n          el.classList.add('Button--is-disabled')\n          el.setAttribute('disabled', 'disabled')\n          const loading = document.createElement('span')\n          loading.classList.add('Button__Icon')\n          loading.classList.add('Button__Icon--loading')\n          loading.innerHTML = IconLoading\n          el.textContent = ''\n          el.appendChild(loading)\n          await CartService.add({\n            id: product.id,\n            selectedVariantId: product.selectedVariantId.toString(),\n            selectedSellingPlanId:\n              product.variants[\n                product.selectedVariantId\n              ].sellingPlanAllocations[0]?.sellingPlan.id.toString(),\n            quantity: 1,\n          })\n          if (product.lpUpsellProduct[0]) {\n            const upsellProduct = product.lpUpsellProduct[0]\n            const containerEl = document.createElement('div')\n            document.body.appendChild(containerEl)\n            const app = createApp(LandingPageUpsellApp, {\n              product: upsellProduct,\n            })\n            app.mount(containerEl)\n          } else {\n            CartService.checkout()\n          }\n        })\n      }\n    })\n\n  const stickyCtas = document.querySelectorAll('[data-starter-kit-sticky-cta]')\n  const loop = () => {\n    if (window.scrollY > 100) {\n      stickyCtas.forEach((el) => el.classList.add('is-visible'))\n    } else {\n      stickyCtas.forEach((el) => el.classList.remove('is-visible'))\n    }\n    window.requestAnimationFrame(loop)\n  }\n  loop()\n}\n","import './lib/types/global'\n\nimport { createApp } from 'vue'\nimport starterKitLp from './modules/starterKitLp'\nimport PurchaseProductApp from './apps/PurchaseProductApp.vue'\n\nconst el = document.querySelector(\n  '#purchase-product-root',\n) as HTMLElement | null\n\nif (el && el.dataset && el.dataset.productJson) {\n  const product = JSON.parse(el.dataset.productJson)\n  createApp(PurchaseProductApp, {\n    product,\n    neverPromptLogin: true,\n    immediateCheckout: true,\n  }).mount(el)\n}\n\nstarterKitLp()\n"],"names":["_hoisted_1","_hoisted_2","_createElementVNode","_hoisted_3","_hoisted_4","render","_ctx","_cache","_openBlock","_createElementBlock","IconSubscription","onCheckout","CartService.checkout","onAcceptOffer","__async","track","props","CartService.add","_a","selectedVariant","computed","selectedSellingPlanId","selectedSellingPlan","spa","originalPrice","price","productDescriptionEl","ref","checkingHeight","moreContentThanSpace","showingMoreButton","showMore","showLess","onMounted","height","scrollHeight","IconLoading","init","el","i","element","product","loading","upsellProduct","containerEl","createApp","LandingPageUpsellApp","stickyCtas","loop","PurchaseProductApp","starterKitLp"],"mappings":"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"}