feat: fiat on ramp disclaimer screen (deriv-com#11246)

packages/wallets/src/features/cashier/modules/FiatOnRamp/FiatOnRamp.tsx

@@ -1,38 +1,48 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { WalletButton, WalletText } from '../../../../components';
 import BackArrow from '../../../../public/images/ic-back-arrow.svg';
+import { FiatOnRampDisclaimer, FiatOnRampProviderCard } from './components';
 import { fiatOnRampProvider } from './constants';
-import OnRampProviderCard from './FiatOnRampProviderCard/FiatOnRampProviderCard';
 import './FiatOnRamp.scss';
 
 const FiatOnRamp = () => {
     const history = useHistory();
+    const [disclaimer, setDisclaimer] = useState(false);
+
+    const handleDisclaimer = () => setDisclaimer(disclaimer => !disclaimer);
 
     return (
-        <div className='wallets-fiat-onramp'>
-            <WalletButton
-                color='white'
-                icon={<BackArrow />}
-                onClick={() => history.push('/wallets/cashier/deposit')}
-                text='Back'
-            />
-            <div className='wallets-fiat-onramp__content'>
-                <div className='wallets-fiat-onramp__description'>
-                    <WalletText align='center' color='primary' size='xs'>
-                        Fiat onramp is a cashier service that allows you to convert fiat currencies to crypto to top up
-                        your Deriv crypto accounts. Listed here are third-party crypto exchanges. You’ll need to create
-                        an account with them to use their services.
-                    </WalletText>
+        <React.Fragment>
+            {disclaimer ? (
+                <FiatOnRampDisclaimer handleDisclaimer={handleDisclaimer} />
+            ) : (
+                <div className='wallets-fiat-onramp'>
+                    <WalletButton
+                        color='white'
+                        icon={<BackArrow />}
+                        onClick={() => history.push('/wallets/cashier/deposit')}
+                        text='Back'
+                    />
+                    <div className='wallets-fiat-onramp__content'>
+                        <div className='wallets-fiat-onramp__description'>
+                            <WalletText align='center' color='primary' size='xs'>
+                                Fiat onramp is a cashier service that allows you to convert fiat currencies to crypto to
+                                top up your Deriv crypto accounts. Listed here are third-party crypto exchanges. You’ll
+                                need to create an account with them to use their services.
+                            </WalletText>
+                        </div>
+                        <FiatOnRampProviderCard
+                            description={fiatOnRampProvider.description}
+                            getPaymentIcons={fiatOnRampProvider.getPaymentIcons}
+                            handleDisclaimer={handleDisclaimer}
+                            icon={fiatOnRampProvider.icon}
+                            name={fiatOnRampProvider.name}
+                        />
+                    </div>
                 </div>
-                <OnRampProviderCard
-                    description={fiatOnRampProvider.description}
-                    getPaymentIcons={fiatOnRampProvider.getPaymentIcons}
-                    icon={fiatOnRampProvider.icon}
-                    name={fiatOnRampProvider.name}
-                />
-            </div>
-        </div>
+            )}
+        </React.Fragment>
     );
 };
 

packages/wallets/src/features/cashier/modules/FiatOnRamp/components/FiatOnRampDisclaimer/FiatOnRampDisclaimer.scss

@@ -0,0 +1,19 @@
+.wallets-fiat-onramp-disclaimer {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    gap: 1.6rem;
+    justify-content: center;
+    max-width: 79.2rem;
+
+    @include mobile {
+        justify-content: flex-start;
+    }
+
+    &__buttons {
+        display: flex;
+        gap: 0.8rem;
+        justify-content: flex-end;
+        width: 100%;
+    }
+}

packages/wallets/src/features/cashier/modules/FiatOnRamp/components/FiatOnRampDisclaimer/FiatOnRampDisclaimer.tsx

@@ -0,0 +1,43 @@
+import React, { MouseEventHandler, useCallback } from 'react';
+import { useQuery } from '@deriv/api';
+import { WalletButton, WalletText } from '../../../../../../components';
+import './FiatOnRampDisclaimer.scss';
+
+type TFiatOnRampDisclaimer = {
+    handleDisclaimer: MouseEventHandler<HTMLButtonElement>;
+};
+
+const FiatOnRampDisclaimer: React.FC<TFiatOnRampDisclaimer> = ({ handleDisclaimer }) => {
+    const { data: provider } = useQuery('service_token', {
+        payload: { referrer: window.location.href, service: 'banxa' },
+    });
+
+    const redirectToBanxa = useCallback(() => {
+        const banxaUrl = provider?.service_token?.banxa?.url ?? '';
+        if (banxaUrl) {
+            const link = document.createElement('a');
+            link.href = banxaUrl;
+            link.target = '_blank';
+            link.click();
+        }
+    }, [provider?.service_token?.banxa?.url]);
+
+    return (
+        <div className='wallets-fiat-onramp-disclaimer'>
+            <WalletText color='prominent' size='md' weight='bold'>
+                Disclaimer
+            </WalletText>
+            <WalletText size='sm'>
+                By clicking <strong>Continue</strong>, you&apos;ll be redirected to Banxa, a third-party payment service
+                provider. Please note that Deriv is not responsible for the content or services provided by Banxa. If
+                you encounter any issues related to Banxa services, you should contact Banxa directly.
+            </WalletText>
+            <div className='wallets-fiat-onramp-disclaimer__buttons'>
+                <WalletButton color='white' onClick={handleDisclaimer} size='md' text={'Back'} variant='outlined' />
+                <WalletButton onClick={() => redirectToBanxa()} size='md' text={'Continue'} />
+            </div>
+        </div>
+    );
+};
+
+export default FiatOnRampDisclaimer;

packages/wallets/src/features/cashier/modules/FiatOnRamp/components/FiatOnRampDisclaimer/index.ts

@@ -0,0 +1 @@
+export { default as FiatOnRampDisclaimer } from './FiatOnRampDisclaimer';

packages/wallets/src/features/cashier/modules/FiatOnRamp/FiatOnRampProviderCard/FiatOnRampProviderCard.tsx → packages/wallets/src/features/cashier/modules/FiatOnRamp/components/FiatOnRampProviderCard/FiatOnRampProviderCard.tsx

@@ -1,17 +1,22 @@
-import React from 'react';
-import { useHistory } from 'react-router-dom';
-import { WalletButton, WalletText } from '../../../../../components';
+import React, { MouseEventHandler } from 'react';
+import { WalletButton, WalletText } from '../../../../../../components';
 import './FiatOnRampProviderCard.scss';
 
 type TFiatOnRampProvider = {
     description: string;
     getPaymentIcons: () => React.ReactNode[];
+    handleDisclaimer: MouseEventHandler<HTMLButtonElement>;
     icon: React.ReactNode;
     name: string;
 };
 
-const FiatOnRampProviderCard: React.FC<TFiatOnRampProvider> = ({ description, getPaymentIcons, icon, name }) => {
-    const history = useHistory();
+const FiatOnRampProviderCard: React.FC<TFiatOnRampProvider> = ({
+    description,
+    getPaymentIcons,
+    handleDisclaimer,
+    icon,
+    name,
+}) => {
     const paymentIcons = getPaymentIcons();
 
     return (
@@ -33,8 +38,7 @@ const FiatOnRampProviderCard: React.FC<TFiatOnRampProvider> = ({ description, ge
                     <div key={`payment-method-icon-${index}`}>{paymentIcon}</div>
                 ))}
             </div>
-            {/* TODO: Add OnClick event to redirect user to disclaimer screen */}
-            <WalletButton onClick={() => history.push('/wallets/cashier/on-ramp')} size='md' text={'Select'} />
+            <WalletButton onClick={handleDisclaimer} size='md' text={'Select'} />
         </div>
     );
 };

packages/wallets/src/features/cashier/modules/FiatOnRamp/components/index.ts

@@ -0,0 +1,2 @@
+export * from './FiatOnRampDisclaimer';
+export * from './FiatOnRampProviderCard';