@wlloyalty/wll-react-sdk 1.0.51 → 1.0.53

package/dist/types/common.d.ts

@@ -0,0 +1,14 @@
+import { ImageProps, ViewStyle } from 'react-native';
+export type ImagePropsNoSource = Omit<ImageProps, 'source'>;
+export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type Justify = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+export type Align = 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+export type LayoutProps = {
+    children: React.ReactNode;
+    justify?: Justify;
+    align?: Align;
+    direction?: FlexDirection;
+    style?: ViewStyle;
+};
+export declare const justifyMap: Record<Justify, ViewStyle['justifyContent']>;
+export declare const alignMap: Record<Align, ViewStyle['alignItems']>;

package/dist/types/group.d.ts

@@ -0,0 +1,9 @@
+import { TSection } from './section';
+export type TGroup = {
+    name: string;
+    active: boolean;
+    id: string;
+    createdAt: string;
+    updatedAt: string;
+    sections: TSection[];
+};

package/dist/types/navigation.d.ts

@@ -0,0 +1,14 @@
+export type NavigationType = 'external' | 'internal' | 'modal';
+type NavigationHandlerParams = {
+    target: string;
+    windowTarget: string;
+};
+export type NavigationConfig = {
+    navigationHandlers?: {
+        external?: (params: NavigationHandlerParams) => void;
+        internal?: (params: NavigationHandlerParams) => void;
+        modal?: (params: NavigationHandlerParams) => void;
+    };
+    baseUrl?: string;
+};
+export {};

package/dist/types/responsive.d.ts

@@ -0,0 +1,11 @@
+export type DimensionMode = 'desktop' | 'tablet' | 'mobile';
+export interface WindowDimensions {
+    width: number;
+    height: number;
+}
+export interface ResponsiveContextType {
+    dimensionMode: DimensionMode;
+    isTablet: boolean;
+    isMobile: boolean;
+    isDesktop: boolean;
+}

package/dist/types/section.d.ts

@@ -0,0 +1,23 @@
+import { Tile } from './tile';
+export declare enum SectionType {
+    Grid = "GRID",
+    Banner = "BANNER"
+}
+export type TSection = {
+    id: string;
+    name: string;
+    type: SectionType;
+    createdAt: string;
+    updatedAt: string;
+    title?: string;
+    description?: string;
+    tiles: Tile[];
+    pointsMultiplier?: number;
+    pointsPrefix?: string | null;
+    pointsSuffix?: string | null;
+    priority: number;
+    active: boolean;
+    details?: [];
+    defaultLocale: string;
+    locale: string;
+};

package/dist/types/theme.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { sizes } from '../utils/styling';
+import { DerivedColors } from '../utils/themeHelpers';
+export type BaseThemeObject = {
+    accent: string;
+    background: string;
+    errorPrimary: string;
+    negative: string;
+    pageButtonBackground: string;
+    pageButtonText: string;
+    positive: string;
+    primary: string;
+    surface: string;
+    surfaceText: string;
+    text: string;
+};
+export type DerivedProperties = {
+    accentText: string;
+    derivedBackground: string;
+    primaryText: string;
+    positiveText: string;
+    negativeText: string;
+    derivedSurfaceText: DerivedColors;
+    derivedSurface: DerivedColors;
+    alphaDerivedPrimary: DerivedColors;
+    alphaDerivedText: DerivedColors;
+};
+export type ThemeObject = BaseThemeObject & DerivedProperties & {
+    readonly sizes: typeof sizes;
+};
+export type ThemeContextType = {
+    theme: ThemeObject;
+    setTheme: (theme: ThemeObject) => void;
+};
+export type ThemeProviderProps = {
+    children: ReactNode;
+    theme?: Partial<BaseThemeObject>;
+};
+export type Variant = 'primary' | 'accent' | 'positive' | 'negative';
+export type Size = 'sm' | 'md' | 'lg';

package/dist/types/tile.d.ts

@@ -0,0 +1,158 @@
+import { Availability, RewardCategory, TierType } from './wll';
+export declare enum CTALinkTarget {
+    sameWindow = "SAME_FRAME",
+    newWindow = "NEW_WINDOW"
+}
+export declare enum TierTileType {
+    currentTier = "CURRENT",
+    specificTier = "SPECIFIC"
+}
+export declare enum ProgressType {
+    Name = "NAME",
+    Points = "POINTS"
+}
+export declare enum TileType {
+    Banner = "BANNER",
+    Points = "POINTS",
+    Content = "CONTENT",
+    Reward = "REWARD",
+    Badge = "BADGE",
+    RewardCategory = "REWARD_CATEGORY",
+    Tier = "TIER"
+}
+export declare enum TileHeight {
+    Half = "HALF",
+    Full = "FULL"
+}
+export type ProgessType = 'NAME' | 'POINTS';
+export declare class BannerTileConfig {
+    artworkUrl?: string | null;
+    title?: string | null;
+    description?: string | null;
+    ctaText?: string | null;
+    ctaLink?: string | null;
+    ctaLinkTarget?: CTALinkTarget;
+}
+export declare class PointsTileConfig {
+    title?: string | null;
+    pointsMultiplier?: number;
+    pointsPrefix?: string | null;
+    pointsSuffix?: string | null;
+    artworkUrl?: string | null;
+    points?: number;
+}
+export declare class ContentTileConfig {
+    title?: string | null;
+    body?: string | null;
+    artworkUrl?: string | null;
+    ctaLinkTarget?: CTALinkTarget;
+    ctaLink?: string | null;
+}
+export declare class RewardTileConfig {
+    rewardId: string;
+    defaultLocale: string;
+    showPrice: boolean;
+    showArtwork?: boolean;
+    showDetails?: boolean;
+    id: string;
+    createdAt: string;
+    updatedAt: string;
+    name: string;
+    pictureUrl: string;
+    value: number;
+    price: number;
+    priority: number;
+    availability: Availability;
+    purchasable: boolean;
+    tier: string | null;
+    category: RewardCategory;
+    discounts: any[];
+    summary: string | null;
+    redemptionMessage: string | null;
+    visibilityCriteria: string | null;
+    type: 'VOUCHER';
+    codeType: 'HUMAN' | 'OTP';
+    code: string | null;
+    purchaseExpiration: string | null;
+    hideCode: boolean;
+    notificationConfig: any | null;
+    artworkUrl: string;
+    pointsMultiplier: string;
+    pointsPrefix: string | null;
+    pointsSuffix: string | null;
+}
+export declare enum BadgeTileType {
+    Specific = "SPECIFIC",
+    Latest = "LATEST_EARNED"
+}
+export declare class BadgeTileConfig {
+    type: BadgeTileType;
+    badgeId: string;
+    internalName?: string;
+    defaultLocale: string;
+    priority: number;
+    internalDescription?: string | null;
+    status?: string;
+    id: string;
+    createdAt: string;
+    updatedAt: string;
+    details?: BadgeDetail[];
+    count: number;
+    name: string;
+    locale: string;
+    description: string;
+    artworkUrl: string;
+    emptyBadgeMessage?: string;
+    emptyBadgeArtworkUrl?: string;
+    awardedDatePrefix?: string;
+    badgeNotEarnedMessage?: string;
+}
+export type BadgeDetail = {
+    name: string;
+    locale: string;
+    description: string;
+    artworkUrl: string;
+    id: string;
+    createdAt: string;
+    updatedAt: string;
+    emptyBadgeMessage?: string;
+    emptyBadgeArtworkUrl?: string;
+    awardedDatePrefix?: string;
+    badgeNotEarnedMessage?: string;
+};
+export declare class RewardCategoryTileConfig {
+    showName: boolean;
+    rewardCategoryId: string;
+    artworkUrl: string;
+    name: string;
+}
+export declare class TierTileConfig {
+    progressType: ProgressType;
+    pointsMultiplier?: number;
+    pointsPrefix?: string;
+    pointsSuffix?: string;
+    tier?: TierType;
+    tierId?: string;
+    targetTier?: TierType | undefined;
+    type?: TierTileType;
+    targetTierAttainingPeriod?: Date | null;
+    title: string;
+    emptyDescription?: string;
+    emptyArtworkUrl?: string;
+    pointsToTierPrefix?: string;
+    pointsToTierSuffix?: string;
+    locale: string;
+}
+export type Tile = {
+    id: string | null;
+    type?: TileType;
+    active: boolean;
+    createdAt: string | null;
+    updatedAt: string | null;
+    tileHeight: TileHeight;
+    configuration: TileConfig;
+    priority: number;
+};
+declare const getConfigForTileType: (tileType: TileType) => typeof BannerTileConfig | typeof PointsTileConfig | typeof ContentTileConfig | typeof RewardTileConfig | typeof BadgeTileConfig | typeof RewardCategoryTileConfig | typeof TierTileConfig;
+export type TileConfig = InstanceType<ReturnType<typeof getConfigForTileType>>;
+export {};

package/dist/types/wll.d.ts

@@ -0,0 +1,60 @@
+export type Badge = {
+    id: string;
+    name: string;
+    description: string;
+    artworkUrl: string;
+    createdAt: string;
+    updatedAt: string;
+};
+export declare class Reward {
+    id?: string;
+    createdAt?: string;
+    updatedAt?: string;
+    name?: string;
+    pictureUrl?: string;
+    description?: string;
+    price?: number;
+    value?: number;
+    priority?: number;
+    availability?: Availability;
+    purchasable?: boolean;
+    tier?: string;
+    summary?: string;
+    redemptionMessage?: string;
+    visibilityCriteria?: string;
+}
+export type RewardCategory = {
+    name: string;
+    priority: number;
+    type: string;
+    id: string;
+    createdAt: string;
+    updatedAt: string;
+    description: string | null;
+    metadata: any | null;
+    pictureUrl: string;
+};
+export type Availability = {
+    start: string;
+    end: string;
+};
+type Effectivity = {
+    start: string;
+    end: string;
+};
+export type TierType = {
+    id: string;
+    name: string;
+    description?: string | null;
+    artworkUrl?: string | null;
+    priority: number;
+    pointsRequirement?: number;
+    calculation?: string;
+    accumulationPeriod?: string;
+    effectivity?: Effectivity;
+    createdAt?: string;
+    updatedAt?: string;
+    earnedPoints?: number;
+    attained?: boolean;
+};
+export {};

package/dist/unit-tests/apiHelpers.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/unit-tests/navigationHelpers.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/unit-tests/pointsHelpers.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/unit-tests/responsiveHelper.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/unit-tests/transforms.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/unit-tests/useNavigationHandler.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/apiHelpers.d.ts

@@ -0,0 +1,28 @@
+import { SDKConfig } from '../context/WllSdkContext';
+type APIResponse<T> = {
+    status: 'success' | 'fail' | 'error';
+    data: T | null;
+    error?: string;
+};
+export declare const useCreateRequestOptions: (config: SDKConfig) => (options?: RequestInit) => {
+    headers: Headers;
+    body?: BodyInit | null;
+    cache?: RequestCache;
+    credentials?: RequestCredentials;
+    integrity?: string;
+    keepalive?: boolean;
+    method?: string;
+    mode?: RequestMode;
+    priority?: RequestPriority;
+    redirect?: RequestRedirect;
+    referrer?: string;
+    referrerPolicy?: ReferrerPolicy;
+    signal?: AbortSignal | null;
+    window?: null;
+} | undefined;
+export declare const useMakeRequest: (config: SDKConfig) => <T>(url: string) => Promise<APIResponse<T>>;
+export declare const createResourceGetter: (resource: string, includeHydrate?: boolean) => (config: SDKConfig) => (id: string) => Promise<APIResponse<unknown>>;
+export declare const useGetGroupByID: (config: SDKConfig) => (id: string) => Promise<APIResponse<unknown>>;
+export declare const useGetSectionByID: (config: SDKConfig) => (id: string) => Promise<APIResponse<unknown>>;
+export declare const useGetTileByID: (config: SDKConfig) => (id: string) => Promise<APIResponse<unknown>>;
+export {};

package/dist/utils/navigationHelpers.d.ts

@@ -0,0 +1,5 @@
+import { NavigationType } from '../types/navigation';
+export declare const parseNavigationLink: (link: string) => {
+    type: NavigationType;
+    target: string;
+};

package/dist/utils/pointsHelpers.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Applies a multiplier to a base value. Handles string multipliers by converting them to numbers.
+ * If the multiplier is invalid (NaN, null, undefined), defaults to 1.
+ *
+ * @param baseValue The base value to multiply
+ * @param pointsMultiplier Optional multiplier value (defaults to 1)
+ * @returns The calculated points value
+ */
+export declare const applyMultiplier: (baseValue: number, pointsMultiplier?: string | number | null) => number;
+/**
+ * Formats a points label by combining the label, points value, and optional prefix/suffix.
+ * Only includes non-empty values in the final string.
+ * Returns empty string if points is 0.
+ *
+ * @param label The main label text (e.g., "Reward points:"). Defaults to "Reward points:"
+ * @param points The points value to display. Defaults to 0
+ * @param prefix Optional prefix to display before the points value
+ * @param suffix Optional suffix to display after the points value
+ * @returns A formatted string containing only the non-empty parts joined together, or empty string if points is 0
+ */
+export declare const getPointsLabel: (label?: string | undefined, points?: number, prefix?: string | null, suffix?: string | null) => string;

package/dist/utils/responsiveHelper.d.ts

@@ -0,0 +1,2 @@
+export declare const getResponsiveValue: (desktopValue: number, mobileValue: number, isDesktop: boolean, isTablet: boolean) => number;
+export declare const useResponsiveValue: (desktopValue: number, mobileValue: number, isDesktop: boolean, isTablet: boolean) => number;

package/dist/utils/storybookHelpers.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export declare const TileWrapper: ({ isHalfTile, children, }: {
+    isHalfTile?: boolean;
+    children: React.ReactNode;
+}) => JSX.Element;

package/dist/utils/storybookThemes.d.ts

@@ -0,0 +1,74 @@
+import { BaseThemeObject } from '../types/theme';
+export declare const storyBookThemes: {
+    modern: {
+        primary: string;
+        accent: string;
+        background: string;
+        surface: string;
+        surfaceText: string;
+        errorPrimary: string;
+        negative: string;
+        pageButtonBackground: string;
+        pageButtonText: string;
+        positive: string;
+        text: string;
+    };
+    warm: {
+        primary: string;
+        accent: string;
+        background: string;
+        surface: string;
+        surfaceText: string;
+        errorPrimary: string;
+        negative: string;
+        pageButtonBackground: string;
+        pageButtonText: string;
+        positive: string;
+        text: string;
+    };
+    dark: {
+        background: string;
+        text: string;
+        primary: string;
+        accent: string;
+        surface: string;
+        surfaceText: string;
+        errorPrimary: string;
+        negative: string;
+        pageButtonBackground: string;
+        pageButtonText: string;
+        positive: string;
+    };
+    forest: {
+        primary: string;
+        accent: string;
+        background: string;
+        surface: string;
+        surfaceText: string;
+        errorPrimary: string;
+        negative: string;
+        pageButtonBackground: string;
+        pageButtonText: string;
+        positive: string;
+        text: string;
+    };
+    sunset: {
+        primary: string;
+        accent: string;
+        background: string;
+        surface: string;
+        surfaceText: string;
+        errorPrimary: string;
+        negative: string;
+        pageButtonBackground: string;
+        pageButtonText: string;
+        positive: string;
+        text: string;
+    };
+};
+export type ThemeName = 'default' | 'dark' | 'modern' | 'warm' | 'forest' | 'sunset';
+export declare const themes: Record<ThemeName, BaseThemeObject>;
+export declare const themeItems: Array<{
+    value: ThemeName;
+    title: string;
+}>;

package/dist/utils/styling.d.ts

@@ -0,0 +1,26 @@
+import { BaseThemeObject } from '../types/theme';
+export declare const sizes: {
+    readonly borderRadiusSm: 15;
+    readonly borderRadiusLg: 20;
+    readonly borderRadiusButton: 9;
+    readonly borderRadiusRounded: 9999;
+    readonly xxxs: 4;
+    readonly xxs: 8;
+    readonly xs: 10;
+    readonly sm: 12;
+    readonly md: 14;
+    readonly lg: 16;
+    readonly xl: 18;
+    readonly xxl: 24;
+    readonly xxxl: 32;
+    readonly xxxxl: 40;
+    readonly xxxxxl: 60;
+};
+export declare const commonStyles: {
+    emptyContainer: {
+        flex: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+};
+export declare const defaultTheme: BaseThemeObject;

package/dist/utils/themeHelpers.d.ts

@@ -0,0 +1,13 @@
+import { themeItems, ThemeName, themes } from './storybookThemes';
+export declare const getDerivedColor: (color: string) => string;
+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;
+};
+export declare const getDerivedColorPercentages: (color: string) => DerivedColors;
+export declare const getAlphaDerivedColors: (color: string) => DerivedColors;
+export declare const shouldDesaturate: (type: string, count: number) => boolean;
+export declare const desaturateColor: (color: string) => string;
+export declare const getStateColor: (baseColor: string, type: string, count: number) => string;
+export { themeItems, ThemeName, themes };

package/dist/utils/transforms.d.ts

@@ -0,0 +1,7 @@
+import { Tile } from '../types/tile';
+/**
+ * Sorts tiles by priority (higher priority first) and maintains original order for equal priorities
+ * @param tiles Array of tiles to sort
+ * @returns Sorted array of tiles
+ */
+export declare const sortByPriority: <T extends Pick<Tile, "priority">>(tiles: T[]) => T[];

package/dist/utils/variant.d.ts

@@ -0,0 +1,5 @@
+import { TextStyle, ViewStyle } from "react-native";
+import { ThemeObject } from "../types/theme";
+type StyleVariants<V extends string> = Record<V, ViewStyle | TextStyle>;
+export declare function createVariantSystem<V extends string>(baseStyle: ViewStyle | TextStyle, variantStyles: (theme: ThemeObject) => StyleVariants<V>): (theme: ThemeObject, variant: V) => ViewStyle[];
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wlloyalty/wll-react-sdk",
-  "version": "1.0.51",
+  "version": "1.0.53",
   "license": "UNLICENSED",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -25,7 +25,10 @@
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
-    "create-component": "node ./bin/create-component"
+    "create-component": "node ./bin/create-component",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
   },
   "lint-staged": {
     "**/*.{ts,tsx}": [
@@ -52,12 +55,12 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.22.x",
-    "@babel/core": "^7.25.2",
+    "@babel/core": "^7.26.7",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
+    "@babel/preset-env": "^7.26.7",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "@commitlint/cz-commitlint": "^19.5.0",
@@ -73,23 +76,35 @@
     "@storybook/cli": "^8.2.9",
     "@storybook/react": "^8.2.9",
     "@storybook/react-webpack5": "^8.2.9",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/jest-native": "^5.4.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/react-native": "^13.0.1",
+    "@types/jest": "^29.5.14",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "@types/react-native": "^0.72.2",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^9.2.1",
+    "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-react-native-web": "^0.19.12",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "chromatic": "^11.7.1",
     "commitizen": "^4.3.1",
     "concurrently": "^8.2.2",
     "husky": "^9.1.6",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-transform-stub": "^2.0.0",
     "lint-staged": "^15.2.10",
+    "metro-react-native-babel-preset": "^0.77.0",
     "msw": "^2.6.0",
     "prettier": "^3.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native": "0.72.14",
     "react-native-web": "^0.19.9",
+    "react-test-renderer": "^18.2.0",
     "rollup": "^3.28.1",
     "rollup-plugin-dts": "^6.0.1",
     "ts-loader": "^9.5.1",