@wlloyalty/wll-react-sdk 1.10.0 → 1.11.0

package/dist/index.d.ts

@@ -93,7 +93,8 @@ declare enum TileType {
     RewardCategory = "REWARD_CATEGORY",
     Tier = "TIER",
     Roundup = "ROUND_UP_BALANCE",
-    Venue = "VENUE"
+    Venue = "VENUE",
+    Campaign = "EARNING_CAMPAIGN"
 }
 declare enum TileHeight {
     Half = "HALF",
@@ -248,6 +249,46 @@ declare class TierTileConfig {
     pointsToTierSuffix?: string;
     locale: string;
 }
+declare class CampaignTileConfig {
+    campaignId: string;
+    type: string;
+    status: string;
+    name: string;
+    description: string;
+    artworkUrl: string;
+    showDetails?: boolean;
+    effectivity: {
+        start: Date | null;
+        end: Date | null;
+    };
+    progress: CampaignProgress | null;
+    missions: CampaignMission[];
+}
+type CampaignProgress = {
+    currentValue: number;
+    targetValue: number;
+    windowStart: string | null;
+    windowEnd: string | null;
+    optedInAt: string | null;
+    completedAt: string | null;
+    availableAgainAt: string | null;
+    cooldownCycle: number | null;
+};
+type CampaignMission = {
+    id: string;
+    name: string;
+    description: string | null;
+    pictureUrl: string | null;
+    completionType: string;
+    targetValue: number;
+    displayStyle: string;
+    requiresOptIn: boolean;
+    lockState: string;
+    order: number;
+    duration: number | null;
+    cooldownDuration: number | null;
+    progress: CampaignProgress;
+};
 type Tile = {
     id: string | null;
     type?: TileType;
@@ -258,7 +299,7 @@ type Tile = {
     configuration: TileConfig;
     priority: number;
 };
-declare const getConfigForTileType: (tileType: TileType) => typeof BannerTileConfig | typeof PointsTileConfig | typeof ContentTileConfig | typeof RewardTileConfig | typeof VenueTileConfig | typeof BadgeTileConfig | typeof RewardCategoryTileConfig | typeof TierTileConfig;
+declare const getConfigForTileType: (tileType: TileType) => typeof BannerTileConfig | typeof PointsTileConfig | typeof ContentTileConfig | typeof RewardTileConfig | typeof VenueTileConfig | typeof BadgeTileConfig | typeof RewardCategoryTileConfig | typeof TierTileConfig | typeof CampaignTileConfig;
 type TileConfig = InstanceType<ReturnType<typeof getConfigForTileType>>;
 type TileSizeInfo = {
     isFullSize: boolean;
@@ -354,8 +395,11 @@ type ProgressBarProps = {
     variant?: Variant;
     height?: Size;
     animationDuration?: number;
+    currentValue?: number;
+    targetValue?: number;
+    showProgressLabel?: boolean;
 };
-declare const ProgressBar: ({ percentage, variant, height, animationDuration, }: ProgressBarProps) => React$1.ReactElement;
+declare const ProgressBar: ({ percentage, variant, height, animationDuration, currentValue, targetValue, showProgressLabel, }: ProgressBarProps) => React$1.ReactElement;
 
 type ProgressiveImageProps = {
     source: ImageSourcePropType;
@@ -611,12 +655,17 @@ type WithTileFetchingProps = {
 type BadgeTileProps = {
     tile: Tile;
 };
-declare const _default$7: (props: Omit<BadgeTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
+declare const _default$8: (props: Omit<BadgeTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
 
 type BannerTileProps = {
     tile: Tile;
 };
-declare const _default$6: (props: Omit<BannerTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
+declare const _default$7: (props: Omit<BannerTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
+
+type CampaignTileProps = {
+    tile: Tile;
+};
+declare const _default$6: (props: Omit<CampaignTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
 
 type ContentTileProps = {
     tile: Tile;
@@ -1046,5 +1095,5 @@ declare const useInitialGroupFetch: ({ id, setGroupData, }: UseInitialGroupFetch
 
 declare const useNavigation: (config: NavigationConfig) => (link: string, ctaTarget: CTALinkTarget) => Promise<void>;
 
-export { BUTTON_SIZE, _default$7 as BadgeTile, BadgeTileConfig, BadgeTileType, _default$6 as BannerTile, BannerTileConfig, BaseBanner, BaseTile, Button, COLOR_CONSTANTS, CTALinkTarget, Carousel, CarouselNavButton, Chip, Column, _default$5 as ContentTile, ContentTileConfig, CoreApiUrl, DIMENSION_MODES, EventEmitter, FullFlex, GRID_GAP, Grid, Group, IS_ANDROID, IS_DESKTOP, IS_IOS, IS_MOBILE, IS_WEB, Icon, Indicator, Layout, LoadingIndicator, MAX_WIDTH, _default$4 as PointsTile, PointsTileConfig, ProgressBar, ProgressIndicator, ProgressType, ProgressiveImage, Reward, _default$3 as RewardCategoryTile, RewardCategoryTileConfig, _default$2 as RewardTile, RewardTileConfig, _default$1 as RoundupTile, RoundupTileConfig, Row, SCREEN_HEIGHT, SCREEN_WIDTH, SLIDE_WIDTH, SMALL_SCREEN_WIDTH, Section, SectionHeader, SectionType, Skeleton, Spacer, StatusVariant, TABLET_SCREEN_WIDTH, Text, TierTileConfig, TierTileType, TierTile as TierTileUpdated, TileContainer, TileHeight, TileType, _default as VenueTile, VenueTileConfig, WllSdkProvider, alignMap, commonStyles, createResourceGetter, defaultTheme, desaturateColor, getAlphaDerivedColors, getDerivedColor, getDerivedColorPercentages, getDimensionMode, getDirectionalMargin, getReadableTextColor, getResponsiveValue, getStateColor, handleLastEarnedDate, justifyMap, sdkEventEmitter, shouldDesaturate, sizes, sortByPriority, themeItems, themes, transformLocale, useCreateRequestOptions, useGetGroupByID, useGetSectionByID, useGetTileByID, useGroupRefresh, useInitialGroupFetch, useInvalidateData, useMakeRequest, useNavigation, usePullToRefresh, useResponsive, useResponsiveValue, useTileSize, useWllSdk, validateTheme };
-export type { APIResponse$1 as APIResponse, Align, AllowedCoreApiUrl, Availability, Badge, BadgeDetail, BaseThemeObject, DerivedColors, DerivedProperties, DesaturationType, EventCallback, EventTypes, FlexDirection, ImagePropsNoSource, Justify, LayoutProps$1 as LayoutProps, NavigationConfig, NavigationType, PercentageKey, ProgessType, RewardCategory, SDKConfig, Size, Sizes, TGroup, TSection, ThemeContextType, ThemeName, ThemeObject, ThemeProviderProps, TierType, Tile, TileConfig, TileSizeInfo, Variant };
+export { BUTTON_SIZE, _default$8 as BadgeTile, BadgeTileConfig, BadgeTileType, _default$7 as BannerTile, BannerTileConfig, BaseBanner, BaseTile, Button, COLOR_CONSTANTS, CTALinkTarget, _default$6 as CampaignTile, CampaignTileConfig, Carousel, CarouselNavButton, Chip, Column, _default$5 as ContentTile, ContentTileConfig, CoreApiUrl, DIMENSION_MODES, EventEmitter, FullFlex, GRID_GAP, Grid, Group, IS_ANDROID, IS_DESKTOP, IS_IOS, IS_MOBILE, IS_WEB, Icon, Indicator, Layout, LoadingIndicator, MAX_WIDTH, _default$4 as PointsTile, PointsTileConfig, ProgressBar, ProgressIndicator, ProgressType, ProgressiveImage, Reward, _default$3 as RewardCategoryTile, RewardCategoryTileConfig, _default$2 as RewardTile, RewardTileConfig, _default$1 as RoundupTile, RoundupTileConfig, Row, SCREEN_HEIGHT, SCREEN_WIDTH, SLIDE_WIDTH, SMALL_SCREEN_WIDTH, Section, SectionHeader, SectionType, Skeleton, Spacer, StatusVariant, TABLET_SCREEN_WIDTH, Text, TierTileConfig, TierTileType, TierTile as TierTileUpdated, TileContainer, TileHeight, TileType, _default as VenueTile, VenueTileConfig, WllSdkProvider, alignMap, commonStyles, createResourceGetter, defaultTheme, desaturateColor, getAlphaDerivedColors, getDerivedColor, getDerivedColorPercentages, getDimensionMode, getDirectionalMargin, getReadableTextColor, getResponsiveValue, getStateColor, handleLastEarnedDate, justifyMap, sdkEventEmitter, shouldDesaturate, sizes, sortByPriority, themeItems, themes, transformLocale, useCreateRequestOptions, useGetGroupByID, useGetSectionByID, useGetTileByID, useGroupRefresh, useInitialGroupFetch, useInvalidateData, useMakeRequest, useNavigation, usePullToRefresh, useResponsive, useResponsiveValue, useTileSize, useWllSdk, validateTheme };
+export type { APIResponse$1 as APIResponse, Align, AllowedCoreApiUrl, Availability, Badge, BadgeDetail, BaseThemeObject, CampaignMission, CampaignProgress, DerivedColors, DerivedProperties, DesaturationType, EventCallback, EventTypes, FlexDirection, ImagePropsNoSource, Justify, LayoutProps$1 as LayoutProps, NavigationConfig, NavigationType, PercentageKey, ProgessType, RewardCategory, SDKConfig, Size, Sizes, TGroup, TSection, ThemeContextType, ThemeName, ThemeObject, ThemeProviderProps, TierType, Tile, TileConfig, TileSizeInfo, Variant };

package/dist/native.js

@@ -1331,10 +1331,93 @@ var styles$8 = reactNative.StyleSheet.create({
     },
 });
 
+var Text = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? 'body' : _b, style = _a.style; _a.isSurface; var props = __rest(_a, ["variant", "style", "isSurface"]);
+    var theme = useWllSdk().theme;
+    var _d = useResponsive(), isDesktop = _d.isDesktop, isTablet = _d.isTablet;
+    var getVariantStyle = function (variant) {
+        var baseStyle = {
+            color: theme.surfaceText,
+        };
+        switch (variant) {
+            case 'eyebrow':
+                return __assign(__assign({}, baseStyle), { fontSize: useResponsiveValue(theme.sizes.md, theme.sizes.sm, isDesktop, isTablet), marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet) });
+            case 'title':
+                return __assign(__assign({}, baseStyle), { fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet), fontWeight: 'bold' });
+            case 'body':
+                return {
+                    color: theme.derivedSurfaceText[20],
+                    fontSize: useResponsiveValue(theme.sizes.md, theme.sizes.sm, isDesktop, isTablet),
+                };
+            case 'caption':
+                return __assign(__assign({}, baseStyle), { fontWeight: 'bold', fontSize: useResponsiveValue(theme.sizes.xxl, theme.sizes.xl, isDesktop, isTablet), color: theme.primary });
+            case 'description':
+            case 'label':
+            default:
+                return __assign(__assign({}, baseStyle), { fontSize: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet) });
+        }
+    };
+    var variantStyle = getVariantStyle(variant);
+    // 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,
+            }
+            : {},
+    });
+    // Determine appropriate accessibility role based on variant
+    // This helps screen readers understand the semantic meaning
+    var accessibilityRole;
+    switch (variant) {
+        case 'title':
+            accessibilityRole = IS_MOBILE ? 'heading' : 'header';
+            break;
+        case 'caption':
+            accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
+            break;
+        case 'eyebrow':
+            accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
+            break;
+        case 'description':
+            accessibilityRole = IS_MOBILE ? 'article' : 'paragraph';
+            break;
+        case 'label':
+            accessibilityRole = IS_MOBILE ? 'option' : 'text';
+            break;
+        default:
+            accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
+    }
+    var combinedStyles = [
+        styles.base,
+        variantStyle,
+        styles.webOverrides,
+        style,
+    ];
+    return (jsxRuntimeExports.jsx(reactNative.Text, __assign({ style: combinedStyles }, props, { accessible: true, role: accessibilityRole })));
+};
+
 var useStyles = function (theme) {
     return reactNative.StyleSheet.create({
-        container: {
+        wrapper: {
+            flexDirection: 'row',
+            alignItems: 'center',
             width: '100%',
+        },
+        container: {
+            flex: 1,
             borderRadius: theme.sizes.borderRadiusRounded,
             overflow: 'hidden',
         },
@@ -1342,6 +1425,21 @@ var useStyles = function (theme) {
             borderRadius: theme.sizes.borderRadiusRounded,
             height: '100%',
         },
+        labelContainer: {
+            flexDirection: 'row',
+            alignItems: 'baseline',
+            marginLeft: 8,
+            flexShrink: 0,
+        },
+        labelCurrent: {
+            fontSize: 15,
+            fontWeight: 'bold',
+            color: theme.primary,
+        },
+        labelTarget: {
+            fontSize: 12,
+            color: theme.derivedSurfaceText[20],
+        },
     });
 };
 var useContainerStyles = function (theme) { return ({
@@ -1358,7 +1456,7 @@ function (theme) { return ({ borderRadius: theme.sizes.borderRadiusSmRounded });
     negative: { backgroundColor: theme.negative },
 }); });
 var ProgressBar = function (_a) {
-    var percentage = _a.percentage, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, _c = _a.height, height = _c === void 0 ? 'sm' : _c, _d = _a.animationDuration, animationDuration = _d === void 0 ? 300 : _d;
+    var percentage = _a.percentage, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, _c = _a.height, height = _c === void 0 ? 'sm' : _c, _d = _a.animationDuration, animationDuration = _d === void 0 ? 300 : _d, currentValue = _a.currentValue, targetValue = _a.targetValue, _e = _a.showProgressLabel, showProgressLabel = _e === void 0 ? false : _e;
     var theme = useWllSdk().theme;
     var styles = useStyles(theme);
     var containerStyles = useContainerStyles(theme);
@@ -1382,7 +1480,13 @@ var ProgressBar = function (_a) {
             outputRange: ['0%', '100%'],
         }),
     };
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: containerStyle, children: jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [styles.progress, progressStyles, progressWidth] }) }));
+    var shouldShowLabel = showProgressLabel &&
+        currentValue !== undefined &&
+        targetValue !== undefined;
+    if (!shouldShowLabel) {
+        return (jsxRuntimeExports.jsx(reactNative.View, { style: [containerStyle, { width: '100%' }], children: jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [styles.progress, progressStyles, progressWidth] }) }));
+    }
+    return (jsxRuntimeExports.jsxs(reactNative.View, { style: styles.wrapper, children: [jsxRuntimeExports.jsx(reactNative.View, { style: [containerStyle], children: jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [styles.progress, progressStyles, progressWidth] }) }), jsxRuntimeExports.jsxs(reactNative.View, { style: styles.labelContainer, accessibilityLabel: "".concat(currentValue, " of ").concat(targetValue, " completed"), children: [jsxRuntimeExports.jsx(Text, { style: styles.labelCurrent, children: currentValue }), jsxRuntimeExports.jsx(Text, { style: styles.labelTarget, children: " / ".concat(targetValue) })] })] }));
 };
 
 exports.CTALinkTarget = void 0;
@@ -1411,6 +1515,7 @@ exports.TileType = void 0;
     TileType["Tier"] = "TIER";
     TileType["Roundup"] = "ROUND_UP_BALANCE";
     TileType["Venue"] = "VENUE";
+    TileType["Campaign"] = "EARNING_CAMPAIGN";
 })(exports.TileType || (exports.TileType = {}));
 exports.TileHeight = void 0;
 (function (TileHeight) {
@@ -1543,6 +1648,32 @@ var TierTileConfig = /** @class */ (function () {
     }
     return TierTileConfig;
 }());
+var CampaignTileConfig = /** @class */ (function () {
+    function CampaignTileConfig() {
+        this.campaignId = '';
+        this.type = '';
+        this.status = '';
+        this.name = '';
+        this.description = '';
+        this.artworkUrl = '';
+        this.effectivity = {
+            start: null,
+            end: null
+        };
+        this.progress = {
+            currentValue: 0,
+            targetValue: 0,
+            windowStart: null,
+            windowEnd: null,
+            optedInAt: null,
+            completedAt: null,
+            availableAgainAt: null,
+            cooldownCycle: null,
+        };
+        this.missions = [];
+    }
+    return CampaignTileConfig;
+}());
 
 var useHandleTilePress = function (tile, ctaLink, ctaLinkTarget) {
     var handleNavigation = useWllSdk().handleNavigation;
@@ -1563,8 +1694,15 @@ var useHandleTilePress = function (tile, ctaLink, ctaLinkTarget) {
         }
         if ((tile === null || tile === void 0 ? void 0 : tile.type) === exports.TileType.RewardCategory) {
             var config = tile.configuration;
-            var url = "/category?id=".concat(config.rewardCategoryId);
             if (config === null || config === void 0 ? void 0 : config.rewardCategoryId) {
+                var url = "/category?id=".concat(config.rewardCategoryId);
+                return handleNavigation(url, exports.CTALinkTarget.sameWindow);
+            }
+        }
+        if ((tile === null || tile === void 0 ? void 0 : tile.type) === exports.TileType.Campaign) {
+            var config = tile.configuration;
+            if (config === null || config === void 0 ? void 0 : config.campaignId) {
+                var url = "/campaigns/".concat(config.campaignId);
                 return handleNavigation(url, exports.CTALinkTarget.sameWindow);
             }
         }
@@ -1582,84 +1720,6 @@ var useTileSize = function (tile) {
     }); }, [tile.tileHeight]);
 };
 
-var Text = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? 'body' : _b, style = _a.style; _a.isSurface; var props = __rest(_a, ["variant", "style", "isSurface"]);
-    var theme = useWllSdk().theme;
-    var _d = useResponsive(), isDesktop = _d.isDesktop, isTablet = _d.isTablet;
-    var getVariantStyle = function (variant) {
-        var baseStyle = {
-            color: theme.surfaceText,
-        };
-        switch (variant) {
-            case 'eyebrow':
-                return __assign(__assign({}, baseStyle), { fontSize: useResponsiveValue(theme.sizes.md, theme.sizes.sm, isDesktop, isTablet), marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet) });
-            case 'title':
-                return __assign(__assign({}, baseStyle), { fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet), fontWeight: 'bold' });
-            case 'body':
-                return {
-                    color: theme.derivedSurfaceText[20],
-                    fontSize: useResponsiveValue(theme.sizes.md, theme.sizes.sm, isDesktop, isTablet),
-                };
-            case 'caption':
-                return __assign(__assign({}, baseStyle), { fontWeight: 'bold', fontSize: useResponsiveValue(theme.sizes.xxl, theme.sizes.xl, isDesktop, isTablet), color: theme.primary });
-            case 'description':
-            case 'label':
-            default:
-                return __assign(__assign({}, baseStyle), { fontSize: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet) });
-        }
-    };
-    var variantStyle = getVariantStyle(variant);
-    // 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,
-            }
-            : {},
-    });
-    // Determine appropriate accessibility role based on variant
-    // This helps screen readers understand the semantic meaning
-    var accessibilityRole;
-    switch (variant) {
-        case 'title':
-            accessibilityRole = IS_MOBILE ? 'heading' : 'header';
-            break;
-        case 'caption':
-            accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
-            break;
-        case 'eyebrow':
-            accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
-            break;
-        case 'description':
-            accessibilityRole = IS_MOBILE ? 'article' : 'paragraph';
-            break;
-        case 'label':
-            accessibilityRole = IS_MOBILE ? 'option' : 'text';
-            break;
-        default:
-            accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
-    }
-    var combinedStyles = [
-        styles.base,
-        variantStyle,
-        styles.webOverrides,
-        style,
-    ];
-    return (jsxRuntimeExports.jsx(reactNative.Text, __assign({ style: combinedStyles }, props, { accessible: true, role: accessibilityRole })));
-};
-
 /**
  * Renders the body text of a BaseTile component.
  *
@@ -1930,10 +1990,13 @@ var BaseTileContainer = function (_a) {
     var _b = tile.configuration, _c = _b.ctaLink, ctaLink = _c === void 0 ? '' : _c, ctaLinkTarget = _b.ctaLinkTarget, _d = _b.title, title = _d === void 0 ? 'Tile' : _d;
     var theme = (sdk === null || sdk === void 0 ? void 0 : sdk.theme) || { surface: '#ffffff' };
     var handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
-    var isInteractive = Boolean(ctaLink ||
-        tile.type === 'REWARD' ||
-        tile.type === 'REWARD_CATEGORY' ||
-        tile.type === 'VENUE');
+    var interactiveTiles = [
+        exports.TileType.Reward,
+        exports.TileType.RewardCategory,
+        exports.TileType.Venue,
+        exports.TileType.Campaign
+    ];
+    var isInteractive = Boolean(ctaLink || (tile.type && interactiveTiles.includes(tile.type)));
     var layout = {
         flexDirection: 'column',
         justifyContent: isHalfSize ? 'center' : 'flex-start',
@@ -2680,7 +2743,7 @@ var BannerTileTitle = function () {
  * @param configuration - The configuration object of the tile.
  * @returns `true` if the tile has no title, description, or CTA text.
  */
-var isArtworkOnly$2 = function (configuration) {
+var isArtworkOnly$3 = function (configuration) {
     if (!configuration)
         return true;
     return (!configuration.title && !configuration.description && !configuration.ctaText);
@@ -2698,7 +2761,7 @@ var BannerTileRoot = function (_a) {
     if (!tile || !tile.active || !tile.configuration)
         return null;
     var configuration = tile.configuration;
-    return (jsxRuntimeExports.jsxs(BaseBanner, { tile: tile, children: [jsxRuntimeExports.jsx(BannerTile.Media, { isArtworkOnly: isArtworkOnly$2(configuration) }), jsxRuntimeExports.jsxs(FullFlex, { children: [jsxRuntimeExports.jsx(BannerTile.Title, {}), jsxRuntimeExports.jsx(BannerTile.Description, {}), jsxRuntimeExports.jsx(BannerTile.CTA, {})] })] }));
+    return (jsxRuntimeExports.jsxs(BaseBanner, { tile: tile, children: [jsxRuntimeExports.jsx(BannerTile.Media, { isArtworkOnly: isArtworkOnly$3(configuration) }), jsxRuntimeExports.jsxs(FullFlex, { children: [jsxRuntimeExports.jsx(BannerTile.Title, {}), jsxRuntimeExports.jsx(BannerTile.Description, {}), jsxRuntimeExports.jsx(BannerTile.CTA, {})] })] }));
 };
 /**
  * The BannerTile component with subcomponents attached.
@@ -2711,6 +2774,173 @@ var BannerTile = Object.assign(BannerTileRoot, {
 });
 var BannerTile$1 = withTileFetching(BannerTile);
 
+/**
+ * Renders the description of a Campaign Tile.
+ *
+ * @returns React.ReactElement or null if no description is present
+ */
+var CampaignTileDescription = function () {
+    var tileContext = useTileContext();
+    if (!isContextValid(tileContext))
+        return null;
+    var description = tileContext.configuration.description;
+    if (!description)
+        return null;
+    return (jsxRuntimeExports.jsx(Text, { variant: "body", role: "article", accessibilityLabel: description, testID: "campaign-tile-description", numberOfLines: 2, ellipsizeMode: "tail", children: description }));
+};
+
+/**
+ * Custom hook that returns the styles for the CampaignTile component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the CampaignTile component
+ */
+var useCampaignTileStyles = function () {
+    var _a = useResponsive$1(), isDesktop = _a.isDesktop, isTablet = _a.isTablet;
+    var theme = useWllSdk().theme;
+    return reactNative.StyleSheet.create({
+        imageContainer: {
+            width: '100%',
+            minHeight: 130,
+        },
+        image: {
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+        },
+        titleRow: {
+            width: '100%',
+            marginTop: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
+            marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
+        },
+        titleText: {
+            maxWidth: '90%',
+            flex: 1,
+        },
+        progressContainer: {
+            width: '100%',
+            marginTop: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
+        },
+    });
+};
+
+/**
+ * Renders the media header for a Campaign Tile.
+ *
+ * @param props {CampaignTileMediaProps} - Component props
+ * @param props.isArtworkOnly {boolean} - Whether the media should occupy the full tile height
+ * @returns React.ReactElement or null if no artworkUrl is present
+ */
+var CampaignTileMedia = function (_a) {
+    var _b = _a.isArtworkOnly, isArtworkOnly = _b === void 0 ? false : _b;
+    var styles = useCampaignTileStyles();
+    var tileContext = useTileContext();
+    if (!isContextValid(tileContext))
+        return null;
+    var _c = tileContext.configuration, artworkUrl = _c.artworkUrl, _d = _c.name, name = _d === void 0 ? 'Campaign' : _d;
+    var containerStyle = isArtworkOnly
+        ? {
+            flexBasis: '100%',
+            flex: 1,
+            height: '100%',
+            marginBottom: 0,
+            minHeight: 0,
+            aspectRatio: tileContext.tileHeight === exports.TileHeight.Half ? 2 : 1,
+        }
+        : __assign({ flexBasis: '50%' }, (tileContext.tileHeight === exports.TileHeight.Half && { minHeight: 0 }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.imageContainer, containerStyle], testID: "campaign-tile-media", role: "img", accessibilityLabel: "Campaign image for ".concat(name), children: jsxRuntimeExports.jsx(ProgressiveImage, { source: { uri: artworkUrl }, style: styles.image, alt: "Campaign image for ".concat(name) }) }));
+};
+
+/**
+ * Renders the progress bar and progress label for a Campaign Tile.
+ * If progress is null, nothing is rendered.
+ *
+ * @param props - Component props
+ * @param props.progress - The campaign progress data
+ * @returns React.ReactElement or null if progress is null
+ */
+var CampaignTileProgress = function (_a) {
+    var progress = _a.progress;
+    var styles = useCampaignTileStyles();
+    if (!progress)
+        return null;
+    var currentValue = progress.currentValue, targetValue = progress.targetValue;
+    var percentage = targetValue > 0 ? (currentValue / targetValue) * 100 : 0;
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: styles.progressContainer, testID: "campaign-tile-progress", children: jsxRuntimeExports.jsx(ProgressBar, { percentage: percentage, variant: "primary", height: "sm", currentValue: currentValue, targetValue: targetValue, showProgressLabel: true }) }));
+};
+
+/**
+ * Renders the title of a Campaign Tile.
+ *
+ * @returns React.ReactElement or null if no name is present
+ */
+var CampaignTileTitle = function () {
+    var tileContext = useTileContext();
+    var styles = useCampaignTileStyles();
+    if (!isContextValid(tileContext))
+        return null;
+    var name = tileContext.configuration.name;
+    if (!name)
+        return null;
+    return (jsxRuntimeExports.jsx(Text, { variant: "title", ellipsizeMode: "tail", numberOfLines: 1, role: "heading", accessibilityLabel: "Campaign title: ".concat(name), testID: "campaign-tile-title", style: styles.titleText, children: name }));
+};
+
+/**
+ * Renders a chevron icon for a Campaign Tile.
+ *
+ * @returns React.ReactElement
+ */
+var CampaignTileChevron = function () {
+    var _a;
+    var theme = useWllSdk().theme;
+    return (jsxRuntimeExports.jsx(Icon, { name: "ChevronRight", size: IS_MOBILE ? 16 : undefined, color: ((_a = theme === null || theme === void 0 ? void 0 : theme.derivedSurfaceText) === null || _a === void 0 ? void 0 : _a[20]) || '#000000', role: "img", accessibilityLabel: "View Campaign details" }));
+};
+
+/**
+ * Helper function to determine if the tile should display artwork only.
+ *
+ * @param configuration - The configuration object of the tile.
+ * @returns `true` if the tile should display artwork only.
+ */
+var isArtworkOnly$2 = function (configuration) {
+    if (!configuration)
+        return false;
+    return !configuration.showDetails;
+};
+/**
+ * The CampaignTile component renders a tile displaying campaign progress.
+ * It shows a campaign image, title, description, and a progress bar
+ * indicating the user's current progress towards the campaign goal.
+ *
+ * If progress is null, the progress bar is hidden completely.
+ * If showDetails is false, only the artwork is displayed.
+ *
+ * @param {CampaignTileProps} props - Component props
+ * @param {Tile} props.tile - The tile data to render
+ * @returns React.ReactElement or null if tile is inactive or missing configuration
+ */
+var CampaignTileRoot = function (_a) {
+    var tile = _a.tile;
+    var styles = useCampaignTileStyles();
+    if (!tile || !tile.active || !tile.configuration)
+        return null;
+    var configuration = tile.configuration;
+    var progress = configuration.progress;
+    var artworkOnly = isArtworkOnly$2(configuration);
+    return (jsxRuntimeExports.jsxs(BaseTile, { tile: tile, children: [jsxRuntimeExports.jsx(CampaignTile.Media, { isArtworkOnly: artworkOnly }), !artworkOnly && (jsxRuntimeExports.jsxs(Layout, { children: [jsxRuntimeExports.jsxs(Row, { justify: "between", align: "center", style: styles.titleRow, children: [jsxRuntimeExports.jsx(CampaignTile.Title, {}), jsxRuntimeExports.jsx(CampaignTile.Chevron, {})] }), jsxRuntimeExports.jsx(reactNative.View, { style: { width: '100%', maxWidth: '100%', minWidth: 0 }, children: jsxRuntimeExports.jsx(CampaignTile.Description, {}) }), jsxRuntimeExports.jsx(Row, { justify: "between", align: "center", style: styles.titleRow, children: jsxRuntimeExports.jsx(CampaignTile.Progress, { progress: progress }) })] }))] }));
+};
+/**
+ * The CampaignTile component with subcomponents attached.
+ */
+var CampaignTile = Object.assign(CampaignTileRoot, {
+    Media: CampaignTileMedia,
+    Title: CampaignTileTitle,
+    Description: CampaignTileDescription,
+    Progress: CampaignTileProgress,
+    Chevron: CampaignTileChevron
+});
+var CampaignTile$1 = withTileFetching(CampaignTile);
+
 var ContentTileChevron = function () {
     var _a, _b;
     var tileContext = useTileContext();
@@ -4751,6 +4981,7 @@ var TILE_COMPONENTS = (_a = {},
     _a[exports.TileType.Banner] = BannerTile$1,
     _a[exports.TileType.Roundup] = RoundupTile$1,
     _a[exports.TileType.Venue] = VenueTile$1,
+    _a[exports.TileType.Campaign] = CampaignTile$1,
     _a);
 /**
  * TileContainer component to render a list of tiles with proper layout and spacing.
@@ -4875,6 +5106,8 @@ exports.BaseBanner = BaseBanner;
 exports.BaseTile = BaseTile;
 exports.Button = Button;
 exports.COLOR_CONSTANTS = COLOR_CONSTANTS;
+exports.CampaignTile = CampaignTile$1;
+exports.CampaignTileConfig = CampaignTileConfig;
 exports.Carousel = Carousel;
 exports.CarouselNavButton = CarouselNavButton;
 exports.Chip = Chip;