fix(unlock-app): Paywall fix (#13817)

* Fix * Update CardPayment.tsx * Fixed Disconnect * Update unlock-app/src/components/interface/checkout/main/Select.tsx Co-authored-by: Julien Genestoux <julien.genestoux@gmail.com> * Update Connected.tsx --------- Co-authored-by: Julien Genestoux <julien.genestoux@gmail.com>
unlock-protocol · May 9, 2024 · 64779c8 · 64779c8
1 parent e4bc2a3
commit 64779c8
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 50 deletions.
diff --git a/unlock-app/src/components/interface/checkout/Connected.tsx b/unlock-app/src/components/interface/checkout/Connected.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@unlock-protocol/ui'
 import { useSelector } from '@xstate/react'
-import { ReactNode, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useAuth } from '~/contexts/AuthenticationContext'
 import { useSIWE } from '~/hooks/useSIWE'
 import { CheckoutService } from './main/checkoutMachine'
@@ -9,13 +8,12 @@ import { ConnectPage } from './main/ConnectPage'
 
 interface ConnectedCheckoutProps {
   service: CheckoutService
-  children?: ReactNode
 }
 
-export function Connected({ service, children }: ConnectedCheckoutProps) {
+export function Connected({ service }: ConnectedCheckoutProps) {
   const state = useSelector(service, (state) => state)
   const { account, isUnlockAccount, connected } = useAuth()
-  const [signing, setSigning] = useState(false)
+  const [signing, _] = useState(false)
   const { signIn, isSignedIn } = useSIWE()
 
   const useDelegatedProvider =
@@ -48,28 +46,6 @@ export function Connected({ service, children }: ConnectedCheckoutProps) {
     }
   }, [account])
 
-  const signToSignIn = async () => {
-    setSigning(true)
-    await signIn()
-    setSigning(false)
-  }
-
-  if (useDelegatedProvider) {
-    if (isSignedIn) {
-      return <div className="space-y-2">{children}</div>
-    }
-    return (
-      <Button
-        disabled={!connected || signing}
-        loading={signing}
-        onClick={signToSignIn}
-        className="w-full"
-      >
-        Continue
-      </Button>
-    )
-  }
-
   return (
     <>
       <Stepper service={service} />

diff --git a/unlock-app/src/components/interface/checkout/Stepper.tsx b/unlock-app/src/components/interface/checkout/Stepper.tsx
@@ -7,6 +7,7 @@ import { CheckoutHookType, CheckoutService } from './main/checkoutMachine'
 import { useStepperItems } from './main/useStepperItems'
 import { useSIWE } from '~/hooks/useSIWE'
 import { useAuth } from '~/contexts/AuthenticationContext'
+import { useSelector } from '@xstate/react'
 
 interface IconProps {
   active?: boolean
@@ -96,6 +97,10 @@ export const Stepper = ({
   isRenew,
   isUnlockAccount = false,
 }: StepperProps) => {
+  const { useDelegatedProvider } = useSelector(
+    service,
+    (state) => state.context.paywallConfig
+  )
   const items = useStepperItems(service, {
     isUnlockAccount,
     hookType,
@@ -122,6 +127,7 @@ export const Stepper = ({
               key={idx}
               onClick={() => {
                 if (item.to === 'CONNECT') {
+                  if (useDelegatedProvider) return
                   signOut()
                   deAuthenticate()
                 }

diff --git a/unlock-app/src/components/interface/checkout/main/Disconnect.tsx b/unlock-app/src/components/interface/checkout/main/Disconnect.tsx
@@ -36,7 +36,7 @@ const Disconnect = ({ service }: DisconnectProps) => {
     setIsDisconnecting(false)
   }
 
-  if (!account) {
+  if (!account || state.context.paywallConfig.useDelegatedProvider) {
     return null
   }
 

diff --git a/unlock-app/src/components/interface/checkout/main/Select.tsx b/unlock-app/src/components/interface/checkout/main/Select.tsx
@@ -29,6 +29,7 @@ import { shouldSkip } from './utils'
 import { AiFillWarning as WarningIcon } from 'react-icons/ai'
 import { useGetLockProps } from '~/hooks/useGetLockProps'
 import Disconnect from './Disconnect'
+import { useSIWE } from '~/hooks/useSIWE'
 interface Props {
   checkoutService: CheckoutService
 }
@@ -318,14 +319,17 @@ export function Select({ checkoutService }: Props) {
     return hook
   }, [lockHookMapping, lock])
 
+  const [isSigning, setSigning] = useState(false)
+
   const isDisabled =
     isLocksLoading ||
     isMembershipsLoading ||
     !lock ||
     // if locks are sold out and the user is not an existing member of the lock
     (lock?.isSoldOut && !(membership?.member || membership?.expired)) ||
     isNotExpectedAddress ||
-    isLoadingHook
+    isLoadingHook ||
+    isSigning
 
   useEffect(() => {
     if (locks?.length) {
@@ -337,7 +341,19 @@ export function Select({ checkoutService }: Props) {
 
   const isLoading = isLocksLoading || isLoadingHook || isMembershipsLoading
 
+  const { connected } = useAuth()
+  const { signIn, isSignedIn } = useSIWE()
+  const useDelegatedProvider = paywallConfig?.useDelegatedProvider
+
   useEffect(() => {
+    const signToSignIn = async () => {
+      await signIn()
+    }
+
+    if (!connected && useDelegatedProvider) {
+      signToSignIn()
+    }
+
     if (!(lock && skipSelect && account && !isLoading)) {
       return
     }
@@ -366,6 +382,33 @@ export function Select({ checkoutService }: Props) {
     isLoading,
   ])
 
+  const selectLock = async (event: any) => {
+    event.preventDefault()
+
+    if (!lock) {
+      return
+    }
+
+    // TODO: Change state before signing and on CONNECT place loader
+
+    if (!isSignedIn && useDelegatedProvider) {
+      setSigning(true)
+
+      await signIn()
+    }
+
+    checkoutService.send({
+      type: 'CONNECT',
+      lock,
+      existingMember: lock.isMember,
+      expiredMember: lock.isExpired,
+      skipQuantity,
+      skipRecipient,
+      recipients: account ? [account] : [],
+      hook: hookType,
+    })
+  }
+
   return (
     <Fragment>
       <Stepper
@@ -437,27 +480,7 @@ export function Select({ checkoutService }: Props) {
               continue.
             </p>
           )}
-          <Button
-            disabled={isDisabled}
-            onClick={async (event) => {
-              event.preventDefault()
-
-              if (!lock) {
-                return
-              }
-
-              checkoutService.send({
-                type: 'CONNECT',
-                lock,
-                existingMember: lock.isMember,
-                expiredMember: lock.isExpired,
-                skipQuantity,
-                skipRecipient,
-                recipients: account ? [account] : [],
-                hook: hookType,
-              })
-            }}
-          >
+          <Button disabled={isDisabled} onClick={selectLock}>
             Next
           </Button>
         </div>