Bundled variants

packages/snap-preact-components/src/components/Atoms/Price/Price.tsx

@@ -55,7 +55,7 @@ export function Price(properties: PriceProps): JSX.Element {
 		style,
 	} = props;
 
-	const formattedPrice = filters.currency(value, {
+	const formattedPrice = filters.currency(+value, {
 		symbol,
 		decimalPlaces,
 		padDecimalPlaces,

packages/snap-preact-components/src/components/Molecules/Carousel/Carousel.stories.tsx

@@ -53,7 +53,7 @@ export default {
 				},
 				defaultValue: { summary: false },
 			},
-			control: { type: 'boolean | SwiperOptions.pagination' },
+			control: { type: 'boolean' },
 		},
 		vertical: {
 			defaultValue: false,

packages/snap-preact-components/src/components/Molecules/Carousel/Carousel.tsx

@@ -87,10 +87,8 @@ const CSS = {
 				padding: 0,
 				zIndex: '1',
 			},
-			'.swiper-container-vertical': {
-				'.swiper-wrapper': {
-					flexDirection: 'column',
-				},
+			'.swiper-vertical > .swiper-wrapper': {
+				flexDirection: 'column',
 			},
 			'.swiper-wrapper': {
 				order: 0,
@@ -133,13 +131,17 @@ const CSS = {
 			},
 			'.swiper-container-pointer-events': {
 				touchAction: 'pan-y',
-				'&.swiper-container-vertical': {
-					touchAction: 'pan-x',
-				},
 			},
 			'.swiper-slide-invisible-blank': {
 				visibility: 'hidden',
 			},
+
+			'.swiper-horizontal': {
+				touchAction: 'pan-y',
+			},
+			'.swiper-vertical': {
+				touchAction: 'pan-x',
+			},
 		}),
 };
 

packages/snap-preact-components/src/components/Molecules/Result/Result.tsx

@@ -23,7 +23,7 @@ const CSS = {
 				flexDirection: 'column',
 				height: '100%',
 				'& .ss__result__image-wrapper': {
-					flex: '1 0 auto',
+					// flex: '1 0 auto',
 					minHeight: '0%',
 				},
 			},
@@ -70,6 +70,27 @@ const CSS = {
 					marginBottom: '10px',
 				},
 			},
+
+			'& .selection-value': {
+				padding: '5px',
+				cursor: 'pointer',
+			},
+			'& .selection-value-selected': {
+				fontWeight: 'bold',
+			},
+			'& .variant-selection': {
+				display: 'grid',
+				gridTemplateColumns: `repeat(${6}, 1fr)`,
+			},
+			'& .selection-value-disabled': {
+				opacity: 0.5,
+				textDecoration: 'line-through',
+				// cursor: 'initial'
+			},
+			'& .variant-title': {
+				fontWeight: 'bold',
+				fontSize: '13px',
+			},
 		}),
 };
 
@@ -79,17 +100,32 @@ export const Result = observer((properties: ResultProps): JSX.Element => {
 	const props: ResultProps = {
 		// default props
 		layout: Layout.GRID,
+		hideSelections: true,
 		// global theme
 		...globalTheme?.components?.result,
 		// props
 		...properties,
 		...properties.theme?.components?.result,
 	};
 
-	const { result, hideBadge, hideTitle, hidePricing, hideImage, detailSlot, fallback, disableStyles, className, layout, onClick, style, controller } =
-		props;
+	const {
+		result,
+		hideBadge,
+		hideTitle,
+		hidePricing,
+		hideImage,
+		hideSelections,
+		detailSlot,
+		fallback,
+		disableStyles,
+		className,
+		layout,
+		onClick,
+		style,
+		controller,
+	} = props;
 
-	const core = result?.mappings?.core;
+	const core = result?.display?.mappings.core || result?.mappings?.core;
 
 	const subProps: ResultSubProps = {
 		price: {
@@ -146,6 +182,8 @@ export const Result = observer((properties: ResultProps): JSX.Element => {
 		styling.css = [style];
 	}
 
+	const selections = result.variants?.selections;
+
 	return core ? (
 		<CacheProvider>
 			<article {...styling} className={classnames('ss__result', `ss__result--${layout}`, className)}>
@@ -189,6 +227,36 @@ export const Result = observer((properties: ResultProps): JSX.Element => {
 							)}
 						</div>
 					)}
+					{selections && !hideSelections && (
+						<div className="ss__result__details__variants">
+							{selections.map((selection: any) => {
+								if (selection.values.length) {
+									return (
+										<div className="ss__result__details__variant">
+											<div className="variant-title">{selection.label}: </div>
+											<div className="variant-selection">
+												{selection.values.map((value: any) => {
+													return (
+														<div
+															className={`selection-value ${!value.available ? 'selection-value-disabled' : ''} ${
+																selection.selected == value.value ? 'selection-value-selected' : ''
+															}`}
+															onClick={() => {
+																selection.select(value.value);
+															}}
+														>
+															{/* <div>label {value.label}</div> */}
+															<div>{value.value}</div>
+														</div>
+													);
+												})}
+											</div>
+										</div>
+									);
+								}
+							})}
+						</div>
+					)}
 					{cloneWithProps(detailSlot, { result })}
 				</div>
 			</article>
@@ -215,6 +283,7 @@ export interface ResultProps extends ComponentProps {
 	hideImage?: boolean;
 	hidePricing?: boolean;
 	detailSlot?: JSX.Element;
+	hideSelections?: boolean;
 	fallback?: string;
 	layout?: LayoutType;
 	truncateTitle?: TruncateTitleProps;

packages/snap-preact-components/src/components/Molecules/Select/Select.tsx

@@ -144,6 +144,11 @@ export const Select = observer((properties: SelectProps): JSX.Element => {
 	// selection state
 	const [selection, setSelection] = useState<Option | undefined>(selected);
 
+	// reset selection if 'selected' prop changes
+	if (selection && selected && selection != selected) {
+		setSelection(selected);
+	}
+
 	if (selection && clearSelection) {
 		options = [
 			{

packages/snap-preact-components/src/components/Organisms/BundledRecommendation/BundleCTA.tsx

@@ -6,16 +6,47 @@ import { cloneWithProps } from '../../../utilities';
 import { Button } from '../../Atoms/Button';
 import { Price } from '../../Atoms/Price';
 import type { Product } from '@searchspring/snap-store-mobx';
+import { Theme, useTheme } from '../../../providers';
+import { Icon, IconProps } from '../../Atoms/Icon';
+import type { ComponentProps } from '../../../types';
 
 export const BundledCTA = observer((properties: BundledCTAProps): JSX.Element => {
-	const { ctaSlot, selectedItems, bundlePrice, bundleStrikePrice, onAddToCartClick, addToCartText } = properties;
+	const globalTheme: Theme = useTheme();
+
+	const props: BundledCTAProps = {
+		// default props
+		// global theme
+		...properties,
+	};
+
+	const { ctaSlot, selectedItems, icon, bundlePrice, bundleStrikePrice, onAddToCartClick, addToCartText } = props;
 
 	let totalNumProdsInBundle = 0;
 
 	selectedItems.forEach((item) => {
 		totalNumProdsInBundle += item.quantity;
 	});
 
+	const subProps: BundleSelectorSubProps = {
+		icon: {
+			// default props
+			className: 'ss__bundled-recommendations__wrapper__cta__icon',
+			viewBox: '0 0 512 512',
+			path: [
+				{
+					type: 'path',
+					attributes: {
+						d: 'm256 122c20 0 40 0 59 0 4 0 5-1 5-5-2-19-8-37-21-52-22-24-56-26-81-4-17 15-24 35-25 57 0 4 2 4 5 4 19 0 39 0 58 0m0 344c19 0 39 0 59 0 20 0 40 0 61 0 15 0 24-7 27-22 1-5 0-10 0-15 0-8-1-15-1-22-1-19-2-37-4-56-1-28-3-57-5-85-2-24-3-48-5-72 0-13-7-21-18-24-3-1-8-2-12-2-68 0-136 0-204 0-3 0-6 1-8 1-11 1-21 10-22 21-1 5-1 11-1 16-2 24-3 48-5 72-1 23-3 46-4 69-2 29-4 58-6 87-1 21 10 32 31 32 39 0 78 0 117 0m-109-343c2-14 3-27 7-39 12-41 37-70 79-81 43-10 79 5 106 41 17 21 25 46 25 74 0 1 0 3 1 4 6 1 12 2 17 4 30 8 50 35 51 67 1 24 3 48 5 73 1 17 2 35 3 52 2 25 3 49 5 74 1 17 2 34 2 50-1 39-32 70-70 70-82 0-163 0-244 0-35 0-64-25-69-61-2-14-1-29 0-44 1-19 2-38 4-57 1-24 3-48 4-72 2-18 2-36 4-55 1-15 1-31 4-46 5-28 30-50 59-53 2-1 5-1 7-1',
+					},
+				},
+			],
+			size: 50,
+			// global theme
+			...globalTheme?.components?.icon,
+			// component theme overrides
+			theme: props?.theme,
+		},
+	};
 	return (
 		<div className={`ss__bundled-recommendations__wrapper__cta`}>
 			{ctaSlot ? (
@@ -28,6 +59,13 @@ export const BundledCTA = observer((properties: BundledCTAProps): JSX.Element =>
 			) : (
 				<Fragment>
 					<div className="ss__bundled-recommendations__wrapper__cta__subtotal">
+						{icon ? (
+							<div className="icon">
+								<Icon {...subProps.icon} {...(typeof icon == 'string' ? { icon: icon as string } : (icon as Partial<IconProps>))} />
+							</div>
+						) : (
+							<></>
+						)}
 						<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 ? (
@@ -50,9 +88,14 @@ export const BundledCTA = observer((properties: BundledCTAProps): JSX.Element =>
 	);
 });
 
-interface BundledCTAProps {
+export interface BundleSelectorSubProps {
+	icon: Partial<IconProps>;
+}
+
+interface BundledCTAProps extends ComponentProps {
 	ctaSlot?: JSX.Element;
 	selectedItems: Product[];
+	icon?: string | Partial<IconProps> | boolean;
 	bundlePrice: number;
 	bundleStrikePrice?: number;
 	onAddToCartClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;

packages/snap-preact-components/src/components/Organisms/BundledRecommendation/BundleSelector.tsx

@@ -6,19 +6,20 @@ import { observer } from 'mobx-react-lite';
 import { Theme, useTheme } from '../../../providers';
 import { Checkbox, CheckboxProps } from '../../Molecules/Checkbox';
 import { Icon, IconProps } from '../../Atoms/Icon';
+import type { ComponentProps } from '../../../types';
 
 export const BundleSelector = observer((properties: BundleSelectorProps): JSX.Element => {
 	const globalTheme: Theme = useTheme();
 
 	const props: BundleSelectorProps = {
 		// default props
 		showCheckboxes: true,
-		qtyText: 'Qty:',
+		quantityPickerText: 'Qty:',
 		// global theme
 		...properties,
 	};
 
-	const { children, checked, quantity, icon, seedText, qtyText, showCheckboxes, onCheck, onInputChange } = props;
+	const { children, checked, quantity, icon, seedText, quantityPickerText, showCheckboxes, onCheck, onInputChange } = props;
 
 	const subProps: BundleSelectorSubProps = {
 		icon: {
@@ -27,12 +28,17 @@ export const BundleSelector = observer((properties: BundleSelectorProps): JSX.El
 			size: 15,
 			// global theme
 			...globalTheme?.components?.icon,
+			// component theme overrides
+			theme: props?.theme,
 		},
 		checkbox: {
 			className: 'ss__bundled-recommendations__wrapper__selector__result-wrapper__checkbox',
 			checked: checked,
 			onClick: onCheck,
+			// global theme
 			...globalTheme?.components?.checkbox,
+			// component theme overrides
+			theme: props?.theme,
 		},
 	};
 
@@ -46,7 +52,7 @@ export const BundleSelector = observer((properties: BundleSelectorProps): JSX.El
 				{children}
 				{typeof quantity == 'number' && (
 					<div className="ss__bundled-recommendations__wrapper__selector__qty">
-						{qtyText}
+						{quantityPickerText}
 						<input
 							className="ss__bundled-recommendations__wrapper__selector__qty__input"
 							onChange={onInputChange}
@@ -69,13 +75,13 @@ export interface BundleSelectorSubProps {
 	checkbox: Partial<CheckboxProps>;
 }
 
-export interface BundleSelectorProps {
+export interface BundleSelectorProps extends ComponentProps {
 	children?: ComponentChildren;
 	checked?: boolean;
 	quantity?: number;
 	seedText?: string;
 	showCheckboxes?: boolean;
-	qtyText?: string;
+	quantityPickerText?: string;
 	onCheck?: () => void;
 	onInputChange?: (e: any) => void;
 	icon?: string | Partial<IconProps> | boolean;