refactor: localization

components/cards/cart-card/CartCard.jsx

@@ -1,15 +1,12 @@
 import { Box, Button, ButtonGroup, Card, Typography } from '@mui/material';
+import { useTranslation } from 'next-i18next';
 import Image from 'next/image';
 import PropType from 'prop-types';
 import { useState } from 'react';
 
 const CartCard = ({ product, initialQuantity, remove, updateQuantity }) => {
   const [quantity, setQuantity] = useState(initialQuantity);
-
-  // useEffect(() => {
-  //   updateQuantity(product?.customID, quantity);
-  // }, [quantity]);
-
+  const { t } = useTranslation('cart');
   return (
     <Card
       sx={{
@@ -81,7 +78,7 @@ const CartCard = ({ product, initialQuantity, remove, updateQuantity }) => {
                 fontSize: 14,
               }}
             >
-              Quantity
+              {t('cart:quantity')}
             </Typography>
             <ButtonGroup
               size="small"
@@ -101,7 +98,7 @@ const CartCard = ({ product, initialQuantity, remove, updateQuantity }) => {
                   width: 25,
                 }}
                 onClick={() => {
-                  if (quantity > 0) {
+                  if (quantity > 1) {
                     updateQuantity(product?.customID, quantity - 1);
                     setQuantity((prevState) => prevState - 1);
                   }
@@ -149,7 +146,7 @@ const CartCard = ({ product, initialQuantity, remove, updateQuantity }) => {
             }
             onClick={() => remove(product.customID)}
           >
-            Remove
+            {t('cart:remove')}
           </Button>
         </Box>
         <Box
@@ -168,7 +165,8 @@ const CartCard = ({ product, initialQuantity, remove, updateQuantity }) => {
               fontSize: { xs: 15, md: 18 },
             }}
           >
-            Price: ${product?.price}
+            {t('cart:priceTag')}
+            {product?.price}
           </Typography>
         </Box>
       </Box>

components/cards/order-card/OrderCard.jsx

@@ -1,8 +1,10 @@
 import { Card, Divider, Typography } from '@mui/material';
 import { Box } from '@mui/system';
+import { useTranslation } from 'next-i18next';
 import PropType from 'prop-types';
 
 const OrderCard = ({ data }) => {
+  const { t } = useTranslation('profile');
   return (
     <Card
       height="100%"
@@ -22,11 +24,18 @@ const OrderCard = ({ data }) => {
         }}
       >
         <Typography sx={{ fontWeight: 600 }}>
-          Order placed on: {data.date}
+          {t('profile:orderDate')}
+          {data.date}
         </Typography>
         <Divider />
-        <Typography sx={{ mt: 1 }}>By: {data.name}</Typography>
-        <Typography>Total: ${data.totalPrice.toFixed(2)}</Typography>
+        <Typography sx={{ mt: 1 }}>
+          {t('profile:by')}
+          {data.name}
+        </Typography>
+        <Typography>
+          {t('profile:total')}
+          {data.totalPrice.toFixed(2)}
+        </Typography>
       </Box>
     </Card>
   );

components/cards/order-summary-card/OrderSummaryCard.jsx

@@ -1,11 +1,13 @@
 import { Button, Card, Divider, Typography } from '@mui/material';
 import { Box } from '@mui/system';
+import { useTranslation } from 'next-i18next';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { setCookie } from 'nookies';
 import PropType from 'prop-types';
 
 const OrderSummaryCard = ({ data }) => {
+  const { t } = useTranslation('cart');
   const router = useRouter();
   return (
     <Card sx={{ p: 3, width: '100%', mb: 2, backgroundColor: '#f1f1f1' }}>
@@ -17,14 +19,16 @@ const OrderSummaryCard = ({ data }) => {
           width: '100%',
         }}
       >
-        Order Summary
+        {t('cart:orderTitle')}
       </Typography>
       <Typography sx={{ mt: 4 }}>
-        Items total:${data.totalPrice.toFixed(2)}
+        {t('cart:itemsTotal')}
+        {data.totalPrice.toFixed(2)}
       </Typography>
-      <Typography sx={{ mt: 1.5 }}>Shipping Costs: FREE</Typography>
+      <Typography sx={{ mt: 1.5 }}>{t('cart:shipping')}</Typography>
       <Typography sx={{ mt: 1.5, mb: 1.5 }}>
-        Total: ${data.totalPrice.toFixed(2)}
+        {t('cart:total')}
+        {data.totalPrice.toFixed(2)}
       </Typography>
       <Divider />
       <Box sx={{ textAlign: 'center', mt: 4, width: '100%' }}>
@@ -59,13 +63,10 @@ const OrderSummaryCard = ({ data }) => {
             });
           }}
         >
-          Proceed to Checkout
+          {t('cart:proceed')}
         </Button>
       </Box>
-      <Typography sx={{ mt: 3, fontSize: 13 }}>
-        Once the checkout process begins you will have an hour to complete your
-        checkout otherwise you will be returned back to the cart to start over.
-      </Typography>
+      <Typography sx={{ mt: 3, fontSize: 13 }}>{t('cart:infoMsg')}</Typography>
     </Card>
   );
 };

components/cart-content/CartContent.jsx

@@ -1,4 +1,5 @@
 import { Box } from '@mui/system';
+import { useTranslation } from 'next-i18next';
 import { destroyCookie } from 'nookies';
 import { useEffect, useState } from 'react';
 import { useStore, useStoreUpdate } from '../../store/cart-context';
@@ -10,6 +11,7 @@ import PageWrapper from '../layout/page-wrapper/PageWrapper';
 import StepTitle from '../layout/steps-title/StepTitle';
 
 const CartContent = () => {
+  const { t } = useTranslation('cart');
   const { cartStorage, totalPrice, totalQuantity } = useStore();
   const { removeCartValue, updateItemQuantity } = useStoreUpdate();
   const [cartInfo, setCartInfo] = useState({
@@ -50,7 +52,7 @@ const CartContent = () => {
 
   return (
     <PageWrapper>
-      <StepTitle title="Items in Your Cart" breadcrumbsArray={['Cart']} />
+      <StepTitle title={t('cart:cartTitle')} breadcrumbsArray={['Cart']} />
       <ContentContainer>
         <Box sx={{ mt: 2, mr: { md: 2, minWidth: '65%' }, mb: { xs: 6 } }}>
           {mapProductsToDom()}

components/checkout-content/CheckoutContent.jsx

@@ -1,5 +1,6 @@
 import { Box } from '@mui/system';
 import { useSession } from 'next-auth/react';
+import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 import { setCookie } from 'nookies';
 import { useEffect, useState } from 'react';
@@ -14,6 +15,7 @@ import StepTitle from '../layout/steps-title/StepTitle';
 import PageDescription from '../page-description/PageDescription';
 
 const CheckoutContent = () => {
+  const { t } = useTranslation('cart');
   const { cartStorage } = useStore();
   const { addCheckoutValue } = useCheckoutDataUpdate();
 
@@ -53,13 +55,10 @@ const CheckoutContent = () => {
   return (
     <PageWrapper>
       <StepTitle
-        title="Items in Your Cart"
+        title={t('checkout:title')}
         breadcrumbsArray={['Cart', 'Checkout']}
       />
-      <PageDescription
-        description="The following fields will be used as the shipping details for your
-          order"
-      />
+      <PageDescription description={t('checkout:subtitle')} />
       <ContentContainer>
         <Box flexGrow={1} sx={{ minWidth: '65%' }}>
           <ShippingDetailsForm

components/company-info/CompanyInfo.jsx

@@ -1,7 +1,9 @@
 import { Typography } from '@mui/material';
 import { Box } from '@mui/system';
+import { useTranslation } from 'next-i18next';
 import Image from 'next/image';
 const CompanyInfo = () => {
+  const { t } = useTranslation('home');
   return (
     <>
       <Box
@@ -34,7 +36,7 @@ const CompanyInfo = () => {
               color: 'white',
             }}
           >
-            We are waiting for you!
+            {t('home:infoTitle')}
           </Typography>
           <Box
             sx={{
@@ -54,7 +56,7 @@ const CompanyInfo = () => {
                 pl: 2,
               }}
             >
-              Nis, Zetska 36
+              {t('home:address')}
             </Typography>
           </Box>
           <Box
@@ -75,7 +77,7 @@ const CompanyInfo = () => {
                 mr: -4,
               }}
             >
-              Every day: 09 to 18
+              {t('home:open')}
             </Typography>
           </Box>
           <Box
@@ -96,7 +98,7 @@ const CompanyInfo = () => {
                 mr: -3,
               }}
             >
-              info@coffee.com
+              {t('home:mail')}
             </Typography>
           </Box>
         </Box>

components/empty-cart/EmptyCart.jsx

@@ -1,6 +1,8 @@
 import { Typography } from '@mui/material';
+import { useTranslation } from 'next-i18next';
 
 const EmptyCart = () => {
+  const { t } = useTranslation('cart');
   return (
     <Typography
       sx={{
@@ -12,7 +14,7 @@ const EmptyCart = () => {
         mb: { md: 5 },
       }}
     >
-      Your cart is currently empty
+      {t('cart:empty')}
     </Typography>
   );
 };

components/features/FeatureItem.jsx

@@ -1,7 +1,9 @@
 import { Container, Typography } from '@mui/material';
+import { useTranslation } from 'next-i18next';
 import Image from 'next/image';
 
 const FeatureItem = ({ image, alt, description }) => {
+  const { t } = useTranslation('home');
   return (
     <Container
       sx={{
@@ -18,7 +20,7 @@ const FeatureItem = ({ image, alt, description }) => {
           px: 6,
         }}
       >
-        {description}
+        {t(description)}
       </Typography>
     </Container>
   );

components/features/Features.jsx

@@ -1,10 +1,12 @@
 import { Container, Divider, Typography } from '@mui/material';
 import { Box } from '@mui/system';
+import { useTranslation } from 'next-i18next';
 import Image from 'next/image';
 import FeatureItem from './FeatureItem';
 import items from './items';
 
 const Features = () => {
+  const { t } = useTranslation('home');
   return (
     <>
       <Box
@@ -32,9 +34,10 @@ const Features = () => {
               color: 'primary.main',
               textAlign: 'center',
               mt: 5,
+              fontFamily: ['Indie Flower', 'cursive'].join(','),
             }}
           >
-            Natural coffee
+            {t('home:coffeeTitle')}
           </Typography>
         </Container>
         <Container

components/features/items.js

@@ -1,22 +1,19 @@
 const features = [
   {
     id: 1,
-    description:
-      'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here, content here, making it look like readable English.',
+    description: 'home:factory',
     alt: 'image description',
     image: '/images/factory.svg',
   },
   {
     id: 2,
-    description:
-      'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here, content here, making it look like readable English.',
+    description: 'home:machine',
     alt: 'image description',
     image: '/images/coffee-machine.svg',
   },
   {
     id: 3,
-    description:
-      'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here, content here, making it look like readable English.',
+    description: 'home:coffeeBeans',
     alt: 'image description',
     image: '/images/coffee-beans.svg',
   },

components/forms/contact/ContactPageForm.jsx

@@ -18,9 +18,8 @@ import { postQuestion } from '../../../requests/question/postQuestionRequest';
 import { contactPageSchema } from '../../../schemas/contactSchema';
 
 const ContactPageForm = () => {
-  const { t } = useTranslation('forms', 'contact', 'common');
+  const { t } = useTranslation('contact');
   const [open, setOpen] = useState(false);
-  //const [error] = useState({ hasError: false, errorMessage: '' });
 
   const handleSubmit = async (values) => {
     try {
@@ -61,7 +60,7 @@ const ContactPageForm = () => {
           severity="success"
           sx={{ width: '100%', backgroundColor: 'green', color: 'white' }}
         >
-          Question submitted!
+          {t('contact:notification')}
         </Alert>
       </Snackbar>
       <Box
@@ -72,7 +71,7 @@ const ContactPageForm = () => {
           alignItems: 'center',
         }}
       >
-        <Typography fontSize={48}>{t('contact:Title')}</Typography>
+        <Typography fontSize={48}>{t('contact:title')}</Typography>
         <Box
           component="form"
           onSubmit={formik.handleSubmit}
@@ -80,7 +79,7 @@ const ContactPageForm = () => {
         >
           <TextField
             name="firstName"
-            label={t('forms:FirstName')}
+            label={t('contact:firstName')}
             margin="normal"
             value={formik.values.firstName}
             onChange={formik.handleChange}
@@ -91,7 +90,7 @@ const ContactPageForm = () => {
           />
           <TextField
             name="lastName"
-            label={t('forms:LastName')}
+            label={t('contact:lastName')}
             margin="normal"
             value={formik.values.lastName}
             onChange={formik.handleChange}
@@ -102,7 +101,7 @@ const ContactPageForm = () => {
           />
           <TextField
             name="email"
-            label={t('forms:Email')}
+            label={t('contact:email')}
             margin="normal"
             value={formik.values.email}
             onChange={formik.handleChange}
@@ -113,7 +112,7 @@ const ContactPageForm = () => {
           />
           <TextField
             name="message"
-            label={t('forms:Message')}
+            label={t('contact:message')}
             multiline
             margin="normal"
             value={formik.values.message}
@@ -130,11 +129,11 @@ const ContactPageForm = () => {
             sx={{ mt: 3, mb: 2 }}
             fullWidth
           >
-            {t('contact:SendBtn')}
+            {t('contact:sendBtn')}
           </Button>
           <Grid container justifyContent="center">
             <Link href={BASE_PAGE}>
-              <Typography>{t('common:Back')}</Typography>
+              <Typography>{t('contact:back')}</Typography>
             </Link>
           </Grid>
         </Box>

components/forms/shipping-details/ShippingDetailsForm.jsx

@@ -1,5 +1,6 @@
 import { Box, Button, Card, TextField } from '@mui/material';
 import { useFormik } from 'formik';
+import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 import PropType from 'prop-types';
 import { useState } from 'react';
@@ -13,6 +14,7 @@ const ShippingDetailsForm = ({
   submitHandler,
   enableBtn = true,
 }) => {
+  const { t } = useTranslation('addressForm');
   const [error] = useState({ hasError: false, errorMessage: '' });
   const { userStorage } = useUserData();
   const router = useRouter();
@@ -53,7 +55,7 @@ const ShippingDetailsForm = ({
         >
           <TextField
             name="fullName"
-            label="Name"
+            label={t('addressForm:name')}
             margin="normal"
             value={formik.values.fullName}
             onChange={formik.handleChange}
@@ -63,7 +65,7 @@ const ShippingDetailsForm = ({
           />
           <TextField
             name="address"
-            label="Address"
+            label={t('addressForm:address')}
             margin="normal"
             value={formik.values.address}
             onChange={formik.handleChange}
@@ -73,7 +75,7 @@ const ShippingDetailsForm = ({
           />
           <TextField
             name="address2"
-            label="Address Line 2"
+            label={t('addressForm:address2')}
             margin="normal"
             value={formik.values.address2}
             onChange={formik.handleChange}
@@ -83,7 +85,7 @@ const ShippingDetailsForm = ({
           />
           <TextField
             name="city"
-            label="City"
+            label={t('addressForm:city')}
             margin="normal"
             value={formik.values.city}
             onChange={formik.handleChange}
@@ -94,7 +96,7 @@ const ShippingDetailsForm = ({
           <Box sx={{ display: 'flex' }}>
             <TextField
               name="country"
-              label="Country"
+              label={t('addressForm:country')}
               margin="normal"
               value={formik.values.country}
               onChange={formik.handleChange}
@@ -105,7 +107,7 @@ const ShippingDetailsForm = ({
             />
             <TextField
               name="postcode"
-              label="Postal Code"
+              label={t('addressForm:postcode')}
               margin="normal"
               value={formik.values.postcode}
               onChange={formik.handleChange}
@@ -132,7 +134,7 @@ const ShippingDetailsForm = ({
                 router.push('/cart');
               }}
             >
-              Back to cart
+              {t('addressForm:back')}
             </Button>
           )}
           <Button
@@ -152,7 +154,7 @@ const ShippingDetailsForm = ({
               submitHandler;
             }}
           >
-            {isCheckout ? 'Proceed to shipping' : 'Submit Details'}
+            {isCheckout ? t('addressForm:shipping') : t('addressForm:submit')}
           </Button>
         </Box>
       </Box>

components/hero/Hero.jsx

@@ -1,10 +1,12 @@
 import { Button, Typography } from '@mui/material';
 import { Box } from '@mui/system';
+import { useTranslation } from 'next-i18next';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { PRODUCTS_PAGE } from '../../constants/pages';
 
 const Hero = () => {
+  const { t } = useTranslation('home');
   const router = useRouter();
   return (
     <>
@@ -34,9 +36,10 @@ const Hero = () => {
                 fontSize: { xs: '96px', md: '64px', lg: '96px' },
                 ml: 10,
                 color: 'white',
+                fontFamily: ['Indie Flower', 'cursive'].join(','),
               }}
             >
-              Its a
+              {t('home:mainTitle1')}
             </Typography>
             <Typography
               variant="h1"
@@ -44,10 +47,10 @@ const Hero = () => {
                 fontSize: { xs: '96px', md: '64px', lg: '96px' },
                 ml: 10,
                 color: 'white',
+                fontFamily: ['Indie Flower', 'cursive'].join(','),
               }}
             >
-              {' '}
-              Coffee Break
+              {t('home:mainTitle2')}
             </Typography>
           </Box>
           <Typography
@@ -61,9 +64,7 @@ const Hero = () => {
               pr: '20%',
             }}
           >
-            If you drink coffee regulary you will know the difference between
-            fresh coffee and old coffee. Our goal is to provide the freshest
-            coffee beans in each day.
+            {t('home:description')}
           </Typography>
           <Box
             sx={{
@@ -89,7 +90,7 @@ const Hero = () => {
               }}
               onClick={() => router.push(PRODUCTS_PAGE)}
             >
-              Explore the Shop
+              {t('home:exploreBtn')}
             </Button>
             <Button
               disableRipple
@@ -107,7 +108,7 @@ const Hero = () => {
                 />
               }
             >
-              How to make
+              {t('home:howTo')}
             </Button>
           </Box>
         </Box>

components/layout/steps-title/StepTitle.jsx

@@ -7,7 +7,7 @@ const StepTitle = ({ title, breadcrumbsArray }) => {
     <>
       <Grid item xs={12}>
         <Typography
-          variant="h3"
+          variant="h4"
           sx={{
             ml: { xs: 2, md: 12 },
             mt: 12,

components/loader/route-loader/CircularIndeterminate.jsx

@@ -43,6 +43,7 @@ const CircularIndeterminate = () => {
             top: '48%',
             left: '48%',
             marginX: 'auto',
+            color: 'primary.dark',
           }}
         >
           <CircularProgress color="inherit" size={60} thickness={4} />

components/products/featured-product/ProductInfo.jsx

@@ -1,10 +1,12 @@
 import { Button, ButtonGroup, Typography } from '@mui/material';
 import { Box } from '@mui/system';
+import { useTranslation } from 'next-i18next';
 import Image from 'next/image';
 import PropType from 'prop-types';
 import { useState } from 'react';
 
 const ProductInfo = ({ data, bColor, addProductToCart, inCart }) => {
+  const { t } = useTranslation('home');
   const [quantity, setQuantity] = useState(1);
 
   const handleIncrement = () => {
@@ -142,7 +144,7 @@ const ProductInfo = ({ data, bColor, addProductToCart, inCart }) => {
           disabled={inCart}
           onClick={() => addProductToCart(quantity)}
         >
-          {inCart ? 'In Cart' : 'Add to cart'}
+          {inCart ? t('home:in') : t('home:add')}
         </Button>
       </Box>
     </Box>

components/profile-content/ProfileContent.jsx

@@ -1,6 +1,7 @@
 import { Alert, Snackbar, Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import { useSession } from 'next-auth/react';
+import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import { updateUser } from '../../requests/user/userUpdateRequest';
 import { useUserUpdate } from '../../store/user-context';
@@ -12,6 +13,7 @@ import PageWrapper from '../layout/page-wrapper/PageWrapper';
 import StepTitle from '../layout/steps-title/StepTitle';
 
 const ProfileContent = ({ orders }) => {
+  const { t } = useTranslation('profile');
   const { data: session } = useSession();
   const { updateUserInfo } = useUserUpdate();
   const [enableBtn, setEnableBtn] = useState(true);
@@ -52,7 +54,7 @@ const ProfileContent = ({ orders }) => {
 
   return (
     <PageWrapper>
-      <StepTitle title="Welcome to your user account" />
+      <StepTitle title={t('profile:title')} />
       <Snackbar
         anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
         open={open}
@@ -64,14 +66,14 @@ const ProfileContent = ({ orders }) => {
           severity="success"
           sx={{ width: '100%', backgroundColor: 'green', color: 'white' }}
         >
-          User profile updated!
+          {t('profile:notification')}
         </Alert>
       </Snackbar>
 
       <ContentContainer>
         <Box flexGrow={1} sx={{ minWidth: '65%' }}>
           <Typography sx={{ fontSize: 20, mb: 3 }}>
-            Save details for later
+            {t('profile:subtitle1')}
           </Typography>
           <ShippingDetailsForm
             submitHandler={updateUserHandler}
@@ -82,7 +84,7 @@ const ProfileContent = ({ orders }) => {
           <Typography
             sx={{ fontSize: 20, mb: { xs: -2, md: 3 }, ml: { md: 3 } }}
           >
-            Previous Orders
+            {t('profile:subtitle2')}
           </Typography>
           <CardContainer>{mapOrdersToDom()}</CardContainer>
         </Box>

components/review-content/ReviewContent.jsx

@@ -1,5 +1,6 @@
 import { Button, Typography } from '@mui/material';
 import { Box } from '@mui/system';
+import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 import { destroyCookie } from 'nookies';
 
@@ -16,6 +17,7 @@ import StepTitle from '../layout/steps-title/StepTitle';
 let initialRender = true;
 
 const ReviewContent = () => {
+  const { t } = useTranslation('review');
   const { checkoutStorage } = useCheckoutData();
   const { parseCheckoutValue, clearCheckout } = useCheckoutDataUpdate();
   const { clearCart } = useStoreUpdate();
@@ -61,7 +63,7 @@ const ReviewContent = () => {
               fontSize: 22,
             }}
           >
-            ORDER COMPLETE SUCCESSFULLY
+            {t('review:orderMsg')}
           </Typography>
         </Box>
         <Box sx={{ mt: 1 }}>
@@ -73,8 +75,7 @@ const ReviewContent = () => {
               textAlign: 'center',
             }}
           >
-            Thank you for placing your order with us. We wll get to work on
-            sending your order as soon as possible
+            {t('review:note')}
           </Typography>
         </Box>
         <Box sx={{ mt: 1 }}>
@@ -88,7 +89,7 @@ const ReviewContent = () => {
               fontWeight: 600,
             }}
           >
-            Order Summary
+            {t('review:title')}
           </Typography>
         </Box>
         <Box
@@ -102,7 +103,8 @@ const ReviewContent = () => {
           }}
         >
           <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
-            Order placed on: {orderData.time}
+            {t('review:date')}
+            {orderData.time}
           </Typography>
         </Box>
         <Box
@@ -116,7 +118,8 @@ const ReviewContent = () => {
           }}
         >
           <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
-            Email: {orderData?.shippingAddress?.email}
+            {t('review:email')}
+            {orderData?.shippingAddress?.email}
           </Typography>
         </Box>
         <Box
@@ -130,7 +133,8 @@ const ReviewContent = () => {
           }}
         >
           <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
-            Total: ${orderData?.totalPrice}
+            {t('review:total')}
+            {orderData?.totalPrice?.toFixed(2)}
           </Typography>
         </Box>
         <Box
@@ -144,7 +148,8 @@ const ReviewContent = () => {
           }}
         >
           <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
-            Shipping Address: {orderData?.shippingAddress?.address},{' '}
+            {t('review:shipping')}
+            {orderData?.shippingAddress?.address},{' '}
             {orderData?.shippingAddress?.city},{' '}
             {orderData?.shippingAddress?.country},{' '}
             {orderData?.shippingAddress?.postcode}
@@ -178,7 +183,7 @@ const ReviewContent = () => {
                 router.push('/');
               }}
             >
-              Back to Home
+              {t('review:back')}
             </Button>
           </Box>
         </Box>

components/shipping-content/ShippingContent.jsx

@@ -1,5 +1,6 @@
 import { Checkbox, FormControlLabel } from '@mui/material';
 import { Box } from '@mui/system';
+import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 import { setCookie } from 'nookies';
 import { useEffect, useState } from 'react';
@@ -19,6 +20,7 @@ import ShippingData from './shipping-data/ShippingData';
 import ShippingModal from './shipping-modal/ShippingModal';
 
 const ShippingContent = () => {
+  const { t } = useTranslation('shipping');
   const { checkoutStorage } = useCheckoutData();
   const { changeContact, changeShippingData } = useCheckoutDataUpdate();
   const [open, setOpen] = useState({ isOpen: false, type: '' });
@@ -75,13 +77,10 @@ const ShippingContent = () => {
   return (
     <PageWrapper>
       <StepTitle
-        title="Shipping"
+        title={t('shipping:title')}
         breadcrumbsArray={['Cart', 'Checkout', 'Shipping']}
       />
-      <PageDescription
-        description="The following fields will be used as the shipping details for your
-          order"
-      />
+      <PageDescription description={t('shipping:subtitle')} />
       <ContentContainer>
         <Box flexGrow={1} sx={{ minWidth: '65%' }}>
           <ShippingData
@@ -105,7 +104,7 @@ const ShippingContent = () => {
           >
             <FormControlLabel
               control={<Checkbox checked disabled />}
-              label="Free Shipping"
+              label={t('shipping:shippingCost')}
               sx={{ color: 'black', ml: 2 }}
             />
           </Box>

components/shipping-content/shipping-btnGroup/ButtonGroup.jsx

@@ -1,7 +1,9 @@
 import { Box, Button } from '@mui/material';
+import { useTranslation } from 'next-i18next';
 import PropType from 'prop-types';
 
 const ButtonGroup = ({ handleBackToCart, handleStripePayment }) => {
+  const { t } = useTranslation('shipping');
   return (
     <Box
       sx={{
@@ -24,7 +26,7 @@ const ButtonGroup = ({ handleBackToCart, handleStripePayment }) => {
         }}
         onClick={handleBackToCart}
       >
-        Back to cart
+        {t('shipping:back')}
       </Button>
       <Button
         type="submit"
@@ -40,7 +42,7 @@ const ButtonGroup = ({ handleBackToCart, handleStripePayment }) => {
         }}
         onClick={handleStripePayment}
       >
-        Continue to payment
+        {t('shipping:continue')}
       </Button>
     </Box>
   );

components/shipping-content/shipping-data/ShippingData.jsx

@@ -1,8 +1,11 @@
 import { Button, Typography } from '@mui/material';
 import { Box } from '@mui/system';
+import { useTranslation } from 'next-i18next';
 import PropType from 'prop-types';
 
 const ShippingData = ({ email, address, city, postcode, handleOpen }) => {
+  const { t } = useTranslation('shipping');
+
   return (
     <>
       <Box
@@ -16,7 +19,9 @@ const ShippingData = ({ email, address, city, postcode, handleOpen }) => {
           p: 1,
         }}
       >
-        <Typography sx={{ fontSize: 18, fontWeight: 600 }}>Contact</Typography>
+        <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
+          {t('shipping:contact')}
+        </Typography>
         <Typography>{email}</Typography>
         <Button
           sx={{
@@ -31,7 +36,7 @@ const ShippingData = ({ email, address, city, postcode, handleOpen }) => {
             handleOpen('Contact');
           }}
         >
-          Change
+          {t('shipping:changeBtn')}
         </Button>
       </Box>
       <Box
@@ -52,7 +57,7 @@ const ShippingData = ({ email, address, city, postcode, handleOpen }) => {
             mr: { xs: 1, sm: 0 },
           }}
         >
-          Shipping to
+          {t('shipping:shipping')}
         </Typography>
         <Typography>
           {address} | {city} | {postcode}
@@ -70,7 +75,7 @@ const ShippingData = ({ email, address, city, postcode, handleOpen }) => {
             handleOpen('Shipping');
           }}
         >
-          Change
+          {t('shipping:changeBtn')}
         </Button>
       </Box>
     </>

pages/cart/index.js

@@ -1,7 +1,16 @@
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import CartContent from '../../components/cart-content/CartContent';
 
 const CartPage = () => {
   return <CartContent></CartContent>;
 };
 
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ['cart'])),
+    },
+  };
+}
+
 export default CartPage;

pages/checkout/index.js

@@ -1,3 +1,4 @@
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import nookies from 'nookies';
 import CheckoutContent from '../../components/checkout-content/CheckoutContent';
 
@@ -18,7 +19,12 @@ export const getServerSideProps = async (ctx) => {
   }
 
   return {
-    props: {},
+    props: {
+      ...(await serverSideTranslations(ctx.locale, [
+        'checkout',
+        'addressForm',
+      ])),
+    },
   };
 };
 

pages/contact.js

@@ -8,7 +8,7 @@ const Contact = () => {
 export async function getStaticProps({ locale }) {
   return {
     props: {
-      ...(await serverSideTranslations(locale, ['forms', 'contact', 'common'])),
+      ...(await serverSideTranslations(locale, ['contact'])),
     },
   };
 }

pages/index.js

@@ -1,5 +1,6 @@
 import { Box } from '@mui/system';
 import { useSession } from 'next-auth/react';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import Head from 'next/head';
 import { useEffect } from 'react';
 import CompanyInfo from '../components/company-info/CompanyInfo';
@@ -16,10 +17,8 @@ const Home = (props) => {
 
   useEffect(() => {
     const userData = getStorage('user-data');
-    console.log(userData);
     if (session?.user && userData.length === 0) {
       addUser(session.user);
-      console.log('added');
     }
   }, [session, addUser]);
 
@@ -41,11 +40,12 @@ const Home = (props) => {
   );
 };
 
-export async function getStaticProps() {
+export async function getStaticProps({ locale }) {
   try {
     const { message, featuredProducts } = await getFeaturedProducts();
     return {
       props: {
+        ...(await serverSideTranslations(locale, ['home'])),
         message,
         featuredProducts,
       },
@@ -53,6 +53,7 @@ export async function getStaticProps() {
   } catch (error) {
     return {
       props: {
+        ...(await serverSideTranslations(locale, ['home'])),
         errorMessage: error,
         featuredProducts: [],
       },

pages/profile/index.js

@@ -1,4 +1,5 @@
 import { getSession } from 'next-auth/react';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import ProfileContent from '../../components/profile-content/ProfileContent';
 import { LOGIN_PAGE } from '../../constants/pages';
 import { getOrdersForOwner } from '../../requests/orders/getOrdersForOwnerRequest';
@@ -22,7 +23,13 @@ export async function getServerSideProps(context) {
   const orders = await getOrdersForOwner(session.user._id);
 
   return {
-    props: { orders },
+    props: {
+      ...(await serverSideTranslations(context.locale, [
+        'profile',
+        'addressForm',
+      ])),
+      orders,
+    },
   };
 }
 

pages/review/index.js

@@ -1,3 +1,4 @@
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import nookies from 'nookies';
 import ReviewContent from '../../components/review-content/ReviewContent';
 
@@ -18,7 +19,9 @@ export const getServerSideProps = async (ctx) => {
   }
 
   return {
-    props: {},
+    props: {
+      ...(await serverSideTranslations(ctx.locale, ['review'])),
+    },
   };
 };
 

pages/shipping/index.js

@@ -1,3 +1,4 @@
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import nookies from 'nookies';
 import ShippingContent from '../../components/shipping-content/ShippingContent';
 
@@ -18,7 +19,12 @@ export const getServerSideProps = async (ctx) => {
   }
 
   return {
-    props: {},
+    props: {
+      ...(await serverSideTranslations(ctx.locale, [
+        'shipping',
+        'addressForm',
+      ])),
+    },
   };
 };
 export default ShippingPage;

public/locales/en/contact.json

@@ -5,5 +5,6 @@
   "firstName": "First name",
   "lastName": "Last name",
   "email": "Email",
-  "msg": "Message"
+  "msg": "Message",
+  "notification": "Question submitted!"
 }

public/locales/en/home.json

@@ -1,5 +1,6 @@
 {
-  "mainTitle": "It's a Coffee Break",
+  "mainTitle1": "It's a",
+  "mainTitle2": "Coffee Break",
   "description": "If you drink coffee regulary you will know the difference between fresh coffee and old coffee. Our goal is to provide the freshest coffee beans in each day.",
   "exploreBtn": "Explore the Shop",
   "howTo": "How to make",

public/locales/en/profile.json

@@ -1,8 +1,9 @@
 {
   "title": "Welcome to your user account",
-  "subtitle1": "save details for later",
+  "subtitle1": "Save details for later",
   "subtitle2": "Previous orders",
   "orderDate": "Order placed on: ",
   "by": "By: ",
-  "total": "Total: "
+  "total": "Total: $",
+  "notification": "User profile updated"
 }

styles/muiTheme.js

@@ -3,7 +3,7 @@ import { createTheme } from '@mui/material/styles';
 const theme = createTheme({
   typography: {
     h1: {
-      fontFamily: ['Indie Flower', 'cursive'].join(','),
+      fontFamily: ['Roboto', 'sans-serif'].join(','),
       textTransform: '',
       fontSize: '82px',
     },
@@ -13,6 +13,10 @@ const theme = createTheme({
     h2: {
       fontFamily: ['Indie Flower', 'cursive'].join(','),
     },
+    h4: {
+      fontFamily: ['Roboto', 'sans-serif'].join(','),
+      fontSize: '42px',
+    },
   },
   body1: {
     fontFamily: ['Roboto', 'sans-serif'].join(','),