Merge pull request #172 from poap-xyz/bugfix/user-validation-issues

Refactor validation logic

cypress/e2e/user-claimer/1-view-and-claim.js

@@ -277,6 +277,8 @@ context( 'Claimer can view valid events', () => {
             cy.contains( 'Verifying your humanity' )
             cy.contains( 'Have I seen you before' )
             cy.contains( 'Please check the box below to proceed' )
+            cy.wait( 5000 )
+            cy.contains( 'Please check the box below to proceed' )
 
         } )
 

src/components/pages/Claim.jsx

@@ -24,7 +24,7 @@ export default function ClaimPOAP() {
     const { challenge_code } = useParams( )
     const challenge = useChallenge( challenge_code )
     const [ captchaResponse, setCaptchaResponse ] = useState(  )
-    const { message: user_validation_status_message, user_valid } = useValidateUser( captchaResponse )
+    const { message: user_validation_status_message, error: user_validation_error, user_valid } = useValidateUser( captchaResponse )
 
     // Challenge state management
     const has_game_challenge = challenge?.challenges?.includes( 'game' )
@@ -80,13 +80,20 @@ export default function ClaimPOAP() {
     // ///////////////////////////////
     // Render component
     // ///////////////////////////////
+    log( `Claim debug breadcrumbs: `, { user_valid, user_validation_status_message, captchaResponse, error_getting_claim_code, has_game_challenge, gameDone, claim_link } )
+
+    // Auto validation failed, and there is a captcha response (meaning all validation options were exhausted)
+    if( !user_valid && !user_validation_status_message && captchaResponse ) return <Loading message={ user_validation_status_message || user_validation_error || error_getting_claim_code } />
 
     // If there is a validation status use it
-    if( user_validation_status_message || error_getting_claim_code ) return <Loading message={ user_validation_status_message || error_getting_claim_code } />
+    if( user_validation_status_message ) return <Loading message={ user_validation_status_message } /> 
 
     // If user is not valid, and no captcha response is known, show captcha
     if( !user_valid && !captchaResponse ) return <Captcha onChange={ response => setCaptchaResponse( response ) } />
 
+    // If the captcha was completed, but there is an error getting the claim code, show the error
+    if( user_valid && error_getting_claim_code ) return <Loading message={ error_getting_claim_code } />
+
     // If game challenge requested, show
     // Note that the Stroop module also handles the showing of the "claim POAP" button and we do not rely on the other components in here
     if( user_valid && has_game_challenge ) return <Stroop duration_input={ challenge?.game_config?.duration } target_score_input={ challenge?.game_config?.target_score } onLose={ handleLose } onWin={ handleWin } poap_url={ claim_link  } />

src/hooks/user_validation.js

@@ -13,6 +13,7 @@ export const useValidateUser = ( captchaResponse ) => {
     // States
     const { challenge_code, error_code } = useParams(  )
     const [ message, set_message ] = useState( `${ t( 'claim.setLoading' ) }` )
+    const [ error, set_error ] = useState(  )
     const [ user_valid, set_user_valid ] = useState( undefined )
     const challenge = useChallenge( challenge_code )
 
@@ -134,7 +135,8 @@ export const useValidateUser = ( captchaResponse ) => {
 
                 // If we are unable to validate the user, set the error message and set user to invalid (will trigger manual captcha)
                 if( !cancelled ) {
-                    set_message( e.message )
+                    set_message( undefined )
+                    set_error( e.message )
                     set_user_valid( false )
                 }
 
@@ -146,6 +148,6 @@ export const useValidateUser = ( captchaResponse ) => {
 
     }, [ challenge_code, captchaResponse ] )
 
-    return { message, user_valid }
+    return { message, user_valid, error }
 
 }