From 97c86879e7229dae70e7c513181c049aad18e306 Mon Sep 17 00:00:00 2001 From: Ruxandra Machedon Date: Fri, 7 Jun 2024 17:57:40 -0400 Subject: [PATCH 01/20] refactor: make settings screen consistent with design terminology of 'user settings screen' --- dev-client/src/navigation/screenDefinitions.tsx | 4 ++-- dev-client/src/screens/BottomTabsScreen.tsx | 4 ++-- .../UserSettingsScreen.tsx} | 10 +++++----- .../components/UserIndicatorComponent.tsx | 0 .../components/VersionIndicatorComponent.tsx | 0 .../components/actions/DeleteAccountButton.tsx | 0 .../components/actions/LogOutButton.tsx | 0 7 files changed, 9 insertions(+), 9 deletions(-) rename dev-client/src/screens/{SettingsScreen/SettingsScreen.tsx => UserSettingsScreen/UserSettingsScreen.tsx} (76%) rename dev-client/src/screens/{SettingsScreen => UserSettingsScreen}/components/UserIndicatorComponent.tsx (100%) rename dev-client/src/screens/{SettingsScreen => UserSettingsScreen}/components/VersionIndicatorComponent.tsx (100%) rename dev-client/src/screens/{SettingsScreen => UserSettingsScreen}/components/actions/DeleteAccountButton.tsx (100%) rename dev-client/src/screens/{SettingsScreen => UserSettingsScreen}/components/actions/LogOutButton.tsx (100%) diff --git a/dev-client/src/navigation/screenDefinitions.tsx b/dev-client/src/navigation/screenDefinitions.tsx index ecba423ca..a647a6bc2 100644 --- a/dev-client/src/navigation/screenDefinitions.tsx +++ b/dev-client/src/navigation/screenDefinitions.tsx @@ -36,7 +36,6 @@ import {ManageTeamMemberScreen} from 'terraso-mobile-client/screens/ManageTeamMe import {ProjectListScreen} from 'terraso-mobile-client/screens/ProjectListScreen/ProjectListScreen'; import {ProjectViewScreen} from 'terraso-mobile-client/screens/ProjectViewScreen'; import {ReadNoteScreen} from 'terraso-mobile-client/screens/ReadNoteScreen'; -import {SettingsScreen} from 'terraso-mobile-client/screens/SettingsScreen/SettingsScreen'; import {SiteSettingsScreen} from 'terraso-mobile-client/screens/SiteSettingsScreen/SiteSettingsScreen'; import {SiteTeamSettingsScreen} from 'terraso-mobile-client/screens/SiteTeamSettingsScreen'; import {SiteTransferProjectScreen} from 'terraso-mobile-client/screens/SiteTransferProjectScreen/SiteTransferProjectScreen'; @@ -54,11 +53,12 @@ import {SOCSOMScreen} from 'terraso-mobile-client/screens/SoilScreen/SOCSOMScree import {StructureScreen} from 'terraso-mobile-client/screens/SoilScreen/StructureScreen'; import {TextureGuideScreen} from 'terraso-mobile-client/screens/SoilScreen/TextureGuideScreen'; import {TextureScreen} from 'terraso-mobile-client/screens/SoilScreen/TextureScreen'; +import {UserSettingsScreen} from 'terraso-mobile-client/screens/UserSettingsScreen/UserSettingsScreen'; export const bottomTabScreensDefinitions = { PROJECT_LIST: ProjectListScreen, HOME: HomeScreen, - SETTINGS: SettingsScreen, + SETTINGS: UserSettingsScreen, } satisfies ScreenDefinitions; export const screenDefinitions = { diff --git a/dev-client/src/screens/BottomTabsScreen.tsx b/dev-client/src/screens/BottomTabsScreen.tsx index a16cbbe5e..0b38037c6 100644 --- a/dev-client/src/screens/BottomTabsScreen.tsx +++ b/dev-client/src/screens/BottomTabsScreen.tsx @@ -26,7 +26,7 @@ import { import {BottomTabsParamList} from 'terraso-mobile-client/navigation/types'; import {HomeScreen} from 'terraso-mobile-client/screens/HomeScreen/HomeScreen'; import {ProjectListScreen} from 'terraso-mobile-client/screens/ProjectListScreen/ProjectListScreen'; -import {SettingsScreen} from 'terraso-mobile-client/screens/SettingsScreen/SettingsScreen'; +import {UserSettingsScreen} from 'terraso-mobile-client/screens/UserSettingsScreen/UserSettingsScreen'; export const BottomTabsScreen = memo(() => { return ( @@ -41,7 +41,7 @@ export const BottomTabsScreen = memo(() => { screenOptions={{headerShown: false}}> - + ); }); diff --git a/dev-client/src/screens/SettingsScreen/SettingsScreen.tsx b/dev-client/src/screens/UserSettingsScreen/UserSettingsScreen.tsx similarity index 76% rename from dev-client/src/screens/SettingsScreen/SettingsScreen.tsx rename to dev-client/src/screens/UserSettingsScreen/UserSettingsScreen.tsx index ee75cf7af..1171ecd29 100644 --- a/dev-client/src/screens/SettingsScreen/SettingsScreen.tsx +++ b/dev-client/src/screens/UserSettingsScreen/UserSettingsScreen.tsx @@ -19,12 +19,12 @@ import {ButtonList} from 'terraso-mobile-client/components/buttons/list/ButtonLi import {Column} from 'terraso-mobile-client/components/NativeBaseAdapters'; import {AppBar} from 'terraso-mobile-client/navigation/components/AppBar'; import {ScreenScaffold} from 'terraso-mobile-client/screens/ScreenScaffold'; -import {DeleteAccountButton} from 'terraso-mobile-client/screens/SettingsScreen/components/actions/DeleteAccountButton'; -import {LogOutButton} from 'terraso-mobile-client/screens/SettingsScreen/components/actions/LogOutButton'; -import {UserIndicator} from 'terraso-mobile-client/screens/SettingsScreen/components/UserIndicatorComponent'; -import {VersionIndicator} from 'terraso-mobile-client/screens/SettingsScreen/components/VersionIndicatorComponent'; +import {DeleteAccountButton} from 'terraso-mobile-client/screens/UserSettingsScreen/components/actions/DeleteAccountButton'; +import {LogOutButton} from 'terraso-mobile-client/screens/UserSettingsScreen/components/actions/LogOutButton'; +import {UserIndicator} from 'terraso-mobile-client/screens/UserSettingsScreen/components/UserIndicatorComponent'; +import {VersionIndicator} from 'terraso-mobile-client/screens/UserSettingsScreen/components/VersionIndicatorComponent'; -export function SettingsScreen() { +export function UserSettingsScreen() { return ( }> diff --git a/dev-client/src/screens/SettingsScreen/components/UserIndicatorComponent.tsx b/dev-client/src/screens/UserSettingsScreen/components/UserIndicatorComponent.tsx similarity index 100% rename from dev-client/src/screens/SettingsScreen/components/UserIndicatorComponent.tsx rename to dev-client/src/screens/UserSettingsScreen/components/UserIndicatorComponent.tsx diff --git a/dev-client/src/screens/SettingsScreen/components/VersionIndicatorComponent.tsx b/dev-client/src/screens/UserSettingsScreen/components/VersionIndicatorComponent.tsx similarity index 100% rename from dev-client/src/screens/SettingsScreen/components/VersionIndicatorComponent.tsx rename to dev-client/src/screens/UserSettingsScreen/components/VersionIndicatorComponent.tsx diff --git a/dev-client/src/screens/SettingsScreen/components/actions/DeleteAccountButton.tsx b/dev-client/src/screens/UserSettingsScreen/components/actions/DeleteAccountButton.tsx similarity index 100% rename from dev-client/src/screens/SettingsScreen/components/actions/DeleteAccountButton.tsx rename to dev-client/src/screens/UserSettingsScreen/components/actions/DeleteAccountButton.tsx diff --git a/dev-client/src/screens/SettingsScreen/components/actions/LogOutButton.tsx b/dev-client/src/screens/UserSettingsScreen/components/actions/LogOutButton.tsx similarity index 100% rename from dev-client/src/screens/SettingsScreen/components/actions/LogOutButton.tsx rename to dev-client/src/screens/UserSettingsScreen/components/actions/LogOutButton.tsx From be306315b427d00b4de4a02a68a8b1d8c7534709 Mon Sep 17 00:00:00 2001 From: Ruxandra Machedon Date: Fri, 7 Jun 2024 19:12:38 -0400 Subject: [PATCH 02/20] feat: add skeleton for delete account screen navigation --- .../src/navigation/screenDefinitions.tsx | 2 ++ .../DeleteAccountScreen.tsx | 33 +++++++++++++++++++ .../actions/DeleteAccountButton.tsx | 8 +++++ dev-client/src/translations/en.json | 3 +- 4 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 dev-client/src/screens/DeleteAccountScreen/DeleteAccountScreen.tsx diff --git a/dev-client/src/navigation/screenDefinitions.tsx b/dev-client/src/navigation/screenDefinitions.tsx index a647a6bc2..2d5543db0 100644 --- a/dev-client/src/navigation/screenDefinitions.tsx +++ b/dev-client/src/navigation/screenDefinitions.tsx @@ -26,6 +26,7 @@ import {BottomTabsScreen} from 'terraso-mobile-client/screens/BottomTabsScreen'; import {ColorAnalysisScreen} from 'terraso-mobile-client/screens/ColorAnalysisScreen/ColorAnalysisScreen'; import {CreateProjectScreen} from 'terraso-mobile-client/screens/CreateProjectScreen/CreateProjectScreen'; import {CreateSiteScreen} from 'terraso-mobile-client/screens/CreateSiteScreen/CreateSiteScreen'; +import {DeleteAccountScreen} from 'terraso-mobile-client/screens/DeleteAccountScreen/DeleteAccountScreen'; import {EditProjectInstructionsScreen} from 'terraso-mobile-client/screens/EditProjectInstructionsScreen'; import {EditSiteNoteScreen} from 'terraso-mobile-client/screens/EditSiteNoteScreen'; import {HomeScreen} from 'terraso-mobile-client/screens/HomeScreen/HomeScreen'; @@ -89,6 +90,7 @@ export const screenDefinitions = { TEXTURE_GUIDE: TextureGuideScreen, COLOR_GUIDE: ColorGuideScreen, COLOR_ANALYSIS: ColorAnalysisScreen, + DELETE_ACCOUNT: DeleteAccountScreen, } satisfies ScreenDefinitions; export const modalScreenDefinitions = { diff --git a/dev-client/src/screens/DeleteAccountScreen/DeleteAccountScreen.tsx b/dev-client/src/screens/DeleteAccountScreen/DeleteAccountScreen.tsx new file mode 100644 index 000000000..8e7d1027e --- /dev/null +++ b/dev-client/src/screens/DeleteAccountScreen/DeleteAccountScreen.tsx @@ -0,0 +1,33 @@ +/* + * Copyright © 2024 Technology Matters + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published + * by the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see https://www.gnu.org/licenses/. + */ + +import {Text} from 'react-native-paper'; + +import {VStack} from 'terraso-mobile-client/components/NativeBaseAdapters'; +import {AppBar} from 'terraso-mobile-client/navigation/components/AppBar'; +import {ScreenBackButton} from 'terraso-mobile-client/navigation/components/ScreenBackButton'; +import {ScreenScaffold} from 'terraso-mobile-client/screens/ScreenScaffold'; + +export function DeleteAccountScreen() { + return ( + } />}> + + Hello, world! + + + ); +} diff --git a/dev-client/src/screens/UserSettingsScreen/components/actions/DeleteAccountButton.tsx b/dev-client/src/screens/UserSettingsScreen/components/actions/DeleteAccountButton.tsx index d5a984dc2..f1467090b 100644 --- a/dev-client/src/screens/UserSettingsScreen/components/actions/DeleteAccountButton.tsx +++ b/dev-client/src/screens/UserSettingsScreen/components/actions/DeleteAccountButton.tsx @@ -15,18 +15,26 @@ * along with this program. If not, see https://www.gnu.org/licenses/. */ +import {useCallback} from 'react'; import {useTranslation} from 'react-i18next'; import {ListButton} from 'terraso-mobile-client/components/buttons/list/ListButton'; +import {useNavigation} from 'terraso-mobile-client/navigation/hooks/useNavigation'; export function DeleteAccountButton() { const {t} = useTranslation(); + const navigation = useNavigation(); + const onDeleteAccount = useCallback( + () => navigation.navigate('DELETE_ACCOUNT'), + [navigation], + ); return ( ); } diff --git a/dev-client/src/translations/en.json b/dev-client/src/translations/en.json index 6a145b34d..cf4916cad 100644 --- a/dev-client/src/translations/en.json +++ b/dev-client/src/translations/en.json @@ -425,7 +425,8 @@ "CREATE_SITE": "Create Site", "COLOR_GUIDE": "Soil Color Guide", "COLOR_ANALYSIS_HOME": "Photo Analysis", - "SETTINGS": "Settings" + "SETTINGS": "Settings", + "DELETE_ACCOUNT": "Settings" }, "login": { "title": "LandPKS", From 44132f20307b2e830a3a95f5d5b654a78c3f57eb Mon Sep 17 00:00:00 2001 From: Ruxandra Machedon Date: Mon, 10 Jun 2024 18:39:09 -0400 Subject: [PATCH 03/20] refactor: make typography components consistent with names used in designs --- .../TranslatedParagraph.tsx} | 6 +++--- .../components/soilInfo/LocationScoreDisplay.tsx | 4 ++-- .../components/soilInfo/LocationScoreInfoContent.tsx | 8 ++++---- .../components/soilInfo/SoilInfoDisplay.tsx | 10 +++++----- .../soilInfo/SoilPropertiesScoreInfoContent.tsx | 12 ++++++------ 5 files changed, 20 insertions(+), 20 deletions(-) rename dev-client/src/components/content/{text/TranslatedBody.tsx => typography/TranslatedParagraph.tsx} (92%) diff --git a/dev-client/src/components/content/text/TranslatedBody.tsx b/dev-client/src/components/content/typography/TranslatedParagraph.tsx similarity index 92% rename from dev-client/src/components/content/text/TranslatedBody.tsx rename to dev-client/src/components/content/typography/TranslatedParagraph.tsx index a0bede5d1..526263d3f 100644 --- a/dev-client/src/components/content/text/TranslatedBody.tsx +++ b/dev-client/src/components/content/typography/TranslatedParagraph.tsx @@ -19,17 +19,17 @@ import {Trans} from 'react-i18next'; import {Text} from 'terraso-mobile-client/components/NativeBaseAdapters'; -type TranslatedBodyProps = { +type TranslatedParagraphProps = { i18nKey: string; variant?: 'body1' | 'body2'; values?: {}; }; -export function TranslatedBody({ +export function TranslatedParagraph({ i18nKey, variant = 'body1', values, -}: TranslatedBodyProps) { +}: TranslatedParagraphProps) { return ( - {isSite && ( - + )} - - + + ); } diff --git a/dev-client/src/screens/LocationScreens/components/soilInfo/SoilInfoDisplay.tsx b/dev-client/src/screens/LocationScreens/components/soilInfo/SoilInfoDisplay.tsx index 113210da3..2e81a9efe 100644 --- a/dev-client/src/screens/LocationScreens/components/soilInfo/SoilInfoDisplay.tsx +++ b/dev-client/src/screens/LocationScreens/components/soilInfo/SoilInfoDisplay.tsx @@ -19,7 +19,7 @@ import {useTranslation} from 'react-i18next'; import {SoilInfo} from 'terraso-client-shared/graphqlSchema/graphql'; -import {TranslatedBody} from 'terraso-mobile-client/components/content/text/TranslatedBody'; +import {TranslatedParagraph} from 'terraso-mobile-client/components/content/typography/TranslatedParagraph'; import InternalLink from 'terraso-mobile-client/components/links/InternalLink'; import { Box, @@ -48,13 +48,13 @@ export function SoilInfoDisplay({dataSource, soilInfo}: SoilInfoDisplayProps) { {soilInfo.ecologicalSite && ( <> - - )} - - - - - - + + + + ( - )} From 69d5033c7dbc7fb252eb777b9eeea946b9c1cb7e Mon Sep 17 00:00:00 2001 From: Ruxandra Machedon Date: Mon, 10 Jun 2024 18:51:28 -0400 Subject: [PATCH 04/20] feat: add other typography elements to components directory --- .../content/typography/TranslatedContent.tsx | 39 +++++++++++++++++++ .../content/typography/TranslatedHeading.tsx | 32 +++++++++++++++ .../typography/TranslatedParagraph.tsx | 22 ++++------- .../typography/TranslatedSubHeading.tsx | 35 +++++++++++++++++ 4 files changed, 113 insertions(+), 15 deletions(-) create mode 100644 dev-client/src/components/content/typography/TranslatedContent.tsx create mode 100644 dev-client/src/components/content/typography/TranslatedHeading.tsx create mode 100644 dev-client/src/components/content/typography/TranslatedSubHeading.tsx diff --git a/dev-client/src/components/content/typography/TranslatedContent.tsx b/dev-client/src/components/content/typography/TranslatedContent.tsx new file mode 100644 index 000000000..22f9455dd --- /dev/null +++ b/dev-client/src/components/content/typography/TranslatedContent.tsx @@ -0,0 +1,39 @@ +/* + * Copyright © 2024 Technology Matters + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published + * by the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see https://www.gnu.org/licenses/. + */ + +import {Trans} from 'react-i18next'; + +import {Text} from 'terraso-mobile-client/components/NativeBaseAdapters'; + +export type TranslatedContentProps = { + i18nKey: string; + values?: {}; +}; + +export function TranslatedContent({i18nKey, values}: TranslatedContentProps) { + return ( + , + italic: , + underline: , + }} + /> + ); +} diff --git a/dev-client/src/components/content/typography/TranslatedHeading.tsx b/dev-client/src/components/content/typography/TranslatedHeading.tsx new file mode 100644 index 000000000..f8c530d04 --- /dev/null +++ b/dev-client/src/components/content/typography/TranslatedHeading.tsx @@ -0,0 +1,32 @@ +/* + * Copyright © 2024 Technology Matters + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published + * by the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see https://www.gnu.org/licenses/. + */ + +import { + TranslatedContent, + TranslatedContentProps, +} from 'terraso-mobile-client/components/content/typography/TranslatedContent'; +import {Heading} from 'terraso-mobile-client/components/NativeBaseAdapters'; + +type TranslatedHeadingProps = TranslatedContentProps; + +export function TranslatedHeading({i18nKey, values}: TranslatedHeadingProps) { + return ( + + + + ); +} diff --git a/dev-client/src/components/content/typography/TranslatedParagraph.tsx b/dev-client/src/components/content/typography/TranslatedParagraph.tsx index 526263d3f..50894ca37 100644 --- a/dev-client/src/components/content/typography/TranslatedParagraph.tsx +++ b/dev-client/src/components/content/typography/TranslatedParagraph.tsx @@ -15,32 +15,24 @@ * along with this program. If not, see https://www.gnu.org/licenses/. */ -import {Trans} from 'react-i18next'; - +import { + TranslatedContent, + TranslatedContentProps, +} from 'terraso-mobile-client/components/content/typography/TranslatedContent'; import {Text} from 'terraso-mobile-client/components/NativeBaseAdapters'; type TranslatedParagraphProps = { - i18nKey: string; variant?: 'body1' | 'body2'; - values?: {}; -}; +} & TranslatedContentProps; export function TranslatedParagraph({ - i18nKey, variant = 'body1', + i18nKey, values, }: TranslatedParagraphProps) { return ( - , - italic: , - underline: , - }} - /> + ); } diff --git a/dev-client/src/components/content/typography/TranslatedSubHeading.tsx b/dev-client/src/components/content/typography/TranslatedSubHeading.tsx new file mode 100644 index 000000000..c4983146c --- /dev/null +++ b/dev-client/src/components/content/typography/TranslatedSubHeading.tsx @@ -0,0 +1,35 @@ +/* + * Copyright © 2024 Technology Matters + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published + * by the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see https://www.gnu.org/licenses/. + */ + +import { + TranslatedContent, + TranslatedContentProps, +} from 'terraso-mobile-client/components/content/typography/TranslatedContent'; +import {Heading} from 'terraso-mobile-client/components/NativeBaseAdapters'; + +type TranslatedSubHeadingProps = TranslatedContentProps; + +export function TranslatedSubHeading({ + i18nKey, + values, +}: TranslatedSubHeadingProps) { + return ( + + + + ); +} From fb0569f58346c32ee3e014e8c22b816293eb6d06 Mon Sep 17 00:00:00 2001 From: Ruxandra Machedon Date: Thu, 13 Jun 2024 14:38:33 -0400 Subject: [PATCH 05/20] feat: add standard bullet list from translated typography --- .../typography/TranslatedBulletList.tsx | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 dev-client/src/components/content/typography/TranslatedBulletList.tsx diff --git a/dev-client/src/components/content/typography/TranslatedBulletList.tsx b/dev-client/src/components/content/typography/TranslatedBulletList.tsx new file mode 100644 index 000000000..2c211b831 --- /dev/null +++ b/dev-client/src/components/content/typography/TranslatedBulletList.tsx @@ -0,0 +1,44 @@ +/* + * Copyright © 2024 Technology Matters + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published + * by the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see https://www.gnu.org/licenses/. + */ + +import {BulletList} from 'terraso-mobile-client/components/BulletList'; +import {TranslatedParagraph} from 'terraso-mobile-client/components/content/typography/TranslatedParagraph'; + +type TranslatedBulletListProps = { + variant?: 'body1' | 'body2'; + i18nKeys: string[]; + values?: {}; +}; + +export function TranslatedBulletList({ + variant = 'body1', + i18nKeys, + values, +}: TranslatedBulletListProps) { + return ( + ( + + )} + /> + ); +} From a263b3a09e847f6385ba569c0a0dd1873eb63d5c Mon Sep 17 00:00:00 2001 From: Ruxandra Machedon Date: Fri, 14 Jun 2024 13:49:00 -0400 Subject: [PATCH 06/20] feat: base functionality and content for user deletion requests --- .../DeleteAccountScreen.tsx | 28 +++++++-- .../DeleteAccountConfirmContent.tsx | 56 ++++++++++++++++++ .../components/DeleteAccountConfirmForm.tsx | 58 +++++++++++++++++++ .../DeleteAccountPendingContent.tsx | 44 ++++++++++++++ .../services/UserDeletionService.ts | 22 +++++++ dev-client/src/translations/en.json | 24 ++++++++ 6 files changed, 227 insertions(+), 5 deletions(-) create mode 100644 dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountConfirmContent.tsx create mode 100644 dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountConfirmForm.tsx create mode 100644 dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountPendingContent.tsx create mode 100644 dev-client/src/screens/DeleteAccountScreen/services/UserDeletionService.ts diff --git a/dev-client/src/screens/DeleteAccountScreen/DeleteAccountScreen.tsx b/dev-client/src/screens/DeleteAccountScreen/DeleteAccountScreen.tsx index 8e7d1027e..5dacac722 100644 --- a/dev-client/src/screens/DeleteAccountScreen/DeleteAccountScreen.tsx +++ b/dev-client/src/screens/DeleteAccountScreen/DeleteAccountScreen.tsx @@ -15,19 +15,37 @@ * along with this program. If not, see https://www.gnu.org/licenses/. */ -import {Text} from 'react-native-paper'; +import {useTranslation} from 'react-i18next'; -import {VStack} from 'terraso-mobile-client/components/NativeBaseAdapters'; +import {ScreenContentSection} from 'terraso-mobile-client/components/content/ScreenContentSection'; import {AppBar} from 'terraso-mobile-client/navigation/components/AppBar'; import {ScreenBackButton} from 'terraso-mobile-client/navigation/components/ScreenBackButton'; +import {DeleteAccountConfirmContent} from 'terraso-mobile-client/screens/DeleteAccountScreen/components/DeleteAccountConfirmContent'; +import {DeleteAccountConfirmForm} from 'terraso-mobile-client/screens/DeleteAccountScreen/components/DeleteAccountConfirmForm'; +import {DeleteAccountPendingContent} from 'terraso-mobile-client/screens/DeleteAccountScreen/components/DeleteAccountPendingContent'; +import {useUserDeletionRequests} from 'terraso-mobile-client/screens/DeleteAccountScreen/services/UserDeletionService'; import {ScreenScaffold} from 'terraso-mobile-client/screens/ScreenScaffold'; export function DeleteAccountScreen() { + const {t} = useTranslation(); + const {user, isPending, requestDeletion} = useUserDeletionRequests(); + return ( } />}> - - Hello, world! - + + {user && + (isPending ? ( + + ) : ( + <> + + + + ))} + ); } diff --git a/dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountConfirmContent.tsx b/dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountConfirmContent.tsx new file mode 100644 index 000000000..259a596ca --- /dev/null +++ b/dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountConfirmContent.tsx @@ -0,0 +1,56 @@ +/* + * Copyright © 2024 Technology Matters + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published + * by the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see https://www.gnu.org/licenses/. + */ + +import {User} from 'terraso-client-shared/account/accountSlice'; + +import {TranslatedBulletList} from 'terraso-mobile-client/components/content/typography/TranslatedBulletList'; +import {TranslatedParagraph} from 'terraso-mobile-client/components/content/typography/TranslatedParagraph'; +import {Column} from 'terraso-mobile-client/components/NativeBaseAdapters'; + +export type DeleteAccountConfirmContentProps = { + user: User; +}; + +export function DeleteAccountConfirmContent({ + user, +}: DeleteAccountConfirmContentProps) { + const email = user.email; + + return ( + + + + + + + + + ); +} diff --git a/dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountConfirmForm.tsx b/dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountConfirmForm.tsx new file mode 100644 index 000000000..f12a3a5d6 --- /dev/null +++ b/dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountConfirmForm.tsx @@ -0,0 +1,58 @@ +/* + * Copyright © 2024 Technology Matters + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published + * by the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see https://www.gnu.org/licenses/. + */ + +import {useCallback, useState} from 'react'; +import {useTranslation} from 'react-i18next'; + +import {Button, Input} from 'native-base'; + +import {User} from 'terraso-client-shared/account/accountSlice'; + +import {Column, Row} from 'terraso-mobile-client/components/NativeBaseAdapters'; +import {useNavigation} from 'terraso-mobile-client/navigation/hooks/useNavigation'; + +export type DeleteAccountConfirmFormProps = { + user: User; + onConfirm: () => void; +}; + +export function DeleteAccountConfirmForm({ + user, + onConfirm, +}: DeleteAccountConfirmFormProps) { + const {t} = useTranslation(); + const navigation = useNavigation(); + const goBack = useCallback(() => navigation.pop(), [navigation]); + + const email = user.email; + const [value, setValue] = useState(''); + const isDisabled = email !== value; + + return ( + + + + + + + + ); +} diff --git a/dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountPendingContent.tsx b/dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountPendingContent.tsx new file mode 100644 index 000000000..9be8d85db --- /dev/null +++ b/dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountPendingContent.tsx @@ -0,0 +1,44 @@ +/* + * Copyright © 2024 Technology Matters + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published + * by the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see https://www.gnu.org/licenses/. + */ + +import {User} from 'terraso-client-shared/account/accountSlice'; + +import {TranslatedParagraph} from 'terraso-mobile-client/components/content/typography/TranslatedParagraph'; + +export type DeleteAccountPendingContentProps = { + user: User; +}; + +export function DeleteAccountPendingContent({ + user, +}: DeleteAccountPendingContentProps) { + const email = user.email; + + return ( + <> + + + + + ); +} diff --git a/dev-client/src/screens/DeleteAccountScreen/services/UserDeletionService.ts b/dev-client/src/screens/DeleteAccountScreen/services/UserDeletionService.ts new file mode 100644 index 000000000..fd203597b --- /dev/null +++ b/dev-client/src/screens/DeleteAccountScreen/services/UserDeletionService.ts @@ -0,0 +1,22 @@ +import {useCallback, useState} from 'react'; + +import {savePreference} from 'terraso-client-shared/account/accountSlice'; + +import {useDispatch, useSelector} from 'terraso-mobile-client/store'; + +const PREFERENCES_KEY = 'account_deletion_request'; +const PREFERENCES_VALUE = 'true'; + +export const useUserDeletionRequests = () => { + const dispatch = useDispatch(); + const {data: user} = useSelector(state => state.account.currentUser); + const [isPending, setIsPending] = useState( + user!.preferences[PREFERENCES_KEY] === PREFERENCES_VALUE, + ); + const requestDeletion = useCallback(() => { + setIsPending(true); + dispatch(savePreference({key: PREFERENCES_KEY, value: PREFERENCES_VALUE})); + }, [dispatch]); + + return {user, isPending, requestDeletion}; +}; diff --git a/dev-client/src/translations/en.json b/dev-client/src/translations/en.json index cf4916cad..c10df64b3 100644 --- a/dev-client/src/translations/en.json +++ b/dev-client/src/translations/en.json @@ -433,6 +433,30 @@ "subtitle": "Discover the potential of your land", "description": "LandPKS is a Terraso soil science tool." }, + "delete_account": { + "title": "Delete Account", + "confirm": { + "p0": "{{email}}", + "p1": "The LandPKS account associated with this email address will be deleted. This removes:", + "p2": { + "b0": "your unaffiliated sites", + "b1": "projects for which you are the only manager, and their affiliated sites" + }, + "p3": "The following won’t be deleted:", + "p4": { + "b0": "data you contributed to a project for which you aren’t the only manager", + "b1": "your Terraso account (including groups, landscapes, and story maps" + }, + "p5": "Type your email address to confirm deletion:", + "cancel": "Cancel", + "delete": "Delete" + }, + "pending": { + "p0": "{{email}}", + "p1": "Your account deletion request has been sent. Account for {{email}} will be deleted within five business days.", + "p2": "You will receive an email confirmation when your account has been deleted." + } + }, "logout": { "confirm_body": "Are you sure you want to sign out?", "confirm_action": "Sign out" From 09ab06dbd71ac73647c9e00448357e9ab8db7822 Mon Sep 17 00:00:00 2001 From: Ruxandra Machedon Date: Fri, 14 Jun 2024 13:56:30 -0400 Subject: [PATCH 07/20] refactor: move user deletion hook to hooks directory --- .../UserDeletionService.ts => hooks/userDeletionRequest.ts} | 0 .../src/screens/DeleteAccountScreen/DeleteAccountScreen.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename dev-client/src/{screens/DeleteAccountScreen/services/UserDeletionService.ts => hooks/userDeletionRequest.ts} (100%) diff --git a/dev-client/src/screens/DeleteAccountScreen/services/UserDeletionService.ts b/dev-client/src/hooks/userDeletionRequest.ts similarity index 100% rename from dev-client/src/screens/DeleteAccountScreen/services/UserDeletionService.ts rename to dev-client/src/hooks/userDeletionRequest.ts diff --git a/dev-client/src/screens/DeleteAccountScreen/DeleteAccountScreen.tsx b/dev-client/src/screens/DeleteAccountScreen/DeleteAccountScreen.tsx index 5dacac722..97203c84c 100644 --- a/dev-client/src/screens/DeleteAccountScreen/DeleteAccountScreen.tsx +++ b/dev-client/src/screens/DeleteAccountScreen/DeleteAccountScreen.tsx @@ -18,12 +18,12 @@ import {useTranslation} from 'react-i18next'; import {ScreenContentSection} from 'terraso-mobile-client/components/content/ScreenContentSection'; +import {useUserDeletionRequests} from 'terraso-mobile-client/hooks/userDeletionRequest.ts'; import {AppBar} from 'terraso-mobile-client/navigation/components/AppBar'; import {ScreenBackButton} from 'terraso-mobile-client/navigation/components/ScreenBackButton'; import {DeleteAccountConfirmContent} from 'terraso-mobile-client/screens/DeleteAccountScreen/components/DeleteAccountConfirmContent'; import {DeleteAccountConfirmForm} from 'terraso-mobile-client/screens/DeleteAccountScreen/components/DeleteAccountConfirmForm'; import {DeleteAccountPendingContent} from 'terraso-mobile-client/screens/DeleteAccountScreen/components/DeleteAccountPendingContent'; -import {useUserDeletionRequests} from 'terraso-mobile-client/screens/DeleteAccountScreen/services/UserDeletionService'; import {ScreenScaffold} from 'terraso-mobile-client/screens/ScreenScaffold'; export function DeleteAccountScreen() { From 6a10b88fa5c8f71e0728d0e7214522a4de1d5750 Mon Sep 17 00:00:00 2001 From: Ruxandra Machedon Date: Fri, 14 Jun 2024 14:03:43 -0400 Subject: [PATCH 08/20] feat: spacing styles for account deletion --- .../components/DeleteAccountConfirmContent.tsx | 2 +- .../components/DeleteAccountConfirmForm.tsx | 2 +- .../components/DeleteAccountPendingContent.tsx | 5 +++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountConfirmContent.tsx b/dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountConfirmContent.tsx index 259a596ca..80fbdad70 100644 --- a/dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountConfirmContent.tsx +++ b/dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountConfirmContent.tsx @@ -31,7 +31,7 @@ export function DeleteAccountConfirmContent({ const email = user.email; return ( - + + - From b1a6b88d0b0e9779d8f4f51e07129b5c86aab566 Mon Sep 17 00:00:00 2001 From: Ruxandra Machedon Date: Fri, 14 Jun 2024 14:51:32 -0400 Subject: [PATCH 11/20] refactor: clean up style declarations for deletion form --- .../components/DeleteAccountConfirmForm.tsx | 42 +++++++++++-------- 1 file changed, 24 insertions(+), 18 deletions(-) diff --git a/dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountConfirmForm.tsx b/dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountConfirmForm.tsx index e4e28a8b3..83733741a 100644 --- a/dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountConfirmForm.tsx +++ b/dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountConfirmForm.tsx @@ -47,32 +47,38 @@ export function DeleteAccountConfirmForm({ - ); } + +const ACTION_BUTTON_VARIANTS = { + cancel: { + variant: 'outline', + size: 'lg', + _text: { + color: 'text.primary', + }, + }, + confirm: { + variant: 'solid', + size: 'lg', + background: 'error.main', + _disabled: { + background: 'action.disabledBackground', + _text: { + color: 'action.disabled', + }, + }, + _text: {color: 'error.contrast'}, + }, +}; From 851ec6922601b6e057264f731da2ce974a01f7ff Mon Sep 17 00:00:00 2001 From: Ruxandra Machedon Date: Fri, 14 Jun 2024 14:55:50 -0400 Subject: [PATCH 12/20] refactor: clean up styling conventions for deletion screen --- .../src/screens/DeleteAccountScreen/DeleteAccountScreen.tsx | 5 +++-- .../components/DeleteAccountConfirmContent.tsx | 2 +- .../components/DeleteAccountConfirmForm.tsx | 2 +- .../components/DeleteAccountPendingContent.tsx | 2 +- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/dev-client/src/screens/DeleteAccountScreen/DeleteAccountScreen.tsx b/dev-client/src/screens/DeleteAccountScreen/DeleteAccountScreen.tsx index 97203c84c..a67edd10a 100644 --- a/dev-client/src/screens/DeleteAccountScreen/DeleteAccountScreen.tsx +++ b/dev-client/src/screens/DeleteAccountScreen/DeleteAccountScreen.tsx @@ -18,6 +18,7 @@ import {useTranslation} from 'react-i18next'; import {ScreenContentSection} from 'terraso-mobile-client/components/content/ScreenContentSection'; +import {Column} from 'terraso-mobile-client/components/NativeBaseAdapters'; import {useUserDeletionRequests} from 'terraso-mobile-client/hooks/userDeletionRequest.ts'; import {AppBar} from 'terraso-mobile-client/navigation/components/AppBar'; import {ScreenBackButton} from 'terraso-mobile-client/navigation/components/ScreenBackButton'; @@ -37,13 +38,13 @@ export function DeleteAccountScreen() { (isPending ? ( ) : ( - <> + - + ))} diff --git a/dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountConfirmContent.tsx b/dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountConfirmContent.tsx index 80fbdad70..64e2cfede 100644 --- a/dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountConfirmContent.tsx +++ b/dev-client/src/screens/DeleteAccountScreen/components/DeleteAccountConfirmContent.tsx @@ -31,7 +31,7 @@ export function DeleteAccountConfirmContent({ const email = user.email; return ( - + +