Add button to share booking confirmation

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"
   },

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>
+  )
+}

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,6 +91,8 @@ export function PublicBookingConfirmationPage({
                 </p>
               </div>
 
+              <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"
@@ -103,6 +106,7 @@ export function PublicBookingConfirmationPage({
                   Hacer otra reserva
                 </Button>
               </div>
+            </div>
           )}
         </section>
       </div>