{"version":3,"file":"_bundle_collection.min.js","sources":["../_src/components/PurchaseStarterKitQuick.vue","../_src/apps/PurchaseCollectionApp.vue","../_src/collection.ts"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Product } from '@/lib/types/Product'\nimport PurchaseStarterKitTabOnce from './PurchaseStarterKitTabOnce.vue'\nimport PurchaseStarterKitTabSubscribe from './PurchaseStarterKitTabSubscribe.vue'\nimport type { PurchaseData } from '@/lib/types/PurchaseData'\nimport type { User } from '@/lib/types/User'\nimport { usePurchaseState } from '@/components/lib/PurchaseState'\nimport type { WorkState } from '@/lib/types/WorkState'\nimport { computed } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    product: Product\n    user: User\n    initialQuantity: number\n    initialSellingPlan?: string\n    initialWhen: 'now' | 'next'\n    initialVariantId?: string\n    purchaseState: WorkState\n    loginLink: string\n    customerPortalLink: string\n    nextOrderLink: string\n    immediateCheckout?: boolean\n  }>(),\n  {\n    initialQuantity: 1,\n    initialWhen: 'now',\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'purchase', p: PurchaseData): void\n  (e: 'interaction'): void\n  (e: 'variantChange', variantId: string): void\n  (e: 'viewProduct', productId: string): void\n}>()\n\nconst freeDelivery = computed(\n  () =>\n    !!(selectedVariant.value.weight && selectedVariant.value.weight >= 999000),\n)\n\nconst {\n  selectedVariantId,\n  selectedVariant,\n  selectedSellingPlanId,\n  isSubscriptionProduct,\n  subscribeAndSave,\n  price,\n  subscribePrice,\n  pricePer,\n  savePercent,\n  quantity,\n  when,\n  subscriptionToThisProduct,\n  emitPurchaseEvent,\n  url,\n  nextOrderDate,\n} = usePurchaseState(props, emit)\n</script>\n\n<template>\n  <form class=\"Purchase Purchase--quick\" @submit.prevent>\n    <span v-if=\"subscribeAndSave\" class=\"Purchase__Label\">\n      Subscribe &amp; Save {{ savePercent }}%\n    </span>\n    <div class=\"Stack Stack--small\">\n      <h2 class=\"Purchase__ProductTitle h3\">\n        {{ product.title }}\n      </h2>\n      <template v-if=\"isSubscriptionProduct\">\n        <PurchaseStarterKitTabSubscribe\n          :pre-sale=\"product.preSale\"\n          :waitlist-page-url=\"product.waitlistPageUrl\"\n          :price=\"price\"\n          :price-per=\"pricePer\"\n          :compare-at-price=\"selectedVariant.compareAtPrice\"\n          :subscribe-price=\"subscribePrice\"\n          :save-percent=\"savePercent\"\n          :allow-subscribe=\"isSubscriptionProduct\"\n          :quantity=\"quantity\"\n          :when=\"when\"\n          :selected-selling-plan-id=\"selectedSellingPlanId\"\n          :selling-plan-allocations=\"selectedVariant.sellingPlanAllocations\"\n          :is-logged-in=\"user.isLoggedIn\"\n          :user-load-state=\"user.loadState\"\n          :next-order-date=\"nextOrderDate\"\n          :login-link=\"loginLink\"\n          :subscription-to-this-product=\"subscriptionToThisProduct\"\n          :purchase-state=\"purchaseState\"\n          :customer-portal-link=\"customerPortalLink\"\n          :next-order-link=\"nextOrderLink\"\n          :in-tab=\"false\"\n          :show-inline-variant-selector=\"true\"\n          :variants=\"product.variants\"\n          :variant-option-label=\"product.variantOptionLabel\"\n          :selected-variant-id=\"selectedVariantId\"\n          :available=\"selectedVariant.available\"\n          :url=\"url\"\n          :has-dispensers=\"!/toilet tissue/i.test(product.title)\"\n          :is-trial=\"product.id.toString() === '7322083655742'\"\n          @quantity:changed=\"quantity = $event\"\n          @when:changed=\"when = $event\"\n          @selected-selling-plan:changed=\"selectedSellingPlanId = $event\"\n          @purchase=\"emitPurchaseEvent\"\n          @variant:changed=\"selectedVariantId = $event\"\n          @view-product=\"$emit('viewProduct', product.id)\"\n          :free-delivery=\"freeDelivery\"\n        />\n      </template>\n      <template v-else>\n        <PurchaseStarterKitTabOnce\n          :price=\"price\"\n          :subscribe-price=\"subscribePrice\"\n          :save-percent=\"savePercent\"\n          :price-per=\"pricePer\"\n          :compare-at-price=\"selectedVariant.compareAtPrice\"\n          :allow-subscribe=\"false\"\n          :quantity=\"quantity\"\n          :when=\"when\"\n          :selected-selling-plan-id=\"selectedSellingPlanId\"\n          :selling-plan-allocations=\"selectedVariant.sellingPlanAllocations\"\n          :is-logged-in=\"user.isLoggedIn\"\n          :user-load-state=\"user.loadState\"\n          :next-order-date=\"nextOrderDate\"\n          :login-link=\"loginLink\"\n          :subscription-to-this-product=\"subscriptionToThisProduct\"\n          :purchase-state=\"purchaseState\"\n          :customer-portal-link=\"customerPortalLink\"\n          :in-tab=\"false\"\n          :show-inline-variant-selector=\"true\"\n          :variants=\"product.variants\"\n          :variant-option-label=\"product.variantOptionLabel\"\n          :selected-variant-id=\"selectedVariantId\"\n          :next-order-link=\"nextOrderLink\"\n          :available=\"selectedVariant.available\"\n          :url=\"url\"\n          :has-dispensers=\"!/toilet tissue/i.test(product.title)\"\n          :is-trial=\"product.id.toString() === '7322083655742'\"\n          @quantity:changed=\"quantity = $event\"\n          @selected-selling-plan:changed=\"selectedSellingPlanId = $event\"\n          @when:changed=\"when = $event\"\n          @purchase=\"emitPurchaseEvent\"\n          @variant:changed=\"selectedVariantId = $event\"\n          @view-product=\"$emit('viewProduct', product.id)\"\n          :pre-sale=\"product.preSale\"\n          :waitlist-page-url=\"product.waitlistPageUrl\"\n        />\n      </template>\n    </div>\n  </form>\n</template>\n\n<style>\n.Purchase--quick {\n  max-width: 560px;\n  margin: 0 auto;\n}\n\n@media (--mq-phablet-and-up) {\n  .Purchase--quick {\n    margin: 0;\n  }\n}\n\n.Purchase__ProductTitle {\n  padding-right: 47px;\n}\n\n.Purchase__Label {\n  display: inline-block;\n  background-color: var(--color-forest-100);\n  border-radius: 2px;\n  color: var(--color-white);\n  font-family: var(--font-family-rund);\n  font-weight: bold;\n  font-size: 13px;\n  padding: 2px 6px;\n  margin-bottom: 10px;\n}\n\n@media (--mq-phablet-and-up) {\n  .Purchase__Label {\n    font-size: 15px;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport PurchaseQuick from '@/components/PurchaseQuick.vue'\nimport Modal from '@/components/Modal.vue'\nimport * as PurchaseService from '../services/purchase'\nimport * as CartService from '../services/cart'\nimport { computed, onMounted, reactive, ref, watch } from 'vue'\nimport { track } from '../services/analytics'\nimport type { WorkState } from '@/lib/types/WorkState'\nimport type { PurchaseData } from '@/lib/types/PurchaseData'\nimport type { Product } from '@/lib/types/Product'\nimport PurchaseStarterKitQuick from '@/components/PurchaseStarterKitQuick.vue'\nimport Toast from '@/components/Toast.vue'\nimport trackAbTestEvent from '@/services/abTestEvents'\n\nconst props = withDefaults(\n  defineProps<{\n    collection: Product[]\n    triggerElementDataSet: string\n  }>(),\n  {\n    triggerElementDataSet: 'bowerQuickBuy',\n  },\n)\n\nconst user = reactive(PurchaseService.getUser())\nconst savedState = PurchaseService.getSavedState() as { id?: string }\nconst productId = ref<string | null>(savedState.id || null)\nconst product = computed(() =>\n  props.collection.find((p) => p.id === productId.value),\n)\nconst showLoginPrompt = computed(() => !user.isLoggedIn && !user.seenLoginModal)\nconst purchaseState = ref<WorkState>('IDLE')\nconst showNextOrderToast = ref(false)\n\nconst plasticWasteMetrics = ref<\n  {\n    sku: string\n    plastic_waste_saved_g: number\n  }[]\n>([])\n\nwatch(productId, () => {\n  resetPurchaseState()\n})\n\nonMounted(() => {\n  document.addEventListener('click', (event) => {\n    const target = event.target as HTMLElement\n    if (target.dataset && props.triggerElementDataSet in target.dataset) {\n      if (target.dataset.productId) {\n        productId.value = target.dataset.productId\n        trackAbTestEvent('purchase_component_view', 'collection')\n      }\n    }\n  })\n  loadPlasticWasteMetrics()\n  loadSubcriptionData()\n})\n\nconst onPurchase = (data: PurchaseData) => {\n  purchaseState.value = 'IN_PROGRESS'\n  let purchasePromise\n  if (data.when === 'now') {\n    purchasePromise = addToCart(data)\n  } else {\n    purchasePromise = PurchaseService.createSubscription(data)\n  }\n  track(data.when === 'now' ? 'add_to_cart' : 'add_to_order', {\n    product_id: data.id,\n    variant_id: data.selectedVariantId,\n    quantity: data.quantity,\n    context: 'collection_page',\n    ...(data.selectedSellingPlanId\n      ? {\n          is_subscription: true,\n        }\n      : { is_subscription: false }),\n  })\n\n  purchasePromise\n    .then(() => {\n      purchaseState.value = 'COMPLETE'\n      if (data.when === 'next') {\n        showNextOrderToast.value = true\n      }\n      setTimeout(() => {\n        productId.value = null\n      }, 300)\n    })\n    .catch((err: Error) => {\n      purchaseState.value = 'ERROR'\n      window.Bugsnag.notify(err)\n    })\n\n  if (data.selectedSellingPlanId) {\n    trackAbTestEvent('product_add', 'subscription')\n  } else {\n    trackAbTestEvent('product_add', 'onetime')\n  }\n}\n\nconst resetPurchaseState = () => {\n  purchaseState.value = 'IDLE'\n}\n\nconst addToCart = (data: PurchaseData) => {\n  return CartService.add(data as CartService.PayloadAddToCart)\n}\n\nconst loadSubcriptionData = async () => {\n  if (user && user.isSubscriber) {\n    try {\n      const res = await PurchaseService.getSubscriptionData()\n      user.subscriptions = res.subscriptions\n      user.loadState = 'DONE'\n    } catch (e) {\n      window.Bugsnag.notify(e as Error)\n      user.loadState = 'ERROR'\n    }\n  }\n}\n\nconst loadPlasticWasteMetrics = async () => {\n  try {\n    const res = await fetch(\n      `https://api.bowercollective.com/plastic-waste/waste-saved-by-sku-12-month`,\n    )\n    const entries = await res.json()\n    if (entries && entries.length) plasticWasteMetrics.value = entries\n  } catch (e) {\n    window.Bugsnag.notify(e as Error)\n  }\n}\n\nconst clickedLogin = () => {\n  if (productId.value)\n    PurchaseService.loginAndReturnHere({ id: productId.value })\n}\n\nconst continueAsAnonymous = () => {\n  PurchaseService.setAnonymous()\n  user.seenLoginModal = true\n}\n\nconst pathname = window.location.pathname\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Modal v-if=\"product && !showLoginPrompt\" @close=\"productId = null\">\n      <component\n        :is=\"\n          product.starterKitSubscriptionConfig !== null\n            ? PurchaseStarterKitQuick\n            : PurchaseQuick\n        \"\n        :product=\"product\"\n        :user=\"user\"\n        :login-link=\"`/account/login?return_url=${encodeURIComponent(pathname)}`\"\n        customer-portal-link=\"/account\"\n        next-order-link=\"/account\"\n        :purchase-state=\"purchaseState\"\n        :initial-when=\"user.subscriptions.length > 0 ? 'next' : 'now'\"\n        :plastic-waste-saving=\"\n          plasticWasteMetrics.find(\n            (p) =>\n              product &&\n              p.sku === product.variants[product.selectedVariantId].sku,\n          )\n        \"\n        @purchase=\"onPurchase\"\n        @interaction=\"resetPurchaseState\"\n      />\n    </Modal>\n    <Modal\n      v-else-if=\"product && showLoginPrompt\"\n      @close=\"productId = null\"\n      title=\"Already got an account?\"\n    >\n      <p>Log in to your account if you have one.</p>\n\n      <div class=\"ButtonGroup\">\n        <button class=\"Button\" @click=\"clickedLogin\">Log in</button>\n        <button class=\"Button Button--inverted\" @click=\"continueAsAnonymous\">\n          Continue without logging in\n        </button>\n      </div>\n    </Modal>\n    <Toast\n      v-if=\"showNextOrderToast\"\n      :mode=\"['success']\"\n      :has-close=\"true\"\n      @close=\"showNextOrderToast = false\"\n    >\n      We’ve added this to your next order!\n      <a href=\"/account\">View your next order</a>\n    </Toast>\n  </Teleport>\n</template>\n","import './lib/types/global'\n\nimport { createApp } from 'vue'\nimport PurchaseCollectionApp from '@/apps/PurchaseCollectionApp.vue'\n\nconst el = document.querySelector(\n  '#purchase-collection-root',\n) as HTMLElement | null\n\nconst heroEl = document.querySelector(\n  '#purchase-collection-hero-root',\n) as HTMLElement | null\n\nconst scrollHint = document.querySelector('.CollectionHeaderV2__ScrollHint')\nconst maybeHideScrollHint = () => {\n  if (scrollHint) {\n    if (window.scrollY > 1000) {\n      scrollHint.classList.add('is-hidden')\n    } else {\n      requestAnimationFrame(maybeHideScrollHint)\n    }\n  }\n}\n\nrequestAnimationFrame(maybeHideScrollHint)\n\nif (el && el.dataset && el.dataset.collectionJson) {\n  const collection = JSON.parse(el.dataset.collectionJson)\n  createApp(PurchaseCollectionApp, { collection }).mount(el)\n}\n\nif (heroEl && heroEl.dataset && heroEl.dataset.collectionJson) {\n  const collection = JSON.parse(heroEl.dataset.collectionJson)\n  createApp(PurchaseCollectionApp, {\n    collection,\n    triggerElementDataSet: 'bowerCollectionHeroQuickBuy',\n  }).mount(heroEl)\n}\n"],"names":["freeDelivery","computed","selectedVariant","selectedVariantId","selectedSellingPlanId","isSubscriptionProduct","subscribeAndSave","price","subscribePrice","pricePer","savePercent","quantity","when","subscriptionToThisProduct","emitPurchaseEvent","url","nextOrderDate","usePurchaseState","props","emit","user","reactive","PurchaseService.getUser","savedState","PurchaseService.getSavedState","productId","ref","product","p","showLoginPrompt","purchaseState","showNextOrderToast","plasticWasteMetrics","watch","resetPurchaseState","onMounted","event","target","trackAbTestEvent","loadPlasticWasteMetrics","loadSubcriptionData","onPurchase","data","purchasePromise","addToCart","PurchaseService.createSubscription","track","__spreadValues","err","CartService.add","__async","res","PurchaseService.getSubscriptionData","e","entries","clickedLogin","PurchaseService.loginAndReturnHere","continueAsAnonymous","PurchaseService.setAnonymous","pathname","el","heroEl","scrollHint","maybeHideScrollHint","collection","createApp","PurchaseCollectionApp"],"mappings":"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"}