Merge branch 'master' of github.com:deriv-com/p2p into shayan/feq-222…

…6/implement-header-component

src/components/AdvertsTableRow/AdvertsTableRow.tsx

@@ -1,7 +1,7 @@
 import { Fragment, memo, useEffect, useRef } from 'react';
 import clsx from 'clsx';
 import { useHistory, useLocation } from 'react-router-dom';
-import { TAdvertsTableRowRenderer, TCurrency, TExchangeRate } from 'types';
+import { TAdvertsTableRowRenderer, TCurrency } from 'types';
 import { Badge, BuySellForm, PaymentMethodLabel, StarRating, UserAvatar } from '@/components';
 import { NicknameModal } from '@/components/Modals';
 import { ADVERTISER_URL, BUY_SELL } from '@/constants';
@@ -18,7 +18,7 @@ const BASE_CURRENCY = 'USD';
 
 const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
     const { hideModal, isModalOpenFor, showModal } = useModalManager();
-    const { subscribeRates } = useExchangeRates();
+    const { data: exchangeRateData, subscribeRates } = useExchangeRates();
     const { isDesktop, isMobile } = useDevice();
     const history = useHistory();
     const location = useLocation();
@@ -29,7 +29,7 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
     const { data: poiPoaData } = usePoiPoaStatus();
     const { isPoaVerified, isPoiVerified } = poiPoaData || {};
 
-    const exchangeRateRef = useRef<TExchangeRate | null>(null);
+    const exchangeRateRef = useRef<number | undefined>(undefined);
 
     const {
         account_currency,
@@ -48,20 +48,27 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
 
     useEffect(() => {
         if (local_currency) {
-            exchangeRateRef.current = subscribeRates({
+            subscribeRates({
                 base_currency: BASE_CURRENCY,
                 target_currencies: [local_currency],
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [local_currency]);
 
+    useEffect(() => {
+        if (exchangeRateData?.exchange_rates?.rates) {
+            exchangeRateRef.current = exchangeRateData?.exchange_rates?.rates?.[local_currency];
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [exchangeRateData]);
+
     const Container = isMobile ? 'div' : Fragment;
 
     const { completed_orders_count, id, is_online, name, rating_average, rating_count } = advertiser_details || {};
 
     const { displayEffectiveRate } = generateEffectiveRate({
-        exchangeRate: exchangeRateRef.current?.rates?.[local_currency],
+        exchangeRate: exchangeRateRef.current,
         localCurrency: local_currency as TCurrency,
         marketRate: Number(effective_rate),
         price: Number(price_display),

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;

src/components/AppFooter/NetworkStatus.tsx

@@ -0,0 +1,17 @@
+import { useTranslations } from '@deriv-com/translations';
+import { TooltipMenuIcon } from '@deriv-com/ui';
+
+export const NetworkStatus = () => {
+    const { localize } = useTranslations();
+
+    return (
+        <TooltipMenuIcon
+            as='div'
+            className='app-footer__icon'
+            disableHover
+            tooltipContent={localize('Network status: Online')}
+        >
+            <div className='app-footer__network-status' />
+        </TooltipMenuIcon>
+    );
+};