@athoscommerce/snap-preact 1.0.0

package/dist/cjs/components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.js

@@ -0,0 +1,136 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutocompleteSlideout = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var hooks_1 = require("preact/hooks");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var react_1 = require("@emotion/react");
+var utilities_1 = require("../../../utilities");
+var providers_1 = require("../../../providers");
+var AutocompleteLayout_1 = require("../../Organisms/AutocompleteLayout");
+var Slideout_1 = require("../../Molecules/Slideout");
+var classnames_1 = __importDefault(require("classnames"));
+var SearchInput_1 = require("../../Molecules/SearchInput");
+var hooks_2 = require("../../../hooks");
+var useAcRenderedInput_1 = require("../../../hooks/useAcRenderedInput");
+var defaultStyles = function (_a) {
+    return (0, react_1.css)({
+        border: '1px solid #eee',
+        '& .ss__autocomplete': {
+            position: 'relative',
+        },
+        '& .input_wrapper input': {
+            background: '#eee',
+        },
+        '& .ss__search-input__button--close-search-icon': {
+            border: 'none',
+        },
+    });
+};
+exports.AutocompleteSlideout = (0, mobx_react_lite_1.observer)(function (properties) {
+    var globalTheme = (0, providers_1.useTheme)();
+    var defaultProps = {
+        slideDirection: 'left',
+        overlayColor: 'rgba(0,0,0,0.8)',
+        layout: [['button.see-more'], ['termsList'], ['content']],
+        width: '500px',
+        renderInput: true,
+    };
+    var props = (0, utilities_1.mergeProps)('autocompleteSlideout', globalTheme, defaultProps, properties);
+    var _a = (0, hooks_1.useState)('query'), inputName = _a[0], setInputName = _a[1];
+    var input = props.input;
+    var buttonSelector = props.buttonSelector;
+    if (input) {
+        if (typeof input === 'string') {
+            input = document.querySelector(input);
+        }
+        var existingInputName = input === null || input === void 0 ? void 0 : input.getAttribute('name');
+        if (existingInputName) {
+            setInputName(existingInputName);
+            if (props.renderInput) {
+                input.setAttribute('name', '');
+            }
+        }
+    }
+    if (!buttonSelector && input) {
+        buttonSelector = input;
+    }
+    var layout = props.layout, disableStyles = props.disableStyles, slideDirection = props.slideDirection, controller = props.controller, overlayColor = props.overlayColor, renderInput = props.renderInput, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, width = props.width;
+    var renderedInputRef = (0, hooks_1.useRef)(null);
+    var reset = function () {
+        setActive(false);
+        controller.setFocused();
+    };
+    var subProps = {
+        autocompleteLayout: __assign(__assign({ 
+            // default props
+            onReset: function () { return reset(); }, layout: layout }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        slideout: __assign(__assign({ 
+            // default props
+            width: width, rerender: false, overlayColor: overlayColor, slideDirection: slideDirection, buttonSelector: buttonSelector }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        searchInput: __assign(__assign({ 
+            // default props
+            // autocomplete__search-input is required for useAcRenderedInput hook.
+            internalClassName: 'autocomplete-slideout__search-input  autocomplete__search-input', inputName: inputName, submitSearchButton: {
+                onClick: function () {
+                    (function () { return reset(); });
+                    window.location.href = controller.store.state.url.link.href;
+                },
+            }, clearSearchButton: {
+                icon: 'close-thin',
+            }, closeSearchButton: {
+                onClick: function () { return reset(); },
+                icon: 'angle-left',
+            } }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            treePath: "".concat(treePath, " slideout"), theme: props === null || props === void 0 ? void 0 : props.theme }),
+    };
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    var _b = (0, hooks_1.useState)(false), active = _b[0], setActive = _b[1];
+    var _input;
+    if (input) {
+        (0, hooks_1.useEffect)(function () {
+            input.addEventListener('click', function () { return setActive(true); });
+        });
+        _input = (0, useAcRenderedInput_1.useAcRenderedInput)({
+            input: input,
+            controller: controller,
+            renderedInputRef: renderedInputRef,
+            renderInput: Boolean(renderInput),
+            buttonSelector: buttonSelector,
+        });
+    }
+    var acProps = __assign({}, props);
+    delete acProps.width;
+    delete acProps.className;
+    delete acProps.internalClassName;
+    delete acProps.style;
+    delete acProps.styleScript;
+    delete acProps.themeStyleScript;
+    /***************************************/
+    return (layout === null || layout === void 0 ? void 0 : layout.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)(Slideout_1.Slideout, __assign({}, styling, subProps.slideout, { className: (0, classnames_1.default)('ss__autocomplete-slideout', 'ss__autocomplete-slideout__slideout', className, internalClassName), active: active, children: (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete-slideout__inner", ref: function (e) { return (0, hooks_2.useA11y)(e, 0, true, reset); }, children: [renderInput ? ((0, jsx_runtime_1.jsx)(SearchInput_1.SearchInput, __assign({}, subProps.searchInput, { value: controller.store.state.input || '', inputRef: renderedInputRef }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})), (0, jsx_runtime_1.jsx)(AutocompleteLayout_1.AutocompleteLayout, __assign({}, acProps, subProps.autocompleteLayout, { input: _input, controller: controller, treePath: "".concat(treePath, " slideout") }))] }) })) })) : null;
+});

package/dist/cjs/components/src/components/Templates/AutocompleteSlideout/index.d.ts

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

package/dist/cjs/components/src/components/Templates/AutocompleteSlideout/index.d.ts.map

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

package/dist/cjs/components/src/components/Templates/AutocompleteSlideout/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AutocompleteSlideout"), exports);

package/dist/cjs/components/src/components/Templates/Recommendation/Recommendation.d.ts

@@ -0,0 +1,40 @@
+import { ComponentChildren } from 'preact';
+import type { SwiperOptions } from 'swiper/types';
+import type { RecommendationController } from '@athoscommerce/snap-controller';
+import type { Product } from '@athoscommerce/snap-store-mobx';
+import { ComponentProps, BreakpointsProps, ResultComponent } from '../../../types';
+import { Lang } from '../../../hooks';
+export declare const Recommendation: ((properties: RecommendationProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type RecommendationProps = {
+    controller: RecommendationController;
+    resultComponent?: ResultComponent;
+    lang?: Partial<RecommendationLang>;
+    breakpoints?: BreakpointsProps;
+} & RecommendationTemplatesLegalProps & ComponentProps<RecommendationProps>;
+export type RecommendationTemplatesLegalProps = {
+    title?: JSX.Element | string;
+    description?: string;
+    hideTitle?: boolean;
+    prevButton?: JSX.Element | string;
+    nextButton?: JSX.Element | string;
+    hideButtons?: boolean;
+    loop?: boolean;
+    results?: Product[];
+    pagination?: boolean;
+    children?: ComponentChildren;
+    vertical?: boolean;
+    scrollbar?: boolean;
+    lazyRender?: {
+        enabled: boolean;
+        offset?: string;
+    };
+    slidesPerView?: number | 'auto';
+} & Omit<SwiperOptions, 'breakpoints' | 'slidesPerView'> & ComponentProps;
+export interface RecommendationLang {
+    titleText?: Lang<{
+        controller: RecommendationController;
+    }>;
+}
+//# sourceMappingURL=Recommendation.d.ts.map

package/dist/cjs/components/src/components/Templates/Recommendation/Recommendation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/Recommendation/Recommendation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAO9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAO9D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,eAAe,EAAe,MAAM,gBAAgB,CAAC;AAGhG,OAAO,EAAE,IAAI,EAAW,MAAM,gBAAgB,CAAC;AAY/C,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CA+LrE,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG;IACjC,UAAU,EAAE,wBAAwB,CAAC;IACrC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAC/B,GAAG,iCAAiC,GACpC,cAAc,CAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,MAAM,iCAAiC,GAAG;IAC/C,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,GAAG,IAAI,CAAC,aAAa,EAAE,aAAa,GAAG,eAAe,CAAC,GACvD,cAAc,CAAC;AAEhB,MAAM,WAAW,kBAAkB;IAClC,SAAS,CAAC,EAAE,IAAI,CAAC;QAChB,UAAU,EAAE,wBAAwB,CAAC;KACrC,CAAC,CAAC;CACH"}

package/dist/cjs/components/src/components/Templates/Recommendation/Recommendation.js

@@ -0,0 +1,136 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Recommendation = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var hooks_1 = require("preact/hooks");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var mobx_react_lite_1 = require("mobx-react-lite");
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var Carousel_1 = require("../../Molecules/Carousel");
+var Result_1 = require("../../Molecules/Result");
+var utilities_1 = require("../../../utilities");
+var hooks_2 = require("../../../hooks");
+var providers_1 = require("../../../providers");
+var useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
+var ProfileTracker_1 = require("../../Trackers/Recommendation/ProfileTracker");
+var hooks_3 = require("../../../hooks");
+var ResultTracker_1 = require("../../Trackers/ResultTracker");
+var defaultStyles = function (_a) {
+    var vertical = _a.vertical;
+    return (0, react_1.css)({
+        height: vertical ? '100%' : undefined,
+        '.ss__result__image-wrapper': {
+            height: vertical ? '85%' : undefined,
+        },
+    });
+};
+exports.Recommendation = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        breakpoints: properties.vertical
+            ? JSON.parse(JSON.stringify(Carousel_1.defaultVerticalCarouselBreakpoints))
+            : JSON.parse(JSON.stringify(Carousel_1.defaultCarouselBreakpoints)),
+        pagination: false,
+        loop: true,
+        title: (_e = (_d = (_c = (_b = (_a = properties.controller) === null || _a === void 0 ? void 0 : _a.store) === null || _b === void 0 ? void 0 : _b.profile) === null || _c === void 0 ? void 0 : _c.display) === null || _d === void 0 ? void 0 : _d.templateParameters) === null || _e === void 0 ? void 0 : _e.title,
+        description: (_k = (_j = (_h = (_g = (_f = properties.controller) === null || _f === void 0 ? void 0 : _f.store) === null || _g === void 0 ? void 0 : _g.profile) === null || _h === void 0 ? void 0 : _h.display) === null || _j === void 0 ? void 0 : _j.templateParameters) === null || _k === void 0 ? void 0 : _k.description,
+        treePath: globalTreePath,
+    };
+    //mergeprops only uses names that are passed via properties, so this cannot be put in the defaultProps
+    var _properties = __assign({ name: (_p = (_o = (_m = (_l = properties.controller) === null || _l === void 0 ? void 0 : _l.store) === null || _m === void 0 ? void 0 : _m.profile) === null || _o === void 0 ? void 0 : _o.tag) === null || _p === void 0 ? void 0 : _p.toLowerCase() }, properties);
+    var props = (0, utilities_1.mergeProps)('recommendation', globalTheme, defaultProps, _properties);
+    var displaySettings;
+    //no breakpoint props allowed in templates
+    if (!(((_q = properties.theme) === null || _q === void 0 ? void 0 : _q.name) || globalTheme.name) && props.breakpoints) {
+        // breakpoint settings are calculated in ThemeStore for snap templates
+        displaySettings = (0, useDisplaySettings_1.useDisplaySettings)(props.breakpoints);
+        if (displaySettings && Object.keys(displaySettings).length) {
+            // merge deeply the themeDefaults with the theme props and the displaySettings theme props (do not merge arrays, but replace them)
+            props = __assign(__assign({}, props), displaySettings);
+        }
+    }
+    var title = props.title, description = props.description, controller = props.controller, children = props.children, loop = props.loop, results = props.results, pagination = props.pagination, nextButton = props.nextButton, prevButton = props.prevButton, hideButtons = props.hideButtons, resultComponent = props.resultComponent, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, _ = props.style, __ = props.styleScript, ___ = props.themeStyleScript, lazyRender = props.lazyRender, vertical = props.vertical, hideTitle = props.hideTitle, treePath = props.treePath, additionalProps = __rest(props, ["title", "description", "controller", "children", "loop", "results", "pagination", "nextButton", "prevButton", "hideButtons", "resultComponent", "disableStyles", "className", "internalClassName", "style", "styleScript", "themeStyleScript", "lazyRender", "vertical", "hideTitle", "treePath"]);
+    var mergedlazyRender = __assign({ enabled: true, offset: '10%' }, lazyRender);
+    if (!controller || controller.type !== 'recommendation') {
+        throw new Error("<Recommendation> Component requires 'controller' prop with an instance of RecommendationController");
+    }
+    var resultsToRender = results || ((_r = controller.store) === null || _r === void 0 ? void 0 : _r.results);
+    if (Array.isArray(children) && children.length !== resultsToRender.length) {
+        controller.log.error("<Recommendation> Component received invalid number of children. Must match length of 'results' prop or 'controller.store.results'");
+        return null;
+    }
+    var subProps = {
+        carousel: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__recommendation__Carousel' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+            vertical: vertical,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        result: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__recommendation__result' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+    };
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    var _t = (0, hooks_1.useState)(false), isVisible = _t[0], setIsVisible = _t[1];
+    var recsRef = (0, hooks_1.useRef)(null);
+    var inView = (mergedlazyRender === null || mergedlazyRender === void 0 ? void 0 : mergedlazyRender.enabled) ? (0, hooks_2.useIntersection)(recsRef, "".concat(mergedlazyRender.offset, " 0px ").concat(mergedlazyRender.offset, " 0px"), true) : true;
+    if (inView) {
+        setIsVisible(true);
+    }
+    //initialize lang
+    var defaultLang = {
+        titleText: {
+            value: "".concat(title),
+        },
+    };
+    //deep merge with props.lang
+    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    var mergedLang = (0, hooks_3.useLang)(lang, {});
+    return (Array.isArray(children) && children.length) || (resultsToRender === null || resultsToRender === void 0 ? void 0 : resultsToRender.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__recommendation', className, internalClassName), ref: recsRef, children: isVisible ? ((0, jsx_runtime_1.jsxs)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller, children: [title && !hideTitle && ((0, jsx_runtime_1.jsx)("h3", __assign({ className: "ss__recommendation__title" }, (_s = mergedLang.titleText) === null || _s === void 0 ? void 0 : _s.all, { children: title }))), description && (0, jsx_runtime_1.jsx)("p", { className: "ss__recommendation__description", children: description }), (0, jsx_runtime_1.jsx)(Carousel_1.Carousel, __assign({ prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, pagination: pagination }, subProps.carousel, additionalProps, { children: Array.isArray(children) && children.length
+                            ? children.map(function (child, idx) { return ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: resultsToRender[idx], children: child })); })
+                            : resultsToRender.map(function (result) { return ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result, children: (function () {
+                                    if (resultComponent && controller) {
+                                        var ResultComponent = resultComponent;
+                                        return (0, jsx_runtime_1.jsx)(ResultComponent, { controller: controller, result: result, treePath: subProps.result.treePath });
+                                    }
+                                    else {
+                                        return (0, jsx_runtime_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }), result.id);
+                                    }
+                                })() })); }) }))] })) : ((0, jsx_runtime_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller, children: Array.isArray(children) && children.length
+                    ? children.map(function (child, idx) { return ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: resultsToRender[idx], children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) })); })
+                    : resultsToRender.map(function (result) { return ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) })); }) })) })) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}));
+});

package/dist/cjs/components/src/components/Templates/Recommendation/index.d.ts

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

package/dist/cjs/components/src/components/Templates/Recommendation/index.d.ts.map

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

package/dist/cjs/components/src/components/Templates/Recommendation/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Recommendation"), exports);

package/dist/cjs/components/src/components/Templates/RecommendationBundle/BundleCTA.d.ts

@@ -0,0 +1,33 @@
+import { ButtonProps } from '../../Atoms/Button';
+import { PriceProps } from '../../Atoms/Price';
+import { IconProps, IconType } from '../../Atoms/Icon';
+import type { ComponentProps } from '../../../types';
+import type { CartStore } from '@athoscommerce/snap-store-mobx';
+import { Lang } from '../../../hooks';
+export declare const BundledCTA: ((properties: BundledCTAProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export interface BundleSelectorSubProps {
+    subtotalStrike: Partial<PriceProps>;
+    subtotalPrice: Partial<PriceProps>;
+    icon: Partial<IconProps>;
+    button: Partial<ButtonProps>;
+}
+export interface BundledCTAProps extends ComponentProps {
+    ctaSlot?: JSX.Element | React.FunctionComponent<BundledCTAProps>;
+    cartStore: CartStore;
+    onAddToCart: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    ctaIcon?: IconType | Partial<IconProps> | false;
+    ctaButtonText?: string;
+    ctaButtonSuccessText?: string;
+    ctaButtonSuccessTimeout?: number;
+    addedToCart?: boolean;
+    classNamePrefix?: string;
+    lang?: Partial<BundledCTALang>;
+}
+export interface BundledCTALang {
+    ctaButtonSuccessText: Lang<never>;
+    ctaButtonText: Lang<never>;
+    ctaSubtotalTitle: Lang<never>;
+}
+//# sourceMappingURL=BundleCTA.d.ts.map

package/dist/cjs/components/src/components/Templates/RecommendationBundle/BundleCTA.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BundleCTA.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationBundle/BundleCTA.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAU,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAS,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,IAAI,EAAW,MAAM,gBAAgB,CAAC;AAG/C,eAAO,MAAM,UAAU,gBAAyB,eAAe;;CAkG7D,CAAC;AAEH,MAAM,WAAW,sBAAsB;IACtC,cAAc,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IACpC,aAAa,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IACnC,IAAI,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACzB,MAAM,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACtD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACjE,SAAS,EAAE,SAAS,CAAC;IACrB,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACpE,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,cAAc;IAC9B,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3B,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;CAC9B"}

package/dist/cjs/components/src/components/Templates/RecommendationBundle/BundleCTA.js

@@ -0,0 +1,79 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BundledCTA = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var hooks_1 = require("preact/hooks");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var classnames_1 = __importDefault(require("classnames"));
+var utilities_1 = require("../../../utilities");
+var Button_1 = require("../../Atoms/Button");
+var Price_1 = require("../../Atoms/Price");
+var Icon_1 = require("../../Atoms/Icon");
+var hooks_2 = require("../../../hooks");
+var deepmerge_1 = __importDefault(require("deepmerge"));
+exports.BundledCTA = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a;
+    var _b, _c, _d;
+    var props = __assign({}, properties);
+    props.onAddToCart = function (e) {
+        setAddedToCart(true);
+        properties.onAddToCart(e);
+        setTimeout(function () { return setAddedToCart(false); }, properties.ctaButtonSuccessTimeout);
+    };
+    var ctaSlot = props.ctaSlot, cartStore = props.cartStore, onAddToCart = props.onAddToCart, ctaIcon = props.ctaIcon, ctaButtonText = props.ctaButtonText, ctaButtonSuccessText = props.ctaButtonSuccessText, treePath = props.treePath, classNamePrefix = props.classNamePrefix;
+    var _e = (0, hooks_1.useState)(false), addedToCart = _e[0], setAddedToCart = _e[1];
+    props.addedToCart = addedToCart;
+    var subProps = {
+        icon: {
+            name: 'bundle-cart',
+            // default props
+            internalClassName: "".concat(classNamePrefix, "__wrapper__cta__icon"),
+            size: 50,
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme,
+            treePath: treePath,
+        },
+        subtotalStrike: {
+            // default props
+            name: 'bundle-msrp',
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme,
+            treePath: treePath,
+        },
+        subtotalPrice: {
+            // default props
+            name: 'bundle-price',
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme,
+            treePath: treePath,
+        },
+        button: {
+            // default props
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme,
+            treePath: treePath,
+        },
+    };
+    //deep merge with props.lang
+    var lang = (0, deepmerge_1.default)({}, props.lang || {});
+    var mergedLang = (0, hooks_2.useLang)(lang, {
+        cartStore: cartStore,
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { className: "".concat(classNamePrefix, "__wrapper__cta"), children: ctaSlot ? ((0, utilities_1.cloneWithProps)(ctaSlot, props)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "".concat(classNamePrefix, "__wrapper__cta__subtotal"), "aria-atomic": "false", "aria-live": "polite", children: [ctaIcon ? ((0, jsx_runtime_1.jsx)("div", { className: "".concat(classNamePrefix, "__wrapper__cta__subtotal__icon__wrapper"), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof ctaIcon == 'string' ? { icon: ctaIcon } : ctaIcon))) })) : null, (0, jsx_runtime_1.jsx)("span", __assign({ className: "".concat(classNamePrefix, "__wrapper__cta__subtotal__title") }, (_b = mergedLang.ctaSubtotalTitle) === null || _b === void 0 ? void 0 : _b.all)), (0, jsx_runtime_1.jsxs)("div", { className: "".concat(classNamePrefix, "__wrapper__cta__subtotal__prices"), children: [cartStore.msrp && cartStore.msrp !== cartStore.price ? ((0, jsx_runtime_1.jsxs)("label", { className: "".concat(classNamePrefix, "__wrapper__cta__subtotal__strike"), children: ["Was ", (0, jsx_runtime_1.jsx)(Price_1.Price, __assign({}, subProps.subtotalStrike, { lineThrough: true, value: cartStore.msrp }))] })) : null, (0, jsx_runtime_1.jsx)("label", { className: "".concat(classNamePrefix, "__wrapper__cta__subtotal__price"), children: (0, jsx_runtime_1.jsx)(Price_1.Price, __assign({}, subProps.subtotalPrice, { value: cartStore.price })) })] })] }), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.button, { internalClassName: (0, classnames_1.default)("".concat(classNamePrefix, "__wrapper__cta__button"), (_a = {},
+                        _a["".concat(classNamePrefix, "__wrapper__cta__button--added")] = addedToCart,
+                        _a)), "aria-live": addedToCart, onClick: function (e) { return onAddToCart(e); } }, (addedToCart ? (_c = mergedLang.ctaButtonSuccessText) === null || _c === void 0 ? void 0 : _c.all : (_d = mergedLang.ctaButtonText) === null || _d === void 0 ? void 0 : _d.all), { children: addedToCart ? ctaButtonSuccessText : ctaButtonText }))] })) }));
+});

package/dist/cjs/components/src/components/Templates/RecommendationBundle/BundleSelector.d.ts

@@ -0,0 +1,28 @@
+import { ComponentChildren } from 'preact';
+import { CheckboxProps } from '../../Molecules/Checkbox';
+import { IconProps, IconType } from '../../Atoms/Icon';
+import type { ComponentProps } from '../../../types';
+import { Lang } from '../../../hooks';
+export declare const BundleSelector: ((properties: BundleSelectorProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export interface BundleSelectorSubProps {
+    icon: Partial<IconProps>;
+    checkbox: Partial<CheckboxProps>;
+}
+export interface BundleSelectorProps extends ComponentProps {
+    children?: ComponentChildren;
+    checked?: boolean;
+    seedText?: string;
+    seed?: boolean;
+    hideCheckboxes?: boolean;
+    onCheck?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    icon?: IconType | Partial<IconProps> | boolean;
+    lang?: Partial<BundleSelectorLang>;
+    title?: string;
+    classNamePrefix?: string;
+}
+export interface BundleSelectorLang {
+    seedText: Lang<never>;
+}
+//# sourceMappingURL=BundleSelector.d.ts.map

package/dist/cjs/components/src/components/Templates/RecommendationBundle/BundleSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BundleSelector.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationBundle/BundleSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAK9C,OAAO,EAAY,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAW,MAAM,gBAAgB,CAAC;AAG/C,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CA+DrE,CAAC;AAEH,MAAM,WAAW,sBAAsB;IACtC,IAAI,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjE,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,kBAAkB;IAClC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;CACtB"}

package/dist/cjs/components/src/components/Templates/RecommendationBundle/BundleSelector.js

@@ -0,0 +1,69 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BundleSelector = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var classnames_1 = __importDefault(require("classnames"));
+var mobx_react_lite_1 = require("mobx-react-lite");
+var providers_1 = require("../../../providers");
+var Checkbox_1 = require("../../Molecules/Checkbox");
+var Icon_1 = require("../../Atoms/Icon");
+var utilities_1 = require("../../../utilities");
+var hooks_1 = require("../../../hooks");
+var deepmerge_1 = __importDefault(require("deepmerge"));
+exports.BundleSelector = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a;
+    var globalTheme = (0, providers_1.useTheme)();
+    var defaultProps = {
+        hideCheckboxes: false,
+        classNamePrefix: 'ss__recommendation-bundle',
+    };
+    var props = (0, utilities_1.mergeProps)('bundleSelector', globalTheme, defaultProps, properties);
+    var children = props.children, checked = props.checked, icon = props.icon, seedText = props.seedText, seed = props.seed, hideCheckboxes = props.hideCheckboxes, onCheck = props.onCheck, title = props.title, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, classNamePrefix = props.classNamePrefix;
+    var lastPath = treePath === null || treePath === void 0 ? void 0 : treePath.lastIndexOf(' ');
+    var modifiedTreePath = lastPath !== -1 ? treePath === null || treePath === void 0 ? void 0 : treePath.slice(0, lastPath) : treePath;
+    var subProps = {
+        icon: {
+            // default props
+            name: 'bundle-selector',
+            internalClassName: "".concat(classNamePrefix, "__wrapper__selector__icon"),
+            size: 15,
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme,
+            treePath: modifiedTreePath,
+        },
+        checkbox: {
+            internalClassName: "".concat(classNamePrefix, "__wrapper__selector__result-wrapper__checkbox"),
+            checked: checked,
+            size: '18px',
+            onClick: onCheck,
+            lang: {
+                checkbox: {
+                    attributes: {
+                        'aria-label': checked ? "remove product from bundle ".concat(title) : "add product to bundle ".concat(title),
+                    },
+                },
+            },
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme,
+            treePath: modifiedTreePath,
+        },
+    };
+    //deep merge with props.lang
+    var lang = (0, deepmerge_1.default)({}, props.lang || {});
+    var mergedLang = (0, hooks_1.useLang)(lang, {});
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("".concat(classNamePrefix, "__wrapper__selector"), checked ? "".concat(classNamePrefix, "__wrapper__selector--selected") : '', seedText || seed ? "".concat(classNamePrefix, "__wrapper__selector--seed") : '', className, internalClassName), children: [(0, jsx_runtime_1.jsxs)("div", { className: "".concat(classNamePrefix, "__wrapper__selector__result-wrapper"), children: [!hideCheckboxes && (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, __assign({}, subProps.checkbox)), seedText && (0, jsx_runtime_1.jsx)("div", __assign({ className: "".concat(classNamePrefix, "__wrapper__selector__result-wrapper__seed-badge") }, (_a = mergedLang.seedText) === null || _a === void 0 ? void 0 : _a.all)), children] }), icon ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof icon == 'string' ? { icon: icon } : icon))) : undefined] }));
+});