l-min-components 1.7.1319 → 1.7.1320

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.7.1319",
+  "version": "1.7.1320",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/AppMainLayout/index.jsx

@@ -4,6 +4,7 @@ import React, {
   createContext,
   useMemo,
   useCallback,
+  forwardRef,
 } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import {
@@ -26,13 +27,14 @@ import InstructorAccountSwitcher from "../instructorAccountSwitcher";
 // import SideMenu from "../sideBar/sideMenu";
 import InstructorRightBar from "../fileRightBar/instructorRightBar2";
 import EnterpriseRightBar from "../fileRightBar/enterpriseRightBar";
-import PersonalRightBar from "../fileRightBar/personalRightBar";
 import useHeader from "../header/getHeaderDetails";
 import GracePeriod from "../deactivated";
 import MobileLayout from "../mobileLayout";
 import useTranslation from "../../hooks/useTranslation";
 import useMessageKit from "../../hooks/messaging-kit";
 import AffiliateRightBar from "../fileRightBar/instructorRightBar2/affiliateRightBar";
+import PersonalRightBar from "../fileRightBar/instructorRightBar2/personalRightBar";
+import TestModal from "../fileRightBar/instructorRightBar2/testModal";
 
 const AppMainLayout = ({ children }) => {
   const [isOpen, setIsOpen] = useState(true);
@@ -56,6 +58,7 @@ const AppMainLayout = ({ children }) => {
   const [affiliateAccount, setAffiliateAccount] = useState(null);
   const [gracePeriod, setGracePeriod] = useState(true); // test
   const [deviceWidth, setDeviceWidth] = useState(window.innerWidth);
+  const [showTest, setShowTest] = useState(null);
   const [newLoadingForPostDefaultAccount, setNewLoadingForPostDefaultAccount] =
     useState(true);
   const [selectedAccount, setSelectedAccount] = useState();
@@ -300,6 +303,34 @@ const AppMainLayout = ({ children }) => {
 
   const messageKit = useMessageKit(); // useMessageKit
 
+  const SetupRightBar = ({
+    accountType,
+    planState,
+    affiliateAccount,
+    findText,
+  }) => {
+    switch (accountType) {
+      case "enterprise":
+        return <EnterpriseRightBar planState={planState} />;
+
+      case "instructor":
+        return affiliateAccount?.id ? (
+          <AffiliateRightBar
+            planState={planState}
+            affiliateAccount={affiliateAccount.id}
+          />
+        ) : (
+          <InstructorRightBar planState={planState} />
+        );
+
+      case "developer":
+        return <DeveloperBanner findText={findText} />;
+      case "personal":
+      default:
+        return <DeveloperBanner findText={findText} />;
+    }
+  };
+
   return (
     <OutletContext.Provider
       value={{
@@ -381,18 +412,6 @@ const AppMainLayout = ({ children }) => {
                       )}
                     </>
                   )}
-                  {
-                    // window.location.pathname.includes("enterprise")
-                    //   ? "enterprise"
-                    //   : window.location.pathname.includes("personal")
-                    //   ? "personal"
-                    //   : window.location.pathname.includes("instructor")
-                    //   ? "instructor"
-                    //   : window.location.pathname.includes("developer") ||
-                    //     window.location.hostname.includes("developer")
-                    //   ? "developer"
-                    //   : "developer"
-                  }
                 </LeftLayout>
                 <CenterLayout isOpen={isOpen} style={centerLayoutStyle}>
                   {window.location.pathname.includes("instructor") &&
@@ -420,47 +439,34 @@ const AppMainLayout = ({ children }) => {
                     children ?? <Outlet />
                   )}
                 </CenterLayout>
-
+                {showTest && (
+                  <TestModal
+                    data={showTest}
+                    onClose={() => {
+                      setShowTest(null);
+                    }}
+                  />
+                )}
                 {rightLayout && !coming && (
                   <RightLayout>
                     {rightComponent ??
-                      (window.location.pathname.includes("enterprise") ? (
+                      (activeAccountType === "enterprise" ? (
                         <EnterpriseRightBar planState={planState} />
-                      ) : window.location.pathname.includes(
-                          "personal/dashboard"
-                        ) ? (
-                        <PersonalRightBar />
-                      ) : window.location.pathname.includes(
-                          "personal/addons"
-                        ) ? (
-                        <InstructorRightBar personal />
-                      ) : window.location.pathname.includes(
-                          "personal/courses"
-                        ) ? (
-                        <InstructorRightBar personal />
-                      ) : window.location.pathname.includes(
-                          "personal/library/selectlanguage"
-                        ) ? (
-                        <InstructorRightBar personal />
-                      ) : window.location.pathname.includes(
-                          "personal/library"
-                        ) ? (
-                        <PersonalRightBar personalLibrary />
-                      ) : window.location.pathname.includes(
-                          "personal/reports"
-                        ) ? (
-                        <PersonalRightBar personalReport />
-                      ) : window.location.pathname.includes("instructor") ? (
+                      ) : activeAccountType === "instructor" ? (
                         affiliateAccount?.id ? (
                           <AffiliateRightBar
                             planState={planState}
-                            affiliateAccount={affiliateAccount?.id}
+                            affiliateAccount={affiliateAccount.id}
                           />
                         ) : (
                           <InstructorRightBar planState={planState} />
                         )
-                      ) : userPlanData?.data?.current_plan?.account_type ===
-                        "DEVELOPER" ? (
+                      ) : activeAccountType === "personal" ? (
+                        <PersonalRightBar
+                          findText={findText}
+                          onShowTest={setShowTest}
+                        />
+                      ) : activeAccountType === "developer" ? (
                         <DeveloperBanner findText={findText} />
                       ) : (
                         <DeveloperBanner findText={findText} />

package/src/components/fileRightBar/enterpriseRightBar/api.jsx

@@ -2,11 +2,13 @@ import useAxios from "axios-hooks";
 
 export default function () {
   const url = `/learn/v1/enterprise`;
-  const [{ ...coursesData }, getCoursesData] = useAxios();
+  const [{ ...coursesData }, getCoursesData] = useAxios(
+    { method: "GET" },
+    { manual: true }
+  );
 
   const handleGetCoursesData = async (params) => {
     await getCoursesData({
-      method: "GET",
       url: `${url}/courses/`,
       params,
     });
@@ -17,7 +19,7 @@ export default function () {
     { manual: true }
   );
   const handleremainingSlot = async () => {
-    return remainingSlot({
+    await remainingSlot({
       url: `${url}/teams/remaining_slot/`,
     });
   };

package/src/components/fileRightBar/enterpriseRightBar/index.jsx

@@ -9,6 +9,7 @@ import moment from "moment";
 import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
 import { Carousel as ReactCarousl } from "react-responsive-carousel";
 import BoxIcon from "./boxIcon";
+import redirectURL from "../../../utils/redirectURL";
 
 const EnterpriseRightBar = ({ planState }) => {
   const {
@@ -37,10 +38,6 @@ const EnterpriseRightBar = ({ planState }) => {
     );
   };
 
-  const host = window?.location?.hostname;
-  const port = window?.location?.port ? `:${window.location.port}` : "";
-  const protocol = window?.location?.protocol;
-
   return (
     <EnterpriseContainer
       className={planState === "GRACE PERIOD" ? "grace_period" : ""}
@@ -93,13 +90,15 @@ const EnterpriseRightBar = ({ planState }) => {
             boxShadow: "0px 10px 20px 0px rgba(254, 191, 16, 0.25)",
           }}
           onClick={() => {
-            window.location.href = `${protocol}//${host}${port}/enterprise/courses/create-course`;
+            window.location.href = redirectURL(
+              "/enterprise/courses/create-course"
+            );
           }}
         />
       </RecentAddedEnterprie>
       <UpgradeComponent
         UpgradeClick={() => {
-          window.location.href = `${protocol}//${host}${port}/settings/payment`;
+          window.location.href = redirectURL("/settings/payment");
         }}
         planState={planState}
         siotCount={slotData?.total}

package/src/components/fileRightBar/instructorRightBar2/affiliateRightBar.jsx

@@ -10,6 +10,7 @@ import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a lo
 import { Carousel as ReactCarousl } from "react-responsive-carousel";
 import BoxIcon from "./boxIcon";
 import InstructorMessage from "./messageSection";
+import redirectURL from "../../../utils/redirectURL";
 
 const AffiliateRightBar = ({ planState, affiliateAccount }) => {
   const { handleGetCoursesAffilateData, coursesAffilateData } = api();
@@ -80,6 +81,9 @@ const AffiliateRightBar = ({ planState, affiliateAccount }) => {
         disabled={planState === "GRACE PERIOD"}
         messsage="Create an instructor account to onboard and manage your students with our AI powered platform."
         btnText="Create account"
+        onClick={() => {
+          window.location.href = redirectURL("/auth/account-type");
+        }}
       />
     </EnterpriseContainer>
   );

package/src/components/fileRightBar/instructorRightBar2/api.jsx

@@ -2,20 +2,24 @@ import useAxios from "axios-hooks";
 
 export default function () {
   const url = `/learn/v1/instructor`;
-  const [{ ...coursesData }, getCoursesData] = useAxios();
+  const [{ ...coursesData }, getCoursesData] = useAxios(
+    { method: "GET" },
+    { manual: true }
+  );
 
   const handleGetCoursesData = async (params) => {
     await getCoursesData({
-      method: "GET",
       url: `${url}/courses/`,
       params,
     });
   };
-  const [{ ...coursesAffilateData }, getCoursesAffilateData] = useAxios();
+  const [{ ...coursesAffilateData }, getCoursesAffilateData] = useAxios(
+    { method: "GET" },
+    { manual: true }
+  );
 
   const handleGetCoursesAffilateData = async (params, id) => {
     await getCoursesAffilateData({
-      method: "GET",
       url: `/learn/v1/instructor/${id}/courses/`,
       params,
     });
@@ -30,8 +34,36 @@ export default function () {
       url: `${url}/teams/remaining_slot/`,
     });
   };
+
+  const [{ ...coursePersonalData }, coursePersonal] = useAxios(
+    { method: "GET" },
+    { manual: true }
+  );
+
+  const handleGetCoursePersonal = async (params) => {
+    await coursePersonal({
+      url: `/learn/v1/courses/`,
+      params,
+    });
+  };
+
+  const [{ ...upcomingTestPersonalData }, upcomingTestPersonal] = useAxios(
+    { method: "GET" },
+    { manual: true }
+  );
+
+  const handleGetUpcomingTestPersonal = async (params) => {
+    await upcomingTestPersonal({
+      url: "/learn/v1/account/upcoming_tests/",
+      params,
+    });
+  };
   return {
+    handleGetUpcomingTestPersonal,
+    upcomingTestPersonalData,
     handleGetCoursesAffilateData,
+    handleGetCoursePersonal,
+    coursePersonalData,
     coursesAffilateData,
     coursesData,
     handleGetCoursesData,

package/src/components/fileRightBar/instructorRightBar2/index.jsx

@@ -10,6 +10,7 @@ import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a lo
 import { Carousel as ReactCarousl } from "react-responsive-carousel";
 import BoxIcon from "./boxIcon";
 import InstructorMessage from "./messageSection";
+import redirectURL from "../../../utils/redirectURL";
 
 const InstructorRightBar = ({ planState }) => {
   const { handleGetCoursesData, coursesData } = api();
@@ -97,6 +98,9 @@ const InstructorRightBar = ({ planState }) => {
       <InstructorMessage
         disabled={planState === "GRACE PERIOD"}
         messsage="Upgrade to ENTERPRISE for more features."
+        onClick={() => {
+          window.location.href = redirectURL("/auth/account-type");
+        }}
       />
     </EnterpriseContainer>
   );

package/src/components/fileRightBar/instructorRightBar2/messageSection.jsx

@@ -3,19 +3,30 @@ import img from "../../../assets/images/happy-celebrate.png";
 import styled from "styled-components";
 import ButtonComponent from "../../button";
 
-const InstructorMessage = ({ messsage, disabled, btnText = "Upgrade" }) => {
+const InstructorMessage = ({
+  messsage,
+  messsageHTML,
+  disabled,
+  btnText = "Upgrade",
+  onClick,
+}) => {
   return (
     <Container>
       <ImageSection>
         <img src={img} alt="" />
       </ImageSection>
       <Bottom>
-        <p>{messsage}</p>
+        {messsageHTML ? (
+          <p dangerouslySetInnerHTML={{ __html: messsageHTML }}>{messsage}</p>
+        ) : (
+          <p>{messsage}</p>
+        )}
         <div>
           <ButtonComponent
             disabled={disabled}
             type="primary"
             text={btnText}
+            onClick={onClick}
             styles={{
               marginTop: "14px",
               fontSize: "12px",
@@ -64,6 +75,10 @@ const Bottom = styled.div`
     width: 100%;
     max-width: 170px;
     margin: 0 auto;
+    span {
+      color: #febf10;
+      font-weight: 600;
+    }
   }
   button {
     &:disabled {

package/src/components/fileRightBar/instructorRightBar2/personalRightBar.jsx

@@ -0,0 +1,342 @@
+import React, { useEffect } from "react";
+import Button from "../../button";
+import UpgradeComponent from "./upgrade";
+import api from "./api";
+import styled from "styled-components";
+// import Carousel from "react-multi-carousel";
+// import "react-multi-carousel/lib/styles.css";
+import moment from "moment";
+import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
+import { Carousel as ReactCarousl } from "react-responsive-carousel";
+import BoxIcon from "./boxIcon";
+import InstructorMessage from "./messageSection";
+import redirectURL from "../../../utils/redirectURL";
+import Modal from "../../modalWrapper";
+
+const PersonalRightBar = ({ planState, onShowTest }) => {
+  const {
+    handleGetCoursePersonal,
+    coursePersonalData,
+    handleGetUpcomingTestPersonal,
+    upcomingTestPersonalData,
+  } = api();
+
+  useEffect(() => {
+    handleGetCoursePersonal({
+      "status[]": "ending_soon,active,scheduled",
+      page_size: 4,
+    });
+    handleGetUpcomingTestPersonal({ page_size: 100 });
+  }, []);
+
+  const courses = coursePersonalData?.data?.results;
+  const upComingTest = upcomingTestPersonalData?.data?.results;
+
+  const CustomDots = ({ onClick, isSelected }) => {
+    return (
+      <CustomDotsContainer
+        onClick={onClick}
+        className={`${isSelected ? "active" : ""}`}
+      ></CustomDotsContainer>
+    );
+  };
+
+  return (
+    <EnterpriseContainer
+      className={planState === "GRACE PERIOD" ? "grace_period" : ""}
+    >
+      <Banner>
+        <h3>Courses ending soon</h3>
+        {courses?.length > 0 ? (
+          <ReactCarousl
+            autoPlay
+            infiniteLoop={courses?.length > 1}
+            showArrows={false}
+            showStatus={false}
+            showThumbs={false}
+            className="carousel-container"
+            renderIndicator={(clickHandler, isSelected) => (
+              <CustomDots onClick={clickHandler} isSelected={isSelected} />
+            )}
+          >
+            {courses?.map((course) => (
+              <Course key={course?.id}>
+                <img src={course?.thumbnail_dict?.url} alt="" />
+                <div className="content">
+                  <p className="date">
+                    <span>Ends:</span>{" "}
+                    {moment(course?.end_day).format("MMM DD, YYYY")}
+                  </p>
+                  <p className="name">{course?.name}</p>
+                </div>
+              </Course>
+            ))}
+          </ReactCarousl>
+        ) : (
+          <EmptyCourse>
+            <BoxIcon />
+            <p>There is no course ending in the next 30 days </p>
+          </EmptyCourse>
+        )}
+      </Banner>
+      <TestSection>
+        {upComingTest?.length > 0 ? (
+          <>
+            <h2>Upcoming test</h2>
+            <div className="content">
+              <p className="title">{upComingTest[0]?.title}</p>
+              <p className="date">
+                {moment(upComingTest[0]?.start_date).format(
+                  "MMM DD,YYYY || hh:mma"
+                )}
+              </p>
+            </div>
+            {upComingTest?.length > 1 && (
+              <span
+                onClick={() => {
+                  onShowTest && onShowTest(upComingTest);
+                }}
+              >
+                View all
+              </span>
+            )}
+          </>
+        ) : (
+          <EmptyTest>
+            <BoxIcon />
+            <p>There is no upcoming test. </p>
+          </EmptyTest>
+        )}
+      </TestSection>
+
+      <InstructorMessage
+        onClick={() => {
+          window.location.href = redirectURL("/settings/payment");
+        }}
+        disabled={planState === "GRACE PERIOD"}
+        messsageHTML={
+          "Upgrade to <span>Premium</span> <br/> for more features."
+        }
+        btnText="Upgrade"
+      />
+    </EnterpriseContainer>
+  );
+};
+
+const CustomDotsContainer = styled.li`
+  border-radius: 3.091px;
+  background: #dfe5e5;
+  width: 8px;
+  height: 4px;
+
+  cursor: pointer;
+  &.active {
+    background-color: #00c2c2;
+    width: 19px;
+  }
+`;
+
+const Banner = styled.div`
+  position: relative;
+  padding: 0;
+  border-radius: 0;
+  padding-bottom: 25px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #dfe5e5;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  text-align: left;
+
+  h3 {
+    font-size: 14px;
+    font-weight: 600;
+  }
+`;
+
+const TestSection = styled.div`
+  padding: 0;
+  height: auto;
+  padding: 0 0 20px;
+  border-bottom: 1px solid #dfe5e5;
+  margin-bottom: 52px;
+  text-align: left;
+
+  h2 {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 10px;
+  }
+  span {
+    font-size: 14px;
+    color: #febf10;
+    cursor: pointer;
+  }
+  > .content {
+    margin-bottom: 10px;
+    .title {
+      width: 90%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 14px;
+    }
+    .date {
+      font-size: 12px;
+      color: #7c8080;
+      margin-top: 4px;
+    }
+  }
+`;
+const EmptyTest = styled.div`
+  padding: 0 0 20px;
+  border-bottom: 1px solid #dfe5e5;
+  text-align: left;
+  height: 100px;
+  border-radius: 20px;
+  background: #f5f7f7;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  svg {
+  }
+  > p {
+    color: #636666;
+    text-align: center;
+    width: 100%;
+    max-width: 144px;
+    margin: 0 auto;
+    font-size: 12px;
+  }
+`;
+const EnterpriseContainer = styled.div`
+  background: #fff;
+  max-width: 232px;
+  display: flex;
+  /* align-items: center; */
+  text-align: center;
+  flex-direction: column;
+  padding: 10px 0px;
+  border-radius: 30px;
+
+  .library_img {
+    padding: 10px;
+    margin-top: 20px;
+  }
+
+  /* GRACE PERIOD AND DEACTIVATED */
+
+  &.grace_period {
+    border-radius: 30.913px;
+    border: 0.773px solid var(--Neutral-20, #dfe5e5);
+    background: var(--Neutral-20, #dfe5e5);
+
+    > div {
+      border-radius: 30.913px;
+      border: 0.773px solid var(--Neutral-20, #dfe5e5);
+      background: var(--Neutral-20, #dfe5e5);
+
+      > button {
+        border-radius: 12px;
+        background: var(--Neutral-50, #949999);
+        box-shadow: 0px 10px 20px 0px rgba(254, 191, 16, 0.25);
+      }
+    }
+  }
+  /* height: 580px; */
+  width: 231px;
+  padding: 20px 12px;
+  .carousel-container {
+    position: relative;
+
+    .control-dots {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      justify-content: center;
+      bottom: 30;
+    }
+  }
+  .more-slot {
+    padding: 0px !important;
+  }
+`;
+
+const Course = styled.div`
+  width: 100%;
+
+  border-radius: 18.548px;
+  overflow: hidden;
+  position: relative;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 34.29%, #000 100%);
+
+  > .content {
+    position: relative;
+    z-index: 2;
+    flex: 1;
+    height: 132px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    justify-content: space-between;
+    > .date {
+      border-radius: 6.183px;
+      background: #fff;
+      display: flex;
+      gap: 4px;
+      width: fit-content;
+      align-items: center;
+      height: 22.758px;
+      padding: 3px 10px;
+      color: #4a4d4d;
+      text-align: center;
+      font-size: 12px;
+      span {
+        color: #f95454;
+      }
+    }
+    > .name {
+      color: var(--white, #fff);
+      font-size: 14px;
+      font-weight: 700;
+      width: 99%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  img {
+    width: 100%;
+    height: 100%;
+    opacity: 0.4;
+    position: absolute;
+    inset: 0;
+    object-fit: cover;
+  }
+`;
+
+const EmptyCourse = styled.div`
+  height: 132px;
+  width: 100%;
+  border-radius: 20px;
+  background: #f5f7f7;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  > p {
+    color: #636666;
+    text-align: center;
+    width: 100%;
+    max-width: 144px;
+    margin: 0 auto;
+    font-size: 12px;
+  }
+`;
+export default PersonalRightBar;

package/src/components/fileRightBar/instructorRightBar2/testModal.jsx

@@ -0,0 +1,139 @@
+import React from "react";
+import Modal from "../../modalWrapper";
+import styled from "styled-components";
+import moment from "moment";
+
+const TestModal = ({ data, onClose }) => {
+  return (
+    <Modal isOpen width={"640px"} height={"auto"} onClose={onClose}>
+      <Container>
+        <h2>Upcoming test in the next 30 days</h2>
+        <ul>
+          {data?.map((test) => (
+            <li key={test?.id}>
+              <div className="left">
+                <Icon />
+                <div className="title_section">
+                  <h3 className="no_wrap">{test?.title}</h3>
+                  <p className="no_wrap">{test?.course_name}</p>
+                </div>
+              </div>
+              <div className="right">
+                <p>
+                  Start date & start time:{" "}
+                  <span>
+                    {moment(test?.start_date).format("MMM DD,YYYY || hh:mma")}
+                  </span>
+                </p>
+                <p>
+                  End date & start time:{" "}
+                  <span>
+                    {moment(test?.due_date).format("MMM DD,YYYY || hh:mma")}
+                  </span>
+                </p>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </Container>
+    </Modal>
+  );
+};
+
+const Container = styled.div`
+  padding-bottom: 30px;
+  .no_wrap {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  h2 {
+    font-size: 20px;
+    font-weight: 600;
+    color: #4a4d4d;
+    margin-bottom: 20px;
+  }
+  ul {
+    height: 340px;
+    overflow-y: auto;
+    width: 100%;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+    li {
+      background-color: #e9fcfc;
+      display: flex;
+      padding: 16px 20px;
+      border-radius: 15px;
+      align-items: center;
+      gap: 12px;
+      width: 100%;
+      .right {
+        text-align: right;
+        p {
+          font-size: 14px;
+          color: #949999;
+          font-weight: 500;
+          span {
+            color: #4a4d4d;
+          }
+        }
+      }
+      .left {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        .title_section {
+          width: 200px;
+          flex-shrink: 0;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          gap: 3px;
+          h3 {
+            font-size: 16px;
+            font-weight: 600;
+            width: 95%;
+          }
+          p {
+            width: 95%;
+            font-size: 14px;
+            color: #949999;
+          }
+        }
+      }
+    }
+  }
+`;
+export default TestModal;
+
+const Icon = () => (
+  <svg
+    width="26"
+    height="26"
+    viewBox="0 0 26 26"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M20.8438 7.44303C20.8438 6.89015 21.0634 6.35992 21.4543 5.96897C21.8453 5.57803 22.3755 5.3584 22.9284 5.3584C23.4813 5.3584 24.0115 5.57803 24.4024 5.96897C24.7934 6.35992 25.013 6.89015 25.013 7.44303V21.5512L22.9284 24.6781L20.8438 21.5512V7.44303ZM22.9284 6.74816C22.7441 6.74816 22.5673 6.82137 22.437 6.95168C22.3067 7.082 22.2335 7.25874 22.2335 7.44303V21.1301L22.9284 22.1724L23.6233 21.1301V7.44303C23.6233 7.25874 23.5501 7.082 23.4197 6.95168C23.2894 6.82137 23.1127 6.74816 22.9284 6.74816Z"
+      fill="#00C2C2"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M24.3207 10.2205H21.5412V8.83073H24.3207V10.2205ZM2.77951 1.88194C2.41093 1.88194 2.05744 2.02837 1.79681 2.289C1.53618 2.54962 1.38976 2.90311 1.38976 3.2717V22.7283C1.38976 23.0969 1.53618 23.4504 1.79681 23.711C2.05744 23.9716 2.41093 24.1181 2.77951 24.1181H16.6771C17.0457 24.1181 17.3992 23.9716 17.6598 23.711C17.9204 23.4504 18.0668 23.0969 18.0668 22.7283V3.2717C18.0668 2.90311 17.9204 2.54962 17.6598 2.289C17.3992 2.02837 17.0457 1.88194 16.6771 1.88194H2.77951ZM0 3.2717C0 2.53453 0.292841 1.82755 0.814101 1.30629C1.33536 0.785028 2.04234 0.492188 2.77951 0.492188H16.6771C17.4143 0.492188 18.1212 0.785028 18.6425 1.30629C19.1638 1.82755 19.4566 2.53453 19.4566 3.2717V22.7283C19.4566 23.4655 19.1638 24.1725 18.6425 24.6937C18.1212 25.215 17.4143 25.5078 16.6771 25.5078H2.77951C2.04234 25.5078 1.33536 25.215 0.814101 24.6937C0.292841 24.1725 0 23.4655 0 22.7283V3.2717Z"
+      fill="#00C2C2"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.73076 6.74468C9.73076 6.56039 9.80397 6.38364 9.93429 6.25333C10.0646 6.12302 10.2413 6.0498 10.4256 6.0498H15.9847C16.169 6.0498 16.3457 6.12302 16.476 6.25333C16.6063 6.38364 16.6795 6.56039 16.6795 6.74468C16.6795 6.92898 16.6063 7.10572 16.476 7.23604C16.3457 7.36635 16.169 7.43956 15.9847 7.43956H10.4256C10.2413 7.43956 10.0646 7.36635 9.93429 7.23604C9.80397 7.10572 9.73076 6.92898 9.73076 6.74468ZM9.73076 9.5242C9.73076 9.3399 9.80397 9.16316 9.93429 9.03284C10.0646 8.90253 10.2413 8.82932 10.4256 8.82932H15.9847C16.169 8.82932 16.3457 8.90253 16.476 9.03284C16.6063 9.16316 16.6795 9.3399 16.6795 9.5242C16.6795 9.70849 16.6063 9.88524 16.476 10.0156C16.3457 10.1459 16.169 10.2191 15.9847 10.2191H10.4256C10.2413 10.2191 10.0646 10.1459 9.93429 10.0156C9.80397 9.88524 9.73076 9.70849 9.73076 9.5242ZM9.73076 15.7781C9.73076 15.5938 9.80397 15.4171 9.93429 15.2867C10.0646 15.1564 10.2413 15.0832 10.4256 15.0832H15.9847C16.169 15.0832 16.3457 15.1564 16.476 15.2867C16.6063 15.4171 16.6795 15.5938 16.6795 15.7781C16.6795 15.9624 16.6063 16.1391 16.476 16.2695C16.3457 16.3998 16.169 16.473 15.9847 16.473H10.4256C10.2413 16.473 10.0646 16.3998 9.93429 16.2695C9.80397 16.1391 9.73076 15.9624 9.73076 15.7781ZM9.73076 18.5576C9.73076 18.3733 9.80397 18.1966 9.93429 18.0663C10.0646 17.9359 10.2413 17.8627 10.4256 17.8627H15.9847C16.169 17.8627 16.3457 17.9359 16.476 18.0663C16.6063 18.1966 16.6795 18.3733 16.6795 18.5576C16.6795 18.7419 16.6063 18.9187 16.476 19.049C16.3457 19.1793 16.169 19.2525 15.9847 19.2525H10.4256C10.2413 19.2525 10.0646 19.1793 9.93429 19.049C9.80397 18.9187 9.73076 18.7419 9.73076 18.5576ZM4.17173 15.7781V17.8627H6.25637V15.7781H4.17173ZM3.47686 14.3883H6.95125C7.13554 14.3883 7.31229 14.4616 7.4426 14.5919C7.57292 14.7222 7.64613 14.8989 7.64613 15.0832V18.5576C7.64613 18.7419 7.57292 18.9187 7.4426 19.049C7.31229 19.1793 7.13554 19.2525 6.95125 19.2525H3.47686C3.29256 19.2525 3.11582 19.1793 2.9855 19.049C2.85519 18.9187 2.78198 18.7419 2.78198 18.5576V15.0832C2.78198 14.8989 2.85519 14.7222 2.9855 14.5919C3.11582 14.4616 3.29256 14.3883 3.47686 14.3883ZM8.13741 6.2534C8.26767 6.38371 8.34086 6.56043 8.34086 6.74468C8.34086 6.92894 8.26767 7.10565 8.13741 7.23596L4.86661 10.5068L2.98558 8.62572C2.91921 8.56162 2.86627 8.48494 2.82985 8.40016C2.79343 8.31539 2.77427 8.2242 2.77346 8.13194C2.77266 8.03967 2.79024 7.94817 2.82518 7.86278C2.86012 7.77738 2.91172 7.69979 2.97696 7.63455C3.04221 7.5693 3.11979 7.51771 3.20519 7.48277C3.29059 7.44783 3.38209 7.43025 3.47435 7.43105C3.56662 7.43185 3.6578 7.45102 3.74258 7.48744C3.82736 7.52386 3.90403 7.57679 3.96813 7.64316L4.86661 8.54164L7.15485 6.2534C7.28516 6.12313 7.46187 6.04995 7.64613 6.04995C7.83038 6.04995 8.0071 6.12313 8.13741 6.2534Z"
+      fill="#00C2C2"
+    />
+  </svg>
+);

package/src/components/modalWrapper/index.jsx

@@ -0,0 +1,15 @@
+import React, { useState } from 'react';
+import { ModalWrapper, ModalContent, CloseButton } from './style';
+
+const Modal = ({ isOpen, onClose, children, width, height, display, top, left, marginTop, marginLeft }) => {
+  return (
+    <ModalWrapper isOpen={isOpen} width={width} height={height} top={top} left={left}>
+      <ModalContent  width={width} height={height} marginTop={marginTop} marginLeft={marginLeft}>
+        <CloseButton onClick={onClose} display={display}>&times;</CloseButton>
+        {children}
+      </ModalContent>
+    </ModalWrapper>
+  );
+};
+
+export default Modal;

package/src/components/modalWrapper/style.jsx

@@ -0,0 +1,41 @@
+import styled from "styled-components";
+
+export const ModalWrapper = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: ${({ isOpen }) => (isOpen ? "flex" : "none")};
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 999;
+`;
+
+export const ModalContent = styled.div`
+  position: relative;
+  width: ${({ width }) => (width ? width : "70%")};
+  // max-width: 70%;
+  height: ${({ height }) => (height ? height : "70%")};
+  background-color: white;
+  padding: 15px 20px;
+  /* overflow: hidden; */
+  /* overflow-y: auto; */
+  border-radius: 30px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+`;
+
+export const CloseButton = styled.button`
+  position: absolute;
+  top: -50px;
+  right: 15px;
+  width: 40px;
+  height: 40px;
+  border-radius: 30px;
+  background-color: white;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  display: ${({ display }) => (display ? display : "block")};
+`;

package/src/utils/redirectURL.js

@@ -0,0 +1,8 @@
+const redirectURL = (path) => {
+  const host = window?.location?.hostname;
+  const port = window?.location?.port ? `:${window.location.port}` : "";
+  const protocol = window?.location?.protocol;
+  return `${protocol}//${host}${port}${path}`;
+};
+
+export default redirectURL;