add beerify to account-ui (#28042)

fixes: #27966

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

js/apps/account-ui/src/personal-info/PersonalInfo.tsx

@@ -13,6 +13,7 @@ import { ErrorOption, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import {
   UserProfileFields,
+  beerify,
   debeerify,
   setUserProfileServerError,
   useAlerts,
@@ -39,7 +40,7 @@ export const PersonalInfo = () => {
     useState<UserProfileMetadata>();
   const [supportedLocales, setSupportedLocales] = useState<string[]>([]);
   const form = useForm<UserRepresentation>({ mode: "onChange" });
-  const { handleSubmit, reset, setError } = form;
+  const { handleSubmit, reset, setValue, setError } = form;
   const { addAlert, addError } = useAlerts();
 
   usePromise(
@@ -52,6 +53,9 @@ export const PersonalInfo = () => {
       setUserProfileMetadata(personalInfo.userProfileMetadata);
       setSupportedLocales(supportedLocales);
       reset(personalInfo);
+      Object.entries(personalInfo.attributes || {}).forEach(([k, v]) =>
+        setValue(`attributes[${beerify(k)}]`, v),
+      );
     },
   );
 

js/libs/ui-shared/src/main.ts

@@ -23,6 +23,7 @@ export {
   setUserProfileServerError,
   isUserProfileError,
   label,
+  beerify,
   debeerify,
 } from "./user-profile/utils";
 export type { UserFormFields } from "./user-profile/utils";

js/libs/ui-shared/src/user-profile/utils.ts

@@ -49,6 +49,9 @@ export const fieldName = (name?: string) =>
     "🍺",
   )}` as FieldPath<UserFormFields>;
 
+export const beerify = <T extends string>(name: T) =>
+  name.replaceAll(".", "🍺");
+
 export const debeerify = <T extends string>(name: T) =>
   name.replaceAll("🍺", ".");