@ethora/chat-component-rn 26.4.1

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

@@ -0,0 +1,90 @@
+import React from 'react';
+
+import {
+  ModalContainerFullScreen,
+  Viewider,
+  Label,
+  LabelData,
+  BorderedContainer,
+  CenterContainer,
+} from '../../styledModalComponents';
+import ModalHeaderComponent from '../../ModalHeaderComponent';
+import Button from '../../../styled/Button';
+import { ReferalsIcon, SendCoinIcon } from '../../../../assets/icons';
+import {
+  RowWrapper,
+  SharedSettingsColumnContainer,
+  SharedSettingsStyledLabel,
+} from '../SharedStyledComponents';
+import InputWithLabel from '../../../styled/StyledInput';
+import { StyledInput } from '../../../styled/StyledInputComponents/StyledInputComponents';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../../../roomStore';
+import { View, Text } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+interface ReferralsModalProps {
+  handleCloseModal: any;
+}
+
+const ReferralsModal: React.FC<ReferralsModalProps> = ({
+  handleCloseModal,
+}) => {
+  const { config } = useSelector((state: RootState) => state.chatSettingStore);
+
+  return (
+    <ModalContainerFullScreen>
+      <ModalHeaderComponent
+        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>.</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 || ''}
+            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}
+            placeholder="Your referral code"
+            // label={'About'}
+            // value={message}
+            // onChange={handleInputChange}
+            // onKeyDown={handleKeyDown}
+            // onFocus={handleFocus}
+            // onBlur={handleBlur}
+            // disabled={isLoading}
+          />
+        </SharedSettingsColumnContainer>
+      </CenterContainer>
+    </ModalContainerFullScreen>
+  );
+};
+
+export default ReferralsModal;

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

@@ -0,0 +1,74 @@
+import styled from 'styled-components/native';
+import {CenterContainer, Label} from '../styledModalComponents';
+import Button from '../../styled/Button';
+
+export const SharedSettingsCenterContainer = styled(CenterContainer)`
+  display: flex;
+  box-sizing: border-box;
+  align-items: flex-start;
+  gap: 32px;
+`;
+
+export const SharedSettingsColumnContainer = styled.View`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+`;
+
+export const SharedSettingsSectionContainer = styled.View`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+export const SharedSettingsStyledLabel = styled(Label)`
+  font-weight: 600;
+  text-align: start;
+  flex-wrap: wrap;
+  display: flex;
+  align-items: center;
+`;
+
+export const RowWrapper = styled.View`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+`;
+
+export const SharedSettingsLabelData = styled(Label)`
+  font-size: 12px;
+  text-align: start;
+  color: #8c8c8c;
+`;
+
+export const SharedSettingsStyledButton = styled(Button)<{
+  borderColor: string;
+}>`
+  min-height: 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  padding: 8px;
+  border: 1px solid ${({borderColor}) => borderColor};
+`;
+
+export const SharedSettingsInfoPanel = styled.View<{bgColor: string | undefined}>`
+  display: flex;
+  align-items: flex-start;
+  background-color: ${({bgColor}) => bgColor};
+  padding: 16px;
+  border-radius: 8px;
+  gap: 8px;
+`;
+
+export const SharedSettingsInfoText = styled.Text`
+  font-size: 12px;
+  color: #141414;
+  display: flex;
+  text-align: start;
+`;

package/src/components/Modals/SettingsModals/Visibility/RadioInput.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+
+interface RadioInputProps {
+  option: { label: string; value?: boolean };
+  checked: boolean;
+  onChange: (value?: boolean) => void;
+  radioColor?: string;
+}
+
+export const RadioInput: React.FC<RadioInputProps> = ({
+  option,
+  checked,
+  onChange,
+  radioColor = '#0052CD',
+}) => {
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        key={option.label}
+        style={styles.radioContainer}
+        onPress={() => onChange(option.value)}
+      >
+        <View
+          style={[
+            styles.radioCircle,
+            {
+              borderColor: radioColor,
+              backgroundColor: checked ? radioColor : 'transparent',
+            },
+          ]}
+        />
+        <Text style={styles.radioLabel}>{option.label}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+  },
+  radioContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  radioCircle: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 2,
+    marginRight: 10,
+  },
+  radioLabel: {
+    fontSize: 16,
+    color: '#333',
+  },
+});

package/src/components/Modals/SettingsModals/Visibility/StyledComponents.ts

@@ -0,0 +1,32 @@
+import styled from 'styled-components/native';
+
+export const Container = styled.View``;
+
+export const Title = styled.View`
+  font-size: 16px;
+  font-weight: bold;
+`;
+
+export const Description = styled.View`
+  font-size: 14px;
+  color: #6b7280;
+  margin-bottom: 32px;
+`;
+
+export const RadioGroup = styled.View`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+
+export const RadioLabel = styled.View`
+  display: flex;
+  align-items: start;
+  font-size: 14px;
+  gap: 8px;
+`;
+
+// export const RadioInput = styled.input<{radioColor?: string}>`
+//   accent-color: ${({radioColor}) => radioColor || '#0052CD'};
+//   margin: 0px;
+// `;

package/src/components/Modals/SettingsModals/Visibility/VisibilityModal.tsx

@@ -0,0 +1,146 @@
+import { useEffect, useState } from 'react';
+import { RadioGroup, RadioLabel } from './StyledComponents';
+import ModalHeaderComponent from '../../ModalHeaderComponent';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../../../roomStore';
+import { setUser } from '../../../../roomStore/chatSettingsSlice';
+import { Notification } from '../../../Toast';
+import { updateMe } from '../../../../networking/api-requests/user.api';
+import { User } from '../../../../types/types';
+import { ModalContainerFullScreen } from '../../styledModalComponents';
+import {
+  SharedSettingsCenterContainer,
+  SharedSettingsColumnContainer,
+  SharedSettingsLabelData,
+  SharedSettingsStyledLabel,
+} from '../SharedStyledComponents';
+import { RadioInput } from './RadioInput';
+
+interface VisibilityModalProps {
+  handleCloseModal: any;
+}
+
+const VisibilityModal: React.FC<VisibilityModalProps> = ({
+  handleCloseModal,
+}) => {
+  const dispatch = useDispatch();
+  const { user, config } = useSelector(
+    (state: RootState) => state.chatSettingStore
+  );
+
+  const doUpdateUser = (user: User) => dispatch(setUser(user));
+  const [isProfileOpen, setIsProfileOpen] = useState(user?.isProfileOpen);
+  const [isAssetsOpen, setIsAssetsOpen] = useState(user?.isAssetsOpen);
+  const [notification, setNotification] = useState<{
+    message: string;
+    type: 'success' | 'error';
+  } | null>(null);
+
+  const showNotification = (message: string, type: 'success' | 'error') => {
+    setNotification({ message, type });
+    setTimeout(() => setNotification(null), 3000);
+  };
+
+  useEffect(() => {
+    if (isProfileOpen !== user.isProfileOpen) {
+      updateMe({ isProfileOpen })
+        .then(({ data }) => {
+          doUpdateUser(data.user);
+          showNotification('Saved', 'success');
+        })
+        .catch(() => showNotification('Error', 'error'));
+    }
+  }, [isProfileOpen]);
+
+  useEffect(() => {
+    if (isAssetsOpen !== user?.isAssetsOpen) {
+      updateMe({ isAssetsOpen })
+        .then(({ data }) => {
+          doUpdateUser(data.user);
+          showNotification('Saved', 'success');
+        })
+        .catch(() => showNotification('Error', 'error'));
+    }
+  }, [isAssetsOpen]);
+
+  return (
+    <ModalContainerFullScreen>
+      <ModalHeaderComponent
+        handleCloseModal={handleCloseModal}
+        headerTitle={'Visibility'}
+      />
+      <SharedSettingsCenterContainer>
+        <SharedSettingsColumnContainer>
+          <SharedSettingsStyledLabel>
+            Profile Visiblility
+          </SharedSettingsStyledLabel>
+          <RadioGroup>
+            <RadioLabel>
+              <RadioInput
+                option={{ label: 'Open (default)', value: isProfileOpen }}
+                radioColor={config?.colors?.primary}
+                checked={isProfileOpen === true}
+                onChange={() => setIsProfileOpen(true)}
+              />
+            </RadioLabel>
+
+            <SharedSettingsLabelData>
+              Your profile can be viewed by anyone who follows your profile link
+              or QR code.
+            </SharedSettingsLabelData>
+            <RadioLabel>
+              <RadioInput
+                option={{ label: 'Restricted', value: isProfileOpen }}
+                radioColor={config?.colors?.primary}
+                checked={isProfileOpen === false}
+                onChange={() => setIsProfileOpen(false)}
+              />
+            </RadioLabel>
+            <SharedSettingsLabelData>
+              Only users with your permission or temporary secure link can see
+              your profile.
+            </SharedSettingsLabelData>
+          </RadioGroup>
+        </SharedSettingsColumnContainer>
+        <SharedSettingsColumnContainer>
+          <SharedSettingsStyledLabel>
+            Documents Visibility
+          </SharedSettingsStyledLabel>
+          <RadioGroup>
+            <RadioLabel>
+              <RadioInput
+                option={{ label: 'Full (default)', value: isAssetsOpen }}
+                radioColor={config?.colors?.primary}
+                checked={isAssetsOpen === true}
+                onChange={() => setIsAssetsOpen(true)}
+              />
+            </RadioLabel>
+            <SharedSettingsLabelData>
+              Show all Documents to those who can see your profile.
+            </SharedSettingsLabelData>
+            <RadioLabel>
+              <RadioInput
+                option={{ label: 'InViewidual', value: isAssetsOpen }}
+                radioColor={config?.colors?.primary}
+                checked={isAssetsOpen === false}
+                onChange={() => setIsAssetsOpen(false)}
+              />
+            </RadioLabel>
+            <SharedSettingsLabelData>
+              You need to share each document inViewidually before others can
+              see them.
+            </SharedSettingsLabelData>
+          </RadioGroup>
+        </SharedSettingsColumnContainer>
+      </SharedSettingsCenterContainer>
+
+      {notification && (
+        <Notification type={notification.type}>
+          {notification.message}
+        </Notification>
+      )}
+    </ModalContainerFullScreen>
+  );
+};
+
+export default VisibilityModal;

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

@@ -0,0 +1,163 @@
+import React, { useState } from 'react';
+import { ProfileImagePlaceholder } from '../../MainComponents/ProfileImagePlaceholder';
+import Button from '../../styled/Button';
+import InputWithLabel from '../../styled/StyledInput';
+import ModalHeaderComponent from '../ModalHeaderComponent';
+import { CenterContainer } from '../styledModalComponents';
+import { updateProfile } from '../../../networking/api-requests/user.api';
+import { useDispatch } from 'react-redux';
+import { updateUser } from '../../../roomStore/chatSettingsSlice';
+import { View } from 'react-native';
+import { AddPhotoIcon } from '../../../assets/icons';
+// import { actionUpdateUser } from '../actions';
+
+const base64ToFile = (base64String: string, fileName: string) => {
+  const byteString = atob(base64String.split(',')[1]);
+  const arrayBuffer = new ArrayBuffer(byteString.length);
+  const uintArray = new Uint8Array(arrayBuffer);
+  for (let i = 0; i < byteString.length; i++) {
+    uintArray[i] = byteString.charCodeAt(i);
+  }
+  const blob = new Blob([uintArray], { type: 'image/jpeg' });
+  return new File([blob], fileName, {
+    type: 'image/jpeg',
+    lastModified: Date.now(),
+  });
+};
+
+interface EditUserModalProps {
+  setIsEditing: React.Dispatch<React.SetStateAction<boolean>>;
+  modalUser: any;
+  config: any;
+}
+
+const EditUserModal: React.FC<EditUserModalProps> = ({
+  setIsEditing,
+  modalUser,
+  config,
+}) => {
+  const dispatch = useDispatch();
+
+  const [firstName, setFirstName] = useState(modalUser?.firstName || '');
+  const [lastName, setLastName] = useState(modalUser?.lastName || '');
+  const [description, setDescription] = useState(modalUser?.description || '');
+  const [profileImage, setProfileImage] = useState<string | File>(
+    modalUser?.profileImage
+  );
+
+  const onSave = async () => {
+    try {
+      let fd = new FormData();
+
+      if (
+        typeof profileImage === 'string' &&
+        profileImage.startsWith('data:image/')
+      ) {
+        const file = base64ToFile(profileImage, 'profileImage.jpg');
+        fd.append('file', file);
+      } else if (profileImage instanceof File) {
+        fd.append('file', profileImage);
+      }
+
+      fd.append('firstName', firstName);
+      fd.append('lastName', lastName);
+      fd.append('description', description);
+
+      const { user } = await updateProfile(fd);
+
+      dispatch(
+        updateUser({
+          updates: {
+            firstName,
+            lastName,
+            description,
+            profileImage: user?.profileImage,
+          },
+        })
+      );
+
+      setIsEditing(false);
+    } catch (error) {
+      console.log('error', error);
+    }
+  };
+
+  const handleProfileImageChange = (image: File) => {
+    setProfileImage(image);
+  };
+
+  return (
+    <>
+      <ModalHeaderComponent
+        // leftMenu={
+        //   <Button
+        //     onPress={() => setIsEditing(false)}
+        //     style={{
+        //       paddingVertical: 13,
+        //       paddingHorizontal: 8,
+        //       width: "100%",
+        //     }}
+        //     color="#00"
+        //   >
+        //     Cancel
+        //   </Button>
+        // }
+        handleCloseModal={() => setIsEditing(false)}
+        rightMenu={
+          <Button
+            onPress={onSave}
+            variant="outlined"
+            style={{ width: 128 }}
+            color="#0052CD"
+            text="Save"
+          />
+        }
+      />
+      <CenterContainer>
+        <ProfileImagePlaceholder
+          icon={profileImage}
+          name={`${firstName} ${lastName}`}
+          size={120}
+          upload={{
+            onUpload: handleProfileImageChange,
+            active: true,
+          }}
+        />
+      </CenterContainer>
+      <View
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 32,
+          width: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <InputWithLabel
+          color={config?.colors?.primary}
+          placeholder="First Name"
+          label="First Name"
+          value={firstName}
+          onChangeText={(text: string) => setFirstName(text)}
+        />
+        <InputWithLabel
+          color={config?.colors?.primary}
+          placeholder="Last Name"
+          label="Last Name"
+          value={lastName}
+          onChangeText={(text: string) => setLastName(text)}
+        />
+        <InputWithLabel
+          color={config?.colors?.primary}
+          placeholder="About"
+          label="About"
+          value={description}
+          onChangeText={(text: string) => setDescription(text)}
+        />
+      </View>
+    </>
+  );
+};
+
+export default EditUserModal;