@thecb/components 12.1.0-beta.2 → 12.1.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "12.1.0-beta.2",
+  "version": "12.1.0-beta.4",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
@@ -9,7 +9,9 @@
   "scripts": {
     "storybook": "storybook dev -p 6006",
     "build": "rollup -cm",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "sync": "./scripts/sync-to-project.sh",
+    "publish-beta": "./scripts/publish-beta.sh"
   },
   "repository": {
     "type": "git",

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

@@ -14,8 +14,10 @@ import {
 } from "../../atoms/form-layouts";
 import AccountAndRoutingModal from "../account-and-routing-modal";
 import { noop } from "../../../util/general";
-import { Cluster, Cover } from "../../atoms/layouts";
+import { Cluster } from "../../atoms/layouts";
 import TermsAndConditions from "../terms-and-conditions";
+import TermsAndConditionsModal from "../terms-and-conditions-modal";
+import { useScrollTo } from "../../../hooks";
 
 const PaymentFormACH = ({
   variant = "default",
@@ -38,8 +40,16 @@ const PaymentFormACH = ({
   }
   const [showRouting, toggleShowRouting] = useState(false);
   const [showAccount, toggleShowAccount] = useState(false);
+  const [showTermsModal, setShowTermsModal] = useState(false);
   const showTerms = !!termsContent;
 
+  const toggleTermsModal = open => {
+    setShowTermsModal(open);
+    if (open) {
+      useScrollTo("terms-body-text", 0, 0, "smooth", 100);
+    }
+  };
+
   const nameErrors = {
     [required.error]: "Name is required"
   };
@@ -172,30 +182,39 @@ const PaymentFormACH = ({
             hidden={hideDefaultPayment}
           />
         )}
-        {(showWalletCheckbox || showTerms) && (
-          <Cluster childGap={"4px"} align="center" overflow>
-            {showWalletCheckbox && (
-              <Checkbox
-                name="bank checkbox"
-                dataQa="Save checking account to wallet"
-                title="Save checking account to wallet (optional)."
-                checked={walletCheckboxMarked}
-                onChange={saveToWallet}
-              />
-            )}
-            {showTerms && (
-              <Cover singleChild>
-                <TermsAndConditions
-                  version="v2"
-                  showCheckbox={false}
-                  description="View"
-                  terms={termsContent}
-                  initialFocusSelector={".modal-close-button"}
-                  textExtraStyles="vertical-align: middle; margin-left: 40px;" /* determined w 24px checkbox width + 16px margin */
-                />
-              </Cover>
-            )}
-          </Cluster>
+        {showWalletCheckbox && (
+          <Checkbox
+            name="bank checkbox"
+            dataQa="Save checking account to wallet"
+            title={
+              <>
+                Save checking account to wallet (optional).{" "}
+                {showTerms && (
+                  <span onClick={e => e.stopPropagation()}>
+                    View{" "}
+                    <TermsAndConditionsModal
+                      link="Terms and Conditions"
+                      terms={termsContent}
+                      isOpen={showTermsModal}
+                      toggleOpen={toggleTermsModal}
+                      initialFocusSelector=".modal-close-button"
+                    />
+                  </span>
+                )}
+              </>
+            }
+            checked={walletCheckboxMarked}
+            onChange={saveToWallet}
+          />
+        )}
+        {!showWalletCheckbox && showTerms && (
+          <TermsAndConditions
+            version="v2"
+            showCheckbox={false}
+            description="View"
+            terms={termsContent}
+            initialFocusSelector=".modal-close-button"
+          />
         )}
       </FormInputColumn>
     </FormContainer>

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

@@ -27,9 +27,11 @@ import {
   FormContainer,
   FormInputRow
 } from "../../atoms/form-layouts";
-import { Box, Cluster, Cover } from "../../atoms/layouts";
+import { Box, Cluster } from "../../atoms/layouts";
 import withWindowSize from "../../withWindowSize";
 import TermsAndConditions from "../terms-and-conditions";
+import TermsAndConditionsModal from "../terms-and-conditions-modal";
+import { useScrollTo } from "../../../hooks";
 
 const PaymentFormCard = ({
   variant = "default",
@@ -46,8 +48,16 @@ const PaymentFormCard = ({
   termsContent
 }) => {
   const { isMobile } = useContext(ThemeContext);
+  const [showTermsModal, setShowTermsModal] = useState(false);
   const showTerms = !!termsContent;
 
+  const toggleTermsModal = open => {
+    setShowTermsModal(open);
+    if (open) {
+      useScrollTo("terms-body-text", 0, 0, "smooth", 100);
+    }
+  };
+
   useEffect(() => {
     if (deniedCards) {
       deniedCards.map(card =>
@@ -196,30 +206,39 @@ const PaymentFormCard = ({
             />
           </Box>
         )}
-        {(showWalletCheckbox || showTerms) && (
-          <Cluster childGap={"4px"} align="center" overflow>
-            {showWalletCheckbox && (
-              <Checkbox
-                name="credit card checkbox"
-                dataQa="Save credit card to wallet"
-                title="Save credit card to wallet (optional)."
-                checked={walletCheckboxMarked}
-                onChange={saveToWallet}
-              />
-            )}
-            {showTerms && (
-              <Cover singleChild>
-                <TermsAndConditions
-                  version="v2"
-                  showCheckbox={false}
-                  description="View"
-                  terms={termsContent}
-                  initialFocusSelector={".modal-close-button"}
-                  textExtraStyles="vertical-align: middle; margin-left: 40px;" /* determined w 24px checkbox width + 16px margin */
-                />
-              </Cover>
-            )}
-          </Cluster>
+        {showWalletCheckbox && (
+          <Checkbox
+            name="credit card checkbox"
+            dataQa="Save credit card to wallet"
+            title={
+              <>
+                Save credit card to wallet (optional).{" "}
+                {showTerms && (
+                  <span onClick={e => e.stopPropagation()}>
+                    View{" "}
+                    <TermsAndConditionsModal
+                      link="Terms and Conditions"
+                      terms={termsContent}
+                      isOpen={showTermsModal}
+                      toggleOpen={toggleTermsModal}
+                      initialFocusSelector=".modal-close-button"
+                    />
+                  </span>
+                )}
+              </>
+            }
+            checked={walletCheckboxMarked}
+            onChange={saveToWallet}
+          />
+        )}
+        {!showWalletCheckbox && showTerms && (
+          <TermsAndConditions
+            version="v2"
+            showCheckbox={false}
+            description="View"
+            terms={termsContent}
+            initialFocusSelector=".modal-close-button"
+          />
         )}
       </FormInputColumn>
     </FormContainer>