fix: chat not visible, not loading

package.json

@@ -22,7 +22,7 @@
         "@deriv-com/translations": "^1.2.4",
         "@deriv-com/ui": "^1.29.0",
         "@deriv-com/utils": "^0.0.28",
-        "@deriv/quill-icons": "^1.23.5",
+        "@deriv/quill-icons": "^1.23.8",
         "@sendbird/chat": "^4.11.3",
         "@tanstack/react-query": "^5.28.14",
         "@tanstack/react-table": "^8.15.0",

src/components/BlockedScenarios/BlockedScenarios.tsx

@@ -1,9 +1,9 @@
-import { ReactComponent as P2pUnavailable } from '@/assets/p2p-unavailable.svg';
 import { useLiveChat } from '@/hooks';
 import {
     DerivLightIcCashierBlockedIcon,
     DerivLightIcCashierLockedIcon,
     DerivLightIcCashierUnderMaintenanceIcon,
+    DerivLightWalletCurrencyUnavailableIcon as P2pUnavailable,
 } from '@deriv/quill-icons';
 import { Localize } from '@deriv-com/translations';
 import { ActionScreen, Button, Text, useDevice } from '@deriv-com/ui';

src/components/Page404/Page404.tsx

@@ -1,6 +1,6 @@
 import { useHistory } from 'react-router-dom';
-import Icon404 from '@/assets/404.png';
 import { BUY_SELL_URL } from '@/constants';
+import { DerivLight404ErrorIcon } from '@deriv/quill-icons';
 import { Localize } from '@deriv-com/translations';
 import { Button, Text, useDevice } from '@deriv-com/ui';
 import './Page404.scss';
@@ -11,10 +11,7 @@ const Page404 = () => {
     const descriptionSize = isDesktop ? 'md' : 'sm';
     return (
         <div className='page-404'>
-            {/* TODO: to be replaced with quill icons */}
-            <div>
-                <img alt='Page not found' src={Icon404} />
-            </div>
+            <DerivLight404ErrorIcon />
             <div className='page-404__text'>
                 <Text size={isDesktop ? '2xl' : 'lg'} weight='bold'>
                     <Localize i18n_default_text='We couldn’t find that page' />

src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx

@@ -1,5 +1,5 @@
 import { TFormState, THooks, TPaymentMethod, TSelectedPaymentMethod } from 'types';
-import { LabelPairedSearchMdRegularIcon, LegacyCloseCircle1pxIcon } from '@deriv/quill-icons';
+import { LabelPairedSearchMdRegularIcon, LegacyCloseCircle1pxBlackIcon } from '@deriv/quill-icons';
 import { Localize, useTranslations } from '@deriv-com/translations';
 import { Button, Dropdown, Input, Text } from '@deriv-com/ui';
 
@@ -29,7 +29,7 @@ const PaymentMethodFormAutocomplete = ({
                 label={localize('Choose your payment method')}
                 rightPlaceholder={
                     actionType === 'EDIT' ? null : (
-                        <LegacyCloseCircle1pxIcon
+                        <LegacyCloseCircle1pxBlackIcon
                             className='payment-method-form__icon--close'
                             data-testid='dt_payment_methods_form_close_icon'
                             fill='#999999'

src/components/Search/Search.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
 import clsx from 'clsx';
-import { LabelPairedSearchMdRegularIcon, LegacyCloseCircle1pxIcon } from '@deriv/quill-icons';
+import { LabelPairedSearchMdRegularIcon, LegacyCloseCircle1pxBlackIcon } from '@deriv/quill-icons';
 import { Input } from '@deriv-com/ui';
 import './Search.scss';
 
@@ -48,7 +48,12 @@ const Search = ({ delayTimer = 500, hideBorder = false, name, onSearch, placehol
                 onChange={handleInputChange}
                 rightPlaceholder={
                     searchValue && (
-                        <LegacyCloseCircle1pxIcon className='cursor-pointer' iconSize='xs' onClick={clearSearch} />
+                        <LegacyCloseCircle1pxBlackIcon
+                            className='cursor-pointer'
+                            fill='#999'
+                            iconSize='xs'
+                            onClick={clearSearch}
+                        />
                     )
                 }
                 type='search'

src/hooks/custom-hooks/useSendbird.ts

@@ -273,9 +273,10 @@ 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 (!chatChannel?.url && sendbirdServiceToken?.app_id && orderId) {
+        // initialise Chat only if chatchannelurl is already present in order details, but chatChannel is not created in sendbird.
+        if (!chatChannel?.url && sendbirdServiceToken?.app_id && orderId && chatChannelUrl) {
             initialiseChat();
-        } else if (orderId && !chatChannelUrl && !chatChannel?.url) {
+        } else if (orderId && !chatChannelUrl && !chatChannel?.url && sendbirdServiceToken?.app_id) {
             createChat({
                 order_id: orderId,
             });

src/pages/guide/screens/Blog/Blog.tsx

@@ -1,6 +1,5 @@
-//TODO: Replace this with Quill icon once ready
-import { ReactComponent as BlogIcon } from '@/assets/blog.svg';
 import { HOW_TO_PROTECT_YOURSELF_URL } from '@/constants';
+import { DerivLightP2pSecureImageIcon as BlogIcon } from '@deriv/quill-icons';
 import { Localize } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import { Carousel } from '../../components';

src/pages/guide/screens/Videos/Videos.tsx

@@ -1,10 +1,12 @@
 import { useState } from 'react';
-import { ReactComponent as IntroducingDerivP2PIcon } from '@/assets/introducing-deriv-p2p.svg';
-import { ReactComponent as UseDerivP2PIcon } from '@/assets/use-deriv-p2p.svg';
 import { VideoPlayerModal } from '@/components/Modals';
 import { HOW_TO_USE_DERIV_P2P_URL, INTRODUCING_DERIV_P2P_URL } from '@/constants';
 import { useModalManager } from '@/hooks/custom-hooks';
-import { StandalonePlayFillIcon } from '@deriv/quill-icons';
+import {
+    DerivLightP2pAppImageIcon as UseDerivP2PIcon,
+    DerivLightP2pBannerImageIcon as IntroducingDerivP2PIcon,
+    StandalonePlayFillIcon,
+} from '@deriv/quill-icons';
 import { Localize } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import { Carousel } from '../../components';

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

@@ -1,6 +1,6 @@
 .order-details {
     overflow: auto;
-    height: calc(100% - 27rem);
+    height: calc(100% - 17rem);
 
     @include mobile-or-tablet-screen {
         position: absolute;

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

@@ -139,7 +139,7 @@ const OrderDetails = () => {
 
     return (
         <OrderDetailsProvider value={{ isErrorOrderInfo: !!error, orderDetails }}>
-            <div className='w-full'>
+            <div className='h-full w-full'>
                 <PageReturn onClick={onReturn} pageTitle={headerText} weight='bold' />
                 <div className='order-details'>
                     {shouldShowLostFundsBanner && (

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

@@ -16,10 +16,10 @@
 
     &__full-page {
         position: absolute;
-        top: 0;
+        top: 1rem;
         left: 0;
         z-index: 1;
-        height: calc(100vh - 8rem);
+        height: calc(100% - 9rem);
 
         & .mobile-wrapper {
             &__body {
@@ -35,11 +35,13 @@
         }
 
         &--closed {
-            height: calc(100vh - 5rem);
+            height: calc(100% - 5rem);
 
             & .mobile-wrapper {
                 &__footer {
                     padding: 1.6rem;
+                    margin-top: -1rem;
+                    background-color: #fff;
                 }
             }
         }