From 296f5b3e8ab3fa5c9bb4584afda63e743abc7554 Mon Sep 17 00:00:00 2001 From: Raphael Ako-Mensah Date: Thu, 31 Jul 2025 13:36:58 +0100 Subject: [PATCH 1/3] button fix --- src/components/steps.js | 244 ++++++++++++++++++++-------------------- 1 file changed, 122 insertions(+), 122 deletions(-) diff --git a/src/components/steps.js b/src/components/steps.js index 67f2e07..47f966a 100755 --- a/src/components/steps.js +++ b/src/components/steps.js @@ -8,8 +8,8 @@ import Input from './input' // Animation variants const fadeIn = { hidden: { opacity: 0, y: 20 }, - visible: { - opacity: 1, + visible: { + opacity: 1, y: 0, transition: { duration: 0.6 } } @@ -57,7 +57,7 @@ const Steps = () => { const { toggleModal } = useModal() const page = data.allStepsJson.nodes[0].page const steps = data.allStepsJson.nodes[0].steps - + // CTA texts for each step const ctaTexts = [ "Get Started Now", @@ -68,130 +68,130 @@ const Steps = () => { return ( <> -
- {/* Add subtle background pattern */} -
- -
- - {/* Section Header - Improved for better attention */} -
- - - {page.section} - - - - - {page.span}{page.headline} - - - - - - Our streamlined process makes selling your property quick and hassle-free.
Here's how it works: - -
- -
- - - {/* Full-Height Steps Section */} - {steps.map((step, index) => ( -
-
- - {/* Card Layout */} -
- {/* Step Number Badge - Position based on odd/even index */} - {index % 2 === 1 ? ( - // For odd-indexed steps (2, 4, etc.) position the badge on the image side -
- {step.id} -
- ) : ( - // For even-indexed steps (1, 3, etc.) keep normal positioning -
- {step.id} -
- )} - -
- {/* Image Section - Right on even steps, left on odd steps */} -
- -
- - {/* Content Section */} -
- {/* Title with increased spacing and size */} -

- {step.title} -

- - {/* Description with better typography */} -

- {step.description} -

- - {/* Enhanced CTA Button - centered on mobile */} -
- toggleModal({ type: FORM_TYPES.PROPERTY_SELLER })} - className="bg-primary-600 hover:bg-primary-700 text-white px-8 py-4 rounded-full font-semibold text-lg transition-colors shadow-md" - > - {ctaTexts[index]} - +
+ {/* Add subtle background pattern */} +
+ +
+ + {/* Section Header - Improved for better attention */} +
+ + + {page.section} + + + + + {page.span}{page.headline} + + + + + + Our streamlined process makes selling your property quick and hassle-free.
Here's how it works: + +
+ +
+ + + {/* Full-Height Steps Section */} + {steps.map((step, index) => ( +
+
+ + {/* Card Layout */} +
+ {/* Step Number Badge - Position based on odd/even index */} + {index % 2 === 1 ? ( + // For odd-indexed steps (2, 4, etc.) position the badge on the image side +
+ {step.id} +
+ ) : ( + // For even-indexed steps (1, 3, etc.) keep normal positioning +
+ {step.id} +
+ )} + +
+ {/* Image Section - Right on even steps, left on odd steps */} +
+ +
+ + {/* Content Section */} +
+ {/* Title with increased spacing and size */} +

+ {step.title} +

+ + {/* Description with better typography */} +

+ {step.description} +

+ + {/* Enhanced CTA Button - centered on mobile */} +
+ toggleModal({ type: FORM_TYPES.PROPERTY_SELLER })} + className="bg-primary-600 hover:bg-primary-700 text-white px-8 py-4 rounded-full font-semibold text-lg transition-colors shadow-md" + > + {ctaTexts[index]} + +
-
- + +
+ ))} + + {/* Final CTA Section */} +
+
- ))} - - {/* Final CTA Section */} -
- -
-
+ ) } From ae3482dd415744dca44616ff938add128963d97a Mon Sep 17 00:00:00 2001 From: Raphael Ako-Mensah Date: Thu, 31 Jul 2025 13:37:50 +0100 Subject: [PATCH 2/3] n8n --- src/components/modal.js | 236 +++++++++++++++++++++++----------------- 1 file changed, 134 insertions(+), 102 deletions(-) diff --git a/src/components/modal.js b/src/components/modal.js index 84dc8dd..43302d4 100755 --- a/src/components/modal.js +++ b/src/components/modal.js @@ -3,10 +3,10 @@ import addtoMailchimp from 'gatsby-plugin-mailchimp' import { motion, AnimatePresence } from 'framer-motion' import { useModal } from '../context/modalContext' import { FORM_TYPES } from '../context/modalContext' -import { - submitBrokerReferralForm, - submitPropertyEnquiryForm, - submitGeneralContactForm +import { + submitBrokerReferralForm, + submitPropertyEnquiryForm, + submitGeneralContactForm } from '../utils/formSubmission' // Property Seller Form (Existing Mailchimp Form) @@ -39,14 +39,15 @@ const PropertySellerForm = ({ toggleModal }) => { const handleSubmit = async (e) => { e.preventDefault() - + setState(prevState => ({ ...prevState, message: "Submitting your information..." })) - + try { - const response = await addtoMailchimp(state.email, { + // Submit to Mailchimp + const mailchimpResponse = await addtoMailchimp(state.email, { FNAME: state.firstName, LNAME: state.lastName, PHONE: state.phonenumber, @@ -57,20 +58,51 @@ const PropertySellerForm = ({ toggleModal }) => { 'gdpr[283]': state.gdprPost ? 'Y' : '', }) + // Submit to n8n webhook + try { + const webhookResponse = await fetch('https://n8n.99techsolutions.co.uk/webhook/form-submission', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + formType: 'property-seller', + email: state.email, + firstName: state.firstName, + lastName: state.lastName, + phonenumber: state.phonenumber, + address: state.address, + postcode: state.postcode, + valuation: state.valuation, + message: state.message, + gdprPhone: state.gdprPhone, + gdprPost: state.gdprPost, + }), + }); + + if (!webhookResponse.ok) { + console.error('Failed to submit to n8n webhook:', await webhookResponse.text()); + // Continue execution even if webhook fails + } + } catch (webhookError) { + console.error('Error submitting to n8n webhook:', webhookError); + // Continue execution even if webhook fails + } + const newMessage = - response.result === 'success' - ? `${response.msg} Keep an eye on your inbox and spam folder. We'll get back to you shortly.` - : `Error: ${response.msg}` + mailchimpResponse.result === 'success' + ? `${mailchimpResponse.msg} Keep an eye on your inbox and spam folder. We'll get back to you shortly.` + : `Error: ${mailchimpResponse.msg}` setState((prevState) => ({ ...prevState, message: newMessage, - showForm: response.result === 'success' ? false : true, - formSuccess: response.result === 'success', + showForm: mailchimpResponse.result === 'success' ? false : true, + formSuccess: mailchimpResponse.result === 'success', })) // Hide the error message after 6 seconds if the response is not successful - if (response.result !== 'success') { + if (mailchimpResponse.result !== 'success') { setTimeout(() => { setState((prevState) => ({ ...prevState, @@ -79,15 +111,15 @@ const PropertySellerForm = ({ toggleModal }) => { }, 6000) } } catch (error) { - console.error("Mailchimp submission error:", error) + console.error("Form submission error:", error) setState((prevState) => ({ ...prevState, - message: error.message === "Timeout" - ? "Request timed out. Please try again later." + message: error.message === "Timeout" + ? "Request timed out. Please try again later." : `Error: ${error.message}`, formSuccess: false })) - + // Hide error message after 6 seconds setTimeout(() => { setState((prevState) => ({ @@ -103,7 +135,7 @@ const PropertySellerForm = ({ toggleModal }) => { - + {state.formSuccess && (

@@ -247,7 +279,7 @@ const PropertySellerForm = ({ toggleModal }) => {

Marketing Permissions

- By using this form you are agreeing to hear from us by email. Please select all the + By using this form you are agreeing to hear from us by email. Please select all the additional ways you would like to hear from Puretime Property Purchasing Ltd:

@@ -312,9 +344,9 @@ const PropertySellerForm = ({ toggleModal }) => { > Submit - + {state.message && ( -
{ const handleSubmit = async (e) => { e.preventDefault() - + // Check honeypot field if (formData.honey_trap) { console.log("Spam submission detected") return // Stop processing if honeypot is filled } - + try { // Update UI to show processing setFormData({ ...formData, submissionMessage: "Processing your request..." }) - + // Remove the honeypot field from the data we send const { honey_trap, ...formDataToSubmit } = formData - + // Submit to Netlify Forms const response = await submitBrokerReferralForm(formDataToSubmit) - + if (response.success) { setFormData({ ...formData, @@ -386,7 +418,7 @@ const BrokerReferralForm = () => { ...formData, submissionMessage: error.message || "There was an error submitting your form. Please try again." }) - + // Hide error message after 6 seconds setTimeout(() => { setFormData((prevState) => ({ @@ -402,7 +434,7 @@ const BrokerReferralForm = () => { - + {formData.formSubmitted ? (
@@ -411,8 +443,8 @@ const BrokerReferralForm = () => {

We aim to connect you with a specialist broker within 24 hours.

) : ( -
{ data-netlify-honeypot="honey_trap" > {/* Honeypot field - invisible to users but catches bots */} -