Merge pull request #615 from tekdi/main-learner

Main learner qa

Author: rushi-tekdi

apps/learner-web-app/public/images/settings.png

@@ -10,12 +10,22 @@ import { getTenantInfo } from '@learner/utils/API/ProgramService';
 import ContentComponent from '@learner/components/Content/Content';
 import { useTranslation } from '@shared-lib';
 import { checkAuth } from '@shared-lib-v2/utils/AuthService';
+import { CompleteProfileBanner } from '@learner/components/CompleteProfileBanner/CompleteProfileBanner';
+import { profileComplitionCheck } from '@learner/utils/API/userService';
 
 const MyComponent: React.FC = () => {
   const { t } = useTranslation();
   const [filter, setFilter] = useState({});
   const [isLogin, setIsLogin] = useState<boolean | null>(null);
+  const [isProfileCard, setIsProfileCard] = useState(false);
 
+  useEffect(() => {
+    const fetchProfileInfo = async () => {
+      const result = await profileComplitionCheck();
+      setIsProfileCard(!result);
+    };
+    fetchProfileInfo();
+  }, []);
   useEffect(() => {
     const fetchTenantInfo = async () => {
       if (checkAuth()) {
@@ -39,6 +49,8 @@ const MyComponent: React.FC = () => {
 
   return (
     <Layout isLoadingChildren={isLogin === null}>
+      {isProfileCard && <CompleteProfileBanner />}
+
       {isLogin && (
         <>
           <Grid container style={gredientStyle}>

apps/learner-web-app/src/app/content/page.tsx

@@ -53,7 +53,7 @@ const LoginPage = () => {
 
   const handleForgotPassword = () => {
     localStorage.setItem('loginRoute', '/login');
-    router.push('/forget-password');
+    router.push('/password-forget');
   };
   const handleLogin = async (data: {
     username: string;

apps/learner-web-app/src/app/login/page.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+//build issue fix for  ⨯ useSearchParams() should be wrapped in a suspense boundary at page
+import { Suspense } from 'react';
+import EditProfile from '@learner/components/EditProfile/EditProfile';
+import { useSearchParams } from 'next/navigation';
+
+type UserAccount = {
+  name: string;
+  username: string;
+};
+const ProfileComplitionPage = () => {
+  const searchParams = useSearchParams();
+  const isComplition = searchParams.get('isComplition');
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <EditProfile completeProfile={isComplition ? true : false} />
+    </Suspense>
+  );
+};
+
+export default ProfileComplitionPage;

apps/learner-web-app/src/app/profile-complition/page.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { Box } from '@mui/material';
+import Header from '@learner/components/Header/Header';
+import UserProfileCard from '@learner/components/UserProfileCard/UserProfileCard';
+import Layout from '../../components/Layout';
+const ProfilePage = () => {
+  return (
+    <Layout>
+      {/* <Header /> */}
+      <UserProfileCard />
+    </Layout>
+  );
+};
+
+export default ProfilePage;

apps/learner-web-app/src/app/profile/page.tsx

@@ -49,7 +49,7 @@ const RegisterUser = () => {
     useState<boolean>(false);
 
   const [otpmodal, setOtpModal] = useState(false);
-  const [otp, setOtp] = useState<string[]>(['', '', '', '', '', '']);
+  const [otp, setOtp] = useState<string[]>(['', '', '', '']);
   const [hash, setHash] = useState<string>('');
   const localFormData = JSON.parse(localStorage.getItem('formData') || '{}');
   const [formData, setFormData] = useState<any>(localFormData);
@@ -113,7 +113,9 @@ const RegisterUser = () => {
         delete responseForm?.schema?.properties.confirm_password;
         delete responseForm?.schema?.properties.username;
         delete responseForm?.schema?.properties.program;
-
+        delete responseForm?.schema?.properties.batch;
+        delete responseForm?.schema?.properties.center;
+        responseForm?.schema?.required.pop('batch');
         //unit name is missing from required so handled from frotnend
         let alterSchema = responseForm?.schema;
         let alterUISchema = responseForm?.uiSchema;
@@ -268,7 +270,7 @@ const RegisterUser = () => {
   };
   const handleOTPModal = () => {
     setOtpModal(false);
-    setOtp(['', '', '', '', '', '']);
+    setOtp(['', '', '', '']);
   };
   const onCreateAnotherAccount = async () => {
     setAccountExistModal(false);
@@ -301,7 +303,7 @@ const RegisterUser = () => {
     } catch (error) {
       showToastMessage('Please enter valid otp', 'error');
     } finally {
-      setOtp(['', '', '', '', '', '']);
+      setOtp(['', '', '', '']);
     }
   };
   const onResend = async () => {

apps/learner-web-app/src/app/registration/RegisterUser.tsx

@@ -0,0 +1,45 @@
+import { Box, Button, Typography, Paper } from '@mui/material';
+import { useRouter } from 'next/navigation';
+
+export const CompleteProfileBanner = () => {
+  const router = useRouter();
+  const handleCompleteProfileClick = () => {
+    router.push('/profile-complition?isComplition=true');
+  };
+  return (
+    <Paper
+      elevation={2}
+      sx={{
+        backgroundColor: '#FFE08A', // light yellow
+        padding: 2,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        borderRadius: 2,
+      }}
+    >
+      <Typography variant="body1" sx={{ fontWeight: 500 }}>
+        Complete your profile so we can guide you better on your learning
+        journey
+      </Typography>
+      <Button
+        onClick={handleCompleteProfileClick}
+        variant="contained"
+        sx={{
+          backgroundColor: '#FFC400', // yellow button
+          color: '#000',
+          fontWeight: 600,
+          paddingX: 3,
+          paddingY: 1,
+          borderRadius: 5,
+          boxShadow: '0px 3px 5px rgba(0, 0, 0, 0.2)',
+          '&:hover': {
+            backgroundColor: '#FFB300', // darker on hover
+          },
+        }}
+      >
+        Complete Profile
+      </Button>
+    </Paper>
+  );
+};

apps/learner-web-app/src/components/CompleteProfileBanner/CompleteProfileBanner.tsx

@@ -40,6 +40,11 @@ const LTwoCourse: React.FC<LTwoCourseProps> = ({ onSubmit }) => {
     setSelectedTopic(event.target.value);
   };
 
+  const handleClose = () => {
+    setIsModalOpen(false);
+    setCount(0);
+  };
+
   return (
     <>
       <Typography variant="h1" gutterBottom sx={{ color: '#78590C' }}>
@@ -55,9 +60,15 @@ const LTwoCourse: React.FC<LTwoCourseProps> = ({ onSubmit }) => {
           display: 'flex',
           justifyContent: 'space-between',
           alignItems: 'center',
+          '@media (max-width: 600px)': {
+            flexDirection: 'column',
+            alignItems: 'center',
+          },
         }}
       >
-        <Box sx={{ width: '38%' }}>
+        <Box
+          sx={{ width: '38%', '@media (max-width: 600px)': { width: '100%' } }}
+        >
           <Typography variant="h1" sx={{ color: '#1F1B13' }} gutterBottom>
             {t('LEARNER_APP.L_TWO_COURSE.DESCRIPTION')}
           </Typography>
@@ -79,7 +90,7 @@ const LTwoCourse: React.FC<LTwoCourseProps> = ({ onSubmit }) => {
           <CommonModal
             handleSubmit={handleSubmit}
             isOpen={isModalOpen}
-            onClose={() => setIsModalOpen(false)}
+            onClose={handleClose}
             submitText={t('LEARNER_APP.L_TWO_COURSE.SUBMIT_BUTTON')}
           >
             <LevelUp
@@ -91,7 +102,7 @@ const LTwoCourse: React.FC<LTwoCourseProps> = ({ onSubmit }) => {
           <CommonModal
             handleSubmit={handleCloseResponse}
             isOpen={isModalOpen}
-            onClose={() => setIsModalOpen(false)}
+            onClose={handleClose}
             submitText={t('LEARNER_APP.L_TWO_COURSE.OKAY_BUTTON')}
           >
             <ResponseRecorded />