@wlloyalty/wll-react-sdk 1.4.9 → 1.5.0

package/dist/types/components/atoms/BaseTile/styles.d.ts

@@ -1,4 +1,7 @@
 export declare const baseStyles: {
+    imageContainer: {
+        position: "relative";
+    };
     container: {
         width: "100%";
         height: "100%";
@@ -40,6 +43,17 @@ export declare const useBaseTileStyles: () => {
         width: "100%";
         objectFit: "cover";
     };
+    lockOverlay: {
+        position: "absolute";
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        backgroundColor: string;
+        justifyContent: "center";
+        alignItems: "center";
+        zIndex: number;
+    };
 } | {
     container: {
         backgroundColor: string;
@@ -71,4 +85,15 @@ export declare const useBaseTileStyles: () => {
         width: "100%";
         objectFit: "cover";
     };
+    lockOverlay: {
+        position: "absolute";
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        backgroundColor: string;
+        justifyContent: "center";
+        alignItems: "center";
+        zIndex: number;
+    };
 };

package/dist/types/components/atoms/Button/Button.stories.d.ts

@@ -5,3 +5,5 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 export declare const Primary: Story;
 export declare const Accent: Story;
+export declare const IconOnly: Story;
+export declare const WithIconAndTitle: Story;

package/dist/types/components/atoms/Button/index.d.ts

@@ -7,7 +7,8 @@ type ButtonProps = {
     disabled?: boolean;
     accessibilityLabel?: string;
     accessibilityHint?: string;
+    icon?: React.ReactNode;
     testID?: string;
 };
-declare const Button: ({ title, onPress, variant, disabled, accessibilityLabel, accessibilityHint, testID, }: ButtonProps) => React.ReactElement;
+declare const Button: ({ title, onPress, variant, disabled, accessibilityLabel, accessibilityHint, icon, testID, }: ButtonProps) => React.ReactElement;
 export default Button;

package/dist/types/components/organisms/RewardTile/RewardTile.stories.d.ts

@@ -10,3 +10,9 @@ export declare const DefaultWithPoints: import("@storybook/csf").AnnotatedStoryF
 export declare const ArtworkOnly: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
     tile: import("../../..").Tile;
 }, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const Locked: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../..").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const ArtworkOnlyLocked: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../..").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;

package/dist/types/components/organisms/VenueTile/VenueTile.stories.d.ts

@@ -10,3 +10,6 @@ export declare const WithDescription: import("@storybook/csf").AnnotatedStoryFn<
 export declare const WithoutDescription: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
     tile: import("../../..").Tile;
 }, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const Locked: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../..").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;

package/dist/types/components/organisms/VenueTile/index.d.ts

@@ -8,7 +8,7 @@ type VenueTileProps = {
  */
 export declare const VenueTile: (({ tile }: VenueTileProps) => React.ReactElement | null) & {
     Media: ({ isArtworkOnly, }: {
-        isArtworkOnly: boolean;
+        isArtworkOnly?: boolean;
     }) => React.ReactElement | null;
     Title: () => React.ReactElement | null;
     Description: () => React.ReactElement | null;

package/dist/types/components/organisms/VenueTile/venue-tile-media.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 type VenueTileMediaProps = {
-    isArtworkOnly: boolean;
+    isArtworkOnly?: boolean;
 };
 /**
  * Renders the media for a Venue Tile.

package/dist/types/types/tile.d.ts

@@ -65,6 +65,7 @@ export declare class ContentTileConfig {
     artworkUrl?: string | null;
     ctaLinkTarget?: CTALinkTarget;
     ctaLink?: string | null;
+    isLocked?: boolean;
 }
 export declare class RewardTileConfig {
     rewardId: string;
@@ -72,6 +73,7 @@ export declare class RewardTileConfig {
     showPrice: boolean;
     showArtwork?: boolean;
     showDetails?: boolean;
+    isLocked?: boolean;
     id: string;
     createdAt: string;
     updatedAt: string;
@@ -104,6 +106,7 @@ export declare class VenueTileConfig {
     name: string;
     artworkUrl: string;
     description: string;
+    isLocked?: boolean;
 }
 export declare enum BadgeTileType {
     Specific = "SPECIFIC",

package/dist/web.js

@@ -8758,6 +8758,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'
@@ -8811,6 +8812,7 @@ var Button = function (_a) {
     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);
@@ -8837,7 +8839,7 @@ var Button = function (_a) {
       disabled: disabled
     },
     testID: testID
-  }, /*#__PURE__*/React__namespace.createElement(RNText, {
+  }, icon && icon, title && /*#__PURE__*/React__namespace.createElement(RNText, {
     style: [styles.text, textStyle]
   }, title));
 };
@@ -19425,6 +19427,9 @@ var shouldHideContentForHalfTile = function (sizeInfo, artworkUrl) {
 };
 
 var baseStyles = StyleSheet$1.create({
+  imageContainer: {
+    position: 'relative'
+  },
   container: {
     width: '100%',
     height: '100%',
@@ -19462,7 +19467,18 @@ var useBaseTileStyles = function () {
         alignItems: 'center',
         justifyContent: 'space-between'
       },
-      media: baseStyles.media
+      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);
@@ -19494,7 +19510,18 @@ var useBaseTileStyles = function () {
     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
+    }
   });
 };
 
@@ -19563,10 +19590,14 @@ var BaseTileMedia = function (props) {
   var _a = tileContext.configuration,
     artworkUrl = _a.artworkUrl,
     _b = _a.title,
-    title = _b === void 0 ? '' : _b;
+    title = _b === void 0 ? '' : _b,
+    _c = _a.isLocked,
+    isLocked = _c === void 0 ? false : _c;
   var styles = useBaseTileStyles();
   if (!artworkUrl) return null;
-  return /*#__PURE__*/React.createElement(ProgressiveImage, __assign({}, props, {
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: baseStyles.imageContainer
+  }, /*#__PURE__*/React.createElement(ProgressiveImage, __assign({}, props, {
     source: {
       uri: artworkUrl
     },
@@ -19574,7 +19605,14 @@ var BaseTileMedia = function (props) {
     style: [props.style, baseStyles.media, styles.media],
     alt: "Content image".concat(title ? " for ".concat(title) : ''),
     role: "img"
-  }));
+  })), isLocked && (/*#__PURE__*/React.createElement(View$2, {
+    style: styles.lockOverlay,
+    testID: "lock-overlay"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "LockKeyhole",
+    size: 48,
+    color: "white"
+  }))));
 };
 
 /**
@@ -22319,6 +22357,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
@@ -22342,7 +22389,18 @@ var useRewardTileStyles = function () {
     tileTitle: __assign({
       maxWidth: '90%',
       flex: 1
-    }, getDirectionalMargin(8))
+    }, 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
+    }
   });
 };
 
@@ -22363,7 +22421,9 @@ var RewardTileMedia = function (_a) {
     _c = _b.showArtwork,
     showArtwork = _c === void 0 ? true : _c,
     _d = _b.name,
-    name = _d === void 0 ? 'Reward' : _d;
+    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%'
@@ -22379,7 +22439,14 @@ var RewardTileMedia = function (_a) {
     },
     style: styles.image,
     alt: "Reward image for ".concat(name)
-  }));
+  }), isLocked && (/*#__PURE__*/React.createElement(View$2, {
+    style: styles.lockOverlay,
+    testID: "lock-overlay"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "LockKeyhole",
+    size: 48,
+    color: "white"
+  }))));
 };
 
 /**
@@ -22980,7 +23047,18 @@ var useVenueTileStyles = function () {
     tileTitle: __assign({
       maxWidth: '90%',
       flex: 1
-    }, getDirectionalMargin(8))
+    }, 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
+    }
   });
 };
 
@@ -22992,14 +23070,17 @@ 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%'
@@ -23015,7 +23096,14 @@ var VenueTileMedia = function (_a) {
     },
     style: styles.image,
     alt: "Venue image for ".concat(name)
-  }));
+  }), isLocked && (/*#__PURE__*/React.createElement(View$2, {
+    style: styles.lockOverlay,
+    testID: "lock-overlay"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "LockKeyhole",
+    size: 48,
+    color: "white"
+  }))));
 };
 
 /**
@@ -23078,9 +23166,7 @@ var VenueTileRoot = function (_a) {
   if (!tile || tile.tileHeight !== exports.TileHeight.Full || !tile.active || !tile.configuration) return null;
   return /*#__PURE__*/React.createElement(BaseTile, {
     tile: tile
-  }, /*#__PURE__*/React.createElement(VenueTile.Media, {
-    isArtworkOnly: false
-  }), /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Row, {
+  }, /*#__PURE__*/React.createElement(VenueTile.Media, null), /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Row, {
     justify: "between",
     align: "center",
     style: styles.header