@wlloyalty/wll-react-sdk 1.0.100 → 1.0.102

package/dist/index.d.ts

@@ -526,8 +526,9 @@ type TSection = {
 
 type CarouselProps = {
     section?: TSection;
+    autoRotateInterval?: number;
 };
-declare const Carousel: ({ section }: CarouselProps) => JSX.Element | null;
+declare const Carousel: ({ section, autoRotateInterval, }: CarouselProps) => JSX.Element | null;
 
 type CarouselNavButtonProps = {
     direction: 'left' | 'right';
@@ -677,6 +678,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/native.js

@@ -1699,9 +1699,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) {
@@ -1959,6 +1956,11 @@ 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,
         setTheme: setTheme,
@@ -1966,6 +1968,7 @@ var WllSdkProvider = function (_a) {
         getSectionByID: getSectionByID,
         getTileByID: getTileByID,
         handleNavigation: handleNavigation,
+        refreshGroup: refreshGroup,
         config: config,
     }); }, [
         theme,
@@ -1974,6 +1977,7 @@ var WllSdkProvider = function (_a) {
         getSectionByID,
         getTileByID,
         handleNavigation,
+        refreshGroup,
         config,
     ]);
     return (jsxRuntimeExports.jsx(WllSdkContext.Provider, { value: contextValue, children: jsxRuntimeExports.jsx(ResponsiveProvider, { children: children }) }));
@@ -3666,7 +3670,7 @@ 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 = reactNative.useWindowDimensions().width;
@@ -3674,9 +3678,9 @@ var Carousel = function (_a) {
     var styles = useCarouselStyles(BUTTON_SIZE);
     var animatedIndex = React.useRef(new reactNative.Animated.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), { containerWidth: WINDOW_WIDTH })), state = _c[0], dispatch = _c[1];
+    var _d = React.useReducer(carouselReducer, __assign(__assign({}, initialState), { containerWidth: WINDOW_WIDTH })), state = _d[0], dispatch = _d[1];
     var currentIndex = state.currentIndex, containerWidth = state.containerWidth;
     var sortedTiles = sortByPriority(section.tiles.filter(function (tile) { return tile.type === exports.TileType.Banner; }));
     var handleScroll = React.useCallback(function (event) {
@@ -3699,12 +3703,34 @@ 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;
@@ -4054,47 +4080,61 @@ var useGroupData = function (id) {
     var _a = React.useState(null), groupData = _a[0], setGroupData = _a[1];
     var _b = React.useState(null), error = _b[0], setError = _b[1];
     var _c = React.useState(true), isLoading = _c[0], setIsLoading = _c[1];
-    var fetchGroup = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var response, err_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!id || !sdk || !sdk.getGroupByID) {
-                        setError('Unable to fetch group data: invalid configuration');
-                        setIsLoading(false);
-                        return [2 /*return*/];
-                    }
-                    setIsLoading(true);
-                    setError(null);
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, 4, 5]);
-                    return [4 /*yield*/, sdk.getGroupByID(id)];
-                case 2:
-                    response = _a.sent();
-                    if (response && response.status === 'success' && response.data) {
-                        setGroupData(response.data);
-                    }
-                    else {
-                        setError((response && response.error) || 'Failed to fetch group data.');
-                    }
-                    return [3 /*break*/, 5];
-                case 3:
-                    err_1 = _a.sent();
-                    setError('Failed to fetch group data. Please try again later.');
-                    console.error('Error fetching group:', err_1);
-                    return [3 /*break*/, 5];
-                case 4:
-                    setIsLoading(false);
-                    return [7 /*endfinally*/];
-                case 5: return [2 /*return*/];
-            }
+    var fetchGroup = React.useCallback(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:
+                        if (!id || !sdk || !sdk.getGroupByID) {
+                            setError('Unable to fetch group data: invalid configuration');
+                            setIsLoading(false);
+                            return [2 /*return*/];
+                        }
+                        if (showLoading) {
+                            setIsLoading(true);
+                        }
+                        setError(null);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, 4, 5]);
+                        return [4 /*yield*/, sdk.refreshGroup(id)];
+                    case 2:
+                        response = _a.sent();
+                        if (response && response.status === 'success' && response.data) {
+                            setGroupData(response.data);
+                        }
+                        else {
+                            setError((response && response.error) || 'Failed to fetch group data.');
+                        }
+                        return [3 /*break*/, 5];
+                    case 3:
+                        err_1 = _a.sent();
+                        setError('Failed to fetch group data. Please try again later.');
+                        console.error('Error fetching group:', err_1);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        if (showLoading) {
+                            setIsLoading(false);
+                        }
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
         });
-    }); }, [id, sdk]);
+    }, [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 };
+    return { groupData: groupData, isLoading: isLoading, error: error, refreshGroup: refreshGroup };
 };
 /**
  * Component to display an empty state with a message