Add button to share booking confirmation

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