From 607b19eefc17f7fb3892494cfe16ab6e51df43a9 Mon Sep 17 00:00:00 2001
From: shontzu <108507236+shontzu-deriv@users.noreply.github.com>
Date: Wed, 26 Feb 2025 12:45:24 +0800
Subject: [PATCH] [CFDS] shontzu/TRAH-4372/cfds-unavailable-tag-content-update
 (#17968)

* chore: new PR becasue old one stale

* chore: empty commit

* chore: update tests

* chore: typo

* style: changed button variant from medium to large

* style: padding issue with modal component
---
 .../Configs/get-mt5-status-badge-config.tsx    |  2 +-
 .../src/Configs/get-status-badge-config.tsx    | 18 +++++++++++++++---
 .../components/cfds-listing/cfds-listing.scss  |  3 +++
 .../account-transfer-form.tsx                  |  6 ++----
 .../cfd-server-maintenance-modal.tsx           |  4 ++--
 .../mt5-account-unavailable-modal.tsx          |  6 +++---
 .../src/utils/constants/auth-status-codes.ts   |  2 ++
 .../utils/tradingPlatformStatusMessageFn.tsx   |  2 +-
 .../PlatformStatusBadge.tsx                    |  2 +-
 .../TradingPlatformStatus.tsx                  |  6 ++----
 .../__tests__/TradingPlatformStatus.spec.tsx   |  6 ++----
 11 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/packages/account/src/Configs/get-mt5-status-badge-config.tsx b/packages/account/src/Configs/get-mt5-status-badge-config.tsx
index 78f4a90fac79..4bbf91813611 100644
--- a/packages/account/src/Configs/get-mt5-status-badge-config.tsx
+++ b/packages/account/src/Configs/get-mt5-status-badge-config.tsx
@@ -43,7 +43,7 @@ const getMT5StatusBadgeConfig = (mt5_account_status: TMT5AccountStatus) => {
             };
         case TRADING_PLATFORM_STATUS.UNAVAILABLE:
             return {
-                text: <Localize i18n_default_text='<0>Unavailable</0>' components={[BadgeTextComponent]} />,
+                text: <Localize i18n_default_text='<0>Temporarily unavailable</0>' components={[BadgeTextComponent]} />,
                 icon: 'IcAlertWarning',
             };
         default:
diff --git a/packages/account/src/Configs/get-status-badge-config.tsx b/packages/account/src/Configs/get-status-badge-config.tsx
index cce0f1fcb352..5c833b1c6b9d 100644
--- a/packages/account/src/Configs/get-status-badge-config.tsx
+++ b/packages/account/src/Configs/get-status-badge-config.tsx
@@ -1,8 +1,11 @@
 import React from 'react';
-import { ACCOUNT_BADGE_STATUS, TAccountBadgeStatus } from '@deriv/shared';
+import { Text } from '@deriv/components';
+import { ACCOUNT_BADGE_STATUS, MT5_ACCOUNT_STATUS, TAccountBadgeStatus, TRADING_PLATFORM_STATUS } from '@deriv/shared';
 import { Localize } from '@deriv-com/translations';
 
 const getStatusBadgeConfig = (account_status: TAccountBadgeStatus) => {
+    const BadgeTextComponent = <Text key={0} weight='bold' size='xxxs' color='warning' />;
+
     switch (account_status) {
         case ACCOUNT_BADGE_STATUS.PENDING:
             return {
@@ -15,13 +18,22 @@ const getStatusBadgeConfig = (account_status: TAccountBadgeStatus) => {
                 icon: 'IcMt5Failed',
                 icon_size: '18',
             };
-        case ACCOUNT_BADGE_STATUS.NEEDS_VERIFICATION: {
+        case ACCOUNT_BADGE_STATUS.NEEDS_VERIFICATION:
             return {
                 text: <Localize i18n_default_text='Needs Verification' />,
                 icon: 'IcMt5Verification',
                 icon_size: '18',
             };
-        }
+        case MT5_ACCOUNT_STATUS.UNDER_MAINTENANCE:
+            return {
+                text: <Localize i18n_default_text='<0>Server maintenance</0>' components={[BadgeTextComponent]} />,
+                icon: 'IcAlertWarning',
+            };
+        case TRADING_PLATFORM_STATUS.UNAVAILABLE:
+            return {
+                text: <Localize i18n_default_text='<0>Temporarily unavailable</0>' components={[BadgeTextComponent]} />,
+                icon: 'IcAlertWarning',
+            };
         default:
             return {
                 text: '',
diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss
index 1db53c07acbb..af915a186304 100644
--- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss
+++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss
@@ -1773,6 +1773,9 @@
         flex-direction: column;
         justify-content: flex-start;
         align-items: flex-start;
+        @include mobile-or-tablet-screen {
+            padding: 0.8rem 1.6rem;
+        }
     }
     .dc-input {
         &__label {
diff --git a/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx b/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx
index cd11bfbd12be..826396b2646d 100644
--- a/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx
+++ b/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx
@@ -80,7 +80,7 @@ const AccountOption = ({
                 <StatusBadge
                     account_status={TRADING_PLATFORM_STATUS.UNAVAILABLE}
                     icon='IcAlertWarning'
-                    text='Unavailable'
+                    text='Temporarily unavailable'
                 />
             );
         }
@@ -410,9 +410,7 @@ const AccountTransferForm = observer(
             if (is_migration_status_present) {
                 hint_text = <Localize i18n_default_text='You can no longer open new positions with this account.' />;
             } else if (is_unavailable_status_present) {
-                hint_text = (
-                    <Localize i18n_default_text='The server is temporarily unavailable for this account. We’re working to resolve this.' />
-                );
+                hint_text = <Localize i18n_default_text='Check back in a few minutes by refreshing the page.' />;
             } else if (is_maintenance_status_present) {
                 hint_text = (
                     <Localize
diff --git a/packages/cfd/src/Containers/cfd-server-maintenance-modal.tsx b/packages/cfd/src/Containers/cfd-server-maintenance-modal.tsx
index d9eb7fd61f1f..c15a06502709 100644
--- a/packages/cfd/src/Containers/cfd-server-maintenance-modal.tsx
+++ b/packages/cfd/src/Containers/cfd-server-maintenance-modal.tsx
@@ -19,14 +19,14 @@ const CFDServerMaintenanceModal = observer(() => {
             has_close_icon
             width={isDesktop() ? '440px' : '328px'}
         >
-            <Modal.Body>
+            <Modal.Body className='dc-modal__container_cfd-password-modal__body'>
                 <Localize
                     i18n_default_text='We’re currently performing server maintenance. Service may be affected.'
                     components={[<strong key={0} />]}
                 />
             </Modal.Body>
             <Modal.Footer>
-                <Button onClick={() => setServerMaintenanceModal(false)} secondary medium>
+                <Button onClick={() => setServerMaintenanceModal(false)} secondary large>
                     <Localize i18n_default_text='OK' />
                 </Button>
             </Modal.Footer>
diff --git a/packages/cfd/src/Containers/mt5-account-unavailable-modal.tsx b/packages/cfd/src/Containers/mt5-account-unavailable-modal.tsx
index 44e66d64dcd9..bd6260a0ebed 100644
--- a/packages/cfd/src/Containers/mt5-account-unavailable-modal.tsx
+++ b/packages/cfd/src/Containers/mt5-account-unavailable-modal.tsx
@@ -15,13 +15,13 @@ const MT5AccountUnavailableModal = observer(() => {
         <Modal
             className='cfd-password-modal'
             is_open={is_account_unavailable_modal_visible}
-            title={localize('Account unavailable')}
+            title={localize('Account temporarily unavailable')}
             toggleModal={() => setAccountUnavailableModal(false)}
             has_close_icon
             width={isDesktop ? '440px' : '328px'}
         >
-            <Modal.Body>
-                <Localize i18n_default_text='The server is temporarily unavailable for this account. We’re working to resolve this.' />
+            <Modal.Body className='dc-modal__container_cfd-password-modal__body'>
+                <Localize i18n_default_text='Check back in a few minutes by refreshing the page.' />
             </Modal.Body>
             <Modal.Footer>
                 <Button type='button' onClick={() => setAccountUnavailableModal(false)} secondary medium>
diff --git a/packages/shared/src/utils/constants/auth-status-codes.ts b/packages/shared/src/utils/constants/auth-status-codes.ts
index 29f456ae08a3..0ed65fb73147 100644
--- a/packages/shared/src/utils/constants/auth-status-codes.ts
+++ b/packages/shared/src/utils/constants/auth-status-codes.ts
@@ -11,4 +11,6 @@ export const ACCOUNT_BADGE_STATUS = {
     FAILED: 'failed',
     NEEDS_VERIFICATION: 'needs_verification',
     PENDING: 'pending',
+    UNDER_MAINTENANCE: 'under_maintenance',
+    UNAVAILABLE: 'unavailable',
 } as const;
diff --git a/packages/wallets/src/features/cashier/modules/Transfer/hooks/useTransferMessages/utils/tradingPlatformStatusMessageFn.tsx b/packages/wallets/src/features/cashier/modules/Transfer/hooks/useTransferMessages/utils/tradingPlatformStatusMessageFn.tsx
index e7e617585119..74d9403a79a5 100644
--- a/packages/wallets/src/features/cashier/modules/Transfer/hooks/useTransferMessages/utils/tradingPlatformStatusMessageFn.tsx
+++ b/packages/wallets/src/features/cashier/modules/Transfer/hooks/useTransferMessages/utils/tradingPlatformStatusMessageFn.tsx
@@ -9,7 +9,7 @@ const tradingPlatformStatusMessageFn = ({ platformStatus }: TMessageFnProps) =>
     const message = isMaintenance ? (
         <Localize i18n_default_text='We’re currently performing server maintenance. Service may be affected.' />
     ) : (
-        <Localize i18n_default_text='The server is temporarily unavailable for this account. We’re working to resolve this.' />
+        <Localize i18n_default_text='Check back in a few minutes by refreshing the page.' />
     );
 
     return {
diff --git a/packages/wallets/src/features/cfd/components/PlatformStatusBadge/PlatformStatusBadge.tsx b/packages/wallets/src/features/cfd/components/PlatformStatusBadge/PlatformStatusBadge.tsx
index 315d805a7f51..71e0d5c30b7f 100644
--- a/packages/wallets/src/features/cfd/components/PlatformStatusBadge/PlatformStatusBadge.tsx
+++ b/packages/wallets/src/features/cfd/components/PlatformStatusBadge/PlatformStatusBadge.tsx
@@ -17,7 +17,7 @@ const getBadgeText = (status: TProps['status'], localize: (key: string) => strin
             return localize('Server maintenance');
         case TRADING_PLATFORM_STATUS.UNAVAILABLE:
         case MT5_ACCOUNT_STATUS.UNAVAILABLE:
-            return localize('Unavailable');
+            return localize('Temporarily unavailable');
         default:
             return '';
     }
diff --git a/packages/wallets/src/features/cfd/screens/TradingPlatformStatus/TradingPlatformStatus.tsx b/packages/wallets/src/features/cfd/screens/TradingPlatformStatus/TradingPlatformStatus.tsx
index c6cd006fcebc..2bc0a965fb56 100644
--- a/packages/wallets/src/features/cfd/screens/TradingPlatformStatus/TradingPlatformStatus.tsx
+++ b/packages/wallets/src/features/cfd/screens/TradingPlatformStatus/TradingPlatformStatus.tsx
@@ -15,15 +15,14 @@ const getContentConfig = (localize: ReturnType<typeof useTranslations>['localize
         title: localize('Server Maintenance'),
     };
     const unavailableConfig = {
-        content: localize('The server is temporarily unavailable for this account. We’re working to resolve this.'),
-        title: localize('Account Unavailable'),
+        content: localize('Check back in a few minutes by refreshing the page.'),
+        title: localize('Account temporarily unavailable'),
     };
 
     return {
         [MT5_ACCOUNT_STATUS.UNDER_MAINTENANCE]: maintenanceConfig,
         [TRADING_PLATFORM_STATUS.MAINTENANCE]: maintenanceConfig,
         [MT5_ACCOUNT_STATUS.UNAVAILABLE]: unavailableConfig,
-        [TRADING_PLATFORM_STATUS.UNAVAILABLE]: unavailableConfig,
     };
 };
 
@@ -31,7 +30,6 @@ const TradingPlatformStatus: React.FC<TradingPlatformStatusModalProps> = ({ stat
     const { hide } = useModal();
     const { isDesktop } = useDevice();
     const { localize } = useTranslations();
-
     const { content, title } = getContentConfig(localize)[status];
 
     return (
diff --git a/packages/wallets/src/features/cfd/screens/TradingPlatformStatus/__tests__/TradingPlatformStatus.spec.tsx b/packages/wallets/src/features/cfd/screens/TradingPlatformStatus/__tests__/TradingPlatformStatus.spec.tsx
index f19d17b9745c..0dde82740b1d 100644
--- a/packages/wallets/src/features/cfd/screens/TradingPlatformStatus/__tests__/TradingPlatformStatus.spec.tsx
+++ b/packages/wallets/src/features/cfd/screens/TradingPlatformStatus/__tests__/TradingPlatformStatus.spec.tsx
@@ -55,10 +55,8 @@ describe('TradingPlatformStatus', () => {
             </APIProvider>
         );
 
-        expect(screen.getByText('Account Unavailable')).toBeInTheDocument();
-        expect(
-            screen.getByText('The server is temporarily unavailable for this account. We’re working to resolve this.')
-        ).toBeInTheDocument();
+        expect(screen.getByText('Account temporarily unavailable')).toBeInTheDocument();
+        expect(screen.getByText('Check back in a few minutes by refreshing the page.')).toBeInTheDocument();
         expect(screen.getByRole('button', { name: 'OK' })).toBeInTheDocument();
     });