@wlloyalty/wll-react-sdk 1.0.108 → 1.0.110

package/dist/index.d.ts

@@ -108,7 +108,8 @@ declare enum TileType {
     Reward = "REWARD",
     Badge = "BADGE",
     RewardCategory = "REWARD_CATEGORY",
-    Tier = "TIER"
+    Tier = "TIER",
+    Roundup = "ROUND_UP_BALANCE"
 }
 declare enum TileHeight {
     Half = "HALF",
@@ -130,6 +131,17 @@ declare class PointsTileConfig {
     pointsSuffix?: string | null;
     artworkUrl?: string | null;
     points?: number;
+    ctaLink?: string | null;
+    ctaLinkTarget?: CTALinkTarget;
+}
+declare class RoundupTileConfig {
+    title?: string | null;
+    amountPrefix?: string | null;
+    amountSuffix?: string | null;
+    artworkUrl?: string | null;
+    amount?: number;
+    ctaLink?: string | null;
+    ctaLinkTarget?: CTALinkTarget;
 }
 declare class ContentTileConfig {
     title?: string | null;
@@ -565,17 +577,17 @@ type WithTileFetchingProps = {
 type BadgeTileProps = {
     tile: Tile;
 };
-declare const _default$5: (props: Omit<BadgeTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
+declare const _default$6: (props: Omit<BadgeTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
 
 type BannerTileProps = {
     tile: Tile;
 };
-declare const _default$4: (props: Omit<BannerTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
+declare const _default$5: (props: Omit<BannerTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
 
 type ContentTileProps = {
     tile: Tile;
 };
-declare const _default$3: (props: Omit<ContentTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
+declare const _default$4: (props: Omit<ContentTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
 
 type TGroup = {
     name: string;
@@ -606,17 +618,17 @@ declare const Group: ({ id }: GroupProps) => JSX.Element | null;
 type PointsTileProps = {
     tile: Tile;
 };
-declare const _default$2: (props: Omit<PointsTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
+declare const _default$3: (props: Omit<PointsTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
 
 type RewardCategoryTileProps = {
     tile: Tile;
 };
-declare const _default$1: (props: Omit<RewardCategoryTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
+declare const _default$2: (props: Omit<RewardCategoryTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
 
 type RewardTileProps = {
     tile: Tile;
 };
-declare const _default: (props: Omit<RewardTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
+declare const _default$1: (props: Omit<RewardTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
 
 type SectionProps = {
     section?: TSection;
@@ -645,6 +657,11 @@ declare const TierTileHalf: React$1.FC<TierTileProps>;
 declare const TierTileEmpty: React$1.FC<TierTileProps>;
 declare const TierTile: TierTileComponent;
 
+type RoundupTileProps = {
+    tile: Tile;
+};
+declare const _default: (props: Omit<RoundupTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
+
 type NavigationType = 'external' | 'internal' | 'modal';
 type NavigationHandlerParams = {
     target: string;
@@ -699,4 +716,4 @@ type WllSdkProviderProps = WithChildren & {
 declare const WllSdkProvider: ({ children, theme: providedTheme, config, navigationConfig, }: WllSdkProviderProps) => JSX.Element;
 declare const useWllSdk: () => WllSdkContextType;
 
-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 };
+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

@@ -2480,6 +2480,7 @@ exports.TileType = void 0;
     TileType["Badge"] = "BADGE";
     TileType["RewardCategory"] = "REWARD_CATEGORY";
     TileType["Tier"] = "TIER";
+    TileType["Roundup"] = "ROUND_UP_BALANCE";
 })(exports.TileType || (exports.TileType = {}));
 exports.TileHeight = void 0;
 (function (TileHeight) {
@@ -2496,6 +2497,11 @@ var PointsTileConfig = /** @class */ (function () {
     }
     return PointsTileConfig;
 }());
+var RoundupTileConfig = /** @class */ (function () {
+    function RoundupTileConfig() {
+    }
+    return RoundupTileConfig;
+}());
 var ContentTileConfig = /** @class */ (function () {
     function ContentTileConfig() {
     }
@@ -3481,7 +3487,7 @@ var BannerTileDescription = function () {
     var description = bannerContext.configuration.description;
     if (!description)
         return null;
-    return (jsxRuntimeExports.jsx(Text, { style: styles.description, role: "article", accessibilityLabel: description, testID: "banner-tile-description", children: description }));
+    return (jsxRuntimeExports.jsx(Text, { style: styles.description, role: "article", testID: "banner-tile-description", children: description }));
 };
 
 /**
@@ -4559,7 +4565,14 @@ var usePointsTileStyles = function (isFullSize) {
             justifyContent: 'space-between',
         },
         contentContainer: {
-            width: isFullSize ? '100%' : 'auto',
+            width: '100%',
+        },
+        contentColumn: {
+            flexGrow: 1,
+        },
+        mediaColumn: {
+            flexDirection: 'row',
+            alignItems: 'center',
         },
         suffix: {
             fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet),
@@ -4570,6 +4583,11 @@ var usePointsTileStyles = function (isFullSize) {
             alignItems: 'center',
             justifyContent: 'center',
         },
+        chevronContainer: {
+            marginLeft: !isFullSize
+                ? useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
+                : 0,
+        },
         imageContainer: {
             width: isFullSize ? '100%' : isDesktop ? 57 : 40,
             height: isFullSize ? '50%' : isDesktop ? 57 : 40,
@@ -4642,6 +4660,24 @@ var PointsTileTitle = function () {
     return (jsxRuntimeExports.jsx(Text, { variant: "eyebrow", testID: "points-tile-title", role: "heading", accessibilityLabel: title, children: title }));
 };
 
+/**
+ * Renders a chevron icon for a Roundup Tile.
+ *
+ * @returns JSX.Element
+ */
+var PointsTileChevron = function () {
+    var _a, _b;
+    var tileContext = useTileContext();
+    var sdk = useWllSdk();
+    var styles = usePointsTileStyles();
+    if (!isContextValid(tileContext))
+        return null;
+    var ctaLink = tileContext.configuration.ctaLink;
+    if (!ctaLink)
+        return null;
+    return (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" }) }));
+};
+
 /**
  * The PointsTile component renders a tile with media, title, and formatted points.
  *
@@ -4657,7 +4693,7 @@ var PointsTileRoot = function (_a) {
         return null;
     var isFullSize = useTileSize(tile).isFullSize;
     var styles = usePointsTileStyles(isFullSize);
-    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, {})] })] })] }));
+    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, {})] })] }) })] }));
 };
 /**
  * The PointsTile component with subcomponents attached.
@@ -4666,6 +4702,7 @@ var PointsTile = Object.assign(PointsTileRoot, {
     Title: PointsTileTitle,
     Points: PointsTileFormattedPoints,
     Media: PointsTileMedia,
+    Chevron: PointsTileChevron,
 });
 var PointsTile$1 = withTileFetching(PointsTile);
 
@@ -5019,6 +5056,167 @@ TierTile.Full = TierTileFull;
 TierTile.Half = TierTileHalf;
 TierTile.Empty = TierTileEmpty;
 
+/**
+ * Custom hook that returns the styles for the RoundupTile component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the RoundupTile component
+ */
+var useRoundupTileStyles = function (isFullSize) {
+    var _a = useResponsive$1(), isDesktop = _a.isDesktop, isTablet = _a.isTablet;
+    var theme = useWllSdk().theme;
+    return reactNative.StyleSheet.create({
+        container: {
+            paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
+            width: '100%',
+            flexDirection: isFullSize ? 'row' : 'row-reverse',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+        },
+        contentContainer: {
+            width: '100%',
+            marginTop: isFullSize
+                ? useResponsiveValue(theme.sizes.xxl, theme.sizes.md, isDesktop, isTablet)
+                : 0,
+        },
+        contentColumn: {
+            flexGrow: 1,
+        },
+        mediaColumn: {
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        suffix: {
+            fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet),
+            color: theme.primary,
+        },
+        pointsWithSuffix: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        chevronContainer: {
+            marginLeft: !isFullSize
+                ? useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
+                : 0,
+        },
+        imageContainer: {
+            width: isFullSize ? '100%' : isDesktop ? 57 : 40,
+            height: isFullSize ? '50%' : isDesktop ? 57 : 40,
+            marginBottom: isFullSize
+                ? useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
+                : 0,
+            backgroundColor: isFullSize
+                ? theme.alphaDerivedPrimary[20]
+                : theme.surface,
+            justifyContent: 'center',
+            alignItems: 'center',
+            overflow: 'hidden',
+        },
+        image: {
+            width: '100%',
+            height: '100%',
+            position: 'absolute',
+            resizeMode: 'contain',
+        },
+    });
+};
+
+/**
+ * Renders formatted points value for a Roundup Tile.
+ *
+ * @returns JSX.Element or null if points are undefined or zero
+ */
+var RoundupTileFormattedPoints = function () {
+    var styles = useRoundupTileStyles();
+    var tileContext = useTileContext();
+    if (!isContextValid(tileContext))
+        return null;
+    var _a = tileContext.configuration, _b = _a.amountPrefix, amountPrefix = _b === void 0 ? '' : _b, _c = _a.amountSuffix, amountSuffix = _c === void 0 ? '' : _c, _d = _a.amount, amount = _d === void 0 ? 0 : _d;
+    if (amount === undefined)
+        return null;
+    var fullPointsText = "".concat(amountPrefix).concat(amount, " ").concat(amountSuffix).trim();
+    return (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] }) }));
+};
+
+/**
+ * Renders the media of a Points Tile.
+ *
+ * @returns JSX.Element or null if media is not present
+ */
+var RoundupTileMedia = function (_a) {
+    var isFullSize = _a.isFullSize;
+    var tileContext = useTileContext();
+    if (!isContextValid(tileContext))
+        return null;
+    var _b = tileContext.configuration, artworkUrl = _b.artworkUrl, _c = _b.title, title = _c === void 0 ? 'Balance' : _c;
+    var styles = useRoundupTileStyles(isFullSize);
+    if (!artworkUrl)
+        return null;
+    return (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' }) }));
+};
+
+/**
+ * Renders the title of a Roundup Tile.
+ *
+ * @returns JSX.Element or null if no title is present
+ */
+var RoundupTileTitle = function () {
+    var tileContext = useTileContext();
+    if (!isContextValid(tileContext))
+        return null;
+    var title = tileContext.configuration.title;
+    if (!title)
+        return null;
+    return (jsxRuntimeExports.jsx(Text, { variant: "eyebrow", testID: "roundup-tile-title", role: "heading", accessibilityLabel: title, children: title }));
+};
+
+/**
+ * Renders a chevron icon for a Roundup Tile.
+ *
+ * @returns JSX.Element
+ */
+var RoundupTileChevron = function () {
+    var _a, _b;
+    var tileContext = useTileContext();
+    var sdk = useWllSdk();
+    var styles = useRoundupTileStyles();
+    if (!isContextValid(tileContext))
+        return null;
+    var ctaLink = tileContext.configuration.ctaLink;
+    if (!ctaLink)
+        return null;
+    return (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" }) }));
+};
+
+/**
+ * The PointsTile component renders a tile with media, title, and formatted points.
+ *
+ * @param props - Component props
+ * @returns JSX.Element or null if tile is inactive or missing required props
+ */
+var RoundupTileRoot = function (_a) {
+    var tile = _a.tile;
+    if (!tile || !tile.active || !tile.configuration)
+        return null;
+    var config = tile.configuration;
+    if (!config)
+        return null;
+    var isFullSize = useTileSize(tile).isFullSize;
+    var styles = useRoundupTileStyles(isFullSize);
+    return (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, {})] })] }) })] }));
+};
+/**
+ * The PointsTile component with subcomponents attached.
+ */
+var RoundupTile = Object.assign(RoundupTileRoot, {
+    Title: RoundupTileTitle,
+    Points: RoundupTileFormattedPoints,
+    Media: RoundupTileMedia,
+    Chevron: RoundupTileChevron,
+});
+var RoundupTile$1 = withTileFetching(RoundupTile);
+
 var _a;
 var TILE_COMPONENTS = (_a = {},
     _a[exports.TileType.Content] = ContentTile$1,
@@ -5028,6 +5226,7 @@ var TILE_COMPONENTS = (_a = {},
     _a[exports.TileType.Reward] = RewardTile$1,
     _a[exports.TileType.RewardCategory] = RewardCategoryTile$1,
     _a[exports.TileType.Banner] = BannerTile$1,
+    _a[exports.TileType.Roundup] = RoundupTile$1,
     _a);
 /**
  * TileContainer component to render a list of tiles with proper layout and spacing.
@@ -5101,6 +5300,8 @@ exports.RewardCategoryTile = RewardCategoryTile$1;
 exports.RewardCategoryTileConfig = RewardCategoryTileConfig;
 exports.RewardTile = RewardTile$1;
 exports.RewardTileConfig = RewardTileConfig;
+exports.RoundupTile = RoundupTile$1;
+exports.RoundupTileConfig = RoundupTileConfig;
 exports.Row = Row;
 exports.Section = Section;
 exports.SectionHeader = SectionHeader;