feat: add stock flow to tasting details

src/app/(store)/checkout/components/checkout-form/actions.ts

@@ -1,5 +1,7 @@
 'use server'
 
+import { revalidatePath } from 'next/cache'
+
 import { createClient } from '@/lib/supabase/server'
 
 type Order = {
@@ -9,7 +11,7 @@ type Order = {
   delivery: { date: string; time: number }
   payment: { method: number }
   total: number
-  items: { id: number; quantity: number }[]
+  items: { id: number; quantity: number; slug: string }[]
 }
 
 export async function createOrder(order: Order) {
@@ -30,5 +32,9 @@ export async function createOrder(order: Order) {
     return { data: null, error }
   }
 
+  for (const item of order.items) {
+    revalidatePath(`/tastings/${item.slug}`)
+  }
+
   return { data, error: null }
 }

src/app/(store)/checkout/components/checkout-form/index.tsx

@@ -27,7 +27,7 @@ type Order = {
   delivery: { date: string; time: number }
   payment: { method: number }
   total: number
-  items: { id: number; quantity: number }[]
+  items: { id: number; quantity: number; slug: string }[]
 }
 
 const formSchema = z.object({
@@ -130,7 +130,8 @@ const CheckoutForm = ({
       },
       items: items.map((item) => ({
         id: item.id,
-        quantity: item.quantity
+        quantity: item.quantity,
+        slug: item.slug
       })),
       total: Number(totalPrice) || 0
     }

src/app/(store)/contact/page.tsx

@@ -9,7 +9,7 @@ export const metadata: Metadata = {
 }
 
 const breadcrumbs = [
-  { name: 'Home', href: '/' },
+  { name: 'Inicio', href: '/' },
   { name: 'Contact', isCurrentPage: true }
 ]
 

src/app/(store)/faqs/page.tsx

@@ -14,7 +14,7 @@ export const metadata: Metadata = {
 }
 
 const breadcrumbs = [
-  { name: 'Home', href: '/' },
+  { name: 'Inicio', href: '/' },
   { name: 'FAQs', isCurrentPage: true }
 ]
 

src/app/(store)/tastings/[slug]/components/actions.tsx

@@ -1,32 +1,40 @@
 'use client'
 import { useState } from 'react'
-import { Minus, Plus } from 'lucide-react'
 
+/* import { Minus, Plus } from 'lucide-react' */
 import { useCart } from '@/app/(store)/contexts/cart'
 import { Dialogs, useDialog } from '@/app/contexts/dialogs'
+import { Button } from '@/components/ui/button'
 
 const Actions = ({
   item
 }: {
   item: { id: number; price: number; name: string; stock: number; slug: string }
 }) => {
-  const [quantity, setQuantity] = useState(1)
+  const [quantity /* setQuantity */] = useState(1)
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_, setDialogOpen] = useDialog()
 
-  const { addItem } = useCart()
+  const { addItem, items } = useCart()
+
+  const currentCartItem = items.find((cartItem) => cartItem.id === item.id)
+  const currentQuantityInCart = currentCartItem ? currentCartItem.quantity : 0
+  const totalDesiredQuantity = currentQuantityInCart + quantity
 
   return (
     <section className="grid w-full grid-cols-1 gap-4 self-start py-2 md:w-72">
       <div className="flex w-full justify-between">
         <p className="text-xl font-bold leading-10">
           ${item.price.toFixed(2)}{' '}
-          <span className="text-[10px] font-light"> Inc. all taxes</span>
+          <span className="text-[10px] font-light">
+            {' '}
+            Inc. todos los impuestos
+          </span>
         </p>
-        <div className="flex w-20  items-center font-semibold">
+        {/* <div className="flex w-20  items-center font-semibold">
           <button
-            disabled={quantity === 1}
+            disabled={quantity <= 1}
             aria-label="Decrease quantity"
             className={`grid size-6 place-content-center rounded-full bg-black leading-5 text-white disabled:cursor-not-allowed disabled:opacity-50
               `}
@@ -38,17 +46,19 @@ const Actions = ({
           </button>
           <span className="flex-1 text-center">{quantity}</span>
           <button
-            disabled={quantity === item.stock}
+            disabled={totalDesiredQuantity >= item.stock}
             aria-label="Increase quantity"
             className={`grid size-6 place-content-center rounded-full bg-black leading-5 text-white disabled:cursor-not-allowed disabled:opacity-50`}
             onClick={() => setQuantity(quantity + 1)}
           >
             <Plus size={10} strokeWidth={4} />
           </button>
-        </div>
+        </div> */}
       </div>
-      <button
-        className="w-full rounded-full bg-black py-3 text-white hover:opacity-80"
+
+      <Button
+        className="h-10 w-full rounded-full bg-black py-3 text-white hover:opacity-80"
+        disabled={item.stock <= 0 || totalDesiredQuantity > item.stock}
         onClick={() => {
           addItem({
             id: item.id,
@@ -61,8 +71,14 @@ const Actions = ({
           setDialogOpen(Dialogs.Cart)
         }}
       >
-        Add to Bag
-      </button>
+        Añadir al carrito
+      </Button>
+      {item.stock <= 0 ||
+        (totalDesiredQuantity > item.stock && (
+          <span className="text-[10px] font-light">
+            Ya añadiste la cantidad máxima de este producto al carrito
+          </span>
+        ))}
     </section>
   )
 }

src/app/(store)/tastings/[slug]/page.tsx

@@ -37,7 +37,7 @@ export default async function TastingDetailsPage({
   }
 
   const breadcrumbs = [
-    { name: 'Home', href: '/' },
+    { name: 'Inicio', href: '/' },
     { name: 'Tastings', href: '/tastings' },
     { name: data.slug, isCurrentPage: true }
   ]
@@ -47,20 +47,22 @@ export default async function TastingDetailsPage({
       <Breadcrumbs elements={breadcrumbs} />
 
       <section className="grid grid-cols-1 gap-4 py-4 md:grid-cols-2">
-        <section className="flex flex-col px-4">
-          <div className="aspect-square w-full rounded-lg bg-neutral-100" />
-        </section>
+        <div className="relative aspect-square w-full overflow-hidden rounded-lg bg-neutral-100">
+          {data.stock === 0 && (
+            <div className="absolute right-0 top-0 rounded-bl-lg bg-neutral-500/50 px-2 py-1 text-white">
+              Sin Stock
+            </div>
+          )}
+        </div>
 
         <article className="flex flex-col justify-between gap-4 px-4">
           <section className="py-4 md:py-0">
-            <h1 className="h-14 font-kalnia text-3xl font-bold">
-              {data.name} Tasting
-            </h1>
-            <h2 className="font-bold">Tasting Description</h2>
+            <h1 className="h-14 font-kalnia text-3xl font-bold">{data.name}</h1>
+            <h2 className="font-bold">Descripción de la Cata</h2>
             <p className="my-4">{data.long_description}</p>
-            <h2 className="font-bold">Wines</h2>
-            <p className="my-4">{data.wines.length} units of 750ml</p>
-            <h2 className="font-bold">Pairings</h2>
+            <h2 className="font-bold">Vinos</h2>
+            <p className="my-4">{data.wines.length} unidades de 750ml</p>
+            <h2 className="font-bold">Maridajes</h2>
             <p className="my-4">{data.pairings}</p>
           </section>
           <div className="hidden md:block">

src/app/(store)/tastings/page.tsx

@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 }
 
 const breadcrumbs = [
-  { name: 'Home', href: '/' },
+  { name: 'Inicio', href: '/' },
   { name: 'Tastings', isCurrentPage: true }
 ]
 

src/app/globals.css

@@ -4,7 +4,7 @@
 
 @layer base {
   :root {
-    --background: 32, 60%, 95%;
+    --background: 0 0% 98%;
     --foreground: 240 10% 3.9%;
 
     --card: 0 0% 100%;