From d90b806cb8219e898e1b29f473c6cf224702f59d Mon Sep 17 00:00:00 2001
From: gerouvi <78085338+gerouvi@users.noreply.github.com>
Date: Thu, 3 Oct 2024 12:43:49 +0200
Subject: [PATCH] Implement edit profile screen (#777)

A new view for profile editing.

It also does a refactor of the dashboard layout to allow scrolling while keeping the background always visible.

@selankon editions:

- Moved the `src/components/OrganizationSaas/Dashboard/EditProfile.tsx` into `src/components/AccountSaas/EditProfile.tsx`
- Created a `src/components/AccountSaas/Layout.tsx` to share inputs between forms
- Same by shared types, created `src/components/AccountSaas/AccountTypes.ts`
- It implements the EditProfile page on `elements` folder
---
 src/components/Account/EditProfile.tsx        |   3 +-
 src/components/AccountSaas/AccountTypes.ts    |  16 ++
 src/components/AccountSaas/Create.tsx         | 114 +---------
 src/components/AccountSaas/EditProfile.tsx    | 198 ++++++++++++++++++
 src/components/AccountSaas/Layout.tsx         |  94 +++++++++
 src/components/Layout/SaasSelector.tsx        |  62 +++++-
 .../OrganizationSaas/Dashboard/Layout.tsx     |  29 +--
 .../OrganizationSaas/Dashboard/Menu.tsx       |   9 +-
 src/constants/index.ts                        |   1 +
 src/elements/OrganizationSaas/Edit.tsx        |  41 +---
 src/router/Router.tsx                         |   9 +
 src/themes/saas/components/textarea.ts        |   2 +-
 12 files changed, 413 insertions(+), 165 deletions(-)
 create mode 100644 src/components/AccountSaas/AccountTypes.ts
 create mode 100644 src/components/AccountSaas/EditProfile.tsx
 create mode 100644 src/components/AccountSaas/Layout.tsx

diff --git a/src/components/Account/EditProfile.tsx b/src/components/Account/EditProfile.tsx
index a2a6509d2..02c28e591 100644
--- a/src/components/Account/EditProfile.tsx
+++ b/src/components/Account/EditProfile.tsx
@@ -20,6 +20,7 @@ import { SubmitHandler, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { BiTrash } from 'react-icons/bi'
 import fallback from '/assets/default-avatar.png'
+import { REGEX_AVATAR } from '~constants'
 
 interface EditFormFields {
   name: string
@@ -27,8 +28,6 @@ interface EditFormFields {
   avatar: string
 }
 
-const REGEX_AVATAR = /^(https?:\/\/|ipfs:\/\/)/i
-
 export const EditProfile = () => {
   const { account, fetchAccount } = useClient()
   const { update } = useOrganization()
diff --git a/src/components/AccountSaas/AccountTypes.ts b/src/components/AccountSaas/AccountTypes.ts
new file mode 100644
index 000000000..58c83f79d
--- /dev/null
+++ b/src/components/AccountSaas/AccountTypes.ts
@@ -0,0 +1,16 @@
+export interface OrgInterface {
+  name: string
+  website: string
+  description: string
+  size: string
+  type: string
+  country: string
+  timezone: string
+  language: string
+  logo: string
+  header: string
+  subdomain: string
+  color: string
+}
+
+export type CreateOrgParams = Partial<OrgInterface>
diff --git a/src/components/AccountSaas/Create.tsx b/src/components/AccountSaas/Create.tsx
index 7fa5e3a95..cf925ef0a 100644
--- a/src/components/AccountSaas/Create.tsx
+++ b/src/components/AccountSaas/Create.tsx
@@ -1,14 +1,4 @@
-import {
-  Box,
-  Flex,
-  FlexProps,
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Heading,
-  Text,
-  Textarea,
-} from '@chakra-ui/react'
+import { Box, Flex, FlexProps, FormControl, FormErrorMessage, 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'
@@ -17,35 +7,14 @@ 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 { PrivateOrgFormData, PrivateOrgForm, PublicOrgForm } from '~components/AccountSaas/Layout'
 import { ApiEndpoints } from '~components/Auth/api'
 import { useAuth } from '~components/Auth/useAuth'
-import CheckboxCustom from '~components/Layout/CheckboxCustom'
-import InputCustom from '~components/Layout/InputCustom'
-import {
-  CountriesTypesSelector,
-  MembershipSizeTypesSelector,
-  OrganzationTypesSelector,
-  SelectOptionType,
-} from '~components/Layout/SaasSelector'
 import useDarkMode from '~src/themes/saas/hooks/useDarkMode'
 import LogoutBtn from '~components/AccountSaas/LogoutBtn'
 
-interface OrgInterface {
-  name: string
-  website: string
-  description: string
-  size: string
-  type: string
-  country: string
-  timezone: string
-  language: string
-  logo: string
-  header: string
-  subdomain: string
-  color: string
-}
-
-type CreateOrgParams = Partial<OrgInterface>
+type FormData = PrivateOrgFormData & Pick<OrgInterface, 'name' | 'website' | 'description'>
 
 // 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.
@@ -65,25 +34,14 @@ const useSaasAccountCreate = (options?: Omit<UseMutationOptions<void, Error, Cre
   })
 }
 
-type FormData = {
-  communications: boolean
-  sizeSelect: SelectOptionType
-  typeSelect: SelectOptionType
-  countrySelect: SelectOptionType
-} & Pick<OrgInterface, 'name' | 'website' | 'description'>
-
 export const AccountCreate = ({ children, ...props }: FlexProps) => {
   const { t } = useTranslation()
 
   const [isPending, setIsPending] = useState(false)
-  const { textColor, textColorBrand, textColorSecondary } = useDarkMode()
+  const { textColor, textColorSecondary } = useDarkMode()
 
   const methods = useForm<FormData>()
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = methods
+  const { handleSubmit } = methods
 
   const { signer } = useClient()
 
@@ -94,11 +52,6 @@ export const AccountCreate = ({ children, ...props }: FlexProps) => {
 
   const error = saasError || accountError
 
-  const required = {
-    value: true,
-    message: t('form.error.field_is_required'),
-  }
-
   const onSubmit = (values: FormData) => {
     setIsPending(true)
     // Create account on the saas to generate new priv keys
@@ -136,60 +89,9 @@ export const AccountCreate = ({ children, ...props }: FlexProps) => {
           <Heading color={textColor} fontSize='36px' mb={4}>
             <Trans i18nKey='create_org.title'>Create Your Organization</Trans>
           </Heading>
-          <Text color={textColor} fontWeight='bold'>
-            <Trans i18nKey='create_org.public_info'>Public Organization Information</Trans>
-          </Text>
         </Box>
-
-        <Flex flexDirection='column' gap={6} px={{ base: 5, md: 10 }}>
-          <InputCustom
-            formValue='name'
-            label={t('name', { defaultValue: 'Name' })}
-            placeholder={t('form.account_create.title_placeholder', {
-              defaultValue: "Enter your organization's emial",
-            })}
-            type='text'
-            required
-          />
-          <InputCustom
-            formValue='website'
-            label={t('website', { defaultValue: 'Website' })}
-            placeholder={t('form.account_create.website_placeholder', {
-              defaultValue: 'https://example.com',
-            })}
-            type='text'
-            required
-          />
-
-          <FormControl>
-            <FormLabel ms='4px' fontSize='sm' fontWeight='500' color={textColor}>
-              <Trans i18nKey='description'>Description</Trans>
-            </FormLabel>
-            <Textarea {...register('description')} placeholder={t('form.account_create.description_placeholder')} />
-          </FormControl>
-        </Flex>
-        <Box>
-          <Text color={textColor} fontWeight='bold' mb={4}>
-            <Trans i18nKey='create_org.private_org'>Private Organization Details</Trans>
-          </Text>
-          <Text color={textColorSecondary} fontSize='sm'>
-            <Trans i18nKey='create_org.private_org_description'>
-              Help us tailor your experience with information about your org. We won't share this info
-            </Trans>
-          </Text>
-        </Box>
-        <Flex px={{ base: 5, md: 10 }} direction={'column'} gap={6}>
-          <MembershipSizeTypesSelector name={'sizeSelect'} required />
-          <OrganzationTypesSelector name={'typeSelect'} required />
-          <CountriesTypesSelector name={'countrySelect'} required />
-        </Flex>
-
-        <CheckboxCustom
-          formValue='communications'
-          label={t('create_org.communication', {
-            defaultValue: '  I want to receive communications and be contacted to tailor my governance experience.',
-          })}
-        />
+        <PublicOrgForm />
+        <PrivateOrgForm />
         <Button form='process-create-form' type='submit' isLoading={isPending} mx='auto' mt={8} w='80%'>
           {t('organization.create_org')}
         </Button>
diff --git a/src/components/AccountSaas/EditProfile.tsx b/src/components/AccountSaas/EditProfile.tsx
new file mode 100644
index 000000000..bf2438b9d
--- /dev/null
+++ b/src/components/AccountSaas/EditProfile.tsx
@@ -0,0 +1,198 @@
+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'
+import { BsFillTrashFill } from 'react-icons/bs'
+import { MdBrowserUpdated } from 'react-icons/md'
+import { OrgInterface } from '~components/AccountSaas/AccountTypes'
+import { PrivateOrgForm, PrivateOrgFormData, PublicOrgForm } from '~components/AccountSaas/Layout'
+import {
+  CustomizationLanguageSelector,
+  CustomizationTimeZoneSelector,
+  SelectOptionType,
+} from '~components/Layout/SaasSelector'
+import { REGEX_AVATAR } from '~constants'
+import useDarkMode from '~src/themes/saas/hooks/useDarkMode'
+import fallback from '/assets/default-avatar.png'
+
+type FormData = CustomOrgFormData &
+  PrivateOrgFormData &
+  Pick<OrgInterface, 'name' | 'website' | 'description' | 'logo' | 'header'>
+
+const EditProfile = () => {
+  const { account } = useClient()
+  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 || '',
+    },
+  })
+
+  const { handleSubmit } = methods
+
+  const onSubmit: SubmitHandler<FormData> = async (values: FormData) => {
+    const newInfo = {
+      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,
+    }
+    console.log(values, newInfo)
+  }
+
+  return (
+    <FormProvider {...methods}>
+      <Box height='100%' maxH='100%' overflowY='auto'>
+        <Flex
+          as='form'
+          id='process-create-form'
+          direction='column'
+          gap={6}
+          maxW='600px'
+          mx='auto'
+          onSubmit={(e) => {
+            e.stopPropagation()
+            e.preventDefault()
+            handleSubmit(onSubmit)(e)
+          }}
+        >
+          <PublicOrgForm />
+          <PrivateOrgForm />
+          <CustomizeOrgForm />
+          <Flex justifyContent='center'>
+            <Button
+              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>
+            </Button>
+          </Flex>
+        </Flex>
+      </Box>
+    </FormProvider>
+  )
+}
+
+export type CustomOrgFormData = {
+  timeZoneSelect: SelectOptionType
+  languageSelect: SelectOptionType
+}
+
+const CustomizeOrgForm = () => {
+  const { t } = useTranslation()
+  const { textColor, textColorSecondary } = useDarkMode()
+  const { watch, setValue } = useForm<FormData>()
+
+  const avatar = watch('logo')
+  const correctAvatarFormat = (val: string) => REGEX_AVATAR.test(val)
+
+  return (
+    <>
+      <Box>
+        <Text color={textColor} fontWeight='bold'>
+          {t('customization', { defaultValue: 'Customization' })}
+        </Text>
+        <Text color={textColorSecondary} fontSize='sm'>
+          {t('edit_saas_profile.customization_details', {
+            defaultValue: 'Define the params that will enhance the user experience and customize the voting page',
+          })}
+        </Text>
+      </Box>
+      <Flex flexDirection='column' gap={6} px={{ base: 5, md: 10 }}>
+        <CustomizationTimeZoneSelector name={'timeZoneSelect'} required />
+        <CustomizationLanguageSelector name={'languageSelect'} required />
+        <FormControl>
+          <FormLabel display='flex' ms={1} fontSize='sm' fontWeight='500' color={textColor} mb={2}>
+            {t('logo', {
+              defaultValue: 'Logo',
+            })}
+          </FormLabel>
+          <Flex gap={2} alignItems='center'>
+            <Input
+              placeholder={t('edit_saas_profile.upload_file', {
+                defaultValue: 'Upload a file',
+              })}
+            />
+            <Button bgColor='gray' minH={12} borderRadius='xl'>
+              {t('upload', { defaultValue: 'Upload' })}
+            </Button>
+          </Flex>
+        </FormControl>
+        <Box position='relative' outline='none' border='none'>
+          <Text fontSize='sm' fontWeight='500' color={textColor} mb={2}>
+            {t('edit_saas_profile.header_image', { defaultValue: 'Header Image' })}
+          </Text>
+          <Flex gap={2} flexDirection={{ base: 'column', md: 'row' }} alignItems='center'>
+            <AspectRatio flexShrink={0} flexGrow={1} ratio={5 / 1} borderRadius='xl' overflow='hidden'>
+              <Image src={avatar} fallbackSrc={fallback} />
+            </AspectRatio>
+            <Button
+              minH={12}
+              borderRadius='xl'
+              sx={{
+                span: {
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  gap: 2,
+                },
+              }}
+            >
+              <BsFillTrashFill />
+              <Text as='span'>{t('remove', { defaultValue: 'Remove' })}</Text>
+            </Button>
+          </Flex>
+          {correctAvatarFormat(avatar) && (
+            <IconButton
+              aria-label={t('form.account_create.delete_image')}
+              icon={<BiTrash />}
+              onClick={() => setValue('logo', '')}
+              position='absolute'
+              top={2}
+              right={2}
+              cursor='pointer'
+              size='xs'
+              fontSize='md'
+            />
+          )}
+        </Box>
+      </Flex>
+    </>
+  )
+}
+
+export default EditProfile
diff --git a/src/components/AccountSaas/Layout.tsx b/src/components/AccountSaas/Layout.tsx
new file mode 100644
index 000000000..72e951487
--- /dev/null
+++ b/src/components/AccountSaas/Layout.tsx
@@ -0,0 +1,94 @@
+import { Box, Flex, FormControl, FormLabel, Text, Textarea } from '@chakra-ui/react'
+import { useForm } from 'react-hook-form'
+import { Trans, useTranslation } from 'react-i18next'
+import CheckboxCustom from '~components/Layout/CheckboxCustom'
+import InputCustom from '~components/Layout/InputCustom'
+import {
+  CountriesTypesSelector,
+  MembershipSizeTypesSelector,
+  OrganzationTypesSelector,
+  SelectOptionType,
+} from '~components/Layout/SaasSelector'
+import useDarkMode from '~src/themes/saas/hooks/useDarkMode'
+
+export const PublicOrgForm = () => {
+  const { t } = useTranslation()
+  const { textColor } = useDarkMode()
+  const { register } = useForm()
+
+  return (
+    <>
+      <Box me='auto'>
+        <Text color={textColor} fontWeight='bold'>
+          <Trans i18nKey='create_org.public_info'>Public Organization Information</Trans>
+        </Text>
+      </Box>
+
+      <Flex flexDirection='column' gap={6} px={{ base: 5, md: 10 }}>
+        <InputCustom
+          formValue='name'
+          label={t('name', { defaultValue: 'Name' })}
+          placeholder={t('form.account_create.title_placeholder', {
+            defaultValue: "Enter your organization's email",
+          })}
+          type='text'
+          required
+        />
+        <InputCustom
+          formValue='website'
+          label={t('website', { defaultValue: 'Website' })}
+          placeholder={t('form.account_create.website_placeholder', {
+            defaultValue: 'https://example.com',
+          })}
+          type='text'
+          required
+        />
+
+        <FormControl>
+          <FormLabel ms='4px' fontSize='sm' fontWeight='500' color={textColor}>
+            <Trans i18nKey='description'>Description</Trans>
+          </FormLabel>
+          <Textarea {...register('description')} placeholder={t('form.account_create.description_placeholder')} />
+        </FormControl>
+      </Flex>
+    </>
+  )
+}
+
+export type PrivateOrgFormData = {
+  communications: boolean
+  sizeSelect: SelectOptionType
+  typeSelect: SelectOptionType
+  countrySelect: SelectOptionType
+}
+
+export const PrivateOrgForm = () => {
+  const { t } = useTranslation()
+  const { textColor, textColorSecondary } = useDarkMode()
+
+  return (
+    <>
+      <Box>
+        <Text color={textColor} fontWeight='bold' mb={2.5}>
+          <Trans i18nKey='create_org.private_org'>Private Organization Details</Trans>
+        </Text>
+        <Text color={textColorSecondary} fontSize='sm'>
+          <Trans i18nKey='create_org.private_org_description'>
+            Help us tailor your experience with information about your org. We won't share this info
+          </Trans>
+        </Text>
+      </Box>
+      <Flex px={{ base: 5, md: 10 }} direction={'column'} gap={6}>
+        <MembershipSizeTypesSelector name={'sizeSelect'} required />
+        <OrganzationTypesSelector name={'typeSelect'} required />
+        <CountriesTypesSelector name={'countrySelect'} required />
+      </Flex>
+      <CheckboxCustom
+        formValue='communications'
+        label={t('create_org.communication', {
+          defaultValue: '  I want to receive communications and be contacted to tailor my governance experience.',
+        })}
+      />
+    </>
+  )
+}
diff --git a/src/components/Layout/SaasSelector.tsx b/src/components/Layout/SaasSelector.tsx
index 6378771ba..cf70176fe 100644
--- a/src/components/Layout/SaasSelector.tsx
+++ b/src/components/Layout/SaasSelector.tsx
@@ -4,6 +4,7 @@ import { Controller, useFormContext } from 'react-hook-form'
 import { ControllerProps } from 'react-hook-form/dist/types'
 import { useTranslation } from 'react-i18next'
 import useDarkMode from '~src/themes/saas/hooks/useDarkMode'
+import { LanguagesSlice } from '~i18n/languages.mjs'
 
 export type SelectOptionType = {
   label: string
@@ -19,21 +20,29 @@ export type SelectCustomProps = {
 
 // todo: move this to theme
 const customStyles: ChakraStylesConfig<any, false, GroupBase<any>> = {
-  control: (provided) => ({
+  control: (provided, state) => ({
     ...provided,
-    borderColor: 'gray.200',
     minH: '50px',
     borderRadius: 'xl',
+    borderColor: state.isFocused ? 'blue.500' : 'secondaryGray.100',
+    boxShadow: 'none',
     _hover: {
       borderColor: 'gray.300',
     },
     _focus: {
-      borderColor: 'gray.300',
+      borderColor: 'blue.500',
       boxShadow: 'none',
-      outline: '2px solid #3965FF',
+      outline: '1px solid #3965FF',
       outlineOffset: '0px',
     },
   }),
+  singleValue: (provided) => ({
+    ...provided,
+  }),
+  placeholder: (provided) => ({
+    ...provided,
+    color: 'gray.300',
+  }),
 }
 
 export const SelectCustom = ({
@@ -181,3 +190,48 @@ export const MembershipSizeTypesSelector = ({ ...props }: Omit<SelectCustomProps
     />
   )
 }
+
+export const CustomizationTimeZoneSelector = ({ ...props }: Omit<SelectCustomProps, 'options'>) => {
+  const { t } = useTranslation()
+
+  const timezones: SelectOptionType[] = [
+    { label: '(UTC-12:00) International Date Line West', value: 'Etc/GMT+12' },
+    { label: '(UTC-11:00) Coordinated Universal Time-11', value: 'Etc/GMT+11' },
+    { label: '(UTC-10:00) Hawaii', value: 'Pacific/Honolulu' },
+    { label: '(UTC-08:00) Pacific Time (US & Canada)', value: 'America/Los_Angeles' },
+    { label: '(UTC-07:00) Mountain Time (US & Canada)', value: 'America/Denver' },
+    { label: '(UTC-06:00) Central Time (US & Canada)', value: 'America/Chicago' },
+    { label: '(UTC-05:00) Eastern Time (US & Canada)', value: 'America/New_York' },
+    { label: '(UTC-03:00) Buenos Aires', value: 'America/Argentina/Buenos_Aires' },
+    { label: '(UTC+00:00) London, Lisbon, Dublin', value: 'Europe/London' },
+    { label: '(UTC+01:00) Central European Time', value: 'Europe/Berlin' },
+    { label: '(UTC+02:00) Eastern European Time', value: 'Europe/Istanbul' },
+    { label: '(UTC+03:00) Moscow, Saint Petersburg', value: 'Europe/Moscow' },
+    { label: '(UTC+05:30) Chennai, Kolkata, Mumbai, New Delhi', value: 'Asia/Kolkata' },
+    { label: '(UTC+08:00) Beijing, Singapore, Hong Kong', value: 'Asia/Shanghai' },
+    { label: '(UTC+09:00) Tokyo, Seoul', value: 'Asia/Tokyo' },
+    { label: '(UTC+10:00) Sydney, Melbourne, Brisbane', value: 'Australia/Sydney' },
+  ]
+
+  return (
+    <SelectCustom options={timezones} label={t('membership_size.timezone', { defaultValue: 'Timezone' })} {...props} />
+  )
+}
+
+export const CustomizationLanguageSelector = ({ ...props }: Omit<SelectCustomProps, 'options'>) => {
+  const { t } = useTranslation()
+
+  const languages: SelectOptionType[] = Object.entries(LanguagesSlice as { [key: string]: string }).map(
+    ([key, val]) => {
+      return { label: val, value: key }
+    }
+  )
+
+  return (
+    <SelectCustom
+      options={languages}
+      label={t('membership_size.language', { defaultValue: 'Default Language' })}
+      {...props}
+    />
+  )
+}
diff --git a/src/components/OrganizationSaas/Dashboard/Layout.tsx b/src/components/OrganizationSaas/Dashboard/Layout.tsx
index 1d28e6530..029aaacac 100644
--- a/src/components/OrganizationSaas/Dashboard/Layout.tsx
+++ b/src/components/OrganizationSaas/Dashboard/Layout.tsx
@@ -77,7 +77,7 @@ const OrganizationDashboardLayout: React.FC = () => {
           position='sticky'
           zIndex={10}
           h={12}
-          w={['100%', '100%', '100%', 'calc(100% - 285px)']}
+          w={{ base: '100%', xl: 'calc(100% - 285px)' }}
           ml='auto'
           justifyContent='end'
           alignItems='center'
@@ -91,7 +91,7 @@ const OrganizationDashboardLayout: React.FC = () => {
           {getTitle()}
           <Settings />
           <IconButton
-            display={{ base: 'flex', lg: 'none' }}
+            display={{ base: 'flex', xl: 'none' }}
             icon={<HamburgerIcon />}
             aria-label='Open Menu'
             onClick={onOpen}
@@ -101,22 +101,22 @@ const OrganizationDashboardLayout: React.FC = () => {
             bgColor={textColorBrand}
             fontSize='xl'
           />
-          <Box display={{ base: 'none', lg: 'block' }}>
+          <Box display={{ base: 'none', xl: 'block' }}>
             <DarkModeToggle />
           </Box>
         </Flex>
 
-        <Flex direction={{ base: 'column', lg: 'row' }} flexGrow={1}>
+        <Flex direction={{ base: 'column', xl: 'row' }} flexGrow={1} gap='300px'>
           {account && (
             <>
               <Flex
-                w={{ base: '100%', md: '285px' }}
+                w='285px'
                 flexDirection='column'
                 justifyContent='space-between'
                 p={3.5}
                 bg={bgSecondary}
-                borderRadius='lg'
-                display={{ base: 'none', lg: 'flex' }}
+                borderRadius='xl'
+                display={{ base: 'none', xl: 'flex' }}
                 position='fixed'
                 minH='96vh'
                 maxH='96vh'
@@ -204,18 +204,23 @@ const OrganizationDashboardLayout: React.FC = () => {
           )}
 
           <Box
-            flex={1}
-            pl={[0, 0, 0, 4]}
+            flexGrow={1}
             gap={6}
             display='flex'
             flexDir='column'
-            maxW={{ lg: 'calc(100% - 285px)' }}
+            maxW={{ xl: 'calc(100% - 305px)' }}
             w='full'
             ml='auto'
-            pt={7}
             mb='2vh'
+            pl={{ xl: 4 }}
+            maxH='calc(100vh - 2vh - 91px)'
+            overflowY='auto'
+            bgColor={bgSecondary}
+            borderRadius='xl'
           >
-            <Outlet />
+            <Box py={8} px={8}>
+              <Outlet />
+            </Box>
           </Box>
         </Flex>
       </Wrapper>
diff --git a/src/components/OrganizationSaas/Dashboard/Menu.tsx b/src/components/OrganizationSaas/Dashboard/Menu.tsx
index f8b58896e..1a80950f6 100644
--- a/src/components/OrganizationSaas/Dashboard/Menu.tsx
+++ b/src/components/OrganizationSaas/Dashboard/Menu.tsx
@@ -111,7 +111,14 @@ const OrganizationDashboardMenu = () => {
           <Button justifyContent='start' variant='dashboard' w='full'>
             {t('subscription')}
           </Button>
-          <Button justifyContent='start' variant='dashboard' w='full'>
+          <Button
+            as={Link}
+            to={'/organization/profile'}
+            isActive={location.pathname.includes('/organization/profile')}
+            justifyContent='start'
+            variant='dashboard'
+            w='full'
+          >
             {t('profile')}
           </Button>
         </Box>
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 7915779c8..6bc4a60be 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -21,6 +21,7 @@ export const CensusPreviewRowsLimit = 10
 
 const defaultCensusSize = import.meta.env.DEFAULT_CENSUS_SIZE
 export const DefaultCensusSize = defaultCensusSize
+export const REGEX_AVATAR = /^(https?:\/\/|ipfs:\/\/)/i
 
 /**
  * Given an object of react-hook-form errors, determines if the specified mapped field is invalid (returns an error)
diff --git a/src/elements/OrganizationSaas/Edit.tsx b/src/elements/OrganizationSaas/Edit.tsx
index 154dff6bd..fbb9cad3d 100644
--- a/src/elements/OrganizationSaas/Edit.tsx
+++ b/src/elements/OrganizationSaas/Edit.tsx
@@ -1,42 +1,5 @@
-import { Flex, Heading, Link } from '@chakra-ui/react'
-import { Trans } from 'react-i18next'
-import { Link as ReactRouterLink } from 'react-router-dom'
-import { useAccount } from 'wagmi'
-import { EditProfile } from '~components/Account/EditProfile'
-import { ContentsBox } from '~components/Organization/Dashboard/Box'
+import EditProfile from '~components/AccountSaas/EditProfile'
 
-const OrganizationEdit = () => {
-  return null
-
-  return (
-    <>
-      <EditHeader />
-      <ContentsBox flexGrow={1}>
-        <EditProfile />
-      </ContentsBox>
-    </>
-  )
-}
-
-const EditHeader = () => {
-  const { address } = useAccount()
-  return (
-    <ContentsBox>
-      <Flex
-        flexDirection={{ base: 'column', xl2: 'row' }}
-        justifyContent='space-between'
-        alignItems={{ base: 'start', xl2: 'center' }}
-        gap={2}
-      >
-        <Heading fontSize='heading-sm'>
-          <Trans i18nKey='organization.my_entity'>My entity</Trans>
-        </Heading>
-        <Link as={ReactRouterLink} to={`/organization/${address}`} variant='no-underline' ml='auto'>
-          View public profile
-        </Link>
-      </Flex>
-    </ContentsBox>
-  )
-}
+const OrganizationEdit = () => <EditProfile />
 
 export default OrganizationEdit
diff --git a/src/router/Router.tsx b/src/router/Router.tsx
index c93bf1db3..c8b9b2e9c 100644
--- a/src/router/Router.tsx
+++ b/src/router/Router.tsx
@@ -32,6 +32,7 @@ const OrganizationDashboardLayoutSaas = lazy(() => import('~components/Organizat
 const OrganizationDashboard = lazy(() => import('~components/Organization/Dashboard'))
 const OrganizationDashboardSaas = lazy(() => import('~components/OrganizationSaas/Dashboard'))
 const OrganizationTeamSaas = lazy(() => import('~components/OrganizationSaas/Dashboard/Team'))
+const OrganizationEditProfile = lazy(() => import('~elements/OrganizationSaas/Edit'))
 const ProcessCreateSteps = lazy(() => import('~components/ProcessCreate/Steps'))
 const Terms = lazy(() => import('~components/TermsAndPrivacy/Terms'))
 const Privacy = lazy(() => import('~components/TermsAndPrivacy/Privacy'))
@@ -260,6 +261,14 @@ export const RoutesProvider = () => {
                   </SuspenseLoader>
                 ),
               },
+              {
+                path: 'profile',
+                element: (
+                  <SuspenseLoader>
+                    <OrganizationEditProfile />
+                  </SuspenseLoader>
+                ),
+              },
             ],
           },
         ],
diff --git a/src/themes/saas/components/textarea.ts b/src/themes/saas/components/textarea.ts
index caa503177..3dae4e825 100644
--- a/src/themes/saas/components/textarea.ts
+++ b/src/themes/saas/components/textarea.ts
@@ -7,7 +7,7 @@ export const Textarea = defineStyleConfig({
     borderRadius: '16px',
     _placeholder: { color: 'secondaryGray.600' },
     _focus: {
-      outline: '2px solid #3965FF',
+      outline: '1px solid #3965FF',
       outlineOffset: '0px',
     },
   },