@wlloyalty/wll-react-sdk 1.8.0 → 1.8.1

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

@@ -203,6 +203,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[];

package/dist/native.js

@@ -4136,7 +4136,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 +4164,10 @@ var useRewardTileStyles = function () {
             alignItems: 'center',
             zIndex: 10,
         },
+        statusChip: {
+            flexShrink: 1,
+            marginLeft: 'auto',
+        },
     });
 };
 
@@ -4214,7 +4219,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 +4308,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 +4329,7 @@ var RewardTile = Object.assign(RewardTileRoot, {
     Summary: RewardTileSummary,
     Points: RewardTilePoints,
     Chevron: RewardTileChevron,
+    Status: RewardTileStatus,
 });
 var RewardTile$1 = withTileFetching(RewardTile);