@wlloyalty/wll-react-sdk 1.4.5 → 1.4.6

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import React__default from 'react';
 import * as LucideReactIcons from 'lucide-react';
 import * as react_native from 'react-native';
-import { ViewProps, ImageSourcePropType, StyleProp, ViewStyle, TextProps as TextProps$1, TextStyle, ImageProps, RefreshControl } from 'react-native';
+import { ViewProps, ImageSourcePropType, StyleProp, ViewStyle, TextProps as TextProps$1, TextStyle, ImageProps, AccessibilityRole, RefreshControl } from 'react-native';
 
 declare const sizes: {
     readonly borderRadiusSm: 15;
@@ -116,6 +116,11 @@ declare enum TileHeight {
     Full = "FULL"
 }
 type ProgessType = 'NAME' | 'POINTS';
+declare enum StatusVariant {
+    PRIMARY = "primary",
+    GREEN = "green",
+    GREY = "grey"
+}
 declare class BannerTileConfig {
     artworkUrl?: string | null;
     title?: string | null;
@@ -514,6 +519,20 @@ type SpacerProps = {
  */
 declare const Spacer: ({ style, ...rest }: SpacerProps) => React__default.ReactElement;
 
+type ChipLabel = React__default.ReactNode;
+type AriaLive = 'polite' | 'assertive' | 'off';
+type ChipProps = {
+    label: ChipLabel;
+    variant?: StatusVariant;
+    role?: AccessibilityRole | 'status';
+    ariaLive?: AriaLive;
+    accessibilityLabel?: string;
+    testID?: string;
+    style?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+};
+declare const Chip: ({ label, variant, role, ariaLive, accessibilityLabel, testID, style, labelStyle, }: ChipProps) => React__default.ReactElement;
+
 declare enum SectionType {
     Grid = "GRID",
     Banner = "BANNER"
@@ -747,4 +766,4 @@ declare function usePullToRefresh({ onRefresh, refreshing: externalRefreshing, }
     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 };
+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, Chip, 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, StatusVariant, 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

@@ -947,16 +947,6 @@ var desaturateColor = function (color) {
         .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;
-};
 
 var DIMENSION_MODES = {
     DESKTOP: 'desktop',
@@ -1541,6 +1531,12 @@ exports.TileHeight = void 0;
     TileHeight["Half"] = "HALF";
     TileHeight["Full"] = "FULL";
 })(exports.TileHeight || (exports.TileHeight = {}));
+exports.StatusVariant = void 0;
+(function (StatusVariant) {
+    StatusVariant["PRIMARY"] = "primary";
+    StatusVariant["GREEN"] = "green";
+    StatusVariant["GREY"] = "grey";
+})(exports.StatusVariant || (exports.StatusVariant = {}));
 var BannerTileConfig = /** @class */ (function () {
     function BannerTileConfig() {
     }
@@ -2284,67 +2280,13 @@ var handleLastEarnedDate = function (date, userLocale) {
     }
 };
 
-/**
- * Custom hook that returns the styles for the BadgeTile component.
- * Applies responsive styling based on the current device.
- *
- * @returns StyleSheet styles for the BadgeTile component
- */
-var useBadgeTileStyles = function () {
-    var _a = useResponsive$1(), isDesktop = _a.isDesktop, isTablet = _a.isTablet;
-    var theme = useWllSdk().theme;
-    return reactNative.StyleSheet.create({
-        container: {
-            flex: 1,
-        },
-        indicatorContainer: {
-            position: 'absolute',
-            bottom: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet),
-            right: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet),
-            backgroundColor: 'rgba(0,0,0,0.6)',
-            borderRadius: 40,
-            width: 40,
-            alignItems: 'center',
-            justifyContent: 'center',
-            height: 40,
-        },
-        countText: {
-            color: '#FFF',
-            fontSize: 14,
-            fontWeight: 'bold',
-        },
-        header: {
-            flexBasis: '50%',
-            alignItems: 'center',
-            justifyContent: 'center',
-            position: 'relative',
-            marginBottom: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet),
-        },
-        image: {
-            width: '100%',
-            height: '100%',
-        },
-        titleText: {
-            marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
-        },
-        dateEarnedContainer: {
-            alignItems: 'flex-start',
-            paddingHorizontal: 8,
-            paddingVertical: 4,
-            borderRadius: 20,
-        },
-    });
-};
-
 /**
  * Renders the date earned for a Badge Tile.
  *
  * @returns React.ReactElement or null if badge is not earned or badgeNotEarnedMessage exists
  */
 var BadgeTileDateEarned = function () {
-    var styles = useBadgeTileStyles();
     var tileContext = useTileContext();
-    var theme = useWllSdk().theme;
     if (!isContextValid(tileContext))
         return null;
     var _a = tileContext.configuration, count = _a.count, awardedDatePrefix = _a.awardedDatePrefix, lastEarnedAt = _a.lastEarnedAt, badgeNotEarnedMessage = _a.badgeNotEarnedMessage, type = _a.type, locale = _a.locale;
@@ -2358,16 +2300,14 @@ var BadgeTileDateEarned = function () {
         !badgeNotEarnedMessage) {
         return null;
     }
-    var backgroundColor = getStateColor(theme.alphaDerivedPrimary[20], type, count);
-    var containerStyle = [styles.dateEarnedContainer, { backgroundColor: backgroundColor }];
-    var textColor = getReadableTextColor(backgroundColor);
+    var formattedDate = handleLastEarnedDate(lastEarnedAt, locale);
     var displayText = count === 0
         ? badgeNotEarnedMessage
-        : "".concat(awardedDatePrefix, " ").concat(handleLastEarnedDate(lastEarnedAt, locale));
+        : "".concat(awardedDatePrefix, " ").concat(formattedDate);
     var accessibilityLabel = count === 0
         ? 'Badge not yet earned'
-        : "Badge earned on ".concat(handleLastEarnedDate(lastEarnedAt, locale));
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: containerStyle, accessible: true, accessibilityLabel: accessibilityLabel, testID: "badge-tile-date-earned", children: jsxRuntimeExports.jsx(Text, { variant: "label", style: [styles.dateEarnedText, { color: textColor }], numberOfLines: 1, ellipsizeMode: "tail", accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: displayText }) }));
+        : "Badge earned on ".concat(formattedDate);
+    return (jsxRuntimeExports.jsx(Chip, { label: displayText, variant: count === 0 ? exports.StatusVariant.GREY : exports.StatusVariant.PRIMARY, accessibilityLabel: accessibilityLabel, testID: "badge-tile-date-earned" }));
 };
 
 /**
@@ -2402,6 +2342,58 @@ var BadgeTileDescription = function () {
         }, children: jsxRuntimeExports.jsx(Text, { variant: "body", numberOfLines: numberOfLines, ellipsizeMode: "tail", accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: description }) }));
 };
 
+/**
+ * Custom hook that returns the styles for the BadgeTile component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the BadgeTile component
+ */
+var useBadgeTileStyles = function () {
+    var _a = useResponsive$1(), isDesktop = _a.isDesktop, isTablet = _a.isTablet;
+    var theme = useWllSdk().theme;
+    return reactNative.StyleSheet.create({
+        container: {
+            flex: 1,
+        },
+        indicatorContainer: {
+            position: 'absolute',
+            bottom: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet),
+            right: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet),
+            backgroundColor: 'rgba(0,0,0,0.6)',
+            borderRadius: 40,
+            width: 40,
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: 40,
+        },
+        countText: {
+            color: '#FFF',
+            fontSize: 14,
+            fontWeight: 'bold',
+        },
+        header: {
+            flexBasis: '50%',
+            alignItems: 'center',
+            justifyContent: 'center',
+            position: 'relative',
+            marginBottom: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet),
+        },
+        image: {
+            width: '100%',
+            height: '100%',
+        },
+        titleText: {
+            marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
+        },
+        dateEarnedContainer: {
+            alignItems: 'flex-start',
+            paddingHorizontal: 8,
+            paddingVertical: 4,
+            borderRadius: 20,
+        },
+    });
+};
+
 /**
  * Renders the media for a Badge Tile.
  *
@@ -4481,6 +4473,81 @@ var styles = reactNative.StyleSheet.create({
     },
 });
 
+var useChipStyles = function () {
+    var theme = useWllSdk().theme;
+    var _a = useResponsive$1(), isDesktop = _a.isDesktop, isTablet = _a.isTablet;
+    var paddingHorizontal = useResponsiveValue(12, 8, isDesktop, isTablet);
+    var paddingVertical = useResponsiveValue(6, 3, isDesktop, isTablet);
+    var fontSize = useResponsiveValue(theme.sizes.sm, theme.sizes.xs, isDesktop, isTablet);
+    var lineHeight = Math.max(fontSize, Math.round(fontSize * 1.3));
+    return reactNative.StyleSheet.create({
+        container: {
+            alignSelf: 'flex-start',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'row',
+            paddingHorizontal: paddingHorizontal,
+            paddingVertical: paddingVertical,
+            borderRadius: theme.sizes.borderRadiusRounded,
+            overflow: 'hidden',
+            flexShrink: 1,
+        },
+        label: {
+            fontFamily: theme.fontFamily,
+            fontSize: fontSize,
+            lineHeight: lineHeight,
+            fontWeight: '400',
+            flexShrink: 1,
+        },
+    });
+};
+
+var mapLiveRegion = function (ariaLive) {
+    if (ariaLive === void 0) { ariaLive = 'polite'; }
+    switch (ariaLive) {
+        case 'assertive':
+            return { native: 'assertive', web: 'assertive' };
+        case 'off':
+            return { native: 'none', web: 'off' };
+        case 'polite':
+        default:
+            return { native: 'polite', web: 'polite' };
+    }
+};
+var Chip = function (_a) {
+    var label = _a.label, _b = _a.variant, variant = _b === void 0 ? exports.StatusVariant.PRIMARY : _b, _c = _a.role, role = _c === void 0 ? 'status' : _c, _d = _a.ariaLive, ariaLive = _d === void 0 ? 'polite' : _d, accessibilityLabel = _a.accessibilityLabel, testID = _a.testID, style = _a.style, labelStyle = _a.labelStyle;
+    var styles = useChipStyles();
+    var theme = useWllSdk().theme;
+    var variantStyles = React.useMemo(function () {
+        var _a, _b;
+        switch (variant) {
+            case exports.StatusVariant.GREEN:
+                return {
+                    container: { backgroundColor: '#d1f0e1' },
+                    label: { color: '#128e55' },
+                };
+            case exports.StatusVariant.GREY:
+                return {
+                    container: { backgroundColor: '#dadde0' },
+                    label: { color: '#666666' },
+                };
+            case exports.StatusVariant.PRIMARY:
+            default:
+                return {
+                    container: {
+                        backgroundColor: (_b = (_a = theme.alphaDerivedPrimary) === null || _a === void 0 ? void 0 : _a[10]) !== null && _b !== void 0 ? _b : theme.primary,
+                    },
+                    label: { color: theme.primary },
+                };
+        }
+    }, [theme, variant]);
+    var computedAccessibilityLabel = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : (typeof label === 'string' ? label : undefined);
+    var _e = mapLiveRegion(ariaLive), accessibilityLiveRegion = _e.native, ariaLiveValue = _e.web;
+    var isSimpleLabel = typeof label === 'string';
+    var isIndividuallyAccessible = computedAccessibilityLabel !== undefined;
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.container, variantStyles.container, style], accessible: isIndividuallyAccessible, accessibilityRole: role, accessibilityLiveRegion: accessibilityLiveRegion, accessibilityLabel: computedAccessibilityLabel, "aria-live": ariaLiveValue, testID: testID, children: isSimpleLabel ? (jsxRuntimeExports.jsx(reactNative.Text, { style: [styles.label, variantStyles.label, labelStyle], numberOfLines: 1, ellipsizeMode: "tail", accessible: false, importantForAccessibility: "no", children: label })) : (label) }));
+};
+
 var Reward = /** @class */ (function () {
     function Reward() {
     }
@@ -4496,6 +4563,7 @@ exports.BaseTile = BaseTile;
 exports.Button = Button;
 exports.Carousel = Carousel;
 exports.CarouselNavButton = CarouselNavButton;
+exports.Chip = Chip;
 exports.Column = Column;
 exports.ContentTile = ContentTile$1;
 exports.ContentTileConfig = ContentTileConfig;