refactor(console,phrases): refactor custom profile field creation modal (#7647)

Author: charIeszhao

packages/console/src/pages/SignInExperience/PageContent/CollectUserProfile/CreateProfileFieldModal/index.tsx

@@ -23,6 +23,7 @@ import modalStyles from '@/scss/modal.module.scss';
 import { isPaidPlan } from '@/utils/subscription';
 
 import CustomDataProfileNameField from '../../components/CustomDataProfileNameField';
+import { userAvailableBuiltInFieldKeys } from '../consts';
 import { getInitialRequestPayloadByFieldName } from '../data-parser';
 
 import styles from './index.module.scss';
@@ -32,6 +33,7 @@ type Props = {
   readonly onClose?: (field?: CustomProfileField) => void;
 };
 
+const reservedBuiltInProfileFieldKeySet = new Set<string>(builtInCustomProfileFieldKeys);
 const reservedCustomDataKeySet = new Set<string>(reservedCustomDataKeys);
 
 function CreateProfileFieldModal({ existingFieldNames, onClose }: Props) {
@@ -76,6 +78,13 @@ function CreateProfileFieldModal({ existingFieldNames, onClose }: Props) {
       return false;
     }
 
+    if (reservedBuiltInProfileFieldKeySet.has(customDataFieldName)) {
+      setFieldNameInputError(
+        errorT('custom_profile_fields.name_conflict_built_in_prop', { name: customDataFieldName })
+      );
+      return false;
+    }
+
     if (reservedCustomDataKeySet.has(customDataFieldName)) {
       setFieldNameInputError(
         errorT('custom_profile_fields.name_conflict_custom_data', {
@@ -90,22 +99,13 @@ function CreateProfileFieldModal({ existingFieldNames, onClose }: Props) {
 
   const builtInFields = useMemo(
     () =>
-      [
-        {
-          name: 'fullname',
-          label: t('profile.fields.fullname'),
-          description: t('profile.fields.fullname_description'),
-          isDisabled: existingFieldNames.includes('fullname'),
-        },
-        ...builtInCustomProfileFieldKeys.map((name) => ({
+      userAvailableBuiltInFieldKeys
+        .map((name) => ({
           name,
           label: t(`profile.fields.${name === 'address' ? 'address.formatted' : name}`),
           description: t(`profile.fields.${name}_description`),
-          isDisabled: existingFieldNames.includes(name),
-        })),
-      ]
-        .slice()
-        .sort((fieldA, fieldB) => fieldA.name.localeCompare(fieldB.name)),
+        }))
+        .filter(({ name }) => !existingFieldNames.includes(name)),
     [t, existingFieldNames]
   );
 
@@ -152,25 +152,29 @@ function CreateProfileFieldModal({ existingFieldNames, onClose }: Props) {
         size="xlarge"
         onClose={onClose}
       >
-        <div className={styles.groupLabel}>
-          {t('sign_in_exp.custom_profile_fields.modal.built_in_properties')}
-        </div>
-        <RadioGroup
-          className={styles.group}
-          type="card"
-          name="fieldName"
-          value={selectedField}
-          onChange={setSelectedField}
-        >
-          {builtInFields.map(({ name, label, description, isDisabled }) => (
-            <Radio key={name} value={name} isDisabled={isDisabled}>
-              <div className={styles.item}>
-                <div className={styles.title}>{label}</div>
-                <div className={styles.description}>{description}</div>
-              </div>
-            </Radio>
-          ))}
-        </RadioGroup>
+        {builtInFields.length > 0 && (
+          <>
+            <div className={styles.groupLabel}>
+              {t('sign_in_exp.custom_profile_fields.modal.built_in_properties')}
+            </div>
+            <RadioGroup
+              className={styles.group}
+              type="card"
+              name="fieldName"
+              value={selectedField}
+              onChange={setSelectedField}
+            >
+              {builtInFields.map(({ name, label, description }) => (
+                <Radio key={name} value={name}>
+                  <div className={styles.item}>
+                    <div className={styles.title}>{label}</div>
+                    <div className={styles.description}>{description}</div>
+                  </div>
+                </Radio>
+              ))}
+            </RadioGroup>
+          </>
+        )}
         <div className={styles.groupLabel}>
           {t('sign_in_exp.custom_profile_fields.modal.custom_properties')}
         </div>

packages/console/src/pages/SignInExperience/PageContent/CollectUserProfile/consts.ts

@@ -1 +1,12 @@
 export const collectUserProfilePathname = '/sign-in-experience/collect-user-profile';
+
+export const userAvailableBuiltInFieldKeys = Object.freeze([
+  'name',
+  'fullname',
+  'nickname',
+  'birthdate',
+  'gender',
+  'profile',
+  'website',
+  'address',
+] as const);

packages/console/src/pages/SignInExperience/PageContent/components/CustomDataProfileNameField/index.module.scss

@@ -24,3 +24,9 @@
     flex: 1;
   }
 }
+
+.errorMessage {
+  font: var(--font-body-2);
+  color: var(--color-error);
+  margin-top: _.unit(1);
+}

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

@@ -3,15 +3,21 @@ import TextInput, { type Props } from '@/ds-components/TextInput';
 import styles from './index.module.scss';
 
 function CustomDataProfileNameField(props: Props) {
+  const { error, ...rest } = props;
   return (
-    <div className={styles.wrapper}>
-      <div className={styles.prefix}>customData.</div>
-      <TextInput
-        className={styles.input}
-        inputContainerClassName={styles.inputContainer}
-        {...props}
-      />
-    </div>
+    <>
+      <div className={styles.wrapper}>
+        <div className={styles.prefix}>customData.</div>
+        <TextInput
+          className={styles.input}
+          inputContainerClassName={styles.inputContainer}
+          {...rest}
+        />
+      </div>
+      {Boolean(error) && typeof error !== 'boolean' && (
+        <div className={styles.errorMessage}>{error}</div>
+      )}
+    </>
   );
 }
 

packages/phrases/src/locales/ar/errors/custom-profile-fields.ts

@@ -10,6 +10,8 @@ const custom_profile_fields = {
   invalid_name: 'اسم الحقل غير صالح ، يُسمح فقط بالأحرف أو الأرقام ، مع مراعاة حالة الأحرف.',
   name_conflict_sign_in_identifier:
     'اسم الحقل غير صالح. "{{name}}" هو مفتاح معرف تسجيل دخول محجوز.',
+  name_conflict_built_in_prop:
+    'اسم الحقل غير صالح. "{{name}}" هو خاصية ملف تعريف مستخدم مدمجة محجوزة.',
   name_conflict_custom_data: 'اسم الحقل غير صالح. "{{name}}" هو مفتاح بيانات مخصصة محجوز.',
   name_required: 'اسم الحقل مطلوب.',
 };

packages/phrases/src/locales/de/errors/custom-profile-fields.ts

@@ -12,6 +12,8 @@ const custom_profile_fields = {
     'Ungültiger Feldname, nur Buchstaben oder Zahlen sind erlaubt, Groß- und Kleinschreibung beachten.',
   name_conflict_sign_in_identifier:
     'Ungültiger Feldname. "{{name}}" ist ein reservierter Schlüssel für die Anmeldung.',
+  name_conflict_built_in_prop:
+    'Ungültiger Feldname. "{{name}}" ist eine reservierte eingebaute Benutzerprofil-Eigenschaft.',
   name_conflict_custom_data:
     'Ungültiger Feldname. "{{name}}" ist ein reservierter Schlüssel für benutzerdefinierte Daten.',
   name_required: 'Feldname ist erforderlich.',

packages/phrases/src/locales/en/errors/custom-profile-fields.ts

@@ -10,6 +10,8 @@ const custom_profile_fields = {
   invalid_name: 'Invalid field name, only letters or numbers are allowed, case sensitive.',
   name_conflict_sign_in_identifier:
     'Invalid field name. "{{name}}" is a reserved sign-in identifier key.',
+  name_conflict_built_in_prop:
+    'Invalid field name. "{{name}}" is a reserved built-in user profile property.',
   name_conflict_custom_data: 'Invalid field name. "{{name}}" is a reserved custom data key.',
   name_required: 'Field name is required.',
 };

packages/phrases/src/locales/es/errors/custom-profile-fields.ts

@@ -12,6 +12,8 @@ const custom_profile_fields = {
     'Nombre de campo no válido, solo se permiten letras o números, distingue entre mayúsculas y minúsculas.',
   name_conflict_sign_in_identifier:
     'Nombre de campo no válido. "{{name}}" es una clave reservada para el identificador de inicio de sesión.',
+  name_conflict_built_in_prop:
+    'Nombre de campo no válido. "{{name}}" es una propiedad de perfil de usuario integrada reservada.',
   name_conflict_custom_data:
     'Nombre de campo no válido. "{{name}}" es una clave reservada para datos personalizados.',
   name_required: 'El nombre del campo es obligatorio.',

packages/phrases/src/locales/fr/errors/custom-profile-fields.ts

@@ -12,6 +12,8 @@ const custom_profile_fields = {
     'Nom de champ invalide, seules les lettres ou les chiffres sont autorisés, sensible à la casse.',
   name_conflict_sign_in_identifier:
     'Nom de champ invalide. "{{name}}" est une clé d\'identifiant de connexion réservée.',
+  name_conflict_built_in_prop:
+    'Nom de champ invalide. "{{name}}" est une propriété de profil utilisateur intégrée réservée.',
   name_conflict_custom_data:
     'Nom de champ invalide. "{{name}}" est une clé de données personnalisées réservée.',
   name_required: 'Le nom du champ est requis.',

packages/phrases/src/locales/it/errors/custom-profile-fields.ts

@@ -11,6 +11,8 @@ const custom_profile_fields = {
     'Nome del campo non valido, sono consentite solo lettere o numeri, sensibili alle maiuscole.',
   name_conflict_sign_in_identifier:
     'Nome del campo non valido. "{{name}}" è una chiave riservata di identificatore di accesso.',
+  name_conflict_built_in_prop:
+    'Nome del campo non valido. "{{name}}" è una proprietà riservata del profilo utente integrata.',
   name_conflict_custom_data:
     'Nome del campo non valido. "{{name}}" è una chiave riservata per i dati personalizzati.',
   name_required: 'Il nome del campo è obbligatorio.',