@sendoutcards/quantum-design-ui 1.7.43 → 1.7.46

package/dist/index.es.js

@@ -17176,12 +17176,20 @@ var Banner = function (_a) {
   var icon = _a.icon,
       message = _a.message,
       status = _a.status,
-      children = _a.children;
+      children = _a.children,
+      _b = _a.outlined,
+      outlined = _b === void 0 ? true : _b;
   return jsx(Div, {
     backgroundColor: {
       swatch: status === 'success' ? 'success' : status === 'warning' ? 'warning' : 'danger',
-      shade: 'base'
+      shade: outlined ? '_1000' : 'base'
     },
+    borderWidth: outlined ? 'default' : undefined,
+    borderStyle: outlined ? 'solid' : undefined,
+    borderColor: outlined ? {
+      swatch: status === 'success' ? 'success' : status === 'warning' ? 'warning' : 'danger',
+      shade: 'base'
+    } : undefined,
     width: "100%",
     inset: {
       vertical: 'x2',
@@ -17200,10 +17208,10 @@ var Banner = function (_a) {
   }, jsx(Icon, {
     name: icon,
     size: "small",
-    primaryColor: "inverseBodyText"
+    primaryColor: outlined ? 'primaryBodyText' : 'inverseHeadingText'
   })), message && jsx(Text, {
     content: message,
-    color: "inverseBody",
+    color: outlined ? 'primaryBody' : 'inverseHeading',
     type: {
       xSmall: 'footnote',
       small: 'caption'
@@ -21535,26 +21543,29 @@ var ConfigurationCard = function (_a) {
       stackedCardImage = _a.stackedCardImage,
       layout = _a.layout,
       _c = _a.type,
-      type = _c === void 0 ? 'addon' : _c;
+      type = _c === void 0 ? 'addon' : _c,
+      isFeatured = _a.isFeatured,
+      _d = _a.backgroundColor,
+      backgroundColor = _d === void 0 ? 'background' : _d;
 
-  var _d = useState(false),
-      isSelected = _d[0],
-      setIsSelected = _d[1];
+  var _e = useState(false),
+      isSelected = _e[0],
+      setIsSelected = _e[1];
 
   var hasNoGraphic = graphic === 'none';
   var width = useWindowSize().width;
   var responsiveLayout = width < 420 ? 'vertical' : layout;
   return jsx(Flex, {
     onClick: function () {
-      onSelect(configurationId);
+      onSelect === null || onSelect === void 0 ? void 0 : onSelect(configurationId);
       setIsSelected(!isSelected);
     },
     position: "relative",
     boxShadow: "mediumDark",
-    backgroundColor: graphic === 'none' && type !== 'upsale' ? 'background' : type === 'upsale' ? isSelected ? {
+    backgroundColor: graphic === 'none' && type !== 'upsale' ? backgroundColor : type === 'upsale' ? isSelected ? {
       swatch: 'primaryBrand',
       shade: 'base'
-    } : 'foreground' : 'foreground',
+    } : backgroundColor : backgroundColor,
     cursor: "pointer",
     inset: {
       vertical: 'x4',
@@ -21575,14 +21586,14 @@ var ConfigurationCard = function (_a) {
     name: "information",
     size: "small",
     primaryColor: "secondaryBrand"
-  }) : type === 'upsale' && jsx(Capsule, {
+  }) : type === 'upsale' && isFeatured ? jsx(Capsule, {
     backgroundColor: !isSelected && type === 'upsale' ? {
       swatch: 'primaryBrand',
       shade: 'base'
     } : 'background',
     fontColor: isSelected && type === 'upsale' ? 'primaryBody' : 'inverseBody',
     title: "Popular"
-  })), jsx(Flex, {
+  }) : jsx(React.Fragment, null)), jsx(Flex, {
     justifyContent: "flex-start",
     alignItems: "center",
     width: "100%",
@@ -21598,7 +21609,7 @@ var ConfigurationCard = function (_a) {
     height: 75,
     stackCount: 5,
     backgroundImage: stackedCardImage
-  })) : !isSelected && type === 'upsale' ? jsx(Div, {
+  })) : graphic === 'none' ? jsx(React.Fragment, null) : !isSelected && type === 'upsale' ? jsx(Div, {
     width: "x3",
     height: "x3",
     borderRadius: "circle",
@@ -21623,10 +21634,7 @@ var ConfigurationCard = function (_a) {
     color: isSelected && type === 'upsale' ? 'inverseBody' : 'primaryBody',
     alignment: responsiveLayout ? 'center' : 'left',
     weight: "bold",
-    type: {
-      xSmall: 'largeBody',
-      medium: 'subtitle'
-    },
+    type: "largeBody",
     content: title
   }), jsx(Text, {
     color: isSelected && type === 'upsale' ? 'inverseBody' : 'primaryBody',
@@ -21640,20 +21648,20 @@ var ConfigurationCard = function (_a) {
     outset: responsiveLayout ? 'x0' : {
       left: 'auto'
     },
-    inset: "x1",
+    inset: "x_5",
     alignItems: "center"
   }, jsx(Text, {
     color: isSelected && type === 'upsale' ? 'inverseBody' : 'primaryBody',
-    weight: type === 'upsale' ? 'bold' : 'regular',
     lineHeight: 1,
+    weight: "semiBold",
     inset: "0",
-    type: type === 'upsale' ? 'subtitle' : 'footnote',
-    content: " $" + (typeof cost === 'number' ? "" + cost.toFixed(2) : cost) + " "
+    type: "body",
+    content: (typeof cost === 'number' ? "$" + cost.toFixed(2) : cost) + " "
   }), jsx(Text, {
     color: isSelected && type === 'upsale' ? 'inverseBody' : 'primaryBody',
     lineHeight: 1,
     inset: "0",
-    type: "footnote",
+    type: "body",
     content: itemPriceTitle,
     whiteSpace: "nowrap"
   }))));
@@ -21667,7 +21675,11 @@ var UpsaleOptions = function (_a) {
       showCheckoutView = _a.showCheckoutView,
       handleShouldShowCheckoutView = _a.handleShouldShowCheckoutView,
       children = _a.children,
-      activeSelectedOption = _a.activeSelectedOption;
+      activeSelectedOption = _a.activeSelectedOption,
+      extraLink = _a.extraLink,
+      _b = _a.defaultNumOptionsShown,
+      defaultNumOptionsShown = _b === void 0 ? selectableOptions.length : _b,
+      submitAction = _a.submitAction;
   var shouldShowCheckoutScreen = selectedOption && showCheckoutView;
   return jsx(Div, {
     height: "100%",
@@ -21713,17 +21725,34 @@ var UpsaleOptions = function (_a) {
     isSelected: true
   })), children) : jsx(VStack, {
     gap: "x2"
-  }, selectableOptions.map(function (option, index) {
+  }, selectableOptions.filter(function (_, index) {
+    return index < defaultNumOptionsShown;
+  }).map(function (option, index) {
     var _a;
 
     return jsx(RadioOptionCard, _extends({}, option, {
       key: index,
+      optionId: option.optionId,
       onSelect: function () {
         return handleSelectedOption(option.optionId);
       },
       isSelected: (_a = (activeSelectedOption && selectedOption) === option.optionId) !== null && _a !== void 0 ? _a : false
     }));
-  })))));
+  })), extraLink && jsx(Anchor, {
+    title: extraLink.title,
+    onClick: extraLink.onClick,
+    href: extraLink.href,
+    size: "small",
+    color: "primaryBody",
+    outset: "0 auto"
+  }), submitAction && jsx(Button, {
+    title: submitAction.title,
+    type: submitAction.type,
+    onClick: submitAction.onClick,
+    fullWidth: submitAction.isFullWidth,
+    disabled: submitAction.isDisabled,
+    size: "large"
+  }))));
 };
 
 var SOC_FRONT_Z_INDEX = 103;
@@ -21749,7 +21778,11 @@ var UpsaleDialog = function (_a) {
   successComponent = _a.successComponent,
       upsaleContentTitle = _a.upsaleContentTitle,
       _c = _a.sponsorId,
-      sponsorId = _c === void 0 ? '9070' : _c;
+      sponsorId = _c === void 0 ? '9070' : _c,
+      extraLink = _a.extraLink,
+      defaultNumOptionsShown = _a.defaultNumOptionsShown,
+      submitAction = _a.submitAction,
+      acceptSelectedAction = _a.acceptSelectedAction;
 
   var _d = React.useState(false),
       shouldShowCheckoutView = _d[0],
@@ -21771,6 +21804,15 @@ var UpsaleDialog = function (_a) {
   };
 
   var activeSelectedOption = findOption(selectedOption);
+
+  var handleOnClick = function () {
+    if (acceptSelectedAction) {
+      acceptSelectedAction.onClick();
+    } else {
+      setShouldShowCheckoutView(true);
+    }
+  };
+
   return jsx(Dialog, {
     ref: ref,
     isOpen: isOpen,
@@ -21844,7 +21886,14 @@ var UpsaleDialog = function (_a) {
     handleShouldShowCheckoutView: function (value) {
       return setShouldShowCheckoutView(value);
     },
-    activeSelectedOption: activeSelectedOption[0]
+    activeSelectedOption: activeSelectedOption[0],
+    extraLink: {
+      title: extraLink === null || extraLink === void 0 ? void 0 : extraLink.title,
+      onClick: extraLink === null || extraLink === void 0 ? void 0 : extraLink.onClick,
+      href: extraLink === null || extraLink === void 0 ? void 0 : extraLink.href
+    },
+    defaultNumOptionsShown: defaultNumOptionsShown,
+    submitAction: submitAction
   }, children), !shouldShowCheckoutView && jsx(Flex, {
     justifyContent: "center",
     position: isMobile ? 'fixed' : 'relative',
@@ -21859,11 +21908,9 @@ var UpsaleDialog = function (_a) {
   }, jsx(Button, {
     type: 'primary',
     size: "large",
-    title: 'Continue to Checkout',
+    title: acceptSelectedAction ? acceptSelectedAction.title : 'Continue to Checkout',
     disabled: !selectedOption.length,
-    onClick: function () {
-      return setShouldShowCheckoutView(true);
-    }
+    onClick: handleOnClick
   }))), !isMobile && jsx(Div, {
     width: "x3",
     order: 2
@@ -22643,7 +22690,8 @@ var AffiliateUpsalePromotionWidget = function (_a) {
       _b = _a.minWidth,
       minWidth = _b === void 0 ? '320px' : _b,
       _c = _a.width,
-      width = _c === void 0 ? '100%' : _c;
+      width = _c === void 0 ? '100%' : _c,
+      buttonOnclick = _a.buttonOnclick;
 
   var openInNewTab = function (url) {
     var newWindow = window.open(url, '_blank', 'noopener,noreferrer');
@@ -22659,7 +22707,7 @@ var AffiliateUpsalePromotionWidget = function (_a) {
       title: title,
       description: description,
       buttonTitle: buttonTitle,
-      buttonOnclick: function () {
+      buttonOnclick: buttonOnclick ? buttonOnclick : function () {
         return openInNewTab(url);
       }
     };

package/dist/src/organisms/banner/banner.d.ts

@@ -4,6 +4,7 @@ export declare type BannerProps = {
     icon?: IconType;
     message?: string;
     status: StatusType;
+    outlined?: boolean;
 };
 export declare type StatusType = 'success' | 'warning' | 'danger';
 export declare const Banner: FC<BannerProps>;

package/dist/src/organisms/configurationCard/configurationCard.d.ts

@@ -1,17 +1,20 @@
 import React, { FC } from 'react';
-declare type ConfigurationCardType = 'addon' | 'upsale' | 'info';
+import { HOCColorKeysWithSwatch } from "../../helpers/hoc-types/entityValueTypes";
+declare type ConfigurationCardType = 'addon' | 'info' | 'upsale';
 export declare type ConfigurationCardProps = {
     graphic?: 'blank' | 'addressed' | 'withStamp' | 'none' | React.ReactNode;
     title: string;
-    description: string;
+    description?: string;
     cost?: number | string;
-    isSelected: boolean;
-    onSelect: (configurationId: string) => void;
+    isSelected?: boolean;
+    onSelect?: (configurationId: string) => void;
     configurationId: string;
     itemPriceTitle?: string;
     stackedCardImage?: string;
     layout?: 'horizontal' | 'vertical';
     type?: ConfigurationCardType;
+    isFeatured?: boolean;
+    backgroundColor?: HOCColorKeysWithSwatch;
 };
 export declare const ConfigurationCard: FC<ConfigurationCardProps>;
 export {};

package/dist/src/organisms/upsaleDialog/upsaleDialog.d.ts

@@ -1,6 +1,15 @@
 import React, { FC } from 'react';
-import { UpsaleOptionsType } from './upsaleOptions';
+import { UpsaleOptionsType, SubmitOptionType } from './upsaleOptions';
 import { Responsive, LiteralUnion, HOCSpacingKeys } from "../../helpers/hoc-types/entityValueTypes";
+export declare type ExtraLinkType = {
+    title: string;
+    onClick?: () => void;
+    href?: string;
+};
+export declare type AcceptSelectedOptionType = {
+    title: string;
+    onClick: () => void;
+};
 export declare type UpsaleDialogProps = {
     title: string;
     description: string;
@@ -19,5 +28,9 @@ export declare type UpsaleDialogProps = {
     successComponent?: React.ReactNode;
     upsaleContentTitle?: string;
     sponsorId?: string;
+    extraLink?: ExtraLinkType;
+    defaultNumOptionsShown?: number;
+    submitAction?: SubmitOptionType;
+    acceptSelectedAction?: AcceptSelectedOptionType;
 } & UpsaleOptionsType;
 export declare const UpsaleDialog: FC<UpsaleDialogProps>;

package/dist/src/organisms/upsaleDialog/upsaleOptions.d.ts

@@ -1,4 +1,13 @@
 import React, { FC } from 'react';
+import { AnchorProps } from "../../exports/atoms";
+import { ButtonType } from "../../exports/molecules";
+export declare type SubmitOptionType = {
+    title: string;
+    type?: ButtonType;
+    onClick: (optionId?: string) => void;
+    isFullWidth?: boolean;
+    isDisabled?: boolean;
+};
 export declare type UpsaleOptionType = {
     title: string;
     subtitle?: string;
@@ -13,9 +22,12 @@ export declare type UpsaleOptionsType = {
     children: React.ReactNode;
     activeSelectedOption?: UpsaleOptionType;
 };
-declare type UpsaleOptionsProps = UpsaleOptionsType & {
+declare type UpsaleOptionsProps = {
     showCheckoutView: boolean;
+    extraLink?: AnchorProps;
+    defaultNumOptionsShown?: number;
     handleShouldShowCheckoutView: (value: boolean) => void;
-};
+    submitAction?: SubmitOptionType;
+} & UpsaleOptionsType;
 export declare const UpsaleOptions: FC<UpsaleOptionsProps>;
 export {};

package/dist/src/portfolios/soc/affiliateUpsalePromotionWidget/affiliateUpsalePromotionWidget.d.ts

@@ -3,5 +3,6 @@ export declare type AffiliateUpsalePromotionWidgetProps = {
     type: 'customer' | 'freeAffiliate' | 'proAffiliate';
     width?: string;
     minWidth?: string;
+    buttonOnclick?: () => void;
 };
 export declare const AffiliateUpsalePromotionWidget: FC<AffiliateUpsalePromotionWidgetProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendoutcards/quantum-design-ui",
-  "version": "1.7.43",
+  "version": "1.7.46",
   "description": "UI component library for Quantum Design System",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",