@wlloyalty/wll-react-sdk 1.2.1 → 1.3.1

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

@@ -5,6 +5,9 @@ export default _default;
 export declare const FullSizeWelcomeTier: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
     tile: import("../../../types/tile").Tile;
 }, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const ImageWithLongTitleAndBody: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../../types/tile").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
 export declare const FullSizeRewardHighlight: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
     tile: import("../../../types/tile").Tile;
 }, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
@@ -26,3 +29,27 @@ export declare const HalfSizeReferralBonus: import("@storybook/csf").AnnotatedSt
 export declare const FullSizePartnerRewards: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
     tile: import("../../../types/tile").Tile;
 }, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const TitleOnly: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../../types/tile").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const BodyOnly: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../../types/tile").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const TitleAndBody: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../../types/tile").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const HalfSizeTitleOnly: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../../types/tile").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const HalfSizeBodyOnly: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../../types/tile").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const HalfSizeTitleAndBody: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../../types/tile").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const ResponsiveTest: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../../types/tile").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;
+export declare const HalfSizeArtworkOnly: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<{
+    tile: import("../../../types/tile").Tile;
+}, "tile"> & import("../../hoc/withTileFetching").WithTileFetchingProps>;

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

@@ -8,3 +8,4 @@ export declare const EmptySections: Story;
 export declare const FullGroup: Story;
 export declare const GamificationFullGroup: Story;
 export declare const AirMilesTravelFullGroup: Story;
+export declare const ContentTileGroup: Story;

package/dist/types/constants/responsive.d.ts

@@ -3,5 +3,5 @@ export declare const DIMENSION_MODES: {
     TABLET: "tablet";
     MOBILE: "mobile";
 };
-export declare const TABLET_SCREEN_WIDTH = 728;
-export declare const SMALL_SCREEN_WIDTH = 530;
+export declare const TABLET_SCREEN_WIDTH = 768;
+export declare const SMALL_SCREEN_WIDTH = 480;

package/dist/types/context/WllSdkContext.d.ts

@@ -11,6 +11,7 @@ export type SDKConfig = {
     userToken?: string;
     fetcher?: Fetcher;
     locale?: string;
+    environment?: 'PRODUCTION' | 'STAGING' | 'DEVELOPMENT';
 };
 export type APIResponse<T> = {
     status: 'success' | 'error';

package/dist/web.js

@@ -7843,7 +7843,20 @@ var useNavigation = function (config) {
   return handleNavigation;
 };
 
-var baseUrl = 'https://api.staging.core.wlloyalty.net/v1';
+var getBaseUrl = function (environment) {
+  if (environment === void 0) {
+    environment = 'STAGING';
+  }
+  switch (environment) {
+    case 'PRODUCTION':
+      return 'https://api.core.wlloyalty.net/v1';
+    case 'DEVELOPMENT':
+      return 'https://localhost:8080/v1';
+    case 'STAGING':
+    default:
+      return 'https://api.staging.core.wlloyalty.net/v1';
+  }
+};
 var useCreateRequestOptions = function (config) {
   return React.useCallback(function (options) {
     if (options === void 0) {
@@ -7915,9 +7928,11 @@ var createResourceGetter = function (resource, includeHydrate) {
       }
       // Always append locale=en
       params.append('locale', config.locale || 'en');
+      var env = config.environment || 'STAGING';
+      var baseUrl = getBaseUrl(env);
       var queryString = params.toString();
       return makeRequest("".concat(baseUrl, "/tiles-management/").concat(resource, "/").concat(id).concat(queryString ? "?".concat(queryString) : ''));
-    }, [makeRequest]);
+    }, [makeRequest, config.environment]);
   };
 };
 var useGetGroupByID = createResourceGetter('groups', true);
@@ -8459,8 +8474,8 @@ var DIMENSION_MODES = {
   TABLET: 'tablet',
   MOBILE: 'mobile'
 };
-var TABLET_SCREEN_WIDTH = 728;
-var SMALL_SCREEN_WIDTH = 530;
+var TABLET_SCREEN_WIDTH = 768;
+var SMALL_SCREEN_WIDTH = 480;
 
 var isWeb = Platform$1.OS === 'web';
 function getDimensionMode(window) {
@@ -8655,6 +8670,9 @@ var validateConfig = function (config) {
   if (config.locale && !/^[a-z]{2}$/.test(config.locale)) {
     throw new Error('Invalid locale format. Expected ISO 639-1 language code (e.g. "en")');
   }
+  if (!config.environment) {
+    config.environment = 'STAGING';
+  }
 };
 
 function createVariantSystem(baseStyle, variantStyles) {
@@ -18992,7 +19010,7 @@ var Text = function (_a) {
         });
       case 'title':
         return __assign(__assign({}, baseStyle), {
-          fontSize: useResponsiveValue(theme.sizes.xxl, theme.sizes.md, isDesktop, isTablet),
+          fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet),
           fontWeight: 'bold'
         });
       case 'body':
@@ -19010,7 +19028,7 @@ var Text = function (_a) {
       case 'label':
       default:
         return __assign(__assign({}, baseStyle), {
-          fontSize: useResponsiveValue(theme.sizes.sm, theme.sizes.xs, isDesktop, isTablet)
+          fontSize: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
         });
     }
   };
@@ -20083,6 +20101,7 @@ var BadgeTileDateEarned = function () {
  */
 var BadgeTileDescription = function () {
   var tileContext = useTileContext();
+  var width = useWindowDimensions().width;
   if (!isContextValid(tileContext)) return null;
   var _a = tileContext.configuration,
     count = _a.count,
@@ -20092,13 +20111,23 @@ var BadgeTileDescription = function () {
   // For Latest type, hide description when count = 0
   // For Specific type, always show description
   if (count === 0 && type === exports.BadgeTileType.Latest) return null;
+  var numberOfLines = React.useMemo(function () {
+    if (width <= 480) return 2;
+    if (width <= 768) return 3;
+    if (width <= 1024) return 1;
+    return 2;
+  }, [width]);
   return /*#__PURE__*/React.createElement(View$2, {
     accessible: true,
     accessibilityLabel: "Badge description: ".concat(description),
-    testID: "badge-tile-description"
+    testID: "badge-tile-description",
+    style: {
+      width: '100%',
+      overflow: 'hidden'
+    }
   }, /*#__PURE__*/React.createElement(Text, {
     variant: "body",
-    numberOfLines: 2,
+    numberOfLines: numberOfLines,
     ellipsizeMode: "tail",
     accessibilityElementsHidden: true,
     importantForAccessibility: "no-hide-descendants"
@@ -20197,7 +20226,7 @@ var BadgeTileTitle = function () {
   }, /*#__PURE__*/React.createElement(Text, {
     variant: "title",
     style: styles.titleText,
-    numberOfLines: count === 0 ? 2 : 1,
+    numberOfLines: 1,
     ellipsizeMode: "tail",
     accessibilityElementsHidden: true,
     importantForAccessibility: "no-hide-descendants"
@@ -20503,21 +20532,30 @@ var ContentTileMedia = function (_a) {
 
 var ContentTileSummary = function () {
   var tileContext = useTileContext();
+  var sizeInfo = useTileSize(tileContext);
   if (!isContextValid(tileContext)) return null;
-  var body = tileContext.configuration.body;
+  var _a = tileContext.configuration,
+    body = _a.body,
+    title = _a.title,
+    artworkUrl = _a.artworkUrl;
   if (!body) return null;
-  var sizeInfo = useTileSize(tileContext);
   if (!sizeInfo) return null;
-  var isFullSize = sizeInfo.isFullSize,
-    isHalfSize = sizeInfo.isHalfSize;
-  var getNumberOfLines = function () {
-    return isFullSize ? 3 : isHalfSize ? 4 : 3;
-  };
+  var isHalfSize = sizeInfo.isHalfSize;
+  var numberOfLines = React.useMemo(function () {
+    if (!body) return undefined;
+    if (isHalfSize) {
+      if (!title && body) return 4;
+      if (title && body) return 2;
+    }
+    if (artworkUrl) return 3;
+    if (!title) return 8;
+    return 6;
+  }, [title, body, artworkUrl, isHalfSize]);
   return /*#__PURE__*/React.createElement(Text, {
     variant: "body",
     role: "article",
     accessibilityLabel: body,
-    numberOfLines: getNumberOfLines(),
+    numberOfLines: numberOfLines,
     testID: "content-tile-summary"
   }, body);
 };
@@ -20525,10 +20563,25 @@ var ContentTileSummary = function () {
 var ContentTileTitle = function () {
   var tileContext = useTileContext();
   var styles = useContentTileStyles();
+  var sizeInfo = useTileSize(tileContext);
   if (!isContextValid(tileContext)) return null;
   var _a = tileContext.configuration,
     title = _a.title,
-    ctaLink = _a.ctaLink;
+    ctaLink = _a.ctaLink,
+    body = _a.body,
+    artworkUrl = _a.artworkUrl;
+  if (!sizeInfo) return null;
+  var isHalfSize = sizeInfo.isHalfSize;
+  var numberOfLines = React.useMemo(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]);
   if (!title) return null;
   var handleTitleWidth = function () {
     if (IS_MOBILE && ctaLink) {
@@ -20539,7 +20592,7 @@ var ContentTileTitle = function () {
     variant: "title",
     role: "heading",
     accessibilityLabel: title,
-    numberOfLines: 1,
+    numberOfLines: numberOfLines,
     style: handleTitleWidth(),
     testID: "content-tile-title"
   }, title);
@@ -20731,14 +20784,14 @@ var useSectionHeaderStyles = function () {
       marginBottom: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet)
     },
     sectionTitle: {
-      fontSize: useResponsiveValue(theme.sizes.xxxl, theme.sizes.xl, isDesktop, isTablet),
+      fontSize: useResponsiveValue(theme.sizes.xxl, theme.sizes.xl, isDesktop, isTablet),
       marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
       fontWeight: '700',
       color: theme.text,
       fontFamily: theme.fontFamily
     },
     sectionDescription: {
-      fontSize: useResponsiveValue(theme.sizes.xxl, theme.sizes.md, isDesktop, isTablet),
+      fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet),
       color: theme.alphaDerivedText[80],
       fontFamily: theme.fontFamily
     }
@@ -22245,13 +22298,21 @@ var RewardTilePoints = function () {
 var RewardTileSummary = function () {
   var tileContext = useTileContext();
   if (!isContextValid(tileContext)) return null;
-  var summary = tileContext.configuration.summary;
+  var _a = tileContext.configuration,
+    summary = _a.summary,
+    _b = _a.showPrice,
+    showPrice = _b === void 0 ? true : _b,
+    price = _a.price;
+  var shouldShowPrice = showPrice && price !== undefined && price !== null && price !== 0;
+  var numberOfLines = shouldShowPrice ? 1 : 3;
   if (!summary) return null;
   return /*#__PURE__*/React.createElement(Text, {
     variant: "body",
     role: "article",
     accessibilityLabel: summary,
-    testID: "reward-tile-summary"
+    testID: "reward-tile-summary",
+    numberOfLines: numberOfLines,
+    ellipsizeMode: "tail"
   }, summary);
 };