@wlloyalty/wll-react-sdk 1.6.0 → 1.6.9-alpha.20251218052322.cca85de

package/dist/native.js

@@ -2401,6 +2401,7 @@ var styles$7 = reactNative.StyleSheet.create({
         justifyContent: 'center',
         width: '100%',
         height: '100%',
+        minHeight: 130,
     },
 });
 
@@ -2420,7 +2421,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), { fontWeight: 'bold', fontSize: useResponsiveValue(theme.sizes.xxl, theme.sizes.xl, isDesktop, isTablet), color: theme.primary });
@@ -2783,6 +2784,7 @@ var baseStyles = reactNative.StyleSheet.create({
         position: 'relative',
     },
     container: {
+        flex: 1,
         width: '100%',
         height: '100%',
         overflow: 'hidden',
@@ -2834,8 +2836,19 @@ var useBaseTileStyles = function () {
     var sizeInfo = useTileSize(tileContext);
     var isHalfSize = (sizeInfo === null || sizeInfo === void 0 ? void 0 : sizeInfo.isHalfSize) || false;
     var _b = tileContext.configuration, 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 reactNative.StyleSheet.create({
-        container: __assign(__assign({}, baseStyles.container), { backgroundColor: theme.surface, aspectRatio: isHalfSize ? 2 : 1, borderRadius: useResponsiveValue(theme.sizes.borderRadiusLg, theme.sizes.borderRadiusSm, isDesktop, isTablet), justifyContent: 'center', alignItems: 'center' }),
+        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' }),
         content: __assign(__assign({}, baseStyles.content), { justifyContent: 'center', height: !artworkUrl ? '100%' : undefined }),
         header: {
             marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
@@ -2981,7 +2994,10 @@ var BaseTileContainer = function (_a) {
     var _b = tile.configuration, _c = _b.ctaLink, ctaLink = _c === void 0 ? '' : _c, ctaLinkTarget = _b.ctaLinkTarget, _d = _b.title, title = _d === void 0 ? 'Tile' : _d;
     var theme = (sdk === null || sdk === void 0 ? void 0 : sdk.theme) || { surface: '#ffffff' };
     var handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
-    var isInteractive = Boolean(ctaLink || tile.type === 'REWARD' || tile.type === 'REWARD_CATEGORY' || tile.type === 'VENUE');
+    var isInteractive = Boolean(ctaLink ||
+        tile.type === 'REWARD' ||
+        tile.type === 'REWARD_CATEGORY' ||
+        tile.type === 'VENUE');
     var layout = {
         flexDirection: 'column',
         justifyContent: isHalfSize ? 'center' : 'flex-start',
@@ -3115,7 +3131,6 @@ var SkeletonTile = function (_a) {
 };
 var styles$4 = reactNative.StyleSheet.create({
     container: {
-        aspectRatio: 1,
         overflow: 'hidden',
     },
 });
@@ -3184,10 +3199,6 @@ var styles$3 = reactNative.StyleSheet.create({
     skeleton: {
         overflow: 'hidden',
     },
-    square: {
-        width: 1000 / 4,
-        aspectRatio: 1,
-    },
 });
 
 function withTileFetching(WrappedComponent) {
@@ -3310,8 +3321,9 @@ var handleLastEarnedDate = function (date, userLocale) {
  */
 var BadgeTileDateEarned = function () {
     var tileContext = useTileContext();
-    if (!isContextValid(tileContext))
+    if (!isContextValid(tileContext)) {
         return null;
+    }
     var _a = tileContext.configuration, count = _a.count, awardedDatePrefix = _a.awardedDatePrefix, lastEarnedAt = _a.lastEarnedAt, badgeNotEarnedMessage = _a.badgeNotEarnedMessage, type = _a.type, locale = _a.locale;
     // Don't show for Latest type with count=0
     if (type === exports.BadgeTileType.Latest && count === 0) {
@@ -3393,7 +3405,6 @@ var useBadgeTileStyles = function () {
             fontWeight: 'bold',
         },
         header: {
-            flexBasis: '50%',
             alignItems: 'center',
             justifyContent: 'center',
             position: 'relative',
@@ -3445,8 +3456,9 @@ var BadgeTileMedia = function (_a) {
 var BadgeTileStatus = function () {
     var styles = useBadgeTileStyles();
     var tileContext = useTileContext();
-    if (!isContextValid(tileContext))
+    if (!isContextValid(tileContext)) {
         return null;
+    }
     var _a = tileContext.configuration, count = _a.count, type = _a.type;
     if (type !== exports.BadgeTileType.Specific || count === 1) {
         return null;
@@ -3675,13 +3687,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: {
@@ -3795,7 +3800,7 @@ var ContentTileRoot = function (_a) {
     var configuration = tile.configuration;
     var hasArtwork = Boolean(configuration.artworkUrl);
     var styles = useContentTileStyles(hasArtwork);
-    return (jsxRuntimeExports.jsxs(BaseTile, { tile: tile, children: [jsxRuntimeExports.jsx(ContentTile.Media, { isArtworkOnly: isArtworkOnly$1(configuration) }), jsxRuntimeExports.jsxs(Layout, { justify: hasArtwork ? 'start' : 'center', style: { paddingBottom: 0, marginBottom: 0 }, children: [jsxRuntimeExports.jsxs(Row, { justify: "between", align: "center", style: styles.header, children: [jsxRuntimeExports.jsx(ContentTile.Title, {}), jsxRuntimeExports.jsx(ContentTile.Chevron, {})] }), jsxRuntimeExports.jsx(ContentTile.Summary, {})] })] }));
+    return (jsxRuntimeExports.jsxs(BaseTile, { tile: tile, children: [jsxRuntimeExports.jsx(ContentTile.Media, { isArtworkOnly: isArtworkOnly$1(configuration) }), !isArtworkOnly$1(configuration) && (jsxRuntimeExports.jsxs(Layout, { justify: hasArtwork ? 'start' : 'center', style: { paddingBottom: 0, marginBottom: 0 }, children: [jsxRuntimeExports.jsxs(Row, { justify: "between", align: "center", style: styles.header, children: [jsxRuntimeExports.jsx(ContentTile.Title, {}), jsxRuntimeExports.jsx(ContentTile.Chevron, {})] }), jsxRuntimeExports.jsx(ContentTile.Summary, {})] }))] }));
 };
 /**
  * The ContentTile component with subcomponents attached.
@@ -4283,8 +4288,6 @@ var Grid = function (_a) {
             return {
                 width: "calc(".concat(100 / columns, "% - ").concat(((columns - 1) * GRID_GAP) / columns, "px)"),
                 marginBottom: GRID_GAP,
-                height: 'auto',
-                aspectRatio: 1,
             };
         }
         else {
@@ -4294,7 +4297,6 @@ var Grid = function (_a) {
             return {
                 width: tileWidth,
                 marginBottom: GRID_GAP,
-                aspectRatio: 1,
             };
         }
     }, []);
@@ -4717,7 +4719,7 @@ var Column = function (_a) {
  */
 var FullFlex = function (_a) {
     var children = _a.children, style = _a.style, rest = __rest(_a, ["children", "style"]);
-    return (jsxRuntimeExports.jsx(reactNative.View, __assign({ style: [{ flex: 1 }, style] }, rest, { children: children })));
+    return (jsxRuntimeExports.jsx(reactNative.View, __assign({ style: [{ flex: 1, direction: 'inherit' }, style] }, rest, { children: children })));
 };
 
 /**
@@ -4735,7 +4737,7 @@ var Layout = function (_a) {
     var _f = useResponsive$1(), isDesktop = _f.isDesktop, isTablet = _f.isTablet;
     var dynamicStyles = reactNative.StyleSheet.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],
@@ -5012,7 +5014,7 @@ var RewardCategoryTileRoot = function (_a) {
     var tile = _a.tile;
     if (!tile || !tile.active || !tile.configuration)
         return null;
-    return (jsxRuntimeExports.jsxs(BaseTile, { tile: tile, children: [jsxRuntimeExports.jsx(RewardCategoryTile.Header, {}), jsxRuntimeExports.jsx(RewardCategoryTile.Media, {})] }));
+    return (jsxRuntimeExports.jsx(BaseTile, { tile: tile, children: jsxRuntimeExports.jsxs(reactNative.View, { style: { aspectRatio: 1 }, children: [jsxRuntimeExports.jsx(RewardCategoryTile.Header, {}), jsxRuntimeExports.jsx(RewardCategoryTile.Media, {})] }) }));
 };
 /**
  * The RewardCategoryTile component with subcomponents attached.
@@ -5046,17 +5048,13 @@ var useRewardTileStyles = function () {
     return reactNative.StyleSheet.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',
@@ -5069,7 +5067,6 @@ var useRewardTileStyles = function () {
         },
         content: {
             paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
-            flex: 1,
         },
         footer: {
             marginTop: 8,
@@ -5118,9 +5115,22 @@ var RewardTileMedia = function (_a) {
     var _b = tileContext.configuration, artworkUrl = _b.artworkUrl, _c = _b.showArtwork, showArtwork = _c === void 0 ? true : _c, _d = _b.name, name = _d === void 0 ? 'Reward' : _d, _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 (jsxRuntimeExports.jsxs(reactNative.View, { style: [styles.imageContainer, containerStyle], testID: "reward-tile-media", role: "img", accessibilityLabel: "Reward image for ".concat(name), children: [jsxRuntimeExports.jsx(ProgressiveImage, { source: { uri: artworkUrl }, style: styles.image, alt: "Reward image for ".concat(name) }), isLocked && (jsxRuntimeExports.jsx(reactNative.View, { style: styles.lockOverlay, testID: "lock-overlay", children: jsxRuntimeExports.jsx(Icon, { name: "LockKeyhole", size: 48, color: "white" }) }))] }));
 };
 
@@ -5139,7 +5149,7 @@ var RewardTilePoints = function () {
         return null;
     var calculatedPoints = applyMultiplier(price, pointsMultiplier);
     var accessibilityLabel = getPointsLabel('Reward points:', calculatedPoints, pointsPrefix, pointsSuffix);
-    return (jsxRuntimeExports.jsx(reactNative.View, { testID: "reward-tile-points", role: "article", accessibilityLabel: accessibilityLabel, children: jsxRuntimeExports.jsxs(Row, { align: "center", justify: "start", style: { marginTop: 8 }, 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, { 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] }) }));
 };
 
 /**
@@ -5153,7 +5163,7 @@ var RewardTileSummary = function () {
         return null;
     var _a = tileContext.configuration, summary = _a.summary, _b = _a.showPrice, 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 (jsxRuntimeExports.jsx(Text, { variant: "body", role: "article", accessibilityLabel: summary, testID: "reward-tile-summary", numberOfLines: numberOfLines, ellipsizeMode: "tail", children: summary }));
@@ -5207,7 +5217,8 @@ var RewardTileRoot = function (_a) {
         !tile.configuration)
         return null;
     var configuration = tile.configuration;
-    return (jsxRuntimeExports.jsxs(BaseTile, { tile: tile, children: [jsxRuntimeExports.jsx(RewardTile.Media, { isArtworkOnly: isArtworkOnly(configuration) }), 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(RewardTile.Summary, {}), jsxRuntimeExports.jsx(RewardTile.Points, {})] })] }));
+    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, {})] }))] }));
 };
 /**
  * The RewardTile component with subcomponents attached.
@@ -5226,7 +5237,6 @@ var useTierTileStyles = function () {
     var theme = useWllSdk().theme;
     return reactNative.StyleSheet.create({
         header: {
-            flexBasis: '50%',
             width: '100%',
             overflow: 'hidden',
             marginBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
@@ -5638,7 +5648,7 @@ var TileContainer = function (_a) {
     var allHalfHeight = tiles.length > 0 &&
         tiles.every(function (tile) { return tile.tileHeight === exports.TileHeight.Half; });
     var halfHeightGap = allHalfHeight ? GRID_GAP / 2 : GRID_GAP;
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.container, allHalfHeight && styles.aspectContainer], testID: "tile-container", children: tiles.map(function (tile, index) {
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: styles.container, testID: "tile-container", children: tiles.map(function (tile, index) {
             var TileComponent = TILE_COMPONENTS[tile.type];
             var isHalfHeight = tile.tileHeight === exports.TileHeight.Half;
             return (jsxRuntimeExports.jsx(reactNative.View, { style: [
@@ -5655,9 +5665,6 @@ var styles = reactNative.StyleSheet.create({
         flex: 1,
         width: '100%',
     },
-    aspectContainer: {
-        aspectRatio: 1,
-    },
     tileWrapper: {
         flex: 1,
         width: '100%',
@@ -5709,7 +5716,7 @@ var mapLiveRegion = function (ariaLive) {
     }
 };
 var Chip = function (_a) {
-    var label = _a.label, _b = _a.variant, variant = _b === void 0 ? exports.StatusVariant.PRIMARY : _b, _c = _a.role, role = _c === void 0 ? 'status' : _c, _d = _a.ariaLive, ariaLive = _d === void 0 ? 'polite' : _d, accessibilityLabel = _a.accessibilityLabel, testID = _a.testID, style = _a.style, labelStyle = _a.labelStyle;
+    var label = _a.label, _b = _a.variant, variant = _b === void 0 ? exports.StatusVariant.PRIMARY : _b, _c = _a.role, role = _c === void 0 ? 'text' : _c, _d = _a.ariaLive, ariaLive = _d === void 0 ? 'polite' : _d, accessibilityLabel = _a.accessibilityLabel, testID = _a.testID, style = _a.style, labelStyle = _a.labelStyle;
     var styles = useChipStyles();
     var theme = useWllSdk().theme;
     var variantStyles = React.useMemo(function () {