refactor(experience,phrases): add optional label support to input fields (#7667)

Co-authored-by: Copilot <[email protected]>

Author: charIeszhao

packages/experience/src/components/InputFields/InputField/index.tsx

@@ -1,4 +1,4 @@
-import { type Nullable } from '@silverhand/essentials';
+import { condString, type Nullable } from '@silverhand/essentials';
 import classNames from 'classnames';
 import type { HTMLProps, ReactElement, Ref, AnimationEvent } from 'react';
 import {
@@ -46,11 +46,12 @@ const InputField = (
     onBlur,
     onChange,
     value,
+    required = true,
     ...props
   }: Props,
   reference: Ref<Nullable<HTMLInputElement>>
 ) => {
-  const { i18n } = useTranslation();
+  const { t, i18n } = useTranslation();
   const innerRef = useRef<HTMLInputElement>(null);
 
   useImperativeHandle(reference, () => innerRef.current);
@@ -83,6 +84,9 @@ const InputField = (
   }, []);
 
   const isActive = Boolean(isPrefixVisible) || hasValue || isFocused;
+  const labelWithOptionalSuffix = required
+    ? label
+    : condString(label && t('input.label_with_optional', { label }));
 
   return (
     <div className={className}>
@@ -127,7 +131,7 @@ const InputField = (
             })}
         </div>
         <NotchedBorder
-          label={label ?? ''}
+          label={labelWithOptionalSuffix ?? ''}
           isActive={isActive}
           isDanger={Boolean(isDanger)}
           isFocused={isFocused}

packages/experience/src/components/InputFields/PrimitiveProfileInputField/index.tsx

@@ -26,6 +26,7 @@ const PrimitiveProfileInputField = ({
   description,
   isDanger,
   errorMessage,
+  required,
   onBlur,
   onChange,
 }: Props) => {
@@ -48,6 +49,7 @@ const PrimitiveProfileInputField = ({
         value={value}
         description={description}
         errorMessage={errorMessage}
+        required={required}
         onBlur={onBlur}
         onChange={onChange}
       />
@@ -75,6 +77,7 @@ const PrimitiveProfileInputField = ({
       isDanger={isDanger}
       errorMessage={errorMessage}
       placeholder={config?.placeholder}
+      required={required}
       onChange={(event) => {
         onChange(event.currentTarget.value);
       }}

packages/experience/src/components/InputFields/SelectField/index.tsx

@@ -17,6 +17,8 @@ type Props = {
   readonly label?: string;
   readonly placeholder?: string;
   readonly errorMessage?: string;
+  // eslint-disable-next-line react/boolean-prop-naming
+  readonly required?: boolean;
   readonly onBlur?: () => void;
   readonly onChange: (value: string) => void;
 };
@@ -29,6 +31,7 @@ const SelectField = ({
   label,
   placeholder,
   errorMessage,
+  required,
   onBlur,
   onChange,
 }: Props) => {
@@ -46,6 +49,7 @@ const SelectField = ({
           label={label}
           placeholder={placeholder}
           isDanger={!!errorMessage}
+          required={required}
           value={currentValue}
           onClick={() => {
             setIsOpen(true);

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

@@ -86,6 +86,7 @@ const AddressSubForm = ({ field }: Props) => {
               label={part.label ?? t(`profile.address.${part.name}`)}
               value={value ?? ''}
               isDanger={!!errors.address?.[part.name]}
+              required={part.required}
               onBlur={onBlur}
               onChange={(event) => {
                 onChange(event);

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

@@ -55,6 +55,7 @@ const FullnameSubForm = ({ field }: Props) => {
                 label={part.label ?? t(`profile.${part.name}`)}
                 value={value ?? ''}
                 isDanger={!!errors[part.name]}
+                required={part.required}
                 onBlur={onBlur}
                 onChange={onChange}
               />

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

@@ -46,7 +46,7 @@ const ExtraProfileForm = ({ customProfileFields, defaultValues, onSubmit }: Prop
           if (field.type === CustomProfileFieldType.Fullname) {
             return <FullnameSubForm key={field.name} field={field} />;
           }
-          const { name, type, label, description } = field;
+          const { name, type, label, description, required } = field;
           return (
             <Controller
               key={name}
@@ -67,6 +67,7 @@ const ExtraProfileForm = ({ customProfileFields, defaultValues, onSubmit }: Prop
                     {...field}
                     label={label || getFieldLabel(name)}
                     description={condString(description)}
+                    required={required}
                     value={value}
                     isDanger={!!errors[name]}
                     errorMessage={errors[name]?.message}

packages/phrases-experience/src/locales/ar/input.ts

@@ -6,6 +6,7 @@ const input = {
   confirm_password: 'تأكيد كلمة المرور',
   search_region_code: 'رمز منطقة البحث',
   backup_code: 'رمز النسخ الاحتياطي',
+  label_with_optional: '(اختياري) {{label}}',
 };
 
 export default Object.freeze(input);

packages/phrases-experience/src/locales/de/input.ts

@@ -6,6 +6,7 @@ const input = {
   confirm_password: 'Passwort bestätigen',
   search_region_code: 'Suche region code',
   backup_code: 'Backup-Code',
+  label_with_optional: '{{label}} (Optional)',
 };
 
 export default Object.freeze(input);

packages/phrases-experience/src/locales/en/input.ts

@@ -6,6 +6,7 @@ const input = {
   confirm_password: 'Confirm password',
   search_region_code: 'Search region code',
   backup_code: 'Backup code',
+  label_with_optional: '{{label}} (Optional)',
 };
 
 export default Object.freeze(input);

packages/phrases-experience/src/locales/es/input.ts

@@ -6,6 +6,7 @@ const input = {
   confirm_password: 'Confirmar contraseña',
   search_region_code: 'Código de región de búsqueda',
   backup_code: 'Código de respaldo',
+  label_with_optional: '{{label}} (Opcional)',
 };
 
 export default Object.freeze(input);