Repository: sugarlabs/www-v2
Pull request #57: Added the functionality for the subscribe form
Author: login: mayur-driod
Created: 2025-03-17T16:10:14Z | Merged: 2025-03-18T05:23:51Z

---
Name: Added Subscribe Functionality.
about: In this PR I have currently added the subscribe functionality for the newsletter.
---

## Description
In the src\components\Donation.tsx I have added the logic and functionality for allowing users to subscribe to the newsletter.
<!--- Describe the changes introduced by this pull request. -->
<!--- Explain what problem it solves or what feature/fix it adds. -->

## Related Issue

<!--- If this pull request is related to a specific issue, reference it here using #issue_number. -->
<!--- For example, "Fixes #123" or "Addresses #456". -->

This PR fixes #51 

## Changes Made

<!--- Provide a summary of the changes made in this pull request. -->
<!--- Include any relevant technical details or architecture changes. -->

- Change 1 in src\components\Donation.jsx I wrapped the input and button in <motion.form> tag
- Change 2 in the form tag I added action="https://buttondown.com/api/emails/embed-subscribe/sugarlabs" and method="post"
- Change 3 in the input tag I added name: email and to a required field.
- Change 4 in the submit tag I added type: submit
- ...

## Testing Performed
I tried to sign myself up and it has successfully worked
![image](https://github.com/user-attachments/assets/f2991408-1c25-44cb-ade4-bf79c9242af3)

<!--- Describe the testing that you have performed to validate these changes. -->
<!--- Include information about test cases, testing environments, and results. -->

- Ran sign up test on my email
- Tested on browsers Opera GX and Edge
- ...

## Checklist

<!--- Please check the boxes that apply to this pull request. -->
<!--- You can add or remove items as needed. -->

- [x] I have tested these changes locally and they work as expected.
- [ ] I have added/updated tests that prove the effectiveness of these changes.
- [ ] I have updated the documentation to reflect these changes, if applicable.
- [x] I have followed the project's coding style guidelines.
- [x] I have addressed the code review feedback from the previous submission, if applicable.

## Additional Notes for Reviewers
After multiple attempts to test the feature, the site has blocked me. It worked successfully the first two times. Please verify whether this is a platform restriction rather than an issue on my end.

<!--- Provide any additional context or notes for the reviewers. -->
<!--- This might include details about design decisions, potential concerns, or anything else relevant. -->



Diff:
diff --git a/src/components/Donation.tsx b/src/components/Donation.tsx
index 19b938ad..5581d637 100644
--- a/src/components/Donation.tsx
+++ b/src/components/Donation.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { donationData } from '@/constants/Donation';
 import { Link } from 'react-router-dom';
 import { volunteerImages } from '@/constants/Volunteer';
@@ -11,6 +11,7 @@ import {
   bounce,
   staggerContainer,
   floatingCircle,
+  buttonAnimation,
 } from '@/styles/Animations';
 
 const Donation: React.FC = () => {
@@ -18,6 +19,8 @@ const Donation: React.FC = () => {
     window.location.href = donationData.url;
   };
 
+  const [Email, setEmail] = useState('');
+
   return (
     <section className="relative overflow-hidden bg-white text-black py-16 px-4">
       {/* Animated background circles */}
@@ -139,19 +142,31 @@ const Donation: React.FC = () => {
             className="mt-4 flex justify-center items-center"
             variants={slideInRight}
           >
-            <input
-              className="px-4 py-2 border border-gray-300 rounded-l-full focus:outline-none"
-              placeholder="Enter your email"
-              type="email"
-            />
-            <motion.button
-              className="px-6 py-2 bg-red-500 text-white font-bold rounded-r-full shadow-lg hover:bg-red-600 transition duration-300"
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-              transition={{ type: 'spring', stiffness: 400, damping: 10 }}
+            <motion.form
+              action="https://buttondown.com/api/emails/embed-subscribe/sugarlabs"
+              method="post"
+              onSubmit={() => setTimeout(() => setEmail(''), 500)}
             >
-              SUBSCRIBE
-            </motion.button>
+              <input
+                className="px-4 py-2 border border-gray-300 rounded-l-full focus:outline-none"
+                placeholder="Enter your email"
+                type="email"
+                name="email"
+                value={Email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
+              <input value="1" type="hidden" name="embed" />
+              <motion.button
+                className="px-6 py-2 bg-red-500 text-white font-bold rounded-r-full shadow-lg hover:bg-red-600 transition duration-300"
+                variants={buttonAnimation}
+                whileHover="whileHover"
+                whileTap="whileTap"
+                type="submit"
+              >
+                SUBSCRIBE
+              </motion.button>
+            </motion.form>
           </motion.div>
         </motion.div>
       </div>
diff --git a/src/styles/Animations.ts b/src/styles/Animations.ts
index bcfa0f23..908f0fa4 100644
--- a/src/styles/Animations.ts
+++ b/src/styles/Animations.ts
@@ -1012,3 +1012,14 @@ export const featureSectionAnimations = {
     visible: { opacity: 1, transition: { delay: 0.3, duration: 0.5 } },
   },
 };
+
+export const buttonAnimation: Variants = {
+  whileHover: {
+    scale: 1.05,
+    transition: { type: 'spring', stiffness: 400, damping: 10 },
+  },
+  whileTap: {
+    scale: 0.95,
+    transition: { type: 'spring', stiffness: 400, damping: 10 },
+  },
+};


Reviews:
user: login: sa-fw-an
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-03-17T17:34:41Z
user: login: mayur-driod
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T01:13:29Z
user: login: mayur-driod
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T03:09:08Z
user: login: sa-fw-an
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-18T04:15:18Z

Review comments:
diff_hunk: @@ -139,19 +139,27 @@ const Donation: React.FC = () => {
             className="mt-4 flex justify-center items-center"
             variants={slideInRight}
           >
-            <input
-              className="px-4 py-2 border border-gray-300 rounded-l-full focus:outline-none"
-              placeholder="Enter your email"
-              type="email"
-            />
-            <motion.button
-              className="px-6 py-2 bg-red-500 text-white font-bold rounded-r-full shadow-lg hover:bg-red-600 transition duration-300"
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-              transition={{ type: 'spring', stiffness: 400, damping: 10 }}
+            <motion.form
+              action="https://buttondown.com/api/emails/embed-subscribe/sugarlabs"
+              method="post"
             >
-              SUBSCRIBE
-            </motion.button>
+              <input
+                className="px-4 py-2 border border-gray-300 rounded-l-full focus:outline-none"
+                placeholder="Enter your email"
+                type="email"
+                name="email"
+                required
+              />
+              <motion.button
+                className="px-6 py-2 bg-red-500 text-white font-bold rounded-r-full shadow-lg hover:bg-red-600 transition duration-300"
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                transition={{ type: 'spring', stiffness: 400, damping: 10 }}
path: src/components/Donation.tsx
user: login: sa-fw-an
body: Please add this animation in the Animations.ts file under `src/styles`
created_at: 2025-03-17T17:34:18Z
author_association: MEMBER
diff_hunk: @@ -139,19 +139,27 @@ const Donation: React.FC = () => {
             className="mt-4 flex justify-center items-center"
             variants={slideInRight}
           >
-            <input
-              className="px-4 py-2 border border-gray-300 rounded-l-full focus:outline-none"
-              placeholder="Enter your email"
-              type="email"
-            />
-            <motion.button
-              className="px-6 py-2 bg-red-500 text-white font-bold rounded-r-full shadow-lg hover:bg-red-600 transition duration-300"
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-              transition={{ type: 'spring', stiffness: 400, damping: 10 }}
+            <motion.form
+              action="https://buttondown.com/api/emails/embed-subscribe/sugarlabs"
+              method="post"
             >
-              SUBSCRIBE
-            </motion.button>
+              <input
+                className="px-4 py-2 border border-gray-300 rounded-l-full focus:outline-none"
+                placeholder="Enter your email"
+                type="email"
+                name="email"
+                required
+              />
+              <motion.button
+                className="px-6 py-2 bg-red-500 text-white font-bold rounded-r-full shadow-lg hover:bg-red-600 transition duration-300"
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                transition={{ type: 'spring', stiffness: 400, damping: 10 }}
path: src/components/Donation.tsx
user: login: mayur-driod
body: Yes I will add this today.
created_at: 2025-03-18T01:13:29Z
author_association: CONTRIBUTOR
diff_hunk: @@ -139,19 +139,27 @@ const Donation: React.FC = () => {
             className="mt-4 flex justify-center items-center"
             variants={slideInRight}
           >
-            <input
-              className="px-4 py-2 border border-gray-300 rounded-l-full focus:outline-none"
-              placeholder="Enter your email"
-              type="email"
-            />
-            <motion.button
-              className="px-6 py-2 bg-red-500 text-white font-bold rounded-r-full shadow-lg hover:bg-red-600 transition duration-300"
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-              transition={{ type: 'spring', stiffness: 400, damping: 10 }}
+            <motion.form
+              action="https://buttondown.com/api/emails/embed-subscribe/sugarlabs"
+              method="post"
             >
-              SUBSCRIBE
-            </motion.button>
+              <input
+                className="px-4 py-2 border border-gray-300 rounded-l-full focus:outline-none"
+                placeholder="Enter your email"
+                type="email"
+                name="email"
+                required
+              />
+              <motion.button
+                className="px-6 py-2 bg-red-500 text-white font-bold rounded-r-full shadow-lg hover:bg-red-600 transition duration-300"
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                transition={{ type: 'spring', stiffness: 400, damping: 10 }}
path: src/components/Donation.tsx
user: login: mayur-driod
body: Hey @sa-fw-an  do I need to open a new PR for the changes made in Animations.ts?
created_at: 2025-03-18T03:09:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -139,19 +139,27 @@ const Donation: React.FC = () => {
             className="mt-4 flex justify-center items-center"
             variants={slideInRight}
           >
-            <input
-              className="px-4 py-2 border border-gray-300 rounded-l-full focus:outline-none"
-              placeholder="Enter your email"
-              type="email"
-            />
-            <motion.button
-              className="px-6 py-2 bg-red-500 text-white font-bold rounded-r-full shadow-lg hover:bg-red-600 transition duration-300"
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-              transition={{ type: 'spring', stiffness: 400, damping: 10 }}
+            <motion.form
+              action="https://buttondown.com/api/emails/embed-subscribe/sugarlabs"
+              method="post"
             >
-              SUBSCRIBE
-            </motion.button>
+              <input
+                className="px-4 py-2 border border-gray-300 rounded-l-full focus:outline-none"
+                placeholder="Enter your email"
+                type="email"
+                name="email"
+                required
+              />
+              <motion.button
+                className="px-6 py-2 bg-red-500 text-white font-bold rounded-r-full shadow-lg hover:bg-red-600 transition duration-300"
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                transition={{ type: 'spring', stiffness: 400, damping: 10 }}
path: src/components/Donation.tsx
user: login: sa-fw-an
body: > Hey @sa-fw-an do I need to open a new PR for the changes made in Animations.ts?

Not needed just change it and commit :)
created_at: 2025-03-18T04:15:18Z
author_association: MEMBER

PR comments:
user: login: sa-fw-an
created_at: 2025-03-17T17:31:34Z
body: Works perfect. Please also add this feature that the email placeholder is cleared on clicking the subscribe button
author_association: MEMBER
user: login: FirePheonix
created_at: 2025-03-17T17:44:44Z
body: Amazing work by the work @mayur-driod 
Do attend www-v2 meets from now on in case you're interested in taking up more issues. We're in bug fixing and improvement of design phase right now.
author_association: CONTRIBUTOR
user: login: mayur-driod
created_at: 2025-03-18T01:15:31Z
body: > Amazing work by the work @mayur-driod 
> Do attend www-v2 meets from now on in case you're interested in taking up more issues. We're in bug fixing and improvement of design phase right now.

Hey I would love to join. Please let me know whenever it's happening. Thanks :)
author_association: CONTRIBUTOR
user: login: mayur-driod
created_at: 2025-03-18T03:55:19Z
body: > Works perfect. Please also add this feature that the email placeholder is cleared on clicking the subscribe button

Hey, I have added this functionality. Here is the demo of it working.


https://github.com/user-attachments/assets/2b5a6e0b-6f69-42a4-9ac6-f078ff310f0c


author_association: CONTRIBUTOR
user: login: sa-fw-an
created_at: 2025-03-18T05:07:36Z
body: Please Build & Check Linting of your project before committing. 
- Build: `npm run build`
- Linting check: `npm run format:check`
author_association: MEMBER
user: login: mayur-driod
created_at: 2025-03-18T05:14:49Z
body: > Please Build & Check Linting of your project before committing.
> 
> * Build: `npm run build`
> * Linting check: `npm run format:check`

Yes, I'm sorry about that. VS code imported something automatically, causing errors. But now it's working as expected.

please take a look:

https://github.com/user-attachments/assets/45fb92bf-da7f-4811-b227-4b4183eb8d2f

Also thanks for the support @Niranjan7407 
author_association: CONTRIBUTOR