@wlloyalty/wll-react-sdk 1.0.102 → 1.0.104

package/dist/index.d.ts

@@ -196,6 +196,7 @@ declare class BadgeTileConfig {
     emptyBadgeArtworkUrl?: string;
     awardedDatePrefix?: string;
     badgeNotEarnedMessage?: string;
+    lastEarnedAt?: string;
 }
 type BadgeDetail = {
     name: string;
@@ -661,6 +662,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;
@@ -679,6 +686,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 }) }));
@@ -2579,7 +2649,7 @@ var BaseTileBody = function (props) {
             return undefined;
         return isDesktop ? 3 : isTablet ? 4 : 3;
     };
-    return (jsxRuntimeExports.jsx(Text, __assign({ variant: "body" }, props, { accessibilityRole: "text", accessibilityLabel: body, numberOfLines: getNumberOfLines(), testID: "tile-body", children: body })));
+    return (jsxRuntimeExports.jsx(Text, __assign({ variant: "body" }, props, { role: "article", accessibilityLabel: body, numberOfLines: getNumberOfLines(), testID: "tile-body", children: body })));
 };
 
 /**
@@ -2691,7 +2761,7 @@ var BaseTileContent = function (_a) {
                 justifyContent: 'center',
                 height: !artworkUrl ? '100%' : undefined,
             },
-        ], accessibilityRole: "none", children: children }));
+        ], role: "none", children: children }));
 };
 
 /**
@@ -2714,7 +2784,7 @@ var BaseTileHeader = function (_a) {
         return null;
     var dynamicStyles = useBaseTileStyles();
     var combinedStyle = __assign(__assign(__assign({}, dynamicStyles.header), { marginTop: sizeInfo.isHalfSize ? 0 : dynamicStyles.header.marginTop }), (sizeInfo.isHalfSize ? { alignItems: 'center' } : {}));
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: combinedStyle, testID: "tile-header", accessibilityRole: "header", children: children }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: combinedStyle, testID: "tile-header", role: "heading", children: children }));
 };
 
 /**
@@ -2731,7 +2801,7 @@ var BaseTileMedia = function (props) {
     var styles = useBaseTileStyles();
     if (!artworkUrl)
         return null;
-    return (jsxRuntimeExports.jsx(ProgressiveImage, __assign({}, props, { source: { uri: artworkUrl }, testID: "tile-media", style: [props.style, baseStyles.media, styles.media], alt: "Content image".concat(title ? " for ".concat(title) : ''), accessibilityRole: "image" })));
+    return (jsxRuntimeExports.jsx(ProgressiveImage, __assign({}, props, { source: { uri: artworkUrl }, testID: "tile-media", style: [props.style, baseStyles.media, styles.media], alt: "Content image".concat(title ? " for ".concat(title) : ''), role: "img" })));
 };
 
 /**
@@ -2754,7 +2824,7 @@ var BaseTileTitle = function () {
     // Don't show title for half tiles with image
     if ((isHalfSize && artworkUrl) || !title)
         return null;
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Text, { variant: "title", accessibilityRole: "header", accessibilityLabel: title, numberOfLines: 1, testID: "tile-title", children: title }), ctaLink && (jsxRuntimeExports.jsx(Icon, { name: "ChevronRight", color: (_b = (_a = sdk.theme) === null || _a === void 0 ? void 0 : _a.derivedSurfaceText) === null || _b === void 0 ? void 0 : _b[20], accessibilityLabel: "View details" }))] }));
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Text, { variant: "title", role: "heading", accessibilityLabel: title, numberOfLines: 1, testID: "tile-title", children: title }), ctaLink && (jsxRuntimeExports.jsx(Icon, { name: "ChevronRight", color: (_b = (_a = sdk.theme) === null || _a === void 0 ? void 0 : _a.derivedSurfaceText) === null || _b === void 0 ? void 0 : _b[20], accessibilityLabel: "View details" }))] }));
 };
 
 /**
@@ -2807,7 +2877,7 @@ var BaseTileContainer = function (_a) {
                 layout,
                 style,
             ];
-        }, onPress: handlePress, disabled: tile.type !== 'REWARD' && tile.type !== 'REWARD_CATEGORY' && !ctaLink, accessible: true, accessibilityRole: "button", accessibilityLabel: "".concat(title).concat(ctaLink ? ' - Click to open' : ''), accessibilityState: { disabled: !ctaLink }, children: children }));
+        }, onPress: handlePress, disabled: tile.type !== 'REWARD' && tile.type !== 'REWARD_CATEGORY' && !ctaLink, accessible: true, role: "button", accessibilityLabel: "".concat(title).concat(ctaLink ? ' - Click to open' : ''), accessibilityState: { disabled: !ctaLink }, children: children }));
 };
 /**
  * BaseTileRoot component to provide context and render children.
@@ -3032,6 +3102,63 @@ function withTileFetching(WrappedComponent) {
     };
 }
 
+/**
+ * Sorts tiles by priority (higher priority first) and maintains original order for equal priorities
+ * @param tiles Array of tiles to sort
+ * @returns Sorted array of tiles
+ */
+var sortByPriority = function (tiles) {
+    return __spreadArray([], tiles, true).sort(function (a, b) {
+        // Sort by priority (higher priority first)
+        if (a.priority !== b.priority) {
+            return b.priority - a.priority;
+        }
+        // If priorities are equal, maintain original order
+        return tiles.indexOf(a) - tiles.indexOf(b);
+    });
+};
+/**
+ * Transforms locale to a locale that is supported by the browser
+ * @param locale Two-letter locale code to transform (en, fr, etc.)
+ * @returns Full locale string (e.g., en-GB, fr-FR)
+ */
+var transformLocale = function (locale) {
+    var localeMapping = {
+        en: 'en-GB',
+        fr: 'fr-FR',
+        es: 'es-ES',
+        de: 'de-DE',
+        it: 'it-IT',
+        pt: 'pt-PT',
+        us: 'en-US',
+    };
+    var languageCode = (locale !== null && locale !== void 0 ? locale : 'en').toLowerCase();
+    return localeMapping[languageCode] || 'en-GB';
+};
+/**
+ * Formats a date string to a localized date string based on user locale
+ * @param date Date string to format
+ * @param userLocale User's locale (defaults to 'en')
+ * @returns Formatted date string or fallback message
+ */
+var handleLastEarnedDate = function (date, userLocale) {
+    if (userLocale === void 0) { userLocale = 'en'; }
+    if (!date)
+        return 'Date not available';
+    try {
+        var formattedLocale = transformLocale(userLocale);
+        var dateObj = new Date(date);
+        if (isNaN(dateObj.getTime())) {
+            return 'Invalid Date';
+        }
+        return dateObj.toLocaleDateString(formattedLocale);
+    }
+    catch (error) {
+        console.error('Error formatting date:', error);
+        return 'Invalid Date';
+    }
+};
+
 /**
  * Custom hook that returns the styles for the BadgeTile component.
  * Applies responsive styling based on the current device.
@@ -3095,7 +3222,7 @@ var BadgeTileDateEarned = function () {
     var theme = useWllSdk().theme;
     if (!isContextValid(tileContext))
         return null;
-    var _a = tileContext.configuration, count = _a.count, awardedDatePrefix = _a.awardedDatePrefix, createdAt = _a.createdAt, badgeNotEarnedMessage = _a.badgeNotEarnedMessage, type = _a.type;
+    var _a = tileContext.configuration, count = _a.count, awardedDatePrefix = _a.awardedDatePrefix, lastEarnedAt = _a.lastEarnedAt, badgeNotEarnedMessage = _a.badgeNotEarnedMessage, type = _a.type, locale = _a.locale;
     // Don't show for Latest type with count=0
     if (type === exports.BadgeTileType.Latest && count === 0) {
         return null;
@@ -3111,10 +3238,10 @@ var BadgeTileDateEarned = function () {
     var textColor = getReadableTextColor(backgroundColor);
     var displayText = count === 0
         ? badgeNotEarnedMessage
-        : "".concat(awardedDatePrefix, " ").concat(new Date(createdAt).toLocaleDateString());
+        : "".concat(awardedDatePrefix, " ").concat(handleLastEarnedDate(lastEarnedAt, locale));
     var accessibilityLabel = count === 0
         ? 'Badge not yet earned'
-        : "Badge earned on ".concat(new Date(createdAt).toLocaleDateString());
+        : "Badge earned on ".concat(handleLastEarnedDate(lastEarnedAt, locale));
     return (jsxRuntimeExports.jsx(reactNative.View, { style: containerStyle, accessible: true, accessibilityLabel: accessibilityLabel, testID: "badge-tile-date-earned", children: jsxRuntimeExports.jsx(Text, { variant: "label", style: [styles.dateEarnedText, { color: textColor }], numberOfLines: 1, ellipsizeMode: "tail", accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: displayText }) }));
 };
 
@@ -3296,7 +3423,7 @@ var BannerTileDescription = function () {
     var description = bannerContext.configuration.description;
     if (!description)
         return null;
-    return (jsxRuntimeExports.jsx(Text, { style: styles.description, accessibilityRole: "text", accessibilityLabel: description, testID: "banner-tile-description", children: description }));
+    return (jsxRuntimeExports.jsx(Text, { style: styles.description, role: "article", accessibilityLabel: description, testID: "banner-tile-description", children: description }));
 };
 
 /**
@@ -3316,7 +3443,7 @@ var BannerTileMedia = function (_a) {
     var containerStyle = {
         width: isArtworkOnly ? '100%' : '30%',
     };
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.mediaContainer, containerStyle], accessibilityRole: "image", accessibilityLabel: "Banner image".concat(title ? " for ".concat(title) : ''), testID: "banner-tile-media", children: jsxRuntimeExports.jsx(ProgressiveImage, { source: { uri: artworkUrl }, style: styles.media, alt: "Banner image".concat(title ? " for ".concat(title) : '') }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.mediaContainer, containerStyle], role: "img", accessibilityLabel: "Banner image".concat(title ? " for ".concat(title) : ''), testID: "banner-tile-media", children: jsxRuntimeExports.jsx(ProgressiveImage, { source: { uri: artworkUrl }, style: styles.media, alt: "Banner image".concat(title ? " for ".concat(title) : '') }) }));
 };
 
 /**
@@ -3332,7 +3459,7 @@ var BannerTileTitle = function () {
     var title = bannerContext.configuration.title;
     if (!title)
         return null;
-    return (jsxRuntimeExports.jsx(Text, { variant: "title", testID: "banner-tile-title", style: styles.title, accessibilityRole: "header", accessibilityLabel: title, children: title }));
+    return (jsxRuntimeExports.jsx(Text, { variant: "title", testID: "banner-tile-title", style: styles.title, role: "heading", accessibilityLabel: title, children: title }));
 };
 
 /**
@@ -3438,7 +3565,7 @@ var ContentTileMedia = function (_a) {
     var containerStyle = {
         flexBasis: isArtworkOnly ? '100%' : '50%',
     };
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.imageContainer, containerStyle], testID: "content-tile-media", accessibilityRole: "image", accessibilityLabel: "Image for ".concat(title), children: jsxRuntimeExports.jsx(ProgressiveImage, { source: { uri: artworkUrl }, style: styles.image, alt: "Image for ".concat(title) }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.imageContainer, containerStyle], testID: "content-tile-media", role: "img", accessibilityLabel: "Image for ".concat(title), children: jsxRuntimeExports.jsx(ProgressiveImage, { source: { uri: artworkUrl }, style: styles.image, alt: "Image for ".concat(title) }) }));
 };
 
 var ContentTileSummary = function () {
@@ -3455,7 +3582,7 @@ var ContentTileSummary = function () {
     var getNumberOfLines = function () {
         return isFullSize ? 3 : isHalfSize ? 4 : 3;
     };
-    return (jsxRuntimeExports.jsx(Text, { variant: "body", accessibilityRole: "text", accessibilityLabel: body, numberOfLines: getNumberOfLines(), testID: "content-tile-summary", children: body }));
+    return (jsxRuntimeExports.jsx(Text, { variant: "body", role: "article", accessibilityLabel: body, numberOfLines: getNumberOfLines(), testID: "content-tile-summary", children: body }));
 };
 
 var ContentTileTitle = function () {
@@ -3471,7 +3598,7 @@ var ContentTileTitle = function () {
             return styles.titleWithLink;
         }
     };
-    return (jsxRuntimeExports.jsx(Text, { variant: "title", accessibilityRole: "header", accessibilityLabel: title, numberOfLines: 1, style: handleTitleWidth(), testID: "content-tile-title", children: title }));
+    return (jsxRuntimeExports.jsx(Text, { variant: "title", role: "heading", accessibilityLabel: title, numberOfLines: 1, style: handleTitleWidth(), testID: "content-tile-title", children: title }));
 };
 
 /**
@@ -3513,22 +3640,6 @@ var ContentTile = Object.assign(ContentTileRoot, {
 });
 var ContentTile$1 = withTileFetching(ContentTile);
 
-/**
- * Sorts tiles by priority (higher priority first) and maintains original order for equal priorities
- * @param tiles Array of tiles to sort
- * @returns Sorted array of tiles
- */
-var sortByPriority = function (tiles) {
-    return __spreadArray([], tiles, true).sort(function (a, b) {
-        // Sort by priority (higher priority first)
-        if (a.priority !== b.priority) {
-            return b.priority - a.priority;
-        }
-        // If priorities are equal, maintain original order
-        return tiles.indexOf(a) - tiles.indexOf(b);
-    });
-};
-
 exports.SectionType = void 0;
 (function (SectionType) {
     SectionType["Grid"] = "GRID";
@@ -4003,7 +4114,7 @@ var useSectionData = function (section, sectionId) {
  */
 var EmptyState = function (_a) {
     var message = _a.message;
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: commonStyles.emptyContainer, accessibilityRole: "text", accessibilityLabel: "Empty state: ".concat(message), children: jsxRuntimeExports.jsx(reactNative.Text, { children: message }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: commonStyles.emptyContainer, role: "article", accessibilityLabel: "Empty state: ".concat(message), children: jsxRuntimeExports.jsx(reactNative.Text, { children: message }) }));
 };
 /**
  * The Section component renders a section based on its type (e.g., Banner, Grid).
@@ -4072,6 +4183,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
  */
@@ -4080,60 +4199,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 };
 };
 /**
@@ -4191,7 +4336,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, {}) }) }));
 };
 
 /**
@@ -4404,7 +4549,7 @@ var PointsTileFormattedPoints = function () {
         return null;
     var calculatedPoints = applyMultiplier(points, pointsMultiplier);
     var fullPointsText = "".concat(pointsPrefix).concat(calculatedPoints, " ").concat(pointsSuffix).trim();
-    return (jsxRuntimeExports.jsx(reactNative.View, { testID: "points-tile-points", accessibilityRole: "text", accessibilityLabel: "Points value: ".concat(fullPointsText), children: jsxRuntimeExports.jsxs(Row, { align: "center", justify: "start", children: [pointsPrefix ? (jsxRuntimeExports.jsx(Text, { variant: "caption", testID: "points-tile-prefix", children: pointsPrefix })) : null, jsxRuntimeExports.jsx(Text, { variant: "caption", testID: "points-tile-value", children: calculatedPoints }), pointsSuffix ? (jsxRuntimeExports.jsx(Text, { variant: "caption", style: styles.suffix, testID: "points-tile-suffix", children: pointsSuffix })) : null] }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { testID: "points-tile-points", role: "article", accessibilityLabel: "Points value: ".concat(fullPointsText), children: jsxRuntimeExports.jsxs(Row, { align: "center", justify: "start", children: [pointsPrefix ? (jsxRuntimeExports.jsx(Text, { variant: "caption", testID: "points-tile-prefix", children: pointsPrefix })) : null, jsxRuntimeExports.jsx(Text, { variant: "caption", testID: "points-tile-value", children: calculatedPoints }), pointsSuffix ? (jsxRuntimeExports.jsx(Text, { variant: "caption", style: styles.suffix, testID: "points-tile-suffix", children: pointsSuffix })) : null] }) }));
 };
 
 /**
@@ -4421,7 +4566,7 @@ var PointsTileMedia = function (_a) {
     var styles = usePointsTileStyles(isFullSize);
     if (!artworkUrl)
         return null;
-    return (jsxRuntimeExports.jsx(reactNative.View, { testID: "points-tile-media", style: styles.imageContainer, accessibilityRole: "image", accessibilityLabel: "Points tile image for ".concat(title), children: jsxRuntimeExports.jsx(reactNative.Image, { source: { uri: artworkUrl }, style: styles.image, resizeMode: isFullSize ? 'cover' : 'contain' }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { testID: "points-tile-media", style: styles.imageContainer, role: "img", accessibilityLabel: "Points tile image for ".concat(title), children: jsxRuntimeExports.jsx(reactNative.Image, { source: { uri: artworkUrl }, style: styles.image, resizeMode: isFullSize ? 'cover' : 'contain' }) }));
 };
 
 /**
@@ -4436,7 +4581,7 @@ var PointsTileTitle = function () {
     var title = tileContext.configuration.title;
     if (!title)
         return null;
-    return (jsxRuntimeExports.jsx(Text, { variant: "eyebrow", testID: "points-tile-title", accessibilityRole: "header", accessibilityLabel: title, children: title }));
+    return (jsxRuntimeExports.jsx(Text, { variant: "eyebrow", testID: "points-tile-title", role: "heading", accessibilityLabel: title, children: title }));
 };
 
 /**
@@ -4515,7 +4660,7 @@ var RewardCategoryHeader = function () {
     var _a = tileContext.configuration, _b = _a.showName, showName = _b === void 0 ? true : _b, _c = _a.name, name = _c === void 0 ? '' : _c;
     if (!showName || !name)
         return null;
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.header, { backgroundColor: theme.primary }], testID: "reward-category-header", accessibilityRole: "header", accessibilityLabel: "Reward category: ".concat(name), children: jsxRuntimeExports.jsx(Text, { style: [styles.headerText, { color: theme.primaryText }], ellipsizeMode: "tail", numberOfLines: 1, children: name }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.header, { backgroundColor: theme.primary }], testID: "reward-category-header", role: "heading", accessibilityLabel: "Reward category: ".concat(name), children: jsxRuntimeExports.jsx(Text, { style: [styles.headerText, { color: theme.primaryText }], ellipsizeMode: "tail", numberOfLines: 1, children: name }) }));
 };
 
 /**
@@ -4531,7 +4676,7 @@ var RewardCategoryMedia = function () {
     var _a = tileContext.configuration, artworkUrl = _a.artworkUrl, _b = _a.name, name = _b === void 0 ? 'Reward' : _b;
     if (!artworkUrl)
         return null;
-    return (jsxRuntimeExports.jsx(ProgressiveImage, { testID: "reward-category-media", source: { uri: artworkUrl }, style: styles.background, alt: "Reward category image for ".concat(name), accessibilityRole: "image" }));
+    return (jsxRuntimeExports.jsx(ProgressiveImage, { testID: "reward-category-media", source: { uri: artworkUrl }, style: styles.background, alt: "Reward category image for ".concat(name), role: "img" }));
 };
 
 /**
@@ -4564,7 +4709,7 @@ var RewardCategoryTile$1 = withTileFetching(RewardCategoryTile);
 var RewardTileChevron = function () {
     var _a;
     var theme = useWllSdk().theme;
-    return (jsxRuntimeExports.jsx(Icon, { name: "ChevronRight", size: IS_MOBILE ? 16 : undefined, color: ((_a = theme === null || theme === void 0 ? void 0 : theme.derivedSurfaceText) === null || _a === void 0 ? void 0 : _a[20]) || '#000000', accessibilityRole: "image", accessibilityLabel: "View reward details" }));
+    return (jsxRuntimeExports.jsx(Icon, { name: "ChevronRight", size: IS_MOBILE ? 16 : undefined, color: ((_a = theme === null || theme === void 0 ? void 0 : theme.derivedSurfaceText) === null || _a === void 0 ? void 0 : _a[20]) || '#000000', role: "img", accessibilityLabel: "View reward details" }));
 };
 
 /**
@@ -4638,7 +4783,7 @@ var RewardTileMedia = function (_a) {
     var containerStyle = {
         flexBasis: isArtworkOnly ? '100%' : '50%',
     };
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.imageContainer, containerStyle], testID: "reward-tile-media", accessibilityRole: "image", accessibilityLabel: "Reward image for ".concat(name), children: jsxRuntimeExports.jsx(ProgressiveImage, { source: { uri: artworkUrl }, style: styles.image, alt: "Reward image for ".concat(name) }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.imageContainer, containerStyle], testID: "reward-tile-media", role: "img", accessibilityLabel: "Reward image for ".concat(name), children: jsxRuntimeExports.jsx(ProgressiveImage, { source: { uri: artworkUrl }, style: styles.image, alt: "Reward image for ".concat(name) }) }));
 };
 
 /**
@@ -4656,7 +4801,7 @@ var RewardTilePoints = function () {
         return null;
     var calculatedPoints = applyMultiplier(price, pointsMultiplier);
     var accessibilityLabel = getPointsLabel('Reward points:', calculatedPoints, pointsPrefix, pointsSuffix);
-    return (jsxRuntimeExports.jsx(reactNative.View, { testID: "reward-tile-points", accessibilityRole: "text", accessibilityLabel: accessibilityLabel, children: jsxRuntimeExports.jsxs(Row, { align: "center", justify: "start", style: { marginTop: 8 }, children: [pointsPrefix ? jsxRuntimeExports.jsx(Text, { variant: "caption", children: pointsPrefix }) : null, jsxRuntimeExports.jsx(Text, { variant: "caption", testID: "reward-tile-points-value", children: calculatedPoints }), pointsSuffix ? (jsxRuntimeExports.jsx(Text, { variant: "caption", style: styles.suffix, children: pointsSuffix })) : null] }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { testID: "reward-tile-points", role: "article", accessibilityLabel: accessibilityLabel, children: jsxRuntimeExports.jsxs(Row, { align: "center", justify: "start", style: { marginTop: 8 }, children: [pointsPrefix ? jsxRuntimeExports.jsx(Text, { variant: "caption", children: pointsPrefix }) : null, jsxRuntimeExports.jsx(Text, { variant: "caption", testID: "reward-tile-points-value", children: calculatedPoints }), pointsSuffix ? (jsxRuntimeExports.jsx(Text, { variant: "caption", style: styles.suffix, children: pointsSuffix })) : null] }) }));
 };
 
 /**
@@ -4671,7 +4816,7 @@ var RewardTileSummary = function () {
     var summary = tileContext.configuration.summary;
     if (!summary)
         return null;
-    return (jsxRuntimeExports.jsx(Text, { variant: "body", accessibilityRole: "text", accessibilityLabel: summary, testID: "reward-tile-summary", children: summary }));
+    return (jsxRuntimeExports.jsx(Text, { variant: "body", role: "article", accessibilityLabel: summary, testID: "reward-tile-summary", children: summary }));
 };
 
 /**
@@ -4692,7 +4837,7 @@ var RewardTileTitle = function () {
             return styles.titleWithLink;
         }
     };
-    return (jsxRuntimeExports.jsx(Text, { variant: "title", ellipsizeMode: "tail", numberOfLines: 1, accessibilityRole: "header", accessibilityLabel: "Reward title: ".concat(name), testID: "reward-tile-title", style: handleTitleWidth(), children: name }));
+    return (jsxRuntimeExports.jsx(Text, { variant: "title", ellipsizeMode: "tail", numberOfLines: 1, role: "heading", accessibilityLabel: "Reward title: ".concat(name), testID: "reward-tile-title", style: handleTitleWidth(), children: name }));
 };
 
 /**