Skip to content

Commit 0b223fc

Browse files
gabros20gabros20
committed
Test integration v2
1 parent bad38f4 commit 0b223fc

File tree

1 file changed

+83
-47
lines changed

1 file changed

+83
-47
lines changed

‎src/components/Newsletter/Newsletter.js

+83-47
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,10 @@ const Newsletter = () => {
2424
setCaptchaError("");
2525
};
2626

27-
const onReCAPTCHAChange = (token) => {
28-
setToken(token);
29-
setCaptchaError("");
30-
};
27+
const onReCAPTCHAChange = (token) => {
28+
setToken(token);
29+
setCaptchaError("");
30+
};
3131

3232
const cleanup = (callbackName, scriptId) => {
3333
// Clear timeout if it exists
@@ -52,77 +52,101 @@ const Newsletter = () => {
5252

5353
const handleSubmit = async (e) => {
5454
e.preventDefault();
55+
console.log("Form submitted", { email, token, isSubmitting }); // Debug log
5556

5657
// Prevent multiple submissions
57-
if (isSubmitting) return;
58+
if (isSubmitting) {
59+
console.log("Already submitting");
60+
return;
61+
}
62+
63+
// Validate email
64+
if (!email) {
65+
console.log("No email provided");
66+
setStatus("Error");
67+
setMsg("Please enter your email address.");
68+
return;
69+
}
5870

5971
// Verify reCAPTCHA
6072
if (!token) {
73+
console.log("No reCAPTCHA token");
6174
setCaptchaError("Please complete the reCAPTCHA challenge!");
75+
// Reset reCAPTCHA to ensure it's fresh
76+
reCaptchaRef.current?.reset();
6277
return;
6378
}
6479

65-
setIsSubmitting(true);
80+
try {
81+
setIsSubmitting(true);
82+
console.log("Starting submission process"); // Debug log
6683

67-
// Create unique IDs for this submission
68-
const timestamp = Date.now();
69-
const callbackName = `jsonpCallback_${timestamp}`;
70-
const scriptId = `mailchimpScript_${timestamp}`;
84+
// Create unique IDs for this submission
85+
const timestamp = Date.now();
86+
const callbackName = `jsonpCallback_${timestamp}`;
87+
const scriptId = `mailchimpScript_${timestamp}`;
7188

72-
// Set timeout for the request (10 seconds)
73-
timeoutRef.current = setTimeout(() => {
74-
cleanup(callbackName, scriptId);
75-
setStatus("Error");
76-
setMsg("Request timed out. Please try again.");
77-
}, 10000);
78-
79-
// Define the callback function
80-
window[callbackName] = (response) => {
81-
// Handle Mailchimp's specific response format
82-
if (response.result === "success") {
83-
setStatus("Success");
84-
setMsg("Thank you for subscribing!");
85-
reCaptchaRef.current?.reset();
86-
setToken(null);
87-
setEmail(""); // Clear email on success
88-
} else if (response.msg && response.msg.toLowerCase().includes("already subscribed")) {
89-
setStatus("Success");
90-
setMsg("You're already subscribed to our newsletter!");
91-
reCaptchaRef.current?.reset();
92-
setToken(null);
93-
} else {
89+
// Set timeout for the request (10 seconds)
90+
timeoutRef.current = setTimeout(() => {
91+
console.log("Request timed out"); // Debug log
92+
cleanup(callbackName, scriptId);
9493
setStatus("Error");
95-
// Handle Mailchimp's error messages more gracefully
96-
const errorMsg = response.msg || "An error occurred. Please try again.";
97-
setMsg(errorMsg.replace(/<(?:.|\n)*?>/gm, "")); // Strip HTML from error message
98-
}
99-
cleanup(callbackName, scriptId);
100-
};
94+
setMsg("Request timed out. Please try again.");
95+
}, 10000);
96+
97+
// Define the callback function
98+
window[callbackName] = (response) => {
99+
console.log("Mailchimp response:", response); // Debug log
100+
101+
// Handle Mailchimp's specific response format
102+
if (response.result === "success") {
103+
setStatus("Success");
104+
setMsg("Thank you for subscribing!");
105+
reCaptchaRef.current?.reset();
106+
setToken(null);
107+
setEmail(""); // Clear email on success
108+
} else if (response.msg && response.msg.toLowerCase().includes("already subscribed")) {
109+
setStatus("Success");
110+
setMsg("You're already subscribed to our newsletter!");
111+
reCaptchaRef.current?.reset();
112+
setToken(null);
113+
} else {
114+
setStatus("Error");
115+
// Handle Mailchimp's error messages more gracefully
116+
const errorMsg = response.msg || "An error occurred. Please try again.";
117+
setMsg(errorMsg.replace(/<(?:.|\n)*?>/gm, "")); // Strip HTML from error message
118+
}
119+
cleanup(callbackName, scriptId);
120+
};
101121

102-
// Create and append the script element
103-
try {
122+
// Create and append the script element
104123
const script = document.createElement("script");
105124
script.id = scriptId;
106125
script.onerror = () => {
126+
console.log("Script loading error"); // Debug log
107127
cleanup(callbackName, scriptId);
108128
setStatus("Error");
109129
setMsg("Failed to connect to the subscription service. Please try again.");
110130
};
111131

112132
// Construct Mailchimp URL with all required parameters
113133
const params = new URLSearchParams({
114-
u: "cde2461ba84f5279fff352829", // User ID
115-
id: "8d165e36d3", // List ID
134+
u: "cde2461ba84f5279fff352829",
135+
id: "8d165e36d3",
116136
EMAIL: email,
117-
"group[57543][1]": "1", // Group selection
118-
c: callbackName, // JSONP callback name
137+
"group[57543][1]": "1",
138+
c: callbackName,
119139
"g-recaptcha-response": token,
120-
b_cde2461ba84f5279fff352829_8d165e36d3: "", // Bot prevention honeypot field
140+
b_cde2461ba84f5279fff352829_8d165e36d3: "",
121141
});
122142

123-
script.src = `https://us6.list-manage.com/subscribe/post-json?${params.toString()}`;
143+
const url = `https://us6.list-manage.com/subscribe/post-json?${params.toString()}`;
144+
console.log("Request URL:", url); // Debug log
145+
146+
script.src = url;
124147
document.body.appendChild(script);
125148
} catch (error) {
149+
console.error("Submission error:", error); // Debug log
126150
cleanup(callbackName, scriptId);
127151
setStatus("Error");
128152
setMsg("An unexpected error occurred. Please try again.");
@@ -155,7 +179,19 @@ const Newsletter = () => {
155179
/>
156180
</div>
157181

158-
<PrimaryButton lightMode hover className={"bg-white grow-0 shrink-0 select-none"} type={"submit"} disabled={isSubmitting}>
182+
<PrimaryButton
183+
lightMode
184+
hover
185+
className={"bg-white grow-0 shrink-0 select-none"}
186+
type={"submit"}
187+
disabled={isSubmitting}
188+
onClick={(e) => {
189+
console.log("Button clicked"); // Debug log
190+
if (!isSubmitting) {
191+
handleSubmit(e);
192+
}
193+
}}
194+
>
159195
{isSubmitting ? "Subscribing..." : "Subscribe"}
160196
</PrimaryButton>
161197
</Row>

0 commit comments

Comments
 (0)