diff --git a/packages/website/src/components/ApplyForm.js b/packages/website/src/components/ApplyForm.js index 3f464a98..1d874637 100644 --- a/packages/website/src/components/ApplyForm.js +++ b/packages/website/src/components/ApplyForm.js @@ -12,7 +12,7 @@ import React, { useState } from 'react'; function ApplyForm() { const { withBaseUrl } = useBaseUrlUtils(); - const [hasSent, setHasSent] = useState(false); + const [status, setStatus] = useState('stalled'); const [url, setUrl] = useState(''); const [email, setEmail] = useState(''); @@ -25,6 +25,12 @@ function ApplyForm() { const onSubmit = (event) => { event.preventDefault(); + if (status === 'loading') { + return; + } + + setStatus('loading'); + const applyForm = event.target; const method = applyForm.getAttribute('method'); const action = applyForm.getAttribute('action'); @@ -39,14 +45,23 @@ function ApplyForm() { method, headers: { 'Content-Type': 'application/json' }, body, - }).then((response) => { - if (response.ok) { - setHasSent(true); - } - }); + }) + .then((response) => response.json()) + .then(({ success, message }) => { + if (!success) { + return setStatus('failed'); + } + + if (message === 'You already have a pending request.') { + return setStatus('duplicate'); + } + + return setStatus('succeed'); + }) + .catch(() => setStatus('failed')); }; - if (hasSent) { + if (status === 'succeed' || status === 'duplicate') { return ( Thank you! @@ -56,9 +71,12 @@ function ApplyForm() { className="uil-pv-8 uil-d-block apply-text" aria-label="Request will be processed" > - Your request will be processed by our team. We'll get back to you at{' '} - {email} with the snippet you'll need to integrate - into {url}. + {status === 'succeed' + ? 'Your request will be processed by our team.' + : 'Your request have already been received by our team and is being processed.'}{' '} + We'll get back to you at {email} with the snippet + you'll need to integrate into{' '} + {url}. @@ -179,6 +197,7 @@ function ApplyForm() {