@wlloyalty/wll-react-sdk 1.4.10 → 1.5.0

package/dist/index.d.ts

@@ -183,6 +183,7 @@ declare class ContentTileConfig {
     artworkUrl?: string | null;
     ctaLinkTarget?: CTALinkTarget;
     ctaLink?: string | null;
+    isLocked?: boolean;
 }
 declare class RewardTileConfig {
     rewardId: string;
@@ -190,6 +191,7 @@ declare class RewardTileConfig {
     showPrice: boolean;
     showArtwork?: boolean;
     showDetails?: boolean;
+    isLocked?: boolean;
     id: string;
     createdAt: string;
     updatedAt: string;
@@ -222,6 +224,7 @@ declare class VenueTileConfig {
     name: string;
     artworkUrl: string;
     description: string;
+    isLocked?: boolean;
 }
 declare enum BadgeTileType {
     Specific = "SPECIFIC",

package/dist/native.js

@@ -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" }) }))] }));
 };
 
 /**
@@ -5042,6 +5067,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 +5097,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 +5124,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 +5527,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 +5549,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 +5614,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.