Niloofar/ Footer component (#76)

* feat: footer base components

* fix: review comments

* feat: endpoint component

* fix: styles

package.json

@@ -17,7 +17,7 @@
         "@babel/preset-env": "^7.24.5",
         "@deriv-com/api-hooks": "^0.1.19",
         "@deriv-com/translations": "^1.2.3",
-        "@deriv-com/ui": "^1.21.1",
+        "@deriv-com/ui": "^1.26.0",
         "@deriv-com/utils": "latest",
         "@deriv/deriv-api": "^1.0.15",
         "@deriv/quill-design": "^1.2.24",

src/components/AppFooter/AccountLimits.tsx

@@ -0,0 +1,20 @@
+import { LegacyAccountLimitsIcon } from '@deriv/quill-icons';
+import { useTranslations } from '@deriv-com/translations';
+import { TooltipMenuIcon } from '@deriv-com/ui';
+
+const AccountLimits = () => {
+    const { localize } = useTranslations();
+
+    return (
+        <TooltipMenuIcon
+            as='a'
+            className='app-footer__icon'
+            href='https://app.deriv.com/account/account-limits'
+            tooltipContent={localize('Account limits')}
+        >
+            <LegacyAccountLimitsIcon iconSize='xs' />
+        </TooltipMenuIcon>
+    );
+};
+
+export default AccountLimits;

src/components/AppFooter/AppFooter.scss

@@ -1,13 +1,47 @@
 .app-footer {
-    padding: 2.4rem;
+    height: 3.2rem;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    border-top: 1px solid #f2f3f4;
+    box-shadow: 0px 1px 0px 0px #f2f3f4 inset;
+    background: #fff;
 
-    &__language-btn {
-        &:hover {
-            background-color: transparent !important;
+    &__icon {
+        padding: 0.8rem;
+    }
+
+    &__vertical-line {
+        width: 0.1rem;
+        height: 1.6rem;
+        background-color: #f2f3f4;
+        margin: 0 0.8rem;
+    }
+
+    &__language {
+        display: flex;
+        align-items: center;
+        padding: 0.8rem;
 
-            span {
-                color: #000 !important;
-            }
+        & span {
+            margin-left: 0.4rem;
         }
     }
+
+    &__network-status {
+        width: 0.8rem;
+        height: 0.8rem;
+        border-radius: 100%;
+        background-color: #4bb4b3;
+        margin-left: 2rem;
+    }
+
+    &__endpoint {
+        color: #377cfc;
+        text-decoration: underline;
+    }
 }

src/components/AppFooter/AppFooter.tsx

@@ -1,31 +1,56 @@
-import { LanguagesModal } from '@/components/Modals';
 import { LANGUAGES } from '@/constants';
-import { useModalManager } from '@/hooks/custom-hooks';
-import { IconTypes } from '@deriv/quill-icons';
+import { useModalManager } from '@/hooks';
 import { useTranslations } from '@deriv-com/translations';
-import { Button, Footer } from '@deriv-com/ui';
+import { DesktopLanguagesModal } from '@deriv-com/ui';
+import AccountLimits from './AccountLimits';
+import ChangeTheme from './ChangeTheme';
+import Deriv from './Deriv';
+import Endpoint from './Endpoint';
+import FullScreen from './FullScreen';
+import HelpCentre from './HelpCentre';
+import LanguageSettings from './LanguageSettings';
+import Livechat from './Livechat';
+import { NetworkStatus } from './NetworkStatus';
+import ResponsibleTrading from './ResponsibleTrading';
+import { ServerTime } from './ServerTime';
+import WhatsApp from './WhatsApp';
 import './AppFooter.scss';
 
-// TODO: handle local storage values not updating after changing local storage values
 const AppFooter = () => {
-    const { currentLang } = useTranslations();
+    const { currentLang, localize, switchLanguage } = useTranslations();
     const { hideModal, isModalOpenFor, showModal } = useModalManager();
-    const CountryIcon = LANGUAGES.find(lang => lang.code === currentLang)?.icon as IconTypes;
+
+    const openLanguageSettingModal = () => showModal('DesktopLanguagesModal');
 
     return (
-        <Footer className='app-footer'>
-            <Button
-                className='app-footer__language-btn'
-                color='black'
-                icon={<CountryIcon iconSize='sm' />}
-                onClick={() => showModal('LanguagesModal')}
-                size='sm'
-                variant='ghost'
-            >
-                {currentLang}
-            </Button>
-            {isModalOpenFor('LanguagesModal') && <LanguagesModal isModalOpen onClose={hideModal} />}
-        </Footer>
+        <footer className='app-footer'>
+            <FullScreen />
+            <LanguageSettings openLanguageSettingModal={openLanguageSettingModal} />
+            <HelpCentre />
+            <div className='app-footer__vertical-line' />
+            <ChangeTheme />
+            <AccountLimits />
+            <ResponsibleTrading />
+            <Deriv />
+            <Livechat />
+            <WhatsApp />
+            <div className='app-footer__vertical-line' />
+            <ServerTime />
+            <div className='app-footer__vertical-line' />
+            <NetworkStatus />
+            <Endpoint />
+
+            {isModalOpenFor('DesktopLanguagesModal') && (
+                <DesktopLanguagesModal
+                    headerTitle={localize('Select Language')}
+                    isModalOpen
+                    languages={LANGUAGES}
+                    onClose={hideModal}
+                    onLanguageSwitch={code => switchLanguage(code)}
+                    selectedLanguage={currentLang}
+                />
+            )}
+        </footer>
     );
 };
 

src/components/AppFooter/ChangeTheme.tsx

@@ -0,0 +1,15 @@
+import { LegacySettings1pxIcon } from '@deriv/quill-icons';
+import { useTranslations } from '@deriv-com/translations';
+import { TooltipMenuIcon } from '@deriv-com/ui';
+
+const ChangeTheme = () => {
+    const { localize } = useTranslations();
+
+    return (
+        <TooltipMenuIcon as='button' className='app-footer__icon' tooltipContent={localize('Change theme')}>
+            <LegacySettings1pxIcon iconSize='xs' />
+        </TooltipMenuIcon>
+    );
+};
+
+export default ChangeTheme;

src/components/AppFooter/Deriv.tsx

@@ -0,0 +1,21 @@
+import { LegacyDerivIcon } from '@deriv/quill-icons';
+import { useTranslations } from '@deriv-com/translations';
+import { TooltipMenuIcon } from '@deriv-com/ui';
+
+const Deriv = () => {
+    const { localize } = useTranslations();
+
+    return (
+        <TooltipMenuIcon
+            as='a'
+            className='app-footer__icon'
+            href='https://deriv.com/'
+            target='_blank'
+            tooltipContent={localize('Go to deriv.com')}
+        >
+            <LegacyDerivIcon iconSize='xs' />
+        </TooltipMenuIcon>
+    );
+};
+
+export default Deriv;

src/components/AppFooter/Endpoint.tsx

@@ -0,0 +1,21 @@
+import { Link } from 'react-router-dom';
+import { Text } from '@deriv-com/ui';
+
+const Endpoint = () => {
+    const serverURL = localStorage.getItem('config.server_url');
+
+    if (serverURL) {
+        return (
+            <Text color='red' size='sm'>
+                The server{' '}
+                <Link className='app-footer__endpoint' to='/endpoint'>
+                    endpoint
+                </Link>{' '}
+                {`is: ${serverURL}`}
+            </Text>
+        );
+    }
+    return null;
+};
+
+export default Endpoint;

src/components/AppFooter/FullScreen.tsx

@@ -0,0 +1,22 @@
+import { useFullScreen } from '@/hooks';
+import { LegacyFullscreen1pxIcon } from '@deriv/quill-icons';
+import { useTranslations } from '@deriv-com/translations';
+import { TooltipMenuIcon } from '@deriv-com/ui';
+
+const FullScreen = () => {
+    const { toggleFullScreenMode } = useFullScreen();
+    const { localize } = useTranslations();
+
+    return (
+        <TooltipMenuIcon
+            as='button'
+            className='app-footer__icon'
+            onClick={toggleFullScreenMode}
+            tooltipContent={localize('Full screen')}
+        >
+            <LegacyFullscreen1pxIcon iconSize='xs' />
+        </TooltipMenuIcon>
+    );
+};
+
+export default FullScreen;

src/components/AppFooter/HelpCentre.tsx

@@ -0,0 +1,21 @@
+import { LegacyHelpCentreIcon } from '@deriv/quill-icons';
+import { useTranslations } from '@deriv-com/translations';
+import { TooltipMenuIcon } from '@deriv-com/ui';
+
+const HelpCentre = () => {
+    const { localize } = useTranslations();
+
+    return (
+        <TooltipMenuIcon
+            as='a'
+            className='app-footer__icon'
+            href='https://deriv.com/help-centre/'
+            target='_blank'
+            tooltipContent={localize('Help centre')}
+        >
+            <LegacyHelpCentreIcon iconSize='xs' />
+        </TooltipMenuIcon>
+    );
+};
+
+export default HelpCentre;

src/components/AppFooter/LanguageSettings.tsx

@@ -0,0 +1,30 @@
+import { LANGUAGES } from '@/constants';
+import { useTranslations } from '@deriv-com/translations';
+import { Text, TooltipMenuIcon } from '@deriv-com/ui';
+import './AppFooter.scss';
+
+type TLanguageSettings = {
+    openLanguageSettingModal: () => void;
+};
+
+const LanguageSettings = ({ openLanguageSettingModal }: TLanguageSettings) => {
+    const { currentLang, localize } = useTranslations();
+
+    const countryIcon = LANGUAGES.find(({ code }) => code == currentLang)?.icon;
+
+    return (
+        <TooltipMenuIcon
+            as='button'
+            className='app-footer__language'
+            onClick={openLanguageSettingModal}
+            tooltipContent={localize('Language')}
+        >
+            {countryIcon}
+            <Text size='xs' weight='bold'>
+                {currentLang}
+            </Text>
+        </TooltipMenuIcon>
+    );
+};
+
+export default LanguageSettings;

src/components/AppFooter/Livechat.tsx

@@ -0,0 +1,15 @@
+import { LegacyLiveChatOutlineIcon } from '@deriv/quill-icons';
+import { useTranslations } from '@deriv-com/translations';
+import { TooltipMenuIcon } from '@deriv-com/ui';
+
+const Livechat = () => {
+    const { localize } = useTranslations();
+
+    return (
+        <TooltipMenuIcon as='button' className='app-footer__icon' tooltipContent={localize('Live chat')}>
+            <LegacyLiveChatOutlineIcon iconSize='xs' />
+        </TooltipMenuIcon>
+    );
+};
+
+export default Livechat;