@wlloyalty/wll-react-sdk 1.4.10 → 1.5.1

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/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/types/types/wll.d.ts

@@ -22,6 +22,7 @@ export declare class Reward {
     summary?: string;
     redemptionMessage?: string;
     visibilityCriteria?: string;
+    isLocked?: boolean;
 }
 export type RewardCategory = {
     name: string;

package/dist/types/utils/styling.d.ts

@@ -10,7 +10,7 @@ export 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;

package/dist/web.js

@@ -8203,7 +8203,7 @@ var sizes = {
   sm: 12,
   md: 14,
   lg: 16,
-  xl: 18,
+  xl: 20,
   xxl: 24,
   xxxl: 32,
   xxxxl: 40,
@@ -19427,6 +19427,9 @@ var shouldHideContentForHalfTile = function (sizeInfo, artworkUrl) {
 };
 
 var baseStyles = StyleSheet$1.create({
+  imageContainer: {
+    position: 'relative'
+  },
   container: {
     width: '100%',
     height: '100%',
@@ -19464,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);
@@ -19496,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
+    }
   });
 };
 
@@ -19565,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
     },
@@ -19576,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"
+  }))));
 };
 
 /**
@@ -20608,9 +20644,7 @@ var ContentTileTitle = 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]);
@@ -22321,6 +22355,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
@@ -22344,7 +22387,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
+    }
   });
 };
 
@@ -22365,7 +22419,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%'
@@ -22381,7 +22437,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"
+  }))));
 };
 
 /**
@@ -22982,7 +23045,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
+    }
   });
 };
 
@@ -22994,14 +23068,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%'
@@ -23017,7 +23094,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"
+  }))));
 };
 
 /**
@@ -23080,9 +23164,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