From c0c35326926f7919d9cda48ff57875297567431b Mon Sep 17 00:00:00 2001 From: ameerul-deriv Date: Mon, 29 Apr 2024 15:50:54 +0800 Subject: [PATCH] feat: added OrderDetailsCancelModal --- src/components/BuySellForm/BuySellForm.scss | 2 +- src/components/BuySellForm/BuySellForm.tsx | 2 +- .../OrderDetailsCancelModal.scss | 9 +++ .../OrderDetailsCancelModal.tsx | 57 +++++++++++++++++++ .../Modals/OrderDetailsCancelModal/index.ts | 1 + .../OrderDetailsComplainModal.tsx | 2 +- src/components/Modals/index.ts | 1 + src/main.scss | 1 + .../OrderDetailsCardFooter.tsx | 16 +++++- .../screens/OrderDetails/OrderDetails.scss | 5 +- .../screens/OrderDetails/OrderDetails.tsx | 8 ++- .../Orders/OrdersTableRow/OrdersTableRow.tsx | 2 +- 12 files changed, 96 insertions(+), 10 deletions(-) create mode 100644 src/components/Modals/OrderDetailsCancelModal/OrderDetailsCancelModal.scss create mode 100644 src/components/Modals/OrderDetailsCancelModal/OrderDetailsCancelModal.tsx create mode 100644 src/components/Modals/OrderDetailsCancelModal/index.ts diff --git a/src/components/BuySellForm/BuySellForm.scss b/src/components/BuySellForm/BuySellForm.scss index a0ffcbd2..ce12eed8 100644 --- a/src/components/BuySellForm/BuySellForm.scss +++ b/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; diff --git a/src/components/BuySellForm/BuySellForm.tsx b/src/components/BuySellForm/BuySellForm.tsx index ce54761a..31913781 100644 --- a/src/components/BuySellForm/BuySellForm.tsx +++ b/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]); diff --git a/src/components/Modals/OrderDetailsCancelModal/OrderDetailsCancelModal.scss b/src/components/Modals/OrderDetailsCancelModal/OrderDetailsCancelModal.scss new file mode 100644 index 00000000..3af4c3e9 --- /dev/null +++ b/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; + } +} diff --git a/src/components/Modals/OrderDetailsCancelModal/OrderDetailsCancelModal.tsx b/src/components/Modals/OrderDetailsCancelModal/OrderDetailsCancelModal.tsx new file mode 100644 index 00000000..a9202abf --- /dev/null +++ b/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 ( + + + Do you want to cancel this order? + + + + 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. +
({advertiserInfo.cancels_remaining} cancellations remaining) + + + Please do not cancel if you have already made payment. + + + + + + + + ); +}; + +export default OrderDetailsCancelModal; diff --git a/src/components/Modals/OrderDetailsCancelModal/index.ts b/src/components/Modals/OrderDetailsCancelModal/index.ts new file mode 100644 index 00000000..9cd3682b --- /dev/null +++ b/src/components/Modals/OrderDetailsCancelModal/index.ts @@ -0,0 +1 @@ +export { default as OrderDetailsCancelModal } from './OrderDetailsCancelModal'; diff --git a/src/components/Modals/OrderDetailsComplainModal/OrderDetailsComplainModal.tsx b/src/components/Modals/OrderDetailsComplainModal/OrderDetailsComplainModal.tsx index 54e2e51a..c9c01031 100644 --- a/src/components/Modals/OrderDetailsComplainModal/OrderDetailsComplainModal.tsx +++ b/src/components/Modals/OrderDetailsComplainModal/OrderDetailsComplainModal.tsx @@ -82,7 +82,7 @@ const OrderDetailsComplainModal = ({ const onCheckboxChange = (reason: string) => setDisputeReason(reason); - if (isMobile) + if (isMobile && isModalOpen) return ( {
{shouldShowCancelAndPaidButton && (
-
); }; diff --git a/src/pages/orders/screens/OrderDetails/OrderDetails.scss b/src/pages/orders/screens/OrderDetails/OrderDetails.scss index f9ef4474..a0786e1c 100644 --- a/src/pages/orders/screens/OrderDetails/OrderDetails.scss +++ b/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 { diff --git a/src/pages/orders/screens/OrderDetails/OrderDetails.tsx b/src/pages/orders/screens/OrderDetails/OrderDetails.tsx index 640b009c..e191a823 100644 --- a/src/pages/orders/screens/OrderDetails/OrderDetails.tsx +++ b/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(); diff --git a/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.tsx b/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.tsx index 3ea371cc..e526bc7e 100644 --- a/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.tsx +++ b/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.tsx @@ -43,7 +43,7 @@ const OrdersTableRow = ({ ...props }: DeepPartial) 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 (