l-min-components 1.0.701 → 1.0.708

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;

package/src/components/deactivated/useAccount.js

@@ -0,0 +1,39 @@
+import useAxios from "axios-hooks";
+
+const useAccount = () => {
+
+  // current plan
+  const [{ ...userPlanData }, getUserPlan] = useAxios(
+    {
+      url: `/payment/v1/current_plan/`,
+      method: "GET",
+    },
+
+    {
+      manual: true,
+    }
+  );
+
+  const handleGetUserPlan = async () => {
+    try {
+      await getUserPlan();
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+
+
+  
+
+
+
+  return {
+
+    userPlanData,
+    handleGetUserPlan,
+  
+   
+  };
+};
+export default useAccount;

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   BannerWrapper,
   InstructorContainer,
@@ -7,7 +7,7 @@ import {
   Container,
   Upgrade,
   Users,
-  UploadProgressContainer
+  UploadProgressContainer,
 } from "../styles";
 import Button from "../../button";
 import CircularProgressBar from "../components/progressBar";
@@ -25,76 +25,75 @@ import SliderIcon from "../assets/slider";
 
 /**
  * @param {{
-*  CourseClick: function,
-*  UpgradeClick: function,
-* }} props - properties of graph Component
-*
-*/
-
-const EnterpriseRightBar = ({UpgradeClick, CourseClick}) => {
+ *  CourseClick: function,
+ *  UpgradeClick: function,
+ * }} props - properties of graph Component
+ *
+ */
 
+const EnterpriseRightBar = ({ UpgradeClick, CourseClick, gracePeriod, planState}) => {
+  
   return (
-    <InstructorContainer>   
-    <BannerWrapper>
-      <div className="head_instructor head_enterprise">
-        <h3>Best Course</h3>
-      </div>
-      <NewLanguage>
-        <div className="top_section">
-          <div className="lession_cont">
-            <LessonIcon />
-            <p> 9 lessions</p>
+    <InstructorContainer className={planState === "GRACE PERIOD" ? "grace_period" : ""}>
+      <BannerWrapper>
+        <div className="head_instructor head_enterprise">
+          <h3>Best Course</h3>
+        </div>
+        <NewLanguage>
+          <div className="top_section">
+            <div className="lession_cont">
+              <LessonIcon />
+              <p> 9 lessions</p>
+            </div>
+            <div className="flag_cont">
+              <LessonFlag />
+            </div>
           </div>
-          <div className="flag_cont">
-            <LessonFlag />
 
+          <div className="buttom_section">
+            <p>French for Beginners</p>
           </div>
+        </NewLanguage>
+        <SliderIcon />
+      </BannerWrapper>
+      <RecentAdded>
+        <div className="top_area">
+          <h5>Recently added</h5>
+          <p>See all</p>
         </div>
-
-        <div className="buttom_section">
-          <p>French for Beginners</p>
+        <div className="users_list">
+          <div className="user">
+            <img src={Ellipse} alt="user" />
+          </div>
+          <div className="user">
+            <img src={Ellipse2} alt="user" />
+          </div>
+          <div className="user">
+            <img src={Ellipse3} alt="user" />
+          </div>
+          <div className="user">
+            <img src={Ellipse4} alt="user" />
+          </div>
         </div>
-      </NewLanguage>
-      <SliderIcon />
-    </BannerWrapper>
-    <RecentAdded>
-      <div className="top_area">
-        <h5>Recently added</h5>
-        <p>See all</p>
-      </div>
-      <div className="users_list">
-      <div className="user">
-       <img src={Ellipse} alt="user" />
-      </div>
-      <div className="user">
-        <img src={Ellipse2} alt="user" />
-      </div>
-      <div className="user">
-        <img src={Ellipse3} alt="user" />
-      </div>
-      <div className="user">
-        <img src={Ellipse4} alt="user" />
-      </div>
-      </div>
-      <Button
-        type="primary"
-        text="Create Course"
-        styles={{
-          marginTop: "29px",
-          fontSize: "16px",
-          width: "203px",
-          gap: "8px",
-          padding: "20px 6px", 
-          height: "40px",
-          boxShadow: "0px 10px 20px 0px rgba(254, 191, 16, 0.25)", 
-        }}
-        onClick={CourseClick}
-      />
-    </RecentAdded>
-    
-    <UpgradeComponent UpgradeClick={UpgradeClick} />
-    
-  </InstructorContainer>
+        <Button
+          type="primary"
+          text="Create Course"
+          disabled={planState === "GRACE PERIOD"}
+          styles={{
+            marginTop: "29px",
+            fontSize: "16px",
+            width: "203px",
+            gap: "8px",
+            padding: "20px 6px",
+            height: "40px",
+            boxShadow: "0px 10px 20px 0px rgba(254, 191, 16, 0.25)",
+          }}
+          onClick={CourseClick}
+        />
+      </RecentAdded>
+
+      <UpgradeComponent UpgradeClick={UpgradeClick} gracePeriod={gracePeriod} planState={planState} />
+    </InstructorContainer>
   );
 };
 

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

@@ -7,11 +7,11 @@ import UpgradeIcon from "../assets/Feature.png";
 import EnterpriseUpgrade from "../assets/enterpriseUpgrade.png"
 
 
-const UpgradeComponent = ({UpgradeClick}) => {
+const UpgradeComponent = ({UpgradeClick, gracePeriod, planState}) => {
 
   return (
     
-    <Upgrade>
+    <Upgrade className={planState === "GRACE PERIOD" ? "deactivated" : ""}>
       <div className="container">
        <img src={EnterpriseUpgrade} alt="upgrad box" />
        <div className="upgrade_text">
@@ -22,7 +22,8 @@ const UpgradeComponent = ({UpgradeClick}) => {
        </p>
        <Button
         type="primary"
-        text="Upgrade"
+        text="Buy Slot"
+        disabled={planState === "GRACE PERIOD"}
         styles={{
           marginTop: "12px",
           fontSize: "16px",
@@ -30,6 +31,7 @@ const UpgradeComponent = ({UpgradeClick}) => {
           height: "38.641px",
           gap: "8px",
           padding: "15.457px 30.913px",
+          boxShadow: "0px 10px 20px 0px rgba(254, 191, 16, 0.25)", 
         }}
         onClick={UpgradeClick}
       />