@wlloyalty/wll-react-sdk 1.0.108 → 1.0.110

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.
@@ -31,3 +31,9 @@ export declare const HalfWithMultiplier: import("@storybook/csf").AnnotatedStory
31
31
  export declare const FullWithMultiplier: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
32
32
  tile: import("../../../types/tile").Tile;
33
33
  }, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
34
+ export declare const WithCtaLink: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
35
+ tile: import("../../../types/tile").Tile;
36
+ }, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
37
+ export declare const WithCtaLinkHalf: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
38
+ tile: import("../../../types/tile").Tile;
39
+ }, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
@@ -12,6 +12,7 @@ export declare const PointsTile: (({ tile }: PointsTileProps) => JSX.Element | n
12
12
  Media: ({ isFullSize, }: {
13
13
  isFullSize: boolean;
14
14
  }) => JSX.Element | null;
15
+ Chevron: () => JSX.Element | null;
15
16
  };
16
17
  declare const _default: (props: Omit<PointsTileProps, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps) => React.JSX.Element;
17
18
  export default _default;
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Renders a chevron icon for a Roundup Tile.
3
+ *
4
+ * @returns JSX.Element
5
+ */
6
+ export declare const PointsTileChevron: () => JSX.Element | null;
@@ -8,6 +8,9 @@ import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
8
8
  export declare const usePointsTileStyles: (isFullSize?: boolean) => {
9
9
  container: ViewStyle;
10
10
  contentContainer: ViewStyle;
11
+ contentColumn: ViewStyle;
12
+ mediaColumn: ViewStyle;
13
+ chevronContainer: ViewStyle;
11
14
  suffix: TextStyle;
12
15
  pointsWithSuffix: ViewStyle;
13
16
  imageContainer: ViewStyle;
@@ -0,0 +1 @@
1
+ import '@testing-library/jest-dom';
@@ -0,0 +1,33 @@
1
+ import { Meta } from '@storybook/react';
2
+ declare const _default: Meta;
3
+ export default _default;
4
+ export declare const ZeroBalance: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
5
+ tile: import("../../../types/tile").Tile;
6
+ }>;
7
+ export declare const StandardBalance: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
8
+ tile: import("../../../types/tile").Tile;
9
+ }>;
10
+ export declare const CashbackRewards: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
11
+ tile: import("../../../types/tile").Tile;
12
+ }>;
13
+ export declare const StarRewards: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
14
+ tile: import("../../../types/tile").Tile;
15
+ }>;
16
+ export declare const MileageProgram: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
17
+ tile: import("../../../types/tile").Tile;
18
+ }>;
19
+ export declare const AccountBalance: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
20
+ tile: import("../../../types/tile").Tile;
21
+ }>;
22
+ export declare const RewardBalance: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
23
+ tile: import("../../../types/tile").Tile;
24
+ }>;
25
+ export declare const EliteBalance: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
26
+ tile: import("../../../types/tile").Tile;
27
+ }>;
28
+ export declare const WithCtaLink: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
29
+ tile: import("../../../types/tile").Tile;
30
+ }>;
31
+ export declare const WithCtaLinkHalf: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
32
+ tile: import("../../../types/tile").Tile;
33
+ }>;
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import { Tile } from '../../../types/tile';
3
+ type RoundupTileProps = {
4
+ tile: Tile;
5
+ };
6
+ /**
7
+ * The PointsTile component with subcomponents attached.
8
+ */
9
+ export declare const RoundupTile: (({ tile }: RoundupTileProps) => JSX.Element | null) & {
10
+ Title: () => JSX.Element | null;
11
+ Points: () => JSX.Element | null;
12
+ Media: ({ isFullSize, }: {
13
+ isFullSize: boolean;
14
+ }) => JSX.Element | null;
15
+ Chevron: () => JSX.Element | null;
16
+ };
17
+ declare const _default: (props: Omit<RoundupTileProps, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps) => React.JSX.Element;
18
+ export default _default;
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Renders a chevron icon for a Roundup Tile.
3
+ *
4
+ * @returns JSX.Element
5
+ */
6
+ export declare const RoundupTileChevron: () => JSX.Element | null;
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Renders formatted points value for a Roundup Tile.
3
+ *
4
+ * @returns JSX.Element or null if points are undefined or zero
5
+ */
6
+ export declare const RoundupTileFormattedPoints: () => JSX.Element | null;
@@ -0,0 +1,10 @@
1
+ type RoundupTileMediaProps = {
2
+ isFullSize: boolean;
3
+ };
4
+ /**
5
+ * Renders the media of a Points Tile.
6
+ *
7
+ * @returns JSX.Element or null if media is not present
8
+ */
9
+ export declare const RoundupTileMedia: ({ isFullSize, }: RoundupTileMediaProps) => JSX.Element | null;
10
+ export {};
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Renders the title of a Roundup Tile.
3
+ *
4
+ * @returns JSX.Element or null if no title is present
5
+ */
6
+ export declare const RoundupTileTitle: () => JSX.Element | null;
@@ -0,0 +1,18 @@
1
+ import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
2
+ /**
3
+ * Custom hook that returns the styles for the RoundupTile component.
4
+ * Applies responsive styling based on the current device.
5
+ *
6
+ * @returns StyleSheet styles for the RoundupTile component
7
+ */
8
+ export declare const useRoundupTileStyles: (isFullSize?: boolean) => {
9
+ container: ViewStyle;
10
+ contentContainer: ViewStyle;
11
+ contentColumn: ViewStyle;
12
+ mediaColumn: ViewStyle;
13
+ chevronContainer: ViewStyle;
14
+ suffix: TextStyle;
15
+ pointsWithSuffix: ViewStyle;
16
+ imageContainer: ViewStyle;
17
+ image: ImageStyle;
18
+ };
@@ -7,3 +7,4 @@ export { default as RewardCategoryTile } from './RewardCategoryTile';
7
7
  export { default as RewardTile } from './RewardTile';
8
8
  export { default as Section } from './Section';
9
9
  export { default as TierTileUpdated } from './TierTileUpdated';
10
+ export { default as RoundupTile } from './RoundupTile';
@@ -18,5 +18,7 @@ export declare const createPointsTileMock: (config?: PointsTileMockConfig) => {
18
18
  pointsPrefix: string | null;
19
19
  pointsSuffix: string | null;
20
20
  artworkUrl: string | null;
21
+ ctaLink: string | null | undefined;
22
+ ctaLinkTarget: import("../../types/tile").CTALinkTarget | undefined;
21
23
  };
22
24
  };
@@ -0,0 +1,23 @@
1
+ import { CTALinkTarget, RoundupTileConfig, TileHeight, TileType } from '../../types/tile';
2
+ export type RoundupTileMockConfig = Partial<RoundupTileConfig> & {
3
+ active?: boolean;
4
+ tileHeight?: TileHeight;
5
+ };
6
+ export declare const createRoundupTileMock: (config?: RoundupTileMockConfig) => {
7
+ id: string;
8
+ type: TileType;
9
+ active: boolean;
10
+ createdAt: string;
11
+ updatedAt: string;
12
+ tileHeight: TileHeight;
13
+ priority: number;
14
+ configuration: {
15
+ title: string | null;
16
+ amount: number;
17
+ amountPrefix: string | null;
18
+ amountSuffix: string | null;
19
+ artworkUrl: string | null;
20
+ ctaLink: string | null | undefined;
21
+ ctaLinkTarget: CTALinkTarget | undefined;
22
+ };
23
+ };
@@ -18,7 +18,8 @@ export declare enum TileType {
18
18
  Reward = "REWARD",
19
19
  Badge = "BADGE",
20
20
  RewardCategory = "REWARD_CATEGORY",
21
- Tier = "TIER"
21
+ Tier = "TIER",
22
+ Roundup = "ROUND_UP_BALANCE"
22
23
  }
23
24
  export declare enum TileHeight {
24
25
  Half = "HALF",
@@ -40,6 +41,17 @@ export declare class PointsTileConfig {
40
41
  pointsSuffix?: string | null;
41
42
  artworkUrl?: string | null;
42
43
  points?: number;
44
+ ctaLink?: string | null;
45
+ ctaLinkTarget?: CTALinkTarget;
46
+ }
47
+ export declare class RoundupTileConfig {
48
+ title?: string | null;
49
+ amountPrefix?: string | null;
50
+ amountSuffix?: string | null;
51
+ artworkUrl?: string | null;
52
+ amount?: number;
53
+ ctaLink?: string | null;
54
+ ctaLinkTarget?: CTALinkTarget;
43
55
  }
44
56
  export declare class ContentTileConfig {
45
57
  title?: string | null;
package/dist/web.js CHANGED
@@ -19091,6 +19091,7 @@ exports.TileType = void 0;
19091
19091
  TileType["Badge"] = "BADGE";
19092
19092
  TileType["RewardCategory"] = "REWARD_CATEGORY";
19093
19093
  TileType["Tier"] = "TIER";
19094
+ TileType["Roundup"] = "ROUND_UP_BALANCE";
19094
19095
  })(exports.TileType || (exports.TileType = {}));
19095
19096
  exports.TileHeight = void 0;
19096
19097
  (function (TileHeight) {
@@ -19105,6 +19106,10 @@ var PointsTileConfig = /** @class */function () {
19105
19106
  function PointsTileConfig() {}
19106
19107
  return PointsTileConfig;
19107
19108
  }();
19109
+ var RoundupTileConfig = /** @class */function () {
19110
+ function RoundupTileConfig() {}
19111
+ return RoundupTileConfig;
19112
+ }();
19108
19113
  var ContentTileConfig = /** @class */function () {
19109
19114
  function ContentTileConfig() {}
19110
19115
  return ContentTileConfig;
@@ -20308,7 +20313,6 @@ var BannerTileDescription = function () {
20308
20313
  return /*#__PURE__*/React.createElement(Text, {
20309
20314
  style: styles.description,
20310
20315
  role: "article",
20311
- accessibilityLabel: description,
20312
20316
  testID: "banner-tile-description"
20313
20317
  }, description);
20314
20318
  };
@@ -21739,7 +21743,14 @@ var usePointsTileStyles = function (isFullSize) {
21739
21743
  justifyContent: 'space-between'
21740
21744
  },
21741
21745
  contentContainer: {
21742
- width: isFullSize ? '100%' : 'auto'
21746
+ width: '100%'
21747
+ },
21748
+ contentColumn: {
21749
+ flexGrow: 1
21750
+ },
21751
+ mediaColumn: {
21752
+ flexDirection: 'row',
21753
+ alignItems: 'center'
21743
21754
  },
21744
21755
  suffix: {
21745
21756
  fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet),
@@ -21750,6 +21761,9 @@ var usePointsTileStyles = function (isFullSize) {
21750
21761
  alignItems: 'center',
21751
21762
  justifyContent: 'center'
21752
21763
  },
21764
+ chevronContainer: {
21765
+ marginLeft: !isFullSize ? useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet) : 0
21766
+ },
21753
21767
  imageContainer: {
21754
21768
  width: isFullSize ? '100%' : isDesktop ? 57 : 40,
21755
21769
  height: isFullSize ? '50%' : isDesktop ? 57 : 40,
@@ -21856,6 +21870,30 @@ var PointsTileTitle = function () {
21856
21870
  }, title);
21857
21871
  };
21858
21872
 
21873
+ /**
21874
+ * Renders a chevron icon for a Roundup Tile.
21875
+ *
21876
+ * @returns JSX.Element
21877
+ */
21878
+ var PointsTileChevron = function () {
21879
+ var _a, _b;
21880
+ var tileContext = useTileContext();
21881
+ var sdk = useWllSdk();
21882
+ var styles = usePointsTileStyles();
21883
+ if (!isContextValid(tileContext)) return null;
21884
+ var ctaLink = tileContext.configuration.ctaLink;
21885
+ if (!ctaLink) return null;
21886
+ return /*#__PURE__*/React.createElement(View$2, {
21887
+ style: styles.chevronContainer
21888
+ }, /*#__PURE__*/React.createElement(Icon, {
21889
+ name: "ChevronRight",
21890
+ size: 16,
21891
+ color: ((_b = (_a = sdk.theme) === null || _a === void 0 ? void 0 : _a.derivedSurfaceText) === null || _b === void 0 ? void 0 : _b[20]) || '#000000',
21892
+ role: "img",
21893
+ accessibilityLabel: "View balance"
21894
+ }));
21895
+ };
21896
+
21859
21897
  /**
21860
21898
  * The PointsTile component renders a tile with media, title, and formatted points.
21861
21899
  *
@@ -21875,11 +21913,15 @@ var PointsTileRoot = function (_a) {
21875
21913
  isFullSize: true
21876
21914
  }), /*#__PURE__*/React.createElement(View$2, {
21877
21915
  style: styles.container
21916
+ }, /*#__PURE__*/React.createElement(Row, {
21917
+ style: styles.contentContainer
21918
+ }, /*#__PURE__*/React.createElement(Column, {
21919
+ style: styles.contentColumn
21920
+ }, /*#__PURE__*/React.createElement(PointsTile.Title, null), /*#__PURE__*/React.createElement(PointsTile.Points, null)), /*#__PURE__*/React.createElement(Column, {
21921
+ style: styles.mediaColumn
21878
21922
  }, !isFullSize && /*#__PURE__*/React.createElement(PointsTile.Media, {
21879
21923
  isFullSize: false
21880
- }), /*#__PURE__*/React.createElement(Column, {
21881
- style: styles.contentContainer
21882
- }, /*#__PURE__*/React.createElement(PointsTile.Title, null), /*#__PURE__*/React.createElement(PointsTile.Points, null))));
21924
+ }), /*#__PURE__*/React.createElement(PointsTile.Chevron, null)))));
21883
21925
  };
21884
21926
  /**
21885
21927
  * The PointsTile component with subcomponents attached.
@@ -21887,7 +21929,8 @@ var PointsTileRoot = function (_a) {
21887
21929
  var PointsTile = Object.assign(PointsTileRoot, {
21888
21930
  Title: PointsTileTitle,
21889
21931
  Points: PointsTileFormattedPoints,
21890
- Media: PointsTileMedia
21932
+ Media: PointsTileMedia,
21933
+ Chevron: PointsTileChevron
21891
21934
  });
21892
21935
  var PointsTile$1 = withTileFetching(PointsTile);
21893
21936
 
@@ -22438,8 +22481,217 @@ TierTile.Full = TierTileFull;
22438
22481
  TierTile.Half = TierTileHalf;
22439
22482
  TierTile.Empty = TierTileEmpty;
22440
22483
 
22484
+ /**
22485
+ * Custom hook that returns the styles for the RoundupTile component.
22486
+ * Applies responsive styling based on the current device.
22487
+ *
22488
+ * @returns StyleSheet styles for the RoundupTile component
22489
+ */
22490
+ var useRoundupTileStyles = function (isFullSize) {
22491
+ var _a = useResponsive$1(),
22492
+ isDesktop = _a.isDesktop,
22493
+ isTablet = _a.isTablet;
22494
+ var theme = useWllSdk().theme;
22495
+ return StyleSheet$1.create({
22496
+ container: {
22497
+ paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
22498
+ width: '100%',
22499
+ flexDirection: isFullSize ? 'row' : 'row-reverse',
22500
+ alignItems: 'center',
22501
+ justifyContent: 'space-between'
22502
+ },
22503
+ contentContainer: {
22504
+ width: '100%',
22505
+ marginTop: isFullSize ? useResponsiveValue(theme.sizes.xxl, theme.sizes.md, isDesktop, isTablet) : 0
22506
+ },
22507
+ contentColumn: {
22508
+ flexGrow: 1
22509
+ },
22510
+ mediaColumn: {
22511
+ flexDirection: 'row',
22512
+ alignItems: 'center'
22513
+ },
22514
+ suffix: {
22515
+ fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet),
22516
+ color: theme.primary
22517
+ },
22518
+ pointsWithSuffix: {
22519
+ flexDirection: 'row',
22520
+ alignItems: 'center',
22521
+ justifyContent: 'center'
22522
+ },
22523
+ chevronContainer: {
22524
+ marginLeft: !isFullSize ? useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet) : 0
22525
+ },
22526
+ imageContainer: {
22527
+ width: isFullSize ? '100%' : isDesktop ? 57 : 40,
22528
+ height: isFullSize ? '50%' : isDesktop ? 57 : 40,
22529
+ marginBottom: isFullSize ? useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet) : 0,
22530
+ backgroundColor: isFullSize ? theme.alphaDerivedPrimary[20] : theme.surface,
22531
+ justifyContent: 'center',
22532
+ alignItems: 'center',
22533
+ overflow: 'hidden'
22534
+ },
22535
+ image: {
22536
+ width: '100%',
22537
+ height: '100%',
22538
+ position: 'absolute',
22539
+ resizeMode: 'contain'
22540
+ }
22541
+ });
22542
+ };
22543
+
22544
+ /**
22545
+ * Renders formatted points value for a Roundup Tile.
22546
+ *
22547
+ * @returns JSX.Element or null if points are undefined or zero
22548
+ */
22549
+ var RoundupTileFormattedPoints = function () {
22550
+ var styles = useRoundupTileStyles();
22551
+ var tileContext = useTileContext();
22552
+ if (!isContextValid(tileContext)) return null;
22553
+ var _a = tileContext.configuration,
22554
+ _b = _a.amountPrefix,
22555
+ amountPrefix = _b === void 0 ? '' : _b,
22556
+ _c = _a.amountSuffix,
22557
+ amountSuffix = _c === void 0 ? '' : _c,
22558
+ _d = _a.amount,
22559
+ amount = _d === void 0 ? 0 : _d;
22560
+ if (amount === undefined) return null;
22561
+ var fullPointsText = "".concat(amountPrefix).concat(amount, " ").concat(amountSuffix).trim();
22562
+ return /*#__PURE__*/React.createElement(View$2, {
22563
+ testID: "roundup-tile-amount",
22564
+ role: "article",
22565
+ accessibilityLabel: "Amount: ".concat(fullPointsText)
22566
+ }, /*#__PURE__*/React.createElement(Row, {
22567
+ align: "center",
22568
+ justify: "start"
22569
+ }, amountPrefix ? (/*#__PURE__*/React.createElement(Text, {
22570
+ variant: "caption",
22571
+ testID: "roundup-tile-prefix"
22572
+ }, amountPrefix)) : null, /*#__PURE__*/React.createElement(Text, {
22573
+ variant: "caption",
22574
+ testID: "roundup-tile-value"
22575
+ }, amount), amountSuffix ? (/*#__PURE__*/React.createElement(Text, {
22576
+ variant: "caption",
22577
+ style: styles.suffix,
22578
+ testID: "roundup-tile-suffix"
22579
+ }, amountSuffix)) : null));
22580
+ };
22581
+
22582
+ /**
22583
+ * Renders the media of a Points Tile.
22584
+ *
22585
+ * @returns JSX.Element or null if media is not present
22586
+ */
22587
+ var RoundupTileMedia = function (_a) {
22588
+ var isFullSize = _a.isFullSize;
22589
+ var tileContext = useTileContext();
22590
+ if (!isContextValid(tileContext)) return null;
22591
+ var _b = tileContext.configuration,
22592
+ artworkUrl = _b.artworkUrl,
22593
+ _c = _b.title,
22594
+ title = _c === void 0 ? 'Balance' : _c;
22595
+ var styles = useRoundupTileStyles(isFullSize);
22596
+ if (!artworkUrl) return null;
22597
+ return /*#__PURE__*/React.createElement(View$2, {
22598
+ testID: "roundup-tile-media",
22599
+ style: styles.imageContainer,
22600
+ role: "img",
22601
+ accessibilityLabel: "Roundup tile image for ".concat(title)
22602
+ }, /*#__PURE__*/React.createElement(Image$2, {
22603
+ source: {
22604
+ uri: artworkUrl
22605
+ },
22606
+ style: styles.image,
22607
+ resizeMode: isFullSize ? 'cover' : 'contain'
22608
+ }));
22609
+ };
22610
+
22611
+ /**
22612
+ * Renders the title of a Roundup Tile.
22613
+ *
22614
+ * @returns JSX.Element or null if no title is present
22615
+ */
22616
+ var RoundupTileTitle = function () {
22617
+ var tileContext = useTileContext();
22618
+ if (!isContextValid(tileContext)) return null;
22619
+ var title = tileContext.configuration.title;
22620
+ if (!title) return null;
22621
+ return /*#__PURE__*/React.createElement(Text, {
22622
+ variant: "eyebrow",
22623
+ testID: "roundup-tile-title",
22624
+ role: "heading",
22625
+ accessibilityLabel: title
22626
+ }, title);
22627
+ };
22628
+
22629
+ /**
22630
+ * Renders a chevron icon for a Roundup Tile.
22631
+ *
22632
+ * @returns JSX.Element
22633
+ */
22634
+ var RoundupTileChevron = function () {
22635
+ var _a, _b;
22636
+ var tileContext = useTileContext();
22637
+ var sdk = useWllSdk();
22638
+ var styles = useRoundupTileStyles();
22639
+ if (!isContextValid(tileContext)) return null;
22640
+ var ctaLink = tileContext.configuration.ctaLink;
22641
+ if (!ctaLink) return null;
22642
+ return /*#__PURE__*/React.createElement(View$2, {
22643
+ style: styles.chevronContainer
22644
+ }, /*#__PURE__*/React.createElement(Icon, {
22645
+ name: "ChevronRight",
22646
+ size: 16,
22647
+ color: ((_b = (_a = sdk.theme) === null || _a === void 0 ? void 0 : _a.derivedSurfaceText) === null || _b === void 0 ? void 0 : _b[20]) || '#000000',
22648
+ role: "img",
22649
+ accessibilityLabel: "View balance"
22650
+ }));
22651
+ };
22652
+
22653
+ /**
22654
+ * The PointsTile component renders a tile with media, title, and formatted points.
22655
+ *
22656
+ * @param props - Component props
22657
+ * @returns JSX.Element or null if tile is inactive or missing required props
22658
+ */
22659
+ var RoundupTileRoot = function (_a) {
22660
+ var tile = _a.tile;
22661
+ if (!tile || !tile.active || !tile.configuration) return null;
22662
+ var config = tile.configuration;
22663
+ if (!config) return null;
22664
+ var isFullSize = useTileSize(tile).isFullSize;
22665
+ var styles = useRoundupTileStyles(isFullSize);
22666
+ return /*#__PURE__*/React.createElement(BaseTile, {
22667
+ tile: tile
22668
+ }, isFullSize && /*#__PURE__*/React.createElement(RoundupTile.Media, {
22669
+ isFullSize: true
22670
+ }), /*#__PURE__*/React.createElement(View$2, {
22671
+ style: styles.container
22672
+ }, /*#__PURE__*/React.createElement(Row, {
22673
+ style: styles.contentContainer
22674
+ }, /*#__PURE__*/React.createElement(Column, {
22675
+ style: styles.contentColumn
22676
+ }, /*#__PURE__*/React.createElement(RoundupTile.Title, null), /*#__PURE__*/React.createElement(RoundupTile.Points, null)), /*#__PURE__*/React.createElement(Column, {
22677
+ style: styles.mediaColumn
22678
+ }, !isFullSize && /*#__PURE__*/React.createElement(RoundupTile.Media, {
22679
+ isFullSize: false
22680
+ }), /*#__PURE__*/React.createElement(RoundupTile.Chevron, null)))));
22681
+ };
22682
+ /**
22683
+ * The PointsTile component with subcomponents attached.
22684
+ */
22685
+ var RoundupTile = Object.assign(RoundupTileRoot, {
22686
+ Title: RoundupTileTitle,
22687
+ Points: RoundupTileFormattedPoints,
22688
+ Media: RoundupTileMedia,
22689
+ Chevron: RoundupTileChevron
22690
+ });
22691
+ var RoundupTile$1 = withTileFetching(RoundupTile);
22692
+
22441
22693
  var _a;
22442
- 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);
22694
+ 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);
22443
22695
  /**
22444
22696
  * TileContainer component to render a list of tiles with proper layout and spacing.
22445
22697
  */
@@ -22516,6 +22768,8 @@ exports.RewardCategoryTile = RewardCategoryTile$1;
22516
22768
  exports.RewardCategoryTileConfig = RewardCategoryTileConfig;
22517
22769
  exports.RewardTile = RewardTile$1;
22518
22770
  exports.RewardTileConfig = RewardTileConfig;
22771
+ exports.RoundupTile = RoundupTile$1;
22772
+ exports.RoundupTileConfig = RoundupTileConfig;
22519
22773
  exports.Row = Row;
22520
22774
  exports.Section = Section;
22521
22775
  exports.SectionHeader = SectionHeader;