fix: checkout link is disabled when cart is emptied

commercelayer · Dec 7, 2022 · d1bc54a · d1bc54a
1 parent 15836be
commit d1bc54a
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 8 deletions.
diff --git a/packages/drop-in/src/apis/commercelayer/cart.ts b/packages/drop-in/src/apis/commercelayer/cart.ts
@@ -4,6 +4,7 @@ import { getKeyForCart } from '#apis/storage'
 import { pDebounce } from '#utils/promise'
 import type { Order } from '@commercelayer/sdk'
 import Cookies from 'js-cookie'
+import memoize from 'lodash/memoize'
 
 /**
  * Create a draft order.
@@ -117,7 +118,7 @@ export async function _getCart(): Promise<Order | null> {
   return order
 }
 
-export const getCart = pDebounce(_getCart, { wait: 50, maxWait: 100 })
+export const getCart = memoize(pDebounce(_getCart, { wait: 10, maxWait: 50 }))
 
 export interface TriggerCartUpdateEvent {
   /** Order */
@@ -150,6 +151,10 @@ export interface TriggerHostedCartUpdateEvent {
  * @param iframeId iFrame ID who triggered the event
  */
 export async function triggerHostedCartUpdate(iframeId: string): Promise<void> {
+  if (getCart.cache.clear !== undefined) {
+    getCart.cache.clear()
+  }
+
   const order = await getCart()
 
   if (order !== null) {
@@ -176,6 +181,10 @@ export async function addItem(sku: string, quantity: number): Promise<void> {
     _update_quantity: true
   })
 
+  if (getCart.cache.clear !== undefined) {
+    getCart.cache.clear()
+  }
+
   await triggerCartUpdate()
 }
 

diff --git a/packages/drop-in/src/apis/commercelayer/prices.ts b/packages/drop-in/src/apis/commercelayer/prices.ts
@@ -58,7 +58,7 @@ const _getPrices = async (skus: string[]): Promise<PriceList> => {
   return prices
 }
 
-const getPrices = pDebounce(_getPrices, { wait: 50, maxWait: 100 })
+const getPrices = pDebounce(_getPrices, { wait: 10, maxWait: 50 })
 
 export const getPrice = memoize(
   async (sku: string): Promise<Price | undefined> => {

diff --git a/packages/drop-in/src/apis/commercelayer/skus.ts b/packages/drop-in/src/apis/commercelayer/skus.ts
@@ -82,7 +82,7 @@ const _getSkuIds = async (skus: string[]): Promise<SkuIdList> => {
   return ids
 }
 
-const getSkuIds = pDebounce(_getSkuIds, { wait: 50, maxWait: 100 })
+const getSkuIds = pDebounce(_getSkuIds, { wait: 10, maxWait: 50 })
 
 export const getSkuId = memoize(
   async (sku: string): Promise<string | undefined> => {

diff --git a/packages/drop-in/src/components/cl-checkout-link/cl-checkout-link.tsx b/packages/drop-in/src/components/cl-checkout-link/cl-checkout-link.tsx
@@ -1,6 +1,7 @@
 import {
   getCheckoutUrl,
-  TriggerCartUpdateEvent
+  TriggerCartUpdateEvent,
+  TriggerHostedCartUpdateEvent
 } from '#apis/commercelayer/cart'
 import {
   Component,
@@ -34,9 +35,27 @@ export class ClCheckoutLink implements Props {
 
   @Listen('cartUpdate', { target: 'window' })
   async cartUpdateHandler(
-    _event: CustomEvent<TriggerCartUpdateEvent>
+    event: CustomEvent<TriggerCartUpdateEvent>
   ): Promise<void> {
-    this.href = await getCheckoutUrl()
+    if (
+      this.href === undefined &&
+      event.detail.order.skus_count !== undefined &&
+      event.detail.order.skus_count > 0
+    ) {
+      this.href = await getCheckoutUrl()
+    }
+  }
+
+  @Listen('hostedCartUpdate', { target: 'window' })
+  async hostedCartUpdateHandler(
+    event: CustomEvent<TriggerHostedCartUpdateEvent>
+  ): Promise<void> {
+    if (
+      event.detail.order.skus_count === undefined ||
+      event.detail.order.skus_count === 0
+    ) {
+      this.href = undefined
+    }
   }
 
   render(): JSX.Element {

diff --git a/packages/drop-in/src/index.html b/packages/drop-in/src/index.html
@@ -71,7 +71,7 @@
               <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7.813 18h15.7a1.988 1.988 0 0 0 1.962-1.637L27 8H6"/>
             </svg>
             <cl-cart-count aria-hidden="true"></cl-cart-count>
-            <cl-cart></cl-cart>
+            <cl-cart open-on-add></cl-cart>
           </cl-cart-link>
 
           <cl-cart-link target="_blank" class="ml-4">
@@ -83,7 +83,7 @@
             Checkout
           </cl-checkout-link>
 
-          <cl-cart type="mini" open-on-add></cl-cart>
+          <!-- <cl-cart type="mini" open-on-add></cl-cart> -->
         </div>
       </nav>