[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

Author: shontzu-deriv

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:

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: '',

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 {

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

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>

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>

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;

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 {

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 '';
     }

packages/wallets/src/features/cfd/screens/TradingPlatformStatus/TradingPlatformStatus.tsx

@@ -15,23 +15,21 @@ 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,
     };
 };
 
 const TradingPlatformStatus: React.FC<TradingPlatformStatusModalProps> = ({ status }) => {
     const { hide } = useModal();
     const { isDesktop } = useDevice();
     const { localize } = useTranslations();
-
     const { content, title } = getContentConfig(localize)[status];
 
     return (