diff --git a/i18n/en-US/code.json b/i18n/en-US/code.json index afbb0e6b..3780ec40 100644 --- a/i18n/en-US/code.json +++ b/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." }, diff --git a/i18n/es-419/code.json b/i18n/es-419/code.json index bfed5e3c..1ad0425c 100644 --- a/i18n/es-419/code.json +++ b/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." }, diff --git a/i18n/pt-BR/code.json b/i18n/pt-BR/code.json index 876a9e14..fdeef5ba 100644 --- a/i18n/pt-BR/code.json +++ b/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…" }, diff --git a/src/website/components/home/TicketSelection.tsx b/src/website/components/home/TicketSelection.tsx index 27d05364..4555ee51 100644 --- a/src/website/components/home/TicketSelection.tsx +++ b/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([]); - - 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((r) => r.json()) - .then((data) => { - const edges = data?.data?.event?.eventTicketingTiers?.edges ?? []; - setTiers(edges.map((e) => e.node)); - }) - .catch(() => {}); - - return () => controller.abort(); - }, []); - - return ( - - {tiers.length > 0 && ( -
    - {tiers.map((tier) => { - const price = formatPrice( - tier.priceAmountCents, - tier.priceCurrency - ); - return ( -
  • -
    -
    - {tier.name} - {tier.description && ( -

    - {tier.description.charAt(0).toUpperCase() + - tier.description.slice(1)} -

    - )} -
    - {price && {price}} -
    -
    • - ); - })} -
- )} +// 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 = () => ( + + + - - ); -}; + + +); export const TicketSelection = () => { const ref = useRef(null); diff --git a/src/website/configs/definitions.ts b/src/website/configs/definitions.ts index 10d3e318..8b9fd82f 100644 --- a/src/website/configs/definitions.ts +++ b/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; diff --git a/src/website/scss/pages/_ticket-selection.scss b/src/website/scss/pages/_ticket-selection.scss index 89825b08..0329cdc9 100644 --- a/src/website/scss/pages/_ticket-selection.scss +++ b/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; - } } } }