fix(lesson): fix

No-Country-simulation · Dec 19, 2024 · 0cf9161 · 0cf9161
2 parents 3e9da8b + 09dec2c
commit 0cf9161
Show file tree

Hide file tree

Showing 34 changed files with 304 additions and 118 deletions.
diff --git a/README.md b/README.md
@@ -103,7 +103,7 @@ docker-compose up
 ![Untitled-2024-12-06-1141](https://github.com/user-attachments/assets/216ee27d-d300-4c58-a0ce-c5328ceeae5c)
 
 ## Links de interés
-- Deploy: [link](https://klowhub-800663783731.southamerica-east1.run.app/es/signin) (Deployado en Google Cloud, puede necesitar mantenimiento)
+- Deploy: [link](https://klowhub-800663783731.southamerica-east1.run.app/) (Deployado en Google Cloud, puede necesitar mantenimiento)
 - Google Doc: [Requerimiento MVP](https://docs.google.com/document/d/1384qS4swbR3EJarHDEN6JStyf-U_L6RKgHSfzssLfbE/edit?tab=t.0)
 - Excalidraw (un tablero) del trabajo y progreso del equipo: [Link](https://excalidraw.com/#room=5e439aab375eec8c0d21,MJms9xmhQwIa0jXMSSZIlQ)
 - Seguimiento de tareas en [Github Projects](https://github.com/orgs/No-Country-simulation/projects/127/views/1)

diff --git a/client/env.config.ts b/client/env.config.ts
@@ -5,10 +5,12 @@ export interface EnvConfig {
   VERCEL_ENV: string;
   VERCEL_PROJECT_PRODUCTION_URL: string;
   VERCEL_URL: string;
+  NEXT_PUBLIC_CLIENT_ID:string;
 }
 const env: EnvConfig = {
     API_URL: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000',
     APP_URL: process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:8080',
+    NEXT_PUBLIC_CLIENT_ID: process.env.NEXT_PUBLIC_CLIENT_ID || '',
     NODE_ENV: process.env.NODE_ENV || 'development',
     VERCEL_ENV: process.env.VERCEL_ENV || '',
     VERCEL_PROJECT_PRODUCTION_URL: process.env.VERCEL_PROJECT_PRODUCTION_URL || '',

diff --git a/client/src/core/components/LocaleSwitcherSelect/index.tsx b/client/src/core/components/LocaleSwitcherSelect/index.tsx
@@ -32,7 +32,7 @@ export default function LocaleSwitcherSelect({ currentLocale }: LocaleSwitcherSe
           alt="World icon"
           width={24}
           height={24}
-          className="object-center invert"
+          className="size-7 object-center invert"
         />
       </DropdownMenuTrigger>
       <AnimatePresence>

diff --git a/client/src/core/components/Navbar/CartButton.tsx b/client/src/core/components/Navbar/CartButton.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { useAtomValue } from 'jotai';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { cartStoreAtom } from '@features/cart/store/cart.store';
+import CartCounter from './CartCounter';
+
+interface CartButtonProps {
+  altText: string;
+  labelText: string;
+}
+
+export default function CartButton({ altText, labelText }: CartButtonProps) {
+  const course = useAtomValue(cartStoreAtom);
+  const [counter, setCounter] = useState(0);
+  useEffect(() => {
+    setCounter(course.length);
+  }, [course.length]);
+  return (
+    <Link aria-label={labelText} href="/cart" className="relative">
+      <CartCounter counter={counter} />
+
+      <Image src="/svg/cart.svg" alt={altText} width={24} height={24} className="size-7" />
+    </Link>
+  );
+}
diff --git a/client/src/core/components/Navbar/CartCounter.tsx b/client/src/core/components/Navbar/CartCounter.tsx
@@ -0,0 +1,21 @@
+import { AnimatePresence, motion } from 'framer-motion';
+
+interface CartCounterProps {
+  counter: number;
+}
+
+export default function CartCounter({ counter }: CartCounterProps) {
+  return (
+    <AnimatePresence>
+      {counter > 0 && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="absolute -right-3 -top-3 rounded-full bg-white px-2 text-xs text-black">
+          {counter}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/client/src/core/components/Navbar/index.tsx b/client/src/core/components/Navbar/index.tsx
@@ -1,7 +1,7 @@
-import Image from 'next/image';
 import { useTranslations } from 'next-intl';
-import { Link, type Locale } from '@core/lib/i18nRouting';
+import { type Locale } from '@core/lib/i18nRouting';
 import type { CreatorCourseType } from '@features/courses/schemas/creator-course.schemas';
+import CartButton from './CartButton';
 import { NavbarClient } from './NavbarClient';
 import NavbarItems from './NavbarItems';
 import UserModeToggle from './UserModeToggle';
@@ -31,24 +31,9 @@ export default function Navbar({ locale, creator }: NavbarProps) {
 
         <div className="ml-auto hidden h-full items-center justify-center space-x-4 min-[1400px]:flex">
           <LocaleSwitcherSelect currentLocale={locale} />
-          <Link aria-label={t('cartLabel')} href="/cart">
-            <Image
-              src="/svg/cart.svg"
-              alt={t('cartAlt')}
-              width={24}
-              height={24}
-              className="size-6"
-            />
-          </Link>
-          {/* <Button aria-label={t('cartLabel')} size="fit" variant="ghost">
-            <Image
-              src="/svg/cart.svg"
-              alt={t('cartAlt')}
-              width={24}
-              height={24}
-              className="size-6"
-            />
-          </Button>
+
+          <CartButton altText={t('cartAlt')} labelText={t('cartLabel')} />
+          {/*
           <Button aria-label={t('bellLabel')} size="fit" variant="ghost">
             <Image
               src="/svg/bell.svg"

diff --git a/client/src/core/components/Navigator/Index.tsx b/client/src/core/components/Navigator/Index.tsx
@@ -1,36 +1,42 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import type { ReactNode } from 'react';
-import { Link } from '../../lib/i18nRouting';
-import { cn } from '../../lib/utils';
+import { Link } from '@core/lib/i18nRouting';
+import { cn } from '@core/lib/utils';
+import css from './navigator.module.css';
 
 interface NavigatorProps {
   href: string;
   children: ReactNode;
   className?: string;
   bgImage: string;
   bgPosition?: string;
-  bgSize?: string;
+  bgSizeWidth?: string;
+  bgSizeHeight?: string;
 }
-//background-size: 290% 175%;
-//background-position: 3% 20%;
 
 const Navigator = ({
   href,
   children,
   className = '',
   bgImage,
   bgPosition = '0% 0%',
-  bgSize = '100% 100%',
+  bgSizeWidth = '100%',
+  bgSizeHeight = '100%',
 }: NavigatorProps) => {
   return (
     <Link
       href={href}
-      style={{
-        background: `linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${bgImage})`,
-        backgroundSize: bgSize,
-        backgroundPosition: bgPosition,
-      }}
+      style={
+        {
+          '--navigator-bg-image': `linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${bgImage})`,
+          '--navigator-bg-position': bgPosition,
+          '--navigator-bg-image-width': bgSizeWidth,
+          '--navigator-bg-image-height': bgSizeHeight,
+        } as any
+      }
       className={cn(
         'flex h-24 w-full flex-row items-center justify-center overflow-hidden rounded-lg bg-cover bg-center bg-no-repeat p-4 text-center text-lg font-bold leading-10 text-white shadow-app-1 min-[580px]:text-xl',
+        css.navigatorBg,
         className
       )}>
       {children}

diff --git a/client/src/core/components/Navigator/navigator.module.css b/client/src/core/components/Navigator/navigator.module.css
@@ -0,0 +1,20 @@
+.navigatorBg {
+  --navigator-bg-size: var(--navigator-bg-image-width) var(--navigator-bg-image-height);
+  background: var(--navigator-bg-image);
+  background-size: var(--navigator-bg-size);
+  background-position: var(--navigator-bg-position);
+  opacity: 0.89;
+  transition: all 0.3s ease-in-out;
+}
+
+.navigatorBg:hover {
+  --navigator-bg-size: calc(var(--navigator-bg-image-width) * 1.115)
+    calc(var(--navigator-bg-image-height) * 1.115);
+  opacity: 0.98;
+  filter: brightness(1.2);
+}
+
+.navigatorBg:active {
+  opacity: 1;
+  filter: brightness(1.3) contrast(1.05);
+}
diff --git a/client/src/core/components/NavigatorDefaultStyle/index.tsx b/client/src/core/components/NavigatorDefaultStyle/index.tsx
@@ -10,13 +10,15 @@ interface NavigatorDefaultStyleProps {
 interface NavigatorVars {
   bgSize: string;
   bgPosition: string;
+  bgSizeWidth: string;
+  bgSizeHeight: string;
 }
 
 const navigatorStyles: Record<string | number, NavigatorVars> = {
-  '1': { bgSize: '290% 175%', bgPosition: '3% 20%' },
-  '2': { bgSize: '300% 240%', bgPosition: '-50% 3%' },
-  '3': { bgSize: '125% 100%', bgPosition: '55% 100%' },
-  '4': { bgSize: '300% 240%', bgPosition: '-50% 3%' },
+  '1': { bgSize: '290% 175%', bgSizeWidth: '290%', bgSizeHeight: '175%', bgPosition: '3% 20%' },
+  '2': { bgSize: '300% 240%', bgSizeWidth: '300%', bgSizeHeight: '240%', bgPosition: '-50% 3%' },
+  '3': { bgSize: '125% 100%', bgSizeWidth: '125%', bgSizeHeight: '100%', bgPosition: '55% 100%' },
+  '4': { bgSize: '300% 240%', bgSizeWidth: '300%', bgSizeHeight: '240%', bgPosition: '-50% 3%' },
 };
 
 export default function NavigatorDefaultStyle({
@@ -27,8 +29,9 @@ export default function NavigatorDefaultStyle({
   return (
     <Navigator
       href={href}
-      bgSize={navigatorStyles[styleNumber]?.bgSize || ''}
       bgPosition={navigatorStyles[styleNumber]?.bgPosition || ''}
+      bgSizeWidth={navigatorStyles[styleNumber]?.bgSizeWidth || ''}
+      bgSizeHeight={navigatorStyles[styleNumber]?.bgSizeHeight || ''}
       bgImage="/images/klowhub_banner2.png"
       className="w-[48%] lg:w-full">
       {children}

diff --git a/client/src/core/components/PageLoading/index.tsx b/client/src/core/components/PageLoading/index.tsx
@@ -9,7 +9,7 @@ export default function PageLoading() {
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
         transition={{ duration: 0.5 }}
-        className="fixed inset-0 flex items-center justify-center">
+        className="fixed inset-0 flex size-full items-center justify-center bg-gradient-bg-1">
         <motion.div
           initial={{ scale: 0.95, opacity: 0 }}
           animate={{ scale: 1, opacity: 1 }}

diff --git a/client/src/core/components/StarRating/index.tsx b/client/src/core/components/StarRating/index.tsx
@@ -24,12 +24,12 @@ export const StarRating = ({ rating = 0 }: StartRatingProps) => {
   // Add partial star if exists
   if (hasPartialStar) {
     stars.push(
-      <StarIcon
-        key={`partial-star`}
-        filled={true}
-        half
-        percentage={`${100 - partialStarPercentage}%`}
-      />
+      <div className="relative" key={`partial-star`}>
+        <StarIcon filled={false} />
+        <div className="absolute inset-0 overflow-hidden">
+          <StarIcon filled={true} half percentage={`${100 - partialStarPercentage}%`} />
+        </div>
+      </div>
     );
   }
 

diff --git a/client/src/core/styles/globals.css b/client/src/core/styles/globals.css
@@ -248,3 +248,8 @@ input:disabled + label.view-disabled-input {
     clip-path: inset(0 var(--half-percentage) 0 0);
   }
 }
+
+.video-container-name {
+  container-name: watchCourse;
+  container-type: inline-size;
+}
diff --git a/client/src/features/cart/components/CartList/index.tsx b/client/src/features/cart/components/CartList/index.tsx
@@ -29,7 +29,7 @@ export default function CourseCartList({ deleteText }: CourseSectionProps) {
         ))
       ) : (
         <div className="p-16 text-center text-2xl font-semibold text-white">
-          Todabian no tienes elementos agregados al carrito
+          Todavía no tienes elementos agregados al carrito
         </div>
       )}
     </div>

diff --git a/client/src/features/cart/components/CartPage/index.tsx b/client/src/features/cart/components/CartPage/index.tsx
@@ -17,9 +17,9 @@ const CartSection = async () => {
 
         <div className="mb-10 w-full lg:w-1/4">
           <PaymentSummary
-            subtotal={6071}
+            subtotal={0}
             serviceFee={130}
-            discount={20}
+            discount={0}
             paymentMethods={['/svg/Stripe.svg', '/svg/PayPal.png', '/svg/Etherium.png']}
           />
         </div>

diff --git a/client/src/features/cart/components/PaymentSummary/index.tsx b/client/src/features/cart/components/PaymentSummary/index.tsx
@@ -1,8 +1,10 @@
 'use client';
+import { useAtomValue } from 'jotai';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import React, { useState } from 'react';
 import Button from '@core/components/Button';
+import { cartStoreAtom } from '@features/cart/store/cart.store';
 import { Paid } from '../Paypal/Paid';
 
 interface PaymentSummaryProps {
@@ -19,7 +21,10 @@ const PaymentSummary: React.FC<PaymentSummaryProps> = ({
   paymentMethods,
 }) => {
   const t = useTranslations<'SumaryCart'>('SumaryCart');
-  const total = subtotal + serviceFee - (subtotal * discount) / 100;
+  const cart = useAtomValue(cartStoreAtom);
+  const price = cart.reduce((acc, item) => acc + parseFloat(item.price as string), 0);
+  const fee = price > 0 ? serviceFee : 0;
+  const total = price + fee - (price * discount) / 100;
 
   const [selectedMethodIndex, setSelectedMethodIndex] = useState<number | null>(null);
 
@@ -33,10 +38,10 @@ const PaymentSummary: React.FC<PaymentSummaryProps> = ({
     <div className="rounded-lg border-2 border-[#21262f] bg-[#222934] p-4 text-white shadow-app-1 md:grow md:p-3 lg:p-4">
       <h3 className="mb-4 text-lg font-semibold">{t('Resumen')}</h3>
       <p className="mb-3 text-sm">
-        {t('Subtotal')}: <span className="float-right">${subtotal.toFixed(2)}</span>
+        {t('Subtotal')}: <span className="float-right">${price}</span>
       </p>
       <p className="mb-10 text-sm">
-        {t('Tarifa')}: <span className="float-right">${serviceFee.toFixed(2)}</span>
+        {t('Tarifa')}: <span className="float-right">${fee}</span>
       </p>
       <div className="mt-4">
         <label htmlFor="coupon" className="mb-3 block text-sm">

diff --git a/client/src/features/cart/components/Paypal/Paid.tsx b/client/src/features/cart/components/Paypal/Paid.tsx
@@ -1,7 +1,15 @@
 'use client';
 import { PayPalButtons, PayPalScriptProvider } from '@paypal/react-paypal-js';
+import { useAtomValue } from 'jotai';
+import { cartStoreAtom } from '@features/cart/store/cart.store';
+import env from '@root/env.config';
 export const Paid = () => {
-  const clientId: string = process.env.NEXT_PUBLIC_CLIENT_ID!;
+  const clientId: string = env.NEXT_PUBLIC_CLIENT_ID;
+  const cart = useAtomValue(cartStoreAtom);
+  const total = cart.reduce((acc, item) => acc + parseFloat(item.price as string), 0) + 130;
+  const price = total.toString();
+  // const price = prise; // En formato string con dos decimales
+  const currency = 'USD'; // Código de moneda, e.g., USD, EUR, etc.
   return (
     <div className="flex items-center justify-center">
       <PayPalScriptProvider
@@ -14,6 +22,19 @@ export const Paid = () => {
             color: 'blue',
             label: 'paypal',
           }}
+          createOrder={(data, actions) => {
+            return actions.order.create({
+              intent: 'CAPTURE', // Captura inmediata del pago
+              purchase_units: [
+                {
+                  amount: {
+                    currency_code: currency, // Código de moneda requerido
+                    value: price, // Precio estático
+                  },
+                },
+              ],
+            });
+          }}
         />
       </PayPalScriptProvider>
     </div>

diff --git a/client/src/features/courses/components/CourseCard/CourseCard.module.css b/client/src/features/courses/components/CourseCard/CourseCard.module.css
@@ -10,8 +10,8 @@
   width: 100%;
   max-width: 550px;
   height: 100%;
-  min-height: 505px;
-  max-height: 505px;
+  min-height: 550px;
+  max-height: 550px;
   border-radius: 8px;
   display: flex;
   flex-direction: column;

diff --git a/client/src/features/courses/components/CourseCard/index.tsx b/client/src/features/courses/components/CourseCard/index.tsx
@@ -110,7 +110,7 @@ const CourseCard = ({
         {categoria}
       </span>
 
-      <div className="grow p-4">
+      <div className="grow px-4 pt-4">
         <div className="flex items-center justify-between">
           <h3 className="line-clamp-2 max-h-14 min-h-14 text-ellipsis text-lg font-bold text-slate-200">
             {title}
@@ -153,15 +153,15 @@ const CourseCard = ({
           ) : null}
         </div>
         {price ? (
-          <div className="mt-4 flex items-center gap-2">
+          <div className="mt-4 flex items-center">
             <strong className="text-lg font-bold text-slate-200">${price}</strong>
           </div>
         ) : null}
       </div>
 
-      <div className="mt-auto flex items-center p-4">
+      <div className="mt-2 flex items-center p-3">
         <Button
-          className="relative z-10 rounded-lg px-4 py-2 text-sm text-white"
+          className="relative z-10 rounded-lg px-4 text-sm text-white"
           onClick={() => {
             saveToCart({
               courseId,
-Original file line number
+Diff line change
@@ Expand Up @@
             ))
           ) : (
             <div className="p-16 text-center text-2xl font-semibold text-white">
-              Todabian no tienes elementos agregados al carrito
+              Todavía no tienes elementos agregados al carrito
             </div>
           )}
         </div>
@@ Expand Down @@