Merge branch '01-components' into develop

GomezMorinFrontEnd/package.json

@@ -13,13 +13,15 @@
     "@heroicons/react": "^2.0.17",
     "@reduxjs/toolkit": "^1.9.3",
     "axios": "^1.3.4",
-    "google-map-react": "^2.2.0",
-    "google-maps-react": "^2.0.6",
     "headlessui": "^0.0.0",
+    "@material-tailwind/react": "^1.4.2",
+    "flowbite": "^1.6.5",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.8",
     "react-icons": "^4.8.0",
+    "react-loader-spinner": "^5.3.4",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.10.0"
   },

GomezMorinFrontEnd/src/components/Checkbox.jsx

@@ -0,0 +1,25 @@
+import { Checkbox } from "@material-tailwind/react";
+
+/**
+ * A Material Tailwind checkbox component with a label and optional sub-label.
+ * 
+ * @param label The text for the checkbox label.
+ * @param subLabel An optional sub-label to display below the checkbox label.
+ * @return {JSX.Element} The Checkbox1 component.
+ */
+const AltCheckbox = ({ label, subLabel }) => {
+  return (
+    <div>
+      <Checkbox
+        color="green"
+        ripple={true}
+        label={label}
+        defaultChecked
+      />
+      <p className="text-sm italic font-thin mb-2">{subLabel}</p>
+    </div>
+
+  );
+};
+
+export default AltCheckbox;

GomezMorinFrontEnd/src/components/Footer.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+/**
+* A React component that displays the footer of a webpage. It includes the Gomez Morin logo,
+* phone number, and address. The component is fixed at the bottom of the page.
+*
+* @return {JSX.Element} The JSX code that displays the footer.
+*/
+const Footer = () => {
+  return (
+    <div className="fixed bottom-0 w-full h-16 bg-gray-blue drop-shadow-lg">
+      <div className="flex justify-between items-center">
+        <div className="px-4 pt-2">
+          <img
+            className="object-scale-down h-12"
+            src="/img/gomez_morin_blanco.png"
+          />
+        </div>
+        <div className="px-3 pt-2 text-white">
+          <p className="text-[#ffffff]">(442) 251 9600 Ext. 9613</p>
+        </div>
+        <div className="px-3 pt-2">
+          <p className="text-white">
+            Av. Constituyentes Esq. Luis Pasteur S/N Col. Villa del Sur,
+            C.P.76000. Santiago de Querétaro.
+          </p>
+        </div>
+        <div className="px-4 pt-2">
+          <img
+            className="object-scale-down h-12"
+            src="/img/gomez_morin_blanco.png"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;

GomezMorinFrontEnd/src/components/Header.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+/**
+ * Componente para mostrar el encabezado de la página.
+ * 
+ * @param {string} tittle - Título del encabezado.
+ * @returns {JSX.Element} Elemento JSX que representa el encabezado.
+ */
+const Header = ({ tittle }) => {
+  return (
+    <div className="text-center w-full">
+      <h1 className="Gobold text-black text-6xl ">{tittle}</h1>
+    </div>
+  );
+};
+
+export default Header;

GomezMorinFrontEnd/src/components/InfoProfileCard.jsx

@@ -0,0 +1,131 @@
+import React, { useEffect, useState } from "react";
+import { useForm, FormProvider } from "react-hook-form";
+import InputForm from "./InputForm";
+import Button from "./Button";
+import Checkbox from "./Checkbox";
+import SpinnerLoader from "./SpinnerLoader";
+
+/**
+ * A component that displays user information and allows them to update their profile.
+ * 
+ * @param {string} Cookie.session.id - The ID of the user's session cookie.
+ * @returns {JSX.Element} The JSX element displaying the user's profile and profile editing form.
+ */
+const InfoProfileCard = (/*Cookie.session.id*/) => {
+  const [user, setUser] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  /* To do:
+  //UseEfect
+  //query.findByID(cookie.session.id)
+  //setUser
+  //setLoading(false)
+  */
+
+
+  const methods = useForm();
+  const reset = methods.reset;
+
+  /**
+   * Handles submission of updated user information.
+   * @param {Object} data - The updated user data to be submitted.
+   */
+  const onSubmitUser = async (data) => {
+    const response = await updateUser(data); //Query importada
+    setUser(response);
+    reset();
+  };
+
+  return (
+    <div className="w-full rounded-lg bg-gray drop-shadow-md">
+      <div className="flex items-center">
+        <div className="w-1/2 mx-6 my-1 text-left">
+          {user.length === 1 ? (
+            user.map((tempUser) => (
+              <FormProvider {...methods}>
+                <form onSubmit={methods.handleSubmit(onSubmitUser)}>
+                  <InputForm
+                    label="Usuario"
+                    name={tempUser.user} //To do: Posible cambio
+                    type="text"
+                    placeholder="Escribe tu nuevo nombre de Usuario"
+                    defaultValue={tempUser.user} //To do: Posible cambio
+                  />
+                  <InputForm
+                    label="Correo"
+                    name={tempUser.mail} //To do: Posible cambio
+                    type="text"
+                    placeholder="prueba"
+                    defaultValue={tempUser.mail} //To do: Posible cambio
+                  />
+                  <InputForm
+                    label="Teléfono Celular"
+                    name={tempUser.phone} //To do: Posible cambio
+                    type="number"
+                    placeholder="prueba"
+                    defaultValue={tempUser.phone} //To do: Posible cambio
+                  />
+                  <div className="flex justify-center items-center w-2/3 my-3">
+                    <Button
+                      text="Guardar Cambios"
+                      type="submit"
+                      colorBg="bg-teal-500"
+                      colorHoverBg="bg-teal-500"
+                      navigation=""
+                    />
+                  </div>
+                </form>
+              </FormProvider>
+            ))
+          ) : loading ? (
+            <SpinnerLoader colorSpin="#AFD135" />
+          ) : (
+            <h1 className="font-bold text-2xl">No existe el usuario</h1>
+          )}
+        </div>
+        <div className="w-1/2 mx-6 my-2 text-left">
+          {user.length === 1 ? (
+            user.map((tempUser) => (
+              <div>
+                <Checkbox
+                  label={"Soy una persona moral"}
+                  subLabel={"Este campo implica que eres una institución afiliada con Gómez Morín."}
+                />
+                <div className="mt-3">
+                  <label className="font-bold">Contraseña</label>
+                </div>
+                <div className="mt-3">
+                  <Button
+                    text="Cambiar Contraseña"
+                    type="submit"
+                    colorBg="bg-pink-red"
+                    colorHoverBg="bg-rose-800"
+                    navigation=""
+                  />
+                </div>
+                <div className="mt-3">
+                  <label className="font-bold">Cuenta</label>
+                </div>
+                <div className="my-3">
+                  <Button
+                    text="Eliminar Cuenta"
+                    type="submit"
+                    colorBg="bg-pink-red"
+                    colorHoverBg="bg-rose-500"
+                    navigation=""
+                  />
+                </div>
+              </div>
+            ))
+          ) : loading ? (
+            <SpinnerLoader colorSpin="#AFD135" />
+          ) : (
+            <h1 className="font-bold text-2xl">No existe el usuario</h1>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InfoProfileCard;

GomezMorinFrontEnd/src/components/Layout.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Outlet } from "react-router-dom";
 import Navbar from "./Navbar";
+import Footer from "./Footer";
 
 /**
  * This component is used for the single web application.
@@ -14,8 +15,9 @@ const Layout = () => {
     <div className="w-full h-full flex flex-col">
       <Navbar />
       <Outlet />
+      <Footer/>
     </div>
   );
 };
 
-export default Layout;
+export default Layout;

GomezMorinFrontEnd/src/components/ProfileCard.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+/**
+* This component creates a profile card that displays a user's name and profile picture.
+
+* @param {string} nombre - The user's name, passed as a prop to the component.
+* @param {string} sourceImage - The source of the user's profile picture, passed as a prop to the component.
+* @returns {JSX.Element} - Returns a JSX element that displays the user's name and profile picture in a card format.
+*/
+const ProfileCard = ({ nombre, sourceImage }) => {
+  return (
+    <div className="w-full rounded-lg bg-gray drop-shadow-md">
+      <div className="flex flex-col items-center">
+        <div className="p-2 mt-4 mx-3">
+          <img className="object-scale-down h-12" src={sourceImage} />
+        </div>
+        <div className="p-2 mx-3">
+          <p className="text-xl font-Gobold font-bold">Mi Perfil</p>
+        </div>
+        <div className="p-2 mb-4 mx-3 font-Gobold">{nombre}</div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileCard;

GomezMorinFrontEnd/src/components/SpinnerLoader.jsx

@@ -0,0 +1,29 @@
+import { ColorRing } from "react-loader-spinner";
+
+/**
+* This component creates a spinner loader using the ColorRing component from "react-loader-spinner".
+*
+* @param {string} colorSpin - The color of the spinner, passed as a prop to the component.
+* @returns {JSX.Element} - Returns a JSX element that displays the spinner loader with the specified color.
+*/
+const SpinnerLoader = ({ colorSpin }) => {
+  return (
+    <ColorRing
+      visible={true}
+      height="80"
+      width="80"
+      ariaLabel="blocks-loading"
+      wrapperStyle={{}}
+      wrapperClass="blocks-wrapper"
+      colors={[
+        "#AFD135",
+        { colorSpin },
+        { colorSpin },
+        { colorSpin },
+        { colorSpin },
+      ]}
+    />
+  );
+};
+
+export default SpinnerLoader;

GomezMorinFrontEnd/src/components/TextArea.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { useFormContext } from "react-hook-form";
+
+/**
+ * A component for rendering a textarea input field.
+ * 
+ * @param {string} label - The label text for the textarea.
+ * @param {string} name - The name of the textarea input field.
+ * @param {string} placeholder - The placeholder text for the textarea.
+ * @param {string} defaultValue - The default value for the textarea.
+ * @returns {JSX.Element} - The rendered component.
+ */
+const TextArea = ({ label, name, placeholder, defaultValue }) => {
+  const { register } = useFormContext();
+
+  return (
+    <div className="flex flex-col gap-2">
+      <label htmlFor="comment" className="font-semibold text-md">
+        {" "}{label}
+      </label>
+      <textarea
+        {...register(name)}
+        defaultValue={defaultValue}
+        className="p-1 rounded-md shadow-md ring-1 ring-gray-200 w-full h-20 px-3"
+        id={name}
+        placeholder={placeholder}
+        autoComplete="off"
+      />
+    </div>
+  );
+};
+
+export default TextArea;