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 {