How to validate user input with async function?

I have to validate a user email with my backend using a fetch call. Can I do this? I’m trying with async/await but does not work.

My code:

function resolveClientEmailAddress(email) {
   return new Promise(resolve => {
     let data = new FormData();
    data.append( "client", email);
    fetch(config.server.remote + "api/client-by-mail/", {
               method: "POST",
               body: data
            }).then(function(res){ return res.json(); }).then(function(data){
               resolve(data)
            }).catch(function (error) {
               console.log("CATCH ----> ERROR ===> ", error)
             });
         });
      }

      async function clientEmailValidator(email) {
         let response = await resolveClientEmailAddress(email);

         console.log("clientEmailValidator ===> ", response); // 10

         if (response.hasOwnProperty('error_message'))
            return response.error_message;
         else
            return true
      }

      let chatbotQuestionList = [{
         id: '1',
         message: 'Welcome',
         trigger: '2',
      },{
         id: '2',
         message: "Insert your email address",
         trigger: '3',
      },{
         id: '3',
         user: true,
         validator: clientEmailValidator,
         trigger: 'end',
      },{
         id: 'end',
         message: 'Ok',
         end: true,
      }];

[thomas-negrault]

Yes that’s pretty much what I want ! With theses two props and this render for my component:

return <Loading/>

The behaviour is:

1. The user enter its input
2. The bot display the “loading/writings” dots as the ajax call is made
3. When the ajax call is finish, the bubble of my component disapear and another one with the conditional step appears.

It is just a little bit weird that the bubble disappears and then reappears with the dots… can we set the botDelay to 0 for a single step ?

Edit: found it: the delay option on the step, sorry !

The render is amazing ! Thank you !

[LucasBassetti]

Please try to add the asMessage: true and replace: true props in the custom step. Not sure if will work as you want.