feat: add phone number to footer

Author: pooriaset

src/components/Footer/components/DesktopFooter.tsx

@@ -19,6 +19,8 @@ import { FC } from 'react';
 import BadgeImage from './BadgeImage';
 import Newsletter from './Newsletter';
 import SocialMedia from './SocialMedia';
+import { phoneNumber } from '@/config/app';
+import { getPhoneNumber } from '@/utils/number';
 
 export interface FooterProps {
   pages: IPageListItem[];
@@ -66,8 +68,34 @@ const Footer: FC<FooterProps> = ({ pages }) => {
     >
       <Container maxWidth="xl">
         <Stack spacing={4}>
-          <Stack direction="row" justifyContent="space-between">
-            <Logo />
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            alignItems="flex-start"
+          >
+            <Stack spacing={2}>
+              <Logo />
+              <Stack spacing={2} direction="row" alignItems="center">
+                <Typography
+                  variant="body2"
+                  component={Link}
+                  href={`tel:${getPhoneNumber(phoneNumber)}`}
+                  color="text.primary"
+                >
+                  {t.rich('footer.support.phoneNumber', {
+                    span: () => (
+                      <Box component="span" letterSpacing={1.5} dir="ltr">
+                        {phoneNumber}
+                      </Box>
+                    ),
+                  })}
+                </Typography>
+                <span>|</span>
+                <Typography variant="body2" color="text.primary">
+                  {t('footer.support.customerServiceHours:')}
+                </Typography>
+              </Stack>
+            </Stack>
             <Button
               onClick={backToTop}
               variant="outlined"
@@ -89,7 +117,7 @@ const Footer: FC<FooterProps> = ({ pages }) => {
             </Stack>
 
             <Stack spacing={1}>
-              <Typography variant="h6">لینک های مفید</Typography>
+              <Typography variant="h6">{t('footer.links.title')}</Typography>
               <Stack spacing={1}>
                 {pages.map((page) => {
                   return (

src/components/Footer/components/SocialMedia.tsx

@@ -1,5 +1,4 @@
-import FilledBale from '@/components/Icons/components/Use/FilledBale';
-import { Email, Instagram, Phone, Telegram } from '@mui/icons-material';
+import { Instagram, Telegram } from '@mui/icons-material';
 import { Stack, Tooltip, Typography } from '@mui/material';
 import { useTranslations } from 'next-intl';
 import SocialMediaButton from './SocialMediaButton';
@@ -9,31 +8,13 @@ const socialMediaButtons = [
     id: 'instagram',
     title: 'Instagram',
     icon: <Instagram />,
-    link: '#',
+    link: 'https://instagram.com',
   },
   {
     id: 'telegram',
     title: 'Telegram',
     icon: <Telegram />,
-    link: '#',
-  },
-  {
-    id: 'bale',
-    title: 'Bale',
-    icon: <FilledBale />,
-    link: '#',
-  },
-  {
-    id: 'phone',
-    title: 'Phone',
-    icon: <Phone />,
-    link: '#',
-  },
-  {
-    id: 'email',
-    title: 'Email',
-    icon: <Email />,
-    link: '#',
+    link: 'https://telegram.me/',
   },
 ];
 
@@ -42,7 +23,7 @@ const SocialMedia = () => {
 
   return (
     <Stack spacing={1}>
-      <Typography variant="h6">{t('footer.links.contactUs')}</Typography>
+      <Typography variant="h6">{t('footer.socialMedia.stayTuned')}</Typography>
       <Stack direction="row" spacing={1}>
         {socialMediaButtons.map((button) => {
           return (

src/config/app.ts

@@ -1,2 +1,3 @@
 export const protectedRoutes = ['/profile', '/checkout'];
 export const PUBLIC_GATEWAY_URL = '/backend';
+export const phoneNumber = '021 - 66112233';

src/data/i18n/en.json

@@ -76,7 +76,15 @@
     "submit": "Submit"
   },
   "footer": {
+    "support": {
+      "phoneNumber": "PhoneNumber <span></span>",
+      "customerServiceHours:": "Customer Service Hours:"
+    },
+    "socialMedia": {
+      "stayTuned": "Stay Tuned!"
+    },
     "links": {
+      "title": "Useful Links",
       "aboutUs": "About Us",
       "contactUs": "Contact Us"
     },

src/data/i18n/fa.json

@@ -72,7 +72,15 @@
     "submit": "ثبت"
   },
   "footer": {
+    "support": {
+      "phoneNumber": "تلفن پشتیبانی <span></span>",
+      "customerServiceHours:": "شنبه تا پنجشنبه ساعت 9 تا 18"
+    },
+    "socialMedia": {
+      "stayTuned": "با ما همراه باشید!"
+    },
     "links": {
+      "title": "لینک‌های مفید",
       "aboutUs": "درباره ما",
       "contactUs": "تماس با ما"
     },

src/utils/number.ts

@@ -0,0 +1,3 @@
+export const getPhoneNumber = (phoneNumber: string): string => {
+  return phoneNumber.replace(/\D/g, '');
+};