@thecb/components 4.0.0 → 4.0.3-beta.1

package/dist/index.cjs.js

@@ -14266,11 +14266,11 @@ var Alert = function Alert(_ref) {
   }, /*#__PURE__*/React__default.createElement(Icon, null)))), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React__default.createElement(Sidebar, {
-    onRight: true,
+    sidebarOnRight: true,
     width: "24px",
     childGap: "0rem"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "".concat(padding, " 1rem")
+    padding: maxContentWidth ? "".concat(padding, " 1rem") : "1rem"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "flex-start",
     align: "center"
@@ -18548,7 +18548,8 @@ var FormattedInputField = styled__default(function (_ref7) {
 var FormInput = function FormInput(_ref13) {
   var _ref13$type = _ref13.type,
       type = _ref13$type === void 0 ? "text" : _ref13$type,
-      labelTextWhenNoError = _ref13.labelTextWhenNoError,
+      _ref13$labelTextWhenN = _ref13.labelTextWhenNoError,
+      labelTextWhenNoError = _ref13$labelTextWhenN === void 0 ? "" : _ref13$labelTextWhenN,
       errorMessages = _ref13.errorMessages,
       _ref13$isNum = _ref13.isNum,
       isNum = _ref13$isNum === void 0 ? false : _ref13$isNum,
@@ -36077,20 +36078,23 @@ var fallbackValues$t = {
 var AutopayModal = function AutopayModal(_ref) {
   var autoPayActive = _ref.autoPayActive,
       autoPaySchedule = _ref.autoPaySchedule,
+      paymentPlanSchedule = _ref.paymentPlanSchedule,
       toggleModal = _ref.toggleModal,
       modalOpen = _ref.modalOpen,
       deactivatePaymentSchedule = _ref.deactivatePaymentSchedule,
       navigateToSettings = _ref.navigateToSettings,
       buttonLinkType = _ref.buttonLinkType,
       isMobile = _ref.isMobile,
-      themeValues = _ref.themeValues;
+      themeValues = _ref.themeValues,
+      isPaymentPlan = _ref.isPaymentPlan;
+  var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   var modalExtraProps = {
-    modalHeaderText: autoPayActive ? "Deactivate Autopay" : "Set Up Autopay",
-    modalBodyText: autoPayActive ? "Are you sure you want to deactivate autopay? You will need to manually make your next payment." : "To set up autopay you must save a payment method and address in your profile. Do you want to save these now?",
-    continueButtonText: autoPayActive ? "Disable Autopay" : "Add to Profile",
+    modalHeaderText: autoPayActive ? "Deactivate ".concat(planType) : "Set Up ".concat(planType),
+    modalBodyText: autoPayActive ? "Are you sure you want to deactivate ".concat(isPaymentPlan ? "your payment plan" : "autopay", "? You will need to manually make your next payment.") : "To set up ".concat(isPaymentPlan ? "a payment plan" : "autopay", " you must save a payment method and address in your profile. Do you want to save these now?"),
+    continueButtonText: autoPayActive ? "Disable ".concat(planType) : "Add to Profile",
     useDangerButton: autoPayActive,
     continueAction: autoPayActive ? function () {
-      deactivatePaymentSchedule(autoPaySchedule);
+      deactivatePaymentSchedule(isPaymentPlan ? paymentPlanSchedule : autoPaySchedule, isPaymentPlan);
       toggleModal(false);
     } : navigateToSettings
   };
@@ -36100,7 +36104,7 @@ var AutopayModal = function AutopayModal(_ref) {
   return /*#__PURE__*/React__default.createElement(Modal$1, _extends({
     ModalLink: function ModalLink() {
       return buttonLinkType ? /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-        text: autoPayActive ? "Manage Autopay" : "Set Up Autopay",
+        text: autoPayActive ? "Manage ".concat(planType) : "Set Up ".concat(planType),
         variant: "tertiary",
         action: function action() {
           toggleModal(true);
@@ -36119,7 +36123,7 @@ var AutopayModal = function AutopayModal(_ref) {
         justify: isMobile ? "flex-start" : "flex-end",
         align: "center"
       }, /*#__PURE__*/React__default.createElement(AutopayOnIcon$1, null), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-        text: "Autopay On",
+        text: "".concat(planType, " On"),
         variant: "smallGhost",
         dataQa: "Autopay On",
         textExtraStyles: "font-size: 0.875rem; ",
@@ -36144,7 +36148,9 @@ var AmountModule = function AmountModule(_ref) {
       isMobile = _ref.isMobile,
       deactivatePaymentSchedule = _ref.deactivatePaymentSchedule,
       navigateToSettings = _ref.navigateToSettings,
-      autoPaySchedule = _ref.autoPaySchedule;
+      autoPaySchedule = _ref.autoPaySchedule,
+      paymentPlanSchedule = _ref.paymentPlanSchedule,
+      isPaymentPlan = _ref.isPaymentPlan;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -36169,7 +36175,9 @@ var AmountModule = function AmountModule(_ref) {
     modalOpen: modalOpen,
     navigateToSettings: navigateToSettings,
     deactivatePaymentSchedule: deactivatePaymentSchedule,
-    isMobile: isMobile
+    isMobile: isMobile,
+    paymentPlanSchedule: paymentPlanSchedule,
+    isPaymentPlan: isPaymentPlan
   })));
 };
 
@@ -36183,7 +36191,10 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
       handleAutopayAction = _ref.handleAutopayAction,
       deactivatePaymentSchedule = _ref.deactivatePaymentSchedule,
       navigateToSettings = _ref.navigateToSettings,
-      autoPaySchedule = _ref.autoPaySchedule;
+      autoPaySchedule = _ref.autoPaySchedule,
+      paymentPlanSchedule = _ref.paymentPlanSchedule,
+      isPaymentPlan = _ref.isPaymentPlan;
+  var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -36235,7 +36246,9 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     isMobile: isMobile,
     deactivatePaymentSchedule: deactivatePaymentSchedule,
     navigateToSettings: navigateToSettings,
-    autoPaySchedule: autoPaySchedule
+    autoPaySchedule: autoPaySchedule,
+    paymentPlanSchedule: paymentPlanSchedule,
+    isPaymentPlan: isPaymentPlan
   }))), /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "16px" : "0"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
@@ -36256,7 +36269,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     extraStyles: isMobile && "flex-grow: 1;"
   }, autoPayAvailable && !autoPayEnabled ? /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     variant: "tertiary",
-    text: "Set Up Autopay",
+    text: "Set Up ".concat(planType),
     action: function action() {
       setDetailedObligation(obligations, config);
       handleAutopayAction();
@@ -36271,7 +36284,9 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     navigateToSettings: navigateToSettings,
     deactivatePaymentSchedule: deactivatePaymentSchedule,
     buttonLinkType: true,
-    isMobile: isMobile
+    isMobile: isMobile,
+    paymentPlanSchedule: paymentPlanSchedule,
+    isPaymentPlan: isPaymentPlan
   })), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "0 0 0 8px" : "8px",
     extraStyles: isMobile && "flex-grow: 1;"
@@ -36308,8 +36323,10 @@ var Obligation = function Obligation(_ref) {
       handleAutopayAction = _ref.handleAutopayAction,
       deactivatePaymentSchedule = _ref.deactivatePaymentSchedule,
       autoPaySchedule = _ref.autoPaySchedule,
+      paymentPlanSchedule = _ref.paymentPlanSchedule,
       navigateToSettings = _ref.navigateToSettings,
-      isMobile = _ref.isMobile;
+      isMobile = _ref.isMobile,
+      isPaymentPlan = _ref.isPaymentPlan;
   var obligation = obligations[0];
   var customAttributes = obligation.customAttributes;
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -36353,7 +36370,9 @@ var Obligation = function Obligation(_ref) {
     isMobile: isMobile,
     deactivatePaymentSchedule: deactivatePaymentSchedule,
     navigateToSettings: navigateToSettings,
-    autoPaySchedule: autoPaySchedule
+    autoPaySchedule: autoPaySchedule,
+    paymentPlanSchedule: paymentPlanSchedule,
+    isPaymentPlan: isPaymentPlan
   }))), !isMobile && /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -36361,10 +36380,12 @@ var Obligation = function Obligation(_ref) {
     handleAutopayAction: handleAutopayAction,
     deactivatePaymentSchedule: deactivatePaymentSchedule,
     autoPaySchedule: autoPaySchedule,
+    paymentPlanSchedule: paymentPlanSchedule,
     navigateToSettings: navigateToSettings,
     config: config,
     actions: actions,
-    isMobile: isMobile
+    isMobile: isMobile,
+    isPaymentPlan: isPaymentPlan
   }))), isMobile && /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -36372,10 +36393,12 @@ var Obligation = function Obligation(_ref) {
     handleAutopayAction: handleAutopayAction,
     deactivatePaymentSchedule: deactivatePaymentSchedule,
     autoPaySchedule: autoPaySchedule,
+    paymentPlanSchedule: paymentPlanSchedule,
     navigateToSettings: navigateToSettings,
     config: config,
     actions: actions,
-    isMobile: isMobile
+    isMobile: isMobile,
+    isPaymentPlan: isPaymentPlan
   }));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.0.0",
+  "version": "4.0.3-beta.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/alert/Alert.js

@@ -31,8 +31,8 @@ const Alert = ({
         </Cover>
       </Box>
       <Box padding="0">
-        <Sidebar onRight width="24px" childGap="0rem">
-          <Box padding={`${padding} 1rem`}>
+        <Sidebar sidebarOnRight width="24px" childGap="0rem">
+          <Box padding={maxContentWidth ? `${padding} 1rem` : "1rem"}>
             <Cluster justify="flex-start" align="center">
               {textOverride ? (
                 textOverride

package/src/components/atoms/form-layouts/FormInput.js

@@ -82,7 +82,7 @@ const FormattedInputField = styled(({ showErrors, themeValues, ...props }) => (
 
 const FormInput = ({
   type = "text",
-  labelTextWhenNoError,
+  labelTextWhenNoError = "",
   errorMessages,
   isNum = false,
   helperModal = false,

package/src/components/molecules/obligation/Obligation.js

@@ -17,8 +17,10 @@ const Obligation = ({
   handleAutopayAction,
   deactivatePaymentSchedule,
   autoPaySchedule,
+  paymentPlanSchedule,
   navigateToSettings,
-  isMobile
+  isMobile,
+  isPaymentPlan
 }) => {
   const obligation = obligations[0];
   const { customAttributes } = obligation;
@@ -67,6 +69,8 @@ const Obligation = ({
                   deactivatePaymentSchedule={deactivatePaymentSchedule}
                   navigateToSettings={navigateToSettings}
                   autoPaySchedule={autoPaySchedule}
+                  paymentPlanSchedule={paymentPlanSchedule}
+                  isPaymentPlan={isPaymentPlan}
                 />
               )}
             </Cluster>
@@ -79,10 +83,12 @@ const Obligation = ({
               handleAutopayAction={handleAutopayAction}
               deactivatePaymentSchedule={deactivatePaymentSchedule}
               autoPaySchedule={autoPaySchedule}
+              paymentPlanSchedule={paymentPlanSchedule}
               navigateToSettings={navigateToSettings}
               config={config}
               actions={actions}
               isMobile={isMobile}
+              isPaymentPlan={isPaymentPlan}
             />
           )}
         </Stack>
@@ -95,10 +101,12 @@ const Obligation = ({
           handleAutopayAction={handleAutopayAction}
           deactivatePaymentSchedule={deactivatePaymentSchedule}
           autoPaySchedule={autoPaySchedule}
+          paymentPlanSchedule={paymentPlanSchedule}
           navigateToSettings={navigateToSettings}
           config={config}
           actions={actions}
           isMobile={isMobile}
+          isPaymentPlan={isPaymentPlan}
         />
       )}
     </Box>

package/src/components/molecules/obligation/modules/AmountModule.js

@@ -12,7 +12,9 @@ const AmountModule = ({
   isMobile,
   deactivatePaymentSchedule,
   navigateToSettings,
-  autoPaySchedule
+  autoPaySchedule,
+  paymentPlanSchedule,
+  isPaymentPlan
 }) => {
   const [modalOpen, toggleModal] = useState(false);
   return (
@@ -38,6 +40,8 @@ const AmountModule = ({
             navigateToSettings={navigateToSettings}
             deactivatePaymentSchedule={deactivatePaymentSchedule}
             isMobile={isMobile}
+            paymentPlanSchedule={paymentPlanSchedule}
+            isPaymentPlan={isPaymentPlan}
           />
         )}
       </Stack>

package/src/components/molecules/obligation/modules/AutopayModalModule.js

@@ -9,24 +9,38 @@ import { themeComponent } from "../../../../util/themeUtils";
 const AutopayModal = ({
   autoPayActive,
   autoPaySchedule,
+  paymentPlanSchedule,
   toggleModal,
   modalOpen,
   deactivatePaymentSchedule,
   navigateToSettings,
   buttonLinkType,
   isMobile,
-  themeValues
+  themeValues,
+  isPaymentPlan
 }) => {
+  const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const modalExtraProps = {
-    modalHeaderText: autoPayActive ? "Deactivate Autopay" : "Set Up Autopay",
+    modalHeaderText: autoPayActive
+      ? `Deactivate ${planType}`
+      : `Set Up ${planType}`,
     modalBodyText: autoPayActive
-      ? "Are you sure you want to deactivate autopay? You will need to manually make your next payment."
-      : "To set up autopay you must save a payment method and address in your profile. Do you want to save these now?",
-    continueButtonText: autoPayActive ? "Disable Autopay" : "Add to Profile",
+      ? `Are you sure you want to deactivate ${
+          isPaymentPlan ? "your payment plan" : "autopay"
+        }? You will need to manually make your next payment.`
+      : `To set up ${
+          isPaymentPlan ? "a payment plan" : "autopay"
+        } you must save a payment method and address in your profile. Do you want to save these now?`,
+    continueButtonText: autoPayActive
+      ? `Disable ${planType}`
+      : "Add to Profile",
     useDangerButton: autoPayActive,
     continueAction: autoPayActive
       ? () => {
-          deactivatePaymentSchedule(autoPaySchedule);
+          deactivatePaymentSchedule(
+            isPaymentPlan ? paymentPlanSchedule : autoPaySchedule,
+            isPaymentPlan
+          );
           toggleModal(false);
         }
       : navigateToSettings
@@ -50,7 +64,7 @@ const AutopayModal = ({
       ModalLink={() =>
         buttonLinkType ? (
           <ButtonWithAction
-            text={autoPayActive ? "Manage Autopay" : "Set Up Autopay"}
+            text={autoPayActive ? `Manage ${planType}` : `Set Up ${planType}`}
             variant="tertiary"
             action={() => {
               toggleModal(true);
@@ -74,7 +88,7 @@ const AutopayModal = ({
             >
               <AutopayOnIcon />
               <ButtonWithAction
-                text="Autopay On"
+                text={`${planType} On`}
                 variant="smallGhost"
                 dataQa="Autopay On"
                 textExtraStyles={`font-size: 0.875rem; `}

package/src/components/molecules/obligation/modules/PaymentDetailsActions.js

@@ -15,8 +15,11 @@ const PaymentDetailsActions = ({
   handleAutopayAction,
   deactivatePaymentSchedule,
   navigateToSettings,
-  autoPaySchedule
+  autoPaySchedule,
+  paymentPlanSchedule,
+  isPaymentPlan
 }) => {
+  const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const [isLoading, setIsLoading] = useState(false);
   const [modalOpen, toggleModal] = useState(false);
   const { obligationSlug } = config;
@@ -64,6 +67,8 @@ const PaymentDetailsActions = ({
               deactivatePaymentSchedule={deactivatePaymentSchedule}
               navigateToSettings={navigateToSettings}
               autoPaySchedule={autoPaySchedule}
+              paymentPlanSchedule={paymentPlanSchedule}
+              isPaymentPlan={isPaymentPlan}
             />
           </Cluster>
         </Box>
@@ -97,7 +102,7 @@ const PaymentDetailsActions = ({
             {autoPayAvailable && !autoPayEnabled ? (
               <ButtonWithAction
                 variant="tertiary"
-                text="Set Up Autopay"
+                text={`Set Up ${planType}`}
                 action={() => {
                   setDetailedObligation(obligations, config);
                   handleAutopayAction();
@@ -115,6 +120,8 @@ const PaymentDetailsActions = ({
                 deactivatePaymentSchedule={deactivatePaymentSchedule}
                 buttonLinkType
                 isMobile={isMobile}
+                paymentPlanSchedule={paymentPlanSchedule}
+                isPaymentPlan={isPaymentPlan}
               />
             )}
           </Box>