l-min-components 1.0.705 → 1.0.714

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -49,7 +49,8 @@ const AppMainLayout = () => {
   const [accessToken, setAccessToken] = useState("");
   const [envType, setEnvType] = useState("");
   const [newNotifications, setNewNotifications] = useState([]);
-  const [deactivated, setDeactivated] = useState(true) // testing, until we get account setup
+  const [deactivated, setDeactivated] = useState(true); // testing, until we get account setup
+  const [gracePeriod, setGracePeriod] = useState(true); // test
 
   const {
     setDefaultAccount,
@@ -58,6 +59,8 @@ const AppMainLayout = () => {
     handleGetNotificationMarkRead,
     userPlanData,
     handleGetUserPlan,
+    getCurrentSubscriptionData,
+    handleCurrentSubscription,
   } = useHeader();
 
   useEffect(() => {
@@ -134,11 +137,11 @@ const AppMainLayout = () => {
   console.log("envType", envType);
 
   useEffect(() => {
-    handleGetUserPlan()
-  }, [])
+    handleGetUserPlan();
+  }, []);
 
   const currentPlan = userPlanData?.data?.current_plan;
-  const planState = userPlanData?.data?.state
+  const planState = userPlanData?.data?.state;
 
   return (
     <OutletContext.Provider
@@ -191,6 +194,7 @@ const AppMainLayout = () => {
                     isOpen={isOpen}
                     setIsOpen={setIsOpen}
                     setRightComponent={setRightComponent}
+                    planState={planState}
                   />
                 )}
               </>
@@ -218,7 +222,16 @@ const AppMainLayout = () => {
                 />
               )}
 
-            {window.location.pathname.includes("enterprise") && deactivated ? <GracePeriod /> : <Outlet />}
+            {window.location.pathname.includes("enterprise") &&
+            planState === "GRACE PERIOD" ? (
+              <GracePeriod
+                getCurrentSubscriptionData={getCurrentSubscriptionData}
+                handleCurrentSubscription={handleCurrentSubscription}
+                gracePeriod={gracePeriod}
+              />
+            ) : (
+              <Outlet />
+            )}
           </CenterLayout>
 
           {rightLayout && !coming && (
@@ -226,7 +239,11 @@ const AppMainLayout = () => {
               {rightComponent ??
                 (window.location.pathname.includes("enterprise") &&
                 !window.location.pathname.includes("file-manager") ? (
-                  <EnterpriseRightBar />
+                  <EnterpriseRightBar
+                    gracePeriod={gracePeriod}
+                    setGracePeriod={setGracePeriod}
+                    planState={planState}
+                  />
                 ) : window.location.pathname.includes("personal/dashboard") ? (
                   <PersonalRightBar />
                 ) : window.location.pathname.includes("personal/addons") ? (
@@ -234,7 +251,7 @@ const AppMainLayout = () => {
                 ) : window.location.pathname.includes("personal/courses") ? (
                   <InstructorRightBar personal />
                 ) : window.location.pathname.includes(
-                    "personal/library/selectlanguage"
+                    "personal/library/selectlanguage",
                   ) ? (
                   <InstructorRightBar personal />
                 ) : window.location.pathname.includes("personal/library") ? (

package/src/components/datePicker/index.jsx

@@ -1,51 +1,58 @@
-import React, { useState } from "react";
-import DatePicker from "react-datepicker";
-import { CalendarIcon } from "./svg/calendar";
-import { DownloadIcon } from "./svg/download";
-import CustomDatePickerHeader from "./dateNavigation";
-import { DatePickerWrapper, DateCont  } from "./style";
-import moment from "moment";
+import React, { useState } from 'react';
+import DatePicker from 'react-datepicker';
+import { CalendarIcon } from './svg/calendar';
+import { DownloadIcon } from './svg/download';
+import CustomDatePickerHeader from './dateNavigation';
+import { DatePickerWrapper, DateCont } from './style';
+import moment from 'moment';
 
 const DatePickerCalender = ({
-    borderColor,
-    opacity,
-    dateFormat,
-    ...props
+  borderColor,
+  opacity,
+  dateFormat,
+  icon,
+  ...props
 }) => {
-    const [dateRange, setDateRange] = useState({
-        startDate: new Date(),
-        endDate: new Date(),
-      });
+  const [dateRange, setDateRange] = useState({
+    startDate: new Date(),
+    endDate: new Date(),
+  });
 
-    return(
-        <DatePickerWrapper {...props}>
-           <DateCont className="datepicker__wrapper" borderColor={borderColor} opacity={opacity} >
-            <DatePicker
-            selected={dateRange.endDate}
-            endDate={dateRange.endDate}
-            dateFormat={dateFormat ? dateFormat : "d MMM yyyy"}
-            renderCustomHeader={({ date, decreaseMonth, increaseMonth }) => (
-                <CustomDatePickerHeader selected={date} onMonthChange={(value) => {
+  return (
+    <DatePickerWrapper {...props}>
+      <DateCont
+        className="datepicker__wrapper"
+        borderColor={borderColor}
+        opacity={opacity}
+      >
+        <DatePicker
+          selected={dateRange.endDate}
+          endDate={dateRange.endDate}
+          dateFormat={dateFormat ? dateFormat : 'd MMM yyyy'}
+          renderCustomHeader={({ date, decreaseMonth, increaseMonth }) => (
+            <CustomDatePickerHeader
+              selected={date}
+              onMonthChange={(value) => {
                 if (value === -1) {
-                    decreaseMonth();
+                  decreaseMonth();
                 } else if (value === 1) {
-                    increaseMonth();
+                  increaseMonth();
                 }
-                }} />
-            )}
-            onChange={(dates) =>
-                setDateRange({
-                ...dateRange,
-                endDate: dates,
-                })
-            }
-            calendarClassName="datepicker_style"
+              }}
             />
-            <CalendarIcon />
-        </DateCont>
-      </DatePickerWrapper>
+          )}
+          onChange={(dates) =>
+            setDateRange({
+              ...dateRange,
+              endDate: dates,
+            })
+          }
+          calendarClassName="datepicker_style"
+        />
+        {icon ? icon : <CalendarIcon />}
+      </DateCont>
+    </DatePickerWrapper>
+  );
+};
 
-    )
-}
-
-export default DatePickerCalender
+export default DatePickerCalender;

package/src/components/deactivated/index.jsx

@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { useState } from "react";
 import { useLocation } from "react-router-dom";
-import styled from 'styled-components';
+import styled from "styled-components";
+import SubscriptionExpiredModal from "./modal/subscription-expired-modal";
+import Button from "../button";
 
 const routes = [
   { path: "dashboard", title: "Dashboard" },
@@ -12,11 +14,17 @@ const routes = [
   { path: "file-manager", title: "File Manager" },
 ];
 
-const GracePeriod = () => {
+const GracePeriod = ({
+  getCurrentSubscriptionData,
+  handleCurrentSubscription,
+  gracePeriod,
+}) => {
   const location = useLocation();
+  const [subscriptionExpiredModalIsOpen, setSubscriptionExpiredModalIsOpen] =
+    useState(false);
 
   const getTitleFromPath = (path) => {
-    const route = routes.find(route => path.includes(route.path));
+    const route = routes.find((route) => path.includes(route.path));
     return route?.title || "Dashboard";
   };
 
@@ -25,11 +33,38 @@ const GracePeriod = () => {
   return (
     <GracePeriodWrapper>
       <h1>{pageTitle}</h1>
+      {!gracePeriod &&
+      <Expire>
+        <h4>Hey Enterprise, You do not have any active plan</h4>
+
+        <div
+          onClick={() => {
+            window.location.href =
+              "https://559staging.learngual.com/settings/payment/";
+          }}
+        >
+          <Button
+            text="Choose a Plan"
+            styles={{
+              height: "35px",
+              padding: "4px 20px",
+              fontSize: "14px",
+            }}
+          />
+        </div>
+      </Expire>
+      }
       <div className="gracePeriod_account">
         <div className="content">
           <p>Sorry, you can’t access your account</p>
         </div>
       </div>
+
+      <SubscriptionExpiredModal
+        subscriptionExpiredModalIsOpen={subscriptionExpiredModalIsOpen}
+        setSubscriptionExpiredModalIsOpen={setSubscriptionExpiredModalIsOpen}
+        getCurrentSubscriptionData={getCurrentSubscriptionData}
+      />
     </GracePeriodWrapper>
   );
 };
@@ -79,4 +114,24 @@ const GracePeriodWrapper = styled.div`
   }
 `;
 
+const Expire = styled.div`
+  border-radius: 25px;
+  background: rgba(48, 212, 104, 0.15);
+  display: flex;
+  padding: 15px 26px; 
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  margin-bottom: 20px;
+
+  h4 {
+    color: var(--warning, #f39b33);
+    font-family: Nunito;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 20px; /* 125% */
+  }
+`;
+
 export default GracePeriod;

package/src/components/deactivated/modal/img/book.jsx

@@ -0,0 +1,77 @@
+export const BookIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "24"}
+    height={height || "25"}
+    viewBox="0 0 24 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M22 16.9213V4.85134C22 3.65134 21.02 2.76134 19.83 2.86134H19.77C17.67 3.04134 14.48 4.11134 12.7 5.23134L12.53 5.34134C12.24 5.52134 11.76 5.52134 11.47 5.34134L11.22 5.19134C9.44 4.08134 6.26 3.02134 4.16 2.85134C2.97 2.75134 2 3.65134 2 4.84134V16.9213C2 17.8813 2.78 18.7813 3.74 18.9013L4.03 18.9413C6.2 19.2313 9.55 20.3313 11.47 21.3813L11.51 21.4013C11.78 21.5513 12.21 21.5513 12.47 21.4013C14.39 20.3413 17.75 19.2313 19.93 18.9413L20.26 18.9013C21.22 18.7813 22 17.8813 22 16.9213Z"
+      stroke="white"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 5.66797V20.668"
+      stroke="white"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7.75 8.66797H5.5"
+      stroke="white"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8.5 11.668H5.5"
+      stroke="white"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const ErrorBookIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "26"}
+    height={height || "26"}
+    viewBox="0 0 26 26"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M23.2422 17.6216V5.02823C23.2422 3.7762 22.2197 2.84761 20.9781 2.95195H20.9155C18.7245 3.13975 15.3961 4.25615 13.539 5.42471L13.3616 5.53948C13.059 5.72729 12.5582 5.72729 12.2556 5.53948L11.9948 5.38298C10.1376 4.22485 6.81972 3.11889 4.62866 2.94151C3.38706 2.83718 2.375 3.7762 2.375 5.0178V17.6216C2.375 18.6232 3.18882 19.5622 4.19045 19.6874L4.49302 19.7292C6.75711 20.0318 10.2524 21.1795 12.2556 22.275L12.2974 22.2958C12.5791 22.4524 13.0277 22.4524 13.299 22.2958C15.3022 21.1899 18.8079 20.0318 21.0825 19.7292L21.4268 19.6874C22.4284 19.5622 23.2422 18.6232 23.2422 17.6216Z"
+      stroke="#F95454"
+      stroke-width="1.25203"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12.8125 5.88281V21.5332"
+      stroke="#F95454"
+      stroke-width="1.25203"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8.371 9.01562H6.02344"
+      stroke="#F95454"
+      stroke-width="1.25203"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M9.15352 12.1445H6.02344"
+      stroke="#F95454"
+      stroke-width="1.25203"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

package/src/components/deactivated/modal/index.styled.js

@@ -0,0 +1,222 @@
+import styled from "styled-components";
+
+export const ModalCardContainer = styled.div`
+  /* padding: 25px; */
+  font-family: "Nunito";
+  width: 100%;
+  max-width: 720px;
+  margin-left: 40px;
+`;
+
+export const CloseModalButton = styled.div`
+  background-color: rgba(255, 255, 255, 1);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  font-family: "Nunito";
+  border-radius: 50%;
+  margin-bottom: 8px;
+  margin-left: auto;
+`;
+
+export const CardContainer = styled.div`
+  background-color: rgba(255, 255, 255, 1);
+  padding: 25px;
+  font-family: "Nunito";
+  width: 100%;
+  max-width: 700px;
+  border-radius: 30px;
+`;
+
+export const CardHeader = styled.div`
+  width: 100%;
+  text-align: center;
+
+  .cancel-title {
+    font-size: 22px;
+    color: #313333;
+    font-weight: 700px;
+    margin-bottom: 30px;
+  }
+
+  .title-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 20px;
+    border-radius: 12px;
+    margin: 0 auto;
+  }
+`;
+
+export const CardBody = styled.div`
+  width: 100%;
+  /* display: flex; */
+  margin: 20px auto 10px;
+  text-align: center;
+
+  .mdl-title {
+    font-size: 22px;
+    font-weight: 700;
+    color: #313333;
+    margin-bottom: 12px;
+  }
+
+  .mdld-title {
+    width: 370px;
+    font-size: 18px;
+    font-weight: 700;
+    color: #313333;
+    margin: 0 auto 12px;
+  }
+
+  .btn__footer {
+    display: flex;
+    margin-top: 30px;
+    justify-content: center;
+
+    button {
+      width: 171px;
+      margin: 0 20px;
+    }
+  }
+`;
+
+export const ExpiryCardContainer = styled.div`
+  background-color: rgba(255, 255, 255, 1);
+  font-family: "Nunito";
+  width: 100%;
+  max-width: 700px;
+  border-radius: 30px;
+
+  .expiry_modal_container {
+    display: flex;
+    /* height: 100%; */
+
+
+    .logo_section {
+      background-color: rgba(249, 84, 84, 0.2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 25px;
+      width: 40%;
+      padding: 0 25px;
+    }
+
+    .expiry_details {
+      padding: 25px;
+      width: 60%;
+
+      .error-txt {
+        color: #f95454;
+        font-weight: 800;
+      }
+      .enterprise_info {
+        border-radius: 12px;
+        padding: 10px 2px;
+        background-color: #f5f7f7;
+        width: 66px;
+        margin-bottom: 27px;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        p {
+          color: #f95454;
+          font-size: 12px;
+          font-weight: 800;
+          letter-spacing: 0.28px;
+          text-align: center;
+        }
+      }
+
+      h6 {
+        color: #f95454;
+        font-size: 20px;
+        font-weight: 700;
+        letter-spacing: 0.4px;
+        margin-bottom: 15px;
+        text-align: left;
+      }
+
+      p {
+        color: #313333;
+        font-size: 16px;
+        font-weight: 700;
+        letter-spacing: 0.32px;
+        text-align: left;
+      }
+    }
+
+    .btn__footer {
+      display: flex;
+      margin-top: 40px;
+      justify-content: space-between;
+    }
+  }
+`;
+
+export const NotificationCellCardContainer = styled.div`
+  padding: 10px 20px 20px;
+  background-color: rgba(255, 255, 255, 1);
+  font-family: "Nunito";
+  border-radius: 15px;
+
+  .notification_cell_container {
+    display: flex;
+
+    .logo_section {
+      display: flex;
+      align-items: self-start;
+      justify-content: center;
+      width: 75px;
+
+      p {
+        border-radius: 8px;
+        background: rgba(254, 191, 16, 0.1);
+        padding: 8px;
+      }
+    }
+
+    .nc_details {
+      padding-left: 15px;
+      .error-txt {
+        color: #f95454;
+        font-weight: 800;
+        font-style: italic;
+      }
+
+      h6 {
+        color: #f39b33;
+        font-size: 16px;
+        font-weight: 700;
+        margin-bottom: 8px;
+        text-align: left;
+      }
+
+      p {
+        color: #636666;
+        font-size: 14px;
+        font-weight: 700;
+        text-align: left;
+      }
+    }
+
+    .btn__footer {
+      display: flex;
+      margin-top: 20px;
+      justify-content: space-between;
+    }
+  }
+`;
+
+export const NotificationCellModalContainer = styled.div`
+  /* padding: 25px; */
+  font-family: "Nunito";
+  width: 100%;
+  max-width: 800px;
+`;