{"version":3,"file":"LeadCapture.BcFWRSUy.js","sources":["../../src/components/LeadCapture.vue"],"sourcesContent":["<script setup>\nimport Icon from '@components/Icon.vue'\nimport Spinner from '@components/Spinner.vue'\nimport { ref, reactive, onMounted } from 'vue'\nimport { $leadCaptureOpen } from '../store'\nimport Cookies from 'js-cookie'\nimport api from '@helpers/api'\nimport { generateRecaptchaToken } from '@helpers/utils'\n\nconst tabVisible = ref(false)\nconst modalOpen = ref(false)\nconst submitted = ref(false)\nconst submitting = ref(false)\nconst errorMessage = ref('')\nconst form = reactive({\n  list_id: 'WQh9NS',\n  email: '',\n  name: '',\n})\n\nonMounted(() => {\n  if (!Cookies.get('lead_capture_closed')) {\n    tabVisible.value = true\n\n    document.addEventListener('scroll', () => {\n      if (document.documentElement.scrollTop > window.innerHeight) {\n        open()\n      }\n    })\n  }\n})\n\nfunction alwaysOpen() {\n  $leadCaptureOpen.set((new Date()).toString())\n  modalOpen.value = true\n}\n\nfunction open() {\n  if (!$leadCaptureOpen.get()) {\n    alwaysOpen()\n  }\n}\n\nfunction close() {\n  tabVisible.value = false\n  modalOpen.value = false\n  setCookie()\n}\n\nfunction setCookie() {\n  Cookies.set('lead_capture_closed', (new Date()), { expires: 365 })\n}\n\nasync function subscribe() {\n  submitted.value = false\n  submitting.value = true\n\n  form.captcha = await generateRecaptchaToken('subscribe')\n\n  api\n      .post(`/subscribe`, form)\n      .then(({ data }) => data)\n      .then((data) => {\n        submitted.value = true\n        setCookie()\n      })\n      .catch((error) => {\n        errorMessage.value = error?.response?.data?.message || 'An unexpected error occurred.'\n      })\n      .finally(() => {\n        submitting.value = false\n      })\n}\n</script>\n\n<template>\n  <div class=\"lead\">\n    <div class=\"lead__tab\" v-if=\"tabVisible\">\n      <button type=\"button\" class=\"lead__button\" @click=\"alwaysOpen\">\n        <span class=\"lead__text\">GET MY $10</span>\n        <a href=\"#\" class=\"lead__close\" @click.prevent=\"close\" aria-label=\"Close\">\n          <svg viewBox=\"0 0 7.5 7.5\"><line x1=\"0.5\" y1=\"0.5\" x2=\"7\" y2=\"7\" stroke=\"#000\" stroke-width=\"1\" stroke-linecap=\"butt\"></line><line x1=\"7\" y1=\"0.5\" x2=\"0.5\" y2=\"7\" stroke=\"#000\" stroke-width=\"1\" stroke-linecap=\"butt\"></line></svg>\n        </a>\n      </button>\n    </div>\n\n    <div class=\"lead__modal\" v-if=\"modalOpen\">\n      <div class=\"lead__backdrop\"></div>\n\n      <div class=\"lead__inner\">\n        <div class=\"lead__wrapper\">\n          <a href=\"#\" class=\"lead__close\" @click.prevent=\"modalOpen = false\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\">\n              <circle cx=\"18\" cy=\"18\" r=\"18\" fill=\"black\" fill-opacity=\"0.5\"/>\n              <path d=\"M24.1885 12L11.9117 24.2768\" stroke=\"white\" stroke-width=\"2\"/>\n              <path d=\"M24.1885 24.1958L12.1556 12.1629\" stroke=\"white\" stroke-width=\"2\"/>\n            </svg>\n          </a>\n\n          <div class=\"lead__image\">\n            <img src=\"/images/girl-smiling.jpg\" alt=\"Eating gummy\" />\n          </div>\n          <form class=\"lead__content\" @submit.prevent=\"subscribe\">\n            <template v-if=\"submitted\">\n              <span class=\"lead__title\">Thanks for signing up!</span>\n              <a href=\"/shop\" class=\"lead__button\">START BROWSING</a>\n              <a href=\"/c/best-sellers\" class=\"lead__button\">SHOP BEST SELLERS</a>\n            </template>\n            <template v-else>\n              <span class=\"lead__title\">Save a bit while you're here</span>\n              <span class=\"lead__description\">Join our community to get $10 off</span>\n\n              <input v-model=\"form.email\" type=\"text\" placeholder=\"Enter email address\" class=\"lead__input\">\n              <input v-model=\"form.name\" type=\"text\" placeholder=\"Name\" class=\"lead__input\">\n\n              <div v-if=\"errorMessage\" class=\"error\">\n                <Icon type=\"error\" />\n                {{ errorMessage }}\n              </div>\n\n              <button type=\"submit\" class=\"lead__button\" :disabled=\"submitting\">\n                <Spinner color=\"white\" v-if=\"submitting\" />\n                <span v-else>GET MY DISCOUNT</span>\n              </button>\n            </template>\n          </form>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.lead {\n  .lead__modal {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 2147483646;\n\n    .lead__backdrop {\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      opacity: 0.7;\n      background-color: rgb(0, 0, 0);\n    }\n\n    .lead__inner {\n      position: absolute;\n      top: 10%;\n      left: 50%;\n      width: 90%;\n      max-width: 500px;\n      transform: translateX(-50%);\n\n      .lead__wrapper {\n        position: relative;\n\n        .lead__close {\n          position: absolute;\n          top: 12px;\n          right: 12px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          z-index: 2;\n\n          svg {\n            width: 36px;\n            height: 36px;\n          }\n        }\n      }\n\n      .lead__image {\n        flex: 1;\n\n        img {\n          display: block;\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n      }\n\n      .lead__content {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        background: var(--Dark-navy, #102B38);\n        padding: 24px;\n        position: relative;\n        border-radius: 0 0 8px 8px;\n\n        .lead__title {\n          display: block;\n          color: #fff;\n          font-size: 34px;\n          line-height: 38px;\n          margin-bottom: 16px;\n          font-family: Outfit, 'Outfit Fallback', Arial, serif;\n          font-weight: 700;\n          text-align: center;\n        }\n\n        .lead__description {\n          display: block;\n          color: #fff;\n          font-size: 18px;\n          line-height: 24px;\n          margin-bottom: 32px;\n          text-align: center;\n          font-family: Outfit, 'Outfit Fallback', Arial, serif;\n\n          @media screen and (min-width: 768px) {\n            font-size: 20px;\n          }\n        }\n\n        .lead__input {\n          border-radius: 12px;\n          font-size: 14px;\n          border: 0;\n          background: #fff;\n          padding: 12px 20px;\n          width: 100%;\n          margin-bottom: 12px;\n          font-family: Outfit, 'Outfit Fallback', Arial, serif;\n          color: #8A8A8A;\n        }\n\n        .lead__button {\n          background: #DB7E5A;\n          border-radius: 12px;\n          color: #fff;\n          font-family: Outfit, 'Outfit Fallback', Arial, serif;\n          border: 0;\n          width: 100%;\n          padding: 12px;\n          font-weight: 600;\n          cursor: pointer;\n          display: block;\n          text-align: center;\n          text-decoration: none;\n          margin-bottom: 12px;\n        }\n      }\n    }\n  }\n\n  .lead__tab {\n    position: fixed;\n    top: 50%;\n    left: 0;\n    z-index: 2147483645;\n\n    .lead__button {\n      background: #DB7E5A;\n      border: 0 solid rgba(13, 152, 235, 0);\n      border-radius: 0 10px 10px 0;\n      color: #fff;\n      font-family: Outfit, 'Outfit Fallback', Arial, serif;\n      font-weight: 600;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-direction: column;\n      font-size: 22px;\n      padding: 20px 10px;\n      cursor: pointer;\n\n      .lead__text {\n        writing-mode: vertical-rl;\n      }\n\n      .lead__close {\n        margin-top: 14px;\n        flex-shrink: 0;\n        border-radius: 50%;\n        background: #fff;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 6px;\n\n        svg {\n          width: 7px;\n          height: 7px;\n        }\n      }\n    }\n  }\n}\n</style>\n"],"names":["tabVisible","ref","modalOpen","submitted","submitting","errorMessage","form","reactive","onMounted","Cookies","open","alwaysOpen","$leadCaptureOpen","close","setCookie","subscribe","generateRecaptchaToken","api","data","error","_hoisted_1","_hoisted_3","_withScopeId","_createElementVNode","_hoisted_4","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_13","_hoisted_16","_hoisted_17","_hoisted_19","_openBlock","_createElementBlock","$setup","_hoisted_2","_withModifiers","_hoisted_5","_createCommentVNode","_hoisted_6","_hoisted_7","_cache","_hoisted_11","_hoisted_12","_Fragment","_hoisted_14","_hoisted_15","$event","_vModelText","_hoisted_18","_createVNode","_createTextVNode","_createBlock","_hoisted_20"],"mappings":"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"}