@thecb/components 3.3.10 → 3.4.2

package/dist/index.cjs.js

@@ -12283,6 +12283,7 @@ var padding = {
   smallPrimary: "0.75rem 1rem",
   smallSecondary: "0.75rem 1rem",
   smallGhost: "0",
+  tertiary: "1rem 1.25rem",
   ghost: "0.65rem 0",
   danger: "1rem 1.25rem",
   whiteSecondary: "0.75rem 2rem",
@@ -12296,6 +12297,7 @@ var color$1 = {
   smallSecondary: "#15749D",
   smallGhost: "#15749D",
   ghost: "#15749D",
+  tertiary: "#15749D",
   danger: "#FFFFFF",
   whiteSecondary: "#FFFFFF",
   whitePrimary: "#FFFFFF"
@@ -12308,6 +12310,7 @@ var fontSizeVariant = {
   smallSecondary: "pS",
   smallGhost: "p",
   ghost: "pL",
+  tertiary: "pS",
   danger: "pS",
   whiteSecondary: "pS",
   whitePrimary: "pS"
@@ -12320,6 +12323,7 @@ var fontWeight = {
   smallSecondary: "600",
   smallGhost: "400",
   ghost: "600",
+  tertiary: "600",
   danger: "600",
   whiteSecondary: "600",
   whitePrimary: "600"
@@ -12332,6 +12336,7 @@ var height = {
   smallSecondary: "2.5rem",
   smallGhost: "1.5rem",
   ghost: "3rem",
+  tertiary: "3rem",
   danger: "3rem",
   whiteSecondary: "3rem",
   whitePrimary: "auto"
@@ -12344,6 +12349,7 @@ var minWidth = {
   smallSecondary: "100px",
   smallGhost: "100px",
   ghost: "130px",
+  tertiary: "130px",
   danger: "130px",
   whiteSecondary: "160px",
   whitePrimary: "130px"
@@ -12356,6 +12362,7 @@ var backgroundColor = {
   smallSecondary: "transparent",
   smallGhost: "transparent",
   ghost: "transparent",
+  tertiary: "transparent",
   danger: "#ED125F",
   whiteSecondary: "transparent",
   whitePrimary: "transparent"
@@ -12368,6 +12375,7 @@ var border = {
   smallSecondary: "2px solid #15749D",
   smallGhost: "none",
   ghost: "none",
+  tertiary: "none",
   danger: "2px solid #ED125F",
   whiteSecondary: "2px solid white",
   whitePrimary: "2px solid transparent"
@@ -12378,8 +12386,9 @@ var hoverBackgroundColor = {
   back: "transparent",
   smallPrimary: "#116285",
   smallSecondary: "transparent",
-  ghost: "transparent",
   smallGhost: "transparent",
+  ghost: "transparent",
+  tertiary: "transparent",
   danger: "#BA002C",
   whiteSecondary: "transparent",
   whitePrimary: "transparent"
@@ -12390,8 +12399,9 @@ var hoverBorderColor = {
   back: "#DCEAF1",
   smallPrimary: "#116285",
   smallSecondary: "#DCEAF1",
-  ghost: "transparent",
   smallGhost: "transparent",
+  ghost: "transparent",
+  tertiary: "transparent",
   danger: "#BA002C",
   whiteSecondary: "2px solid transparent",
   whitePrimary: "2px solid transparent"
@@ -12402,8 +12412,9 @@ var hoverColor = {
   back: "#116285",
   smallPrimary: "#FFFFFF",
   smallSecondary: "#116285",
-  ghost: "#116285",
   smallGhost: "#116285",
+  ghost: "#116285",
+  tertiary: "#116285",
   danger: "#FFFFFF",
   whiteSecondary: "#FFFFFF",
   whitePrimary: "#FFFFFF"
@@ -12414,8 +12425,9 @@ var activeBackgroundColor = {
   back: "transparent",
   smallPrimary: "#0E506D",
   smallSecondary: "transparent",
-  ghost: "transparent",
   smallGhost: "transparent",
+  ghost: "transparent",
+  tertiary: "transparent",
   danger: "#870000",
   whiteSecondary: "transparent",
   whitePrimary: "transparent"
@@ -12426,8 +12438,9 @@ var activeBorderColor = {
   back: "#0E506D",
   smallPrimary: "#0E506D",
   smallSecondary: "#0E506D",
-  ghost: "transparent",
   smallGhost: "transparent",
+  ghost: "transparent",
+  tertiary: "transparent",
   danger: "#870000",
   whiteSecondary: "2px solid transparent",
   whitePrimary: "2px solid transparent"
@@ -12438,8 +12451,9 @@ var activeColor = {
   back: "#0E506D",
   smallPrimary: "#FFFFFF",
   smallSecondary: "#0E506D",
-  ghost: "#0E506D",
   smallGhost: "#0E506D",
+  ghost: "#0E506D",
+  tertiary: "#0E506D",
   danger: "#FFFFFF",
   whiteSecondary: "#FFFFFF",
   whitePrimary: "#FFFFFF"
@@ -13616,6 +13630,28 @@ var IconAdd = function IconAdd() {
   }))))));
 };
 
+var AutopayOnIcon = function AutopayOnIcon(_ref) {
+  var themeValues = _ref.themeValues;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "12",
+    height: "13",
+    viewBox: "0 0 12 13"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    className: "autopayIcon",
+    fill: themeValues.primaryColor,
+    fillRule: "nonzero",
+    d: "M1.898 5.75c.079 0 .141-.02.188-.059a.281.281 0 00.094-.152 3.825 3.825 0 011.394-2.144A3.838 3.838 0 016 2.563c.5 0 .98.09 1.441.27.461.179.88.44 1.254.784l-.984.985A.542.542 0 007.547 5c0 .156.055.29.164.398.11.11.242.165.398.165h3.141c.156 0 .289-.055.398-.165A.542.542 0 0011.812 5V1.86a.542.542 0 00-.164-.399.542.542 0 00-.398-.164.542.542 0 00-.398.164l-.844.844A5.699 5.699 0 006 .688c-.938 0-1.809.207-2.613.62-.805.415-1.48.981-2.028 1.7A5.726 5.726 0 00.281 5.422a.265.265 0 00.059.223c.055.07.129.105.222.105h1.336zM6 12.312c.937 0 1.809-.207 2.613-.62a5.919 5.919 0 002.028-1.7 5.726 5.726 0 001.078-2.414.265.265 0 00-.059-.223.267.267 0 00-.223-.105h-1.335c-.079 0-.141.02-.188.059a.281.281 0 00-.094.152 3.825 3.825 0 01-1.394 2.144c-.711.555-1.52.833-2.426.833-.5 0-.98-.09-1.441-.27a3.985 3.985 0 01-1.254-.785l.984-.985A.542.542 0 004.453 8a.542.542 0 00-.164-.398.542.542 0 00-.398-.164H.75a.542.542 0 00-.398.164A.542.542 0 00.187 8v3.14c0 .157.055.29.165.4.109.108.242.163.398.163.156 0 .29-.055.398-.164l.844-.844A5.699 5.699 0 006 12.312z"
+  })));
+};
+
+var AutopayOnIcon$1 = themeComponent(AutopayOnIcon, "Icons", fallbackValues$2, "primary");
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -30402,6 +30438,21 @@ validatorFns[NUMBER_LESS_THAN] = (value, args, form) => {
   return Number(value) < args[0];
 };
 
+const NUMBER_LESS_THAN_OR_EQUAL_TO =
+  "validator/NUMBER_LESS_THAN_OR_EQUAL_TO";
+const NUMBER_LESS_THAN_OR_EQUAL_TO_ERROR =
+  "error/NUMBER_LESS_THAN_OR_EQUAL_TO";
+const numberLessThanOrEqualTo = createValidator(
+  NUMBER_LESS_THAN_OR_EQUAL_TO,
+  NUMBER_LESS_THAN_OR_EQUAL_TO_ERROR
+);
+validatorFns[NUMBER_LESS_THAN_OR_EQUAL_TO] = (value, args, form) => {
+  if (value === "") {
+    return true;
+  }
+  return Number(value) <= args[0];
+};
+
 const NUMBER_GREATER_THAN = "validator/NUMBER_GREATER_THAN";
 const NUMBER_GREATER_THAN_ERROR = "error/NUMBER_GREATER_THAN";
 const numberGreaterThan = createValidator(
@@ -30415,6 +30466,21 @@ validatorFns[NUMBER_GREATER_THAN] = (value, args, form) => {
   return Number(value) > args[0];
 };
 
+const NUMBER_GREATER_THAN_OR_EQUAL_TO =
+  "validator/NUMBER_GREATER_THAN_OR_EQUAL_TO";
+const NUMBER_GREATER_THAN_OR_EQUAL_TO_ERROR =
+  "error/NUMBER_GREATER_THAN_OR_EQUAL_TO";
+const numberGreaterThanOrEqualTo = createValidator(
+  NUMBER_GREATER_THAN_OR_EQUAL_TO,
+  NUMBER_GREATER_THAN_OR_EQUAL_TO_ERROR
+);
+validatorFns[NUMBER_GREATER_THAN_OR_EQUAL_TO] = (value, args, form) => {
+  if (value === "") {
+    return true;
+  }
+  return Number(value) >= args[0];
+};
+
 const MATCHES_FIELD = "validator/MATCHES_FIELD";
 const MATCHES_FIELD_ERROR$1 = "error/MATCHES_FIELD";
 const matchesField = createValidator(MATCHES_FIELD, MATCHES_FIELD_ERROR$1);
@@ -30692,11 +30758,14 @@ function isDraft(value) {
   return !!value && !!value[DRAFT_STATE];
 }
 function isDraftable(value) {
+  if (!value) { return false; }
+  return isPlainObject(value) || !!value[DRAFTABLE] || !!value.constructor[DRAFTABLE];
+}
+function isPlainObject(value) {
   if (!value || typeof value !== "object") { return false; }
   if (Array.isArray(value)) { return true; }
   var proto = Object.getPrototypeOf(value);
-  if (!proto || proto === Object.prototype) { return true; }
-  return !!value[DRAFTABLE] || !!value.constructor[DRAFTABLE];
+  return !proto || proto === Object.prototype;
 }
 var assign = Object.assign || function assign(target, value) {
   for (var key in value) {
@@ -30763,6 +30832,15 @@ function is(x, y) {
     return x !== x && y !== y;
   }
 }
+function clone(obj) {
+  if (!isDraftable(obj)) { return obj; }
+  if (Array.isArray(obj)) { return obj.map(clone); }
+  var cloned = Object.create(Object.getPrototypeOf(obj));
+
+  for (var key in obj) { cloned[key] = clone(obj[key]); }
+
+  return cloned;
+}
 
 /** Each scope represents a `produce` call. */
 
@@ -31071,8 +31149,8 @@ function createHiddenProperty(target, prop, value) {
 }
 
 var legacyProxy = /*#__PURE__*/Object.freeze({
-    willFinalize: willFinalize,
-    createProxy: createProxy
+	willFinalize: willFinalize,
+	createProxy: createProxy
 });
 
 function willFinalize$1() {}
@@ -31220,6 +31298,9 @@ function deleteProperty(state, prop) {
   if (peek$1(state.base, prop) !== undefined || prop in state.base) {
     state.assigned[prop] = false;
     markChanged$1(state);
+  } else if (state.assigned[prop]) {
+    // if an originally not assigned property was deleted
+    delete state.assigned[prop];
   }
 
   if (state.copy) { delete state.copy[prop]; }
@@ -31250,8 +31331,8 @@ function markChanged$1(state) {
 }
 
 var modernProxy = /*#__PURE__*/Object.freeze({
-    willFinalize: willFinalize$1,
-    createProxy: createProxy$1
+	willFinalize: willFinalize$1,
+	createProxy: createProxy$1
 });
 
 function generatePatches(state, basePath, patches, inversePatches) {
@@ -31302,7 +31383,6 @@ function generateArrayPatches(state, basePath, patches, inversePatches) {
     }
   }
 
-  var useRemove = end != base.length;
   var replaceCount = patches.length; // Process added indices.
 
   for (var i$1 = end + delta - 1; i$1 >= end; --i$1) {
@@ -31312,21 +31392,9 @@ function generateArrayPatches(state, basePath, patches, inversePatches) {
       path: path$1,
       value: copy[i$1]
     };
-
-    if (useRemove) {
-      inversePatches.push({
-        op: "remove",
-        path: path$1
-      });
-    }
-  } // One "replace" patch reverses all non-splicing "add" patches.
-
-
-  if (!useRemove) {
     inversePatches.push({
-      op: "replace",
-      path: basePath.concat(["length"]),
-      value: base.length
+      op: "remove",
+      path: path$1
     });
   }
 }
@@ -31363,55 +31431,58 @@ function generateObjectPatches(state, basePath, patches, inversePatches) {
   });
 }
 
-function applyPatches(draft, patches) {
-  for (var i = 0; i < patches.length; i++) {
-    var patch = patches[i];
+var applyPatches = function (draft, patches) {
+  for (var i$1 = 0, list = patches; i$1 < list.length; i$1 += 1) {
+    var patch = list[i$1];
+
     var path = patch.path;
+    var op = patch.op;
+    var value = clone(patch.value); // used to clone patch to ensure original patch is not modified, see #411
 
-    if (path.length === 0 && patch.op === "replace") {
-      draft = patch.value;
-    } else {
-      var base = draft;
+    if (!path.length) { throw new Error("Illegal state"); }
+    var base = draft;
 
-      for (var i$1 = 0; i$1 < path.length - 1; i$1++) {
-        base = base[path[i$1]];
-        if (!base || typeof base !== "object") { throw new Error("Cannot apply patch, path doesn't resolve: " + path.join("/")); } // prettier-ignore
-      }
+    for (var i = 0; i < path.length - 1; i++) {
+      base = base[path[i]];
+      if (!base || typeof base !== "object") { throw new Error("Cannot apply patch, path doesn't resolve: " + path.join("/")); } // prettier-ignore
+    }
 
-      var key = path[path.length - 1];
+    var key = path[path.length - 1];
 
-      switch (patch.op) {
-        case "replace":
-          base[key] = patch.value;
-          break;
+    switch (op) {
+      case "replace":
+        // if value is an object, then it's assigned by reference
+        // in the following add or remove ops, the value field inside the patch will also be modifyed
+        // so we use value from the cloned patch
+        base[key] = value;
+        break;
 
-        case "add":
-          if (Array.isArray(base)) {
-            // TODO: support "foo/-" paths for appending to an array
-            base.splice(key, 0, patch.value);
-          } else {
-            base[key] = patch.value;
-          }
+      case "add":
+        if (Array.isArray(base)) {
+          // TODO: support "foo/-" paths for appending to an array
+          base.splice(key, 0, value);
+        } else {
+          base[key] = value;
+        }
 
-          break;
+        break;
 
-        case "remove":
-          if (Array.isArray(base)) {
-            base.splice(key, 1);
-          } else {
-            delete base[key];
-          }
+      case "remove":
+        if (Array.isArray(base)) {
+          base.splice(key, 1);
+        } else {
+          delete base[key];
+        }
 
-          break;
+        break;
 
-        default:
-          throw new Error("Unsupported patch operation: " + patch.op);
-      }
+      default:
+        throw new Error("Unsupported patch operation: " + op);
     }
   }
 
   return draft;
-}
+};
 
 function verifyMinified() {}
 
@@ -31490,6 +31561,28 @@ Immer.prototype.produce = function produce (base, recipe, patchListener) {
   }
 };
 
+Immer.prototype.produceWithPatches = function produceWithPatches (arg1, arg2, arg3) {
+    var this$1 = this;
+
+  if (typeof arg1 === "function") {
+    return function (state) {
+        var args = [], len = arguments.length - 1;
+        while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];
+
+        return this$1.produceWithPatches(state, function (draft) { return arg1.apply(void 0, [ draft ].concat( args )); });
+      };
+  } // non-curried form
+
+
+  if (arg3) { throw new Error("A patch listener cannot be passed to produceWithPatches"); }
+  var patches, inversePatches;
+  var nextState = this.produce(arg1, arg2, function (p, ip) {
+    patches = p;
+    inversePatches = ip;
+  });
+  return [nextState, patches, inversePatches];
+};
+
 Immer.prototype.createDraft = function createDraft (base) {
   if (!isDraftable(base)) {
     throw new Error("First argument to `createDraft` must be a plain object, an array, or an immerable object"); // prettier-ignore
@@ -31528,13 +31621,26 @@ Immer.prototype.setUseProxies = function setUseProxies (value) {
 };
 
 Immer.prototype.applyPatches = function applyPatches$1 (base, patches) {
-  // Mutate the base state when a draft is passed.
+  // If a patch replaces the entire state, take that replacement as base
+  // before applying patches
+  var i;
+
+  for (i = patches.length - 1; i >= 0; i--) {
+    var patch = patches[i];
+
+    if (patch.path.length === 0 && patch.op === "replace") {
+      base = patch.value;
+      break;
+    }
+  }
+
   if (isDraft(base)) {
+    // N.B: never hits if some patch a replacement, patches are never drafts
     return applyPatches(base, patches);
   } // Otherwise, produce a copy of the base state.
 
 
-  return this.produce(base, function (draft) { return applyPatches(draft, patches); });
+  return this.produce(base, function (draft) { return applyPatches(draft, patches.slice(i + 1)); });
 };
 /** @internal */
 
@@ -31733,6 +31839,12 @@ var immer = new Immer();
  */
 
 var produce = immer.produce;
+/**
+ * Like `produce`, but `produceWithPatches` always returns a tuple
+ * [nextState, patches, inversePatches] (instead of just the next state)
+ */
+
+var produceWithPatches = immer.produceWithPatches.bind(immer);
 /**
  * Pass true to automatically freeze all copies created by Immer.
  *
@@ -35757,10 +35869,92 @@ var TitleModule = function TitleModule(_ref) {
   }, subtitle)));
 };
 
+var color$9 = "#15749D";
+var hoverColor$4 = "#116285";
+var activeColor$5 = "#0E506D";
+var fallbackValues$t = {
+  color: color$9,
+  hoverColor: hoverColor$4,
+  activeColor: activeColor$5
+};
+
+var AutopayModal = function AutopayModal(_ref) {
+  var autoPayActive = _ref.autoPayActive,
+      autoPaySchedule = _ref.autoPaySchedule,
+      toggleModal = _ref.toggleModal,
+      modalOpen = _ref.modalOpen,
+      deactivatePaymentSchedule = _ref.deactivatePaymentSchedule,
+      navigateToSettings = _ref.navigateToSettings,
+      buttonLinkType = _ref.buttonLinkType,
+      isMobile = _ref.isMobile,
+      themeValues = _ref.themeValues;
+  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",
+    useDangerButton: autoPayActive,
+    continueAction: autoPayActive ? function () {
+      deactivatePaymentSchedule(autoPaySchedule);
+      toggleModal(false);
+    } : navigateToSettings
+  };
+  var hoverStyles = "\n  &:hover {\n    .autopayIcon { fill: ".concat(themeValues.hoverColor, "; text-decoration: underline; }\n  }");
+  var activeStyles = "\n   &:active {\n    .autopayIcon { fill: ".concat(themeValues.activeColor, "; text-decoration: underline; }\n    }");
+  var defaultStyles = "\n    .autopayIcon { fill: ".concat(themeValues.color, "; text-decoration: underline; }\n     ");
+  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",
+        variant: "tertiary",
+        action: function action() {
+          toggleModal(true);
+        },
+        dataQa: "Manage Autopay",
+        extraStyles: isMobile && "flex-grow: 1; width: 100%;"
+      }) : /*#__PURE__*/React__default.createElement(Box, {
+        padding: "0",
+        onClick: function onClick() {
+          toggleModal(true);
+        },
+        hoverStyles: hoverStyles,
+        activeStyles: activeStyles,
+        extraStyles: defaultStyles
+      }, /*#__PURE__*/React__default.createElement(Cluster, {
+        justify: isMobile ? "flex-start" : "flex-end",
+        align: "center"
+      }, /*#__PURE__*/React__default.createElement(AutopayOnIcon$1, null), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+        text: "Autopay On",
+        variant: "smallGhost",
+        dataQa: "Autopay On",
+        textExtraStyles: "font-size: 0.875rem; ",
+        extraStyles: "min-width: auto; padding: 0 0 0 6px;"
+      })));
+    },
+    showModal: function showModal() {
+      return toggleModal(true);
+    },
+    hideModal: function hideModal() {
+      return toggleModal(false);
+    },
+    modalOpen: modalOpen
+  }, modalExtraProps));
+};
+
+var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$t);
+
 var AmountModule = function AmountModule(_ref) {
   var totalAmountDue = _ref.totalAmountDue,
       autoPayEnabled = _ref.autoPayEnabled,
-      isMobile = _ref.isMobile;
+      isMobile = _ref.isMobile,
+      deactivatePaymentSchedule = _ref.deactivatePaymentSchedule,
+      navigateToSettings = _ref.navigateToSettings,
+      autoPaySchedule = _ref.autoPaySchedule;
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      modalOpen = _useState2[0],
+      toggleModal = _useState2[1];
+
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0.25rem 0 0"
   }, /*#__PURE__*/React__default.createElement(Stack, {
@@ -35768,29 +35962,43 @@ var AmountModule = function AmountModule(_ref) {
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
     weight: FONT_WEIGHT_SEMIBOLD,
-    extraStyles: "text-align: right;"
+    extraStyles: isMobile ? "text-align: left;" : "text-align: right;"
   }, isMobile ? "Total Due" : "Total Amount Due"), /*#__PURE__*/React__default.createElement(AmountCallout$1, {
     amount: displayCurrency(totalAmountDue),
-    textAlign: "right"
-  }), autoPayEnabled && /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: "p",
-    weight: FONT_WEIGHT_REGULAR,
-    color: REGENT_GREY,
-    extraStyles: "font-style: italic; text-align: right;"
-  }, isMobile ? "Autopay On" : "Autopay Enabled")));
+    textAlign: isMobile ? "left" : "right"
+  }), autoPayEnabled && /*#__PURE__*/React__default.createElement(AutopayModalModule, {
+    autoPayActive: autoPayEnabled,
+    autoPaySchedule: autoPaySchedule,
+    toggleModal: toggleModal,
+    modalOpen: modalOpen,
+    navigateToSettings: navigateToSettings,
+    deactivatePaymentSchedule: deactivatePaymentSchedule,
+    isMobile: isMobile
+  })));
 };
 
 var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
   var isMobile = _ref.isMobile,
       obligations = _ref.obligations,
       config = _ref.config,
-      actions = _ref.actions;
+      actions = _ref.actions,
+      autoPayEnabled = _ref.autoPayEnabled,
+      autoPayAvailable = _ref.autoPayAvailable,
+      handleAutopayAction = _ref.handleAutopayAction,
+      deactivatePaymentSchedule = _ref.deactivatePaymentSchedule,
+      navigateToSettings = _ref.navigateToSettings,
+      autoPaySchedule = _ref.autoPaySchedule;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isLoading = _useState2[0],
       setIsLoading = _useState2[1];
 
+  var _useState3 = React.useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      modalOpen = _useState4[0],
+      toggleModal = _useState4[1];
+
   var obligationSlug = config.obligationSlug;
   var createPaymentFromProfile = actions.createPaymentFromProfile,
       setDetailedObligation = actions.setDetailedObligation;
@@ -35806,12 +36014,47 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
   };
 
   return /*#__PURE__*/React__default.createElement(Box, {
-    padding: "16px 0 0",
+    padding: isMobile ? "0" : "16px 0 0",
     minWidth: "100%",
     borderSize: "1px",
     borderColor: GHOST_GREY,
     borderWidthOverride: "1px 0 0 0",
     key: "".concat(obligations[0].id, "-actions")
+  }, isMobile && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "16px 24px",
+    borderSize: "1px",
+    borderColor: GHOST_GREY,
+    borderWidthOverride: "0 0 1px 0"
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "space-between",
+    align: "center",
+    nowrap: true
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    width: "100%"
+  }, /*#__PURE__*/React__default.createElement(AmountModule, {
+    totalAmountDue: obligations.reduce(function (acc, curr) {
+      return acc + curr.amountDue;
+    }, 0),
+    autoPayEnabled: autoPayEnabled,
+    isMobile: isMobile,
+    deactivatePaymentSchedule: deactivatePaymentSchedule,
+    navigateToSettings: navigateToSettings,
+    autoPaySchedule: autoPaySchedule
+  })), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    width: "100%"
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    isLoading: isLoading,
+    action: function action() {
+      return handleClick(obligations);
+    },
+    text: "Pay Now",
+    variant: isMobile ? "smallSecondary" : "secondary",
+    dataQa: "Pay Now",
+    extraStyles: isMobile && "flex-grow: 1; width: 100%;"
+  })))), /*#__PURE__*/React__default.createElement(Box, {
+    padding: isMobile ? "16px" : "0"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: isMobile ? "center" : "flex-end",
     align: "center",
@@ -35820,12 +36063,30 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     padding: isMobile ? "0 8px 0 0" : "8px",
     extraStyles: isMobile && "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-    variant: isMobile ? "smallSecondary" : "secondary",
+    variant: "tertiary",
     text: config.type === "ACCOUNT" ? "Account Details" : "Property Details",
     action: handleDetailsClick,
     dataQa: "Account Details",
     extraStyles: isMobile && "flex-grow: 1; width: 100%;"
   })), /*#__PURE__*/React__default.createElement(Box, {
+    padding: isMobile ? "0 8px 0 0" : "8px",
+    extraStyles: isMobile && "flex-grow: 1;"
+  }, autoPayAvailable && !autoPayEnabled ? /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    variant: "tertiary",
+    text: "Set Up Autopay",
+    action: handleAutopayAction,
+    dataQa: "Set Up Autopay",
+    extraStyles: isMobile && "flex-grow: 1; width: 100%;"
+  }) : /*#__PURE__*/React__default.createElement(AutopayModalModule, {
+    autoPayActive: autoPayEnabled,
+    autoPaySchedule: autoPaySchedule,
+    toggleModal: toggleModal,
+    modalOpen: modalOpen,
+    navigateToSettings: navigateToSettings,
+    deactivatePaymentSchedule: deactivatePaymentSchedule,
+    buttonLinkType: true,
+    isMobile: isMobile
+  })), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "0 0 0 8px" : "8px",
     extraStyles: isMobile && "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
@@ -35833,11 +36094,11 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     action: function action() {
       return handleClick(obligations);
     },
-    text: "Make Payment",
-    variant: isMobile ? "smallPrimary" : "primary",
-    dataQa: "Make Payment",
+    text: "Pay Now",
+    variant: isMobile ? "smallSecondary" : "secondary",
+    dataQa: "Pay Now",
     extraStyles: isMobile && "flex-grow: 1; width: 100%;"
-  }))));
+  })))));
 };
 
 var Obligation = function Obligation(_ref) {
@@ -35845,13 +36106,20 @@ var Obligation = function Obligation(_ref) {
       obligations = _ref.obligations,
       actions = _ref.actions,
       autoPayEnabled = _ref.autoPayEnabled,
+      autoPayAvailable = _ref.autoPayAvailable,
+      handleAutopayAction = _ref.handleAutopayAction,
+      deactivatePaymentSchedule = _ref.deactivatePaymentSchedule,
+      autoPaySchedule = _ref.autoPaySchedule,
+      navigateToSettings = _ref.navigateToSettings,
       isMobile = _ref.isMobile;
   var obligation = obligations[0];
   var customAttributes = obligation.customAttributes;
   return /*#__PURE__*/React__default.createElement(Box, {
-    background: WHITE,
+    padding: "0",
     borderRadius: "4px",
     boxShadow: "0px 0px 5px 0px ".concat(GHOST_GREY)
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    background: WHITE
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "14px"
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -35868,7 +36136,7 @@ var Obligation = function Obligation(_ref) {
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "flex-start",
     align: "center"
-  }, !isMobile && /*#__PURE__*/React__default.createElement(IconsModule, {
+  }, /*#__PURE__*/React__default.createElement(IconsModule, {
     icon: config.icon,
     iconDefault: config.iconDefault,
     configIconMap: config.iconMap,
@@ -35879,18 +36147,38 @@ var Obligation = function Obligation(_ref) {
     subtitle: obligation.subDescription,
     titleColor: BRIGHT_GREY,
     isMobile: isMobile
-  }))), /*#__PURE__*/React__default.createElement(AmountModule, {
+  }))), !isMobile && /*#__PURE__*/React__default.createElement(AmountModule, {
     totalAmountDue: obligations.reduce(function (acc, curr) {
       return acc + curr.amountDue;
     }, 0),
     autoPayEnabled: autoPayEnabled,
+    isMobile: isMobile,
+    deactivatePaymentSchedule: deactivatePaymentSchedule,
+    navigateToSettings: navigateToSettings,
+    autoPaySchedule: autoPaySchedule
+  }))), !isMobile && /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
+    obligations: obligations,
+    autoPayEnabled: autoPayEnabled,
+    autoPayAvailable: autoPayAvailable,
+    handleAutopayAction: handleAutopayAction,
+    deactivatePaymentSchedule: deactivatePaymentSchedule,
+    autoPaySchedule: autoPaySchedule,
+    navigateToSettings: navigateToSettings,
+    config: config,
+    actions: actions,
     isMobile: isMobile
-  }))), /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
+  }))), isMobile && /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
     obligations: obligations,
+    autoPayEnabled: autoPayEnabled,
+    autoPayAvailable: autoPayAvailable,
+    handleAutopayAction: handleAutopayAction,
+    deactivatePaymentSchedule: deactivatePaymentSchedule,
+    autoPaySchedule: autoPaySchedule,
+    navigateToSettings: navigateToSettings,
     config: config,
     actions: actions,
     isMobile: isMobile
-  })));
+  }));
 };
 
 var PartialAmountForm = function PartialAmountForm(_ref) {
@@ -35916,7 +36204,7 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
     }, []);
   }
 
-  var amountErrors = (_amountErrors = {}, _defineProperty(_amountErrors, required.error, "Amount is required"), _defineProperty(_amountErrors, numberGreaterThan.error, "Your total payment must be greater than ".concat(displayCurrency(minimum))), _defineProperty(_amountErrors, numberLessThan.error, "Your total payment must be less than ".concat(displayCurrency(maximum))), _amountErrors);
+  var amountErrors = (_amountErrors = {}, _defineProperty(_amountErrors, required.error, "Amount is required"), _defineProperty(_amountErrors, numberGreaterThan.error, "Your total payment must be greater than ".concat(displayCurrency(minimum))), _defineProperty(_amountErrors, numberLessThanOrEqualTo.error, "Your total payment must be less than ".concat(displayCurrency(maximum))), _amountErrors);
   var lineItemsNew = Array.isArray(lineItems) ? lineItems : [];
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
@@ -35961,7 +36249,7 @@ var createPartialAmountFormState = function createPartialAmountFormState(lineIte
     }, []))];
 
     if (!!maximum) {
-      validators.push(validateSum(numberLessThan(maximum), lineItems.filter(function (lineItem) {
+      validators.push(validateSum(numberLessThanOrEqualTo(maximum), lineItems.filter(function (lineItem) {
         return lineItem != item;
       }).reduce(function (acc, curr) {
         return [].concat(_toConsumableArray(acc), [curr.id]);
@@ -36057,7 +36345,7 @@ var labeledAmountTotal = {
   "default": "h6",
   small: "pL"
 };
-var fallbackValues$t = {
+var fallbackValues$u = {
   backgroundColor: backgroundColor$7,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
@@ -36218,7 +36506,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
   });
 };
 
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$t, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$u, "default");
 
 var linkColor$1 = {
   "default": "#357fb8",
@@ -36240,7 +36528,7 @@ var modalLinkHoverFocus = {
   "default": "",
   footer: "outline: none; text-decoration: underline;"
 };
-var fallbackValues$u = {
+var fallbackValues$v = {
   linkColor: linkColor$1,
   fontSize: fontSize$8,
   lineHeight: lineHeight$4,
@@ -36303,7 +36591,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
   });
 };
 
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$u, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$v, "default");
 
 function _templateObject$z() {
   var data = _taggedTemplateLiteral([""]);
@@ -36689,7 +36977,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$2 = "".concat(GREY_CHATEAU);
 var focusStyles$1 = "outline: none;";
-var fallbackValues$v = {
+var fallbackValues$w = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -36876,7 +37164,7 @@ var RadioSection = function RadioSection(_ref) {
   })));
 };
 
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$v);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$w);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var _emailErrorMessages, _passwordErrorMessage;
@@ -37163,7 +37451,7 @@ var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$w = {
+var fallbackValues$x = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -37219,7 +37507,7 @@ var TabSidebar = function TabSidebar(_ref) {
   })));
 };
 
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$w);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$x);
 
 var backgroundColor$8 = {
   "default": "#ffffff",
@@ -37249,7 +37537,7 @@ var modalLinkHoverFocus$1 = {
   "default": "",
   footer: "outline: none; text-decoration: underline;"
 };
-var fallbackValues$x = {
+var fallbackValues$y = {
   backgroundColor: backgroundColor$8,
   linkColor: linkColor$2,
   border: border$2,
@@ -37313,7 +37601,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
   });
 };
 
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$x, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$y, "default");
 
 function _templateObject2$l() {
   var data = _taggedTemplateLiteral([""]);
@@ -37443,7 +37731,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
 };
 
 var pageBackground = "#F6F6F9";
-var fallbackValues$y = {
+var fallbackValues$z = {
   pageBackground: pageBackground
 };
 
@@ -37490,7 +37778,7 @@ var CenterSingle = function CenterSingle(_ref) {
   })));
 };
 
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$y));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$z));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -37532,7 +37820,7 @@ var CenterStack = function CenterStack(_ref) {
   })));
 };
 
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$y));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$z));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -37572,7 +37860,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
   })));
 };
 
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$y));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$z));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -37626,7 +37914,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   })));
 };
 
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$y));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$z));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -37697,7 +37985,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   })));
 };
 
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$y));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$z));
 
 
 
@@ -37724,6 +38012,7 @@ exports.AddObligation = AddObligation$1;
 exports.AddressForm = AddressForm;
 exports.Alert = Alert$1;
 exports.AmountCallout = AmountCallout$1;
+exports.AutopayOnIcon = AutopayOnIcon$1;
 exports.BankIcon = BankIcon;
 exports.Box = Box;
 exports.Breadcrumb = Breadcrumbs;