@thecb/components 7.10.3 → 7.10.4-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.10.3",
+  "version": "7.10.4-beta.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

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

@@ -15,8 +15,7 @@ import {
 import AccountAndRoutingModal from "../account-and-routing-modal";
 import { noop } from "../../../util/general";
 import { Cluster, Cover } from "../../atoms/layouts";
-import TermsAndConditionsModal from "../terms-and-conditions-modal/TermsAndConditionsModal";
-import Text from "../../atoms/text";
+import TermsAndConditions from "../terms-and-conditions";
 
 const PaymentFormACH = ({
   variant = "default",
@@ -32,17 +31,14 @@ const PaymentFormACH = ({
   showWalletCheckbox,
   saveToWallet,
   walletCheckboxMarked,
-  termsContent,
-  termsTitle = "Terms & Conditions"
+  termsContent
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
   const [showRouting, toggleShowRouting] = useState(false);
   const [showAccount, toggleShowAccount] = useState(false);
-  const [termsModalOpen, setTermsModalOpen] = useState(false);
   const showTerms = !!termsContent;
-  const showTermsLinkVariant = showWalletCheckbox ? "p" : "pS";
 
   const nameErrors = {
     [required.error]: "Name is required"
@@ -162,7 +158,7 @@ const PaymentFormACH = ({
           />
         )}
         {(showWalletCheckbox || showTerms) && (
-          <Cluster childGap={"4px"}>
+          <Cluster childGap={"4px"} align="center">
             {showWalletCheckbox && (
               <Checkbox
                 name="bank checkbox"
@@ -173,17 +169,12 @@ const PaymentFormACH = ({
             )}
             {showTerms && (
               <Cover singleChild>
-                <Cluster childGap={0}>
-                  <Text variant={showTermsLinkVariant}>View&nbsp;</Text>
-                  <TermsAndConditionsModal
-                    link={termsTitle}
-                    linkVariant={showTermsLinkVariant}
-                    terms={termsContent}
-                    title={termsTitle}
-                    isOpen={termsModalOpen}
-                    toggleOpen={setTermsModalOpen}
-                  />
-                </Cluster>
+                <TermsAndConditions
+                  version="v2"
+                  showCheckbox={false}
+                  description="View"
+                  terms={termsContent}
+                />
               </Cover>
             )}
           </Cluster>

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

@@ -28,8 +28,7 @@ import {
 } from "../../atoms/form-layouts";
 import { Box, Cluster, Cover } from "../../atoms/layouts";
 import withWindowSize from "../../withWindowSize";
-import TermsAndConditionsModal from "../terms-and-conditions-modal/TermsAndConditionsModal";
-import Text from "../../atoms/text";
+import TermsAndConditions from "../terms-and-conditions";
 
 const PaymentFormCard = ({
   variant = "default",
@@ -43,13 +42,10 @@ const PaymentFormCard = ({
   saveToWallet,
   walletCheckboxMarked,
   deniedCards,
-  termsContent,
-  termsTitle = "Terms & Conditions"
+  termsContent
 }) => {
   const { isMobile } = useContext(ThemeContext);
-  const [termsModalOpen, setTermsModalOpen] = useState(false);
   const showTerms = !!termsContent;
-  const showTermsLinkVariant = showWalletCheckbox ? "p" : "pS";
 
   useEffect(() => {
     if (deniedCards) {
@@ -186,7 +182,7 @@ const PaymentFormCard = ({
           </Box>
         )}
         {(showWalletCheckbox || showTerms) && (
-          <Cluster childGap={"4px"}>
+          <Cluster childGap={"4px"} align="center">
             {showWalletCheckbox && (
               <Checkbox
                 name="credit card checkbox"
@@ -197,17 +193,12 @@ const PaymentFormCard = ({
             )}
             {showTerms && (
               <Cover singleChild>
-                <Cluster childGap={0}>
-                  <Text variant={showTermsLinkVariant}>View&nbsp;</Text>
-                  <TermsAndConditionsModal
-                    link={termsTitle}
-                    linkVariant={showTermsLinkVariant}
-                    terms={termsContent}
-                    title={termsTitle}
-                    isOpen={termsModalOpen}
-                    toggleOpen={setTermsModalOpen}
-                  />
-                </Cluster>
+                <TermsAndConditions
+                  version="v2"
+                  showCheckbox={false}
+                  description="View"
+                  terms={termsContent}
+                />
               </Cover>
             )}
           </Cluster>