Merge pull request #512 from EscolaLMS/feature/REK-59

fixed consultations tabs duplicates, mobile consultations links
EscolaLMS · Nov 22, 2024 · 846a0c8 · 846a0c8
2 parents d4c159c + 9b79a85
commit 846a0c8
Show file tree

Hide file tree

Showing 17 changed files with 146 additions and 55 deletions.
diff --git a/package.json b/package.json
@@ -48,7 +48,7 @@
     "lodash.debounce": "^4.0.8",
     "rc-drawer": "^7.1.0",
     "react": "^18.2.0",
-    "react-datepicker": "^4.12.0",
+    "react-datepicker": "^7.5.0",
     "react-device-detect": "^2.2.2",
     "react-dom": "^18.2.0",
     "react-grid-system": "^8.1.5",

diff --git a/src/components/Book/BookTermModal/ProposedTermsContent/index.tsx b/src/components/Book/BookTermModal/ProposedTermsContent/index.tsx
@@ -54,8 +54,8 @@ const ProposedTermsContent = ({ consultation, onClose }: Props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const onChange = (date: Date) => {
-    setSelectedDay(date);
+  const onChange = (date: Date | null) => {
+    date && setSelectedDay(date);
     setSelectedTime(null);
   };
 

diff --git a/src/components/Book/BookTermModal/UserSelectDatePicker/index.tsx b/src/components/Book/BookTermModal/UserSelectDatePicker/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useContext, useState } from "react";
+import { useCallback, useContext, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { API } from "@escolalms/sdk/lib";
 import DatePicker from "@/components/Common/DatePicker";
@@ -8,6 +8,7 @@ import ModalTitle from "@/components/Common/StyledTitle/ModalTitle";
 import SelectedTermContent from "../SelectedTermContent";
 import { ProfileConsultationsContext } from "@/components/Profile/ProfileConsultations/ProfileConsultationsProvider";
 import { toast } from "@/utils/toast";
+import { setHours, setMinutes, isSameDay } from "date-fns";
 
 interface Props {
   consultation: API.Consultation & {
@@ -17,7 +18,7 @@ interface Props {
 }
 
 const UserSelectDatePicker = ({ consultation, onClose }: Props) => {
-  const [selectedDate, setSelectedDay] = useState<Date | null>(null);
+  const [selectedDate, setSelectedDay] = useState<Date | null>(new Date());
   const { bookConsultationTerm, changeConsultationTerm } =
     useContext(EscolaLMSContext);
   const [loading, setLoading] = useState(false);
@@ -30,10 +31,20 @@ const UserSelectDatePicker = ({ consultation, onClose }: Props) => {
   const isApproved = consultation.executed_status === "approved";
   const isRejected = consultation.executed_status === "reject";
 
-  const onChange = (date: Date) => {
-    setSelectedDay(date);
+  const onChange = (date: Date | null) => {
+    date && setSelectedDay(date);
   };
 
+  const minHours = useMemo(() => {
+    const now = new Date();
+
+    if (selectedDate && isSameDay(selectedDate, now)) {
+      return now;
+    } else {
+      return setHours(setMinutes(new Date(), 0), 0);
+    }
+  }, [selectedDate]);
+
   const close = useCallback(() => {
     setShowBookTermSuccess(true);
     onClose();
@@ -100,6 +111,8 @@ const UserSelectDatePicker = ({ consultation, onClose }: Props) => {
         onChange={onChange}
         selectedDate={selectedDate}
         minDate={new Date()}
+        minTime={minHours}
+        maxTime={setHours(setMinutes(new Date(), 59), 23)}
         showTimeInput
         timeInputLabel={`${t("Time")}: `}
       />

diff --git a/src/components/Cart/CartSuccess/index.tsx b/src/components/Cart/CartSuccess/index.tsx
@@ -75,11 +75,15 @@ const CartSuccess = () => {
             <Text size="16" className="cart-success-text">
               {t("Cart.ThankYouText")}
             </Text>
+          </div>
+          <div>
             <Link to={routeRoutes.myProfile}>
               <Text size="16">{t("Navbar.MyCourses")}</Text>
             </Link>
+            <Link to={routeRoutes.myConsultations}>
+              <Text size="16">{t("Navbar.MyConsultations")}</Text>
+            </Link>
           </div>
-
           <div>
             <Text size="16">{t("Cart.Status")}</Text>{" "}
             <Link to={routeRoutes.myOrders}>

diff --git a/src/components/Common/DatePicker/index.tsx b/src/components/Common/DatePicker/index.tsx
@@ -9,12 +9,14 @@ registerLocale("en", en);
 
 interface Props {
   selectedDate: Date | null;
-  onChange: (date: Date) => void;
+  onChange: (date: Date | null) => void;
   includeDates?: Date[];
   includeTimes?: Date[];
-  minDate?: Date | null;
+  minDate?: Date;
   showTimeInput?: boolean;
   timeInputLabel?: string;
+  minTime?: Date;
+  maxTime?: Date;
 }
 
 const DatePicker = ({
@@ -25,6 +27,8 @@ const DatePicker = ({
   minDate,
   showTimeInput,
   timeInputLabel,
+  minTime,
+  maxTime,
 }: Props) => {
   const { i18n } = useTranslation();
 
@@ -38,7 +42,10 @@ const DatePicker = ({
         inline
         locale={i18n.language}
         minDate={minDate}
-        showTimeInput={showTimeInput}
+        timeIntervals={5}
+        minTime={minTime}
+        maxTime={maxTime}
+        showTimeSelect={showTimeInput}
         timeInputLabel={timeInputLabel}
       />
     </StyledDatePicker>

diff --git a/src/components/Common/DatePicker/styles.tsx b/src/components/Common/DatePicker/styles.tsx
@@ -21,7 +21,6 @@ export const StyledDatePicker = styled.div`
   }
 
   .react-datepicker__month-container {
-    width: 100%;
   }
 
   .react-datepicker__current-month,
@@ -33,8 +32,7 @@ export const StyledDatePicker = styled.div`
   .react-datepicker__day-name,
   .react-datepicker__day,
   .react-datepicker__time-name {
-    width: 4em;
-    line-height: 4em;
+    line-height: 3em;
   }
 
   .react-datepicker__day--keyboard-selected:hover,
@@ -65,8 +63,8 @@ export const StyledDatePicker = styled.div`
 
   .react-datepicker__input-time-container
     .react-datepicker-time__input-container
-    .react-datepicker-time__input
-    input {
+    .react-datepicker-time__input,
+  .react-datepicker__time-list-item input {
     font-size: 14px;
     padding: 1em;
     border-radius: ${({ theme }) => theme.buttonRadius || 2}px;
@@ -76,6 +74,19 @@ export const StyledDatePicker = styled.div`
     border-style: solid;
   }
 
+  .react-datepicker__time-list-item {
+    border-radius: ${({ theme }) => theme.buttonRadius || 2}px;
+    height: fit-content !important;
+  }
+
+  .react-datepicker__time-container
+    .react-datepicker__time
+    .react-datepicker__time-box
+    ul.react-datepicker__time-list
+    li.react-datepicker__time-list-item--selected {
+    background-color: red !important;
+  }
+
   .react-datepicker__input-time-container
     .react-datepicker-time__input-container
     .react-datepicker-time__input

diff --git a/src/components/Consultations/ConsultationCard/JitsyMeeting/index.tsx b/src/components/Consultations/ConsultationCard/JitsyMeeting/index.tsx
@@ -210,7 +210,6 @@ const JitsyMeeting: React.FC<Props> = ({
         maskAnimation="fade"
         destroyOnClose={true}
         width={468}
-        closable={false}
       >
         <JitsyMeetingMessage
           message={t("ConsultationPage.AdditionalRecording")}

diff --git a/src/components/Courses/Course/CoursePanelLayout/FinishPage/Rate/index.tsx b/src/components/Courses/Course/CoursePanelLayout/FinishPage/Rate/index.tsx
@@ -1,10 +1,11 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import RateCourse from "@/components/Courses/RateCourse";
 import { QuestionnaireModelType } from "@/types/questionnaire";
-
+import { EscolaLMSContext } from "@escolalms/sdk/lib/react/context";
 import { useQuestionnaires } from "@/hooks/questionnaires";
 import { API } from "@escolalms/sdk/lib";
 import { useRoles } from "@/hooks/useRoles";
+import { metaDataKeys } from "@/utils/meta";
 
 interface Props {
   entityModel: QuestionnaireModelType;
@@ -18,7 +19,6 @@ interface Props {
 export const QuestionnairesModal = ({
   entityId,
   entityModel,
-  onFinish,
   onSuccesGetQuestionnaires,
 }: Props) => {
   const {
@@ -30,6 +30,9 @@ export const QuestionnairesModal = ({
     entityId: entityId || 0,
     entityModel: entityModel,
   });
+  const { settings } = useContext(EscolaLMSContext);
+  const questionnaireFirstime =
+    settings?.value?.config[metaDataKeys.questionnaireFirstTimeMetaKey];
 
   interface StateType {
     show: boolean;
@@ -38,6 +41,7 @@ export const QuestionnairesModal = ({
     firstVisit: boolean;
     firstTimeQuestionnaires: API.Questionnaire[];
     reShowableQuestionnaires: API.Questionnaire[];
+    endTimeQuestionnaires: API.Questionnaire[];
   }
 
   const [state, setState] = useState<StateType>({
@@ -47,6 +51,7 @@ export const QuestionnairesModal = ({
     firstVisit: true,
     firstTimeQuestionnaires: [],
     reShowableQuestionnaires: [],
+    endTimeQuestionnaires: [],
   });
 
   const { isStudent, isTutor } = useRoles();
@@ -87,7 +92,7 @@ export const QuestionnairesModal = ({
           // @ts-ignore add to sdk
         )?.display_frequency_minutes;
 
-        if (questionnaireFrequency === 0 || !questionnaireFrequency) {
+        if (questionnaireFrequency === 0) {
           acc.firstTimeQuestionnaires.push(questionnaire);
         } else {
           acc.reShowableQuestionnaires.push(questionnaire);
@@ -217,18 +222,31 @@ export const QuestionnairesModal = ({
   }, [entityId]);
 
   useEffect(() => {
+    let timer: NodeJS.Timeout;
     if (questionnaires.length && state.firstVisit) {
-      setState((prevState) => ({
-        ...prevState,
-        show: true,
-      }));
+      if (questionnaireFirstime) {
+        timer = setTimeout(() => {
+          setState((prevState) => ({
+            ...prevState,
+            show: true,
+          }));
+        }, questionnaireFirstime * 60 * 1000);
+      } else {
+        setState((prevState) => ({
+          ...prevState,
+          show: true,
+        }));
+      }
     }
     if (!!questionnaires.length) {
       onSuccesGetQuestionnaires && onSuccesGetQuestionnaires(true);
     }
     categorizedQuestionnaires();
-    return () => {};
+    return () => {
+      clearTimeout(timer);
+    };
   }, [
+    questionnaireFirstime,
     questionnaires,
     onSuccesGetQuestionnaires,
     state.firstVisit,
@@ -250,7 +268,6 @@ export const QuestionnairesModal = ({
           visible={state.show}
           onClose={handleClose}
           questionnaire={questionnaires[state.step]}
-          onFinish={onFinish}
         />
       )}
     </>

diff --git a/src/components/Courses/RateCourse/index.tsx b/src/components/Courses/RateCourse/index.tsx
@@ -13,7 +13,6 @@ type Props = {
   visible: boolean;
   questionnaire: API.Questionnaire;
   onClose: () => void;
-  onFinish?: () => void;
 };
 
 const initialState = {
@@ -27,7 +26,6 @@ const RateCourse: React.FC<Props> = ({
   visible,
   questionnaire,
   onClose,
-  onFinish,
 }) => {
   const { sendQuestionnaireAnswer } = useContext(EscolaLMSContext);
   const { t } = useTranslation();

diff --git a/src/components/Profile/ProfileAside/index.tsx b/src/components/Profile/ProfileAside/index.tsx
@@ -12,6 +12,7 @@ import routeRoutes from "@/components/Routes/routes";
 
 import DeleteAccountModal from "@/components/Authentication/DeleteAccountModal";
 import useDeleteAccountModal from "@/hooks/useDeleteAccount";
+import { metaDataKeys } from "@/utils/meta";
 
 export type NavigationTab = {
   title: string;
@@ -129,11 +130,16 @@ const ProfileAside: React.FC<Props> = ({ tabs, isProfile = true }) => {
                 </NavLink>
               ))}
 
-              {isProfile && settings?.value?.config?.termsPage && (
-                <NavLink to={`/${settings.value.config.termsPage}`}>
-                  <Text size="16">{t("Terms")}</Text>
-                </NavLink>
-              )}
+              {isProfile &&
+                settings?.value?.config?.[metaDataKeys.termsPageMetaKey] && (
+                  <NavLink
+                    to={`/${
+                      settings.value.config?.[metaDataKeys.termsPageMetaKey]
+                    }`}
+                  >
+                    <Text size="16">{t("Terms")}</Text>
+                  </NavLink>
+                )}
             </nav>
           </UserSidebar>
         </div>

diff --git a/src/components/Profile/ProfileConsultations/index.tsx b/src/components/Profile/ProfileConsultations/index.tsx
@@ -22,27 +22,32 @@ const ProfileConsultations = ({ type }: ProfileConsultationsProps) => {
     API.Consultation[]
   >([]);
 
-  const filterConstulations = useMemo(
-    () =>
+  const filterConstulations = useMemo(() => {
+    const filtered =
       userConsultations.list?.data.filter((consultation) =>
         type === ConsultationStatus.STARTED ||
         type === ConsultationStatus.UPCOMING
           ? consultation.in_coming || consultation.is_started
           : consultation.is_ended
-      ) || [],
-    [type, userConsultations.list?.data]
-  );
+      ) || [];
+    const uniqueConsultations = Array.from(
+      new Map(filtered.map((item) => [item.id, item])).values()
+    );
+
+    return uniqueConsultations;
+  }, [type, userConsultations.list?.data]);
 
   useEffect(() => {
     fetchUserConsultations();
   }, [type, fetchUserConsultations]);
 
   useEffect(() => {
+    setConsultationsData([]);
     setConsultationsData(filterConstulations);
     return () => {
       setConsultationsData([]);
     };
-  }, [filterConstulations]);
+  }, [type, filterConstulations]);
 
   return (
     <ProfileConsultationsProvider>

diff --git a/src/components/Profile/ProfileCourses/CourseCardActions/index.tsx b/src/components/Profile/ProfileCourses/CourseCardActions/index.tsx
@@ -182,7 +182,6 @@ export const CourseCardActions: FC<Props> = ({
               visible={state.show}
               onClose={handleClose}
               questionnaire={questionnaires[state.step]}
-              onFinish={() => {}}
             />
           </>
         ) : (