Merge pull request #6 from commercelayer/fix-checkout-link

Checkout link is disabled when cart is emptied
commercelayer · Dec 7, 2022 · c308bc1 · c308bc1
2 parents a4d5c64 + d1bc54a
commit c308bc1
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 12 deletions.
diff --git a/packages/docs/stories/introduction.stories.mdx b/packages/docs/stories/introduction.stories.mdx
@@ -2,7 +2,10 @@ import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs'
 import { linkTo } from '@storybook/addon-links'
 import { meta, Basic } from './introduction.stories.ts';
 
-<Meta title={meta.title} />
+<Meta
+  title={meta.title}
+  argTypes={meta.argTypes}
+/>
 
 # Drop-in library
 

diff --git a/packages/docs/stories/introduction.stories.ts b/packages/docs/stories/introduction.stories.ts
@@ -9,7 +9,14 @@ import { codes } from './assets/constants'
 type Args = GlobalArgs & {}
 
 export const meta: Meta<Args> = {
-  title: 'Introduction'
+  title: 'Introduction',
+  argTypes: {
+    'Use minicart.css': {
+      table: {
+        disable: false
+      }
+    }
+  }
 }
 
 export const Basic: StoryFn<Args> = () => {
@@ -27,7 +34,8 @@ export const Basic: StoryFn<Args> = () => {
               <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M23 23H8.725L5.238 3.825A1 1 0 0 0 4.261 3H2M10 28a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM23 28a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"/>
               <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></cl-cart-count>
+            <cl-cart-count hide-when-empty></cl-cart-count>
+            <cl-cart open-on-add></cl-cart>
           </cl-cart-link>
         </div>
       </nav>
@@ -133,7 +141,8 @@ export const Basic: StoryFn<Args> = () => {
 }
 
 Basic.args = {
-  'Use drop-in.css': true
+  'Use drop-in.css': true,
+  'Use minicart.css': true
 }
 
 // Basic.parameters = {

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>