From 4fd6286d13d1d8f094a71c64bcf78c2ba3d60e50 Mon Sep 17 00:00:00 2001 From: Nada Date: Thu, 13 Jun 2024 12:56:27 +0400 Subject: [PATCH 1/4] fix: style issues with orders --- src/App.tsx | 13 ++++++++----- src/hooks/custom-hooks/useSendbird.ts | 2 +- .../ChatMessageReceipt/ChatMessageReceipt.tsx | 4 ++-- .../components/ChatMessages/ChatMessages.scss | 10 ++++++++-- .../orders/screens/OrderDetails/OrderDetails.scss | 2 +- .../orders/screens/OrderDetails/OrderDetails.tsx | 2 +- .../OrdersChatSection/OrdersChatSection.scss | 8 +++++++- .../screens/OrdersChatSection/OrdersChatSection.tsx | 4 ++-- vite.config.ts | 3 +++ 9 files changed, 33 insertions(+), 15 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 6672603f..ee293338 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,3 +1,4 @@ +import { Suspense } from 'react'; import { BrowserRouter } from 'react-router-dom'; import { QueryParamProvider } from 'use-query-params'; import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5'; @@ -5,7 +6,7 @@ import { AppFooter, AppHeader, DerivIframe } from '@/components'; import { useRedirectToOauth } from '@/hooks'; import AppContent from '@/routes/AppContent'; import { initializeI18n, TranslationProvider } from '@deriv-com/translations'; -import { useDevice } from '@deriv-com/ui'; +import { Loader, useDevice } from '@deriv-com/ui'; const { VITE_CROWDIN_BRANCH_NAME, VITE_PROJECT_NAME, VITE_TRANSLATIONS_CDN_URL } = import.meta.env; const i18nInstance = initializeI18n({ @@ -22,10 +23,12 @@ const App = () => { - - - - {isDesktop && } + }> + + + + {isDesktop && } + diff --git a/src/hooks/custom-hooks/useSendbird.ts b/src/hooks/custom-hooks/useSendbird.ts index 8ba7135f..771d7be9 100644 --- a/src/hooks/custom-hooks/useSendbird.ts +++ b/src/hooks/custom-hooks/useSendbird.ts @@ -74,7 +74,7 @@ function createChatMessage(sendbirdMessage: BaseMessage): ChatMessage { const useSendbird = (orderId: string | undefined, isErrorOrderInfo: boolean, chatChannelUrl: string) => { const sendbirdApiRef = useRef>>(); - const [isChatLoading, setIsChatLoading] = useState(false); + const [isChatLoading, setIsChatLoading] = useState(true); const [isFileUploading, setIsFileUploading] = useState(false); const [isChatError, setIsChatError] = useState(false); const [user, setUser] = useState(null); diff --git a/src/pages/orders/components/ChatMessageReceipt/ChatMessageReceipt.tsx b/src/pages/orders/components/ChatMessageReceipt/ChatMessageReceipt.tsx index ebdda9d6..f9686207 100644 --- a/src/pages/orders/components/ChatMessageReceipt/ChatMessageReceipt.tsx +++ b/src/pages/orders/components/ChatMessageReceipt/ChatMessageReceipt.tsx @@ -1,4 +1,4 @@ -import { ComponentType, SVGAttributes } from 'react'; +import { ComponentType, memo, SVGAttributes } from 'react'; import { CHAT_MESSAGE_STATUS } from '@/constants'; import { useSendbird } from '@/hooks/custom-hooks'; import { ReactComponent as MessageDeliveredIcon } from '../../../../public/ic-message-delivered.svg'; @@ -37,4 +37,4 @@ const ChatMessageReceipt = ({ chatChannel, message, userId }: TChatMessageReceip return ; }; -export default ChatMessageReceipt; +export default memo(ChatMessageReceipt); diff --git a/src/pages/orders/components/ChatMessages/ChatMessages.scss b/src/pages/orders/components/ChatMessages/ChatMessages.scss index 28ea7af5..e54254d1 100644 --- a/src/pages/orders/components/ChatMessages/ChatMessages.scss +++ b/src/pages/orders/components/ChatMessages/ChatMessages.scss @@ -2,7 +2,9 @@ background-color: #ffffff; margin-top: auto; margin-right: 0.8rem; - height: calc(60vh - 16rem); + display: flex; + flex-direction: column; + flex-grow: 1; overflow-y: auto; @include mobile { @@ -15,7 +17,11 @@ &__item { display: flex; flex-direction: column; - margin: 1.6rem 1.2rem 1.6rem 2.4rem; + margin: 1.6rem 1.2rem 0 2.4rem; + + &:last-child { + margin-bottom: 1.6rem; + } &__file { color: inherit; diff --git a/src/pages/orders/screens/OrderDetails/OrderDetails.scss b/src/pages/orders/screens/OrderDetails/OrderDetails.scss index f4cdcde4..1f265390 100644 --- a/src/pages/orders/screens/OrderDetails/OrderDetails.scss +++ b/src/pages/orders/screens/OrderDetails/OrderDetails.scss @@ -1,6 +1,6 @@ .order-details { overflow: overlay; - height: calc(100vh - 22rem); + height: calc(100vh - 27rem); @include mobile { position: absolute; diff --git a/src/pages/orders/screens/OrderDetails/OrderDetails.tsx b/src/pages/orders/screens/OrderDetails/OrderDetails.tsx index 8cea9613..2f5a95f2 100644 --- a/src/pages/orders/screens/OrderDetails/OrderDetails.tsx +++ b/src/pages/orders/screens/OrderDetails/OrderDetails.tsx @@ -143,7 +143,7 @@ const OrderDetails = () => { {warningMessage} )} -
+
+
); @@ -57,7 +57,7 @@ const OrdersChatSection = ({ isInactive, onReturn, otherUserDetails, ...sendBird ); } return ( -
+
{isChatLoading ? ( ) : ( diff --git a/vite.config.ts b/vite.config.ts index 5737718b..cb755b9b 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -29,4 +29,7 @@ export default defineConfig({ '@': path.resolve(__dirname, './src'), }, }, + server: { + port: 8443, + }, }); From 3118de7f0657ecfd91473b3c5075be6aeec35ced Mon Sep 17 00:00:00 2001 From: Nada Date: Thu, 13 Jun 2024 16:13:15 +0400 Subject: [PATCH 2/4] fix: issue with chat multiple loading on create order -> order details --- src/components/PaymentMethodForm/PaymentMethodForm.scss | 5 +++++ src/hooks/custom-hooks/useSendbird.ts | 9 +++++---- .../orders/screens/Orders/OrdersTable/OrdersTable.scss | 2 +- .../screens/Orders/OrdersTableRow/OrdersTableRow.scss | 1 + .../screens/OrdersChatSection/OrdersChatSection.tsx | 4 ++-- vite.config.ts | 3 --- 6 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/components/PaymentMethodForm/PaymentMethodForm.scss b/src/components/PaymentMethodForm/PaymentMethodForm.scss index a98fa4f7..b19e2ef6 100644 --- a/src/components/PaymentMethodForm/PaymentMethodForm.scss +++ b/src/components/PaymentMethodForm/PaymentMethodForm.scss @@ -143,6 +143,11 @@ & .deriv-input__right-content { display: flex; align-items: center; + & .deriv-dropdown__button { + &--active { + transform: none; + } + } } } } diff --git a/src/hooks/custom-hooks/useSendbird.ts b/src/hooks/custom-hooks/useSendbird.ts index 771d7be9..ad9961bd 100644 --- a/src/hooks/custom-hooks/useSendbird.ts +++ b/src/hooks/custom-hooks/useSendbird.ts @@ -74,7 +74,7 @@ function createChatMessage(sendbirdMessage: BaseMessage): ChatMessage { const useSendbird = (orderId: string | undefined, isErrorOrderInfo: boolean, chatChannelUrl: string) => { const sendbirdApiRef = useRef>>(); - const [isChatLoading, setIsChatLoading] = useState(true); + const [isChatLoading, setIsChatLoading] = useState(false); const [isFileUploading, setIsFileUploading] = useState(false); const [isChatError, setIsChatError] = useState(false); const [user, setUser] = useState(null); @@ -272,15 +272,16 @@ const useSendbird = (orderId: string | undefined, isErrorOrderInfo: boolean, cha useEffect(() => { // if the user has not created a chat URL for the order yet, create one using p2p_create_chat endpoint - if (orderId && !chatChannelUrl) { + // chatChannelUrl is received from order details, hence check if chat url was already created using p2p_create_chat + if (orderId && !chatChannelUrl && !chatChannel?.url) { createChat({ order_id: orderId, }); - } else if (sendbirdServiceToken?.app_id) { + } else if (!chatChannel?.url) { initialiseChat(); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [orderId, chatChannelUrl, sendbirdServiceToken?.app_id]); + }, [orderId, chatChannelUrl, chatChannel?.url]); return { activeChatChannel: chatChannel, diff --git a/src/pages/orders/screens/Orders/OrdersTable/OrdersTable.scss b/src/pages/orders/screens/Orders/OrdersTable/OrdersTable.scss index 1536edd0..fe9d910c 100644 --- a/src/pages/orders/screens/Orders/OrdersTable/OrdersTable.scss +++ b/src/pages/orders/screens/Orders/OrdersTable/OrdersTable.scss @@ -8,7 +8,7 @@ height: calc(100vh - 35rem) !important; @include mobile { - height: calc(100vh - 17rem) !important; + height: calc(100vh - 20rem) !important; } &__row { diff --git a/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.scss b/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.scss index e9d6d4e9..9125482a 100644 --- a/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.scss +++ b/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.scss @@ -5,6 +5,7 @@ align-items: center; grid-template-columns: 1fr 1.5fr 2fr 3fr 1.5fr 1.5fr 1.5fr; cursor: pointer; + min-height: 7.3rem; } @include mobile { diff --git a/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.tsx b/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.tsx index 49ac99c8..050cdbf3 100644 --- a/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.tsx +++ b/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.tsx @@ -48,7 +48,7 @@ const OrdersChatSection = ({ isInactive, onReturn, otherUserDetails, ...sendBird )} renderHeader={() => } > - {isChatLoading ? ( + {isChatLoading || !activeChatChannel ? ( ) : ( @@ -58,7 +58,7 @@ const OrdersChatSection = ({ isInactive, onReturn, otherUserDetails, ...sendBird } return (
- {isChatLoading ? ( + {isChatLoading || !activeChatChannel ? ( ) : ( <> diff --git a/vite.config.ts b/vite.config.ts index cb755b9b..5737718b 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -29,7 +29,4 @@ export default defineConfig({ '@': path.resolve(__dirname, './src'), }, }, - server: { - port: 8443, - }, }); From 74e334007123ad7245ea2378a3b665d71b59e56e Mon Sep 17 00:00:00 2001 From: Nada Date: Thu, 13 Jun 2024 17:36:53 +0400 Subject: [PATCH 3/4] fix: chat loading when refreshing the page --- src/hooks/custom-hooks/useSendbird.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/hooks/custom-hooks/useSendbird.ts b/src/hooks/custom-hooks/useSendbird.ts index ad9961bd..617803e8 100644 --- a/src/hooks/custom-hooks/useSendbird.ts +++ b/src/hooks/custom-hooks/useSendbird.ts @@ -273,15 +273,15 @@ const useSendbird = (orderId: string | undefined, isErrorOrderInfo: boolean, cha useEffect(() => { // if the user has not created a chat URL for the order yet, create one using p2p_create_chat endpoint // chatChannelUrl is received from order details, hence check if chat url was already created using p2p_create_chat - if (orderId && !chatChannelUrl && !chatChannel?.url) { + if (!chatChannel?.url && sendbirdServiceToken?.app_id && orderId) { + initialiseChat(); + } else if (orderId && !chatChannelUrl && !chatChannel?.url) { createChat({ order_id: orderId, }); - } else if (!chatChannel?.url) { - initialiseChat(); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [orderId, chatChannelUrl, chatChannel?.url]); + }, [orderId, chatChannelUrl, chatChannel?.url, sendbirdServiceToken?.app_id]); return { activeChatChannel: chatChannel, From f7dcbed0edb47ed7dee729032c639d02c14ceba4 Mon Sep 17 00:00:00 2001 From: Nada Date: Thu, 13 Jun 2024 17:41:55 +0400 Subject: [PATCH 4/4] fix: broken test --- .../screens/OrderDetails/__tests__/OrderDetails.spec.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/orders/screens/OrderDetails/__tests__/OrderDetails.spec.tsx b/src/pages/orders/screens/OrderDetails/__tests__/OrderDetails.spec.tsx index 37b194da..78a05b11 100644 --- a/src/pages/orders/screens/OrderDetails/__tests__/OrderDetails.spec.tsx +++ b/src/pages/orders/screens/OrderDetails/__tests__/OrderDetails.spec.tsx @@ -70,6 +70,9 @@ jest.mock('@/hooks/custom-hooks', () => ({ }, }), useSendbird: () => ({ + activeChatChannel: { + isFrozen: false, + }, isOnline: true, lastOnlineTime: 123546789, nickname: 'John Doe',