fix(hopehub): implement fixes

[Hopehub:re] #135
202306-NEA-DZ-FEW · Nov 22, 2023 · 33b5bf9 · 33b5bf9
1 parent ef7929e
commit 33b5bf9
Show file tree

Hide file tree

Showing 25 changed files with 155 additions and 132 deletions.
diff --git a/src/components/About/TeamTab.jsx b/src/components/About/TeamTab.jsx
@@ -35,7 +35,7 @@ const TeamMemberCards = ({ teamMembers }) => {
         return (
             <div
                 key={index}
-                className='w-52 h-auto rounded-lg p-2 flex flex-col items-center justify-center mx-2 hover:scale-110'
+                className='w-52 h-auto my-4 rounded-lg p-2 flex flex-col items-center justify-center mx-2 hover:scale-110'
                 style={gradientStyle}
             >
                 <Image
@@ -70,7 +70,7 @@ const TeamMemberCards = ({ teamMembers }) => {
         );
     });
 
-    return <div className='flex justify-center'>{memberCards}</div>;
+    return <div className='flex flex-wrap justify-center'>{memberCards}</div>;
 };
 
 export default TeamMemberCards;
diff --git a/src/components/About/__test__/__snapshots__/TeamTab.test.js.snap b/src/components/About/__test__/__snapshots__/TeamTab.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="flex justify-center"
+  className="flex flex-wrap justify-center"
 >
   <div
-    className="w-52 h-auto rounded-lg p-2 flex flex-col items-center justify-center mx-2 hover:scale-110"
+    className="w-52 h-auto my-4 rounded-lg p-2 flex flex-col items-center justify-center mx-2 hover:scale-110"
     style={
       Object {
         "background": "linear-gradient(to top, #BFDFDC, #99B4DF)",
@@ -93,7 +93,7 @@ exports[`renders correctly 1`] = `
     </div>
   </div>
   <div
-    className="w-52 h-auto rounded-lg p-2 flex flex-col items-center justify-center mx-2 hover:scale-110"
+    className="w-52 h-auto my-4 rounded-lg p-2 flex flex-col items-center justify-center mx-2 hover:scale-110"
     style={
       Object {
         "background": "linear-gradient(to bottom, #BFDFDC, #99B4DF)",

diff --git a/src/components/BookingButton/BookingButton.jsx b/src/components/BookingButton/BookingButton.jsx
@@ -9,7 +9,7 @@ export default function BookingButton({ destination, buttonText }) {
     return (
         <div>
             <button
-                className='w-72 h-10 rounded-md text-xs sm:text-base lg:text-xl font-poppins font-regular bg-Accent text-NeutralBlack dark:text-NeutralWhite uppercase   dark:bg-Dark_Accent dark:hover:bg-[#3E4E68]  hover:bg-[#879AB8] hover:text-NeutralWhite hover:scale-105 duration-500'
+                className='w-28 md:w-72 h-10 rounded-md text-xs sm:text-base lg:text-xl font-poppins font-regular bg-Accent text-NeutralBlack dark:text-NeutralWhite uppercase   dark:bg-Dark_Accent dark:hover:bg-[#3E4E68]  hover:bg-[#879AB8] hover:text-NeutralWhite hover:scale-105 duration-500'
                 data-testid='booking-button'
             >
                 <Link href={destination}>{t(buttonText)}</Link>

diff --git a/src/components/BookingButton/__test__/__snapshots__/BookingButton.test.js.snap b/src/components/BookingButton/__test__/__snapshots__/BookingButton.test.js.snap
@@ -3,7 +3,7 @@
 exports[`renders correctly 1`] = `
 <div>
   <button
-    className="w-72 h-10 rounded-md text-xs sm:text-base lg:text-xl font-poppins font-regular bg-Accent text-NeutralBlack dark:text-NeutralWhite uppercase   dark:bg-Dark_Accent dark:hover:bg-[#3E4E68]  hover:bg-[#879AB8] hover:text-NeutralWhite hover:scale-105 duration-500"
+    className="w-28 md:w-72 h-10 rounded-md text-xs sm:text-base lg:text-xl font-poppins font-regular bg-Accent text-NeutralBlack dark:text-NeutralWhite uppercase   dark:bg-Dark_Accent dark:hover:bg-[#3E4E68]  hover:bg-[#879AB8] hover:text-NeutralWhite hover:scale-105 duration-500"
     data-testid="booking-button"
   >
     <a

diff --git a/src/components/Footer/__test__/__snapshots__/Footer.test.js.snap b/src/components/Footer/__test__/__snapshots__/Footer.test.js.snap
@@ -23,7 +23,7 @@ exports[`renders correctly 1`] = `
     </label>
     <form>
       <fieldset
-        className="form-control w-96 mt-2"
+        className="form-control md:w-96 mt-2"
       >
         <div
           className="relative flex flex-row mr-[-2rem]"

diff --git a/src/components/HomePage/TherapistsInfoSection.jsx b/src/components/HomePage/TherapistsInfoSection.jsx
@@ -14,7 +14,7 @@ export default function TherapistsInfoSection() {
 
     //Displaying the therapists info section
     return (
-        <div className='w-full bg-Primary dark:bg-Dark_Primary lg:pb-4'>
+        <div className='w-full py-4 bg-Primary dark:bg-Dark_Primary lg:pb-4'>
             <h1 className='mx-6 mb-2 text-base md:mb-4 md:text-3xl md:mx-9 md:mt-10 font-poppins uppercase font-medium inline-block text-NeutralBlack dark:text-NeutralWhite '>
                 {t(
                     "Professional, licensed, and vetted therapists that you can trust."

diff --git a/src/components/HomePage/__test__/__snapshots__/Banner.test.js.snap b/src/components/HomePage/__test__/__snapshots__/Banner.test.js.snap
@@ -52,7 +52,7 @@ exports[`renders correctly 1`] = `
   >
     <div>
       <button
-        className="w-72 h-10 rounded-md text-xs sm:text-base lg:text-xl font-poppins font-regular bg-Accent text-NeutralBlack dark:text-NeutralWhite uppercase   dark:bg-Dark_Accent dark:hover:bg-[#3E4E68]  hover:bg-[#879AB8] hover:text-NeutralWhite hover:scale-105 duration-500"
+        className="w-28 md:w-72 h-10 rounded-md text-xs sm:text-base lg:text-xl font-poppins font-regular bg-Accent text-NeutralBlack dark:text-NeutralWhite uppercase   dark:bg-Dark_Accent dark:hover:bg-[#3E4E68]  hover:bg-[#879AB8] hover:text-NeutralWhite hover:scale-105 duration-500"
         data-testid="booking-button"
       >
         <a

diff --git a/src/components/HomePage/__test__/__snapshots__/TherapistsInfoSection.test.js.snap b/src/components/HomePage/__test__/__snapshots__/TherapistsInfoSection.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="w-full bg-Primary dark:bg-Dark_Primary lg:pb-4"
+  className="w-full py-4 bg-Primary dark:bg-Dark_Primary lg:pb-4"
 >
   <h1
     className="mx-6 mb-2 text-base md:mb-4 md:text-3xl md:mx-9 md:mt-10 font-poppins uppercase font-medium inline-block text-NeutralBlack dark:text-NeutralWhite "
@@ -40,7 +40,7 @@ exports[`renders correctly 1`] = `
   >
     <div>
       <button
-        className="w-72 h-10 rounded-md text-xs sm:text-base lg:text-xl font-poppins font-regular bg-Accent text-NeutralBlack dark:text-NeutralWhite uppercase   dark:bg-Dark_Accent dark:hover:bg-[#3E4E68]  hover:bg-[#879AB8] hover:text-NeutralWhite hover:scale-105 duration-500"
+        className="w-28 md:w-72 h-10 rounded-md text-xs sm:text-base lg:text-xl font-poppins font-regular bg-Accent text-NeutralBlack dark:text-NeutralWhite uppercase   dark:bg-Dark_Accent dark:hover:bg-[#3E4E68]  hover:bg-[#879AB8] hover:text-NeutralWhite hover:scale-105 duration-500"
         data-testid="booking-button"
       >
         <a

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -245,10 +245,10 @@ export default function Navbar({ user }) {
                                             </li>
                                             <li>
                                                 <Link
-                                                    href={`/Payment?userid=${user.uid}`}
+                                                    href={`/Tickets?userid=${user.uid}`}
                                                 >
                                                     <FaFileInvoiceDollar />
-                                                    {t("Payments")}
+                                                    {t("Tickets")}
                                                 </Link>
                                             </li>
                                             <li>
@@ -444,11 +444,11 @@ export default function Navbar({ user }) {
                                                     </li>
                                                     <li>
                                                         <Link
-                                                            href={`/StripePayment?userid=${user.uid}`}
+                                                            href={`/Tickets?userid=${user.uid}`}
                                                             className='hover:text-NeutralWhite'
                                                         >
                                                             <FaFileInvoiceDollar />
-                                                            {t("Payments")}
+                                                            {t("Tickets")}
                                                         </Link>
                                                     </li>
                                                     <li>

diff --git a/src/components/NewsletterSignUp/NewsletterSignUp.jsx b/src/components/NewsletterSignUp/NewsletterSignUp.jsx
@@ -146,7 +146,7 @@ function NewsletterSignUp() {
 
     return (
         <form>
-            <fieldset className='form-control w-96 mt-2'>
+            <fieldset className='form-control md:w-96 mt-2'>
                 <div className='relative flex flex-row mr-[-2rem]'>
                     <input
                         onChange={emailChange}

diff --git a/src/components/NewsletterSignUp/__test__/__snapshots__/NewsletterSignUp.test.js.snap b/src/components/NewsletterSignUp/__test__/__snapshots__/NewsletterSignUp.test.js.snap
@@ -3,7 +3,7 @@
 exports[`renders correctly 1`] = `
 <form>
   <fieldset
-    className="form-control w-96 mt-2"
+    className="form-control md:w-96 mt-2"
   >
     <div
       className="relative flex flex-row mr-[-2rem]"

diff --git a/src/components/StripePayment/TotalTickets.jsx b/src/components/StripePayment/TotalTickets.jsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 
 import { db } from "@/util/firebase";
 
-const TotalTickets = ({ user }) => {
+const TotalTickets = ({ user, setTotalTickets }) => {
     const [totalTicketsFromPayments, setTotalTicketsFromPayments] = useState(0);
 
     useEffect(() => {
@@ -46,6 +46,7 @@ const TotalTickets = ({ user }) => {
                     }
 
                     setTotalTicketsFromPayments(totalTickets);
+                    setTotalTickets(totalTickets); //
                 }
             } catch (error) {
                 console.error(error);
@@ -57,7 +58,7 @@ const TotalTickets = ({ user }) => {
 
     return (
         <div className='font-poppins text-base mx-6 md:text-xl md:mx-9 md:pb-9 pb-6 text-NeutralBlack dark:text-NeutralWhite '>
-            Total Tickets from Payments: {totalTicketsFromPayments}
+            Total Tickets: {totalTicketsFromPayments}
         </div>
     );
 };

diff --git a/src/components/StripePayment/__test__/__snapshots__/TotalTickets.test.js.snap b/src/components/StripePayment/__test__/__snapshots__/TotalTickets.test.js.snap
@@ -4,7 +4,7 @@ exports[`renders correctly 1`] = `
 <div
   className="font-poppins text-base mx-6 md:text-xl md:mx-9 md:pb-9 pb-6 text-NeutralBlack dark:text-NeutralWhite "
 >
-  Total Tickets from Payments: 
+  Total Tickets: 
   0
 </div>
 `;
diff --git a/src/components/User/__test__/__snapshots__/UserProfile.test.js.snap b/src/components/User/__test__/__snapshots__/UserProfile.test.js.snap
@@ -211,7 +211,7 @@ exports[`renders correctly 1`] = `
                   </li>
                   <li>
                     <a
-                      href="/Payment?userid=undefined"
+                      href="/Tickets?userid=undefined"
                       onClick={[Function]}
                       onMouseEnter={[Function]}
                       onTouchStart={[Function]}
@@ -234,7 +234,7 @@ exports[`renders correctly 1`] = `
                           d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM64 80c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H80c-8.8 0-16-7.2-16-16zm0 64c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H80c-8.8 0-16-7.2-16-16zm128 72c8.8 0 16 7.2 16 16v17.3c8.5 1.2 16.7 3.1 24.1 5.1c8.5 2.3 13.6 11 11.3 19.6s-11 13.6-19.6 11.3c-11.1-3-22-5.2-32.1-5.3c-8.4-.1-17.4 1.8-23.6 5.5c-5.7 3.4-8.1 7.3-8.1 12.8c0 3.7 1.3 6.5 7.3 10.1c6.9 4.1 16.6 7.1 29.2 10.9l.5 .1 0 0 0 0c11.3 3.4 25.3 7.6 36.3 14.6c12.1 7.6 22.4 19.7 22.7 38.2c.3 19.3-9.6 33.3-22.9 41.6c-7.7 4.8-16.4 7.6-25.1 9.1V440c0 8.8-7.2 16-16 16s-16-7.2-16-16V422.2c-11.2-2.1-21.7-5.7-30.9-8.9l0 0c-2.1-.7-4.2-1.4-6.2-2.1c-8.4-2.8-12.9-11.9-10.1-20.2s11.9-12.9 20.2-10.1c2.5 .8 4.8 1.6 7.1 2.4l0 0 0 0 0 0c13.6 4.6 24.6 8.4 36.3 8.7c9.1 .3 17.9-1.7 23.7-5.3c5.1-3.2 7.9-7.3 7.8-14c-.1-4.6-1.8-7.8-7.7-11.6c-6.8-4.3-16.5-7.4-29-11.2l-1.6-.5 0 0c-11-3.3-24.3-7.3-34.8-13.7c-12-7.2-22.6-18.9-22.7-37.3c-.1-19.4 10.8-32.8 23.8-40.5c7.5-4.4 15.8-7.2 24.1-8.7V232c0-8.8 7.2-16 16-16z"
                         />
                       </svg>
-                      Payments
+                      Tickets
                     </a>
                   </li>
                   <li>
@@ -937,7 +937,7 @@ exports[`renders correctly 1`] = `
       </label>
       <form>
         <fieldset
-          className="form-control w-96 mt-2"
+          className="form-control md:w-96 mt-2"
         >
           <div
             className="relative flex flex-row mr-[-2rem]"

diff --git a/src/components/User/__test__/__snapshots__/updateTherapist.test.js.snap b/src/components/User/__test__/__snapshots__/updateTherapist.test.js.snap
@@ -110,7 +110,7 @@ exports[`renders correctly 1`] = `
                 <summary
                   className="text-Accent text-lg font-bold underline font-poppins text-NeutralBlack font-semibold dark:text-NeutralWhite"
                 >
-                  User
+                  John Doe
                 </summary>
                 <ul
                   className="menu w-32 text-NeutralBlack font-medium font-poppins"
@@ -211,7 +211,7 @@ exports[`renders correctly 1`] = `
                   </li>
                   <li>
                     <a
-                      href="/Payment?userid=undefined"
+                      href="/Tickets?userid=undefined"
                       onClick={[Function]}
                       onMouseEnter={[Function]}
                       onTouchStart={[Function]}
@@ -234,7 +234,7 @@ exports[`renders correctly 1`] = `
                           d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM64 80c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H80c-8.8 0-16-7.2-16-16zm0 64c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H80c-8.8 0-16-7.2-16-16zm128 72c8.8 0 16 7.2 16 16v17.3c8.5 1.2 16.7 3.1 24.1 5.1c8.5 2.3 13.6 11 11.3 19.6s-11 13.6-19.6 11.3c-11.1-3-22-5.2-32.1-5.3c-8.4-.1-17.4 1.8-23.6 5.5c-5.7 3.4-8.1 7.3-8.1 12.8c0 3.7 1.3 6.5 7.3 10.1c6.9 4.1 16.6 7.1 29.2 10.9l.5 .1 0 0 0 0c11.3 3.4 25.3 7.6 36.3 14.6c12.1 7.6 22.4 19.7 22.7 38.2c.3 19.3-9.6 33.3-22.9 41.6c-7.7 4.8-16.4 7.6-25.1 9.1V440c0 8.8-7.2 16-16 16s-16-7.2-16-16V422.2c-11.2-2.1-21.7-5.7-30.9-8.9l0 0c-2.1-.7-4.2-1.4-6.2-2.1c-8.4-2.8-12.9-11.9-10.1-20.2s11.9-12.9 20.2-10.1c2.5 .8 4.8 1.6 7.1 2.4l0 0 0 0 0 0c13.6 4.6 24.6 8.4 36.3 8.7c9.1 .3 17.9-1.7 23.7-5.3c5.1-3.2 7.9-7.3 7.8-14c-.1-4.6-1.8-7.8-7.7-11.6c-6.8-4.3-16.5-7.4-29-11.2l-1.6-.5 0 0c-11-3.3-24.3-7.3-34.8-13.7c-12-7.2-22.6-18.9-22.7-37.3c-.1-19.4 10.8-32.8 23.8-40.5c7.5-4.4 15.8-7.2 24.1-8.7V232c0-8.8 7.2-16 16-16z"
                         />
                       </svg>
-                      Payments
+                      Tickets
                     </a>
                   </li>
                   <li>
@@ -448,7 +448,7 @@ exports[`renders correctly 1`] = `
     className="pt-12"
   >
     <div
-      className="flex justify-center font-semibold font-poppins flex-col md:flex-row  max-w-screen bg-NeutralWhite dark:bg-NeutralBlack"
+      className="flex justify-center px-8 md:px-0 mt-16 font-semibold font-poppins flex-col md:flex-row  max-w-screen bg-NeutralWhite dark:bg-NeutralBlack"
     >
       <div
         className="pb-12 lg:py-16 lg:w-[60%] md:[60%] flex "
@@ -537,7 +537,7 @@ exports[`renders correctly 1`] = `
                 name="name"
                 onChange={[Function]}
                 type="text"
-                value=""
+                value="John Doe"
               />
             </div>
             <div
@@ -573,7 +573,7 @@ exports[`renders correctly 1`] = `
                 name="Birth Date"
                 onChange={[Function]}
                 type="date"
-                value=""
+                value="1990-01-01"
               />
             </div>
             <div
@@ -591,6 +591,7 @@ exports[`renders correctly 1`] = `
                 name="email"
                 onChange={[Function]}
                 type="email"
+                value="[email protected]"
               />
             </div>
             <div
@@ -608,6 +609,7 @@ exports[`renders correctly 1`] = `
                 name="phone"
                 onChange={[Function]}
                 type="number"
+                value="1234567890"
               />
             </div>
           </form>
@@ -647,7 +649,7 @@ exports[`renders correctly 1`] = `
       </label>
       <form>
         <fieldset
-          className="form-control w-96 mt-2"
+          className="form-control md:w-96 mt-2"
         >
           <div
             className="relative flex flex-row mr-[-2rem]"

diff --git a/src/components/User/__test__/updateTherapist.test.js b/src/components/User/__test__/updateTherapist.test.js
@@ -2,7 +2,16 @@ import renderer from "react-test-renderer";
 
 import TherapistProfile from "../updateTherapist";
 
+const user = {
+    // Populate with necessary user data for testing
+    name: "John Doe",
+    birthDate: "1990-01-01",
+    email: "[email protected]",
+    phoneNumber: "1234567890",
+    // Add other user properties as needed
+};
+
 it("renders correctly", () => {
-    const tree = renderer.create(<TherapistProfile />).toJSON();
+    const tree = renderer.create(<TherapistProfile user={user} />).toJSON();
     expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/User/updateTherapist.jsx b/src/components/User/updateTherapist.jsx
@@ -16,7 +16,7 @@ import { useAppcontext } from "@/context/state";
 import Layout from "@/layout/Layout";
 import { auth, db } from "@/util/firebase";
 
-export default function TherapistProfile(user) {
+export default function TherapistProfile({ user }) {
     const { t } = useTranslation("common");
     const { setProfileUpdated, setUser } = useAppcontext();
     const [fullName, setFullName] = useState(user.name || "");
@@ -123,7 +123,7 @@ export default function TherapistProfile(user) {
             <Head>
                 <title>{t("Update therapist profile")}</title>
             </Head>
-            <div className='flex justify-center font-semibold font-poppins flex-col md:flex-row  max-w-screen bg-NeutralWhite dark:bg-NeutralBlack'>
+            <div className='flex justify-center px-8 md:px-0 mt-16 font-semibold font-poppins flex-col md:flex-row  max-w-screen bg-NeutralWhite dark:bg-NeutralBlack'>
                 <div className='pb-12 lg:py-16 lg:w-[60%] md:[60%] flex '>
                     <div className='bg-NeutralBlack dark:bg-NeutralWhite border-2 w-80 h-80 rounded-full mx-auto flex flex-col items-center justify-center relative overflow-visible'>
                         {user.photoURL ? (
@@ -266,12 +266,3 @@ export default function TherapistProfile(user) {
         </Layout>
     );
 }
-
-// export async function getStaticProps({ locale }) {
-//     return {
-//         props: {
-//             ...(await serverSideTranslations(locale, ["common"])),
-//             // Will be passed to the page component as props
-//         },
-//     };
-// }
-Original file line number
+Diff line change
@@ Expand Up / @@ -52,7 +52,7 @@ exports[`renders correctly 1`] = ` @@
       >
         <div>
           <button
-            className="w-72 h-10 rounded-md text-xs sm:text-base lg:text-xl font-poppins font-regular bg-Accent text-NeutralBlack dark:text-NeutralWhite uppercase   dark:bg-Dark_Accent dark:hover:bg-[#3E4E68]  hover:bg-[#879AB8] hover:text-NeutralWhite hover:scale-105 duration-500"
+            className="w-28 md:w-72 h-10 rounded-md text-xs sm:text-base lg:text-xl font-poppins font-regular bg-Accent text-NeutralBlack dark:text-NeutralWhite uppercase   dark:bg-Dark_Accent dark:hover:bg-[#3E4E68]  hover:bg-[#879AB8] hover:text-NeutralWhite hover:scale-105 duration-500"
             data-testid="booking-button"
           >
             <a
@@ Expand Down @@