feat(tickets): point ticket links at Sympla

i18n/en-US/code.json

@@ -386,6 +386,9 @@
   "tickets.subtitle": {
     "message": "Secure your spot at the biggest JavaScript conference in Brazil."
   },
+  "tickets.cta": {
+    "message": "Buy on Sympla"
+  },
   "home.waitlist.error": {
     "message": "Something went wrong. Please try again later."
   },

i18n/es-419/code.json

@@ -386,6 +386,9 @@
   "tickets.subtitle": {
     "message": "Asegura tu lugar en la mayor conferencia de JavaScript de Brasil."
   },
+  "tickets.cta": {
+    "message": "Comprar en Sympla"
+  },
   "home.waitlist.error": {
     "message": "Algo salió mal. Por favor, inténtalo más tarde."
   },

i18n/pt-BR/code.json

@@ -395,6 +395,9 @@
   "tickets.subtitle": {
     "message": "Garanta agora seu lugar na maior conferência de JavaScript do Brasil."
   },
+  "tickets.cta": {
+    "message": "Comprar na Sympla"
+  },
   "common.loading": {
     "message": "Carregando…"
   },

src/website/components/home/TicketSelection.tsx

@@ -1,100 +1,20 @@
-import { useEffect, useRef, useState } from 'react';
+import { useRef } from 'react';
 import { SquareArrowOutUpRight, Ticket } from 'lucide-react';
 import { Text } from '@site/src/website/components/shared/i18n';
 import { link } from '@site/src/website/configs/definitions';
 import { useScroll } from '../../hooks/useScroll';
 import { SafeLink } from '../shared/SafeLink';
 
-const GUILD_API =
-  'https://guild.host/graphql/2003081008408bdeed2a1d4fc2ecdbb189041fca778aea0d9884030f981c75dd';
-const GUILD_SLUG = 'vdc8dh';
-
-type TierNode = {
-  id: string;
-  name: string;
-  description: string | null;
-  priceAmountCents?: number | null;
-  priceCurrency?: string | null;
-};
-
-type GuildResponse = {
-  data: {
-    event: {
-      eventTicketingTiers: {
-        edges: Array<{ node: TierNode }>;
-      };
-    };
-  };
-};
-
-function formatPrice(
-  cents: number | null | undefined,
-  currency: string | null | undefined
-): string | null {
-  if (cents == null) return null;
-  const amount = cents / 100;
-  if (currency === 'BRL')
-    return `R$${amount % 1 === 0 ? amount : amount.toFixed(2)}`;
-  return `${currency ?? ''} ${amount.toFixed(2)}`.trim() || null;
-}
-
-const TicketCard = () => {
-  const [tiers, setTiers] = useState<TierNode[]>([]);
-
-  useEffect(() => {
-    const controller = new AbortController();
-
-    fetch(GUILD_API, {
-      method: 'GET',
-      headers: {
-        accept: 'application/json',
-        'content-type': 'application/json',
-        'x-gqlvars': JSON.stringify({ slug: GUILD_SLUG }),
-      },
-      signal: controller.signal,
-    })
-      .then<GuildResponse>((r) => r.json())
-      .then((data) => {
-        const edges = data?.data?.event?.eventTicketingTiers?.edges ?? [];
-        setTiers(edges.map((e) => e.node));
-      })
-      .catch(() => {});
-
-    return () => controller.abort();
-  }, []);
-
-  return (
-    <SafeLink to={link.tickets} className='ticket-card'>
-      {tiers.length > 0 && (
-        <ul className='tier-list'>
-          {tiers.map((tier) => {
-            const price = formatPrice(
-              tier.priceAmountCents,
-              tier.priceCurrency
-            );
-            return (
-              <li key={tier.id} className='tier-item'>
-                <div className='tier-row'>
-                  <div className='tier-info'>
-                    <strong className='tier-name'>{tier.name}</strong>
-                    {tier.description && (
-                      <p className='tier-description'>
-                        {tier.description.charAt(0).toUpperCase() +
-                          tier.description.slice(1)}
-                      </p>
-                    )}
-                  </div>
-                  {price && <span className='tier-price'>{price}</span>}
-                </div>
-              </li>
-            );
-          })}
-        </ul>
-      )}
+// Tickets are sold on Sympla, whose public API exposes no ticket types or prices, so the card is a
+// plain call to action instead of a live tier list.
+const TicketCard = () => (
+  <SafeLink to={link.tickets} className='ticket-card'>
+    <span className='ticket-cta'>
+      <Text id='tickets.cta' />
       <SquareArrowOutUpRight className='cta-icon' />
-    </SafeLink>
-  );
-};
+    </span>
+  </SafeLink>
+);
 
 export const TicketSelection = () => {
   const ref = useRef<HTMLDivElement>(null);

src/website/configs/definitions.ts

@@ -1,7 +1,7 @@
 export const link = {
-  tickets: 'https://guild.host/events/jsconf-brasil-primeira-vdc8dh',
-  // Where the vote page invites Sympla buyers to follow the event. Stays on guild.host even if
-  // `tickets` moves to Sympla.
+  tickets: 'https://www.sympla.com.br/evento/jsconf-brasil/3593934',
+  // Where the vote page invites Sympla buyers to follow NodeBR. Stays on guild.host now that
+  // `tickets` points at Sympla.
   guild: 'https://guild.host/events/jsconf-brasil-primeira-vdc8dh',
   sponsors: 'https://forms.gle/SPyyD3SsuurVpvCNA',
 } as const;

src/website/scss/pages/_ticket-selection.scss

@@ -55,7 +55,7 @@
       }
 
       .ticket-card {
-        @include flex(center, center);
+        @include flex(row, center, center);
         gap: 3rem;
         width: 100%;
         max-width: 64rem;
@@ -122,37 +122,6 @@
           }
         }
 
-        .tier-list {
-          list-style: none;
-          padding: 0;
-          margin: 0;
-          width: 100%;
-          @include flex(column, stretch, center);
-          gap: 0;
-        }
-
-        .tier-item {
-          @include flex(row, center, space-between);
-          gap: 2rem;
-          padding: 2rem 0;
-          border-bottom: 0.1rem solid rgba(141, 248, 34, 0.08);
-
-          &:first-child {
-            padding-top: 0;
-          }
-
-          &:last-child {
-            border-bottom: none;
-            padding-bottom: 0;
-          }
-        }
-
-        .tier-row {
-          @include flex(row, center, space-between);
-          gap: 2rem;
-          width: 100%;
-        }
-
         .ticket-cta {
           @include flex(row, center, center);
           gap: 1rem;
@@ -178,52 +147,8 @@
           }
         }
 
-        .tier-info {
-          @include flex(column, flex-start, center);
-          gap: 0.5rem;
-          flex: 1;
-        }
-
-        .tier-name {
-          font-family: var(--ifm-font-family-title);
-          font-size: 2rem;
-          font-weight: 700;
-          text-transform: capitalize;
-          color: #fff;
-          margin: 0;
-        }
-
-        .tier-description {
-          font-size: 1.4rem;
-          font-weight: 400;
-          color: rgba(232, 255, 232, 0.65);
-          line-height: 1.5;
-          margin: 0;
-        }
-
-        .tier-price {
-          font-family: var(--ifm-font-family-title);
-          font-size: 2.8rem;
-          font-weight: 700;
-          color: var(--ifm-color-primary);
-          font-variant-numeric: tabular-nums;
-          white-space: nowrap;
-          transition: transform 0.25s var(--ease-back-out-soft);
-          transform-origin: right center;
-        }
-
         @media (max-width: 630px) {
           padding: 2.5rem;
-          gap: 2rem;
-
-          .tier-item {
-            flex-direction: column;
-            align-items: flex-start;
-          }
-
-          .tier-price {
-            font-size: 2.2rem;
-          }
         }
       }
     }