@wlloyalty/wll-react-sdk 1.0.101 → 1.0.103

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';
@@ -660,6 +661,12 @@ type NavigationConfig = {
     baseUrl?: string;
 };
 
+/**
+ * Supported event types for the SDK event system
+ * @typedef {string} EventTypes
+ */
+type EventTypes = 'GROUP_DATA_CHANGED' | 'SECTION_DATA_CHANGED' | 'TILE_DATA_CHANGED' | string;
+
 type Fetcher = <T>(endpoint: string, options?: RequestInit) => Promise<APIResponse<T>>;
 type SDKConfig = {
     apiKey: string;
@@ -678,6 +685,8 @@ type WllSdkContextType = ThemeContextType & {
     getTileByID: (id: string) => Promise<APIResponse<Tile>>;
     handleNavigation: (link: string, target: CTALinkTarget) => Promise<void>;
     refreshGroup: (id: string) => Promise<APIResponse<TGroup>>;
+    notifyDataChange: (eventType: EventTypes, data?: any) => void;
+    subscribeToDataChange: (eventType: EventTypes, callback: (data?: any) => void) => () => void;
 } & Readonly<{
     readonly config: SDKConfig;
 }>;

package/dist/native.js

@@ -1595,6 +1595,66 @@ var useGetGroupByID = createResourceGetter('groups', true);
 var useGetSectionByID = createResourceGetter('sections');
 var useGetTileByID = createResourceGetter('tiles');
 
+/**
+ * A simple event emitter for handling SDK events
+ * Provides a pub-sub mechanism for components to communicate
+ */
+var EventEmitter = /** @class */ (function () {
+    function EventEmitter() {
+        /**
+         * Map of event types to arrays of callback functions
+         * @private
+         */
+        this.events = new Map();
+    }
+    /**
+     * Subscribe to an event
+     * @param {EventTypes} event - The event type to subscribe to
+     * @param {EventCallback} callback - The callback function to execute when the event is emitted
+     * @returns {Function} An unsubscribe function that removes this callback when called
+     */
+    EventEmitter.prototype.on = function (event, callback) {
+        var _this = this;
+        var _a;
+        if (!this.events.has(event)) {
+            this.events.set(event, []);
+        }
+        (_a = this.events.get(event)) === null || _a === void 0 ? void 0 : _a.push(callback);
+        return function () {
+            var callbacks = _this.events.get(event);
+            if (callbacks) {
+                var index = callbacks.indexOf(callback);
+                if (index !== -1) {
+                    callbacks.splice(index, 1);
+                }
+            }
+        };
+    };
+    /**
+     * Emit an event with optional data
+     * @param {EventTypes} event - The event type to emit
+     * @param {any} [data] - Optional data to pass to the event callbacks
+     */
+    EventEmitter.prototype.emit = function (event, data) {
+        var callbacks = this.events.get(event);
+        if (callbacks) {
+            callbacks.forEach(function (callback) { return callback(data); });
+        }
+    };
+    /**
+     * Remove all event listeners
+     * Use this method to clean up when the event emitter is no longer needed
+     */
+    EventEmitter.prototype.clear = function () {
+        this.events.clear();
+    };
+    return EventEmitter;
+}());
+/**
+ * Singleton instance of the EventEmitter for use throughout the SDK
+ */
+var sdkEventEmitter = new EventEmitter();
+
 var sizes = {
     borderRadiusSm: 15,
     borderRadiusLg: 20,
@@ -1961,6 +2021,12 @@ var WllSdkProvider = function (_a) {
             return [2 /*return*/, getGroupByID(id)];
         });
     }); }, [getGroupByID]);
+    var notifyDataChange = React.useCallback(function (eventType, data) {
+        sdkEventEmitter.emit(eventType, data);
+    }, []);
+    var subscribeToDataChange = React.useCallback(function (eventType, callback) {
+        return sdkEventEmitter.on(eventType, callback);
+    }, []);
     var contextValue = React.useMemo(function () { return ({
         theme: theme,
         setTheme: setTheme,
@@ -1969,6 +2035,8 @@ var WllSdkProvider = function (_a) {
         getTileByID: getTileByID,
         handleNavigation: handleNavigation,
         refreshGroup: refreshGroup,
+        notifyDataChange: notifyDataChange,
+        subscribeToDataChange: subscribeToDataChange,
         config: config,
     }); }, [
         theme,
@@ -1978,6 +2046,8 @@ var WllSdkProvider = function (_a) {
         getTileByID,
         handleNavigation,
         refreshGroup,
+        notifyDataChange,
+        subscribeToDataChange,
         config,
     ]);
     return (jsxRuntimeExports.jsx(WllSdkContext.Provider, { value: contextValue, children: jsxRuntimeExports.jsx(ResponsiveProvider, { children: children }) }));
@@ -3670,7 +3740,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;
@@ -3678,9 +3748,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) {
@@ -3703,12 +3773,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;
@@ -4050,6 +4142,14 @@ var useGroupContext = function () {
 /**
  * Custom hook to fetch and manage group data
  *
+ * This hook handles two distinct data fetching scenarios:
+ * 1. Initial fetch: Shows loading state while first loading data
+ * 2. Background refresh: Updates data silently without loading states
+ *
+ * The hook subscribes to GROUP_DATA_CHANGED events to refresh data
+ * when notified by the host application, ensuring UI remains responsive
+ * without showing loading indicators during refreshes.
+ *
  * @param {string} id - The ID of the group to fetch
  * @returns {Object} Object containing group data, loading state, and any error
  */
@@ -4058,60 +4158,86 @@ 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 () {
-        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*/];
-                }
-            });
+    var _d = React.useState(false), isInitialFetchDone = _d[0], setIsInitialFetchDone = _d[1];
+    var initialFetch = 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);
+                        setIsInitialFetchDone(true);
+                        return [2 /*return*/];
+                    }
+                    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:
+                    setIsLoading(false);
+                    setIsInitialFetchDone(true);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
         });
-    }, [id, sdk]);
+    }); }, [id, sdk]);
+    var silentRefresh = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var response, err_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!id || !sdk || !sdk.getGroupByID || !isInitialFetchDone) {
+                        return [2 /*return*/];
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, sdk.refreshGroup(id)];
+                case 2:
+                    response = _a.sent();
+                    if (response && response.status === 'success' && response.data) {
+                        setGroupData(response.data);
+                    }
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_2 = _a.sent();
+                    console.error('Error during silent refresh:', err_2);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [id, sdk, isInitialFetchDone]);
     var refreshGroup = React.useCallback(function () {
-        return fetchGroup(false);
-    }, [fetchGroup]);
+        return silentRefresh();
+    }, [silentRefresh]);
     React.useEffect(function () {
-        fetchGroup(true);
-    }, [fetchGroup]);
+        if (sdk) {
+            initialFetch();
+            var unsubscribeGroup_1 = sdk.subscribeToDataChange('GROUP_DATA_CHANGED', function () {
+                silentRefresh();
+            });
+            return function () {
+                unsubscribeGroup_1();
+            };
+        }
+    }, [initialFetch, id, sdk, silentRefresh]);
     return { groupData: groupData, isLoading: isLoading, error: error, refreshGroup: refreshGroup };
 };
 /**
@@ -4169,7 +4295,7 @@ var Group = function (_a) {
     if (error || !groupData) {
         return jsxRuntimeExports.jsx(GroupEmptyState, { message: error || 'No group data available' });
     }
-    return (jsxRuntimeExports.jsx(GroupContext.Provider, { value: { groupData: groupData }, children: jsxRuntimeExports.jsx(reactNative.View, { "data-testid": "group-container", children: jsxRuntimeExports.jsx(GroupSections, {}) }) }));
+    return (jsxRuntimeExports.jsx(GroupContext.Provider, { value: { groupData: groupData }, children: jsxRuntimeExports.jsx(reactNative.View, { testID: "group-container", children: jsxRuntimeExports.jsx(GroupSections, {}) }) }));
 };
 
 /**