@wlloyalty/wll-react-sdk 1.0.86 → 1.0.88

package/dist/native.js

@@ -1635,10 +1635,17 @@ var defaultTheme = {
     negative: '#ff0000',
 };
 
+var IS_WEB = reactNative.Platform.OS === "web";
+var IS_IOS = reactNative.Platform.OS === "ios";
+var IS_ANDROID = reactNative.Platform.OS === "android";
+var IS_MOBILE = IS_IOS || IS_ANDROID;
+var _a$1 = reactNative.Dimensions.get("window"), width = _a$1.width; _a$1.height;
+var SCREEN_WIDTH = width;
+
 var COLOR_CONSTANTS = {
     MINIMUM_CONTRAST_RATIO: 2,
     DEFAULT_LIGHTNESS_ADJUSTMENT: 0.2,
-    DESATURATION_LIGHTEN_AMOUNT: 0.8,
+    DESATURATION_LIGHTEN_AMOUNT: IS_WEB ? 0.8 : 0.2,
     DEFAULT_COLOR: '#FFFFFF',
 };
 
@@ -2205,12 +2212,6 @@ var ProgressBar = function (_a) {
     return (jsxRuntimeExports.jsx(reactNative.View, { style: containerStyle, children: jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [styles.progress, progressStyles, progressWidth] }) }));
 };
 
-var IS_WEB = reactNative.Platform.OS === "web";
-reactNative.Platform.OS === "ios";
-reactNative.Platform.OS === "android";
-var _a$1 = reactNative.Dimensions.get("window"), width = _a$1.width; _a$1.height;
-var SCREEN_WIDTH = width;
-
 var ProgressiveImage = function (_a) {
     var source = _a.source, style = _a.style, _b = _a.isDesaturated, isDesaturated = _b === void 0 ? false : _b, alt = _a.alt, props = __rest(_a, ["source", "style", "isDesaturated", "alt"]);
     var imageAnimated = React.useRef(new reactNative.Animated.Value(0)).current;
@@ -2227,12 +2228,13 @@ var ProgressiveImage = function (_a) {
     var baseColor = theme.alphaDerivedPrimary[20];
     var desaturatedColor = desaturateColor(baseColor);
     var backgroundColor = isDesaturated ? desaturatedColor : baseColor;
-    // Platform-specific logic for desaturation
-    var desaturationStyle = IS_WEB
-        ? {
-            filter: isDesaturated ? 'grayscale(100%)' : undefined,
-        }
-        : {};
+    // Create base animated image
+    var baseImage = (jsxRuntimeExports.jsx(reactNative.Animated.Image, __assign({}, props, { source: source, style: [
+            styles$7.imageOverlay,
+            __assign({ opacity: imageAnimated }, (IS_WEB && {
+                filter: isDesaturated ? 'grayscale(100%)' : undefined,
+            })),
+        ], onLoad: onImageLoad, accessibilityLabel: alt })));
     return (jsxRuntimeExports.jsxs(reactNative.View, { style: [styles$7.container, style, { backgroundColor: backgroundColor }], children: [jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [
                     styles$7.imageOverlay,
                     {
@@ -2242,10 +2244,18 @@ var ProgressiveImage = function (_a) {
                             outputRange: [1, 0],
                         }),
                     },
-                ] }), jsxRuntimeExports.jsx(reactNative.Animated.Image, __assign({}, props, { source: source, style: [
-                    styles$7.imageOverlay,
-                    __assign({ opacity: imageAnimated }, desaturationStyle),
-                ], onLoad: onImageLoad, accessibilityLabel: alt }))] }));
+                ] }), IS_WEB ? (baseImage) : (
+            // For React Native, use the overlay technique
+            jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [baseImage, isDesaturated && (jsxRuntimeExports.jsx(reactNative.Animated.Image, __assign({}, props, { source: source, style: [
+                            styles$7.imageOverlay,
+                            {
+                                opacity: imageAnimated.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [0, 0.8],
+                                }),
+                                tintColor: 'gray',
+                            },
+                        ] })))] }))] }));
 };
 var styles$7 = reactNative.StyleSheet.create({
     imageOverlay: {
@@ -3291,7 +3301,7 @@ var BannerTileTitle = function () {
  * @param configuration - The configuration object of the tile.
  * @returns `true` if the tile has no title, description, or CTA text.
  */
-var isArtworkOnly$1 = function (configuration) {
+var isArtworkOnly$2 = function (configuration) {
     if (!configuration)
         return true;
     return (!configuration.title && !configuration.description && !configuration.ctaText);
@@ -3309,7 +3319,7 @@ var BannerTileRoot = function (_a) {
     if (!tile || !tile.active || !tile.configuration)
         return null;
     var configuration = tile.configuration;
-    return (jsxRuntimeExports.jsxs(BaseBanner, { tile: tile, children: [jsxRuntimeExports.jsx(BannerTile.Media, { isArtworkOnly: isArtworkOnly$1(configuration) }), jsxRuntimeExports.jsxs(FullFlex, { children: [jsxRuntimeExports.jsx(BannerTile.Title, {}), jsxRuntimeExports.jsx(BannerTile.Description, {}), jsxRuntimeExports.jsx(BannerTile.CTA, {})] })] }));
+    return (jsxRuntimeExports.jsxs(BaseBanner, { tile: tile, children: [jsxRuntimeExports.jsx(BannerTile.Media, { isArtworkOnly: isArtworkOnly$2(configuration) }), jsxRuntimeExports.jsxs(FullFlex, { children: [jsxRuntimeExports.jsx(BannerTile.Title, {}), jsxRuntimeExports.jsx(BannerTile.Description, {}), jsxRuntimeExports.jsx(BannerTile.CTA, {})] })] }));
 };
 /**
  * The BannerTile component with subcomponents attached.
@@ -3322,11 +3332,16 @@ var BannerTile = Object.assign(BannerTileRoot, {
 });
 var BannerTile$1 = withTileFetching(BannerTile);
 
-var ContentTileBody = function () { return jsxRuntimeExports.jsx(BaseTile.Body, {}); };
-
-var ContentTileContainer = function (_a) {
-    var children = _a.children;
-    return (jsxRuntimeExports.jsx(BaseTile.Container, { children: children }));
+var ContentTileChevron = function () {
+    var _a, _b;
+    var tileContext = useTileContext();
+    var sdk = useWllSdk();
+    if (!isContextValid(tileContext))
+        return null;
+    var ctaLink = tileContext.configuration.ctaLink;
+    if (!ctaLink)
+        return null;
+    return (jsxRuntimeExports.jsx(Icon, { name: "ChevronRight", size: IS_MOBILE ? 16 : undefined, color: (_b = (_a = sdk.theme) === null || _a === void 0 ? void 0 : _a.derivedSurfaceText) === null || _b === void 0 ? void 0 : _b[20], accessibilityLabel: "View details", testID: "content-tile-chevron" }));
 };
 
 /**
@@ -3335,62 +3350,115 @@ var ContentTileContainer = function (_a) {
  *
  * @returns StyleSheet styles for the ContentTile component
  */
-var useContentTileStyles = function () {
-    var theme = useWllSdk().theme;
+var useContentTileStyles = function (hasArtwork) {
+    if (hasArtwork === void 0) { hasArtwork = false; }
     var _a = useResponsive$1(), isDesktop = _a.isDesktop, isTablet = _a.isTablet;
+    var theme = useWllSdk().theme;
+    var getHeaderStyle = function (hasArtwork) { return (__assign({ width: '100%', marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet) }, (hasArtwork && {
+        marginTop: useResponsiveValue(theme.sizes.xs, theme.sizes.xxs, isDesktop, isTablet),
+    }))); };
     return reactNative.StyleSheet.create({
+        imageContainer: {
+            width: '100%',
+            marginBottom: 0,
+        },
+        image: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            width: '100%',
+            height: '100%',
+            resizeMode: 'cover',
+        },
         content: {
             paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
             flex: 1,
-            justifyContent: 'center',
-        },
-        media: {
-            width: '100%',
         },
+        header: getHeaderStyle(hasArtwork),
     });
 };
 
-var ContentTileContent = function (_a) {
-    var children = _a.children;
-    var styles = useContentTileStyles();
-    return (jsxRuntimeExports.jsx(BaseTile.Content, { children: jsxRuntimeExports.jsx(reactNative.View, { style: styles.content, children: children }) }));
+var ContentTileMedia = function (_a) {
+    var isArtworkOnly = _a.isArtworkOnly;
+    var tileContext = useTileContext();
+    if (!isContextValid(tileContext))
+        return null;
+    var _b = tileContext.configuration, artworkUrl = _b.artworkUrl, _c = _b.title, title = _c === void 0 ? '' : _c;
+    if (!artworkUrl)
+        return null;
+    var hasArtwork = Boolean(artworkUrl);
+    var styles = useContentTileStyles(hasArtwork);
+    var containerStyle = {
+        flexBasis: isArtworkOnly ? '100%' : '50%',
+    };
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.imageContainer, containerStyle], testID: "content-tile-media", accessibilityRole: "image", accessibilityLabel: "Image for ".concat(title), children: jsxRuntimeExports.jsx(ProgressiveImage, { source: { uri: artworkUrl }, style: styles.image, alt: "Image for ".concat(title) }) }));
+};
+
+var ContentTileSummary = function () {
+    var tileContext = useTileContext();
+    if (!isContextValid(tileContext))
+        return null;
+    var body = tileContext.configuration.body;
+    if (!body)
+        return null;
+    var sizeInfo = useTileSize(tileContext);
+    if (!sizeInfo)
+        return null;
+    var isFullSize = sizeInfo.isFullSize, isHalfSize = sizeInfo.isHalfSize;
+    var getNumberOfLines = function () {
+        return isFullSize ? 3 : isHalfSize ? 4 : 3;
+    };
+    return (jsxRuntimeExports.jsx(Text, { variant: "body", accessibilityRole: "text", accessibilityLabel: body, numberOfLines: getNumberOfLines(), testID: "content-tile-summary", children: body }));
 };
 
-var ContentTileHeader = function () {
+var ContentTileTitle = function () {
     var tileContext = useTileContext();
     if (!isContextValid(tileContext))
         return null;
     var title = tileContext.configuration.title;
     if (!title)
         return null;
-    return (jsxRuntimeExports.jsx(BaseTile.Header, { children: jsxRuntimeExports.jsx(BaseTile.Title, {}) }));
+    return (jsxRuntimeExports.jsx(Text, { variant: "title", accessibilityRole: "header", accessibilityLabel: title, numberOfLines: 1, testID: "content-tile-title", children: title }));
 };
 
-var ContentTileMedia = function () {
-    var styles = useContentTileStyles();
-    return jsxRuntimeExports.jsx(BaseTile.Media, { style: styles.media });
+/**
+ * Helper function to determine if the tile should display artwork only.
+ *
+ * @param configuration - The configuration object of the tile.
+ * @returns `true` if the tile should display artwork only.
+ */
+var isArtworkOnly$1 = function (configuration) {
+    if (!configuration)
+        return false;
+    return !configuration.title && !configuration.body;
 };
-
 /**
- * The ContentTile component renders a tile with a container, media, content, header, and body.
+ * The ContentTile component renders a tile with media, title, summary, and a chevron.
+ * This follows the same structure as RewardTile for consistent layout.
  *
- * @param tile - The tile data to render.
+ * @param {ContentTileProps} props - Component props
+ * @param {Tile} props.tile - The tile data to render
+ * @returns JSX.Element or null if tile is inactive
  */
 var ContentTileRoot = function (_a) {
     var tile = _a.tile;
-    if (!tile || !tile.active)
+    if (!tile || !tile.active || !tile.configuration)
         return null;
-    return (jsxRuntimeExports.jsx(BaseTile, { tile: tile, children: jsxRuntimeExports.jsxs(ContentTile.Container, { children: [jsxRuntimeExports.jsx(ContentTile.Media, {}), jsxRuntimeExports.jsxs(ContentTile.Content, { children: [jsxRuntimeExports.jsx(ContentTile.Header, {}), jsxRuntimeExports.jsx(ContentTile.Body, {})] })] }) }));
+    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, {})] })] }));
 };
 /**
  * The ContentTile component with subcomponents attached.
  */
 var ContentTile = Object.assign(ContentTileRoot, {
-    Container: ContentTileContainer,
     Media: ContentTileMedia,
-    Content: ContentTileContent,
-    Header: ContentTileHeader,
-    Body: ContentTileBody,
+    Title: ContentTileTitle,
+    Summary: ContentTileSummary,
+    Chevron: ContentTileChevron,
 });
 var ContentTile$1 = withTileFetching(ContentTile);
 
@@ -3651,21 +3719,9 @@ var Grid = function (_a) {
             };
         }
         else {
-            // Calculate available width accounting for screen width and section padding
             var availableWidth = SCREEN_WIDTH - GRID_GAP * 2;
             var gapSpace = (columns - 1) * GRID_GAP;
             var tileWidth = Math.floor((availableWidth - gapSpace) / columns);
-            var halfTileHeight = Math.floor(tileWidth / 2);
-            // Detailed logging for debugging
-            console.log('=== GRID DEBUG ===');
-            console.log("SCREEN_WIDTH: ".concat(SCREEN_WIDTH, "px, GRID_GAP: ").concat(GRID_GAP, "px"));
-            console.log("Columns: ".concat(columns, ", Section padding: ").concat(GRID_GAP * 2, "px"));
-            console.log("Available width: ".concat(availableWidth, "px, Gap space: ").concat(gapSpace, "px"));
-            console.log("Calculated tile width: ".concat(tileWidth, "px"));
-            console.log("Half tile height should be: ".concat(halfTileHeight, "px"));
-            console.log("Expected full tile: ".concat(tileWidth, "x").concat(tileWidth, "px"));
-            console.log("Expected half tile: ".concat(tileWidth, "x").concat(halfTileHeight, "px"));
-            console.log('=== END DEBUG ===');
             return {
                 width: tileWidth,
                 marginBottom: GRID_GAP,
@@ -4388,7 +4444,7 @@ var RewardCategoryTile$1 = withTileFetching(RewardCategoryTile);
 var RewardTileChevron = function () {
     var _a;
     var theme = useWllSdk().theme;
-    return (jsxRuntimeExports.jsx(Icon, { name: "ChevronRight", color: ((_a = theme === null || theme === void 0 ? void 0 : theme.derivedSurfaceText) === null || _a === void 0 ? void 0 : _a[20]) || '#000000', accessibilityRole: "image", accessibilityLabel: "View reward details" }));
+    return (jsxRuntimeExports.jsx(Icon, { name: "ChevronRight", size: IS_MOBILE ? 16 : undefined, color: ((_a = theme === null || theme === void 0 ? void 0 : theme.derivedSurfaceText) === null || _a === void 0 ? void 0 : _a[20]) || '#000000', accessibilityRole: "image", accessibilityLabel: "View reward details" }));
 };
 
 /**
@@ -4648,44 +4704,35 @@ var TILE_COMPONENTS = (_a = {},
  */
 var TileContainer = function (_a) {
     var tiles = _a.tiles;
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: styles.container, testID: "tile-container", children: tiles.map(function (tile, index) {
+    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) {
             var TileComponent = TILE_COMPONENTS[tile.type];
-            var isHalfSize = useTileSize(tile).isHalfSize;
-            // Log tile dimensions for debugging
-            if (!__DEV__) {
-                console.log("Tile ".concat(index, " (").concat(tile.id, "): ").concat(isHalfSize ? 'Half' : 'Full', " size"));
-            }
+            var isHalfHeight = tile.tileHeight === exports.TileHeight.Half;
             return (jsxRuntimeExports.jsx(reactNative.View, { style: [
-                    styles.tileContainer,
-                    isHalfSize && styles.halfTileContainer,
-                    index > 0 && { marginTop: GRID_GAP },
-                ], onLayout: function (event) {
-                    if (__DEV__) {
-                        var _a = event.nativeEvent.layout, width = _a.width, height = _a.height;
-                        console.log("=== TILE ".concat(index, " LAYOUT ==="));
-                        console.log("Tile ID: ".concat(tile.id, ", Type: ").concat(tile.type));
-                        console.log("Is Half Size: ".concat(isHalfSize));
-                        console.log("Actual dimensions: ".concat(width.toFixed(2), "x").concat(height.toFixed(2), "px"));
-                    }
-                }, children: TileComponent ? jsxRuntimeExports.jsx(TileComponent, { tile: tile }) : null }, tile.id));
+                    styles.tileWrapper,
+                    isHalfHeight && styles.halfHeightTile,
+                    index > 0 && {
+                        marginTop: allHalfHeight ? halfHeightGap : GRID_GAP,
+                    },
+                ], children: TileComponent ? jsxRuntimeExports.jsx(TileComponent, { tile: tile }) : null }, tile.id));
         }) }));
 };
 var styles = reactNative.StyleSheet.create({
     container: {
-        flexDirection: 'column',
         flex: 1,
         width: '100%',
-        height: '100%',
     },
-    tileContainer: {
-        flexGrow: 1,
-        flexShrink: 1,
-        flexBasis: '100%',
+    aspectContainer: {
+        aspectRatio: 1,
+    },
+    tileWrapper: {
+        flex: 1,
         width: '100%',
     },
-    halfTileContainer: {
-        aspectRatio: 2,
-        backgroundColor: 'red',
+    halfHeightTile: {
+        flex: 0.5,
     },
 });