From 2a0558347a3f346c4d853e15ae613a3df4eb94cf Mon Sep 17 00:00:00 2001
From: Jose Selesan <jose.selesan@solotechnologies.us>
Date: Thu, 9 Apr 2026 10:13:33 -0300
Subject: [PATCH] Add button to share booking confirmation

---
 apps/frontend/package.json                    |  1 +
 .../components/share-whatsapp-button.tsx      | 53 +++++++++++++++++++
 .../public-booking-confirmation-page.tsx      | 28 +++++-----
 3 files changed, 70 insertions(+), 12 deletions(-)
 create mode 100644 apps/frontend/src/features/public-booking/components/share-whatsapp-button.tsx

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index a3b2033..2ff3ab3 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -28,6 +28,7 @@
     "react-dom": "^19.2.4",
     "react-hook-form": "^7.72.0",
     "shadcn": "^4.1.2",
+    "simple-icons": "^16.15.0",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0"
   },
diff --git a/apps/frontend/src/features/public-booking/components/share-whatsapp-button.tsx b/apps/frontend/src/features/public-booking/components/share-whatsapp-button.tsx
new file mode 100644
index 0000000..2100583
--- /dev/null
+++ b/apps/frontend/src/features/public-booking/components/share-whatsapp-button.tsx
@@ -0,0 +1,53 @@
+import type { PublicBookingConfirmation } from '@repo/api-contract'
+import { siWhatsapp } from 'simple-icons'
+import { Button } from '@/components/ui/button'
+
+type ShareWhatsappButtonProps = {
+  confirmation: PublicBookingConfirmation
+}
+
+function formatDateLabel(isoDate: string) {
+  const [year, month, day] = isoDate.split('-').map(Number)
+  const date = new Date(year, (month ?? 1) - 1, day ?? 1)
+
+  return new Intl.DateTimeFormat('es-AR', {
+    weekday: 'long',
+    day: '2-digit',
+    month: 'long',
+    year: 'numeric',
+  }).format(date)
+}
+
+function createWhatsappMessage(confirmation: PublicBookingConfirmation) {
+  const dateLabel = formatDateLabel(confirmation.date)
+  return [
+    'Ya reservamos cancha para jugar.',
+    `Complejo: ${confirmation.complexName}`,
+    `Cancha: ${confirmation.courtName} (${confirmation.sport.name})`,
+    `Fecha: ${dateLabel}`,
+    `Horario: ${confirmation.startTime} - ${confirmation.endTime}`,
+    `Codigo de reserva: ${confirmation.bookingCode}`,
+  ].join('\n')
+}
+
+export function ShareWhatsappButton({ confirmation }: ShareWhatsappButtonProps) {
+  const whatsappUrl = `https://wa.me/?text=${encodeURIComponent(
+    createWhatsappMessage(confirmation),
+  )}`
+
+  return (
+    <Button type="button" variant="outline" className="h-11 w-full text-sm sm:text-base" asChild>
+      <a href={whatsappUrl} target="_blank" rel="noopener noreferrer">
+        <svg
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+          className="size-4"
+          style={{ color: `#${siWhatsapp.hex}` }}
+        >
+          <path d={siWhatsapp.path} fill="currentColor" />
+        </svg>
+        Compartir por WhatsApp
+      </a>
+    </Button>
+  )
+}
diff --git a/apps/frontend/src/features/public-booking/public-booking-confirmation-page.tsx b/apps/frontend/src/features/public-booking/public-booking-confirmation-page.tsx
index 22c509f..5dd63ef 100644
--- a/apps/frontend/src/features/public-booking/public-booking-confirmation-page.tsx
+++ b/apps/frontend/src/features/public-booking/public-booking-confirmation-page.tsx
@@ -2,6 +2,7 @@ import { useQuery } from '@tanstack/react-query'
 import { useNavigate } from '@tanstack/react-router'
 import { Button } from '@/components/ui/button'
 import { ApiClientError, apiClient } from '@/lib/api-client'
+import { ShareWhatsappButton } from './components/share-whatsapp-button'
 
 type PublicBookingConfirmationPageProps = {
   complexSlug: string
@@ -90,18 +91,21 @@ export function PublicBookingConfirmationPage({
                 </p>
               </div>
 
-              <Button
-                type="button"
-                className="h-11 w-full text-sm sm:text-base"
-                onClick={() => {
-                  void navigate({
-                    to: '/$complexSlug/booking',
-                    params: { complexSlug },
-                  })
-                }}
-              >
-                Hacer otra reserva
-              </Button>
+              <div className="grid gap-3 sm:grid-cols-2">
+                <ShareWhatsappButton confirmation={confirmationQuery.data} />
+                <Button
+                  type="button"
+                  className="h-11 w-full text-sm sm:text-base"
+                  onClick={() => {
+                    void navigate({
+                      to: '/$complexSlug/booking',
+                      params: { complexSlug },
+                    })
+                  }}
+                >
+                  Hacer otra reserva
+                </Button>
+              </div>
             </div>
           )}
         </section>