@wlloyalty/wll-react-sdk 1.4.10 → 1.5.1

package/dist/index.d.ts

@@ -15,7 +15,7 @@ declare const sizes: {
     readonly sm: 12;
     readonly md: 14;
     readonly lg: 16;
-    readonly xl: 18;
+    readonly xl: 20;
     readonly xxl: 24;
     readonly xxxl: 32;
     readonly xxxxl: 40;
@@ -81,6 +81,7 @@ declare class Reward {
     summary?: string;
     redemptionMessage?: string;
     visibilityCriteria?: string;
+    isLocked?: boolean;
 }
 type RewardCategory = {
     name: string;
@@ -183,6 +184,7 @@ declare class ContentTileConfig {
     artworkUrl?: string | null;
     ctaLinkTarget?: CTALinkTarget;
     ctaLink?: string | null;
+    isLocked?: boolean;
 }
 declare class RewardTileConfig {
     rewardId: string;
@@ -190,6 +192,7 @@ declare class RewardTileConfig {
     showPrice: boolean;
     showArtwork?: boolean;
     showDetails?: boolean;
+    isLocked?: boolean;
     id: string;
     createdAt: string;
     updatedAt: string;
@@ -222,6 +225,7 @@ declare class VenueTileConfig {
     name: string;
     artworkUrl: string;
     description: string;
+    isLocked?: boolean;
 }
 declare enum BadgeTileType {
     Specific = "SPECIFIC",

package/dist/native.js

@@ -1675,7 +1675,7 @@ var sizes = {
     sm: 12,
     md: 14,
     lg: 16,
-    xl: 18,
+    xl: 20,
     xxl: 24,
     xxxl: 32,
     xxxxl: 40,
@@ -2784,6 +2784,9 @@ var shouldHideContentForHalfTile = function (sizeInfo, artworkUrl) {
 };
 
 var baseStyles = reactNative.StyleSheet.create({
+    imageContainer: {
+        position: 'relative',
+    },
     container: {
         width: '100%',
         height: '100%',
@@ -2820,6 +2823,17 @@ var useBaseTileStyles = function () {
                 justifyContent: 'space-between',
             },
             media: baseStyles.media,
+            lockOverlay: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundColor: 'rgba(0, 0, 0, 0.4)',
+                justifyContent: 'center',
+                alignItems: 'center',
+                zIndex: 10,
+            },
         });
     }
     var sizeInfo = useTileSize(tileContext);
@@ -2839,6 +2853,17 @@ var useBaseTileStyles = function () {
             textAlign: isHalfSize ? 'center' : undefined,
         },
         media: __assign(__assign({}, baseStyles.media), { flexBasis: !isHalfSize && title && body ? '50%' : '100%', height: isHalfSize ? '100%' : undefined }),
+        lockOverlay: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 10,
+        },
     });
 };
 
@@ -2902,11 +2927,11 @@ var BaseTileMedia = function (props) {
     var tileContext = useTileContext();
     if (!isContextValid(tileContext))
         return null;
-    var _a = tileContext.configuration, artworkUrl = _a.artworkUrl, _b = _a.title, title = _b === void 0 ? '' : _b;
+    var _a = tileContext.configuration, artworkUrl = _a.artworkUrl, _b = _a.title, title = _b === void 0 ? '' : _b, _c = _a.isLocked, isLocked = _c === void 0 ? false : _c;
     var styles = useBaseTileStyles();
     if (!artworkUrl)
         return null;
-    return (jsxRuntimeExports.jsx(ProgressiveImage, __assign({}, props, { source: { uri: artworkUrl }, testID: "tile-media", style: [props.style, baseStyles.media, styles.media], alt: "Content image".concat(title ? " for ".concat(title) : ''), role: "img" })));
+    return (jsxRuntimeExports.jsxs(reactNative.View, { style: baseStyles.imageContainer, children: [jsxRuntimeExports.jsx(ProgressiveImage, __assign({}, props, { source: { uri: artworkUrl }, testID: "tile-media", style: [props.style, baseStyles.media, styles.media], alt: "Content image".concat(title ? " for ".concat(title) : ''), role: "img" })), isLocked && (jsxRuntimeExports.jsx(reactNative.View, { style: styles.lockOverlay, testID: "lock-overlay", children: jsxRuntimeExports.jsx(Icon, { name: "LockKeyhole", size: 48, color: "white" }) }))] }));
 };
 
 /**
@@ -3734,11 +3759,7 @@ var ContentTileTitle = function () {
         if (isHalfSize) {
             if (title && !body)
                 return 3;
-            if (title && body)
-                return 1;
         }
-        if (artworkUrl)
-            return 1;
         if (!body)
             return 7;
         return 2;
@@ -5042,6 +5063,15 @@ var useRewardTileStyles = function () {
             height: '100%',
             resizeMode: 'cover',
         },
+        lockIcon: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            width: '100%',
+            height: '100%',
+        },
         content: {
             paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
             flex: 1,
@@ -5063,6 +5093,17 @@ var useRewardTileStyles = function () {
             marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
         },
         tileTitle: __assign({ maxWidth: '90%', flex: 1 }, getDirectionalMargin(8)),
+        lockOverlay: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 10,
+        },
     });
 };
 
@@ -5079,13 +5120,13 @@ var RewardTileMedia = function (_a) {
     var tileContext = useTileContext();
     if (!isContextValid(tileContext))
         return null;
-    var _b = tileContext.configuration, artworkUrl = _b.artworkUrl, _c = _b.showArtwork, showArtwork = _c === void 0 ? true : _c, _d = _b.name, name = _d === void 0 ? 'Reward' : _d;
+    var _b = tileContext.configuration, artworkUrl = _b.artworkUrl, _c = _b.showArtwork, showArtwork = _c === void 0 ? true : _c, _d = _b.name, name = _d === void 0 ? 'Reward' : _d, _e = _b.isLocked, isLocked = _e === void 0 ? false : _e;
     if (!artworkUrl || !showArtwork)
         return null;
     var containerStyle = {
         flexBasis: isArtworkOnly ? '100%' : '50%',
     };
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.imageContainer, containerStyle], testID: "reward-tile-media", role: "img", accessibilityLabel: "Reward image for ".concat(name), children: jsxRuntimeExports.jsx(ProgressiveImage, { source: { uri: artworkUrl }, style: styles.image, alt: "Reward image for ".concat(name) }) }));
+    return (jsxRuntimeExports.jsxs(reactNative.View, { style: [styles.imageContainer, containerStyle], testID: "reward-tile-media", role: "img", accessibilityLabel: "Reward image for ".concat(name), children: [jsxRuntimeExports.jsx(ProgressiveImage, { source: { uri: artworkUrl }, style: styles.image, alt: "Reward image for ".concat(name) }), isLocked && (jsxRuntimeExports.jsx(reactNative.View, { style: styles.lockOverlay, testID: "lock-overlay", children: jsxRuntimeExports.jsx(Icon, { name: "LockKeyhole", size: 48, color: "white" }) }))] }));
 };
 
 /**
@@ -5482,6 +5523,17 @@ var useVenueTileStyles = function () {
             marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
         },
         tileTitle: __assign({ maxWidth: '90%', flex: 1 }, getDirectionalMargin(8)),
+        lockOverlay: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 10,
+        },
     });
 };
 
@@ -5493,18 +5545,18 @@ var useVenueTileStyles = function () {
  * @returns React.ReactElement or null if no artwork URL is present or artwork should not be shown
  */
 var VenueTileMedia = function (_a) {
-    var isArtworkOnly = _a.isArtworkOnly;
+    var _b = _a.isArtworkOnly, isArtworkOnly = _b === void 0 ? false : _b;
     var styles = useVenueTileStyles();
     var tileContext = useTileContext();
     if (!isContextValid(tileContext))
         return null;
-    var _b = tileContext.configuration, artworkUrl = _b.artworkUrl, _c = _b.name, name = _c === void 0 ? 'Venue' : _c;
+    var _c = tileContext.configuration, artworkUrl = _c.artworkUrl, _d = _c.name, name = _d === void 0 ? 'Venue' : _d, _e = _c.isLocked, isLocked = _e === void 0 ? false : _e;
     if (!artworkUrl)
         return null;
     var containerStyle = {
         flexBasis: isArtworkOnly ? '100%' : '50%',
     };
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.imageContainer, containerStyle], testID: "venue-tile-media", role: "img", accessibilityLabel: "Venue image for ".concat(name), children: jsxRuntimeExports.jsx(ProgressiveImage, { source: { uri: artworkUrl }, style: styles.image, alt: "Venue image for ".concat(name) }) }));
+    return (jsxRuntimeExports.jsxs(reactNative.View, { style: [styles.imageContainer, containerStyle], testID: "venue-tile-media", role: "img", accessibilityLabel: "Venue image for ".concat(name), children: [jsxRuntimeExports.jsx(ProgressiveImage, { source: { uri: artworkUrl }, style: styles.image, alt: "Venue image for ".concat(name) }), isLocked && (jsxRuntimeExports.jsx(reactNative.View, { style: styles.lockOverlay, testID: "lock-overlay", children: jsxRuntimeExports.jsx(Icon, { name: "LockKeyhole", size: 48, color: "white" }) }))] }));
 };
 
 /**
@@ -5558,7 +5610,7 @@ var VenueTileRoot = function (_a) {
         !tile.active ||
         !tile.configuration)
         return null;
-    return (jsxRuntimeExports.jsxs(BaseTile, { tile: tile, children: [jsxRuntimeExports.jsx(VenueTile.Media, { isArtworkOnly: false }), jsxRuntimeExports.jsxs(Layout, { children: [jsxRuntimeExports.jsxs(Row, { justify: "between", align: "center", style: styles.header, children: [jsxRuntimeExports.jsx(VenueTile.Title, {}), jsxRuntimeExports.jsx(VenueTile.Chevron, {})] }), jsxRuntimeExports.jsx(VenueTile.Description, {})] })] }));
+    return (jsxRuntimeExports.jsxs(BaseTile, { tile: tile, children: [jsxRuntimeExports.jsx(VenueTile.Media, {}), jsxRuntimeExports.jsxs(Layout, { children: [jsxRuntimeExports.jsxs(Row, { justify: "between", align: "center", style: styles.header, children: [jsxRuntimeExports.jsx(VenueTile.Title, {}), jsxRuntimeExports.jsx(VenueTile.Chevron, {})] }), jsxRuntimeExports.jsx(VenueTile.Description, {})] })] }));
 };
 /**
  * The VenueTile component with subcomponents attached.