feat: added OrderDetailsCancelModal

src/components/BuySellForm/BuySellForm.scss

@@ -30,7 +30,7 @@
         top: -4rem;
         left: 0;
         z-index: 1;
-        height: calc(100vh - 8rem);
+        height: calc(100vh - 4rem);
 
         & .mobile-wrapper__body {
             overflow: auto;

src/components/BuySellForm/BuySellForm.tsx

@@ -150,7 +150,7 @@ const BuySellForm = ({
 
     useEffect(() => {
         if (isSuccess && orderCreatedInfo) {
-            history.push(`${ORDERS_URL}/${orderCreatedInfo.id}`);
+            history.push(`${ORDERS_URL}/${orderCreatedInfo.id}`, { from: 'BuySell' });
             onRequestClose();
         }
     }, [isSuccess, orderCreatedInfo, history, onRequestClose]);

src/components/Modals/OrderDetailsCancelModal/OrderDetailsCancelModal.scss

@@ -0,0 +1,9 @@
+.order-details-cancel-modal {
+    height: auto;
+    width: 44rem;
+    border-radius: 8px;
+
+    @include mobile {
+        width: 32.8rem;
+    }
+}

src/components/Modals/OrderDetailsCancelModal/OrderDetailsCancelModal.tsx

@@ -0,0 +1,57 @@
+import { api } from '@/hooks';
+import { Button, Modal, Text, useDevice } from '@deriv-com/ui';
+import './OrderDetailsCancelModal.scss';
+
+type TOrderDetailsCancelModalProps = {
+    id: string;
+    isModalOpen: boolean;
+    onRequestClose: () => void;
+};
+
+const OrderDetailsCancelModal = ({ id, isModalOpen, onRequestClose }: TOrderDetailsCancelModalProps) => {
+    const { data } = api.settings.useSettings();
+    const { data: advertiserInfo } = api.advertiser.useGetInfo();
+    const { mutate } = api.order.useCancel();
+    const { isMobile } = useDevice();
+    const textSize = isMobile ? 'md' : 'sm';
+
+    const onCancel = () => {
+        mutate({ id });
+        onRequestClose();
+    };
+
+    return (
+        <Modal className='order-details-cancel-modal' isOpen={isModalOpen}>
+            <Modal.Header className='lg:px-[2.4rem] px-[1.6rem]' hideBorder hideCloseIcon>
+                <Text weight='bold'>Do you want to cancel this order?</Text>
+            </Modal.Header>
+            <Modal.Body className='flex flex-col gap-2 lg:px-[2.4rem] px-[1.6rem]'>
+                <Text size='sm'>
+                    If you cancel your order {data?.cancellation_limit} times in {data?.cancellation_count_period}{' '}
+                    hours, you will be blocked from using Deriv P2P for {data?.cancellation_block_duration} hours.
+                    <br />({advertiserInfo.cancels_remaining} cancellations remaining)
+                </Text>
+                <Text color='error' size='sm'>
+                    Please do not cancel if you have already made payment.
+                </Text>
+            </Modal.Body>
+            <Modal.Footer className='gap-4 lg:px-[2.4rem] px-[1.6rem]' hideBorder>
+                <Button
+                    className='border-2'
+                    color='black'
+                    onClick={onCancel}
+                    size='lg'
+                    textSize={textSize}
+                    variant='outlined'
+                >
+                    Cancel this order
+                </Button>
+                <Button onClick={onRequestClose} size='lg' textSize={textSize}>
+                    Do not cancel
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+};
+
+export default OrderDetailsCancelModal;

src/components/Modals/OrderDetailsCancelModal/index.ts

@@ -0,0 +1 @@
+export { default as OrderDetailsCancelModal } from './OrderDetailsCancelModal';

src/components/Modals/OrderDetailsComplainModal/OrderDetailsComplainModal.tsx

@@ -82,7 +82,7 @@ const OrderDetailsComplainModal = ({
 
     const onCheckboxChange = (reason: string) => setDisputeReason(reason);
 
-    if (isMobile)
+    if (isMobile && isModalOpen)
         return (
             <FullPageMobileWrapper
                 className='order-details-complain-modal'

src/components/Modals/index.ts

@@ -12,6 +12,7 @@ export * from './ErrorModal';
 export * from './FilterModal';
 export * from './MyAdsDeleteModal';
 export * from './NicknameModal';
+export * from './OrderDetailsCancelModal';
 export * from './OrderDetailsComplainModal';
 export * from './OrderDetailsConfirmModal';
 export * from './OrderTimeTooltipModal';

src/main.scss

@@ -8,4 +8,5 @@ html,
 body {
     font-family: 'IBM Plex Sans', sans-serif;
     font-size: 10px;
+    overflow: hidden;
 }

src/pages/orders/components/OrderDetailsCard/OrderDetailsCardFooter/OrderDetailsCardFooter.tsx

@@ -1,4 +1,4 @@
-import { OrderDetailsComplainModal } from '@/components/Modals';
+import { OrderDetailsCancelModal, OrderDetailsComplainModal } from '@/components/Modals';
 import { useModalManager } from '@/hooks/custom-hooks';
 import { useOrderDetails } from '@/providers/OrderDetailsProvider';
 import { Button, useDevice } from '@deriv-com/ui';
@@ -32,7 +32,14 @@ const OrderDetailsCardFooter = () => {
         <div className='order-details-card-footer'>
             {shouldShowCancelAndPaidButton && (
                 <div className='flex gap-3 ml-auto'>
-                    <Button className='border-2' color='black' size='lg' textSize={textSize} variant='outlined'>
+                    <Button
+                        className='border-2'
+                        color='black'
+                        onClick={() => showModal('OrderDetailsCancelModal')}
+                        size='lg'
+                        textSize={textSize}
+                        variant='outlined'
+                    >
                         Cancel order
                     </Button>
                     <Button size='lg' textSize={textSize}>
@@ -84,6 +91,11 @@ const OrderDetailsCardFooter = () => {
                 isModalOpen={!!isModalOpenFor('OrderDetailsComplainModal')}
                 onRequestClose={hideModal}
             />
+            <OrderDetailsCancelModal
+                id={id}
+                isModalOpen={!!isModalOpenFor('OrderDetailsCancelModal')}
+                onRequestClose={hideModal}
+            />
         </div>
     );
 };

src/pages/orders/screens/OrderDetails/OrderDetails.scss

@@ -1,12 +1,11 @@
 .order-details {
-    overflow-y: scroll;
-    overflow-x: hidden;
+    overflow: overlay;
     height: calc(100vh - 28rem);
 
     @include mobile {
         position: absolute;
         top: 4rem;
-        height: calc(100vh - 7.4rem);
+        height: calc(100vh - 3.5rem);
 
         & .mobile-wrapper {
             &__header {

src/pages/orders/screens/OrderDetails/OrderDetails.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { FullPageMobileWrapper, PageReturn } from '@/components';
+import { BUY_SELL_URL, ORDERS_URL } from '@/constants';
 import { api } from '@/hooks';
 import { useExtendedOrderDetails } from '@/hooks/custom-hooks';
 import { ExtendedOrderDetails } from '@/hooks/custom-hooks/useExtendedOrderDetails';
@@ -35,7 +36,12 @@ const OrderDetails = () => {
     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 onReturn = () => {
+        if ((location.state as { from: string })?.from === 'Orders') history.push(ORDERS_URL);
+        else if ((location.state as { from: string })?.from === 'BuySell') history.push(BUY_SELL_URL);
+        else history.goBack();
+    };
+
     const onChatReturn = () => {
         setShowChat(false);
         if (showChatParam) onReturn();

src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.tsx

@@ -43,7 +43,7 @@ const OrdersTableRow = ({ ...props }: DeepPartial<THooks.Order.GetList[number]>)
     const isBuyOrderForUser = orderDetails.isBuyOrderForUser;
     const transactionAmount = `${Number(priceDisplay).toFixed(2)} ${localCurrency}`;
     const offerAmount = `${amountDisplay} ${accountCurrency}`;
-    const showOrderDetails = () => history.push(`${ORDERS_URL}/${id}`);
+    const showOrderDetails = () => history.push(`${ORDERS_URL}/${id}`, { from: 'Orders' });
 
     if (isMobile) {
         return (