l-min-components 1.0.993 → 1.0.1002

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.993",
+  "version": "1.0.1002",
   "type": "module",
   "files": [
     "src/assets",
@@ -50,12 +50,14 @@
     "react-modal": "^3.16.1",
     "react-player": "^2.15.1",
     "react-router-dom": "^6.8.2",
+    "react-slick": "^0.30.2",
     "react-toastify": "^9.1.3",
     "react-tooltip": "^5.10.1",
     "screenfull": "^6.0.2",
     "slate": "^0.94.0",
     "slate-history": "^0.93.0",
     "slate-react": "^0.94.0",
+    "slick-carousel": "^1.8.1",
     "styled-components": "6.1.1",
     "wavesurfer.js": "^7.1.5"
   },

package/src/components/AppMainLayout/index.jsx

@@ -13,6 +13,7 @@ import {
   SideNav as SideBar,
   SideMenu,
   FullPageLoader,
+  DeveloperBanner
 } from "../";
 import { leftNavMenu, user, sideMenuOptions } from "../../hooks/leftNavMenu";
 import InstructorAccountSwitcher from "../instructorAccountSwitcher";
@@ -186,6 +187,15 @@ const AppMainLayout = () => {
     "Download on google play",
     "Download on apple store",
     "Help",
+    "10% off your next subscription purchase?",
+    "Let's go!",
+    "Get a discount when you upgrade to a custom plan and unlock a new world of building.",
+    "Contact us",
+    "Get more API calls for less with our custom plan",
+    "Upgrade now for a 10% discount.",
+    "Build the future with Learngual!",
+    "Choose our custom plans for more calls and better flexibility.",
+
   ];
 
   const {
@@ -343,7 +353,7 @@ const AppMainLayout = () => {
                         !window.location.pathname.includes("file-manager") ? (
                         <InstructorRightBar />
                       ) : window.location.pathname.includes("developer") ? (
-                        <Banner findText={findText} />
+                        <DeveloperBanner findText={findText} />
                       ) : (
                         <Banner findText={findText} />
                       ))}

package/src/components/banner/developerBanner.jsx

@@ -0,0 +1,127 @@
+import React, { useContext } from "react";
+import { DevBannerWrapper } from "./styles";
+import BannerImg from "./assets/book.png";
+import BannerImg2 from "./assets/pack.png";
+import BannerImg3 from "./assets/globe.png";
+import Button from "../button";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+
+const DeveloperBanner = ({ findText }) => {
+  const settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    autoplay: true,
+    autoplaySpeed: 10000,
+    pauseOnHover: true
+  };
+  return (
+    <DevBannerWrapper>
+      <Slider {...settings}>
+        <div>
+          <div className="dv_main">
+            <img src={BannerImg} alt="Banner" />
+
+            <div className="dev_ban_inner">
+              <p className="dev_banner_title">
+                {findText("10% off your next subscription purchase?")}
+              </p>
+              <p className="dev_banner_subtitle"> {findText("Let's go!")} </p>
+              <p className="dev_banner_txt">
+                {findText(
+                  "Get a discount when you upgrade to a custom plan and unlock a new world of building."
+                )}
+              </p>
+              <Button
+                type="primary"
+                text={findText("Contact us")}
+                styles={{
+                  fontSize: "16px",
+                  padding: "11px 5px",
+                  width: "100%",
+                  gap: "8px",
+                  height: "44px",
+                  marginBottom: "25px",
+                  boxShadow: "0px 10px 20px 0px rgba(254, 191, 16, 0.25)"
+                }}
+              />
+            </div>
+          </div>
+        </div>
+        {/* slider 2 */}
+        <div>
+          <div className="dv_main">
+            <img src={BannerImg2} alt="Banner" />
+
+            <div className="dev_ban_inner">
+              <p className="dev_banner_title" style={{
+                padding: "20px 0 10px"
+              }}>
+                {findText(
+                  "Get more API calls for less with our custom plan"
+                )}
+              </p>
+              <p className="dev_banner_txt">
+                {findText("Upgrade now for a 10% discount.")}
+              </p>
+              <Button
+                type="primary"
+                text={findText("Contact us")}
+                styles={{
+                  fontSize: "16px",
+                  padding: "11px 5px",
+                  width: "100%",
+                  gap: "8px",
+                  height: "44px",
+                  marginTop: "65px",
+                  marginBottom: "25px",
+                  boxShadow: "0px 10px 20px 0px rgba(254, 191, 16, 0.25)"
+                }}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* slider 3 */}
+        <div>
+          <div className="dv_main">
+            <img src={BannerImg3} alt="Banner" />
+
+            <div className="dev_ban_inner">
+              <p className="dev_banner_title" style={{
+                padding: "20px 0 10px"
+              }}>
+                {findText("Build the future with Learngual!")}
+              </p>
+              <p className="dev_banner_txt">
+                {findText(
+                  "Choose our custom plans for more calls and better flexibility."
+                )}
+              </p>
+              <Button
+                type="primary"
+                text={findText("Contact us")}
+                styles={{
+                  fontSize: "16px",
+                  padding: "11px 5px",
+                  width: "100%",
+                  gap: "8px",
+                  height: "44px",
+                  marginTop: "78px",
+                  marginBottom: "25px",
+                  boxShadow: "0px 10px 20px 0px rgba(254, 191, 16, 0.25)"
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      </Slider>
+    </DevBannerWrapper>
+  );
+};
+
+export default DeveloperBanner;

package/src/components/banner/styles/index.jsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { FaArrowRight } from "react-icons/fa";
-import BannerImg from "../assets/Vector19.png"
+import BannerImg from "../assets/Vector19.png";
 
 export const BannerWrapper = styled.div`
   position: relative;
@@ -19,8 +19,13 @@ export const BannerWrapper = styled.div`
   background-repeat: no-repeat;
   background-position: bottom right;
   background-size: contain;
-  border:  1px solid #C6CCCC;
+  border: 1px solid #c6cccc;
 
+  &.bg_dev_banner {
+    border-radius: 20px;
+    background: linear-gradient(180deg, #00c2c2 0%, #005c5c 100%);
+    border: none;
+  }
 `;
 
 export const BannerTitle = styled.h1`
@@ -28,14 +33,13 @@ export const BannerTitle = styled.h1`
   margin: 0;
   font-weight: 800;
   line-height: 42px;
-  color: #00C2C2;
-
+  color: #00c2c2;
 `;
 
 export const BannerSubtitle = styled.p`
   font-size: 18px;
   margin: 29px 0;
-  color: #00C2C2;
+  color: #00c2c2;
   font-weight: 600;
 `;
 
@@ -44,9 +48,9 @@ export const BannerImage = styled.img`
   max-width: 800px;
   margin-bottom: -15px;
   margin-top: -10px;
-  opacity: 2; 
-   display: block;
-   opacity: 1.0;
+  opacity: 2;
+  display: block;
+  opacity: 1;
 `;
 
 export const BannerCTA = styled.button`
@@ -60,7 +64,7 @@ export const BannerCTA = styled.button`
   align-items: center;
   transition: all 0.2s ease-in-out;
   margin: auto 0 10px;
-  opacity: 1.0;
+  opacity: 1;
 
   &:hover {
     background-color: #0062cc;
@@ -79,3 +83,99 @@ export const AbsoluteSVG = styled.svg`
   width: 100%;
   height: auto;
 `;
+
+export const DevBannerWrapper = styled.div`
+  position: relative;
+  max-width: 232px;
+  padding: 42px 10px 47px;
+  overflow: hidden;
+  background-color: #ffffff;
+  border-radius: 36px;
+  border: none;
+  /* height: 638px; */
+
+  .dev_ban_inner {
+    border-radius: 36px;
+    padding: 16px 13px 30px;
+    background: linear-gradient(180deg, #00c2c2 0%, #005c5c 100%);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    height: 575px;
+    width: 182px;
+    margin: 0 auto;
+  }
+
+  .dev_banner_title {
+    color: #febf10;
+    text-align: center;
+    font-family: "Nunito Sans";
+    font-size: 18px;
+    font-weight: 700;
+    letter-spacing: 0.36px;
+    margin-bottom: 10px;
+    margin-top: 220px;
+  }
+
+  .dev_banner_subtitle {
+    color: #febf10;
+    text-align: center;
+    font-family: "Nunito Sans";
+    font-size: 18px;
+    font-weight: 600;
+    letter-spacing: 0.36px;
+    margin-bottom: 20px;
+  }
+  .dev_banner_txt {
+    color: #fff;
+    text-align: center;
+    font-family: "Nunito Sans";
+    font-size: 16px;
+    font-weight: 400;
+    letter-spacing: 0.32px;
+    margin-bottom: 20px;
+  }
+
+  img {
+    width: 203px;
+    position: absolute;
+    top: 16px;
+    z-index: 2;
+  }
+
+  .dv_main {
+    position: relative;
+    /* padding: 0 16px; */
+    height: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .slick-dots li.slick-active button:before,
+  .slick-dots li button:before {
+    content: "";
+    display: none;
+  }
+
+  .slick-dots li.slick-active button {
+    width: 39px !important;
+    height: 5px !important;
+    background: #febf10;
+    border-radius: 0;
+  }
+
+  .slick-dots li button {
+    width: 8px;
+    height: 8px;
+    background: #d9d9d9;
+    border-radius: 100%;
+    padding: 0;
+  }
+
+  .slick-dots li {
+    width: auto;
+    height: auto;
+  }
+`;

package/src/components/index.js

@@ -52,4 +52,5 @@ export { default as AdminCreateRolesPermissions } from "./AdminRolesPermission/c
 export { default as MobileLayout } from "./mobileLayout";
 export { default as useTranslation } from "../hooks/useTranslation";
 export { default as ImageComponent } from "./ImageComponent";
+export { default as DeveloperBanner } from "./banner/developerBanner";
 

package/src/components/messageAddon/InputSection/index.jsx

@@ -1,5 +1,6 @@
 import React, {
   useCallback,
+  useContext,
   useEffect,
   useLayoutEffect,
   useRef,
@@ -23,6 +24,8 @@ import useMessaging from "../hooks/useMessaging";
 import useMedia from "../hooks/useMedia";
 import { getCookie } from "../utils/helpers";
 import InputEmoji from "react-input-emoji";
+import { useLocation } from "react-router-dom";
+import MessagesContext from "../hooks/messagesContext";
 
 /** The input section of an open chat, for sending texts, emojis and audios
  *
@@ -38,21 +41,31 @@ const InputSection = ({
   setNewMessages,
   setIsMessageSending,
 }) => {
+  const { affiliates, courseID } = useContext(MessagesContext);
   const [showEmoji, setShowEmoji] = useState();
   const [inputMethod, setInputMethod] = useState("text"); // text | recorder
-  const [text, setText] = useState({ text: "", user_message: true }); // state for user text
+  const [text, setText] = useState({
+    text: "",
+    // user_message: true
+  }); // state for user text
   const [blobData, setBlobData] = useState({}); //state for audio
   const [recording, setRecording] = useState(false);
+  const { pathname } = useLocation();
+  const accountType = pathname.split("/")[1]?.toLowerCase();
+
   const imageRef = useRef();
   const {
     handleCreateMessage,
     createMessageData,
     handleCreateMessageWithMedia,
     createMessageWithMediaData,
+    handleCreateMessageAffiliate,
+    createMessagePersonalData,
+    handleCreateMessagePersonal,
   } = useMessaging();
   const { handleUploadMedia, uploadMediaData } = useMedia();
 
-  //console.log(text);
+  // console.log(text);
 
   // Handle Send when Enter key pressed
   const handleEnterKey = (e) => {
@@ -79,9 +92,29 @@ const InputSection = ({
     if (inputMethod === "text") {
       // setNewMessages((prev) => [...prev, text]);
       setIsMessageSending(true);
-      setTimeout(() => {
-        handleCreateMessage(userID, text);
-      }, 1000);
+      if (affiliates && accountType === "instructor") {
+        setTimeout(() => {
+          handleCreateMessageAffiliate(userID, text);
+        }, 1000);
+      }
+
+      if (!affiliates && accountType === "instructor") {
+        setTimeout(() => {
+          handleCreateMessage(userID, accountType, text);
+        }, 1000);
+      }
+
+      if (accountType === "enterprise") {
+        setTimeout(() => {
+          handleCreateMessage(userID, accountType, text, courseID);
+        }, 1000);
+      }
+
+      if (accountType === "personal") {
+        setTimeout(() => {
+          handleCreateMessagePersonal(userID, text, courseID);
+        }, 1000);
+      }
     }
   };
 
@@ -120,16 +153,17 @@ const InputSection = ({
 
   //handle update messages state when a message sent successfully for text and audio ends here
 
-  //console.log("media", mediaForm);
-  //console.log("media2", uploadMediaData);
-  //console.log("media3", imageRef);
+  // console.log("media", mediaForm);
+  // console.log("media2", uploadMediaData);
+  // console.log("media3", imageRef);
 
   return (
     <TextMessagePanel>
       <div
         className={cx("text-input-wrapper", {
           "text-mode": inputMethod === "text",
-        })}>
+        })}
+      >
         {inputMethod === "text" && (
           <>
             <div className="icon-box">
@@ -144,7 +178,7 @@ const InputSection = ({
                 accept="image/*"
                 style={{ display: "none" }}
                 onChange={async (e) => {
-                  //console.log("media", e);
+                  console.log("media", e);
                   if (e.target.files) {
                     const file = e.target.files[0];
                     let imageDataUrl = await readFile(file);
@@ -159,7 +193,8 @@ const InputSection = ({
               <span
                 onClick={(e) => {
                   setInputMethod("recorder");
-                }}>
+                }}
+              >
                 <MicrophoneIcon />
               </span>
             </div>
@@ -201,7 +236,8 @@ const InputSection = ({
         disabled={
           !text.text &&
           (inputMethod === "text" || recording || createMessageData?.loading)
-        }>
+        }
+      >
         <SendIcon />
       </button>
     </TextMessagePanel>
@@ -302,7 +338,8 @@ const Recorder = ({
             className="icon"
             onClick={() => {
               waveSurfer.current.playPause();
-            }}>
+            }}
+          >
             <RecorderPlayIcon />
           </span>
         )}
@@ -312,7 +349,8 @@ const Recorder = ({
             className="icon"
             onClick={
               () => setInputMethod("text") // resetting input method, everything about recorder shutdown
-            }>
+            }
+          >
             <Bin />
           </span>
         )}

package/src/components/messageAddon/assets/svg/noMessage.jsx

@@ -1,50 +1,55 @@
 import React from "react";
 export const NoMessage = ({ width, height, fill }) => (
   <svg
-    width={width || "65"}
-    height={height || "65"}
-    viewBox="0 0 65 65"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    width={width || "80"}
+    height={width || "74"}
+    viewBox="0 0 80 74"
+    fill="none"
   >
-    <g id="vuesax/linear/message">
-      <g id="vuesax/linear/message_2">
-        <g id="message">
-          <path
-            id="Vector"
-            d="M23.1423 50.7943H21.8056C11.1123 50.7943 5.76562 48.121 5.76562 34.7543V21.3877C5.76562 10.6943 11.1123 5.34766 21.8056 5.34766H43.1923C53.8856 5.34766 59.2323 10.6943 59.2323 21.3877V34.7543C59.2323 45.4477 53.8856 50.7943 43.1923 50.7943H41.8556C41.0269 50.7943 40.2249 51.1953 39.717 51.8637L35.707 57.2103C33.9426 59.5629 31.0554 59.5629 29.291 57.2103L25.281 51.8637C24.8532 51.2755 23.8641 50.7943 23.1423 50.7943Z"
-            stroke="#C6CCCC"
-            stroke-width="4.40659"
-            stroke-miterlimit="10"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            id="Vector_2"
-            d="M43.197 29.407H43.221"
-            stroke="#C6CCCC"
-            stroke-width="5.87546"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            id="Vector_3"
-            d="M32.5017 29.407H32.5257"
-            stroke="#C6CCCC"
-            stroke-width="5.87546"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            id="Vector_4"
-            d="M21.8064 29.407H21.8304"
-            stroke="#C6CCCC"
-            stroke-width="5.87546"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </g>
-      </g>
-    </g>
+    <path
+      d="M39.4173 5.05469C18.2866 5.05469 1.15332 19.2352 1.15332 36.7308C1.15332 44.7106 4.71889 52.0007 10.602 57.5737C10.9518 57.9057 11.196 58.3334 11.3041 58.8034C11.4123 59.2734 11.3795 59.7648 11.21 60.2163L7.69148 69.6824C7.52971 70.1326 7.50157 70.62 7.61043 71.0859C7.71929 71.5518 7.96048 71.9763 8.30502 72.3082C8.64956 72.6402 9.08272 72.8655 9.55233 72.9569C10.0219 73.0484 10.508 73.0021 10.9519 72.8237L25.4377 66.814C25.9437 66.6012 26.5067 66.5654 27.0356 66.7123C31.0652 67.8443 35.2317 68.4146 39.4173 68.407C60.5504 68.407 77.6837 54.2264 77.6837 36.7333C77.6837 19.2402 60.5504 5.05469 39.4173 5.05469Z"
+      fill="white"
+      stroke="#6D6E71"
+      stroke-width="1.98503"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M65.9471 26.8004C73.0717 26.8004 78.8473 21.0248 78.8473 13.9002C78.8473 6.77563 73.0717 1 65.9471 1C58.8225 1 53.0469 6.77563 53.0469 13.9002C53.0469 21.0248 58.8225 26.8004 65.9471 26.8004Z"
+      fill="#FABD1C"
+      stroke="#9E705B"
+      stroke-width="1.98503"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M65.9457 22.3426C64.5955 22.3407 63.3012 21.8033 62.3467 20.8483C61.3922 19.8933 60.8554 18.5987 60.8541 17.2485V10.5491C60.8167 9.85791 60.9206 9.16644 61.1593 8.51677C61.398 7.86709 61.7667 7.27289 62.2427 6.77041C62.7187 6.26794 63.2921 5.86772 63.9279 5.59423C64.5638 5.32073 65.2486 5.17969 65.9408 5.17969C66.6329 5.17969 67.3178 5.32073 67.9537 5.59423C68.5895 5.86772 69.1629 6.26794 69.6389 6.77041C70.1149 7.27289 70.4835 7.86709 70.7223 8.51677C70.961 9.16644 71.0648 9.85791 71.0274 10.5491V17.2485C71.0261 18.597 70.4907 19.8901 69.5383 20.8448C68.586 21.7995 67.2942 22.338 65.9457 22.3426ZM65.9457 8.19928C65.321 8.20059 64.7222 8.44936 64.2804 8.89114C63.8386 9.33292 63.5898 9.93173 63.5885 10.5565V17.256C63.5885 17.8812 63.8369 18.4807 64.2789 18.9228C64.721 19.3649 65.3206 19.6132 65.9457 19.6132C66.5709 19.6132 67.1705 19.3649 67.6125 18.9228C68.0546 18.4807 68.303 17.8812 68.303 17.256V10.5565C68.3036 10.2464 68.2432 9.93926 68.125 9.65255C68.0069 9.36585 67.8334 9.10524 67.6145 8.88563C67.3956 8.66602 67.1355 8.49169 66.8491 8.37265C66.5628 8.25361 66.2558 8.19215 65.9457 8.19183V8.19928Z"
+      fill="white"
+    />
+    <path
+      d="M19.5276 38.7543C21.3474 38.7543 22.8227 37.2791 22.8227 35.4592C22.8227 33.6394 21.3474 32.1641 19.5276 32.1641C17.7077 32.1641 16.2324 33.6394 16.2324 35.4592C16.2324 37.2791 17.7077 38.7543 19.5276 38.7543Z"
+      fill="#29BDBD"
+      stroke="#0F7D7E"
+      stroke-width="0.779125"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M39.4182 38.7543C41.238 38.7543 42.7133 37.2791 42.7133 35.4592C42.7133 33.6394 41.238 32.1641 39.4182 32.1641C37.5983 32.1641 36.123 33.6394 36.123 35.4592C36.123 37.2791 37.5983 38.7543 39.4182 38.7543Z"
+      fill="#29BDBD"
+      stroke="#0F7D7E"
+      stroke-width="0.779125"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M57.5579 38.7543C59.3777 38.7543 60.853 37.2791 60.853 35.4592C60.853 33.6394 59.3777 32.1641 57.5579 32.1641C55.738 32.1641 54.2627 33.6394 54.2627 35.4592C54.2627 37.2791 55.738 38.7543 57.5579 38.7543Z"
+      fill="#29BDBD"
+      stroke="#0F7D7E"
+      stroke-width="0.779125"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
   </svg>
 );

package/src/components/messageAddon/hooks/messagesContext.js

@@ -1,10 +1,15 @@
-import React, { createContext, useState } from "react";
+import { createContext, useState } from "react";
 const MessagesContext = createContext();
 
 export const useMessagesContext = () => {
   const [roomID, setRoomID] = useState("");
+  const [courseID, setCourseID] = useState("");
   const [userID, setUserID] = useState("");
+  const [receiverID, setReceiverID] = useState("");
   const [userChatList, setUserChatList] = useState([]);
+  const [friendRooms, setFriendRooms] = useState(true);
+  const affiliates = localStorage?.getItem("affiliates");
+
 
   return {
     roomID,
@@ -13,6 +18,13 @@ export const useMessagesContext = () => {
     setUserID,
     userChatList,
     setUserChatList,
+    courseID,
+    setCourseID,
+    receiverID,
+    setReceiverID,
+    friendRooms,
+    setFriendRooms,
+    affiliates
   };
 };
 

package/src/components/messageAddon/hooks/useMedia.js

@@ -16,7 +16,7 @@ const useMedia = () => {
         url: `/media/v1/streams/files`,
       });
     } catch (err) {
-      //console.log(err);
+      console.log(err);
     }
   };
 
@@ -35,7 +35,7 @@ const useMedia = () => {
         url: `/media/v1/streams/files/${id}`,
       });
     } catch (err) {
-      //console.log(err);
+      console.log(err);
     }
   };
 
@@ -43,7 +43,7 @@ const useMedia = () => {
   const [{ ...uploadMediaData }, uploadMedia] = useAxios(
     {
       method: "POST",
-      url: `/media/v1/streams/files/`,
+      url: `/media/v1/enterprise/files/`,
     },
     {
       manual: true,
@@ -53,8 +53,8 @@ const useMedia = () => {
   const handleUploadMedia = async (files) => {
     try {
       if (files) {
-        //console.log(files);
-        // //console.log("files", files);
+        console.log(files);
+        // console.log("files", files);
 
         // const formdata = new FormData();
         // formdata.append("upload", files.upload);
@@ -64,7 +64,7 @@ const useMedia = () => {
         return false;
       }
     } catch (err) {
-      //console.log(err);
+      console.log(err);
     }
   };