@athoscommerce/snap-preact 1.0.0

package/dist/esm/components/src/components/Templates/RecommendationBundle/RecommendationBundle.js

@@ -0,0 +1,428 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { useRef, useEffect, useState, useMemo } from 'preact/hooks';
+import { observer } from 'mobx-react-lite';
+import deepmerge from 'deepmerge';
+import { Carousel } from '../../Molecules/Carousel';
+import { Result } from '../../Molecules/Result';
+import { cloneWithProps, defined, mergeProps, mergeStyles } from '../../../utilities';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
+import { RecommendationProfileTracker } from '../../Trackers/Recommendation/ProfileTracker';
+import { ResultTracker } from '../../Trackers/ResultTracker';
+import { BundleSelector } from './BundleSelector';
+import { BundledCTA } from './BundleCTA';
+import { useIntersection } from '../../../hooks';
+import { componentNameToClassName } from '../../../utilities/componentNameToClassName';
+const defaultStyles = ({ vertical, separatorIcon, carousel, ctaInline, hasSeed, hideSeed, carouselEnabled, limit, alias: inherits, }) => {
+    let classNamePrefix = 'ss__recommendation-bundle';
+    if (inherits) {
+        classNamePrefix = `ss__${componentNameToClassName(inherits)}`;
+    }
+    const slidesPerView = carousel?.slidesPerView;
+    return css({
+        [`.${classNamePrefix}__wrapper`]: {
+            display: 'flex',
+            maxWidth: '100%',
+            margin: '0',
+            padding: '0',
+        },
+        [`.${classNamePrefix}__wrapper__selector--seed`]: {
+            width: `${vertical ? '100%' : 'auto'}`,
+            margin: `${!separatorIcon ? 'auto !important' : 'initial'}`,
+        },
+        [`.${classNamePrefix}__wrapper__seed-container`]: {
+            width: vertical ? '100%' : `calc(100% / ${slidesPerView + (!ctaInline ? 0 : 1)})`,
+        },
+        [`.${classNamePrefix}__wrapper__cta`]: {
+            width: vertical ? '100%' : `${!ctaInline ? '100%' : `calc(100% / ${(carouselEnabled ? slidesPerView : limit || 0) + 1})`}`,
+            textAlign: 'center',
+            [`.${classNamePrefix}__wrapper__cta__subtotal__prices`]: {
+                display: 'block',
+            },
+            [`.${classNamePrefix}__wrapper__cta__button--added`]: {
+                cursor: 'none',
+                pointerEvents: 'none',
+                opacity: '.7',
+            },
+        },
+        [`.${classNamePrefix}__wrapper__carousel`]: {
+            boxSizing: 'border-box',
+            width: vertical ? '100%' : `calc(calc(100% / ${slidesPerView + (!ctaInline ? 0 : 1)}) * ${slidesPerView - (hasSeed && !hideSeed ? 1 : 0)})`,
+        },
+        [`.${classNamePrefix}__wrapper--seed-in-carousel`]: {
+            [`.${classNamePrefix}__wrapper__cta`]: {
+                width: vertical ? '100%' : `calc(100% / ${carousel?.slidesPerView + (!ctaInline ? 0 : 1)})`,
+            },
+            [`.${classNamePrefix}__wrapper__carousel`]: {
+                width: vertical ? '100%' : `calc(calc(100% / ${carousel?.slidesPerView + (!ctaInline ? 0 : 1)}) * ${carousel?.slidesPerView})`,
+                padding: '0',
+            },
+        },
+        '.swiper-slide, .swiper-slide-visible.swiper-last-visible-slide': {
+            [`.${classNamePrefix}__wrapper__selector__icon`]: {
+                display: 'none',
+            },
+        },
+        '.swiper-slide-visible': {
+            [`.${classNamePrefix}__wrapper__selector__icon`]: {
+                display: 'block',
+            },
+        },
+        [`.${classNamePrefix}__wrapper--vertical`]: {
+            flexDirection: 'column',
+        },
+        [`.${classNamePrefix}__wrapper__selector`]: {
+            alignItems: 'baseline',
+            position: 'relative',
+            [`&.${classNamePrefix}__wrapper__selector--last`]: {
+                [`.${classNamePrefix}__wrapper__selector__icon`]: {
+                    display: 'none',
+                },
+            },
+            [`.${classNamePrefix}__wrapper__selector__result-wrapper__seed-badge`]: {
+                position: 'absolute',
+                top: '0',
+                left: '0',
+                zIndex: '1',
+            },
+            [`.${classNamePrefix}__wrapper__selector__icon`]: {
+                position: 'absolute',
+                right: '-1em',
+                top: '140px',
+            },
+            [`.${classNamePrefix}__wrapper__selector__result-wrapper`]: {
+                alignItems: 'center',
+                position: 'relative',
+                margin: `0px ${5 + (Number(carousel?.spaceBetween) || 0)}px`,
+            },
+            [`.${classNamePrefix}__wrapper__selector__result-wrapper__checkbox`]: {
+                position: 'absolute',
+                top: '0',
+                right: '0',
+                //needs to be above 100 to get above badges
+                zIndex: '101',
+                cursor: 'pointer',
+            },
+        },
+    });
+};
+export const RecommendationBundle = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultCarouselBreakpoints = {
+        0: {
+            slidesPerView: 2,
+            slidesPerGroup: 2,
+            spaceBetween: 10,
+            ctaInline: false,
+        },
+        768: {
+            slidesPerView: 3,
+            slidesPerGroup: 3,
+            spaceBetween: 10,
+        },
+        1200: {
+            slidesPerView: 4,
+            slidesPerGroup: 4,
+            spaceBetween: 10,
+        },
+    };
+    const defaultProps = {
+        // default props
+        breakpoints: JSON.parse(JSON.stringify(defaultCarouselBreakpoints)),
+        hideCheckboxes: false,
+        separatorIcon: 'plus-thin',
+        seedText: 'This Product',
+        separatorIconSeedOnly: true,
+        ctaIcon: 'bag',
+        ctaButtonText: 'Add All To Cart',
+        ctaButtonSuccessText: 'Bundle Added!',
+        ctaButtonSuccessTimeout: 2000,
+        ctaInline: true,
+        onAddToCart: (e, items) => controller?.addToCart && controller.addToCart(items),
+        title: properties.controller?.store?.profile?.display?.templateParameters?.title,
+        description: properties.controller?.store?.profile?.display?.templateParameters?.description,
+        treePath: globalTreePath,
+    };
+    //mergeprops only uses names that are passed via properties, so this cannot be put in the defaultProps
+    const _properties = {
+        name: properties.controller?.store?.profile?.tag?.toLowerCase(),
+        ...properties,
+    };
+    let props = mergeProps(_properties.alias || 'recommendationBundle', globalTheme, defaultProps, _properties);
+    let classNamePrefix = 'ss__recommendation-bundle';
+    if (props.alias) {
+        classNamePrefix = `ss__${componentNameToClassName(props.alias)}`;
+    }
+    let displaySettings;
+    if (!(properties.theme?.name || globalTheme.name)) {
+        displaySettings = useDisplaySettings(props.breakpoints);
+        if (displaySettings && Object.keys(displaySettings).length) {
+            const theme = deepmerge(props?.theme || {}, displaySettings?.theme || {}, { arrayMerge: (destinationArray, sourceArray) => sourceArray });
+            props = {
+                ...props,
+                ...displaySettings,
+                theme,
+            };
+        }
+    }
+    const { title, description, controller, breakpoints, results, carousel, preselectedCount, separatorIcon, hideCheckboxes, limit, seedText, vertical, onAddToCart, separatorIconSeedOnly, resultComponent, ctaSlot, hideSeed, ctaButtonText, ctaButtonSuccessText, ctaButtonSuccessTimeout, disableStyles, ctaIcon, ctaInline, hideSeedText, lazyRender, className, internalClassName, style: _, styleScript: __, themeStyleScript: ___, treePath, ...additionalProps } = props;
+    const mergedlazyRender = {
+        enabled: true,
+        offset: '10%',
+        ...lazyRender,
+    };
+    const mergedCarouselProps = {
+        enabled: true,
+        loop: false,
+        spaceBetween: 10,
+        ...carousel,
+    };
+    const { seedInCarousel, prevButton, nextButton, hideButtons, loop, spaceBetween, pagination } = mergedCarouselProps;
+    const carouselEnabled = mergedCarouselProps.enabled;
+    if (!controller || controller.type !== 'recommendation') {
+        throw new Error(`<RecommendationBundle> Component requires 'controller' prop with an instance of RecommendationController`);
+    }
+    let resultsToRender = results || controller.store?.results;
+    if (limit) {
+        resultsToRender = resultsToRender.slice(0, hideSeed && resultsToRender.filter((result) => result.bundleSeed == true).length ? limit + 1 : limit);
+    }
+    const cartStore = controller.store.cart;
+    if (!cartStore) {
+        throw new Error(`<RecommendationBundle> Component requires 'cartStore' to exist in the recommendation store`);
+    }
+    if (!(results && results.length) && !controller.store?.results?.length) {
+        controller.log.error(`<RecommendationBundle> Component has no results to render!`);
+        return null;
+    }
+    const seed = results
+        ? results.filter((result) => result.bundleSeed == true).pop()
+        : controller.store?.results?.filter((result) => result.bundleSeed == true).pop();
+    const subProps = {
+        carousel: {
+            loop: loop,
+            // default props
+            internalClassName: 'ss__recommendation__carousel',
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        result: {
+            // default props
+            internalClassName: 'ss__recommendation__result',
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    const hasSeed = Boolean(resultsToRender.filter((result) => result.bundleSeed == true).length);
+    let slidesPerView = props.carousel?.slidesPerView || props.slidesPerView;
+    if (!slidesPerView) {
+        slidesPerView = 2;
+    }
+    else if (resultsToRender.length < Number(slidesPerView)) {
+        slidesPerView = resultsToRender.length;
+    }
+    const styling = mergeStyles({ ...props, carousel: { ...mergedCarouselProps, slidesPerView }, hasSeed, carouselEnabled }, defaultStyles);
+    const _preSelectedCount = typeof preselectedCount == 'number' ? preselectedCount : carouselEnabled ? slidesPerView : resultsToRender.length;
+    //this resets the selected items if the results to render changes
+    // so you dont end up with something selected that is no longer rendered
+    useEffect(() => {
+        cartStore.reset();
+        if (_preSelectedCount) {
+            resultsToRender?.forEach((result, idx) => {
+                if (idx < Number(_preSelectedCount)) {
+                    cartStore.addItems([result]);
+                }
+            });
+        }
+    }, [resultsToRender.length]);
+    const selectedItems = cartStore.items;
+    const modifiedBreakpoints = { ...breakpoints };
+    if (carouselEnabled) {
+        const adjustSlides = (obj) => {
+            // fallback in case slides per view/group were not provided in breakpoint...
+            const currentBreakpointSlidesPerView = obj?.slidesPerView || obj.slidesPerView || 2;
+            const currentBreakpointSlidesPerGroup = obj?.slidesPerGroup || obj.slidesPerGroup || 2;
+            let newSlidesPerView = currentBreakpointSlidesPerView;
+            let newSlidesPerGroup = currentBreakpointSlidesPerGroup;
+            const resultCount = !hasSeed || seedInCarousel ? resultsToRender.length : resultsToRender.length - 1;
+            if (resultCount) {
+                if (resultCount >= currentBreakpointSlidesPerView) {
+                    newSlidesPerView = currentBreakpointSlidesPerView - (!seedInCarousel && hasSeed ? 1 : 0);
+                    if (!seedInCarousel) {
+                        newSlidesPerGroup = currentBreakpointSlidesPerGroup - 1 || 1;
+                    }
+                }
+                else {
+                    (newSlidesPerView = resultCount), (newSlidesPerGroup = resultCount);
+                }
+            }
+            return {
+                slidesPerView: newSlidesPerView,
+                slidesPerGroup: newSlidesPerGroup,
+            };
+        };
+        //no breakpoint props allowed in templates
+        if (!(properties.theme?.name || globalTheme.name)) {
+            Object.keys(props.breakpoints).forEach((breakpoint) => {
+                const obj = props.breakpoints[breakpoint];
+                const { slidesPerView: adjustedSlidesPerView, slidesPerGroup: adjustedSlidesPerGroup } = adjustSlides(obj);
+                modifiedBreakpoints[breakpoint] = {
+                    ...modifiedBreakpoints[breakpoint],
+                    slidesPerView: adjustedSlidesPerView,
+                    slidesPerGroup: adjustedSlidesPerGroup,
+                };
+            });
+        }
+        else {
+            const { slidesPerView: adjustedSlidesPerView, slidesPerGroup: adjustedSlidesPerGroup } = adjustSlides({
+                ...mergedCarouselProps,
+                slidesPerView: slidesPerView,
+            });
+            displaySettings = {
+                ...mergedCarouselProps,
+                slidesPerView: adjustedSlidesPerView,
+                slidesPerGroup: adjustedSlidesPerGroup,
+            };
+        }
+    }
+    const onProductSelect = (product) => {
+        if (product) {
+            const idx = selectedItems.findIndex((result) => result.id == product.id);
+            //is it in the selected items?
+            if (idx > -1) {
+                //already selected, deselect it now
+                cartStore.removeItems([product]);
+                if (cartStore.items.length == 0 && seed) {
+                    //we dont call addItems here to prevent tracking
+                    cartStore.items.push(seed);
+                }
+            }
+            else {
+                //add it to the list;
+                cartStore.addItems([product]);
+            }
+        }
+    };
+    const addToCart = (e) => {
+        // add to cart tracking
+        controller.addToCart(selectedItems);
+        //call the function passed
+        onAddToCart && onAddToCart(e, selectedItems);
+    };
+    const setSeedwidth = () => {
+        if (seedRef.current) {
+            // @ts-ignore - todo can this be typed appropriatly?
+            const seedElem = seedRef.current?.base;
+            // @ts-ignore - todo can this be typed appropriatly?
+            const carouselElem = carouselRef.current?.base;
+            const visibleSlide = carouselElem?.querySelector(`.swiper-slide-visible .${classNamePrefix}__wrapper__selector`);
+            const width = visibleSlide?.offsetWidth;
+            if (seedElem) {
+                seedElem.style.width = `${width}px`;
+            }
+        }
+    };
+    const seedRef = useRef();
+    const carouselRef = useRef();
+    const [isVisible, setIsVisible] = useState(false);
+    const recsRef = useRef(null);
+    const inView = mergedlazyRender?.enabled ? useIntersection(recsRef, `${mergedlazyRender.offset} 0px ${mergedlazyRender.offset} 0px`, true) : true;
+    if (inView) {
+        setIsVisible(true);
+    }
+    //initialize lang
+    const defaultLang = {
+        seedText: {
+            value: seedText,
+        },
+        ctaButtonText: {
+            value: ctaButtonText,
+        },
+        ctaButtonSuccessText: {
+            value: ctaButtonSuccessText,
+        },
+        ctaSubtotalTitle: {
+            value: `Subtotal for ${cartStore.count} items`,
+        },
+    };
+    //deep merge with props.lang
+    const lang = deepmerge(defaultLang, props.lang || {});
+    const renderedResults = useMemo(() => {
+        return resultsToRender.map((result, idx) => {
+            const isSeed = Boolean(result.bundleSeed);
+            const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
+            let attributes = {
+                onCheck: (e) => {
+                    e.stopPropagation();
+                    onProductSelect(result);
+                },
+                checked: selected,
+                hideCheckboxes: hideCheckboxes,
+                theme: props.theme,
+                icon: separatorIconSeedOnly ? false : separatorIcon,
+                className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '',
+                classNamePrefix,
+                treePath,
+            };
+            if (isSeed) {
+                attributes = {
+                    ...attributes,
+                    seedText: seedText,
+                    seed: true,
+                    icon: separatorIcon,
+                    lang: { seedText: lang.seedText },
+                };
+            }
+            return !isSeed || ((seedInCarousel || carousel?.enabled == false) && isSeed && !hideSeed) ? (_jsx(ResultTracker, { controller: controller, result: result, track: { impression: Boolean(!isSeed) }, children: _jsx(BundleSelector, { ...attributes, children: resultComponent ? (cloneWithProps(resultComponent, { controller: controller, treePath: treePath, result: result, seed: isSeed, selected, onProductSelect })) : (_jsx(Result, { ...subProps.result, controller: controller, result: result })) }) }, result.id)) : null;
+        });
+    }, [
+        resultsToRender,
+        selectedItems,
+        hideCheckboxes,
+        separatorIconSeedOnly,
+        separatorIcon,
+        seedInCarousel,
+        hideSeed,
+        resultComponent,
+        props.theme,
+        seedText,
+    ]);
+    if (hideSeedText) {
+        delete lang.seedText.value;
+    }
+    return resultsToRender?.length ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, ref: recsRef, className: classnames(classNamePrefix, { [`${classNamePrefix}--stacked`]: !ctaInline }, className, internalClassName), children: isVisible ? (_jsxs(RecommendationProfileTracker, { controller: controller, children: [title && (_jsx("h3", { className: `${classNamePrefix}__title`, children: _jsx("span", { children: title }) })), description && (_jsx("p", { className: "ss__recommendation-bundle__description", children: _jsx("span", { children: description }) })), _jsxs("div", { className: classnames(`${classNamePrefix}__wrapper`, {
+                            [`${classNamePrefix}__wrapper--seed-in-carousel`]: seedInCarousel,
+                            [`${classNamePrefix}__wrapper--vertical`]: vertical,
+                        }), children: [carouselEnabled ? (_jsxs(_Fragment, { children: [!seedInCarousel && !hideSeed && seed && (_jsx("div", { className: `${classNamePrefix}__wrapper__seed-container`, children: _jsx(ResultTracker, { controller: controller, result: seed, track: { impression: false }, children: _jsx(BundleSelector, { seedText: seedText, seed: true, title: seed.display.mappings.core?.name, onCheck: (e) => {
+                                                    e.stopPropagation();
+                                                    onProductSelect(seed);
+                                                }, checked: selectedItems.findIndex((item) => item.id == seed.id) > -1, icon: separatorIcon, hideCheckboxes: hideCheckboxes, theme: props.theme, ref: seedRef, treePath: treePath, classNamePrefix: classNamePrefix, lang: { seedText: lang.seedText }, children: (() => {
+                                                    if (resultComponent && controller) {
+                                                        const ResultComponent = resultComponent;
+                                                        return (_jsx(ResultComponent, { controller: controller, seed: true, selected: selectedItems.findIndex((item) => item.id == seed.id) > -1, onProductSelect: onProductSelect, result: seed, treePath: treePath }));
+                                                    }
+                                                    else {
+                                                        return _jsx(Result, { ...subProps.result, controller: controller, result: seed });
+                                                    }
+                                                })() }) }) })), _jsx("div", { className: `${classNamePrefix}__wrapper__carousel`, children: _jsx(Carousel, { prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, spaceBetween: spaceBetween, pagination: pagination, breakpoints: modifiedBreakpoints, watchSlidesProgress: true, observer: true, vertical: vertical, onResize: () => setSeedwidth(), ...subProps.carousel, ...additionalProps, ...displaySettings, ref: carouselRef, children: renderedResults }) })] })) : (_jsx(_Fragment, { children: renderedResults })), ctaInline && (_jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: (e) => addToCart(e), ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon, treePath: treePath, classNamePrefix: classNamePrefix, lang: {
+                                    ctaButtonSuccessText: lang.ctaButtonSuccessText,
+                                    ctaButtonText: lang.ctaButtonText,
+                                    ctaSubtotalTitle: lang.ctaSubtotalTitle,
+                                } }))] }), !ctaInline && (_jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: (e) => addToCart(e), ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon, treePath: treePath, classNamePrefix: classNamePrefix, lang: {
+                            ctaButtonSuccessText: lang.ctaButtonSuccessText,
+                            ctaButtonText: lang.ctaButtonText,
+                            ctaSubtotalTitle: lang.ctaSubtotalTitle,
+                        } }))] })) : (_jsx(RecommendationProfileTracker, { controller: controller, children: resultsToRender.map((result) => (_jsx(ResultTracker, { controller: controller, result: result, children: _jsx(_Fragment, {}) }))) })) }) })) : null;
+});

package/dist/esm/components/src/components/Templates/RecommendationBundle/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RecommendationBundle';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/src/components/Templates/RecommendationBundle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationBundle/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/dist/esm/components/src/components/Templates/RecommendationBundle/index.js

@@ -0,0 +1 @@
+export * from './RecommendationBundle';

package/dist/esm/components/src/components/Templates/RecommendationBundleEasyAdd/RecommendationBundleEasyAdd.d.ts

@@ -0,0 +1,21 @@
+import { ComponentProps, ResultComponent } from '../../../types';
+import { RecommendationBundleLang, RecommendationBundleProps } from '../RecommendationBundle';
+import { Product } from '@athoscommerce/snap-store-mobx';
+import { AbstractController, RecommendationController } from '@athoscommerce/snap-controller';
+export declare const RecommendationBundleEasyAdd: ((properties: RecommendationBundleEasyAddProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export type RecommendationBundleEasyAddProps = {
+    controller: RecommendationController & AbstractController;
+    resultComponent?: ResultComponent<{
+        controller: RecommendationController;
+        seed?: boolean;
+        selected?: boolean;
+        onProductSelect?: (product: Product) => void;
+    }> | undefined;
+    alias?: string | undefined;
+    lang?: Partial<RecommendationBundleLang> | undefined;
+    results?: Product[] | undefined;
+} & RecommendationBundleEasyAddTemplatesLegalProps & ComponentProps<RecommendationBundleEasyAddProps>;
+export type RecommendationBundleEasyAddTemplatesLegalProps = Omit<RecommendationBundleProps, 'controller' | 'resultComponent' | 'alias' | 'lang' | 'results' | 'hideSeed' | 'limit' | 'hideCheckboxes' | 'carousel' | 'separatorIcon' | 'separatorIconSeedOnly' | 'preselectedCount' | 'breakpoints'>;
+//# sourceMappingURL=RecommendationBundleEasyAdd.d.ts.map

package/dist/esm/components/src/components/Templates/RecommendationBundleEasyAdd/RecommendationBundleEasyAdd.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecommendationBundleEasyAdd.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationBundleEasyAdd/RecommendationBundleEasyAdd.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAe,MAAM,gBAAgB,CAAC;AAC9E,OAAO,EAAwB,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACpH,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAY9F,eAAO,MAAM,2BAA2B,gBAAyB,gCAAgC;;CAwC/F,CAAC;AAEH,MAAM,MAAM,gCAAgC,GAAG;IAC9C,UAAU,EAAE,wBAAwB,GAAG,kBAAkB,CAAC;IAC1D,eAAe,CAAC,EACb,eAAe,CAAC;QAChB,UAAU,EAAE,wBAAwB,CAAC;QACrC,IAAI,CAAC,EAAE,OAAO,CAAC;QACf,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;KAC5C,CAAC,GACF,SAAS,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,SAAS,CAAC;IACrD,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;CAChC,GAAG,8CAA8C,GACjD,cAAc,CAAC,gCAAgC,CAAC,CAAC;AAElD,MAAM,MAAM,8CAA8C,GAAG,IAAI,CAChE,yBAAyB,EACvB,YAAY,GACZ,iBAAiB,GACjB,OAAO,GACP,MAAM,GACN,SAAS,GACT,UAAU,GACV,OAAO,GACP,gBAAgB,GAChB,UAAU,GACV,eAAe,GACf,uBAAuB,GACvB,kBAAkB,GAClB,aAAa,CACf,CAAC"}

package/dist/esm/components/src/components/Templates/RecommendationBundleEasyAdd/RecommendationBundleEasyAdd.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { css, useTheme } from '@emotion/react';
+import { observer } from 'mobx-react-lite';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { RecommendationBundle } from '../RecommendationBundle';
+const defaultStyles = () => {
+    return css({
+        '.ss__recommendation-bundle-easy-add__wrapper__cta': {
+            textAlign: 'center',
+        },
+    });
+};
+const alias = 'recommendationBundleEasyAdd';
+export const RecommendationBundleEasyAdd = observer((properties) => {
+    const globalTheme = useTheme();
+    //mergeprops only uses names that are passed via properties, so this cannot be put in the defaultProps
+    const _properties = {
+        name: properties.controller?.store?.profile?.tag?.toLowerCase(),
+        ...properties,
+    };
+    const { treePath, disableStyles, controller, style: _, styleScript: __, themeStyleScript: ___, ...additionalProps } = _properties;
+    const subProps = {
+        recommendationBundle: {
+            // default props
+            hideCheckboxes: true,
+            seedText: '',
+            ctaButtonText: 'Add Both',
+            ctaInline: false,
+            hideSeed: true,
+            alias: alias,
+            // vertical: true,
+            limit: 1,
+            carousel: {
+                enabled: false,
+            },
+            separatorIcon: false,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: _properties?.theme,
+            treePath,
+        },
+    };
+    const mergedProps = mergeProps(alias, globalTheme, {}, _properties);
+    const styling = mergeStyles(mergedProps, defaultStyles);
+    return _jsx(RecommendationBundle, { controller: controller, ...styling, ...subProps.recommendationBundle, ...additionalProps });
+});

package/dist/esm/components/src/components/Templates/RecommendationBundleEasyAdd/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RecommendationBundleEasyAdd';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/src/components/Templates/RecommendationBundleEasyAdd/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationBundleEasyAdd/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}

package/dist/esm/components/src/components/Templates/RecommendationBundleEasyAdd/index.js

@@ -0,0 +1 @@
+export * from './RecommendationBundleEasyAdd';

package/dist/esm/components/src/components/Templates/RecommendationBundleList/RecommendationBundleList.d.ts

@@ -0,0 +1,25 @@
+import { ComponentProps, ResultComponent } from '../../../types';
+import { RecommendationBundleLang, RecommendationBundleProps } from '../RecommendationBundle';
+import { BundledCTAProps } from '../RecommendationBundle/BundleCTA';
+import { AbstractController, RecommendationController } from '@athoscommerce/snap-controller';
+import { Product } from '@athoscommerce/snap-store-mobx';
+export declare const RecommendationBundleList: ((properties: RecommendationBundleListProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export type RecommendationBundleListProps = {
+    controller: RecommendationController & AbstractController;
+    resultComponent?: ResultComponent<{
+        controller: RecommendationController;
+        seed?: boolean;
+        selected?: boolean;
+        onProductSelect?: (product: Product) => void;
+    }> | undefined;
+    alias?: string | undefined;
+    lang?: Partial<RecommendationBundleLang> | undefined;
+    results?: Product[] | undefined;
+} & RecommendationBundleListTemplatesLegalProps & ComponentProps<RecommendationBundleListProps>;
+export type RecommendationBundleListTemplatesLegalProps = Omit<RecommendationBundleProps, 'controller' | 'resultComponent' | 'alias' | 'lang' | 'results' | 'seedText' | 'ctaInline' | 'ctaIcon' | 'vertical' | 'slidesPerView' | 'carousel' | 'breakpoints'>;
+export declare const CTASlot: ((props: BundledCTAProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+//# sourceMappingURL=RecommendationBundleList.d.ts.map

package/dist/esm/components/src/components/Templates/RecommendationBundleList/RecommendationBundleList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecommendationBundleList.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationBundleList/RecommendationBundleList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAe,MAAM,gBAAgB,CAAC;AAE9E,OAAO,EAAwB,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAMpH,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAMpE,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC9F,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAwDzD,eAAO,MAAM,wBAAwB,gBAAyB,6BAA6B;;CA0CzF,CAAC;AAEH,MAAM,MAAM,6BAA6B,GAAG;IAC3C,UAAU,EAAE,wBAAwB,GAAG,kBAAkB,CAAC;IAC1D,eAAe,CAAC,EACb,eAAe,CAAC;QAChB,UAAU,EAAE,wBAAwB,CAAC;QACrC,IAAI,CAAC,EAAE,OAAO,CAAC;QACf,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;KAC5C,CAAC,GACF,SAAS,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,SAAS,CAAC;IACrD,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;CAChC,GAAG,2CAA2C,GAC9C,cAAc,CAAC,6BAA6B,CAAC,CAAC;AAE/C,MAAM,MAAM,2CAA2C,GAAG,IAAI,CAC7D,yBAAyB,EACvB,YAAY,GACZ,iBAAiB,GACjB,OAAO,GACP,MAAM,GACN,SAAS,GACT,UAAU,GACV,WAAW,GACX,SAAS,GACT,UAAU,GACV,eAAe,GACf,UAAU,GACV,aAAa,CACf,CAAC;AAcF,eAAO,MAAM,OAAO,WAAoB,eAAe;;CAmIrD,CAAC"}