fix(experience): the sub-component optional config should be respected (#7677)

* fix(experience): the sub-component optional config should be respected

* refactor(experience): improve composition profile field error handling

Author: charIeszhao

packages/experience/src/pages/Continue/ExtraProfileForm/AddressSubForm/index.module.scss

@@ -25,6 +25,13 @@
 
 .errorMessage {
   color: var(--color-danger-default);
+  display: flex;
+  flex-direction: column;
+  gap: _.unit(1);
+
+  > p {
+    margin: 0;
+  }
 }
 
 @media only screen and (max-width: 580px) {

packages/experience/src/pages/Continue/ExtraProfileForm/AddressSubForm/index.tsx

@@ -8,6 +8,7 @@ import * as s from 'superstruct';
 import PrimitiveProfileInputField from '@/components/InputFields/PrimitiveProfileInputField';
 import { addressFieldConfigGuard } from '@/types/guard';
 
+import useFieldLabel from '../use-field-label';
 import useValidateField from '../use-validate-field';
 
 import styles from './index.module.scss';
@@ -38,6 +39,7 @@ type Props = {
 const AddressSubForm = ({ field }: Props) => {
   const { t } = useTranslation();
   const validateField = useValidateField();
+  const getFieldLabel = useFieldLabel();
 
   const {
     control,
@@ -47,7 +49,7 @@ const AddressSubForm = ({ field }: Props) => {
     formState: { errors },
   } = useFormContext<AddressSubFormType>();
 
-  const { description, config, required } = field;
+  const { description, config } = field;
 
   const enabledParts = useMemo(() => {
     s.assert(config, addressFieldConfigGuard);
@@ -68,14 +70,24 @@ const AddressSubForm = ({ field }: Props) => {
     return null;
   }
 
+  const hasNonRequiredErrors = Object.entries(errors.address ?? {}).some(
+    ([_, error]) => typeof error === 'object' && error.type !== 'required'
+  );
   return (
     <div className={styles.addressContainer}>
       {enabledParts.map((part) => (
         <Controller
           key={part.name}
           name={`address.${part.name}`}
           control={control}
-          rules={{ required, validate: (value) => validateField(value, part) }}
+          rules={{
+            required:
+              part.required &&
+              t('error.general_required', {
+                types: [getFieldLabel(`address.${part.name}`, part.label)],
+              }),
+            validate: (value) => validateField(value, part),
+          }}
           render={({ field: { onBlur, onChange, value } }) => (
             <PrimitiveProfileInputField
               {...part}
@@ -104,7 +116,17 @@ const AddressSubForm = ({ field }: Props) => {
       {description && <div className={styles.description}>{description}</div>}
       {errors.address && (
         <div className={styles.errorMessage}>
-          {t('error.general_required', { types: [t('profile.address.formatted')] })}
+          {hasNonRequiredErrors ? (
+            <>
+              {Object.entries(errors.address).map(([errorKey, error]) => (
+                <p key={errorKey}>
+                  {typeof error === 'object' && 'message' in error ? error.message : String(error)}
+                </p>
+              ))}
+            </>
+          ) : (
+            <p>{t('error.general_required', { types: [t('profile.address.formatted')] })}</p>
+          )}
         </div>
       )}
     </div>

packages/experience/src/pages/Continue/ExtraProfileForm/FullnameSubForm/index.module.scss

@@ -33,6 +33,13 @@
   font: var(--font-body-2);
   color: var(--color-danger-default);
   margin-inline-start: _.unit(0.5);
+  display: flex;
+  flex-direction: column;
+  gap: _.unit(1);
+
+  > p {
+    margin: 0;
+  }
 }
 
 @media only screen and (max-width: 580px) {

packages/experience/src/pages/Continue/ExtraProfileForm/FullnameSubForm/index.tsx

@@ -24,7 +24,7 @@ const FullnameSubForm = ({ field }: Props) => {
   const getFieldLabel = useFieldLabel();
   const validateField = useValidateField();
 
-  const { required, name, label, description, config } = field;
+  const { name, label, description, config } = field;
   s.assert(config, fullnameFieldConfigGuard);
 
   const {
@@ -33,9 +33,10 @@ const FullnameSubForm = ({ field }: Props) => {
   } = useFormContext<FullnameFormType>();
 
   const enabledParts = useMemo(() => config.parts.filter(({ enabled }) => enabled), [config.parts]);
-  const hasFullnameError = Object.entries(errors).some(([errorKey]) =>
+  const fullnameErrors = Object.entries(errors).filter(([errorKey]) =>
     enabledParts.some(({ name }) => name === errorKey)
   );
+  const hasNonRequiredErrors = fullnameErrors.some(([_, error]) => error.type !== 'required');
 
   return (
     <div className={styles.fullnameContainer}>
@@ -47,7 +48,12 @@ const FullnameSubForm = ({ field }: Props) => {
             key={part.name}
             name={part.name}
             control={control}
-            rules={{ required, validate: (value) => validateField(value, part) }}
+            rules={{
+              required:
+                part.required &&
+                t('error.general_required', { types: [getFieldLabel(part.name, part.label)] }),
+              validate: (value) => validateField(value, part),
+            }}
             render={({ field: { onBlur, onChange, value } }) => (
               <PrimitiveProfileInputField
                 {...part}
@@ -64,9 +70,17 @@ const FullnameSubForm = ({ field }: Props) => {
         ))}
       </div>
       {description && <div className={styles.description}>{description}</div>}
-      {hasFullnameError && (
+      {fullnameErrors.length > 0 && (
         <div className={styles.errorMessage}>
-          {t('error.general_required', { types: [getFieldLabel(name, label)] })}
+          {hasNonRequiredErrors ? (
+            <>
+              {fullnameErrors.map(([errorKey, error]) => (
+                <p key={errorKey}>{error.message}</p>
+              ))}
+            </>
+          ) : (
+            <p>{t('error.general_required', { types: [getFieldLabel(name, label)] })}</p>
+          )}
         </div>
       )}
     </div>