isometrik-chat 0.1.0

package/src/components/Modal/DeleteChatModal.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { mobile } from '../../utils/media';
+
+const ModalContainer = styled.div`
+    background-color: var(--modal_color);
+    color: var(--black);
+    position: absolute;
+    width: 32rem;
+    top: 50%;
+    left: 50%;
+    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
+    -webkit-transform: translate(-50%,-50%);
+    -ms-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    padding: 20px 24px 6px 22px;
+    ${mobile(css`
+        max-width: 320px;
+    `)}
+`;
+
+const ModalTitle = styled.h5`
+    margin-top: 20px;
+    ${mobile(css`
+    font-size: 18px;
+`)}
+`;
+
+const ModalDescription = styled.p`
+    font-size: 18px;
+    ${mobile(css`
+    font-size: 14px;
+`)}
+`;
+
+
+const ButtonAction = styled.div`
+display:flex;
+justify-content: flex-end;
+margin:3rem 0 20px;
+
+${mobile(css`
+    margin:1.5rem 0 20px;
+`)}
+
+.cancleBtn{
+    background:var(--white);
+    color:var(--button-primary-background);
+    border:1px solid var(--border_color);}
+
+.logoutBtn{
+    background-color:var(--button-primary-background);
+    color:var(--white);
+}  
+`;
+
+const Button = styled.button`
+    margin-left:15px;
+    border-radius:20px;
+    border:none;
+    padding:5px 20px 5px 20px;
+`;
+
+const DeleteChatModal = (props) => {
+    const {  cancelButtonClick, confirmButtonClick} = props;
+    return (
+        <ModalContainer>
+            <ModalTitle>{'Delete this chat?'}</ModalTitle>
+            <ModalDescription>{ 'Messages will only be removed from this device and your devices on the newer versions of Isometrik.'}</ModalDescription>
+            <ButtonAction className="logoutActionbtn">
+                <Button className="cancleBtn" onClick={cancelButtonClick} >Cancel</Button>
+                <Button className="logoutBtn" onClick={confirmButtonClick} >{"Delete chat"}</Button>
+            </ButtonAction>
+        </ModalContainer>
+
+    )
+}
+
+export default DeleteChatModal;

package/src/components/Modal/MicPermissionDisableModal.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { mobile } from '../../utils/media';
+
+const ModalContainer = styled.div`
+    background-color: var(--modal_color);
+    color: var(--black);
+    position: absolute;
+    width: 32rem;
+    top: 50%;
+    left: 50%;
+    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
+    -webkit-transform: translate(-50%,-50%);
+    -ms-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    padding: 2rem 1.5rem;
+    z-index: 999;
+    display: flex;
+    flex-direction: column;
+    ${mobile(css`
+        max-width: 320px;
+    `)}
+`;
+
+const ModalTitle = styled.h5`
+    margin-top: 20px;
+    text-transform:capitalize;
+    ${mobile(css`
+    font-size: 18px;
+`)}
+`;
+
+const ModalDescription = styled.p`
+    font-size: 15px;
+    margin-top: 1rem;
+    ${mobile(css`
+    font-size: 14px;
+`)}
+`;
+
+const ConfirmButton = styled.button`
+    margin-left:auto;
+    margin-top: 3rem;
+    border-radius:20px;
+    border:none;
+    padding:5px 20px;
+    background-color:var(--button-primary-background);
+    color:var(--white);
+`;
+
+const MicPermissionDisableModal = (props) => {
+  const { onClose } = props;
+
+  return (
+    <ModalContainer>
+      <ModalTitle>{'Allow microphone'}</ModalTitle>
+      <ModalDescription>{`To record Voice Messages, Isometrik needs access to your microphone. Click Mic icon in the URL bar and choose "Always allow chat.isometrik.io to access your microphone."`}</ModalDescription>
+      <ConfirmButton onClick={onClose}>{'OK, got it!'}</ConfirmButton>
+    </ModalContainer>
+  )
+}
+
+export default MicPermissionDisableModal;

package/src/components/Modal/Modal.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import OutsideAlerter from '../OutsideAlerter/OutsideAlerter';
+import { mobile } from '../../utils/media';
+const ModalWrapper = styled.div`
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    background-color:  var(--modal-backdrop);
+    position: absolute;
+    border: none;
+    z-index: 999;
+    visibility: hidden;
+    cursor: default;
+    ${(props) =>
+        props.isActive &&
+        css`
+          opacity: 1;
+          visibility: visible;
+          transform: translateY(0);
+        `}
+`;
+
+const ModalContainer = styled.div`
+    background-color: var(--modal_color);
+    color: var(--black);
+    position: absolute;
+    width: 32rem;
+    top: 50%;
+    left: 50%;
+    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
+    -webkit-transform: translate(-50%,-50%);
+    -ms-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    padding: 20px 24px 6px 22px;
+    ${mobile(css`
+        max-width: 320px;
+    `)}
+`;
+
+const ModalTitle = styled.h5`
+    margin-top: 20px;
+    ${mobile(css`
+    font-size: 18px;
+`)}
+`;
+
+const ModalDescription = styled.p`
+    font-size: 18px;
+    ${mobile(css`
+    font-size: 14px;
+`)}
+`;
+
+
+const ButtonAction = styled.div`
+display:flex;
+justify-content: flex-end;
+margin:3rem 0 20px;
+
+${mobile(css`
+    margin:1.5rem 0 20px;
+`)}
+
+.cancleBtn{
+    background:var(--white);
+    color:var(--button-primary-background);
+    border:1px solid var(--border_color);}
+
+.logoutBtn{
+    background-color:var(--button-primary-background);
+    color:var(--white);
+}  
+`;
+
+const Button = styled.button`
+    margin-left:15px;
+    border-radius:20px;
+    border:none;
+    padding:5px 20px 5px 20px;
+`;
+
+const Modal = (props) => {
+    const { title, description, buttonText, isActive, cancelButtonClick, confirmButtonClick} = props;
+    return (
+        <ModalWrapper isActive={isActive}>
+            <OutsideAlerter onClose={cancelButtonClick}>
+                <ModalContainer>
+                    <ModalTitle>{title || 'Clear Chat'}</ModalTitle>
+                    <ModalDescription>{description || 'Are you sure you want to clear this chat!'}</ModalDescription>
+                    <ButtonAction className="logoutActionbtn">
+                        <Button className="cancleBtn" onClick={cancelButtonClick} >Cancel</Button>
+                        <Button className="logoutBtn" onClick={confirmButtonClick} >{buttonText}</Button>
+                    </ButtonAction>
+                </ModalContainer>
+            </OutsideAlerter>
+        </ModalWrapper>
+
+    )
+}
+
+export default Modal;

package/src/components/Modal/ModalDialog.js

@@ -0,0 +1,103 @@
+import React from 'react'
+import styled, { css } from 'styled-components';
+import { mobile } from '../../utils/media';
+
+const ModalContainer = styled.div`
+    background-color: var(--modal_color);
+    color: var(--black);
+    position: absolute;
+    width: 32rem;
+    top: 50%;
+    left: 50%;
+    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
+    -webkit-transform: translate(-50%,-50%);
+    -ms-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    padding: 20px 24px 6px 22px;
+    ${mobile(css`
+        max-width: 320px;
+    `)}
+`;
+
+const ModalTitle = styled.h5`
+    margin-top: 20px;
+    text-transform:capitalize;
+    ${mobile(css`
+    font-size: 18px;
+`)}
+`;
+
+const ModalDescription = styled.p`
+    font-size: 18px;
+    ${mobile(css`
+    font-size: 14px;
+`)}
+`;
+
+
+const ButtonAction = styled.div`
+display:flex;
+justify-content: flex-end;
+margin:3rem 0 20px;
+${(props) =>
+    props.DeleteModal &&
+    css`
+    flex-direction:column !important;
+     `}
+
+
+${mobile(css`
+    margin:1.5rem 0 20px;
+`)}
+
+.cancleBtn{
+    background:var(--white);
+    color:var(--button-primary-background);
+    border:1px solid var(--border_color);
+    ${(props) =>
+        props.DeleteModal &&
+        css`
+        width: fit-content !important;
+        margin: 0.5rem 0 !important;
+        margin-left: auto !important;
+        background:var(--white) !important;
+        color:var(--button-primary-background) !important;
+        border:1px solid var(--border_color)} !important;
+         `}
+
+}
+
+.logoutBtn{
+    background-color:var(--button-primary-background);
+    color:var(--white);
+}  
+`;
+
+const Button = styled.button`
+    margin-left:15px;
+    border-radius:20px;
+    border:none;
+    padding:5px 20px 5px 20px;
+`;
+function ModalDialog({userData,handleOnCloseModal,handleUnblockUser, DeleteModal,deleteMesageHandler, isSelfMessage}) {
+  return (
+    <ModalContainer>
+    <ModalTitle> {DeleteModal ? "delete Message ? " :`unblock ${userData?.userName} ?`} </ModalTitle>
+    <ModalDescription> {DeleteModal ? "" : `Are you sure you want to unblock ${userData?.userName}`} </ModalDescription>
+    <ButtonAction className="logoutActionbtn" DeleteModal={DeleteModal} >
+        {
+            !DeleteModal && 
+            <Button className="cancleBtn"   onClick={handleUnblockUser}> {"unblock"}</Button>
+        }
+
+        {
+            DeleteModal && isSelfMessage && <Button DeleteModal={DeleteModal} className="cancleBtn" onClick={handleUnblockUser}>{'Delete for everyone'}</Button>
+        }
+      {DeleteModal &&  <Button className={DeleteModal ? "cancleBtn" :""} onClick={deleteMesageHandler} > {DeleteModal && "Delete for me"}</Button> }
+        <Button className={DeleteModal ? "cancleBtn" :"logoutBtn"}  onClick={handleOnCloseModal} > Cancel</Button>
+    </ButtonAction>
+</ModalContainer>
+  )
+}
+
+export default ModalDialog

package/src/components/Modal/ProfilePictureUploadPreview.js

@@ -0,0 +1,160 @@
+import React, { useState } from 'react';
+import styled, { css } from 'styled-components';
+import { mobile } from '../../utils/media';
+import ImageComponent from '../ImageComponent';
+import { CAMERA_RETAKE, CLOSE_ICON, CORRECT_ICON } from '../../utils/global';
+import ImageCropper from '../../view/component/ImageCropper/ImageCropper';
+import { checkFileSize, checkLetterUppercase, dataURLtoFile, getMediaUrl, uploadPicturePresignedURl } from '../../lib/helpers';
+
+const ProfilePictureUploadPreviewWrapper = styled.div`
+    background-color: var(--modal_color);
+    color: var(--black);
+    position: absolute;
+    max-width: 500px;
+    max-height: 500px;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%,-50%);
+    -ms-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    padding: ${props => props.isPadding ? '0 2rem' : 'unset'};
+    padding-bottom: 3rem;
+    visibility: hidden;
+    ${(props) =>
+        props.isActive &&
+        css`
+        visibility: visible;
+        opacity: 1;
+    `}
+    ${mobile(css`
+        width: 100%;
+        height: 80%;
+    `)}
+
+    .cross_icon{
+        width: 24px;
+        height: 24px;
+    }
+`;
+
+const ProfilePictureUploadHeader = styled.div`
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem 2rem;
+    ${mobile(css`
+        padding: 1rem;
+    `)}
+    .header_wrapper{
+        display: flex;
+    }
+`;
+
+const ProfilePictureUploadHeaderText = styled.p`
+    margin-bottom: 0;
+    color: var(--black);
+    margin-left: 1rem;
+    padding-top:${props => props.isPaddingTop ? '2rem' : 'unset'};
+`;
+
+const ClickedImageWrapper = styled.div`
+    position: relative;
+    ${mobile(css`
+        height: 100%;
+        display: flex;
+        align-items: center;
+    `)}
+`;
+
+const CorrectIconWrapper = styled.div`
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background-color: var(--profile-name);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    right: 50px;
+    bottom: -30px;
+
+    img{
+        width: 30px;
+        height: 30px;
+    }
+`;
+
+const ProfilePictureUploadPreview = (props) => {
+    const { isActive, imageUrl, updateProfileImageRequest, setToastStatus, updateUserDetails, onClose, uploadFileRef } = props;
+    const [croppedImg, setCroppedImg] = useState("");
+
+    const submitHandler = async () => {
+        try {
+            const file = dataURLtoFile(croppedImg, 'myimage.png');
+            const { valid, error } = checkFileSize(file);
+            const isValidUsername = checkLetterUppercase(updateUserDetails?.userName);
+            if (valid && isValidUsername) {
+                const response = await uploadPicturePresignedURl(file.type);
+                if (response?.presignedUrl) {
+                    onClose();
+                    const uploadImage = await getMediaUrl(response?.presignedUrl, file, file.type);
+                    updateProfileImageRequest(response?.mediaUrl);
+                }
+            } else {
+                if (isValidUsername) {
+                    setToastStatus({ open: true, message: error, variant: 'error' });
+                }
+            }
+        } catch (error) {
+            console.error('error', error);
+        }
+    }
+
+    const retakeActionClick  = () => {
+        uploadFileRef.current.value = null; 
+        uploadFileRef.current.click();
+    } 
+
+    return (
+        <ProfilePictureUploadPreviewWrapper isActive={isActive}>
+            <ProfilePictureUploadHeader>
+                <div className='header_wrapper'>
+                    <ImageComponent
+                        id="takePhotoModal"
+                        onClick={onClose}
+                        src={CLOSE_ICON}
+                        className={`${props?.theme ? "darkicons" : "lighticons"} cross_icon`}
+                    />
+                    <ProfilePictureUploadHeaderText>{'Drag the image to adjust'}</ProfilePictureUploadHeaderText>
+                </div>
+                {
+                    imageUrl?.length > 0 &&
+                    <div onClick={() => retakeActionClick()} className='header_wrapper pointer'>
+                        <ImageComponent
+                            src={CAMERA_RETAKE}
+                            className={`${props?.theme ? "darkicons" : "lighticons"} cross_icon`}
+                        />
+                        <ProfilePictureUploadHeaderText>{'Upload'}</ProfilePictureUploadHeaderText>
+                    </div>
+                }
+            </ProfilePictureUploadHeader>
+            <>
+                {
+                    imageUrl?.length > 0 &&
+                    <>
+                        <ClickedImageWrapper >
+                            <ImageCropper setCroppedImg={setCroppedImg} imageUrl={imageUrl} />
+                            <CorrectIconWrapper>
+                                <ImageComponent onClick={submitHandler} className={`darkicons`} src={CORRECT_ICON} alt={"correct_icon"} />
+                            </CorrectIconWrapper>
+                        </ClickedImageWrapper>
+
+                    </>
+                }
+            </>
+
+        </ProfilePictureUploadPreviewWrapper>
+    )
+}
+
+export default ProfilePictureUploadPreview;

package/src/components/OutsideAlerter/OutsideAlerter.js

@@ -0,0 +1,38 @@
+import React, { useRef, useEffect } from "react";
+import PropTypes from "prop-types";
+
+function useOutsideAlerter(ref, props) {
+  /**
+   * Alert if clicked on outside of element
+   */
+  function handleClickOutside(event) {
+    if (ref.current && !ref.current.contains(event.target)) {
+      props.onClose();
+    }
+  }
+
+  useEffect(() => {
+    // Bind the event listener
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  },[]);
+}
+
+/**
+ * Component that alerts if you click outside of it
+ */
+function OutsideAlerter(props) {
+  const wrapperRef = useRef(null);
+  useOutsideAlerter(wrapperRef, props);
+
+  return <div ref={wrapperRef}>{props.children}</div>;
+}
+
+OutsideAlerter.propTypes = {
+  children: PropTypes.element.isRequired,
+};
+
+export default OutsideAlerter;

package/src/components/ProfilePicture/ProfilePicture.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import ImageComponent from '../ImageComponent';
+import { BACKICON, CLOSE_ICON } from '../../utils/global';
+import OutsideAlerter from '../OutsideAlerter/OutsideAlerter';
+import { mobile } from '../../utils/media';
+
+
+const ProfilePictureViewContainer = styled.div`
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    background: var(--primary-white);
+    padding: 1rem 3rem;
+    display: flex;
+    flex-direction: column;
+    z-index: 999;
+    ${mobile(css`
+        padding: 1rem 0;
+    `)}
+    .user_profile_picture_major{
+        width: 512px;
+        height: 512px;
+        margin: auto;
+        object-fit: cover;
+        ${mobile(css`
+            width: 100%;
+            height: 100%;
+            max-height: 400px;
+            aspect-ratio: 1/1;
+        `)}
+    }
+`;
+
+const ProfilePictureHeaderView = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    ${mobile(css`
+            padding-left: 2rem;
+    `)}
+
+    .cross_icon{
+        height: 24px;
+        width: 24px;
+        cursor: pointer;
+        ${mobile(css`
+            display: none;
+        `)}
+    }
+    .dark__theme{
+        filter: invert(1);
+    }
+`;
+
+const ProfilePictureNameContainer = styled.div`
+    display: flex;
+    align-items: center;
+
+    .user_profile_picture{
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        object-fit: cover;
+        ${mobile(css`
+            display: none;
+        `)}
+    }
+
+    .back_icon{
+        display: none;
+        ${mobile(css`
+            height: 16px;
+            width: 20px;
+            cursor: pointer;
+            display: block;
+            margin-right: 1rem;
+        `)}
+    }
+`;
+
+const UserProfileName = styled.p`
+    margin-bottom: 0;
+    color: var(--black);
+    margin-left: 1rem;
+`;
+
+const ProfileImageWrapper = styled.div`
+    max-width: 512px;
+    max-height: 512px;
+    margin: auto;
+`;
+
+const ProfilePicture = (props) => {
+    const { userName, userImageSrc, closeHandler, theme } = props;
+
+    return (
+        <ProfilePictureViewContainer>
+            <ProfilePictureHeaderView theme={theme}> 
+                <ProfilePictureNameContainer>
+                    <ImageComponent
+                        src={BACKICON}
+                        className={`${theme ? 'dark__theme' : ''} back_icon`}
+                        onClick={closeHandler}
+                    />
+                    <ImageComponent className="user_profile_picture" src={userImageSrc}  alt={'user_profile_picture'} />
+                    <UserProfileName>{userName}</UserProfileName>
+                </ProfilePictureNameContainer>
+                <ImageComponent
+                    onClick={closeHandler}
+                    src={CLOSE_ICON}
+                    className={`${theme ? 'dark__theme' : ''} cross_icon`}
+                />
+            </ProfilePictureHeaderView>
+            <ProfileImageWrapper>
+            <OutsideAlerter onClose={closeHandler}>
+                <ImageComponent className={'user_profile_picture_major'}  src={userImageSrc} alt={'user_profile_picture'} />
+            </OutsideAlerter>
+            </ProfileImageWrapper>
+            
+        </ProfilePictureViewContainer>
+    )
+}
+
+export default ProfilePicture;