From 9dacc9bf2fa38806bde715ba42fa6d8108599f33 Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Wed, 2 Oct 2024 09:58:12 +0200
Subject: [PATCH 01/12] Add missing account attributes

---
 src/components/AccountSaas/AccountTypes.ts |  6 +++++-
 src/components/AccountSaas/Create.tsx      | 11 ++++++++---
 src/components/AccountSaas/Layout.tsx      |  1 -
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/AccountSaas/AccountTypes.ts b/src/components/AccountSaas/AccountTypes.ts
index 58c83f79d..187dd85ff 100644
--- a/src/components/AccountSaas/AccountTypes.ts
+++ b/src/components/AccountSaas/AccountTypes.ts
@@ -1,4 +1,7 @@
 export interface OrgInterface {
+  active: boolean
+  address: string
+  createdAt: string
   name: string
   website: string
   description: string
@@ -11,6 +14,7 @@ export interface OrgInterface {
   header: string
   subdomain: string
   color: string
+  communications: boolean
 }
 
-export type CreateOrgParams = Partial<OrgInterface>
+export type CreateOrgParams = Partial<Omit<OrgInterface, 'active' | 'address' | 'createdAt'>>
diff --git a/src/components/AccountSaas/Create.tsx b/src/components/AccountSaas/Create.tsx
index cf925ef0a..7e946138b 100644
--- a/src/components/AccountSaas/Create.tsx
+++ b/src/components/AccountSaas/Create.tsx
@@ -8,13 +8,13 @@ import { useClient } from '@vocdoni/react-providers'
 import { useState } from 'react'
 import { useAccountCreate } from '~components/Account/useAccountCreate'
 import { CreateOrgParams, OrgInterface } from '~components/AccountSaas/AccountTypes'
-import { PrivateOrgFormData, PrivateOrgForm, PublicOrgForm } from '~components/AccountSaas/Layout'
+import { PrivateOrgForm, PrivateOrgFormData, PublicOrgForm } from '~components/AccountSaas/Layout'
 import { ApiEndpoints } from '~components/Auth/api'
 import { useAuth } from '~components/Auth/useAuth'
 import useDarkMode from '~src/themes/saas/hooks/useDarkMode'
 import LogoutBtn from '~components/AccountSaas/LogoutBtn'
 
-type FormData = PrivateOrgFormData & Pick<OrgInterface, 'name' | 'website' | 'description'>
+type FormData = PrivateOrgFormData & Pick<OrgInterface, 'name' | 'website' | 'description' | 'communications'>
 
 // This specific error message should be ignored and not displayed in the UI.
 // Context: After login, a RemoteSigner is created and passed to the SDK via the useClient hook.
@@ -64,7 +64,12 @@ export const AccountCreate = ({ children, ...props }: FlexProps) => {
       type: values.typeSelect?.value,
     })
       .then(() => signer.getAddress()) // Get the address of newly created signer
-      .then(() => createAccount({ name: values.name, description: values.description })) // Create the new account on the vochain
+      .then(() =>
+        createAccount({
+          name: values.name,
+          description: values.description,
+        })
+      ) // Create the new account on the vochain
       .finally(() => setIsPending(false))
   }
 
diff --git a/src/components/AccountSaas/Layout.tsx b/src/components/AccountSaas/Layout.tsx
index 72e951487..11bf0c327 100644
--- a/src/components/AccountSaas/Layout.tsx
+++ b/src/components/AccountSaas/Layout.tsx
@@ -56,7 +56,6 @@ export const PublicOrgForm = () => {
 }
 
 export type PrivateOrgFormData = {
-  communications: boolean
   sizeSelect: SelectOptionType
   typeSelect: SelectOptionType
   countrySelect: SelectOptionType

From 57a4b9bc120fb1027a1671bd81a22eb5414803d2 Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Wed, 2 Oct 2024 10:08:33 +0200
Subject: [PATCH 02/12] Implement QueryDataLayout

---
 src/components/Layout/QueryDataLayout.tsx     |  25 ++++
 .../OrganizationSaas/Dashboard/Team.tsx       | 115 ++++++++----------
 2 files changed, 77 insertions(+), 63 deletions(-)
 create mode 100644 src/components/Layout/QueryDataLayout.tsx

diff --git a/src/components/Layout/QueryDataLayout.tsx b/src/components/Layout/QueryDataLayout.tsx
new file mode 100644
index 000000000..da5eab6ed
--- /dev/null
+++ b/src/components/Layout/QueryDataLayout.tsx
@@ -0,0 +1,25 @@
+import ErrorComponent from '~components/Layout/ErrorComponent'
+import { PropsWithChildren } from 'react'
+import { Loading } from '~src/router/SuspenseLoader'
+
+interface IUserQueryLayout {
+  isLoading: boolean
+  isEmpty?: boolean
+  isError: boolean
+  error?: Error
+}
+
+const QueryDataLayout = ({ isLoading, isEmpty, isError, error, children }: IUserQueryLayout & PropsWithChildren) => {
+  if (isLoading) {
+    return <Loading minHeight={1} />
+  }
+  if (isError) {
+    return <ErrorComponent error={error} />
+  }
+  if (isEmpty) {
+    return null
+  }
+  return <>{children}</>
+}
+
+export default QueryDataLayout
diff --git a/src/components/OrganizationSaas/Dashboard/Team.tsx b/src/components/OrganizationSaas/Dashboard/Team.tsx
index ad8dd2f29..2c0b23d34 100644
--- a/src/components/OrganizationSaas/Dashboard/Team.tsx
+++ b/src/components/OrganizationSaas/Dashboard/Team.tsx
@@ -4,7 +4,6 @@ import {
   Box,
   Button,
   Flex,
-  Heading,
   Table,
   TableContainer,
   Tbody,
@@ -19,9 +18,8 @@ import Invite from './Invite'
 import { useAuth } from '~components/Auth/useAuth'
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { ApiEndpoints } from '~components/Auth/api'
-import { Loading } from '~src/router/SuspenseLoader'
-import ErrorComponent from '~components/Layout/ErrorComponent'
-import { Trans, useTranslation } from 'react-i18next'
+import { Trans } from 'react-i18next'
+import QueryDataLayout from '~components/Layout/QueryDataLayout'
 
 type UserInfo = {
   email: string
@@ -50,70 +48,61 @@ const useTeamMembers = ({
 }
 
 const TeamList = () => {
-  const { t } = useTranslation()
   const { data, isLoading, isError, error } = useTeamMembers()
 
-  if (isLoading) {
-    return <Loading minHeight={1} />
-  }
-  if (isError) {
-    return <ErrorComponent error={error} />
-  }
-  if (!data.members) {
-    return null
-  }
-
   const members = data.members
 
   return (
-    <Flex display={'column'}>
-      <Text fontWeight={'bold'}>
-        <Trans i18nKey={'team.team_members'}>Team members</Trans>
-        <Badge ml='1' colorScheme='green'>
-          {members.length}
-        </Badge>
-      </Text>
-      <TableContainer>
-        <Table>
-          <Thead>
-            <Tr>
-              <Th>
-                <Trans i18nKey={'team.member_name'}>Name</Trans>
-              </Th>
-              <Th>
-                <Trans i18nKey={'team.member_permission'}>Permission</Trans>
-              </Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            {members.map((member, i) => {
-              return (
-                <Tr key={i}>
-                  <Td>
-                    <Flex>
-                      <Avatar
-                        // src={member.info.}
-                        name={member.info.firstName}
-                        size='sm'
-                      />
-                      <Box ml='3'>
-                        <Text fontWeight='bold'>
-                          {member.info.firstName} {member.info.lastName}
-                        </Text>
-                        <Text fontSize='sm'>{member.info.email}</Text>
-                      </Box>
-                    </Flex>
-                  </Td>
-                  <Td>
-                    <Badge>{member.role}</Badge>
-                  </Td>
-                </Tr>
-              )
-            })}
-          </Tbody>
-        </Table>
-      </TableContainer>
-    </Flex>
+    <QueryDataLayout isEmpty={!data.members} isLoading={isLoading} isError={isError} error={error}>
+      <Flex display={'column'}>
+        <Text fontWeight={'bold'}>
+          <Trans i18nKey={'team.team_members'}>Team members</Trans>
+          <Badge ml='1' colorScheme='green'>
+            {members.length}
+          </Badge>
+        </Text>
+        <TableContainer>
+          <Table>
+            <Thead>
+              <Tr>
+                <Th>
+                  <Trans i18nKey={'team.member_name'}>Name</Trans>
+                </Th>
+                <Th>
+                  <Trans i18nKey={'team.member_permission'}>Permission</Trans>
+                </Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {members.map((member, i) => {
+                return (
+                  <Tr key={i}>
+                    <Td>
+                      <Flex>
+                        <Avatar
+                          // src={member.info.}
+                          name={member.info.firstName}
+                          size='sm'
+                        />
+                        <Box ml='3'>
+                          <Text fontWeight='bold'>
+                            {member.info.firstName} {member.info.lastName}
+                          </Text>
+                          <Text fontSize='sm'>{member.info.email}</Text>
+                        </Box>
+                      </Flex>
+                    </Td>
+                    <Td>
+                      <Badge>{member.role}</Badge>
+                    </Td>
+                  </Tr>
+                )
+              })}
+            </Tbody>
+          </Table>
+        </TableContainer>
+      </Flex>
+    </QueryDataLayout>
   )
 }
 

From 0256cdb9d1d32254ba607f9c97144794aacefe44 Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Wed, 2 Oct 2024 10:09:55 +0200
Subject: [PATCH 03/12] Implement useSaasOrganization

---
 src/components/Account/useAccountCreate.tsx |  1 -
 src/components/AccountSaas/EditProfile.tsx  | 38 ++++++++++++++-------
 src/components/AccountSaas/queries.ts       | 35 +++++++++++++++++++
 src/components/Auth/api.ts                  |  1 +
 src/elements/OrganizationSaas/Edit.tsx      | 12 ++++++-
 5 files changed, 72 insertions(+), 15 deletions(-)
 create mode 100644 src/components/AccountSaas/queries.ts

diff --git a/src/components/Account/useAccountCreate.tsx b/src/components/Account/useAccountCreate.tsx
index 6da08feea..65844cbea 100644
--- a/src/components/Account/useAccountCreate.tsx
+++ b/src/components/Account/useAccountCreate.tsx
@@ -1,5 +1,4 @@
 import { useClient } from '@vocdoni/react-providers'
-import { useMutation, UseMutationOptions, useQuery } from '@tanstack/react-query'
 import { Account } from '@vocdoni/sdk'
 import { useAccountHealthTools } from '~components/Account/use-account-health-tools'
 
diff --git a/src/components/AccountSaas/EditProfile.tsx b/src/components/AccountSaas/EditProfile.tsx
index bf2438b9d..a4003e5af 100644
--- a/src/components/AccountSaas/EditProfile.tsx
+++ b/src/components/AccountSaas/EditProfile.tsx
@@ -1,6 +1,5 @@
 import { AspectRatio, Box, Flex, FormControl, FormLabel, IconButton, Image, Input, Text } from '@chakra-ui/react'
 import { Button } from '@vocdoni/chakra-components'
-import { useClient } from '@vocdoni/react-providers'
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { BiTrash } from 'react-icons/bi'
@@ -16,27 +15,40 @@ import {
 import { REGEX_AVATAR } from '~constants'
 import useDarkMode from '~src/themes/saas/hooks/useDarkMode'
 import fallback from '/assets/default-avatar.png'
+import { useSaasOrganization } from '~components/AccountSaas/queries'
 
 type FormData = CustomOrgFormData &
   PrivateOrgFormData &
-  Pick<OrgInterface, 'name' | 'website' | 'description' | 'logo' | 'header'>
+  Pick<OrgInterface, 'name' | 'website' | 'description' | 'logo' | 'header' | 'communications'>
 
 const EditProfile = () => {
-  const { account } = useClient()
+  const { data } = useSaasOrganization()
+
   const { t } = useTranslation()
 
   const methods = useForm<FormData>({
     defaultValues: {
-      name: account?.account.name.default || '',
-      // website: account?.account. || '',
-      description: account?.account.description.default || '',
-      // size: account?.account.name.default || '',
-      // type: account?.account.name.default || '',
-      // country: account?.account.name.default || '',
-      // timezone: account?.account.name.default || '',
-      // language: account?.account.name.default || '',
-      logo: account?.account.avatar || '',
-      header: account?.account.header || '',
+      name: data?.name || '',
+      website: data?.website || '',
+      description: data?.description || '',
+      sizeSelect: data?.size && {
+        value: data.size,
+      },
+      typeSelect: data?.type && {
+        value: data.type,
+      },
+      countrySelect: data?.country && {
+        value: data.country || '',
+      },
+      communications: data?.communications || false,
+      timeZoneSelect: data?.timezone && {
+        value: data.timezone,
+      },
+      languageSelect: data?.language && {
+        value: data.language,
+      },
+      logo: data?.logo || '',
+      header: data?.header || '',
     },
   })
 
diff --git a/src/components/AccountSaas/queries.ts b/src/components/AccountSaas/queries.ts
new file mode 100644
index 000000000..475646da1
--- /dev/null
+++ b/src/components/AccountSaas/queries.ts
@@ -0,0 +1,35 @@
+import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+import { useAuth } from '~components/Auth/useAuth'
+import { ApiEndpoints } from '~components/Auth/api'
+import { OrgInterface } from '~components/AccountSaas/AccountTypes'
+
+export const useEditSaasOrganization = ({
+  options,
+}: {
+  options?: Omit<UseQueryOptions<OrgInterface>, 'queryKey' | 'queryFn'>
+} = {}) => {
+  // todo(kon)
+  // const { bearedFetch, signerAddress } = useAuth()
+  //
+  // return useQuery({
+  //   queryKey: ['organizations', 'info', signerAddress],
+  //   queryFn: () => bearedFetch<OrgInterface>(ApiEndpoints.ORGANIZATION_INFO.replace('{address}', signerAddress)),
+  //   enabled: !!signerAddress,
+  //   ...options,
+  // })
+}
+
+export const useSaasOrganization = ({
+  options,
+}: {
+  options?: Omit<UseQueryOptions<OrgInterface>, 'queryKey' | 'queryFn'>
+} = {}) => {
+  const { bearedFetch, signerAddress } = useAuth()
+
+  return useQuery({
+    queryKey: ['organizations', 'info', signerAddress],
+    queryFn: () => bearedFetch<OrgInterface>(ApiEndpoints.ORGANIZATION_INFO.replace('{address}', signerAddress)),
+    enabled: !!signerAddress,
+    ...options,
+  })
+}
diff --git a/src/components/Auth/api.ts b/src/components/Auth/api.ts
index 8637abae4..87c597adf 100644
--- a/src/components/Auth/api.ts
+++ b/src/components/Auth/api.ts
@@ -7,6 +7,7 @@ export enum ApiEndpoints {
   VERIFY = 'users/verify',
   RESEND_VERIFICATION = 'users/verify/code',
   ACCOUNT_CREATE = 'organizations',
+  ORGANIZATION_INFO = 'organizations/{address}',
   TEAM_MEMBERS = 'organizations/{address}/members',
 }
 
diff --git a/src/elements/OrganizationSaas/Edit.tsx b/src/elements/OrganizationSaas/Edit.tsx
index fbb9cad3d..518ddf271 100644
--- a/src/elements/OrganizationSaas/Edit.tsx
+++ b/src/elements/OrganizationSaas/Edit.tsx
@@ -1,5 +1,15 @@
 import EditProfile from '~components/AccountSaas/EditProfile'
+import { useSaasOrganization } from '~components/AccountSaas/queries'
+import QueryDataLayout from '~components/Layout/QueryDataLayout'
 
-const OrganizationEdit = () => <EditProfile />
+const OrganizationEdit = () => {
+  const { isLoading, isError, error } = useSaasOrganization()
+
+  return (
+    <QueryDataLayout isLoading={isLoading} isError={isError} error={error}>
+      <EditProfile />
+    </QueryDataLayout>
+  )
+}
 
 export default OrganizationEdit

From e0ceebc59218d9c963af639524ff5bb5b2e14ca2 Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Wed, 2 Oct 2024 10:10:13 +0200
Subject: [PATCH 04/12] Fix SaaS selector to show label

---
 src/components/Layout/SaasSelector.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/Layout/SaasSelector.tsx b/src/components/Layout/SaasSelector.tsx
index 8a2b9a312..b9609d6c2 100644
--- a/src/components/Layout/SaasSelector.tsx
+++ b/src/components/Layout/SaasSelector.tsx
@@ -1,5 +1,5 @@
 import { FormControl, FormErrorMessage, FormLabel, Text } from '@chakra-ui/react'
-import { ChakraStylesConfig, GroupBase, Select, Props as SelectProps } from 'chakra-react-select'
+import { ChakraStylesConfig, GroupBase, Props as SelectProps, Select } from 'chakra-react-select'
 import { Controller, useFormContext } from 'react-hook-form'
 import { ControllerProps } from 'react-hook-form/dist/types'
 import { useTranslation } from 'react-i18next'
@@ -90,6 +90,15 @@ export const SelectCustom = ({
         render={({ field }) => (
           <Select
             placeholder={t('form.choose_an_option', { defaultValue: 'Choose an option' })}
+            getOptionLabel={(option: SelectOptionType) => {
+              // If no label is set for the current option, find the corresponding label in the options array
+              // This allows setting the value directly in form defaults without needing to know the label
+              if (!option?.label) {
+                const foundOption = (rest.options as SelectOptionType[]).find((opt) => opt?.value === option?.value)
+                return foundOption?.label || option.value
+              }
+              return option.label
+            }}
             {...field}
             {...rest}
             chakraStyles={customStyles}
@@ -161,7 +170,7 @@ export const CountriesTypesSelector = ({ ...props }: Omit<SelectCustomProps, 'op
   )
 }
 
-export const MembershipSizeTypesSelector = ({ ...props }: Omit<SelectCustomProps, 'options'>) => {
+export const MembershipSizeTypesSelector = ({ defaultValue, ...props }: Omit<SelectCustomProps, 'options'>) => {
   const { t } = useTranslation()
   const listSizes: SelectOptionType[] = [
     { label: '0-100', value: '0-100' },

From 67187bd62c92f9ff64f6a96f213a606f7bdf8adf Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Wed, 2 Oct 2024 10:34:30 +0200
Subject: [PATCH 05/12] Refactor api path keys

---
 src/components/AccountSaas/Create.tsx         |  2 +-
 src/components/AccountSaas/queries.ts         | 20 +++++++++----------
 src/components/Auth/api.ts                    |  8 ++++----
 src/components/Auth/authQueries.ts            |  2 +-
 .../OrganizationSaas/Dashboard/Team.tsx       |  3 ++-
 5 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/components/AccountSaas/Create.tsx b/src/components/AccountSaas/Create.tsx
index 7e946138b..5b3d5e1cf 100644
--- a/src/components/AccountSaas/Create.tsx
+++ b/src/components/AccountSaas/Create.tsx
@@ -29,7 +29,7 @@ const useSaasAccountCreate = (options?: Omit<UseMutationOptions<void, Error, Cre
   const { bearedFetch } = useAuth()
   return useMutation<void, Error, CreateOrgParams>({
     mutationFn: (params: CreateOrgParams) =>
-      bearedFetch<void>(ApiEndpoints.ACCOUNT_CREATE, { body: params, method: 'POST' }),
+      bearedFetch<void>(ApiEndpoints.ORGANIZATIONS, { body: params, method: 'POST' }),
     ...options,
   })
 }
diff --git a/src/components/AccountSaas/queries.ts b/src/components/AccountSaas/queries.ts
index 475646da1..066a959aa 100644
--- a/src/components/AccountSaas/queries.ts
+++ b/src/components/AccountSaas/queries.ts
@@ -2,19 +2,17 @@ import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { useAuth } from '~components/Auth/useAuth'
 import { ApiEndpoints } from '~components/Auth/api'
 import { OrgInterface } from '~components/AccountSaas/AccountTypes'
+import { UseMutationOptions } from '@tanstack/react-query/build/modern/index'
+import { IRegisterParams, LoginResponse } from '~components/Auth/authQueries'
 
-export const useEditSaasOrganization = ({
-  options,
-}: {
-  options?: Omit<UseQueryOptions<OrgInterface>, 'queryKey' | 'queryFn'>
-} = {}) => {
+export const useEditSaasOrganization = (
+  options?: Omit<UseMutationOptions<LoginResponse, Error, IRegisterParams>, 'mutationFn'>
+) => {
   // todo(kon)
   // const { bearedFetch, signerAddress } = useAuth()
-  //
-  // return useQuery({
-  //   queryKey: ['organizations', 'info', signerAddress],
-  //   queryFn: () => bearedFetch<OrgInterface>(ApiEndpoints.ORGANIZATION_INFO.replace('{address}', signerAddress)),
-  //   enabled: !!signerAddress,
+  // return useMutation<LoginResponse, Error, IRegisterParams>({
+  //   mutationFn: (params: IRegisterParams) =>
+  //     api<LoginResponse>(ApiEndpoints.REGISTER, { body: params, method: 'POST' }),
   //   ...options,
   // })
 }
@@ -28,7 +26,7 @@ export const useSaasOrganization = ({
 
   return useQuery({
     queryKey: ['organizations', 'info', signerAddress],
-    queryFn: () => bearedFetch<OrgInterface>(ApiEndpoints.ORGANIZATION_INFO.replace('{address}', signerAddress)),
+    queryFn: () => bearedFetch<OrgInterface>(ApiEndpoints.ORGANIZATION.replace('{address}', signerAddress)),
     enabled: !!signerAddress,
     ...options,
   })
diff --git a/src/components/Auth/api.ts b/src/components/Auth/api.ts
index 87c597adf..51688148a 100644
--- a/src/components/Auth/api.ts
+++ b/src/components/Auth/api.ts
@@ -4,11 +4,11 @@ export enum ApiEndpoints {
   LOGIN = 'auth/login',
   REFRESH = 'auth/refresh',
   REGISTER = 'users',
+  ORGANIZATIONS = 'organizations',
+  ORGANIZATION = 'organizations/{address}',
+  ORGANIZATION_MEMBERS = 'organizations/{address}/members',
   VERIFY = 'users/verify',
-  RESEND_VERIFICATION = 'users/verify/code',
-  ACCOUNT_CREATE = 'organizations',
-  ORGANIZATION_INFO = 'organizations/{address}',
-  TEAM_MEMBERS = 'organizations/{address}/members',
+  VERIFY_RESEND = 'users/verify/code',
 }
 
 interface IApiError {
diff --git a/src/components/Auth/authQueries.ts b/src/components/Auth/authQueries.ts
index 5c77ee793..79a1626ba 100644
--- a/src/components/Auth/authQueries.ts
+++ b/src/components/Auth/authQueries.ts
@@ -55,7 +55,7 @@ export const useResendVerificationMail = (
 ) => {
   return useMutation<void, Error, IResendVerificationParams>({
     mutationFn: (params: IResendVerificationParams) =>
-      api<void>(ApiEndpoints.RESEND_VERIFICATION, { body: params, method: 'POST' }),
+      api<void>(ApiEndpoints.VERIFY_RESEND, { body: params, method: 'POST' }),
     ...options,
   })
 }
diff --git a/src/components/OrganizationSaas/Dashboard/Team.tsx b/src/components/OrganizationSaas/Dashboard/Team.tsx
index 2c0b23d34..e0bc985b1 100644
--- a/src/components/OrganizationSaas/Dashboard/Team.tsx
+++ b/src/components/OrganizationSaas/Dashboard/Team.tsx
@@ -42,7 +42,8 @@ const useTeamMembers = ({
   const { bearedFetch, signerAddress } = useAuth()
   return useQuery({
     queryKey: ['organizations', 'members', signerAddress],
-    queryFn: () => bearedFetch<ITeamMembersResponse>(ApiEndpoints.TEAM_MEMBERS.replace('{address}', signerAddress)),
+    queryFn: () =>
+      bearedFetch<ITeamMembersResponse>(ApiEndpoints.ORGANIZATION_MEMBERS.replace('{address}', signerAddress)),
     ...options,
   })
 }

From 2b312a14ee7b008f679fc3544284fedeba63a99e Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Wed, 2 Oct 2024 11:17:04 +0200
Subject: [PATCH 06/12] Implement FormSubmitError component

---
 src/components/AccountSaas/Create.tsx       | 21 ++++--------
 src/components/Auth/SignIn.tsx              | 11 ++-----
 src/components/Auth/SignUp.tsx              | 13 +++-----
 src/components/Auth/Verify.tsx              | 35 +++++++++-----------
 src/components/Layout/FormSubmitMessage.tsx | 36 +++++++++++++++++++++
 5 files changed, 66 insertions(+), 50 deletions(-)
 create mode 100644 src/components/Layout/FormSubmitMessage.tsx

diff --git a/src/components/AccountSaas/Create.tsx b/src/components/AccountSaas/Create.tsx
index 5b3d5e1cf..c0f9dd880 100644
--- a/src/components/AccountSaas/Create.tsx
+++ b/src/components/AccountSaas/Create.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, FlexProps, FormControl, FormErrorMessage, Heading, Text } from '@chakra-ui/react'
+import { Box, Flex, FlexProps, Heading, Text } from '@chakra-ui/react'
 import { Button } from '@vocdoni/chakra-components'
 import { FormProvider, useForm } from 'react-hook-form'
 import { Trans, useTranslation } from 'react-i18next'
@@ -7,14 +7,15 @@ import { useMutation, UseMutationOptions } from '@tanstack/react-query'
 import { useClient } from '@vocdoni/react-providers'
 import { useState } from 'react'
 import { useAccountCreate } from '~components/Account/useAccountCreate'
-import { CreateOrgParams, OrgInterface } from '~components/AccountSaas/AccountTypes'
+import { CreateOrgParams } from '~components/AccountSaas/AccountTypes'
 import { PrivateOrgForm, PrivateOrgFormData, PublicOrgForm } from '~components/AccountSaas/Layout'
 import { ApiEndpoints } from '~components/Auth/api'
 import { useAuth } from '~components/Auth/useAuth'
 import useDarkMode from '~src/themes/saas/hooks/useDarkMode'
 import LogoutBtn from '~components/AccountSaas/LogoutBtn'
+import FormSubmitMessage from '~components/Layout/FormSubmitMessage'
 
-type FormData = PrivateOrgFormData & Pick<OrgInterface, 'name' | 'website' | 'description' | 'communications'>
+type FormData = PrivateOrgFormData & CreateOrgParams
 
 // This specific error message should be ignored and not displayed in the UI.
 // Context: After login, a RemoteSigner is created and passed to the SDK via the useClient hook.
@@ -48,8 +49,6 @@ export const AccountCreate = ({ children, ...props }: FlexProps) => {
   const { create: createAccount, error: accountError } = useAccountCreate()
   const { mutateAsync: createSaasAccount, isError: isSaasError, error: saasError } = useSaasAccountCreate()
 
-  const isError = !!accountError || isSaasError
-
   const error = saasError || accountError
 
   const onSubmit = (values: FormData) => {
@@ -73,6 +72,8 @@ export const AccountCreate = ({ children, ...props }: FlexProps) => {
       .finally(() => setIsPending(false))
   }
 
+  const isError = (!!accountError || isSaasError) && error !== IgnoreAccountError
+
   return (
     <FormProvider {...methods}>
       <Flex
@@ -100,15 +101,7 @@ export const AccountCreate = ({ children, ...props }: FlexProps) => {
         <Button form='process-create-form' type='submit' isLoading={isPending} mx='auto' mt={8} w='80%'>
           {t('organization.create_org')}
         </Button>
-        <Box pt={2}>
-          <FormControl isInvalid={isError}>
-            {isError && error !== IgnoreAccountError && (
-              <FormErrorMessage>
-                {typeof error === 'string' ? error : error?.message || 'Error performing the operation'}
-              </FormErrorMessage>
-            )}
-          </FormControl>
-        </Box>
+        <FormSubmitMessage isError={isError} error={error} />
         <Text color={textColorSecondary} fontSize='sm' textAlign='center' py={5} mt='auto'>
           <Trans i18nKey='create_org.already_profile'>
             If your organization already have a profile, ask the admin to invite you to your organization.
diff --git a/src/components/Auth/SignIn.tsx b/src/components/Auth/SignIn.tsx
index 8780c745e..7942ce388 100644
--- a/src/components/Auth/SignIn.tsx
+++ b/src/components/Auth/SignIn.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Flex, FormControl, FormErrorMessage, Heading, Text } from '@chakra-ui/react'
+import { Box, Button, Flex, Heading, Text } from '@chakra-ui/react'
 import { useState } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
@@ -11,6 +11,7 @@ import useDarkMode from '~src/themes/saas/hooks/useDarkMode'
 import CustomCheckbox from '../Layout/CheckboxCustom'
 import InputCustom from '../Layout/InputCustom'
 import GoogleAuth from './GoogleAuth'
+import FormSubmitMessage from '~components/Layout/FormSubmitMessage'
 
 type FormData = {
   keepLogedIn: boolean
@@ -104,13 +105,7 @@ const SignIn = () => {
           </NavLink>
         </Text>
       </Flex>
-      {isError && (
-        <Box>
-          <FormControl isInvalid={isError}>
-            <FormErrorMessage>{error?.message || 'Error performing the operation'}</FormErrorMessage>
-          </FormControl>
-        </Box>
-      )}
+      <FormSubmitMessage isError={isError} error={error} />
     </Flex>
   )
 }
diff --git a/src/components/Auth/SignUp.tsx b/src/components/Auth/SignUp.tsx
index 42fc9bc5a..23d90c39c 100644
--- a/src/components/Auth/SignUp.tsx
+++ b/src/components/Auth/SignUp.tsx
@@ -1,8 +1,8 @@
-import { Box, Button, Flex, FormControl, FormErrorMessage, Heading, Link, Text } from '@chakra-ui/react'
+import { Box, Button, Flex, Heading, Link, Text } from '@chakra-ui/react'
 import { useState } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { Trans, useTranslation } from 'react-i18next'
-import { NavLink, Link as ReactRouterLink } from 'react-router-dom'
+import { Link as ReactRouterLink, NavLink } from 'react-router-dom'
 import { IRegisterParams } from '~components/Auth/authQueries'
 import { useAuth } from '~components/Auth/useAuth'
 import { VerifyAccountNeeded } from '~components/Auth/Verify'
@@ -11,6 +11,7 @@ import CustomCheckbox from '../Layout/CheckboxCustom'
 import InputCustom from '../Layout/InputCustom'
 import GoogleAuth from './GoogleAuth'
 import { HSeparator } from './SignIn'
+import FormSubmitMessage from '~components/Layout/FormSubmitMessage'
 
 type FormData = {
   terms: boolean
@@ -114,13 +115,7 @@ const SignUp = () => {
           </NavLink>
         </Text>
       </Flex>
-      {isError && (
-        <Box>
-          <FormControl isInvalid={isError}>
-            <FormErrorMessage>{error?.message || 'Error performing the operation'}</FormErrorMessage>
-          </FormControl>
-        </Box>
-      )}
+      {isError && <FormSubmitMessage isError={isError} error={error} />}
     </Flex>
   )
 }
diff --git a/src/components/Auth/Verify.tsx b/src/components/Auth/Verify.tsx
index 18aa0e2fa..89d528953 100644
--- a/src/components/Auth/Verify.tsx
+++ b/src/components/Auth/Verify.tsx
@@ -1,11 +1,12 @@
-import { Box, Button, Divider, Flex, FormControl, FormErrorMessage, Heading, Input, Text } from '@chakra-ui/react'
+import { Box, Button, Divider, Flex, FormControl, FormErrorMessage, Heading, Text } from '@chakra-ui/react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Link as ReactRouterLink, useNavigate, useSearchParams } from 'react-router-dom'
 import useDarkMode from '~src/themes/saas/hooks/useDarkMode'
 import { useAuth } from '~components/Auth/useAuth'
 import { Loading } from '~src/router/SuspenseLoader'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect } from 'react'
 import { useResendVerificationMail } from '~components/Auth/authQueries'
+import FormSubmitMessage from '~components/Layout/FormSubmitMessage'
 
 const Verify = () => {
   const navigate = useNavigate()
@@ -112,19 +113,18 @@ const VerifyForm = ({ email }: IVerifyAccountProps) => {
 export const VerifyAccountNeeded = ({ email }: IVerifyAccountProps) => {
   const { textColor, textColorSecondary } = useDarkMode()
   const { t } = useTranslation()
-  const {
-    mutate: resend,
-    isError: isResendError,
-    error: resendError,
-    isPending: isResendPending,
-    isSuccess: isResendSuccess,
-  } = useResendVerificationMail()
+  const [emailSent, setEmailSent] = useState(false)
+  const { mutate, isError, error, isPending } = useResendVerificationMail({
+    onSuccess: () => {
+      setEmailSent(true)
+    },
+  })
 
   const resendMail = useCallback(() => {
-    if (email && !isResendSuccess) {
-      resend({ email })
+    if (email && !emailSent) {
+      mutate({ email })
     }
-  }, [isResendSuccess, email])
+  }, [emailSent, email])
 
   return (
     <Flex direction='column' gap={2}>
@@ -151,15 +151,12 @@ export const VerifyAccountNeeded = ({ email }: IVerifyAccountProps) => {
       <Button isLoading={isResendPending} onClick={resendMail}>
         <Trans i18nKey={'verify.resend_confirmation_mail'}>Resend Email</Trans>
       </Button>
-      <Box>
-        {isResendSuccess && <Trans i18nKey={'verify.email_sent'}>Email sent successfully</Trans>}
-        <FormControl isInvalid={isResendError}>
-          {isResendError && (
-            <FormErrorMessage>{resendError?.message || 'Error al realizar la operación'}</FormErrorMessage>
-          )}
+      <Box pt={2}>
+        {emailSent && <Trans i18nKey={'verify.email_sent'}>Email sent successfully</Trans>}
+        <FormControl isInvalid={isError}>
+          {isError && <FormErrorMessage>{error?.message || 'Error al realizar la operación'}</FormErrorMessage>}
         </FormControl>
       </Box>
-
       {import.meta.env.VOCDONI_ENVIRONMENT === 'dev' && (
         <>
           <Divider />
diff --git a/src/components/Layout/FormSubmitMessage.tsx b/src/components/Layout/FormSubmitMessage.tsx
new file mode 100644
index 000000000..015e5f04b
--- /dev/null
+++ b/src/components/Layout/FormSubmitMessage.tsx
@@ -0,0 +1,36 @@
+import { Box, BoxProps, FormControl, FormErrorMessage } from '@chakra-ui/react'
+
+const FormSubmitMessage = ({
+  error,
+  isError,
+  isSuccess,
+  success,
+  ...boxProps
+}: {
+  error?: Error | string
+  isError?: boolean
+  isSuccess?: boolean
+  success?: string
+} & BoxProps) => {
+  if (isSuccess) {
+    return (
+      <Box pt={2} {...boxProps}>
+        {success}
+      </Box>
+    )
+  }
+  if (isError) {
+    return (
+      <FormControl isInvalid={isError}>
+        <Box pt={2} {...boxProps}>
+          <FormErrorMessage>
+            {typeof error === 'string' ? error : error?.message || 'Error performing the operation'}
+          </FormErrorMessage>
+        </Box>
+      </FormControl>
+    )
+  }
+  return null
+}
+
+export default FormSubmitMessage

From 494f38cbc2aaac21f54379a0e940cd79f8e25163 Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Wed, 2 Oct 2024 11:37:21 +0200
Subject: [PATCH 07/12] Implement edit profile mutation

---
 src/components/AccountSaas/EditProfile.tsx | 57 +++++++++++-----------
 src/components/AccountSaas/Layout.tsx      |  1 -
 src/components/AccountSaas/queries.ts      | 24 ++++-----
 3 files changed, 40 insertions(+), 42 deletions(-)

diff --git a/src/components/AccountSaas/EditProfile.tsx b/src/components/AccountSaas/EditProfile.tsx
index a4003e5af..b15d51ea8 100644
--- a/src/components/AccountSaas/EditProfile.tsx
+++ b/src/components/AccountSaas/EditProfile.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { BiTrash } from 'react-icons/bi'
 import { BsFillTrashFill } from 'react-icons/bs'
 import { MdBrowserUpdated } from 'react-icons/md'
-import { OrgInterface } from '~components/AccountSaas/AccountTypes'
+import { CreateOrgParams } from '~components/AccountSaas/AccountTypes'
 import { PrivateOrgForm, PrivateOrgFormData, PublicOrgForm } from '~components/AccountSaas/Layout'
 import {
   CustomizationLanguageSelector,
@@ -15,17 +15,17 @@ import {
 import { REGEX_AVATAR } from '~constants'
 import useDarkMode from '~src/themes/saas/hooks/useDarkMode'
 import fallback from '/assets/default-avatar.png'
-import { useSaasOrganization } from '~components/AccountSaas/queries'
+import { useEditSaasOrganization, useSaasOrganization } from '~components/AccountSaas/queries'
+import FormSubmitMessage from '~components/Layout/FormSubmitMessage'
 
-type FormData = CustomOrgFormData &
-  PrivateOrgFormData &
-  Pick<OrgInterface, 'name' | 'website' | 'description' | 'logo' | 'header' | 'communications'>
+type FormData = CustomOrgFormData & PrivateOrgFormData & CreateOrgParams
 
 const EditProfile = () => {
-  const { data } = useSaasOrganization()
-
   const { t } = useTranslation()
 
+  const { data } = useSaasOrganization()
+  const { mutate, isPending, isError, error, isSuccess } = useEditSaasOrganization()
+
   const methods = useForm<FormData>({
     defaultValues: {
       name: data?.name || '',
@@ -55,19 +55,22 @@ const EditProfile = () => {
   const { handleSubmit } = methods
 
   const onSubmit: SubmitHandler<FormData> = async (values: FormData) => {
-    const newInfo = {
+    const newInfo: CreateOrgParams = {
       name: values.name,
       website: values.website,
       description: values.description,
       size: values.sizeSelect?.value,
       type: values.typeSelect?.value,
       country: values.countrySelect?.value,
-      timeZone: values.timeZoneSelect.value,
+      timezone: values.timeZoneSelect.value,
       language: values.languageSelect.value,
       logo: values.logo,
       header: values.header,
     }
-    console.log(values, newInfo)
+    mutate({
+      ...data,
+      ...newInfo,
+    })
   }
 
   return (
@@ -89,29 +92,25 @@ const EditProfile = () => {
           <PublicOrgForm />
           <PrivateOrgForm />
           <CustomizeOrgForm />
-          <Flex justifyContent='center'>
+          <Flex align='center' direction={'column'}>
             <Button
+              type={'submit'}
+              leftIcon={<MdBrowserUpdated />}
+              isLoading={isPending}
               aria-label=''
               w='full'
               maxW='400px'
-              sx={{
-                span: {
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  alignItems: 'center',
-                  gap: 2,
-                },
-              }}
             >
-              <Box>
-                <MdBrowserUpdated />
-              </Box>
-              <Text as='span'>
-                {t('udpate', {
-                  defaultValue: 'Update',
-                })}
-              </Text>
+              {t('update', {
+                defaultValue: 'Update',
+              })}
             </Button>
+            <FormSubmitMessage
+              isError={isError}
+              error={error}
+              isSuccess={isSuccess}
+              success={t('edit_saas_profile.edited_successfully', { defaultValue: 'Updated successfully' })}
+            />
           </Flex>
         </Flex>
       </Box>
@@ -145,8 +144,8 @@ const CustomizeOrgForm = () => {
         </Text>
       </Box>
       <Flex flexDirection='column' gap={6} px={{ base: 5, md: 10 }}>
-        <CustomizationTimeZoneSelector name={'timeZoneSelect'} required />
-        <CustomizationLanguageSelector name={'languageSelect'} required />
+        <CustomizationTimeZoneSelector name={'timeZoneSelect'} />
+        <CustomizationLanguageSelector name={'languageSelect'} />
         <FormControl>
           <FormLabel display='flex' ms={1} fontSize='sm' fontWeight='500' color={textColor} mb={2}>
             {t('logo', {
diff --git a/src/components/AccountSaas/Layout.tsx b/src/components/AccountSaas/Layout.tsx
index 11bf0c327..c06b2b987 100644
--- a/src/components/AccountSaas/Layout.tsx
+++ b/src/components/AccountSaas/Layout.tsx
@@ -41,7 +41,6 @@ export const PublicOrgForm = () => {
             defaultValue: 'https://example.com',
           })}
           type='text'
-          required
         />
 
         <FormControl>
diff --git a/src/components/AccountSaas/queries.ts b/src/components/AccountSaas/queries.ts
index 066a959aa..fe0acce26 100644
--- a/src/components/AccountSaas/queries.ts
+++ b/src/components/AccountSaas/queries.ts
@@ -1,20 +1,20 @@
-import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { useAuth } from '~components/Auth/useAuth'
 import { ApiEndpoints } from '~components/Auth/api'
-import { OrgInterface } from '~components/AccountSaas/AccountTypes'
-import { UseMutationOptions } from '@tanstack/react-query/build/modern/index'
-import { IRegisterParams, LoginResponse } from '~components/Auth/authQueries'
+import { CreateOrgParams, OrgInterface } from '~components/AccountSaas/AccountTypes'
 
 export const useEditSaasOrganization = (
-  options?: Omit<UseMutationOptions<LoginResponse, Error, IRegisterParams>, 'mutationFn'>
+  options?: Omit<UseMutationOptions<void, Error, CreateOrgParams>, 'mutationFn'>
 ) => {
-  // todo(kon)
-  // const { bearedFetch, signerAddress } = useAuth()
-  // return useMutation<LoginResponse, Error, IRegisterParams>({
-  //   mutationFn: (params: IRegisterParams) =>
-  //     api<LoginResponse>(ApiEndpoints.REGISTER, { body: params, method: 'POST' }),
-  //   ...options,
-  // })
+  const { bearedFetch, signerAddress } = useAuth()
+  return useMutation<void, Error, CreateOrgParams>({
+    mutationFn: (params: CreateOrgParams) =>
+      bearedFetch<void>(ApiEndpoints.ORGANIZATION.replace('{address}', signerAddress), {
+        body: params,
+        method: 'PUT',
+      }),
+    ...options,
+  })
 }
 
 export const useSaasOrganization = ({

From 3a7d2e7d0e37c2641ae79eb7637ce6d29ab14c3c Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Wed, 2 Oct 2024 12:38:35 +0200
Subject: [PATCH 08/12] Fix members is undefined

---
 src/components/OrganizationSaas/Dashboard/Team.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/OrganizationSaas/Dashboard/Team.tsx b/src/components/OrganizationSaas/Dashboard/Team.tsx
index e0bc985b1..4cc9e540c 100644
--- a/src/components/OrganizationSaas/Dashboard/Team.tsx
+++ b/src/components/OrganizationSaas/Dashboard/Team.tsx
@@ -51,15 +51,13 @@ const useTeamMembers = ({
 const TeamList = () => {
   const { data, isLoading, isError, error } = useTeamMembers()
 
-  const members = data.members
-
   return (
-    <QueryDataLayout isEmpty={!data.members} isLoading={isLoading} isError={isError} error={error}>
+    <QueryDataLayout isEmpty={!data?.members} isLoading={isLoading} isError={isError} error={error}>
       <Flex display={'column'}>
         <Text fontWeight={'bold'}>
           <Trans i18nKey={'team.team_members'}>Team members</Trans>
           <Badge ml='1' colorScheme='green'>
-            {members.length}
+            {data?.members?.length}
           </Badge>
         </Text>
         <TableContainer>
@@ -75,7 +73,7 @@ const TeamList = () => {
               </Tr>
             </Thead>
             <Tbody>
-              {members.map((member, i) => {
+              {data?.members?.map((member, i) => {
                 return (
                   <Tr key={i}>
                     <Td>

From 392bbdf17e27dde6d2cee4b0d31d910e4446b955 Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Thu, 3 Oct 2024 13:20:02 +0200
Subject: [PATCH 09/12] Fix rebase

---
 src/components/Auth/Verify.tsx | 57 +++++++++++++++++-----------------
 1 file changed, 28 insertions(+), 29 deletions(-)

diff --git a/src/components/Auth/Verify.tsx b/src/components/Auth/Verify.tsx
index 89d528953..db4ed343a 100644
--- a/src/components/Auth/Verify.tsx
+++ b/src/components/Auth/Verify.tsx
@@ -1,10 +1,10 @@
-import { Box, Button, Divider, Flex, FormControl, FormErrorMessage, Heading, Text } from '@chakra-ui/react'
+import { Box, Button, Divider, Flex, FormControl, FormErrorMessage, Heading, Input, Text } from '@chakra-ui/react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Link as ReactRouterLink, useNavigate, useSearchParams } from 'react-router-dom'
 import useDarkMode from '~src/themes/saas/hooks/useDarkMode'
 import { useAuth } from '~components/Auth/useAuth'
 import { Loading } from '~src/router/SuspenseLoader'
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useResendVerificationMail } from '~components/Auth/authQueries'
 import FormSubmitMessage from '~components/Layout/FormSubmitMessage'
 
@@ -94,18 +94,13 @@ const VerifyForm = ({ email }: IVerifyAccountProps) => {
       <Button isDisabled={!code} isLoading={isVerifyPending} onClick={verify}>
         <Trans i18nKey={'verify.verify_code'}>Verify</Trans>
       </Button>
-      <Box>
-        <FormControl isInvalid={isVerifyError}>
-          {isVerifyError && (
-            <FormErrorMessage>
-              {t('verify_mail.error_subtitle', {
-                defaultValue:
-                  'We found an error verifying your email, please check verification mail to ensure all data is correct',
-              })}
-            </FormErrorMessage>
-          )}
-        </FormControl>
-      </Box>
+      <FormSubmitMessage
+        isError={isVerifyError}
+        error={t('verify_mail.error_subtitle', {
+          defaultValue:
+            'We found an error verifying your email, please check verification mail to ensure all data is correct',
+        })}
+      />
     </>
   )
 }
@@ -113,18 +108,19 @@ const VerifyForm = ({ email }: IVerifyAccountProps) => {
 export const VerifyAccountNeeded = ({ email }: IVerifyAccountProps) => {
   const { textColor, textColorSecondary } = useDarkMode()
   const { t } = useTranslation()
-  const [emailSent, setEmailSent] = useState(false)
-  const { mutate, isError, error, isPending } = useResendVerificationMail({
-    onSuccess: () => {
-      setEmailSent(true)
-    },
-  })
+  const {
+    mutate: resend,
+    isError: isResendError,
+    error: resendError,
+    isPending: isResendPending,
+    isSuccess: isResendSuccess,
+  } = useResendVerificationMail()
 
   const resendMail = useCallback(() => {
-    if (email && !emailSent) {
-      mutate({ email })
+    if (email && !isResendSuccess) {
+      resend({ email })
     }
-  }, [emailSent, email])
+  }, [isResendSuccess, email])
 
   return (
     <Flex direction='column' gap={2}>
@@ -151,12 +147,15 @@ export const VerifyAccountNeeded = ({ email }: IVerifyAccountProps) => {
       <Button isLoading={isResendPending} onClick={resendMail}>
         <Trans i18nKey={'verify.resend_confirmation_mail'}>Resend Email</Trans>
       </Button>
-      <Box pt={2}>
-        {emailSent && <Trans i18nKey={'verify.email_sent'}>Email sent successfully</Trans>}
-        <FormControl isInvalid={isError}>
-          {isError && <FormErrorMessage>{error?.message || 'Error al realizar la operación'}</FormErrorMessage>}
-        </FormControl>
-      </Box>
+      <FormSubmitMessage
+        isSuccess={isResendSuccess}
+        success={t('verify.email_sent', {
+          defaultValue: 'Email sent successfully',
+        })}
+        isError={isResendError}
+        error={resendError}
+      />
+
       {import.meta.env.VOCDONI_ENVIRONMENT === 'dev' && (
         <>
           <Divider />

From 1ec530e2af04e736a8abd83634165cbb2229a21e Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Wed, 16 Oct 2024 03:30:06 -0500
Subject: [PATCH 10/12] Implement saas org provider (#780)

* Implement useSaasAccount

* Implement useSaasAccount on needed screens

* Implement update account

* Improve FormSubmitMessage

* Expose fetch account

* Bulk fixes

* Usa await instead of chaining promises
---
 src/Providers.tsx                             | 16 +++-
 src/components/AccountSaas/AccountTypes.ts    | 14 +--
 src/components/AccountSaas/Create.tsx         |  4 +-
 src/components/AccountSaas/EditProfile.tsx    | 86 +++++++++++++------
 .../AccountSaas/SaasAccountContext.tsx        | 13 +++
 src/components/AccountSaas/queries.ts         | 33 -------
 src/components/AccountSaas/useSaasAccount.ts  | 10 +++
 .../AccountSaas/useSaasAccountProvider.ts     | 50 +++++++++++
 src/components/Layout/ErrorComponent.tsx      |  2 +-
 src/components/Layout/FormSubmitMessage.tsx   |  5 ++
 src/components/Layout/QueryDataLayout.tsx     |  2 +-
 src/elements/OrganizationSaas/Edit.tsx        |  4 +-
 12 files changed, 166 insertions(+), 73 deletions(-)
 create mode 100644 src/components/AccountSaas/SaasAccountContext.tsx
 delete mode 100644 src/components/AccountSaas/queries.ts
 create mode 100644 src/components/AccountSaas/useSaasAccount.ts
 create mode 100644 src/components/AccountSaas/useSaasAccountProvider.ts

diff --git a/src/Providers.tsx b/src/Providers.tsx
index 5fb64144e..e2376fa8b 100644
--- a/src/Providers.tsx
+++ b/src/Providers.tsx
@@ -14,6 +14,7 @@ import { translations } from './i18n/components'
 import { datesLocale } from './i18n/locales'
 import { RoutesProvider } from './router/Router'
 import { RainbowKitTheme, Theme } from './Theme'
+import { SaasAccountProvider } from '~components/AccountSaas/SaasAccountContext'
 
 const queryClient = new QueryClient()
 
@@ -29,6 +30,17 @@ export const Providers = () => {
   )
 }
 
+const SaasProviders = ({ children }: PropsWithChildren<{}>) => {
+  if (!import.meta.env.SAAS_URL) {
+    return children
+  }
+  return (
+    <AuthProvider>
+      <SaasAccountProvider>{children}</SaasAccountProvider>
+    </AuthProvider>
+  )
+}
+
 export const AppProviders = () => {
   const { data } = useWalletClient()
   const { address } = useAccount()
@@ -48,10 +60,10 @@ export const AppProviders = () => {
         datesLocale={datesLocale(i18n.language)}
         options={{ faucet_url: import.meta.env.CUSTOM_FAUCET_URL }}
       >
-        <AuthProvider>
+        <SaasProviders>
           <ColorModeScript />
           <RoutesProvider />
-        </AuthProvider>
+        </SaasProviders>
       </ClientProvider>
     </RainbowKitTheme>
   )
diff --git a/src/components/AccountSaas/AccountTypes.ts b/src/components/AccountSaas/AccountTypes.ts
index 187dd85ff..0e22713f2 100644
--- a/src/components/AccountSaas/AccountTypes.ts
+++ b/src/components/AccountSaas/AccountTypes.ts
@@ -1,20 +1,24 @@
-export interface OrgInterface {
+import { AccountData, IAccount } from '@vocdoni/sdk'
+
+export type SaasOrganizationData = {
   active: boolean
   address: string
   createdAt: string
-  name: string
   website: string
-  description: string
   size: string
   type: string
   country: string
   timezone: string
   language: string
-  logo: string
   header: string
   subdomain: string
   color: string
   communications: boolean
 }
 
-export type CreateOrgParams = Partial<Omit<OrgInterface, 'active' | 'address' | 'createdAt'>>
+export type OrganizationData = SaasOrganizationData & AccountData
+
+export type CreateOrgParams = Partial<
+  Pick<IAccount, 'name' | 'description' | 'logo' | 'header'> &
+    Omit<SaasOrganizationData, 'active' | 'address' | 'createdAt'>
+>
diff --git a/src/components/AccountSaas/Create.tsx b/src/components/AccountSaas/Create.tsx
index c0f9dd880..f9de2bf3b 100644
--- a/src/components/AccountSaas/Create.tsx
+++ b/src/components/AccountSaas/Create.tsx
@@ -65,8 +65,8 @@ export const AccountCreate = ({ children, ...props }: FlexProps) => {
       .then(() => signer.getAddress()) // Get the address of newly created signer
       .then(() =>
         createAccount({
-          name: values.name,
-          description: values.description,
+          name: typeof values.name === 'object' ? values.name.default : values.name,
+          description: typeof values.description === 'object' ? values.description.default : values.description,
         })
       ) // Create the new account on the vochain
       .finally(() => setIsPending(false))
diff --git a/src/components/AccountSaas/EditProfile.tsx b/src/components/AccountSaas/EditProfile.tsx
index b15d51ea8..678380edd 100644
--- a/src/components/AccountSaas/EditProfile.tsx
+++ b/src/components/AccountSaas/EditProfile.tsx
@@ -15,40 +15,68 @@ import {
 import { REGEX_AVATAR } from '~constants'
 import useDarkMode from '~src/themes/saas/hooks/useDarkMode'
 import fallback from '/assets/default-avatar.png'
-import { useEditSaasOrganization, useSaasOrganization } from '~components/AccountSaas/queries'
 import FormSubmitMessage from '~components/Layout/FormSubmitMessage'
+import { useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { useAuth } from '~components/Auth/useAuth'
+import { ApiEndpoints } from '~components/Auth/api'
+import { useSaasAccount } from '~components/AccountSaas/useSaasAccount'
+import { useClient } from '@vocdoni/react-providers'
+import { Account } from '@vocdoni/sdk'
 
 type FormData = CustomOrgFormData & PrivateOrgFormData & CreateOrgParams
 
+const useEditSaasOrganization = (options?: Omit<UseMutationOptions<void, Error, CreateOrgParams>, 'mutationFn'>) => {
+  const { bearedFetch, signerAddress } = useAuth()
+  return useMutation<void, Error, CreateOrgParams>({
+    mutationFn: (params: CreateOrgParams) =>
+      bearedFetch<void>(ApiEndpoints.ORGANIZATION.replace('{address}', signerAddress), {
+        body: params,
+        method: 'PUT',
+      }),
+    ...options,
+  })
+}
+
 const EditProfile = () => {
   const { t } = useTranslation()
+  const {
+    updateAccount,
+    loading: { update: isUpdateLoading },
+    errors: { update: updateError },
+  } = useClient()
+  const { organization } = useSaasAccount()
 
-  const { data } = useSaasOrganization()
-  const { mutate, isPending, isError, error, isSuccess } = useEditSaasOrganization()
+  const {
+    mutateAsync,
+    isPending: isSaasPending,
+    isError: isSaasError,
+    error: saasError,
+    isSuccess,
+  } = useEditSaasOrganization()
 
   const methods = useForm<FormData>({
     defaultValues: {
-      name: data?.name || '',
-      website: data?.website || '',
-      description: data?.description || '',
-      sizeSelect: data?.size && {
-        value: data.size,
+      name: organization?.account.name.default || '',
+      website: organization?.website || '',
+      description: organization?.account.description.default || '',
+      sizeSelect: organization?.size && {
+        value: organization.size,
       },
-      typeSelect: data?.type && {
-        value: data.type,
+      typeSelect: organization?.type && {
+        value: organization.type,
       },
-      countrySelect: data?.country && {
-        value: data.country || '',
+      countrySelect: organization?.country && {
+        value: organization.country || '',
       },
-      communications: data?.communications || false,
-      timeZoneSelect: data?.timezone && {
-        value: data.timezone,
+      communications: organization?.communications || false,
+      timeZoneSelect: organization?.timezone && {
+        value: organization.timezone,
       },
-      languageSelect: data?.language && {
-        value: data.language,
+      languageSelect: organization?.language && {
+        value: organization.language,
       },
-      logo: data?.logo || '',
-      header: data?.header || '',
+      logo: organization?.account.avatar || '',
+      header: organization?.header || '',
     },
   })
 
@@ -56,23 +84,26 @@ const EditProfile = () => {
 
   const onSubmit: SubmitHandler<FormData> = async (values: FormData) => {
     const newInfo: CreateOrgParams = {
-      name: values.name,
       website: values.website,
-      description: values.description,
       size: values.sizeSelect?.value,
       type: values.typeSelect?.value,
       country: values.countrySelect?.value,
       timezone: values.timeZoneSelect.value,
       language: values.languageSelect.value,
-      logo: values.logo,
-      header: values.header,
     }
-    mutate({
-      ...data,
-      ...newInfo,
-    })
+
+    await mutateAsync({ ...organization, ...newInfo })
+    const newAccount = new Account({ ...organization?.account, ...values })
+    // Check if account changed before trying to update
+    if (JSON.stringify(newAccount.generateMetadata()) !== JSON.stringify(organization?.account.generateMetadata())) {
+      updateAccount(newAccount)
+    }
   }
 
+  const isPending = isUpdateLoading || isSaasPending
+  const isError = isSaasError || !!updateError
+  const error = saasError || updateError
+
   return (
     <FormProvider {...methods}>
       <Box height='100%' maxH='100%' overflowY='auto'>
@@ -106,6 +137,7 @@ const EditProfile = () => {
               })}
             </Button>
             <FormSubmitMessage
+              isLoading={isPending}
               isError={isError}
               error={error}
               isSuccess={isSuccess}
diff --git a/src/components/AccountSaas/SaasAccountContext.tsx b/src/components/AccountSaas/SaasAccountContext.tsx
new file mode 100644
index 000000000..2cdf6c4cc
--- /dev/null
+++ b/src/components/AccountSaas/SaasAccountContext.tsx
@@ -0,0 +1,13 @@
+import { createContext, ReactNode } from 'react'
+import { useSaasAccountProvider } from './useSaasAccountProvider'
+
+export const SaasAccountContext = createContext<ReturnType<typeof useSaasAccountProvider> | undefined>(undefined)
+
+export const SaasAccountProvider = ({ children }: { children: ReactNode }) => {
+  const isSaas = !!import.meta.env.SAAS_URL
+  const saasAcount = useSaasAccountProvider({ options: { enabled: isSaas } })
+  if (!isSaas) {
+    return children
+  }
+  return <SaasAccountContext.Provider value={saasAcount}>{children}</SaasAccountContext.Provider>
+}
diff --git a/src/components/AccountSaas/queries.ts b/src/components/AccountSaas/queries.ts
deleted file mode 100644
index fe0acce26..000000000
--- a/src/components/AccountSaas/queries.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
-import { useAuth } from '~components/Auth/useAuth'
-import { ApiEndpoints } from '~components/Auth/api'
-import { CreateOrgParams, OrgInterface } from '~components/AccountSaas/AccountTypes'
-
-export const useEditSaasOrganization = (
-  options?: Omit<UseMutationOptions<void, Error, CreateOrgParams>, 'mutationFn'>
-) => {
-  const { bearedFetch, signerAddress } = useAuth()
-  return useMutation<void, Error, CreateOrgParams>({
-    mutationFn: (params: CreateOrgParams) =>
-      bearedFetch<void>(ApiEndpoints.ORGANIZATION.replace('{address}', signerAddress), {
-        body: params,
-        method: 'PUT',
-      }),
-    ...options,
-  })
-}
-
-export const useSaasOrganization = ({
-  options,
-}: {
-  options?: Omit<UseQueryOptions<OrgInterface>, 'queryKey' | 'queryFn'>
-} = {}) => {
-  const { bearedFetch, signerAddress } = useAuth()
-
-  return useQuery({
-    queryKey: ['organizations', 'info', signerAddress],
-    queryFn: () => bearedFetch<OrgInterface>(ApiEndpoints.ORGANIZATION.replace('{address}', signerAddress)),
-    enabled: !!signerAddress,
-    ...options,
-  })
-}
diff --git a/src/components/AccountSaas/useSaasAccount.ts b/src/components/AccountSaas/useSaasAccount.ts
new file mode 100644
index 000000000..7f5bd2551
--- /dev/null
+++ b/src/components/AccountSaas/useSaasAccount.ts
@@ -0,0 +1,10 @@
+import { useContext } from 'react'
+import { SaasAccountContext } from '~components/AccountSaas/SaasAccountContext'
+
+export const useSaasAccount = () => {
+  const context = useContext(SaasAccountContext)
+  if (!context) {
+    throw new Error('useSaasAccount must be used within an SaasAccountProvider')
+  }
+  return context
+}
diff --git a/src/components/AccountSaas/useSaasAccountProvider.ts b/src/components/AccountSaas/useSaasAccountProvider.ts
new file mode 100644
index 000000000..e44778f12
--- /dev/null
+++ b/src/components/AccountSaas/useSaasAccountProvider.ts
@@ -0,0 +1,50 @@
+import { useClient } from '@vocdoni/react-providers'
+import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+import { OrganizationData } from '~components/AccountSaas/AccountTypes'
+import { useAuth } from '~components/Auth/useAuth'
+import { ApiEndpoints } from '~components/Auth/api'
+import { useCallback } from 'react'
+
+const useSaasOrganization = ({
+  options,
+}: {
+  options?: Omit<UseQueryOptions<OrganizationData>, 'queryKey' | 'queryFn'>
+} = {}) => {
+  const { bearedFetch, signerAddress } = useAuth()
+
+  return useQuery({
+    queryKey: ['organizations', 'info', signerAddress],
+    queryFn: () => bearedFetch<OrganizationData>(ApiEndpoints.ORGANIZATION.replace('{address}', signerAddress)),
+    enabled: !!signerAddress,
+    ...options,
+  })
+}
+
+export const useSaasAccountProvider = (options?: Parameters<typeof useSaasOrganization>[0]) => {
+  const {
+    account: accountSDK,
+    fetchAccount,
+    errors: { fetch: sdkAccountError },
+    loading: { fetch: sdkAccountLoading },
+  } = useClient()
+  const {
+    data: saasData,
+    refetch,
+    isLoading: isSaasLoading,
+    isError: isSaasError,
+    error: saasError,
+  } = useSaasOrganization(options)
+
+  const refetchAccount = useCallback(() => {
+    refetch()
+    fetchAccount()
+  }, [refetch, fetchAccount])
+
+  const organization: OrganizationData = { ...accountSDK, ...saasData }
+
+  const isLoading = isSaasLoading || sdkAccountLoading
+  const isError = isSaasError || !!sdkAccountError
+  const error = saasError || sdkAccountError
+
+  return { organization, refetchAccount, isLoading, isError, error }
+}
diff --git a/src/components/Layout/ErrorComponent.tsx b/src/components/Layout/ErrorComponent.tsx
index 48bda49bf..c11006df2 100644
--- a/src/components/Layout/ErrorComponent.tsx
+++ b/src/components/Layout/ErrorComponent.tsx
@@ -2,7 +2,7 @@ import { Flex, FlexProps, Text } from '@chakra-ui/react'
 import { WarningIcon } from '@chakra-ui/icons'
 import { useTranslation } from 'react-i18next'
 
-const ErrorComponent = ({ error, ...props }: { error: Error } & FlexProps) => {
+const ErrorComponent = ({ error, ...props }: { error: Error | string } & FlexProps) => {
   const { t } = useTranslation()
 
   return (
diff --git a/src/components/Layout/FormSubmitMessage.tsx b/src/components/Layout/FormSubmitMessage.tsx
index 015e5f04b..302d968c8 100644
--- a/src/components/Layout/FormSubmitMessage.tsx
+++ b/src/components/Layout/FormSubmitMessage.tsx
@@ -1,17 +1,22 @@
 import { Box, BoxProps, FormControl, FormErrorMessage } from '@chakra-ui/react'
 
 const FormSubmitMessage = ({
+  isLoading,
   error,
   isError,
   isSuccess,
   success,
   ...boxProps
 }: {
+  isLoading?: boolean
   error?: Error | string
   isError?: boolean
   isSuccess?: boolean
   success?: string
 } & BoxProps) => {
+  if (isLoading) {
+    return null
+  }
   if (isSuccess) {
     return (
       <Box pt={2} {...boxProps}>
diff --git a/src/components/Layout/QueryDataLayout.tsx b/src/components/Layout/QueryDataLayout.tsx
index da5eab6ed..73116fd5c 100644
--- a/src/components/Layout/QueryDataLayout.tsx
+++ b/src/components/Layout/QueryDataLayout.tsx
@@ -6,7 +6,7 @@ interface IUserQueryLayout {
   isLoading: boolean
   isEmpty?: boolean
   isError: boolean
-  error?: Error
+  error?: Error | string
 }
 
 const QueryDataLayout = ({ isLoading, isEmpty, isError, error, children }: IUserQueryLayout & PropsWithChildren) => {
diff --git a/src/elements/OrganizationSaas/Edit.tsx b/src/elements/OrganizationSaas/Edit.tsx
index 518ddf271..73c5dac56 100644
--- a/src/elements/OrganizationSaas/Edit.tsx
+++ b/src/elements/OrganizationSaas/Edit.tsx
@@ -1,9 +1,9 @@
 import EditProfile from '~components/AccountSaas/EditProfile'
-import { useSaasOrganization } from '~components/AccountSaas/queries'
 import QueryDataLayout from '~components/Layout/QueryDataLayout'
+import { useSaasAccount } from '~components/AccountSaas/useSaasAccount'
 
 const OrganizationEdit = () => {
-  const { isLoading, isError, error } = useSaasOrganization()
+  const { isLoading, isError, error } = useSaasAccount()
 
   return (
     <QueryDataLayout isLoading={isLoading} isError={isError} error={error}>

From 3d4c99415235671efedb638acbca08b5a345d909 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=92scar=20Casajuana?= <elboletaire@gmail.com>
Date: Fri, 18 Oct 2024 12:50:53 +0200
Subject: [PATCH 11/12] Review fixes

---
 src/components/AccountSaas/Create.tsx            |  6 +++---
 src/components/AccountSaas/EditProfile.tsx       | 16 ++++++++--------
 .../AccountSaas/useSaasAccountProvider.ts        |  8 ++++----
 src/components/Auth/AuthContext.tsx              |  2 +-
 src/components/Auth/api.ts                       | 16 ++++++++--------
 src/components/Auth/authQueries.ts               |  8 ++++----
 src/components/Auth/useAuthProvider.ts           |  4 ++--
 src/components/Layout/QueryDataLayout.tsx        |  4 ++--
 .../OrganizationSaas/Dashboard/Team.tsx          | 10 +++++-----
 src/themes/onvote/bg.tsx                         |  2 +-
 10 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/components/AccountSaas/Create.tsx b/src/components/AccountSaas/Create.tsx
index f9de2bf3b..c756bde54 100644
--- a/src/components/AccountSaas/Create.tsx
+++ b/src/components/AccountSaas/Create.tsx
@@ -9,11 +9,11 @@ import { useState } from 'react'
 import { useAccountCreate } from '~components/Account/useAccountCreate'
 import { CreateOrgParams } from '~components/AccountSaas/AccountTypes'
 import { PrivateOrgForm, PrivateOrgFormData, PublicOrgForm } from '~components/AccountSaas/Layout'
+import LogoutBtn from '~components/AccountSaas/LogoutBtn'
 import { ApiEndpoints } from '~components/Auth/api'
 import { useAuth } from '~components/Auth/useAuth'
-import useDarkMode from '~src/themes/saas/hooks/useDarkMode'
-import LogoutBtn from '~components/AccountSaas/LogoutBtn'
 import FormSubmitMessage from '~components/Layout/FormSubmitMessage'
+import useDarkMode from '~src/themes/saas/hooks/useDarkMode'
 
 type FormData = PrivateOrgFormData & CreateOrgParams
 
@@ -30,7 +30,7 @@ const useSaasAccountCreate = (options?: Omit<UseMutationOptions<void, Error, Cre
   const { bearedFetch } = useAuth()
   return useMutation<void, Error, CreateOrgParams>({
     mutationFn: (params: CreateOrgParams) =>
-      bearedFetch<void>(ApiEndpoints.ORGANIZATIONS, { body: params, method: 'POST' }),
+      bearedFetch<void>(ApiEndpoints.Organizations, { body: params, method: 'POST' }),
     ...options,
   })
 }
diff --git a/src/components/AccountSaas/EditProfile.tsx b/src/components/AccountSaas/EditProfile.tsx
index 678380edd..e22a45609 100644
--- a/src/components/AccountSaas/EditProfile.tsx
+++ b/src/components/AccountSaas/EditProfile.tsx
@@ -1,5 +1,8 @@
 import { AspectRatio, Box, Flex, FormControl, FormLabel, IconButton, Image, Input, Text } from '@chakra-ui/react'
+import { useMutation, UseMutationOptions } from '@tanstack/react-query'
 import { Button } from '@vocdoni/chakra-components'
+import { useClient } from '@vocdoni/react-providers'
+import { Account } from '@vocdoni/sdk'
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { BiTrash } from 'react-icons/bi'
@@ -7,6 +10,10 @@ import { BsFillTrashFill } from 'react-icons/bs'
 import { MdBrowserUpdated } from 'react-icons/md'
 import { CreateOrgParams } from '~components/AccountSaas/AccountTypes'
 import { PrivateOrgForm, PrivateOrgFormData, PublicOrgForm } from '~components/AccountSaas/Layout'
+import { useSaasAccount } from '~components/AccountSaas/useSaasAccount'
+import { ApiEndpoints } from '~components/Auth/api'
+import { useAuth } from '~components/Auth/useAuth'
+import FormSubmitMessage from '~components/Layout/FormSubmitMessage'
 import {
   CustomizationLanguageSelector,
   CustomizationTimeZoneSelector,
@@ -15,13 +22,6 @@ import {
 import { REGEX_AVATAR } from '~constants'
 import useDarkMode from '~src/themes/saas/hooks/useDarkMode'
 import fallback from '/assets/default-avatar.png'
-import FormSubmitMessage from '~components/Layout/FormSubmitMessage'
-import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import { useAuth } from '~components/Auth/useAuth'
-import { ApiEndpoints } from '~components/Auth/api'
-import { useSaasAccount } from '~components/AccountSaas/useSaasAccount'
-import { useClient } from '@vocdoni/react-providers'
-import { Account } from '@vocdoni/sdk'
 
 type FormData = CustomOrgFormData & PrivateOrgFormData & CreateOrgParams
 
@@ -29,7 +29,7 @@ const useEditSaasOrganization = (options?: Omit<UseMutationOptions<void, Error,
   const { bearedFetch, signerAddress } = useAuth()
   return useMutation<void, Error, CreateOrgParams>({
     mutationFn: (params: CreateOrgParams) =>
-      bearedFetch<void>(ApiEndpoints.ORGANIZATION.replace('{address}', signerAddress), {
+      bearedFetch<void>(ApiEndpoints.Organization.replace('{address}', signerAddress), {
         body: params,
         method: 'PUT',
       }),
diff --git a/src/components/AccountSaas/useSaasAccountProvider.ts b/src/components/AccountSaas/useSaasAccountProvider.ts
index e44778f12..9ed89ab5b 100644
--- a/src/components/AccountSaas/useSaasAccountProvider.ts
+++ b/src/components/AccountSaas/useSaasAccountProvider.ts
@@ -1,9 +1,9 @@
-import { useClient } from '@vocdoni/react-providers'
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+import { useClient } from '@vocdoni/react-providers'
+import { useCallback } from 'react'
 import { OrganizationData } from '~components/AccountSaas/AccountTypes'
-import { useAuth } from '~components/Auth/useAuth'
 import { ApiEndpoints } from '~components/Auth/api'
-import { useCallback } from 'react'
+import { useAuth } from '~components/Auth/useAuth'
 
 const useSaasOrganization = ({
   options,
@@ -14,7 +14,7 @@ const useSaasOrganization = ({
 
   return useQuery({
     queryKey: ['organizations', 'info', signerAddress],
-    queryFn: () => bearedFetch<OrganizationData>(ApiEndpoints.ORGANIZATION.replace('{address}', signerAddress)),
+    queryFn: () => bearedFetch<OrganizationData>(ApiEndpoints.Organization.replace('{address}', signerAddress)),
     enabled: !!signerAddress,
     ...options,
   })
diff --git a/src/components/Auth/AuthContext.tsx b/src/components/Auth/AuthContext.tsx
index d9f45f834..73b66c10d 100644
--- a/src/components/Auth/AuthContext.tsx
+++ b/src/components/Auth/AuthContext.tsx
@@ -5,7 +5,7 @@ export const AuthContext = createContext<ReturnType<typeof useAuthProvider> | un
 
 export const AuthProvider = ({ children }: { children: ReactNode }) => {
   if (!import.meta.env.SAAS_URL) {
-    return <>{children}</>
+    return children
   }
   const auth = useAuthProvider()
   return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>
diff --git a/src/components/Auth/api.ts b/src/components/Auth/api.ts
index 51688148a..52dd965e4 100644
--- a/src/components/Auth/api.ts
+++ b/src/components/Auth/api.ts
@@ -1,14 +1,14 @@
 type MethodTypes = 'GET' | 'POST' | 'PUT' | 'DELETE'
 
 export enum ApiEndpoints {
-  LOGIN = 'auth/login',
-  REFRESH = 'auth/refresh',
-  REGISTER = 'users',
-  ORGANIZATIONS = 'organizations',
-  ORGANIZATION = 'organizations/{address}',
-  ORGANIZATION_MEMBERS = 'organizations/{address}/members',
-  VERIFY = 'users/verify',
-  VERIFY_RESEND = 'users/verify/code',
+  Login = 'auth/login',
+  Refresh = 'auth/refresh',
+  Register = 'users',
+  Organizations = 'organizations',
+  Organization = 'organizations/{address}',
+  OrganizationMembers = 'organizations/{address}/members',
+  Verify = 'users/verify',
+  VerifyResend = 'users/verify/code',
 }
 
 interface IApiError {
diff --git a/src/components/Auth/authQueries.ts b/src/components/Auth/authQueries.ts
index 79a1626ba..c988415ee 100644
--- a/src/components/Auth/authQueries.ts
+++ b/src/components/Auth/authQueries.ts
@@ -26,7 +26,7 @@ export interface IResendVerificationParams {
 
 export const useLogin = (options?: Omit<UseMutationOptions<LoginResponse, Error, ILoginParams>, 'mutationFn'>) => {
   return useMutation<LoginResponse, Error, ILoginParams>({
-    mutationFn: (params: ILoginParams) => api<LoginResponse>(ApiEndpoints.LOGIN, { body: params, method: 'POST' }),
+    mutationFn: (params: ILoginParams) => api<LoginResponse>(ApiEndpoints.Login, { body: params, method: 'POST' }),
     ...options,
   })
 }
@@ -36,7 +36,7 @@ export const useRegister = (
 ) => {
   return useMutation<LoginResponse, Error, IRegisterParams>({
     mutationFn: (params: IRegisterParams) =>
-      api<LoginResponse>(ApiEndpoints.REGISTER, { body: params, method: 'POST' }),
+      api<LoginResponse>(ApiEndpoints.Register, { body: params, method: 'POST' }),
     ...options,
   })
 }
@@ -45,7 +45,7 @@ export const useVerifyMail = (
   options?: Omit<UseMutationOptions<LoginResponse, Error, IVerifyParams>, 'mutationFn'>
 ) => {
   return useMutation<LoginResponse, Error, IVerifyParams>({
-    mutationFn: (params: IVerifyParams) => api<LoginResponse>(ApiEndpoints.VERIFY, { body: params, method: 'POST' }),
+    mutationFn: (params: IVerifyParams) => api<LoginResponse>(ApiEndpoints.Verify, { body: params, method: 'POST' }),
     ...options,
   })
 }
@@ -55,7 +55,7 @@ export const useResendVerificationMail = (
 ) => {
   return useMutation<void, Error, IResendVerificationParams>({
     mutationFn: (params: IResendVerificationParams) =>
-      api<void>(ApiEndpoints.VERIFY_RESEND, { body: params, method: 'POST' }),
+      api<void>(ApiEndpoints.VerifyResend, { body: params, method: 'POST' }),
     ...options,
   })
 }
diff --git a/src/components/Auth/useAuthProvider.ts b/src/components/Auth/useAuthProvider.ts
index 9db67187d..db6e8ce1c 100644
--- a/src/components/Auth/useAuthProvider.ts
+++ b/src/components/Auth/useAuthProvider.ts
@@ -1,9 +1,9 @@
+import { useMutation } from '@tanstack/react-query'
 import { useClient } from '@vocdoni/react-providers'
 import { NoOrganizationsError, RemoteSigner } from '@vocdoni/sdk'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { api, ApiEndpoints, ApiParams, UnauthorizedApiError } from '~components/Auth/api'
 import { LoginResponse, useLogin, useRegister, useVerifyMail } from '~components/Auth/authQueries'
-import { useMutation } from '@tanstack/react-query'
 
 enum LocalStorageKeys {
   AUTH_TOKEN = 'authToken',
@@ -70,7 +70,7 @@ export const useAuthProvider = () => {
       headers.append('Authorization', `Bearer ${bearer}`)
       return api<T>(path, { headers, ...params }).catch((e) => {
         if (e instanceof UnauthorizedApiError) {
-          return api<LoginResponse>(ApiEndpoints.REFRESH, { headers, method: 'POST' })
+          return api<LoginResponse>(ApiEndpoints.Refresh, { headers, method: 'POST' })
             .then((data) => {
               storeLogin(data)
               headers.set('Authorization', `Bearer ${data.token}`)
diff --git a/src/components/Layout/QueryDataLayout.tsx b/src/components/Layout/QueryDataLayout.tsx
index 73116fd5c..4c41517d0 100644
--- a/src/components/Layout/QueryDataLayout.tsx
+++ b/src/components/Layout/QueryDataLayout.tsx
@@ -1,5 +1,5 @@
-import ErrorComponent from '~components/Layout/ErrorComponent'
 import { PropsWithChildren } from 'react'
+import ErrorComponent from '~components/Layout/ErrorComponent'
 import { Loading } from '~src/router/SuspenseLoader'
 
 interface IUserQueryLayout {
@@ -19,7 +19,7 @@ const QueryDataLayout = ({ isLoading, isEmpty, isError, error, children }: IUser
   if (isEmpty) {
     return null
   }
-  return <>{children}</>
+  return children
 }
 
 export default QueryDataLayout
diff --git a/src/components/OrganizationSaas/Dashboard/Team.tsx b/src/components/OrganizationSaas/Dashboard/Team.tsx
index 4cc9e540c..ebc624309 100644
--- a/src/components/OrganizationSaas/Dashboard/Team.tsx
+++ b/src/components/OrganizationSaas/Dashboard/Team.tsx
@@ -13,13 +13,13 @@ import {
   Thead,
   Tr,
 } from '@chakra-ui/react'
-import { useState } from 'react'
-import Invite from './Invite'
-import { useAuth } from '~components/Auth/useAuth'
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
-import { ApiEndpoints } from '~components/Auth/api'
+import { useState } from 'react'
 import { Trans } from 'react-i18next'
+import { ApiEndpoints } from '~components/Auth/api'
+import { useAuth } from '~components/Auth/useAuth'
 import QueryDataLayout from '~components/Layout/QueryDataLayout'
+import Invite from './Invite'
 
 type UserInfo = {
   email: string
@@ -43,7 +43,7 @@ const useTeamMembers = ({
   return useQuery({
     queryKey: ['organizations', 'members', signerAddress],
     queryFn: () =>
-      bearedFetch<ITeamMembersResponse>(ApiEndpoints.ORGANIZATION_MEMBERS.replace('{address}', signerAddress)),
+      bearedFetch<ITeamMembersResponse>(ApiEndpoints.OrganizationMembers.replace('{address}', signerAddress)),
     ...options,
   })
 }
diff --git a/src/themes/onvote/bg.tsx b/src/themes/onvote/bg.tsx
index c3671a7f8..ca0eee75a 100644
--- a/src/themes/onvote/bg.tsx
+++ b/src/themes/onvote/bg.tsx
@@ -1 +1 @@
-export const NavBg = ({ children }: any) => <>{children}</>
+export const NavBg = ({ children }: any) => children

From cf35b63c4d0a2e6cfe4f060140e79efeddd94212 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=92scar=20Casajuana?= <elboletaire@gmail.com>
Date: Fri, 18 Oct 2024 14:54:15 +0200
Subject: [PATCH 12/12] Fix verification issue with e-mails containing plus (+)

---
 src/components/Auth/Verify.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Auth/Verify.tsx b/src/components/Auth/Verify.tsx
index db4ed343a..39f1540b3 100644
--- a/src/components/Auth/Verify.tsx
+++ b/src/components/Auth/Verify.tsx
@@ -1,12 +1,12 @@
 import { Box, Button, Divider, Flex, FormControl, FormErrorMessage, Heading, Input, Text } from '@chakra-ui/react'
+import { useCallback, useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Link as ReactRouterLink, useNavigate, useSearchParams } from 'react-router-dom'
-import useDarkMode from '~src/themes/saas/hooks/useDarkMode'
-import { useAuth } from '~components/Auth/useAuth'
-import { Loading } from '~src/router/SuspenseLoader'
-import { useCallback, useEffect, useState } from 'react'
 import { useResendVerificationMail } from '~components/Auth/authQueries'
+import { useAuth } from '~components/Auth/useAuth'
 import FormSubmitMessage from '~components/Layout/FormSubmitMessage'
+import { Loading } from '~src/router/SuspenseLoader'
+import useDarkMode from '~src/themes/saas/hooks/useDarkMode'
 
 const Verify = () => {
   const navigate = useNavigate()
@@ -159,7 +159,7 @@ export const VerifyAccountNeeded = ({ email }: IVerifyAccountProps) => {
       {import.meta.env.VOCDONI_ENVIRONMENT === 'dev' && (
         <>
           <Divider />
-          <Button mt={4} as={ReactRouterLink} to={`/account/verify?email=${email}&code=`}>
+          <Button mt={4} as={ReactRouterLink} to={`/account/verify?email=${encodeURIComponent(email)}`}>
             Mail verification for dev envs
           </Button>
         </>