@wlloyalty/wll-react-sdk 1.0.99 → 1.0.101

package/dist/index.d.ts

@@ -677,6 +677,7 @@ type WllSdkContextType = ThemeContextType & {
     getSectionByID: (id: string) => Promise<APIResponse<TSection>>;
     getTileByID: (id: string) => Promise<APIResponse<Tile>>;
     handleNavigation: (link: string, target: CTALinkTarget) => Promise<void>;
+    refreshGroup: (id: string) => Promise<APIResponse<TGroup>>;
 } & Readonly<{
     readonly config: SDKConfig;
 }>;

package/dist/native.js

@@ -1699,9 +1699,6 @@ var validateTheme = function (theme) {
 var createSafeColor = function (color) {
     try {
         var colorInstance = Color(color);
-        console.log('Original color:', color);
-        console.log('Color instance toString:', colorInstance.toString());
-        console.log('Color instance hex:', colorInstance.hex());
         return colorInstance;
     }
     catch (error) {
@@ -1959,6 +1956,11 @@ var WllSdkProvider = function (_a) {
     var getSectionByID = useGetSectionByID(config);
     var getTileByID = useGetTileByID(config);
     var handleNavigation = useNavigation(navigationConfig);
+    var refreshGroup = React.useCallback(function (id) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2 /*return*/, getGroupByID(id)];
+        });
+    }); }, [getGroupByID]);
     var contextValue = React.useMemo(function () { return ({
         theme: theme,
         setTheme: setTheme,
@@ -1966,6 +1968,7 @@ var WllSdkProvider = function (_a) {
         getSectionByID: getSectionByID,
         getTileByID: getTileByID,
         handleNavigation: handleNavigation,
+        refreshGroup: refreshGroup,
         config: config,
     }); }, [
         theme,
@@ -1974,6 +1977,7 @@ var WllSdkProvider = function (_a) {
         getSectionByID,
         getTileByID,
         handleNavigation,
+        refreshGroup,
         config,
     ]);
     return (jsxRuntimeExports.jsx(WllSdkContext.Provider, { value: contextValue, children: jsxRuntimeExports.jsx(ResponsiveProvider, { children: children }) }));
@@ -2311,11 +2315,33 @@ var Text = function (_a) {
         }
     };
     var variantStyle = getVariantStyle(variant);
-    var baseTextStyle = {
-        fontFamily: theme.fontFamily,
-    };
-    // NOTE: We must apply fontFamily as base style to ensure it's always applied
-    return jsxRuntimeExports.jsx(reactNative.Text, __assign({ style: [baseTextStyle, variantStyle, style] }, props));
+    // NOTE: React Native Web has different style resolution rules compared to CSS.
+    // 1. We create styles using StyleSheet.create for better performance
+    // 2. Base styles set the initial fontFamily
+    // 3. variantStyle contains responsive fontSize and other variant-specific styles
+    // 4. webOverrides ensures fontFamily is correctly applied on web platform
+    //    (prevents system font stack from being incorrectly applied)
+    // 5. custom style prop has highest precedence
+    // The order matters because RN Web resolves styles by specific properties
+    // rather than last-declaration-wins like in CSS
+    // https://necolas.github.io/react-native-web/docs/styling/#how-it-works
+    var styles = reactNative.StyleSheet.create({
+        base: {
+            fontFamily: theme.fontFamily,
+        },
+        webOverrides: IS_WEB
+            ? {
+                fontFamily: theme.fontFamily,
+            }
+            : {},
+    });
+    var combinedStyles = [
+        styles.base,
+        variantStyle,
+        styles.webOverrides,
+        style,
+    ];
+    return jsxRuntimeExports.jsx(reactNative.Text, __assign({ style: combinedStyles }, props));
 };
 
 var MAX_WIDTH = 1080;
@@ -4032,47 +4058,61 @@ var useGroupData = function (id) {
     var _a = React.useState(null), groupData = _a[0], setGroupData = _a[1];
     var _b = React.useState(null), error = _b[0], setError = _b[1];
     var _c = React.useState(true), isLoading = _c[0], setIsLoading = _c[1];
-    var fetchGroup = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var response, err_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!id || !sdk || !sdk.getGroupByID) {
-                        setError('Unable to fetch group data: invalid configuration');
-                        setIsLoading(false);
-                        return [2 /*return*/];
-                    }
-                    setIsLoading(true);
-                    setError(null);
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, 4, 5]);
-                    return [4 /*yield*/, sdk.getGroupByID(id)];
-                case 2:
-                    response = _a.sent();
-                    if (response && response.status === 'success' && response.data) {
-                        setGroupData(response.data);
-                    }
-                    else {
-                        setError((response && response.error) || 'Failed to fetch group data.');
-                    }
-                    return [3 /*break*/, 5];
-                case 3:
-                    err_1 = _a.sent();
-                    setError('Failed to fetch group data. Please try again later.');
-                    console.error('Error fetching group:', err_1);
-                    return [3 /*break*/, 5];
-                case 4:
-                    setIsLoading(false);
-                    return [7 /*endfinally*/];
-                case 5: return [2 /*return*/];
-            }
+    var fetchGroup = React.useCallback(function () {
+        var args_1 = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args_1[_i] = arguments[_i];
+        }
+        return __awaiter(void 0, __spreadArray([], args_1, true), void 0, function (showLoading) {
+            var response, err_1;
+            if (showLoading === void 0) { showLoading = true; }
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!id || !sdk || !sdk.getGroupByID) {
+                            setError('Unable to fetch group data: invalid configuration');
+                            setIsLoading(false);
+                            return [2 /*return*/];
+                        }
+                        if (showLoading) {
+                            setIsLoading(true);
+                        }
+                        setError(null);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, 4, 5]);
+                        return [4 /*yield*/, sdk.refreshGroup(id)];
+                    case 2:
+                        response = _a.sent();
+                        if (response && response.status === 'success' && response.data) {
+                            setGroupData(response.data);
+                        }
+                        else {
+                            setError((response && response.error) || 'Failed to fetch group data.');
+                        }
+                        return [3 /*break*/, 5];
+                    case 3:
+                        err_1 = _a.sent();
+                        setError('Failed to fetch group data. Please try again later.');
+                        console.error('Error fetching group:', err_1);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        if (showLoading) {
+                            setIsLoading(false);
+                        }
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
         });
-    }); }, [id, sdk]);
+    }, [id, sdk]);
+    var refreshGroup = React.useCallback(function () {
+        return fetchGroup(false);
+    }, [fetchGroup]);
     React.useEffect(function () {
-        fetchGroup();
+        fetchGroup(true);
     }, [fetchGroup]);
-    return { groupData: groupData, isLoading: isLoading, error: error };
+    return { groupData: groupData, isLoading: isLoading, error: error, refreshGroup: refreshGroup };
 };
 /**
  * Component to display an empty state with a message