@wlloyalty/wll-react-sdk 1.0.83 → 1.0.85

package/dist/native.js

@@ -1638,7 +1638,7 @@ var defaultTheme = {
 var COLOR_CONSTANTS = {
     MINIMUM_CONTRAST_RATIO: 2,
     DEFAULT_LIGHTNESS_ADJUSTMENT: 0.2,
-    DESATURATION_LIGHTEN_AMOUNT: 2,
+    DESATURATION_LIGHTEN_AMOUNT: 0.8,
     DEFAULT_COLOR: '#FFFFFF',
 };
 
@@ -2259,7 +2259,6 @@ var styles$7 = reactNative.StyleSheet.create({
         position: 'relative',
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: 'red',
         width: '100%',
         height: '100%',
     },
@@ -2802,7 +2801,6 @@ var styles$5 = reactNative.StyleSheet.create({
         position: 'absolute',
         top: 10,
         right: 10,
-        backgroundColor: 'red',
         paddingHorizontal: 12,
         paddingVertical: 6,
         borderRadius: 4,
@@ -3650,13 +3648,24 @@ var Grid = function (_a) {
                 width: "calc(".concat(100 / columns, "% - ").concat(((columns - 1) * GRID_GAP) / columns, "px)"),
                 marginBottom: GRID_GAP,
                 height: 'auto',
-                aspectRatio: 1,
             };
         }
         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,
@@ -3748,9 +3757,8 @@ var styles$1 = reactNative.StyleSheet.create({
         width: 21,
         height: 21,
         borderRadius: 9999,
-        backgroundColor: 'red',
-        alignItems: 'center',
         justifyContent: 'center',
+        alignItems: 'center',
     },
 });
 
@@ -4184,8 +4192,8 @@ var usePointsTileStyles = function (isFullSize) {
             justifyContent: 'center',
         },
         imageContainer: {
-            width: isFullSize ? '100%' : 57,
-            height: isFullSize ? '50%' : 57,
+            width: isFullSize ? '100%' : isDesktop ? 57 : 40,
+            height: isFullSize ? '50%' : isDesktop ? 57 : 40,
             marginBottom: isFullSize
                 ? useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
                 : 0,
@@ -4643,11 +4651,23 @@ var TileContainer = function (_a) {
     return (jsxRuntimeExports.jsx(reactNative.View, { style: styles.container, 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"));
+            }
             return (jsxRuntimeExports.jsx(reactNative.View, { style: [
                     styles.tileContainer,
                     isHalfSize && styles.halfTileContainer,
                     index > 0 && { marginTop: GRID_GAP },
-                ], children: TileComponent ? jsxRuntimeExports.jsx(TileComponent, { tile: tile }) : null }, tile.id));
+                ], 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));
         }) }));
 };
 var styles = reactNative.StyleSheet.create({