@thecb/components 4.1.4 → 4.1.6-beta.0

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-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>
   );