@wlloyalty/wll-react-sdk 1.0.83 → 1.0.85

package/dist/types/constants/theme.d.ts

@@ -1,6 +1,6 @@
 export declare const COLOR_CONSTANTS: {
     readonly MINIMUM_CONTRAST_RATIO: 2;
     readonly DEFAULT_LIGHTNESS_ADJUSTMENT: 0.2;
-    readonly DESATURATION_LIGHTEN_AMOUNT: 2;
+    readonly DESATURATION_LIGHTEN_AMOUNT: 0.8;
     readonly DEFAULT_COLOR: "#FFFFFF";
 };

package/dist/web.js

@@ -6599,7 +6599,7 @@ function isPrimaryPointerDown(domEvent) {
  * when touches end and start again.
  */
 
-var __DEV__$4 = process.env.NODE_ENV !== 'production';
+var __DEV__$5 = process.env.NODE_ENV !== 'production';
 var MAX_TOUCH_BANK = 20;
 function timestampForTouch(touch) {
   // The legacy internal implementation provides "timeStamp", which has been
@@ -6642,7 +6642,7 @@ function getTouchIdentifier(_ref) {
   if (identifier == null) {
     console.error('Touch object is missing identifier.');
   }
-  if (__DEV__$4) {
+  if (__DEV__$5) {
     if (identifier > MAX_TOUCH_BANK) {
       console.error('Touch identifier %s is greater than maximum supported %s which causes ' + 'performance issues backfilling array locations for all of the indices.', identifier, MAX_TOUCH_BANK);
     }
@@ -6740,7 +6740,7 @@ class ResponderTouchHistoryStore {
             break;
           }
         }
-        if (__DEV__$4) {
+        if (__DEV__$5) {
           var activeRecord = touchBank[touchHistory.indexOfSingleActiveTouch];
           if (!(activeRecord != null && activeRecord.touchActive)) {
             console.error('Cannot find single active touch.');
@@ -7967,7 +7967,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'
 };
 
@@ -10905,9 +10905,9 @@ function _isEntirelyVisible(top, bottom, viewportHeight) {
 }
 var ViewabilityHelper$1 = ViewabilityHelper;
 
-var __DEV__$3 = process.env.NODE_ENV !== 'production';
+var __DEV__$4 = process.env.NODE_ENV !== 'production';
 var VirtualizedListContext = /*#__PURE__*/React__namespace.createContext(null);
-if (__DEV__$3) {
+if (__DEV__$4) {
   VirtualizedListContext.displayName = 'VirtualizedListContext';
 }
 
@@ -11277,7 +11277,7 @@ Object.defineProperty(nullthrows$2.exports, '__esModule', {value: true});
 var nullthrowsExports = nullthrows$2.exports;
 var nullthrows$1 = /*@__PURE__*/getDefaultExportFromCjs(nullthrowsExports);
 
-var __DEV__$2 = process.env.NODE_ENV !== 'production';
+var __DEV__$3 = process.env.NODE_ENV !== 'production';
 var ON_EDGE_REACHED_EPSILON = 0.001;
 var _usedIndexForKey = false;
 var _keylessItemComponentName = '';
@@ -11986,7 +11986,7 @@ class VirtualizedList extends StateSafePureComponent {
       console.warn("initialScrollIndex \"" + initialScrollIndex + "\" is not valid (list has " + itemCount + " items)");
       this._hasWarned.initialScrollIndex = true;
     }
-    if (__DEV__$2 && !this._hasWarned.flexWrap) {
+    if (__DEV__$3 && !this._hasWarned.flexWrap) {
       // $FlowFixMe[underconstrained-implicit-instantiation]
       var flatStyles = StyleSheet$1.flatten(this.props.contentContainerStyle);
       if (flatStyles != null && flatStyles.flexWrap === 'wrap') {
@@ -13938,7 +13938,7 @@ var AnimatedWithChildren$1 = AnimatedWithChildren;
  * @format
  */
 
-var __DEV__$1 = process.env.NODE_ENV !== 'production';
+var __DEV__$2 = process.env.NODE_ENV !== 'production';
 var linear = t => t;
 
 /**
@@ -13951,7 +13951,7 @@ function createInterpolation(config) {
   }
   var outputRange = config.outputRange;
   var inputRange = config.inputRange;
-  if (__DEV__$1) {
+  if (__DEV__$2) {
     checkInfiniteRange('outputRange', outputRange);
     checkInfiniteRange('inputRange', inputRange);
     checkValidInputRange(inputRange);
@@ -14166,7 +14166,7 @@ class AnimatedInterpolation extends AnimatedWithChildren$1 {
     return range.map(NativeAnimatedHelper.transformDataType);
   }
   __getNativeConfig() {
-    if (__DEV__$1) {
+    if (__DEV__$2) {
       NativeAnimatedHelper.validateInterpolation(this._config);
     }
     return {
@@ -14455,7 +14455,7 @@ var AnimatedValue$1 = AnimatedValue;
  * @format
  */
 
-var __DEV__ = process.env.NODE_ENV !== 'production';
+var __DEV__$1 = process.env.NODE_ENV !== 'production';
 function attachNativeEvent(viewRef, eventName, argMapping) {
   // Find animated values in `argMapping` and create an array representing their
   // key path inside the `nativeEvent` object. Ex.: ['contentOffset', 'x'].
@@ -14549,7 +14549,7 @@ class AnimatedEvent {
   __getHandler() {
     var _this = this;
     if (this.__isNative) {
-      if (__DEV__) {
+      if (__DEV__$1) {
         var _validatedMapping = false;
         return function () {
           for (var _len = arguments.length, args = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {
@@ -14570,7 +14570,7 @@ class AnimatedEvent {
       for (var _len2 = arguments.length, args = new Array(_len2), _key3 = 0; _key3 < _len2; _key3++) {
         args[_key3] = arguments[_key3];
       }
-      if (__DEV__ && !validatedMapping) {
+      if (__DEV__$1 && !validatedMapping) {
         validateMapping(_this._argMapping, args);
         validatedMapping = true;
       }
@@ -18838,7 +18838,6 @@ var styles$7 = StyleSheet$1.create({
     position: 'relative',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: 'red',
     width: '100%',
     height: '100%'
   }
@@ -19475,7 +19474,6 @@ var styles$5 = StyleSheet$1.create({
     position: 'absolute',
     top: 10,
     right: 10,
-    backgroundColor: 'red',
     paddingHorizontal: 12,
     paddingVertical: 6,
     borderRadius: 4
@@ -20560,13 +20558,24 @@ var Grid = function (_a) {
       return {
         width: "calc(".concat(100 / columns, "% - ").concat((columns - 1) * GRID_GAP / columns, "px)"),
         marginBottom: GRID_GAP,
-        height: 'auto',
-        aspectRatio: 1
+        height: 'auto'
       };
     } 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,
@@ -20678,9 +20687,8 @@ var styles$1 = StyleSheet$1.create({
     width: 21,
     height: 21,
     borderRadius: 9999,
-    backgroundColor: 'red',
-    alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    alignItems: 'center'
   }
 });
 
@@ -21280,8 +21288,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,
       backgroundColor: isFullSize ? theme.alphaDerivedPrimary[20] : theme.surface,
       justifyContent: 'center',
@@ -21972,11 +21980,26 @@ var TileContainer = function (_a) {
   }, 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 /*#__PURE__*/React.createElement(View$2, {
       key: tile.id,
       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"));
+        }
+      }
     }, TileComponent ? /*#__PURE__*/React.createElement(TileComponent, {
       tile: tile
     }) : null);