@wlloyalty/wll-react-sdk 1.4.3 → 1.4.5

package/dist/web.js

@@ -19317,7 +19317,7 @@ var useTileSize = function (tile) {
  * Renders the body text of a BaseTile component.
  *
  * @param {BaseTileBodyProps} props - Component props including text styling options
- * @returns {JSX.Element|null} The rendered body text or null if conditions for display are not met
+ * @returns {React.ReactElement|null} The rendered body text or null if conditions for display are not met
  */
 var BaseTileBody = function (props) {
   var tileContext = useTileContext();
@@ -19448,7 +19448,7 @@ var useBaseTileStyles = function () {
  *
  * @param {BaseTileContentProps} props - Component props
  * @param {ReactNode} props.children - Child elements to render within the content area
- * @returns {JSX.Element|null} The rendered content or null if conditions for display are not met
+ * @returns {React.ReactElement|null} The rendered content or null if conditions for display are not met
  */
 var BaseTileContent = function (_a) {
   var children = _a.children;
@@ -19473,7 +19473,7 @@ var BaseTileContent = function (_a) {
  *
  * @param {BaseTileHeaderProps} props - Component props
  * @param {ReactNode} props.children - Child elements to render within the header
- * @returns {JSX.Element|null} The rendered header or null if conditions for display are not met
+ * @returns {React.ReactElement|null} The rendered header or null if conditions for display are not met
  */
 var BaseTileHeader = function (_a) {
   var children = _a.children;
@@ -19500,7 +19500,7 @@ var BaseTileHeader = function (_a) {
  * Renders the media (image) for a BaseTile component.
  *
  * @param {ImagePropsNoSource} props - The image props excluding source
- * @returns {JSX.Element|null} The rendered image or null if no artwork URL is present
+ * @returns {React.ReactElement|null} The rendered image or null if no artwork URL is present
  */
 var BaseTileMedia = function (props) {
   var tileContext = useTileContext();
@@ -19525,7 +19525,7 @@ var BaseTileMedia = function (props) {
 /**
  * Renders the title of a BaseTile component.
  *
- * @returns {JSX.Element|null} The rendered title or null if conditions for display are not met
+ * @returns {React.ReactElement|null} The rendered title or null if conditions for display are not met
  */
 var BaseTileTitle = function () {
   var _a, _b;
@@ -19631,7 +19631,7 @@ var BaseTileContainer = function (_a) {
  * BaseTileRoot component to provide context and render children.
  *
  * @param {BaseTileProps} props - Component props
- * @returns {JSX.Element|null} The rendered BaseTileRoot or null if no tile is provided
+ * @returns {React.ReactElement|null} The rendered BaseTileRoot or null if no tile is provided
  */
 var BaseTileRoot = function (_a) {
   var tile = _a.tile,
@@ -20038,7 +20038,7 @@ var useBadgeTileStyles = function () {
 /**
  * Renders the date earned for a Badge Tile.
  *
- * @returns JSX.Element or null if badge is not earned or badgeNotEarnedMessage exists
+ * @returns React.ReactElement or null if badge is not earned or badgeNotEarnedMessage exists
  */
 var BadgeTileDateEarned = function () {
   var styles = useBadgeTileStyles();
@@ -20087,7 +20087,7 @@ var BadgeTileDateEarned = function () {
 /**
  * Renders the description for a Badge Tile.
  *
- * @returns JSX.Element or null if description is not present
+ * @returns React.ReactElement or null if description is not present
  */
 var BadgeTileDescription = function () {
   var tileContext = useTileContext();
@@ -20127,7 +20127,7 @@ var BadgeTileDescription = function () {
 /**
  * Renders the media for a Badge Tile.
  *
- * @returns JSX.Element or null if media is not present
+ * @returns React.ReactElement or null if media is not present
  */
 var BadgeTileMedia = function (_a) {
   var children = _a.children,
@@ -20161,7 +20161,7 @@ var BadgeTileMedia = function (_a) {
 /**
  * Renders the status for a Badge Tile.
  *
- * @returns JSX.Element or null if badge is not earned or badgeNotEarnedMessage exists
+ * @returns React.ReactElement or null if badge is not earned or badgeNotEarnedMessage exists
  */
 var BadgeTileStatus = function () {
   var styles = useBadgeTileStyles();
@@ -20196,7 +20196,7 @@ var BadgeTileStatus = function () {
 /**
  * Renders the title for a Badge Tile.
  *
- * @returns JSX.Element or null if name is not present
+ * @returns React.ReactElement or null if name is not present
  */
 var BadgeTileTitle = function () {
   var styles = useBadgeTileStyles();
@@ -20225,7 +20225,7 @@ var BadgeTileTitle = function () {
 
 /**
  * The main BadgeTile component.
- * @returns JSX.Element or null if tile is not active or tileHeight is not full.
+ * @returns React.ReactElement or null if tile is not active or tileHeight is not full.
  * This component renders a badge tile with optional media, status, title, description, and date earned.
  */
 var BadgeTileRoot = function (_a) {
@@ -20253,7 +20253,7 @@ var BadgeTile$1 = withTileFetching(BadgeTile);
 /**
  * Renders the call to action of a Banner Tile.
  *
- * @returns JSX.Element or null if no text or required props are present
+ * @returns React.ReactElement or null if no text or required props are present
  */
 var BannerTileCTA = function () {
   var bannerContext = useBannerContext();
@@ -20321,7 +20321,7 @@ var useBannerTileStyles = function () {
 /**
  * Renders the description text of a Banner Tile.
  *
- * @returns JSX.Element or null if no description is present
+ * @returns React.ReactElement or null if no description is present
  */
 var BannerTileDescription = function () {
   var styles = useBannerTileStyles();
@@ -20339,7 +20339,7 @@ var BannerTileDescription = function () {
 /**
  * Renders the media of a Banner Tile.
  *
- * @returns JSX.Element or null if no media is present
+ * @returns React.ReactElement or null if no media is present
  */
 var BannerTileMedia = function (_a) {
   var isArtworkOnly = _a.isArtworkOnly;
@@ -20370,7 +20370,7 @@ var BannerTileMedia = function (_a) {
 /**
  * Renders the title of a Banner Tile.
  *
- * @returns JSX.Element or null if no title is present
+ * @returns React.ReactElement or null if no title is present
  */
 var BannerTileTitle = function () {
   var styles = useBannerTileStyles();
@@ -20403,7 +20403,7 @@ var isArtworkOnly$2 = function (configuration) {
  * This component renders a banner tile with optional media, title, description, and CTA.
  *
  * @param {BannerTileProps} props - Component props
- * @returns {JSX.Element | null} Rendered component or null if tile is inactive
+ * @returns {React.ReactElement | null} Rendered component or null if tile is inactive
  */
 var BannerTileRoot = function (_a) {
   var tile = _a.tile;
@@ -20604,7 +20604,7 @@ var isArtworkOnly$1 = function (configuration) {
  *
  * @param {ContentTileProps} props - Component props
  * @param {Tile} props.tile - The tile data to render
- * @returns JSX.Element or null if tile is inactive
+ * @returns React.ReactElement or null if tile is inactive
  */
 var ContentTileRoot = function (_a) {
   var tile = _a.tile;
@@ -20758,6 +20758,98 @@ var useInitialGroupFetch = function (_a) {
   };
 };
 
+/**
+ * Hook to invalidate SDK data
+ * @returns Methods to trigger SDK data updates
+ */
+function useInvalidateData() {
+  var sdk = useWllSdk();
+  return {
+    invalidateGroupData: function () {
+      if (sdk) {
+        sdk.notifyDataChange('GROUP_DATA_CHANGED');
+      }
+    },
+    invalidateSectionData: function (sectionId) {
+      if (sdk) {
+        sdk.notifyDataChange('SECTION_DATA_CHANGED', {
+          sectionId: sectionId
+        });
+      }
+    },
+    invalidateTileData: function (tileId) {
+      if (sdk) {
+        sdk.notifyDataChange('TILE_DATA_CHANGED', {
+          tileId: tileId
+        });
+      }
+    }
+  };
+}
+
+function usePullToRefresh(_a) {
+  var _this = this;
+  var _b = _a === void 0 ? {} : _a,
+    onRefresh = _b.onRefresh,
+    externalRefreshing = _b.refreshing;
+  var _c = React.useState(false),
+    internalRefreshing = _c[0],
+    setInternalRefreshing = _c[1];
+  var invalidateGroupData = useInvalidateData().invalidateGroupData;
+  var refreshing = externalRefreshing !== null && externalRefreshing !== void 0 ? externalRefreshing : internalRefreshing;
+  var handleRefresh = React.useCallback(function () {
+    return __awaiter(_this, void 0, void 0, function () {
+      var error_1;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (refreshing) return [2 /*return*/];
+            setInternalRefreshing(true);
+            _a.label = 1;
+          case 1:
+            _a.trys.push([1, 6, 7, 8]);
+            if (!onRefresh) return [3 /*break*/, 3];
+            return [4 /*yield*/, onRefresh()];
+          case 2:
+            _a.sent();
+            return [3 /*break*/, 5];
+          case 3:
+            // Default behavior: refresh all group data
+            invalidateGroupData();
+            // Add a small delay to show the refresh animation
+            return [4 /*yield*/, new Promise(function (resolve) {
+              return setTimeout(resolve, 1000);
+            })];
+          case 4:
+            // Add a small delay to show the refresh animation
+            _a.sent();
+            _a.label = 5;
+          case 5:
+            return [3 /*break*/, 8];
+          case 6:
+            error_1 = _a.sent();
+            console.error('Pull to refresh failed:', error_1);
+            return [3 /*break*/, 8];
+          case 7:
+            setInternalRefreshing(false);
+            return [7 /*endfinally*/];
+          case 8:
+            return [2 /*return*/];
+        }
+      });
+    });
+  }, [refreshing, onRefresh, invalidateGroupData]);
+  var refreshControl = /*#__PURE__*/React.createElement(RefreshControl, {
+    refreshing: refreshing,
+    onRefresh: handleRefresh
+  });
+  return {
+    refreshControl: refreshControl,
+    refreshing: refreshing,
+    handleRefresh: handleRefresh
+  };
+}
+
 exports.SectionType = void 0;
 (function (SectionType) {
   SectionType["Grid"] = "GRID";
@@ -21355,7 +21447,7 @@ var useSectionData = function (section, sectionId) {
  *
  * @param {Object} props - Component props
  * @param {string} props.message - Message to display in the empty state
- * @returns {JSX.Element} The empty state component
+ * @returns {React.ReactElement} The empty state component
  */
 var EmptyState = function (_a) {
   var message = _a.message;
@@ -21371,7 +21463,7 @@ var EmptyState = function (_a) {
  * @param {SectionProps} props - Component props
  * @param {TSection} [props.section] - The section data
  * @param {string} [props.sectionId] - The ID of the section to fetch
- * @returns {JSX.Element|null} The rendered section or null if invalid props
+ * @returns {React.ReactElement|null} The rendered section or null if invalid props
  */
 var Section = function (_a) {
   var section = _a.section,
@@ -21501,7 +21593,7 @@ var useGroupData = function (id) {
  *
  * @param {GroupEmptyStateProps} props - Component props
  * @param {string} props.message - Message to display
- * @returns {JSX.Element} The empty state component
+ * @returns {React.ReactElement} The empty state component
  */
 var GroupEmptyState = function (_a) {
   var message = _a.message;
@@ -21516,7 +21608,7 @@ var GroupEmptyState = function (_a) {
 /**
  * Component to render all sections in a group
  *
- * @returns {JSX.Element} The sections component
+ * @returns {React.ReactElement} The sections component
  */
 var GroupSections = function () {
   var groupData = useGroupContext().groupData;
@@ -21535,7 +21627,8 @@ var GroupSections = function () {
     });
   }
   var sortedSections = sortByPriority(activeSections);
-  return /*#__PURE__*/React.createElement(View$2, {
+  var Container = IS_WEB ? View$2 : ScrollView$2;
+  return /*#__PURE__*/React.createElement(Container, {
     accessible: true,
     accessibilityLabel: "Group: ".concat(groupData.name || 'Unnamed group'),
     role: "region"
@@ -21556,20 +21649,29 @@ var GroupSections = function () {
  *
  * @param {GroupProps} props - Component props
  * @param {string} props.id - The unique identifier of the group to fetch and display
- * @returns {JSX.Element|null} The rendered group or null if invalid ID
+ * @returns {React.ReactElement|null} The rendered group or null if invalid ID
  */
 var Group = function (_a) {
-  var id = _a.id;
+  var id = _a.id,
+    _b = _a.enablePullToRefresh,
+    enablePullToRefresh = _b === void 0 ? true : _b,
+    onRefresh = _a.onRefresh;
   if (!id) {
     console.warn('Group component requires id prop');
     return null;
   }
-  var _b = useGroupData(id),
-    groupData = _b.groupData,
-    isLoading = _b.isLoading,
-    error = _b.error;
+  var _c = useGroupData(id),
+    groupData = _c.groupData,
+    isLoading = _c.isLoading,
+    error = _c.error;
   var theme = useWllSdk().theme;
-  if (isLoading) {
+  var _d = usePullToRefresh({
+      onRefresh: onRefresh,
+      refreshing: isLoading && !groupData
+    }),
+    refreshControl = _d.refreshControl;
+    _d.refreshing;
+  if (isLoading && !groupData) {
     return /*#__PURE__*/React.createElement(View$2, {
       style: {
         flex: 1,
@@ -21586,13 +21688,18 @@ var Group = function (_a) {
       message: error || 'No group data available'
     });
   }
+  var Container = IS_WEB ? View$2 : ScrollView$2;
+  var containerProps = IS_WEB ? {} : {
+    refreshControl: enablePullToRefresh ? refreshControl : undefined,
+    showsVerticalScrollIndicator: true
+  };
   return /*#__PURE__*/React.createElement(GroupContext.Provider, {
     value: {
       groupData: groupData
     }
   }, /*#__PURE__*/React.createElement(View$2, {
     testID: "group-container"
-  }, /*#__PURE__*/React.createElement(GroupSections, null)));
+  }, /*#__PURE__*/React.createElement(Container, __assign({}, containerProps), /*#__PURE__*/React.createElement(GroupSections, null))));
 };
 
 /**
@@ -21863,7 +21970,7 @@ var usePointsTileStyles = function (isFullSize) {
 /**
  * Renders formatted points value for a Points Tile.
  *
- * @returns JSX.Element or null if points are undefined or zero
+ * @returns React.ReactElement or null if points are undefined or zero
  */
 var PointsTileFormattedPoints = function () {
   var styles = usePointsTileStyles();
@@ -21904,7 +22011,7 @@ var PointsTileFormattedPoints = function () {
 /**
  * Renders the media of a Points Tile.
  *
- * @returns JSX.Element or null if media is not present
+ * @returns React.ReactElement or null if media is not present
  */
 var PointsTileMedia = function (_a) {
   var isFullSize = _a.isFullSize;
@@ -21933,7 +22040,7 @@ var PointsTileMedia = function (_a) {
 /**
  * Renders the title of a Points Tile.
  *
- * @returns JSX.Element or null if no title is present
+ * @returns React.ReactElement or null if no title is present
  */
 var PointsTileTitle = function () {
   var tileContext = useTileContext();
@@ -21951,7 +22058,7 @@ var PointsTileTitle = function () {
 /**
  * Renders a chevron icon for a Roundup Tile.
  *
- * @returns JSX.Element
+ * @returns React.ReactElement
  */
 var PointsTileChevron = function () {
   var _a, _b;
@@ -21976,7 +22083,7 @@ var PointsTileChevron = function () {
  * The PointsTile component renders a tile with media, title, and formatted points.
  *
  * @param props - Component props
- * @returns JSX.Element or null if tile is inactive or missing required props
+ * @returns React.ReactElement or null if tile is inactive or missing required props
  */
 var PointsTileRoot = function (_a) {
   var tile = _a.tile;
@@ -22052,7 +22159,7 @@ var useRewardCategoryTileStyles = function () {
 /**
  * Renders the header for a Reward Category Tile.
  *
- * @returns JSX.Element or null if showName is false or name is not present
+ * @returns React.ReactElement or null if showName is false or name is not present
  */
 var RewardCategoryHeader = function () {
   var styles = useRewardCategoryTileStyles();
@@ -22084,7 +22191,7 @@ var RewardCategoryHeader = function () {
 /**
  * Renders the background media for a Reward Category Tile.
  *
- * @returns JSX.Element or null if no artwork URL is present
+ * @returns React.ReactElement or null if no artwork URL is present
  */
 var RewardCategoryMedia = function () {
   var styles = useRewardCategoryTileStyles();
@@ -22111,7 +22218,7 @@ var RewardCategoryMedia = function () {
  *
  * @param {RewardCategoryTileProps} props - The component props
  * @param {Tile} props.tile - The tile data to render
- * @returns {JSX.Element|null} Rendered component or null if tile is inactive or missing configuration
+ * @returns {React.ReactElement|null} Rendered component or null if tile is inactive or missing configuration
  */
 var RewardCategoryTileRoot = function (_a) {
   var tile = _a.tile;
@@ -22132,7 +22239,7 @@ var RewardCategoryTile$1 = withTileFetching(RewardCategoryTile);
 /**
  * Renders a chevron icon for a Reward Tile.
  *
- * @returns JSX.Element
+ * @returns React.ReactElement
  */
 var RewardTileChevron = function () {
   var _a;
@@ -22204,7 +22311,7 @@ var useRewardTileStyles = function () {
  *
  * @param props {RewardTileMediaProps} - Component props
  * @param props.isArtworkOnly {boolean} - Whether the media should be rendered as an artwork only component
- * @returns JSX.Element or null if no artwork URL is present or artwork should not be shown
+ * @returns React.ReactElement or null if no artwork URL is present or artwork should not be shown
  */
 var RewardTileMedia = function (_a) {
   var isArtworkOnly = _a.isArtworkOnly;
@@ -22238,7 +22345,7 @@ var RewardTileMedia = function (_a) {
 /**
  * Renders the points value of a Reward Tile.
  *
- * @returns JSX.Element or null if price should not be shown or is zero/undefined
+ * @returns React.ReactElement or null if price should not be shown or is zero/undefined
  */
 var RewardTilePoints = function () {
   var styles = useRewardTileStyles();
@@ -22282,7 +22389,7 @@ var RewardTilePoints = function () {
 /**
  * Renders the summary of a Reward Tile.
  *
- * @returns JSX.Element or null if no summary is present
+ * @returns React.ReactElement or null if no summary is present
  */
 var RewardTileSummary = function () {
   var tileContext = useTileContext();
@@ -22308,7 +22415,7 @@ var RewardTileSummary = function () {
 /**
  * Renders the title of a Reward Tile.
  *
- * @returns JSX.Element or null if no name is present
+ * @returns React.ReactElement or null if no name is present
  */
 var RewardTileTitle = function () {
   var tileContext = useTileContext();
@@ -22347,7 +22454,7 @@ var isArtworkOnly = function (configuration) {
  *
  * @param {RewardTileProps} props - Component props
  * @param {Tile} props.tile - The tile data to render
- * @returns JSX.Element or null if tile is inactive or not a full-height tile
+ * @returns React.ReactElement or null if tile is inactive or not a full-height tile
  */
 var RewardTileRoot = function (_a) {
   var tile = _a.tile;
@@ -22570,7 +22677,7 @@ TierTile.Empty = TierTileEmpty;
 /**
  * Renders formatted points value for a Roundup Tile.
  *
- * @returns JSX.Element or null if points are undefined or zero
+ * @returns React.ReactElement or null if points are undefined or zero
  */
 var RoundupTileFormattedPoints = function () {
   var tileContext = useTileContext();
@@ -22659,7 +22766,7 @@ var useRoundupTileStyles = function (isFullSize) {
 /**
  * Renders the media of a Points Tile.
  *
- * @returns JSX.Element or null if media is not present
+ * @returns React.ReactElement or null if media is not present
  */
 var RoundupTileMedia = function (_a) {
   var isFullSize = _a.isFullSize;
@@ -22688,7 +22795,7 @@ var RoundupTileMedia = function (_a) {
 /**
  * Renders the title of a Roundup Tile.
  *
- * @returns JSX.Element or null if no title is present
+ * @returns React.ReactElement or null if no title is present
  */
 var RoundupTileTitle = function () {
   var tileContext = useTileContext();
@@ -22706,7 +22813,7 @@ var RoundupTileTitle = function () {
 /**
  * Renders a chevron icon for a Roundup Tile.
  *
- * @returns JSX.Element
+ * @returns React.ReactElement
  */
 var RoundupTileChevron = function () {
   var _a, _b;
@@ -22731,7 +22838,7 @@ var RoundupTileChevron = function () {
  * The PointsTile component renders a tile with media, title, and formatted points.
  *
  * @param props - Component props
- * @returns JSX.Element or null if tile is inactive or missing required props
+ * @returns React.ReactElement or null if tile is inactive or missing required props
  */
 var RoundupTileRoot = function (_a) {
   var tile = _a.tile;
@@ -22859,5 +22966,7 @@ exports.TileContainer = TileContainer;
 exports.WllSdkProvider = WllSdkProvider;
 exports.alignMap = alignMap;
 exports.justifyMap = justifyMap;
+exports.useInvalidateData = useInvalidateData;
+exports.usePullToRefresh = usePullToRefresh;
 exports.useWllSdk = useWllSdk;
 //# sourceMappingURL=web.js.map