refactor(preact-components-bundledrecommendation): some tweaks and bu…

…gfixes to bundledRecommendation
searchspring · Jan 3, 2024 · be36989 · be36989
1 parent 5fc146d
commit be36989
Show file tree

Hide file tree

Showing 13 changed files with 210 additions and 228 deletions.
diff --git a/packages/snap-controller/src/Recommendation/RecommendationController.ts b/packages/snap-controller/src/Recommendation/RecommendationController.ts
@@ -10,7 +10,7 @@ import type { RecommendationStore } from '@searchspring/snap-store-mobx';
 import type { Next } from '@searchspring/snap-event-manager';
 import type { RecommendationControllerConfig, BeforeSearchObj, AfterStoreObj, ControllerServices, ContextVariables } from '../types';
 
-export interface selectedItem {
+export interface SelectedBundleItem {
 	id: string;
 	quantity: number;
 }
@@ -22,7 +22,7 @@ type RecommendationTrackMethods = {
 		impression: (result: any) => BeaconEvent | undefined;
 	};
 	click: (e: MouseEvent) => BeaconEvent | undefined;
-	addBundleToCart: (e: MouseEvent, results: selectedItem[], price: number) => BeaconEvent | undefined;
+	addBundleToCart: (e: MouseEvent, results: SelectedBundleItem[], price: number) => BeaconEvent | undefined;
 	impression: () => BeaconEvent | undefined;
 	render: (results?: Product[]) => BeaconEvent | undefined;
 };
@@ -212,7 +212,7 @@ export class RecommendationController extends AbstractController {
 					return event;
 				},
 			},
-			addBundleToCart: (e: MouseEvent, results: selectedItem[], price: number): BeaconEvent | undefined => {
+			addBundleToCart: (e: MouseEvent, results: SelectedBundleItem[], price: number): BeaconEvent | undefined => {
 				if (!this.store.profile.tag) return;
 				const event: BeaconEvent = this.tracker.track.event({
 					type: BeaconType.PROFILE_CLICK,

diff --git a/packages/snap-preact-components/src/components/Molecules/Carousel/Carousel.tsx b/packages/snap-preact-components/src/components/Molecules/Carousel/Carousel.tsx
@@ -200,7 +200,7 @@ export const Carousel = observer((properties: CarouselProps): JSX.Element => {
 
 	const displaySettings = useDisplaySettings(props.breakpoints!);
 	if (displaySettings && Object.keys(displaySettings).length) {
-		const theme = deepmerge(props?.theme || {}, displaySettings?.theme || {});
+		const theme = deepmerge(props?.theme || {}, displaySettings?.theme || {}, { arrayMerge: (destinationArray, sourceArray) => sourceArray });
 
 		if (props.autoAdjustSlides && props.children.length < displaySettings.slidesPerView!) {
 			displaySettings.slidesPerView = props.children.length;
@@ -292,9 +292,9 @@ export const Carousel = observer((properties: CarouselProps): JSX.Element => {
 		const slides_visible = swiperElem?.querySelectorAll('.swiper-slide-visible');
 
 		slides_visible.forEach((element, idx) => {
-			element.classList.remove('last-visible-slide');
+			element.classList.remove('swiper-last-visible-slide');
 			if (idx == slides_visible.length - 1) {
-				element.classList.add('last-visible-slide');
+				element.classList.add('swiper-last-visible-slide');
 			}
 		});
 	};
@@ -323,6 +323,8 @@ export const Carousel = observer((properties: CarouselProps): JSX.Element => {
 						swiper.params.navigation.prevEl = navigationPrevRef.current ? navigationPrevRef.current : undefined;
 						//@ts-ignore : someone should refactor this
 						swiper.params.navigation.nextEl = navigationNextRef.current ? navigationNextRef.current : undefined;
+					}}
+					onInit={(swiper) => {
 						if (onInit) {
 							onInit(swiper);
 						}

diff --git a/...isms/BundledRecommendations/BundleCTA.tsx → ...nisms/BundledRecommendation/BundleCTA.tsx b/...isms/BundledRecommendations/BundleCTA.tsx → ...nisms/BundledRecommendation/BundleCTA.tsx
@@ -5,10 +5,10 @@ import { observer } from 'mobx-react-lite';
 import { cloneWithProps } from '../../../utilities';
 import { Button } from '../../Atoms/Button';
 import { Price } from '../../Atoms/Price';
-import type { selectedItem } from './BundledRecommendations';
+import type { selectedItem } from './BundledRecommendation';
 
 export const BundledCTA = observer((properties: BundledCTAProps): JSX.Element => {
-	const { ctaSlot, selectedItems, bundlePrice, bundleStrikePrice, addToCartFunc, addToCartText } = properties;
+	const { ctaSlot, selectedItems, bundlePrice, bundleStrikePrice, onAddToCartClick, addToCartText } = properties;
 
 	let totalNumProdsInBundle = 0;
 
@@ -17,43 +17,44 @@ export const BundledCTA = observer((properties: BundledCTAProps): JSX.Element =>
 	});
 
 	return (
-		<div className={`ss__bundled-recommendations__product-wrapper__cta`}>
+		<div className={`ss__bundled-recommendations__wrapper__cta`}>
 			{ctaSlot ? (
 				cloneWithProps(ctaSlot, {
 					selectedItems: selectedItems,
 					bundlePrice: bundlePrice,
-					strikePrice: bundleStrikePrice,
-					onclick: (e: any) => addToCartFunc(e),
+					bundleStrikePrice: bundleStrikePrice,
+					onAddToCartClick: (e: any) => onAddToCartClick(e),
 				})
 			) : (
 				<Fragment>
-					<p className="ss__bundled-recommendations__product-wrapper__cta__subtotal">
-						{`Subtotal for ${totalNumProdsInBundle} items `}
-						<div className="ss__bundled-recommendations__product-wrapper__cta__subtotal__prices">
-							{bundleStrikePrice && bundleStrikePrice !== bundlePrice && (
-								<label className="ss__bundled-recommendations__product-wrapper__cta__subtotal__strike">
+					<div className="ss__bundled-recommendations__wrapper__cta__subtotal">
+						<span className="ss__bundled-recommendations__wrapper__cta__subtotal__title">{`Subtotal for ${totalNumProdsInBundle} items `}</span>
+						<div className="ss__bundled-recommendations__wrapper__cta__subtotal__prices">
+							{bundleStrikePrice && bundleStrikePrice !== bundlePrice ? (
+								<label className="ss__bundled-recommendations__wrapper__cta__subtotal__strike">
 									Was <Price lineThrough={true} value={bundleStrikePrice} />
 								</label>
+							) : (
+								<></>
 							)}
-							<label className="ss__bundled-recommendations__product-wrapper__cta__subtotal__price">
+							<label className="ss__bundled-recommendations__wrapper__cta__subtotal__price">
 								<Price value={bundlePrice} />
 							</label>
 						</div>
-					</p>
+					</div>
 
-					<Button onClick={(e) => addToCartFunc(e)}>{addToCartText}</Button>
+					<Button onClick={(e) => onAddToCartClick(e)}>{addToCartText}</Button>
 				</Fragment>
 			)}
 		</div>
 	);
 });
 
 interface BundledCTAProps {
-	isMobile: boolean;
 	ctaSlot?: JSX.Element;
 	selectedItems: selectedItem[];
 	bundlePrice: number;
 	bundleStrikePrice?: number;
-	addToCartFunc: (e: any) => void;
+	onAddToCartClick: (e: any) => void;
 	addToCartText?: string;
 }
diff --git a/...BundledRecommendations/BundleSelector.tsx → .../BundledRecommendation/BundleSelector.tsx b/...BundledRecommendations/BundleSelector.tsx → .../BundledRecommendation/BundleSelector.tsx
@@ -23,14 +23,13 @@ export const BundleSelector = observer((properties: BundleSelectorProps): JSX.El
 	const subProps: BundleSelectorSubProps = {
 		icon: {
 			// default props
-			className: 'ss__bundled-recommendations__product-wrapper__selector__icon',
-			color: 'black',
+			className: 'ss__bundled-recommendations__wrapper__selector__icon',
 			size: 15,
 			// global theme
 			...globalTheme?.components?.icon,
 		},
 		checkbox: {
-			className: 'ss__bundled-recommendations__product-wrapper__selector__result-wrapper__checkbox',
+			className: 'ss__bundled-recommendations__wrapper__selector__result-wrapper__checkbox',
 			checked: checked,
 			onClick: onCheck,
 			...globalTheme?.components?.checkbox,
@@ -39,20 +38,17 @@ export const BundleSelector = observer((properties: BundleSelectorProps): JSX.El
 
 	return (
 		<div
-			className={classnames(
-				'ss__bundled-recommendations__product-wrapper__selector',
-				seedText ? 'ss__bundled-recommendations__product-wrapper__selector--seed' : ''
-			)}
+			className={classnames('ss__bundled-recommendations__wrapper__selector', seedText ? 'ss__bundled-recommendations__wrapper__selector--seed' : '')}
 		>
-			<div className="ss__bundled-recommendations__product-wrapper__selector__result-wrapper">
+			<div className="ss__bundled-recommendations__wrapper__selector__result-wrapper">
 				{showCheckboxes && <Checkbox {...subProps.checkbox} />}
-				{seedText && <div className={'ss__bundled-recommendations__product-wrapper__selector__result-wrapper__seed-badge'}>{seedText}</div>}
+				{seedText && <div className={'ss__bundled-recommendations__wrapper__selector__result-wrapper__seed-badge'}>{seedText}</div>}
 				{children}
 				{typeof quantity == 'number' && (
-					<div className="ss__bundled-recommendations__product-wrapper__selector__qty">
+					<div className="ss__bundled-recommendations__wrapper__selector__qty">
 						{qtyText}
 						<input
-							className="ss__bundled-recommendations__product-wrapper__selector__qty__input"
+							className="ss__bundled-recommendations__wrapper__selector__qty__input"
 							onChange={onInputChange}
 							aria-label="Product Quantity"
 							type="number"

diff --git a/...ations/BundledRecommendations.stories.tsx → ...ndation/BundledRecommendation.stories.tsx b/...ations/BundledRecommendations.stories.tsx → ...ndation/BundledRecommendation.stories.tsx
@@ -78,8 +78,8 @@ export default {
 			},
 			control: { type: 'text' },
 		},
-		addToCartText: {
-			description: 'Text to render in add to cart button. ',
+		addToCartButtonText: {
+			description: 'Text to render in add to cart button',
 			table: {
 				type: {
 					summary: 'string',
@@ -156,7 +156,7 @@ export default {
 			control: { type: 'boolean' },
 		},
 		seedText: {
-			description: 'Text to render in seed product badge.',
+			description: 'Text to render in seed product badge',
 			table: {
 				type: {
 					summary: 'string',
@@ -165,8 +165,8 @@ export default {
 			},
 			control: { type: 'text' },
 		},
-		seedIconOnly: {
-			description: 'boolean to only have seperator Icon for the seed product.',
+		seedSeparatorIconOnly: {
+			description: 'boolean to only have seperator Icon for the seed product',
 			table: {
 				type: {
 					summary: 'boolean',
@@ -189,25 +189,24 @@ export default {
 				options: [...Object.keys(iconPaths)],
 			},
 		},
-		mobileMediaQuery: {
-			defaultValue: '(max-width: 650px)',
-			description: 'Media query for when to enable the mobile display',
+		stackedCTA: {
+			description: 'boolean to enable the stacked add to cart button display',
 			table: {
 				type: {
-					summary: 'string',
+					summary: 'boolean',
 				},
-				defaultValue: { summary: '(max-width: 650px)' },
+				defaultValue: { summary: false },
 			},
-			control: { type: 'text' },
+			control: { type: 'boolean' },
 		},
-		peekabooEnableAt: {
+		peekaboo: {
 			defaultValue: '',
-			description: 'Media query for when to enable the peekaboo carousel',
+			description: 'boolean to enable the peekaboo carousel',
 			table: {
 				type: {
-					summary: 'string',
+					summary: 'boolean',
 				},
-				defaultValue: { summary: '' },
+				defaultValue: { summary: false },
 			},
 			control: { type: 'text' },
 		},

diff --git a/...endations/BundledRecommendations.test.tsx → ...mmendation/BundledRecommendation.test.tsx b/...endations/BundledRecommendations.test.tsx → ...mmendation/BundledRecommendation.test.tsx