chore: restructure settings folder

src/pages/User/impact/ImpactField.tsx

@@ -1,4 +1,4 @@
-import { impactQuestions } from 'src/pages/UserSettings/content/formSections/Impact/impactQuestions'
+import { impactQuestions } from 'src/pages/UserSettings/content/impactQuestions'
 import { numberWithCommas } from 'src/utils/helpers'
 import { Box, Text } from 'theme-ui'
 

src/pages/User/impact/ImpactIcon.tsx

@@ -1,5 +1,5 @@
 import { Icon } from 'oa-components'
-import { impactQuestions } from 'src/pages/UserSettings/content/formSections/Impact/impactQuestions'
+import { impactQuestions } from 'src/pages/UserSettings/content/impactQuestions'
 
 import type { IImpactDataField } from 'src/models'
 

src/pages/User/impact/ImpactItem.tsx

@@ -1,4 +1,4 @@
-import { sortImpactYearDisplayFields } from 'src/pages/UserSettings/content/formSections/Impact/utils'
+import { sortImpactYearDisplayFields } from 'src/pages/UserSettings/utils'
 import { Box, Heading } from 'theme-ui'
 
 import { ImpactField } from './ImpactField'

src/pages/UserSettings/SettingsPage.tsx

@@ -6,11 +6,11 @@ import { ProfileType } from 'src/modules/profile/types'
 import { isProfileComplete } from 'src/utils/isProfileComplete'
 import { Box, Flex, Text } from 'theme-ui'
 
-import { AccountSettingsSection } from './content/formSections/AccountSettings.section'
-import { ImpactSection } from './content/formSections/Impact/Impact.section'
-import { SettingsMapPinSection } from './content/formSections/SettingsMapPin.section'
-import { SettingsNotifications } from './content/formSections/SettingsNotifications.section'
-import { UserProfile } from './content/formSections/UserProfile.section'
+import { SettingsPageAccount } from './SettingsPageAccount'
+import { SettingsPageImpact } from './SettingsPageImpact'
+import { SettingsPageMapPin } from './SettingsPageMapPin'
+import { SettingsPageNotifications } from './SettingsPageNotifications'
+import { SettingsPageUserProfile } from './SettingsPageUserProfile'
 
 import type { availableGlyphs, ITab } from 'oa-components'
 
@@ -39,31 +39,31 @@ export const SettingsPage = () => {
         </Text>
       </Flex>
     ),
-    body: <UserProfile />,
+    body: <SettingsPageUserProfile />,
     glyph: 'profile' as availableGlyphs,
   }
 
   const mapTab = {
     title: 'Map',
-    body: <SettingsMapPinSection />,
+    body: <SettingsPageMapPin />,
     glyph: 'map' as availableGlyphs,
   }
 
   const impactTab = {
     title: 'Impact',
-    body: <ImpactSection />,
+    body: <SettingsPageImpact />,
     glyph: 'impact' as availableGlyphs,
   }
 
   const NotificationsTabs = {
     title: 'Notifications',
-    body: <SettingsNotifications />,
+    body: <SettingsPageNotifications />,
     glyph: 'thunderbolt' as availableGlyphs,
   }
 
   const accountTab = {
     title: 'Account',
-    body: <AccountSettingsSection />,
+    body: <SettingsPageAccount />,
     glyph: 'account' as availableGlyphs,
   }
 

src/pages/UserSettings/SettingsPageAccount.tsx

@@ -6,11 +6,11 @@ import { DISCORD_INVITE_URL } from 'src/constants'
 import { fields, headings } from 'src/pages/UserSettings/labels'
 import { Flex, Heading, Text } from 'theme-ui'
 
-import { ChangeEmailForm } from './ChangeEmail.form'
-import { ChangePasswordForm } from './ChangePassword.form'
-import { PatreonIntegration } from './PatreonIntegration'
+import { PatreonIntegration } from './content/fields/PatreonIntegration'
+import { ChangeEmailForm } from './content/sections/ChangeEmail.form'
+import { ChangePasswordForm } from './content/sections/ChangePassword.form'
 
-export const AccountSettingsSection = observer(() => {
+export const SettingsPageAccount = observer(() => {
   const { description, title } = fields.deleteAccount
 
   const { userStore } = useCommonStores().stores

src/pages/UserSettings/SettingsPageImpact.tsx

@@ -1,10 +1,9 @@
 import { IMPACT_YEARS } from 'src/pages/User/impact/constants'
+import { ImpactYearSection } from 'src/pages/UserSettings/content/sections/ImpactYear.section'
 import { fields } from 'src/pages/UserSettings/labels'
 import { Box, Flex, Heading, Text } from 'theme-ui'
 
-import { ImpactYearSection } from './ImpactYear.section'
-
-export const ImpactSection = () => {
+export const SettingsPageImpact = () => {
   const { description, title } = fields.impact
 
   return (

src/pages/UserSettings/SettingsPageMapPin.tsx

@@ -23,11 +23,11 @@ import { randomIntFromInterval } from 'src/utils/helpers'
 import { required } from 'src/utils/validators'
 import { Alert, Box, Flex, Heading, Text } from 'theme-ui'
 
-import { MAX_PIN_LENGTH } from '../../constants'
-import { SettingsFormNotifications } from './SettingsFormNotifications'
+import { SettingsFormNotifications } from './content/SettingsFormNotifications'
+import { MAX_PIN_LENGTH } from './constants'
 
 import type { ILocation, IMapPin, IUserPPDB } from 'src/models'
-import type { IFormNotification } from './SettingsFormNotifications'
+import type { IFormNotification } from './content/SettingsFormNotifications'
 
 interface IPinProps {
   mapPin: IMapPin | undefined
@@ -137,7 +137,7 @@ const DeleteMapPin = (props: IPropsDeletePin) => {
   )
 }
 
-export const SettingsMapPinSection = () => {
+export const SettingsPageMapPin = () => {
   const [mapPin, setMapPin] = useState<IMapPin>()
   const [isLoading, setIsLoading] = useState<boolean>(true)
   const [notification, setNotification] = useState<

src/pages/UserSettings/SettingsPageNotifications.tsx

@@ -9,12 +9,12 @@ import {
 } from 'src/pages/UserSettings/labels'
 import { Button, Flex, Heading, Text } from 'theme-ui'
 
-import { EmailNotificationsSection } from './EmailNotifications.section'
-import { SettingsFormNotifications } from './SettingsFormNotifications'
+import { EmailNotificationsSection } from './content/sections/EmailNotifications.section'
+import { SettingsFormNotifications } from './content/SettingsFormNotifications'
 
-import type { IFormNotification } from './SettingsFormNotifications'
+import type { IFormNotification } from './content/SettingsFormNotifications'
 
-export const SettingsNotifications = () => {
+export const SettingsPageNotifications = () => {
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const [notification, setNotification] = useState<
     IFormNotification | undefined

src/pages/UserSettings/SettingsPageUserProfile.test.tsx

@@ -14,7 +14,7 @@ import { FactoryUser } from 'src/test/factories/User'
 import { testingThemeStyles } from 'src/test/utils/themeUtils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { UserProfile } from './UserProfile.section'
+import { SettingsPageUserProfile } from './SettingsPageUserProfile'
 
 import type { IUserPPDB } from 'src/models'
 
@@ -157,7 +157,9 @@ const Wrapper = (user: IUserPPDB, routerInitialEntry?: string) => {
   }
 
   const router = createMemoryRouter(
-    createRoutesFromElements(<Route index element={<UserProfile />} />),
+    createRoutesFromElements(
+      <Route index element={<SettingsPageUserProfile />} />,
+    ),
     {
       initialEntries: [routerInitialEntry ? routerInitialEntry : ''],
     },

src/pages/UserSettings/SettingsPageUserProfile.tsx

@@ -11,21 +11,21 @@ import { ProfileType } from 'src/modules/profile/types'
 import { Flex } from 'theme-ui'
 import { v4 as uuid } from 'uuid'
 
-import { DEFAULT_PUBLIC_CONTACT_PREFERENCE } from '../../constants'
-import { buttons } from '../../labels'
-import { CollectionSection } from './Collection.section'
-import { ExpertiseSection } from './Expertise.section'
-import { FocusSection } from './Focus.section'
-import { PublicContactSection } from './PublicContact.section'
-import { SettingsFormNotifications } from './SettingsFormNotifications'
-import { UserImagesSection } from './UserImages.section'
-import { UserInfosSection } from './UserInfos.section'
-import { WorkspaceSection } from './Workspace.section'
+import { CollectionSection } from './content/sections/Collection.section'
+import { ExpertiseSection } from './content/sections/Expertise.section'
+import { FocusSection } from './content/sections/Focus.section'
+import { PublicContactSection } from './content/sections/PublicContact.section'
+import { UserImagesSection } from './content/sections/UserImages.section'
+import { UserInfosSection } from './content/sections/UserInfos.section'
+import { WorkspaceSection } from './content/sections/Workspace.section'
+import { SettingsFormNotifications } from './content/SettingsFormNotifications'
+import { DEFAULT_PUBLIC_CONTACT_PREFERENCE } from './constants'
+import { buttons } from './labels'
 
 import type { IUserPP } from 'src/models/userPreciousPlastic.models'
-import type { IFormNotification } from './SettingsFormNotifications'
+import type { IFormNotification } from './content/SettingsFormNotifications'
 
-export const UserProfile = () => {
+export const SettingsPageUserProfile = () => {
   const [notification, setNotification] = useState<
     IFormNotification | undefined
   >(undefined)

src/pages/UserSettings/content/PostingGuidelines.tsx

@@ -1,33 +0,0 @@
-import { useTheme } from '@emotion/react'
-import { ExternalLink, Guidelines } from 'oa-components'
-import { DISCORD_INVITE_URL } from 'src/constants'
-
-export const ProfileGuidelines = () => {
-  const theme = useTheme()
-
-  return (
-    <Guidelines
-      title="Profile tips"
-      steps={[
-        <>
-          Have a look at our{' '}
-          <ExternalLink href={theme.profileGuidelinesURL}>
-            profile guidelines.
-          </ExternalLink>
-        </>,
-        <>Choose your focus.</>,
-        <>
-          If you want to get a pin on the map check our{' '}
-          <ExternalLink href={theme.communityProgramURL}>
-            Community Program.
-          </ExternalLink>
-        </>,
-        <>Add a nice description, pics and details.</>,
-        <>
-          If something doesn't work,{' '}
-          <ExternalLink href={DISCORD_INVITE_URL}>let us know.</ExternalLink>
-        </>,
-      ]}
-    />
-  )
-}

src/pages/UserSettings/content/SettingsError.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import { SettingsErrors } from 'src/pages/UserSettings/content/formSections/SettingsErrors'
+import { SettingsErrors } from 'src/pages/UserSettings/content/SettingsErrors'
 import { SettingsFormProvider } from 'src/test/components/SettingsFormProvider'
 import { describe, expect, it } from 'vitest'
 

src/pages/UserSettings/content/fields/ImpactQuestion.field.tsx

@@ -2,7 +2,7 @@ import { Field } from 'react-final-form'
 import { FieldInput, Icon } from 'oa-components'
 import { Box, Flex, Label, Text } from 'theme-ui'
 
-import type { IImpactQuestion } from './impactQuestions'
+import type { IImpactQuestion } from '../impactQuestions'
 
 interface Props {
   formId: string

src/pages/UserSettings/content/fields/ImpactYear.field.tsx

@@ -1,8 +1,8 @@
 import { Button } from 'oa-components'
 import { buttons } from 'src/pages/UserSettings/labels'
 
+import { impactQuestions } from '../impactQuestions'
 import { ImpactQuestionField } from './ImpactQuestion.field'
-import { impactQuestions } from './impactQuestions'
 
 interface Props {
   formId: string

src/pages/UserSettings/content/sections/Collection.section.tsx

@@ -11,9 +11,9 @@ import Pvc from 'src/assets/images/plastic-types/pvc.svg'
 import { fields, headings } from 'src/pages/UserSettings/labels'
 import { Flex, Grid, Heading, Text } from 'theme-ui'
 
-import { CustomCheckbox } from './Fields/CustomCheckbox.field'
-import { OpeningHoursPicker } from './Fields/OpeningHoursPicker.field'
-import { FlexSectionContainer } from './elements'
+import { FlexSectionContainer } from '../elements'
+import { CustomCheckbox } from '../fields/CustomCheckbox.field'
+import { OpeningHoursPicker } from '../fields/OpeningHoursPicker.field'
 
 import type { IPlasticType } from 'src/models'
 import type { IUserPP } from 'src/models/userPreciousPlastic.models'

src/pages/UserSettings/content/sections/Expertise.section.tsx

@@ -2,8 +2,8 @@ import { FieldArray } from 'react-final-form-arrays'
 import { fields, headings } from 'src/pages/UserSettings/labels'
 import { Flex, Heading, Text } from 'theme-ui'
 
-import { CustomCheckbox } from './Fields/CustomCheckbox.field'
-import { FlexSectionContainer } from './elements'
+import { FlexSectionContainer } from '../elements'
+import { CustomCheckbox } from '../fields/CustomCheckbox.field'
 
 import type { IMAchineBuilderXp } from 'src/models'
 

src/pages/UserSettings/content/sections/Focus.section.test.tsx

@@ -3,7 +3,7 @@ import '@testing-library/jest-dom/vitest'
 import { ThemeProvider } from '@emotion/react'
 import { render, screen } from '@testing-library/react'
 import { getSupportedProfileTypes } from 'src/modules/profile'
-import { FocusSection } from 'src/pages/UserSettings/content/formSections/Focus.section'
+import { FocusSection } from 'src/pages/UserSettings/content/sections/Focus.section'
 import { headings } from 'src/pages/UserSettings/labels'
 import { SettingsFormProvider } from 'src/test/components/SettingsFormProvider'
 import { describe, expect, it } from 'vitest'

src/pages/UserSettings/content/sections/Focus.section.tsx

@@ -5,8 +5,8 @@ import { getSupportedProfileTypes } from 'src/modules/profile'
 import { buttons, fields, headings } from 'src/pages/UserSettings/labels'
 import { Box, Flex, Grid, Heading, Paragraph, Text } from 'theme-ui'
 
-import { CustomRadioField } from './Fields/CustomRadio.field'
-import { FlexSectionContainer } from './elements'
+import { FlexSectionContainer } from '../elements'
+import { CustomRadioField } from '../fields/CustomRadio.field'
 
 import type { ProfileTypeLabel } from 'src/modules/profile/types'
 

src/pages/UserSettings/content/sections/ImpactYear.section.tsx

@@ -7,13 +7,13 @@ import { UserContactError } from 'src/pages/User/contact'
 import { form } from 'src/pages/UserSettings/labels'
 import { Box, Heading } from 'theme-ui'
 
-import { ImpactYearField } from './ImpactYear.field'
-import { ImpactYearDisplayField } from './ImpactYearDisplay.field'
 import {
   sortImpactYearDisplayFields,
   transformImpactData,
   transformImpactInputs,
-} from './utils'
+} from '../../utils'
+import { ImpactYearField } from '../fields/ImpactYear.field'
+import { ImpactYearDisplayField } from '../fields/ImpactYearDisplay.field'
 
 import type { IImpactYear, IImpactYearFieldList } from 'src/models'
 import type { SubmitResults } from 'src/pages/User/contact/UserContactError'

src/pages/UserSettings/content/sections/PublicContact.section.test.tsx

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom/vitest'
 
 import { render, screen } from '@testing-library/react'
-import { PublicContactSection } from 'src/pages/UserSettings/content/formSections/PublicContact.section'
+import { PublicContactSection } from 'src/pages/UserSettings/content/sections/PublicContact.section'
 import { SettingsFormProvider } from 'src/test/components/SettingsFormProvider'
 import { describe, expect, it } from 'vitest'
 

src/pages/UserSettings/content/sections/UserInfos.section.tsx

@@ -13,8 +13,8 @@ import {
   GROUP_PROFILE_DESCRIPTION_MAX_LENGTH,
   MEMBER_PROFILE_DESCRIPTION_MAX_LENGTH,
 } from '../../constants'
-import { ProfileLinkField } from './Fields/ProfileLink.field'
-import { FlexSectionContainer } from './elements'
+import { FlexSectionContainer } from '../elements'
+import { ProfileLinkField } from '../fields/ProfileLink.field'
 
 import type { IUserPP } from 'src/models/userPreciousPlastic.models'
 

src/pages/UserSettings/content/sections/Workspace.section.tsx

@@ -8,8 +8,8 @@ import { fields } from 'src/pages/UserSettings/labels'
 import { required } from 'src/utils/validators'
 import { Flex, Grid, Heading, Text } from 'theme-ui'
 
-import { CustomRadioField } from './Fields/CustomRadio.field'
-import { FlexSectionContainer } from './elements'
+import { FlexSectionContainer } from '../elements'
+import { CustomRadioField } from '../fields/CustomRadio.field'
 
 import type { IWorkspaceType } from 'src/models'
 

src/pages/UserSettings/utils.ts

@@ -1,7 +1,7 @@
-import { impactQuestions } from '../Impact/impactQuestions'
+import { impactQuestions } from './content/impactQuestions'
 
 import type { IImpactDataField, IImpactYearFieldList } from 'src/models'
-import type { IImpactQuestion } from '../Impact/impactQuestions'
+import type { IImpactQuestion } from './content/impactQuestions'
 
 export interface ImpactDataFieldInputs {
   [key: string]: IImpactQuestion