@sendoutcards/quantum-design-ui 1.7.60 → 1.7.61

package/dist/index.es.js

@@ -22044,333 +22044,6 @@ var ConfigurationCard = function (_a) {
   }))));
 };
 
-var UpsaleOptions = function (_a) {
-  var selectableOptions = _a.selectableOptions,
-      selectedOption = _a.selectedOption,
-      handleSelectedOption = _a.handleSelectedOption,
-      removeSelectedOption = _a.removeSelectedOption,
-      showCheckoutView = _a.showCheckoutView,
-      handleShouldShowCheckoutView = _a.handleShouldShowCheckoutView,
-      children = _a.children,
-      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%",
-    position: "relative",
-    width: "100%"
-  }, jsx(Div, null, shouldShowCheckoutScreen && // Back Button
-  jsx(Div, {
-    outset: {
-      top: 'x4'
-    },
-    position: "relative",
-    bottom: "25px",
-    right: "7px",
-    height: "20px",
-    cursor: "pointer",
-    onClick: function () {
-      removeSelectedOption();
-      handleShouldShowCheckoutView(false);
-    }
-  }, jsx(HStack, {
-    gap: "x_25",
-    justify: "start",
-    alignItems: "center"
-  }, jsx(Icon, {
-    name: "leftChevron",
-    size: "small",
-    primaryColor: "primaryBodyText"
-  }), jsx(Text, {
-    type: 'caption',
-    weight: "semiBold",
-    color: "primaryBody",
-    content: "Back",
-    alignment: "center",
-    style: {
-      position: 'relative',
-      bottom: 4
-    }
-  })), jsx(Spacer, {
-    space: "x2"
-  })), jsx(VStack, {
-    gap: "x2"
-  }, shouldShowCheckoutScreen && activeSelectedOption ? jsx(Div, null, jsx(RadioOptionCard, _extends({}, activeSelectedOption, {
-    isSelected: true
-  })), children) : jsx(VStack, {
-    gap: "x2"
-  }, 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(Flex, {
-    width: "100%",
-    justifyContent: "center",
-    alignItems: "center"
-  }, 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;
-var UpsaleDialog = function (_a) {
-  var _b;
-
-  var title = _a.title,
-      description = _a.description,
-      checkoutTitle = _a.checkoutTitle,
-      checkoutDescription = _a.checkoutDescription,
-      selectableOptions = _a.selectableOptions,
-      isOpen = _a.isOpen,
-      setIsDialogOpen = _a.setIsDialogOpen,
-      upsaleContent = _a.upsaleContent,
-      children = _a.children,
-      selectedOption = _a.selectedOption,
-      handleSelectedOption = _a.handleSelectedOption,
-      removeSelectedOption = _a.removeSelectedOption,
-      insetOverride = _a.insetOverride,
-      maxWidth = _a.maxWidth,
-      maxHeight = _a.maxHeight,
-      _c = _a.zIndex,
-      zIndex = _c === void 0 ? SOC_FRONT_Z_INDEX : _c,
-      //Soc-frontend
-  successComponent = _a.successComponent,
-      upsaleContentTitle = _a.upsaleContentTitle,
-      _d = _a.sponsorId,
-      sponsorId = _d === void 0 ? '9070' : _d,
-      extraLink = _a.extraLink,
-      defaultNumOptionsShown = _a.defaultNumOptionsShown,
-      submitAction = _a.submitAction,
-      acceptSelectedAction = _a.acceptSelectedAction;
-
-  var _e = React.useState(false),
-      shouldShowCheckoutView = _e[0],
-      setShouldShowCheckoutView = _e[1];
-
-  var _f = useResizeObserver(),
-      ref = _f.ref,
-      width = _f.width,
-      height = _f.height;
-
-  var dialogFooterHeight = '170px';
-  var device = useWindowSize().width;
-  var isMobile = device <= 910;
-
-  var findOption = function (selectedOption) {
-    return selectableOptions.filter(function (option) {
-      return option.optionId === selectedOption;
-    });
-  };
-
-  var activeSelectedOption = findOption(selectedOption);
-
-  var handleOnClick = function () {
-    setShouldShowCheckoutView(true);
-    acceptSelectedAction === null || acceptSelectedAction === void 0 ? void 0 : acceptSelectedAction.onClick();
-  };
-
-  return jsx(Dialog, {
-    ref: ref,
-    isOpen: isOpen,
-    onClose: function () {
-      return setIsDialogOpen(!isOpen);
-    },
-    zIndex: zIndex,
-    insetOverride: insetOverride,
-    maxWidth: maxWidth,
-    maxHeight: maxHeight,
-    height: isMobile ? 'unset' : '80%',
-    shouldScroll: true,
-    width: "100%"
-  }, successComponent ? jsx(Flex, {
-    width: width + "px",
-    height: height + "px",
-    justifyContent: "center",
-    alignItems: 'center'
-  }, successComponent) : jsx(React.Fragment, null, jsx(Div, {
-    width: "100%",
-    inset: {
-      bottom: 'x4',
-      top: 'x8'
-    }
-  }, jsx(Text, {
-    type: "subtitle",
-    weight: "bold",
-    content: shouldShowCheckoutView ? checkoutTitle : title,
-    alignment: "center"
-  }), jsx(Text, {
-    type: "body",
-    content: shouldShowCheckoutView ? checkoutDescription : description,
-    alignment: "center"
-  })), jsx(Scrollable, null, jsx(Flex, {
-    justifyContent: 'center',
-    alignItems: 'flex-start',
-    width: '100%',
-    inset: device <= 1367 && device > 580 ? {
-      top: 'x4',
-      horizontal: 'x8',
-      bottom: dialogFooterHeight
-    } : device <= 580 ? {
-      top: 'x4',
-      horizontal: 'x4',
-      bottom: dialogFooterHeight
-    } : {
-      top: 'x4',
-      horizontal: '10rem',
-      bottom: dialogFooterHeight
-    },
-    flexWrap: "wrap",
-    overflowY: "hidden",
-    flexDirection: isMobile ? 'column' : 'row'
-  }, jsx(Flex, {
-    flexWrap: "wrap",
-    inset: {
-      top: 'x3',
-      horizontal: 'x3'
-    },
-    overflowY: "auto",
-    width: isMobile ? '100%' : 'calc(50% - 12px)',
-    order: 3
-  }, jsx(UpsaleOptions, {
-    selectableOptions: selectableOptions,
-    selectedOption: selectedOption,
-    handleSelectedOption: function (optionId) {
-      return handleSelectedOption(optionId);
-    },
-    removeSelectedOption: removeSelectedOption,
-    showCheckoutView: shouldShowCheckoutView,
-    handleShouldShowCheckoutView: function (value) {
-      return setShouldShowCheckoutView(value);
-    },
-    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',
-    bottom: isMobile ? '0' : 'unset',
-    height: "100px",
-    alignItems: "center",
-    width: "100%",
-    backgroundColor: isMobile ? 'foreground' : undefined,
-    boxShadow: isMobile ? 'mediumDark' : undefined,
-    left: "0",
-    zIndex: isMobile ? 10 : undefined
-  }, jsx(Button, {
-    type: 'primary',
-    size: "large",
-    title: (_b = acceptSelectedAction === null || acceptSelectedAction === void 0 ? void 0 : acceptSelectedAction.title) !== null && _b !== void 0 ? _b : 'Continue to Checkout',
-    disabled: !selectedOption.length,
-    onClick: handleOnClick
-  }))), !isMobile && jsx(Div, {
-    width: "x3",
-    order: 2
-  }), jsx(Flex, {
-    overflowY: "auto",
-    width: isMobile ? '100%' : 'calc(50% - 12px)',
-    order: 1
-  }, jsx(Div, {
-    width: "100%",
-    inset: {
-      top: '1.4rem'
-    }
-  }, jsx(Accordion, {
-    defaultActiveKeys: [1],
-    arrowLocation: "right",
-    background: "background",
-    inset: "x0",
-    isExclusive: true,
-    sections: [{
-      body: jsx(React.Fragment, null, upsaleContent),
-      heading: jsx(Div, {
-        inset: isMobile ? {
-          left: '4.1rem'
-        } : {
-          left: 'x4'
-        },
-        width: "100%",
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center"
-      }, jsx(Text, {
-        weight: "bold",
-        type: "caption",
-        content: upsaleContentTitle
-      }), jsx(Div, {
-        width: "34px",
-        height: "34px",
-        borderRadius: "small",
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        outset: {
-          right: 'x2'
-        }
-      })),
-      key: 1
-    }]
-  }))))), jsx(Div, {
-    backgroundColor: "foreground",
-    width: device <= 1367 ? '100%' : 'calc(100% - 10rem)',
-    position: isMobile ? 'relative' : 'absolute',
-    bottom: isMobile ? dialogFooterHeight : 'x0',
-    inset: isMobile ? 'x1' : {
-      bottom: 'x4'
-    },
-    left: "50%",
-    transform: "translateX(-50%)",
-    zIndex: !isMobile ? SOC_FRONT_Z_INDEX : undefined
-  }, jsx(Separator, {
-    orientation: "horizontal",
-    caption: "Want to try it first?",
-    shouldCaptionWrap: false
-  }), jsx(Flex, {
-    width: "100%",
-    justifyContent: "center",
-    alignItems: "center",
-    inset: {
-      top: 'x2_5'
-    }
-  }, jsx(Button, {
-    type: "secondary",
-    outlined: true,
-    hover: true,
-    size: "medium",
-    title: "Send a Free Postcard",
-    onClick: function () {
-      return window.open("https://www.sendoutcards.com/" + sponsorId + "/send/");
-    }
-  })))));
-};
-
 var ComparisonIncludesList = function (_a) {
   var items = _a.items,
       isMinified = _a.isMinified;
@@ -23680,55 +23353,383 @@ var comparisonItems97 = [{
   isIncluded: true
 }];
 
-var SubscriptionUpsaleDialog = function (_a) {
+var SubscriptionUpsaleDialog = function (_a) {
+  var title = _a.title,
+      description = _a.description,
+      checkoutTitle = _a.checkoutTitle,
+      checkoutDescription = _a.checkoutDescription,
+      selectableOptions = _a.selectableOptions,
+      upsaleContentTitle = _a.upsaleContentTitle,
+      isOpen = _a.isOpen,
+      setIsDialogOpen = _a.setIsDialogOpen,
+      _b = _a.optionFormLocation,
+      optionFormLocation = _b === void 0 ? 'right' : _b,
+      children = _a.children,
+      selectedOption = _a.selectedOption,
+      removeSelectedOption = _a.removeSelectedOption,
+      successComponent = _a.successComponent,
+      insetOverride = _a.insetOverride,
+      handleSelectedOption = _a.handleSelectedOption,
+      sponsorId = _a.sponsorId;
+      _a.upsaleContent;
+      var rest = __rest(_a, ["title", "description", "checkoutTitle", "checkoutDescription", "selectableOptions", "upsaleContentTitle", "isOpen", "setIsDialogOpen", "optionFormLocation", "children", "selectedOption", "removeSelectedOption", "successComponent", "insetOverride", "handleSelectedOption", "sponsorId", "upsaleContent"]);
+
+  var device = useWindowSize().width;
+  return jsx("div", null, jsx(UpsaleDialog, _extends({
+    sponsorId: sponsorId,
+    title: title,
+    description: description,
+    checkoutTitle: checkoutTitle,
+    checkoutDescription: checkoutDescription,
+    selectableOptions: selectableOptions,
+    selectedOption: selectedOption,
+    handleSelectedOption: function (optionId) {
+      return handleSelectedOption(optionId);
+    },
+    removeSelectedOption: removeSelectedOption,
+    upsaleContentTitle: upsaleContentTitle,
+    upsaleContent: jsx(ComparisonIncludesList, {
+      isMinified: device <= 1017,
+      items: selectedOption === '324132' //this is the item code for the 37 subscription
+      ? comparisonItems37 : comparisonItems97
+    }),
+    optionFormLocation: optionFormLocation,
+    setIsDialogOpen: function () {
+      return setIsDialogOpen(!isOpen);
+    },
+    isOpen: isOpen,
+    successComponent: successComponent,
+    insetOverride: insetOverride,
+    maxWidth: '1500px'
+  }, rest), children));
+};
+
+var UpsaleOptions = function (_a) {
+  var selectableOptions = _a.selectableOptions,
+      selectedOption = _a.selectedOption,
+      handleSelectedOption = _a.handleSelectedOption,
+      removeSelectedOption = _a.removeSelectedOption,
+      showCheckoutView = _a.showCheckoutView,
+      handleShouldShowCheckoutView = _a.handleShouldShowCheckoutView,
+      children = _a.children,
+      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%",
+    position: "relative",
+    width: "100%"
+  }, jsx(Div, null, shouldShowCheckoutScreen && // Back Button
+  jsx(Div, {
+    outset: {
+      top: 'x4'
+    },
+    position: "relative",
+    bottom: "25px",
+    right: "7px",
+    height: "20px",
+    cursor: "pointer",
+    onClick: function () {
+      removeSelectedOption();
+      handleShouldShowCheckoutView(false);
+    }
+  }, jsx(HStack, {
+    gap: "x_25",
+    justify: "start",
+    alignItems: "center"
+  }, jsx(Icon, {
+    name: "leftChevron",
+    size: "small",
+    primaryColor: "primaryBodyText"
+  }), jsx(Text, {
+    type: 'caption',
+    weight: "semiBold",
+    color: "primaryBody",
+    content: "Back",
+    alignment: "center",
+    style: {
+      position: 'relative',
+      bottom: 4
+    }
+  })), jsx(Spacer, {
+    space: "x2"
+  })), jsx(VStack, {
+    gap: "x2"
+  }, shouldShowCheckoutScreen && activeSelectedOption ? jsx(Div, null, jsx(RadioOptionCard, _extends({}, activeSelectedOption, {
+    isSelected: true
+  })), children) : jsx(VStack, {
+    gap: "x2"
+  }, 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(Flex, {
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "center"
+  }, 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;
+var UpsaleDialog = function (_a) {
+  var _b;
+
   var title = _a.title,
       description = _a.description,
       checkoutTitle = _a.checkoutTitle,
       checkoutDescription = _a.checkoutDescription,
       selectableOptions = _a.selectableOptions,
-      upsaleContentTitle = _a.upsaleContentTitle,
       isOpen = _a.isOpen,
       setIsDialogOpen = _a.setIsDialogOpen,
-      _b = _a.optionFormLocation,
-      optionFormLocation = _b === void 0 ? 'right' : _b,
+      upsaleContent = _a.upsaleContent,
       children = _a.children,
       selectedOption = _a.selectedOption,
+      handleSelectedOption = _a.handleSelectedOption,
       removeSelectedOption = _a.removeSelectedOption,
-      successComponent = _a.successComponent,
       insetOverride = _a.insetOverride,
-      handleSelectedOption = _a.handleSelectedOption,
-      sponsorId = _a.sponsorId;
-      _a.upsaleContent;
-      var rest = __rest(_a, ["title", "description", "checkoutTitle", "checkoutDescription", "selectableOptions", "upsaleContentTitle", "isOpen", "setIsDialogOpen", "optionFormLocation", "children", "selectedOption", "removeSelectedOption", "successComponent", "insetOverride", "handleSelectedOption", "sponsorId", "upsaleContent"]);
+      maxWidth = _a.maxWidth,
+      maxHeight = _a.maxHeight,
+      _c = _a.zIndex,
+      zIndex = _c === void 0 ? SOC_FRONT_Z_INDEX : _c,
+      //Soc-frontend
+  successComponent = _a.successComponent,
+      upsaleContentTitle = _a.upsaleContentTitle,
+      _d = _a.sponsorId,
+      sponsorId = _d === void 0 ? '9070' : _d,
+      extraLink = _a.extraLink,
+      defaultNumOptionsShown = _a.defaultNumOptionsShown,
+      submitAction = _a.submitAction,
+      acceptSelectedAction = _a.acceptSelectedAction,
+      shouldHideSendFreeCard = _a.shouldHideSendFreeCard;
+
+  var _e = React.useState(false),
+      shouldShowCheckoutView = _e[0],
+      setShouldShowCheckoutView = _e[1];
 
+  var _f = useResizeObserver(),
+      ref = _f.ref,
+      width = _f.width,
+      height = _f.height;
+
+  var dialogFooterHeight = shouldHideSendFreeCard ? '120px' : '170px';
   var device = useWindowSize().width;
-  return jsx("div", null, jsx(UpsaleDialog, _extends({
-    sponsorId: sponsorId,
-    title: title,
-    description: description,
-    checkoutTitle: checkoutTitle,
-    checkoutDescription: checkoutDescription,
+  var isMobile = device <= 910;
+
+  var findOption = function (selectedOption) {
+    return selectableOptions.filter(function (option) {
+      return option.optionId === selectedOption;
+    });
+  };
+
+  var activeSelectedOption = findOption(selectedOption);
+
+  var handleOnClick = function () {
+    setShouldShowCheckoutView(true);
+    acceptSelectedAction === null || acceptSelectedAction === void 0 ? void 0 : acceptSelectedAction.onClick();
+  };
+
+  return jsx(Dialog, {
+    ref: ref,
+    isOpen: isOpen,
+    onClose: function () {
+      return setIsDialogOpen(!isOpen);
+    },
+    zIndex: zIndex,
+    insetOverride: insetOverride,
+    maxWidth: maxWidth,
+    maxHeight: maxHeight,
+    height: isMobile ? 'unset' : '80%',
+    shouldScroll: true,
+    width: "100%"
+  }, successComponent ? jsx(Flex, {
+    width: width + "px",
+    height: height + "px",
+    justifyContent: "center",
+    alignItems: 'center'
+  }, successComponent) : jsx(React.Fragment, null, jsx(Div, {
+    width: "100%",
+    inset: {
+      bottom: 'x4',
+      top: 'x8'
+    }
+  }, jsx(Text, {
+    type: "subtitle",
+    weight: "bold",
+    content: shouldShowCheckoutView ? checkoutTitle : title,
+    alignment: "center"
+  }), jsx(Text, {
+    type: "body",
+    content: shouldShowCheckoutView ? checkoutDescription : description,
+    alignment: "center"
+  })), jsx(Scrollable, null, jsx(Flex, {
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    width: '100%',
+    inset: device <= 1367 && device > 580 ? {
+      top: 'x4',
+      horizontal: 'x8',
+      bottom: dialogFooterHeight
+    } : device <= 580 ? {
+      top: 'x4',
+      horizontal: 'x4',
+      bottom: dialogFooterHeight
+    } : {
+      top: 'x4',
+      horizontal: '10rem',
+      bottom: dialogFooterHeight
+    },
+    flexWrap: "wrap",
+    overflowY: "hidden",
+    flexDirection: isMobile ? 'column' : 'row'
+  }, jsx(Flex, {
+    flexWrap: "wrap",
+    inset: {
+      top: 'x3',
+      horizontal: 'x3'
+    },
+    overflowY: "auto",
+    width: isMobile ? '100%' : 'calc(50% - 12px)',
+    order: 3
+  }, jsx(UpsaleOptions, {
     selectableOptions: selectableOptions,
     selectedOption: selectedOption,
     handleSelectedOption: function (optionId) {
       return handleSelectedOption(optionId);
     },
     removeSelectedOption: removeSelectedOption,
-    upsaleContentTitle: upsaleContentTitle,
-    upsaleContent: jsx(ComparisonIncludesList, {
-      isMinified: device <= 1017,
-      items: selectedOption === '324132' //this is the item code for the 37 subscription
-      ? comparisonItems37 : comparisonItems97
-    }),
-    optionFormLocation: optionFormLocation,
-    setIsDialogOpen: function () {
-      return setIsDialogOpen(!isOpen);
+    showCheckoutView: shouldShowCheckoutView,
+    handleShouldShowCheckoutView: function (value) {
+      return setShouldShowCheckoutView(value);
     },
-    isOpen: isOpen,
-    successComponent: successComponent,
-    insetOverride: insetOverride,
-    maxWidth: '1500px'
-  }, rest), children));
+    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',
+    bottom: isMobile ? '0' : 'unset',
+    height: "100px",
+    alignItems: "center",
+    width: "100%",
+    backgroundColor: isMobile ? 'foreground' : undefined,
+    boxShadow: isMobile ? 'mediumDark' : undefined,
+    left: "0",
+    zIndex: isMobile ? 10 : undefined
+  }, jsx(Button, {
+    type: 'primary',
+    size: "large",
+    title: (_b = acceptSelectedAction === null || acceptSelectedAction === void 0 ? void 0 : acceptSelectedAction.title) !== null && _b !== void 0 ? _b : 'Continue to Checkout',
+    disabled: !selectedOption.length,
+    onClick: handleOnClick
+  }))), !isMobile && jsx(Div, {
+    width: "x3",
+    order: 2
+  }), jsx(Flex, {
+    overflowY: "auto",
+    width: isMobile ? '100%' : 'calc(50% - 12px)',
+    order: 1
+  }, jsx(Div, {
+    width: "100%",
+    inset: {
+      top: '1.4rem'
+    }
+  }, jsx(Accordion, {
+    defaultActiveKeys: [1],
+    arrowLocation: "right",
+    background: "background",
+    inset: "x0",
+    isExclusive: true,
+    sections: [{
+      body: jsx(React.Fragment, null, upsaleContent),
+      heading: jsx(Div, {
+        inset: isMobile ? {
+          left: '4.1rem'
+        } : {
+          left: 'x4'
+        },
+        width: "100%",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center"
+      }, jsx(Text, {
+        weight: "bold",
+        type: "caption",
+        content: upsaleContentTitle
+      }), jsx(Div, {
+        width: "34px",
+        height: "34px",
+        borderRadius: "small",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        outset: {
+          right: 'x2'
+        }
+      })),
+      key: 1
+    }]
+  }))))), !shouldHideSendFreeCard && jsx(Div, {
+    backgroundColor: "foreground",
+    width: device <= 1367 ? '100%' : 'calc(100% - 10rem)',
+    position: isMobile ? 'relative' : 'absolute',
+    bottom: isMobile ? dialogFooterHeight : 'x0',
+    inset: isMobile ? 'x1' : {
+      bottom: 'x4'
+    },
+    left: "50%",
+    transform: "translateX(-50%)",
+    zIndex: !isMobile ? SOC_FRONT_Z_INDEX : undefined
+  }, jsx(Separator, {
+    orientation: "horizontal",
+    caption: "Want to try it first?",
+    shouldCaptionWrap: false
+  }), jsx(Flex, {
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    inset: {
+      top: 'x2_5'
+    }
+  }, jsx(Button, {
+    type: "secondary",
+    outlined: true,
+    hover: true,
+    size: "medium",
+    title: "Send a Free Postcard",
+    onClick: function () {
+      return window.open("https://www.sendoutcards.com/" + sponsorId + "/send/");
+    }
+  })))));
 };
 
 var useColorSwatch = function () {

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

@@ -42,5 +42,4 @@ export * from "../organisms/releaseNoteDialog/releaseNoteDialog";
 export * from "../organisms/imageUploader/imageUploader";
 export * from "../organisms/imageUploadWidget/imageUploadWidget";
 export * from "../organisms/configurationCard/configurationCard";
-export * from "../organisms/upsaleDialog/upsaleDialog";
 export * from "../organisms/comparisonIncludesList/comparisonIncludesList";

package/dist/src/exports/socPortfolio.d.ts

@@ -7,3 +7,4 @@ export * from "../portfolios/soc/components/bulkSend/bulkSend";
 export * from "../portfolios/soc/components/bulkSend/cardQuantitySlider";
 export * from "../portfolios/soc/components/paperTypeModal/paperTypeModal";
 export * from "../portfolios/soc/subscriptionUpsaleDialog/subscriptionUpsaleDialog";
+export * from "../portfolios/soc/upsaleDialog/upsaleDialog";

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

@@ -1,3 +1,3 @@
 import { FC } from 'react';
-import { UpsaleDialogProps } from "../../../exports/organisms";
+import { UpsaleDialogProps } from "../../../exports/socPortfolio";
 export declare const SubscriptionUpsaleDialog: FC<UpsaleDialogProps>;

package/dist/src/{organisms → portfolios/soc}/upsaleDialog/upsaleDialog.d.ts

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { UpsaleOptionsType, SubmitOptionType } from './upsaleOptions';
-import { Responsive, LiteralUnion, HOCSpacingKeys } from "../../helpers/hoc-types/entityValueTypes";
+import { Responsive, LiteralUnion, HOCSpacingKeys } from "../../../helpers/hoc-types/entityValueTypes";
 export declare type ExtraLinkType = {
     title: string;
     onClick?: () => void;
@@ -32,5 +32,6 @@ export declare type UpsaleDialogProps = {
     defaultNumOptionsShown?: number;
     submitAction?: SubmitOptionType;
     acceptSelectedAction?: AcceptSelectedOptionType;
+    shouldHideSendFreeCard?: boolean;
 } & UpsaleOptionsType;
 export declare const UpsaleDialog: FC<UpsaleDialogProps>;

package/dist/src/{organisms → portfolios/soc}/upsaleDialog/upsaleOptions.d.ts

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
-import { AnchorProps } from "../../exports/atoms";
-import { ButtonType } from "../../exports/molecules";
+import { AnchorProps } from "../../../exports/atoms";
+import { ButtonType } from "../../../exports/molecules";
 export declare type SubmitOptionType = {
     title: string;
     type?: ButtonType;

package/package.json

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