Update site changes

2026-01-31 22:32:54 +00:00
parent d3c69f2936
commit 6df3baf0be
25 changed files with 764 additions and 137 deletions
--- a/frontend/src/app/(public)/book/[eventId]/page.tsx
+++ b/frontend/src/app/(public)/book/[eventId]/page.tsx
@@ -160,6 +160,13 @@ export default function BookingPage() {
            router.push('/events');
            return;
          }
+          
+          // Redirect to external booking if enabled
+          if (eventRes.event.externalBookingEnabled && eventRes.event.externalBookingUrl) {
+            window.location.href = eventRes.event.externalBookingUrl;
+            return;
+          }
+          
          setEvent(eventRes.event);
          setPaymentConfig(paymentRes.paymentOptions);
          
@@ -696,6 +703,34 @@ export default function BookingPage() {
              <p className="font-mono font-bold text-lg">{bookingResult.qrCode}</p>
            </div>
            
+            {/* Manual verification notice */}
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
+              <div className="flex gap-3">
+                <div className="flex-shrink-0">
+                  <svg className="w-5 h-5 text-blue-600 mt-0.5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
+                  </svg>
+                </div>
+                <div className="text-sm text-blue-800">
+                  <p className="font-medium mb-1">
+                    {locale === 'es' ? 'Verificación manual' : 'Manual verification'}
+                  </p>
+                  <p className="text-blue-700">
+                    {locale === 'es' 
+                      ? 'El equipo de Spanglish revisará el pago manualmente. Tu reserva solo será confirmada después de recibir un email de confirmación de nuestra parte.'
+                      : 'The Spanglish team will review the payment manually. Your booking is only confirmed after you receive a confirmation email from us.'}
+                  </p>
+                </div>
+              </div>
+            </div>
+            
+            {/* Warning before I Have Paid button */}
+            <p className="text-sm text-center text-amber-700 font-medium mb-3">
+              {locale === 'es'
+                ? 'Solo haz clic aquí después de haber completado el pago.'
+                : 'Only click this after you have actually completed the payment.'}
+            </p>
+            
            {/* I Have Paid Button */}
            <Button
              onClick={handleMarkPaymentSent}
@@ -1016,48 +1051,90 @@ export default function BookingPage() {
                      : 'No payment methods available for this event.'}
                  </div>
                ) : (
-                  paymentMethods.map((method) => (
-                    <button
-                      key={method.id}
-                      type="button"
-                      onClick={() => setFormData({ ...formData, paymentMethod: method.id })}
-                      className={`w-full p-4 rounded-lg border-2 transition-all text-left flex items-start gap-4 ${
-                        formData.paymentMethod === method.id
-                          ? 'border-primary-yellow bg-primary-yellow/10'
-                          : 'border-secondary-light-gray hover:border-gray-300'
-                      }`}
-                    >
-                      <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
-                        formData.paymentMethod === method.id
-                          ? 'bg-primary-yellow'
-                          : 'bg-gray-100'
-                      }`}>
-                        <method.icon className={`w-5 h-5 ${
+                  <>
+                    {paymentMethods.map((method) => (
+                      <button
+                        key={method.id}
+                        type="button"
+                        onClick={() => setFormData({ ...formData, paymentMethod: method.id })}
+                        className={`w-full p-4 rounded-lg border-2 transition-all text-left flex items-start gap-4 ${
                          formData.paymentMethod === method.id
-                            ? 'text-primary-dark'
-                            : 'text-gray-500'
-                        }`} />
-                      </div>
-                      <div className="flex-1">
-                        <div className="flex items-center gap-2">
-                          <p className="font-medium text-primary-dark">{method.label}</p>
-                          {method.badge && (
-                            <span className={`text-xs px-2 py-0.5 rounded-full ${
-                              method.badge === 'Instant' || method.badge === 'Instantáneo'
-                                ? 'bg-green-100 text-green-700'
-                                : 'bg-gray-100 text-gray-600'
-                            }`}>
-                              {method.badge}
-                            </span>
-                          )}
+                            ? 'border-primary-yellow bg-primary-yellow/10'
+                            : 'border-secondary-light-gray hover:border-gray-300'
+                        }`}
+                      >
+                        <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
+                          formData.paymentMethod === method.id
+                            ? 'bg-primary-yellow'
+                            : 'bg-gray-100'
+                        }`}>
+                          <method.icon className={`w-5 h-5 ${
+                            formData.paymentMethod === method.id
+                              ? 'text-primary-dark'
+                              : 'text-gray-500'
+                          }`} />
+                        </div>
+                        <div className="flex-1">
+                          <div className="flex items-center gap-2">
+                            <p className="font-medium text-primary-dark">{method.label}</p>
+                            {method.badge && (
+                              <span className={`text-xs px-2 py-0.5 rounded-full ${
+                                method.badge === 'Instant' || method.badge === 'Instantáneo'
+                                  ? 'bg-green-100 text-green-700'
+                                  : 'bg-gray-100 text-gray-600'
+                              }`}>
+                                {method.badge}
+                              </span>
+                            )}
+                          </div>
+                          <p className="text-sm text-gray-500">{method.description}</p>
+                        </div>
+                        {formData.paymentMethod === method.id && (
+                          <CheckCircleIcon className="w-6 h-6 text-primary-yellow ml-auto flex-shrink-0" />
+                        )}
+                      </button>
+                    ))}
+                    
+                    {/* Manual payment instructions - shown when TPago or Bank Transfer is selected */}
+                    {(formData.paymentMethod === 'tpago' || formData.paymentMethod === 'bank_transfer') && (
+                      <div className="mt-4 p-4 bg-amber-50 border border-amber-200 rounded-lg">
+                        <div className="flex gap-3">
+                          <div className="flex-shrink-0">
+                            <svg className="w-5 h-5 text-amber-600 mt-0.5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                              <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+                            </svg>
+                          </div>
+                          <div className="text-sm text-amber-800">
+                            <p className="font-medium mb-1">
+                              {locale === 'es' ? 'Proceso de pago manual' : 'Manual payment process'}
+                            </p>
+                            <ol className="list-decimal list-inside space-y-1 text-amber-700">
+                              <li>
+                                {locale === 'es' 
+                                  ? 'Por favor completa el pago primero.' 
+                                  : 'Please complete the payment first.'}
+                              </li>
+                              <li>
+                                {locale === 'es' 
+                                  ? 'Después de pagar, haz clic en "Ya pagué" para notificarnos.' 
+                                  : 'After you have paid, click "I have paid" to notify us.'}
+                              </li>
+                              <li>
+                                {locale === 'es' 
+                                  ? 'Nuestro equipo verificará el pago manualmente.' 
+                                  : 'Our team will manually verify the payment.'}
+                              </li>
+                              <li>
+                                {locale === 'es' 
+                                  ? 'Una vez aprobado, recibirás un email confirmando tu reserva.' 
+                                  : 'Once approved, you will receive an email confirming your booking.'}
+                              </li>
+                            </ol>
+                          </div>
                        </div>
-                        <p className="text-sm text-gray-500">{method.description}</p>
                      </div>
-                      {formData.paymentMethod === method.id && (
-                        <CheckCircleIcon className="w-6 h-6 text-primary-yellow ml-auto flex-shrink-0" />
-                      )}
-                    </button>
-                  ))
+                    )}
+                  </>
                )}
              </div>
            </Card>
--- a/frontend/src/app/(public)/booking/[ticketId]/page.tsx
+++ b/frontend/src/app/(public)/booking/[ticketId]/page.tsx
@@ -457,6 +457,34 @@ export default function BookingPaymentPage() {
              <p className="font-mono font-bold text-lg">{ticket.qrCode}</p>
            </div>
            
+            {/* Manual verification notice */}
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
+              <div className="flex gap-3">
+                <div className="flex-shrink-0">
+                  <svg className="w-5 h-5 text-blue-600 mt-0.5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
+                  </svg>
+                </div>
+                <div className="text-sm text-blue-800">
+                  <p className="font-medium mb-1">
+                    {locale === 'es' ? 'Verificación manual' : 'Manual verification'}
+                  </p>
+                  <p className="text-blue-700">
+                    {locale === 'es' 
+                      ? 'El equipo de Spanglish revisará el pago manualmente. Tu reserva solo será confirmada después de recibir un email de confirmación de nuestra parte.'
+                      : 'The Spanglish team will review the payment manually. Your booking is only confirmed after you receive a confirmation email from us.'}
+                  </p>
+                </div>
+              </div>
+            </div>
+            
+            {/* Warning before I Have Paid button */}
+            <p className="text-sm text-center text-amber-700 font-medium mb-3">
+              {locale === 'es'
+                ? 'Solo haz clic aquí después de haber completado el pago.'
+                : 'Only click this after you have actually completed the payment.'}
+            </p>
+            
            {/* I Have Paid Button */}
            <Button
              onClick={handleMarkPaymentSent}
--- a/frontend/src/app/(public)/community/page.tsx
+++ b/frontend/src/app/(public)/community/page.tsx
@@ -14,7 +14,8 @@ import {
  socialConfig, 
  getWhatsAppUrl, 
  getInstagramUrl, 
-  getTelegramUrl 
+  getTelegramUrl,
+  getTikTokUrl 
 } from '@/lib/socialLinks';

 export default function CommunityPage() {
@@ -24,6 +25,7 @@ export default function CommunityPage() {
  const whatsappUrl = getWhatsAppUrl(socialConfig.whatsapp);
  const instagramUrl = getInstagramUrl(socialConfig.instagram);
  const telegramUrl = getTelegramUrl(socialConfig.telegram);
+  const tiktokUrl = getTikTokUrl(socialConfig.tiktok);

  const guidelines = t('community.guidelines.items') as unknown as string[];

@@ -36,7 +38,7 @@ export default function CommunityPage() {
        </div>

        {/* Social Links */}
-        <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+        <div className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
          {/* WhatsApp Card */}
          {whatsappUrl && (
            <Card className="p-8 text-center card-hover">
@@ -76,7 +78,7 @@ export default function CommunityPage() {
                rel="noopener noreferrer"
                className="inline-block mt-6"
              >
-                <Button variant="outline">
+                <Button>
                  {t('community.telegram.button')}
                </Button>
              </a>
@@ -103,6 +105,29 @@ export default function CommunityPage() {
              </a>
            </Card>
          )}
+
+          {/* TikTok Card */}
+          {tiktokUrl && (
+            <Card className="p-8 text-center card-hover">
+              <div className="w-20 h-20 mx-auto bg-black rounded-full flex items-center justify-center">
+                <svg className="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
+                </svg>
+              </div>
+              <h3 className="mt-6 text-xl font-semibold">{t('community.tiktok.title')}</h3>
+              <p className="mt-3 text-gray-600">{t('community.tiktok.description')}</p>
+              <a 
+                href={tiktokUrl}
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="inline-block mt-6"
+              >
+                <Button>
+                  {t('community.tiktok.button')}
+                </Button>
+              </a>
+            </Card>
+          )}
        </div>

        {/* Guidelines */}
--- a/frontend/src/app/(public)/components/HeroSection.tsx
+++ b/frontend/src/app/(public)/components/HeroSection.tsx
@@ -4,10 +4,6 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { useLanguage } from '@/context/LanguageContext';
 import Button from '@/components/ui/Button';
-import { 
-  ChatBubbleLeftRightIcon,
-  UserGroupIcon 
-} from '@heroicons/react/24/outline';

 export default function HeroSection() {
  const { t } = useLanguage();
@@ -51,8 +47,6 @@ export default function HeroSection() {
                      priority
                      fetchPriority="high"
                    />
-                  <div className="absolute inset-0 bg-primary-yellow/60" />
-                  <ChatBubbleLeftRightIcon className="relative z-10 w-16 h-16 text-primary-dark opacity-50" />
                </div>
                <div className="relative rounded-card h-48 overflow-hidden">
                  <Image
@@ -76,7 +70,7 @@ export default function HeroSection() {
                    loading="lazy"
                  />
                </div>
-                <div className="relative rounded-card h-32 flex items-center justify-center overflow-hidden">
+                <div className="relative rounded-card h-32 overflow-hidden">
                  <Image
                    src="/images/2026-01-29 13.09.59.jpg"
                    alt="Language exchange group practicing English and Spanish"
@@ -85,8 +79,6 @@ export default function HeroSection() {
                    className="object-cover"
                    loading="lazy"
                  />
-                  <div className="absolute inset-0 bg-secondary-brown/40" />
-                  <UserGroupIcon className="relative z-10 w-16 h-16 text-secondary-brown opacity-70" />
                </div>
              </div>
            </div>
--- a/frontend/src/app/(public)/events/[id]/EventDetailClient.tsx
+++ b/frontend/src/app/(public)/events/[id]/EventDetailClient.tsx
@@ -186,11 +186,23 @@ export default function EventDetailClient({ eventId, initialEvent }: EventDetail
              </div>
              
              {canBook ? (
-                <Link href={`/book/${event.id}`}>
-                  <Button className="w-full" size="lg">
-                    {t('events.booking.join')}
-                  </Button>
-                </Link>
+                event.externalBookingEnabled && event.externalBookingUrl ? (
+                  <a
+                    href={event.externalBookingUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <Button className="w-full" size="lg">
+                      {t('events.booking.join')}
+                    </Button>
+                  </a>
+                ) : (
+                  <Link href={`/book/${event.id}`}>
+                    <Button className="w-full" size="lg">
+                      {t('events.booking.join')}
+                    </Button>
+                  </Link>
+                )
              ) : (
                <Button className="w-full" size="lg" disabled>
                  {isPastEvent