Merge pull request #218 from Sunbird-ALL/all-1.3-tn-dev-hotfix

All 1.3 tn dev hotfix
tekdi · Nov 21, 2024 · 0f3154d · 0f3154d
2 parents f77e5b4 + 09300ca
commit 0f3154d
Show file tree

Hide file tree

Showing 9 changed files with 143 additions and 41 deletions.
diff --git a/.github/workflows/all-app-sandbox.yml b/.github/workflows/all-app-sandbox.yml
@@ -77,6 +77,8 @@ jobs:
           REACT_APP_LANGUAGES: ${{ vars.REACT_APP_LANGUAGES }}
           REACT_APP_AWS_ACCESS_KEY_ID: ${{ secrets.REACT_APP_AWS_ACCESS_KEY_ID }}
           REACT_APP_AWS_SECRET_ACCESS_KEY: ${{ secrets.REACT_APP_AWS_SECRET_ACCESS_KEY }}
+          REACT_APP_SHOW_HELP_VIDEO: ${{ vars.REACT_APP_SHOW_HELP_VIDEO }}
+          REACT_APP_SHOW_HELP_VIDEO_LINK: ${{ vars.REACT_APP_SHOW_HELP_VIDEO_LINK }}
           CI: false # Disabling CI to not treat warnings as errors
         run: npm run build
 

diff --git a/.github/workflows/all-dev-rig.yml b/.github/workflows/all-dev-rig.yml
@@ -77,6 +77,8 @@ jobs:
           REACT_APP_LANGUAGES: ${{ vars.REACT_APP_LANGUAGES }}
           REACT_APP_AWS_ACCESS_KEY_ID: ${{ secrets.REACT_APP_AWS_ACCESS_KEY_ID }}
           REACT_APP_AWS_SECRET_ACCESS_KEY: ${{ secrets.REACT_APP_AWS_SECRET_ACCESS_KEY }}
+          REACT_APP_SHOW_HELP_VIDEO: ${{ vars.REACT_APP_SHOW_HELP_VIDEO }}
+          REACT_APP_SHOW_HELP_VIDEO_LINK: ${{ vars.REACT_APP_SHOW_HELP_VIDEO_LINK }}
           CI: false # Disabling CI to not treat warnings as errors
         run: npm run build
 

diff --git a/.github/workflows/all-dev-tn-new.yml b/.github/workflows/all-dev-tn-new.yml
@@ -73,6 +73,8 @@ jobs:
           REACT_APP_LANGUAGES: ${{ vars.REACT_APP_LANGUAGES }}
           REACT_APP_AWS_ACCESS_KEY_ID: ${{ secrets.REACT_APP_AWS_ACCESS_KEY_ID }}
           REACT_APP_AWS_SECRET_ACCESS_KEY: ${{ secrets.REACT_APP_AWS_SECRET_ACCESS_KEY }}
+          REACT_APP_SHOW_HELP_VIDEO: ${{ vars.REACT_APP_SHOW_HELP_VIDEO }}
+          REACT_APP_SHOW_HELP_VIDEO_LINK: ${{ vars.REACT_APP_SHOW_HELP_VIDEO_LINK }}
           CI: false # Disabling CI to not treat warnings as errors
         run: npm run build
 

diff --git a/.github/workflows/all-dev-tn.yml b/.github/workflows/all-dev-tn.yml
@@ -73,6 +73,8 @@ jobs:
           REACT_APP_LANGUAGES: ${{ vars.REACT_APP_LANGUAGES }}
           REACT_APP_AWS_ACCESS_KEY_ID: ${{ secrets.REACT_APP_AWS_ACCESS_KEY_ID }}
           REACT_APP_AWS_SECRET_ACCESS_KEY: ${{ secrets.REACT_APP_AWS_SECRET_ACCESS_KEY }}
+          REACT_APP_SHOW_HELP_VIDEO:${{ vars.REACT_APP_SHOW_HELP_VIDEO }}
+          REACT_APP_SHOW_HELP_VIDEO_LINK:${{ vars.REACT_APP_SHOW_HELP_VIDEO_LINK }}
           CI: false # Disabling CI to not treat warnings as errors
         run: npm run build
 

diff --git a/.github/workflows/all-prod-rig.yml b/.github/workflows/all-prod-rig.yml
@@ -77,6 +77,8 @@ jobs:
           REACT_APP_LANGUAGES: ${{ vars.REACT_APP_LANGUAGES }}
           REACT_APP_AWS_ACCESS_KEY_ID: ${{ secrets.REACT_APP_AWS_ACCESS_KEY_ID }}
           REACT_APP_AWS_SECRET_ACCESS_KEY: ${{ secrets.REACT_APP_AWS_SECRET_ACCESS_KEY }}
+          REACT_APP_SHOW_HELP_VIDEO: ${{ vars.REACT_APP_SHOW_HELP_VIDEO }}
+          REACT_APP_SHOW_HELP_VIDEO_LINK: ${{ vars.REACT_APP_SHOW_HELP_VIDEO_LINK }}
           CI: false # Disabling CI to not treat warnings as errors
         run: npm run build
 

diff --git a/.github/workflows/all-prod-tn.yml b/.github/workflows/all-prod-tn.yml
@@ -75,6 +75,8 @@ jobs:
           REACT_APP_IS_APP_IFRAME: ${{ vars.REACT_APP_IS_APP_IFRAME }}
           REACT_APP_IS_IN_APP_AUTHORISATION: ${{ vars.REACT_APP_IS_IN_APP_AUTHORISATION }}
           REACT_APP_LANGUAGES: ${{ vars.REACT_APP_LANGUAGES }}
+          REACT_APP_SHOW_HELP_VIDEO: ${{ vars.REACT_APP_SHOW_HELP_VIDEO }}
+          REACT_APP_SHOW_HELP_VIDEO_LINK: ${{ vars.REACT_APP_SHOW_HELP_VIDEO_LINK }}
           CI: false  # Disabling CI to not treat warnings as errors
         run: npm run build
 

diff --git a/.github/workflows/all-staging-tn.yml b/.github/workflows/all-staging-tn.yml
@@ -77,6 +77,8 @@ jobs:
           REACT_APP_LANGUAGES: ${{ vars.REACT_APP_LANGUAGES }}
           REACT_APP_AWS_ACCESS_KEY_ID: ${{ secrets.REACT_APP_AWS_ACCESS_KEY_ID }}
           REACT_APP_AWS_SECRET_ACCESS_KEY: ${{ secrets.REACT_APP_AWS_SECRET_ACCESS_KEY }}
+          REACT_APP_SHOW_HELP_VIDEO: ${{ vars.REACT_APP_SHOW_HELP_VIDEO }}
+          REACT_APP_SHOW_HELP_VIDEO_LINK: ${{ vars.REACT_APP_SHOW_HELP_VIDEO_LINK }}
           CI: false # Disabling CI to not treat warnings as errors
         run: npm run build
 

diff --git a/src/assets/help.png b/src/assets/help.png
diff --git a/src/components/Assesment/Assesment.jsx b/src/components/Assesment/Assesment.jsx
@@ -6,6 +6,7 @@ import {
   IconButton,
   Tooltip,
   Typography,
+  Dialog,
 } from "../../../node_modules/@mui/material/index";
 import LogoutImg from "../../assets/images/logout.svg";
 import { styled } from "@mui/material/styles";
@@ -22,6 +23,9 @@ import {
 import practicebg from "../../assets/images/practice-bg.svg";
 import { useNavigate } from "../../../node_modules/react-router-dom/dist/index";
 import { useEffect, useState } from "react";
+import HelpLogo from "../../assets/help.png";
+import CloseIcon from "@mui/icons-material/Close";
+
 import axios from "../../../node_modules/axios/index";
 // import { useDispatch } from 'react-redux';
 import { setVirtualId } from "../../store/slices/user.slice";
@@ -643,6 +647,16 @@ const Assesment = ({ discoverStart }) => {
 
   const { virtualId } = useSelector((state) => state.user);
 
+  const [isVideoOpen, setIsVideoOpen] = useState(false);
+
+  const handleOpenVideo = () => {
+    setIsVideoOpen(true);
+  };
+
+  const handleCloseVideo = () => {
+    setIsVideoOpen(false);
+  };
+
   const navigate = useNavigate();
   const handleRedirect = () => {
     const profileName = getLocalData("profileName");
@@ -702,45 +716,62 @@ const Assesment = ({ discoverStart }) => {
           <ProfileHeader
             {...{ level, lang, setOpenLangModal, points, setOpenMessageDialog }}
           />
-          <Box
-            sx={{
-              position: "absolute",
-              bottom: 60,
-              right: 0,
-              width: "237px",
-              height: "112px",
-              background: "rgba(255, 255, 255, 0.2)",
-              borderRadius: "20px 0px 0px 20px",
-              backdropFilter: "blur(3px)",
-            }}
-          >
+          <Box>
+            {process.env.REACT_APP_SHOW_HELP_VIDEO === "true" && (
+              <Box
+                onClick={handleOpenVideo}
+                sx={{
+                  position: "absolute",
+                  bottom: 40,
+                  right: 80,
+                  width: "237px",
+                  height: "112px",
+                  cursor: "pointer",
+                }}
+              >
+                <img src={HelpLogo} alt="help_video_link" />
+              </Box>
+            )}
             <Box
               sx={{
-                width: "165px",
-                height: "64px",
-                background: levelConfig[level].color,
-                borderRadius: "10px",
-                margin: "24px 48px 24px 24px",
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                cursor: "pointer",
-                boxShadow: `3px 3px 10px ${levelConfig[level].color}80`,
+                position: "absolute",
+                bottom: 60,
+                right: 0,
+                width: "237px",
+                height: "112px",
+                background: "rgba(255, 255, 255, 0.2)",
+                borderRadius: "20px 0px 0px 20px",
+                backdropFilter: "blur(3px)",
               }}
-              onClick={handleRedirect}
             >
-              <span
-                style={{
-                  color: "#F0EEEE",
-                  fontWeight: 600,
-                  fontSize: "20px",
-                  fontFamily: "Quicksand",
-                  lineHeight: "25px",
-                  textShadow: "#000 1px 0 10px",
+              <Box
+                sx={{
+                  width: "165px",
+                  height: "64px",
+                  background: levelConfig[level].color,
+                  borderRadius: "10px",
+                  margin: "24px 48px 24px 24px",
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  cursor: "pointer",
+                  boxShadow: `3px 3px 10px ${levelConfig[level].color}80`,
                 }}
+                onClick={handleRedirect}
               >
-                {`Start Level ${level}`}
-              </span>
+                <span
+                  style={{
+                    color: "#F0EEEE",
+                    fontWeight: 600,
+                    fontSize: "20px",
+                    fontFamily: "Quicksand",
+                    lineHeight: "25px",
+                    textShadow: "#000 1px 0 10px",
+                  }}
+                >
+                  {`Start Level ${level}`}
+                </span>
+              </Box>
             </Box>
           </Box>
         </Box>
@@ -797,18 +828,75 @@ const Assesment = ({ discoverStart }) => {
                   : "Take the assessment to discover your level"}
               </Typography>
             </Box>
-            <Box
-              sx={{
-                cursor: "pointer",
-                mt: { xs: 1, md: 2 },
-              }}
-              onClick={handleRedirect}
-            >
-              <StartAssessmentButton />
+            <Box sx={{ display: "flex", justifyContent: "center" }}>
+              {process.env.REACT_APP_SHOW_HELP_VIDEO === "true" && (
+                <Box
+                  onClick={handleOpenVideo}
+                  sx={{
+                    mt: { xs: 1, md: 1 },
+                    mr: { xs: 2, md: 2 },
+                    cursor: "pointer",
+                    textAlign: "center",
+                  }}
+                >
+                  <img src={HelpLogo} alt="help_video_link" />
+                </Box>
+              )}
+              <Box
+                sx={{
+                  cursor: "pointer",
+                  mt: { xs: 1, md: 2 },
+                }}
+                onClick={handleRedirect}
+              >
+                <StartAssessmentButton />
+              </Box>
             </Box>
           </Box>
         </MainLayout>
       )}
+      {/* Video Modal */}
+      <Dialog
+        open={isVideoOpen}
+        onClose={handleCloseVideo}
+        maxWidth="lg"
+        fullWidth
+      >
+        <Box
+          sx={{
+            position: "relative",
+            width: "100%",
+            paddingTop: "56.25%", // Maintain 16:9 aspect ratio
+            backgroundColor: "black", // Optional: Ensure a dark background
+          }}
+        >
+          <iframe
+            src={process.env.REACT_APP_SHOW_HELP_VIDEO_LINK}
+            title="YouTube video"
+            frameBorder="0"
+            allow="autoplay; encrypted-media"
+            allowFullScreen
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+            }}
+          />
+        </Box>
+        <IconButton
+          onClick={handleCloseVideo}
+          sx={{
+            position: "absolute",
+            top: 8,
+            right: 8,
+            zIndex: 1,
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      </Dialog>
     </>
   );
 };