@wlloyalty/wll-react-sdk 1.0.58 → 1.0.59

package/dist/types/constants/theme.d.ts

@@ -0,0 +1,6 @@
+export declare const COLOR_CONSTANTS: {
+    readonly MINIMUM_CONTRAST_RATIO: 2;
+    readonly DEFAULT_LIGHTNESS_ADJUSTMENT: 0.2;
+    readonly DESATURATION_LIGHTEN_AMOUNT: 2;
+    readonly DEFAULT_COLOR: "#FFFFFF";
+};

package/dist/types/context/WllSdkContext.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactNode } from 'react';
 import { TGroup } from '../types/group';
 import { NavigationConfig } from '../types/navigation';
 import { TSection } from '../types/section';
@@ -20,10 +20,12 @@ type WllSdkContextType = ThemeContextType & {
     getGroupByID: (id: string) => Promise<APIResponse<TGroup>>;
     getSectionByID: (id: string) => Promise<APIResponse<TSection>>;
     getTileByID: (id: string) => Promise<APIResponse<Tile>>;
-    handleNavigation: (link: string, target: CTALinkTarget) => void;
-};
+    handleNavigation: (link: string, target: CTALinkTarget) => Promise<void>;
+} & Readonly<{
+    readonly config: SDKConfig;
+}>;
 type WllSdkProviderProps = {
-    children: React.ReactNode;
+    children: ReactNode;
     theme?: Partial<BaseThemeObject>;
     config: SDKConfig;
     navigationConfig?: NavigationConfig;

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

@@ -1,2 +1,2 @@
 import { Tile } from '../types/tile';
-export declare const useHandleTilePress: (tile: Tile, ctaLink?: string | null, ctaLinkTarget?: string) => () => void;
+export declare const useHandleTilePress: (tile: Tile, ctaLink?: string | null, ctaLinkTarget?: string) => () => Promise<void> | undefined;

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

@@ -1,3 +1,3 @@
 import { NavigationConfig } from '../types/navigation';
 import { CTALinkTarget } from '../types/tile';
-export declare const useNavigation: (config: NavigationConfig) => (link: string, ctaTarget: CTALinkTarget) => void;
+export declare const useNavigation: (config: NavigationConfig) => (link: string, ctaTarget: CTALinkTarget) => Promise<void>;

package/dist/types/types/navigation.d.ts

@@ -5,10 +5,13 @@ type NavigationHandlerParams = {
 };
 export type NavigationConfig = {
     navigationHandlers?: {
-        external?: (params: NavigationHandlerParams) => void;
-        internal?: (params: NavigationHandlerParams) => void;
-        modal?: (params: NavigationHandlerParams) => void;
+        external?: (params: NavigationHandlerParams) => Promise<void>;
+        internal?: (params: NavigationHandlerParams) => Promise<void>;
+        modal?: (params: NavigationHandlerParams) => Promise<void>;
     };
+    external?: (params: NavigationHandlerParams) => Promise<void>;
+    internal?: (params: NavigationHandlerParams) => Promise<void>;
+    modal?: (params: NavigationHandlerParams) => Promise<void>;
     baseUrl?: string;
 };
 export {};

package/dist/types/types/theme.d.ts

@@ -1,6 +1,11 @@
 import { ReactNode } from 'react';
 import { sizes } from '../utils/styling';
-import { DerivedColors } from '../utils/themeHelpers';
+import { BadgeTileType } from './tile';
+export type PercentageKey = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 95;
+export type DerivedColors = {
+    [K in PercentageKey]: string;
+};
+export type DesaturationType = BadgeTileType.Specific | BadgeTileType.Latest;
 export type BaseThemeObject = {
     accent: string;
     background: string;

package/dist/types/utils/themeHelpers.d.ts

@@ -1,13 +1,54 @@
+import { BaseThemeObject, DerivedColors, DesaturationType } from '../types/theme';
 import { themeItems, ThemeName, themes } from './storybookThemes';
+/**
+ * Validates a theme object to ensure all required colors are present and valid
+ * @param theme - Partial theme object to validate
+ * @returns Boolean indicating if theme is valid
+ */
+export declare const validateTheme: (theme: Partial<BaseThemeObject>) => boolean;
+/**
+ * Returns a derived color based on the background darkness
+ * @param color - Base color to derive from
+ * @returns Derived color string or default color if invalid
+ */
 export declare const getDerivedColor: (color: string) => string;
+/**
+ * Determines the most readable text color (black or white) for a given background
+ * @param backgroundColor - Background color to check against
+ * @returns Hex color string for text
+ */
 export declare const getReadableTextColor: (backgroundColor: string) => string;
-type PercentageKey = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 95;
-export type DerivedColors = {
-    [K in PercentageKey]: string;
-};
+/**
+ * Generates a set of colors with varying lightness based on the base color
+ * @param color - Base color to derive from
+ * @returns Object containing derived colors at different lightness levels
+ */
 export declare const getDerivedColorPercentages: (color: string) => DerivedColors;
+/**
+ * Generates a set of colors with varying alpha values
+ * @param color - Base color to derive from
+ * @returns Object containing derived colors at different alpha levels
+ */
 export declare const getAlphaDerivedColors: (color: string) => DerivedColors;
-export declare const shouldDesaturate: (type: string, count: number) => boolean;
+/**
+ * Determines if a color should be desaturated based on type and count
+ * @param type - Type of desaturation to apply
+ * @param count - Count value affecting desaturation
+ * @returns Boolean indicating if color should be desaturated
+ */
+export declare const shouldDesaturate: (type: DesaturationType, count: number) => boolean;
+/**
+ * Desaturates a color and lightens it
+ * @param color - Color to desaturate
+ * @returns Desaturated color string or default color if invalid
+ */
 export declare const desaturateColor: (color: string) => string;
-export declare const getStateColor: (baseColor: string, type: string, count: number) => string;
+/**
+ * Gets the appropriate state color based on type and count
+ * @param baseColor - Base color to process
+ * @param type - Type of state
+ * @param count - Count affecting the state
+ * @returns Processed color string
+ */
+export declare const getStateColor: (baseColor: string, type: DesaturationType, count: number) => string;
 export { themeItems, ThemeName, themes };

package/dist/web.js

@@ -7824,17 +7824,21 @@ var parseNavigationLink = function (link) {
 
 var useNavigation = function (config) {
   var handleNavigation = React.useCallback(function (link, ctaTarget) {
-    var _a;
-    var _b = parseNavigationLink(link),
-      type = _b.type,
-      target = _b.target;
-    var windowTarget = ctaTarget === 'SAME_FRAME' ? '_self' : '_blank';
-    if ((_a = config.navigationHandlers) === null || _a === void 0 ? void 0 : _a[type]) {
-      return config.navigationHandlers[type]({
-        target: target,
-        windowTarget: windowTarget
+    return __awaiter(void 0, void 0, void 0, function () {
+      var _a, type, target, windowTarget;
+      var _b;
+      return __generator(this, function (_c) {
+        _a = parseNavigationLink(link), type = _a.type, target = _a.target;
+        windowTarget = ctaTarget === 'SAME_FRAME' ? '_self' : '_blank';
+        if ((_b = config.navigationHandlers) === null || _b === void 0 ? void 0 : _b[type]) {
+          return [2 /*return*/, Promise.resolve(config.navigationHandlers[type]({
+            target: target,
+            windowTarget: windowTarget
+          }))];
+        }
+        return [2 /*return*/, Promise.resolve()];
       });
-    }
+    });
   }, [config]);
   return handleNavigation;
 };
@@ -7960,6 +7964,13 @@ var defaultTheme = {
   negative: '#ff0000'
 };
 
+var COLOR_CONSTANTS = {
+  MINIMUM_CONTRAST_RATIO: 2,
+  DEFAULT_LIGHTNESS_ADJUSTMENT: 0.2,
+  DESATURATION_LIGHTEN_AMOUNT: 2,
+  DEFAULT_COLOR: '#FFFFFF'
+};
+
 // Storybook Themes
 ({
   modern: __assign(__assign({}, defaultTheme), {
@@ -8000,48 +8011,144 @@ var defaultTheme = {
   })
 });
 
+var isValidColor = function (color) {
+  try {
+    Color(color);
+    return true;
+  } catch (_a) {
+    return false;
+  }
+};
+/**
+ * Validates a theme object to ensure all required colors are present and valid
+ * @param theme - Partial theme object to validate
+ * @returns Boolean indicating if theme is valid
+ */
+var validateTheme = function (theme) {
+  var requiredColors = ['accent', 'background', 'errorPrimary', 'negative', 'pageButtonBackground', 'pageButtonText', 'positive', 'primary', 'surface', 'surfaceText', 'text'];
+  return requiredColors.every(function (color) {
+    return theme[color] && isValidColor(theme[color]);
+  });
+};
+/**
+ * Safely creates a Color instance with error handling
+ * @param color - Color string to process
+ * @returns Color instance or null if invalid
+ */
+var createSafeColor = function (color) {
+  try {
+    return Color(color);
+  } catch (error) {
+    console.error("Invalid color value: ".concat(color), error);
+    return null;
+  }
+};
+/**
+ * Returns a derived color based on the background darkness
+ * @param color - Base color to derive from
+ * @returns Derived color string or default color if invalid
+ */
 var getDerivedColor = function (color) {
-  var backgroundColor = Color(color);
-  return backgroundColor.isDark() ? backgroundColor.lighten(0.2).string() : backgroundColor.darken(0.2).string();
+  var backgroundColor = createSafeColor(color);
+  if (!backgroundColor) return COLOR_CONSTANTS.DEFAULT_COLOR;
+  return backgroundColor.isDark() ? backgroundColor.lighten(COLOR_CONSTANTS.DEFAULT_LIGHTNESS_ADJUSTMENT).string() : backgroundColor.darken(COLOR_CONSTANTS.DEFAULT_LIGHTNESS_ADJUSTMENT).string();
 };
-// Same implementation as Microsite
+/**
+ * Determines the most readable text color (black or white) for a given background
+ * @param backgroundColor - Background color to check against
+ * @returns Hex color string for text
+ */
 var getReadableTextColor = function (backgroundColor) {
-  var bgColor = Color(backgroundColor);
+  var bgColor = createSafeColor(backgroundColor);
+  if (!bgColor) return COLOR_CONSTANTS.DEFAULT_COLOR;
   var white = Color('#fff');
   var black = Color('#000');
-  // Calculate contrast ratio with white
   var contrastWithWhite = bgColor.contrast(white);
-  // If contrast with white is at least 2:1, use white; otherwise, use black
-  return contrastWithWhite >= 2 ? white.hex() : black.hex();
+  return contrastWithWhite >= COLOR_CONSTANTS.MINIMUM_CONTRAST_RATIO ? white.hex() : black.hex();
 };
 var percentages = [5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95];
+/**
+ * Generates a set of derived colors based on a base color and derivation function
+ * @param color - Base color to derive from
+ * @param derivationFunction - Function to generate variations
+ * @returns Object containing derived colors at different percentages
+ */
 var generateDerivedColors = function (color, derivationFunction) {
-  var baseColor = Color(color);
+  var baseColor = createSafeColor(color);
+  if (!baseColor) {
+    return percentages.reduce(function (acc, percentage) {
+      acc[percentage] = COLOR_CONSTANTS.DEFAULT_COLOR;
+      return acc;
+    }, {});
+  }
   var result = {};
   percentages.forEach(function (percentage) {
-    var derivedColor = derivationFunction(baseColor, percentage);
-    result[percentage] = derivedColor.toString();
+    try {
+      var derivedColor = derivationFunction(baseColor, percentage);
+      result[percentage] = derivedColor.toString();
+    } catch (error) {
+      console.error("Error generating derived color for ".concat(percentage, "%"), error);
+      result[percentage] = COLOR_CONSTANTS.DEFAULT_COLOR;
+    }
   });
   return result;
 };
+/**
+ * Generates a set of colors with varying lightness based on the base color
+ * @param color - Base color to derive from
+ * @returns Object containing derived colors at different lightness levels
+ */
 var getDerivedColorPercentages = function (color) {
-  var isDark = Color(color).isDark();
+  var baseColor = createSafeColor(color);
+  if (!baseColor) return generateDerivedColors(COLOR_CONSTANTS.DEFAULT_COLOR, function (color) {
+    return color;
+  });
+  var isDark = baseColor.isDark();
   return generateDerivedColors(color, function (baseColor, percentage) {
     return isDark ? baseColor.lightness(percentage) : baseColor.lightness(100 - percentage);
   });
 };
+/**
+ * Generates a set of colors with varying alpha values
+ * @param color - Base color to derive from
+ * @returns Object containing derived colors at different alpha levels
+ */
 var getAlphaDerivedColors = function (color) {
   return generateDerivedColors(color, function (baseColor, percentage) {
     return baseColor.alpha(percentage / 100);
   });
 };
+/**
+ * Determines if a color should be desaturated based on type and count
+ * @param type - Type of desaturation to apply
+ * @param count - Count value affecting desaturation
+ * @returns Boolean indicating if color should be desaturated
+ */
 var shouldDesaturate = function (type, count) {
-  //TODO: Add conditions if neccecerry
-  return type === 'SPECIFIC' && count === 0;
+  switch (type) {
+    case 'SPECIFIC':
+      return count === 0;
+    default:
+      return false;
+  }
 };
+/**
+ * Desaturates a color and lightens it
+ * @param color - Color to desaturate
+ * @returns Desaturated color string or default color if invalid
+ */
 var desaturateColor = function (color) {
-  return Color(color).grayscale().lighten(2).toString();
+  var baseColor = createSafeColor(color);
+  if (!baseColor) return COLOR_CONSTANTS.DEFAULT_COLOR;
+  return baseColor.grayscale().lighten(COLOR_CONSTANTS.DESATURATION_LIGHTEN_AMOUNT).toString();
 };
+/**
+ * Gets the appropriate state color based on type and count
+ * @param baseColor - Base color to process
+ * @param type - Type of state
+ * @param count - Count affecting the state
+ * @returns Processed color string
+ */
 var getStateColor = function (baseColor, type, count) {
   return shouldDesaturate(type, count) ? desaturateColor(baseColor) : baseColor;
 };
@@ -8294,29 +8401,29 @@ function useResponsive$1() {
 var ResponsiveContext = /*#__PURE__*/React.createContext(undefined);
 function ResponsiveProvider(_a) {
   var children = _a.children;
+  var getDerivedState = React.useCallback(function (window) {
+    var dimensionMode = getDimensionMode(window);
+    return {
+      dimensionMode: dimensionMode,
+      isDesktop: dimensionMode === DIMENSION_MODES.DESKTOP,
+      isTablet: dimensionMode === DIMENSION_MODES.TABLET,
+      isMobile: dimensionMode === DIMENSION_MODES.MOBILE
+    };
+  }, []);
   var _b = React.useState(function () {
       var window = Dimensions.get('window');
-      var dimensionMode = getDimensionMode(window);
-      return {
-        dimensionMode: dimensionMode,
-        isDesktop: dimensionMode === DIMENSION_MODES.DESKTOP,
-        isTablet: dimensionMode === DIMENSION_MODES.TABLET,
-        isMobile: dimensionMode === DIMENSION_MODES.MOBILE
-      };
+      return getDerivedState(window);
     }),
     state = _b[0],
     setState = _b[1];
+  var value = React.useMemo(function () {
+    return state;
+  }, [state]);
   React.useEffect(function () {
     var subscription = Dimensions.addEventListener('change', function (_a) {
       var window = _a.window;
       if (window) {
-        var dimensionMode = getDimensionMode(window);
-        setState({
-          dimensionMode: dimensionMode,
-          isDesktop: dimensionMode === DIMENSION_MODES.DESKTOP,
-          isTablet: dimensionMode === DIMENSION_MODES.TABLET,
-          isMobile: dimensionMode === DIMENSION_MODES.MOBILE
-        });
+        setState(getDerivedState(window));
       }
     });
     return function () {
@@ -8324,9 +8431,9 @@ function ResponsiveProvider(_a) {
         subscription.remove();
       }
     };
-  }, []);
+  }, [getDerivedState]);
   return /*#__PURE__*/React.createElement(ResponsiveContext.Provider, {
-    value: state
+    value: value
   }, children);
 }
 function useResponsive() {
@@ -8342,25 +8449,17 @@ var createTheme = function (baseTheme) {
     baseTheme = {};
   }
   var mergedTheme = __assign(__assign({}, defaultTheme), baseTheme);
-  var background = mergedTheme.background,
-    primary = mergedTheme.primary,
-    accent = mergedTheme.accent,
-    positive = mergedTheme.positive,
-    negative = mergedTheme.negative,
-    surfaceText = mergedTheme.surfaceText,
-    surface = mergedTheme.surface,
-    text = mergedTheme.text;
   return __assign(__assign({}, mergedTheme), {
     sizes: sizes,
-    derivedBackground: getDerivedColor(background),
-    primaryText: getReadableTextColor(primary),
-    accentText: getReadableTextColor(accent),
-    positiveText: getReadableTextColor(positive),
-    negativeText: getReadableTextColor(negative),
-    derivedSurface: getDerivedColorPercentages(surface),
-    derivedSurfaceText: getDerivedColorPercentages(surfaceText),
-    alphaDerivedPrimary: getAlphaDerivedColors(primary),
-    alphaDerivedText: getAlphaDerivedColors(text)
+    derivedBackground: getDerivedColor(mergedTheme.background),
+    primaryText: getReadableTextColor(mergedTheme.primary),
+    accentText: getReadableTextColor(mergedTheme.accent),
+    positiveText: getReadableTextColor(mergedTheme.positive),
+    negativeText: getReadableTextColor(mergedTheme.negative),
+    derivedSurface: getDerivedColorPercentages(mergedTheme.surface),
+    derivedSurfaceText: getDerivedColorPercentages(mergedTheme.surfaceText),
+    alphaDerivedPrimary: getAlphaDerivedColors(mergedTheme.primary),
+    alphaDerivedText: getAlphaDerivedColors(mergedTheme.text)
   });
 };
 var WllSdkContext = /*#__PURE__*/React.createContext(undefined);
@@ -8370,15 +8469,27 @@ var WllSdkProvider = function (_a) {
     config = _a.config,
     _b = _a.navigationConfig,
     navigationConfig = _b === void 0 ? {} : _b;
+  validateConfig(config);
   var _c = React.useState(function () {
-      return createTheme(providedTheme || {});
+      var themeToUse = providedTheme || {};
+      if (!validateTheme(themeToUse)) {
+        console.warn('Invalid theme provided. Some required colors are missing or invalid.');
+      }
+      return createTheme(themeToUse);
     }),
     theme = _c[0],
     setThemeState = _c[1];
   React.useEffect(function () {
-    setThemeState(createTheme(providedTheme || {}));
+    var themeToUse = providedTheme || {};
+    if (!validateTheme(themeToUse)) {
+      console.warn('Invalid theme provided. Some required colors are missing or invalid.');
+    }
+    setThemeState(createTheme(themeToUse));
   }, [providedTheme]);
   var setTheme = React.useCallback(function (newTheme) {
+    if (!validateTheme(newTheme)) {
+      console.warn('Invalid theme provided. Some required colors are missing or invalid.');
+    }
     setThemeState(function (prevTheme) {
       return createTheme(__assign(__assign({}, prevTheme), newTheme));
     });
@@ -8394,9 +8505,10 @@ var WllSdkProvider = function (_a) {
       getGroupByID: getGroupByID,
       getSectionByID: getSectionByID,
       getTileByID: getTileByID,
-      handleNavigation: handleNavigation
+      handleNavigation: handleNavigation,
+      config: config
     };
-  }, [theme, setTheme, getGroupByID, getSectionByID, getTileByID, handleNavigation]);
+  }, [theme, setTheme, getGroupByID, getSectionByID, getTileByID, handleNavigation, config]);
   return /*#__PURE__*/React.createElement(WllSdkContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(ResponsiveProvider, null, children));
@@ -8408,6 +8520,20 @@ var useWllSdk = function () {
   }
   return context;
 };
+/**
+ * Validates the SDK configuration object
+ * @param config - The configuration object to validate
+ * @throws {Error} If apiKey is missing
+ * @throws {Error} If locale is provided but not in ISO 639-1 format (e.g. 'en')
+ */
+var validateConfig = function (config) {
+  if (!config.apiKey) {
+    throw new Error('API key is required');
+  }
+  if (config.locale && !/^[a-z]{2}$/.test(config.locale)) {
+    throw new Error('Invalid locale format. Expected ISO 639-1 language code (e.g. "en")');
+  }
+};
 
 function createVariantSystem(baseStyle, variantStyles) {
   return function (theme, variant) {