farrah/fix: buy/sell and order page issues

package.json

@@ -16,11 +16,11 @@
     "dependencies": {
         "@babel/preset-env": "^7.24.5",
         "@chakra-ui/react": "^2.8.2",
-        "@deriv-com/api-hooks": "^1.3.7",
+        "@deriv-com/api-hooks": "^1.4.0",
         "@deriv-com/translations": "^1.2.4",
         "@deriv-com/ui": "^1.29.0",
         "@deriv-com/utils": "^0.0.28",
-        "@deriv/quill-icons": "^1.22.10",
+        "@deriv/quill-icons": "^1.23.5",
         "@sendbird/chat": "^4.11.3",
         "@svgr/rollup": "^8.1.0",
         "@tanstack/react-query": "^5.28.14",
@@ -105,4 +105,4 @@
         "vite-plugin-html-config": "^1.0.11",
         "vite-plugin-sass": "^0.1.0"
     }
-}
+}

src/components/BlockedScenarios/BlockedScenarios.tsx

@@ -58,13 +58,13 @@ const BlockedScenarios = ({ type }: { type: string }) => {
             ),
             description: (
                 <Text align='center'>
-                    <Localize i18n_default_text='Please switch to your USD account to access the Deriv P2P marketplace.' />
+                    <Localize i18n_default_text='To use Deriv P2P, switch to your real USD account.' />
                 </Text>
             ),
             icon: <P2pUnavailable />,
             title: (
                 <Text weight='bold'>
-                    <Localize i18n_default_text='Crypto is not supported for Deriv P2P!' />
+                    <Localize i18n_default_text='Cryptocurrencies not supported' />
                 </Text>
             ),
         },

src/components/BlockedScenarios/__tests__/BlockedScenarios.spec.tsx

@@ -30,7 +30,7 @@ describe('BlockedScenarios', () => {
 
     it('should render the correct message for crypto account', async () => {
         render(<BlockedScenarios type='crypto' />);
-        expect(screen.getByText('Crypto is not supported for Deriv P2P!')).toBeInTheDocument();
+        expect(screen.getByText('Cryptocurrencies not supported')).toBeInTheDocument();
         const button = screen.getByRole('button', { name: 'Switch to real USD account' });
         await userEvent.click(button);
         expect(window.open).toHaveBeenCalledWith('https://app.deriv.com', '_blank');

src/components/BuySellForm/BuySellForm.scss

@@ -7,6 +7,10 @@
         width: 100vw;
         height: 100vh;
         box-shadow: none;
+
+        &__footer {
+            border-top: 2px solid #f2f3f4;
+        }
     }
 
     & .deriv-modal__body {
@@ -15,10 +19,12 @@
 
     &--is-buy {
         height: 64.9rem;
+
         & .deriv-modal__body {
             max-height: calc(100vh - 13rem);
             overflow: auto;
         }
+
         @include mobile-or-tablet-screen {
             height: unset;
             max-height: unset;
@@ -31,10 +37,6 @@
         left: 0;
         z-index: 1;
 
-        & .mobile-wrapper__body {
-            overflow: overlay;
-        }
-
         &--is-buy {
             top: -4rem;
         }

src/components/BuySellForm/BuySellForm.tsx

@@ -132,6 +132,8 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
     const history = useHistory();
     const { isDesktop } = useDevice();
     const isBuy = type === BUY_SELL.BUY;
+    const hasSelectedPaymentMethods =
+        (!paymentMethodNames && selectedPaymentMethods.length < 1) || selectedPaymentMethods.length > 0;
 
     const shouldDisableField =
         !isBuy &&
@@ -265,7 +267,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
                 isBuy={isBuy}
                 isHidden={isHidden}
                 isModalOpen={isModalOpen}
-                isValid={isValid && ((isBuy && selectedPaymentMethods.length > 0) || !isBuy)}
+                isValid={isValid && (!isBuy || hasSelectedPaymentMethods)}
                 onRequestClose={onCloseBuySellForm}
                 onSubmit={onSubmit}
             >

src/components/BuySellForm/BuySellFormDisplayWrapper.tsx

@@ -35,10 +35,10 @@ const BuySellFormDisplayWrapper = ({
                     'buy-sell-form__full-page-modal--is-buy': currentRoute === 'buy-sell',
                 })}
                 onBack={onRequestClose}
-                renderFooter={() => <BuySellFormFooter isDisabled={!isValid} onClickCancel={onRequestClose} />}
                 renderHeader={() => <BuySellFormHeader currency={accountCurrency} isBuy={isBuy} />}
             >
                 {children}
+                <BuySellFormFooter isDisabled={!isValid} onClickCancel={onRequestClose} />
             </FullPageMobileWrapper>
         );
     }

src/components/BuySellForm/BuySellFormFooter/BuySellFormFooter.tsx

@@ -9,7 +9,7 @@ type TBuySellFormFooterProps = {
 const BuySellFormFooter = ({ isDisabled, onClickCancel, onSubmit }: TBuySellFormFooterProps) => {
     const { isDesktop } = useDevice();
     return (
-        <div className='flex justify-end gap-[1rem]'>
+        <div className='buy-sell-form__footer flex justify-end gap-[1rem] p-[1.6rem]'>
             <Button
                 className='border-2'
                 color='black'

src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss

@@ -1,6 +1,6 @@
 .mobile-wrapper {
     @include mobile-or-tablet-screen {
-        height: calc(100vh - 8rem);
+        height: calc(100% - 8rem);
         width: 100%;
         border-radius: 0;
         display: grid;
@@ -24,6 +24,10 @@
         }
     }
 
+    &__body {
+        overflow-y: auto;
+    }
+
     &__header {
         align-items: center;
         padding: 2rem;
@@ -38,6 +42,6 @@
     }
 
     @include mobile {
-        height: calc(100vh - 7.5rem);
+        height: calc(100% - 7.5rem);
     }
 }

src/components/Table/Table.tsx

@@ -43,7 +43,7 @@
             const topPosition = headerRef.current.getBoundingClientRect().bottom;
             setHeight(window.innerHeight - topPosition);
         }
     }, [headerRef?.current]);
 
     const { fetchMoreOnBottomReached } = useFetchMore({
         loadMore: loadMoreFunction,
@@ -51,7 +51,7 @@
     });
 
     return (
-        <div className='w-full'>
+        <div className='h-full w-full'>
             {isDesktop && columns.length > 0 && (
                 <div className='table__header' ref={headerRef}>
                     {table.getFlatHeaders().map(header => (

src/main.scss

@@ -14,4 +14,7 @@ body {
     -moz-osx-font-smoothing: grayscale;
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
+    position: relative;
+    min-height: 100%;
+    height: 100%;
 }