85 create newsletter section

package.json

@@ -35,9 +35,11 @@
     "next-i18next": "^11.2.2",
     "nextjs-toploader": "^1.4.2",
     "react": "^18.2.0",
+    "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",
     "react-firebase-hooks": "^5.1.1",
     "react-icons": "^4.11.0",
+    "react-mailchimp-subscribe": "^2.1.3",
     "react-slick": "^0.29.0",
     "react-test-renderer": "^18.2.0",
     "react-toastify": "^9.1.3",

src/components/Newsletter/NewsletterForm.jsx

@@ -0,0 +1,75 @@
+import { useFormik } from "formik";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
+import background from "public/images/newsletter.png";
+import * as Yup from "yup";
+
+import Input from "../Input";
+
+function NewsletterForm({ onValidated }) {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const formik = useFormik({
+    initialValues: {
+      email: "",
+    },
+    validationSchema: Yup.object({
+      email: Yup.string().email("invalid email").required("email is required"),
+    }),
+    onSubmit: async (values, { resetForm }) => {
+      try {
+        await onValidated({ EMAIL: values.email });
+        router.push({ pathname: "/success", query: values }, { scroll: false });
+        resetForm();
+      } catch (error) {
+        console.error("Error subscribing:", error);
+      }
+    },
+  });
+  return (
+    <div
+      className='bg-accent py-20 px-6 w-full'
+      style={{
+        backgroundImage: `url(${background.src})`,
+        backgroundSize: "cover",
+      }}
+    >
+      <h2 className='text-3xl md:text-4xl tracking-wider font-extrabold text-white'>
+        Join our newsletter
+      </h2>
+      <p className='my-4 max-w-2xl font-light text-xl text-gray-200'>
+        Be the first to know about our latest blog posts, and insider updates.{" "}
+        <br />
+        Join us today.
+      </p>
+      <form
+        onSubmit={formik.handleSubmit}
+        className='flex flex-col md:flex-row gap-4'
+      >
+        <div>
+          <Input
+            name='email'
+            type='email'
+            placeholder='Enter your email'
+            handleChange={formik.handleChange}
+            value={formik.values.email}
+            handleBlur={(e) => formik.dirty && formik.handleBlur(e)}
+            error={formik.errors.email}
+            touched={formik.touched.email}
+          />
+          {/* this is a spacer */}
+          <div className='label' />
+        </div>
+        <button
+          className='btn btn-neutral w-full md:w-1/12 self-center rounded-3xl'
+          type='submit'
+          disabled={formik.isSubmitting}
+        >
+          {formik.isSubmitting ? "loading" : "Subscribe"}
+        </button>
+      </form>
+    </div>
+  );
+}
+
+export default NewsletterForm;

src/components/Newsletter/__test__/Newsletter.test.js

@@ -0,0 +1,15 @@
+import MailchimpSubscribe from "react-mailchimp-subscribe";
+import renderer from "react-test-renderer";
+
+import Newsletter from "..";
+
+it("renders correctly", () => {
+  const tree = renderer
+    .create(
+      <Newsletter>
+        <MailchimpSubscribe url='' />
+      </Newsletter>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

src/components/Newsletter/__test__/NewsletterForm.test.js

@@ -0,0 +1,8 @@
+import renderer from "react-test-renderer";
+
+import NewsletterForm from "../NewsletterForm";
+
+it("renders correctly", () => {
+  const tree = renderer.create(<NewsletterForm />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

src/components/Newsletter/__test__/__snapshots__/Newsletter.test.js.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="bg-accent py-20 px-6 w-full"
+  style={
+    Object {
+      "backgroundImage": "url(/img.jpg)",
+      "backgroundSize": "cover",
+    }
+  }
+>
+  <h2
+    className="text-3xl md:text-4xl tracking-wider font-extrabold text-white"
+  >
+    Join our newsletter
+  </h2>
+  <p
+    className="my-4 max-w-2xl font-light text-xl text-gray-200"
+  >
+    Be the first to know about our latest blog posts, and insider updates.
+
+    <br />
+    Join us today.
+  </p>
+  <form
+    className="flex flex-col md:flex-row gap-4"
+    onSubmit={[Function]}
+  >
+    <div>
+      <div>
+        <div
+          className="label ml-2"
+        >
+          <label
+            className="label-text"
+            htmlFor="email"
+          />
+          <label
+            className="label-text-alt "
+          />
+        </div>
+        <input
+          className="input bg-white input-primary w-full rounded-full border-opacity-25"
+          id="email"
+          name="email"
+          onBlur={[Function]}
+          onChange={[Function]}
+          placeholder="Enter your email"
+          type="email"
+          value=""
+        />
+      </div>
+      <div
+        className="label"
+      />
+    </div>
+    <button
+      className="btn btn-neutral w-full md:w-1/12 self-center rounded-3xl"
+      disabled={false}
+      type="submit"
+    >
+      Subscribe
+    </button>
+  </form>
+</div>
+`;