chore: side notes to payment agent list container on mobile (binary-c…

…om#16585)
kate-deriv · Aug 23, 2024 · b44aefc · b44aefc
1 parent 2bd466f
commit b44aefc
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/...ages/cashier/src/pages/payment-agent/payment-agent-container/payment-agent-container.scss b/...ages/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
@@ -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
@@ -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>
     );