diff --git a/public/images/bg.png b/public/images/bg.png new file mode 100644 index 0000000..b415952 Binary files /dev/null and b/public/images/bg.png differ diff --git a/public/images/newsletter.png b/public/images/newsletter.png deleted file mode 100644 index eb672df..0000000 Binary files a/public/images/newsletter.png and /dev/null differ diff --git a/public/locales/ar/newsletter.json b/public/locales/ar/newsletter.json index 3892f2f..8675402 100644 --- a/public/locales/ar/newsletter.json +++ b/public/locales/ar/newsletter.json @@ -1,8 +1,9 @@ { - "newsletterTitle": "اشترك في خدمة الرسائل الاخبارية", - "newsletterDescription": "كن أول من يعلم عن آخر مقالات مدونتنا والتحديثات الداخلية.\n انضم إلينا اليوم.", + "newsletterTitle": "انضم إلى نشرتنا", + "newsletterDescription": "كن أول من تصله مدوناتنا وتحديثاتنا.", + "newsletterJoin": "اشترك اليوم.", "subscribe": "اشترك", - "successTitle": "شكرًا للاشتراك", - "successDescription": "سوف تتلقى تحديثاتنا وأحدث مقالاتنا على", - "signUpInvitation": "هل ترغب في الانضمام إلى عائلتنا في يونيفاي؟" + "successTitle": "شكرًا على اشتراككم", + "successDescription": "سوف تتلقى تحديثاتنا وأحدث مدوناتنا على", + "signUpInvitation": "هل ترغب في الانضمام إلى عائلة Unify؟" } diff --git a/public/locales/en/newsletter.json b/public/locales/en/newsletter.json index fc89197..7606b31 100644 --- a/public/locales/en/newsletter.json +++ b/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?" } diff --git a/public/locales/fr/newsletter.json b/public/locales/fr/newsletter.json index 3c974c3..d6af364 100644 --- a/public/locales/fr/newsletter.json +++ b/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 ?" } diff --git a/src/components/Newsletter/NewsletterForm.jsx b/src/components/Newsletter/NewsletterForm.jsx index a62aeb9..86098a1 100644 --- a/src/components/Newsletter/NewsletterForm.jsx +++ b/src/components/Newsletter/NewsletterForm.jsx @@ -1,7 +1,7 @@ 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"; @@ -9,6 +9,7 @@ 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 }) {

- Join our newsletter + {t("newsletter:newsletterTitle")}

- Be the first to know about our latest blog posts, and insider updates.{" "} + {t("newsletter:newsletterDescription")}
- Join us today. + {t("newsletter:newsletterJoin")}

formik.dirty && formik.handleBlur(e)} @@ -61,11 +62,11 @@ function NewsletterForm({ onValidated }) {
diff --git a/src/components/Newsletter/__test__/__snapshots__/Newsletter.test.js.snap b/src/components/Newsletter/__test__/__snapshots__/Newsletter.test.js.snap index cf93f61..0c35797 100644 --- a/src/components/Newsletter/__test__/__snapshots__/Newsletter.test.js.snap +++ b/src/components/Newsletter/__test__/__snapshots__/Newsletter.test.js.snap @@ -13,18 +13,17 @@ exports[`renders correctly 1`] = `

- Join our newsletter + newsletterTitle

- Be the first to know about our latest blog posts, and insider updates. - + newsletterDescription
- Join us today. + newsletterJoin

@@ -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`] = ` />
diff --git a/src/components/Newsletter/__test__/__snapshots__/NewsletterForm.test.js.snap b/src/components/Newsletter/__test__/__snapshots__/NewsletterForm.test.js.snap index cf93f61..0c35797 100644 --- a/src/components/Newsletter/__test__/__snapshots__/NewsletterForm.test.js.snap +++ b/src/components/Newsletter/__test__/__snapshots__/NewsletterForm.test.js.snap @@ -13,18 +13,17 @@ exports[`renders correctly 1`] = `

- Join our newsletter + newsletterTitle

- Be the first to know about our latest blog posts, and insider updates. - + newsletterDescription
- Join us today. + newsletterJoin

@@ -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`] = ` />
diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 189ffd5..d629d47 100644 --- a/src/pages/index.jsx +++ b/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), diff --git a/src/pages/success.jsx b/src/pages/success.jsx index 5e974d9..a518aad 100644 --- a/src/pages/success.jsx +++ b/src/pages/success.jsx @@ -2,6 +2,7 @@ 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"; @@ -9,6 +10,7 @@ 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' > -
+
newsletterImage

- ✨Thank you for subscribing ✨ + ✨{t("newsletter:successTitle")}✨

- You will receive our updates and latest blogs on {router.query.email}. + {t("newsletter:successDescription")} {router.query.email}.

- You want to join our Unify family? + {t("newsletter:signUpInvitation")} {" "} - Sign up + {t("signUp:signUpButton")}
@@ -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, };