refactor(console): improve date type default values handling in profile field configs (#7683)

refactor: improve date type profile field configs in console

Author: charIeszhao

packages/console/src/consts/external-links.ts

@@ -73,3 +73,5 @@ export const retrieveTokenStorage = '/secret-vault/federated-token-set#token-ret
 
 export const addOnPricingExplanationLink =
   'https://blog.logto.io/pricing-add-on-a-simple-explanation/';
+
+export const dateFnsDocumentationLink = 'https://date-fns.org/v2.30.0/docs/format';

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

@@ -1,7 +1,9 @@
 import { SupportedDateFormat } from '@logto/schemas';
+import { useEffect } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 
+import { dateFnsDocumentationLink } from '@/consts';
 import FormField from '@/ds-components/FormField';
 import Select from '@/ds-components/Select';
 import TextInput from '@/ds-components/TextInput';
@@ -31,6 +33,21 @@ 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, { shouldDirty: true });
+      setValue(`${fieldPrefix}placeholder`, SupportedDateFormat.US, { shouldDirty: true });
+    }
+  }, [fieldPrefix, formatValue, setValue]);
+
+  useEffect(() => {
+    return () => {
+      setValue(`${fieldPrefix}format`, '');
+      setValue(`${fieldPrefix}placeholder`, '');
+      setValue(`${fieldPrefix}customFormat`, '');
+    };
+  }, [fieldPrefix, setValue]);
+
   return (
     <div className={styles.dateFormatSelector}>
       <Controller
@@ -65,7 +82,7 @@ function DateFormatSelector({ index }: Props) {
             description={
               <Trans
                 components={{
-                  a: <TextLink targetBlank href="https://date-fns.org/v2.30.0/docs/format" />,
+                  a: <TextLink targetBlank href={dateFnsDocumentationLink} />,
                 }}
               >
                 {t('custom_date_format_tip')}