@thecb/components 4.1.2 → 4.1.6-beta.0

package/src/components/atoms/icons/index.js

@@ -24,6 +24,20 @@ import AutopayOnIcon from "./AutopayOnIcon";
 import NotFoundIcon from "./NotFoundIcon";
 import SearchIcon from "./SearchIcon";
 import WalletIcon from "./WalletIcon";
+import AchReturnIcon from "./AchReturnIcon";
+import AllocatedIcon from "./AllocatedIcon";
+import CalendarIcon from "./CalendarIcon";
+import ChargebackIcon from "./ChargebackIcon";
+import ChargebackReversalIcon from "./ChargebackReversalIcon";
+import DuplicateIcon from "./DuplicateIcon";
+import ErroredIcon from "./ErroredIcon";
+import FailedIcon from "./FailedIcon";
+import PendingIcon from "./PendingIcon";
+import RefundIcon from "./RefundIcon";
+import RejectedIcon from "./RejectedIcon";
+import RejectedVelocityIcon from "./RejectedVelocityIcon";
+import SuccessfulIcon from "./SuccessfulIcon";
+import VoidedIcon from "./VoidedIcon";
 
 export {
   AccountsIcon,
@@ -51,5 +65,19 @@ export {
   AutopayOnIcon,
   NotFoundIcon,
   SearchIcon,
-  WalletIcon
+  WalletIcon,
+  AchReturnIcon,
+  AllocatedIcon,
+  CalendarIcon,
+  ChargebackIcon,
+  ChargebackReversalIcon,
+  DuplicateIcon,
+  ErroredIcon,
+  FailedIcon,
+  PendingIcon,
+  RefundIcon,
+  RejectedIcon,
+  RejectedVelocityIcon,
+  SuccessfulIcon,
+  VoidedIcon
 };

package/src/components/molecules/address-form/AddressForm.js

@@ -1,6 +1,8 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { required, hasLength } from "redux-freeform";
+import styled from "styled-components";
 import StateProvinceDropdown from "../../atoms/state-province-dropdown";
+import Checkbox from "../../atoms/checkbox";
 // import CountryDropdown from "../../atoms/country-dropdown";
 import { zipFormat } from "../../../util/formats";
 import { noop } from "../../../util/general";
@@ -10,14 +12,28 @@ import {
   FormInputColumn
 } from "../../atoms/form-layouts";
 
+const CheckboxWrapper = styled.div`
+  outline: none;
+`;
+
 const AddressForm = ({
   variant = "default",
   fields,
   actions,
   clearOnDismount,
   showErrors,
-  handleSubmit = noop
+  handleSubmit = noop,
+  showWalletCheckbox,
+  saveToWallet,
+  walletCheckboxMarked
 }) => {
+  const [checkboxFocused, focusCheckbox] = useState(false);
+
+  const handleClick = (e, func) => {
+    if (e?.keyCode === 13) {
+      func();
+    }
+  };
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
@@ -103,6 +119,22 @@ const AddressForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         />
+        {showWalletCheckbox && (
+          <CheckboxWrapper
+            tabIndex="0"
+            onFocus={() => focusCheckbox(true)}
+            onBlur={() => focusCheckbox(false)}
+            onKeyDown={e => handleClick(e, saveToWallet)}
+          >
+            <Checkbox
+              name="address checkbox"
+              title="Save address to wallet"
+              checked={walletCheckboxMarked}
+              onChange={saveToWallet}
+              focused={checkboxFocused}
+            />
+          </CheckboxWrapper>
+        )}
       </FormInputColumn>
     </FormContainer>
   );

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

@@ -1,13 +1,19 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
 import { required, isProbablyEmail } from "redux-freeform";
 import {
   FormInput,
   FormContainer,
   FormInputColumn
 } from "../../atoms/form-layouts";
+import Checkbox from "../../atoms/checkbox";
 import Paragraph from "../../atoms/paragraph";
 import { noop } from "../../../util/general";
 
+const CheckboxWrapper = styled.div`
+  outline: none;
+`;
+
 const EmailForm = ({
   variant = "default",
   clearOnDismount,
@@ -15,8 +21,18 @@ const EmailForm = ({
   actions,
   showErrors,
   guestCheckout,
-  handleSubmit = noop
+  handleSubmit = noop,
+  showWalletCheckbox,
+  saveToWallet,
+  walletCheckboxMarked
 }) => {
+  const [checkboxFocused, focusCheckbox] = useState(false);
+  const handleClick = (e, func) => {
+    if (e?.keyCode === 13) {
+      func();
+    }
+  };
+
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
@@ -42,6 +58,22 @@ const EmailForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         />
+        {showWalletCheckbox && (
+          <CheckboxWrapper
+            tabIndex="0"
+            onFocus={() => focusCheckbox(true)}
+            onBlur={() => focusCheckbox(false)}
+            onKeyDown={e => handleClick(e, saveToWallet)}
+          >
+            <Checkbox
+              name="email checkbox"
+              title="Save email address to wallet"
+              checked={walletCheckboxMarked}
+              onChange={saveToWallet}
+              focused={checkboxFocused}
+            />
+          </CheckboxWrapper>
+        )}
       </FormInputColumn>
     </FormContainer>
   );

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

@@ -10,6 +10,8 @@ const PaymentButtonBar = ({
   forwardButtonText = "Next",
   forwardButtonAction,
   forwardButtonLoading,
+  forwardButtonVariant = "primary",
+  backButtonVariant = "secondary",
   backButtonAction,
   cancelURL,
   cancelText = "Cancel",
@@ -23,7 +25,7 @@ const PaymentButtonBar = ({
       <ButtonWithLink
         text={cancelText}
         url={cancelURL}
-        variant="secondary"
+        variant={backButtonVariant}
         extraStyles={isMobile && "flex-grow: 1"}
         dataQa={cancelText}
       />
@@ -31,7 +33,7 @@ const PaymentButtonBar = ({
       backButtonAction && (
         <ButtonWithAction
           text="Back"
-          variant="secondary"
+          variant={backButtonVariant}
           action={backButtonAction}
           extraStyles={isMobile && "flex-grow: 1"}
           dataQa="Back"
@@ -43,7 +45,7 @@ const PaymentButtonBar = ({
     <ButtonWithLink
       url={redirectURL}
       text={redirectText}
-      variant="primary"
+      variant={forwardButtonVariant}
       extraStyles={isMobile && "flex-grow: 1"}
       dataQa={redirectText}
     />
@@ -51,7 +53,7 @@ const PaymentButtonBar = ({
     forwardButtonAction && (
       <ButtonWithAction
         text={forwardButtonText}
-        variant="primary"
+        variant={forwardButtonVariant}
         action={forwardButtonAction}
         isLoading={forwardButtonLoading}
         extraStyles={isMobile && "flex-grow: 1"}

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

@@ -18,6 +18,10 @@ import { noop } from "../../../util/general";
 
 const ModalWrapper = styled.div``;
 
+const CheckboxWrapper = styled.div`
+  outline: none;
+`;
+
 const PaymentFormACH = ({
   variant = "default",
   defaultMethod,
@@ -28,8 +32,17 @@ const PaymentFormACH = ({
   fields,
   actions,
   showErrors,
-  handleSubmit = noop
+  handleSubmit = noop,
+  showWalletCheckbox,
+  saveToWallet,
+  walletCheckboxMarked
 }) => {
+  const [checkboxFocused, focusCheckbox] = useState(false);
+  const handleClick = (e, func) => {
+    if (e?.keyCode === 13) {
+      func();
+    }
+  };
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
@@ -162,6 +175,22 @@ const PaymentFormACH = ({
             hidden={hideDefaultPayment}
           />
         )}
+        {showWalletCheckbox && (
+          <CheckboxWrapper
+            tabIndex="0"
+            onFocus={() => focusCheckbox(true)}
+            onBlur={() => focusCheckbox(false)}
+            onKeyDown={e => handleClick(e, saveToWallet)}
+          >
+            <Checkbox
+              name="bank checkbox"
+              title="Save bank account to wallet"
+              checked={walletCheckboxMarked}
+              onChange={saveToWallet}
+              focused={checkboxFocused}
+            />
+          </CheckboxWrapper>
+        )}
       </FormInputColumn>
     </FormContainer>
   );

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

@@ -1,5 +1,7 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
 import { required, hasLength, matchesRegex } from "redux-freeform";
+import Checkbox from "../../atoms/checkbox";
 import { checkCardBrand, noop } from "../../../util/general";
 import { expirationDateFormat, creditCardFormat } from "../../../util/formats";
 import {
@@ -10,6 +12,10 @@ import {
 } from "../../atoms/form-layouts";
 import { Box } from "../../atoms/layouts";
 
+const CheckboxWrapper = styled.div`
+  outline: none;
+`;
+
 const nameOnCardErrors = {
   [required.error]: "Name is required"
 };
@@ -39,8 +45,17 @@ const PaymentFormCard = ({
   actions,
   showErrors,
   handleSubmit = noop,
-  isMobile
+  isMobile,
+  showWalletCheckbox,
+  saveToWallet,
+  walletCheckboxMarked
 }) => {
+  const [checkboxFocused, focusCheckbox] = useState(false);
+  const handleClick = (e, func) => {
+    if (e?.keyCode === 13) {
+      func();
+    }
+  };
   useEffect(() => {
     if (clearOnDismount) {
       return () => actions.form.clear();
@@ -105,6 +120,22 @@ const PaymentFormCard = ({
             />
           </Box>
         )}
+        {showWalletCheckbox && (
+          <CheckboxWrapper
+            tabIndex="0"
+            onFocus={() => focusCheckbox(true)}
+            onBlur={() => focusCheckbox(false)}
+            onKeyDown={e => handleClick(e, saveToWallet)}
+          >
+            <Checkbox
+              name="credit card checkbox"
+              title="Save credit card to wallet"
+              checked={walletCheckboxMarked}
+              onChange={saveToWallet}
+              focused={checkboxFocused}
+            />
+          </CheckboxWrapper>
+        )}
       </FormInputColumn>
     </FormContainer>
   );

package/src/components/molecules/phone-form/PhoneForm.js

@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import { phoneFormats, formatDelimiter } from "../../../util/formats";
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
 import { required, hasLength } from "redux-freeform";
 import { createFormat } from "formatted-input";
 import {
@@ -7,7 +7,13 @@ import {
   FormContainer,
   FormInputColumn
 } from "../../atoms/form-layouts";
+import Checkbox from "../../atoms/checkbox";
 import { noop } from "../../../util/general";
+import { phoneFormats, formatDelimiter } from "../../../util/formats";
+
+const CheckboxWrapper = styled.div`
+  outline: none;
+`;
 
 const PhoneForm = ({
   variant = "default",
@@ -15,8 +21,18 @@ const PhoneForm = ({
   actions,
   clearOnDismount,
   showErrors,
-  handleSubmit = noop
+  handleSubmit = noop,
+  showWalletCheckbox,
+  saveToWallet,
+  walletCheckboxMarked
 }) => {
+  const [checkboxFocused, focusCheckbox] = useState(false);
+  const handleClick = (e, func) => {
+    if (e?.keyCode === 13) {
+      func();
+    }
+  };
+
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
@@ -37,6 +53,22 @@ const PhoneForm = ({
           formatter={createFormat(phoneFormats, formatDelimiter)}
           onKeyUp={e => e.key === "Enter" && handleSubmit(e)}
         />
+        {showWalletCheckbox && (
+          <CheckboxWrapper
+            tabIndex="0"
+            onFocus={() => focusCheckbox(true)}
+            onBlur={() => focusCheckbox(false)}
+            onKeyDown={e => handleClick(e, saveToWallet)}
+          >
+            <Checkbox
+              name="phone checkbox"
+              title="Save phone number to wallet"
+              checked={walletCheckboxMarked}
+              onChange={saveToWallet}
+              focused={checkboxFocused}
+            />
+          </CheckboxWrapper>
+        )}
       </FormInputColumn>
     </FormContainer>
   );