feat: delete account screen

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 (
+    <BulletList
+      data={i18nKeys}
+      renderItem={i18nKey => (
+        <TranslatedParagraph
+          i18nKey={i18nKey}
+          values={values}
+          variant={variant}
+        />
+      )}
+    />
+  );
+}

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 (
+    <Trans
+      i18nKey={i18nKey}
+      values={values}
+      components={{
+        bold: <Text bold />,
+        italic: <Text italic />,
+        underline: <Text underline />,
+      }}
+    />
+  );
+}

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 (
+    <Heading variant="h1">
+      <TranslatedContent i18nKey={i18nKey} values={values} />
+    </Heading>
+  );
+}

dev-client/src/components/content/text/TranslatedBody.tsx → 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 TranslatedBodyProps = {
-  i18nKey: string;
+type TranslatedParagraphProps = {
   variant?: 'body1' | 'body2';
-  values?: {};
-};
+} & TranslatedContentProps;
 
-export function TranslatedBody({
-  i18nKey,
+export function TranslatedParagraph({
   variant = 'body1',
+  i18nKey,
   values,
-}: TranslatedBodyProps) {
+}: TranslatedParagraphProps) {
   return (
     <Text variant={variant}>
-      <Trans
-        i18nKey={i18nKey}
-        values={values}
-        components={{
-          bold: <Text bold />,
-          italic: <Text italic />,
-          underline: <Text underline />,
-        }}
-      />
+      <TranslatedContent i18nKey={i18nKey} values={values} />
     </Text>
   );
 }

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 (
+    <Heading variant="h2">
+      <TranslatedContent i18nKey={i18nKey} values={values} />
+    </Heading>
+  );
+}

dev-client/src/hooks/userDeletionRequest.ts

@@ -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 {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};
+};

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';
@@ -36,7 +37,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 +54,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 = {
@@ -89,6 +90,7 @@ export const screenDefinitions = {
   TEXTURE_GUIDE: TextureGuideScreen,
   COLOR_GUIDE: ColorGuideScreen,
   COLOR_ANALYSIS: ColorAnalysisScreen,
+  DELETE_ACCOUNT: DeleteAccountScreen,
 } satisfies ScreenDefinitions;
 
 export const modalScreenDefinitions = {

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}}>
       <BottomTabs.Screen name="HOME" component={HomeScreen} />
       <BottomTabs.Screen name="PROJECT_LIST" component={ProjectListScreen} />
-      <BottomTabs.Screen name="SETTINGS" component={SettingsScreen} />
+      <BottomTabs.Screen name="SETTINGS" component={UserSettingsScreen} />
     </BottomTabs.Navigator>
   );
 });

dev-client/src/screens/DeleteAccountScreen/DeleteAccountScreen.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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 {useTranslation} from 'react-i18next';
+import {ScrollView} from 'react-native-gesture-handler';
+
+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';
+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 {ScreenScaffold} from 'terraso-mobile-client/screens/ScreenScaffold';
+
+export function DeleteAccountScreen() {
+  const {t} = useTranslation();
+  const {user, isPending, requestDeletion} = useUserDeletionRequests();
+
+  return (
+    <ScreenScaffold AppBar={<AppBar LeftButton={<ScreenBackButton />} />}>
+      <ScrollView>
+        <ScreenContentSection title={t('delete_account.title')}>
+          {user &&
+            (isPending ? (
+              <DeleteAccountPendingContent user={user} />
+            ) : (
+              <Column space="16px">
+                <DeleteAccountConfirmContent user={user} />
+                <DeleteAccountConfirmForm
+                  user={user}
+                  onConfirm={requestDeletion}
+                />
+              </Column>
+            ))}
+        </ScreenContentSection>
+      </ScrollView>
+    </ScreenScaffold>
+  );
+}