@wlloyalty/wll-react-sdk 1.0.107 → 1.0.109

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -108,7 +108,8 @@ declare enum TileType {
108
108
  Reward = "REWARD",
109
109
  Badge = "BADGE",
110
110
  RewardCategory = "REWARD_CATEGORY",
111
- Tier = "TIER"
111
+ Tier = "TIER",
112
+ Roundup = "ROUND_UP_BALANCE"
112
113
  }
113
114
  declare enum TileHeight {
114
115
  Half = "HALF",
@@ -130,6 +131,17 @@ declare class PointsTileConfig {
130
131
  pointsSuffix?: string | null;
131
132
  artworkUrl?: string | null;
132
133
  points?: number;
134
+ ctaLink?: string | null;
135
+ ctaLinkTarget?: CTALinkTarget;
136
+ }
137
+ declare class RoundupTileConfig {
138
+ title?: string | null;
139
+ amountPrefix?: string | null;
140
+ amountSuffix?: string | null;
141
+ artworkUrl?: string | null;
142
+ amount?: number;
143
+ ctaLink?: string | null;
144
+ ctaLinkTarget?: CTALinkTarget;
133
145
  }
134
146
  declare class ContentTileConfig {
135
147
  title?: string | null;
@@ -565,17 +577,17 @@ type WithTileFetchingProps = {
565
577
  type BadgeTileProps = {
566
578
  tile: Tile;
567
579
  };
568
- declare const _default$5: (props: Omit<BadgeTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
580
+ declare const _default$6: (props: Omit<BadgeTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
569
581
 
570
582
  type BannerTileProps = {
571
583
  tile: Tile;
572
584
  };
573
- declare const _default$4: (props: Omit<BannerTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
585
+ declare const _default$5: (props: Omit<BannerTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
574
586
 
575
587
  type ContentTileProps = {
576
588
  tile: Tile;
577
589
  };
578
- declare const _default$3: (props: Omit<ContentTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
590
+ declare const _default$4: (props: Omit<ContentTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
579
591
 
580
592
  type TGroup = {
581
593
  name: string;
@@ -606,17 +618,17 @@ declare const Group: ({ id }: GroupProps) => JSX.Element | null;
606
618
  type PointsTileProps = {
607
619
  tile: Tile;
608
620
  };
609
- declare const _default$2: (props: Omit<PointsTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
621
+ declare const _default$3: (props: Omit<PointsTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
610
622
 
611
623
  type RewardCategoryTileProps = {
612
624
  tile: Tile;
613
625
  };
614
- declare const _default$1: (props: Omit<RewardCategoryTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
626
+ declare const _default$2: (props: Omit<RewardCategoryTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
615
627
 
616
628
  type RewardTileProps = {
617
629
  tile: Tile;
618
630
  };
619
- declare const _default: (props: Omit<RewardTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
631
+ declare const _default$1: (props: Omit<RewardTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
620
632
 
621
633
  type SectionProps = {
622
634
  section?: TSection;
@@ -645,6 +657,11 @@ declare const TierTileHalf: React$1.FC<TierTileProps>;
645
657
  declare const TierTileEmpty: React$1.FC<TierTileProps>;
646
658
  declare const TierTile: TierTileComponent;
647
659
 
660
+ type RoundupTileProps = {
661
+ tile: Tile;
662
+ };
663
+ declare const _default: (props: Omit<RoundupTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
664
+
648
665
  type NavigationType = 'external' | 'internal' | 'modal';
649
666
  type NavigationHandlerParams = {
650
667
  target: string;
@@ -699,4 +716,4 @@ type WllSdkProviderProps = WithChildren & {
699
716
  declare const WllSdkProvider: ({ children, theme: providedTheme, config, navigationConfig, }: WllSdkProviderProps) => JSX.Element;
700
717
  declare const useWllSdk: () => WllSdkContextType;
701
718
 
702
- export { type APIResponse, type Align, type Availability, type Badge, type BadgeDetail, _default$5 as BadgeTile, BadgeTileConfig, BadgeTileType, _default$4 as BannerTile, BannerTileConfig, BaseBanner, type BaseThemeObject, BaseTile, Button, CTALinkTarget, Carousel, CarouselNavButton, Column, _default$3 as ContentTile, ContentTileConfig, type DerivedColors, type DerivedProperties, type DesaturationType, type FlexDirection, FullFlex, Grid, Group, Icon, type ImagePropsNoSource, Indicator, type Justify, Layout, type LayoutProps$1 as LayoutProps, LoadingIndicator, type NavigationConfig, type NavigationType, type PercentageKey, _default$2 as PointsTile, PointsTileConfig, type ProgessType, ProgressBar, ProgressIndicator, ProgressType, ProgressiveImage, Reward, type RewardCategory, _default$1 as RewardCategoryTile, RewardCategoryTileConfig, _default as RewardTile, RewardTileConfig, Row, type SDKConfig, Section, SectionHeader, SectionType, type Size, Skeleton, Spacer, type TGroup, type TSection, Text, type ThemeContextType, type ThemeObject, type ThemeProviderProps, TierTileConfig, TierTileType, TierTile as TierTileUpdated, type TierType, type Tile, type TileConfig, TileContainer, TileHeight, type TileSizeInfo, TileType, type Variant, WllSdkProvider, alignMap, justifyMap, useWllSdk };
719
+ export { type APIResponse, type Align, type Availability, type Badge, type BadgeDetail, _default$6 as BadgeTile, BadgeTileConfig, BadgeTileType, _default$5 as BannerTile, BannerTileConfig, BaseBanner, type BaseThemeObject, BaseTile, Button, CTALinkTarget, Carousel, CarouselNavButton, Column, _default$4 as ContentTile, ContentTileConfig, type DerivedColors, type DerivedProperties, type DesaturationType, type FlexDirection, FullFlex, Grid, Group, Icon, type ImagePropsNoSource, Indicator, type Justify, Layout, type LayoutProps$1 as LayoutProps, LoadingIndicator, type NavigationConfig, type NavigationType, type PercentageKey, _default$3 as PointsTile, PointsTileConfig, type ProgessType, ProgressBar, ProgressIndicator, ProgressType, ProgressiveImage, Reward, type RewardCategory, _default$2 as RewardCategoryTile, RewardCategoryTileConfig, _default$1 as RewardTile, RewardTileConfig, _default as RoundupTile, RoundupTileConfig, Row, type SDKConfig, Section, SectionHeader, SectionType, type Size, Skeleton, Spacer, type TGroup, type TSection, Text, type ThemeContextType, type ThemeObject, type ThemeProviderProps, TierTileConfig, TierTileType, TierTile as TierTileUpdated, type TierType, type Tile, type TileConfig, TileContainer, TileHeight, type TileSizeInfo, TileType, type Variant, WllSdkProvider, alignMap, justifyMap, useWllSdk };
package/dist/native.js CHANGED
@@ -2427,22 +2427,22 @@ var Text = function (_a) {
2427
2427
  var accessibilityRole;
2428
2428
  switch (variant) {
2429
2429
  case 'title':
2430
- accessibilityRole = 'header';
2430
+ accessibilityRole = IS_MOBILE ? 'heading' : 'header';
2431
2431
  break;
2432
2432
  case 'caption':
2433
- accessibilityRole = 'text';
2433
+ accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
2434
2434
  break;
2435
2435
  case 'eyebrow':
2436
- accessibilityRole = 'text';
2436
+ accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
2437
2437
  break;
2438
2438
  case 'description':
2439
- accessibilityRole = 'paragraph';
2439
+ accessibilityRole = IS_MOBILE ? 'article' : 'paragraph';
2440
2440
  break;
2441
2441
  case 'label':
2442
- accessibilityRole = 'text';
2442
+ accessibilityRole = IS_MOBILE ? 'option' : 'text';
2443
2443
  break;
2444
2444
  default:
2445
- accessibilityRole = 'text';
2445
+ accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
2446
2446
  }
2447
2447
  var combinedStyles = [
2448
2448
  styles.base,
@@ -2480,6 +2480,7 @@ exports.TileType = void 0;
2480
2480
  TileType["Badge"] = "BADGE";
2481
2481
  TileType["RewardCategory"] = "REWARD_CATEGORY";
2482
2482
  TileType["Tier"] = "TIER";
2483
+ TileType["Roundup"] = "ROUND_UP_BALANCE";
2483
2484
  })(exports.TileType || (exports.TileType = {}));
2484
2485
  exports.TileHeight = void 0;
2485
2486
  (function (TileHeight) {
@@ -2496,6 +2497,11 @@ var PointsTileConfig = /** @class */ (function () {
2496
2497
  }
2497
2498
  return PointsTileConfig;
2498
2499
  }());
2500
+ var RoundupTileConfig = /** @class */ (function () {
2501
+ function RoundupTileConfig() {
2502
+ }
2503
+ return RoundupTileConfig;
2504
+ }());
2499
2505
  var ContentTileConfig = /** @class */ (function () {
2500
2506
  function ContentTileConfig() {
2501
2507
  }
@@ -2995,6 +3001,13 @@ var SkeletonTile = function (_a) {
2995
3001
  var style = _a.style;
2996
3002
  var theme = useWllSdk().theme;
2997
3003
  var animatedValue = React__namespace.useRef(new reactNative.Animated.Value(0)).current;
3004
+ var width = reactNative.useWindowDimensions().width;
3005
+ var tileWidth = 1000 / 4;
3006
+ var tileHeight = tileWidth;
3007
+ if (IS_MOBILE) {
3008
+ tileWidth = width / 2 - theme.sizes.lg * 2;
3009
+ tileHeight = tileWidth;
3010
+ }
2998
3011
  React__namespace.useEffect(function () {
2999
3012
  var pulseAnimation = reactNative.Animated.loop(reactNative.Animated.sequence([
3000
3013
  reactNative.Animated.timing(animatedValue, {
@@ -3021,6 +3034,8 @@ var SkeletonTile = function (_a) {
3021
3034
  opacity: opacity,
3022
3035
  backgroundColor: theme.alphaDerivedText[20],
3023
3036
  borderRadius: theme.sizes.borderRadiusLg,
3037
+ width: tileWidth,
3038
+ height: tileHeight,
3024
3039
  },
3025
3040
  style,
3026
3041
  ] }));
@@ -3029,7 +3044,6 @@ var styles$4 = reactNative.StyleSheet.create({
3029
3044
  container: {
3030
3045
  aspectRatio: 1,
3031
3046
  overflow: 'hidden',
3032
- width: 1000 / 4,
3033
3047
  },
3034
3048
  });
3035
3049
 
@@ -4180,7 +4194,7 @@ var Section = function (_a) {
4180
4194
  }
4181
4195
  var renderSectionContent = function () {
4182
4196
  if (isLoading) {
4183
- return (jsxRuntimeExports.jsx(Skeleton, { "aria-label": "Loading section content", numberOfSquares: 4 }));
4197
+ return (jsxRuntimeExports.jsx(Skeleton, { "aria-label": "Loading section content", numberOfSquares: IS_WEB ? 4 : 2 }));
4184
4198
  }
4185
4199
  if (error || !sectionData) {
4186
4200
  return jsxRuntimeExports.jsx(EmptyState, { message: error || 'No section data available.' });
@@ -4376,8 +4390,12 @@ var Group = function (_a) {
4376
4390
  return null;
4377
4391
  }
4378
4392
  var _b = useGroupData(id), groupData = _b.groupData, isLoading = _b.isLoading, error = _b.error;
4393
+ var theme = useWllSdk().theme;
4379
4394
  if (isLoading) {
4380
- return (jsxRuntimeExports.jsx(reactNative.View, { style: commonStyles.emptyContainer, accessible: true, accessibilityLabel: "Loading group data", children: jsxRuntimeExports.jsx(Skeleton, {}) }));
4395
+ return (jsxRuntimeExports.jsx(reactNative.View, { style: {
4396
+ flex: 1,
4397
+ padding: theme.sizes.lg,
4398
+ }, accessible: true, accessibilityLabel: "Loading group data", children: jsxRuntimeExports.jsx(Skeleton, { numberOfSquares: IS_WEB ? 4 : 2 }) }));
4381
4399
  }
4382
4400
  if (error || !groupData) {
4383
4401
  return jsxRuntimeExports.jsx(GroupEmptyState, { message: error || 'No group data available' });
@@ -4547,7 +4565,14 @@ var usePointsTileStyles = function (isFullSize) {
4547
4565
  justifyContent: 'space-between',
4548
4566
  },
4549
4567
  contentContainer: {
4550
- width: isFullSize ? '100%' : 'auto',
4568
+ width: '100%',
4569
+ },
4570
+ contentColumn: {
4571
+ flexGrow: 1,
4572
+ },
4573
+ mediaColumn: {
4574
+ flexDirection: 'row',
4575
+ alignItems: 'center',
4551
4576
  },
4552
4577
  suffix: {
4553
4578
  fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet),
@@ -4558,6 +4583,11 @@ var usePointsTileStyles = function (isFullSize) {
4558
4583
  alignItems: 'center',
4559
4584
  justifyContent: 'center',
4560
4585
  },
4586
+ chevronContainer: {
4587
+ marginLeft: !isFullSize
4588
+ ? useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
4589
+ : 0,
4590
+ },
4561
4591
  imageContainer: {
4562
4592
  width: isFullSize ? '100%' : isDesktop ? 57 : 40,
4563
4593
  height: isFullSize ? '50%' : isDesktop ? 57 : 40,
@@ -4630,6 +4660,24 @@ var PointsTileTitle = function () {
4630
4660
  return (jsxRuntimeExports.jsx(Text, { variant: "eyebrow", testID: "points-tile-title", role: "heading", accessibilityLabel: title, children: title }));
4631
4661
  };
4632
4662
 
4663
+ /**
4664
+ * Renders a chevron icon for a Roundup Tile.
4665
+ *
4666
+ * @returns JSX.Element
4667
+ */
4668
+ var PointsTileChevron = function () {
4669
+ var _a, _b;
4670
+ var tileContext = useTileContext();
4671
+ var sdk = useWllSdk();
4672
+ var styles = usePointsTileStyles();
4673
+ if (!isContextValid(tileContext))
4674
+ return null;
4675
+ var ctaLink = tileContext.configuration.ctaLink;
4676
+ if (!ctaLink)
4677
+ return null;
4678
+ return (jsxRuntimeExports.jsx(reactNative.View, { style: styles.chevronContainer, children: jsxRuntimeExports.jsx(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" }) }));
4679
+ };
4680
+
4633
4681
  /**
4634
4682
  * The PointsTile component renders a tile with media, title, and formatted points.
4635
4683
  *
@@ -4645,7 +4693,7 @@ var PointsTileRoot = function (_a) {
4645
4693
  return null;
4646
4694
  var isFullSize = useTileSize(tile).isFullSize;
4647
4695
  var styles = usePointsTileStyles(isFullSize);
4648
- return (jsxRuntimeExports.jsxs(BaseTile, { tile: tile, children: [isFullSize && jsxRuntimeExports.jsx(PointsTile.Media, { isFullSize: true }), jsxRuntimeExports.jsxs(reactNative.View, { style: styles.container, children: [!isFullSize && jsxRuntimeExports.jsx(PointsTile.Media, { isFullSize: false }), jsxRuntimeExports.jsxs(Column, { style: styles.contentContainer, children: [jsxRuntimeExports.jsx(PointsTile.Title, {}), jsxRuntimeExports.jsx(PointsTile.Points, {})] })] })] }));
4696
+ return (jsxRuntimeExports.jsxs(BaseTile, { tile: tile, children: [isFullSize && jsxRuntimeExports.jsx(PointsTile.Media, { isFullSize: true }), jsxRuntimeExports.jsx(reactNative.View, { style: styles.container, children: jsxRuntimeExports.jsxs(Row, { style: styles.contentContainer, children: [jsxRuntimeExports.jsxs(Column, { style: styles.contentColumn, children: [jsxRuntimeExports.jsx(PointsTile.Title, {}), jsxRuntimeExports.jsx(PointsTile.Points, {})] }), jsxRuntimeExports.jsxs(Column, { style: styles.mediaColumn, children: [!isFullSize && jsxRuntimeExports.jsx(PointsTile.Media, { isFullSize: false }), jsxRuntimeExports.jsx(PointsTile.Chevron, {})] })] }) })] }));
4649
4697
  };
4650
4698
  /**
4651
4699
  * The PointsTile component with subcomponents attached.
@@ -4654,6 +4702,7 @@ var PointsTile = Object.assign(PointsTileRoot, {
4654
4702
  Title: PointsTileTitle,
4655
4703
  Points: PointsTileFormattedPoints,
4656
4704
  Media: PointsTileMedia,
4705
+ Chevron: PointsTileChevron,
4657
4706
  });
4658
4707
  var PointsTile$1 = withTileFetching(PointsTile);
4659
4708
 
@@ -5007,6 +5056,167 @@ TierTile.Full = TierTileFull;
5007
5056
  TierTile.Half = TierTileHalf;
5008
5057
  TierTile.Empty = TierTileEmpty;
5009
5058
 
5059
+ /**
5060
+ * Custom hook that returns the styles for the RoundupTile component.
5061
+ * Applies responsive styling based on the current device.
5062
+ *
5063
+ * @returns StyleSheet styles for the RoundupTile component
5064
+ */
5065
+ var useRoundupTileStyles = function (isFullSize) {
5066
+ var _a = useResponsive$1(), isDesktop = _a.isDesktop, isTablet = _a.isTablet;
5067
+ var theme = useWllSdk().theme;
5068
+ return reactNative.StyleSheet.create({
5069
+ container: {
5070
+ paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
5071
+ width: '100%',
5072
+ flexDirection: isFullSize ? 'row' : 'row-reverse',
5073
+ alignItems: 'center',
5074
+ justifyContent: 'space-between',
5075
+ },
5076
+ contentContainer: {
5077
+ width: '100%',
5078
+ marginTop: isFullSize
5079
+ ? useResponsiveValue(theme.sizes.xxl, theme.sizes.md, isDesktop, isTablet)
5080
+ : 0,
5081
+ },
5082
+ contentColumn: {
5083
+ flexGrow: 1,
5084
+ },
5085
+ mediaColumn: {
5086
+ flexDirection: 'row',
5087
+ alignItems: 'center',
5088
+ },
5089
+ suffix: {
5090
+ fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet),
5091
+ color: theme.primary,
5092
+ },
5093
+ pointsWithSuffix: {
5094
+ flexDirection: 'row',
5095
+ alignItems: 'center',
5096
+ justifyContent: 'center',
5097
+ },
5098
+ chevronContainer: {
5099
+ marginLeft: !isFullSize
5100
+ ? useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
5101
+ : 0,
5102
+ },
5103
+ imageContainer: {
5104
+ width: isFullSize ? '100%' : isDesktop ? 57 : 40,
5105
+ height: isFullSize ? '50%' : isDesktop ? 57 : 40,
5106
+ marginBottom: isFullSize
5107
+ ? useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
5108
+ : 0,
5109
+ backgroundColor: isFullSize
5110
+ ? theme.alphaDerivedPrimary[20]
5111
+ : theme.surface,
5112
+ justifyContent: 'center',
5113
+ alignItems: 'center',
5114
+ overflow: 'hidden',
5115
+ },
5116
+ image: {
5117
+ width: '100%',
5118
+ height: '100%',
5119
+ position: 'absolute',
5120
+ resizeMode: 'contain',
5121
+ },
5122
+ });
5123
+ };
5124
+
5125
+ /**
5126
+ * Renders formatted points value for a Roundup Tile.
5127
+ *
5128
+ * @returns JSX.Element or null if points are undefined or zero
5129
+ */
5130
+ var RoundupTileFormattedPoints = function () {
5131
+ var styles = useRoundupTileStyles();
5132
+ var tileContext = useTileContext();
5133
+ if (!isContextValid(tileContext))
5134
+ return null;
5135
+ 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;
5136
+ if (amount === undefined)
5137
+ return null;
5138
+ var fullPointsText = "".concat(amountPrefix).concat(amount, " ").concat(amountSuffix).trim();
5139
+ return (jsxRuntimeExports.jsx(reactNative.View, { testID: "roundup-tile-amount", role: "article", accessibilityLabel: "Amount: ".concat(fullPointsText), children: jsxRuntimeExports.jsxs(Row, { align: "center", justify: "start", children: [amountPrefix ? (jsxRuntimeExports.jsx(Text, { variant: "caption", testID: "roundup-tile-prefix", children: amountPrefix })) : null, jsxRuntimeExports.jsx(Text, { variant: "caption", testID: "roundup-tile-value", children: amount }), amountSuffix ? (jsxRuntimeExports.jsx(Text, { variant: "caption", style: styles.suffix, testID: "roundup-tile-suffix", children: amountSuffix })) : null] }) }));
5140
+ };
5141
+
5142
+ /**
5143
+ * Renders the media of a Points Tile.
5144
+ *
5145
+ * @returns JSX.Element or null if media is not present
5146
+ */
5147
+ var RoundupTileMedia = function (_a) {
5148
+ var isFullSize = _a.isFullSize;
5149
+ var tileContext = useTileContext();
5150
+ if (!isContextValid(tileContext))
5151
+ return null;
5152
+ var _b = tileContext.configuration, artworkUrl = _b.artworkUrl, _c = _b.title, title = _c === void 0 ? 'Balance' : _c;
5153
+ var styles = useRoundupTileStyles(isFullSize);
5154
+ if (!artworkUrl)
5155
+ return null;
5156
+ return (jsxRuntimeExports.jsx(reactNative.View, { testID: "roundup-tile-media", style: styles.imageContainer, role: "img", accessibilityLabel: "Roundup tile image for ".concat(title), children: jsxRuntimeExports.jsx(reactNative.Image, { source: { uri: artworkUrl }, style: styles.image, resizeMode: isFullSize ? 'cover' : 'contain' }) }));
5157
+ };
5158
+
5159
+ /**
5160
+ * Renders the title of a Roundup Tile.
5161
+ *
5162
+ * @returns JSX.Element or null if no title is present
5163
+ */
5164
+ var RoundupTileTitle = function () {
5165
+ var tileContext = useTileContext();
5166
+ if (!isContextValid(tileContext))
5167
+ return null;
5168
+ var title = tileContext.configuration.title;
5169
+ if (!title)
5170
+ return null;
5171
+ return (jsxRuntimeExports.jsx(Text, { variant: "eyebrow", testID: "roundup-tile-title", role: "heading", accessibilityLabel: title, children: title }));
5172
+ };
5173
+
5174
+ /**
5175
+ * Renders a chevron icon for a Roundup Tile.
5176
+ *
5177
+ * @returns JSX.Element
5178
+ */
5179
+ var RoundupTileChevron = function () {
5180
+ var _a, _b;
5181
+ var tileContext = useTileContext();
5182
+ var sdk = useWllSdk();
5183
+ var styles = useRoundupTileStyles();
5184
+ if (!isContextValid(tileContext))
5185
+ return null;
5186
+ var ctaLink = tileContext.configuration.ctaLink;
5187
+ if (!ctaLink)
5188
+ return null;
5189
+ return (jsxRuntimeExports.jsx(reactNative.View, { style: styles.chevronContainer, children: jsxRuntimeExports.jsx(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" }) }));
5190
+ };
5191
+
5192
+ /**
5193
+ * The PointsTile component renders a tile with media, title, and formatted points.
5194
+ *
5195
+ * @param props - Component props
5196
+ * @returns JSX.Element or null if tile is inactive or missing required props
5197
+ */
5198
+ var RoundupTileRoot = function (_a) {
5199
+ var tile = _a.tile;
5200
+ if (!tile || !tile.active || !tile.configuration)
5201
+ return null;
5202
+ var config = tile.configuration;
5203
+ if (!config)
5204
+ return null;
5205
+ var isFullSize = useTileSize(tile).isFullSize;
5206
+ var styles = useRoundupTileStyles(isFullSize);
5207
+ return (jsxRuntimeExports.jsxs(BaseTile, { tile: tile, children: [isFullSize && jsxRuntimeExports.jsx(RoundupTile.Media, { isFullSize: true }), jsxRuntimeExports.jsx(reactNative.View, { style: styles.container, children: jsxRuntimeExports.jsxs(Row, { style: styles.contentContainer, children: [jsxRuntimeExports.jsxs(Column, { style: styles.contentColumn, children: [jsxRuntimeExports.jsx(RoundupTile.Title, {}), jsxRuntimeExports.jsx(RoundupTile.Points, {})] }), jsxRuntimeExports.jsxs(Column, { style: styles.mediaColumn, children: [!isFullSize && jsxRuntimeExports.jsx(RoundupTile.Media, { isFullSize: false }), jsxRuntimeExports.jsx(RoundupTile.Chevron, {})] })] }) })] }));
5208
+ };
5209
+ /**
5210
+ * The PointsTile component with subcomponents attached.
5211
+ */
5212
+ var RoundupTile = Object.assign(RoundupTileRoot, {
5213
+ Title: RoundupTileTitle,
5214
+ Points: RoundupTileFormattedPoints,
5215
+ Media: RoundupTileMedia,
5216
+ Chevron: RoundupTileChevron,
5217
+ });
5218
+ var RoundupTile$1 = withTileFetching(RoundupTile);
5219
+
5010
5220
  var _a;
5011
5221
  var TILE_COMPONENTS = (_a = {},
5012
5222
  _a[exports.TileType.Content] = ContentTile$1,
@@ -5016,6 +5226,7 @@ var TILE_COMPONENTS = (_a = {},
5016
5226
  _a[exports.TileType.Reward] = RewardTile$1,
5017
5227
  _a[exports.TileType.RewardCategory] = RewardCategoryTile$1,
5018
5228
  _a[exports.TileType.Banner] = BannerTile$1,
5229
+ _a[exports.TileType.Roundup] = RoundupTile$1,
5019
5230
  _a);
5020
5231
  /**
5021
5232
  * TileContainer component to render a list of tiles with proper layout and spacing.
@@ -5089,6 +5300,8 @@ exports.RewardCategoryTile = RewardCategoryTile$1;
5089
5300
  exports.RewardCategoryTileConfig = RewardCategoryTileConfig;
5090
5301
  exports.RewardTile = RewardTile$1;
5091
5302
  exports.RewardTileConfig = RewardTileConfig;
5303
+ exports.RoundupTile = RoundupTile$1;
5304
+ exports.RoundupTileConfig = RoundupTileConfig;
5092
5305
  exports.Row = Row;
5093
5306
  exports.Section = Section;
5094
5307
  exports.SectionHeader = SectionHeader;