@thecb/components 7.3.1 → 7.3.2-beta.2

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+import AmountModule from "./AmountModule";
+import page from "../../../../../.storybook/page";
+import { noop } from "../../../../util/general";
+var groupId = "props";
+export var amountModule = function () { return (React.createElement(AmountModule, { totalAmountDue: text("totalAmountDue", "123", groupId), autoPayEnabled: boolean("autopayEnabled", true, groupId), isMobile: boolean("isMobile", false, groupId), deactivatePaymentSchedule: noop, navigateToSettings: noop, autoPaySchedule: {}, paymentPlanSchedule: {}, isPaymentPlan: boolean("isPaymentPlan", false, groupId) })); };
+var story = page({
+    title: "Components|Molecules/AmountModule",
+    Component: AmountModule
+});
+export default story;

package/dist/src/components/molecules/obligation/modules/AutopayModalModule.d.ts

@@ -0,0 +1,4 @@
+export const AutopayModalModule: ({ variant, ...props }: {
+    [x: string]: any;
+    variant?: any;
+}) => any;

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

@@ -0,0 +1,76 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import Modal from "../../modal";
+import ButtonWithAction from "../../../atoms/button-with-action";
+import Text from "../../../atoms/text";
+import { AutopayOnIcon } from "../../../atoms/icons";
+import { Box, Cluster } from "../../../atoms/layouts";
+import { SEA_GREEN } from "../../../../constants/colors";
+import { fallbackValues } from "./AutopayModalModule.theme";
+import { themeComponent } from "../../../../util/themeUtils";
+var AutopayModal = function (_a) {
+    var autoPayActive = _a.autoPayActive, autoPaySchedule = _a.autoPaySchedule, paymentPlanSchedule = _a.paymentPlanSchedule, toggleModal = _a.toggleModal, modalOpen = _a.modalOpen, deactivatePaymentSchedule = _a.deactivatePaymentSchedule, navigateToSettings = _a.navigateToSettings, _b = _a.controlType, controlType = _b === void 0 ? "tertiary" : _b, isMobile = _a.isMobile, themeValues = _a.themeValues, isPaymentPlan = _a.isPaymentPlan, nextAutopayDate = _a.nextAutopayDate, dueDate = _a.dueDate, inactive = _a.inactive;
+    var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
+    var nextDate = dueDate || nextAutopayDate;
+    var modalExtraProps = {
+        modalHeaderText: autoPayActive
+            ? "Deactivate ".concat(planType)
+            : "Set Up ".concat(planType),
+        modalBodyText: autoPayActive
+            ? "Are you sure you want to deactivate ".concat(isPaymentPlan ? "your payment plan" : "autopay", "? ").concat(!inactive && nextDate
+                ? "Your next payment will be due on ".concat(nextDate, ".")
+                : "")
+            : "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(isPaymentPlan ? paymentPlanSchedule : autoPaySchedule, isPaymentPlan);
+                toggleModal(false);
+            }
+            : navigateToSettings
+    };
+    var hoverStyles = "\n  &:hover {\n    .autopayIcon { fill: ".concat(themeValues.hoverColor, "; text-decoration: underline; cursor: pointer; }\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     ");
+    var renderAutoPayControl = function () {
+        switch (controlType) {
+            case "secondary": {
+                return (React.createElement(ButtonWithAction, { text: autoPayActive ? "Turn off ".concat(planType) : "Set Up ".concat(planType), variant: "secondary", action: function () {
+                        toggleModal(true);
+                    }, dataQa: "Turn off Autopay", extraStyles: isMobile
+                        ? "flex-grow: 1; width: 100%; margin: 0;"
+                        : "flex-grow: 1; min-width: 165px;" }));
+            }
+            case "tertiary": {
+                return (React.createElement(ButtonWithAction, { text: autoPayActive ? "Manage ".concat(planType) : "Set Up ".concat(planType), variant: "tertiary", action: function () {
+                        toggleModal(true);
+                    }, dataQa: "Manage Autopay", extraStyles: isMobile && "flex-grow: 1; width: 100%;" }));
+            }
+            case "link": {
+                return (React.createElement(Box, { padding: "0", onClick: function () {
+                        toggleModal(true);
+                    }, hoverStyles: hoverStyles, activeStyles: activeStyles, extraStyles: defaultStyles },
+                    React.createElement(Cluster, { justify: isMobile ? "flex-start" : "flex-end", align: "center" },
+                        React.createElement(AutopayOnIcon, null),
+                        React.createElement(Text, { variant: "pS", onClick: function () { return toggleModal(true); }, onKeyPress: function (e) {
+                                e.key === "Enter" && toggleModal(true);
+                            }, tabIndex: "0", dataQa: "".concat(planType, " On"), color: SEA_GREEN, weight: themeValues.fontWeight, hoverStyles: themeValues.modalLinkHoverFocus, extraStyles: "padding-left: 0.25rem;" }, "".concat(planType, " ").concat(nextAutopayDate)))));
+            }
+        }
+    };
+    return (React.createElement(Modal, __assign({ showModal: function () { return toggleModal(true); }, hideModal: function () { return toggleModal(false); }, modalOpen: modalOpen }, modalExtraProps), renderAutoPayControl()));
+};
+export var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues);

package/dist/src/components/molecules/obligation/modules/AutopayModalModule.theme.d.ts

@@ -0,0 +1,15 @@
+export namespace fallbackValues {
+    export { color };
+    export { hoverColor };
+    export { activeColor };
+    export { linkColor };
+    export { fontWeight };
+    export { modalLinkHoverFocus };
+}
+declare const color: "#15749D";
+declare const hoverColor: "#116285";
+declare const activeColor: "#0E506D";
+declare const linkColor: "#3176AA";
+declare const fontWeight: "400";
+declare const modalLinkHoverFocus: "outline: none;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-color: #317D4F;";
+export {};

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

@@ -0,0 +1,15 @@
+import { FONT_WEIGHT_REGULAR } from "../../../../constants/style_constants";
+var color = "#15749D";
+var hoverColor = "#116285";
+var activeColor = "#0E506D";
+var linkColor = "#3176AA";
+var fontWeight = FONT_WEIGHT_REGULAR;
+var modalLinkHoverFocus = "outline: none;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-color: #317D4F;";
+export var fallbackValues = {
+    color: color,
+    hoverColor: hoverColor,
+    activeColor: activeColor,
+    linkColor: linkColor,
+    fontWeight: fontWeight,
+    modalLinkHoverFocus: modalLinkHoverFocus
+};

package/dist/src/components/molecules/obligation/modules/IconModule.d.ts

@@ -0,0 +1,8 @@
+export default IconsModule;
+declare function IconsModule({ icon, iconDefault, configIconMap, iconValue, customAttributes }: {
+    icon: any;
+    iconDefault: any;
+    configIconMap: any;
+    iconValue: any;
+    customAttributes: any;
+}): JSX.Element;

package/dist/src/components/molecules/obligation/modules/IconModule.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { iconsMap } from "../icons";
+import { Box, Cluster } from "../../../atoms/layouts";
+var IconsModule = function (_a) {
+    var _b;
+    var icon = _a.icon, iconDefault = _a.iconDefault, configIconMap = _a.configIconMap, iconValue = _a.iconValue, customAttributes = _a.customAttributes;
+    var Icon;
+    if (typeof icon === "object") {
+        var iconID = customAttributes === null || customAttributes === void 0 ? void 0 : customAttributes[iconValue];
+        var iconMapValue = (_b = configIconMap === null || configIconMap === void 0 ? void 0 : configIconMap[iconID]) !== null && _b !== void 0 ? _b : iconDefault;
+        Icon = iconsMap[iconMapValue];
+    }
+    else {
+        Icon = iconsMap[icon];
+    }
+    return (React.createElement(Box, { padding: "0 1rem 0 0" },
+        React.createElement(Cluster, { justify: "center", align: "center" },
+            React.createElement(Icon, null))));
+};
+export default IconsModule;

package/dist/src/components/molecules/obligation/modules/InactiveControlsModule.d.ts

@@ -0,0 +1,16 @@
+export default InactiveControlsModule;
+declare function InactiveControlsModule({ autoPayEnabled, autoPaySchedule, navigateToSettings, deactivatePaymentSchedule, isMobile, paymentPlanSchedule, isPaymentPlan, nextAutopayDate, obligationAssocID, dueDate, agencyName, configType, actions }: {
+    autoPayEnabled: any;
+    autoPaySchedule: any;
+    navigateToSettings: any;
+    deactivatePaymentSchedule: any;
+    isMobile: any;
+    paymentPlanSchedule: any;
+    isPaymentPlan: any;
+    nextAutopayDate: any;
+    obligationAssocID: any;
+    dueDate: any;
+    agencyName: any;
+    configType: any;
+    actions: any;
+}): JSX.Element;

package/dist/src/components/molecules/obligation/modules/InactiveControlsModule.js

@@ -0,0 +1,18 @@
+import React, { useState } from "react";
+import { GHOST_GREY } from "../../../../constants/colors";
+import { Box, Cluster } from "../../../atoms/layouts";
+import { AutopayModalModule } from "./AutopayModalModule";
+import RemoveAccountModalModule from "./RemoveAccountModalModule";
+var InactiveControlsModule = function (_a) {
+    var autoPayEnabled = _a.autoPayEnabled, autoPaySchedule = _a.autoPaySchedule, navigateToSettings = _a.navigateToSettings, deactivatePaymentSchedule = _a.deactivatePaymentSchedule, isMobile = _a.isMobile, paymentPlanSchedule = _a.paymentPlanSchedule, isPaymentPlan = _a.isPaymentPlan, nextAutopayDate = _a.nextAutopayDate, obligationAssocID = _a.obligationAssocID, dueDate = _a.dueDate, agencyName = _a.agencyName, configType = _a.configType, actions = _a.actions;
+    var _b = useState(false), modalOpen = _b[0], toggleModal = _b[1];
+    var deleteObligationAssoc = actions.deleteObligationAssoc;
+    var handleRemoveAccount = function () { return deleteObligationAssoc(obligationAssocID); };
+    return (React.createElement(Box, { padding: isMobile ? "18px 0 0 0" : "0", border: isMobile ? "1px solid ".concat(GHOST_GREY) : "0px", borderWidthOverride: isMobile ? "1px 0 0 0" : "0px" },
+        React.createElement(Cluster, { childGap: autoPayEnabled ? "8px" : "0", nowrap: true, justify: isMobile && autoPayEnabled && "center", align: isMobile && autoPayEnabled && "center" },
+            autoPayEnabled && (React.createElement(Box, { padding: "0", extraStyles: "flex-grow: 1;" },
+                React.createElement(AutopayModalModule, { autoPayActive: autoPayEnabled, autoPaySchedule: autoPaySchedule, toggleModal: toggleModal, modalOpen: modalOpen, navigateToSettings: navigateToSettings, deactivatePaymentSchedule: deactivatePaymentSchedule, isMobile: isMobile, paymentPlanSchedule: paymentPlanSchedule, isPaymentPlan: isPaymentPlan, nextAutopayDate: nextAutopayDate, obligationAssocID: obligationAssocID, dueDate: dueDate, controlType: "secondary", inactive: true }))),
+            React.createElement(Box, { padding: "0", extraStyles: "flex-grow: 1;" },
+                React.createElement(RemoveAccountModalModule, { agencyName: agencyName, removeAccount: handleRemoveAccount, accountType: configType === "ACCOUNT" ? "Account" : "Property", isMobile: isMobile })))));
+};
+export default InactiveControlsModule;

package/dist/src/components/molecules/obligation/modules/InactiveTitleModule.d.ts

@@ -0,0 +1,6 @@
+export default InactiveTitleModule;
+declare function InactiveTitleModule({ title, subtitle, autoPayEnabled }: {
+    title: any;
+    subtitle: any;
+    autoPayEnabled: any;
+}): JSX.Element;

package/dist/src/components/molecules/obligation/modules/InactiveTitleModule.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { Box, Stack } from "../../../atoms/layouts";
+import Title from "../../../atoms/title";
+import Detail from "../../../atoms/detail";
+import { BLACK, CHARADE_GREY, ZEST_ORANGE } from "../../../../constants/colors";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../../constants/style_constants";
+var InactiveTitleModule = function (_a) {
+    var title = _a.title, subtitle = _a.subtitle, autoPayEnabled = _a.autoPayEnabled;
+    return (React.createElement(Box, { padding: "0" },
+        React.createElement(Stack, { childGap: "0" },
+            React.createElement(Title, { variant: "small", as: "h4", color: CHARADE_GREY, weight: FONT_WEIGHT_SEMIBOLD }, title),
+            React.createElement(Detail, { variant: "small", as: "h5", color: CHARADE_GREY }, subtitle),
+            React.createElement(Detail, { variant: "small", as: "p", color: ZEST_ORANGE, weight: FONT_WEIGHT_SEMIBOLD }, "Unable to load account details"),
+            React.createElement(Detail, { variant: "extraSmall", as: "p", color: BLACK }, "This may mean that the balance has been paid, or there was an error loading it.".concat(autoPayEnabled
+                ? " You may disable autopay for this account by pressing the 'Turn off Autopay' button."
+                : "")))));
+};
+export default InactiveTitleModule;

package/dist/src/components/molecules/obligation/modules/PaymentDetailsActions.d.ts

@@ -0,0 +1,18 @@
+export default PaymentDetailsActions;
+declare function PaymentDetailsActions({ isMobile, obligations, config, actions, autoPayEnabled, autoPayAvailable, handleAutopayAction, deactivatePaymentSchedule, navigateToSettings, autoPaySchedule, paymentPlanSchedule, isPaymentPlan, nextAutopayDate, obligationAssocID, dueDate }: {
+    isMobile: any;
+    obligations: any;
+    config: any;
+    actions: any;
+    autoPayEnabled: any;
+    autoPayAvailable: any;
+    handleAutopayAction: any;
+    deactivatePaymentSchedule: any;
+    navigateToSettings: any;
+    autoPaySchedule: any;
+    paymentPlanSchedule: any;
+    isPaymentPlan: any;
+    nextAutopayDate: any;
+    obligationAssocID: any;
+    dueDate: any;
+}): JSX.Element;

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

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import { Box, Cluster } from "../../../atoms/layouts";
+import ButtonWithAction from "../../../atoms/button-with-action";
+import { AutopayModalModule } from "./AutopayModalModule";
+import { GHOST_GREY } from "../../../../constants/colors";
+import AmountModule from "./AmountModule";
+var PaymentDetailsActions = function (_a) {
+    var isMobile = _a.isMobile, obligations = _a.obligations, config = _a.config, actions = _a.actions, autoPayEnabled = _a.autoPayEnabled, autoPayAvailable = _a.autoPayAvailable, handleAutopayAction = _a.handleAutopayAction, deactivatePaymentSchedule = _a.deactivatePaymentSchedule, navigateToSettings = _a.navigateToSettings, autoPaySchedule = _a.autoPaySchedule, paymentPlanSchedule = _a.paymentPlanSchedule, isPaymentPlan = _a.isPaymentPlan, nextAutopayDate = _a.nextAutopayDate, obligationAssocID = _a.obligationAssocID, dueDate = _a.dueDate;
+    var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
+    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
+    var _c = useState(false), modalOpen = _c[0], toggleModal = _c[1];
+    var obligationSlug = config.obligationSlug;
+    var createPaymentFromProfile = actions.createPaymentFromProfile, setDetailedObligation = actions.setDetailedObligation, navigateToDetailedObligation = actions.navigateToDetailedObligation;
+    var detailsSlug = config.type === "ACCOUNT"
+        ? "/profile/accounts/details/".concat(obligationSlug)
+        : "/profile/properties/details/".concat(obligationSlug);
+    var handleClick = function (obligations) {
+        setIsLoading(true);
+        createPaymentFromProfile(obligations, config);
+    };
+    var handleDetailsClick = function () {
+        setDetailedObligation(obligations, config, obligationAssocID);
+        navigateToDetailedObligation(detailsSlug);
+    };
+    return (React.createElement(Box, { 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 && (React.createElement(Box, { padding: "16px 24px", borderSize: "1px", borderColor: GHOST_GREY, borderWidthOverride: "0 0 1px 0" },
+            React.createElement(Cluster, { justify: "space-between", align: "center", nowrap: true },
+                React.createElement(AmountModule, { totalAmountDue: obligations.reduce(function (acc, curr) { return acc + curr.amountDue; }, 0), autoPayEnabled: autoPayEnabled, isMobile: isMobile, deactivatePaymentSchedule: deactivatePaymentSchedule, navigateToSettings: navigateToSettings, autoPaySchedule: autoPaySchedule, paymentPlanSchedule: paymentPlanSchedule, isPaymentPlan: isPaymentPlan, nextAutopayDate: nextAutopayDate })))),
+        React.createElement(Box, { padding: isMobile ? "16px" : "0" },
+            React.createElement(Cluster, { justify: isMobile ? "center" : "flex-end", align: "center", childGap: "0" },
+                React.createElement(Box, { padding: isMobile ? "0 8px 0 0" : "0", extraStyles: isMobile && "flex-grow: 1;" },
+                    React.createElement(ButtonWithAction, { variant: "tertiary", text: config.type === "ACCOUNT"
+                            ? "Account Details"
+                            : "Property Details", action: handleDetailsClick, dataQa: "Account Details", extraStyles: isMobile && "flex-grow: 1; width: 100%;" })),
+                React.createElement(Box, { padding: isMobile ? "0 8px 0 0" : "0", extraStyles: isMobile && "flex-grow: 1;" }, autoPayAvailable && !autoPayEnabled ? (React.createElement(ButtonWithAction, { variant: "tertiary", text: "Set Up ".concat(planType), action: function () {
+                        setDetailedObligation(obligations, config, obligationAssocID);
+                        handleAutopayAction();
+                    }, dataQa: "Set Up Autopay", extraStyles: isMobile && "flex-grow: 1; width: 100%;" })) : (React.createElement(AutopayModalModule, { autoPayActive: autoPayEnabled, autoPaySchedule: autoPaySchedule, toggleModal: toggleModal, modalOpen: modalOpen, navigateToSettings: navigateToSettings, deactivatePaymentSchedule: deactivatePaymentSchedule, controlType: "tertiary", isMobile: isMobile, paymentPlanSchedule: paymentPlanSchedule, isPaymentPlan: isPaymentPlan, nextAutopayDate: nextAutopayDate, dueDate: dueDate }))),
+                !isMobile && (React.createElement(Box, { padding: "0" },
+                    React.createElement(ButtonWithAction, { isLoading: isLoading, action: function () { return handleClick(obligations); }, text: "Pay Now", variant: isMobile ? "smallSecondary" : "secondary", dataQa: "Pay Now" })))),
+            isMobile && (React.createElement(Box, { padding: "8px 0 0", width: "100%" },
+                React.createElement(ButtonWithAction, { isLoading: isLoading, action: function () { return handleClick(obligations); }, text: "Pay Now", variant: isMobile ? "smallSecondary" : "secondary", dataQa: "Pay Now", extraStyles: isMobile && "flex-grow: 1; width: 100%; margin: 0;" }))))));
+};
+export default PaymentDetailsActions;

package/dist/src/components/molecules/obligation/modules/RemoveAccountModalModule.d.ts

@@ -0,0 +1,8 @@
+export default RemoveAccountModalModule;
+declare function RemoveAccountModalModule({ agencyName, obligations, removeAccount, accountType, isMobile }: {
+    agencyName: any;
+    obligations?: any[] | undefined;
+    removeAccount: any;
+    accountType: any;
+    isMobile: any;
+}): JSX.Element;

package/dist/src/components/molecules/obligation/modules/RemoveAccountModalModule.js

@@ -0,0 +1,39 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useState } from "react";
+import Modal from "../../modal";
+import ButtonWithAction from "../../../atoms/button-with-action";
+import { Box } from "../../../atoms/layouts";
+var RemoveAccountModalModule = function (_a) {
+    var agencyName = _a.agencyName, _b = _a.obligations, obligations = _b === void 0 ? [] : _b, removeAccount = _a.removeAccount, accountType = _a.accountType, isMobile = _a.isMobile;
+    var _c = useState(false), modalIsOpen = _c[0], setModalIsOpen = _c[1];
+    var lastItem = __spreadArray([], obligations, true).pop();
+    var accounts = obligations.length
+        ? obligations.reduce(function (acc, curr) {
+            var account = curr.details.description;
+            var formattedAccount = curr !== lastItem ? "".concat(account, " and ") : "".concat(account);
+            return formattedAccount === agencyName
+                ? agencyName
+                : acc + formattedAccount;
+        }, "".concat(agencyName, " - "))
+        : "";
+    var identifier = accountType === "Account" && obligations.length > 1
+        ? "accounts"
+        : accountType === "Property" && obligations.length > 1
+            ? "properties"
+            : accountType.toLowerCase();
+    return (React.createElement(Modal, { showModal: function () { return setModalIsOpen(true); }, hideModal: function () { return setModalIsOpen(false); }, modalOpen: modalIsOpen, modalHeaderText: "Remove ".concat(accountType), modalBodyText: "Are you sure you want to remove the ".concat(identifier, " ").concat(accounts, " from your profile? Any autopay scheduled against ").concat(obligations.length > 1 ? "them" : "it", " will be deactivated."), continueButtonText: "Remove", continueAction: function () {
+            removeAccount();
+            setModalIsOpen(false);
+        }, useDangerButton: true },
+        React.createElement(Box, { padding: "0", extraStyles: "flex-grow: 1;" },
+            React.createElement(ButtonWithAction, { text: "Remove", variant: "secondary", action: function () { return setModalIsOpen(true); }, dataQa: "Remove Account", extraStyles: isMobile ? "flex-grow: 1; width: 100%; margin: 0;" : "flex-grow: 1;" }))));
+};
+export default RemoveAccountModalModule;

package/dist/src/components/molecules/obligation/modules/TitleModule.d.ts

@@ -0,0 +1,7 @@
+export default TitleModule;
+declare function TitleModule({ title, subtitle, titleColor, subtitleColor }: {
+    title: any;
+    subtitle: any;
+    titleColor: any;
+    subtitleColor: any;
+}): JSX.Element;

package/dist/src/components/molecules/obligation/modules/TitleModule.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { Box, Stack } from "../../../atoms/layouts";
+import Title from "../../../atoms/title";
+import Detail from "../../../atoms/detail";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../../constants/style_constants";
+var TitleModule = function (_a) {
+    var title = _a.title, subtitle = _a.subtitle, titleColor = _a.titleColor, subtitleColor = _a.subtitleColor;
+    return (React.createElement(Box, { padding: "0" },
+        React.createElement(Stack, { childGap: "0" },
+            React.createElement(Title, { variant: "small", weight: FONT_WEIGHT_SEMIBOLD, color: titleColor, as: "h4", id: "obligation-title" }, title),
+            React.createElement(Detail, { variant: "small", color: subtitleColor, as: "h5", id: "obligation-subtitle" }, subtitle))));
+};
+export default TitleModule;

package/dist/src/components/molecules/obligation/modules/index.d.ts

@@ -0,0 +1,8 @@
+import IconModule from "./IconModule";
+import TitleModule from "./TitleModule";
+import AmountModule from "./AmountModule";
+import PaymentDetailsActions from "./PaymentDetailsActions";
+import InactiveControlsModule from "./InactiveControlsModule";
+import InactiveTitleModule from "./InactiveTitleModule";
+import RemoveAccountModalModule from "./RemoveAccountModalModule";
+export { IconModule, TitleModule, AmountModule, PaymentDetailsActions, InactiveControlsModule, InactiveTitleModule, RemoveAccountModalModule };

package/dist/src/components/molecules/obligation/modules/index.js

@@ -0,0 +1,8 @@
+import IconModule from "./IconModule";
+import TitleModule from "./TitleModule";
+import AmountModule from "./AmountModule";
+import PaymentDetailsActions from "./PaymentDetailsActions";
+import InactiveControlsModule from "./InactiveControlsModule";
+import InactiveTitleModule from "./InactiveTitleModule";
+import RemoveAccountModalModule from "./RemoveAccountModalModule";
+export { IconModule, TitleModule, AmountModule, PaymentDetailsActions, InactiveControlsModule, InactiveTitleModule, RemoveAccountModalModule };

package/dist/src/components/molecules/pagination/Pagination.d.ts

@@ -0,0 +1,14 @@
+export function getPagesPanel(page: any, pagesCount: any): {
+    index: number;
+    isButton: boolean;
+}[];
+export default Pagination;
+declare function Pagination({ pagePrevious, pageNext, setCurrentPage, currentPage, pageCount, numberColor, arrowColor }: {
+    pagePrevious: any;
+    pageNext: any;
+    setCurrentPage: any;
+    currentPage: any;
+    pageCount: any;
+    numberColor: any;
+    arrowColor: any;
+}): JSX.Element;

package/dist/src/components/molecules/pagination/Pagination.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { Cluster, Box } from "../../atoms/layouts";
+import Text from "../../atoms/text";
+import ButtonWithAction from "../../atoms/button-with-action";
+import { ChevronIcon } from "../../atoms/icons";
+import { MATISSE_BLUE, ALABASTER_WHITE } from "../../../constants/colors";
+import { noop } from "../../../util/general";
+var PAGING_SPACE = 2; // how many pages we want to have before/after delimiter
+var PAGING_INIT_SPACE = 3; // first delimiter should appear after 3 pages
+var PrevNextButton = function (_a) {
+    var action = _a.action, type = _a.type, arrowColor = _a.arrowColor, numberColor = _a.numberColor;
+    return (React.createElement(Box, { padding: "0 10px 0", minHeight: "40px", extraStyles: "max-height: 40px;" },
+        React.createElement(ButtonWithAction, { action: action, contentOverride: true, dataQa: type, extraStyles: "\n        min-width: 40px;\n        min-height: 100%;\n        max-height: 40px;\n        padding: 6px;\n        border-radius: 3px;\n        background-color: ".concat(numberColor !== null && numberColor !== void 0 ? numberColor : MATISSE_BLUE, ";\n        border-color: ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : MATISSE_BLUE, "\n      ") },
+            React.createElement(Box, { padding: "0", extraStyles: type === "prev" && "transform: scaleX(-1)" },
+                React.createElement(ChevronIcon, { variant: "darkMode", iconFill: arrowColor })))));
+};
+export var getPagesPanel = function (page, pagesCount) {
+    if (!pagesCount || pagesCount <= 1) {
+        return [];
+    }
+    var lastPageNumber = pagesCount;
+    var space = page === 1 ? PAGING_INIT_SPACE : PAGING_SPACE;
+    var pages = [{ index: 1, isButton: true }];
+    if (page > space + 1) {
+        pages.push({ isDelimiter: true });
+    }
+    for (var j = Math.max(1, page - space) + 1; j < Math.min(lastPageNumber, page + space); j++) {
+        pages.push({ index: j, isButton: true });
+    }
+    if (page < lastPageNumber - space) {
+        pages.push({ isDelimiter: true });
+    }
+    pages.push({ index: lastPageNumber, isButton: true });
+    var activePage = pages.find(function (p) { return p.index === page; });
+    if (activePage) {
+        activePage.active = true;
+    }
+    return pages;
+};
+var Pagination = function (_a) {
+    var pagePrevious = _a.pagePrevious, pageNext = _a.pageNext, setCurrentPage = _a.setCurrentPage, currentPage = _a.currentPage, pageCount = _a.pageCount, numberColor = _a.numberColor, arrowColor = _a.arrowColor;
+    return (React.createElement(Cluster, { justify: "center", childGap: "10px" },
+        currentPage > 1 && (React.createElement(PrevNextButton, { type: "prev", action: pagePrevious, arrowColor: arrowColor, numberColor: numberColor })),
+        getPagesPanel(currentPage, pageCount).map(function (item, index) {
+            return item.isButton ? (React.createElement(Box, { padding: "0", border: item.active && "1px solid ".concat(numberColor !== null && numberColor !== void 0 ? numberColor : MATISSE_BLUE), borderRadius: item.active && "3px", extraStyles: "max-height: 40px;" },
+                React.createElement(ButtonWithAction, { variant: "ghost", key: item.index, text: item.index, disabled: item.active, action: !item.active
+                        ? function () { return setCurrentPage({ pageNumber: item.index }); }
+                        : noop, textExtraStyles: "font-size: 17px; font-weight: 900;", extraStyles: "\n              min-width: 40px; min-height: 100%; padding: 0;\n              &:hover, &:focus {\n                text-decoration: none;\n                > * > span {\n                  text-decoration: none;\n                }\n              }\n              > * > span {\n                color: ".concat(numberColor !== null && numberColor !== void 0 ? numberColor : MATISSE_BLUE, "\n              }\n            }\n            &:hover { ").concat(item.active
+                        ? "cursor: default;"
+                        : "background-color: ".concat(ALABASTER_WHITE), " }\n            "), dataQa: index }, item.index))) : (React.createElement(Box, { padding: "0 10px" },
+                React.createElement(Cluster, { justify: "flex-end" },
+                    React.createElement(Text, { key: index, variant: "pXL", weight: "900", color: numberColor !== null && numberColor !== void 0 ? numberColor : MATISSE_BLUE }, "..."))));
+        }),
+        currentPage < pageCount && (React.createElement(PrevNextButton, { type: "next", action: pageNext, arrowColor: arrowColor, numberColor: numberColor }))));
+};
+export default Pagination;

package/dist/src/components/molecules/pagination/index.d.ts

@@ -0,0 +1,2 @@
+export default Pagination;
+import Pagination from "./Pagination";

package/dist/src/components/molecules/pagination/index.js

@@ -0,0 +1,2 @@
+import Pagination from "./Pagination";
+export default Pagination;

package/dist/src/components/molecules/partial-amount-form/PartialAmountForm.d.ts

@@ -0,0 +1,11 @@
+export default PartialAmountForm;
+declare function PartialAmountForm({ variant, lineItems, maximum, minimum, clearOnDismount, fields, actions, showErrors }: {
+    variant?: string | undefined;
+    lineItems: any;
+    maximum: any;
+    minimum?: number | undefined;
+    clearOnDismount: any;
+    fields: any;
+    actions: any;
+    showErrors?: boolean | undefined;
+}): JSX.Element;

package/dist/src/components/molecules/partial-amount-form/PartialAmountForm.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { required, numberGreaterThanOrEqualTo, numberLessThanOrEqualTo } from "redux-freeform";
+import { displayCurrency } from "../../../util/general";
+import Text from "../../atoms/text";
+import { FormInput, FormInputColumn, FormContainer } from "../../atoms/form-layouts";
+import { moneyFormat } from "../../../util/formats";
+var PartialAmountForm = function (_a) {
+    var _b;
+    var _c = _a.variant, variant = _c === void 0 ? "default" : _c, lineItems = _a.lineItems, maximum = _a.maximum, _d = _a.minimum, minimum = _d === void 0 ? 1 : _d, clearOnDismount = _a.clearOnDismount, fields = _a.fields, actions = _a.actions, _e = _a.showErrors, showErrors = _e === void 0 ? false : _e;
+    if (clearOnDismount) {
+        useEffect(function () { return function () { return actions.form.clear(); }; }, []);
+    }
+    var amountErrors = (_b = {},
+        _b[required.error] = "Amount is required",
+        _b[numberGreaterThanOrEqualTo.error] = "There is a minimum payment of ".concat(displayCurrency(minimum)),
+        _b[numberLessThanOrEqualTo.error] = "There is a maximum payment of ".concat(displayCurrency(maximum)),
+        _b);
+    var lineItemsNew = Array.isArray(lineItems) ? lineItems : [];
+    return (React.createElement(FormContainer, { variant: variant, role: "form", "aria-label": "Other amount" },
+        React.createElement(Text, { variant: "p" }, "Pay a different amount. The total balance will still be due on the same due date."),
+        React.createElement("div", { style: { height: "16px" } }),
+        React.createElement(FormInputColumn, null, lineItemsNew.map(function (li) { return (React.createElement(FormInput, { labelTextWhenNoError: li.description, key: li.id, field: fields[li.id], fieldActions: actions.fields[li.id], showErrors: showErrors, errorMessages: amountErrors, style: { textAlign: "right" }, placeholder: "$0.00", formatter: moneyFormat, isNum: true, decorator: React.createElement(Text, { variant: "p" },
+                "Amount owed:",
+                "  ",
+                React.createElement(Text, { variant: "p", weight: "600" }, displayCurrency(li.amount))) })); }))));
+};
+export default PartialAmountForm;

package/dist/src/components/molecules/partial-amount-form/PartialAmountForm.state.d.ts

@@ -0,0 +1,5 @@
+export function createPartialAmountFormState(lineItems: any, maximum: any, minimum?: number): {
+    partialAmountFormReducer: any;
+    partialAmountFormMapStateToProps: any;
+    partialAmountFormMapDispatchToProps: any;
+};

package/dist/src/components/molecules/partial-amount-form/PartialAmountForm.state.js

@@ -0,0 +1,49 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { createFormState, required, onlyNaturals, validateSum, numberGreaterThanOrEqualTo, numberLessThanOrEqualTo } from "redux-freeform";
+export var createPartialAmountFormState = function (lineItems, maximum, minimum) {
+    if (minimum === void 0) { minimum = 1; }
+    var formConfig = lineItems.reduce(function (acc, item) {
+        var _a;
+        var validators = [
+            required(),
+            validateSum(numberGreaterThanOrEqualTo(minimum), lineItems
+                .filter(function (lineItem) { return lineItem != item; })
+                .reduce(function (acc, curr) { return __spreadArray(__spreadArray([], acc, true), [curr.id], false); }, []))
+        ];
+        if (!!maximum) {
+            validators.push(validateSum(numberLessThanOrEqualTo(maximum), lineItems
+                .filter(function (lineItem) { return lineItem != item; })
+                .reduce(function (acc, curr) { return __spreadArray(__spreadArray([], acc, true), [curr.id], false); }, [])));
+        }
+        return __assign(__assign({}, acc), (_a = {}, _a[item.id] = {
+            validators: validators,
+            constraints: [onlyNaturals()],
+            defaultValue: String(item.amount)
+        }, _a));
+    }, {});
+    var _a = createFormState(formConfig), reducer = _a.reducer, mapStateToProps = _a.mapStateToProps, mapDispatchToProps = _a.mapDispatchToProps;
+    return {
+        partialAmountFormReducer: reducer,
+        partialAmountFormMapStateToProps: mapStateToProps,
+        partialAmountFormMapDispatchToProps: mapDispatchToProps
+    };
+};

package/dist/src/components/molecules/partial-amount-form/index.d.ts

@@ -0,0 +1,3 @@
+import PartialAmountForm from "./PartialAmountForm";
+import { createPartialAmountFormState } from "./PartialAmountForm.state";
+export { PartialAmountForm, createPartialAmountFormState };

package/dist/src/components/molecules/partial-amount-form/index.js

@@ -0,0 +1,3 @@
+import PartialAmountForm from "./PartialAmountForm";
+import { createPartialAmountFormState } from "./PartialAmountForm.state";
+export { PartialAmountForm, createPartialAmountFormState };

package/dist/src/components/molecules/payment-button-bar/PaymentButtonBar.d.ts

@@ -0,0 +1,15 @@
+export default PaymentButtonBar;
+declare function PaymentButtonBar({ forwardButtonText, forwardButtonAction, forwardButtonLoading, forwardButtonVariant, backButtonVariant, backButtonAction, cancelURL, cancelText, redirectURL, redirectText, buttonFlexOverride, hideForwardButton }: {
+    forwardButtonText?: string | undefined;
+    forwardButtonAction: any;
+    forwardButtonLoading: any;
+    forwardButtonVariant?: string | undefined;
+    backButtonVariant?: string | undefined;
+    backButtonAction: any;
+    cancelURL: any;
+    cancelText?: string | undefined;
+    redirectURL: any;
+    redirectText?: string | undefined;
+    buttonFlexOverride: any;
+    hideForwardButton?: boolean | undefined;
+}): JSX.Element;