@wlloyalty/wll-react-sdk 1.0.31 → 1.0.34

package/README.md

@@ -88,6 +88,26 @@ yarn commit
 yarn prepare
 ```
 
+### Creating New Components
+
+We provide an interactive component generator to help maintain consistent structure. To create a new component:
+
+```bash
+yarn create-component
+```
+
+You'll be prompted for:
+1. Component name - The name of your new component
+2. Component type - Choose from:
+   - atoms: Basic building blocks
+   - molecules: Simple combinations of atoms
+   - organisms: Complex combinations of molecules
+   - particles: Smallest UI elements
+   - templates: Page-level components
+3. Base directory - Where to create the component (defaults to ./lib/components)
+
+The script will generate a new component with the proper file structure and boilerplate code.
+
 ## 📄 License
 
 MIT License - See [LICENSE](LICENSE) for more information.

package/dist/index.js

@@ -18872,62 +18872,6 @@ var Pressable$1 = MemoedPressable;
 var MAX_WIDTH = 1080;
 var BUTTON_SIZE = 42;
 
-var useHandleTilePress = function (ctaLink, ctaLinkTarget) {
-  var handleNavigation = useWllSdk().handleNavigation;
-  return React$1.useCallback(function () {
-    if (ctaLink) {
-      var target = ctaLinkTarget || 'SAME_FRAME';
-      handleNavigation(ctaLink, target);
-    }
-  }, [ctaLink, ctaLinkTarget, handleNavigation]);
-};
-
-var BannerContext = /*#__PURE__*/React__namespace.createContext(null);
-var useBannerContext = function () {
-  var context = React__namespace.useContext(BannerContext);
-  if (!context) {
-    throw new Error('Tile components must be used within a BaseTile');
-  }
-  return context;
-};
-var BaseBanner = function (_a) {
-  var tile = _a.tile,
-    children = _a.children;
-  var theme = useWllSdk().theme;
-  var _b = tile.configuration,
-    ctaLink = _b.ctaLink,
-    ctaLinkTarget = _b.ctaLinkTarget,
-    title = _b.title;
-  var handlePress = useHandleTilePress(ctaLink, ctaLinkTarget);
-  return /*#__PURE__*/React__namespace.createElement(BannerContext.Provider, {
-    value: tile
-  }, /*#__PURE__*/React__namespace.createElement(Pressable$1, {
-    style: function (_a) {
-      var pressed = _a.pressed;
-      return [styles$7.container, {
-        backgroundColor: theme.surface,
-        borderRadius: theme.sizes.borderRadiusLg,
-        opacity: pressed ? 0.7 : 1
-      }];
-    },
-    onPress: handlePress,
-    disabled: !ctaLink,
-    accessible: true,
-    accessibilityRole: "button",
-    accessibilityLabel: "".concat(title).concat(ctaLink ? ' - Click to open' : '')
-  }, children));
-};
-var styles$7 = StyleSheet$1.create({
-  container: {
-    width: '100%',
-    maxWidth: MAX_WIDTH,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    overflow: 'hidden'
-  }
-});
-
 exports.CTALinkTarget = void 0;
 (function (CTALinkTarget) {
   CTALinkTarget["sameWindow"] = "SAME_FRAME";
@@ -19061,6 +19005,76 @@ var TierTileConfig = /** @class */function () {
   return TierTileConfig;
 }();
 
+var useHandleTilePress = function (tile, ctaLink, ctaLinkTarget) {
+  var handleNavigation = useWllSdk().handleNavigation;
+  return React$1.useCallback(function () {
+    if ((tile === null || tile === void 0 ? void 0 : tile.type) === exports.TileType.Reward) {
+      var config = tile.configuration;
+      if (config === null || config === void 0 ? void 0 : config.rewardId) {
+        var link = "/reward?id=".concat(config.rewardId);
+        return handleNavigation(link, exports.CTALinkTarget.sameWindow);
+      }
+    }
+    if ((tile === null || tile === void 0 ? void 0 : tile.type) === exports.TileType.RewardCategory) {
+      var config = tile.configuration;
+      if (config === null || config === void 0 ? void 0 : config.rewardCategoryId) {
+        var link = "/category?id=".concat(config.rewardCategoryId);
+        return handleNavigation(link, exports.CTALinkTarget.sameWindow);
+      }
+    }
+    if (ctaLink) {
+      var target = ctaLinkTarget || exports.CTALinkTarget.sameWindow;
+      return handleNavigation(ctaLink, target);
+    }
+  }, [tile, ctaLink, ctaLinkTarget, handleNavigation]);
+};
+
+var BannerContext = /*#__PURE__*/React__namespace.createContext(null);
+var useBannerContext = function () {
+  var context = React__namespace.useContext(BannerContext);
+  if (!context) {
+    throw new Error('Tile components must be used within a BaseTile');
+  }
+  return context;
+};
+var BaseBanner = function (_a) {
+  var tile = _a.tile,
+    children = _a.children;
+  var theme = useWllSdk().theme;
+  var _b = tile.configuration,
+    ctaLink = _b.ctaLink,
+    ctaLinkTarget = _b.ctaLinkTarget,
+    title = _b.title;
+  var handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
+  return /*#__PURE__*/React__namespace.createElement(BannerContext.Provider, {
+    value: tile
+  }, /*#__PURE__*/React__namespace.createElement(Pressable$1, {
+    style: function (_a) {
+      var pressed = _a.pressed;
+      return [styles$7.container, {
+        backgroundColor: theme.surface,
+        borderRadius: theme.sizes.borderRadiusLg,
+        opacity: pressed ? 0.7 : 1
+      }];
+    },
+    onPress: handlePress,
+    disabled: !ctaLink,
+    accessible: true,
+    accessibilityRole: "button",
+    accessibilityLabel: "".concat(title).concat(ctaLink ? ' - Click to open' : '')
+  }, children));
+};
+var styles$7 = StyleSheet$1.create({
+  container: {
+    width: '100%',
+    maxWidth: MAX_WIDTH,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    overflow: 'hidden'
+  }
+});
+
 var useTileSize = function (tile) {
   return React$1.useMemo(function () {
     return {
@@ -19095,7 +19109,7 @@ var BaseTileRoot = function (_a) {
     ctaLink = _b.ctaLink,
     ctaLinkTarget = _b.ctaLinkTarget,
     title = _b.title;
-  var handlePress = useHandleTilePress(ctaLink, ctaLinkTarget);
+  var handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
   var _c = useResponsive$1(),
     isDesktop = _c.isDesktop,
     isTablet = _c.isTablet;
@@ -19121,7 +19135,7 @@ var BaseTileRoot = function (_a) {
       }, dynamicStyles.container, layout, style];
     },
     onPress: handlePress,
-    disabled: !ctaLink,
+    disabled: tile.type !== 'REWARD' && tile.type !== 'REWARD_CATEGORY' && !ctaLink,
     accessible: true,
     accessibilityRole: "button",
     accessibilityLabel: "".concat(title).concat(ctaLink ? ' - Click to open' : '')
@@ -19530,12 +19544,12 @@ BadgeTile.DateEarned = BadgeTileDateEarned;
 BadgeTile.Status = BadgeTileStatus;
 
 var BannerTileCTA = function () {
-  var configuration = useBannerContext().configuration;
-  var _a = configuration,
+  var tile = useBannerContext();
+  var _a = tile.configuration,
     ctaText = _a.ctaText,
     ctaLink = _a.ctaLink,
     ctaLinkTarget = _a.ctaLinkTarget;
-  var handlePress = useHandleTilePress(ctaLink, ctaLinkTarget);
+  var handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
   if (!ctaText) return null;
   return /*#__PURE__*/React$1.createElement(Button, {
     title: ctaText,
@@ -19558,7 +19572,8 @@ var useBannerTileStyles = function () {
       position: 'relative',
       overflow: 'hidden',
       marginRight: useResponsiveValue(theme.sizes.xxl, theme.sizes.xxs, isDesktop, isTablet),
-      maxHeight: 320
+      maxHeight: useResponsiveValue(253, 120, isDesktop, isTablet),
+      minHeight: 120
     },
     media: {
       position: 'absolute',