@ethora/chat-component-rn 26.4.1

package/src/components/Modals/UserProfileModal/UserProfileModal.tsx

@@ -0,0 +1,410 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  CenterContainer,
+  UserInfo,
+  UserName,
+  UserStatus,
+  ModalContainerFullScreen,
+  ActionButton,
+  Label,
+  BorderedContainer,
+  LabelData,
+  ModalBackground,
+  ModalContainer,
+  CloseButton,
+  ModalTitle,
+  GroupContainer,
+} from '../styledModalComponents';
+import { ChatIcon, DeleteIcon, DownloadIcon, EditIcon, IconDoc, LeaveIcon, MoreIcon } from '../../../assets/icons';
+import ModalHeaderComponent from '../ModalHeaderComponent';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../../roomStore';
+import { ProfileImagePlaceholder } from '../../MainComponents/ProfileImagePlaceholder';
+import Button from '../../styled/Button';
+import DropdownMenu from '../../DropdownMenu/DropdownMenu';
+import {
+  logout,
+  setActiveModal,
+  setLangSource,
+  setSelectedUser,
+} from '../../../roomStore/chatSettingsSlice';
+import { addRoomViaApi, setCurrentRoom, setLogoutState } from '../../../roomStore/roomsSlice';
+import EditUserModal from './EditUserModal';
+import { walletToUsername } from '../../../helpers/walletUsername';
+import { useXmppClient } from '../../../context/xmppProvider';
+import Loader from '../../styled/Loader';
+import { ApiRoom, IRoom, Iso639_1Codes } from '../../../types/types';
+import Select from '../../MainComponents/Select';
+import { useAppDispatch, useAppSelector } from '../../../hooks/hooks';
+import { ScrollView, Text, View } from 'react-native';
+import { postPrivateRoom } from '../../../networking/api-requests/rooms.api';
+import { createRoomFromApi } from '../../../helpers/createRoomFromApi';
+import { useToast } from '../../../context/ToastContext';
+import { LANGUAGE_OPTIONS } from '../../../helpers/constants/LANGUAGE_OPTIONS';
+import { deleteDocument, getDocuments } from '../../../networking/api-requests/user.api';
+import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { DateTime } from 'luxon';
+
+interface UserProfileModalProps {
+  handleCloseModal: any;
+}
+
+const UserProfileModal: React.FC<UserProfileModalProps> = ({
+  handleCloseModal,
+}) => {
+  const dispatch = useAppDispatch();
+
+  const { client } = useXmppClient();
+  const { showToast } = useToast();
+
+  const { config, user, selectedUser, langSource } = useChatSettingState();
+
+  const [isEditing, setIsEditing] = useState<boolean>(false);
+  const [documents, setDocuments] = useState<any[]>([]);
+  const [deleteDocumentId, setDeleteDocumentId] = useState<string>('');
+  const [showDelete, setShowDelete] = useState<boolean>(false);
+
+  const handleDeleteDocument = async () => {
+    try {
+      await deleteDocument(deleteDocumentId);
+      setDocuments(documents.filter((doc) => doc._id !== deleteDocumentId));
+      showToast({
+        id: Date.now().toString(),
+        title: 'Success',
+        message: 'Document deleted successfully',
+        type: 'success',
+      });
+      // handleGetDocs();
+    } catch (error) {
+      console.error('Error deleting document', error);
+      showToast({
+        id: Date.now().toString(),
+        title: 'Error',
+        message: 'Failed to delete document',
+        type: 'error',
+      });
+    } finally {
+      setShowDelete(false);
+    }
+  };
+
+  const handleGetDocs = async () => {
+    try {
+      const { data } = await getDocuments(user?.defaultWallet?.walletAddress);
+      const items = data.results.filter((el: {locations: unknown[]}) => el.locations[0]);
+
+      setDocuments(items);
+    } catch (error) {
+      console.error('Error getting docs', error);
+    }
+  };
+
+  useEffect(() => {
+    handleGetDocs();
+  }, []);
+
+  const handleBackClick = useCallback(() => {
+    dispatch(setSelectedUser());
+    handleCloseModal();
+  }, []);
+
+  const handleLogout = useCallback(() => {
+    dispatch(logout());
+    dispatch(setLogoutState());
+  }, []);
+
+  const menuOptions = useMemo(
+    () => [
+      {
+        label: 'Log Out',
+        icon: <LeaveIcon />,
+        onClick: () => {
+          handleLogout();
+        },
+        styles: { color: 'red' },
+      },
+    ],
+    []
+  );
+
+  const handleSelect = (selected: { name: string; id: Iso639_1Codes }) => {
+    dispatch(setLangSource(selected.id));
+  };
+
+  const EditClick = useCallback(() => {
+    setIsEditing(true);
+  }, []);
+
+
+  const handleRoomCreation = async (
+    newChat: ApiRoom,
+    usersArrayLength: number
+  ) => {
+    try {
+      const normalizedChat = createRoomFromApi(
+        newChat,
+        config?.xmppSettings?.conference,
+        usersArrayLength
+      );
+
+      dispatch(
+        addRoomViaApi({
+          room: normalizedChat as IRoom,
+          xmpp: client,
+        })
+      );
+
+      dispatch(setCurrentRoom({ roomJID: normalizedChat?.jid || '' }));
+
+      showToast({
+        id: Date.now().toString(),
+        title: 'Success!',
+        message: 'Room created succusfully!',
+        type: 'success',
+        duration: 3000,
+      });
+    } catch (error) {
+      console.error('Error handling room creation:', error);
+    }
+  };
+
+  const handlePrivateMessage = useCallback(async () => {
+    showToast({
+      id: Date.now().toString(),
+      title: 'Room creation',
+      message: 'Room is being created...',
+      type: 'info',
+      duration: 3000,
+    });
+    let newRoomJid = '';
+    if (config?.newArch) {
+      const newRoom = await postPrivateRoom(
+        selectedUser?.userJID ?? (selectedUser?.id || '')
+      );
+      handleRoomCreation(newRoom, 2);
+      newRoomJid = newRoom.name;
+    } else {
+      const selectedUserUsername = walletToUsername(selectedUser?.id || '');
+      const myUsername = walletToUsername(user.defaultWallet.walletAddress);
+
+      const combinedWalletAddress = [myUsername, selectedUserUsername]
+        .sort()
+        .join('.');
+
+      const roomJid = combinedWalletAddress.toLowerCase();
+
+      const combinedUsersName = [
+        user.firstName,
+        selectedUser?.name?.split(' ')?.[0] || '',
+      ]
+        .sort()
+        .join(' and ');
+
+      newRoomJid = await client.createPrivateRoomStanza(
+        combinedUsersName,
+        `Private chat ${combinedUsersName}`,
+        roomJid
+      );
+
+      if (newRoomJid) {
+        await client.inviteRoomRequestStanza(selectedUserUsername, newRoomJid);
+        await client.getRoomsStanza();
+      }
+    }
+
+    dispatch(setActiveModal());
+  }, [selectedUser]);
+
+  const modalUser: any = selectedUser ?? user;
+
+  const findLanguage = () => {
+    if(!langSource) {return null;}
+
+    const language = LANGUAGE_OPTIONS.find((lang) => lang.id === langSource);
+    return language || null;
+  };
+
+  const showDeleteModal = (docId: string) => {
+    setDeleteDocumentId(docId);
+    setShowDelete(true);
+  };
+
+  const DefaultBody = useMemo(
+    () => (
+      <>
+        <ModalHeaderComponent
+          handleCloseModal={handleBackClick}
+          headerTitle={'Profile'}
+          rightMenu={
+            !selectedUser && (
+              <>
+                <Button onPress={EditClick}>
+                  <EditIcon color="#8C8C8C" />
+                </Button>
+                <DropdownMenu
+                  options={menuOptions}
+                  position="right"
+                  menuIcon={<MoreIcon />}
+                />
+              </>
+            )
+          }
+        />
+        <CenterContainer>
+          <ProfileImagePlaceholder
+            icon={modalUser?.profileImage ?? null}
+            name={modalUser?.name ?? modalUser?.firstName}
+            size={120}
+          />
+          <UserInfo>
+            <UserName>
+              {modalUser?.name
+                ? `${modalUser?.name}`
+                : `${modalUser?.firstName} ${modalUser?.lastName}`}
+            </UserName>
+            {/* <UserStatus>Status</UserStatus> */}
+          </UserInfo>
+          {!selectedUser && config?.translates?.enabled && (
+            <BorderedContainer>
+              <Select
+                options={LANGUAGE_OPTIONS}
+                placeholder={'Select your language'}
+                onSelect={handleSelect}
+                accentColor={config?.colors?.primary}
+                selectedValue={findLanguage()}
+              />
+            </BorderedContainer>
+          )}
+          <BorderedContainer>
+            <Label>About</Label>
+            <LabelData>
+              {modalUser?.description && modalUser?.description?.length > 4
+                ? modalUser.description
+                : 'No description'}
+            </LabelData>
+          </BorderedContainer>
+
+          {selectedUser && (
+            <>
+              <ActionButton
+                StartIcon={<ChatIcon />}
+                onPress={handlePrivateMessage}
+                variant="filled"
+              >
+                <Text style={{ color: '#ffffff' }}>Message</Text>
+              </ActionButton>
+              <ActionButton
+                onPress={() => {}}
+                // onPress={() => handleCopyClick(selectedUser.id)}
+                variant="filled"
+              >
+                <Text style={{ color: '#ffffff' }}>Copy User Id</Text>
+              </ActionButton>
+            </>
+          )}
+
+          <BorderedContainer>
+            <ScrollView
+              style={{ maxHeight: 400 }}
+              showsVerticalScrollIndicator={true}
+              nestedScrollEnabled={true}
+            >
+            {documents.map((doc) => (
+              <View
+                key={doc._id}
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  gap: 24,
+                  backgroundColor: '#F3F6FC',
+                  marginBottom: 8,
+                  paddingVertical: 8,
+                  paddingHorizontal: 16,
+                  borderRadius: 8,
+                }}
+              >
+                <View style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  gap: 24,
+                }}>
+                <View><IconDoc/></View>
+                <View>
+                  <Label style={{ paddingBottom: 4 }}>{doc.documentName}</Label>
+                  <LabelData>
+                    {DateTime.fromISO(doc.createdAt).toFormat('dd LLL yyyy t')}
+                  </LabelData>
+                </View>
+                </View>
+                <Button onPress={() => showDeleteModal(doc._id)}>
+                  <DeleteIcon/>
+                </Button>
+              </View>
+            ))}
+            </ScrollView>
+          </BorderedContainer>
+
+
+          {/* <EmptySection /> */}
+        </CenterContainer>
+      </>
+    ),
+    [modalUser, documents]
+  );
+
+  const EditingBody = useMemo(
+    () => (
+      <EditUserModal
+        setIsEditing={setIsEditing}
+        modalUser={modalUser}
+        config={config}
+      />
+    ),
+    [modalUser]
+  );
+
+  return (
+    <>
+      <ModalContainerFullScreen>
+        {!isEditing ? DefaultBody : EditingBody}
+      </ModalContainerFullScreen>
+
+      {showDelete && (
+        <ModalBackground style={{ position: 'absolute', zIndex: 9999 }}>
+          <ModalContainer>
+            <CloseButton onPress={() => setShowDelete(false)}>
+              <Text style={{ fontSize: 24 }}>&times;</Text>
+            </CloseButton>
+            <ModalTitle>Delete this document?</ModalTitle>
+
+            <GroupContainer>
+              <Button
+                onPress={() => setShowDelete(false)}
+                text={'Cancel'}
+                style={{ width: '100%' }}
+                unstyled
+                variant="filled"
+                color="white"
+              />
+              <Button
+                onPress={handleDeleteDocument}
+                text={'Delete'}
+                style={{
+                  width: '100%',
+                  borderWidth: 1,
+                  borderColor: 'red',
+                }}
+                color="red"
+                unstyled
+                variant="outlined"
+              />
+            </GroupContainer>
+          </ModalContainer>
+        </ModalBackground>
+      )}
+    </>
+  );
+};
+
+export default UserProfileModal;

package/src/components/Modals/UserSettingsModal/UserSettingsModal.tsx

@@ -0,0 +1,85 @@
+import React, { useCallback, useMemo } from 'react';
+
+import {
+  ModalContainerFullScreen,
+  Viewider,
+  Label,
+  LabelData,
+  BorderedContainer,
+  CenterContainer,
+} from '../styledModalComponents';
+import ModalHeaderComponent from '../ModalHeaderComponent';
+import Button from '../../styled/Button';
+import { useDispatch } from 'react-redux';
+import { setActiveModal } from '../../../roomStore/chatSettingsSlice';
+import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
+
+interface UserSettingsModalProps {
+  handleCloseModal: any;
+}
+
+const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
+  handleCloseModal,
+}) => {
+  const options = useMemo(
+    () => [
+      { value: 'Manage Data', key: MODAL_TYPES.MANAGE_DATA },
+      { value: 'Visiblility', key: MODAL_TYPES.VISIBILITY },
+      // { value: 'Profile Shares', key: MODAL_TYPES.PROFILE_SHARES },
+      // { value: 'Document Shares', key: MODAL_TYPES.DOCUMENT_SHARES },
+      // { value: 'Blocked Users', key: MODAL_TYPES.BLOCKED_USERS },
+      // { value: 'Referrals', key: MODAL_TYPES.REFERRALS },
+    ],
+    []
+  );
+
+  const dispatch = useDispatch();
+
+  const handleClick = useCallback((key: string) => {
+    dispatch(setActiveModal(key));
+  }, []);
+
+  return (
+    <ModalContainerFullScreen>
+      <ModalHeaderComponent
+        handleCloseModal={handleCloseModal}
+        headerTitle={'Settings'}
+      />
+      <CenterContainer>
+        <BorderedContainer
+          style={{
+            padding: 16,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 8,
+          }}
+        >
+          {options.map((option: { value: string; key: string }, index) => (
+            <>
+              <Button
+                variant="default"
+                style={{
+                  minHeight: 40,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 2,
+                  width: '100%',
+                  justifyContent: 'center',
+                  borderRadius: 0,
+                  alignItems: 'flex-start',
+                }}
+                onPress={() => handleClick(option.key)}
+              >
+                <Label style={{ textAlign: 'center' }}>{option.value}</Label>
+                {[2, 3, 4].includes(index) && <LabelData>0</LabelData>}
+              </Button>
+              {index < 5 && <Viewider />}
+            </>
+          ))}
+        </BorderedContainer>
+      </CenterContainer>
+    </ModalContainerFullScreen>
+  );
+};
+
+export default UserSettingsModal;

package/src/components/Modals/styledModalComponents.tsx

@@ -0,0 +1,181 @@
+/** @format */
+
+import styled from 'styled-components/native';
+import Button from '../styled/Button';
+
+export const ModalBackground = styled.View`
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+`;
+
+export const CloseButton = styled.TouchableOpacity`
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: #888;
+
+  &:hover {
+    color: #555;
+    background-color: #dddddd;
+  }
+`;
+
+export const ModalContainer = styled.View`
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: white;
+  padding: 32px 64px;
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const ModalTitle = styled.Text`
+  font-size: 20px;
+  margin: 0;
+  font-weight: 400;
+`;
+
+export const ModalDescription = styled.Text`
+  font-size: 14px;
+  margin: 0;
+  font-weight: 400;
+`;
+
+export const GroupContainer = styled.View`
+  display: flex;
+  gap: 32px;
+  width: 100%;
+  padding: 0;
+`;
+
+export const ModalContainerFullScreen = styled.View`
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+  overflow-y: auto;
+`;
+
+export const HeaderContainer = styled.View`
+  position: relative;
+  top: 0;
+  width: 100%;
+  padding: 2px 8px;
+  padding-top: 62px;
+  max-height: 24px;
+  min-height: 24px;
+  background-color: #fff;
+  border-bottom-width: 1px;
+  border-bottom-color: #f0f0f0;
+  z-index: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const HeaderLeft = styled.View`
+  flex-direction: row;
+  align-items: center;
+  gap: 16px;
+`;
+
+export const HeaderRight = styled.View`
+  flex-direction: row;
+  align-items: center;
+  gap: 16px;
+`;
+
+export const CenterContainer = styled(GroupContainer)`
+  width: 100%;
+  padding: 16px;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const ProfileImage = styled.View`
+  width: 120px;
+  height: 120px;
+  border-radius: 10000px;
+  border: 1px solid #f0f0f0;
+`;
+
+export const UserInfo = styled.View`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const UserName = styled.Text`
+  color: #141414;
+  font-size: 24px;
+  font-weight: 400;
+`;
+
+export const UserStatus = styled.Text`
+  color: #8c8c8c;
+  font-size: 16px;
+  font-weight: 400;
+`;
+
+export const BorderedContainer = styled.View`
+  width: 100%;
+  border-radius: 8px;
+  border: 1px solid #f0f0f0;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+`;
+
+export const LabelData = styled.Text`
+  color: #8c8c8c;
+  font-size: 14px;
+  font-weight: 400;
+`;
+
+export const Label = styled.Text`
+  color: #141414;
+  font-size: 16px;
+`;
+
+export const ActionButton = styled(Button)`
+  width: 100%;
+`;
+
+export const EmptySection = styled.View`
+  height: 200px;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  width: 100%;
+  display: flex;
+`;
+
+export const Viewider = styled.View`
+  height: 1px;
+  width: 100%;
+  background-color: #0052cd0d;
+`;
+
+export const Divider = styled.View`
+  height: 1px;
+  width: 100%;
+  background-color: #0052cd0d;
+`;