feat(newsletter): add translation to newsletter

add translation to newsletter section and subscription success page

fix #82

public/locales/ar/newsletter.json

@@ -1,8 +1,9 @@
 {
-  "newsletterTitle": "اشترك في خدمة الرسائل الاخبارية",
-  "newsletterDescription": "كن أول من يعلم عن آخر مقالات مدونتنا والتحديثات الداخلية.\n انضم إلينا اليوم.",
+  "newsletterTitle": "انضم إلى نشرتنا",
+  "newsletterDescription": "كن أول من تصله مدوناتنا وتحديثاتنا.",
+  "newsletterJoin": "اشترك اليوم.",
   "subscribe": "اشترك",
-  "successTitle": "شكرًا للاشتراك",
-  "successDescription": "سوف تتلقى تحديثاتنا وأحدث مقالاتنا على",
-  "signUpInvitation": "هل ترغب في الانضمام إلى عائلتنا في يونيفاي؟"
+  "successTitle": "شكرًا على اشتراككم",
+  "successDescription": "سوف تتلقى تحديثاتنا وأحدث مدوناتنا على",
+  "signUpInvitation": "هل ترغب في الانضمام إلى عائلة Unify؟"
 }

public/locales/en/newsletter.json

@@ -1,8 +1,9 @@
 {
-  "newsletterTitle:": "Join our newsletter",
-  "newsletterDescription": "Be the first to read our future blog posts.\n Join us now.",
+  "newsletterTitle": "Join our newsletter",
+  "newsletterDescription": "Be the first to know about our blogs & updates.",
+  "newsletterJoin": "Join us today.",
   "subscribe": "Subscribe",
   "successTitle": "Thank you for subscribing",
   "successDescription": "You will receive our updates and latest blogs on",
-  "signUpInvitation": "You want to join our Unify family?"
+  "signUpInvitation": "You want to join Unify family?"
 }

public/locales/fr/newsletter.json

@@ -1,8 +1,9 @@
 {
   "newsletterTitle": "Rejoignez notre newsletter",
-  "newsletterDescription": "Soyez les premiers à lire nos plus récents blogs et les mises à jour de notre site.\n Rejoignez-nous maintenant.",
+  "newsletterDescription": "Soyez les premiers à connaître nos blogs et mises à jour.",
+  "newsletterJoin": "Rejoignez-nous aujourd'hui.",
   "subscribe": "S'abonner",
-  "successTitle": "Merci de vous être abonné",
-  "successDescription": "Vous recevrez nos mises à jour et nos derniers articles de blog sur",
-  "signUpInvitation": "Souhaitez-vous rejoindre notre famille Unify ?"
+  "successTitle": "Merci pour votre abonnement",
+  "successDescription": "Vous recevrez désormais nos mises à jour et nos derniers blogs sur",
+  "signUpInvitation": "Voulez-vous rejoindre notre famille Unify ?"
 }

src/components/Newsletter/NewsletterForm.jsx

@@ -1,14 +1,15 @@
 import { useFormik } from "formik";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
-import background from "public/images/newsletter.png";
+import bg from "public/images/bg.png";
 import * as Yup from "yup";
 
 import Input from "../Input";
 
 function NewsletterForm({ onValidated }) {
   const { t } = useTranslation();
   const router = useRouter();
+
   const formik = useFormik({
     initialValues: {
       email: "",
@@ -30,27 +31,27 @@ function NewsletterForm({ onValidated }) {
     <div
       className='bg-accent py-20 px-6 w-full'
       style={{
-        backgroundImage: `url(${background.src})`,
+        backgroundImage: `url(${bg.src})`,
         backgroundSize: "cover",
       }}
     >
       <h2 className='text-3xl md:text-4xl tracking-wider font-extrabold text-white'>
-        Join our newsletter
+        {t("newsletter:newsletterTitle")}
       </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.{" "}
+        {t("newsletter:newsletterDescription")}
         <br />
-        Join us today.
+        {t("newsletter:newsletterJoin")}
       </p>
       <form
         onSubmit={formik.handleSubmit}
-        className='flex flex-col md:flex-row gap-4'
+        className='flex flex-col md:flex-row gap-2'
       >
         <div>
           <Input
             name='email'
             type='email'
-            placeholder='Enter your email'
+            placeholder={t("signIn:emailPlaceholder")}
             handleChange={formik.handleChange}
             value={formik.values.email}
             handleBlur={(e) => formik.dirty && formik.handleBlur(e)}
@@ -61,11 +62,11 @@ function NewsletterForm({ onValidated }) {
           <div className='label' />
         </div>
         <button
-          className='btn btn-neutral w-full md:w-1/12 self-center rounded-3xl'
+          className='btn btn-neutral w-full md:w-fit self-center rounded-3xl'
           type='submit'
           disabled={formik.isSubmitting}
         >
-          {formik.isSubmitting ? "loading" : "Subscribe"}
+          {t("newsletter:subscribe")}
         </button>
       </form>
     </div>

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

@@ -13,18 +13,17 @@ exports[`renders correctly 1`] = `
   <h2
     className="text-3xl md:text-4xl tracking-wider font-extrabold text-white"
   >
-    Join our newsletter
+    newsletterTitle
   </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.
-     
+    newsletterDescription
     <br />
-    Join us today.
+    newsletterJoin
   </p>
   <form
-    className="flex flex-col md:flex-row gap-4"
+    className="flex flex-col md:flex-row gap-2"
     onSubmit={[Function]}
   >
     <div>
@@ -46,7 +45,7 @@ exports[`renders correctly 1`] = `
           name="email"
           onBlur={[Function]}
           onChange={[Function]}
-          placeholder="Enter your email"
+          placeholder="emailPlaceholder"
           type="email"
           value=""
         />
@@ -56,11 +55,11 @@ exports[`renders correctly 1`] = `
       />
     </div>
     <button
-      className="btn btn-neutral w-full md:w-1/12 self-center rounded-3xl"
+      className="btn btn-neutral w-full md:w-fit self-center rounded-3xl"
       disabled={false}
       type="submit"
     >
-      Subscribe
+      subscribe
     </button>
   </form>
 </div>

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

@@ -13,18 +13,17 @@ exports[`renders correctly 1`] = `
   <h2
     className="text-3xl md:text-4xl tracking-wider font-extrabold text-white"
   >
-    Join our newsletter
+    newsletterTitle
   </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.
-     
+    newsletterDescription
     <br />
-    Join us today.
+    newsletterJoin
   </p>
   <form
-    className="flex flex-col md:flex-row gap-4"
+    className="flex flex-col md:flex-row gap-2"
     onSubmit={[Function]}
   >
     <div>
@@ -46,7 +45,7 @@ exports[`renders correctly 1`] = `
           name="email"
           onBlur={[Function]}
           onChange={[Function]}
-          placeholder="Enter your email"
+          placeholder="emailPlaceholder"
           type="email"
           value=""
         />
@@ -56,11 +55,11 @@ exports[`renders correctly 1`] = `
       />
     </div>
     <button
-      className="btn btn-neutral w-full md:w-1/12 self-center rounded-3xl"
+      className="btn btn-neutral w-full md:w-fit self-center rounded-3xl"
       disabled={false}
       type="submit"
     >
-      Subscribe
+      subscribe
     </button>
   </form>
 </div>

src/pages/index.jsx

@@ -62,6 +62,8 @@ export async function getStaticProps({ locale }) {
         "states",
         "categories",
         "addItem",
+        "newsletter",
+        "signIn",
       ])),
       items: items.slice(0, 5),
       blogs: blogs.slice(0, 4),

src/pages/success.jsx

@@ -2,13 +2,15 @@ import { motion as m } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import box from "public/images/newsletterBox.svg";
 import { useEffect, useState } from "react";
 import Confetti from "react-confetti";
 
 export default function Success() {
   const [pieces, setPieces] = useState(200);
+  const { i18n, t } = useTranslation();
   const router = useRouter();
   const stopConfetti = () => {
     setTimeout(() => {
@@ -26,24 +28,27 @@ export default function Success() {
       exit={{ opacity: 0 }}
       className='flex justify-center items-center m-9'
     >
-      <div className='bg-white shadow-xl rounded-lg p-2 md:px-20 md:py-10 text-gray-700 flex flex-col justify-center items-center'>
+      <div
+        className='bg-white shadow-xl rounded-lg p-2 md:px-20 md:py-10 text-gray-700 flex flex-col justify-center items-center'
+        dir={i18n?.language === "ar" ? "rtl" : "ltr"}
+      >
         <Image
           src={box}
           alt='newsletterImage'
           className='w-[270px] h-[270px]'
         />
         <h1 className='text-xl font-bold md:text-2xl pb-4 '>
-          ✨Thank you for subscribing ✨
+          ✨{t("newsletter:successTitle")}✨
         </h1>
         <p className='text-lg text-center text-gray-500'>
-          You will receive our updates and latest blogs on {router.query.email}.
+          {t("newsletter:successDescription")} {router.query.email}.
         </p>
         <div className='flex flex-col md:flex-row justify-center items-center gap-2 pt-2'>
           <span className='text-gray-600'>
-            You want to join our Unify family?
+            {t("newsletter:signUpInvitation")}
           </span>{" "}
           <Link href='/auth/sign-up' className='btn btn-primary'>
-            Sign up
+            {t("signUp:signUpButton")}
           </Link>
         </div>
       </div>
@@ -54,7 +59,11 @@ export default function Success() {
 export async function getStaticProps({ locale }) {
   return {
     props: {
-      ...(await serverSideTranslations(locale, ["common"])),
+      ...(await serverSideTranslations(locale, [
+        "common",
+        "newsletter",
+        "signUp",
+      ])),
     },
     revalidate: 30,
   };