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

- +
+ + +
)}