@wlloyalty/wll-react-sdk 1.8.0 → 1.9.0

package/dist/types/components/atoms/Chip/styles.d.ts

@@ -6,7 +6,7 @@ export declare const useChipStyles: () => {
         flexDirection: "row";
         paddingHorizontal: number;
         paddingVertical: number;
-        borderRadius: 9999;
+        borderRadius: number;
         overflow: "hidden";
         flexShrink: number;
     };

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/theme.d.ts

@@ -1,4 +1,3 @@
-import { sizes } from '../utils/styling';
 import { WithChildren } from './helpers';
 import { BadgeTileType } from './tile';
 export type PercentageKey = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 95;
@@ -6,6 +5,23 @@ export type DerivedColors = {
     [K in PercentageKey]: string;
 };
 export type DesaturationType = BadgeTileType.Specific | BadgeTileType.Latest;
+export 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;
+};
 export type BaseThemeObject = {
     fontFamily: string;
     accent: string;
@@ -19,6 +35,7 @@ export type BaseThemeObject = {
     surface: string;
     surfaceText: string;
     text: string;
+    sizes?: Partial<Sizes>;
 };
 export type DerivedProperties = {
     accentText: string;
@@ -32,7 +49,7 @@ export type DerivedProperties = {
     alphaDerivedText: DerivedColors;
 };
 export type ThemeObject = BaseThemeObject & DerivedProperties & {
-    readonly sizes: typeof sizes;
+    sizes: Sizes;
 };
 export type ThemeContextType = {
     theme: ThemeObject;

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/types/utils/storybookThemes.d.ts

@@ -13,6 +13,7 @@ export declare const storyBookThemes: {
         pageButtonText: string;
         positive: string;
         text: string;
+        sizes?: Partial<import("../types/theme").Sizes>;
     };
     warm: {
         primary: string;
@@ -27,6 +28,7 @@ export declare const storyBookThemes: {
         pageButtonText: string;
         positive: string;
         text: string;
+        sizes?: Partial<import("../types/theme").Sizes>;
     };
     dark: {
         background: string;
@@ -41,6 +43,7 @@ export declare const storyBookThemes: {
         pageButtonBackground: string;
         pageButtonText: string;
         positive: string;
+        sizes?: Partial<import("../types/theme").Sizes>;
     };
     forest: {
         primary: string;
@@ -55,6 +58,7 @@ export declare const storyBookThemes: {
         pageButtonText: string;
         positive: string;
         text: string;
+        sizes?: Partial<import("../types/theme").Sizes>;
     };
     sunset: {
         primary: string;
@@ -69,6 +73,7 @@ export declare const storyBookThemes: {
         pageButtonText: string;
         positive: string;
         text: string;
+        sizes?: Partial<import("../types/theme").Sizes>;
     };
 };
 export type ThemeName = 'default' | 'dark' | 'modern' | 'warm' | 'forest' | 'sunset';

package/dist/web.js

@@ -8914,9 +8914,11 @@ var createTheme = function (baseTheme) {
   if (baseTheme === void 0) {
     baseTheme = {};
   }
-  var mergedTheme = __assign(__assign({}, defaultTheme), baseTheme);
+  var userSizes = baseTheme.sizes,
+    restBaseTheme = __rest(baseTheme, ["sizes"]);
+  var mergedTheme = __assign(__assign({}, defaultTheme), restBaseTheme);
   return __assign(__assign({}, mergedTheme), {
-    sizes: sizes,
+    sizes: __assign(__assign({}, sizes), userSizes),
     derivedBackground: getDerivedColor(mergedTheme.background),
     primaryText: getReadableTextColor(mergedTheme.primary),
     accentText: getReadableTextColor(mergedTheme.accent),
@@ -22740,7 +22742,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 +22772,10 @@ var useRewardTileStyles = function () {
       justifyContent: 'center',
       alignItems: 'center',
       zIndex: 10
+    },
+    statusChip: {
+      flexShrink: 1,
+      marginLeft: 'auto'
     }
   });
 };
@@ -22855,9 +22862,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 +22879,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 +22983,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 +23001,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 +23015,8 @@ var RewardTile = Object.assign(RewardTileRoot, {
   Title: RewardTileTitle,
   Summary: RewardTileSummary,
   Points: RewardTilePoints,
-  Chevron: RewardTileChevron
+  Chevron: RewardTileChevron,
+  Status: RewardTileStatus
 });
 var RewardTile$1 = withTileFetching(RewardTile);