@thecb/components 2.2.1 → 3.1.1

package/src/components/molecules/editable-list/EditableList.styled.js

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+import { WHITE } from "../../../constants/colors";
+
+export const EditableListItem = styled.div`
+  box-sizing: border-box;
+  background: ${WHITE};
+  height: ${({ listItemSize }) => (listItemSize === "big" ? "120px" : "72px")};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem;
+  :not(:last-child),
+  :not(:first-child) {
+    box-shadow: inset 0px -1px 0px 0px rgb(202, 206, 216);
+  }
+  :first-child {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  :last-child {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    box-shadow: none;
+  }
+`;
+
+export const EditableListItemControls = styled.div`
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+`;

package/src/components/molecules/editable-list/index.js

@@ -0,0 +1,3 @@
+import EditableList from "./EditableList";
+
+export default EditableList;

package/src/components/molecules/editable-table/EditableTable.js

@@ -0,0 +1,30 @@
+import React, { Fragment } from "react";
+import { EditableTableContainer, TableWrapper } from "./EditableTable.styled";
+import { Box } from "../../atoms/layouts";
+import Paragraph from "../../atoms/paragraph";
+import { GHOST_GREY } from "../../../constants/colors";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import { safeChildren } from "../../../util/general";
+
+const EditableTable = ({ title, renderItem, items, isMobile }) => {
+  const titleChild = title && (
+    <Box
+      padding={"0 0 0.5rem 0.5rem"}
+      borderSize="1px"
+      borderColor={GHOST_GREY}
+      borderWidthOverride="0 0 1px 0"
+    >
+      <Paragraph variant="pL" weight={FONT_WEIGHT_SEMIBOLD}>
+        {title}
+      </Paragraph>
+    </Box>
+  );
+  return (
+    <EditableTableContainer isMobile={isMobile}>
+      {safeChildren(titleChild, <Fragment />)}
+      <TableWrapper>{renderItem(items)}</TableWrapper>
+    </EditableTableContainer>
+  );
+};
+
+export default EditableTable;

package/src/components/molecules/editable-table/EditableTable.styled.js

@@ -0,0 +1,80 @@
+import styled from "styled-components";
+import {
+  BRIGHT_GREY,
+  STORM_GREY,
+  GHOST_GREY,
+  MATISSE_BLUE
+} from "../../../constants/colors";
+
+export const EditableTableContainer = styled.div`
+  display: ${({ hide }) => (hide ? "none" : "flex")};
+  flex-direction: column;
+  flex: 1;
+`;
+
+export const EditableTableListItem = styled.div`
+  width: 100%;
+  display: flex;
+  ${({ isMobile }) => isMobile && "justify-content: center"};
+  align-items: ${({ isMobile }) => (isMobile ? "flex-start" : "center")};
+  flex-direction: ${({ isMobile }) => (isMobile ? "column" : "row")};
+  flex: 1;
+  ${({ isMobile }) =>
+    isMobile ? "padding: 1rem 0.5rem" : "padding: 0 0.5rem"};
+`;
+
+export const EditableListItemControls = styled.div`
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+`;
+
+export const EditableListAction = styled.div`
+  color: ${MATISSE_BLUE};
+  align-items: center;
+  font-size: 1rem;
+  padding-right: 1rem;
+  cursor: pointer;
+  display: ${({ hide }) => (hide ? "none" : "flex")};
+`;
+
+export const ItemWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  width: 100%;
+  border-bottom: 1px solid ${GHOST_GREY};
+`;
+
+export const ActionWrapper = styled.div`
+  display: flex;
+  align-self: center;
+  justify-content: flex-end;
+  ${({ isMobile }) => isMobile && `display: none`};
+  flex: 1;
+`;
+
+export const TableItemKey = styled.div`
+  display: flex;
+  ${({ isMobile }) => !isMobile && "flex: 1"};
+  ${({ isMobile }) => isMobile && "align-items: center"};
+  ${({ isMobile }) => !isMobile && "padding: 1.25rem 0"};
+  font-size: ${({ isMobile }) => (isMobile ? "1rem" : "1.125rem")};
+  color: ${STORM_GREY};
+`;
+
+export const TableItemValue = styled.div`
+  display: flex;
+  ${({ isMobile }) => !isMobile && "flex: 1"};
+  ${({ isMobile }) => !isMobile && "padding: 1.25rem 0"};
+  ${({ isMobile }) => isMobile && "align-items: center"};
+  font-size: ${({ isMobile }) => (isMobile ? "1.125rem" : "1.0625rem")};
+  color: ${BRIGHT_GREY};
+`;
+
+export const TableWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  width: 100%;
+`;

package/src/components/molecules/editable-table/TableListItem.js

@@ -0,0 +1,64 @@
+import React, { Fragment } from "react";
+import {
+  EditableTableListItem,
+  EditableListAction,
+  ItemWrapper,
+  ActionWrapper,
+  TableItemKey,
+  TableItemValue
+} from "./EditableTable.styled";
+import { Box } from "../../atoms/layouts";
+import Text from "../../atoms/text";
+import { CHARADE_GREY } from "../../../constants/colors";
+
+const TableListItem = ({
+  title,
+  value,
+  canEdit = false,
+  canRemove = false,
+  isMobile
+}) => (
+  <Box
+    padding="0px"
+    extraStyles={`&:last-child {
+    > * {
+      border-bottom: none;
+    }
+  }`}
+  >
+    <ItemWrapper>
+      <EditableTableListItem isMobile={isMobile}>
+        <TableItemKey isMobile={isMobile}>
+          <Text variant="pS" color={CHARADE_GREY} aria-level="3">
+            {title}
+          </Text>
+        </TableItemKey>
+        <TableItemValue isMobile={isMobile}>
+          <Text variant="p" color={CHARADE_GREY}>
+            {value}
+          </Text>
+        </TableItemValue>
+        {canRemove || canEdit ? (
+          <ActionWrapper isMobile={isMobile}>
+            <EditableListAction
+              hide={!canRemove}
+              onClick={() => console.log("Remove Item Coming Soon...")}
+            >
+              Remove
+            </EditableListAction>
+            <EditableListAction
+              hide={!canEdit}
+              onClick={() => console.log("Edit Item Coming Soon...")}
+            >
+              Edit
+            </EditableListAction>
+          </ActionWrapper>
+        ) : (
+          <Fragment />
+        )}
+      </EditableTableListItem>
+    </ItemWrapper>
+  </Box>
+);
+
+export default TableListItem;

package/src/components/molecules/editable-table/index.js

@@ -0,0 +1,4 @@
+import EditableTable from "./EditableTable";
+import TableListItem from "./TableListItem";
+
+export { EditableTable, TableListItem };

package/src/components/molecules/email-form/EmailForm.js

@@ -5,6 +5,7 @@ import {
   FormContainer,
   FormInputColumn
 } from "../../atoms/form-layouts";
+import { noop } from "../../../util/general";
 
 const EmailForm = ({
   variant = "default",
@@ -12,7 +13,7 @@ const EmailForm = ({
   fields,
   actions,
   showErrors,
-  handleSubmit
+  handleSubmit = noop
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);

package/src/components/molecules/email-form/index.js

@@ -2,7 +2,7 @@ import EmailForm from "./EmailForm";
 import {
   reducer,
   mapStateToProps,
-  mapDispatchToProps,
+  mapDispatchToProps
 } from "./EmailForm.state";
 
 EmailForm.reducer = reducer;

package/src/components/molecules/forgot-password-form/ForgotPasswordForm.js

@@ -1,13 +1,14 @@
 import React, { useEffect } from "react";
 import { required, isProbablyEmail } from "redux-freeform";
 import { FormInput } from "../../atoms/form-layouts";
+import { noop } from "../../../util/general";
 
 const ForgotPasswordForm = ({
   fields,
   actions,
   clearOnDismount,
   showErrors,
-  handleSubmit
+  handleSubmit = noop
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);

package/src/components/molecules/forgot-password-form/index.js

@@ -2,7 +2,7 @@ import ForgotPasswordForm from "./ForgotPasswordForm";
 import {
   reducer,
   mapStateToProps,
-  mapDispatchToProps,
+  mapDispatchToProps
 } from "./ForgotPasswordForm.state";
 
 ForgotPasswordForm.reducer = reducer;

package/src/components/molecules/index.js

@@ -2,6 +2,8 @@ export { default as AddressForm } from "./address-form";
 export { default as ChangePasswordForm } from "./change-password-form";
 export { default as CollapsibleSection } from "./collapsible-section";
 export { default as EditNameForm } from "./edit-name-form";
+export { default as EditableList } from "./editable-list";
+export * from "./editable-table";
 export { default as EmailForm } from "./email-form";
 export { default as ForgotPasswordForm } from "./forgot-password-form";
 export { default as HighlightTabRow } from "./highlight-tab-row";
@@ -10,8 +12,11 @@ export { default as Modal } from "./modal";
 export { default as Module } from "./module";
 export * from "./nav-menu";
 export { default as Obligation } from "./obligation";
+export * from "./partial-amount-form";
 export { default as PaymentButtonBar } from "./payment-button-bar";
 export { default as PaymentDetails } from "./payment-details";
+export { default as PaymentFormACH } from "./payment-form-ach";
+export { default as PaymentFormCard } from "./payment-form-card";
 export { default as PhoneForm } from "./phone-form";
 export { default as RadioSection } from "./radio-section";
 export { default as RegistrationForm } from "./registration-form";

package/src/components/molecules/login-form/LoginForm.js

@@ -1,13 +1,14 @@
 import React, { useEffect } from "react";
 import { required, isProbablyEmail } from "redux-freeform";
 import { FormInput, FormInputColumn } from "../../atoms/form-layouts";
+import { noop } from "../../../util/general";
 
 const LoginForm = ({
   clearOnDismount,
   fields,
   actions,
   showErrors,
-  handleSubmit
+  handleSubmit = noop
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);

package/src/components/molecules/login-form/index.js

@@ -2,7 +2,7 @@ import LoginForm from "./LoginForm";
 import {
   reducer,
   mapStateToProps,
-  mapDispatchToProps,
+  mapDispatchToProps
 } from "./LoginForm.state";
 
 LoginForm.reducer = reducer;

package/src/components/molecules/module/Module.js

@@ -1,8 +1,6 @@
-import React from "react";
-
+import React, { Fragment } from "react";
 import Heading from "../../atoms/heading";
 import { Box } from "../../atoms/layouts";
-import { Fragment } from "react";
 
 const Module = ({
   heading,

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

@@ -0,0 +1,73 @@
+import React from "react";
+import { required, numberGreaterThan, numberLessThan } 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";
+
+const PartialAmountForm = ({
+  variant = "default",
+  lineItems,
+  maximum,
+  minimum = 1,
+  clearOnDismount,
+  fields,
+  actions,
+  showErrors = false
+}) => {
+  if (clearOnDismount) {
+    useEffect(() => () => actions.form.clear(), []);
+  }
+
+  const amountErrors = {
+    [required.error]: "Amount is required",
+    [numberGreaterThan.error]: `Your total payment must be greater than ${displayCurrency(
+      minimum
+    )}`,
+    [numberLessThan.error]: `Your total payment must be less than ${displayCurrency(
+      maximum
+    )}`
+  };
+
+  const lineItemsNew = Array.isArray(lineItems) ? lineItems : [];
+  return (
+    <FormContainer variant={variant} role="form" aria-label="Partial amount">
+      <Text variant="p">
+        Pay a portion of your current bill. The remaining balance will still be
+        due on the same due date.
+      </Text>
+      <div style={{ height: "16px" }}></div>
+      <FormInputColumn>
+        {lineItemsNew.map(li => (
+          <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}
+            decorator={
+              <Text variant="p">
+                Amount owed:{"  "}
+                {
+                  <Text variant="p" weight="600">
+                    {displayCurrency(li.amount)}
+                  </Text>
+                }
+              </Text>
+            }
+          />
+        ))}
+      </FormInputColumn>
+    </FormContainer>
+  );
+};
+
+export default PartialAmountForm;

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

@@ -0,0 +1,51 @@
+import {
+  createFormState,
+  required,
+  onlyNaturals,
+  validateSum,
+  numberGreaterThan,
+  numberLessThan
+} from "redux-freeform";
+
+export const createPartialAmountFormState = (
+  lineItems,
+  maximum,
+  minimum = 1
+) => {
+  const formConfig = lineItems.reduce((acc, item) => {
+    const validators = [
+      required(),
+      validateSum(
+        numberGreaterThan(minimum),
+        lineItems
+          .filter(lineItem => lineItem != item)
+          .reduce((acc, curr) => [...acc, curr.id], [])
+      )
+    ];
+    if (!!maximum) {
+      validators.push(
+        validateSum(
+          numberLessThan(maximum),
+          lineItems
+            .filter(lineItem => lineItem != item)
+            .reduce((acc, curr) => [...acc, curr.id], [])
+        )
+      );
+    }
+    return {
+      ...acc,
+      [item.id]: {
+        validators: validators,
+        constraints: [onlyNaturals()]
+      }
+    };
+  }, {});
+  const { reducer, mapStateToProps, mapDispatchToProps } = createFormState(
+    formConfig
+  );
+  return {
+    partialAmountFormReducer: reducer,
+    partialAmountFormMapStateToProps: mapStateToProps,
+    partialAmountFormMapDispatchToProps: mapDispatchToProps
+  };
+};

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

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

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

@@ -0,0 +1,189 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import { ifElse, isNil, always } from "ramda";
+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 Alert from "../../atoms/alert";
+import AccountAndRoutingModal from "../account-and-routing-modal";
+import { displayCurrency, noop } from "../../../util/general";
+
+const ModalWrapper = styled.div``;
+
+const PaymentFormACH = ({
+  variant = "default",
+  defaultMethod,
+  toggleCheckbox,
+  hideDefaultPayment = true,
+  allowBankAccountType,
+  clearOnDismount,
+  fields,
+  actions,
+  showErrors,
+  fees,
+  handleSubmit = noop
+}) => {
+  if (clearOnDismount) {
+    useEffect(() => () => actions.form.clear(), []);
+  }
+  const [showRouting, toggleShowRouting] = useState(false);
+  const [showAccount, toggleShowAccount] = useState(false);
+
+  const nameErrors = {
+    [required.error]: "Name is required"
+  };
+  const routingNumberErrors = {
+    [required.error]: "Routing number is required",
+    [hasLength.error]: "Routing number must be 9 digits",
+    [isRoutingNumber.error]: "Invalid routing number"
+  };
+  const confirmRoutingNumberErrors = {
+    [matchesField.error]:
+      "Confirm routing number field must match routing number"
+  };
+  const accountNumberErrors = {
+    [required.error]: "Account number is required",
+    [hasLength.error]: "Account number must be between 6 and 17 digits"
+  };
+  const confirmAccountNumberErrors = {
+    [matchesField.error]:
+      "Confirm account number field must match account number"
+  };
+  const accountTypeErrors = {
+    [required.error]: "Account type is required"
+  };
+
+  return (
+    <FormContainer variant={variant} role="form" aria-label="ACH Payment">
+      <FormInputColumn>
+        <FormInput
+          labelTextWhenNoError="Name on bank account"
+          errorMessages={nameErrors}
+          field={fields.name}
+          fieldActions={actions.fields.name}
+          showErrors={showErrors}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
+        <FormInput
+          labelTextWhenNoError="Routing number"
+          errorMessages={routingNumberErrors}
+          field={fields.routingNumber}
+          fieldActions={actions.fields.routingNumber}
+          showErrors={showErrors}
+          helperModal={() => (
+            <ModalWrapper
+              tabIndex="0"
+              onKeyDown={e =>
+                e.key === "Enter" && toggleShowAccount(!showRouting)
+              }
+            >
+              <AccountAndRoutingModal
+                link="What is this?"
+                title="Where is my routing number?"
+                content="Your routing number is the 9-digit number in the bottom left
+                  corner of your check."
+                imageType="Routing"
+                isOpen={showRouting}
+                toggleOpen={toggleShowRouting}
+              />
+            </ModalWrapper>
+          )}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
+        <FormInput
+          labelTextWhenNoError="Confirm routing number"
+          errorMessages={confirmRoutingNumberErrors}
+          field={fields.confirmRoutingNumber}
+          fieldActions={actions.fields.confirmRoutingNumber}
+          showErrors={showErrors}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
+        <FormInput
+          labelTextWhenNoError="Account number"
+          errorMessages={accountNumberErrors}
+          field={fields.accountNumber}
+          fieldActions={actions.fields.accountNumber}
+          showErrors={showErrors}
+          helperModal={() => (
+            <ModalWrapper
+              tabIndex="0"
+              onKeyDown={e =>
+                e.key === "Enter" && toggleShowAccount(!showAccount)
+              }
+            >
+              <AccountAndRoutingModal
+                link="What is this?"
+                title="Where is my account number?"
+                content="Your account number is usually the 10-digit number in the bottom
+                of your check to the right of the routing number."
+                imageType="Account"
+                isOpen={showAccount}
+                toggleOpen={toggleShowAccount}
+              />
+            </ModalWrapper>
+          )}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
+        <FormInput
+          labelTextWhenNoError="Confirm account number"
+          errorMessages={confirmAccountNumberErrors}
+          field={fields.confirmAccountNumber}
+          fieldActions={actions.fields.confirmAccountNumber}
+          showErrors={showErrors}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
+        {allowBankAccountType && (
+          <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 && (
+          <Checkbox
+            title="Save as Default Payment Method"
+            name="default-payment-ach"
+            onChange={toggleCheckbox}
+            checked={defaultMethod.value}
+            hidden={hideDefaultPayment}
+          />
+        )}
+        {!!fees?.value && (
+          <Alert
+            heading="Processing Fee"
+            text={`There is a processing fee of ${
+              fees.type === "FLAT"
+                ? `${displayCurrency(fees.value)}`
+                : `${fees.value * 100}%`
+            } ${ifElse(
+              isNil,
+              always(""),
+              a => `with a minimum of ${displayCurrency(a)} `
+            )(fees.minimumInCents)}on all bank account payments.`}
+            variant="info"
+            showQuitLink={false}
+          />
+        )}
+      </FormInputColumn>
+    </FormContainer>
+  );
+};
+
+export default PaymentFormACH;