From 0c4900f62d54de1abfcf49f3e3ece7de41b7f42f Mon Sep 17 00:00:00 2001
From: ameerul-deriv <103412909+ameerul-deriv@users.noreply.github.com>
Date: Mon, 25 Mar 2024 19:16:14 +0800
Subject: [PATCH] [FEQ] / Ameerul / FEQ-1713 Create the order details section
 (#14236)

* chore: added OrderDetails, Header, Info components

* chore: added PaymentMethodAccordion component

* chore: updated styles for PaymentMethodAccordion

* chore: added routing and functionality for order details

* chore: added review/rating block

* chore: added responsive view

* chore: fixed footer styles and added key in ActiveOrderInfo

* fix: routing issues from BuySellForm to orderDetails

* chore: added TOrder type for p2p_order_info

* chore: combined chat with order details, added orderDetails provider

* chore: added useState to handle showing chat on responsive

* chore: added test cases for OrderDetails related components

* fix: review order not showing disabled prompt

* chore: updated TODO

* chore: added error handler, updated ui issues

* fix: failing test cases

* chore: added suggestions

* fix: remove useOrderInfo from useSendbird, pass order info using provider

* chore: moved OrderDetailsProvider to providers folder under src, added comments

* chore: remove !important

* chore: remove TOrders

* chore: added comment explainining recommended

* chore: empty commit

* chore: separated component out for recommended status

* chore: updated test case for recommended status

* chore: empty commit

* chore: added comment
---
 .../entity/order/p2p-order/useOrderInfo.ts    |  17 +-
 .../BuySellForm/BuySellData/BuySellData.tsx   |   4 +-
 .../components/BuySellForm/BuySellForm.tsx    |  15 +-
 .../BuySellFormFooter/BuySellFormFooter.tsx   |   9 +-
 .../PaymentMethodWithIcon.tsx                 |  10 +-
 packages/p2p-v2/src/components/index.ts       |   1 +
 .../src/hooks/useExtendedOrderDetails.ts      |  30 ++-
 packages/p2p-v2/src/hooks/useSendbird.ts      |  15 +-
 .../OrderDetailsCard/OrderDetailsCard.scss    |  14 ++
 .../OrderDetailsCard/OrderDetailsCard.tsx     |  24 +++
 .../OrderDetailsCardFooter.scss               |   8 +
 .../OrderDetailsCardFooter.tsx                |  63 +++++++
 .../__tests__/OrderDetailsCardFooter.spec.tsx |  86 +++++++++
 .../OrderDetailsCardFooter/index.ts           |   1 +
 .../OrderDetailsCardHeader.tsx                |  64 +++++++
 .../__tests__/OrderDetailsCardHeader.spec.tsx | 111 +++++++++++
 .../OrderDetailsCardHeader/index.ts           |   1 +
 .../ActiveOrderInfo/ActiveOrderInfo.tsx       |  51 +++++
 .../__tests__/ActiveOrderInfo.spec.tsx        | 158 ++++++++++++++++
 .../ActiveOrderInfo/index.ts                  |   1 +
 .../OrderDetailsCardInfo.tsx                  |  50 +++++
 .../PaymentMethodAccordion.scss               |  16 ++
 .../PaymentMethodAccordion.tsx                |  96 ++++++++++
 .../PaymentMethodAccordion/index.ts           |   1 +
 .../__tests__/OrderDetailsCardInfo.spec.tsx   |  60 ++++++
 .../OrderDetailsCardInfo/index.ts             |   1 +
 .../OrderDetailsCardReview.tsx                |  65 +++++++
 .../RecommendationStatus.tsx                  |  31 ++++
 .../RecommendationStatus/index.ts             |   1 +
 .../__tests__/OrderDetailsCardReview.spec.tsx | 120 ++++++++++++
 .../OrderDetailsCardReview/index.ts           |   1 +
 .../__tests__/OrderDetailsCard.spec.tsx       |  42 +++++
 .../components/OrderDetailsCard/index.ts      |   1 +
 .../screens/OrderDetails/OrderDetails.scss    |  26 +++
 .../screens/OrderDetails/OrderDetails.tsx     | 115 ++++++++++--
 .../__tests__/OrderDetails.spec.tsx           | 174 ++++++++++++++++++
 .../pages/orders/screens/Orders/Orders.tsx    |   8 +-
 .../Orders/OrdersTable/OrdersTable.scss       |  10 +-
 .../Orders/OrdersTableRow/OrdersTableRow.scss |   2 +
 .../Orders/OrdersTableRow/OrdersTableRow.tsx  |  12 +-
 .../screens/Orders/__tests__/Orders.spec.tsx  |  25 ++-
 .../OrdersChatSection/OrdersChatSection.tsx   |   7 +-
 .../OrderDetailsProvider.tsx                  |  21 +++
 .../__tests__/OrderDetailsProvider.spec.tsx   |  17 ++
 .../providers/OrderDetailsProvider/index.ts   |   1 +
 .../p2p-v2/src/routes/AppContent/index.tsx    |   8 +-
 packages/p2p-v2/src/utils/time.ts             |  14 ++
 47 files changed, 1556 insertions(+), 52 deletions(-)
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCard.scss
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCard.tsx
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardFooter/OrderDetailsCardFooter.scss
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardFooter/OrderDetailsCardFooter.tsx
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardFooter/__tests__/OrderDetailsCardFooter.spec.tsx
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardFooter/index.ts
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardHeader/OrderDetailsCardHeader.tsx
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardHeader/__tests__/OrderDetailsCardHeader.spec.tsx
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardHeader/index.ts
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/ActiveOrderInfo/ActiveOrderInfo.tsx
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/ActiveOrderInfo/__tests__/ActiveOrderInfo.spec.tsx
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/ActiveOrderInfo/index.ts
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/OrderDetailsCardInfo.tsx
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/PaymentMethodAccordion/PaymentMethodAccordion.scss
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/PaymentMethodAccordion/PaymentMethodAccordion.tsx
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/PaymentMethodAccordion/index.ts
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/__tests__/OrderDetailsCardInfo.spec.tsx
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/index.ts
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardReview/OrderDetailsCardReview.tsx
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardReview/RecommendationStatus/RecommendationStatus.tsx
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardReview/RecommendationStatus/index.ts
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardReview/__tests__/OrderDetailsCardReview.spec.tsx
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardReview/index.ts
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/__tests__/OrderDetailsCard.spec.tsx
 create mode 100644 packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/index.ts
 create mode 100644 packages/p2p-v2/src/pages/orders/screens/OrderDetails/OrderDetails.scss
 create mode 100644 packages/p2p-v2/src/pages/orders/screens/OrderDetails/__tests__/OrderDetails.spec.tsx
 create mode 100644 packages/p2p-v2/src/providers/OrderDetailsProvider/OrderDetailsProvider.tsx
 create mode 100644 packages/p2p-v2/src/providers/OrderDetailsProvider/__tests__/OrderDetailsProvider.spec.tsx
 create mode 100644 packages/p2p-v2/src/providers/OrderDetailsProvider/index.ts

diff --git a/packages/api-v2/src/hooks/p2p/entity/order/p2p-order/useOrderInfo.ts b/packages/api-v2/src/hooks/p2p/entity/order/p2p-order/useOrderInfo.ts
index bdcd66dc920c..d50a38116553 100644
--- a/packages/api-v2/src/hooks/p2p/entity/order/p2p-order/useOrderInfo.ts
+++ b/packages/api-v2/src/hooks/p2p/entity/order/p2p-order/useOrderInfo.ts
@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 import useQuery from '../../../../../useQuery';
 import useAuthorize from '../../../../useAuthorize';
 
+// TODO: Convert this to use useSubscribe as it is a subscribable endpoint
 /** This custom hook that returns information about the given order ID */
 const useOrderInfo = (id: string) => {
     const { isSuccess } = useAuthorize();
@@ -53,13 +54,15 @@ const useOrderInfo = (id: string) => {
             is_reviewable: Boolean(is_reviewable),
             /** Indicates if the latest order changes have been seen by the current client. */
             is_seen: Boolean(is_seen),
-            review_details: {
-                ...review_details,
-                /** Indicates if the advertiser is recommended or not. */
-                is_recommended: Boolean(review_details?.recommended),
-                /** Indicates that the advertiser has not been recommended yet. */
-                has_not_been_recommended: review_details?.recommended === null,
-            },
+            review_details: review_details
+                ? {
+                      ...review_details,
+                      /** Indicates if the advertiser is recommended or not. */
+                      is_recommended: Boolean(review_details?.recommended),
+                      /** Indicates that the advertiser has not been recommended yet. */
+                      has_not_been_recommended: review_details?.recommended === null,
+                  }
+                : undefined,
             /** Indicates that the seller in the process of confirming the order. */
             is_verification_pending: Boolean(verification_pending),
         };
diff --git a/packages/p2p-v2/src/components/BuySellForm/BuySellData/BuySellData.tsx b/packages/p2p-v2/src/components/BuySellForm/BuySellData/BuySellData.tsx
index c3668644b7d8..3d614dffcdad 100644
--- a/packages/p2p-v2/src/components/BuySellForm/BuySellData/BuySellData.tsx
+++ b/packages/p2p-v2/src/components/BuySellForm/BuySellData/BuySellData.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import { THooks } from 'types';
+import { PaymentMethodWithIcon } from '@/components';
 import { formatTime } from '@/utils';
-import { p2p } from '@deriv/api-v2';
 import { Text, useDevice } from '@deriv-com/ui';
-import { PaymentMethodWithIcon } from '../../PaymentMethodWithIcon';
 import './BuySellData.scss';
 
 type TBuySellDataProps = {
@@ -64,6 +63,7 @@ const BuySellData = ({
                 {paymentMethodNames?.length
                     ? paymentMethodNames.map(method => (
                           <PaymentMethodWithIcon
+                              className='mb-[0.8rem]'
                               key={method}
                               name={method}
                               type={paymentMethodTypes?.[method] as TType}
diff --git a/packages/p2p-v2/src/components/BuySellForm/BuySellForm.tsx b/packages/p2p-v2/src/components/BuySellForm/BuySellForm.tsx
index b88fa036f245..73e1aec35cfc 100644
--- a/packages/p2p-v2/src/components/BuySellForm/BuySellForm.tsx
+++ b/packages/p2p-v2/src/components/BuySellForm/BuySellForm.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable camelcase */
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Control, Controller, FieldValues, useForm } from 'react-hook-form';
+import { useHistory } from 'react-router-dom';
 import { TAdvertType, THooks } from 'types';
-import { BUY_SELL, RATE_TYPE, VALID_SYMBOLS_PATTERN } from '@/constants';
+import { BASE_URL, BUY_SELL, RATE_TYPE, VALID_SYMBOLS_PATTERN } from '@/constants';
 import {
     getPaymentMethodObjects,
     getTextFieldError,
@@ -59,7 +60,7 @@ const BuySellForm = ({
     onRequestClose,
     paymentMethods,
 }: TBuySellFormProps) => {
-    const { mutate } = p2p.order.useCreate();
+    const { data: orderCreatedInfo, isSuccess, mutate } = p2p.order.useCreate();
     const [selectedPaymentMethods, setSelectedPaymentMethods] = useState<number[]>([]);
 
     const {
@@ -89,6 +90,7 @@ const BuySellForm = ({
         };
     });
 
+    const history = useHistory();
     const { isMobile } = useDevice();
     const isBuy = type === BUY_SELL.BUY;
 
@@ -144,6 +146,13 @@ const BuySellForm = ({
         }
     };
 
+    useEffect(() => {
+        if (isSuccess && orderCreatedInfo) {
+            history.push(`${BASE_URL}/orders?order=${orderCreatedInfo.id}`);
+            onRequestClose();
+        }
+    }, [isSuccess, orderCreatedInfo, history, onRequestClose]);
+
     return (
         <form onSubmit={handleSubmit(onSubmit)}>
             <BuySellFormDisplayWrapper
diff --git a/packages/p2p-v2/src/components/BuySellForm/BuySellFormFooter/BuySellFormFooter.tsx b/packages/p2p-v2/src/components/BuySellForm/BuySellFormFooter/BuySellFormFooter.tsx
index 2550363216f5..151ad668832d 100644
--- a/packages/p2p-v2/src/components/BuySellForm/BuySellFormFooter/BuySellFormFooter.tsx
+++ b/packages/p2p-v2/src/components/BuySellForm/BuySellFormFooter/BuySellFormFooter.tsx
@@ -10,7 +10,14 @@ const BuySellFormFooter = ({ isDisabled, onClickCancel, onSubmit }: TBuySellForm
     const { isMobile } = useDevice();
     return (
         <div className='flex justify-end gap-[1rem]'>
-            <Button onClick={onClickCancel} size='lg' textSize={isMobile ? 'md' : 'sm'} variant='outlined'>
+            <Button
+                className='border-2'
+                color='black'
+                onClick={onClickCancel}
+                size='lg'
+                textSize={isMobile ? 'md' : 'sm'}
+                variant='outlined'
+            >
                 Cancel
             </Button>
             <Button
diff --git a/packages/p2p-v2/src/components/PaymentMethodWithIcon/PaymentMethodWithIcon.tsx b/packages/p2p-v2/src/components/PaymentMethodWithIcon/PaymentMethodWithIcon.tsx
index f2a3da96d46c..6db27d8c685f 100644
--- a/packages/p2p-v2/src/components/PaymentMethodWithIcon/PaymentMethodWithIcon.tsx
+++ b/packages/p2p-v2/src/components/PaymentMethodWithIcon/PaymentMethodWithIcon.tsx
@@ -1,15 +1,19 @@
 import React, { ComponentType, SVGAttributes } from 'react';
+import clsx from 'clsx';
 import { THooks } from 'types';
+import { TGenericSizes } from '@/utils';
 import { Text } from '@deriv-com/ui';
 import IcCashierBankTransfer from '../../public/ic-cashier-bank-transfer.svg';
 import IcCashierEwallet from '../../public/ic-cashier-ewallet.svg';
 import IcCashierOther from '../../public/ic-cashier-other.svg';
 
 type TPaymentMethodWithIconProps = {
+    className: string;
     name: string;
+    textSize?: TGenericSizes;
     type: THooks.AdvertiserPaymentMethods.Get[number]['type'];
 };
-const PaymentMethodWithIcon = ({ name, type }: TPaymentMethodWithIconProps) => {
+const PaymentMethodWithIcon = ({ className, name, textSize = 'sm', type }: TPaymentMethodWithIconProps) => {
     let Icon: ComponentType<SVGAttributes<SVGElement>> = IcCashierOther;
     if (type === 'bank') {
         Icon = IcCashierBankTransfer;
@@ -17,9 +21,9 @@ const PaymentMethodWithIcon = ({ name, type }: TPaymentMethodWithIconProps) => {
         Icon = IcCashierEwallet;
     }
     return (
-        <div className='flex items-center gap-[0.8rem] mb-[0.8rem]'>
+        <div className={clsx('flex items-center gap-[0.8rem]', className)}>
             <Icon data-testid='dt_p2p_v2_payment_method_card_header_icon' height={16} width={16} />
-            <Text size='sm'>{name}</Text>
+            <Text size={textSize}>{name}</Text>
         </div>
     );
 };
diff --git a/packages/p2p-v2/src/components/index.ts b/packages/p2p-v2/src/components/index.ts
index 405871efcadf..c31e0f57903a 100644
--- a/packages/p2p-v2/src/components/index.ts
+++ b/packages/p2p-v2/src/components/index.ts
@@ -20,6 +20,7 @@ export * from './PaymentMethodForm';
 export * from './PaymentMethodLabel';
 export * from './PaymentMethodsFormFooter';
 export * from './PaymentMethodsHeader';
+export * from './PaymentMethodWithIcon';
 export * from './PopoverDropdown';
 export * from './ProfileContent';
 export * from './RadioGroup';
diff --git a/packages/p2p-v2/src/hooks/useExtendedOrderDetails.ts b/packages/p2p-v2/src/hooks/useExtendedOrderDetails.ts
index 8f3bcb63bb1f..2de569e9a54f 100644
--- a/packages/p2p-v2/src/hooks/useExtendedOrderDetails.ts
+++ b/packages/p2p-v2/src/hooks/useExtendedOrderDetails.ts
@@ -1,14 +1,23 @@
 import { THooks, TServerTime } from 'types';
 import { BUY_SELL, ORDERS_STATUS } from '@/constants'; // Update your import path
-import { convertToMillis, getFormattedDateString, toMoment } from '@/utils';
+import {
+    convertToMillis,
+    getFormattedDateString,
+    removeTrailingZeros,
+    roundOffDecimal,
+    setDecimalPlaces,
+    toMoment,
+} from '@/utils';
+import { FormatUtils } from '@deriv-com/utils';
 
-type TOrder = THooks.Order.GetList[number];
+type TOrder = THooks.Order.Get;
 
 type TUserDetails = TOrder['advertiser_details'] | TOrder['client_details'];
 
 type TObject = Record<string, string>;
 interface ExtendedOrderDetails extends TOrder {
     counterpartyAdStatusString: TObject;
+    displayPaymentAmount: string;
     hasReviewDetails: boolean;
     hasTimerExpired: boolean;
     isActiveOrder: boolean;
@@ -36,6 +45,7 @@ interface ExtendedOrderDetails extends TOrder {
     orderExpiryMilliseconds: number;
     otherUserDetails: TUserDetails;
     purchaseTime: string;
+    rateAmount: string;
     remainingSeconds: number;
     shouldHighlightAlert: boolean;
     shouldHighlightDanger: boolean;
@@ -79,6 +89,14 @@ const useExtendedOrderDetails = ({
                 rightSendOrReceive: this.isBuyOrder ? 'Receive' : 'Send',
             };
         },
+        get displayPaymentAmount() {
+            return removeTrailingZeros(
+                FormatUtils.formatMoney(
+                    Number(this.amount_display) * Number(roundOffDecimal(this.rate, setDecimalPlaces(this.rate, 6))),
+                    { currency: this.local_currency }
+                )
+            );
+        },
         get hasReviewDetails() {
             return !!this.review_details;
         },
@@ -182,6 +200,14 @@ const useExtendedOrderDetails = ({
                 this.isInactiveOrder
             );
         },
+        get rateAmount() {
+            return removeTrailingZeros(
+                FormatUtils.formatMoney(this.rate, {
+                    currency: this.local_currency,
+                    decimalPlaces: setDecimalPlaces(this.rate, 6),
+                })
+            );
+        },
         get remainingSeconds() {
             const serverTimeAmount = serverTime?.server_time_moment;
             const expiryTimeMoment = toMoment(this.expiry_time);
diff --git a/packages/p2p-v2/src/hooks/useSendbird.ts b/packages/p2p-v2/src/hooks/useSendbird.ts
index dac321a4b63e..0985ba80da5f 100644
--- a/packages/p2p-v2/src/hooks/useSendbird.ts
+++ b/packages/p2p-v2/src/hooks/useSendbird.ts
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { p2p, useChatCreate, useOrderInfo, useSendbirdServiceToken, useServerTime } from '@deriv/api-v2';
+import { useOrderDetails } from '@/providers/OrderDetailsProvider';
+import { p2p, useChatCreate, useSendbirdServiceToken, useServerTime } from '@deriv/api-v2';
 import SendbirdChat, { BaseChannel, User } from '@sendbird/chat';
 import { GroupChannel, GroupChannelHandler, GroupChannelModule } from '@sendbird/chat/groupChannel';
 import { BaseMessage, MessageType, MessageTypeFilter } from '@sendbird/chat/message';
@@ -89,7 +90,7 @@ const useSendbird = (orderId: string) => {
     const { data: advertiserInfo, isSuccess: isSuccessAdvertiserInfo } = p2p.advertiser.useGetInfo();
     //TODO: p2p_chat_create endpoint to be removed once chat_channel_url is created from p2p_order_create
     const { isError: isErrorChatCreate, mutate: createChat } = useChatCreate();
-    const { data: orderInfo, isError: isErrorOrderInfo } = useOrderInfo(orderId);
+    const { isErrorOrderInfo, orderDetails } = useOrderDetails();
     const { data: serverTime, isError: isErrorServerTime } = useServerTime();
 
     const getUser = async (userId: string, token: string) => {
@@ -239,11 +240,11 @@ const useSendbird = (orderId: string) => {
                 const user = await getUser(advertiserInfo.chat_user_id, token || '');
                 if (!user) {
                     setIsChatError(true);
-                } else if (orderInfo?.chat_channel_url) {
+                } else if (orderDetails?.chat_channel_url) {
                     setUser(user);
                     // if there is no chat_channel_url, it needs to be created using useCreateChat hook first
                     // 2. Retrieve the P2P channel for the specific order
-                    const channel = await getChannel(orderInfo.chat_channel_url);
+                    const channel = await getChannel(orderDetails.chat_channel_url);
                     if (!channel) {
                         setIsChatError(true);
                     } else {
@@ -264,7 +265,7 @@ const useSendbird = (orderId: string) => {
         isSuccessAdvertiserInfo,
         sendbirdServiceToken,
         advertiserInfo?.chat_user_id,
-        orderInfo?.chat_channel_url,
+        orderDetails?.chat_channel_url,
         getMessages,
     ]);
 
@@ -275,14 +276,14 @@ const useSendbird = (orderId: string) => {
 
     useEffect(() => {
         // if the user has not created a chat URL for the order yet, create one using p2p_create_chat endpoint
-        if (!orderInfo?.chat_channel_url) {
+        if (!orderDetails?.chat_channel_url) {
             createChat({
                 order_id: orderId,
             });
         } else {
             initialiseChat();
         }
-    }, [orderId, orderInfo?.chat_channel_url]);
+    }, [orderId, orderDetails?.chat_channel_url]);
 
     return {
         activeChatChannel: chatChannel,
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCard.scss b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCard.scss
new file mode 100644
index 000000000000..3edb2fc59f36
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCard.scss
@@ -0,0 +1,14 @@
+.p2p-v2-order-details-card {
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    border: 8px solid #f2f3f4;
+    border-radius: 8px;
+    width: 45.6rem;
+    height: fit-content;
+
+    @include mobile {
+        width: 100%;
+        border: none;
+    }
+}
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCard.tsx b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCard.tsx
new file mode 100644
index 000000000000..c1a38a3d3aa9
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCard.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Divider, useDevice } from '@deriv-com/ui';
+import { OrderDetailsCardFooter } from './OrderDetailsCardFooter';
+import { OrderDetailsCardHeader } from './OrderDetailsCardHeader';
+import { OrderDetailsCardInfo } from './OrderDetailsCardInfo';
+import { OrderDetailsCardReview } from './OrderDetailsCardReview';
+import './OrderDetailsCard.scss';
+
+const OrderDetailsCard = () => {
+    const { isDesktop } = useDevice();
+
+    return (
+        <div className='p2p-v2-order-details-card'>
+            <OrderDetailsCardHeader />
+            <Divider color='#f2f3f4' />
+            <OrderDetailsCardInfo />
+            <Divider color='#f2f3f4' />
+            <OrderDetailsCardReview />
+            {isDesktop && <OrderDetailsCardFooter />}
+        </div>
+    );
+};
+
+export default OrderDetailsCard;
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardFooter/OrderDetailsCardFooter.scss b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardFooter/OrderDetailsCardFooter.scss
new file mode 100644
index 000000000000..8e443df6e3ea
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardFooter/OrderDetailsCardFooter.scss
@@ -0,0 +1,8 @@
+.p2p-v2-order-details-card-footer {
+    display: flex;
+    padding: 1.6rem;
+
+    @include mobile {
+        border-top: 2px solid #f2f3f4;
+    }
+}
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardFooter/OrderDetailsCardFooter.tsx b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardFooter/OrderDetailsCardFooter.tsx
new file mode 100644
index 000000000000..59c5387e3d10
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardFooter/OrderDetailsCardFooter.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { useOrderDetails } from '@/providers/OrderDetailsProvider';
+import { Button, useDevice } from '@deriv-com/ui';
+import './OrderDetailsCardFooter.scss';
+
+// TODO: Implement functionality for each button when integrating with the API and disable buttons while chat is loading
+const OrderDetailsCardFooter = () => {
+    const { orderDetails } = useOrderDetails();
+    const {
+        shouldShowCancelAndPaidButton,
+        shouldShowComplainAndReceivedButton,
+        shouldShowOnlyComplainButton,
+        shouldShowOnlyReceivedButton,
+    } = orderDetails;
+    const { isMobile } = useDevice();
+    const textSize = isMobile ? 'md' : 'sm';
+
+    if (shouldShowCancelAndPaidButton)
+        return (
+            <div className='p2p-v2-order-details-card-footer justify-end gap-3'>
+                <Button className='border-2' color='black' size='lg' textSize={textSize} variant='outlined'>
+                    Cancel order
+                </Button>
+                <Button size='lg' textSize={textSize}>
+                    I’ve paid
+                </Button>
+            </div>
+        );
+
+    if (shouldShowComplainAndReceivedButton)
+        return (
+            <div className='p2p-v2-order-details-card-footer justify-between'>
+                <Button className='border-2' color='primary-light' size='lg' textSize={textSize} variant='ghost'>
+                    Complain
+                </Button>
+                <Button size='lg' textSize={textSize}>
+                    I’ve received payment
+                </Button>
+            </div>
+        );
+
+    if (shouldShowOnlyComplainButton)
+        return (
+            <div className='p2p-v2-order-details-card-footer justify-end'>
+                <Button className='border-2' color='primary-light' size='lg' textSize={textSize} variant='ghost'>
+                    Complain
+                </Button>
+            </div>
+        );
+
+    if (shouldShowOnlyReceivedButton)
+        return (
+            <div className='p2p-v2-order-details-card-footer justify-end'>
+                <Button size='lg' textSize={textSize}>
+                    I’ve received payment
+                </Button>
+            </div>
+        );
+
+    return null;
+};
+
+export default OrderDetailsCardFooter;
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardFooter/__tests__/OrderDetailsCardFooter.spec.tsx b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardFooter/__tests__/OrderDetailsCardFooter.spec.tsx
new file mode 100644
index 000000000000..c97af6ca774f
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardFooter/__tests__/OrderDetailsCardFooter.spec.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { useOrderDetails } from '@/providers/OrderDetailsProvider';
+import { render, screen } from '@testing-library/react';
+import OrderDetailsCardFooter from '../OrderDetailsCardFooter';
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({ isMobile: false }),
+}));
+
+jest.mock('@/providers/OrderDetailsProvider', () => ({
+    useOrderDetails: jest.fn().mockReturnValue({
+        orderDetails: {
+            shouldShowCancelAndPaidButton: true,
+            shouldShowComplainAndReceivedButton: false,
+            shouldShowOnlyComplainButton: false,
+            shouldShowOnlyReceivedButton: false,
+        },
+    }),
+}));
+
+const mockUseOrderDetails = useOrderDetails as jest.Mock;
+
+describe('<OrderDetailsCardFooter />', () => {
+    it('should render cancel and paid buttons', () => {
+        render(<OrderDetailsCardFooter />);
+        expect(screen.getByRole('button', { name: 'Cancel order' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'I’ve paid' })).toBeInTheDocument();
+    });
+
+    it('should render complain and received buttons', () => {
+        mockUseOrderDetails.mockReturnValue({
+            orderDetails: {
+                ...mockUseOrderDetails().orderDetails,
+                shouldShowCancelAndPaidButton: false,
+                shouldShowComplainAndReceivedButton: true,
+            },
+        });
+
+        render(<OrderDetailsCardFooter />);
+
+        expect(screen.getByRole('button', { name: 'Complain' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'I’ve received payment' })).toBeInTheDocument();
+    });
+
+    it('should render only complain button', () => {
+        mockUseOrderDetails.mockReturnValue({
+            orderDetails: {
+                ...mockUseOrderDetails().orderDetails,
+                shouldShowComplainAndReceivedButton: false,
+                shouldShowOnlyComplainButton: true,
+            },
+        });
+
+        render(<OrderDetailsCardFooter />);
+
+        expect(screen.getByRole('button', { name: 'Complain' })).toBeInTheDocument();
+    });
+
+    it('should render only received button', () => {
+        mockUseOrderDetails.mockReturnValue({
+            orderDetails: {
+                ...mockUseOrderDetails().orderDetails,
+                shouldShowOnlyComplainButton: false,
+                shouldShowOnlyReceivedButton: true,
+            },
+        });
+
+        render(<OrderDetailsCardFooter />);
+
+        expect(screen.getByRole('button', { name: 'I’ve received payment' })).toBeInTheDocument();
+    });
+
+    it('should not render any buttons', () => {
+        mockUseOrderDetails.mockReturnValue({
+            orderDetails: {
+                ...mockUseOrderDetails().orderDetails,
+                shouldShowOnlyReceivedButton: false,
+            },
+        });
+
+        const { container } = render(<OrderDetailsCardFooter />);
+
+        expect(container).toBeEmptyDOMElement();
+    });
+});
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardFooter/index.ts b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardFooter/index.ts
new file mode 100644
index 000000000000..1c390c33aae0
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardFooter/index.ts
@@ -0,0 +1 @@
+export { default as OrderDetailsCardFooter } from './OrderDetailsCardFooter';
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardHeader/OrderDetailsCardHeader.tsx b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardHeader/OrderDetailsCardHeader.tsx
new file mode 100644
index 000000000000..19db422a0ea2
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardHeader/OrderDetailsCardHeader.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { useOrderDetails } from '@/providers/OrderDetailsProvider';
+import { getDistanceToServerTime } from '@/utils';
+import { useServerTime } from '@deriv/api-v2';
+import { Text, useDevice } from '@deriv-com/ui';
+import { OrderTimer } from '../../OrderTimer';
+
+const OrderDetailsCardHeader = () => {
+    const { orderDetails } = useOrderDetails();
+
+    const {
+        displayPaymentAmount,
+        hasTimerExpired,
+        id,
+        isBuyerConfirmedOrder,
+        isPendingOrder,
+        local_currency: localCurrency,
+        orderExpiryMilliseconds,
+        shouldHighlightAlert,
+        shouldHighlightDanger,
+        shouldHighlightSuccess,
+        shouldShowOrderTimer,
+        statusString,
+    } = orderDetails;
+
+    const { isMobile } = useDevice();
+    const textSize = isMobile ? 'sm' : 'xs';
+    const { data: serverTime } = useServerTime();
+    const distance = getDistanceToServerTime(orderExpiryMilliseconds, serverTime?.server_time_moment);
+    const getStatusColor = () => {
+        if (shouldHighlightAlert) return 'warning';
+        else if (shouldHighlightDanger) return 'error';
+        else if (shouldHighlightSuccess) return 'success';
+        return 'less-prominent';
+    };
+
+    return (
+        <div className='flex justify-between p-[1.6rem]'>
+            <div className='flex flex-col gap-1'>
+                <Text color={getStatusColor()} size={isMobile ? 'lg' : 'md'} weight='bold'>
+                    {statusString}
+                </Text>
+                {!hasTimerExpired && (isPendingOrder || isBuyerConfirmedOrder) && (
+                    <Text size={isMobile ? '2xl' : 'xl'}>
+                        {displayPaymentAmount} {localCurrency}
+                    </Text>
+                )}
+                <Text color='less-prominent' size={textSize}>
+                    Order ID {id}
+                </Text>
+            </div>
+            {shouldShowOrderTimer && (
+                <div className='flex flex-col justify-center gap-1'>
+                    <Text align='center' size={textSize}>
+                        Time left
+                    </Text>
+                    <OrderTimer distance={distance} />
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default OrderDetailsCardHeader;
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardHeader/__tests__/OrderDetailsCardHeader.spec.tsx b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardHeader/__tests__/OrderDetailsCardHeader.spec.tsx
new file mode 100644
index 000000000000..6f3cb69dc066
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardHeader/__tests__/OrderDetailsCardHeader.spec.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import { useOrderDetails } from '@/providers/OrderDetailsProvider';
+import { APIProvider, AuthProvider } from '@deriv/api-v2';
+import { render, screen } from '@testing-library/react';
+import OrderDetailsCardHeader from '../OrderDetailsCardHeader';
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({ isMobile: false }),
+}));
+
+jest.mock('@/providers/OrderDetailsProvider', () => ({
+    useOrderDetails: jest.fn().mockReturnValue({
+        orderDetails: {
+            displayPaymentAmount: '0.10',
+            hasTimerExpired: false,
+            id: '123',
+            isBuyerConfirmedOrder: true,
+            isPendingOrder: true,
+            local_currency: 'USD',
+            orderExpiryMilliseconds: 12345567,
+            shouldHighlightAlert: false,
+            shouldHighlightDanger: true,
+            shouldHighlightSuccess: false,
+            shouldShowOrderTimer: true,
+            statusString: 'Pay now',
+        },
+    }),
+}));
+
+jest.mock('../../../OrderTimer', () => ({
+    OrderTimer: () => <div>OrderTimer</div>,
+}));
+
+const mockUseOrderDetails = useOrderDetails as jest.Mock;
+
+const wrapper = ({ children }: { children: JSX.Element }) => (
+    <APIProvider>
+        <AuthProvider>{children}</AuthProvider>
+    </APIProvider>
+);
+
+describe('<OrderDetailsCardHeader />', () => {
+    it('should show status with error class, the order ID and time left', () => {
+        render(<OrderDetailsCardHeader />, { wrapper });
+
+        const statusText = screen.getByText('Pay now');
+
+        expect(statusText).toBeInTheDocument();
+        expect(statusText).toHaveClass('derivs-text__color--error');
+        expect(screen.getByText('Order ID 123')).toBeInTheDocument();
+        expect(screen.getByText('Time left')).toBeInTheDocument();
+        expect(screen.getByText('OrderTimer')).toBeInTheDocument();
+    });
+
+    it('should show status with success class', () => {
+        mockUseOrderDetails.mockReturnValue({
+            orderDetails: {
+                ...mockUseOrderDetails().orderDetails,
+                shouldHighlightDanger: false,
+                shouldHighlightSuccess: true,
+                statusString: 'Completed',
+            },
+        });
+
+        render(<OrderDetailsCardHeader />, { wrapper });
+
+        const statusText = screen.getByText('Completed');
+
+        expect(statusText).toBeInTheDocument();
+        expect(statusText).toHaveClass('derivs-text__color--success');
+    });
+
+    it('should show status with warning class', () => {
+        mockUseOrderDetails.mockReturnValue({
+            orderDetails: {
+                ...mockUseOrderDetails().orderDetails,
+                shouldHighlightAlert: true,
+                shouldHighlightSuccess: false,
+                statusString: 'Waiting for seller to confirm',
+            },
+        });
+
+        render(<OrderDetailsCardHeader />, { wrapper });
+
+        const statusText = screen.getByText('Waiting for seller to confirm');
+
+        expect(statusText).toBeInTheDocument();
+        expect(statusText).toHaveClass('derivs-text__color--warning');
+    });
+
+    it('should show status with less-prominent class and hide timer if shouldShowOrderTimer is false', () => {
+        mockUseOrderDetails.mockReturnValue({
+            orderDetails: {
+                ...mockUseOrderDetails().orderDetails,
+                shouldHighlightAlert: false,
+                shouldShowOrderTimer: false,
+                statusString: 'Expired',
+            },
+        });
+
+        render(<OrderDetailsCardHeader />, { wrapper });
+
+        const statusText = screen.getByText('Expired');
+
+        expect(statusText).toBeInTheDocument();
+        expect(statusText).toHaveClass('derivs-text__color--less-prominent');
+        expect(screen.queryByText('Time left')).not.toBeInTheDocument();
+        expect(screen.queryByText('OrderTimer')).not.toBeInTheDocument();
+    });
+});
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardHeader/index.ts b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardHeader/index.ts
new file mode 100644
index 000000000000..5ba560db83d8
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardHeader/index.ts
@@ -0,0 +1 @@
+export { default as OrderDetailsCardHeader } from './OrderDetailsCardHeader';
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/ActiveOrderInfo/ActiveOrderInfo.tsx b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/ActiveOrderInfo/ActiveOrderInfo.tsx
new file mode 100644
index 000000000000..f4bce14e61e5
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/ActiveOrderInfo/ActiveOrderInfo.tsx
@@ -0,0 +1,51 @@
+import React, { Fragment } from 'react';
+import { useOrderDetails } from '@/providers/OrderDetailsProvider';
+import { Divider, Text, useDevice } from '@deriv-com/ui';
+import { PaymentMethodAccordion } from '../PaymentMethodAccordion';
+
+const ActiveOrderInfo = () => {
+    const { orderDetails } = useOrderDetails();
+    const {
+        advert_details: { description },
+        contact_info: contactInfo,
+        isActiveOrder,
+        labels,
+        payment_info: paymentInfo,
+        payment_method_details: paymentMethodDetails,
+    } = orderDetails;
+    const { isMobile } = useDevice();
+    const textSize = isMobile ? 'md' : 'sm';
+
+    const adDetails = [
+        { text: labels.contactDetails, value: contactInfo || '-' },
+        { text: labels.instructions, value: description || '-' },
+    ];
+
+    if (isActiveOrder)
+        return (
+            <>
+                <Divider color='#f2f3f4' />
+                <PaymentMethodAccordion
+                    paymentDetails={labels.paymentDetails}
+                    paymentInfo={paymentInfo}
+                    paymentMethodDetails={paymentMethodDetails}
+                />
+                <Divider color='#f2f3f4' />
+                {adDetails.map((detail, key) => (
+                    <Fragment key={detail.text}>
+                        <div className='flex flex-col p-[1.6rem] gap-2'>
+                            <Text size={textSize} weight='bold'>
+                                {detail.text}
+                            </Text>
+                            <Text size={textSize}>{detail.value}</Text>
+                        </div>
+                        {key === 0 && <Divider color='#f2f3f4' />}
+                    </Fragment>
+                ))}
+            </>
+        );
+
+    return null;
+};
+
+export default ActiveOrderInfo;
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/ActiveOrderInfo/__tests__/ActiveOrderInfo.spec.tsx b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/ActiveOrderInfo/__tests__/ActiveOrderInfo.spec.tsx
new file mode 100644
index 000000000000..5cc4be304a84
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/ActiveOrderInfo/__tests__/ActiveOrderInfo.spec.tsx
@@ -0,0 +1,158 @@
+import React from 'react';
+import { useOrderDetails } from '@/providers/OrderDetailsProvider';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ActiveOrderInfo from '../ActiveOrderInfo';
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({ isMobile: false }),
+}));
+
+jest.mock('@/providers/OrderDetailsProvider', () => ({
+    useOrderDetails: jest.fn().mockReturnValue({
+        orderDetails: {
+            advert_details: {
+                description: 'This is my description',
+            },
+            contact_info: 'This is my contact info',
+            isActiveOrder: true,
+            labels: {
+                contactDetails: 'Seller’s contact details',
+                instructions: 'Seller’s instructions',
+                paymentDetails: 'Seller’s payment details',
+            },
+            payment_info: 'This is my payment info',
+            payment_method_details: {
+                '1': {
+                    display_name: 'Alipay',
+                    fields: {
+                        account: {
+                            display_name: 'Alipay ID',
+                            required: 1,
+                            type: 'text',
+                            value: '12345',
+                        },
+                        instructions: {
+                            display_name: 'Instructions',
+                            required: 0,
+                            type: 'memo',
+                            value: 'Alipay instructions',
+                        },
+                    },
+                    is_enabled: 1,
+                    method: 'alipay',
+                    type: 'ewallet',
+                },
+            },
+        },
+    }),
+}));
+
+const mockUseOrderDetails = useOrderDetails as jest.Mock;
+
+describe('<ActiveOrderInfo />', () => {
+    it('should render the payment methods, payment details and instructions', () => {
+        render(<ActiveOrderInfo />);
+
+        expect(screen.getByText('Seller’s payment details')).toBeInTheDocument();
+        expect(screen.getByText('Expand all')).toBeInTheDocument();
+        expect(screen.getByText('Alipay')).toBeInTheDocument();
+
+        expect(screen.getByText('Seller’s contact details')).toBeInTheDocument();
+        expect(screen.getByText('This is my contact info')).toBeInTheDocument();
+
+        expect(screen.getByText('Seller’s instructions')).toBeInTheDocument();
+        expect(screen.getByText('This is my description')).toBeInTheDocument();
+    });
+
+    it('should show the expanded view of payment method details after clicking on a payment method and hide it after clicking on it again', () => {
+        render(<ActiveOrderInfo />);
+
+        const alipayMethod = screen.getByText('Alipay');
+        userEvent.click(alipayMethod);
+
+        expect(screen.getByText('Alipay ID')).toBeInTheDocument();
+        expect(screen.getByText('12345')).toBeInTheDocument();
+        expect(screen.getByText('Instructions')).toBeInTheDocument();
+        expect(screen.getByText('Alipay instructions')).toBeInTheDocument();
+
+        userEvent.click(alipayMethod);
+
+        expect(screen.queryByText('Alipay ID')).not.toBeInTheDocument();
+        expect(screen.queryByText('12345')).not.toBeInTheDocument();
+        expect(screen.queryByText('Instructions')).not.toBeInTheDocument();
+        expect(screen.queryByText('Alipay instructions')).not.toBeInTheDocument();
+    });
+
+    it('should show the expanded view of payment method details after clicking on expand all and hide it after clicking the button again', () => {
+        mockUseOrderDetails.mockReturnValue({
+            orderDetails: {
+                ...mockUseOrderDetails().orderDetails,
+                payment_method_details: {
+                    ...mockUseOrderDetails().orderDetails.payment_method_details,
+                    '2': {
+                        display_name: 'Bank transfer',
+                        fields: {
+                            account: {
+                                display_name: 'Account Number',
+                                required: 1,
+                                type: 'text',
+                                value: '54321',
+                            },
+                            instructions: {
+                                display_name: 'Bank Name',
+                                required: 0,
+                                type: 'memo',
+                                value: 'test bank',
+                            },
+                        },
+                        is_enabled: 1,
+                        method: 'alipay',
+                        type: 'ewallet',
+                    },
+                },
+            },
+        });
+
+        render(<ActiveOrderInfo />);
+
+        const expandAllButton = screen.getByRole('button', { name: 'Expand all' });
+        userEvent.click(expandAllButton);
+
+        expect(screen.getByText('Alipay ID')).toBeInTheDocument();
+        expect(screen.getByText('12345')).toBeInTheDocument();
+        expect(screen.getByText('Instructions')).toBeInTheDocument();
+        expect(screen.getByText('Alipay instructions')).toBeInTheDocument();
+
+        expect(screen.getByText('Account Number')).toBeInTheDocument();
+        expect(screen.getByText('54321')).toBeInTheDocument();
+        expect(screen.getByText('Bank Name')).toBeInTheDocument();
+        expect(screen.getByText('test bank')).toBeInTheDocument();
+
+        const collapseAllButton = screen.getByRole('button', { name: 'Collapse all' });
+
+        expect(collapseAllButton).toBeInTheDocument();
+        userEvent.click(collapseAllButton);
+
+        expect(screen.queryByText('Alipay ID')).not.toBeInTheDocument();
+        expect(screen.queryByText('12345')).not.toBeInTheDocument();
+        expect(screen.queryByText('Instructions')).not.toBeInTheDocument();
+        expect(screen.queryByText('Alipay instructions')).not.toBeInTheDocument();
+
+        expect(screen.queryByText('Account Number')).not.toBeInTheDocument();
+        expect(screen.queryByText('54321')).not.toBeInTheDocument();
+        expect(screen.queryByText('Bank Name')).not.toBeInTheDocument();
+        expect(screen.queryByText('test bank')).not.toBeInTheDocument();
+    });
+
+    it('should return null if isActiveOrder is false', () => {
+        mockUseOrderDetails.mockReturnValue({
+            orderDetails: { ...mockUseOrderDetails().orderDetails, isActiveOrder: false },
+        });
+
+        const { container } = render(<ActiveOrderInfo />);
+
+        expect(container).toBeEmptyDOMElement();
+    });
+});
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/ActiveOrderInfo/index.ts b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/ActiveOrderInfo/index.ts
new file mode 100644
index 000000000000..d2c6c9b0849d
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/ActiveOrderInfo/index.ts
@@ -0,0 +1 @@
+export { default as ActiveOrderInfo } from './ActiveOrderInfo';
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/OrderDetailsCardInfo.tsx b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/OrderDetailsCardInfo.tsx
new file mode 100644
index 000000000000..18a42df4c156
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/OrderDetailsCardInfo.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { useOrderDetails } from '@/providers/OrderDetailsProvider';
+import { Text, useDevice } from '@deriv-com/ui';
+import { ActiveOrderInfo } from './ActiveOrderInfo';
+
+const OrderDetailsCardInfo = () => {
+    const { orderDetails } = useOrderDetails();
+    const {
+        account_currency: accountCurrency,
+        advertiser_details: { name },
+        amount_display: amountDisplay,
+        displayPaymentAmount,
+        labels,
+        local_currency: localCurrency,
+        otherUserDetails,
+        purchaseTime,
+        rateAmount,
+    } = orderDetails;
+    const { isMobile } = useDevice();
+
+    const clientDetails = [
+        { text: labels.counterpartyNicknameLabel, value: name },
+        {
+            text: labels.counterpartyRealNameLabel,
+            value: `${otherUserDetails.first_name} ${otherUserDetails.last_name}`,
+        },
+        { text: labels.leftSendOrReceive, value: `${displayPaymentAmount} ${localCurrency}` },
+        { text: labels.rightSendOrReceive, value: `${amountDisplay} ${accountCurrency}` },
+        { text: `Rate (1 ${accountCurrency})`, value: `${rateAmount} ${localCurrency}` },
+        { text: 'Time', value: purchaseTime },
+    ];
+
+    return (
+        <div className='flex flex-col'>
+            <div className='grid grid-cols-2 grid-rows-3 gap-y-6 p-[1.6rem]'>
+                {clientDetails.map(detail => (
+                    <div className='flex flex-col' key={detail.text}>
+                        <Text color='less-prominent' size={isMobile ? 'sm' : 'xs'} weight='500'>
+                            {detail.text}
+                        </Text>
+                        <Text size={isMobile ? 'md' : 'sm'}>{detail.value}</Text>
+                    </div>
+                ))}
+            </div>
+            <ActiveOrderInfo />
+        </div>
+    );
+};
+
+export default OrderDetailsCardInfo;
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/PaymentMethodAccordion/PaymentMethodAccordion.scss b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/PaymentMethodAccordion/PaymentMethodAccordion.scss
new file mode 100644
index 000000000000..4012ce458610
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/PaymentMethodAccordion/PaymentMethodAccordion.scss
@@ -0,0 +1,16 @@
+.p2p-v2-payment-method-accordion {
+    &__button {
+        height: 0;
+        padding: 0;
+
+        // TODO: Remove hover effect once deriv-com/ui Buttons allows removing hover styles
+        &:hover {
+            background-color: transparent;
+
+            & > span {
+                // stylelint-disable-next-line declaration-no-important
+                color: #ff444f !important;
+            }
+        }
+    }
+}
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/PaymentMethodAccordion/PaymentMethodAccordion.tsx b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/PaymentMethodAccordion/PaymentMethodAccordion.tsx
new file mode 100644
index 000000000000..31f581af7e58
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/PaymentMethodAccordion/PaymentMethodAccordion.tsx
@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { PaymentMethodWithIcon } from '@/components';
+import { useExtendedOrderDetails } from '@/hooks';
+import { LabelPairedChevronRightSmRegularIcon } from '@deriv/quill-icons';
+import { Button, Text, useDevice } from '@deriv-com/ui';
+import './PaymentMethodAccordion.scss';
+
+type TPaymentMethodAccordionProps = {
+    paymentDetails: string;
+    paymentInfo: string;
+    paymentMethodDetails: ReturnType<typeof useExtendedOrderDetails>['data']['payment_method_details'];
+};
+
+const PaymentMethodAccordion = ({
+    paymentDetails,
+    paymentInfo,
+    paymentMethodDetails,
+}: TPaymentMethodAccordionProps) => {
+    const [expandedIds, setExpandedIds] = useState<string[]>([]);
+    const paymentMethodKeys = paymentMethodDetails ? Object.keys(paymentMethodDetails) : [];
+    const { isMobile } = useDevice();
+    const bigTextSize = isMobile ? 'md' : 'sm';
+    const smallTextSize = isMobile ? 'sm' : 'xs';
+
+    return (
+        <div className='flex flex-col p-[1.6rem] gap-2'>
+            <div className='flex items-center justify-between'>
+                <Text size={bigTextSize} weight='bold'>
+                    {paymentDetails}
+                </Text>
+                {paymentMethodKeys.length > 0 && (
+                    <Button
+                        className='p2p-v2-payment-method-accordion__button'
+                        onClick={() => {
+                            if (expandedIds.length !== paymentMethodKeys.length) setExpandedIds(paymentMethodKeys);
+                            else setExpandedIds([]);
+                        }}
+                        textSize={smallTextSize}
+                        variant='ghost'
+                    >
+                        {expandedIds.length === paymentMethodKeys.length ? 'Collapse all' : 'Expand all'}
+                    </Button>
+                )}
+            </div>
+            {paymentMethodKeys.length === 0 ? (
+                <Text size={bigTextSize}>{paymentInfo}</Text>
+            ) : (
+                <>
+                    {paymentMethodKeys.map(key => {
+                        if (paymentMethodDetails?.[key]) {
+                            const paymentMethodType = paymentMethodDetails[key].type;
+                            const paymentMethodFields = paymentMethodDetails[key].fields;
+
+                            return (
+                                <div className='py-2' key={key}>
+                                    <div
+                                        className='flex items-center justify-between cursor-pointer'
+                                        onClick={() => {
+                                            if (expandedIds.includes(key))
+                                                setExpandedIds(expandedIds.filter(id => id !== key));
+                                            else setExpandedIds([...expandedIds, key]);
+                                        }}
+                                    >
+                                        <PaymentMethodWithIcon
+                                            name={paymentMethodDetails[key].display_name}
+                                            textSize={bigTextSize}
+                                            type={paymentMethodType}
+                                        />
+                                        <LabelPairedChevronRightSmRegularIcon />
+                                    </div>
+                                    {expandedIds.includes(key) && (
+                                        <div className='flex flex-col ml-[3.1rem]'>
+                                            {Object.keys(paymentMethodFields).map(fieldKey => {
+                                                const field = paymentMethodFields[fieldKey];
+                                                return (
+                                                    <div className='flex flex-col py-4' key={fieldKey}>
+                                                        <Text color='less-prominent' size={smallTextSize}>
+                                                            {field.display_name}
+                                                        </Text>
+                                                        <Text size={smallTextSize}>{field.value || '-'}</Text>
+                                                    </div>
+                                                );
+                                            })}
+                                        </div>
+                                    )}
+                                </div>
+                            );
+                        }
+                    })}
+                </>
+            )}
+        </div>
+    );
+};
+
+export default PaymentMethodAccordion;
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/PaymentMethodAccordion/index.ts b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/PaymentMethodAccordion/index.ts
new file mode 100644
index 000000000000..76e94400369d
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/PaymentMethodAccordion/index.ts
@@ -0,0 +1 @@
+export { default as PaymentMethodAccordion } from './PaymentMethodAccordion';
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/__tests__/OrderDetailsCardInfo.spec.tsx b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/__tests__/OrderDetailsCardInfo.spec.tsx
new file mode 100644
index 000000000000..9e2056b48f08
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/__tests__/OrderDetailsCardInfo.spec.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import OrderDetailsCardInfo from '../OrderDetailsCardInfo';
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({ isMobile: false }),
+}));
+
+jest.mock('@/providers/OrderDetailsProvider', () => ({
+    useOrderDetails: jest.fn().mockReturnValue({
+        orderDetails: {
+            account_currency: 'USD',
+            advertiser_details: { name: 'Johnny123' },
+            amount_display: '100',
+            displayPaymentAmount: '110',
+            labels: {
+                counterpartyNicknameLabel: 'Seller’s nickname',
+                counterpartyRealNameLabel: 'Seller’s real name',
+                leftSendOrReceive: 'Send',
+                paymentDetails: 'Payment details',
+                rightSendOrReceive: 'Receive',
+            },
+            local_currency: 'IDR',
+            otherUserDetails: { first_name: 'John', last_name: 'Doe' },
+            purchaseTime: '2021-09-01 12:00:00',
+            rateAmount: '10',
+        },
+    }),
+}));
+
+jest.mock('../ActiveOrderInfo', () => ({
+    ActiveOrderInfo: () => <div>ActiveOrderInfo</div>,
+}));
+
+describe('<OrderDetailsCardInfo />', () => {
+    it('should render order details info', () => {
+        render(<OrderDetailsCardInfo />);
+
+        expect(screen.getByText('Seller’s nickname')).toBeInTheDocument();
+        expect(screen.getByText('Johnny123')).toBeInTheDocument();
+
+        expect(screen.getByText('Seller’s real name')).toBeInTheDocument();
+        expect(screen.getByText('John Doe')).toBeInTheDocument();
+
+        expect(screen.getByText('Send')).toBeInTheDocument();
+        expect(screen.getByText('110 IDR')).toBeInTheDocument();
+
+        expect(screen.getByText('Receive')).toBeInTheDocument();
+        expect(screen.getByText('100 USD')).toBeInTheDocument();
+
+        expect(screen.getByText('Rate (1 USD)')).toBeInTheDocument();
+        expect(screen.getByText('10 IDR')).toBeInTheDocument();
+
+        expect(screen.getByText('Time')).toBeInTheDocument();
+        expect(screen.getByText('2021-09-01 12:00:00')).toBeInTheDocument();
+
+        expect(screen.getByText('ActiveOrderInfo')).toBeInTheDocument();
+    });
+});
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/index.ts b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/index.ts
new file mode 100644
index 000000000000..5ef9ace6967c
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/index.ts
@@ -0,0 +1 @@
+export { default as OrderDetailsCardInfo } from './OrderDetailsCardInfo';
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardReview/OrderDetailsCardReview.tsx b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardReview/OrderDetailsCardReview.tsx
new file mode 100644
index 000000000000..95fbd7ca3162
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardReview/OrderDetailsCardReview.tsx
@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import { StarRating } from '@/components';
+import { useOrderDetails } from '@/providers/OrderDetailsProvider';
+import { getDateAfterHours } from '@/utils';
+import { p2p } from '@deriv/api-v2';
+import { StandaloneStarFillIcon } from '@deriv/quill-icons';
+import { Button, Text, useDevice } from '@deriv-com/ui';
+import { RecommendationStatus } from './RecommendationStatus';
+
+const OrderDetailsCardReview = () => {
+    const { orderDetails } = useOrderDetails();
+    const {
+        completion_time: completionTime,
+        hasReviewDetails,
+        is_reviewable: isReviewable,
+        isCompletedOrder,
+        review_details: reviewDetails,
+    } = orderDetails;
+    const { data: p2pSettingsData } = p2p.settings.useGetSettings();
+    const [remainingReviewTime, setRemainingReviewTime] = useState<string | null>(null);
+    const ratingAverageDecimals = reviewDetails ? Number(Number(reviewDetails.rating).toFixed(1)) : 0;
+    const { isMobile } = useDevice();
+
+    useEffect(() => {
+        if (completionTime && p2pSettingsData?.review_period) {
+            setRemainingReviewTime(getDateAfterHours(completionTime, p2pSettingsData.review_period));
+        }
+    }, [completionTime, p2pSettingsData?.review_period]);
+
+    if (isCompletedOrder && !hasReviewDetails)
+        return (
+            <div className='flex flex-col px-[1.6rem] py-10 gap-3'>
+                <Button
+                    className='border-[1px] gap-[0.2rem] pl-4 pr-[1.4rem] w-fit'
+                    color='black'
+                    disabled={!isReviewable}
+                    icon={<StandaloneStarFillIcon fill='#FFAD3A' height={18} width={18} />}
+                    variant='outlined'
+                >
+                    <Text size={isMobile ? 'sm' : 'xs'}>{isReviewable ? 'Rate this transaction' : 'Not rated'}</Text>
+                </Button>
+                <Text color='less-prominent' size={isMobile ? 'xs' : '2xs'}>
+                    {isReviewable
+                        ? `You have until ${remainingReviewTime} GMT to rate this transaction.`
+                        : 'You can no longer rate this transaction.'}
+                </Text>
+            </div>
+        );
+
+    if (hasReviewDetails) {
+        return (
+            <div className='flex flex-col px-[1.6rem] py-10 gap-4'>
+                <Text weight='bold'>Your transaction experience</Text>
+                <div className='flex justify-between w-4/5 ml-2'>
+                    <StarRating isReadonly ratingValue={ratingAverageDecimals} starsScale={1.2} />
+                    <RecommendationStatus />
+                </div>
+            </div>
+        );
+    }
+
+    return null;
+};
+
+export default OrderDetailsCardReview;
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardReview/RecommendationStatus/RecommendationStatus.tsx b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardReview/RecommendationStatus/RecommendationStatus.tsx
new file mode 100644
index 000000000000..0efe1f759e0d
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardReview/RecommendationStatus/RecommendationStatus.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { useOrderDetails } from '@/providers/OrderDetailsProvider';
+import { StandaloneThumbsDownRegularIcon, StandaloneThumbsUpRegularIcon } from '@deriv/quill-icons';
+import { Text, useDevice } from '@deriv-com/ui';
+
+const RecommendationStatus = () => {
+    const { isMobile } = useDevice();
+    const { orderDetails } = useOrderDetails();
+    const { review_details: reviewDetails } = orderDetails;
+
+    // If the user doesn't select any recommendation, we don't show the recommendation status
+    if (reviewDetails?.recommended === null) return null;
+
+    return (
+        <Text as='div' className='flex items-center gap-1' color='less-prominent' size={isMobile ? 'sm' : 'xs'}>
+            {reviewDetails?.recommended ? (
+                <>
+                    <StandaloneThumbsUpRegularIcon className='mb-[0.3rem]' fill='#4BB4B3' iconSize='sm' />
+                    Recommended
+                </>
+            ) : (
+                <>
+                    <StandaloneThumbsDownRegularIcon fill='#ec3f3f' iconSize='sm' />
+                    Not Recommended
+                </>
+            )}
+        </Text>
+    );
+};
+
+export default RecommendationStatus;
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardReview/RecommendationStatus/index.ts b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardReview/RecommendationStatus/index.ts
new file mode 100644
index 000000000000..2411420784ad
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardReview/RecommendationStatus/index.ts
@@ -0,0 +1 @@
+export { default as RecommendationStatus } from './RecommendationStatus';
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardReview/__tests__/OrderDetailsCardReview.spec.tsx b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardReview/__tests__/OrderDetailsCardReview.spec.tsx
new file mode 100644
index 000000000000..4fcd597b26b4
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardReview/__tests__/OrderDetailsCardReview.spec.tsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import { useOrderDetails } from '@/providers/OrderDetailsProvider';
+import { render, screen } from '@testing-library/react';
+import OrderDetailsCardReview from '../OrderDetailsCardReview';
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({ isMobile: false }),
+}));
+
+jest.mock('@deriv/api-v2', () => ({
+    p2p: {
+        settings: {
+            useGetSettings: jest.fn(() => ({
+                data: { review_period: 24 },
+            })),
+        },
+    },
+}));
+
+jest.mock('@/providers/OrderDetailsProvider', () => ({
+    useOrderDetails: jest.fn().mockReturnValue({
+        orderDetails: {
+            completion_time: 1710897035,
+            hasReviewDetails: false,
+            is_reviewable: true,
+            isCompletedOrder: true,
+            review_details: undefined,
+        },
+    }),
+}));
+
+const mockUseOrderDetails = useOrderDetails as jest.Mock;
+
+describe('<OrderDetailsCardReview />', () => {
+    it('should prompt the user to rate the order if isCompletedOrder is true and hasReviewDetails is false', () => {
+        render(<OrderDetailsCardReview />);
+
+        expect(screen.getByRole('button', { name: 'Rate this transaction' })).toBeInTheDocument();
+        expect(screen.getByText('You have until 21 Mar 2024, 01:10 GMT to rate this transaction.')).toBeInTheDocument();
+    });
+
+    it('should prompt the user that they cannot rate the order if is_reviewable is false', () => {
+        mockUseOrderDetails.mockReturnValue({
+            orderDetails: { ...mockUseOrderDetails().orderDetails, is_reviewable: false },
+        });
+
+        render(<OrderDetailsCardReview />);
+
+        const notRatedButton = screen.getByRole('button', { name: 'Not rated' });
+
+        expect(notRatedButton).toBeInTheDocument();
+        expect(notRatedButton).toBeDisabled();
+        expect(screen.getByText('You can no longer rate this transaction.')).toBeInTheDocument();
+    });
+
+    it('should show review details if hasReviewDetails is true with recommended text of recommended is true', () => {
+        mockUseOrderDetails.mockReturnValue({
+            orderDetails: {
+                ...mockUseOrderDetails().orderDetails,
+                hasReviewDetails: true,
+                review_details: {
+                    rating: 5,
+                    recommended: true,
+                },
+            },
+        });
+
+        render(<OrderDetailsCardReview />);
+
+        expect(screen.getByText('Your transaction experience')).toBeInTheDocument();
+        expect(screen.getByText('Recommended')).toBeInTheDocument();
+    });
+
+    it('should show review details if hasReviewDetails is true with recommended text of Not Recommended is false', () => {
+        mockUseOrderDetails.mockReturnValue({
+            orderDetails: {
+                ...mockUseOrderDetails().orderDetails,
+                hasReviewDetails: true,
+                review_details: {
+                    rating: 5,
+                    recommended: false,
+                },
+            },
+        });
+
+        render(<OrderDetailsCardReview />);
+
+        expect(screen.getByText('Your transaction experience')).toBeInTheDocument();
+        expect(screen.getByText('Not Recommended')).toBeInTheDocument();
+    });
+
+    it('should not show recommended status if recommended is null', () => {
+        mockUseOrderDetails.mockReturnValue({
+            orderDetails: {
+                ...mockUseOrderDetails().orderDetails,
+                hasReviewDetails: true,
+                review_details: {
+                    rating: 5,
+                    recommended: null,
+                },
+            },
+        });
+
+        render(<OrderDetailsCardReview />);
+
+        expect(screen.queryByText('Recommended')).not.toBeInTheDocument();
+        expect(screen.queryByText('Not Recommended')).not.toBeInTheDocument();
+    });
+
+    it('should return null if isCompletedOrder is false and hasReviewDetails is false', () => {
+        mockUseOrderDetails.mockReturnValue({
+            orderDetails: { ...mockUseOrderDetails().orderDetails, hasReviewDetails: false, isCompletedOrder: false },
+        });
+
+        const { container } = render(<OrderDetailsCardReview />);
+
+        expect(container).toBeEmptyDOMElement();
+    });
+});
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardReview/index.ts b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardReview/index.ts
new file mode 100644
index 000000000000..a4539b7ca747
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardReview/index.ts
@@ -0,0 +1 @@
+export { default as OrderDetailsCardReview } from './OrderDetailsCardReview';
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/__tests__/OrderDetailsCard.spec.tsx b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/__tests__/OrderDetailsCard.spec.tsx
new file mode 100644
index 000000000000..51cf49517fde
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/__tests__/OrderDetailsCard.spec.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { useDevice } from '@deriv-com/ui';
+import { render, screen } from '@testing-library/react';
+import OrderDetailsCard from '../OrderDetailsCard';
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn().mockReturnValue({ isDesktop: true }),
+}));
+
+jest.mock('../OrderDetailsCardHeader', () => ({
+    OrderDetailsCardHeader: () => <div>OrderDetailsCardHeader</div>,
+}));
+jest.mock('../OrderDetailsCardInfo', () => ({
+    OrderDetailsCardInfo: () => <div>OrderDetailsCardInfo</div>,
+}));
+jest.mock('../OrderDetailsCardReview', () => ({
+    OrderDetailsCardReview: () => <div>OrderDetailsCardReview</div>,
+}));
+jest.mock('../OrderDetailsCardFooter', () => ({
+    OrderDetailsCardFooter: () => <div>OrderDetailsCardFooter</div>,
+}));
+
+const mockUseDevice = useDevice as jest.Mock;
+
+describe('<OrderDetailsCard />', () => {
+    it('should render the OrderDetailsCard component', () => {
+        render(<OrderDetailsCard />);
+        expect(screen.getByText('OrderDetailsCardHeader')).toBeInTheDocument();
+        expect(screen.getByText('OrderDetailsCardInfo')).toBeInTheDocument();
+        expect(screen.getByText('OrderDetailsCardReview')).toBeInTheDocument();
+        expect(screen.getByText('OrderDetailsCardFooter')).toBeInTheDocument();
+    });
+
+    it('should not render the OrderDetailsCardFooter component on mobile', () => {
+        mockUseDevice.mockReturnValue({ isDesktop: false });
+
+        render(<OrderDetailsCard />);
+
+        expect(screen.queryByText('OrderDetailsCardFooter')).not.toBeInTheDocument();
+    });
+});
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/index.ts b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/index.ts
new file mode 100644
index 000000000000..d7905833858a
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/index.ts
@@ -0,0 +1 @@
+export { default as OrderDetailsCard } from './OrderDetailsCard';
diff --git a/packages/p2p-v2/src/pages/orders/screens/OrderDetails/OrderDetails.scss b/packages/p2p-v2/src/pages/orders/screens/OrderDetails/OrderDetails.scss
new file mode 100644
index 000000000000..e5c53aa60f2a
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/screens/OrderDetails/OrderDetails.scss
@@ -0,0 +1,26 @@
+.p2p-v2-order-details {
+    overflow-y: scroll;
+    overflow-x: hidden;
+    height: calc(100vh - 28rem);
+
+    @include mobile {
+        position: absolute;
+        top: 4rem;
+        height: calc(100vh - 7.4rem);
+
+        & .p2p-v2-mobile-wrapper {
+            &__header {
+                background: #fff;
+            }
+
+            &__body {
+                overflow-y: scroll;
+            }
+
+            &__footer {
+                padding: 0;
+                border: none;
+            }
+        }
+    }
+}
diff --git a/packages/p2p-v2/src/pages/orders/screens/OrderDetails/OrderDetails.tsx b/packages/p2p-v2/src/pages/orders/screens/OrderDetails/OrderDetails.tsx
index 8219e04657f1..24795c2bdb95 100644
--- a/packages/p2p-v2/src/pages/orders/screens/OrderDetails/OrderDetails.tsx
+++ b/packages/p2p-v2/src/pages/orders/screens/OrderDetails/OrderDetails.tsx
@@ -1,14 +1,27 @@
-import React from 'react';
-import { useLocation } from 'react-router-dom';
+import React, { useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { FullPageMobileWrapper, PageReturn } from '@/components';
 import { useExtendedOrderDetails } from '@/hooks';
+import { OrderDetailsProvider } from '@/providers/OrderDetailsProvider';
 import { p2p, useActiveAccount, useServerTime } from '@deriv/api-v2';
+import { Button, InlineMessage, Loader, Text, useDevice } from '@deriv-com/ui';
+import ChatIcon from '../../../../public/ic-chat.svg';
+import { OrderDetailsCard } from '../../components/OrderDetailsCard';
+import { OrderDetailsCardFooter } from '../../components/OrderDetailsCard/OrderDetailsCardFooter';
 import { OrdersChatSection } from '../OrdersChatSection';
+import './OrderDetails.scss';
 
-const OrderDetails = () => {
+type TOrderDetailsProps = {
+    orderId: string;
+};
+
+const OrderDetails = ({ orderId }: TOrderDetailsProps) => {
+    const history = useHistory();
     const location = useLocation();
-    const urlParams = new URLSearchParams(location.search);
-    const orderId = urlParams.get('order') ?? '';
-    const { data: orderInfo } = p2p.order.useGet(orderId);
+    const showChatParam = new URLSearchParams(location.search).get('showChat');
+    const [showChat, setShowChat] = useState(!!showChatParam);
+
+    const { data: orderInfo, failureReason, isError: isErrorOrderInfo, isLoading } = p2p.order.useGet(orderId);
     const { data: activeAccount } = useActiveAccount();
     const { data: serverTime } = useServerTime();
     const { data: orderDetails } = useExtendedOrderDetails({
@@ -16,14 +29,90 @@ const OrderDetails = () => {
         orderDetails: orderInfo,
         serverTime,
     });
+    const { isBuyOrderForUser, shouldShowLostFundsBanner } = orderDetails;
+    const { isMobile } = useDevice();
+
+    const headerText = `${isBuyOrderForUser ? 'Buy' : 'Sell'} USD order`;
+    const warningMessage = 'Don’t risk your funds with cash transactions. Use bank transfers or e-wallets instead.';
+
+    const onReturn = () => history.goBack();
+    const onChatReturn = () => {
+        setShowChat(false);
+        if (showChatParam) onReturn();
+    };
+
+    if (isLoading) return <Loader isFullScreen />;
+
+    // TODO: replace with proper error screen once design is ready
+    if (isErrorOrderInfo) return <Text>{failureReason?.error.message}</Text>;
+
+    if (isMobile) {
+        return (
+            <OrderDetailsProvider value={{ isErrorOrderInfo, orderDetails }}>
+                {showChat ? (
+                    <OrdersChatSection
+                        id={orderId}
+                        isInactive={!!orderDetails?.isInactiveOrder}
+                        onReturn={onChatReturn}
+                        otherUserDetails={orderDetails?.otherUserDetails}
+                    />
+                ) : (
+                    <FullPageMobileWrapper
+                        className='p2p-v2-order-details'
+                        onBack={onReturn}
+                        renderFooter={() => <OrderDetailsCardFooter />}
+                        renderHeader={() => (
+                            <Text as='div' className='w-full flex items-center justify-between' size='lg' weight='bold'>
+                                {headerText}
+                                <Button
+                                    className='h-full p-0'
+                                    color='white'
+                                    data-testid='dt_p2p_v2_order_details_chat_button'
+                                    onClick={() => setShowChat(true)}
+                                    variant='contained'
+                                >
+                                    <ChatIcon className='mt-2' />
+                                </Button>
+                            </Text>
+                        )}
+                    >
+                        {shouldShowLostFundsBanner && (
+                            <InlineMessage
+                                className='w-fit mx-[1.6rem] mt-[1.6rem]'
+                                iconPosition='top'
+                                variant='warning'
+                            >
+                                <Text size='xs'>{warningMessage}</Text>
+                            </InlineMessage>
+                        )}
+                        <OrderDetailsCard />
+                    </FullPageMobileWrapper>
+                )}
+            </OrderDetailsProvider>
+        );
+    }
+
     return (
-        <div className='grid grid-cols-none lg:grid-cols-2'>
-            <OrdersChatSection
-                id={orderId}
-                isInactive={!!orderDetails?.isInactiveOrder}
-                otherUserDetails={orderDetails?.otherUserDetails}
-            />
-        </div>
+        <OrderDetailsProvider value={{ isErrorOrderInfo, orderDetails }}>
+            <div className='w-full'>
+                <PageReturn onClick={onReturn} pageTitle={headerText} weight='bold' />
+                <div className='p2p-v2-order-details'>
+                    {shouldShowLostFundsBanner && (
+                        <InlineMessage className='w-fit mb-6' variant='warning'>
+                            <Text size='2xs'>{warningMessage}</Text>
+                        </InlineMessage>
+                    )}
+                    <div className='grid grid-cols-none lg:grid-cols-2 lg:gap-14'>
+                        <OrderDetailsCard />
+                        <OrdersChatSection
+                            id={orderId}
+                            isInactive={!!orderDetails?.isInactiveOrder}
+                            otherUserDetails={orderDetails?.otherUserDetails}
+                        />
+                    </div>
+                </div>
+            </div>
+        </OrderDetailsProvider>
     );
 };
 
diff --git a/packages/p2p-v2/src/pages/orders/screens/OrderDetails/__tests__/OrderDetails.spec.tsx b/packages/p2p-v2/src/pages/orders/screens/OrderDetails/__tests__/OrderDetails.spec.tsx
new file mode 100644
index 000000000000..c1b42cb41f4a
--- /dev/null
+++ b/packages/p2p-v2/src/pages/orders/screens/OrderDetails/__tests__/OrderDetails.spec.tsx
@@ -0,0 +1,174 @@
+import React from 'react';
+import { useExtendedOrderDetails } from '@/hooks';
+import { p2p } from '@deriv/api-v2';
+import { useDevice } from '@deriv-com/ui';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import OrderDetails from '../OrderDetails';
+
+const mockHistoryPush = jest.fn();
+let mockSearch = '';
+
+jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useHistory: () => ({
+        goBack: mockHistoryPush,
+    }),
+    useLocation: () => ({
+        search: mockSearch,
+    }),
+}));
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn().mockReturnValue({ isMobile: false }),
+}));
+
+jest.mock('@deriv/api-v2', () => ({
+    p2p: {
+        order: {
+            useGet: jest.fn().mockReturnValue({
+                data: {},
+                failureReason: {},
+                isError: false,
+                isLoading: true,
+            }),
+        },
+    },
+    useActiveAccount: jest.fn(() => ({
+        data: {
+            currency: 'USD',
+        },
+    })),
+    useServerTime: jest.fn(() => ({
+        data: {
+            server_time: 1626864000,
+        },
+    })),
+}));
+
+jest.mock('@/hooks', () => ({
+    useExtendedOrderDetails: jest.fn().mockReturnValue({
+        data: {
+            isBuyOrderForUser: true,
+            shouldShowLostFundsBanner: true,
+        },
+    }),
+    useSendbird: () => ({
+        isOnline: true,
+        lastOnlineTime: 123546789,
+        nickname: 'John Doe',
+    }),
+}));
+
+jest.mock('../../../components/OrderDetailsCard', () => ({
+    OrderDetailsCard: () => <div>OrderDetailsCard</div>,
+}));
+jest.mock('../../../components/OrderDetailsCard/OrderDetailsCardFooter', () => ({
+    OrderDetailsCardFooter: () => <div>OrderDetailsCardFooter</div>,
+}));
+jest.mock('../../../components/ChatFooter', () => ({
+    ChatFooter: () => <div>ChatFooter</div>,
+}));
+jest.mock('../../../components/ChatMessages', () => ({
+    ChatMessages: () => <div>ChatMessages</div>,
+}));
+
+const mockUseDevice = useDevice as jest.Mock;
+const mockUseGet = p2p.order.useGet as jest.Mock;
+const mockUseExtendedOrderDetails = useExtendedOrderDetails as jest.Mock;
+
+describe('<OrderDetails />', () => {
+    it('should show loading screen if isLoading is true', () => {
+        render(<OrderDetails orderId='1' />);
+
+        expect(screen.getByTestId('dt_derivs-loader')).toBeInTheDocument();
+    });
+
+    it('should render Desktop view if isMobile is false', () => {
+        mockUseGet.mockReturnValue({
+            data: {},
+            isLoading: false,
+        });
+
+        render(<OrderDetails orderId='1' />);
+
+        expect(screen.getByText('Buy USD order')).toBeInTheDocument();
+        expect(
+            screen.getByText('Don’t risk your funds with cash transactions. Use bank transfers or e-wallets instead.')
+        ).toBeInTheDocument();
+        expect(screen.getByText('OrderDetailsCard')).toBeInTheDocument();
+        expect(screen.getByText('ChatMessages')).toBeInTheDocument();
+        expect(screen.getByText('ChatFooter')).toBeInTheDocument();
+    });
+
+    it('should call goBack when back button is clicked', () => {
+        render(<OrderDetails orderId='1' />);
+
+        const backButton = screen.getByTestId('dt_p2p_v2_page_return_btn');
+        userEvent.click(backButton);
+
+        expect(mockHistoryPush).toHaveBeenCalled();
+    });
+
+    it('should render Mobile view if isMobile is true', () => {
+        mockUseDevice.mockReturnValue({ isMobile: true });
+
+        render(<OrderDetails orderId='1' />);
+
+        expect(screen.getByText('Buy USD order')).toBeInTheDocument();
+        expect(screen.getByText('OrderDetailsCard')).toBeInTheDocument();
+        expect(screen.queryByText('ChatMessages')).not.toBeInTheDocument();
+        expect(screen.queryByText('ChatFooter')).not.toBeInTheDocument();
+    });
+
+    it('should show OrdersChatSection if Chat icon is clicked', () => {
+        render(<OrderDetails orderId='1' />);
+
+        const chatButton = screen.getByTestId('dt_p2p_v2_order_details_chat_button');
+        userEvent.click(chatButton);
+
+        expect(screen.getByText('ChatMessages')).toBeInTheDocument();
+        expect(screen.getByText('ChatFooter')).toBeInTheDocument();
+        expect(screen.queryByText('OrderDetailsCard')).not.toBeInTheDocument();
+    });
+
+    it('should call goBack when back button is clicked in mobile view and showChat is true in search param', () => {
+        mockSearch = '?showChat=true';
+
+        render(<OrderDetails orderId='1' />);
+
+        const backButton = screen.getByTestId('dt_p2p_v2_mobile_wrapper_button');
+        userEvent.click(backButton);
+
+        expect(mockHistoryPush).toHaveBeenCalled();
+
+        mockSearch = '';
+    });
+
+    it('should show Sell USD order if isBuyOrderForUser is false', () => {
+        mockUseExtendedOrderDetails.mockReturnValue({
+            data: {
+                isBuyOrderForUser: false,
+                shouldShowLostFundsBanner: true,
+            },
+        });
+
+        render(<OrderDetails orderId='1' />);
+
+        expect(screen.getByText('Sell USD order')).toBeInTheDocument();
+    });
+
+    it('should show error message if isError is true', () => {
+        mockUseGet.mockReturnValue({
+            data: {},
+            failureReason: { error: { message: 'error message' } },
+            isError: true,
+            isLoading: false,
+        });
+
+        render(<OrderDetails orderId='1' />);
+
+        expect(screen.getByText('error message')).toBeInTheDocument();
+    });
+});
diff --git a/packages/p2p-v2/src/pages/orders/screens/Orders/Orders.tsx b/packages/p2p-v2/src/pages/orders/screens/Orders/Orders.tsx
index b31c49c36236..15d4297e0c8b 100644
--- a/packages/p2p-v2/src/pages/orders/screens/Orders/Orders.tsx
+++ b/packages/p2p-v2/src/pages/orders/screens/Orders/Orders.tsx
@@ -1,12 +1,16 @@
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 import { ORDERS_STATUS } from '@/constants';
 import { useQueryString } from '@/hooks';
 import { p2p } from '@deriv/api-v2';
 import { Divider, useDevice } from '@deriv-com/ui';
+import { OrderDetails } from '../OrderDetails';
 import { OrdersTable } from './OrdersTable';
 import { OrdersTableHeader } from './OrdersTableHeader';
 
 const Orders = () => {
+    const location = useLocation();
+    const orderId = new URLSearchParams(location.search).get('order');
     const { queryString } = useQueryString();
     const { isMobile } = useDevice();
     const currentTab = queryString.tab ?? ORDERS_STATUS.ACTIVE_ORDERS;
@@ -16,7 +20,9 @@ const Orders = () => {
         isFetching,
         isLoading,
         loadMoreOrders,
-    } = p2p.order.useGetList({ active: currentTab === ORDERS_STATUS.ACTIVE_ORDERS ? 1 : 0 });
+    } = p2p.order.useGetList({ active: currentTab === ORDERS_STATUS.ACTIVE_ORDERS ? 1 : 0 }, { enabled: !orderId });
+
+    if (orderId) return <OrderDetails orderId={orderId} />;
 
     return (
         <>
diff --git a/packages/p2p-v2/src/pages/orders/screens/Orders/OrdersTable/OrdersTable.scss b/packages/p2p-v2/src/pages/orders/screens/Orders/OrdersTable/OrdersTable.scss
index 5227354c2521..20ffefb628c2 100644
--- a/packages/p2p-v2/src/pages/orders/screens/Orders/OrdersTable/OrdersTable.scss
+++ b/packages/p2p-v2/src/pages/orders/screens/Orders/OrdersTable/OrdersTable.scss
@@ -4,8 +4,14 @@
             grid-template-columns: 1fr 1.5fr 2fr 3fr 1.5fr 1.5fr 1.5fr;
         }
 
-        &__content__row {
-            border-bottom: 1px solid #f2f3f4;
+        &__content {
+            @include mobile {
+                height: calc(100vh - 19.5rem);
+            }
+
+            &__row {
+                border-bottom: 1px solid #f2f3f4;
+            }
         }
     }
 
diff --git a/packages/p2p-v2/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.scss b/packages/p2p-v2/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.scss
index afd67fb5efe2..3c82d35a5365 100644
--- a/packages/p2p-v2/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.scss
+++ b/packages/p2p-v2/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.scss
@@ -2,6 +2,8 @@
     display: grid;
     align-items: center;
     grid-template-columns: 1fr 1.5fr 2fr 3fr 1.5fr 1.5fr 1.5fr;
+    cursor: pointer;
+
     &--inactive {
         grid-template-columns: 2fr 1fr 1.5fr 2fr 3fr 1.5fr 1.5fr 2fr;
         gap: 1rem;
diff --git a/packages/p2p-v2/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.tsx b/packages/p2p-v2/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.tsx
index 5132489d711d..ec7370b9d64f 100644
--- a/packages/p2p-v2/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.tsx
+++ b/packages/p2p-v2/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.tsx
@@ -43,10 +43,11 @@ const OrdersTableRow = ({ ...props }: THooks.Order.GetList[number]) => {
     const isBuyOrderForUser = orderDetails.isBuyOrderForUser;
     const transactionAmount = `${Number(priceDisplay).toFixed(2)} ${localCurrency}`;
     const offerAmount = `${amountDisplay} ${accountCurrency}`;
+    const showOrderDetails = () => history.push(`${BASE_URL}/orders?order=${id}`);
 
     if (isMobile) {
         return (
-            <div className='flex flex-col'>
+            <div className='flex flex-col' onClick={showOrderDetails}>
                 <div className='flex justify-between'>
                     <Text size='sm' weight='bold'>
                         <OrderStatusTag
@@ -63,7 +64,10 @@ const OrdersTableRow = ({ ...props }: THooks.Order.GetList[number]) => {
                             <Button
                                 className='h-full p-0'
                                 color='white'
-                                onClick={() => history.push(`${BASE_URL}/orders?order=${id}`)}
+                                onClick={event => {
+                                    event.stopPropagation();
+                                    history.push(`${BASE_URL}/orders?order=${id}&showChat=true`);
+                                }}
                                 variant='contained'
                             >
                                 <ChatIcon />
@@ -86,8 +90,8 @@ const OrdersTableRow = ({ ...props }: THooks.Order.GetList[number]) => {
 
     return (
         <div
-            className={clsx('p2p-v2-orders-table-row cursor-pointer', { 'p2p-v2-orders-table-row--inactive': isPast })}
-            onClick={() => history.push(`${BASE_URL}/orders?order=${id}`)}
+            className={clsx('p2p-v2-orders-table-row', { 'p2p-v2-orders-table-row--inactive': isPast })}
+            onClick={showOrderDetails}
         >
             {isPast && <Text size='sm'>{purchaseTime}</Text>}
             <Text size='sm'>{isBuyOrderForUser ? 'Buy' : 'Sell'}</Text>
diff --git a/packages/p2p-v2/src/pages/orders/screens/Orders/__tests__/Orders.spec.tsx b/packages/p2p-v2/src/pages/orders/screens/Orders/__tests__/Orders.spec.tsx
index e2cd06e3dda2..34d5ea628c0f 100644
--- a/packages/p2p-v2/src/pages/orders/screens/Orders/__tests__/Orders.spec.tsx
+++ b/packages/p2p-v2/src/pages/orders/screens/Orders/__tests__/Orders.spec.tsx
@@ -2,6 +2,15 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import Orders from '../Orders';
 
+let mockSearch = '?order=1';
+
+jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useLocation: () => ({
+        search: mockSearch,
+    }),
+}));
+
 jest.mock('@deriv/api-v2', () => ({
     p2p: {
         order: {
@@ -27,14 +36,26 @@ jest.mock('../OrdersTableHeader', () => ({
     OrdersTableHeader: () => <div>OrdersTableHeader</div>,
 }));
 
+jest.mock('../../OrderDetails', () => ({
+    OrderDetails: () => <div>OrderDetails</div>,
+}));
+
 jest.mock('@deriv-com/ui', () => ({
     useDevice: () => ({ isMobile: false }),
 }));
 
 describe('Orders', () => {
-    it('should render Orders comopnent', () => {
+    it('should render OrderDetails if order id is in the search query', () => {
         render(<Orders />);
-        expect(screen.getByText('OrdersTable')).toBeInTheDocument();
+        expect(screen.getByText('OrderDetails')).toBeInTheDocument();
+    });
+
+    it('should render the OrdersTable if order id is not in the search query', () => {
+        mockSearch = '';
+
+        render(<Orders />);
+
         expect(screen.getByText('OrdersTableHeader')).toBeInTheDocument();
+        expect(screen.getByText('OrdersTable')).toBeInTheDocument();
     });
 });
diff --git a/packages/p2p-v2/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.tsx b/packages/p2p-v2/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.tsx
index 23f1e3004a45..1d3009b94ffe 100644
--- a/packages/p2p-v2/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.tsx
+++ b/packages/p2p-v2/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
 import { FullPageMobileWrapper } from '@/components';
 import { useExtendedOrderDetails, useSendbird } from '@/hooks';
 import { Divider, Loader, useDevice } from '@deriv-com/ui';
@@ -9,12 +8,12 @@ import './OrdersChatSection.scss';
 type TOrdersChatSectionProps = {
     id: string;
     isInactive: boolean;
+    onReturn?: () => void;
     otherUserDetails: ReturnType<typeof useExtendedOrderDetails>['data']['otherUserDetails'];
 };
 
-const OrdersChatSection = ({ id, isInactive, otherUserDetails }: TOrdersChatSectionProps) => {
+const OrdersChatSection = ({ id, isInactive, onReturn, otherUserDetails }: TOrdersChatSectionProps) => {
     const { isMobile } = useDevice();
-    const history = useHistory();
     const { is_online: isOnline, last_online_time: lastOnlineTime, name } = otherUserDetails ?? {};
     const { activeChatChannel, isChatLoading, isError, messages, refreshChat, sendFile, sendMessage, userId } =
         useSendbird(id);
@@ -32,7 +31,7 @@ const OrdersChatSection = ({ id, isInactive, otherUserDetails }: TOrdersChatSect
             <FullPageMobileWrapper
                 className='p2p-v2-orders-chat-section__full-page'
                 //TODO: handle goback based on route
-                onBack={() => history.goBack()}
+                onBack={onReturn}
                 renderFooter={() => (
                     <ChatFooter
                         isClosed={isInactive || !!activeChatChannel?.isFrozen}
diff --git a/packages/p2p-v2/src/providers/OrderDetailsProvider/OrderDetailsProvider.tsx b/packages/p2p-v2/src/providers/OrderDetailsProvider/OrderDetailsProvider.tsx
new file mode 100644
index 000000000000..6d8a076ca925
--- /dev/null
+++ b/packages/p2p-v2/src/providers/OrderDetailsProvider/OrderDetailsProvider.tsx
@@ -0,0 +1,21 @@
+import React, { createContext, PropsWithChildren, useContext } from 'react';
+import { useExtendedOrderDetails } from '@/hooks';
+
+type TOrderDetails = ReturnType<typeof useExtendedOrderDetails>['data'];
+
+type TContextValue = {
+    isErrorOrderInfo: boolean;
+    orderDetails: TOrderDetails;
+};
+
+const OrderDetailsContext = createContext<TContextValue>({} as TContextValue);
+
+type TOrderDetailsProviderProps = {
+    value: TContextValue;
+};
+
+export const OrderDetailsProvider = ({ children, value }: PropsWithChildren<TOrderDetailsProviderProps>) => (
+    <OrderDetailsContext.Provider value={value}>{children}</OrderDetailsContext.Provider>
+);
+
+export const useOrderDetails = (): TContextValue => useContext(OrderDetailsContext);
diff --git a/packages/p2p-v2/src/providers/OrderDetailsProvider/__tests__/OrderDetailsProvider.spec.tsx b/packages/p2p-v2/src/providers/OrderDetailsProvider/__tests__/OrderDetailsProvider.spec.tsx
new file mode 100644
index 000000000000..3fe297a22eda
--- /dev/null
+++ b/packages/p2p-v2/src/providers/OrderDetailsProvider/__tests__/OrderDetailsProvider.spec.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { OrderDetailsProvider, useOrderDetails } from '../OrderDetailsProvider';
+
+describe('useOrderDetails', () => {
+    it('should return the orderDetails from context', () => {
+        const mockValues = { isErrorOrderInfo: false, orderDetails: 'mockOrderDetails' };
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <OrderDetailsProvider value={mockValues}>{children}</OrderDetailsProvider>
+        );
+
+        const { result } = renderHook(() => useOrderDetails(), { wrapper });
+
+        expect(result.current).toEqual(mockValues);
+    });
+});
diff --git a/packages/p2p-v2/src/providers/OrderDetailsProvider/index.ts b/packages/p2p-v2/src/providers/OrderDetailsProvider/index.ts
new file mode 100644
index 000000000000..59e1bfdd6cfe
--- /dev/null
+++ b/packages/p2p-v2/src/providers/OrderDetailsProvider/index.ts
@@ -0,0 +1 @@
+export { OrderDetailsProvider, useOrderDetails } from './OrderDetailsProvider';
diff --git a/packages/p2p-v2/src/routes/AppContent/index.tsx b/packages/p2p-v2/src/routes/AppContent/index.tsx
index 901ecf11ad30..bd7c6c3b37c9 100644
--- a/packages/p2p-v2/src/routes/AppContent/index.tsx
+++ b/packages/p2p-v2/src/routes/AppContent/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 import { useEventListener } from 'usehooks-ts';
 import { CloseHeader } from '@/components';
 import { Advertiser, BuySell, MyAds, MyProfile, Orders } from '@/pages';
@@ -28,6 +28,7 @@ const pathToTitleMapper = Object.fromEntries(tabRoutesConfiguration.map(route =>
 
 const AppContent = () => {
     const history = useHistory();
+    const location = useLocation();
     const { data: activeAccountData, isLoading } = useActiveAccount();
     const [activeTab, setActiveTab] = useState(() => pathToTitleMapper[getCurrentRoute() || DEFAULT_TAB]);
     const { subscribe } = p2p.settings.useGetSettings();
@@ -36,6 +37,11 @@ const AppContent = () => {
         if (activeAccountData) subscribe();
     }, [activeAccountData, subscribe]);
 
+    useEffect(() => {
+        const endPath = getCurrentRoute();
+        if (endPath) setActiveTab(pathToTitleMapper[endPath]);
+    }, [location]);
+
     useEventListener('switchTab', event => {
         setActiveTab(pathToTitleMapper[event.detail.tab]);
         history.push(`/cashier/p2p-v2/${event.detail.tab}`);
diff --git a/packages/p2p-v2/src/utils/time.ts b/packages/p2p-v2/src/utils/time.ts
index 48d58d398ef6..bb22bcc5b562 100644
--- a/packages/p2p-v2/src/utils/time.ts
+++ b/packages/p2p-v2/src/utils/time.ts
@@ -148,3 +148,17 @@ export const formatMilliseconds = (miliseconds: moment.MomentInput, strFormat: s
     }
     return moment.utc(miliseconds).format(strFormat);
 };
+
+/**
+ * Gets the date string after the given number of hours.
+ * @param {Number} initialEpoch - The initial epoch time.
+ * @param {Number} hours - The number of hours to add.
+ * @returns {String} The date string after the given number of hours.
+ */
+export const getDateAfterHours = (initialEpoch: number, hours: number): string => {
+    const milliseconds = hours * 60 * 60 * 1000;
+    const initialDayMilliseconds = convertToMillis(initialEpoch);
+    const totalMilliseconds = initialDayMilliseconds + milliseconds;
+
+    return getFormattedDateString(new Date(totalMilliseconds));
+};