@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.
- package/dist/index.d.ts +25 -8
- package/dist/native.js +204 -3
- package/dist/native.js.map +1 -1
- 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 +261 -7
- package/dist/web.js.map +1 -1
- package/package.json +1 -1
|
@@ -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;
|
|
@@ -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,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,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:
|
|
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(
|
|
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;
|