feat(unlock-app): adding a redirect once the user has a membership (#…

…13791)

* adding a redirect once the user has a membership

* only redirecting on refresh

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 (
     <Card className="grid gap-4 mt-10 lg:mt-0">
       <p className="text-lg">

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 <HasTicket />
+    return (
+      <HasTicket hasRefreshed={hasRefreshed} checkoutConfig={checkoutConfig} />
+    )
   }
 
   // We need to behave differently if there is only one lock