@wlloyalty/wll-react-sdk 1.2.0 → 1.3.0

package/dist/native.js

@@ -1917,8 +1917,8 @@ var DIMENSION_MODES = {
     TABLET: 'tablet',
     MOBILE: 'mobile',
 };
-var TABLET_SCREEN_WIDTH = 728;
-var SMALL_SCREEN_WIDTH = 530;
+var TABLET_SCREEN_WIDTH = 768;
+var SMALL_SCREEN_WIDTH = 480;
 
 var isWeb = reactNative.Platform.OS === 'web';
 function getDimensionMode(window) {
@@ -2387,7 +2387,7 @@ var Text = function (_a) {
             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.xxl, theme.sizes.md, isDesktop, isTablet), fontWeight: 'bold' });
+                return __assign(__assign({}, baseStyle), { fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet), fontWeight: 'bold' });
             case 'body':
                 return {
                     color: theme.derivedSurfaceText[20],
@@ -2398,7 +2398,7 @@ var Text = function (_a) {
             case 'description':
             case 'label':
             default:
-                return __assign(__assign({}, baseStyle), { fontSize: useResponsiveValue(theme.sizes.sm, theme.sizes.xs, isDesktop, isTablet) });
+                return __assign(__assign({}, baseStyle), { fontSize: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet) });
         }
     };
     var variantStyle = getVariantStyle(variant);
@@ -3323,6 +3323,7 @@ var BadgeTileDateEarned = function () {
  */
 var BadgeTileDescription = function () {
     var tileContext = useTileContext();
+    var width = reactNative.useWindowDimensions().width;
     if (!isContextValid(tileContext))
         return null;
     var _a = tileContext.configuration, count = _a.count, description = _a.description, type = _a.type;
@@ -3332,7 +3333,19 @@ var BadgeTileDescription = function () {
     // For Specific type, always show description
     if (count === 0 && type === exports.BadgeTileType.Latest)
         return null;
-    return (jsxRuntimeExports.jsx(reactNative.View, { accessible: true, accessibilityLabel: "Badge description: ".concat(description), testID: "badge-tile-description", children: jsxRuntimeExports.jsx(Text, { variant: "body", numberOfLines: 2, ellipsizeMode: "tail", accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: description }) }));
+    var numberOfLines = React.useMemo(function () {
+        if (width <= 480)
+            return 2;
+        if (width <= 768)
+            return 3;
+        if (width <= 1024)
+            return 1;
+        return 2;
+    }, [width]);
+    return (jsxRuntimeExports.jsx(reactNative.View, { accessible: true, accessibilityLabel: "Badge description: ".concat(description), testID: "badge-tile-description", style: {
+            width: '100%',
+            overflow: 'hidden',
+        }, children: jsxRuntimeExports.jsx(Text, { variant: "body", numberOfLines: numberOfLines, ellipsizeMode: "tail", accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: description }) }));
 };
 
 /**
@@ -3394,7 +3407,7 @@ var BadgeTileTitle = function () {
             : name;
     if (!displayText)
         return null;
-    return (jsxRuntimeExports.jsx(reactNative.View, { accessible: true, accessibilityLabel: "Badge title: ".concat(displayText), testID: "badge-tile-title", children: jsxRuntimeExports.jsx(Text, { variant: "title", style: styles.titleText, numberOfLines: count === 0 ? 2 : 1, ellipsizeMode: "tail", accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: displayText }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { accessible: true, accessibilityLabel: "Badge title: ".concat(displayText), testID: "badge-tile-title", children: jsxRuntimeExports.jsx(Text, { variant: "title", style: styles.titleText, numberOfLines: 1, ellipsizeMode: "tail", accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: displayText }) }));
 };
 
 /**
@@ -3592,15 +3605,16 @@ var useContentTileStyles = function (hasArtwork) {
         imageContainer: {
             width: '100%',
             marginBottom: 0,
+            overflow: 'hidden',
         },
         image: {
             position: 'absolute',
-            top: 0,
-            left: 0,
-            bottom: 0,
-            right: 0,
-            width: '100%',
-            height: '100%',
+            top: -1,
+            left: -1,
+            bottom: -1,
+            right: -1,
+            width: '102%',
+            height: '102%',
             resizeMode: 'cover',
         },
         content: {
@@ -3630,27 +3644,58 @@ var ContentTileMedia = function (_a) {
 
 var ContentTileSummary = function () {
     var tileContext = useTileContext();
+    var sizeInfo = useTileSize(tileContext);
     if (!isContextValid(tileContext))
         return null;
-    var body = tileContext.configuration.body;
+    var _a = tileContext.configuration, body = _a.body, title = _a.title, artworkUrl = _a.artworkUrl;
     if (!body)
         return null;
-    var sizeInfo = useTileSize(tileContext);
     if (!sizeInfo)
         return null;
-    var isFullSize = sizeInfo.isFullSize, isHalfSize = sizeInfo.isHalfSize;
-    var getNumberOfLines = function () {
-        return isFullSize ? 3 : isHalfSize ? 4 : 3;
-    };
-    return (jsxRuntimeExports.jsx(Text, { variant: "body", role: "article", accessibilityLabel: body, numberOfLines: getNumberOfLines(), testID: "content-tile-summary", children: body }));
+    var isHalfSize = sizeInfo.isHalfSize;
+    var numberOfLines = React.useMemo(function () {
+        if (!body)
+            return undefined;
+        if (isHalfSize) {
+            if (!title && body)
+                return 4;
+            if (title && body)
+                return 2;
+        }
+        if (artworkUrl)
+            return 3;
+        if (!title)
+            return 8;
+        return 6;
+    }, [title, body, artworkUrl, isHalfSize]);
+    return (jsxRuntimeExports.jsx(Text, { variant: "body", role: "article", accessibilityLabel: body, numberOfLines: numberOfLines, testID: "content-tile-summary", children: body }));
 };
 
 var ContentTileTitle = function () {
     var tileContext = useTileContext();
     var styles = useContentTileStyles();
+    var sizeInfo = useTileSize(tileContext);
     if (!isContextValid(tileContext))
         return null;
-    var _a = tileContext.configuration, title = _a.title, ctaLink = _a.ctaLink;
+    var _a = tileContext.configuration, title = _a.title, ctaLink = _a.ctaLink, body = _a.body, artworkUrl = _a.artworkUrl;
+    if (!sizeInfo)
+        return null;
+    var isHalfSize = sizeInfo.isHalfSize;
+    var numberOfLines = React.useMemo(function () {
+        if (!title)
+            return undefined;
+        if (isHalfSize) {
+            if (title && !body)
+                return 3;
+            if (title && body)
+                return 1;
+        }
+        if (artworkUrl)
+            return 1;
+        if (!body)
+            return 7;
+        return 2;
+    }, [title, body, artworkUrl, isHalfSize]);
     if (!title)
         return null;
     var handleTitleWidth = function () {
@@ -3658,7 +3703,7 @@ var ContentTileTitle = function () {
             return styles.titleWithLink;
         }
     };
-    return (jsxRuntimeExports.jsx(Text, { variant: "title", role: "heading", accessibilityLabel: title, numberOfLines: 1, style: handleTitleWidth(), testID: "content-tile-title", children: title }));
+    return (jsxRuntimeExports.jsx(Text, { variant: "title", role: "heading", accessibilityLabel: title, numberOfLines: numberOfLines, style: handleTitleWidth(), testID: "content-tile-title", children: title }));
 };
 
 /**
@@ -3820,14 +3865,14 @@ var useSectionHeaderStyles = function () {
             marginBottom: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet),
         },
         sectionTitle: {
-            fontSize: useResponsiveValue(theme.sizes.xxxl, theme.sizes.xl, isDesktop, isTablet),
+            fontSize: useResponsiveValue(theme.sizes.xxl, theme.sizes.xl, isDesktop, isTablet),
             marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
             fontWeight: '700',
             color: theme.text,
             fontFamily: theme.fontFamily,
         },
         sectionDescription: {
-            fontSize: useResponsiveValue(theme.sizes.xxl, theme.sizes.md, isDesktop, isTablet),
+            fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet),
             color: theme.alphaDerivedText[80],
             fontFamily: theme.fontFamily,
         },
@@ -4933,10 +4978,12 @@ var RewardTileSummary = function () {
     var tileContext = useTileContext();
     if (!isContextValid(tileContext))
         return null;
-    var summary = tileContext.configuration.summary;
+    var _a = tileContext.configuration, summary = _a.summary, _b = _a.showPrice, showPrice = _b === void 0 ? true : _b, price = _a.price;
+    var shouldShowPrice = showPrice && price !== undefined && price !== null && price !== 0;
+    var numberOfLines = shouldShowPrice ? 1 : 3;
     if (!summary)
         return null;
-    return (jsxRuntimeExports.jsx(Text, { variant: "body", role: "article", accessibilityLabel: summary, testID: "reward-tile-summary", children: summary }));
+    return (jsxRuntimeExports.jsx(Text, { variant: "body", role: "article", accessibilityLabel: summary, testID: "reward-tile-summary", numberOfLines: numberOfLines, ellipsizeMode: "tail", children: summary }));
 };
 
 /**