@wlloyalty/wll-react-sdk 1.0.36 → 1.0.38

package/dist/index.js

@@ -7455,6 +7455,13 @@ var sizes = {
   xxxxl: 40,
   xxxxxl: 60
 };
+var commonStyles = StyleSheet$1.create({
+  emptyContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});
 var defaultTheme = {
   background: '#F0F0F0',
   text: '#000000',
@@ -19181,7 +19188,8 @@ var BaseTileHeader = function (_a) {
       // @ts-ignore
       textAlign: isHalfSize && 'center'
     }],
-    accessibilityRole: "header"
+    accessibilityRole: "header",
+    numberOfLines: 1
   }, children);
 };
 var BaseTileMedia = function (props) {
@@ -19216,7 +19224,8 @@ var BaseTileTitle = function () {
   if (isHalfSize && artworkUrl || !title) return null;
   return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Text, {
     variant: "title",
-    accessibilityLabel: title
+    accessibilityLabel: title,
+    numberOfLines: 1
   }, title), ctaLink && /*#__PURE__*/React$1.createElement(Icon, {
     name: "ChevronRight",
     color: theme.derivedSurfaceText[20]
@@ -19292,6 +19301,45 @@ var styles$5 = StyleSheet$1.create({
 
 var GRID_GAP = 16;
 
+var SkeletonTile = function (_a) {
+  var style = _a.style;
+  var theme = useWllSdk().theme;
+  var animatedValue = React__namespace.useRef(new Animated$1.Value(0)).current;
+  React__namespace.useEffect(function () {
+    var pulseAnimation = Animated$1.loop(Animated$1.sequence([Animated$1.timing(animatedValue, {
+      toValue: 1,
+      duration: 1000,
+      useNativeDriver: true
+    }), Animated$1.timing(animatedValue, {
+      toValue: 0,
+      duration: 1000,
+      useNativeDriver: true
+    })]));
+    pulseAnimation.start();
+    return function () {
+      return pulseAnimation.stop();
+    };
+  }, [animatedValue]);
+  var opacity = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.3, 0.7]
+  });
+  return /*#__PURE__*/React__namespace.createElement(Animated$1.View, {
+    style: [styles$4.container, {
+      opacity: opacity,
+      backgroundColor: theme.alphaDerivedText[20],
+      borderRadius: theme.sizes.borderRadiusLg
+    }, style]
+  });
+};
+var styles$4 = StyleSheet$1.create({
+  container: {
+    aspectRatio: 1,
+    overflow: 'hidden',
+    width: 1000 / 4
+  }
+});
+
 var Skeleton = function (_a) {
   var style = _a.style,
     _b = _a.numberOfSquares,
@@ -19317,35 +19365,34 @@ var Skeleton = function (_a) {
     inputRange: [0, 1],
     outputRange: [0.3, 0.7]
   });
-  var sharedSkeletonStyle = {
+  ({
     opacity: opacity,
     backgroundColor: theme.alphaDerivedText[20],
     borderRadius: theme.sizes.borderRadiusLg
-  };
+  });
   return /*#__PURE__*/React__namespace.createElement(View$2, null, /*#__PURE__*/React__namespace.createElement(Animated$1.View, {
-    style: [styles$4.skeleton, styles$4.title, {
+    style: [styles$3.skeleton, styles$3.title, {
       opacity: opacity,
       backgroundColor: theme.alphaDerivedText[20],
       borderRadius: 6
     }]
   }), /*#__PURE__*/React__namespace.createElement(Animated$1.View, {
-    style: [styles$4.skeleton, styles$4.body, {
+    style: [styles$3.skeleton, styles$3.body, {
       opacity: opacity,
       backgroundColor: theme.alphaDerivedText[20],
       borderRadius: 6
     }]
   }), /*#__PURE__*/React__namespace.createElement(Animated$1.View, {
-    style: [styles$4.container, style]
+    style: [styles$3.container, style]
   }, Array.from({
     length: numberOfSquares
   }).map(function (_, index) {
-    return /*#__PURE__*/React__namespace.createElement(Animated$1.View, {
-      key: index,
-      style: [styles$4.skeleton, styles$4.square, sharedSkeletonStyle]
+    return /*#__PURE__*/React__namespace.createElement(SkeletonTile, {
+      key: index
     });
   })));
 };
-var styles$4 = StyleSheet$1.create({
+var styles$3 = StyleSheet$1.create({
   container: {
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -19373,6 +19420,78 @@ var styles$4 = StyleSheet$1.create({
   }
 });
 
+function withTileFetching(WrappedComponent) {
+  return function WithTileFetchingComponent(props) {
+    var _this = this;
+    var tile = props.tile,
+      tileId = props.tileId;
+    var getTileByID = useWllSdk().getTileByID;
+    var _a = React$1.useState(tile || null),
+      tileData = _a[0],
+      setTileData = _a[1];
+    var _b = React$1.useState(false),
+      isLoading = _b[0],
+      setIsLoading = _b[1];
+    var _c = React$1.useState(null),
+      error = _c[0],
+      setError = _c[1];
+    React$1.useEffect(function () {
+      if (tile) {
+        setTileData(tile);
+      } else if (tileId) {
+        var fetchTile = function () {
+          return __awaiter(_this, void 0, void 0, function () {
+            var response, err_1;
+            return __generator(this, function (_a) {
+              switch (_a.label) {
+                case 0:
+                  setIsLoading(true);
+                  _a.label = 1;
+                case 1:
+                  _a.trys.push([1, 3, 4, 5]);
+                  return [4 /*yield*/, getTileByID(tileId)];
+                case 2:
+                  response = _a.sent();
+                  if (response.status === 'success' && response.data) {
+                    setTileData(response.data);
+                  } else {
+                    setError(response.error || 'Failed to fetch tile');
+                  }
+                  return [3 /*break*/, 5];
+                case 3:
+                  err_1 = _a.sent();
+                  setError(err_1 instanceof Error ? err_1.message : 'Failed to fetch tile');
+                  return [3 /*break*/, 5];
+                case 4:
+                  setIsLoading(false);
+                  return [7 /*endfinally*/];
+                case 5:
+                  return [2 /*return*/];
+              }
+            });
+          });
+        };
+        fetchTile();
+      }
+    }, [tile, tileId, getTileByID]);
+    if (isLoading) {
+      return /*#__PURE__*/React$1.createElement(SkeletonTile, {
+        style: {
+          width: '100%'
+        }
+      });
+    }
+    if (error || !tileData) {
+      return /*#__PURE__*/React$1.createElement(View$2, {
+        style: commonStyles.emptyContainer
+      }, /*#__PURE__*/React$1.createElement(Text$3, null, "No tile data available"));
+    }
+    return /*#__PURE__*/React$1.createElement(WrappedComponent, _extends({}, props, {
+      tile: tileData
+    }));
+  };
+}
+
 var useBadgeTileStyles = function () {
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
@@ -19521,7 +19640,7 @@ var BadgeTileTitle = function () {
   return /*#__PURE__*/React$1.createElement(View$2, null, /*#__PURE__*/React$1.createElement(Text, {
     variant: "title",
     style: styles.titleText,
-    numberOfLines: 2,
+    numberOfLines: count === 0 ? 2 : 1,
     ellipsizeMode: "tail"
   }, displayText));
 };
@@ -19542,6 +19661,7 @@ BadgeTile.Title = BadgeTileTitle;
 BadgeTile.Description = BadgeTileDescription;
 BadgeTile.DateEarned = BadgeTileDateEarned;
 BadgeTile.Status = BadgeTileStatus;
+var BadgeTile$1 = withTileFetching(BadgeTile);
 
 var BannerTileCTA = function () {
   var tile = useBannerContext();
@@ -19658,6 +19778,7 @@ BannerTile.Media = BannerTileMedia;
 BannerTile.Title = BannerTileTitle;
 BannerTile.Description = BannerTileDescription;
 BannerTile.CTA = BannerTileCTA;
+var BannerTile$1 = withTileFetching(BannerTile);
 
 var ContentTileBody = function () {
   return /*#__PURE__*/React$1.createElement(BaseTile.Body, null);
@@ -19719,6 +19840,7 @@ ContentTile.Media = ContentTileMedia;
 ContentTile.Content = ContentTileContent;
 ContentTile.Header = ContentTileHeader;
 ContentTile.Body = ContentTileBody;
+var ContentTile$1 = withTileFetching(ContentTile);
 
 /**
  * Sorts tiles by priority (higher priority first) and maintains original order for equal priorities
@@ -19948,6 +20070,8 @@ var Carousel = function (_a) {
     });
   };
   var displayControls = sortedTiles.length > 1;
+  var showPrevButton = displayControls && currentIndex > 0;
+  var showNextButton = displayControls && currentIndex < sortedTiles.length - 1;
   var dynamicStyles = StyleSheet$1.create({
     indicators: {
       flexDirection: 'row',
@@ -19967,7 +20091,7 @@ var Carousel = function (_a) {
     }
   }, /*#__PURE__*/React$1.createElement(View$2, {
     style: styles.carouselContainer
-  }, displayControls && /*#__PURE__*/React$1.createElement(TouchableOpacity$1, {
+  }, showPrevButton && /*#__PURE__*/React$1.createElement(TouchableOpacity$1, {
     style: [styles.navButton, styles.navButtonLeft, {
       backgroundColor: theme.background
     }],
@@ -19997,10 +20121,10 @@ var Carousel = function (_a) {
       style: [styles.slideContainer, {
         width: containerWidth
       }]
-    }, /*#__PURE__*/React$1.createElement(BannerTile, {
+    }, /*#__PURE__*/React$1.createElement(BannerTile$1, {
       tile: tile
     }));
-  })), displayControls && /*#__PURE__*/React$1.createElement(TouchableOpacity$1, {
+  })), showNextButton && /*#__PURE__*/React$1.createElement(TouchableOpacity$1, {
     style: [styles.navButton, styles.navButtonRight, {
       backgroundColor: theme.surface
     }],
@@ -20108,10 +20232,10 @@ var Grid = function (_a) {
     title: section.title,
     description: section.description
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles$3.grid
+    style: styles$2.grid
   }, renderGrid()));
 };
-var styles$3 = StyleSheet$1.create({
+var styles$2 = StyleSheet$1.create({
   grid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -20138,15 +20262,15 @@ var ProgressIndicator = function (_a) {
     progressVariant = 'accent';
   }
   return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles$2.container
+    style: styles$1.container
   }, /*#__PURE__*/React__namespace.createElement(ProgressBar, {
     percentage: percentage,
     variant: progressVariant,
     height: height
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$2.circleContainer]
+    style: [styles$1.circleContainer]
   }, /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$2.circle, {
+    style: [styles$1.circle, {
       borderColor: theme.derivedSurface[20],
       backgroundColor: isComplete ? theme.primary : theme.surface,
       borderWidth: isComplete ? 0 : 4
@@ -20157,7 +20281,7 @@ var ProgressIndicator = function (_a) {
     color: theme.primaryText
   }))));
 };
-var styles$2 = StyleSheet$1.create({
+var styles$1 = StyleSheet$1.create({
   container: {
     width: '100%',
     flexDirection: 'row',
@@ -20195,30 +20319,94 @@ var useSectionStyles = function () {
 
 var SectionContext = /*#__PURE__*/React$1.createContext(undefined);
 var Section = function (_a) {
-  var section = _a.section;
+  var section = _a.section,
+    sectionId = _a.sectionId;
   var styles = useSectionStyles();
+  var getSectionByID = useWllSdk().getSectionByID;
+  var _b = React$1.useState(section || null),
+    sectionData = _b[0],
+    setSectionData = _b[1];
+  var _c = React$1.useState(false),
+    isLoading = _c[0],
+    setIsLoading = _c[1];
+  var _d = React$1.useState(null),
+    error = _d[0],
+    setError = _d[1];
+  React$1.useEffect(function () {
+    if (section) {
+      setSectionData(section);
+    } else if (sectionId) {
+      var fetchSection = function () {
+        return __awaiter(void 0, void 0, void 0, function () {
+          var response, err_1;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                setIsLoading(true);
+                _a.label = 1;
+              case 1:
+                _a.trys.push([1, 3, 4, 5]);
+                return [4 /*yield*/, getSectionByID(sectionId)];
+              case 2:
+                response = _a.sent();
+                if (response.status === 'success' && response.data) {
+                  setSectionData(response.data);
+                } else {
+                  setError(response.error || 'Failed to fetch section');
+                }
+                return [3 /*break*/, 5];
+              case 3:
+                err_1 = _a.sent();
+                setError(err_1 instanceof Error ? err_1.message : 'Failed to fetch section');
+                return [3 /*break*/, 5];
+              case 4:
+                setIsLoading(false);
+                return [7 /*endfinally*/];
+              case 5:
+                return [2 /*return*/];
+            }
+          });
+        });
+      };
+      fetchSection();
+    }
+  }, [section, sectionId, getSectionByID]);
   var renderSectionContent = function () {
-    switch (section.type) {
+    if (isLoading) {
+      return /*#__PURE__*/React$1.createElement(View$2, {
+        style: commonStyles.emptyContainer
+      }, /*#__PURE__*/React$1.createElement(Skeleton, null));
+    }
+    if (error || !sectionData) {
+      return /*#__PURE__*/React$1.createElement(View$2, {
+        style: commonStyles.emptyContainer
+      }, /*#__PURE__*/React$1.createElement(Text$3, null, "No section data available"));
+    }
+    switch (sectionData.type) {
       case exports.SectionType.Banner:
         return /*#__PURE__*/React$1.createElement(Carousel, {
-          section: section
+          section: sectionData
         });
       case exports.SectionType.Grid:
         return /*#__PURE__*/React$1.createElement(Grid, {
-          section: section
+          section: sectionData
         });
       default:
-        console.warn("Unknown section type: ".concat(section.type));
+        console.warn("Unknown section type: ".concat(sectionData.type));
         return null;
     }
   };
-  return /*#__PURE__*/React$1.createElement(SectionContext.Provider, {
+  if (!section && !sectionId) {
+    console.warn('Section component requires either section or sectionId prop');
+    return null;
+  }
+  return sectionData ? /*#__PURE__*/React$1.createElement(SectionContext.Provider, {
     value: {
-      sectionData: section
+      sectionData: sectionData
     }
   }, /*#__PURE__*/React$1.createElement(View$2, {
     style: styles.section
-  }, renderSectionContent()));
+  }, renderSectionContent())) : null;
 };
 
 var Group = function (_a) {
@@ -20252,17 +20440,17 @@ var Group = function (_a) {
   }, [id, getGroupByID]);
   if (loading) {
     return /*#__PURE__*/React$1.createElement(View$2, {
-      style: styles$1.emptyConatiner
+      style: commonStyles.emptyContainer
     }, /*#__PURE__*/React$1.createElement(Skeleton, null));
   }
   if (!groupData) {
     return /*#__PURE__*/React$1.createElement(View$2, {
-      style: styles$1.emptyConatiner
+      style: commonStyles.emptyContainer
     }, /*#__PURE__*/React$1.createElement(Text$3, null, "No group data available"));
   }
   if (!groupData.sections || groupData.sections.length === 0) {
     return /*#__PURE__*/React$1.createElement(View$2, {
-      style: styles$1.emptyConatiner
+      style: commonStyles.emptyContainer
     }, /*#__PURE__*/React$1.createElement(Text$3, null, "No sections available"));
   }
   var sortedSections = sortByPriority(groupData.sections);
@@ -20273,13 +20461,6 @@ var Group = function (_a) {
     });
   }));
 };
-var styles$1 = StyleSheet$1.create({
-  emptyConatiner: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-});
 
 var usePointsTileStyles = function (isFullSize) {
   var _a = useResponsive$1(),
@@ -20342,14 +20523,6 @@ var PointsTileFormattedPoints = function () {
   }, pointsSuffix !== null && pointsSuffix !== void 0 ? pointsSuffix : 'pts')));
 };
 
-var PointsTileTitle = function () {
-  var configuration = useTileContext().configuration;
-  var title = configuration.title;
-  return /*#__PURE__*/React$1.createElement(Text, {
-    variant: "eyebrow"
-  }, title);
-};
-
 var PointsTileMedia = function (_a) {
   var isFullSize = _a.isFullSize;
   var configuration = useTileContext().configuration;
@@ -20367,6 +20540,14 @@ var PointsTileMedia = function (_a) {
   }));
 };
 
+var PointsTileTitle = function () {
+  var configuration = useTileContext().configuration;
+  var title = configuration.title;
+  return /*#__PURE__*/React$1.createElement(Text, {
+    variant: "eyebrow"
+  }, title);
+};
+
 var PointsTile = function (_a) {
   var tile = _a.tile;
   var isFullSize = useTileSize(tile).isFullSize;
@@ -20386,6 +20567,7 @@ var PointsTile = function (_a) {
 PointsTile.Title = PointsTileTitle;
 PointsTile.Points = PointsTileFormattedPoints;
 PointsTile.Media = PointsTileMedia;
+var PointsTile$1 = withTileFetching(PointsTile);
 
 var useRewardCategoryTileStyles = function () {
   var _a = useResponsive$1(),
@@ -20461,6 +20643,7 @@ var RewardCategoryTile = function (_a) {
 };
 RewardCategoryTile.Header = RewardCategoryHeader;
 RewardCategoryTile.Media = RewardCategoryMedia;
+var RewardCategoryTile$1 = withTileFetching(RewardCategoryTile);
 
 var RewardTileChevron = function () {
   var theme = useWllSdk().theme;
@@ -20470,15 +20653,6 @@ var RewardTileChevron = function () {
   });
 };
 
-var RewardTileSummary = function () {
-  var configuration = useTileContext().configuration;
-  var summary = configuration.summary;
-  if (!summary) return null;
-  return /*#__PURE__*/React$1.createElement(Text, {
-    variant: "body"
-  }, summary);
-};
-
 var useRewardTileStyles = function () {
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
@@ -20565,6 +20739,15 @@ var RewardTilePoints = function () {
   }, pointsSuffix)));
 };
 
+var RewardTileSummary = function () {
+  var configuration = useTileContext().configuration;
+  var summary = configuration.summary;
+  if (!summary) return null;
+  return /*#__PURE__*/React$1.createElement(Text, {
+    variant: "body"
+  }, summary);
+};
+
 var RewardTileTitle = function () {
   var configuration = useTileContext().configuration;
   var name = configuration.name;
@@ -20594,6 +20777,7 @@ RewardTile.Title = RewardTileTitle;
 RewardTile.Summary = RewardTileSummary;
 RewardTile.Points = RewardTilePoints;
 RewardTile.Chevron = RewardTileChevron;
+var RewardTile$1 = withTileFetching(RewardTile);
 
 var useTierTileStyles = function () {
   var _a = useResponsive$1(),
@@ -20789,11 +20973,11 @@ var TileContainer = function (_a) {
   var renderTile = function (tile) {
     switch (tile.type) {
       case exports.TileType.Content:
-        return /*#__PURE__*/React__namespace.createElement(ContentTile, {
+        return /*#__PURE__*/React__namespace.createElement(ContentTile$1, {
           tile: tile
         });
       case exports.TileType.Badge:
-        return /*#__PURE__*/React__namespace.createElement(BadgeTile, {
+        return /*#__PURE__*/React__namespace.createElement(BadgeTile$1, {
           tile: tile
         });
       case exports.TileType.Tier:
@@ -20801,15 +20985,15 @@ var TileContainer = function (_a) {
           tile: tile
         });
       case exports.TileType.Points:
-        return /*#__PURE__*/React__namespace.createElement(PointsTile, {
+        return /*#__PURE__*/React__namespace.createElement(PointsTile$1, {
           tile: tile
         });
       case exports.TileType.Reward:
-        return /*#__PURE__*/React__namespace.createElement(RewardTile, {
+        return /*#__PURE__*/React__namespace.createElement(RewardTile$1, {
           tile: tile
         });
       case exports.TileType.RewardCategory:
-        return /*#__PURE__*/React__namespace.createElement(RewardCategoryTile, {
+        return /*#__PURE__*/React__namespace.createElement(RewardCategoryTile$1, {
           tile: tile
         });
     }
@@ -20931,9 +21115,9 @@ var Reward = /** @class */function () {
   return Reward;
 }();
 
-exports.BadgeTile = BadgeTile;
+exports.BadgeTile = BadgeTile$1;
 exports.BadgeTileConfig = BadgeTileConfig;
-exports.BannerTile = BannerTile;
+exports.BannerTile = BannerTile$1;
 exports.BannerTileConfig = BannerTileConfig;
 exports.BaseBanner = BaseBanner;
 exports.BaseTile = BaseTile;
@@ -20941,7 +21125,7 @@ exports.Button = Button;
 exports.Carousel = Carousel;
 exports.Column = Column;
 exports.Content = Column$1;
-exports.ContentTile = ContentTile;
+exports.ContentTile = ContentTile$1;
 exports.ContentTileConfig = ContentTileConfig;
 exports.FlexBox = FlexBox;
 exports.Grid = Grid;
@@ -20949,15 +21133,15 @@ exports.Group = Group;
 exports.Icon = Icon;
 exports.Indicator = Indicator;
 exports.LoadingIndicator = LoadingIndicator;
-exports.PointsTile = PointsTile;
+exports.PointsTile = PointsTile$1;
 exports.PointsTileConfig = PointsTileConfig;
 exports.ProgressBar = ProgressBar;
 exports.ProgressIndicator = ProgressIndicator;
 exports.ProgressiveImage = ProgressiveImage;
 exports.Reward = Reward;
-exports.RewardCategoryTile = RewardCategoryTile;
+exports.RewardCategoryTile = RewardCategoryTile$1;
 exports.RewardCategoryTileConfig = RewardCategoryTileConfig;
-exports.RewardTile = RewardTile;
+exports.RewardTile = RewardTile$1;
 exports.RewardTileConfig = RewardTileConfig;
 exports.Row = Row;
 exports.RowHeader = RowHeader;