{"version":3,"file":"AddToCartButton.Bm-Xi8fs.js","sources":["../../src/components/AddToCartButton.vue"],"sourcesContent":["<script setup>\nimport api from '../helpers/api'\nimport { ref } from 'vue'\nimport {$cart, $isCartOpen} from '../store'\nimport { useStore } from '@nanostores/vue'\nimport Spinner from '@components/Spinner.vue'\nimport BaseModal from '@components/BaseModal.vue'\nimport BaseInput from '@components/BaseInput.vue'\nimport axios from 'axios'\nimport { generateRecaptchaToken } from '@helpers/utils'\n\nconst cart = useStore($cart);\nconst emit = defineEmits(['added'])\n\ndefineOptions({\n  inheritAttrs: false\n})\n\nconst props = defineProps({\n  payload: {\n    type: [Object, Array],\n    required: true,\n  },\n  listing: {\n    type: Object,\n    required: true,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  notify: {\n    type: Boolean,\n    default: true,\n  },\n})\n\nconst addingToCart = ref(false)\nconst notifyMeOpen = ref(false)\nconst notifyForm = ref({\n  email: '',\n  optin: true,\n})\nconst notifying = ref(false)\n\nasync function addToCart() {\n  if (props.disabled) {\n    if (props.notify) {\n      notifyMeOpen.value = true\n    }\n    return\n  }\n\n  const requests = []\n  const payloads = Array.isArray(props.payload) ? props.payload : [props.payload]\n\n  window.criteo_q = window?.criteo_q || [];\n  window.criteo_q.push(\n    { event: 'setAccount', account: 94147 },\n    { event: 'setSiteType', type: /iPad/.test(navigator.userAgent) ? 't' : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? 'm' : 'd'},\n  )\n\n  let page = 'PDP'\n  if (window.location.pathname === '/') {\n    page = 'Home'\n  }\n  if (window.location.pathname === '/quiz') {\n    page = 'Quiz'\n  }\n  if (window.location.pathname.startsWith('/c/') || window.location.pathname.includes('/shop')) {\n    page = 'PLP'\n  }\n\n  addingToCart.value = true\n\n  payloads.forEach(payload => {\n    let product = props.listing.products.find(({ id }) => id === payload?.product_id)\n\n    let quantity = payload?.quantity || 1\n\n    window?.dataLayer?.push({ ecommerce: null })\n    window?.dataLayer?.push({\n      event: 'add_to_cart',\n      cart_action: payload?.listing_plan_id ? 'Subscribe' : 'Single',\n      ecommerce: {\n        currency: 'USD',\n        items: [{\n          item_id: props.listing.id.toString(),\n          item_name: props.listing.title,\n          item_brand: props.listing?.product_line?.brand?.title || '',\n          item_list_id: page,\n          item_list_name: page,\n          price: Number(product?.price || 0).toString(),\n          quantity: Number(quantity).toString(),\n        }]\n      },\n    })\n\n    window.criteo_q.push({\n      event: 'addToCart',\n      item: [\n        {id: props.listing.id, price: product?.price || 0, quantity }\n      ]\n    })\n\n    requests.push(api.post(`/carts/${cart.value.id}/add`, payload).then(({ data }) => data.data))\n  })\n\n  const responses = await axios.all(requests)\n\n  const newCart = requests.length > 1\n    ? await api.get(`/carts/${cart.value.id}`).then(({ data }) => data.data)\n    : responses[0]\n\n  $cart.set(newCart)\n  addingToCart.value = false\n\n  $isCartOpen.set(true)\n\n  emit('added')\n}\n\nasync function submitNotify() {\n  notifying.value = true\n\n  await axios.post(\n      `https://a.klaviyo.com/client/back-in-stock-subscriptions/?company_id=${import.meta.env.PUBLIC_KLAVIYO_API_KEY}`,\n      {\n        'data': {\n          'type': 'back-in-stock-subscription',\n          'attributes': {\n            'profile': {\n              'data': {\n                'type': 'profile',\n                'attributes': {\n                  'email': notifyForm.value.email,\n                }\n              }\n            },\n            'channels': ['EMAIL'],\n          },\n          'relationships': {\n            'variant': {\n              'data': {\n                'type': 'catalog-variant',\n                'id': `$custom:::$default:::${props.listing.id}`\n              }\n            }\n          }\n        }\n      },\n      {\n        headers: {\n          'Content-Type': 'application/json',\n          'revision': '2023-12-15'\n        }\n      }\n  )\n\n  if (notifyForm.value.optin) {\n    const captcha = await generateRecaptchaToken('subscribe')\n\n    await api.post(`/subscribe`, {\n      email: notifyForm.value.email,\n      list_id: 'WQh9NS',\n      captcha,\n    })\n  }\n\n  notifying.value = false\n  notifyMeOpen.value = false\n}\n</script>\n\n<template>\n  <button type=\"button\" :disabled=\"addingToCart\" @click=\"addToCart\" v-bind=\"$attrs\">\n    <Spinner v-if=\"addingToCart\" color=\"white\" width=\"18px\" />\n    <span v-else-if=\"disabled && notify\">Out of Stock - Notify Me</span>\n    <span v-else>\n      <slot />\n    </span>\n  </button>\n\n  <BaseModal v-model=\"notifyMeOpen\" title=\"Never miss a restock!\" class=\"notify\" :max-width=\"500\" dismissable>\n    <div class=\"notify__description\">We’ll notify you when this item is back in stock.</div>\n\n    <form @submit.prevent=\"submitNotify\">\n      <base-input type=\"email\" label=\"Email address\" v-model=\"notifyForm.email\" required />\n\n      <label class=\"notify__opt\">\n        <input type=\"checkbox\" v-model=\"notifyForm.optin\" />\n        Opt in for promotional material, & exclusive offers\n      </label>\n\n      <button type=\"submit\" :disabled=\"notifying\" class=\"notify__button\">\n        <Spinner v-if=\"notifying\" color=\"white\" width=\"18px\" />\n        <span v-else>NOTIFY ME</span>\n      </button>\n    </form>\n  </BaseModal>\n</template>\n\n<style lang=\"scss\" scoped>\nbutton:disabled {\n  opacity: 0.8;\n  cursor: not-allowed!important;\n}\n\n.notify {\n  :deep(.modal__heading) {\n    margin-bottom: 4px!important;\n  }\n\n  .notify__description {\n    color: var(--Neutral-1000, #3C3833);\n    font-family: Outfit, 'Outfit Fallback', Arial, serif;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 32px; /* 228.571% */\n    margin-bottom: 12px;\n\n    @media screen and (min-width: 768px) {\n      font-size: 18px;\n      margin-bottom: 24px;\n    }\n  }\n\n  .notify__opt {\n    display: flex;\n    align-items: center;\n    color: var(--Neutral-700, #767370);\n    font-family: Poppins, 'Poppins Fallback', 'Trebuchet MS Fallback', Arial, serif;\n    font-size: 10px;\n    font-weight: 400;\n    line-height: 12px; /* 120% */\n    margin-top: 12px;\n    cursor: pointer;\n    gap: 9px;\n\n    @media screen and (min-width: 768px) {\n      font-size: 14px;\n      line-height: 24px;\n      margin-top: 24px;\n      gap: 18px;\n    }\n\n    input {\n      accent-color: var(--Primary-500, #183D4F);\n      border-radius: 1.2px;\n\n      @media screen and (min-width: 768px) {\n        height: 20px;\n        width: 20px;\n      }\n    }\n  }\n\n  .notify__button {\n    border-radius: 74px;\n    background: var(--Orange---terracotta, #DB7E5A);\n    color: #FFF;\n    font-family: Outfit, 'Outfit Fallback', Arial, serif;\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 20px; /* 125% */\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    border: 0;\n    width: 100%;\n    padding: 12px;\n    margin-top: 12px;\n\n    @media screen and (min-width: 768px) {\n      font-size: 20px;\n      padding: 16px;\n      margin-top: 24px;\n    }\n  }\n}\n</style>\n"],"names":["cart","useStore","$cart","emit","__emit","props","__props","addingToCart","ref","notifyMeOpen","notifyForm","notifying","addToCart","requests","payloads","page","payload","product","id","quantity","api","data","responses","axios","newCart","$isCartOpen","submitNotify","captcha","generateRecaptchaToken","_hoisted_1","_hoisted_4","_withScopeId","_createElementVNode","_hoisted_5","_hoisted_6","_openBlock","_createElementBlock","_Fragment","_mergeProps","$setup","_ctx","_createBlock","$props","_hoisted_2","_hoisted_3","_renderSlot","_createVNode","_cache","$event","_withCtx","_withModifiers","_vModelCheckbox","_createTextVNode","_hoisted_7"],"mappings":"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"}