Merge pull request #1007 from searchspring/bundlectacleanup

refactor(preact-component-recommendationbundle): additional cta props…
searchspring · Mar 8, 2024 · 28b0769 · 28b0769
2 parents d242804 + 9843fea
commit 28b0769
Show file tree

Hide file tree

Showing 9 changed files with 155 additions and 85 deletions.
diff --git a/packages/snap-preact-components/package.json b/packages/snap-preact-components/package.json
@@ -22,7 +22,8 @@
 		"lint": "eslint 'src/components/**/*.{js,jsx,ts,tsx}'",
 		"storybook": "start-storybook -p 6006",
 		"cypress": "cypress open --project tests",
-		"test": "jest",
+		"cypress:headless": "cypress run --component --project tests",
+		"test": "jest; npm run cypress:headless",
 		"test:watch": "jest --watch"
 	},
 	"dependencies": {

diff --git a/packages/snap-preact-components/src/components/Organisms/RecommendationBundle/BundleCTA.tsx b/packages/snap-preact-components/src/components/Organisms/RecommendationBundle/BundleCTA.tsx
@@ -1,7 +1,9 @@
 /** @jsx jsx */
 import { h, Fragment } from 'preact';
+import { useState } from 'preact/hooks';
 import { jsx } from '@emotion/react';
 import { observer } from 'mobx-react';
+import classnames from 'classnames';
 import { cloneWithProps } from '../../../utilities';
 import { Button } from '../../Atoms/Button';
 import { Price } from '../../Atoms/Price';
@@ -19,7 +21,19 @@ export const BundledCTA = observer((properties: BundledCTAProps): JSX.Element =>
 		...properties,
 	};
 
-	const { ctaSlot, icon, cartStore, onAddToCartClick, addToCartText } = props;
+	props.onAddToCart = (e: any) => {
+		setAddedToCart(true);
+
+		properties.onAddToCart(e);
+
+		setTimeout(() => setAddedToCart(false), properties.ctaButtonSuccessTimeout);
+	};
+
+	const { ctaSlot, cartStore, onAddToCart, ctaIcon, ctaButtonText, ctaButtonSuccessText } = props;
+
+	const [addedToCart, setAddedToCart] = useState(false);
+
+	props.addedToCart = addedToCart;
 
 	const subProps: BundleSelectorSubProps = {
 		icon: {
@@ -40,9 +54,9 @@ export const BundledCTA = observer((properties: BundledCTAProps): JSX.Element =>
 			) : (
 				<Fragment>
 					<div className="ss__recommendation-bundle__wrapper__cta__subtotal">
-						{icon ? (
+						{ctaIcon ? (
 							<div className="icon">
-								<Icon {...subProps.icon} {...(typeof icon == 'string' ? { icon: icon as string } : (icon as Partial<IconProps>))} />
+								<Icon {...subProps.icon} {...(typeof ctaIcon == 'string' ? { icon: ctaIcon as string } : (ctaIcon as Partial<IconProps>))} />
 							</div>
 						) : (
 							<></>
@@ -62,8 +76,14 @@ export const BundledCTA = observer((properties: BundledCTAProps): JSX.Element =>
 						</div>
 					</div>
 
-					<Button className={'ss__recommendation-bundle__wrapper__cta__button'} onClick={(e) => onAddToCartClick(e)}>
-						{addToCartText}
+					<Button
+						className={classnames('ss__recommendation-bundle__wrapper__cta__button', {
+							addedToCart: 'ss__recommendation-bundle__wrapper__cta__button--added',
+						})}
+						onClick={(e) => onAddToCart(e)}
+						disabled={addedToCart}
+					>
+						{addedToCart ? ctaButtonSuccessText : ctaButtonText}
 					</Button>
 				</Fragment>
 			)}
@@ -78,7 +98,9 @@ export interface BundleSelectorSubProps {
 interface BundledCTAProps extends ComponentProps {
 	ctaSlot?: JSX.Element;
 	cartStore: CartStore;
-	icon?: string | Partial<IconProps> | boolean;
-	onAddToCartClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-	addToCartText?: string;
+	onAddToCart: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+	ctaIcon?: string | Partial<IconProps> | boolean;
+	ctaButtonText?: string;
+	ctaButtonSuccessText?: string;
+	ctaButtonSuccessTimeout?: number;
 }
diff --git a/...components/src/components/Organisms/RecommendationBundle/RecommendationBundle.stories.tsx b/...components/src/components/Organisms/RecommendationBundle/RecommendationBundle.stories.tsx
@@ -49,16 +49,6 @@ export default {
 			},
 			control: { type: 'none' },
 		},
-		onAddToCart: {
-			description: 'onClick event handler for add bundle to cart button',
-			type: { required: true },
-			table: {
-				type: {
-					summary: 'function',
-				},
-			},
-			action: 'onAddToCart',
-		},
 		results: {
 			description: 'Results store reference, overrides controller.store.results',
 			type: { required: false },
@@ -69,41 +59,33 @@ export default {
 			},
 			control: { type: 'none' },
 		},
-		title: {
-			description: 'Recommendation title',
+		resultComponent: {
+			description: 'Slot for custom result component',
 			table: {
 				type: {
-					summary: 'string | JSX Element',
+					summary: 'component',
 				},
-				defaultValue: { summary: '' },
 			},
-			control: { type: 'text' },
 		},
-		ctaButtonText: {
-			description: 'Text to render in add to cart button',
+		title: {
+			description: 'recommendation title',
 			table: {
 				type: {
-					summary: 'string',
+					summary: 'string | JSX Element',
 				},
-				defaultValue: { summary: 'Add All To Cart' },
+				defaultValue: { summary: '' },
 			},
 			control: { type: 'text' },
 		},
-		resultComponent: {
-			description: 'Slot for custom result component',
-			table: {
-				type: {
-					summary: 'component',
-				},
-			},
-		},
-		ctaSlot: {
-			description: 'Slot for custom add to cart component',
+		onAddToCart: {
+			description: 'onClick event handler for add bundle to cart button in CTA',
+			type: { required: true },
 			table: {
 				type: {
-					summary: 'component',
+					summary: 'function',
 				},
 			},
+			action: 'onAddToCart',
 		},
 		limit: {
 			description: 'limit the number of results rendered',
@@ -115,7 +97,7 @@ export default {
 			control: { type: 'number' },
 		},
 		carousel: {
-			description: 'Carousel Settings object',
+			description: 'Carousel settings object',
 			defaultValue: {
 				enabled: true,
 				loop: false,
@@ -124,7 +106,7 @@ export default {
 				type: {
 					summary: 'object',
 				},
-				defaultValue: { summary: 'Carousel Settings object' },
+				defaultValue: { summary: 'Carousel settings object' },
 			},
 			control: { type: 'object' },
 		},
@@ -193,6 +175,36 @@ export default {
 				options: [...Object.keys(iconPaths)],
 			},
 		},
+		ctaButtonText: {
+			description: 'text to render in add to cart button',
+			table: {
+				type: {
+					summary: 'string',
+				},
+				defaultValue: { summary: 'Add All To Cart' },
+			},
+			control: { type: 'text' },
+		},
+		ctaButtonSuccessText: {
+			description: 'text to temporarily render in the add to cart button after it is clicked',
+			table: {
+				type: {
+					summary: 'string',
+				},
+				defaultValue: { summary: 'Bundle Added!' },
+			},
+			control: { type: 'text' },
+		},
+		ctaButtonSuccessTimeout: {
+			description: 'Number of ms to show success text in add to cart button before reverting back to normal text',
+			defaultValue: 2000,
+			table: {
+				type: {
+					summary: 'number',
+				},
+			},
+			control: { type: 'number' },
+		},
 		ctaInline: {
 			description: 'boolean to enable the stacked add to cart button display',
 			table: {
@@ -203,6 +215,14 @@ export default {
 			},
 			control: { type: 'boolean' },
 		},
+		ctaSlot: {
+			description: 'Slot for custom add to cart component',
+			table: {
+				type: {
+					summary: 'component',
+				},
+			},
+		},
 		breakpoints: {
 			defaultValue: undefined,
 			description: 'Recommendation title',

diff --git a/...-preact-components/src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx b/...-preact-components/src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx
@@ -150,6 +150,8 @@ export const RecommendationBundle = observer((properties: RecommendationBundlePr
 		separatorIconSeedOnly: true,
 		ctaIcon: true,
 		ctaButtonText: 'Add All To Cart',
+		ctaButtonSuccessText: 'Bundle Added!',
+		ctaButtonSuccessTimeout: 2000,
 		ctaInline: true,
 		// global theme
 		...globalTheme?.components?.recommendationBundle,
@@ -185,6 +187,8 @@ export const RecommendationBundle = observer((properties: RecommendationBundlePr
 		resultComponent,
 		ctaSlot,
 		ctaButtonText,
+		ctaButtonSuccessText,
+		ctaButtonSuccessTimeout,
 		disableStyles,
 		ctaIcon,
 		ctaInline,
@@ -333,13 +337,12 @@ export const RecommendationBundle = observer((properties: RecommendationBundlePr
 			}
 		}
 	};
-
-	const addToCart = (e: any) => {
+	const addToCart = (e: MouseEvent) => {
 		// add to cart tracking
 		controller.track.addBundle(e, selectedItems);
 
 		//call the function passed
-		onAddToCart && onAddToCart(selectedItems);
+		onAddToCart && onAddToCart(e, selectedItems);
 	};
 
 	const setSeedwidth = () => {
@@ -547,19 +550,23 @@ export const RecommendationBundle = observer((properties: RecommendationBundlePr
 							<BundledCTA
 								ctaSlot={ctaSlot}
 								cartStore={cartStore}
-								onAddToCartClick={(e: any) => addToCart(e)}
-								addToCartText={ctaButtonText}
-								icon={ctaIcon}
+								onAddToCart={(e: any) => addToCart(e)}
+								ctaButtonText={ctaButtonText}
+								ctaButtonSuccessText={ctaButtonSuccessText}
+								ctaButtonSuccessTimeout={ctaButtonSuccessTimeout}
+								ctaIcon={ctaIcon}
 							/>
 						)}
 					</div>
 					{!ctaInline && (
 						<BundledCTA
 							ctaSlot={ctaSlot}
 							cartStore={cartStore}
-							onAddToCartClick={(e: any) => addToCart(e)}
-							addToCartText={ctaButtonText}
-							icon={ctaIcon}
+							onAddToCart={(e: any) => addToCart(e)}
+							ctaButtonText={ctaButtonText}
+							ctaButtonSuccessText={ctaButtonSuccessText}
+							ctaButtonSuccessTimeout={ctaButtonSuccessTimeout}
+							ctaIcon={ctaIcon}
 						/>
 					)}
 				</RecommendationProfileTracker>
@@ -580,7 +587,7 @@ export interface RecommendationBundleProps extends ComponentProps {
 	results?: Product[];
 	limit?: number;
 	controller: RecommendationController;
-	onAddToCart: (items: Product[]) => void;
+	onAddToCart: (e: MouseEvent, items: Product[]) => void;
 	title?: JSX.Element | string;
 	breakpoints?: BreakpointsProps;
 	resultComponent?: JSX.Element;
@@ -592,6 +599,8 @@ export interface RecommendationBundleProps extends ComponentProps {
 	ctaInline?: boolean;
 	ctaIcon?: string | Partial<IconProps> | boolean;
 	ctaButtonText?: string;
+	ctaButtonSuccessText?: string;
+	ctaButtonSuccessTimeout?: number;
 	ctaSlot?: JSX.Element;
 	vertical?: boolean;
 	carousel?: BundleCarouselProps;