@thecb/components 7.5.2 → 7.6.0

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

@@ -1,24 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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

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

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

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

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

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

@@ -1,143 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,126 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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

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

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

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

@@ -1,16 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

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

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

@@ -1,28 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

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

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

@@ -1,6 +0,0 @@
-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

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

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

@@ -1,74 +0,0 @@
-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

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