From 8d3d94f904cd005e77840263f2616cfa2df29429 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Mon, 12 Feb 2024 19:32:53 +0100
Subject: [PATCH] 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 | 11 +++++++++--
 js/libs/ui-shared/src/main.ts                         |  1 +
 js/libs/ui-shared/src/user-profile/utils.ts           |  3 +++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/js/apps/account-ui/src/personal-info/PersonalInfo.tsx b/js/apps/account-ui/src/personal-info/PersonalInfo.tsx
index 6815406d49a..bf6a3c1ad5e 100644
--- a/js/apps/account-ui/src/personal-info/PersonalInfo.tsx
+++ b/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);
diff --git a/js/libs/ui-shared/src/main.ts b/js/libs/ui-shared/src/main.ts
index b07769f8396..89025a5a8c5 100644
--- a/js/libs/ui-shared/src/main.ts
+++ b/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";
diff --git a/js/libs/ui-shared/src/user-profile/utils.ts b/js/libs/ui-shared/src/user-profile/utils.ts
index 3cd70a408c5..b979dc7c827 100644
--- a/js/libs/ui-shared/src/user-profile/utils.ts
+++ b/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,