From b44aefc70fe93b5f35510e4e92d1521b347c3ef1 Mon Sep 17 00:00:00 2001
From: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com>
Date: Fri, 23 Aug 2024 19:51:08 +0800
Subject: [PATCH] chore: side notes to payment agent list container on mobile
 (#16585)

---
 .../payment-agent-container.scss                       | 10 ++++++++++
 .../payment-agent-container.tsx                        |  7 +++++++
 .../cashier/src/pages/payment-agent/payment-agent.tsx  |  6 +-----
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-container/payment-agent-container.scss b/packages/cashier/src/pages/payment-agent/payment-agent-container/payment-agent-container.scss
index a6d2a8383725..36b6ff857f2c 100644
--- a/packages/cashier/src/pages/payment-agent/payment-agent-container/payment-agent-container.scss
+++ b/packages/cashier/src/pages/payment-agent/payment-agent-container/payment-agent-container.scss
@@ -3,5 +3,15 @@
         &-second {
             margin-top: 1.6rem !important;
         }
+        &-container {
+            @include mobile-or-tablet-screen {
+                padding-top: 1.6rem;
+                margin: 0;
+                display: flex;
+                flex-direction: column;
+                align-content: space-between;
+                gap: 1.6rem;
+            }
+        }
     }
 }
diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-container/payment-agent-container.tsx b/packages/cashier/src/pages/payment-agent/payment-agent-container/payment-agent-container.tsx
index 6eb29a8866e0..3d5a8e7f296c 100644
--- a/packages/cashier/src/pages/payment-agent/payment-agent-container/payment-agent-container.tsx
+++ b/packages/cashier/src/pages/payment-agent/payment-agent-container/payment-agent-container.tsx
@@ -9,6 +9,8 @@ import PaymentAgentWithdrawConfirm from '../payment-agent-withdraw-confirm';
 import { useCashierStore } from '../../../stores/useCashierStores';
 import PaymentAgentReceipt from '../payment-agent-receipt';
 import './payment-agent-container.scss';
+import PaymentAgentSideNote from '../payment-agent-side-note';
+import { useDevice } from '@deriv-com/ui';
 
 type TPaymentAgentContainer = {
     is_deposit?: boolean;
@@ -43,6 +45,8 @@ const PaymentAgentContainer = observer(({ is_deposit }: TPaymentAgentContainer)
         supported_banks,
     } = payment_agent_store;
 
+    const { isDesktop } = useDevice();
+
     React.useEffect(() => {
         return () => {
             onChangePaymentMethod({ target: { value: '0' } });
@@ -75,6 +79,9 @@ const PaymentAgentContainer = observer(({ is_deposit }: TPaymentAgentContainer)
 
     return (
         <React.Fragment>
+            <div className='payment-agent-list__side-note-container'>
+                {!isDesktop ? <PaymentAgentSideNote /> : null}
+            </div>
             <div className='payment-agent-list__list-header'>
                 {is_deposit ? (
                     <Text as='p' line_height='s' size='xs'>
diff --git a/packages/cashier/src/pages/payment-agent/payment-agent.tsx b/packages/cashier/src/pages/payment-agent/payment-agent.tsx
index 3a8a1c9ed54e..0b53f8322a6f 100644
--- a/packages/cashier/src/pages/payment-agent/payment-agent.tsx
+++ b/packages/cashier/src/pages/payment-agent/payment-agent.tsx
@@ -62,11 +62,7 @@ const PaymentAgent = observer(() => {
     }
 
     return (
-        <PageContainer
-            hide_breadcrumb
-            left={!isDesktop ? <PaymentAgentSideNote /> : undefined}
-            right={isDesktop ? <PaymentAgentSideNote /> : <React.Fragment />}
-        >
+        <PageContainer hide_breadcrumb right={isDesktop ? <PaymentAgentSideNote /> : <React.Fragment />}>
             <PaymentAgentList />
         </PageContainer>
     );