@ethora/chat-component-rn 26.9.1 → 26.10.1

package/src/components/Modals/SettingsModals/DocumentShares/DocumentSharesModal.tsx

@@ -30,6 +30,7 @@ import {
   SharedSettingsInfoPanel,
   SharedSettingsInfoText,
   SharedSettingsColumnContainer,
+  SharedSettingsScrollBody,
 } from '../SharedStyledComponents';
 import { SearchInput } from '../../../InputComponents/Search';
 import Button from '../../../styled/Button';
@@ -51,63 +52,65 @@ const DocumentSharesModal: React.FC<DocumentSharesModalProps> = ({
         handleCloseModal={handleCloseModal}
         headerTitle={'Document Shares'}
       />
-      <CenterContainer>
-        <SharedSettingsColumnContainer>
-          <SharedSettingsSectionContainer>
-            <SharedSettingsStyledLabel>
-              Current Document Shares
-            </SharedSettingsStyledLabel>
-            <SharedSettingsLabelData>
-              Listed below are your currently active document sharing links. You
-              can share or delete them.
-            </SharedSettingsLabelData>
-            <BorderedContainer>
-              <View
-                style={{
-                  display: 'flex',
-                  padding: 8,
-                  width: '100%',
-                  justifyContent: 'space-between',
-                  alignItems: 'center',
-                }}
-              >
-                <View>List of shares</View>
-                <View style={{ display: 'flex', flexDirection: 'row' }}>
-                  <View>
-                    {/* <SearchInput
-                      animated
-                      icon={<SearchIcon />}
-                      direction="right"
-                    /> */}
+      <SharedSettingsScrollBody>
+        <CenterContainer>
+          <SharedSettingsColumnContainer>
+            <SharedSettingsSectionContainer>
+              <SharedSettingsStyledLabel>
+                Current Document Shares
+              </SharedSettingsStyledLabel>
+              <SharedSettingsLabelData>
+                Listed below are your currently active document sharing links. You
+                can share or delete them.
+              </SharedSettingsLabelData>
+              <BorderedContainer>
+                <View
+                  style={{
+                    display: 'flex',
+                    padding: 8,
+                    width: '100%',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                  }}
+                >
+                  <View>List of shares</View>
+                  <View style={{ display: 'flex', flexDirection: 'row' }}>
+                    <View>
+                      {/* <SearchInput
+                        animated
+                        icon={<SearchIcon />}
+                        direction="right"
+                      /> */}
+                    </View>
+                    <View>
+                      <DropdownMenu
+                        sortFunction={function (value: string): void {
+                          throw new Error('Function not implemented.');
+                        }}
+                        icon={''}
+                        values={['Name', 'Surname']}
+                      />
+                    </View>
+                    <Button
+                      variant="filled"
+                      StartIcon={<PlusIcon />}
+                      style={{ width: '100%' }}
+                    >
+                      Add New Share
+                    </Button>
                   </View>
-                  <View>
-                    <DropdownMenu
-                      sortFunction={function (value: string): void {
-                        throw new Error('Function not implemented.');
-                      }}
-                      icon={''}
-                      values={['Name', 'Surname']}
-                    />
-                  </View>
-                  <Button
-                    variant="filled"
-                    StartIcon={<PlusIcon />}
-                    style={{ width: '100%' }}
-                  >
-                    Add New Share
-                  </Button>
                 </View>
-              </View>
-              <SharedSettingsInfoPanel bgColor={config?.colors?.secondary}>
-                <SharedSettingsInfoText>
-                  There are no shares yet, or you can add them by clicking the
-                  “Add New Share” button
-                </SharedSettingsInfoText>
-              </SharedSettingsInfoPanel>
-            </BorderedContainer>
-          </SharedSettingsSectionContainer>
-        </SharedSettingsColumnContainer>
-      </CenterContainer>
+                <SharedSettingsInfoPanel bgColor={config?.colors?.secondary}>
+                  <SharedSettingsInfoText>
+                    There are no shares yet, or you can add them by clicking the
+                    “Add New Share” button
+                  </SharedSettingsInfoText>
+                </SharedSettingsInfoPanel>
+              </BorderedContainer>
+            </SharedSettingsSectionContainer>
+          </SharedSettingsColumnContainer>
+        </CenterContainer>
+      </SharedSettingsScrollBody>
     </ModalContainerFullScreen>
   );
 };

package/src/components/Modals/SettingsModals/ManageDataModal/ManageDataModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   LabelData,
   ModalContainerFullScreen,
@@ -8,7 +8,10 @@ import { useSelector } from 'react-redux';
 import { RootState } from '../../../../roomStore';
 import styled from 'styled-components/native';
 import { InfoIcon } from '../../../../assets/icons';
-import { getExportMyData } from '../../../../networking/api-requests/user.api';
+import {
+  deleteMe,
+  downloadMyDataExport,
+} from '../../../../networking/api-requests/user.api';
 import {
   SharedSettingsCenterContainer,
   SharedSettingsColumnContainer,
@@ -18,10 +21,14 @@ import {
   SharedSettingsSectionContainer,
   SharedSettingsStyledButton,
   SharedSettingsStyledLabel,
+  SharedSettingsScrollBody,
 } from '../SharedStyledComponents';
-import { View } from 'react-native';
+import { Alert, Platform, Share, View } from 'react-native';
+import * as FileSystem from 'expo-file-system/legacy';
 import { useTheme } from '../../../../hooks/useTheme';
 import { useT } from '../../../../i18n/useT';
+import { useLogout } from '../../../../hooks/useLogout';
+import { useToast } from '../../../../context/ToastContext';
 
 interface ManageDataModalProps {
   handleCloseModal: any;
@@ -42,19 +49,101 @@ const ManageDataModal: React.FC<ManageDataModalProps> = ({
   const theme = useTheme();
   const t = useT();
 
+  const performLogout = useLogout();
+  const { showToast } = useToast();
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const showError = (message: string) =>
+    showToast({
+      id: Date.now().toString(),
+      title: t('toast.error'),
+      message,
+      type: 'error',
+    });
+
   const handleDownloadClick = async () => {
-    // const exportedData = await getExportMyData();
-    // const binaryData = exportedData.data;
-    // console.log(binaryData);
-    // const blob = new Blob([binaryData], { type: "text/plain" });
-    // const url = URL.createObjectURL(blob);
-    // const a = document.createElement("a");
-    // a.href = url;
-    // a.download = "mydata.json";
-    // document.body.appendChild(a);
-    // a.click();
-    // document.body.removeChild(a);
-    // URL.revokeObjectURL(url);
+    if (isDownloading) {return;}
+    setIsDownloading(true);
+    try {
+      const fileName = 'my-data.json';
+      const download = await downloadMyDataExport(
+        `${FileSystem.cacheDirectory}${fileName}`
+      );
+
+      if (Platform.OS === 'android') {
+        // Android has no shareable file URL; let the user pick a folder
+        // through the Storage Access Framework and write the copy there.
+        const saf = (FileSystem as any).StorageAccessFramework;
+        const perm = await saf.requestDirectoryPermissionsAsync();
+        if (!perm.granted) {return;}
+        const base64 = await FileSystem.readAsStringAsync(download.uri, {
+          encoding: FileSystem.EncodingType.Base64,
+        });
+        const destUri = await saf.createFileAsync(
+          perm.directoryUri,
+          fileName.replace(/\.[^/.]+$/, ''),
+          download.mimeType || 'application/json'
+        );
+        await FileSystem.writeAsStringAsync(destUri, base64, {
+          encoding: FileSystem.EncodingType.Base64,
+        });
+        showToast({
+          id: Date.now().toString(),
+          title: t('toast.successTitle'),
+          message: t('toast.saveSuccessful'),
+          type: 'success',
+        });
+        return;
+      }
+
+      // iOS: the share sheet offers "Save to Files", AirDrop, etc. and is
+      // itself the confirmation, so no success toast.
+      await Share.share({ url: download.uri, title: fileName });
+    } catch (err) {
+      console.error('ManageDataModal: data export failed', err);
+      showError(t('settings.manageData.downloadFailed'));
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  const deleteAccount = async () => {
+    setIsDeleting(true);
+    try {
+      await deleteMe();
+    } catch (err) {
+      console.error('ManageDataModal: account deletion failed', err);
+      showError(t('settings.manageData.deleteFailed'));
+      setIsDeleting(false);
+      return;
+    }
+    // The account is gone server-side: tear the local session down the
+    // same way a logout does, then let the host navigate away.
+    await performLogout();
+    try {
+      await config?.logout?.onAfterLogout?.();
+    } catch (e) {
+      console.warn('ManageDataModal: onAfterLogout threw', e);
+    }
+  };
+
+  const handleDeleteClick = () => {
+    if (isDeleting) {return;}
+    Alert.alert(
+      t('settings.manageData.deleteConfirmTitle'),
+      t('settings.manageData.deleteConfirmMessage'),
+      [
+        { text: t('action.cancel'), style: 'cancel' },
+        {
+          text: t('action.delete'),
+          style: 'destructive',
+          onPress: () => {
+            deleteAccount();
+          },
+        },
+      ]
+    );
   };
 
   return (
@@ -63,54 +152,59 @@ const ManageDataModal: React.FC<ManageDataModalProps> = ({
         handleCloseModal={handleCloseModal}
         headerTitle={t('settings.manageData.title')}
       />
-      <SharedSettingsCenterContainer>
-        <SharedSettingsColumnContainer>
-          <SharedSettingsSectionContainer>
-            <SharedSettingsStyledLabel>
-              {t('settings.manageData.downloadLabel')}
-            </SharedSettingsStyledLabel>
-            <LabelData
-              style={{
-                fontSize: 12,
-                textAlign: 'left',
-              }}
+      <SharedSettingsScrollBody>
+        <SharedSettingsCenterContainer>
+          <SharedSettingsColumnContainer>
+            <SharedSettingsSectionContainer>
+              <SharedSettingsStyledLabel>
+                {t('settings.manageData.downloadLabel')}
+              </SharedSettingsStyledLabel>
+              <LabelData
+                style={{
+                  fontSize: 12,
+                  textAlign: 'left',
+                }}
+              >
+                {t('settings.manageData.downloadDescription')}
+              </LabelData>
+            </SharedSettingsSectionContainer>
+            <SharedSettingsStyledButton
+              borderColor={theme.primary}
+              onPress={handleDownloadClick}
+              loading={isDownloading}
+              text={t('settings.manageData.downloadLabel')}
+              color={theme.primary}
+            />
+          </SharedSettingsColumnContainer>
+          <SharedSettingsColumnContainer>
+            <SharedSettingsSectionContainer>
+              <SharedSettingsStyledLabel>
+                {t('settings.manageData.deleteLabel')}
+              </SharedSettingsStyledLabel>
+              <SharedSettingsLabelData>
+                {t('settings.manageData.deleteDescription')}
+              </SharedSettingsLabelData>
+            </SharedSettingsSectionContainer>
+            <SharedSettingsInfoPanel
+              bgColor={theme.surfaceHighlight}
             >
-              {t('settings.manageData.downloadDescription')}
-            </LabelData>
-          </SharedSettingsSectionContainer>
-          <SharedSettingsStyledButton
-            borderColor={theme.primary}
-            onPress={handleDownloadClick}
-            text={t('settings.manageData.downloadLabel')}
-            color={theme.primary}
-          />
-        </SharedSettingsColumnContainer>
-        <SharedSettingsColumnContainer>
-          <SharedSettingsSectionContainer>
-            <SharedSettingsStyledLabel>
-              {t('settings.manageData.deleteLabel')}
-            </SharedSettingsStyledLabel>
-            <SharedSettingsLabelData>
-              {t('settings.manageData.deleteDescription')}
-            </SharedSettingsLabelData>
-          </SharedSettingsSectionContainer>
-          <SharedSettingsInfoPanel
-            bgColor={config?.colors?.secondary || theme.surfaceHighlight}
-          >
-            <View>
-              <InfoIcon color={theme.primary} />
-            </View>
-            <SharedSettingsInfoText>
-              {t('settings.manageData.deleteDisclosure')}
-            </SharedSettingsInfoText>
-          </SharedSettingsInfoPanel>
-          <SharedSettingsStyledButton
-            borderColor={theme.danger}
-            text={t('action.deleteMyAccount')}
-            color={theme.danger}
-          />
-        </SharedSettingsColumnContainer>
-      </SharedSettingsCenterContainer>
+              <View>
+                <InfoIcon color={theme.primary} />
+              </View>
+              <SharedSettingsInfoText>
+                {t('settings.manageData.deleteDisclosure')}
+              </SharedSettingsInfoText>
+            </SharedSettingsInfoPanel>
+            <SharedSettingsStyledButton
+              borderColor={theme.danger}
+              onPress={handleDeleteClick}
+              loading={isDeleting}
+              text={t('action.deleteMyAccount')}
+              color={theme.danger}
+            />
+          </SharedSettingsColumnContainer>
+        </SharedSettingsCenterContainer>
+      </SharedSettingsScrollBody>
     </ModalContainerFullScreen>
   );
 };

package/src/components/Modals/SettingsModals/ProfileShares/ProfileShares.tsx

@@ -22,6 +22,7 @@ import {
   SharedSettingsLabelData,
   SharedSettingsSectionContainer,
   SharedSettingsStyledLabel,
+  SharedSettingsScrollBody,
 } from '../SharedStyledComponents';
 
 interface ProfileSharesModalProps {
@@ -39,25 +40,27 @@ const ProfileSharesModal: React.FC<ProfileSharesModalProps> = ({
         handleCloseModal={handleCloseModal}
         headerTitle={'Profile Shares'}
       />
-      <CenterContainer>
-        <SharedSettingsSectionContainer>
-          <SharedSettingsStyledLabel>
-            Current Profile Shares
-          </SharedSettingsStyledLabel>
-          <SharedSettingsLabelData>
-            Listed below are your currently active profile sharing links. You
-            can share or delete them.
-          </SharedSettingsLabelData>
-          <BorderedContainer>
-            <SharedSettingsInfoPanel bgColor={config?.colors?.secondary}>
-              <SharedSettingsInfoText>
-                There are no shares yet, or you can add them by clicking the
-                “Add New Share” button
-              </SharedSettingsInfoText>
-            </SharedSettingsInfoPanel>
-          </BorderedContainer>
-        </SharedSettingsSectionContainer>
-      </CenterContainer>
+      <SharedSettingsScrollBody>
+        <CenterContainer>
+          <SharedSettingsSectionContainer>
+            <SharedSettingsStyledLabel>
+              Current Profile Shares
+            </SharedSettingsStyledLabel>
+            <SharedSettingsLabelData>
+              Listed below are your currently active profile sharing links. You
+              can share or delete them.
+            </SharedSettingsLabelData>
+            <BorderedContainer>
+              <SharedSettingsInfoPanel bgColor={config?.colors?.secondary}>
+                <SharedSettingsInfoText>
+                  There are no shares yet, or you can add them by clicking the
+                  “Add New Share” button
+                </SharedSettingsInfoText>
+              </SharedSettingsInfoPanel>
+            </BorderedContainer>
+          </SharedSettingsSectionContainer>
+        </CenterContainer>
+      </SharedSettingsScrollBody>
     </ModalContainerFullScreen>
   );
 };

package/src/components/Modals/SettingsModals/Referrals/Referrals.tsx

@@ -15,6 +15,7 @@ import {
   RowWrapper,
   SharedSettingsColumnContainer,
   SharedSettingsStyledLabel,
+  SharedSettingsScrollBody,
 } from '../SharedStyledComponents';
 import InputWithLabel from '../../../styled/StyledInput';
 import { StyledInput } from '../../../styled/StyledInputComponents/StyledInputComponents';
@@ -40,51 +41,53 @@ const ReferralsModal: React.FC<ReferralsModalProps> = ({
         handleCloseModal={handleCloseModal}
         headerTitle={'Referrals'}
       />
-      <CenterContainer>
-        <ReferalsIcon />
-        <Animated.View>
-          <SharedSettingsStyledLabel>Gift friends 25</SharedSettingsStyledLabel>
-          <SendCoinIcon style={{ width: 24, height: 24 }} />
-          <SharedSettingsStyledLabel>and receive 25</SharedSettingsStyledLabel>
-          <SendCoinIcon style={{ width: 24, height: 24 }} />
-          <Text style={{ color: theme.text }}>.</Text>
-          <SharedSettingsStyledLabel>
-            Send friends invite with your personal invitation code.
-          </SharedSettingsStyledLabel>
-        </Animated.View>
-        <SharedSettingsColumnContainer style={{ width: '100%' }}>
-          <SharedSettingsStyledLabel>
-            Your invitation code
-          </SharedSettingsStyledLabel>
-          <StyledInput
-            {...{ color: config?.colors?.primary || theme.primary } as any}
-            placeholder="Your invitation code"
-            // label={'About'}
-            // value={message}
-            // onChange={handleInputChange}
-            // onKeyDown={handleKeyDown}
-            // onFocus={handleFocus}
-            // onBlur={handleBlur}
-            // disabled={isLoading}
-          />
-        </SharedSettingsColumnContainer>
-        <SharedSettingsColumnContainer style={{ width: '100%' }}>
-          <SharedSettingsStyledLabel>
-            Or enter your referral code to earn coins
-          </SharedSettingsStyledLabel>
-          <StyledInput
-            {...{ color: config?.colors?.primary || theme.primary } as any}
-            placeholder="Your referral code"
-            // label={'About'}
-            // value={message}
-            // onChange={handleInputChange}
-            // onKeyDown={handleKeyDown}
-            // onFocus={handleFocus}
-            // onBlur={handleBlur}
-            // disabled={isLoading}
-          />
-        </SharedSettingsColumnContainer>
-      </CenterContainer>
+      <SharedSettingsScrollBody>
+        <CenterContainer>
+          <ReferalsIcon />
+          <Animated.View>
+            <SharedSettingsStyledLabel>Gift friends 25</SharedSettingsStyledLabel>
+            <SendCoinIcon style={{ width: 24, height: 24 }} />
+            <SharedSettingsStyledLabel>and receive 25</SharedSettingsStyledLabel>
+            <SendCoinIcon style={{ width: 24, height: 24 }} />
+            <Text style={{ color: theme.text }}>.</Text>
+            <SharedSettingsStyledLabel>
+              Send friends invite with your personal invitation code.
+            </SharedSettingsStyledLabel>
+          </Animated.View>
+          <SharedSettingsColumnContainer style={{ width: '100%' }}>
+            <SharedSettingsStyledLabel>
+              Your invitation code
+            </SharedSettingsStyledLabel>
+            <StyledInput
+              {...{ color: config?.colors?.primary || theme.primary } as any}
+              placeholder="Your invitation code"
+              // label={'About'}
+              // value={message}
+              // onChange={handleInputChange}
+              // onKeyDown={handleKeyDown}
+              // onFocus={handleFocus}
+              // onBlur={handleBlur}
+              // disabled={isLoading}
+            />
+          </SharedSettingsColumnContainer>
+          <SharedSettingsColumnContainer style={{ width: '100%' }}>
+            <SharedSettingsStyledLabel>
+              Or enter your referral code to earn coins
+            </SharedSettingsStyledLabel>
+            <StyledInput
+              {...{ color: config?.colors?.primary || theme.primary } as any}
+              placeholder="Your referral code"
+              // label={'About'}
+              // value={message}
+              // onChange={handleInputChange}
+              // onKeyDown={handleKeyDown}
+              // onFocus={handleFocus}
+              // onBlur={handleBlur}
+              // disabled={isLoading}
+            />
+          </SharedSettingsColumnContainer>
+        </CenterContainer>
+      </SharedSettingsScrollBody>
     </ModalContainerFullScreen>
   );
 };

package/src/components/Modals/SettingsModals/SharedStyledComponents.ts

@@ -72,3 +72,14 @@ export const SharedSettingsInfoText = styled.Text`
   display: flex;
   text-align: start;
 `;
+
+// Scrollable body under a settings screen's header: the content is taller
+// than the screen on small phones and in large text sizes, and a plain View
+// just clips it.
+export const SharedSettingsScrollBody = styled.ScrollView.attrs({
+  contentContainerStyle: { flexGrow: 1, alignItems: 'center' },
+  keyboardShouldPersistTaps: 'handled',
+})`
+  flex: 1;
+  width: 100%;
+`;