@searchspring/snap-preact-components 0.69.2 → 0.70.0

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 (17) hide show
  1. package/dist/cjs/components/Molecules/Carousel/Carousel.d.ts +3 -1
  2. package/dist/cjs/components/Molecules/Carousel/Carousel.d.ts.map +1 -1
  3. package/dist/cjs/components/Molecules/Carousel/Carousel.js +6 -1
  4. package/dist/cjs/components/Organisms/Recommendation/Recommendation.d.ts.map +1 -1
  5. package/dist/cjs/components/Organisms/Recommendation/Recommendation.js +2 -1
  6. package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts +1 -0
  7. package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts.map +1 -1
  8. package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.js +65 -71
  9. package/dist/esm/components/Molecules/Carousel/Carousel.d.ts +3 -1
  10. package/dist/esm/components/Molecules/Carousel/Carousel.d.ts.map +1 -1
  11. package/dist/esm/components/Molecules/Carousel/Carousel.js +6 -1
  12. package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts.map +1 -1
  13. package/dist/esm/components/Organisms/Recommendation/Recommendation.js +5 -1
  14. package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts +1 -0
  15. package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts.map +1 -1
  16. package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.js +69 -67
  17. package/package.json +11 -11
package/dist/cjs/components/Molecules/Carousel/Carousel.d.ts CHANGED
@@ -1,4 +1,6 @@
1
1
  /// <reference types="react" />
2
+ /** @jsx jsx */
3
+ import { ComponentChild } from 'preact';
2
4
  import type { Swiper as SwiperTypes } from 'swiper';
3
5
  import type { PaginationOptions } from 'swiper/types/modules/pagination';
4
6
  import type { NavigationOptions } from 'swiper/types/modules/navigation';
@@ -58,6 +60,6 @@ export interface CarouselProps extends ComponentProps {
58
60
  onInit?: (swiper: SwiperTypes) => void;
59
61
  onAfterInit?: (swiper: SwiperTypes) => void;
60
62
  modules?: any[];
61
- children: JSX.Element[];
63
+ children: ComponentChild[];
62
64
  }
63
65
  //# sourceMappingURL=Carousel.d.ts.map
package/dist/cjs/components/Molecules/Carousel/Carousel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAIvE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAkJ9E,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,eAAyB,aAAa,KAAG,WA2Q5D,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,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,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACvC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,KAAK,IAAI,CAAC;IACnF,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,QAAQ,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;CACxB"}
1
+ {"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,cAAc,EAAE,MAAM,QAAQ,CAAC;AAUrD,OAAO,KAAK,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAIvE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAkJ9E,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,eAAyB,aAAa,KAAG,WA+Q5D,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,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,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACvC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,KAAK,IAAI,CAAC;IACnF,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,QAAQ,EAAE,cAAc,EAAE,CAAC;CAC3B"}
package/dist/cjs/components/Molecules/Carousel/Carousel.js CHANGED
@@ -370,7 +370,12 @@ exports.Carousel = (0, mobx_react_1.observer)(function (properties) {
370
370
  }
371
371
  attachClasstoLastVisibleSlide();
372
372
  } }), children.map(function (child) {
373
- return (0, react_1.jsx)(react_2.SwiperSlide, null, child);
373
+ if (child != null) {
374
+ return (0, react_1.jsx)(react_2.SwiperSlide, null, child);
375
+ }
376
+ else {
377
+ return null;
378
+ }
374
379
  })),
375
380
  (0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__carousel__next-wrapper', { 'ss__carousel__next-wrapper--hidden': hideButtons }) },
376
381
  (0, react_1.jsx)("div", { className: "ss__carousel__next", ref: navigationNextRef, onClick: onNextButtonClick && (function (e) { return onNextButtonClick(e); }) }, nextButton || (0, react_1.jsx)(Icon_1.Icon, __assign({ icon: vertical ? 'angle-down' : 'angle-right' }, subProps.icon))))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
package/dist/cjs/components/Organisms/Recommendation/Recommendation.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAO7D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAe9E,eAAO,MAAM,cAAc,eAAyB,mBAAmB,KAAG,WA8JxE,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,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,UAAU,EAAE,wBAAwB,CAAC;IACrC,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;CACF"}
1
+ {"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAO7D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAe9E,eAAO,MAAM,cAAc,eAAyB,mBAAmB,KAAG,WAsKxE,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,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,UAAU,EAAE,wBAAwB,CAAC;IACrC,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;CACF"}
package/dist/cjs/components/Organisms/Recommendation/Recommendation.js CHANGED
@@ -65,7 +65,7 @@ exports.Recommendation = (0, mobx_react_1.observer)(function (properties) {
65
65
  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; } });
66
66
  props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
67
67
  }
68
- var title = props.title, controller = props.controller, children = props.children, breakpoints = props.breakpoints, loop = props.loop, results = props.results, pagination = props.pagination, nextButton = props.nextButton, prevButton = props.prevButton, hideButtons = props.hideButtons, disableStyles = props.disableStyles, style = props.style, className = props.className, lazyRender = props.lazyRender, vertical = props.vertical, additionalProps = __rest(props, ["title", "controller", "children", "breakpoints", "loop", "results", "pagination", "nextButton", "prevButton", "hideButtons", "disableStyles", "style", "className", "lazyRender", "vertical"]);
68
+ var title = props.title, description = props.description, controller = props.controller, children = props.children, breakpoints = props.breakpoints, loop = props.loop, results = props.results, pagination = props.pagination, nextButton = props.nextButton, prevButton = props.prevButton, hideButtons = props.hideButtons, disableStyles = props.disableStyles, style = props.style, className = props.className, lazyRender = props.lazyRender, vertical = props.vertical, additionalProps = __rest(props, ["title", "description", "controller", "children", "breakpoints", "loop", "results", "pagination", "nextButton", "prevButton", "hideButtons", "disableStyles", "style", "className", "lazyRender", "vertical"]);
69
69
  var mergedlazyRender = __assign({ enabled: true, offset: '10%' }, lazyRender);
70
70
  if (!controller || controller.type !== 'recommendation') {
71
71
  throw new Error("<Recommendation> Component requires 'controller' prop with an instance of RecommendationController");
@@ -108,6 +108,7 @@ exports.Recommendation = (0, mobx_react_1.observer)(function (properties) {
108
108
  return (Array.isArray(children) && children.length) || (resultsToRender === null || resultsToRender === void 0 ? void 0 : resultsToRender.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
109
109
  (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__recommendation', className), ref: recsRef }), isVisible ? ((0, react_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller },
110
110
  title && (0, react_1.jsx)("h3", { className: "ss__recommendation__title" }, title),
111
+ description && (0, react_1.jsx)("h4", { className: "ss__recommendation__description" }, description),
111
112
  (0, react_1.jsx)(Carousel_1.Carousel, __assign({ prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, pagination: pagination, breakpoints: breakpoints }, subProps.carousel, additionalProps, displaySettings), Array.isArray(children) && children.length
112
113
  ? children.map(function (child, idx) { return ((0, react_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: resultsToRender[idx] }, child)); })
113
114
  : resultsToRender.map(function (result) { return ((0, react_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result },
package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts CHANGED
@@ -15,6 +15,7 @@ export interface RecommendationBundleProps extends ComponentProps {
15
15
  controller: RecommendationController;
16
16
  onAddToCart: (e: MouseEvent, items: Product[]) => void;
17
17
  title?: JSX.Element | string;
18
+ description?: JSX.Element | string;
18
19
  breakpoints?: BreakpointsProps;
19
20
  resultComponent?: JSX.Element;
20
21
  preselectedCount?: number;
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,WA+fpF,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,OAAO,CAAC;IACnB,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;IAC/B,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF"}
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;AAwG7D,eAAO,MAAM,oBAAoB,eAAyB,yBAAyB,KAAG,WA+bpF,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,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACnC,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,OAAO,CAAC;IACnB,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;IAC/B,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF"}
package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.js CHANGED
@@ -45,7 +45,7 @@ var BundleCTA_1 = require("./BundleCTA");
45
45
  var hooks_2 = require("../../../hooks");
46
46
  var CSS = {
47
47
  recommendationBundle: function (_a) {
48
- var slidesPerView = _a.slidesPerView, spaceBetween = _a.spaceBetween, ctaInline = _a.ctaInline, vertical = _a.vertical, separatorIcon = _a.separatorIcon;
48
+ var slidesPerView = _a.slidesPerView, spaceBetween = _a.spaceBetween, ctaInline = _a.ctaInline, vertical = _a.vertical, separatorIcon = _a.separatorIcon, hasSeed = _a.hasSeed, hideSeed = _a.hideSeed, carouselEnabled = _a.carouselEnabled, limit = _a.limit;
49
49
  return (0, react_1.css)({
50
50
  '.ss__recommendation-bundle__wrapper': {
51
51
  display: 'flex',
@@ -61,7 +61,7 @@ var CSS = {
61
61
  width: vertical ? '100%' : "calc(100% / ".concat(slidesPerView + (!ctaInline ? 0 : 1), ")"),
62
62
  },
63
63
  '.ss__recommendation-bundle__wrapper__cta': {
64
- width: vertical ? '100%' : "".concat(!ctaInline ? '100%' : "calc(100% / ".concat(slidesPerView + 1, ")")),
64
+ width: vertical ? '100%' : "".concat(!ctaInline ? '100%' : "calc(100% / ".concat((carouselEnabled ? slidesPerView : limit) + 1, ")")),
65
65
  textAlign: 'center',
66
66
  '& .ss__recommendation-bundle__wrapper__cta__subtotal__prices': {
67
67
  display: 'block',
@@ -69,7 +69,7 @@ var CSS = {
69
69
  },
70
70
  '.ss__recommendation-bundle__wrapper__carousel': {
71
71
  boxSizing: 'border-box',
72
- width: vertical ? '100%' : "calc(calc(100% / ".concat(slidesPerView + (!ctaInline ? 0 : 1), ") * ").concat(slidesPerView - 1, ")"),
72
+ width: vertical ? '100%' : "calc(calc(100% / ".concat(slidesPerView + (!ctaInline ? 0 : 1), ") * ").concat(slidesPerView - (hasSeed && !hideSeed ? 1 : 0), ")"),
73
73
  },
74
74
  '.ss__recommendation-bundle__wrapper--seed-in-carousel': {
75
75
  '.ss__recommendation-bundle__wrapper__cta': {
@@ -129,7 +129,7 @@ var CSS = {
129
129
  },
130
130
  };
131
131
  exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties) {
132
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
132
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
133
133
  var globalTheme = (0, providers_1.useTheme)();
134
134
  var defaultCarouselBreakpoints = {
135
135
  0: {
@@ -157,7 +157,7 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
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, hideSeed = props.hideSeed, ctaButtonText = props.ctaButtonText, ctaButtonSuccessText = props.ctaButtonSuccessText, ctaButtonSuccessTimeout = props.ctaButtonSuccessTimeout, disableStyles = props.disableStyles, ctaIcon = props.ctaIcon, ctaInline = props.ctaInline, style = props.style, lazyRender = props.lazyRender, className = props.className, additionalProps = __rest(props, ["title", "controller", "breakpoints", "results", "carousel", "preselectedCount", "separatorIcon", "hideCheckboxes", "limit", "seedText", "vertical", "onAddToCart", "separatorIconSeedOnly", "resultComponent", "ctaSlot", "hideSeed", "ctaButtonText", "ctaButtonSuccessText", "ctaButtonSuccessTimeout", "disableStyles", "ctaIcon", "ctaInline", "style", "lazyRender", "className"]);
160
+ var title = props.title, description = props.description, 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, hideSeed = props.hideSeed, ctaButtonText = props.ctaButtonText, ctaButtonSuccessText = props.ctaButtonSuccessText, ctaButtonSuccessTimeout = props.ctaButtonSuccessTimeout, disableStyles = props.disableStyles, ctaIcon = props.ctaIcon, ctaInline = props.ctaInline, style = props.style, lazyRender = props.lazyRender, className = props.className, additionalProps = __rest(props, ["title", "description", "controller", "breakpoints", "results", "carousel", "preselectedCount", "separatorIcon", "hideCheckboxes", "limit", "seedText", "vertical", "onAddToCart", "separatorIconSeedOnly", "resultComponent", "ctaSlot", "hideSeed", "ctaButtonText", "ctaButtonSuccessText", "ctaButtonSuccessTimeout", "disableStyles", "ctaIcon", "ctaInline", "style", "lazyRender", "className"]);
161
161
  var mergedlazyRender = __assign({ enabled: true, offset: '10%' }, lazyRender);
162
162
  var mergedCarouselProps = __assign({ enabled: true, loop: false, spaceBetween: 10 }, carousel);
163
163
  var seedInCarousel = mergedCarouselProps.seedInCarousel, prevButton = mergedCarouselProps.prevButton, nextButton = mergedCarouselProps.nextButton, hideButtons = mergedCarouselProps.hideButtons, loop = mergedCarouselProps.loop, spaceBetween = mergedCarouselProps.spaceBetween, pagination = mergedCarouselProps.pagination;
@@ -167,7 +167,7 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
167
167
  }
168
168
  var resultsToRender = results || ((_d = controller.store) === null || _d === void 0 ? void 0 : _d.results);
169
169
  if (limit) {
170
- resultsToRender = resultsToRender.slice(0, hideSeed ? limit + 1 : limit);
170
+ resultsToRender = resultsToRender.slice(0, hideSeed && resultsToRender.filter(function (result) { return result.bundleSeed == true; }).length ? limit + 1 : limit);
171
171
  }
172
172
  var cartStore = controller.store.cart;
173
173
  if (!cartStore) {
@@ -177,33 +177,39 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
177
177
  controller.log.error("<RecommendationBundle> Component has no results to render!");
178
178
  return (0, react_1.jsx)(preact_1.Fragment, null);
179
179
  }
180
- var seed = results ? results[0] : (_g = controller.store) === null || _g === void 0 ? void 0 : _g.results[0];
180
+ var seed = results
181
+ ? results.filter(function (result) { return result.bundleSeed == true; }).pop()
182
+ : (_h = (_g = controller.store) === null || _g === void 0 ? void 0 : _g.results) === null || _h === void 0 ? void 0 : _h.filter(function (result) { return result.bundleSeed == true; }).pop();
181
183
  var subProps = {
182
184
  carousel: __assign(__assign(__assign({ loop: loop,
183
185
  // default props
184
- className: 'ss__recommendation__carousel' }, (_h = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _h === void 0 ? void 0 : _h.carousel), (0, utilities_1.defined)({
186
+ className: 'ss__recommendation__carousel' }, (_j = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _j === void 0 ? void 0 : _j.carousel), (0, utilities_1.defined)({
185
187
  disableStyles: disableStyles,
186
188
  })), {
187
189
  // component theme overrides
188
190
  theme: props === null || props === void 0 ? void 0 : props.theme }),
189
191
  result: __assign(__assign(__assign({
190
192
  // default props
191
- className: 'ss__recommendation__result' }, (_j = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _j === void 0 ? void 0 : _j.result), (0, utilities_1.defined)({
193
+ className: 'ss__recommendation__result' }, (_k = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _k === void 0 ? void 0 : _k.result), (0, utilities_1.defined)({
192
194
  disableStyles: disableStyles,
193
195
  })), {
194
196
  // component theme overrides
195
197
  theme: props === null || props === void 0 ? void 0 : props.theme }),
196
198
  };
197
- var slidesPerView = ((_k = props.carousel) === null || _k === void 0 ? void 0 : _k.slidesPerView) || props.slidesPerView;
199
+ var slidesPerView = ((_l = props.carousel) === null || _l === void 0 ? void 0 : _l.slidesPerView) || props.slidesPerView;
198
200
  if (!slidesPerView) {
199
201
  slidesPerView = 2;
200
202
  }
201
203
  else if (resultsToRender.length < slidesPerView) {
202
204
  slidesPerView = resultsToRender.length;
203
205
  }
206
+ var hasSeed = Boolean(resultsToRender.filter(function (result) { return result.bundleSeed == true; }).length);
204
207
  var styling = {};
205
208
  if (!disableStyles) {
206
- styling.css = [CSS.recommendationBundle({ slidesPerView: slidesPerView, spaceBetween: spaceBetween, ctaInline: ctaInline, vertical: vertical, separatorIcon: separatorIcon }), style];
209
+ styling.css = [
210
+ CSS.recommendationBundle({ slidesPerView: slidesPerView, spaceBetween: spaceBetween, ctaInline: ctaInline, vertical: vertical, separatorIcon: separatorIcon, hasSeed: hasSeed, hideSeed: hideSeed, carouselEnabled: carouselEnabled, limit: limit }),
211
+ style,
212
+ ];
207
213
  }
208
214
  else if (style) {
209
215
  styling.css = [style];
@@ -226,18 +232,18 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
226
232
  if (carouselEnabled) {
227
233
  Object.keys(props.breakpoints).forEach(function (breakpoint) {
228
234
  var _a, _b;
229
- var obj = props.breakpoints[breakpoint];
235
+ var currentBreakpoint = props.breakpoints[breakpoint];
230
236
  // fallback in case slides per view/group were not provided in breakpoint...
231
- var objSlidesPerView = ((_a = obj.carousel) === null || _a === void 0 ? void 0 : _a.slidesPerView) || obj.slidesPerView || 2;
232
- var objSlidesPerGroup = ((_b = obj.carousel) === null || _b === void 0 ? void 0 : _b.slidesPerGroup) || obj.slidesPerGroup || 2;
233
- var newSlidesPerView = objSlidesPerView;
234
- var newSlidesPerGroup = objSlidesPerGroup;
235
- var resultCount = seedInCarousel ? resultsToRender.length : resultsToRender.length - 1;
237
+ var currentBreakpointSlidesPerView = ((_a = currentBreakpoint.carousel) === null || _a === void 0 ? void 0 : _a.slidesPerView) || currentBreakpoint.slidesPerView || 2;
238
+ var currentBreakpointSlidesPerGroup = ((_b = currentBreakpoint.carousel) === null || _b === void 0 ? void 0 : _b.slidesPerGroup) || currentBreakpoint.slidesPerGroup || 2;
239
+ var newSlidesPerView = currentBreakpointSlidesPerView;
240
+ var newSlidesPerGroup = currentBreakpointSlidesPerGroup;
241
+ var resultCount = !hasSeed || seedInCarousel ? resultsToRender.length : resultsToRender.length - 1;
236
242
  if (resultCount) {
237
- if (resultCount >= objSlidesPerView) {
238
- newSlidesPerView = objSlidesPerView - (!seedInCarousel ? 1 : 0);
243
+ if (resultCount >= currentBreakpointSlidesPerView) {
244
+ newSlidesPerView = currentBreakpointSlidesPerView - (!seedInCarousel && hasSeed ? 1 : 0);
239
245
  if (!seedInCarousel) {
240
- newSlidesPerGroup = objSlidesPerGroup - 1 || 1;
246
+ newSlidesPerGroup = currentBreakpointSlidesPerGroup - 1 || 1;
241
247
  }
242
248
  }
243
249
  else {
@@ -254,7 +260,7 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
254
260
  if (idx > -1) {
255
261
  //already selected, deselect it now
256
262
  cartStore.removeItems([product]);
257
- if (cartStore.items.length == 0) {
263
+ if (cartStore.items.length == 0 && seed) {
258
264
  //we dont call addItems here to prevent tracking
259
265
  cartStore.items.push(seed);
260
266
  }
@@ -287,22 +293,57 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
287
293
  };
288
294
  var seedRef = (0, hooks_1.useRef)();
289
295
  var carouselRef = (0, hooks_1.useRef)();
290
- var _l = (0, hooks_1.useState)(false), isVisible = _l[0], setIsVisible = _l[1];
296
+ var _m = (0, hooks_1.useState)(false), isVisible = _m[0], setIsVisible = _m[1];
291
297
  var recsRef = (0, hooks_1.useRef)(null);
292
298
  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;
293
299
  if (inView) {
294
300
  setIsVisible(true);
295
301
  }
302
+ var renderedResults = (0, hooks_1.useMemo)(function () {
303
+ return resultsToRender.map(function (result, idx) {
304
+ var isSeed = Boolean(result.bundleSeed);
305
+ var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
306
+ var attributes = {
307
+ onCheck: function (e) {
308
+ e.stopPropagation();
309
+ onProductSelect(result);
310
+ },
311
+ checked: selected,
312
+ hideCheckboxes: hideCheckboxes,
313
+ theme: props.theme,
314
+ icon: separatorIconSeedOnly ? false : separatorIcon,
315
+ className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '',
316
+ };
317
+ if (isSeed) {
318
+ attributes = __assign(__assign({}, attributes), { seedText: seedText, seed: true, icon: separatorIcon });
319
+ }
320
+ return !isSeed || ((seedInCarousel || (carousel === null || carousel === void 0 ? void 0 : carousel.enabled) == false) && isSeed && !hideSeed) ? ((0, react_1.jsx)(ResultTracker_1.ResultTracker, { key: result.id, controller: controller, result: result, track: { impression: Boolean(!isSeed) } },
321
+ (0, react_1.jsx)(BundleSelector_1.BundleSelector, __assign({}, attributes), resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: isSeed, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result })))))) : null;
322
+ });
323
+ }, [
324
+ resultsToRender,
325
+ selectedItems,
326
+ hideCheckboxes,
327
+ separatorIconSeedOnly,
328
+ separatorIcon,
329
+ seedInCarousel,
330
+ hideSeed,
331
+ resultComponent,
332
+ props.theme,
333
+ seedText,
334
+ ]);
296
335
  return (resultsToRender === null || resultsToRender === void 0 ? void 0 : resultsToRender.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
297
336
  (0, react_1.jsx)("div", __assign({}, styling, { ref: recsRef, className: (0, classnames_1.default)('ss__recommendation-bundle', { 'ss__recommendation-bundle--stacked': !ctaInline }, className) }), isVisible ? ((0, react_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller },
298
337
  title && ((0, react_1.jsx)("h3", { className: "ss__recommendation-bundle__title" },
299
338
  (0, react_1.jsx)("span", null, title))),
339
+ description && ((0, react_1.jsx)("h4", { className: "ss__recommendation-bundle__description" },
340
+ (0, react_1.jsx)("span", null, description))),
300
341
  (0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__recommendation-bundle__wrapper', {
301
342
  'ss__recommendation-bundle__wrapper--seed-in-carousel': seedInCarousel,
302
343
  'ss__recommendation-bundle__wrapper--vertical': vertical,
303
344
  }) },
304
345
  carouselEnabled ? ((0, react_1.jsx)(preact_1.Fragment, null,
305
- !seedInCarousel && !hideSeed && ((0, react_1.jsx)("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
346
+ !seedInCarousel && !hideSeed && seed && ((0, react_1.jsx)("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
306
347
  (0, react_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: seed, track: { impression: false } },
307
348
  (0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, onCheck: function (e) {
308
349
  e.stopPropagation();
@@ -314,54 +355,7 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
314
355
  onProductSelect: onProductSelect,
315
356
  })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: seed }))))))),
316
357
  (0, react_1.jsx)("div", { className: "ss__recommendation-bundle__wrapper__carousel" },
317
- (0, react_1.jsx)(Carousel_1.Carousel, __assign({ prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, spaceBetween: spaceBetween, pagination: pagination, breakpoints: modifiedBreakpoints, watchSlidesProgress: true, observer: true, vertical: vertical, onResize: function () { return setSeedwidth(); } }, subProps.carousel, additionalProps, displaySettings, { ref: carouselRef }), seedInCarousel
318
- ? resultsToRender
319
- .filter(function (result, idx) { return (hideSeed && idx == 0 ? false : true); })
320
- .map(function (result, idx) {
321
- var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
322
- if (idx == 0 && !hideSeed) {
323
- return ((0, react_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result, track: { impression: false } },
324
- (0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: function (e) {
325
- e.stopPropagation();
326
- onProductSelect(result);
327
- }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: true, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))))));
328
- }
329
- else {
330
- return ((0, react_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result },
331
- (0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function (e) {
332
- e.stopPropagation();
333
- onProductSelect(result);
334
- }, 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 }))))));
335
- }
336
- })
337
- : resultsToRender
338
- .filter(function (result, idx) { return idx !== 0; })
339
- .map(function (result, idx, results) {
340
- var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
341
- return ((0, react_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result },
342
- (0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function (e) {
343
- e.stopPropagation();
344
- onProductSelect(result);
345
- }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == results.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 }))))));
346
- }))))) : (resultsToRender
347
- .filter(function (result, idx) { return (hideSeed && idx == 0 ? false : true); })
348
- .map(function (result, idx) {
349
- var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
350
- if (idx == 0 && !hideSeed) {
351
- return ((0, react_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result, track: { impression: false } },
352
- (0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: function (e) {
353
- e.stopPropagation();
354
- onProductSelect(result);
355
- }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: true, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))))));
356
- }
357
- else {
358
- return ((0, react_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result },
359
- (0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function (e) {
360
- e.stopPropagation();
361
- onProductSelect(result);
362
- }, 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 }))))));
363
- }
364
- })),
358
+ (0, react_1.jsx)(Carousel_1.Carousel, __assign({ prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, spaceBetween: spaceBetween, pagination: pagination, breakpoints: modifiedBreakpoints, watchSlidesProgress: true, observer: true, vertical: vertical, onResize: function () { return setSeedwidth(); } }, subProps.carousel, additionalProps, displaySettings, { ref: carouselRef, children: renderedResults }))))) : ((0, react_1.jsx)(preact_1.Fragment, null, renderedResults)),
365
359
  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 }))),
366
360
  !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)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller }, resultsToRender.map(function (result) { return ((0, react_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result },
367
361
  (0, react_1.jsx)(preact_1.Fragment, null))); })))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
package/dist/esm/components/Molecules/Carousel/Carousel.d.ts CHANGED
@@ -1,4 +1,6 @@
1
1
  /// <reference types="react" />
2
+ /** @jsx jsx */
3
+ import { ComponentChild } from 'preact';
2
4
  import type { Swiper as SwiperTypes } from 'swiper';
3
5
  import type { PaginationOptions } from 'swiper/types/modules/pagination';
4
6
  import type { NavigationOptions } from 'swiper/types/modules/navigation';
@@ -58,6 +60,6 @@ export interface CarouselProps extends ComponentProps {
58
60
  onInit?: (swiper: SwiperTypes) => void;
59
61
  onAfterInit?: (swiper: SwiperTypes) => void;
60
62
  modules?: any[];
61
- children: JSX.Element[];
63
+ children: ComponentChild[];
62
64
  }
63
65
  //# sourceMappingURL=Carousel.d.ts.map
package/dist/esm/components/Molecules/Carousel/Carousel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAIvE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAkJ9E,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,eAAyB,aAAa,KAAG,WA2Q5D,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,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,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACvC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,KAAK,IAAI,CAAC;IACnF,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,QAAQ,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;CACxB"}
1
+ {"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,cAAc,EAAE,MAAM,QAAQ,CAAC;AAUrD,OAAO,KAAK,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAIvE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAkJ9E,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,eAAyB,aAAa,KAAG,WA+Q5D,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,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,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACvC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,KAAK,IAAI,CAAC;IACnF,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,QAAQ,EAAE,cAAc,EAAE,CAAC;CAC3B"}
package/dist/esm/components/Molecules/Carousel/Carousel.js CHANGED
@@ -365,7 +365,12 @@ export const Carousel = observer((properties) => {
365
365
  }
366
366
  attachClasstoLastVisibleSlide();
367
367
  } }, children.map((child) => {
368
- return jsx(SwiperSlide, null, child);
368
+ if (child != null) {
369
+ return jsx(SwiperSlide, null, child);
370
+ }
371
+ else {
372
+ return null;
373
+ }
369
374
  })),
370
375
  jsx("div", { className: classnames('ss__carousel__next-wrapper', { 'ss__carousel__next-wrapper--hidden': hideButtons }) },
371
376
  jsx("div", { className: "ss__carousel__next", ref: navigationNextRef, onClick: onNextButtonClick && ((e) => onNextButtonClick(e)) }, nextButton || jsx(Icon, { icon: vertical ? 'angle-down' : 'angle-right', ...subProps.icon })))))) : (jsx(Fragment, null));
package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAO7D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAe9E,eAAO,MAAM,cAAc,eAAyB,mBAAmB,KAAG,WA8JxE,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,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,UAAU,EAAE,wBAAwB,CAAC;IACrC,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;CACF"}
1
+ {"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAO7D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAe9E,eAAO,MAAM,cAAc,eAAyB,mBAAmB,KAAG,WAsKxE,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,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,UAAU,EAAE,wBAAwB,CAAC;IACrC,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;CACF"}
package/dist/esm/components/Organisms/Recommendation/Recommendation.js CHANGED
@@ -30,6 +30,9 @@ export const Recommendation = observer((properties) => {
30
30
  : JSON.parse(JSON.stringify(defaultCarouselBreakpoints)),
31
31
  pagination: false,
32
32
  loop: true,
33
+ /* TODO: Cannot use default values due to breaking changes - must change in 1.0 */
34
+ // title: properties.controller?.store?.profile?.display?.templateParameters?.title,
35
+ // description: properties.controller?.store?.profile?.display?.templateParameters?.description,
33
36
  // global theme
34
37
  ...globalTheme?.components?.recommendation,
35
38
  ...properties,
@@ -45,7 +48,7 @@ export const Recommendation = observer((properties) => {
45
48
  theme,
46
49
  };
47
50
  }
48
- const { title, controller, children, breakpoints, loop, results, pagination, nextButton, prevButton, hideButtons, disableStyles, style, className, lazyRender, vertical, ...additionalProps } = props;
51
+ const { title, description, controller, children, breakpoints, loop, results, pagination, nextButton, prevButton, hideButtons, disableStyles, style, className, lazyRender, vertical, ...additionalProps } = props;
49
52
  const mergedlazyRender = {
50
53
  enabled: true,
51
54
  offset: '10%',
@@ -102,6 +105,7 @@ export const Recommendation = observer((properties) => {
102
105
  return (Array.isArray(children) && children.length) || resultsToRender?.length ? (jsx(CacheProvider, null,
103
106
  jsx("div", { ...styling, className: classnames('ss__recommendation', className), ref: recsRef }, isVisible ? (jsx(RecommendationProfileTracker, { controller: controller },
104
107
  title && jsx("h3", { className: "ss__recommendation__title" }, title),
108
+ description && jsx("h4", { className: "ss__recommendation__description" }, description),
105
109
  jsx(Carousel, { prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, pagination: pagination, breakpoints: breakpoints, ...subProps.carousel, ...additionalProps, ...displaySettings }, Array.isArray(children) && children.length
106
110
  ? children.map((child, idx) => (jsx(ResultTracker, { controller: controller, result: resultsToRender[idx] }, child)))
107
111
  : resultsToRender.map((result) => (jsx(ResultTracker, { controller: controller, result: result },
package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts CHANGED
@@ -15,6 +15,7 @@ export interface RecommendationBundleProps extends ComponentProps {
15
15
  controller: RecommendationController;
16
16
  onAddToCart: (e: MouseEvent, items: Product[]) => void;
17
17
  title?: JSX.Element | string;
18
+ description?: JSX.Element | string;
18
19
  breakpoints?: BreakpointsProps;
19
20
  resultComponent?: JSX.Element;
20
21
  preselectedCount?: number;
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,WA+fpF,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,OAAO,CAAC;IACnB,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;IAC/B,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF"}
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;AAwG7D,eAAO,MAAM,oBAAoB,eAAyB,yBAAyB,KAAG,WA+bpF,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,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACnC,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,OAAO,CAAC;IACnB,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;IAC/B,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF"}
package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.js CHANGED
@@ -2,7 +2,7 @@
2
2
  import { Fragment } from 'preact';
3
3
  import { jsx, css } from '@emotion/react';
4
4
  import classnames from 'classnames';
5
- import { useRef, useEffect, useState } from 'preact/hooks';
5
+ import { useRef, useEffect, useState, useMemo } from 'preact/hooks';
6
6
  import { observer } from 'mobx-react';
7
7
  import deepmerge from 'deepmerge';
8
8
  import { Carousel } from '../../Molecules/Carousel';
@@ -16,7 +16,7 @@ import { BundleSelector } from './BundleSelector';
16
16
  import { BundledCTA } from './BundleCTA';
17
17
  import { useIntersection } from '../../../hooks';
18
18
  const CSS = {
19
- recommendationBundle: ({ slidesPerView, spaceBetween, ctaInline, vertical, separatorIcon }) => css({
19
+ recommendationBundle: ({ slidesPerView, spaceBetween, ctaInline, vertical, separatorIcon, hasSeed, hideSeed, carouselEnabled, limit }) => css({
20
20
  '.ss__recommendation-bundle__wrapper': {
21
21
  display: 'flex',
22
22
  maxWidth: '100%',
@@ -31,7 +31,7 @@ const CSS = {
31
31
  width: vertical ? '100%' : `calc(100% / ${slidesPerView + (!ctaInline ? 0 : 1)})`,
32
32
  },
33
33
  '.ss__recommendation-bundle__wrapper__cta': {
34
- width: vertical ? '100%' : `${!ctaInline ? '100%' : `calc(100% / ${slidesPerView + 1})`}`,
34
+ width: vertical ? '100%' : `${!ctaInline ? '100%' : `calc(100% / ${(carouselEnabled ? slidesPerView : limit) + 1})`}`,
35
35
  textAlign: 'center',
36
36
  '& .ss__recommendation-bundle__wrapper__cta__subtotal__prices': {
37
37
  display: 'block',
@@ -39,7 +39,7 @@ const CSS = {
39
39
  },
40
40
  '.ss__recommendation-bundle__wrapper__carousel': {
41
41
  boxSizing: 'border-box',
42
- width: vertical ? '100%' : `calc(calc(100% / ${slidesPerView + (!ctaInline ? 0 : 1)}) * ${slidesPerView - 1})`,
42
+ width: vertical ? '100%' : `calc(calc(100% / ${slidesPerView + (!ctaInline ? 0 : 1)}) * ${slidesPerView - (hasSeed && !hideSeed ? 1 : 0)})`,
43
43
  },
44
44
  '.ss__recommendation-bundle__wrapper--seed-in-carousel': {
45
45
  '.ss__recommendation-bundle__wrapper__cta': {
@@ -129,6 +129,9 @@ export const RecommendationBundle = observer((properties) => {
129
129
  ctaButtonSuccessText: 'Bundle Added!',
130
130
  ctaButtonSuccessTimeout: 2000,
131
131
  ctaInline: true,
132
+ /* TODO: Cannot use default values due to breaking changes - must change in 1.0 */
133
+ // title: properties.controller?.store?.profile?.display?.templateParameters?.title,
134
+ // description: properties.controller?.store?.profile?.display?.templateParameters?.description,
132
135
  // global theme
133
136
  ...globalTheme?.components?.recommendationBundle,
134
137
  ...properties,
@@ -144,7 +147,7 @@ export const RecommendationBundle = observer((properties) => {
144
147
  theme,
145
148
  };
146
149
  }
147
- const { title, controller, breakpoints, results, carousel, preselectedCount, separatorIcon, hideCheckboxes, limit, seedText, vertical, onAddToCart, separatorIconSeedOnly, resultComponent, ctaSlot, hideSeed, ctaButtonText, ctaButtonSuccessText, ctaButtonSuccessTimeout, disableStyles, ctaIcon, ctaInline, style, lazyRender, className, ...additionalProps } = props;
150
+ const { title, description, controller, breakpoints, results, carousel, preselectedCount, separatorIcon, hideCheckboxes, limit, seedText, vertical, onAddToCart, separatorIconSeedOnly, resultComponent, ctaSlot, hideSeed, ctaButtonText, ctaButtonSuccessText, ctaButtonSuccessTimeout, disableStyles, ctaIcon, ctaInline, style, lazyRender, className, ...additionalProps } = props;
148
151
  const mergedlazyRender = {
149
152
  enabled: true,
150
153
  offset: '10%',
@@ -163,7 +166,7 @@ export const RecommendationBundle = observer((properties) => {
163
166
  }
164
167
  let resultsToRender = results || controller.store?.results;
165
168
  if (limit) {
166
- resultsToRender = resultsToRender.slice(0, hideSeed ? limit + 1 : limit);
169
+ resultsToRender = resultsToRender.slice(0, hideSeed && resultsToRender.filter((result) => result.bundleSeed == true).length ? limit + 1 : limit);
167
170
  }
168
171
  const cartStore = controller.store.cart;
169
172
  if (!cartStore) {
@@ -173,7 +176,9 @@ export const RecommendationBundle = observer((properties) => {
173
176
  controller.log.error(`<RecommendationBundle> Component has no results to render!`);
174
177
  return jsx(Fragment, null);
175
178
  }
176
- const seed = results ? results[0] : controller.store?.results[0];
179
+ const seed = results
180
+ ? results.filter((result) => result.bundleSeed == true).pop()
181
+ : controller.store?.results?.filter((result) => result.bundleSeed == true).pop();
177
182
  const subProps = {
178
183
  carousel: {
179
184
  loop: loop,
@@ -208,9 +213,13 @@ export const RecommendationBundle = observer((properties) => {
208
213
  else if (resultsToRender.length < slidesPerView) {
209
214
  slidesPerView = resultsToRender.length;
210
215
  }
216
+ const hasSeed = Boolean(resultsToRender.filter((result) => result.bundleSeed == true).length);
211
217
  const styling = {};
212
218
  if (!disableStyles) {
213
- styling.css = [CSS.recommendationBundle({ slidesPerView, spaceBetween, ctaInline, vertical, separatorIcon }), style];
219
+ styling.css = [
220
+ CSS.recommendationBundle({ slidesPerView, spaceBetween, ctaInline, vertical, separatorIcon, hasSeed, hideSeed, carouselEnabled, limit }),
221
+ style,
222
+ ];
214
223
  }
215
224
  else if (style) {
216
225
  styling.css = [style];
@@ -232,18 +241,18 @@ export const RecommendationBundle = observer((properties) => {
232
241
  const modifiedBreakpoints = { ...breakpoints };
233
242
  if (carouselEnabled) {
234
243
  Object.keys(props.breakpoints).forEach((breakpoint) => {
235
- const obj = props.breakpoints[breakpoint];
244
+ const currentBreakpoint = props.breakpoints[breakpoint];
236
245
  // fallback in case slides per view/group were not provided in breakpoint...
237
- const objSlidesPerView = obj.carousel?.slidesPerView || obj.slidesPerView || 2;
238
- const objSlidesPerGroup = obj.carousel?.slidesPerGroup || obj.slidesPerGroup || 2;
239
- let newSlidesPerView = objSlidesPerView;
240
- let newSlidesPerGroup = objSlidesPerGroup;
241
- const resultCount = seedInCarousel ? resultsToRender.length : resultsToRender.length - 1;
246
+ const currentBreakpointSlidesPerView = currentBreakpoint.carousel?.slidesPerView || currentBreakpoint.slidesPerView || 2;
247
+ const currentBreakpointSlidesPerGroup = currentBreakpoint.carousel?.slidesPerGroup || currentBreakpoint.slidesPerGroup || 2;
248
+ let newSlidesPerView = currentBreakpointSlidesPerView;
249
+ let newSlidesPerGroup = currentBreakpointSlidesPerGroup;
250
+ const resultCount = !hasSeed || seedInCarousel ? resultsToRender.length : resultsToRender.length - 1;
242
251
  if (resultCount) {
243
- if (resultCount >= objSlidesPerView) {
244
- newSlidesPerView = objSlidesPerView - (!seedInCarousel ? 1 : 0);
252
+ if (resultCount >= currentBreakpointSlidesPerView) {
253
+ newSlidesPerView = currentBreakpointSlidesPerView - (!seedInCarousel && hasSeed ? 1 : 0);
245
254
  if (!seedInCarousel) {
246
- newSlidesPerGroup = objSlidesPerGroup - 1 || 1;
255
+ newSlidesPerGroup = currentBreakpointSlidesPerGroup - 1 || 1;
247
256
  }
248
257
  }
249
258
  else {
@@ -264,7 +273,7 @@ export const RecommendationBundle = observer((properties) => {
264
273
  if (idx > -1) {
265
274
  //already selected, deselect it now
266
275
  cartStore.removeItems([product]);
267
- if (cartStore.items.length == 0) {
276
+ if (cartStore.items.length == 0 && seed) {
268
277
  //we dont call addItems here to prevent tracking
269
278
  cartStore.items.push(seed);
270
279
  }
@@ -302,16 +311,56 @@ export const RecommendationBundle = observer((properties) => {
302
311
  if (inView) {
303
312
  setIsVisible(true);
304
313
  }
314
+ const renderedResults = useMemo(() => {
315
+ return resultsToRender.map((result, idx) => {
316
+ const isSeed = Boolean(result.bundleSeed);
317
+ const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
318
+ let attributes = {
319
+ onCheck: (e) => {
320
+ e.stopPropagation();
321
+ onProductSelect(result);
322
+ },
323
+ checked: selected,
324
+ hideCheckboxes: hideCheckboxes,
325
+ theme: props.theme,
326
+ icon: separatorIconSeedOnly ? false : separatorIcon,
327
+ className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '',
328
+ };
329
+ if (isSeed) {
330
+ attributes = {
331
+ ...attributes,
332
+ seedText: seedText,
333
+ seed: true,
334
+ icon: separatorIcon,
335
+ };
336
+ }
337
+ return !isSeed || ((seedInCarousel || carousel?.enabled == false) && isSeed && !hideSeed) ? (jsx(ResultTracker, { key: result.id, controller: controller, result: result, track: { impression: Boolean(!isSeed) } },
338
+ jsx(BundleSelector, { ...attributes }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: isSeed, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result }))))) : null;
339
+ });
340
+ }, [
341
+ resultsToRender,
342
+ selectedItems,
343
+ hideCheckboxes,
344
+ separatorIconSeedOnly,
345
+ separatorIcon,
346
+ seedInCarousel,
347
+ hideSeed,
348
+ resultComponent,
349
+ props.theme,
350
+ seedText,
351
+ ]);
305
352
  return resultsToRender?.length ? (jsx(CacheProvider, null,
306
353
  jsx("div", { ...styling, ref: recsRef, className: classnames('ss__recommendation-bundle', { 'ss__recommendation-bundle--stacked': !ctaInline }, className) }, isVisible ? (jsx(RecommendationProfileTracker, { controller: controller },
307
354
  title && (jsx("h3", { className: "ss__recommendation-bundle__title" },
308
355
  jsx("span", null, title))),
356
+ description && (jsx("h4", { className: "ss__recommendation-bundle__description" },
357
+ jsx("span", null, description))),
309
358
  jsx("div", { className: classnames('ss__recommendation-bundle__wrapper', {
310
359
  'ss__recommendation-bundle__wrapper--seed-in-carousel': seedInCarousel,
311
360
  'ss__recommendation-bundle__wrapper--vertical': vertical,
312
361
  }) },
313
362
  carouselEnabled ? (jsx(Fragment, null,
314
- !seedInCarousel && !hideSeed && (jsx("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
363
+ !seedInCarousel && !hideSeed && seed && (jsx("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
315
364
  jsx(ResultTracker, { controller: controller, result: seed, track: { impression: false } },
316
365
  jsx(BundleSelector, { seedText: seedText, seed: true, onCheck: (e) => {
317
366
  e.stopPropagation();
@@ -323,54 +372,7 @@ export const RecommendationBundle = observer((properties) => {
323
372
  onProductSelect,
324
373
  })) : (jsx(Result, { ...subProps.result, controller: controller, result: seed })))))),
325
374
  jsx("div", { className: "ss__recommendation-bundle__wrapper__carousel" },
326
- 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 }, seedInCarousel
327
- ? resultsToRender
328
- .filter((result, idx) => (hideSeed && idx == 0 ? false : true))
329
- .map((result, idx) => {
330
- const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
331
- if (idx == 0 && !hideSeed) {
332
- return (jsx(ResultTracker, { controller: controller, result: result, track: { impression: false } },
333
- jsx(BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: (e) => {
334
- e.stopPropagation();
335
- onProductSelect(result);
336
- }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: true, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
337
- }
338
- else {
339
- return (jsx(ResultTracker, { controller: controller, result: result },
340
- jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: (e) => {
341
- e.stopPropagation();
342
- onProductSelect(result);
343
- }, 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 })))));
344
- }
345
- })
346
- : resultsToRender
347
- .filter((result, idx) => idx !== 0)
348
- .map((result, idx, results) => {
349
- const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
350
- return (jsx(ResultTracker, { controller: controller, result: result },
351
- jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: (e) => {
352
- e.stopPropagation();
353
- onProductSelect(result);
354
- }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == results.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: false, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
355
- }))))) : (resultsToRender
356
- .filter((result, idx) => (hideSeed && idx == 0 ? false : true))
357
- .map((result, idx) => {
358
- const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
359
- if (idx == 0 && !hideSeed) {
360
- return (jsx(ResultTracker, { controller: controller, result: result, track: { impression: false } },
361
- jsx(BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: (e) => {
362
- e.stopPropagation();
363
- onProductSelect(result);
364
- }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: true, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
365
- }
366
- else {
367
- return (jsx(ResultTracker, { controller: controller, result: result },
368
- jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: (e) => {
369
- e.stopPropagation();
370
- onProductSelect(result);
371
- }, 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 })))));
372
- }
373
- })),
375
+ 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, null, renderedResults)),
374
376
  ctaInline && (jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: (e) => addToCart(e), ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon }))),
375
377
  !ctaInline && (jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: (e) => addToCart(e), ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon })))) : (jsx(RecommendationProfileTracker, { controller: controller }, resultsToRender.map((result) => (jsx(ResultTracker, { controller: controller, result: result },
376
378
  jsx(Fragment, null))))))))) : (jsx(Fragment, null));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@searchspring/snap-preact-components",
3
- "version": "0.69.2",
3
+ "version": "0.70.0",
4
4
  "description": "Snap Preact Component Library",
5
5
  "author": "Searchspring",
6
6
  "license": "MIT",
@@ -29,7 +29,7 @@
29
29
  "dependencies": {
30
30
  "@cypress/react": "^8.0.0",
31
31
  "@emotion/react": "11.9.0",
32
- "@searchspring/snap-toolbox": "0.69.2",
32
+ "@searchspring/snap-toolbox": "0.70.0",
33
33
  "classnames": "^2.3.2",
34
34
  "cypress": "^13.7.1",
35
35
  "cypress-wait-until": "^1.7.2",
@@ -52,14 +52,14 @@
52
52
  "@babel/preset-env": "^7.21.4",
53
53
  "@babel/preset-react": "^7.18.6",
54
54
  "@babel/runtime": "^7.21.0",
55
- "@searchspring/snap-client": "0.69.2",
56
- "@searchspring/snap-controller": "0.69.2",
57
- "@searchspring/snap-event-manager": "0.69.2",
58
- "@searchspring/snap-logger": "0.69.2",
59
- "@searchspring/snap-profiler": "0.69.2",
60
- "@searchspring/snap-store-mobx": "0.69.2",
61
- "@searchspring/snap-tracker": "0.69.2",
62
- "@searchspring/snap-url-manager": "0.69.2",
55
+ "@searchspring/snap-client": "0.70.0",
56
+ "@searchspring/snap-controller": "0.70.0",
57
+ "@searchspring/snap-event-manager": "0.70.0",
58
+ "@searchspring/snap-logger": "0.70.0",
59
+ "@searchspring/snap-profiler": "0.70.0",
60
+ "@searchspring/snap-store-mobx": "0.70.0",
61
+ "@searchspring/snap-tracker": "0.70.0",
62
+ "@searchspring/snap-url-manager": "0.70.0",
63
63
  "@storybook/addon-actions": "6.4.22",
64
64
  "@storybook/addon-controls": "6.4.22",
65
65
  "@storybook/addon-docs": "6.4.22",
@@ -84,5 +84,5 @@
84
84
  "webpack-merge": "^5.8.0"
85
85
  },
86
86
  "sideEffects": false,
87
- "gitHead": "2fa310e6972a7dd805914fec6982357c91aae848"
87
+ "gitHead": "55a711810053fa78a54cf87f117add3bb0e86221"
88
88
  }