@griddo/ax 10.2.25 → 10.3.0

package/src/components/FileGallery/index.tsx

@@ -0,0 +1,304 @@
+import React, { useEffect, useState, memo, useRef, useCallback, useLayoutEffect } from "react";
+import { connect } from "react-redux";
+
+import { IFile, IFilesFolder, IFolder, IFolderTree, IGetFolderParams, IRootState, ISite } from "@ax/types";
+import {
+  Loader,
+  Tabs,
+  SearchField,
+  EmptyState,
+  ErrorToast,
+  Notification,
+  Tooltip,
+  Icon,
+  BackFolder,
+} from "@ax/components";
+import { fileDriveActions } from "@ax/containers/FileDrive";
+import { usePermission } from "@ax/hooks";
+
+import GalleryPanel from "./GalleryPanel";
+import GridItem from "./GridItem";
+import FolderItem from "./FolderItem";
+
+import * as S from "./style";
+
+// refactor
+import Breadcrumb from "@ax/modules/FileDrive/Breadcrumb";
+import FolderTree from "@ax/modules/FileDrive/FolderTree";
+
+const FileGallery = (props: IProps): JSX.Element => {
+  const {
+    currentFolderContent,
+    site,
+    currentFolderID,
+    validFormats,
+    breadcrumb,
+    toggleModal,
+    getFolderContent,
+    getFoldersTree,
+    addFile,
+    updateCurrentFolder,
+  } = props;
+
+  const {
+    files: { items },
+    folders,
+  } = currentFolderContent || { files: { items: [] }, folders: [] };
+
+  const [selectedTab, setSelectedTab] = useState(site ? "local" : "global");
+  const [selectedFile, setSelectedFile] = useState<IFile | null>(null);
+  const [isPanelOpen, setPanelOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const isLocalTab = selectedTab === "local";
+  const isGlobalTab = selectedTab === "global";
+  const galleryScope = isLocalTab && site ? site.id : "global";
+  const hasFolders = !!folders.length;
+  const isRoot = !breadcrumb.length;
+
+  const galleryRef = useRef<HTMLDivElement>(null);
+
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const isSearching = searchQuery.length > 0;
+
+  const isSiteView = !!site;
+  const isTabGlobal = selectedTab === "global";
+  const siteID: number | "global" = !isSiteView || isTabGlobal ? "global" : site.id;
+
+  const allowedToAccessGlobalFromSite = usePermission("mediaGallery.accessToGlobalFileDriveFromSite");
+
+  const allowedToAddSiteFile = usePermission("mediaGallery.addFiles");
+  const allowedToAddGlobalFile = usePermission("global.mediaGallery.addGlobalFiles");
+  const allowedToAddGlobalFileFromSite = usePermission("mediaGallery.addGlobalFilesFromSite");
+  const allowedToAddFile = isTabGlobal
+    ? allowedToAddGlobalFileFromSite
+    : isSiteView
+    ? allowedToAddSiteFile
+    : allowedToAddGlobalFile;
+
+  const allowedToEditSiteFile = usePermission("mediaGallery.editFilesss");
+  const allowedToEditGlobalFile = usePermission("global.mediaGallery.editGlobalFiles");
+  const allowedToEditGlobalFileFromSite = usePermission("mediaGallery.editGlobalFilesInSite");
+  const allowedToEditFile = isTabGlobal
+    ? allowedToEditGlobalFileFromSite
+    : isSiteView
+    ? allowedToEditSiteFile
+    : allowedToEditGlobalFile;
+
+  const tabs: string[] = [];
+  if (isSiteView && allowedToAccessGlobalFromSite) {
+    tabs.unshift(...["local", "global"]);
+  }
+
+  const getParams = useCallback(() => {
+    const params = {
+      siteID,
+      folderID: currentFolderID,
+      search: searchQuery,
+      loading: false,
+    };
+
+    return params;
+  }, [currentFolderID, searchQuery, selectedTab]);
+
+  useLayoutEffect(() => {
+    return () => {
+      updateCurrentFolder(null);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleGetContent = async () => {
+      setIsLoading(true);
+      const params = getParams();
+      await getFolderContent(params);
+      setIsLoading(false);
+    };
+    handleGetContent();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getParams]);
+
+  useEffect(() => {
+    const handleGetTree = async () => await getFoldersTree(siteID);
+    handleGetTree();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedTab]);
+
+  const handleClick = (item: IFile) => {
+    if (item.id !== selectedFile?.id) {
+      setSelectedFile(item);
+    } else {
+      setSelectedFile(null);
+    }
+  };
+
+  const setFile = (fileData: any) => {
+    const updatedImage = { ...selectedFile, ...fileData };
+    addFile(updatedImage);
+    toggleModal();
+  };
+
+  const handleSelectedTab = (tab: string) => {
+    if (tab !== selectedTab) {
+      updateCurrentFolder(null);
+      setSelectedFile(null);
+      setSelectedTab(tab);
+    }
+  };
+
+  const togglePanel = () => setPanelOpen(!isPanelOpen);
+
+  const handleBackClick = () => {
+    const parentID = breadcrumb.length >= 2 ? breadcrumb[breadcrumb.length - 2].id : null;
+    updateCurrentFolder(parentID);
+  };
+
+  const handleUpload = async (file: IFile[]) => {
+    setSelectedFile(file[0]);
+    const params = getParams();
+    await getFolderContent(params);
+  };
+
+  const foldersIcon = isPanelOpen ? <Icon name="closePanel" size="24" /> : <Icon name="openPanel" size="24" />;
+
+  const emptySearchStateProps = {
+    icon: "search",
+    title: "Oh! No Results Found",
+    message: "We couldn’t find what you are looking for. Please, try another search.",
+  };
+
+  const emptyFolderStateProps = {
+    title: "Oh! This looks so empty",
+    message: "No documents found in this folder.",
+  };
+
+  return (
+    <S.Wrapper data-testid="file-gallery-wrapper">
+      <S.FolderPanel isOpen={isPanelOpen}>
+        <S.FolderPanelContent>
+          <FolderTree folderID={currentFolderID || 0} onClick={updateCurrentFolder} title="Folders" trimNames={true} />
+        </S.FolderPanelContent>
+      </S.FolderPanel>
+      <S.ContentWrapper>
+          {!!tabs.length && <S.Header>
+            {!!tabs.length && (
+              <S.TabsWrapper>
+                <Tabs tabs={tabs} active={selectedTab} setSelectedTab={handleSelectedTab} noMargins />
+              </S.TabsWrapper>
+            )}
+            <S.Filters></S.Filters>
+          </S.Header>}
+          <S.Search>
+            <SearchField onChange={setSearchQuery} placeholder="Type file’s name, title, or #tag" />
+          </S.Search>
+          <S.GalleryWrapper ref={galleryRef}>
+            {isGlobalTab && isSiteView && (
+              <S.NotificationWrapper>
+                <Notification
+                  type="info"
+                  text="This is a global Library. All the changes you make will be applied to all the sites."
+                />
+              </S.NotificationWrapper>
+            )}
+            <ErrorToast size="l" />
+            {isLoading ? (
+              <S.LoadingWrapper>
+                <Loader name="circle" />
+              </S.LoadingWrapper>
+            ) : (
+              <>
+                {!isRoot && !isSearching && <Breadcrumb breadcrumb={breadcrumb} onClick={updateCurrentFolder} />}
+                {(hasFolders || (!isRoot && !isSearching)) && (
+                  <S.SectionWrapper>
+                    <S.SectionHeader>
+                      <S.SectionTitle>
+                        <div>Folders</div>
+                        <S.FoldersIconWrapper onClick={togglePanel}>
+                          <Tooltip content="Open folder panel">{foldersIcon}</Tooltip>
+                        </S.FoldersIconWrapper>
+                      </S.SectionTitle>
+                    </S.SectionHeader>
+                    <S.FoldersWrapper>
+                      {!isRoot && !isSearching && <BackFolder onClick={handleBackClick} size="S" />}
+                      <S.FoldersGrid>
+                        {folders.map((folder: IFolder) => (
+                          <FolderItem folder={folder} onClick={updateCurrentFolder} key={folder.folderName} />
+                        ))}
+                      </S.FoldersGrid>
+                    </S.FoldersWrapper>
+                  </S.SectionWrapper>
+                )}
+                <S.SectionWrapper>
+                  <S.SectionHeader>
+                    <S.SectionTitle>Documents</S.SectionTitle>
+                  </S.SectionHeader>
+                  {!items.length ? (
+                    <S.EmptyWrapper>
+                      {isSearching ? (
+                        <EmptyState {...emptySearchStateProps} />
+                      ) : (
+                        <EmptyState {...emptyFolderStateProps} />
+                      )}
+                    </S.EmptyWrapper>
+                  ) : (
+                    <S.Grid>
+                      {items &&
+                        items.map((item: IFile) => {
+                          const isSelected = item.id === selectedFile?.id;
+                          return (
+                            <GridItem file={item} onClick={handleClick} key={item.fileName} isSelected={isSelected} />
+                          );
+                        })}
+                    </S.Grid>
+                  )}
+                </S.SectionWrapper>
+              </>
+            )}
+          </S.GalleryWrapper>
+      </S.ContentWrapper>
+      <GalleryPanel
+        selectedFile={selectedFile}
+        validFormats={validFormats}
+        setFile={setFile}
+        scope={galleryScope}
+        currentFolderID={currentFolderID}
+        handleUpload={handleUpload}
+        isAllowedToAdd={allowedToAddFile}
+        isAllowedToEdit={allowedToEditFile}
+      />
+    </S.Wrapper>
+  );
+};
+
+export interface IGalleryProps {
+  site: ISite | null;
+  currentFolderContent: IFilesFolder | null;
+  currentFolderID: number | null;
+  isLoading: boolean;
+  validFormats: string[];
+  breadcrumb: IFolderTree[];
+  toggleModal: () => void;
+  addFile: (file: IFile) => void;
+}
+
+const mapStateToProps = (state: IRootState) => ({
+  isLoading: state.app.isLoading,
+  currentFolderContent: state.fileDrive.currentFolderContent,
+  currentFolderID: state.fileDrive.currentFolderID,
+  breadcrumb: state.fileDrive.breadcrumb,
+});
+
+export interface IDispatchProps {
+  getFolderContent(params: IGetFolderParams): Promise<void>;
+  getFoldersTree(siteID: number | "global"): Promise<void>;
+  updateCurrentFolder(folderID: number | null): void;
+}
+
+const mapDispatchToProps = {
+  getFolderContent: fileDriveActions.getFolderContent,
+  getFoldersTree: fileDriveActions.getFoldersTree,
+  updateCurrentFolder: fileDriveActions.updateCurrentFolder,
+};
+
+type IProps = IGalleryProps & IDispatchProps;
+
+export default connect(mapStateToProps, mapDispatchToProps)(memo(FileGallery));

package/src/components/FileGallery/style.tsx

@@ -0,0 +1,173 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+`;
+
+const FolderPanel = styled.div<{ isOpen: boolean }>`
+  background-color: ${(p) => p.theme.color.uiBackground02};
+  border-right: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  width: ${(p) => (p.isOpen ? "192px" : "0")};
+  overflow: hidden;
+  transition: width 0.8s ease-out;
+  flex-shrink: 0;
+`;
+
+const FolderPanelContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${(p) => p.theme.spacing.m};
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`;
+
+const Header = styled.div`
+  width: 100%;
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+  border-right: 1px solid ${(p) => p.theme.color.uiLine};
+  padding: 0 ${(p) => p.theme.spacing.m};
+  background-color: ${(p) => p.theme.color.uiBackground02};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const Search = styled.div`
+  padding: ${(p) => p.theme.spacing.s} ${(p) => p.theme.spacing.m};
+  border-right: 1px solid ${(p) => p.theme.color.uiLine};
+  background-color: ${(p) => p.theme.color.uiBackground02};
+`;
+
+const Filters = styled.div`
+  display: flex;
+  height: ${(p) => p.theme.spacing.l};
+  align-items: center;
+
+  & > * {
+    &:not(:last-child) {
+      margin-right: ${(p) => p.theme.spacing.l};
+    }
+  }
+`;
+
+const TabsWrapper = styled.div`
+  width: ${(p) => `calc(${p.theme.spacing.xl} * 3)`};
+`;
+
+const GalleryWrapper = styled.div`
+  position: relative;
+  background-color: ${(p) => p.theme.color.uiBackground01};
+  overflow: auto;
+`;
+
+const Grid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
+  grid-template-rows: repeat(auto-fit, minmax(144px, 144px));
+  gap: ${(p) => p.theme.spacing.xxs};
+  width: 100%;
+  justify-content: start;
+`;
+
+const LoadingWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+`;
+
+const EmptyWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin: auto;
+  align-content: center;
+`;
+
+const NotificationWrapper = styled.div`
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+`;
+
+const SectionWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: ${(p) => p.theme.spacing.m};
+`;
+
+const SectionHeader = styled.div`
+  display: flex;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  align-items: center;
+  justify-content: flex-end;
+`;
+
+const SectionTitle = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  display: flex;
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  margin-right: auto;
+  font-weight: 600;
+`;
+
+const FoldersWrapper = styled.div`
+  width: 100%;
+  display: flex;
+`;
+
+const FoldersGrid = styled.div`
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
+  grid-template-rows: repeat(auto-fit, minmax(40px, 40px));
+  gap: ${(p) => p.theme.spacing.xxs};
+  justify-content: start;
+`;
+
+const FoldersIconWrapper = styled.div`
+  width: 24px;
+  height: 24px;
+  margin-left: ${(p) => p.theme.spacing.xs};
+  cursor: pointer;
+`;
+
+export {
+  Wrapper,
+  FolderPanel,
+  FolderPanelContent,
+  ContentWrapper,
+  Header,
+  Search,
+  Filters,
+  TabsWrapper,
+  GalleryWrapper,
+  Grid,
+  LoadingWrapper,
+  EmptyWrapper,
+  NotificationWrapper,
+  SectionWrapper,
+  SectionHeader,
+  SectionTitle,
+  FoldersGrid,
+  FoldersWrapper,
+  FoldersIconWrapper
+};

package/src/components/FileGallery/utils.tsx

@@ -0,0 +1,19 @@
+const getFileIcon = (type: string) => {
+    switch (type) {
+      case "pdf":
+        return "pdf.png";
+      case "doc":
+      case "docx":
+        return "word.png";
+      case "xls":
+      case "xlsx":
+      case "csv":
+        return "excel.png";
+      case "zip":
+        return "zip.png";
+      default:
+        return "zip.png";
+    }
+  };
+
+export { getFileIcon };

package/src/components/Gallery/GalleryPanel/GalleryDragAndDrop/index.tsx

@@ -2,7 +2,7 @@ import React, { memo, useRef, useState } from "react";
 import { connect } from "react-redux";
 
 import { galleryActions } from "@ax/containers/Gallery";
-import { IGetSiteImages, IImage, IRootState } from "@ax/types";
+import { IImage, IRootState } from "@ax/types";
 import { Icon, DragAndDrop, ProgressBar } from "@ax/components";
 
 import * as S from "./style";
@@ -112,8 +112,8 @@ const GalleryDragAndDrop = (props: IProps) => {
       onDragLeave={handleDragLeave}
       validFormats={validFormats}
     >
-      <S.StatusWrapper>
-        <S.DragStatus>
+      <S.StatusWrapper onDragEnter={handleDragEnter} onDragLeave={handleDragLeave}>
+        <S.DragStatus onDragEnter={handleDragEnter} onDragLeave={handleDragLeave}>
           <S.DragIcon>
             <Icon name="image" size="36" />
           </S.DragIcon>
@@ -126,7 +126,7 @@ const GalleryDragAndDrop = (props: IProps) => {
           <S.DragSubtitle>Valid formats: {validFormats.join(", ")}</S.DragSubtitle>
           <S.DragSubtitle>Max. size: 10MB</S.DragSubtitle>
         </S.DragStatus>
-        <S.DragOverStatus>
+        <S.DragOverStatus onDragEnter={handleDragEnter} onDragLeave={handleDragLeave}>
           <S.DragIcon>
             <Icon name="success" size="36" />
           </S.DragIcon>
@@ -205,14 +205,12 @@ const mapStateToProps = (state: IRootState) => ({
 });
 
 export interface IDispatchProps {
-  getSiteImages(params: IGetSiteImages): Promise<void>;
   selectImage(item: IImage | null): void;
   uploadError: (error: boolean, msg?: string) => Promise<void>;
   uploadImage: (imageFiles: File | File[], site: number | string) => Promise<IImage>;
 }
 
 const mapDispatchToProps = {
-  getSiteImages: galleryActions.getSiteImages,
   uploadError: galleryActions.uploadError,
   uploadImage: galleryActions.uploadImage,
 };

package/src/components/Icon/components/Back.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+const SvgBack = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <path
+      fill="#5057FF"
+      d="M7 19v-2h7.1c1.05 0 1.963-.333 2.737-1 .776-.667 1.163-1.5 1.163-2.5s-.387-1.833-1.163-2.5c-.774-.667-1.687-1-2.737-1H7.8l2.6 2.6L9 14 4 9l5-5 1.4 1.4L7.8 8h6.3c1.617 0 3.004.525 4.162 1.575C19.421 10.625 20 11.933 20 13.5c0 1.567-.58 2.875-1.738 3.925C17.104 18.475 15.717 19 14.1 19H7Z"
+    />
+  </svg>
+);
+export default SvgBack;

package/src/components/Icon/components/ClosePanel.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+const SvgClosePanel = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <path
+      fill="#5057FF"
+      fillRule="evenodd"
+      d="M3 20V4c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v16c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2Zm12 0V4H5v16h10ZM11 9l.705.705L9.415 12l2.29 2.295L11 15l-3-3 3-3Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgClosePanel;

package/src/components/Icon/components/NewFolder.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+const SvgNewFolder = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <path
+      fill="#5057FF"
+      d="M20 6h-8l-2-2H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2Zm0 12H4V6h5.17l2 2H20v10Zm-8-4h2v2h2v-2h2v-2h-2v-2h-2v2h-2v2Z"
+    />
+  </svg>
+);
+export default SvgNewFolder;

package/src/components/Icon/components/OpenPanel.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+const SvgOpenPanel = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <path
+      fill="#5057FF"
+      fillRule="evenodd"
+      d="M21 4v16c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2Zm-2 0H9v16h10V4Zm-6 11-.705-.705L14.585 12l-2.29-2.295L13 9l3 3-3 3Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgOpenPanel;

package/src/components/Icon/svgs/Back.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 19V17H14.1C15.15 17 16.0625 16.6667 16.8375 16C17.6125 15.3333 18 14.5 18 13.5C18 12.5 17.6125 11.6667 16.8375 11C16.0625 10.3333 15.15 10 14.1 10H7.8L10.4 12.6L9 14L4 9L9 4L10.4 5.4L7.8 8H14.1C15.7167 8 17.1042 8.525 18.2625 9.575C19.4208 10.625 20 11.9333 20 13.5C20 15.0667 19.4208 16.375 18.2625 17.425C17.1042 18.475 15.7167 19 14.1 19H7Z" fill="#5057FF"/>
+</svg>

package/src/components/Icon/svgs/Close_panel.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 20V4C3 2.9 3.9 2 5 2H19C20.1 2 21 2.9 21 4V20C21 21.1 20.1 22 19 22H5C3.9 22 3 21.1 3 20ZM15 20L15 4L5 4L5 20H15ZM11 9L11.705 9.705L9.415 12L11.705 14.295L11 15L8 12L11 9Z" fill="#5057FF"/>
+</svg>

package/src/components/Icon/svgs/New-folder.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 6H12L10 4H4C2.89 4 2.01 4.89 2.01 6L2 18C2 19.11 2.89 20 4 20H20C21.11 20 22 19.11 22 18V8C22 6.89 21.11 6 20 6ZM20 18H4V6H9.17L11.17 8H20V18ZM12 14H14V16H16V14H18V12H16V10H14V12H12V14Z" fill="#5057FF"/>
+</svg>

package/src/components/Icon/svgs/Open_panel.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21 4V20C21 21.1 20.1 22 19 22H5C3.9 22 3 21.1 3 20V4C3 2.9 3.9 2 5 2H19C20.1 2 21 2.9 21 4ZM19 4H9L9 20L19 20L19 4ZM13 15L12.295 14.295L14.585 12L12.295 9.705L13 9L16 12L13 15Z" fill="#5057FF"/>
+</svg>

package/src/components/Modal/index.tsx

@@ -1,12 +1,12 @@
 import React, { memo } from "react";
 import { createPortal } from "react-dom";
 import { IconAction } from "@ax/components";
+import Button from "../Button";
 
 import * as S from "./style";
-import Button from "../Button";
 
 const Modal = (props: IModalProps): JSX.Element | null => {
-  const { isOpen, hide, children, title, size, mainAction, secondaryAction, overflow = "auto" } = props;
+  const { isOpen, hide, children, title, size, mainAction, secondaryAction, height, overflow = "auto", isChild } = props;
 
   const titleContent = title ? <S.Title>{title}</S.Title> : "";
 
@@ -39,9 +39,9 @@ const Modal = (props: IModalProps): JSX.Element | null => {
   return isOpen
     ? createPortal(
         <>
-          <S.ModalOverlay />
-          <S.ModalWrapper data-testid="modal-wrapper">
-            <S.Modal size={size} data-testid="modal-component">
+          <S.ModalOverlay isChild={isChild} />
+          <S.ModalWrapper data-testid="modal-wrapper" isChild={isChild}>
+            <S.Modal size={size} height={height} data-testid="modal-component">
               <S.ModalHeader>
                 {titleContent}
                 <S.ButtonWrapper>
@@ -67,6 +67,8 @@ export interface IModalProps {
   overflow?: string;
   mainAction?: IAction;
   secondaryAction?: IAction;
+  height?: number;
+  isChild?: boolean;
 }
 
 interface IAction {