@wlloyalty/wll-react-sdk 1.0.89 → 1.0.91

package/dist/types/components/molecules/CarouselNavButton/index.d.ts

@@ -0,0 +1,6 @@
+type CarouselNavButtonProps = {
+    direction: 'left' | 'right';
+    onPress: () => void;
+};
+export declare const CarouselNavButton: ({ direction, onPress, }: CarouselNavButtonProps) => JSX.Element;
+export default CarouselNavButton;

package/dist/types/components/molecules/CarouselNavButton/styles.d.ts

@@ -0,0 +1,22 @@
+export declare const useNavButtonStyles: () => {
+    navButton: {
+        position: "absolute";
+        top: "50%";
+        transform: {
+            translateY: number;
+        }[];
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        justifyContent: "center";
+        alignItems: "center";
+        zIndex: number;
+    };
+    navButtonLeft: {
+        left: number;
+    };
+    navButtonRight: {
+        right: number;
+    };
+};

package/dist/types/components/molecules/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Carousel } from './Carousel';
+export { default as CarouselNavButton } from './CarouselNavButton';
 export { default as Grid } from './Grid';
 export { default as ProgressIndicator } from './ProgressIndicator';
 export { default as SectionHeader } from './SectionHeader';

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

@@ -1,6 +1,9 @@
 import { Meta } from '@storybook/react';
 declare const _default: Meta;
 export default _default;
+export declare const ZeroPointsBalance: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../../types/tile").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
 export declare const StandardPointsBalance: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
     tile: import("../../../types/tile").Tile;
 }, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;

package/dist/web.js

@@ -20596,18 +20596,10 @@ var Carousel = function (_a) {
     }
   }, /*#__PURE__*/React.createElement(View$2, {
     style: styles.carouselContainer
-  }, showPrevButton && (/*#__PURE__*/React.createElement(Pressable$1, {
-    style: [styles.navButton, styles.navButtonLeft, {
-      backgroundColor: theme.background
-    }],
-    onPress: handlePrev,
-    accessibilityLabel: "Previous slide",
-    role: "button"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "ArrowLeft",
-    size: 20,
-    color: theme.primary
-  }))), /*#__PURE__*/React.createElement(ScrollView$2, {
+  }, showPrevButton && (/*#__PURE__*/React.createElement(CarouselNavButton, {
+    direction: "left",
+    onPress: handlePrev
+  })), /*#__PURE__*/React.createElement(ScrollView$2, {
     ref: scrollViewRef,
     horizontal: true,
     pagingEnabled: true,
@@ -20615,7 +20607,7 @@ var Carousel = function (_a) {
     onScroll: handleScroll,
     onMomentumScrollEnd: handleScrollEnd,
     scrollEventThrottle: 16,
-    style: [styles.carouselContent],
+    style: styles.carouselContent,
     contentContainerStyle: {
       width: containerWidth * sortedTiles.length
     },
@@ -20631,18 +20623,10 @@ var Carousel = function (_a) {
     }, /*#__PURE__*/React.createElement(BannerTile$1, {
       tile: tile
     }));
-  })), showNextButton && (/*#__PURE__*/React.createElement(Pressable$1, {
-    style: [styles.navButton, styles.navButtonRight, {
-      backgroundColor: theme.background
-    }],
-    onPress: handleNext,
-    accessibilityLabel: "Next slide",
-    role: "button"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "ArrowRight",
-    size: 20,
-    color: theme.primary
-  })))), displayControls && (/*#__PURE__*/React.createElement(View$2, {
+  })), showNextButton && (/*#__PURE__*/React.createElement(CarouselNavButton, {
+    direction: "right",
+    onPress: handleNext
+  }))), displayControls && (/*#__PURE__*/React.createElement(View$2, {
     style: dynamicStyles.indicators
   }, sortedTiles.map(function (_, index) {
     var width = animatedIndex.interpolate({
@@ -20662,6 +20646,53 @@ var Carousel = function (_a) {
   })))));
 };
 
+var useNavButtonStyles = function () {
+  var theme = useWllSdk().theme;
+  var buttonSize = IS_MOBILE ? BUTTON_SIZE * 0.75 : BUTTON_SIZE;
+  return StyleSheet$1.create({
+    navButton: {
+      position: 'absolute',
+      top: '50%',
+      transform: [{
+        translateY: -buttonSize / 2
+      }],
+      width: buttonSize,
+      height: buttonSize,
+      borderRadius: buttonSize / 2,
+      backgroundColor: theme.background,
+      justifyContent: 'center',
+      alignItems: 'center',
+      zIndex: 1
+    },
+    navButtonLeft: {
+      left: -buttonSize / 2
+    },
+    navButtonRight: {
+      right: -buttonSize / 2
+    }
+  });
+};
+
+var CarouselNavButton = function (_a) {
+  var direction = _a.direction,
+    onPress = _a.onPress;
+  var theme = useWllSdk().theme;
+  var isRight = direction === 'right';
+  var styles = useNavButtonStyles();
+  return /*#__PURE__*/React.createElement(Pressable$1, {
+    style: [styles.navButton, isRight ? styles.navButtonRight : styles.navButtonLeft, {
+      backgroundColor: theme.background
+    }],
+    onPress: onPress,
+    accessibilityLabel: "".concat(isRight ? 'Next' : 'Previous', " slide"),
+    role: "button"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: isRight ? 'ArrowRight' : 'ArrowLeft',
+    size: 20,
+    color: theme.primary
+  }));
+};
+
 var Grid = function (_a) {
   var section = _a.section;
   if (section.type !== exports.SectionType.Grid) {
@@ -21432,7 +21463,7 @@ var PointsTileFormattedPoints = function () {
     pointsSuffix = _d === void 0 ? 'pts' : _d,
     _e = _a.points,
     points = _e === void 0 ? 0 : _e;
-  if (points === undefined || points === 0) return null;
+  if (points === undefined) return null;
   var calculatedPoints = applyMultiplier(points, pointsMultiplier);
   var fullPointsText = "".concat(pointsPrefix).concat(calculatedPoints, " ").concat(pointsSuffix).trim();
   return /*#__PURE__*/React.createElement(View$2, {
@@ -22142,6 +22173,7 @@ exports.BaseBanner = BaseBanner;
 exports.BaseTile = BaseTile;
 exports.Button = Button;
 exports.Carousel = Carousel;
+exports.CarouselNavButton = CarouselNavButton;
 exports.Column = Column;
 exports.ContentTile = ContentTile$1;
 exports.ContentTileConfig = ContentTileConfig;