Merge pull request #128 from nada-deriv/nada/FEQ-2341/orders

nada/fix: style issues with orders

Author: farrah-deriv

src/App.tsx

@@ -1,11 +1,12 @@
+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';
 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 = () => {
         <BrowserRouter>
             <QueryParamProvider adapter={ReactRouter5Adapter}>
                 <TranslationProvider defaultLang='EN' i18nInstance={i18nInstance}>
-                    <DerivIframe />
-                    <AppHeader />
-                    <AppContent />
-                    {isDesktop && <AppFooter />}
+                    <Suspense fallback={<Loader isFullScreen />}>
+                        <DerivIframe />
+                        <AppHeader />
+                        <AppContent />
+                        {isDesktop && <AppFooter />}
+                    </Suspense>
                 </TranslationProvider>
             </QueryParamProvider>
         </BrowserRouter>

src/components/PaymentMethodForm/PaymentMethodForm.scss

@@ -143,6 +143,11 @@
             & .deriv-input__right-content {
                 display: flex;
                 align-items: center;
+                & .deriv-dropdown__button {
+                    &--active {
+                        transform: none;
+                    }
+                }
             }
         }
     }

src/hooks/custom-hooks/useSendbird.ts

@@ -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 (!chatChannel?.url && sendbirdServiceToken?.app_id && orderId) {
+            initialiseChat();
+        } else if (orderId && !chatChannelUrl && !chatChannel?.url) {
             createChat({
                 order_id: orderId,
             });
-        } else if (sendbirdServiceToken?.app_id) {
-            initialiseChat();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [orderId, chatChannelUrl, sendbirdServiceToken?.app_id]);
+    }, [orderId, chatChannelUrl, chatChannel?.url, sendbirdServiceToken?.app_id]);
 
     return {
         activeChatChannel: chatChannel,

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 <Icon data-testid='dt_chat_message_receipt_icon' />;
 };
 
-export default ChatMessageReceipt;
+export default memo(ChatMessageReceipt);

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;

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;

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

@@ -140,7 +140,7 @@ const OrderDetails = () => {
                             <Text size='2xs'>{warningMessage}</Text>
                         </InlineMessage>
                     )}
-                    <div className='grid grid-cols-none lg:grid-cols-2 lg:gap-14'>
+                    <div className='grid grid-cols-none lg:grid-cols-2 lg:gap-14 h-full'>
                         <OrderDetailsCard sendFile={sendFile} />
                         <OrdersChatSection
                             isInactive={!!orderDetails?.isInactiveOrder}

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',

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 {

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 {

src/pages/orders/screens/OrdersChatSection/OrdersChatSection.scss

@@ -2,6 +2,12 @@
     border-radius: 4px;
     border: 8px solid #f2f3f4;
     width: 44rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 60vh;
+    height: 100%;
 
     @include mobile {
         width: unset;
@@ -29,7 +35,7 @@
         }
 
         &--closed {
-            height: calc(100vh - 2rem);
+            height: calc(100vh - 5rem);
 
             & .mobile-wrapper {
                 &__footer {

src/pages/orders/screens/OrdersChatSection/OrdersChatSection.tsx

@@ -29,7 +29,7 @@ const OrdersChatSection = ({ isInactive, onReturn, otherUserDetails, ...sendBird
 
     if (isError) {
         return (
-            <div className='orders-chat-section flex flex-col justify-center items-center h-[70vh]'>
+            <div className='orders-chat-section'>
                 <ChatError onClickRetry={refreshChat} />
             </div>
         );
@@ -48,7 +48,7 @@ const OrdersChatSection = ({ isInactive, onReturn, otherUserDetails, ...sendBird
                 )}
                 renderHeader={() => <ChatHeader isOnline={isOnline} lastOnlineTime={lastOnlineTime} nickname={name} />}
             >
-                {isChatLoading ? (
+                {isChatLoading || !activeChatChannel ? (
                     <Loader isFullScreen={false} />
                 ) : (
                     <ChatMessages chatChannel={activeChatChannel} chatMessages={messages} userId={userId} />
@@ -57,8 +57,8 @@ const OrdersChatSection = ({ isInactive, onReturn, otherUserDetails, ...sendBird
         );
     }
     return (
-        <div className='orders-chat-section flex flex-col justify-center items-center h-[60vh]'>
-            {isChatLoading ? (
+        <div className='orders-chat-section'>
+            {isChatLoading || !activeChatChannel ? (
                 <Loader isFullScreen={false} />
             ) : (
                 <>