l-min-components 1.0.705 → 1.0.708

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.705",
+  "version": "1.0.708",
   "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,15 @@ 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 +238,7 @@ 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") ? (

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;
+`;

package/src/components/deactivated/modal/subscription-expired-modal.jsx

@@ -0,0 +1,210 @@
+import { useState, useEffect } from "react";
+import {
+  CardContainer,
+  CardBody,
+  CardHeader,
+  ModalCardContainer,
+  CloseModalButton,
+  ExpiryCardContainer,
+} from "./index.styled";
+import Modal from "react-modal";
+import ButtonComponent from "../../button";
+import RemoveUser from "./img/removeUser.png"
+import { ErrorBookIcon } from "./img/book";
+import moment from "moment";
+import { toast, ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import { useNavigate } from "react-router-dom";
+
+const SubscriptionExpiredModal = ({
+  subscriptionExpiredModalIsOpen,
+  setSubscriptionExpiredModalIsOpen,
+  getCurrentSubscriptionData,
+}) => {
+  const modalCustomStyles = {
+    overlay: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      zIndex: 9999999999,
+      transition: "opacity 1000ms ease-in-out",
+    },
+    content: {
+      position: "absolute",
+      overflow: "auto",
+      WebkitOverflowScrolling: "scroll",
+      outline: "none",
+      top: "40%",
+      left: "50%",
+      right: "auto",
+      bottom: "auto",
+      marginRight: "-50%",
+      transform: "translate(-50%, -50%)",
+      borderRadius: "30px",
+      border: "none",
+      zIndex: 333333333,
+      background: "transparent",
+      width: "780px",
+    },
+  };
+
+  const navigate = useNavigate();
+  const [countdown, setCountdown] = useState(null);
+
+  // useEffect(() => {
+  //   const targetDate = moment(
+  //     getCurrentSubscriptionData?.data?.grace_period_end,
+  //     "YYYY-MM-DD"
+  //   );
+  //   const interval = setInterval(() => {
+  //     const now = moment();
+  //     const diff = targetDate.diff(now);
+  //     const hours = Math.floor(diff / 3600000);
+  //     const minutes = Math.floor((diff % 3600000) / 60000);
+  //     const seconds = Math.floor((diff % 60000) / 1000);
+
+  //     if (diff <= 0) {
+  //       setCountdown("0h - 0m - 0s");
+  //     } else {
+  //       setCountdown(`${hours}h - ${minutes}m - ${seconds}s`);
+  //     }
+  //   }, 1000);
+
+  //   return () => {
+  //     clearInterval(interval);
+  //   };
+  // }, []);
+
+  const noSubError = () => {
+    toast.error("Error getting your subscription, please try again!");
+  };
+
+  const subId = getCurrentSubscriptionData?.data?.id;
+
+  const handleNavigateRenewal = () => {
+    const host = window.location.hostname;
+    const port = window.location.port ? `:${window.location.port}` : "";
+    const protocol = window.location.protocol;
+    const baseUrl = `${protocol}//${host}${port}`;
+    const renewalPath = "/settings/payment/details/renewal";
+
+    if (subId) {
+      const renewalUrl = `${baseUrl}${renewalPath}?subId=${subId}`;
+      window.location.href = renewalUrl;
+    } else {
+      toast.error("Error getting your subscription, please try again!");
+    }
+  };
+
+  const expiryDate = moment("2024-05-31",
+    "YYYY-MM-DD"); // Replace with your expiry date
+
+const isWithin10Days = moment().add(10, 'days').isSameOrBefore(expiryDate);
+
+if (isWithin10Days) {
+  console.log('Expiry date is within 10 days');
+} else {
+  console.log('Expiry date is more than 10 days away');
+}
+console.log(isWithin10Days)
+
+
+const [daysLeft, setDaysLeft] = useState(null);
+
+useEffect(() => {
+  const targetDate = moment(expiryDate);
+  const now = moment();
+  const diff = targetDate.diff(now, 'days');
+
+  setDaysLeft(diff);
+}, [expiryDate]);
+console.log(daysLeft)
+
+
+  return (
+    <Modal
+      isOpen={subscriptionExpiredModalIsOpen}
+      onRequestClose={() => setSubscriptionExpiredModalIsOpen(false)}
+      style={modalCustomStyles}
+      closeTimeoutMS={1000}
+      ariaHideApp={false}
+      contentLabel="Selected Option"
+      shouldCloseOnOverlayClick={false}
+    >
+      <ModalCardContainer>
+        {/* <CloseModalButton
+          onClick={() => {
+            setSubscriptionExpiredModalIsOpen(false);
+          }}
+        >
+          <IoMdClose />
+        </CloseModalButton> */}
+
+        <ExpiryCardContainer>
+          <CardBody>
+            <div className="expiry_modal_container">
+              <div className="logo_section">
+                <img src={RemoveUser} alt="shield" />
+              </div>
+
+              <div className="expiry_details">
+                <div className="enterprise_info">
+                  <p>
+                    <ErrorBookIcon />
+                  </p>
+                  <p> Enterprise</p>
+                </div>
+
+                <h6>
+                  {" "}
+                  Your subscription to Learngual{" "}
+                  {getCurrentSubscriptionData?.data?.plan_name} has expired{" "}
+                </h6>
+                <p>
+                  Your students and instructors will no longer be able to access
+                  your courses after <br />
+                  <span className="error-txt">{countdown}</span>
+                </p>
+
+                <div className="btn__footer">
+                  <ButtonComponent
+                    text={"Select Plan"}
+                    type="secondary"
+                    height={40}
+                    styles={{
+                      fontSize: "14px",
+                      padding: "14px 9px",
+                      margin: 0,
+                      backgroundColor: "transparent",
+                    }}
+                    onClick={() =>
+                      (window.location.href =
+                        "https://559staging.learngual.com/settings/payment")
+                    }
+                  />
+                  <ButtonComponent
+                    text={"Renew subscription"}
+                    type="submit"
+                    height={40}
+                    styles={{
+                      fontSize: "14px",
+                      padding: "14px 10px",
+                      margin: 0,
+                      boxShadow: "0px 7px 15px rgba(254, 191, 16, 0.25)",
+                    }}
+                    onClick={() => handleNavigateRenewal()}
+                  />
+                </div>
+              </div>
+            </div>
+          </CardBody>
+        </ExpiryCardContainer>
+      </ModalCardContainer>
+    </Modal>
+  );
+};
+
+export default SubscriptionExpiredModal;