@wlloyalty/wll-react-sdk 1.8.0 → 1.9.0

package/README.md

@@ -4,12 +4,12 @@
 
 [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196?logo=conventionalcommits&logoColor=white)](https://conventionalcommits.org)
 [![React Support](https://img.shields.io/badge/React-18.0.0+-61DAFB?logo=react&logoColor=white)](https://reactjs.org/)
-[![React Native Support](https://img.shields.io/badge/React%20Native-0.70--0.72-61DAFB?logo=react&logoColor=white)](https://reactnative.dev/)
+[![React Native Support](https://img.shields.io/badge/React%20Native-0.77.0+-61DAFB?logo=react&logoColor=white)](https://reactnative.dev/)
 
 ## ✨ Features
 
 - 🎨 **Flexible Theming** - Full control over visual styling with automatic color derivation and responsive design system
-- 🧩 **Composable Tiles** - Pre-built components for rewards, points, badges, and tiers that work together seamlessly
+- 🧩 **Composable Tiles** - Pre-built components for rewards, points, badges, banners, venues, and tiers that work together seamlessly
 - 🔌 **Platform Agnostic** - Bring your own navigation and network layer to integrate with any React application
 - 📱 **Mobile First** - Responsive components optimized for both mobile and desktop experiences
 - 🔒 **Secure by Design** - Built-in support for custom API integration through your own backend proxy
@@ -35,8 +35,8 @@ yarn add @wlloyalty/wll-react-sdk
 
 The SDK is compatible with:
 
-- React: ^18.0.0
-- React Native: >=0.70.0 <0.73.0
+- React: >=18.0.0
+- React Native: >=0.77.0
 
 Please ensure your project meets these version requirements for optimal compatibility.
 
@@ -140,7 +140,7 @@ The script will generate a new component with the proper file structure and boil
 
 MIT License - See [LICENSE](LICENSE) for more information.
 
-Copyright (c) 2024 WLL
+Copyright (c) 2026 WLL
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/dist/index.d.ts

@@ -4,52 +4,6 @@ import * as LucideReactIcons from 'lucide-react';
 import * as react_native from 'react-native';
 import { ViewProps, ImageSourcePropType, StyleProp, TextProps as TextProps$1, TextStyle, ViewStyle, ImageProps, AccessibilityRole, RefreshControl } from 'react-native';
 
-declare const sizes: {
-    readonly borderRadiusSm: 15;
-    readonly borderRadiusLg: 20;
-    readonly borderRadiusButton: 9;
-    readonly borderRadiusRounded: 9999;
-    readonly xxxs: 4;
-    readonly xxs: 8;
-    readonly xs: 10;
-    readonly sm: 12;
-    readonly md: 14;
-    readonly lg: 16;
-    readonly xl: 20;
-    readonly xxl: 24;
-    readonly xxxl: 32;
-    readonly xxxxl: 40;
-    readonly xxxxxl: 60;
-};
-declare const commonStyles: {
-    emptyContainer: {
-        flex: number;
-        justifyContent: "center";
-        alignItems: "center";
-    };
-};
-declare const defaultTheme: BaseThemeObject;
-/**
- * Creates appropriate directional margin styles for both web and native platforms.
- * Handles RTL layouts correctly across platforms by using the I18nManager.
- *
- * @param value - The margin value to apply
- * @returns An object with the appropriate margin style property
- */
-declare const getDirectionalMargin: (value: number) => {
-    marginLeft: number;
-    marginRight?: undefined;
-    marginEnd?: undefined;
-} | {
-    marginRight: number;
-    marginLeft?: undefined;
-    marginEnd?: undefined;
-} | {
-    marginEnd: number;
-    marginLeft?: undefined;
-    marginRight?: undefined;
-};
-
 /**
  * Adds optional children to any component props.
  */
@@ -203,6 +157,10 @@ declare class RewardTileConfig {
     priority: number;
     availability: Availability;
     purchasable: boolean;
+    stockCapacity?: number;
+    stockConsumed?: number;
+    outOfStockMessage?: string;
+    stockRemainingMessage?: string;
     tier: string | null;
     category: RewardCategory;
     discounts: any[];
@@ -312,6 +270,23 @@ type DerivedColors = {
     [K in PercentageKey]: string;
 };
 type DesaturationType = BadgeTileType.Specific | BadgeTileType.Latest;
+type Sizes = {
+    borderRadiusSm: number;
+    borderRadiusLg: number;
+    borderRadiusButton: number;
+    borderRadiusRounded: number;
+    xxxs: number;
+    xxs: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+    xxxl: number;
+    xxxxl: number;
+    xxxxxl: number;
+};
 type BaseThemeObject = {
     fontFamily: string;
     accent: string;
@@ -325,6 +300,7 @@ type BaseThemeObject = {
     surface: string;
     surfaceText: string;
     text: string;
+    sizes?: Partial<Sizes>;
 };
 type DerivedProperties = {
     accentText: string;
@@ -338,7 +314,7 @@ type DerivedProperties = {
     alphaDerivedText: DerivedColors;
 };
 type ThemeObject = BaseThemeObject & DerivedProperties & {
-    readonly sizes: typeof sizes;
+    sizes: Sizes;
 };
 type ThemeContextType = {
     theme: ThemeObject;
@@ -905,6 +881,52 @@ declare const useGetGroupByID: (config: SDKConfig) => (id: string) => Promise<AP
 declare const useGetSectionByID: (config: SDKConfig) => (id: string) => Promise<APIResponse<unknown>>;
 declare const useGetTileByID: (config: SDKConfig) => (id: string) => Promise<APIResponse<unknown>>;
 
+declare const sizes: {
+    readonly borderRadiusSm: 15;
+    readonly borderRadiusLg: 20;
+    readonly borderRadiusButton: 9;
+    readonly borderRadiusRounded: 9999;
+    readonly xxxs: 4;
+    readonly xxs: 8;
+    readonly xs: 10;
+    readonly sm: 12;
+    readonly md: 14;
+    readonly lg: 16;
+    readonly xl: 20;
+    readonly xxl: 24;
+    readonly xxxl: 32;
+    readonly xxxxl: 40;
+    readonly xxxxxl: 60;
+};
+declare const commonStyles: {
+    emptyContainer: {
+        flex: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+};
+declare const defaultTheme: BaseThemeObject;
+/**
+ * Creates appropriate directional margin styles for both web and native platforms.
+ * Handles RTL layouts correctly across platforms by using the I18nManager.
+ *
+ * @param value - The margin value to apply
+ * @returns An object with the appropriate margin style property
+ */
+declare const getDirectionalMargin: (value: number) => {
+    marginLeft: number;
+    marginRight?: undefined;
+    marginEnd?: undefined;
+} | {
+    marginRight: number;
+    marginLeft?: undefined;
+    marginEnd?: undefined;
+} | {
+    marginEnd: number;
+    marginLeft?: undefined;
+    marginRight?: undefined;
+};
+
 type ThemeName = 'default' | 'dark' | 'modern' | 'warm' | 'forest' | 'sunset';
 declare const themes: Record<ThemeName, BaseThemeObject>;
 declare const themeItems: Array<{
@@ -1025,4 +1047,4 @@ declare const useInitialGroupFetch: ({ id, setGroupData, }: UseInitialGroupFetch
 declare const useNavigation: (config: NavigationConfig) => (link: string, ctaTarget: CTALinkTarget) => Promise<void>;
 
 export { BUTTON_SIZE, _default$7 as BadgeTile, BadgeTileConfig, BadgeTileType, _default$6 as BannerTile, BannerTileConfig, BaseBanner, BaseTile, Button, COLOR_CONSTANTS, CTALinkTarget, Carousel, CarouselNavButton, Chip, Column, _default$5 as ContentTile, ContentTileConfig, CoreApiUrl, DIMENSION_MODES, EventEmitter, FullFlex, GRID_GAP, Grid, Group, IS_ANDROID, IS_DESKTOP, IS_IOS, IS_MOBILE, IS_WEB, Icon, Indicator, Layout, LoadingIndicator, MAX_WIDTH, _default$4 as PointsTile, PointsTileConfig, ProgressBar, ProgressIndicator, ProgressType, ProgressiveImage, Reward, _default$3 as RewardCategoryTile, RewardCategoryTileConfig, _default$2 as RewardTile, RewardTileConfig, _default$1 as RoundupTile, RoundupTileConfig, Row, SCREEN_HEIGHT, SCREEN_WIDTH, SLIDE_WIDTH, SMALL_SCREEN_WIDTH, Section, SectionHeader, SectionType, Skeleton, Spacer, StatusVariant, TABLET_SCREEN_WIDTH, Text, TierTileConfig, TierTileType, TierTile as TierTileUpdated, TileContainer, TileHeight, TileType, _default as VenueTile, VenueTileConfig, WllSdkProvider, alignMap, commonStyles, createResourceGetter, defaultTheme, desaturateColor, getAlphaDerivedColors, getDerivedColor, getDerivedColorPercentages, getDimensionMode, getDirectionalMargin, getReadableTextColor, getResponsiveValue, getStateColor, handleLastEarnedDate, justifyMap, sdkEventEmitter, shouldDesaturate, sizes, sortByPriority, themeItems, themes, transformLocale, useCreateRequestOptions, useGetGroupByID, useGetSectionByID, useGetTileByID, useGroupRefresh, useInitialGroupFetch, useInvalidateData, useMakeRequest, useNavigation, usePullToRefresh, useResponsive, useResponsiveValue, useTileSize, useWllSdk, validateTheme };
-export type { APIResponse$1 as APIResponse, Align, AllowedCoreApiUrl, Availability, Badge, BadgeDetail, BaseThemeObject, DerivedColors, DerivedProperties, DesaturationType, EventCallback, EventTypes, FlexDirection, ImagePropsNoSource, Justify, LayoutProps$1 as LayoutProps, NavigationConfig, NavigationType, PercentageKey, ProgessType, RewardCategory, SDKConfig, Size, TGroup, TSection, ThemeContextType, ThemeName, ThemeObject, ThemeProviderProps, TierType, Tile, TileConfig, TileSizeInfo, Variant };
+export type { APIResponse$1 as APIResponse, Align, AllowedCoreApiUrl, Availability, Badge, BadgeDetail, BaseThemeObject, DerivedColors, DerivedProperties, DesaturationType, EventCallback, EventTypes, FlexDirection, ImagePropsNoSource, Justify, LayoutProps$1 as LayoutProps, NavigationConfig, NavigationType, PercentageKey, ProgessType, RewardCategory, SDKConfig, Size, Sizes, TGroup, TSection, ThemeContextType, ThemeName, ThemeObject, ThemeProviderProps, TierType, Tile, TileConfig, TileSizeInfo, Variant };

package/dist/native.js

@@ -1072,8 +1072,9 @@ exports.CoreApiUrl = void 0;
 })(exports.CoreApiUrl || (exports.CoreApiUrl = {}));
 var createTheme = function (baseTheme) {
     if (baseTheme === void 0) { baseTheme = {}; }
-    var mergedTheme = __assign(__assign({}, defaultTheme), baseTheme);
-    return __assign(__assign({}, mergedTheme), { sizes: sizes, derivedBackground: getDerivedColor(mergedTheme.background), primaryText: getReadableTextColor(mergedTheme.primary), accentText: getReadableTextColor(mergedTheme.accent), positiveText: getReadableTextColor(mergedTheme.positive), negativeText: getReadableTextColor(mergedTheme.negative), derivedSurface: getDerivedColorPercentages(mergedTheme.surface), derivedSurfaceText: getDerivedColorPercentages(mergedTheme.surfaceText), alphaDerivedPrimary: getAlphaDerivedColors(mergedTheme.primary), alphaDerivedText: getAlphaDerivedColors(mergedTheme.text) });
+    var userSizes = baseTheme.sizes, restBaseTheme = __rest(baseTheme, ["sizes"]);
+    var mergedTheme = __assign(__assign({}, defaultTheme), restBaseTheme);
+    return __assign(__assign({}, mergedTheme), { sizes: __assign(__assign({}, sizes), userSizes), derivedBackground: getDerivedColor(mergedTheme.background), primaryText: getReadableTextColor(mergedTheme.primary), accentText: getReadableTextColor(mergedTheme.accent), positiveText: getReadableTextColor(mergedTheme.positive), negativeText: getReadableTextColor(mergedTheme.negative), derivedSurface: getDerivedColorPercentages(mergedTheme.surface), derivedSurfaceText: getDerivedColorPercentages(mergedTheme.surfaceText), alphaDerivedPrimary: getAlphaDerivedColors(mergedTheme.primary), alphaDerivedText: getAlphaDerivedColors(mergedTheme.text) });
 };
 var WllSdkContext = React.createContext(undefined);
 var WllSdkProvider = function (_a) {
@@ -4136,7 +4137,8 @@ var useRewardTileStyles = function () {
             paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
         },
         footer: {
-            marginTop: 8,
+            width: '100%',
+            marginTop: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
         },
         pointsContainer: {
             flexDirection: 'row',
@@ -4163,6 +4165,10 @@ var useRewardTileStyles = function () {
             alignItems: 'center',
             zIndex: 10,
         },
+        statusChip: {
+            flexShrink: 1,
+            marginLeft: 'auto',
+        },
     });
 };
 
@@ -4214,7 +4220,27 @@ var RewardTilePoints = function () {
         return null;
     var calculatedPoints = applyMultiplier(price, pointsMultiplier);
     var accessibilityLabel = getPointsLabel('Reward points:', calculatedPoints, pointsPrefix, pointsSuffix);
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: { marginTop: 'auto' }, testID: "reward-tile-points", role: "article", accessibilityLabel: accessibilityLabel, children: jsxRuntimeExports.jsxs(Row, { align: "center", justify: "start", children: [pointsPrefix ? jsxRuntimeExports.jsx(Text, { variant: "caption", children: pointsPrefix }) : null, jsxRuntimeExports.jsx(Text, { variant: "caption", testID: "reward-tile-points-value", children: calculatedPoints }), pointsSuffix ? (jsxRuntimeExports.jsx(Text, { variant: "caption", style: styles.suffix, children: pointsSuffix })) : null] }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { testID: "reward-tile-points", role: "article", accessibilityLabel: accessibilityLabel, children: jsxRuntimeExports.jsxs(Row, { align: "center", justify: "start", children: [pointsPrefix ? jsxRuntimeExports.jsx(Text, { variant: "caption", children: pointsPrefix }) : null, jsxRuntimeExports.jsx(Text, { variant: "caption", testID: "reward-tile-points-value", children: calculatedPoints }), pointsSuffix ? (jsxRuntimeExports.jsx(Text, { variant: "caption", style: styles.suffix, children: pointsSuffix })) : null] }) }));
+};
+
+/**
+ * Renders availability status for a Reward Tile.
+ *
+ * @returns React.ReactElement or null if the reward is purchasable
+ */
+var RewardTileStatus = function () {
+    var styles = useRewardTileStyles();
+    var tileContext = useTileContext();
+    if (!isContextValid(tileContext))
+        return null;
+    var _a = tileContext.configuration, stockCapacity = _a.stockCapacity, stockConsumed = _a.stockConsumed, outOfStockMessage = _a.outOfStockMessage, stockRemainingMessage = _a.stockRemainingMessage;
+    var isOutOfStock = stockCapacity !== undefined &&
+        stockConsumed !== undefined &&
+        stockCapacity <= stockConsumed;
+    var label = isOutOfStock ? outOfStockMessage : stockRemainingMessage;
+    if (!label)
+        return null;
+    return (jsxRuntimeExports.jsx(Chip, { label: label, role: "status", ariaLive: "off", accessibilityLabel: label, testID: "reward-tile-status", variant: exports.StatusVariant.GREY, style: styles.statusChip }));
 };
 
 /**
@@ -4283,7 +4309,17 @@ var RewardTileRoot = function (_a) {
         return null;
     var configuration = tile.configuration;
     var artworkOnly = isArtworkOnly(configuration);
-    return (jsxRuntimeExports.jsxs(BaseTile, { tile: tile, children: [jsxRuntimeExports.jsx(RewardTile.Media, { isArtworkOnly: artworkOnly }), !artworkOnly && (jsxRuntimeExports.jsxs(Layout, { children: [jsxRuntimeExports.jsxs(Row, { justify: "between", align: "center", style: styles.header, children: [jsxRuntimeExports.jsx(RewardTile.Title, {}), jsxRuntimeExports.jsx(RewardTile.Chevron, {})] }), jsxRuntimeExports.jsx(reactNative.View, { style: { width: '100%', maxWidth: '100%', minWidth: 0 }, children: jsxRuntimeExports.jsx(RewardTile.Summary, {}) }), jsxRuntimeExports.jsx(RewardTile.Points, {})] }))] }));
+    var hasPoints = configuration.showPrice !== false &&
+        configuration.price !== undefined &&
+        configuration.price !== 0;
+    var isOutOfStock = configuration.stockCapacity !== undefined &&
+        configuration.stockConsumed !== undefined &&
+        configuration.stockCapacity <= configuration.stockConsumed;
+    var hasStatus = isOutOfStock
+        ? !!configuration.outOfStockMessage
+        : !!configuration.stockRemainingMessage;
+    var hasFooter = hasPoints || hasStatus;
+    return (jsxRuntimeExports.jsxs(BaseTile, { tile: tile, children: [jsxRuntimeExports.jsx(RewardTile.Media, { isArtworkOnly: artworkOnly }), !artworkOnly && (jsxRuntimeExports.jsxs(Layout, { children: [jsxRuntimeExports.jsxs(Row, { justify: "between", align: "center", style: styles.header, children: [jsxRuntimeExports.jsx(RewardTile.Title, {}), jsxRuntimeExports.jsx(RewardTile.Chevron, {})] }), jsxRuntimeExports.jsx(reactNative.View, { style: { width: '100%', maxWidth: '100%', minWidth: 0 }, children: jsxRuntimeExports.jsx(RewardTile.Summary, {}) }), hasFooter && (jsxRuntimeExports.jsxs(Row, { justify: "between", align: "center", style: styles.footer, children: [jsxRuntimeExports.jsx(RewardTile.Points, {}), jsxRuntimeExports.jsx(RewardTile.Status, {})] }))] }))] }));
 };
 /**
  * The RewardTile component with subcomponents attached.
@@ -4294,6 +4330,7 @@ var RewardTile = Object.assign(RewardTileRoot, {
     Summary: RewardTileSummary,
     Points: RewardTilePoints,
     Chevron: RewardTileChevron,
+    Status: RewardTileStatus,
 });
 var RewardTile$1 = withTileFetching(RewardTile);