@wlloyalty/wll-react-sdk 1.0.103 → 1.0.105

package/dist/types/mocks/tiles/badgeTile.d.ts

@@ -23,6 +23,7 @@ export declare const createBadgeTileMock: (config?: BadgeTileMockConfig) => {
         defaultLocale: string;
         locale: string;
         createdAt: string;
+        lastEarnedAt: string;
         updatedAt: string;
         awardedDatePrefix: string;
         emptyBadgeMessage: string;

package/dist/types/types/tile.d.ts

@@ -106,6 +106,7 @@ export declare class BadgeTileConfig {
     emptyBadgeArtworkUrl?: string;
     awardedDatePrefix?: string;
     badgeNotEarnedMessage?: string;
+    lastEarnedAt?: string;
 }
 export type BadgeDetail = {
     name: string;

package/dist/types/utils/transforms.d.ts

@@ -5,3 +5,16 @@ import { Tile } from '../types/tile';
  * @returns Sorted array of tiles
  */
 export declare const sortByPriority: <T extends Pick<Tile, "priority">>(tiles: T[]) => T[];
+/**
+ * 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)
+ */
+export declare const transformLocale: (locale?: string | null) => string;
+/**
+ * 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
+ */
+export declare const handleLastEarnedDate: (date?: string, userLocale?: string) => string;

package/dist/web.js

@@ -18891,7 +18891,6 @@ var ProgressiveImage = function (_a) {
   var baseColor = theme.alphaDerivedPrimary[20];
   var desaturatedColor = desaturateColor(baseColor);
   var backgroundColor = isDesaturated ? desaturatedColor : baseColor;
-  // Create base animated image
   var baseImage = /*#__PURE__*/React.createElement(Animated$1.Image, __assign({}, props, {
     source: source,
     style: [styles$7.imageOverlay, __assign({
@@ -18900,7 +18899,9 @@ var ProgressiveImage = function (_a) {
       filter: isDesaturated ? 'grayscale(100%)' : undefined
     })],
     onLoad: onImageLoad,
-    accessibilityLabel: alt
+    accessibilityLabel: alt,
+    accessible: true,
+    role: "img"
   }));
   return /*#__PURE__*/React.createElement(View$2, {
     style: [styles$7.container, style, {
@@ -19008,10 +19009,35 @@ var Text = function (_a) {
       fontFamily: theme.fontFamily
     } : {}
   });
+  // Determine appropriate accessibility role based on variant
+  // This helps screen readers understand the semantic meaning
+  var accessibilityRole;
+  switch (variant) {
+    case 'title':
+      accessibilityRole = 'header';
+      break;
+    case 'caption':
+      accessibilityRole = 'text';
+      break;
+    case 'eyebrow':
+      accessibilityRole = 'text';
+      break;
+    case 'description':
+      accessibilityRole = 'paragraph';
+      break;
+    case 'label':
+      accessibilityRole = 'text';
+      break;
+    default:
+      accessibilityRole = 'text';
+  }
   var combinedStyles = [styles.base, variantStyle, styles.webOverrides, style];
   return /*#__PURE__*/React__namespace.createElement(Text$3, __assign({
     style: combinedStyles
-  }, props));
+  }, props, {
+    accessible: true,
+    role: accessibilityRole
+  }));
 };
 
 var MAX_WIDTH = 1080;
@@ -19197,24 +19223,38 @@ var BaseBanner = function (_a) {
     ctaText = _b.ctaText;
   var handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
   var hasCTA = Boolean(ctaText);
-  return /*#__PURE__*/React.createElement(BannerContext.Provider, {
-    value: tile
-  }, /*#__PURE__*/React.createElement(Pressable$1, {
-    testID: testID || 'banner-tile',
-    style: function (_a) {
-      var pressed = _a.pressed;
-      return [styles$6.container, style, {
-        backgroundColor: theme.surface,
-        borderRadius: theme.sizes.borderRadiusLg,
-        opacity: pressed ? 0.7 : 1
-      }];
-    },
-    onPress: hasCTA ? undefined : handlePress,
-    disabled: !ctaLink || hasCTA,
-    accessible: true,
-    role: hasCTA ? 'article' : 'button',
-    accessibilityLabel: accessibilityLabel || "".concat(title).concat(!hasCTA && ctaLink ? ' - Click to open' : '')
-  }, children));
+  var isInteractive = Boolean(ctaLink && !hasCTA);
+  var commonStyles = [styles$6.container, style, {
+    backgroundColor: theme.surface,
+    borderRadius: theme.sizes.borderRadiusLg
+  }];
+  if (isInteractive) {
+    return /*#__PURE__*/React.createElement(BannerContext.Provider, {
+      value: tile
+    }, /*#__PURE__*/React.createElement(Pressable$1, {
+      testID: testID || 'banner-tile',
+      style: function (_a) {
+        var pressed = _a.pressed;
+        return __spreadArray(__spreadArray([], commonStyles, true), [{
+          opacity: pressed ? 0.7 : 1
+        }], false);
+      },
+      onPress: handlePress,
+      accessible: true,
+      role: "button",
+      accessibilityLabel: accessibilityLabel || "".concat(title, " - Click to open")
+    }, children));
+  } else {
+    return /*#__PURE__*/React.createElement(BannerContext.Provider, {
+      value: tile
+    }, /*#__PURE__*/React.createElement(View$2, {
+      testID: testID || 'banner-tile',
+      style: commonStyles,
+      accessible: true,
+      role: "article",
+      accessibilityLabel: accessibilityLabel || title || 'Banner'
+    }, children));
+  }
 };
 var styles$6 = StyleSheet$1.create({
   container: {
@@ -19263,7 +19303,7 @@ var BaseTileBody = function (props) {
   return /*#__PURE__*/React.createElement(Text, __assign({
     variant: "body"
   }, props, {
-    accessibilityRole: "text",
+    role: "article",
     accessibilityLabel: body,
     numberOfLines: getNumberOfLines(),
     testID: "tile-body"
@@ -19387,7 +19427,7 @@ var BaseTileContent = function (_a) {
       justifyContent: 'center',
       height: !artworkUrl ? '100%' : undefined
     }],
-    accessibilityRole: "none"
+    role: "none"
   }, children);
 };
 
@@ -19415,7 +19455,7 @@ var BaseTileHeader = function (_a) {
   return /*#__PURE__*/React.createElement(View$2, {
     style: combinedStyle,
     testID: "tile-header",
-    accessibilityRole: "header"
+    role: "heading"
   }, children);
 };
 
@@ -19441,7 +19481,7 @@ var BaseTileMedia = function (props) {
     testID: "tile-media",
     style: [props.style, baseStyles.media, styles.media],
     alt: "Content image".concat(title ? " for ".concat(title) : ''),
-    accessibilityRole: "image"
+    role: "img"
   }));
 };
 
@@ -19467,7 +19507,7 @@ var BaseTileTitle = function () {
   if (isHalfSize && artworkUrl || !title) return null;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
     variant: "title",
-    accessibilityRole: "header",
+    role: "heading",
     accessibilityLabel: title,
     numberOfLines: 1,
     testID: "tile-title"
@@ -19496,10 +19536,7 @@ var useTileContext = function () {
   return context;
 };
 /**
- * BaseTileContainer component to handle layout and pressable behavior.
- *
- * @param {BaseTileRootProps} props - Component props
- * @returns {JSX.Element} The rendered BaseTileContainer
+ * BaseTileContainer component with dynamic accessibility role based on CTA link
  */
 var BaseTileContainer = function (_a) {
   var children = _a.children,
@@ -19518,29 +19555,40 @@ var BaseTileContainer = function (_a) {
     surface: '#ffffff'
   };
   var handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
+  var isInteractive = Boolean(ctaLink || tile.type === 'REWARD' || tile.type === 'REWARD_CATEGORY');
   var layout = {
     flexDirection: 'column',
     justifyContent: isHalfSize ? 'center' : 'flex-start',
     alignItems: 'stretch'
   };
   var dynamicStyles = useBaseTileStyles();
-  return /*#__PURE__*/React.createElement(Pressable$1, {
-    style: function (_a) {
-      var pressed = _a.pressed;
-      return [baseStyles.container, dynamicStyles.container, {
-        backgroundColor: theme.surface,
-        opacity: pressed ? 0.7 : 1
-      }, 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);
+  if (isInteractive) {
+    return /*#__PURE__*/React.createElement(Pressable$1, {
+      style: function (_a) {
+        var pressed = _a.pressed;
+        return [baseStyles.container, dynamicStyles.container, {
+          backgroundColor: theme.surface,
+          opacity: pressed ? 0.7 : 1
+        }, layout, style];
+      },
+      onPress: handlePress,
+      accessible: true,
+      role: "button",
+      accessibilityLabel: "".concat(title, " - Click to open"),
+      accessibilityState: {
+        disabled: !ctaLink
+      }
+    }, children);
+  } else {
+    return /*#__PURE__*/React.createElement(View$2, {
+      style: [baseStyles.container, dynamicStyles.container, {
+        backgroundColor: theme.surface
+      }, layout, style],
+      accessible: true,
+      role: "article",
+      accessibilityLabel: title || 'Tile'
+    }, children);
+  }
 };
 /**
  * BaseTileRoot component to provide context and render children.
@@ -19798,6 +19846,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.
@@ -19865,9 +19970,10 @@ var BadgeTileDateEarned = function () {
   var _a = tileContext.configuration,
     count = _a.count,
     awardedDatePrefix = _a.awardedDatePrefix,
-    createdAt = _a.createdAt,
+    lastEarnedAt = _a.lastEarnedAt,
     badgeNotEarnedMessage = _a.badgeNotEarnedMessage,
-    type = _a.type;
+    type = _a.type,
+    locale = _a.locale;
   // Don't show for Latest type with count=0
   if (type === exports.BadgeTileType.Latest && count === 0) {
     return null;
@@ -19881,8 +19987,8 @@ var BadgeTileDateEarned = function () {
     backgroundColor: backgroundColor
   }];
   var textColor = getReadableTextColor(backgroundColor);
-  var displayText = count === 0 ? badgeNotEarnedMessage : "".concat(awardedDatePrefix, " ").concat(new Date(createdAt).toLocaleDateString());
-  var accessibilityLabel = count === 0 ? 'Badge not yet earned' : "Badge earned on ".concat(new Date(createdAt).toLocaleDateString());
+  var displayText = count === 0 ? badgeNotEarnedMessage : "".concat(awardedDatePrefix, " ").concat(handleLastEarnedDate(lastEarnedAt, locale));
+  var accessibilityLabel = count === 0 ? 'Badge not yet earned' : "Badge earned on ".concat(handleLastEarnedDate(lastEarnedAt, locale));
   return /*#__PURE__*/React.createElement(View$2, {
     style: containerStyle,
     accessible: true,
@@ -20136,7 +20242,7 @@ var BannerTileDescription = function () {
   if (!description) return null;
   return /*#__PURE__*/React.createElement(Text, {
     style: styles.description,
-    accessibilityRole: "text",
+    role: "article",
     accessibilityLabel: description,
     testID: "banner-tile-description"
   }, description);
@@ -20161,7 +20267,7 @@ var BannerTileMedia = function (_a) {
   };
   return /*#__PURE__*/React.createElement(View$2, {
     style: [styles.mediaContainer, containerStyle],
-    accessibilityRole: "image",
+    role: "img",
     accessibilityLabel: "Banner image".concat(title ? " for ".concat(title) : ''),
     testID: "banner-tile-media"
   }, /*#__PURE__*/React.createElement(ProgressiveImage, {
@@ -20188,7 +20294,7 @@ var BannerTileTitle = function () {
     variant: "title",
     testID: "banner-tile-title",
     style: styles.title,
-    accessibilityRole: "header",
+    role: "heading",
     accessibilityLabel: title
   }, title);
 };
@@ -20315,7 +20421,7 @@ var ContentTileMedia = function (_a) {
   return /*#__PURE__*/React.createElement(View$2, {
     style: [styles.imageContainer, containerStyle],
     testID: "content-tile-media",
-    accessibilityRole: "image",
+    role: "img",
     accessibilityLabel: "Image for ".concat(title)
   }, /*#__PURE__*/React.createElement(ProgressiveImage, {
     source: {
@@ -20340,7 +20446,7 @@ var ContentTileSummary = function () {
   };
   return /*#__PURE__*/React.createElement(Text, {
     variant: "body",
-    accessibilityRole: "text",
+    role: "article",
     accessibilityLabel: body,
     numberOfLines: getNumberOfLines(),
     testID: "content-tile-summary"
@@ -20362,7 +20468,7 @@ var ContentTileTitle = function () {
   };
   return /*#__PURE__*/React.createElement(Text, {
     variant: "title",
-    accessibilityRole: "header",
+    role: "heading",
     accessibilityLabel: title,
     numberOfLines: 1,
     style: handleTitleWidth(),
@@ -20421,22 +20527,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";
@@ -21075,7 +21165,7 @@ var EmptyState = function (_a) {
   var message = _a.message;
   return /*#__PURE__*/React.createElement(View$2, {
     style: commonStyles.emptyContainer,
-    accessibilityRole: "text",
+    role: "article",
     accessibilityLabel: "Empty state: ".concat(message)
   }, /*#__PURE__*/React.createElement(Text$3, null, message));
 };
@@ -21153,7 +21243,8 @@ var Section = function (_a) {
     style: styles.section,
     accessible: true,
     accessibilityLabel: "Section: ".concat(sectionData.title || 'Untitled section'),
-    accessibilityHint: sectionData.description || undefined
+    accessibilityHint: sectionData.description || undefined,
+    role: "region"
   }, renderSectionContent()))) : null;
 };
 
@@ -21335,7 +21426,8 @@ var GroupSections = function () {
   var Container = IS_WEB ? View$2 : ScrollView$2;
   return /*#__PURE__*/React.createElement(Container, {
     accessible: true,
-    accessibilityLabel: "Group: ".concat(groupData.name || 'Unnamed group')
+    accessibilityLabel: "Group: ".concat(groupData.name || 'Unnamed group'),
+    role: "region"
   }, sortedSections.map(function (section) {
     return /*#__PURE__*/React.createElement(Section, {
       key: section.id,
@@ -21664,7 +21756,7 @@ var PointsTileFormattedPoints = function () {
   var fullPointsText = "".concat(pointsPrefix).concat(calculatedPoints, " ").concat(pointsSuffix).trim();
   return /*#__PURE__*/React.createElement(View$2, {
     testID: "points-tile-points",
-    accessibilityRole: "text",
+    role: "article",
     accessibilityLabel: "Points value: ".concat(fullPointsText)
   }, /*#__PURE__*/React.createElement(Row, {
     align: "center",
@@ -21700,7 +21792,7 @@ var PointsTileMedia = function (_a) {
   return /*#__PURE__*/React.createElement(View$2, {
     testID: "points-tile-media",
     style: styles.imageContainer,
-    accessibilityRole: "image",
+    role: "img",
     accessibilityLabel: "Points tile image for ".concat(title)
   }, /*#__PURE__*/React.createElement(Image$2, {
     source: {
@@ -21724,7 +21816,7 @@ var PointsTileTitle = function () {
   return /*#__PURE__*/React.createElement(Text, {
     variant: "eyebrow",
     testID: "points-tile-title",
-    accessibilityRole: "header",
+    role: "heading",
     accessibilityLabel: title
   }, title);
 };
@@ -21822,7 +21914,7 @@ var RewardCategoryHeader = function () {
       backgroundColor: theme.primary
     }],
     testID: "reward-category-header",
-    accessibilityRole: "header",
+    role: "heading",
     accessibilityLabel: "Reward category: ".concat(name)
   }, /*#__PURE__*/React.createElement(Text, {
     style: [styles.headerText, {
@@ -21854,7 +21946,7 @@ var RewardCategoryMedia = function () {
     },
     style: styles.background,
     alt: "Reward category image for ".concat(name),
-    accessibilityRole: "image"
+    role: "img"
   });
 };
 
@@ -21893,7 +21985,7 @@ var RewardTileChevron = function () {
     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",
+    role: "img",
     accessibilityLabel: "View reward details"
   });
 };
@@ -21977,7 +22069,7 @@ var RewardTileMedia = function (_a) {
   return /*#__PURE__*/React.createElement(View$2, {
     style: [styles.imageContainer, containerStyle],
     testID: "reward-tile-media",
-    accessibilityRole: "image",
+    role: "img",
     accessibilityLabel: "Reward image for ".concat(name)
   }, /*#__PURE__*/React.createElement(ProgressiveImage, {
     source: {
@@ -22013,7 +22105,7 @@ var RewardTilePoints = function () {
   var accessibilityLabel = getPointsLabel('Reward points:', calculatedPoints, pointsPrefix, pointsSuffix);
   return /*#__PURE__*/React.createElement(View$2, {
     testID: "reward-tile-points",
-    accessibilityRole: "text",
+    role: "article",
     accessibilityLabel: accessibilityLabel
   }, /*#__PURE__*/React.createElement(Row, {
     align: "center",
@@ -22044,7 +22136,7 @@ var RewardTileSummary = function () {
   if (!summary) return null;
   return /*#__PURE__*/React.createElement(Text, {
     variant: "body",
-    accessibilityRole: "text",
+    role: "article",
     accessibilityLabel: summary,
     testID: "reward-tile-summary"
   }, summary);
@@ -22070,7 +22162,7 @@ var RewardTileTitle = function () {
     variant: "title",
     ellipsizeMode: "tail",
     numberOfLines: 1,
-    accessibilityRole: "header",
+    role: "heading",
     accessibilityLabel: "Reward title: ".concat(name),
     testID: "reward-tile-title",
     style: handleTitleWidth()