refactor: extract webhook submission logic into a `useWebhookSubmit` by Manishnemade12 · Pull Request #7537 · layer5io/layer5

Manishnemade12 · 2026-03-22T06:40:42Z

Description

This PR fixes #7536

This PR abstracts and centralizes the duplicated webhook submission logic by introducing a custom useWebhookSubmit hook. It integrates this new hook into the CommonForm (index.js and events.js) and ContactForm (index.js) components. Previously, these forms used an unhandled axios.post inside a useEffect triggered by a state flag, which risked silent data loss on network failure. By awaiting the network requests directly inside the Formik onSubmit handlers, we ensure the UI transitions to the "Thank You" screen only upon a confirmed HTTP success.

Notes for Reviewers

The new hook is located at src/utils/hooks/useWebhookSubmit.js.
This change affects /contact, /community/events, and other form pages.
To test locally: Submit a form and verify it proceeds to the success step. If you drop your network connection before submitting, it will correctly alert you of the failure and retain your form state instead of showing a false success.

Signed commits

Yes, I signed my commits.

Copilot

Pull request overview

This PR centralizes webhook submission logic into a new useWebhookSubmit hook and updates existing forms to await submissions in Formik’s onSubmit, preventing false-positive “success” UI transitions when requests fail.

Changes:

Added useWebhookSubmit hook to encapsulate axios submission state + error handling.
Refactored CommonForm, EventForm, and ContactForm to submit via the hook inside onSubmit (removing prior useEffect-triggered posts).
Added basic failure handling (alerts) and kept success scrolling behavior within the submit flow.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 7 comments.

File	Description
src/utils/hooks/useWebhookSubmit.js	Introduces a reusable hook to submit payloads to the Make.com webhook and track submission/error state.
src/components/ContactForm/index.js	Switches to awaiting webhook submission in `onSubmit` and only transitions UI on success.
src/components/CommonForm/index.js	Replaces `useEffect`-based post with awaited submit and gates success step on confirmed submission.
src/components/CommonForm/events.js	Refactors event form submission to use the hook and handle failure explicitly.

src/utils/hooks/useWebhookSubmit.js

src/components/ContactForm/index.js

src/components/CommonForm/index.js

src/components/CommonForm/events.js

…hook and integrate it into CommonForm and ContactForm components. Signed-off-by: Manishnemade12 <mnemade140@gmail.com>

l5io · 2026-03-22T07:00:36Z

🚀 Preview for commit 709d5f4 at: https://69bf9360215bccffd0afcbeb--layer5.netlify.app

l5io · 2026-03-22T08:31:27Z

🚀 Preview for commit c17fb1c at: https://69bfa8b06f2ab006b9de4b89--layer5.netlify.app

l5io · 2026-03-24T02:42:16Z

🚀 Preview for commit aeb3e68 at: https://69c1f9b6c87786311b23e0c6--layer5.netlify.app

Manishnemade12 · 2026-03-24T04:05:17Z

@CodexRaunak can you please review this pr

l5io · 2026-03-24T06:36:11Z

🚀 Preview for commit b1f5d72 at: https://69c230ab39fb22adc0c2d56b--layer5.netlify.app

Manishnemade12 · 2026-03-25T08:56:31Z

@saurabhraghuvanshii can you please review this pr

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Manish Nemade <166635137+Manishnemade12@users.noreply.github.com>

l5io · 2026-03-25T09:19:42Z

🚀 Preview for commit 9dede11 at: https://69c3a8772f6d231371e28811--layer5.netlify.app

l5io · 2026-03-25T13:00:20Z

🚀 Preview for commit bff7508 at: https://69c3dc33a1de532588f1acdb--layer5.netlify.app

Manishnemade12 · 2026-03-26T05:59:16Z

@saurabhraghuvanshii can you please review this pr

l5io · 2026-03-26T06:15:33Z

🚀 Preview for commit 96f097d at: https://69c4cecb8748eee6140f5f36--layer5.netlify.app

src/components/CommonForm/events.js

l5io · 2026-03-28T14:32:55Z

🚀 Preview for commit f744db5 at: https://69c7e653c5238f112a3bf1aa--layer5.netlify.app

Signed-off-by: Manishnemade12 <mnemade140@gmail.com>

Manishnemade12 · 2026-03-28T18:17:26Z

@rishiraj38 i addressed your changes can you please review it now

l5io · 2026-03-28T18:33:13Z

🚀 Preview for commit 185c96e at: https://69c81ea05353dd80e8a52b9b--layer5.netlify.app

Manishnemade12 · 2026-04-03T05:40:41Z

@saurabhraghuvanshii can you please review this pr

l5io · 2026-04-03T05:59:43Z

🚀 Preview for commit 5b5f726 at: https://69cf571d9fc8b8195bffb68c--layer5.netlify.app

rishiraj38

Please take a look on copilot review

src/components/CommonForm/events.js

Manishnemade12 · 2026-04-03T09:18:25Z

@rishiraj38 Replaced the blocking alert() on form submission failure with an inline, accessible error message using Formik status and an aria-live region. This keeps users in context, improves accessibility, and avoids disruptive browser modals.

Signed-off-by: Manishnemade12 <mnemade140@gmail.com>

l5io · 2026-04-03T09:37:05Z

🚀 Preview for commit f5f5384 at: https://69cf8a11fa0a08bd41a76430--layer5.netlify.app

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

src/utils/hooks/useWebhookSubmit.js

src/components/ContactForm/index.js

src/components/CommonForm/index.js

Copilot · 2026-04-03T21:12:49Z

src/components/CommonForm/events.js

@@ -12,6 +12,7 @@ const EventForm = ({ form, title, submit_title, submit_body }) => {
  const [stepNumber, setStepNumber] = useState(0);
  const [memberFormOne, setMemberFormOne] = useState({});


In this refactor, memberFormOne is no longer set in onSubmit (the previous setMemberFormOne(values); was removed), so this state may now be dead weight. If the form no longer needs memberFormOne for rendering the success step, remove it; otherwise, set it on successful submission for consistency with the other forms.

Suggested change

const [memberFormOne, setMemberFormOne] = useState({});

rishiraj38

Please also change the alerts in these lines.

src/components/CommonForm/index.js

src/components/ContactForm/index.js

…d ContactForm Signed-off-by: Manishnemade12 <mnemade140@gmail.com>

Manishnemade12 · 2026-04-05T06:11:07Z

@rishiraj38 i Replaced alert("Submission failed...") in both index.js and index.js with Formik setStatus + inline accessible error UI (role="alert", aria-live="assertive").
Also clear error status on successful submit (setStatus(null)) .

rishiraj38 · 2026-04-05T08:18:29Z

Please take a look at copilot suggestions.

…mit hook

Manishnemade12 · 2026-04-05T13:31:06Z

Please take a look at copilot suggestions.

@rishiraj38 i addressed all Copilot comments

saurabhraghuvanshii · 2026-04-05T15:43:05Z

@Manishnemade12 Please present it tommorow meeting https://meet.layer5.io/websites-minutes

Copilot AI review requested due to automatic review settings March 22, 2026 06:40

Copilot AI reviewed Mar 22, 2026

View reviewed changes

refactor: extract webhook submission logic into a useWebhookSubmit …

709d5f4

…hook and integrate it into CommonForm and ContactForm components. Signed-off-by: Manishnemade12 <mnemade140@gmail.com>

Manishnemade12 force-pushed the eliminate branch from a99476c to 709d5f4 Compare March 22, 2026 06:44

Merge branch 'master' into eliminate

c17fb1c

Manishnemade12 closed this Mar 22, 2026

Manishnemade12 reopened this Mar 24, 2026

Merge branch 'master' into eliminate

aeb3e68

Merge branch 'master' into eliminate

b1f5d72

Update src/utils/hooks/useWebhookSubmit.js

9dede11

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Manish Nemade <166635137+Manishnemade12@users.noreply.github.com>

Merge branch 'master' into eliminate

bff7508

saurabhraghuvanshii requested review from YASHMAHAKAL and rishiraj38 March 25, 2026 12:49

Merge branch 'master' into eliminate

96f097d

rishiraj38 reviewed Mar 26, 2026

View reviewed changes

src/components/CommonForm/events.js Outdated Show resolved Hide resolved

Merge branch 'master' into eliminate

f744db5

Remove unnecessary state update in EventForm on successful submission

185c96e

Signed-off-by: Manishnemade12 <mnemade140@gmail.com>

Manishnemade12 requested a review from rishiraj38 March 28, 2026 18:17

Merge branch 'master' into eliminate

5b5f726

rishiraj38 reviewed Apr 3, 2026

View reviewed changes

src/components/CommonForm/events.js Show resolved Hide resolved

Manishnemade12 requested a review from rishiraj38 April 3, 2026 09:18

fix(forms): replace alert with inline error status

f5f5384

Signed-off-by: Manishnemade12 <mnemade140@gmail.com>

Manishnemade12 force-pushed the eliminate branch from 9c1088f to f5f5384 Compare April 3, 2026 09:21

saurabhraghuvanshii requested a review from Copilot April 3, 2026 21:11

Copilot AI reviewed Apr 3, 2026

View reviewed changes

Merge branch 'master' into eliminate

9359f93

rishiraj38 reviewed Apr 4, 2026

View reviewed changes

src/components/CommonForm/index.js Outdated Show resolved Hide resolved

src/components/ContactForm/index.js Outdated Show resolved Hide resolved

fix(form): enhance error handling and status display in CommonForm an…

271d732

…d ContactForm Signed-off-by: Manishnemade12 <mnemade140@gmail.com>

fix(forms): remove unused state and add unmount safety to webhook sub…

6bf520d

…mit hook

		@@ -12,6 +12,7 @@ const EventForm = ({ form, title, submit_title, submit_body }) => {
		const [stepNumber, setStepNumber] = useState(0);
		const [memberFormOne, setMemberFormOne] = useState({});

Conversation

Manishnemade12 commented Mar 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

l5io commented Mar 22, 2026

Uh oh!

l5io commented Mar 22, 2026

Uh oh!

l5io commented Mar 24, 2026

Uh oh!

Manishnemade12 commented Mar 24, 2026

Uh oh!

l5io commented Mar 24, 2026

Uh oh!

Manishnemade12 commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

l5io commented Mar 25, 2026

Uh oh!

l5io commented Mar 25, 2026

Uh oh!

Manishnemade12 commented Mar 26, 2026

Uh oh!

l5io commented Mar 26, 2026

Uh oh!

Uh oh!

l5io commented Mar 28, 2026

Uh oh!

Manishnemade12 commented Mar 28, 2026

Uh oh!

l5io commented Mar 28, 2026

Uh oh!

Manishnemade12 commented Apr 3, 2026

Uh oh!

l5io commented Apr 3, 2026

Uh oh!

rishiraj38 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Manishnemade12 commented Apr 3, 2026

Uh oh!

l5io commented Apr 3, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

rishiraj38 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Manishnemade12 commented Apr 5, 2026

Uh oh!

rishiraj38 commented Apr 5, 2026

Uh oh!

Manishnemade12 commented Apr 5, 2026

Uh oh!

saurabhraghuvanshii commented Apr 5, 2026

Uh oh!

Reviewers

Manishnemade12 commented Mar 22, 2026 •

edited

Loading

Manishnemade12 commented Mar 25, 2026 •

edited

Loading