From 8537e31dfa2612b139c6ad8892ce59b10b6fea20 Mon Sep 17 00:00:00 2001
From: lubega-deriv <142860499+lubega-deriv@users.noreply.github.com>
Date: Mon, 26 Aug 2024 15:34:16 +0800
Subject: [PATCH] [WALL] Lubega / WALL-3521 / Cashier menu and header
 translations fix (#16429)

* fix: cashier menu and header translations

* fix: add preferred language and current language

* fix: added deriv go to dependency

* fix: added preferred language to dependency

* fix: retrigger vercel
---
 .../src/containers/cashier/cashier.tsx        | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/cashier/src/containers/cashier/cashier.tsx b/packages/cashier/src/containers/cashier/cashier.tsx
index 9112281220e9..bc58b1adb8f8 100644
--- a/packages/cashier/src/containers/cashier/cashier.tsx
+++ b/packages/cashier/src/containers/cashier/cashier.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { withRouter } from 'react-router-dom';
-import { Button, Div100vhContainer, FadeWrapper, PageOverlay, VerticalTab, Loading } from '@deriv/components';
+import { Div100vhContainer, FadeWrapper, PageOverlay, VerticalTab, Loading } from '@deriv/components';
 import {
     useAuthorize,
     useOnrampVisible,
@@ -61,9 +61,10 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
         isLoading: is_payment_agent_transfer_checking,
         isSuccess: is_payment_agent_transfer_visible_is_success,
     } = usePaymentAgentTransferVisible();
-    const { is_from_derivgo } = common;
-    const { is_cashier_visible: is_visible, toggleCashier, toggleReadyToDepositModal } = ui;
-    const { currency, is_account_setting_loaded, is_logged_in, is_logging_in, is_svg, is_virtual } = client;
+    const { current_language, is_from_derivgo } = common;
+    const { is_cashier_visible: is_visible, is_mobile, toggleCashier, toggleReadyToDepositModal } = ui;
+    const { account_settings, currency, is_account_setting_loaded, is_logged_in, is_logging_in, is_svg, is_virtual } =
+        client;
     const {
         data: paymentAgentList,
         isLoading: is_payment_agent_list_loading,
@@ -105,6 +106,7 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
         });
 
         return options;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         is_account_transfer_visible,
         is_onramp_visible,
@@ -112,6 +114,8 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
         is_payment_agent_transfer_visible,
         is_payment_agent_visible,
         p2p_notification_count,
+        account_settings.preferred_language,
+        current_language,
         routes_config,
     ]);
 
@@ -122,11 +126,11 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
 
     const is_default_route = !!selected_route.default;
 
-    const getHeaderTitle = useMemo(() => {
-        if (isDesktop || (is_default_route && (is_loading || is_cashier_onboarding))) return localize('Cashier');
+    const getHeaderTitle = () => {
+        if (!is_mobile || (is_default_route && (is_loading || is_cashier_onboarding))) return localize('Cashier');
 
         return selected_route.getTitle?.();
-    }, [is_cashier_onboarding, is_default_route, is_loading, selected_route, isDesktop]);
+    };
 
     const updateActiveTab = useCallback(
         (path?: string) => {
@@ -260,7 +264,7 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
         <FadeWrapper is_visible={is_visible} className='cashier__page-wrapper' keyname='cashier__page-wrapper'>
             <ErrorDialog error={error} />
             <div className='cashier'>
-                <PageOverlay header={getHeaderTitle} onClickClose={onClickClose} is_from_app={is_from_derivgo}>
+                <PageOverlay header={getHeaderTitle()} onClickClose={onClickClose} is_from_app={is_from_derivgo}>
                     {isDesktop ? (
                         <VerticalTab
                             current_path={location.pathname}