diff --git a/unlock-app/src/components/content/event/Registration/HasTicket.tsx b/unlock-app/src/components/content/event/Registration/HasTicket.tsx index b976ec7392a..16fdc560870 100644 --- a/unlock-app/src/components/content/event/Registration/HasTicket.tsx +++ b/unlock-app/src/components/content/event/Registration/HasTicket.tsx @@ -1,7 +1,26 @@ +import { PaywallConfigType } from '@unlock-protocol/core' import { Card } from '@unlock-protocol/ui' import Link from 'next/link' +import { useRouter } from 'next/router' +import { useEffect } from 'react' + +export interface HasTicketProps { + hasRefreshed: boolean + checkoutConfig: { + id?: string + config: PaywallConfigType + } +} + +export const HasTicket = ({ hasRefreshed, checkoutConfig }: HasTicketProps) => { + const router = useRouter() + + useEffect(() => { + if (checkoutConfig.config.redirectUri && hasRefreshed) { + router.push(checkoutConfig.config.redirectUri) + } + }, [checkoutConfig, hasRefreshed, router]) -export const HasTicket = () => { return (

diff --git a/unlock-app/src/components/content/event/Registration/RegistrationCard.tsx b/unlock-app/src/components/content/event/Registration/RegistrationCard.tsx index e641b3a2ff6..d1e663f5437 100644 --- a/unlock-app/src/components/content/event/Registration/RegistrationCard.tsx +++ b/unlock-app/src/components/content/event/Registration/RegistrationCard.tsx @@ -5,6 +5,7 @@ import { RegistrationCardSingleLock } from './SingleLock' import { useValidKeyBulk } from '~/hooks/useKey' import { HasTicket } from './HasTicket' import { EmbeddedCheckout } from './EmbeddedCheckout' +import { useState } from 'react' export interface RegistrationCardProps { checkoutConfig: { @@ -18,19 +19,24 @@ export const RegistrationCard = ({ requiresApproval, checkoutConfig, }: RegistrationCardProps) => { + const [hasRefreshed, setHasRefreshed] = useState(false) // Check if the user has a key! const queries = useValidKeyBulk(checkoutConfig.config.locks) - const refresh = () => { - queries.map((query) => query.refetch()) + + // Refresh function once the user has a key. + const refresh = async () => { + setHasRefreshed(true) + await queries.map((query) => query.refetch()) } - const hasValidKey = queries?.map((query) => query.data).some((value) => value) + const hasValidKey = queries?.some((query) => query.isSuccess && !!query.data) - // We don't show a "loading" state when checing if the user has valid keys + // We don't show a "loading" state when checking if the user has valid keys // because if the user was logging in from inside the modal, it would result in the modal being closed. - if (hasValidKey) { - return + return ( + + ) } // We need to behave differently if there is only one lock