debeerify in account as user profile can have dots (#26680)

fixes: #26635

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

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

@@ -14,6 +14,7 @@ import { ErrorOption, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import {
   UserProfileFields,
+  debeerify,
   setUserProfileServerError,
   useAlerts,
 } from "ui-shared";
@@ -58,8 +59,14 @@ export const PersonalInfo = () => {
 
   const onSubmit = async (user: UserRepresentation) => {
     try {
-      await savePersonalInfo(context, user);
-      const locale = user.attributes?.["locale"]?.toString();
+      const attributes = Object.fromEntries(
+        Object.entries(user.attributes || {}).map(([k, v]) => [
+          debeerify(k),
+          v,
+        ]),
+      );
+      await savePersonalInfo(context, { ...user, attributes });
+      const locale = attributes["locale"]?.toString();
       i18n.changeLanguage(locale, (error) => {
         if (error) {
           console.warn("Error(s) loading locale", locale, error);

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

@@ -20,6 +20,7 @@ export {
   setUserProfileServerError,
   isUserProfileError,
   label,
+  debeerify,
 } from "./user-profile/utils";
 export type { UserFormFields } from "./user-profile/utils";
 export { ScrollForm, mainPageContentId } from "./scroll-form/ScrollForm";

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

@@ -49,6 +49,9 @@ export const fieldName = (name?: string) =>
     "🍺",
   )}` as FieldPath<UserFormFields>;
 
+export const debeerify = <T extends string>(name: T) =>
+  name.replaceAll("🍺", ".");
+
 export function setUserProfileServerError<T>(
   error: UserProfileError,
   setError: (field: keyof T, params: object) => void,