@wlloyalty/wll-react-sdk 1.0.100 → 1.0.102

package/dist/types/components/molecules/Carousel/Carousel.stories.d.ts

@@ -3,10 +3,13 @@ declare const _default: Meta;
 export default _default;
 export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
     section?: import("../../../types/section").TSection;
+    autoRotateInterval?: number;
 }>;
 export declare const SingleItem: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
     section?: import("../../../types/section").TSection;
+    autoRotateInterval?: number;
 }>;
 export declare const ManyItems: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
     section?: import("../../../types/section").TSection;
+    autoRotateInterval?: number;
 }>;

package/dist/types/components/molecules/Carousel/index.d.ts

@@ -1,6 +1,7 @@
 import { TSection } from '../../../types/section';
 type CarouselProps = {
     section?: TSection;
+    autoRotateInterval?: number;
 };
-declare const Carousel: ({ section }: CarouselProps) => JSX.Element | null;
+declare const Carousel: ({ section, autoRotateInterval, }: CarouselProps) => JSX.Element | null;
 export default Carousel;

package/dist/types/context/WllSdkContext.d.ts

@@ -21,6 +21,7 @@ type WllSdkContextType = ThemeContextType & {
     getSectionByID: (id: string) => Promise<APIResponse<TSection>>;
     getTileByID: (id: string) => Promise<APIResponse<Tile>>;
     handleNavigation: (link: string, target: CTALinkTarget) => Promise<void>;
+    refreshGroup: (id: string) => Promise<APIResponse<TGroup>>;
 } & Readonly<{
     readonly config: SDKConfig;
 }>;

package/dist/web.js

@@ -8252,9 +8252,6 @@ var validateTheme = function (theme) {
 var createSafeColor = function (color) {
   try {
     var colorInstance = Color(color);
-    console.log('Original color:', color);
-    console.log('Color instance toString:', colorInstance.toString());
-    console.log('Color instance hex:', colorInstance.hex());
     return colorInstance;
   } catch (error) {
     console.error("Invalid color value: ".concat(color), error);
@@ -8521,6 +8518,13 @@ var WllSdkProvider = function (_a) {
   var getSectionByID = useGetSectionByID(config);
   var getTileByID = useGetTileByID(config);
   var handleNavigation = useNavigation(navigationConfig);
+  var refreshGroup = React.useCallback(function (id) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      return __generator(this, function (_a) {
+        return [2 /*return*/, getGroupByID(id)];
+      });
+    });
+  }, [getGroupByID]);
   var contextValue = React.useMemo(function () {
     return {
       theme: theme,
@@ -8529,9 +8533,10 @@ var WllSdkProvider = function (_a) {
       getSectionByID: getSectionByID,
       getTileByID: getTileByID,
       handleNavigation: handleNavigation,
+      refreshGroup: refreshGroup,
       config: config
     };
-  }, [theme, setTheme, getGroupByID, getSectionByID, getTileByID, handleNavigation, config]);
+  }, [theme, setTheme, getGroupByID, getSectionByID, getTileByID, handleNavigation, refreshGroup, config]);
   return /*#__PURE__*/React.createElement(WllSdkContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(ResponsiveProvider, null, children));
@@ -20553,22 +20558,24 @@ var carouselReducer = function (state, action) {
   }
 };
 var Carousel = function (_a) {
-  var section = _a.section;
+  var section = _a.section,
+    _b = _a.autoRotateInterval,
+    autoRotateInterval = _b === void 0 ? 5000 : _b;
   if (!section) return null;
   var WINDOW_WIDTH = useWindowDimensions().width;
   var containerRef = React.useRef(null);
   var styles = useCarouselStyles(BUTTON_SIZE);
   var animatedIndex = React.useRef(new Animated$1.Value(0)).current;
   var theme = useWllSdk().theme;
-  var _b = useResponsive(),
-    isDesktop = _b.isDesktop,
-    isTablet = _b.isTablet;
+  var _c = useResponsive(),
+    isDesktop = _c.isDesktop,
+    isTablet = _c.isTablet;
   var scrollViewRef = React.useRef(null);
-  var _c = React.useReducer(carouselReducer, __assign(__assign({}, initialState), {
+  var _d = React.useReducer(carouselReducer, __assign(__assign({}, initialState), {
       containerWidth: WINDOW_WIDTH
     })),
-    state = _c[0],
-    dispatch = _c[1];
+    state = _d[0],
+    dispatch = _d[1];
   var currentIndex = state.currentIndex,
     containerWidth = state.containerWidth;
   var sortedTiles = sortByPriority(section.tiles.filter(function (tile) {
@@ -20599,15 +20606,40 @@ var Carousel = function (_a) {
   };
   var handleNext = function () {
     var _a;
+    var nextIndex = Math.min(sortedTiles.length - 1, currentIndex + 1);
     dispatch({
       type: 'NEXT_SLIDE',
       maxIndex: sortedTiles.length - 1
     });
     (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-      x: (currentIndex + 1) * containerWidth,
+      x: nextIndex * containerWidth,
       animated: true
     });
   };
+  var rotateToNextSlide = React.useCallback(function () {
+    var _a;
+    if (currentIndex >= sortedTiles.length - 1) {
+      dispatch({
+        type: 'SET_CURRENT_INDEX',
+        payload: 0
+      });
+      (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+        x: 0,
+        animated: true
+      });
+    } else {
+      handleNext();
+    }
+  }, [currentIndex, containerWidth, sortedTiles.length]);
+  React.useEffect(function () {
+    if (sortedTiles.length <= 1) return;
+    var rotationTimer = setInterval(function () {
+      rotateToNextSlide();
+    }, autoRotateInterval);
+    return function () {
+      return clearInterval(rotationTimer);
+    };
+  }, [rotateToNextSlide, autoRotateInterval, sortedTiles.length]);
   var displayControls = sortedTiles.length > 1;
   var showPrevButton = displayControls && currentIndex > 0;
   var showNextButton = displayControls && currentIndex < sortedTiles.length - 1;
@@ -21090,8 +21122,15 @@ var useGroupData = function (id) {
     isLoading = _c[0],
     setIsLoading = _c[1];
   var fetchGroup = React.useCallback(function () {
-    return __awaiter(void 0, void 0, void 0, function () {
+    var args_1 = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+      args_1[_i] = arguments[_i];
+    }
+    return __awaiter(void 0, __spreadArray([], args_1, true), void 0, function (showLoading) {
       var response, err_1;
+      if (showLoading === void 0) {
+        showLoading = true;
+      }
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -21100,12 +21139,14 @@ var useGroupData = function (id) {
               setIsLoading(false);
               return [2 /*return*/];
             }
-            setIsLoading(true);
+            if (showLoading) {
+              setIsLoading(true);
+            }
             setError(null);
             _a.label = 1;
           case 1:
             _a.trys.push([1, 3, 4, 5]);
-            return [4 /*yield*/, sdk.getGroupByID(id)];
+            return [4 /*yield*/, sdk.refreshGroup(id)];
           case 2:
             response = _a.sent();
             if (response && response.status === 'success' && response.data) {
@@ -21120,7 +21161,9 @@ var useGroupData = function (id) {
             console.error('Error fetching group:', err_1);
             return [3 /*break*/, 5];
           case 4:
-            setIsLoading(false);
+            if (showLoading) {
+              setIsLoading(false);
+            }
             return [7 /*endfinally*/];
           case 5:
             return [2 /*return*/];
@@ -21128,13 +21171,17 @@ var useGroupData = function (id) {
       });
     });
   }, [id, sdk]);
+  var refreshGroup = React.useCallback(function () {
+    return fetchGroup(false);
+  }, [fetchGroup]);
   React.useEffect(function () {
-    fetchGroup();
+    fetchGroup(true);
   }, [fetchGroup]);
   return {
     groupData: groupData,
     isLoading: isLoading,
-    error: error
+    error: error,
+    refreshGroup: refreshGroup
   };
 };
 /**