From 15836be834222ef0b6a5ba84ebf94fd987a49211 Mon Sep 17 00:00:00 2001 From: Marco Montalbano Date: Wed, 7 Dec 2022 20:39:35 +0100 Subject: [PATCH 1/2] docs: use minicart in the demo --- packages/docs/stories/introduction.stories.mdx | 5 ++++- packages/docs/stories/introduction.stories.ts | 15 ++++++++++++--- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/docs/stories/introduction.stories.mdx b/packages/docs/stories/introduction.stories.mdx index c0adc58c..abc27afc 100644 --- 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'; - + # Drop-in library diff --git a/packages/docs/stories/introduction.stories.ts b/packages/docs/stories/introduction.stories.ts index e6d50174..cb5b39b1 100644 --- 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 = { - title: 'Introduction' + title: 'Introduction', + argTypes: { + 'Use minicart.css': { + table: { + disable: false + } + } + } } export const Basic: StoryFn = () => { @@ -27,7 +34,8 @@ export const Basic: StoryFn = () => { - + + @@ -133,7 +141,8 @@ export const Basic: StoryFn = () => { } Basic.args = { - 'Use drop-in.css': true + 'Use drop-in.css': true, + 'Use minicart.css': true } // Basic.parameters = { From d1bc54add3bd1a0998071107ca5f767c62dca084 Mon Sep 17 00:00:00 2001 From: Marco Montalbano Date: Wed, 7 Dec 2022 21:27:00 +0100 Subject: [PATCH 2/2] fix: checkout link is disabled when cart is emptied --- .../drop-in/src/apis/commercelayer/cart.ts | 11 +++++++- .../drop-in/src/apis/commercelayer/prices.ts | 2 +- .../drop-in/src/apis/commercelayer/skus.ts | 2 +- .../cl-checkout-link/cl-checkout-link.tsx | 25 ++++++++++++++++--- packages/drop-in/src/index.html | 4 +-- 5 files changed, 36 insertions(+), 8 deletions(-) diff --git a/packages/drop-in/src/apis/commercelayer/cart.ts b/packages/drop-in/src/apis/commercelayer/cart.ts index ec5de6f5..052a4db1 100644 --- 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 { 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 { + 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 { _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 index 138e90e1..2a61134b 100644 --- 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 => { 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 => { diff --git a/packages/drop-in/src/apis/commercelayer/skus.ts b/packages/drop-in/src/apis/commercelayer/skus.ts index dffd3a76..0ccc98e5 100644 --- 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 => { 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 => { 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 index a52065ac..5bf9654a 100644 --- 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 + event: CustomEvent ): Promise { - 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 + ): Promise { + 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 index e691083c..d921ba80 100644 --- a/packages/drop-in/src/index.html +++ b/packages/drop-in/src/index.html @@ -71,7 +71,7 @@ - + @@ -83,7 +83,7 @@ Checkout - +