fix: fixed reconciliation issue in FormSection

jwplayer · Sep 11, 2023 · a6d069d · a6d069d
1 parent 4782779
commit a6d069d
Show file tree

Hide file tree

Showing 11 changed files with 2,003 additions and 160 deletions.
diff --git a/src/components/Account/Account.tsx b/src/components/Account/Account.tsx
@@ -72,7 +72,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
     const nonTerms: Consent[] = [];
 
     publisherConsents?.forEach((consent) => {
-      if (!consent.isCustomRegisterField || consent?.type === 'checkbox') {
+      if (consent?.type === 'checkbox') {
         terms.push(consent);
       } else {
         nonTerms.push(consent);
@@ -287,7 +287,6 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                 <div className={styles.customFields}>
                   {nonTermsConsents.map((consent) => (
                     <CustomRegisterField
-                      isCustomRegisterField={consent?.isCustomRegisterField}
                       key={consent.name}
                       type={consent.type}
                       name={`consentsValues.${consent.name}`}

diff --git a/src/components/Account/__snapshots__/Account.test.tsx.snap b/src/components/Account/__snapshots__/Account.test.tsx.snap
@@ -12,8 +12,9 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         account.about_you
       </h3>
     </div>
-    <div
+    <form
       class="_flexBox_1c1c63"
+      novalidate=""
     >
       <div
         class="_textField_e16c1b"
@@ -41,7 +42,7 @@ exports[`<Account> > renders and matches snapshot 1`] = `
           Doe
         </p>
       </div>
-    </div>
+    </form>
     <div
       class="_controls_1c1c63"
     >
@@ -65,8 +66,9 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         account.email
       </h3>
     </div>
-    <div
+    <form
       class="_flexBox_1c1c63"
+      novalidate=""
     >
       <div
         class="_textField_e16c1b"
@@ -81,7 +83,7 @@ exports[`<Account> > renders and matches snapshot 1`] = `
           email@domain.com
         </p>
       </div>
-    </div>
+    </form>
     <div
       class="_controls_1c1c63"
     >
@@ -105,8 +107,9 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         account.security
       </h3>
     </div>
-    <div
+    <form
       class="_flexBox_1c1c63"
+      novalidate=""
     />
     <div
       class="_controls_1c1c63"
@@ -131,29 +134,32 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         account.terms_and_tracking
       </h3>
     </div>
+    <form
+      class="_flexBox_1c1c63"
+      novalidate=""
+    />
     <div
+      class="_controls_1c1c63"
+    />
+  </div>
+  <div
+    class="panel-class"
+  >
+    <div
+      class="header-class"
+    >
+      <h3>
+        account.other_registration_details
+      </h3>
+    </div>
+    <form
       class="_flexBox_1c1c63"
+      novalidate=""
     >
       <div
-        class="_checkbox_531f07"
-      >
-        <div
-          class="_row_531f07"
-        >
-          <input
-            id="check-box_1235_consentsValues.marketing"
-            name="consentsValues.marketing"
-            type="checkbox"
-            value=""
-          />
-          <label
-            for="check-box_1235_consentsValues.marketing"
-          >
-            Receive Marketing Emails
-          </label>
-        </div>
-      </div>
-    </div>
+        class="_customFields_c968f7"
+      />
+    </form>
     <div
       class="_controls_1c1c63"
     />

diff --git a/src/components/CustomRegisterField/CustomRegisterField.tsx b/src/components/CustomRegisterField/CustomRegisterField.tsx
@@ -10,8 +10,7 @@ import Dropdown from '#components/Dropdown/Dropdown';
 import DateField from '#components/DateField/DateField';
 
 type Props = {
-  type?: ConsentFieldVariants;
-  isCustomRegisterField?: boolean;
+  type: ConsentFieldVariants;
   name: string;
   value: string | boolean;
   onChange: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
@@ -27,8 +26,8 @@ type Props = {
 
 export type CustomRegisterFieldCommonProps = Props;
 
-export const CustomRegisterField: FC<Props> = ({ type, isCustomRegisterField, value = '', ...props }) => {
-  const { t, i18n } = useTranslation(type);
+export const CustomRegisterField: FC<Props> = ({ type, value = '', ...props }) => {
+  const { t, i18n } = useTranslation();
 
   const optionsList = useMemo(() => {
     switch (type) {
@@ -51,11 +50,6 @@ export const CustomRegisterField: FC<Props> = ({ type, isCustomRegisterField, va
     }
   }, [t, type, props.options, i18n]);
 
-  // Cleeng case which is always checkbox
-  if (!isCustomRegisterField) {
-    return <Checkbox {...props} checked={value === true} />;
-  }
-
   switch (type) {
     case 'checkbox':
       return <Checkbox {...props} checked={value === true} />;