@searchspring/snap-preact-components 0.52.0 → 0.52.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/cjs/components/Organisms/RecommendationBundle/BundleCTA.d.ts +5 -3
  2. package/dist/cjs/components/Organisms/RecommendationBundle/BundleCTA.d.ts.map +1 -1
  3. package/dist/cjs/components/Organisms/RecommendationBundle/BundleCTA.js +18 -4
  4. package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts +3 -1
  5. package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts.map +1 -1
  6. package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.js +5 -5
  7. package/dist/esm/components/Organisms/RecommendationBundle/BundleCTA.d.ts +5 -3
  8. package/dist/esm/components/Organisms/RecommendationBundle/BundleCTA.d.ts.map +1 -1
  9. package/dist/esm/components/Organisms/RecommendationBundle/BundleCTA.js +15 -4
  10. package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts +3 -1
  11. package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts.map +1 -1
  12. package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.js +6 -4
  13. package/package.json +13 -12
package/dist/cjs/components/Organisms/RecommendationBundle/BundleCTA.d.ts CHANGED
@@ -9,9 +9,11 @@ export interface BundleSelectorSubProps {
9
9
  interface BundledCTAProps extends ComponentProps {
10
10
  ctaSlot?: JSX.Element;
11
11
  cartStore: CartStore;
12
- icon?: string | Partial<IconProps> | boolean;
13
- onAddToCartClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
14
- addToCartText?: string;
12
+ onAddToCart: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
13
+ ctaIcon?: string | Partial<IconProps> | boolean;
14
+ ctaButtonText?: string;
15
+ ctaButtonSuccessText?: string;
16
+ ctaButtonSuccessTimeout?: number;
15
17
  }
16
18
  export {};
17
19
  //# sourceMappingURL=BundleCTA.d.ts.map
package/dist/cjs/components/Organisms/RecommendationBundle/BundleCTA.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BundleCTA.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/BundleCTA.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAQ,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE/D,eAAO,MAAM,UAAU,eAAyB,eAAe,KAAG,WA2DhE,CAAC;AAEH,MAAM,WAAW,sBAAsB;IACtC,IAAI,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;CACzB;AAED,UAAU,eAAgB,SAAQ,cAAc;IAC/C,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,SAAS,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAC7C,gBAAgB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACzE,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB"}
1
+ {"version":3,"file":"BundleCTA.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/BundleCTA.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAQ,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE/D,eAAO,MAAM,UAAU,eAAyB,eAAe,KAAG,WA6EhE,CAAC;AAEH,MAAM,WAAW,sBAAsB;IACtC,IAAI,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;CACzB;AAED,UAAU,eAAgB,SAAQ,cAAc;IAC/C,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,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,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAC;CACjC"}
package/dist/cjs/components/Organisms/RecommendationBundle/BundleCTA.js CHANGED
@@ -10,12 +10,17 @@ var __assign = (this && this.__assign) || function () {
10
10
  };
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
+ var __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
13
16
  Object.defineProperty(exports, "__esModule", { value: true });
14
17
  exports.BundledCTA = void 0;
15
18
  /** @jsx jsx */
16
19
  var preact_1 = require("preact");
20
+ var hooks_1 = require("preact/hooks");
17
21
  var react_1 = require("@emotion/react");
18
22
  var mobx_react_1 = require("mobx-react");
23
+ var classnames_1 = __importDefault(require("classnames"));
19
24
  var utilities_1 = require("../../../utilities");
20
25
  var Button_1 = require("../../Atoms/Button");
21
26
  var Price_1 = require("../../Atoms/Price");
@@ -25,7 +30,14 @@ exports.BundledCTA = (0, mobx_react_1.observer)(function (properties) {
25
30
  var _a;
26
31
  var globalTheme = (0, providers_1.useTheme)();
27
32
  var props = __assign({}, properties);
28
- var ctaSlot = props.ctaSlot, icon = props.icon, cartStore = props.cartStore, onAddToCartClick = props.onAddToCartClick, addToCartText = props.addToCartText;
33
+ props.onAddToCart = function (e) {
34
+ setAddedToCart(true);
35
+ properties.onAddToCart(e);
36
+ setTimeout(function () { return setAddedToCart(false); }, properties.ctaButtonSuccessTimeout);
37
+ };
38
+ var ctaSlot = props.ctaSlot, cartStore = props.cartStore, onAddToCart = props.onAddToCart, ctaIcon = props.ctaIcon, ctaButtonText = props.ctaButtonText, ctaButtonSuccessText = props.ctaButtonSuccessText;
39
+ var _b = (0, hooks_1.useState)(false), addedToCart = _b[0], setAddedToCart = _b[1];
40
+ props.addedToCart = addedToCart;
29
41
  var subProps = {
30
42
  icon: __assign(__assign({
31
43
  // default props
@@ -35,8 +47,8 @@ exports.BundledCTA = (0, mobx_react_1.observer)(function (properties) {
35
47
  };
36
48
  return ((0, react_1.jsx)("div", { className: "ss__recommendation-bundle__wrapper__cta" }, ctaSlot ? ((0, utilities_1.cloneWithProps)(ctaSlot, props)) : ((0, react_1.jsx)(preact_1.Fragment, null,
37
49
  (0, react_1.jsx)("div", { className: "ss__recommendation-bundle__wrapper__cta__subtotal" },
38
- icon ? ((0, react_1.jsx)("div", { className: "icon" },
39
- (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof icon == 'string' ? { icon: icon } : icon))))) : ((0, react_1.jsx)(preact_1.Fragment, null)),
50
+ ctaIcon ? ((0, react_1.jsx)("div", { className: "icon" },
51
+ (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof ctaIcon == 'string' ? { icon: ctaIcon } : ctaIcon))))) : ((0, react_1.jsx)(preact_1.Fragment, null)),
40
52
  (0, react_1.jsx)("span", { className: "ss__recommendation-bundle__wrapper__cta__subtotal__title" }, "Subtotal for ".concat(cartStore.count, " items")),
41
53
  (0, react_1.jsx)("div", { className: "ss__recommendation-bundle__wrapper__cta__subtotal__prices" },
42
54
  cartStore.msrp && cartStore.msrp !== cartStore.price ? ((0, react_1.jsx)("label", { className: "ss__recommendation-bundle__wrapper__cta__subtotal__strike" },
@@ -44,5 +56,7 @@ exports.BundledCTA = (0, mobx_react_1.observer)(function (properties) {
44
56
  (0, react_1.jsx)(Price_1.Price, { lineThrough: true, value: cartStore.msrp }))) : ((0, react_1.jsx)(preact_1.Fragment, null)),
45
57
  (0, react_1.jsx)("label", { className: "ss__recommendation-bundle__wrapper__cta__subtotal__price" },
46
58
  (0, react_1.jsx)(Price_1.Price, { value: cartStore.price })))),
47
- (0, react_1.jsx)(Button_1.Button, { className: 'ss__recommendation-bundle__wrapper__cta__button', onClick: function (e) { return onAddToCartClick(e); } }, addToCartText)))));
59
+ (0, react_1.jsx)(Button_1.Button, { className: (0, classnames_1.default)('ss__recommendation-bundle__wrapper__cta__button', {
60
+ addedToCart: 'ss__recommendation-bundle__wrapper__cta__button--added',
61
+ }), onClick: function (e) { return onAddToCart(e); }, disabled: addedToCart }, addedToCart ? ctaButtonSuccessText : ctaButtonText)))));
48
62
  });
package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts CHANGED
@@ -13,7 +13,7 @@ export interface RecommendationBundleProps extends ComponentProps {
13
13
  results?: Product[];
14
14
  limit?: number;
15
15
  controller: RecommendationController;
16
- onAddToCart: (items: Product[]) => void;
16
+ onAddToCart: (e: MouseEvent, items: Product[]) => void;
17
17
  title?: JSX.Element | string;
18
18
  breakpoints?: BreakpointsProps;
19
19
  resultComponent?: JSX.Element;
@@ -25,6 +25,8 @@ export interface RecommendationBundleProps extends ComponentProps {
25
25
  ctaInline?: boolean;
26
26
  ctaIcon?: string | Partial<IconProps> | boolean;
27
27
  ctaButtonText?: string;
28
+ ctaButtonSuccessText?: string;
29
+ ctaButtonSuccessTimeout?: number;
28
30
  ctaSlot?: JSX.Element;
29
31
  vertical?: boolean;
30
32
  carousel?: BundleCarouselProps;
package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAY,aAAa,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAI9E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAyG7D,eAAO,MAAM,oBAAoB,eAAyB,yBAAyB,KAAG,WAicpF,CAAC;AAEH,KAAK,mBAAmB,GAAG;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AAE3B,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAChE,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,wBAAwB,CAAC;IACrC,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAC/B"}
1
+ {"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAY,aAAa,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAI9E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAyG7D,eAAO,MAAM,oBAAoB,eAAyB,yBAAyB,KAAG,WAwcpF,CAAC;AAEH,KAAK,mBAAmB,GAAG;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AAE3B,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAChE,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,wBAAwB,CAAC;IACrC,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAC/B"}
package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.js CHANGED
@@ -151,13 +151,13 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
151
151
  };
152
152
  var props = __assign(__assign(__assign({
153
153
  // default props
154
- breakpoints: JSON.parse(JSON.stringify(defaultCarouselBreakpoints)), hideCheckboxes: false, separatorIcon: 'plus-thin', seedText: 'This Product', separatorIconSeedOnly: true, ctaIcon: true, ctaButtonText: 'Add All To Cart', ctaInline: true }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.recommendationBundle), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.recommendationBundle);
154
+ breakpoints: JSON.parse(JSON.stringify(defaultCarouselBreakpoints)), hideCheckboxes: false, separatorIcon: 'plus-thin', seedText: 'This Product', separatorIconSeedOnly: true, ctaIcon: true, ctaButtonText: 'Add All To Cart', ctaButtonSuccessText: 'Bundle Added!', ctaButtonSuccessTimeout: 2000, ctaInline: true }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.recommendationBundle), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.recommendationBundle);
155
155
  var displaySettings = (0, useDisplaySettings_1.useDisplaySettings)(props.breakpoints);
156
156
  if (displaySettings && Object.keys(displaySettings).length) {
157
157
  var theme = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}, { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
158
158
  props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
159
159
  }
160
- var title = props.title, controller = props.controller, breakpoints = props.breakpoints, results = props.results, carousel = props.carousel, preselectedCount = props.preselectedCount, separatorIcon = props.separatorIcon, hideCheckboxes = props.hideCheckboxes, limit = props.limit, seedText = props.seedText, vertical = props.vertical, onAddToCart = props.onAddToCart, separatorIconSeedOnly = props.separatorIconSeedOnly, resultComponent = props.resultComponent, ctaSlot = props.ctaSlot, ctaButtonText = props.ctaButtonText, disableStyles = props.disableStyles, ctaIcon = props.ctaIcon, ctaInline = props.ctaInline, style = props.style, className = props.className, additionalProps = __rest(props, ["title", "controller", "breakpoints", "results", "carousel", "preselectedCount", "separatorIcon", "hideCheckboxes", "limit", "seedText", "vertical", "onAddToCart", "separatorIconSeedOnly", "resultComponent", "ctaSlot", "ctaButtonText", "disableStyles", "ctaIcon", "ctaInline", "style", "className"]);
160
+ var title = props.title, controller = props.controller, breakpoints = props.breakpoints, results = props.results, carousel = props.carousel, preselectedCount = props.preselectedCount, separatorIcon = props.separatorIcon, hideCheckboxes = props.hideCheckboxes, limit = props.limit, seedText = props.seedText, vertical = props.vertical, onAddToCart = props.onAddToCart, separatorIconSeedOnly = props.separatorIconSeedOnly, resultComponent = props.resultComponent, ctaSlot = props.ctaSlot, ctaButtonText = props.ctaButtonText, ctaButtonSuccessText = props.ctaButtonSuccessText, ctaButtonSuccessTimeout = props.ctaButtonSuccessTimeout, disableStyles = props.disableStyles, ctaIcon = props.ctaIcon, ctaInline = props.ctaInline, style = props.style, className = props.className, additionalProps = __rest(props, ["title", "controller", "breakpoints", "results", "carousel", "preselectedCount", "separatorIcon", "hideCheckboxes", "limit", "seedText", "vertical", "onAddToCart", "separatorIconSeedOnly", "resultComponent", "ctaSlot", "ctaButtonText", "ctaButtonSuccessText", "ctaButtonSuccessTimeout", "disableStyles", "ctaIcon", "ctaInline", "style", "className"]);
161
161
  var mergedCarouselProps = __assign({ enabled: true, loop: false, spaceBetween: 10 }, carousel);
162
162
  var seedInCarousel = mergedCarouselProps.seedInCarousel, prevButton = mergedCarouselProps.prevButton, nextButton = mergedCarouselProps.nextButton, hideButtons = mergedCarouselProps.hideButtons, loop = mergedCarouselProps.loop, spaceBetween = mergedCarouselProps.spaceBetween, pagination = mergedCarouselProps.pagination;
163
163
  var carouselEnabled = mergedCarouselProps.enabled;
@@ -264,7 +264,7 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
264
264
  // add to cart tracking
265
265
  controller.track.addBundle(e, selectedItems);
266
266
  //call the function passed
267
- onAddToCart && onAddToCart(selectedItems);
267
+ onAddToCart && onAddToCart(e, selectedItems);
268
268
  };
269
269
  var setSeedwidth = function () {
270
270
  var _a, _b;
@@ -330,7 +330,7 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
330
330
  (0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function () { return onProductSelect(result); }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: false, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))))));
331
331
  }
332
332
  })),
333
- ctaInline && ((0, react_1.jsx)(BundleCTA_1.BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCartClick: function (e) { return addToCart(e); }, addToCartText: ctaButtonText, icon: ctaIcon }))),
334
- !ctaInline && ((0, react_1.jsx)(BundleCTA_1.BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCartClick: function (e) { return addToCart(e); }, addToCartText: ctaButtonText, icon: ctaIcon })))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
333
+ ctaInline && ((0, react_1.jsx)(BundleCTA_1.BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: function (e) { return addToCart(e); }, ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon }))),
334
+ !ctaInline && ((0, react_1.jsx)(BundleCTA_1.BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: function (e) { return addToCart(e); }, ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon })))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
335
335
  return (0, react_1.jsx)(preact_1.Fragment, null);
336
336
  });
package/dist/esm/components/Organisms/RecommendationBundle/BundleCTA.d.ts CHANGED
@@ -9,9 +9,11 @@ export interface BundleSelectorSubProps {
9
9
  interface BundledCTAProps extends ComponentProps {
10
10
  ctaSlot?: JSX.Element;
11
11
  cartStore: CartStore;
12
- icon?: string | Partial<IconProps> | boolean;
13
- onAddToCartClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
14
- addToCartText?: string;
12
+ onAddToCart: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
13
+ ctaIcon?: string | Partial<IconProps> | boolean;
14
+ ctaButtonText?: string;
15
+ ctaButtonSuccessText?: string;
16
+ ctaButtonSuccessTimeout?: number;
15
17
  }
16
18
  export {};
17
19
  //# sourceMappingURL=BundleCTA.d.ts.map
package/dist/esm/components/Organisms/RecommendationBundle/BundleCTA.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BundleCTA.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/BundleCTA.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAQ,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE/D,eAAO,MAAM,UAAU,eAAyB,eAAe,KAAG,WA2DhE,CAAC;AAEH,MAAM,WAAW,sBAAsB;IACtC,IAAI,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;CACzB;AAED,UAAU,eAAgB,SAAQ,cAAc;IAC/C,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,SAAS,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAC7C,gBAAgB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACzE,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB"}
1
+ {"version":3,"file":"BundleCTA.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/BundleCTA.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAQ,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE/D,eAAO,MAAM,UAAU,eAAyB,eAAe,KAAG,WA6EhE,CAAC;AAEH,MAAM,WAAW,sBAAsB;IACtC,IAAI,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;CACzB;AAED,UAAU,eAAgB,SAAQ,cAAc;IAC/C,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,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,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAC;CACjC"}
package/dist/esm/components/Organisms/RecommendationBundle/BundleCTA.js CHANGED
@@ -1,7 +1,9 @@
1
1
  /** @jsx jsx */
2
2
  import { Fragment } from 'preact';
3
+ import { useState } from 'preact/hooks';
3
4
  import { jsx } from '@emotion/react';
4
5
  import { observer } from 'mobx-react';
6
+ import classnames from 'classnames';
5
7
  import { cloneWithProps } from '../../../utilities';
6
8
  import { Button } from '../../Atoms/Button';
7
9
  import { Price } from '../../Atoms/Price';
@@ -14,7 +16,14 @@ export const BundledCTA = observer((properties) => {
14
16
  // global theme
15
17
  ...properties,
16
18
  };
17
- const { ctaSlot, icon, cartStore, onAddToCartClick, addToCartText } = props;
19
+ props.onAddToCart = (e) => {
20
+ setAddedToCart(true);
21
+ properties.onAddToCart(e);
22
+ setTimeout(() => setAddedToCart(false), properties.ctaButtonSuccessTimeout);
23
+ };
24
+ const { ctaSlot, cartStore, onAddToCart, ctaIcon, ctaButtonText, ctaButtonSuccessText } = props;
25
+ const [addedToCart, setAddedToCart] = useState(false);
26
+ props.addedToCart = addedToCart;
18
27
  const subProps = {
19
28
  icon: {
20
29
  // default props
@@ -29,8 +38,8 @@ export const BundledCTA = observer((properties) => {
29
38
  };
30
39
  return (jsx("div", { className: `ss__recommendation-bundle__wrapper__cta` }, ctaSlot ? (cloneWithProps(ctaSlot, props)) : (jsx(Fragment, null,
31
40
  jsx("div", { className: "ss__recommendation-bundle__wrapper__cta__subtotal" },
32
- icon ? (jsx("div", { className: "icon" },
33
- jsx(Icon, { ...subProps.icon, ...(typeof icon == 'string' ? { icon: icon } : icon) }))) : (jsx(Fragment, null)),
41
+ ctaIcon ? (jsx("div", { className: "icon" },
42
+ jsx(Icon, { ...subProps.icon, ...(typeof ctaIcon == 'string' ? { icon: ctaIcon } : ctaIcon) }))) : (jsx(Fragment, null)),
34
43
  jsx("span", { className: "ss__recommendation-bundle__wrapper__cta__subtotal__title" }, `Subtotal for ${cartStore.count} items`),
35
44
  jsx("div", { className: "ss__recommendation-bundle__wrapper__cta__subtotal__prices" },
36
45
  cartStore.msrp && cartStore.msrp !== cartStore.price ? (jsx("label", { className: "ss__recommendation-bundle__wrapper__cta__subtotal__strike" },
@@ -38,5 +47,7 @@ export const BundledCTA = observer((properties) => {
38
47
  jsx(Price, { lineThrough: true, value: cartStore.msrp }))) : (jsx(Fragment, null)),
39
48
  jsx("label", { className: "ss__recommendation-bundle__wrapper__cta__subtotal__price" },
40
49
  jsx(Price, { value: cartStore.price })))),
41
- jsx(Button, { className: 'ss__recommendation-bundle__wrapper__cta__button', onClick: (e) => onAddToCartClick(e) }, addToCartText)))));
50
+ jsx(Button, { className: classnames('ss__recommendation-bundle__wrapper__cta__button', {
51
+ addedToCart: 'ss__recommendation-bundle__wrapper__cta__button--added',
52
+ }), onClick: (e) => onAddToCart(e), disabled: addedToCart }, addedToCart ? ctaButtonSuccessText : ctaButtonText)))));
42
53
  });
package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts CHANGED
@@ -13,7 +13,7 @@ export interface RecommendationBundleProps extends ComponentProps {
13
13
  results?: Product[];
14
14
  limit?: number;
15
15
  controller: RecommendationController;
16
- onAddToCart: (items: Product[]) => void;
16
+ onAddToCart: (e: MouseEvent, items: Product[]) => void;
17
17
  title?: JSX.Element | string;
18
18
  breakpoints?: BreakpointsProps;
19
19
  resultComponent?: JSX.Element;
@@ -25,6 +25,8 @@ export interface RecommendationBundleProps extends ComponentProps {
25
25
  ctaInline?: boolean;
26
26
  ctaIcon?: string | Partial<IconProps> | boolean;
27
27
  ctaButtonText?: string;
28
+ ctaButtonSuccessText?: string;
29
+ ctaButtonSuccessTimeout?: number;
28
30
  ctaSlot?: JSX.Element;
29
31
  vertical?: boolean;
30
32
  carousel?: BundleCarouselProps;
package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAY,aAAa,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAI9E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAyG7D,eAAO,MAAM,oBAAoB,eAAyB,yBAAyB,KAAG,WAicpF,CAAC;AAEH,KAAK,mBAAmB,GAAG;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AAE3B,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAChE,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,wBAAwB,CAAC;IACrC,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAC/B"}
1
+ {"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAY,aAAa,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAI9E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAyG7D,eAAO,MAAM,oBAAoB,eAAyB,yBAAyB,KAAG,WAwcpF,CAAC;AAEH,KAAK,mBAAmB,GAAG;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AAE3B,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAChE,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,wBAAwB,CAAC;IACrC,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAC/B"}
package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.js CHANGED
@@ -126,6 +126,8 @@ export const RecommendationBundle = observer((properties) => {
126
126
  separatorIconSeedOnly: true,
127
127
  ctaIcon: true,
128
128
  ctaButtonText: 'Add All To Cart',
129
+ ctaButtonSuccessText: 'Bundle Added!',
130
+ ctaButtonSuccessTimeout: 2000,
129
131
  ctaInline: true,
130
132
  // global theme
131
133
  ...globalTheme?.components?.recommendationBundle,
@@ -142,7 +144,7 @@ export const RecommendationBundle = observer((properties) => {
142
144
  theme,
143
145
  };
144
146
  }
145
- const { title, controller, breakpoints, results, carousel, preselectedCount, separatorIcon, hideCheckboxes, limit, seedText, vertical, onAddToCart, separatorIconSeedOnly, resultComponent, ctaSlot, ctaButtonText, disableStyles, ctaIcon, ctaInline, style, className, ...additionalProps } = props;
147
+ const { title, controller, breakpoints, results, carousel, preselectedCount, separatorIcon, hideCheckboxes, limit, seedText, vertical, onAddToCart, separatorIconSeedOnly, resultComponent, ctaSlot, ctaButtonText, ctaButtonSuccessText, ctaButtonSuccessTimeout, disableStyles, ctaIcon, ctaInline, style, className, ...additionalProps } = props;
146
148
  const mergedCarouselProps = {
147
149
  enabled: true,
148
150
  loop: false,
@@ -268,7 +270,7 @@ export const RecommendationBundle = observer((properties) => {
268
270
  // add to cart tracking
269
271
  controller.track.addBundle(e, selectedItems);
270
272
  //call the function passed
271
- onAddToCart && onAddToCart(selectedItems);
273
+ onAddToCart && onAddToCart(e, selectedItems);
272
274
  };
273
275
  const setSeedwidth = () => {
274
276
  if (seedRef.current) {
@@ -333,7 +335,7 @@ export const RecommendationBundle = observer((properties) => {
333
335
  jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: () => onProductSelect(result), checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: false, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
334
336
  }
335
337
  })),
336
- ctaInline && (jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCartClick: (e) => addToCart(e), addToCartText: ctaButtonText, icon: ctaIcon }))),
337
- !ctaInline && (jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCartClick: (e) => addToCart(e), addToCartText: ctaButtonText, icon: ctaIcon })))))) : (jsx(Fragment, null));
338
+ ctaInline && (jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: (e) => addToCart(e), ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon }))),
339
+ !ctaInline && (jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: (e) => addToCart(e), ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon })))))) : (jsx(Fragment, null));
338
340
  return jsx(Fragment, null);
339
341
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@searchspring/snap-preact-components",
3
- "version": "0.52.0",
3
+ "version": "0.52.1",
4
4
  "description": "Snap Preact Component Library",
5
5
  "author": "Searchspring",
6
6
  "license": "MIT",
@@ -22,13 +22,14 @@
22
22
  "lint": "eslint 'src/components/**/*.{js,jsx,ts,tsx}'",
23
23
  "storybook": "start-storybook -p 6006",
24
24
  "cypress": "cypress open --project tests",
25
- "test": "jest",
25
+ "cypress:headless": "cypress run --component --project tests",
26
+ "test": "jest; npm run cypress:headless",
26
27
  "test:watch": "jest --watch"
27
28
  },
28
29
  "dependencies": {
29
30
  "@cypress/react": "^8.0.0",
30
31
  "@emotion/react": "11.9.0",
31
- "@searchspring/snap-toolbox": "^0.52.0",
32
+ "@searchspring/snap-toolbox": "^0.52.1",
32
33
  "classnames": "^2.3.2",
33
34
  "cypress": "^12.15.0",
34
35
  "cypress-wait-until": "^1.7.2",
@@ -51,14 +52,14 @@
51
52
  "@babel/preset-env": "^7.21.4",
52
53
  "@babel/preset-react": "^7.18.6",
53
54
  "@babel/runtime": "^7.21.0",
54
- "@searchspring/snap-client": "^0.52.0",
55
- "@searchspring/snap-controller": "^0.52.0",
56
- "@searchspring/snap-event-manager": "^0.52.0",
57
- "@searchspring/snap-logger": "^0.52.0",
58
- "@searchspring/snap-profiler": "^0.52.0",
59
- "@searchspring/snap-store-mobx": "^0.52.0",
60
- "@searchspring/snap-tracker": "^0.52.0",
61
- "@searchspring/snap-url-manager": "^0.52.0",
55
+ "@searchspring/snap-client": "^0.52.1",
56
+ "@searchspring/snap-controller": "^0.52.1",
57
+ "@searchspring/snap-event-manager": "^0.52.1",
58
+ "@searchspring/snap-logger": "^0.52.1",
59
+ "@searchspring/snap-profiler": "^0.52.1",
60
+ "@searchspring/snap-store-mobx": "^0.52.1",
61
+ "@searchspring/snap-tracker": "^0.52.1",
62
+ "@searchspring/snap-url-manager": "^0.52.1",
62
63
  "@storybook/addon-actions": "6.4.22",
63
64
  "@storybook/addon-controls": "6.4.22",
64
65
  "@storybook/addon-docs": "6.4.22",
@@ -82,5 +83,5 @@
82
83
  "webpack-merge": "^5.8.0"
83
84
  },
84
85
  "sideEffects": false,
85
- "gitHead": "d2428041a3abcf856d29bc2210fea32684f23f79"
86
+ "gitHead": "c9651b79b78d8105b0f17234528ab6ba8eaa3cab"
86
87
  }