Feature/adding-admin-payment-methods

components/Account/Modals/AddPaymentMethodModal.tsx

@@ -2,7 +2,7 @@ import payloadClient from '../../../utils/axiosPayloadInstance';
 import { PaymentMethods, pagoMovilSchema, zelleSchema } from '../../Checkout/CheckoutForm';
 import * as yup from 'yup';
 import { Form } from '../../Forms/SmartForm';
-import { useMutation } from 'react-query';
+import { useMutation, useQueryClient } from 'react-query';
 import { User } from '../../../payload-types';
 
 const postPaymentMethod = async (data: any) => {
@@ -19,6 +19,7 @@ const PaymentMethodsSchema = yup.object().shape({
 export default function AddPaymentMethodModal({ onClose, user }: { onClose: () => void, user: User }) {
 
     const mutation = useMutation(postPaymentMethod)
+    const queryClient = useQueryClient();
 
     function onSubmit(values: any) {
 
@@ -32,6 +33,7 @@ export default function AddPaymentMethodModal({ onClose, user }: { onClose: () =
         },
         {
             onSuccess: () => {
+                queryClient.invalidateQueries('userPaymentMethods');
                 onClose();
             },
             onError: () => {

components/Checkout/AdminPaymentMethods.tsx

@@ -0,0 +1,37 @@
+import { PagoMovil, Zelle } from "../../payload-types";
+import AccordionArrow from "../Accordion/AccordionArrow";
+
+type AdminPaymentMethodsProps = {
+    zelle: Zelle
+    pagoMovil: PagoMovil;
+}
+
+export default function AdminPaymentMethods({ zelle, pagoMovil }: AdminPaymentMethodsProps) {
+    return (
+        <>
+            <AccordionArrow title="Zelle" name="admin" content={
+                <>
+                    <div className="flex flex-col gap-4">
+                        <div className="flex flex-col gap-4">
+                            <p className="text-sm md:text-base ">Email del beneficiario: {zelle.email}</p>
+                            <p className="text-sm md:text-base ">Nombre del beneficiario: {zelle.zelleHolder}</p>
+                            <p className="text-sm md:text-base ">Banco del beneficiario: {zelle.bank}</p>
+                        </div>
+                    </div>
+                </>
+            } />
+            <AccordionArrow title="Pago Móvil" name="admin" content={
+                <>
+                    <div className="flex flex-col gap-4">
+                        <div className="flex flex-col gap-4">
+                            <p className="text-sm md:text-base ">Cédula o RIF del beneficiario: {pagoMovil.cid}</p>
+                            <p className="text-sm md:text-base ">Nombre del beneficiario: {pagoMovil.name}</p>
+                            <p className="text-sm md:text-base ">Banco del beneficiario: {pagoMovil.bank}</p>
+                            <p className="text-sm md:text-base ">Número de teléfono del beneficiario: {pagoMovil.phone}</p>
+                        </div>
+                    </div>
+                </>
+            } />
+        </>
+    )
+}

components/Checkout/CheckoutFormGuestView.tsx

@@ -6,6 +6,7 @@ import { Product } from '../../payload-types';
 import { useRouter } from 'next/router';
 import { DaisyUiAlert } from '../Alert/DaisyUiAlerts';
 import { apiUrl } from '../../utils/env';
+import { LoadSpinner } from '../Loaders/DaisyUiLoaders';
 
 export type GuestUserOrderData = {
   customer: {
@@ -144,12 +145,14 @@ export default function CheckoutFormGuestView({ productData }: CheckoutFormGuest
       <div className="col-span-6">
         <button
           type="submit"
+          disabled={mutation.isLoading}
           className="block w-full rounded-md bg-accent-content text-accent p-2.5 text-sm transition hover:shadow-lg"
         >
           Pagar
         </button>
       </div>
       {mutation.isError && <DaisyUiAlert type="error" message={"Algo salio mal"} />}
+      {mutation.isLoading && <LoadSpinner size='lg' />}
     </Form>
   );
 }

components/Checkout/CheckoutFormUserView.tsx

@@ -8,6 +8,7 @@ import { useRouter } from 'next/router';
 import SkeletonAcordion from '../Skeletons/SkeletonAcordion';
 import { DaisyUiAlert } from '../Alert/DaisyUiAlerts';
 import { PagoMovilUserOrderData, ZelleUserOrderData } from './CheckoutFormGuestView';
+import { LoadSpinner } from '../Loaders/DaisyUiLoaders';
 
 type UserPaymentMethodsResponseSuccess = {
   paymentMethods: PaymentMethod[]
@@ -158,7 +159,10 @@ export default function CheckoutFormUserView({ productData, user }: CheckoutForm
         {mutation.isSuccess ? (
           <div className="my-4">
             <DaisyUiAlert type="success" message={"Orden creada"} />
-            </div>
+          </div>
+        ) : null}
+        {mutation.isLoading ? (
+          <LoadSpinner size='lg' />
         ) : null}
       </div>
     </Form>

components/Checkout/CheckoutItem.tsx

@@ -1,7 +1,11 @@
 import Image from 'next/image';
 import { Category, Course, Media, Plan, Product } from '../../payload-types';
 
-export default function CheckoutItem({ name, description, productPrice, productImage, productType }: Product) {
+type CheckoutItemProps = Product & {
+  children?: React.ReactNode;
+};
+
+export default function CheckoutItem({ name, description, productPrice, productImage, productType, children }: CheckoutItemProps) {
   const productImages = productImage as Media;
   const relation = productType?.relationTo;
   const categorysToChoose = {
@@ -81,6 +85,7 @@ export default function CheckoutItem({ name, description, productPrice, productI
             </ul>
           </div>
         </div>
+        {children}
       </div>
     </div>
   );

components/Header/Header.tsx

@@ -12,15 +12,18 @@ export default function Header() {
       </div>
       <div className="flex-none">
         <ul className="menu menu-horizontal items-center px-1">
-          <li>
-            <ThemeSwitch />
-          </li>
           <li>
             <details>
               <summary>Menu</summary>
-              <Nav />
+              <ul className="p-2 bg-base-100">
+                <Nav />
+
+              </ul>
             </details>
           </li>
+          <li>
+            <ThemeSwitch />
+          </li>
         </ul>
       </div>
     </div>

components/Product/RelatedProduct.tsx

@@ -16,7 +16,7 @@ export default function ReleatedProduct({ title, price, imgAlt, imgURL, productI
       <div className="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-md bg-content-200 lg:aspect-none group-hover:opacity-75 lg:h-80">
         <img src={imgURL} alt={imgAlt} className="h-full w-full object-cover object-center lg:h-full lg:w-full" />
       </div>
-      <div className="mt-4 flex justify-between">
+      <div className="mt-4 gap-3 flex justify-between">
         <div>
           <h3 className="text-sm text-secondary">
             <Link href={`/product/${productId}`}>

components/VerticalPadding/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classes from './index.module.scss';
+import classes from './index.module.css';
 
 export type VerticalPaddingOptions = 'large' | 'medium' | 'small' | 'none';
 

components/home/HomeBanner.tsx

@@ -24,7 +24,7 @@ export default function HomeBanner() {
                     <p className="py-6">
                     En el centro de capacitacion profesional, nuestro objetivo es transformar la forma en que aprendes y adquieres conocimiento. Nuestra plataforma LMS líder en el mercado te ofrece una experiencia de aprendizaje revolucionaria, diseñada para potenciar tu crecimiento personal y profesional. 
                     </p>
-                    <Link href="/shop">
+                    <Link href="/store">
                         <a className="btn-primary btn">
                             Ir a la tienda
                         </a>