@wlloyalty/wll-react-sdk 1.0.107 → 1.0.109

package/dist/web.js

@@ -19038,22 +19038,22 @@ var Text = function (_a) {
   var accessibilityRole;
   switch (variant) {
     case 'title':
-      accessibilityRole = 'header';
+      accessibilityRole = IS_MOBILE ? 'heading' : 'header';
       break;
     case 'caption':
-      accessibilityRole = 'text';
+      accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
       break;
     case 'eyebrow':
-      accessibilityRole = 'text';
+      accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
       break;
     case 'description':
-      accessibilityRole = 'paragraph';
+      accessibilityRole = IS_MOBILE ? 'article' : 'paragraph';
       break;
     case 'label':
-      accessibilityRole = 'text';
+      accessibilityRole = IS_MOBILE ? 'option' : 'text';
       break;
     default:
-      accessibilityRole = 'text';
+      accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
   }
   var combinedStyles = [styles.base, variantStyle, styles.webOverrides, style];
   return /*#__PURE__*/React__namespace.createElement(Text$3, __assign({
@@ -19091,6 +19091,7 @@ exports.TileType = void 0;
   TileType["Badge"] = "BADGE";
   TileType["RewardCategory"] = "REWARD_CATEGORY";
   TileType["Tier"] = "TIER";
+  TileType["Roundup"] = "ROUND_UP_BALANCE";
 })(exports.TileType || (exports.TileType = {}));
 exports.TileHeight = void 0;
 (function (TileHeight) {
@@ -19105,6 +19106,10 @@ var PointsTileConfig = /** @class */function () {
   function PointsTileConfig() {}
   return PointsTileConfig;
 }();
+var RoundupTileConfig = /** @class */function () {
+  function RoundupTileConfig() {}
+  return RoundupTileConfig;
+}();
 var ContentTileConfig = /** @class */function () {
   function ContentTileConfig() {}
   return ContentTileConfig;
@@ -19680,11 +19685,51 @@ var styles$5 = StyleSheet$1.create({
 
 var GRID_GAP = 16;
 
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * 
+ */
+
+function useWindowDimensions() {
+  var _useState = React.useState(() => Dimensions.get('window')),
+    dims = _useState[0],
+    setDims = _useState[1];
+  React.useEffect(() => {
+    function handleChange(_ref) {
+      var window = _ref.window;
+      if (window != null) {
+        setDims(window);
+      }
+    }
+    Dimensions.addEventListener('change', handleChange);
+    // We might have missed an update between calling `get` in render and
+    // `addEventListener` in this handler, so we set it here. If there was
+    // no change, React will filter out this update as a no-op.
+    setDims(Dimensions.get('window'));
+    return () => {
+      Dimensions.removeEventListener('change', handleChange);
+    };
+  }, []);
+  return dims;
+}
+
 /* istanbul ignore file */
 var SkeletonTile = function (_a) {
   var style = _a.style;
   var theme = useWllSdk().theme;
   var animatedValue = React__namespace.useRef(new Animated$1.Value(0)).current;
+  var width = useWindowDimensions().width;
+  var tileWidth = 1000 / 4;
+  var tileHeight = tileWidth;
+  if (IS_MOBILE) {
+    tileWidth = width / 2 - theme.sizes.lg * 2;
+    tileHeight = tileWidth;
+  }
   React__namespace.useEffect(function () {
     var pulseAnimation = Animated$1.loop(Animated$1.sequence([Animated$1.timing(animatedValue, {
       toValue: 1,
@@ -19708,15 +19753,16 @@ var SkeletonTile = function (_a) {
     style: [styles$4.container, {
       opacity: opacity,
       backgroundColor: theme.alphaDerivedText[20],
-      borderRadius: theme.sizes.borderRadiusLg
+      borderRadius: theme.sizes.borderRadiusLg,
+      width: tileWidth,
+      height: tileHeight
     }, style]
   });
 };
 var styles$4 = StyleSheet$1.create({
   container: {
     aspectRatio: 1,
-    overflow: 'hidden',
-    width: 1000 / 4
+    overflow: 'hidden'
   }
 });
 
@@ -20556,39 +20602,6 @@ exports.SectionType = void 0;
   SectionType["Banner"] = "BANNER";
 })(exports.SectionType || (exports.SectionType = {}));
 
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * 
- */
-
-function useWindowDimensions() {
-  var _useState = React.useState(() => Dimensions.get('window')),
-    dims = _useState[0],
-    setDims = _useState[1];
-  React.useEffect(() => {
-    function handleChange(_ref) {
-      var window = _ref.window;
-      if (window != null) {
-        setDims(window);
-      }
-    }
-    Dimensions.addEventListener('change', handleChange);
-    // We might have missed an update between calling `get` in render and
-    // `addEventListener` in this handler, so we set it here. If there was
-    // no change, React will filter out this update as a no-op.
-    setDims(Dimensions.get('window'));
-    return () => {
-      Dimensions.removeEventListener('change', handleChange);
-    };
-  }, []);
-  return dims;
-}
-
 var useSectionHeaderStyles = function () {
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
@@ -21214,7 +21227,7 @@ var Section = function (_a) {
     if (isLoading) {
       return /*#__PURE__*/React.createElement(Skeleton, {
         "aria-label": "Loading section content",
-        numberOfSquares: 4
+        numberOfSquares: IS_WEB ? 4 : 2
       });
     }
     if (error || !sectionData) {
@@ -21478,12 +21491,18 @@ var Group = function (_a) {
     groupData = _b.groupData,
     isLoading = _b.isLoading,
     error = _b.error;
+  var theme = useWllSdk().theme;
   if (isLoading) {
     return /*#__PURE__*/React.createElement(View$2, {
-      style: commonStyles.emptyContainer,
+      style: {
+        flex: 1,
+        padding: theme.sizes.lg
+      },
       accessible: true,
       accessibilityLabel: "Loading group data"
-    }, /*#__PURE__*/React.createElement(Skeleton, null));
+    }, /*#__PURE__*/React.createElement(Skeleton, {
+      numberOfSquares: IS_WEB ? 4 : 2
+    }));
   }
   if (error || !groupData) {
     return /*#__PURE__*/React.createElement(GroupEmptyState, {
@@ -21725,7 +21744,14 @@ var usePointsTileStyles = function (isFullSize) {
       justifyContent: 'space-between'
     },
     contentContainer: {
-      width: isFullSize ? '100%' : 'auto'
+      width: '100%'
+    },
+    contentColumn: {
+      flexGrow: 1
+    },
+    mediaColumn: {
+      flexDirection: 'row',
+      alignItems: 'center'
     },
     suffix: {
       fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet),
@@ -21736,6 +21762,9 @@ var usePointsTileStyles = function (isFullSize) {
       alignItems: 'center',
       justifyContent: 'center'
     },
+    chevronContainer: {
+      marginLeft: !isFullSize ? useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet) : 0
+    },
     imageContainer: {
       width: isFullSize ? '100%' : isDesktop ? 57 : 40,
       height: isFullSize ? '50%' : isDesktop ? 57 : 40,
@@ -21842,6 +21871,30 @@ var PointsTileTitle = function () {
   }, title);
 };
 
+/**
+ * Renders a chevron icon for a Roundup Tile.
+ *
+ * @returns JSX.Element
+ */
+var PointsTileChevron = function () {
+  var _a, _b;
+  var tileContext = useTileContext();
+  var sdk = useWllSdk();
+  var styles = usePointsTileStyles();
+  if (!isContextValid(tileContext)) return null;
+  var ctaLink = tileContext.configuration.ctaLink;
+  if (!ctaLink) return null;
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: styles.chevronContainer
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ChevronRight",
+    size: 16,
+    color: ((_b = (_a = sdk.theme) === null || _a === void 0 ? void 0 : _a.derivedSurfaceText) === null || _b === void 0 ? void 0 : _b[20]) || '#000000',
+    role: "img",
+    accessibilityLabel: "View balance"
+  }));
+};
+
 /**
  * The PointsTile component renders a tile with media, title, and formatted points.
  *
@@ -21861,11 +21914,15 @@ var PointsTileRoot = function (_a) {
     isFullSize: true
   }), /*#__PURE__*/React.createElement(View$2, {
     style: styles.container
+  }, /*#__PURE__*/React.createElement(Row, {
+    style: styles.contentContainer
+  }, /*#__PURE__*/React.createElement(Column, {
+    style: styles.contentColumn
+  }, /*#__PURE__*/React.createElement(PointsTile.Title, null), /*#__PURE__*/React.createElement(PointsTile.Points, null)), /*#__PURE__*/React.createElement(Column, {
+    style: styles.mediaColumn
   }, !isFullSize && /*#__PURE__*/React.createElement(PointsTile.Media, {
     isFullSize: false
-  }), /*#__PURE__*/React.createElement(Column, {
-    style: styles.contentContainer
-  }, /*#__PURE__*/React.createElement(PointsTile.Title, null), /*#__PURE__*/React.createElement(PointsTile.Points, null))));
+  }), /*#__PURE__*/React.createElement(PointsTile.Chevron, null)))));
 };
 /**
  * The PointsTile component with subcomponents attached.
@@ -21873,7 +21930,8 @@ var PointsTileRoot = function (_a) {
 var PointsTile = Object.assign(PointsTileRoot, {
   Title: PointsTileTitle,
   Points: PointsTileFormattedPoints,
-  Media: PointsTileMedia
+  Media: PointsTileMedia,
+  Chevron: PointsTileChevron
 });
 var PointsTile$1 = withTileFetching(PointsTile);
 
@@ -22424,8 +22482,217 @@ TierTile.Full = TierTileFull;
 TierTile.Half = TierTileHalf;
 TierTile.Empty = TierTileEmpty;
 
+/**
+ * Custom hook that returns the styles for the RoundupTile component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the RoundupTile component
+ */
+var useRoundupTileStyles = function (isFullSize) {
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
+  var theme = useWllSdk().theme;
+  return StyleSheet$1.create({
+    container: {
+      paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
+      width: '100%',
+      flexDirection: isFullSize ? 'row' : 'row-reverse',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    },
+    contentContainer: {
+      width: '100%',
+      marginTop: isFullSize ? useResponsiveValue(theme.sizes.xxl, theme.sizes.md, isDesktop, isTablet) : 0
+    },
+    contentColumn: {
+      flexGrow: 1
+    },
+    mediaColumn: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    suffix: {
+      fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet),
+      color: theme.primary
+    },
+    pointsWithSuffix: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    chevronContainer: {
+      marginLeft: !isFullSize ? useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet) : 0
+    },
+    imageContainer: {
+      width: isFullSize ? '100%' : isDesktop ? 57 : 40,
+      height: isFullSize ? '50%' : isDesktop ? 57 : 40,
+      marginBottom: isFullSize ? useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet) : 0,
+      backgroundColor: isFullSize ? theme.alphaDerivedPrimary[20] : theme.surface,
+      justifyContent: 'center',
+      alignItems: 'center',
+      overflow: 'hidden'
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      resizeMode: 'contain'
+    }
+  });
+};
+
+/**
+ * Renders formatted points value for a Roundup Tile.
+ *
+ * @returns JSX.Element or null if points are undefined or zero
+ */
+var RoundupTileFormattedPoints = function () {
+  var styles = useRoundupTileStyles();
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var _a = tileContext.configuration,
+    _b = _a.amountPrefix,
+    amountPrefix = _b === void 0 ? '' : _b,
+    _c = _a.amountSuffix,
+    amountSuffix = _c === void 0 ? '' : _c,
+    _d = _a.amount,
+    amount = _d === void 0 ? 0 : _d;
+  if (amount === undefined) return null;
+  var fullPointsText = "".concat(amountPrefix).concat(amount, " ").concat(amountSuffix).trim();
+  return /*#__PURE__*/React.createElement(View$2, {
+    testID: "roundup-tile-amount",
+    role: "article",
+    accessibilityLabel: "Amount: ".concat(fullPointsText)
+  }, /*#__PURE__*/React.createElement(Row, {
+    align: "center",
+    justify: "start"
+  }, amountPrefix ? (/*#__PURE__*/React.createElement(Text, {
+    variant: "caption",
+    testID: "roundup-tile-prefix"
+  }, amountPrefix)) : null, /*#__PURE__*/React.createElement(Text, {
+    variant: "caption",
+    testID: "roundup-tile-value"
+  }, amount), amountSuffix ? (/*#__PURE__*/React.createElement(Text, {
+    variant: "caption",
+    style: styles.suffix,
+    testID: "roundup-tile-suffix"
+  }, amountSuffix)) : null));
+};
+
+/**
+ * Renders the media of a Points Tile.
+ *
+ * @returns JSX.Element or null if media is not present
+ */
+var RoundupTileMedia = function (_a) {
+  var isFullSize = _a.isFullSize;
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var _b = tileContext.configuration,
+    artworkUrl = _b.artworkUrl,
+    _c = _b.title,
+    title = _c === void 0 ? 'Balance' : _c;
+  var styles = useRoundupTileStyles(isFullSize);
+  if (!artworkUrl) return null;
+  return /*#__PURE__*/React.createElement(View$2, {
+    testID: "roundup-tile-media",
+    style: styles.imageContainer,
+    role: "img",
+    accessibilityLabel: "Roundup tile image for ".concat(title)
+  }, /*#__PURE__*/React.createElement(Image$2, {
+    source: {
+      uri: artworkUrl
+    },
+    style: styles.image,
+    resizeMode: isFullSize ? 'cover' : 'contain'
+  }));
+};
+
+/**
+ * Renders the title of a Roundup Tile.
+ *
+ * @returns JSX.Element or null if no title is present
+ */
+var RoundupTileTitle = function () {
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var title = tileContext.configuration.title;
+  if (!title) return null;
+  return /*#__PURE__*/React.createElement(Text, {
+    variant: "eyebrow",
+    testID: "roundup-tile-title",
+    role: "heading",
+    accessibilityLabel: title
+  }, title);
+};
+
+/**
+ * Renders a chevron icon for a Roundup Tile.
+ *
+ * @returns JSX.Element
+ */
+var RoundupTileChevron = function () {
+  var _a, _b;
+  var tileContext = useTileContext();
+  var sdk = useWllSdk();
+  var styles = useRoundupTileStyles();
+  if (!isContextValid(tileContext)) return null;
+  var ctaLink = tileContext.configuration.ctaLink;
+  if (!ctaLink) return null;
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: styles.chevronContainer
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ChevronRight",
+    size: 16,
+    color: ((_b = (_a = sdk.theme) === null || _a === void 0 ? void 0 : _a.derivedSurfaceText) === null || _b === void 0 ? void 0 : _b[20]) || '#000000',
+    role: "img",
+    accessibilityLabel: "View balance"
+  }));
+};
+
+/**
+ * The PointsTile component renders a tile with media, title, and formatted points.
+ *
+ * @param props - Component props
+ * @returns JSX.Element or null if tile is inactive or missing required props
+ */
+var RoundupTileRoot = function (_a) {
+  var tile = _a.tile;
+  if (!tile || !tile.active || !tile.configuration) return null;
+  var config = tile.configuration;
+  if (!config) return null;
+  var isFullSize = useTileSize(tile).isFullSize;
+  var styles = useRoundupTileStyles(isFullSize);
+  return /*#__PURE__*/React.createElement(BaseTile, {
+    tile: tile
+  }, isFullSize && /*#__PURE__*/React.createElement(RoundupTile.Media, {
+    isFullSize: true
+  }), /*#__PURE__*/React.createElement(View$2, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(Row, {
+    style: styles.contentContainer
+  }, /*#__PURE__*/React.createElement(Column, {
+    style: styles.contentColumn
+  }, /*#__PURE__*/React.createElement(RoundupTile.Title, null), /*#__PURE__*/React.createElement(RoundupTile.Points, null)), /*#__PURE__*/React.createElement(Column, {
+    style: styles.mediaColumn
+  }, !isFullSize && /*#__PURE__*/React.createElement(RoundupTile.Media, {
+    isFullSize: false
+  }), /*#__PURE__*/React.createElement(RoundupTile.Chevron, null)))));
+};
+/**
+ * The PointsTile component with subcomponents attached.
+ */
+var RoundupTile = Object.assign(RoundupTileRoot, {
+  Title: RoundupTileTitle,
+  Points: RoundupTileFormattedPoints,
+  Media: RoundupTileMedia,
+  Chevron: RoundupTileChevron
+});
+var RoundupTile$1 = withTileFetching(RoundupTile);
+
 var _a;
-var TILE_COMPONENTS = (_a = {}, _a[exports.TileType.Content] = ContentTile$1, _a[exports.TileType.Badge] = BadgeTile$1, _a[exports.TileType.Tier] = TierTile, _a[exports.TileType.Points] = PointsTile$1, _a[exports.TileType.Reward] = RewardTile$1, _a[exports.TileType.RewardCategory] = RewardCategoryTile$1, _a[exports.TileType.Banner] = BannerTile$1, _a);
+var TILE_COMPONENTS = (_a = {}, _a[exports.TileType.Content] = ContentTile$1, _a[exports.TileType.Badge] = BadgeTile$1, _a[exports.TileType.Tier] = TierTile, _a[exports.TileType.Points] = PointsTile$1, _a[exports.TileType.Reward] = RewardTile$1, _a[exports.TileType.RewardCategory] = RewardCategoryTile$1, _a[exports.TileType.Banner] = BannerTile$1, _a[exports.TileType.Roundup] = RoundupTile$1, _a);
 /**
  * TileContainer component to render a list of tiles with proper layout and spacing.
  */
@@ -22502,6 +22769,8 @@ exports.RewardCategoryTile = RewardCategoryTile$1;
 exports.RewardCategoryTileConfig = RewardCategoryTileConfig;
 exports.RewardTile = RewardTile$1;
 exports.RewardTileConfig = RewardTileConfig;
+exports.RoundupTile = RoundupTile$1;
+exports.RoundupTileConfig = RoundupTileConfig;
 exports.Row = Row;
 exports.Section = Section;
 exports.SectionHeader = SectionHeader;