From 38787a16e199b7546b2746f31e3289bf14884a0e Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Fri, 6 Mar 2026 15:36:26 +0100 Subject: [PATCH 1/2] feat: add HubSpot form submission functionality in JoinPage --- src/pages/JoinPage/sendToHubspot.ts | 92 ++++++++++++++++++++++++++++ src/pages/JoinPage/useJoinSubmit.tsx | 15 +++++ 2 files changed, 107 insertions(+) create mode 100644 src/pages/JoinPage/sendToHubspot.ts diff --git a/src/pages/JoinPage/sendToHubspot.ts b/src/pages/JoinPage/sendToHubspot.ts new file mode 100644 index 000000000..7e8038892 --- /dev/null +++ b/src/pages/JoinPage/sendToHubspot.ts @@ -0,0 +1,92 @@ +const PORTAL_ID = '50612068'; +const FORM_ID = 'fbacb24e-bbdd-449e-9b4c-55e8aa6d2728'; + +export async function sendToHubspot(data: { + email: string; + firstName: string; + lastName: string; +}) { + const url = `https://api.hsforms.com/submissions/v3/integration/submit/${PORTAL_ID}/${FORM_ID}`; + + // Get hubspot utk cookie value if available + const hutk = document.cookie.match(/hubspotutk=([^;]+)/)?.[1] || null; + + const pageUri = window.location.href; + + const pageName = document.title; + + const params = new URLSearchParams(window.location.search); + + const utm = { + source: params.get('utm_source'), + medium: params.get('utm_medium'), + campaign: params.get('utm_campaign'), + term: params.get('utm_term'), + content: params.get('utm_content'), + }; + + console.log('UTM parameters:', utm); + console.log('HubSpot UTK:', hutk); + console.log('pageUri:', pageUri); + + const payload = { + fields: [ + { + name: 'email', + value: data.email, + }, + { + name: 'firstname', + value: data.firstName, + }, + { + name: 'lastname', + value: data.lastName, + }, + { + name: 'utm_source', + value: utm.source, + }, + { + name: 'utm_medium', + value: utm.medium, + }, + { + name: 'utm_campaign', + value: utm.campaign, + }, + { + name: 'utm_term', + value: utm.term, + }, + { + name: 'utm_content', + value: utm.content, + }, + ], + context: { + pageUri, + pageName, + ...(hutk ? { hutk } : {}), // Only include hutk if it's available + }, + }; + + try { + const response = await fetch(url, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(payload), + }); + + if (!response.ok) { + throw new Error(`HubSpot API error: ${response.statusText}`); + } + + return await response.json(); + } catch (error) { + console.error('Error submitting to HubSpot:', error); + throw error; + } +} diff --git a/src/pages/JoinPage/useJoinSubmit.tsx b/src/pages/JoinPage/useJoinSubmit.tsx index 675c8f012..31eabadbb 100644 --- a/src/pages/JoinPage/useJoinSubmit.tsx +++ b/src/pages/JoinPage/useJoinSubmit.tsx @@ -6,6 +6,7 @@ import WPAPI from 'src/common/wpapi'; import { usePostUsersMutation } from 'src/features/api'; import { useSendGTMevent } from 'src/hooks/useGTMevent'; import { JoinFormValues } from './valuesType'; +import { sendToHubspot } from './sendToHubspot'; export function useJoinSubmit(isInvited: boolean) { const [postFormValues] = usePostUsersMutation(); @@ -74,6 +75,20 @@ export function useJoinSubmit(isInvited: boolean) { }, }).unwrap(); } + + try { + // TODO: fake form submission + const hsRes = await sendToHubspot({ + email: values.email, + firstName: values.name, + lastName: values.surname, + }); + + console.log('HubSpot response:', hsRes); + } catch (err) { + console.error('Error sending data to HubSpot:', err); + } + const nonce = await WPAPI.getNonce(); const login = await WPAPI.login({ username: values.email, From 5c0e092e9f4c1e8338d8d6f05b90ee394b00e33a Mon Sep 17 00:00:00 2001 From: "Luca Cannarozzo (@cannarocks)" Date: Mon, 9 Mar 2026 11:52:50 +0100 Subject: [PATCH 2/2] feat: enhance HubSpot form submission with dynamic UTM parameters and error handling --- src/pages/JoinPage/sendToHubspot.ts | 77 ++++++++++++++++++---------- src/pages/JoinPage/useJoinSubmit.tsx | 4 +- 2 files changed, 50 insertions(+), 31 deletions(-) diff --git a/src/pages/JoinPage/sendToHubspot.ts b/src/pages/JoinPage/sendToHubspot.ts index 7e8038892..a2e61f2a5 100644 --- a/src/pages/JoinPage/sendToHubspot.ts +++ b/src/pages/JoinPage/sendToHubspot.ts @@ -1,11 +1,15 @@ -const PORTAL_ID = '50612068'; -const FORM_ID = 'fbacb24e-bbdd-449e-9b4c-55e8aa6d2728'; +import { isDev } from 'src/common/isDevEnvironment'; + +const STAGING_FORM_ID = 'fbacb24e-bbdd-449e-9b4c-55e8aa6d2728'; +const PRODUCTION_FORM_ID = '33260366-dbe1-4889-b4ba-9386f8d9416c'; export async function sendToHubspot(data: { email: string; firstName: string; lastName: string; }) { + const PORTAL_ID = isDev() ? '50612068' : '6087279'; + const FORM_ID = isDev() ? STAGING_FORM_ID : PRODUCTION_FORM_ID; const url = `https://api.hsforms.com/submissions/v3/integration/submit/${PORTAL_ID}/${FORM_ID}`; // Get hubspot utk cookie value if available @@ -25,10 +29,6 @@ export async function sendToHubspot(data: { content: params.get('utm_content'), }; - console.log('UTM parameters:', utm); - console.log('HubSpot UTK:', hutk); - console.log('pageUri:', pageUri); - const payload = { fields: [ { @@ -43,26 +43,46 @@ export async function sendToHubspot(data: { name: 'lastname', value: data.lastName, }, - { - name: 'utm_source', - value: utm.source, - }, - { - name: 'utm_medium', - value: utm.medium, - }, - { - name: 'utm_campaign', - value: utm.campaign, - }, - { - name: 'utm_term', - value: utm.term, - }, - { - name: 'utm_content', - value: utm.content, - }, + ...(utm.source + ? [ + { + name: 'utm_source', + value: utm.source, + }, + ] + : []), + ...(utm.medium + ? [ + { + name: 'utm_medium', + value: utm.medium, + }, + ] + : []), + ...(utm.campaign + ? [ + { + name: 'utm_campaign', + value: utm.campaign, + }, + ] + : []), + ...(utm.term + ? [ + { + name: 'utm_term', + value: utm.term, + }, + ] + : []), + ...(utm.content + ? [ + { + name: 'utm_content', + value: utm.content, + }, + ] + : []), ], context: { pageUri, @@ -81,12 +101,13 @@ export async function sendToHubspot(data: { }); if (!response.ok) { - throw new Error(`HubSpot API error: ${response.statusText}`); + console.error(`HubSpot API error: ${response.statusText}`); + return false; } return await response.json(); } catch (error) { console.error('Error submitting to HubSpot:', error); - throw error; + return false; } } diff --git a/src/pages/JoinPage/useJoinSubmit.tsx b/src/pages/JoinPage/useJoinSubmit.tsx index 31eabadbb..a107e8f59 100644 --- a/src/pages/JoinPage/useJoinSubmit.tsx +++ b/src/pages/JoinPage/useJoinSubmit.tsx @@ -78,13 +78,11 @@ export function useJoinSubmit(isInvited: boolean) { try { // TODO: fake form submission - const hsRes = await sendToHubspot({ + await sendToHubspot({ email: values.email, firstName: values.name, lastName: values.surname, }); - - console.log('HubSpot response:', hsRes); } catch (err) { console.error('Error sending data to HubSpot:', err); }