@wlloyalty/wll-react-sdk 1.8.0 → 1.8.1

package/dist/types/components/organisms/RewardTile/RewardTile.stories.d.ts

@@ -16,6 +16,21 @@ export declare const Locked: import("@storybook/core/csf").AnnotatedStoryFn<impo
 export declare const ArtworkOnlyLocked: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
     tile: import("../../..").Tile;
 }, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const OutOfStock: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../..").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const ArtworkOnlyOutOfStock: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../..").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const StockRemaining: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../..").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const StockRemainingWithPoints: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../..").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
 export declare const TwoPerRow: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
     tile: import("../../..").Tile;
 }, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const TwoPerRowMerchandise: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../..").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;

package/dist/types/components/organisms/RewardTile/index.d.ts

@@ -14,6 +14,7 @@ export declare const RewardTile: (({ tile, }: RewardTileProps) => React.ReactEle
     Summary: () => React.ReactElement | null;
     Points: () => React.ReactElement | null;
     Chevron: () => React.ReactElement;
+    Status: () => React.ReactElement | null;
 };
 declare const _default: (props: Omit<RewardTileProps, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps) => React.JSX.Element;
 export default _default;

package/dist/types/components/organisms/RewardTile/reward-tile-status.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * Renders availability status for a Reward Tile.
+ *
+ * @returns React.ReactElement or null if the reward is purchasable
+ */
+export declare const RewardTileStatus: () => React.ReactElement | null;

package/dist/types/types/tile.d.ts

@@ -84,6 +84,10 @@ export 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/web.js

@@ -22740,7 +22740,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',
@@ -22769,6 +22770,10 @@ var useRewardTileStyles = function () {
       justifyContent: 'center',
       alignItems: 'center',
       zIndex: 10
+    },
+    statusChip: {
+      flexShrink: 1,
+      marginLeft: 'auto'
     }
   });
 };
@@ -22855,9 +22860,6 @@ var RewardTilePoints = function () {
   var calculatedPoints = applyMultiplier(price, pointsMultiplier);
   var accessibilityLabel = getPointsLabel('Reward points:', calculatedPoints, pointsPrefix, pointsSuffix);
   return /*#__PURE__*/React.createElement(View$2, {
-    style: {
-      marginTop: 'auto'
-    },
     testID: "reward-tile-points",
     role: "article",
     accessibilityLabel: accessibilityLabel
@@ -22875,6 +22877,34 @@ var RewardTilePoints = function () {
   }, 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 /*#__PURE__*/React.createElement(Chip, {
+    label: label,
+    role: "status",
+    ariaLive: "off",
+    accessibilityLabel: label,
+    testID: "reward-tile-status",
+    variant: exports.StatusVariant.GREY,
+    style: styles.statusChip
+  });
+};
+
 /**
  * Renders the summary of a Reward Tile.
  *
@@ -22951,6 +22981,10 @@ var RewardTileRoot = function (_a) {
   if (!tile || tile.tileHeight !== exports.TileHeight.Full || !tile.active || !tile.configuration) return null;
   var configuration = tile.configuration;
   var artworkOnly = isArtworkOnly(configuration);
+  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 /*#__PURE__*/React.createElement(BaseTile, {
     tile: tile
   }, /*#__PURE__*/React.createElement(RewardTile.Media, {
@@ -22965,7 +22999,11 @@ var RewardTileRoot = function (_a) {
       maxWidth: '100%',
       minWidth: 0
     }
-  }, /*#__PURE__*/React.createElement(RewardTile.Summary, null)), /*#__PURE__*/React.createElement(RewardTile.Points, null))));
+  }, /*#__PURE__*/React.createElement(RewardTile.Summary, null)), hasFooter && (/*#__PURE__*/React.createElement(Row, {
+    justify: "between",
+    align: "center",
+    style: styles.footer
+  }, /*#__PURE__*/React.createElement(RewardTile.Points, null), /*#__PURE__*/React.createElement(RewardTile.Status, null))))));
 };
 /**
  * The RewardTile component with subcomponents attached.
@@ -22975,7 +23013,8 @@ var RewardTile = Object.assign(RewardTileRoot, {
   Title: RewardTileTitle,
   Summary: RewardTileSummary,
   Points: RewardTilePoints,
-  Chevron: RewardTileChevron
+  Chevron: RewardTileChevron,
+  Status: RewardTileStatus
 });
 var RewardTile$1 = withTileFetching(RewardTile);