fix: form error

Author: eshankvaish

src/Shared/Components/FormFieldWrapper/FormFieldInfo.tsx

@@ -29,16 +29,18 @@ const FormInfoItem = ({ id, text, icon, textClass }: FormInfoItemProps) => (
 
 const FormFieldInfo = ({ error, helperText, warningText, inputId }: FormFieldInfoProps) => (
     <div className="flex left column dc__gap-4">
-        {error && <FormInfoItem text={error} icon={<ICError />} textClass="cr-5" id={getFormErrorElementId(inputId)} />}
-        {helperText && (
+        {!!error && (
+            <FormInfoItem text={error} icon={<ICError />} textClass="cr-5" id={getFormErrorElementId(inputId)} />
+        )}
+        {!!helperText && (
             <FormInfoItem
                 text={helperText}
                 icon={<ICInfoFilledOverride className="info-icon-n6" />}
                 textClass="cn-7"
                 id={`${inputId}-helper-text`}
             />
         )}
-        {warningText && (
+        {!!warningText && (
             <FormInfoItem
                 text={warningText}
                 icon={<ICWarning className="warning-icon-y7" />}

src/Shared/Components/FormFieldWrapper/FormFieldWrapper.tsx

@@ -33,6 +33,7 @@ const FormFieldWrapper = ({
 }: Required<FormFieldWrapperProps>) => {
     const isRowLayout = layout === 'row'
     const itemContainerClassName = isRowLayout ? 'dc__mxw-250 w-100 mxh-36 dc__align-self-stretch' : ''
+    const formError = Array.isArray(error) ? error?.[0] : error
 
     return (
         <div className={`flex left column top dc__gap-4 ${fullWidth ? 'w-100' : ''}`}>
@@ -56,11 +57,16 @@ const FormFieldWrapper = ({
                 )}
                 <div className="w-100 dc__position-rel">{children}</div>
             </div>
-            {(error || helperText || warningText) && (
+            {(!!formError || !!helperText || !!warningText) && (
                 <div className="flex left dc__gap-6 w-100">
                     {/* Added a hidden div for layout sync */}
                     {isRowLayout && <div className={`${itemContainerClassName} dc__visibility-hidden`} />}
-                    <FormFieldInfo inputId={inputId} error={error} helperText={helperText} warningText={warningText} />
+                    <FormFieldInfo
+                        inputId={inputId}
+                        error={formError}
+                        helperText={helperText}
+                        warningText={warningText}
+                    />
                 </div>
             )}
         </div>