@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 +25 -8
- package/dist/native.js +224 -11
- package/dist/native.js.map +1 -1
- package/dist/types/components/atoms/Skeleton/Skeleton.stories.d.ts +8 -0
- package/dist/types/components/organisms/PointsTile/PointsTile.stories.d.ts +6 -0
- package/dist/types/components/organisms/PointsTile/index.d.ts +1 -0
- package/dist/types/components/organisms/PointsTile/points-tile-chevron.d.ts +6 -0
- package/dist/types/components/organisms/PointsTile/styles.d.ts +3 -0
- package/dist/types/components/organisms/RoundupTile/RoundupTile.spec.d.ts +1 -0
- package/dist/types/components/organisms/RoundupTile/RoundupTile.stories.d.ts +33 -0
- package/dist/types/components/organisms/RoundupTile/index.d.ts +18 -0
- package/dist/types/components/organisms/RoundupTile/roundup-tile-chevron.d.ts +6 -0
- package/dist/types/components/organisms/RoundupTile/roundup-tile-formatted-points.d.ts +6 -0
- package/dist/types/components/organisms/RoundupTile/roundup-tile-media.d.ts +10 -0
- package/dist/types/components/organisms/RoundupTile/roundup-tile-title.d.ts +6 -0
- package/dist/types/components/organisms/RoundupTile/styles.d.ts +18 -0
- package/dist/types/components/organisms/index.d.ts +1 -0
- package/dist/types/mocks/tiles/pointsTile.d.ts +2 -0
- package/dist/types/mocks/tiles/roundupTile.d.ts +23 -0
- package/dist/types/types/tile.d.ts +13 -1
- package/dist/web.js +320 -51
- package/dist/web.js.map +1 -1
- package/package.json +1 -1
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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:
|
|
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:
|
|
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.
|
|
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;
|