@wlloyalty/wll-react-sdk 1.6.0 → 1.6.9

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

@@ -3,6 +3,7 @@ export declare const baseStyles: {
         position: "relative";
     };
     container: {
+        flex: number;
         width: "100%";
         height: "100%";
         overflow: "hidden";
@@ -24,6 +25,7 @@ export declare const baseStyles: {
  */
 export declare const useBaseTileStyles: () => {
     container: {
+        flex: number;
         width: "100%";
         height: "100%";
         overflow: "hidden";
@@ -56,13 +58,23 @@ export declare const useBaseTileStyles: () => {
     };
 } | {
     container: {
-        backgroundColor: string;
-        aspectRatio: number;
         borderRadius: number;
         justifyContent: "center";
         alignItems: "center";
+        height: undefined;
+        backgroundColor: string;
+        flex: number;
         width: "100%";
+        overflow: "hidden";
+        position: "relative";
+    } | {
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
         height: "100%";
+        backgroundColor: string;
+        flex: number;
+        width: "100%";
         overflow: "hidden";
         position: "relative";
     };

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

@@ -6,7 +6,7 @@ type ContentTileProps = {
 /**
  * The ContentTile component with subcomponents attached.
  */
-export declare const ContentTile: (({ tile }: ContentTileProps) => React.ReactElement | null) & {
+export declare const ContentTile: (({ tile, }: ContentTileProps) => React.ReactElement | null) & {
     Media: ({ isArtworkOnly, }: {
         isArtworkOnly: boolean;
     }) => React.ReactElement | null;

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

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

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

@@ -6,7 +6,7 @@ type RewardTileProps = {
 /**
  * The RewardTile component with subcomponents attached.
  */
-export declare const RewardTile: (({ tile }: RewardTileProps) => React.ReactElement | null) & {
+export declare const RewardTile: (({ tile, }: RewardTileProps) => React.ReactElement | null) & {
     Media: ({ isArtworkOnly, }: {
         isArtworkOnly: boolean;
     }) => React.ReactElement | null;

package/dist/types/components/organisms/TierTileUpdated/styles.d.ts

@@ -1,6 +1,5 @@
 export declare const useTierTileStyles: () => {
     header: {
-        flexBasis: "50%";
         width: "100%";
         overflow: "hidden";
         marginBottom: number;

package/dist/types/utils/storybookHelpers.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
-export declare const TileWrapper: ({ isHalfTile, children, }: {
+import { ViewStyle } from 'react-native';
+export declare const TileWrapper: ({ isHalfTile, containerStyle, children, }: {
     isHalfTile?: boolean;
+    containerStyle?: ViewStyle;
     children: React.ReactNode;
 }) => React.ReactElement;

package/dist/web.js

@@ -19007,7 +19007,8 @@ var styles$7 = StyleSheet$1.create({
     alignItems: 'center',
     justifyContent: 'center',
     width: '100%',
-    height: '100%'
+    height: '100%',
+    minHeight: 130
   }
 });
 
@@ -19039,7 +19040,7 @@ var Text = function (_a) {
       case 'body':
         return {
           color: theme.derivedSurfaceText[20],
-          fontSize: useResponsiveValue(theme.sizes.md, theme.sizes.xs, isDesktop, isTablet)
+          fontSize: useResponsiveValue(theme.sizes.md, theme.sizes.sm, isDesktop, isTablet)
         };
       case 'caption':
         return __assign(__assign({}, baseStyle), {
@@ -19425,6 +19426,7 @@ var baseStyles = StyleSheet$1.create({
     position: 'relative'
   },
   container: {
+    flex: 1,
     width: '100%',
     height: '100%',
     overflow: 'hidden',
@@ -19481,10 +19483,20 @@ var useBaseTileStyles = function () {
     artworkUrl = _b.artworkUrl,
     title = _b.title,
     body = _b.body;
+  // Access showDetails safely only for Reward tiles to avoid type errors on ContentTileConfig
+  var rewardShowDetails = tileContext.type === 'REWARD' ? tileContext.configuration.showDetails : undefined;
+  // In Reward tiles that show details (title, summary, points), the content height
+  // can exceed a square aspect ratio. To prevent clipping (e.g., points cut off in
+  // TwoPerRow), allow the container to naturally size and do not enforce aspectRatio.
+  var isRewardWithDetails = tileContext.type === 'REWARD' && rewardShowDetails !== false;
   return StyleSheet$1.create({
-    container: __assign(__assign({}, baseStyles.container), {
-      backgroundColor: theme.surface,
-      aspectRatio: isHalfSize ? 2 : 1,
+    container: __assign(__assign(__assign(__assign({}, baseStyles.container), {
+      backgroundColor: theme.surface
+    }), isRewardWithDetails ? {
+      height: undefined
+    } : {
+      height: '100%'
+    }), {
       borderRadius: useResponsiveValue(theme.sizes.borderRadiusLg, theme.sizes.borderRadiusSm, isDesktop, isTablet),
       justifyContent: 'center',
       alignItems: 'center'
@@ -19856,7 +19868,6 @@ var SkeletonTile = function (_a) {
 };
 var styles$4 = StyleSheet$1.create({
   container: {
-    aspectRatio: 1,
     overflow: 'hidden'
   }
 });
@@ -19932,10 +19943,6 @@ var styles$3 = StyleSheet$1.create({
   },
   skeleton: {
     overflow: 'hidden'
-  },
-  square: {
-    width: 1000 / 4,
-    aspectRatio: 1
   }
 });
 
@@ -20075,7 +20082,9 @@ var handleLastEarnedDate = function (date, userLocale) {
  */
 var BadgeTileDateEarned = function () {
   var tileContext = useTileContext();
-  if (!isContextValid(tileContext)) return null;
+  if (!isContextValid(tileContext)) {
+    return null;
+  }
   var _a = tileContext.configuration,
     count = _a.count,
     awardedDatePrefix = _a.awardedDatePrefix,
@@ -20174,7 +20183,6 @@ var useBadgeTileStyles = function () {
       fontWeight: 'bold'
     },
     header: {
-      flexBasis: '50%',
       alignItems: 'center',
       justifyContent: 'center',
       position: 'relative',
@@ -20238,7 +20246,9 @@ var BadgeTileMedia = function (_a) {
 var BadgeTileStatus = function () {
   var styles = useBadgeTileStyles();
   var tileContext = useTileContext();
-  if (!isContextValid(tileContext)) return null;
+  if (!isContextValid(tileContext)) {
+    return null;
+  }
   var _a = tileContext.configuration,
     count = _a.count,
     type = _a.type;
@@ -20543,13 +20553,6 @@ var useContentTileStyles = function (hasArtwork) {
       overflow: 'hidden'
     },
     image: {
-      position: 'absolute',
-      top: -1,
-      left: -1,
-      bottom: -1,
-      right: -1,
-      width: '102%',
-      height: '102%',
       resizeMode: 'cover'
     },
     content: {
@@ -20686,7 +20689,7 @@ var ContentTileRoot = function (_a) {
     tile: tile
   }, /*#__PURE__*/React.createElement(ContentTile.Media, {
     isArtworkOnly: isArtworkOnly$1(configuration)
-  }), /*#__PURE__*/React.createElement(Layout, {
+  }), !isArtworkOnly$1(configuration) && (/*#__PURE__*/React.createElement(Layout, {
     justify: hasArtwork ? 'start' : 'center',
     style: {
       paddingBottom: 0,
@@ -20696,7 +20699,7 @@ var ContentTileRoot = function (_a) {
     justify: "between",
     align: "center",
     style: styles.header
-  }, /*#__PURE__*/React.createElement(ContentTile.Title, null), /*#__PURE__*/React.createElement(ContentTile.Chevron, null)), /*#__PURE__*/React.createElement(ContentTile.Summary, null)));
+  }, /*#__PURE__*/React.createElement(ContentTile.Title, null), /*#__PURE__*/React.createElement(ContentTile.Chevron, null)), /*#__PURE__*/React.createElement(ContentTile.Summary, null))));
 };
 /**
  * The ContentTile component with subcomponents attached.
@@ -21300,9 +21303,7 @@ var Grid = function (_a) {
     if (IS_WEB) {
       return {
         width: "calc(".concat(100 / columns, "% - ").concat((columns - 1) * GRID_GAP / columns, "px)"),
-        marginBottom: GRID_GAP,
-        height: 'auto',
-        aspectRatio: 1
+        marginBottom: GRID_GAP
       };
     } else {
       var availableWidth = SCREEN_WIDTH - GRID_GAP * 2;
@@ -21310,8 +21311,7 @@ var Grid = function (_a) {
       var tileWidth = Math.floor((availableWidth - gapSpace) / columns);
       return {
         width: tileWidth,
-        marginBottom: GRID_GAP,
-        aspectRatio: 1
+        marginBottom: GRID_GAP
       };
     }
   }, []);
@@ -21886,7 +21886,8 @@ var FullFlex = function (_a) {
     rest = __rest(_a, ["children", "style"]);
   return /*#__PURE__*/React.createElement(View$2, __assign({
     style: [{
-      flex: 1
+      flex: 1,
+      direction: 'inherit'
     }, style]
   }, rest), children);
 };
@@ -21917,7 +21918,7 @@ var Layout = function (_a) {
     isTablet = _f.isTablet;
   var dynamicStyles = StyleSheet$1.create({
     container: {
-      flex: 1,
+      flexGrow: 1,
       paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
       paddingBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
       justifyContent: justifyMap[justify],
@@ -22297,7 +22298,11 @@ var RewardCategoryTileRoot = function (_a) {
   if (!tile || !tile.active || !tile.configuration) return null;
   return /*#__PURE__*/React.createElement(BaseTile, {
     tile: tile
-  }, /*#__PURE__*/React.createElement(RewardCategoryTile.Header, null), /*#__PURE__*/React.createElement(RewardCategoryTile.Media, null));
+  }, /*#__PURE__*/React.createElement(View$2, {
+    style: {
+      aspectRatio: 1
+    }
+  }, /*#__PURE__*/React.createElement(RewardCategoryTile.Header, null), /*#__PURE__*/React.createElement(RewardCategoryTile.Media, null)));
 };
 /**
  * The RewardCategoryTile component with subcomponents attached.
@@ -22339,17 +22344,13 @@ var useRewardTileStyles = function () {
   return StyleSheet$1.create({
     imageContainer: {
       width: '100%',
+      minHeight: 130,
       marginBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
     },
     image: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
       width: '100%',
       height: '100%',
-      resizeMode: 'cover'
+      objectFit: 'cover'
     },
     lockIcon: {
       position: 'absolute',
@@ -22361,8 +22362,7 @@ var useRewardTileStyles = function () {
       height: '100%'
     },
     content: {
-      paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
-      flex: 1
+      paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
     },
     footer: {
       marginTop: 8
@@ -22419,8 +22419,19 @@ var RewardTileMedia = function (_a) {
     _e = _b.isLocked,
     isLocked = _e === void 0 ? false : _e;
   if (!artworkUrl || !showArtwork) return null;
-  var containerStyle = {
-    flexBasis: isArtworkOnly ? '100%' : '50%'
+  // When artwork-only, the media should occupy the full tile height and compensate
+  // for any content layout that might be hidden. We therefore force the media
+  // container to flex and take the entire available height, removing default
+  // bottom margins and min-heights coming from styles.
+  var containerStyle = isArtworkOnly ? {
+    flexBasis: '100%',
+    flex: 1,
+    height: '100%',
+    marginBottom: 0,
+    minHeight: 0,
+    aspectRatio: 1
+  } : {
+    flexBasis: '50%'
   };
   return /*#__PURE__*/React.createElement(View$2, {
     style: [styles.imageContainer, containerStyle],
@@ -22467,15 +22478,15 @@ 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
   }, /*#__PURE__*/React.createElement(Row, {
     align: "center",
-    justify: "start",
-    style: {
-      marginTop: 8
-    }
+    justify: "start"
   }, pointsPrefix ? /*#__PURE__*/React.createElement(Text, {
     variant: "caption"
   }, pointsPrefix) : null, /*#__PURE__*/React.createElement(Text, {
@@ -22501,7 +22512,7 @@ var RewardTileSummary = function () {
     showPrice = _b === void 0 ? true : _b,
     price = _a.price;
   var shouldShowPrice = showPrice && price !== undefined && price !== null && price !== 0;
-  var numberOfLines = shouldShowPrice ? 1 : 3;
+  var numberOfLines = shouldShowPrice ? 2 : 3;
   if (!summary) return null;
   return /*#__PURE__*/React.createElement(Text, {
     variant: "body",
@@ -22562,15 +22573,22 @@ var RewardTileRoot = function (_a) {
   var styles = useRewardTileStyles();
   if (!tile || tile.tileHeight !== exports.TileHeight.Full || !tile.active || !tile.configuration) return null;
   var configuration = tile.configuration;
+  var artworkOnly = isArtworkOnly(configuration);
   return /*#__PURE__*/React.createElement(BaseTile, {
     tile: tile
   }, /*#__PURE__*/React.createElement(RewardTile.Media, {
-    isArtworkOnly: isArtworkOnly(configuration)
-  }), /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Row, {
+    isArtworkOnly: artworkOnly
+  }), !artworkOnly && (/*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Row, {
     justify: "between",
     align: "center",
     style: styles.header
-  }, /*#__PURE__*/React.createElement(RewardTile.Title, null), /*#__PURE__*/React.createElement(RewardTile.Chevron, null)), /*#__PURE__*/React.createElement(RewardTile.Summary, null), /*#__PURE__*/React.createElement(RewardTile.Points, null)));
+  }, /*#__PURE__*/React.createElement(RewardTile.Title, null), /*#__PURE__*/React.createElement(RewardTile.Chevron, null)), /*#__PURE__*/React.createElement(View$2, {
+    style: {
+      width: '100%',
+      maxWidth: '100%',
+      minWidth: 0
+    }
+  }, /*#__PURE__*/React.createElement(RewardTile.Summary, null)), /*#__PURE__*/React.createElement(RewardTile.Points, null))));
 };
 /**
  * The RewardTile component with subcomponents attached.
@@ -22591,7 +22609,6 @@ var useTierTileStyles = function () {
   var theme = useWllSdk().theme;
   return StyleSheet$1.create({
     header: {
-      flexBasis: '50%',
       width: '100%',
       overflow: 'hidden',
       marginBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
@@ -23189,7 +23206,7 @@ var TileContainer = function (_a) {
   });
   var halfHeightGap = allHalfHeight ? GRID_GAP / 2 : GRID_GAP;
   return /*#__PURE__*/React.createElement(View$2, {
-    style: [styles.container, allHalfHeight && styles.aspectContainer],
+    style: styles.container,
     testID: "tile-container"
   }, tiles.map(function (tile, index) {
     var TileComponent = TILE_COMPONENTS[tile.type];
@@ -23209,9 +23226,6 @@ var styles = StyleSheet$1.create({
     flex: 1,
     width: '100%'
   },
-  aspectContainer: {
-    aspectRatio: 1
-  },
   tileWrapper: {
     flex: 1,
     width: '100%'
@@ -23280,7 +23294,7 @@ var Chip = function (_a) {
     _b = _a.variant,
     variant = _b === void 0 ? exports.StatusVariant.PRIMARY : _b,
     _c = _a.role,
-    role = _c === void 0 ? 'status' : _c,
+    role = _c === void 0 ? 'text' : _c,
     _d = _a.ariaLive,
     ariaLive = _d === void 0 ? 'polite' : _d,
     accessibilityLabel = _a.accessibilityLabel,