refactor: add default placeholder for date type fields in profile fulfilling (#7668)

Author: charIeszhao

packages/console/src/pages/SignInExperience/PageContent/CollectUserProfile/data-parser.ts

@@ -100,6 +100,7 @@ export const getInitialRequestPayloadByFieldName = (name: string) => {
       required: true,
       config: {
         format: cond(type === CustomProfileFieldType.Date && SupportedDateFormat.US),
+        placeholder: cond(type === CustomProfileFieldType.Date && SupportedDateFormat.US),
         parts: getDefaultParts(type),
         options: getDefaultOptions(name),
         ...cond(type === CustomProfileFieldType.Text && { minLength: 1, maxLength: 100 }),

packages/console/src/pages/SignInExperience/PageContent/components/DateFormatSelector/index.tsx

@@ -1,5 +1,4 @@
 import { SupportedDateFormat } from '@logto/schemas';
-import { useEffect } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -32,16 +31,6 @@ function DateFormatSelector({ index }: Props) {
   const formatValue = watch(`${fieldPrefix}format`);
   const formErrors = index === undefined ? errors : errors.parts?.[index];
 
-  useEffect(() => {
-    if (!formatValue) {
-      setValue(`${fieldPrefix}format`, SupportedDateFormat.US);
-      return;
-    }
-    if (formatValue !== SupportedDateFormat.Custom) {
-      setValue(`${fieldPrefix}customFormat`, '');
-    }
-  }, [fieldPrefix, formatValue, setValue]);
-
   return (
     <div className={styles.dateFormatSelector}>
       <Controller
@@ -56,7 +45,14 @@ function DateFormatSelector({ index }: Props) {
               { value: SupportedDateFormat.Custom, title: t('custom_date_format') },
             ]}
             value={value}
-            onChange={onChange}
+            onChange={(value) => {
+              onChange(value);
+              setValue(
+                `${fieldPrefix}placeholder`,
+                value === SupportedDateFormat.Custom ? '' : value,
+                { shouldDirty: true }
+              );
+            }}
           />
         )}
       />

packages/console/src/pages/SignInExperience/PageContent/components/ProfileFieldPartSubForm/index.tsx

@@ -101,6 +101,11 @@ function ProfileFieldPartSubForm({ index }: Props) {
           }}
         />
       </FormField>
+      {type === CustomProfileFieldType.Date && (
+        <FormField title="sign_in_exp.custom_profile_fields.details.date_format">
+          <DateFormatSelector />
+        </FormField>
+      )}
       <FormField
         isRequired={!isBuiltInFieldName}
         title="sign_in_exp.custom_profile_fields.details.label"
@@ -184,11 +189,6 @@ function ProfileFieldPartSubForm({ index }: Props) {
           />
         </FormField>
       )}
-      {type === CustomProfileFieldType.Date && (
-        <FormField title="sign_in_exp.custom_profile_fields.details.date_format">
-          <DateFormatSelector />
-        </FormField>
-      )}
       {type === CustomProfileFieldType.Checkbox && (
         <FormField title="sign_in_exp.custom_profile_fields.details.default_value">
           <Controller