@wlloyalty/wll-react-sdk 1.0.88 → 1.0.90

package/dist/index.d.ts

@@ -528,6 +528,12 @@ type CarouselProps = {
 };
 declare const Carousel: ({ section }: CarouselProps) => JSX.Element | null;
 
+type CarouselNavButtonProps = {
+    direction: 'left' | 'right';
+    onPress: () => void;
+};
+declare const CarouselNavButton: ({ direction, onPress, }: CarouselNavButtonProps) => JSX.Element;
+
 type GridProps = {
     section: TSection;
 };
@@ -681,4 +687,4 @@ type WllSdkProviderProps = WithChildren & {
 declare const WllSdkProvider: ({ children, theme: providedTheme, config, navigationConfig, }: WllSdkProviderProps) => JSX.Element;
 declare const useWllSdk: () => WllSdkContextType;
 
-export { type APIResponse, type Align, type Availability, type Badge, type BadgeDetail, _default$5 as BadgeTile, BadgeTileConfig, BadgeTileType, _default$4 as BannerTile, BannerTileConfig, BaseBanner, type BaseThemeObject, BaseTile, Button, CTALinkTarget, Carousel, Column, _default$3 as ContentTile, ContentTileConfig, 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$2 as PointsTile, PointsTileConfig, type ProgessType, ProgressBar, ProgressIndicator, ProgressType, ProgressiveImage, Reward, type RewardCategory, _default$1 as RewardCategoryTile, RewardCategoryTileConfig, _default as RewardTile, RewardTileConfig, 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, useWllSdk };
+export { type APIResponse, type Align, type Availability, type Badge, type BadgeDetail, _default$5 as BadgeTile, BadgeTileConfig, BadgeTileType, _default$4 as BannerTile, BannerTileConfig, BaseBanner, type BaseThemeObject, BaseTile, Button, CTALinkTarget, Carousel, CarouselNavButton, Column, _default$3 as ContentTile, ContentTileConfig, 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$2 as PointsTile, PointsTileConfig, type ProgessType, ProgressBar, ProgressIndicator, ProgressType, ProgressiveImage, Reward, type RewardCategory, _default$1 as RewardCategoryTile, RewardCategoryTileConfig, _default as RewardTile, RewardTileConfig, 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, useWllSdk };

package/dist/native.js

@@ -1550,11 +1550,9 @@ var useMakeRequest = function (config) {
                 case 2: return [4 /*yield*/, fetch(url, createRequestOptions())];
                 case 3:
                     response = _a.sent();
-                    console.log('response', response);
                     return [4 /*yield*/, response.json()];
                 case 4:
                     json = _a.sent();
-                    console.log('json', json);
                     if (json.status === 'fail') {
                         return [2 /*return*/, {
                                 status: 'fail',
@@ -3377,6 +3375,11 @@ var useContentTileStyles = function (hasArtwork) {
             flex: 1,
         },
         header: getHeaderStyle(hasArtwork),
+        tileTitle: {
+            maxWidth: '90%',
+            flex: 1,
+            marginRight: 8,
+        },
     });
 };
 
@@ -3415,12 +3418,18 @@ var ContentTileSummary = function () {
 
 var ContentTileTitle = function () {
     var tileContext = useTileContext();
+    var styles = useContentTileStyles();
     if (!isContextValid(tileContext))
         return null;
-    var title = tileContext.configuration.title;
+    var _a = tileContext.configuration, title = _a.title, ctaLink = _a.ctaLink;
     if (!title)
         return null;
-    return (jsxRuntimeExports.jsx(Text, { variant: "title", accessibilityRole: "header", accessibilityLabel: title, numberOfLines: 1, testID: "content-tile-title", children: title }));
+    var handleTitleWidth = function () {
+        if (IS_MOBILE && ctaLink) {
+            return styles.titleWithLink;
+        }
+    };
+    return (jsxRuntimeExports.jsx(Text, { variant: "title", accessibilityRole: "header", accessibilityLabel: title, numberOfLines: 1, style: handleTitleWidth(), testID: "content-tile-title", children: title }));
 };
 
 /**
@@ -3669,22 +3678,14 @@ var Carousel = function (_a) {
     return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionHeader, { title: section.title, description: section.description }), jsxRuntimeExports.jsxs(reactNative.View, { ref: containerRef, style: styles.container, onLayout: function (event) {
                     var width = event.nativeEvent.layout.width;
                     dispatch({ type: 'SET_CONTAINER_WIDTH', payload: width });
-                }, children: [jsxRuntimeExports.jsxs(reactNative.View, { style: styles.carouselContainer, children: [showPrevButton && (jsxRuntimeExports.jsx(reactNative.Pressable, { style: [
-                                    styles.navButton,
-                                    styles.navButtonLeft,
-                                    { backgroundColor: theme.background },
-                                ], onPress: handlePrev, accessibilityLabel: "Previous slide", role: "button", children: jsxRuntimeExports.jsx(Icon, { name: "ArrowLeft", size: 20, color: theme.primary }) })), jsxRuntimeExports.jsx(reactNative.ScrollView, { ref: scrollViewRef, horizontal: true, pagingEnabled: true, showsHorizontalScrollIndicator: false, onScroll: handleScroll, onMomentumScrollEnd: handleScrollEnd, scrollEventThrottle: 16, style: [styles.carouselContent], contentContainerStyle: {
+                }, children: [jsxRuntimeExports.jsxs(reactNative.View, { style: styles.carouselContainer, children: [showPrevButton && (jsxRuntimeExports.jsx(CarouselNavButton, { direction: "left", onPress: handlePrev })), jsxRuntimeExports.jsx(reactNative.ScrollView, { ref: scrollViewRef, horizontal: true, pagingEnabled: true, showsHorizontalScrollIndicator: false, onScroll: handleScroll, onMomentumScrollEnd: handleScrollEnd, scrollEventThrottle: 16, style: styles.carouselContent, contentContainerStyle: {
                                     width: containerWidth * sortedTiles.length,
                                 }, decelerationRate: "fast", snapToInterval: containerWidth, snapToAlignment: "start", children: sortedTiles.map(function (tile, index) { return (jsxRuntimeExports.jsx(reactNative.View, { style: [
                                         styles.slideContainer,
                                         {
                                             width: containerWidth,
                                         },
-                                    ], children: jsxRuntimeExports.jsx(BannerTile$1, { tile: tile }) }, index)); }) }), showNextButton && (jsxRuntimeExports.jsx(reactNative.Pressable, { style: [
-                                    styles.navButton,
-                                    styles.navButtonRight,
-                                    { backgroundColor: theme.background },
-                                ], onPress: handleNext, accessibilityLabel: "Next slide", role: "button", children: jsxRuntimeExports.jsx(Icon, { name: "ArrowRight", size: 20, color: theme.primary }) }))] }), displayControls && (jsxRuntimeExports.jsx(reactNative.View, { style: dynamicStyles.indicators, children: sortedTiles.map(function (_, index) {
+                                    ], children: jsxRuntimeExports.jsx(BannerTile$1, { tile: tile }) }, index)); }) }), showNextButton && (jsxRuntimeExports.jsx(CarouselNavButton, { direction: "right", onPress: handleNext }))] }), displayControls && (jsxRuntimeExports.jsx(reactNative.View, { style: dynamicStyles.indicators, children: sortedTiles.map(function (_, index) {
                             var width = animatedIndex.interpolate({
                                 inputRange: [index - 1, index, index + 1],
                                 outputRange: [8, 30, 8],
@@ -3700,6 +3701,43 @@ var Carousel = function (_a) {
                         }) }))] })] }));
 };
 
+var useNavButtonStyles = function () {
+    var theme = useWllSdk().theme;
+    var buttonSize = IS_MOBILE ? BUTTON_SIZE * 0.75 : BUTTON_SIZE;
+    return reactNative.StyleSheet.create({
+        navButton: {
+            position: 'absolute',
+            top: '50%',
+            transform: [{ translateY: -buttonSize / 2 }],
+            width: buttonSize,
+            height: buttonSize,
+            borderRadius: buttonSize / 2,
+            backgroundColor: theme.background,
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 1,
+        },
+        navButtonLeft: {
+            left: -buttonSize / 2,
+        },
+        navButtonRight: {
+            right: -buttonSize / 2,
+        },
+    });
+};
+
+var CarouselNavButton = function (_a) {
+    var direction = _a.direction, onPress = _a.onPress;
+    var theme = useWllSdk().theme;
+    var isRight = direction === 'right';
+    var styles = useNavButtonStyles();
+    return (jsxRuntimeExports.jsx(reactNative.Pressable, { style: [
+            styles.navButton,
+            isRight ? styles.navButtonRight : styles.navButtonLeft,
+            { backgroundColor: theme.background },
+        ], onPress: onPress, accessibilityLabel: "".concat(isRight ? 'Next' : 'Previous', " slide"), role: "button", children: jsxRuntimeExports.jsx(Icon, { name: isRight ? 'ArrowRight' : 'ArrowLeft', size: 20, color: theme.primary }) }));
+};
+
 var Grid = function (_a) {
     var section = _a.section;
     if (section.type !== exports.SectionType.Grid) {
@@ -4491,6 +4529,11 @@ var useRewardTileStyles = function () {
             width: '100%',
             marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
         },
+        tileTitle: {
+            maxWidth: '90%',
+            flex: 1,
+            marginRight: 8,
+        },
     });
 };
 
@@ -4556,12 +4599,18 @@ var RewardTileSummary = function () {
  */
 var RewardTileTitle = function () {
     var tileContext = useTileContext();
+    var styles = useRewardTileStyles();
     if (!isContextValid(tileContext))
         return null;
     var name = tileContext.configuration.name;
     if (!name)
         return null;
-    return (jsxRuntimeExports.jsx(Text, { variant: "title", ellipsizeMode: "tail", numberOfLines: 1, accessibilityRole: "header", accessibilityLabel: "Reward title: ".concat(name), testID: "reward-tile-title", style: { flex: 1, marginRight: 8 }, children: name }));
+    var handleTitleWidth = function () {
+        if (IS_MOBILE) {
+            return styles.titleWithLink;
+        }
+    };
+    return (jsxRuntimeExports.jsx(Text, { variant: "title", ellipsizeMode: "tail", numberOfLines: 1, accessibilityRole: "header", accessibilityLabel: "Reward title: ".concat(name), testID: "reward-tile-title", style: handleTitleWidth(), children: name }));
 };
 
 /**
@@ -4750,6 +4799,7 @@ exports.BaseBanner = BaseBanner;
 exports.BaseTile = BaseTile;
 exports.Button = Button;
 exports.Carousel = Carousel;
+exports.CarouselNavButton = CarouselNavButton;
 exports.Column = Column;
 exports.ContentTile = ContentTile$1;
 exports.ContentTileConfig = ContentTileConfig;