@thecb/components 7.5.1 → 7.5.2

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

@@ -0,0 +1,24 @@
+import React, { useContext, Fragment } from "react";
+import { ThemeContext } from "styled-components";
+import ButtonWithLink from "../../atoms/button-with-link";
+import ButtonWithAction from "../../atoms/button-with-action";
+import { Box, Cluster } from "../../atoms/layouts";
+import SolidDivider from "../../atoms/solid-divider";
+var PaymentButtonBar = function (_a) {
+    var _b = _a.forwardButtonText, forwardButtonText = _b === void 0 ? "Next" : _b, forwardButtonAction = _a.forwardButtonAction, forwardButtonLoading = _a.forwardButtonLoading, _c = _a.forwardButtonVariant, forwardButtonVariant = _c === void 0 ? "primary" : _c, _d = _a.backButtonVariant, backButtonVariant = _d === void 0 ? "secondary" : _d, backButtonAction = _a.backButtonAction, cancelURL = _a.cancelURL, _e = _a.cancelText, cancelText = _e === void 0 ? "Cancel" : _e, redirectURL = _a.redirectURL, _f = _a.redirectText, redirectText = _f === void 0 ? "Return" : _f, buttonFlexOverride = _a.buttonFlexOverride, _g = _a.hideForwardButton, hideForwardButton = _g === void 0 ? false : _g;
+    var isMobile = useContext(ThemeContext).isMobile;
+    var backButton = !!cancelURL && !!cancelText ? (React.createElement(ButtonWithLink, { text: cancelText, url: cancelURL, variant: backButtonVariant, extraStyles: isMobile && "flex-grow: 1", dataQa: cancelText })) : (backButtonAction && (React.createElement(ButtonWithAction, { text: "Back", variant: backButtonVariant, action: backButtonAction, extraStyles: isMobile && "flex-grow: 1", dataQa: "Back" })));
+    var forwardButton = !!redirectURL ? (React.createElement(ButtonWithLink, { url: redirectURL, text: redirectText, variant: forwardButtonVariant, extraStyles: isMobile && "flex-grow: 1", dataQa: redirectText })) : (forwardButtonAction && (React.createElement(ButtonWithAction, { text: forwardButtonText, variant: forwardButtonVariant, action: forwardButtonAction, isLoading: forwardButtonLoading, extraStyles: isMobile && "flex-grow: 1", dataQa: forwardButtonText })));
+    return (React.createElement(Fragment, null,
+        React.createElement(Box, { padding: "1.25rem 0" }),
+        React.createElement(SolidDivider, null),
+        React.createElement(Box, { padding: "2.5rem 0 3.125rem 0" },
+            React.createElement(Cluster, { justify: buttonFlexOverride
+                    ? buttonFlexOverride
+                    : !!backButton
+                        ? "space-between"
+                        : "flex-end", align: "center" },
+                backButton,
+                !hideForwardButton && React.createElement(Fragment, null, forwardButton)))));
+};
+export default PaymentButtonBar;

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

@@ -0,0 +1,7 @@
+export function paymentButtonBar(): JSX.Element;
+export default story;
+declare const story: {
+    title: any;
+    component: any;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};

package/dist/src/components/molecules/payment-button-bar/PaymentButtonBar.stories.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+import PaymentButtonBar from "./PaymentButtonBar";
+import page from "../../../../.storybook/page";
+export var paymentButtonBar = function () { return (React.createElement(PaymentButtonBar, { forwardButtonText: text("forwardButtonText", "Next", "props"), cancelText: text("cancelText", "Cancel", "props"), backButtonAction: function () { }, forwardButtonAction: function () { }, forwardButtonLoading: boolean("forwardButtonLoading", false, "props") })); };
+var story = page({
+    title: "Components|Molecules/PaymentButtonBar",
+    Component: PaymentButtonBar
+});
+export default story;

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

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

package/dist/src/components/molecules/payment-button-bar/index.js

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

package/dist/src/components/molecules/payment-details/PaymentDetails.d.ts

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

package/dist/src/components/molecules/payment-details/PaymentDetails.js

@@ -0,0 +1,143 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useState, Fragment } from "react";
+import { Stack, Cluster, Box, Motion } from "../../atoms/layouts";
+import { fallbackValues } from "./PaymentDetails.theme";
+import { displayCurrency } from "../../../util/general";
+import { themeComponent } from "../../../util/themeUtils";
+import CollapsibleSection from "../collapsible-section";
+import LabeledAmount from "../../atoms/labeled-amount";
+import LineItem from "../../atoms/line-item";
+import Title from "../../atoms/title";
+import SolidDivider from "../../atoms/solid-divider";
+import { FONT_WEIGHT_BOLD, FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { ATHENS_GREY } from "../../../constants/colors";
+import ButtonWithAction from "../../atoms/button-with-action";
+import Text from "../../atoms/text";
+import { noop } from "../../../util/general";
+var PaymentDetailsContent = function (_a) {
+    var lineItemElems = _a.lineItemElems, feeElems = _a.feeElems, subtotal = _a.subtotal, total = _a.total, variant = _a.variant, themeValues = _a.themeValues, hasVoidablePaymentsSection = _a.hasVoidablePaymentsSection, voidableTransactionDetails = _a.voidableTransactionDetails, voidableAmountPaid = _a.voidableAmountPaid, partialVoidAction = _a.partialVoidAction, remainingBalance = _a.remainingBalance;
+    return (React.createElement(Stack, { childGap: "16px" },
+        lineItemElems,
+        hasVoidablePaymentsSection && (React.createElement(Box, { background: ATHENS_GREY },
+            React.createElement(Text, { variant: "p", color: themeValues.text, weight: "400", fontSize: "0.875rem" }, "Paid"),
+            voidableTransactionDetails.map(function (t) { return (React.createElement(Cluster, { key: t.id, justify: "space-between", align: "center" },
+                React.createElement(Cluster, { padding: "0", align: "center", extraStyles: "font-size: 14px;" },
+                    React.createElement(Box, { padding: "0" }, t.voidText),
+                    React.createElement(ButtonWithAction, { variant: "ghost", action: function () { return partialVoidAction(t); }, text: "Void", padding: "0", extraStyles: "\n                  min-width: 65px; \n                  margin: 0px;\n                  min-height: 0px;\n                ", textExtraStyles: "font-weight: ".concat(FONT_WEIGHT_REGULAR, "; font-size: 14px;") })),
+                React.createElement(Box, { padding: "0", key: t.id }, displayCurrency(t.amount_processed)))); }),
+            React.createElement(Box, { padding: "16px 0px" },
+                React.createElement(SolidDivider, null)),
+            React.createElement(LabeledAmount, { extraStyles: "font-weight: ".concat(FONT_WEIGHT_REGULAR, "; font-size: 14px;"), label: "Amount paid", amount: displayCurrency(voidableAmountPaid) }))),
+        !hasVoidablePaymentsSection && !!lineItemElems.length && (React.createElement(SolidDivider, null) // avoids duplicate dividers -> case of voidable payment section, that acts as divider
+        ),
+        subtotal ? (React.createElement(React.Fragment, null,
+            React.createElement(Box, { padding: "0.5rem 0" },
+                React.createElement(LabeledAmount, { variant: themeValues.labeledAmountSubtotal, label: "Subtotal", amount: displayCurrency(subtotal) }),
+                feeElems),
+            React.createElement(SolidDivider, null))) : (React.createElement(React.Fragment, null)),
+        React.createElement(LabeledAmount, { as: "p", variant: themeValues.labeledAmountTotal, label: hasVoidablePaymentsSection ? "Remaining amount due" : "Total", amount: displayCurrency(typeof remainingBalance === "number" ? remainingBalance : total), extraStyles: variant === "small" && "font-weight: ".concat(FONT_WEIGHT_BOLD, ";") })));
+};
+var Collapsible = function (_a) {
+    var content = _a.content, title = _a.title, supportsTouch = _a.supportsTouch, isOpen = _a.isOpen, setIsOpen = _a.setIsOpen;
+    return (React.createElement(CollapsibleSection, { isMobile: true, supportsTouch: supportsTouch, isOpen: isOpen, title: title, initiallyOpen: false, toggleSection: function () { return setIsOpen(!isOpen); }, customTitle: true, name: "Collapsed Payment Details" },
+        React.createElement(Motion, { variants: {
+                open: { opacity: 1 },
+                closed: { opacity: 0 }
+            }, positionTransition: true, initial: "closed" }, content)));
+};
+var NonCollapsible = function (_a) {
+    var title = _a.title, content = _a.content;
+    return (React.createElement(Stack, null,
+        title,
+        content));
+};
+var PaymentDetails = function (_a) {
+    var _lineItems = _a.lineItems, _fees = _a.fees, subtotal = _a.subtotal, total = _a.total, _b = _a.variant, variant = _b === void 0 ? "default" : _b, _c = _a.hideTitle, hideTitle = _c === void 0 ? false : _c, _d = _a.titleText, titleText = _d === void 0 ? "Payment Details" : _d, _e = _a.initiallyOpen, initiallyOpen = _e === void 0 ? false : _e, _f = _a.collapsibleOnMobile, collapsibleOnMobile = _f === void 0 ? true : _f, isMobile = _a.isMobile, supportsTouch = _a.supportsTouch, themeValues = _a.themeValues, 
+    // partial void section (optional)
+    _g = _a.hasVoidablePaymentsSection, 
+    // partial void section (optional)
+    hasVoidablePaymentsSection = _g === void 0 ? false : _g, _h = _a.voidableTransactionDetails, voidableTransactionDetails = _h === void 0 ? [] : _h, _j = _a.partialVoidAction, partialVoidAction = _j === void 0 ? noop : _j, _k = _a.voidableAmountPaid, voidableAmountPaid = _k === void 0 ? 0 : _k, _l = _a.remainingBalance
+    // end partial void section
+    , remainingBalance = _l === void 0 ? false : _l
+    // end partial void section
+    ;
+    var _m = useState(initiallyOpen), isOpen = _m[0], setIsOpen = _m[1];
+    var fees = _fees
+        .filter(function (fee) { return fee.amount > 0; })
+        .map(function (_a) {
+        var amount = _a.amount, rest = __rest(_a, ["amount"]);
+        return (__assign(__assign({}, rest), { amount: displayCurrency(amount) }));
+    });
+    var lineItems = _lineItems.map(function (_a) {
+        var amount = _a.amount, rest = __rest(_a, ["amount"]);
+        return (__assign(__assign({}, rest), { amount: displayCurrency(amount) }));
+    });
+    var isCollapsible = isMobile && collapsibleOnMobile;
+    var lineItemElems = lineItems.map(function (item, id) { return (React.createElement(LineItem, __assign({ key: id, variant: themeValues.lineItem }, item))); });
+    var feeElems = fees.map(function (fee) { return (React.createElement(Fragment, { key: fee.label },
+        React.createElement(Box, { padding: "4px 0" }),
+        React.createElement(LabeledAmount, __assign({ key: fee.label, variant: themeValues.labeledAmountSubtotal }, fee)))); });
+    var content = isCollapsible ? (React.createElement(Stack, { childGap: "0" },
+        React.createElement(Box, { padding: "4.5px" }),
+        React.createElement(SolidDivider, null),
+        React.createElement(Box, { padding: "8px" }),
+        React.createElement(PaymentDetailsContent, __assign({}, {
+            lineItemElems: lineItemElems,
+            feeElems: feeElems,
+            subtotal: subtotal,
+            total: total,
+            themeValues: themeValues,
+            variant: variant,
+            hasVoidablePaymentsSection: hasVoidablePaymentsSection,
+            voidableTransactionDetails: voidableTransactionDetails,
+            voidableAmountPaid: voidableAmountPaid,
+            partialVoidAction: partialVoidAction,
+            remainingBalance: remainingBalance
+        })))) : (React.createElement(PaymentDetailsContent, __assign({}, {
+        lineItemElems: lineItemElems,
+        feeElems: feeElems,
+        subtotal: subtotal,
+        total: total,
+        themeValues: themeValues,
+        variant: variant,
+        hasVoidablePaymentsSection: hasVoidablePaymentsSection,
+        voidableTransactionDetails: voidableTransactionDetails,
+        voidableAmountPaid: voidableAmountPaid,
+        partialVoidAction: partialVoidAction,
+        remainingBalance: remainingBalance
+    })));
+    var title = hideTitle ? (React.createElement(Fragment, null)) : isCollapsible ? (React.createElement(Box, { width: "100%", padding: "none" },
+        React.createElement(Cluster, { justify: "space-between", align: "center" },
+            React.createElement(Title, { weight: FONT_WEIGHT_BOLD, as: "h1", extraStyles: "font-size: 1.375rem;", id: "payment-details-title" }, titleText),
+            React.createElement(Title, { weight: FONT_WEIGHT_BOLD, as: "p", extraStyles: "font-size: 1.375rem;" }, displayCurrency(total))))) : (React.createElement(Title, { as: "h1", weight: FONT_WEIGHT_BOLD, margin: "1rem 0 0 0", extraStyles: "font-size: 1.75rem;", id: "payment-details-title" }, titleText));
+    return isCollapsible ? (React.createElement(Collapsible, __assign({}, {
+        title: title,
+        content: content,
+        isOpen: isOpen,
+        setIsOpen: setIsOpen,
+        isMobile: isMobile,
+        supportsTouch: supportsTouch
+    }))) : (React.createElement(NonCollapsible, __assign({}, { title: title, content: content })));
+};
+export default themeComponent(PaymentDetails, "PaymentDetails", fallbackValues, "default");

package/dist/src/components/molecules/payment-details/PaymentDetails.stories.d.ts

@@ -0,0 +1,11 @@
+export function paymentDetails(): JSX.Element;
+export function paymentDetailsWithPartialVoids(): JSX.Element;
+export namespace paymentDetailsWithPartialVoids {
+    const storyName: string;
+}
+export default story;
+declare const story: {
+    title: any;
+    component: any;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};

package/dist/src/components/molecules/payment-details/PaymentDetails.stories.js

@@ -0,0 +1,126 @@
+import React from "react";
+import { text, boolean, number } from "@storybook/addon-knobs";
+import PaymentDetails from "./PaymentDetails";
+import page from "../../../../.storybook/page";
+var payment = {
+    fees: [
+        {
+            amount: 1739.12,
+            label: "Service Fee"
+        }
+    ],
+    lineItems: [
+        {
+            amount: 77294,
+            customAttributes: [
+                {
+                    key: "parcel_id",
+                    value: "71-83-630-216-0724"
+                },
+                {
+                    key: "property_city",
+                    value: "North Breana"
+                },
+                {
+                    key: "property_class",
+                    value: "7-91"
+                },
+                {
+                    key: "property_secondary_address",
+                    value: "79"
+                },
+                {
+                    key: "property_street_address",
+                    value: "0034 Bednar Mission"
+                },
+                {
+                    key: "property_zip_code",
+                    value: "80326-6917"
+                },
+                {
+                    key: "tax_rate",
+                    value: "7.076"
+                }
+            ],
+            description: "0034 Bednar Mission Unit: 79",
+            quantity: 1,
+            subDescription: "PIN: 71-83-630-216-0724"
+        }
+    ],
+    subtotal: 77294,
+    total: 79033
+};
+var voidableTransactionDetails = [
+    {
+        status: "successful",
+        id: 3,
+        warnings: [],
+        payment_type: "Card Payment",
+        amount_given: 100,
+        amount_processed: 100,
+        change_due: 0,
+        service_fee: 0,
+        credit_card: {
+            last_four: "0043"
+        },
+        bank_account: {
+            account_number_last_four: null
+        },
+        voidText: "Card ending in 0043"
+    },
+    {
+        status: "successful",
+        id: 5,
+        warnings: [],
+        payment_type: "Card Payment",
+        amount_given: 100,
+        amount_processed: 100,
+        change_due: 0,
+        service_fee: 0,
+        credit_card: {
+            last_four: "0043"
+        },
+        bank_account: {
+            account_number_last_four: null
+        },
+        voidText: "Card ending in 0043"
+    },
+    {
+        status: "successful",
+        id: 6,
+        warnings: [],
+        payment_type: "Check Payment",
+        amount_given: 200,
+        amount_processed: 200,
+        change_due: 0,
+        service_fee: 0,
+        credit_card: {
+            last_four: null
+        },
+        bank_account: {
+            account_number_last_four: "123"
+        },
+        voidText: "Account ending in 123"
+    }
+];
+var lineItems2 = [
+    {
+        amount: 500,
+        description: "Point of Sale Manual Entry - CLERK",
+        quantity: 1,
+        subDescription: "Test description"
+    }
+];
+export var paymentDetails = function () { return (React.createElement(PaymentDetails, { subtotal: text("subtotal", String(payment.subtotal), "props"), lineItems: payment.lineItems, fees: payment.fees, total: text("total", String(payment.total), "props"), collapsibleOnMobile: boolean("collapsibleOnMobile", false, "props"), initiallyOpen: boolean("initiallyOpen", true, "props"), hideTitle: boolean("hideTitle", false, "props") })); };
+export var paymentDetailsWithPartialVoids = function () { return (React.createElement(PaymentDetails, { subtotal: false, lineItems: lineItems2, fees: [], total: 500, collapsibleOnMobile: boolean("collapsibleOnMobile", false, "props"), initiallyOpen: boolean("initiallyOpen", true, "props"), hideTitle: boolean("hideTitle", false, "props"), 
+    // partial voids section (optional)
+    hasVoidablePaymentsSection: boolean("hasVoidablePaymentsSection", true, "props"), voidableTransactionDetails: voidableTransactionDetails, partialVoidAction: function (transaction) {
+        console.log("Your function to void payment id: ".concat(transaction.id));
+    }, voidableAmountPaid: number("voidableAmountPaid", 400), remainingBalance: 100 })); };
+paymentDetailsWithPartialVoids.storyName =
+    "Payment Details (with partial voids)";
+var story = page({
+    title: "Components|Molecules/PaymentDetails",
+    Component: PaymentDetails
+});
+export default story;

package/dist/src/components/molecules/payment-details/PaymentDetails.theme.d.ts

@@ -0,0 +1,30 @@
+export namespace fallbackValues {
+    export { backgroundColor };
+    export { lineItem };
+    export { labeledAmountSubtotal };
+    export { labeledAmountTotal };
+}
+declare namespace backgroundColor {
+    const _default: string;
+    export { _default as default };
+    export const small: string;
+}
+declare namespace lineItem {
+    const _default_1: string;
+    export { _default_1 as default };
+    const small_1: string;
+    export { small_1 as small };
+}
+declare namespace labeledAmountSubtotal {
+    const _default_2: string;
+    export { _default_2 as default };
+    const small_2: string;
+    export { small_2 as small };
+}
+declare namespace labeledAmountTotal {
+    const _default_3: string;
+    export { _default_3 as default };
+    const small_3: string;
+    export { small_3 as small };
+}
+export {};

package/dist/src/components/molecules/payment-details/PaymentDetails.theme.js

@@ -0,0 +1,10 @@
+var backgroundColor = { default: "transparent", small: "transparent" };
+var lineItem = { default: "default", small: "small" };
+var labeledAmountSubtotal = { default: "pL", small: "pS" };
+var labeledAmountTotal = { default: "h6", small: "p" };
+export var fallbackValues = {
+    backgroundColor: backgroundColor,
+    lineItem: lineItem,
+    labeledAmountSubtotal: labeledAmountSubtotal,
+    labeledAmountTotal: labeledAmountTotal
+};

package/dist/src/components/molecules/payment-details/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./PaymentDetails";

package/dist/src/components/molecules/payment-details/index.js

@@ -0,0 +1 @@
+export { default } from "./PaymentDetails";

package/dist/src/components/molecules/payment-form-ach/PaymentFormACH.d.ts

@@ -0,0 +1,16 @@
+export default PaymentFormACH;
+declare function PaymentFormACH({ variant, defaultMethod, toggleCheckbox, hideDefaultPayment, allowBankAccountType, clearOnDismount, fields, actions, showErrors, handleSubmit, showWalletCheckbox, saveToWallet, walletCheckboxMarked }: {
+    variant?: string | undefined;
+    defaultMethod: any;
+    toggleCheckbox: any;
+    hideDefaultPayment?: boolean | undefined;
+    allowBankAccountType: any;
+    clearOnDismount: any;
+    fields: any;
+    actions: any;
+    showErrors: any;
+    handleSubmit?: (() => void) | undefined;
+    showWalletCheckbox: any;
+    saveToWallet: any;
+    walletCheckboxMarked: any;
+}): JSX.Element;

package/dist/src/components/molecules/payment-form-ach/PaymentFormACH.js

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from "react";
+import Checkbox from "../../atoms/checkbox";
+import { required, matchesField, hasLength, isRoutingNumber } from "redux-freeform";
+import FormSelect from "../../atoms/form-select";
+import { FormInput, FormInputColumn, FormContainer } from "../../atoms/form-layouts";
+import AccountAndRoutingModal from "../account-and-routing-modal";
+import { noop } from "../../../util/general";
+var PaymentFormACH = function (_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var _h = _a.variant, variant = _h === void 0 ? "default" : _h, defaultMethod = _a.defaultMethod, toggleCheckbox = _a.toggleCheckbox, _j = _a.hideDefaultPayment, hideDefaultPayment = _j === void 0 ? true : _j, allowBankAccountType = _a.allowBankAccountType, clearOnDismount = _a.clearOnDismount, fields = _a.fields, actions = _a.actions, showErrors = _a.showErrors, _k = _a.handleSubmit, handleSubmit = _k === void 0 ? noop : _k, showWalletCheckbox = _a.showWalletCheckbox, saveToWallet = _a.saveToWallet, walletCheckboxMarked = _a.walletCheckboxMarked;
+    if (clearOnDismount) {
+        useEffect(function () { return function () { return actions.form.clear(); }; }, []);
+    }
+    var _l = useState(false), showRouting = _l[0], toggleShowRouting = _l[1];
+    var _m = useState(false), showAccount = _m[0], toggleShowAccount = _m[1];
+    var nameErrors = (_b = {},
+        _b[required.error] = "Name is required",
+        _b);
+    var routingNumberErrors = (_c = {},
+        _c[required.error] = "Routing number is required",
+        _c[hasLength.error] = "Routing number must be 9 digits",
+        _c[isRoutingNumber.error] = "Invalid routing number",
+        _c);
+    var confirmRoutingNumberErrors = (_d = {},
+        _d[matchesField.error] = "Confirm routing number field must match routing number",
+        _d);
+    var accountNumberErrors = (_e = {},
+        _e[required.error] = "Account number is required",
+        _e[hasLength.error] = "Account number must be between 5 and 17 digits",
+        _e);
+    var confirmAccountNumberErrors = (_f = {},
+        _f[matchesField.error] = "Confirm account number field must match account number",
+        _f);
+    var accountTypeErrors = (_g = {},
+        _g[required.error] = "Account type is required",
+        _g);
+    return (React.createElement(FormContainer, { variant: variant, role: "form", "aria-label": "ACH Payment" },
+        React.createElement(FormInputColumn, null,
+            React.createElement(FormInput, { labelTextWhenNoError: "Name on checking account", errorMessages: nameErrors, field: fields.name, fieldActions: actions.fields.name, showErrors: showErrors, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); }, autocomplete: "name" }),
+            React.createElement(FormInput, { labelTextWhenNoError: "Routing number", errorMessages: routingNumberErrors, field: fields.routingNumber, fieldActions: actions.fields.routingNumber, showErrors: showErrors, isNum: true, helperModal: function () { return (React.createElement(AccountAndRoutingModal, { link: "What is this?", title: "Where is my routing number?", content: "Your routing number is the 9-digit number in the bottom left\n                  corner of your check.", imageType: "Routing", isOpen: showRouting, toggleOpen: toggleShowRouting })); }, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); } }),
+            React.createElement(FormInput, { labelTextWhenNoError: "Confirm routing number", errorMessages: confirmRoutingNumberErrors, field: fields.confirmRoutingNumber, fieldActions: actions.fields.confirmRoutingNumber, showErrors: showErrors, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); }, isNum: true }),
+            React.createElement(FormInput, { labelTextWhenNoError: "Account number", errorMessages: accountNumberErrors, field: fields.accountNumber, fieldActions: actions.fields.accountNumber, showErrors: showErrors, isNum: true, helperModal: function () { return (React.createElement(AccountAndRoutingModal, { link: "What is this?", title: "Where is my account number?", content: "Your account number is usually the 10-digit number in the bottom\n                of your check to the right of the routing number.", imageType: "Account", isOpen: showAccount, toggleOpen: toggleShowAccount })); }, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); } }),
+            React.createElement(FormInput, { labelTextWhenNoError: "Confirm account number", errorMessages: confirmAccountNumberErrors, field: fields.confirmAccountNumber, fieldActions: actions.fields.confirmAccountNumber, showErrors: showErrors, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); }, isNum: true }),
+            allowBankAccountType && (React.createElement(FormSelect, { labelTextWhenNoError: "Account type", options: [
+                    { text: "Select account type", value: "" },
+                    { text: "Checking", value: "CHECKING" },
+                    { text: "Savings", value: "SAVINGS" }
+                ], fieldActions: actions.fields.accountType, showErrors: showErrors, errorMessages: accountTypeErrors, field: fields.accountType })),
+            !hideDefaultPayment && (React.createElement(Checkbox, { title: "Save as Default Payment Method", name: "default-payment-ach", onChange: toggleCheckbox, checked: defaultMethod.value, hidden: hideDefaultPayment })),
+            showWalletCheckbox && (React.createElement(Checkbox, { name: "bank checkbox", title: "Save checking account to wallet", checked: walletCheckboxMarked, onChange: saveToWallet })))));
+};
+export default PaymentFormACH;

package/dist/src/components/molecules/payment-form-ach/PaymentFormACH.state.d.ts

@@ -0,0 +1,3 @@
+export const reducer: any;
+export const mapStateToProps: any;
+export const mapDispatchToProps: any;

package/dist/src/components/molecules/payment-form-ach/PaymentFormACH.state.js

@@ -0,0 +1,28 @@
+var _a;
+import { createFormState, required, matchesField, onlyIntegers, hasLength, isRoutingNumber } from "redux-freeform";
+var formConfig = {
+    name: {
+        validators: [required()]
+    },
+    routingNumber: {
+        validators: [required(), hasLength(9, 9), isRoutingNumber()],
+        constraints: [onlyIntegers(), hasLength(0, 9)]
+    },
+    confirmRoutingNumber: {
+        validators: [matchesField("routingNumber")],
+        constraints: [onlyIntegers(), hasLength(0, 9)]
+    },
+    accountNumber: {
+        validators: [required(), hasLength(5, 17)],
+        constraints: [onlyIntegers(), hasLength(0, 17)]
+    },
+    confirmAccountNumber: {
+        validators: [matchesField("accountNumber")],
+        constraints: [onlyIntegers(), hasLength(0, 17)]
+    },
+    accountType: {
+        defaultValue: "CHECKING",
+        validators: [required()]
+    }
+};
+export var reducer = (_a = createFormState(formConfig), _a.reducer), mapStateToProps = _a.mapStateToProps, mapDispatchToProps = _a.mapDispatchToProps;

package/dist/src/components/molecules/payment-form-ach/PaymentFormACH.stories.d.ts

@@ -0,0 +1,7 @@
+export default story;
+export function paymentFormACH(): JSX.Element;
+declare const story: {
+    title: any;
+    component: any;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};

package/dist/src/components/molecules/payment-form-ach/PaymentFormACH.stories.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
+import PaymentFormACH from "./PaymentFormACH";
+import page from "../../../../.storybook/page";
+import * as PaymentFormACHState from "./PaymentFormACH.state";
+var story = page({
+    title: "Components|Molecules/PaymentFormACH",
+    Component: PaymentFormACH,
+    reducer: PaymentFormACHState.reducer,
+    mapStateToProps: PaymentFormACHState.mapStateToProps,
+    mapDispatchToProps: PaymentFormACHState.mapDispatchToProps
+});
+export default story;
+var ConnectedForm = connect(PaymentFormACHState.mapStateToProps, PaymentFormACHState.mapDispatchToProps)(PaymentFormACH);
+export var paymentFormACH = function () { return (React.createElement(ConnectedForm, { showErrors: boolean("showErrors", false, "props") })); };

package/dist/src/components/molecules/payment-form-ach/index.d.ts

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

package/dist/src/components/molecules/payment-form-ach/index.js

@@ -0,0 +1,6 @@
+import PaymentFormACH from "./PaymentFormACH";
+import { reducer, mapStateToProps, mapDispatchToProps } from "./PaymentFormACH.state";
+PaymentFormACH.reducer = reducer;
+PaymentFormACH.mapStateToProps = mapStateToProps;
+PaymentFormACH.mapDispatchToProps = mapDispatchToProps;
+export default PaymentFormACH;

package/dist/src/components/molecules/payment-form-card/PaymentFormCard.d.ts

@@ -0,0 +1,4 @@
+declare const _default: ({ ...props }: {
+    [x: string]: any;
+}) => JSX.Element;
+export default _default;

package/dist/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -0,0 +1,74 @@
+import React, { useEffect, useContext } from "react";
+import { ThemeContext } from "styled-components";
+import { required, hasLength, matchesRegex, dateAfterToday, isValidMonth } from "redux-freeform";
+import Checkbox from "../../atoms/checkbox";
+import CountryDropdown from "../../atoms/country-dropdown";
+import { checkCardBrand, noop, checkDeniedCards, displayCardBrand } from "../../../util/general";
+import { expirationDateFormat, creditCardFormat, zipFormat } from "../../../util/formats";
+import { FormInput, FormInputColumn, FormContainer, FormInputRow } from "../../atoms/form-layouts";
+import { Box } from "../../atoms/layouts";
+import withWindowSize from "../../withWindowSize";
+var PaymentFormCard = function (_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var _h = _a.variant, variant = _h === void 0 ? "default" : _h, _j = _a.hideZipCode, hideZipCode = _j === void 0 ? false : _j, clearOnDismount = _a.clearOnDismount, fields = _a.fields, actions = _a.actions, showErrors = _a.showErrors, _k = _a.handleSubmit, handleSubmit = _k === void 0 ? noop : _k, showWalletCheckbox = _a.showWalletCheckbox, saveToWallet = _a.saveToWallet, walletCheckboxMarked = _a.walletCheckboxMarked, deniedCards = _a.deniedCards;
+    var isMobile = useContext(ThemeContext).isMobile;
+    useEffect(function () {
+        if (deniedCards) {
+            deniedCards.map(function (card) {
+                return actions.fields.creditCardNumber.addValidator(matchesRegex(checkDeniedCards(card)));
+            });
+        }
+    }, []);
+    useEffect(function () {
+        if (clearOnDismount) {
+            return function () { return actions.form.clear(); };
+        }
+    }, []);
+    var nameOnCardErrors = (_b = {},
+        _b[required.error] = "Name is required",
+        _b);
+    var creditCardNumberErrors = (_c = {},
+        _c[required.error] = "Credit card number is required",
+        _c[hasLength.error] = "Credit card number is invalid",
+        _c[matchesRegex.error] = "".concat(displayCardBrand(fields.creditCardNumber.rawValue), " is not accepted"),
+        _c);
+    var expirationDateErrors = (_d = {},
+        _d[required.error] = "Expiration date is required",
+        _d[hasLength.error] = "Expiration date is invalid",
+        _d[isValidMonth.error] = "Expiration month is invalid",
+        _d[dateAfterToday.error] = "Expiration date is invalid",
+        _d);
+    var cvvErrors = (_e = {},
+        _e[required.error] = "CVV is required",
+        _e[hasLength.error] = "CVV is invalid",
+        _e);
+    var zipCodeErrors = (_f = {},
+        _f[required.error] = "Zip code is required",
+        _f[hasLength.error] = "Zip code is invalid",
+        _f);
+    var countryErrorMessages = (_g = {},
+        _g[required.error] = "Country is required",
+        _g);
+    var isUS = fields.country.rawValue === "US";
+    return (React.createElement(FormContainer, { variant: variant, role: "form", "aria-label": "Card payment" },
+        React.createElement(FormInputColumn, null,
+            !hideZipCode && (React.createElement(CountryDropdown, { labelTextWhenNoError: "Country", errorMessages: countryErrorMessages, field: fields.country, onChange: function (value) {
+                    actions.fields.country.set(value);
+                    // temporary measure to not dirty fields until
+                    // we can write a reset function for fields
+                    if (fields.zipCode.rawValue) {
+                        actions.fields.zipCode.set("");
+                    }
+                }, showErrors: showErrors })),
+            React.createElement(FormInput, { labelTextWhenNoError: "Name on card", errorMessages: nameOnCardErrors, field: fields.nameOnCard, fieldActions: actions.fields.nameOnCard, showErrors: showErrors, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); }, autocomplete: "cc-name" }),
+            React.createElement(FormInput, { labelTextWhenNoError: "Credit card number", errorMessages: creditCardNumberErrors, field: fields.creditCardNumber, fieldActions: actions.fields.creditCardNumber, showErrors: showErrors, formatter: creditCardFormat, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); }, isNum: true, autocomplete: "cc-number" }),
+            React.createElement(FormInputRow, { breakpoint: isMobile ? "1000rem" : "21rem", childGap: isMobile ? "0rem" : "1rem" },
+                React.createElement(FormInput, { labelTextWhenNoError: "Expiration date (MM/YY)", errorMessages: expirationDateErrors, field: fields.expirationDate, fieldActions: actions.fields.expirationDate, showErrors: showErrors, formatter: expirationDateFormat, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); }, isNum: true, removeFromValue: /\//, autocomplete: "cc-exp" }),
+                React.createElement(FormInput, { labelTextWhenNoError: "CVV", errorMessages: cvvErrors, field: fields.cvv, fieldActions: actions.fields.cvv, showErrors: showErrors, isNum: true, background: checkCardBrand(fields.creditCardNumber.rawValue) == "AMEX"
+                        ? "/AmexCVVHint.svg"
+                        : "/CVVHint.svg", onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); }, autocomplete: "cc-csc" })),
+            !hideZipCode && (React.createElement(Box, { padding: isMobile ? "0" : "0 0.5rem 0 0", width: isMobile ? "100%" : "50%" },
+                React.createElement(FormInput, { isNum: isUS, formatter: isUS ? zipFormat : null, labelTextWhenNoError: "Zip code", errorMessages: zipCodeErrors, field: fields.zipCode, fieldActions: actions.fields.zipCode, showErrors: showErrors, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); }, autocomplete: "billing postal-code" }))),
+            showWalletCheckbox && (React.createElement(Checkbox, { name: "credit card checkbox", title: "Save credit card to wallet", checked: walletCheckboxMarked, onChange: saveToWallet })))));
+};
+export default withWindowSize(PaymentFormCard);

package/dist/src/components/molecules/payment-form-card/PaymentFormCard.state.d.ts

@@ -0,0 +1,3 @@
+export const reducer: any;
+export const mapStateToProps: any;
+export const mapDispatchToProps: any;