@wlloyalty/wll-react-sdk 1.0.103 → 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;

package/dist/native.js

@@ -2649,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 })));
 };
 
 /**
@@ -2761,7 +2761,7 @@ var BaseTileContent = function (_a) {
                 justifyContent: 'center',
                 height: !artworkUrl ? '100%' : undefined,
             },
-        ], accessibilityRole: "none", children: children }));
+        ], role: "none", children: children }));
 };
 
 /**
@@ -2784,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 }));
 };
 
 /**
@@ -2801,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" })));
 };
 
 /**
@@ -2824,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" }))] }));
 };
 
 /**
@@ -2877,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.
@@ -3102,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.
@@ -3165,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;
@@ -3181,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 }) }));
 };
 
@@ -3366,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 }));
 };
 
 /**
@@ -3386,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) : '') }) }));
 };
 
 /**
@@ -3402,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 }));
 };
 
 /**
@@ -3508,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 () {
@@ -3525,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 () {
@@ -3541,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 }));
 };
 
 /**
@@ -3583,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";
@@ -4073,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).
@@ -4508,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] }) }));
 };
 
 /**
@@ -4525,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' }) }));
 };
 
 /**
@@ -4540,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 }));
 };
 
 /**
@@ -4619,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 }) }));
 };
 
 /**
@@ -4635,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" }));
 };
 
 /**
@@ -4668,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" }));
 };
 
 /**
@@ -4742,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) }) }));
 };
 
 /**
@@ -4760,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] }) }));
 };
 
 /**
@@ -4775,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 }));
 };
 
 /**
@@ -4796,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 }));
 };
 
 /**