@wlloyalty/wll-react-sdk 1.4.9 → 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",
@@ -353,9 +356,10 @@ type ButtonProps = {
     disabled?: boolean;
     accessibilityLabel?: string;
     accessibilityHint?: string;
+    icon?: React$1.ReactNode;
     testID?: string;
 };
-declare const Button: ({ title, onPress, variant, disabled, accessibilityLabel, accessibilityHint, testID, }: ButtonProps) => React$1.ReactElement;
+declare const Button: ({ title, onPress, variant, disabled, accessibilityLabel, accessibilityHint, icon, testID, }: ButtonProps) => React$1.ReactElement;
 
 type IconName = keyof typeof LucideReactIcons;
 type IconProps = {

package/dist/native.js

@@ -2177,6 +2177,7 @@ var useButtonDynamicStyles = function () {
         button: {
             justifyContent: 'center',
             alignItems: 'center',
+            flexDirection: 'row',
             paddingHorizontal: useResponsiveValue(theme.sizes.xxl, theme.sizes.sm, isDesktop, isTablet),
             paddingVertical: theme.sizes.sm,
             alignSelf: 'flex-start',
@@ -2219,12 +2220,12 @@ var useTextStyles = createVariantSystem({}, function (theme) { return ({
     },
 }); });
 var Button = function (_a) {
-    var title = _a.title, onPress = _a.onPress, variant = _a.variant, _b = _a.disabled, disabled = _b === void 0 ? false : _b, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, testID = _a.testID;
+    var title = _a.title, onPress = _a.onPress, variant = _a.variant, _b = _a.disabled, disabled = _b === void 0 ? false : _b, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, icon = _a.icon, testID = _a.testID;
     var theme = useWllSdk().theme;
     var buttonStyle = useButtonStyles(theme, variant);
     var textStyle = useTextStyles(theme, variant);
     var styles = useButtonDynamicStyles();
-    return (jsxRuntimeExports.jsx(reactNative.Pressable, { style: function (_a) {
+    return (jsxRuntimeExports.jsxs(reactNative.Pressable, { style: function (_a) {
             var pressed = _a.pressed;
             return [
                 styles.button,
@@ -2233,7 +2234,7 @@ var Button = function (_a) {
                 disabled && { opacity: 0.5 },
                 pressed && { opacity: 0.7 },
             ];
-        }, onPress: onPress, disabled: disabled, accessible: true, role: "button", accessibilityLabel: accessibilityLabel || title, accessibilityHint: accessibilityHint, accessibilityState: { disabled: disabled }, testID: testID, children: jsxRuntimeExports.jsx(reactNative.Text, { style: [styles.text, textStyle], children: title }) }));
+        }, onPress: onPress, disabled: disabled, accessible: true, role: "button", accessibilityLabel: accessibilityLabel || title, accessibilityHint: accessibilityHint, accessibilityState: { disabled: disabled }, testID: testID, children: [icon && icon, title && jsxRuntimeExports.jsx(reactNative.Text, { style: [styles.text, textStyle], children: title })] }));
 };
 
 var LucideReactNativeIcons;
@@ -2783,6 +2784,9 @@ var shouldHideContentForHalfTile = function (sizeInfo, artworkUrl) {
 };
 
 var baseStyles = reactNative.StyleSheet.create({
+    imageContainer: {
+        position: 'relative',
+    },
     container: {
         width: '100%',
         height: '100%',
@@ -2819,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);
@@ -2838,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,
+        },
     });
 };
 
@@ -2901,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" }) }))] }));
 };
 
 /**
@@ -5041,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,
@@ -5062,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,
+        },
     });
 };
 
@@ -5078,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" }) }))] }));
 };
 
 /**
@@ -5481,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,
+        },
     });
 };
 
@@ -5492,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" }) }))] }));
 };
 
 /**
@@ -5557,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.