@wlloyalty/wll-react-sdk 1.4.3 → 1.4.4

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as LucideReactIcons from 'lucide-react';
 import * as react_native from 'react-native';
-import { ViewProps, ImageSourcePropType, StyleProp, ViewStyle, TextProps as TextProps$1, TextStyle, ImageProps } from 'react-native';
+import { ViewProps, ImageSourcePropType, StyleProp, ViewStyle, TextProps as TextProps$1, TextStyle, ImageProps, RefreshControl } from 'react-native';
 import * as React$1 from 'react';
 import React__default from 'react';
 
@@ -600,6 +600,8 @@ type TGroup = {
 
 type GroupProps = {
     id: string;
+    enablePullToRefresh?: boolean;
+    onRefresh?: () => Promise<void>;
 };
 /**
  * A page-level component that represents a Group view in the application.
@@ -613,7 +615,7 @@ type GroupProps = {
  * @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;
 
 type PointsTileProps = {
     tile: Tile;
@@ -725,4 +727,24 @@ type WllSdkProviderProps = WithChildren & {
 declare const WllSdkProvider: ({ children, theme: providedTheme, config, navigationConfig, }: WllSdkProviderProps) => JSX.Element;
 declare const useWllSdk: () => WllSdkContextType;
 
-export { type APIResponse, type Align, type AllowedCoreApiUrl, type Availability, type Badge, type BadgeDetail, _default$6 as BadgeTile, BadgeTileConfig, BadgeTileType, _default$5 as BannerTile, BannerTileConfig, BaseBanner, type BaseThemeObject, BaseTile, Button, CTALinkTarget, Carousel, CarouselNavButton, Column, _default$4 as ContentTile, ContentTileConfig, CoreApiUrl, type DerivedColors, type DerivedProperties, type DesaturationType, type FlexDirection, FullFlex, Grid, Group, Icon, type ImagePropsNoSource, Indicator, type Justify, Layout, type LayoutProps$1 as LayoutProps, LoadingIndicator, type NavigationConfig, type NavigationType, type PercentageKey, _default$3 as PointsTile, PointsTileConfig, type ProgessType, ProgressBar, ProgressIndicator, ProgressType, ProgressiveImage, Reward, type RewardCategory, _default$2 as RewardCategoryTile, RewardCategoryTileConfig, _default$1 as RewardTile, RewardTileConfig, _default as RoundupTile, RoundupTileConfig, Row, type SDKConfig, Section, SectionHeader, SectionType, type Size, Skeleton, Spacer, type TGroup, type TSection, Text, type ThemeContextType, type ThemeObject, type ThemeProviderProps, TierTileConfig, TierTileType, TierTile as TierTileUpdated, type TierType, type Tile, type TileConfig, TileContainer, TileHeight, type TileSizeInfo, TileType, type Variant, WllSdkProvider, alignMap, justifyMap, useWllSdk };
+/**
+ * Hook to invalidate SDK data
+ * @returns Methods to trigger SDK data updates
+ */
+declare function useInvalidateData(): {
+    invalidateGroupData: () => void;
+    invalidateSectionData: (sectionId?: string) => void;
+    invalidateTileData: (tileId?: string) => void;
+};
+
+type UsePullToRefreshProps = {
+    onRefresh?: () => Promise<void>;
+    refreshing?: boolean;
+};
+declare function usePullToRefresh({ onRefresh, refreshing: externalRefreshing, }?: UsePullToRefreshProps): {
+    refreshControl: React__default.CElement<react_native.RefreshControlProps, RefreshControl>;
+    refreshing: boolean;
+    handleRefresh: () => Promise<void>;
+};
+
+export { type APIResponse, type Align, type AllowedCoreApiUrl, type Availability, type Badge, type BadgeDetail, _default$6 as BadgeTile, BadgeTileConfig, BadgeTileType, _default$5 as BannerTile, BannerTileConfig, BaseBanner, type BaseThemeObject, BaseTile, Button, CTALinkTarget, Carousel, CarouselNavButton, Column, _default$4 as ContentTile, ContentTileConfig, CoreApiUrl, type DerivedColors, type DerivedProperties, type DesaturationType, type FlexDirection, FullFlex, Grid, Group, Icon, type ImagePropsNoSource, Indicator, type Justify, Layout, type LayoutProps$1 as LayoutProps, LoadingIndicator, type NavigationConfig, type NavigationType, type PercentageKey, _default$3 as PointsTile, PointsTileConfig, type ProgessType, ProgressBar, ProgressIndicator, ProgressType, ProgressiveImage, Reward, type RewardCategory, _default$2 as RewardCategoryTile, RewardCategoryTileConfig, _default$1 as RewardTile, RewardTileConfig, _default as RoundupTile, RoundupTileConfig, Row, type SDKConfig, Section, SectionHeader, SectionType, type Size, Skeleton, Spacer, type TGroup, type TSection, Text, type ThemeContextType, type ThemeObject, type ThemeProviderProps, TierTileConfig, TierTileType, TierTile as TierTileUpdated, type TierType, type Tile, type TileConfig, TileContainer, TileHeight, type TileSizeInfo, TileType, type Variant, WllSdkProvider, alignMap, justifyMap, useInvalidateData, usePullToRefresh, useWllSdk };

package/dist/native.js

@@ -3859,6 +3859,85 @@ var useInitialGroupFetch = function (_a) {
     return { isLoading: isLoading, error: error };
 };
 
+/**
+ * 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 = React.createElement(reactNative.RefreshControl, {
+        refreshing: refreshing,
+        onRefresh: handleRefresh,
+    });
+    return {
+        refreshControl: refreshControl,
+        refreshing: refreshing,
+        handleRefresh: handleRefresh,
+    };
+}
+
 exports.SectionType = void 0;
 (function (SectionType) {
     SectionType["Grid"] = "GRID";
@@ -4450,7 +4529,8 @@ var GroupSections = function () {
         return (jsxRuntimeExports.jsx(GroupEmptyState, { message: "This group doesn't have any active sections" }));
     }
     var sortedSections = sortByPriority(activeSections);
-    return (jsxRuntimeExports.jsx(reactNative.View, { accessible: true, accessibilityLabel: "Group: ".concat(groupData.name || 'Unnamed group'), role: "region", children: sortedSections.map(function (section) { return (jsxRuntimeExports.jsx(Section, { section: section }, section.id)); }) }));
+    var Container = IS_WEB ? reactNative.View : reactNative.ScrollView;
+    return (jsxRuntimeExports.jsx(Container, { accessible: true, accessibilityLabel: "Group: ".concat(groupData.name || 'Unnamed group'), role: "region", children: sortedSections.map(function (section) { return (jsxRuntimeExports.jsx(Section, { section: section }, section.id)); }) }));
 };
 /**
  * A page-level component that represents a Group view in the application.
@@ -4465,14 +4545,18 @@ 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 (jsxRuntimeExports.jsx(reactNative.View, { style: {
                 flex: 1,
                 padding: IS_MOBILE ? theme.sizes.lg : undefined,
@@ -4481,7 +4565,14 @@ var Group = function (_a) {
     if (error || !groupData) {
         return jsxRuntimeExports.jsx(GroupEmptyState, { message: error || 'No group data available' });
     }
-    return (jsxRuntimeExports.jsx(GroupContext.Provider, { value: { groupData: groupData }, children: jsxRuntimeExports.jsx(reactNative.View, { testID: "group-container", children: jsxRuntimeExports.jsx(GroupSections, {}) }) }));
+    var Container = IS_WEB ? reactNative.View : reactNative.ScrollView;
+    var containerProps = IS_WEB
+        ? {}
+        : {
+            refreshControl: enablePullToRefresh ? refreshControl : undefined,
+            showsVerticalScrollIndicator: true,
+        };
+    return (jsxRuntimeExports.jsx(GroupContext.Provider, { value: { groupData: groupData }, children: jsxRuntimeExports.jsx(reactNative.View, { testID: "group-container", children: jsxRuntimeExports.jsx(Container, __assign({}, containerProps, { children: jsxRuntimeExports.jsx(GroupSections, {}) })) }) }));
 };
 
 /**
@@ -5393,5 +5484,7 @@ exports.TileContainer = TileContainer;
 exports.WllSdkProvider = WllSdkProvider;
 exports.alignMap = alignMap;
 exports.justifyMap = justifyMap;
+exports.useInvalidateData = useInvalidateData;
+exports.usePullToRefresh = usePullToRefresh;
 exports.useWllSdk = useWllSdk;
 //# sourceMappingURL=native.js.map