@wlloyalty/wll-react-sdk 1.4.3 → 1.4.4

package/dist/types/components/organisms/Group/index.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 import { TGroup } from '../../../types/group';
 type GroupProps = {
     id: string;
+    enablePullToRefresh?: boolean;
+    onRefresh?: () => Promise<void>;
 };
 type GroupContextType = {
     groupData: TGroup;
@@ -46,5 +48,5 @@ export declare const GroupSections: () => JSX.Element;
  * @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
  */
-declare const Group: ({ id }: GroupProps) => JSX.Element | null;
+declare const Group: ({ id, enablePullToRefresh, onRefresh }: GroupProps) => JSX.Element | null;
 export default Group;

package/dist/types/hooks/useInvalidateData.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Hook to invalidate SDK data
+ * @returns Methods to trigger SDK data updates
+ */
+export declare function useInvalidateData(): {
+    invalidateGroupData: () => void;
+    invalidateSectionData: (sectionId?: string) => void;
+    invalidateTileData: (tileId?: string) => void;
+};

package/dist/types/hooks/usePullToRefresh.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { RefreshControl } from 'react-native';
+type UsePullToRefreshProps = {
+    onRefresh?: () => Promise<void>;
+    refreshing?: boolean;
+};
+export declare function usePullToRefresh({ onRefresh, refreshing: externalRefreshing, }?: UsePullToRefreshProps): {
+    refreshControl: React.CElement<import("react-native").RefreshControlProps, RefreshControl>;
+    refreshing: boolean;
+    handleRefresh: () => Promise<void>;
+};
+export {};

package/dist/types/index.d.ts

@@ -2,6 +2,8 @@ export * from './components/atoms';
 export * from './components/molecules';
 export * from './components/organisms';
 export * from './context/WllSdkContext';
+export { useInvalidateData } from './hooks/useInvalidateData';
+export { usePullToRefresh } from './hooks/usePullToRefresh';
 export * from './types/common';
 export * from './types/group';
 export * from './types/navigation';

package/dist/web.js

@@ -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";
@@ -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"
@@ -21559,17 +21652,26 @@ var GroupSections = function () {
  * @returns {JSX.Element|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))));
 };
 
 /**
@@ -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