fix: style issue in ad create, add balance info

deriv-com · Jun 5, 2024 · 212ac34 · 212ac34
1 parent fa7012b
commit 212ac34
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 17 deletions.
diff --git a/src/pages/my-ads/components/AdFormInput/AdFormInput.tsx b/src/pages/my-ads/components/AdFormInput/AdFormInput.tsx
@@ -6,6 +6,7 @@ import { Input } from '@deriv-com/ui';
 
 type TAdFormInputProps = ComponentProps<typeof Input> & {
     currency?: string;
+    hint?: JSX.Element | string;
     isDisabled?: boolean;
     label: string;
     name: string;
@@ -14,6 +15,7 @@ type TAdFormInputProps = ComponentProps<typeof Input> & {
 };
 
 const AdFormInput = ({
+    hint = <div />,
     isDisabled = false,
     label,
     name,
@@ -33,7 +35,7 @@ const AdFormInput = ({
                         disabled={isDisabled}
                         error={!!error?.message}
                         label={label}
-                        message={error ? error?.message : ''}
+                        message={error ? error?.message : hint}
                         onBlur={onBlur}
                         onChange={event => {
                             onChange(event);

diff --git a/src/pages/my-ads/components/AdTypeSection/AdTypeSection.tsx b/src/pages/my-ads/components/AdTypeSection/AdTypeSection.tsx
@@ -3,10 +3,12 @@ import { Controller, useFormContext } from 'react-hook-form';
 import { TCurrency } from 'types';
 import { FloatingRate, RadioGroup } from '@/components';
 import { BUY_SELL, RATE_TYPE } from '@/constants';
+import { api } from '@/hooks';
 import { useQueryString } from '@/hooks/custom-hooks';
 import { getValidationRules, restrictDecimalPlace } from '@/utils';
 import { useTranslations } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
+import { FormatUtils } from '@deriv-com/utils';
 import { AdFormController } from '../AdFormController';
 import { AdFormInput } from '../AdFormInput';
 import { AdFormTextArea } from '../AdFormTextArea';
@@ -25,6 +27,8 @@ type TAdTypeSectionProps = {
 
 const AdTypeSection = ({ currency, localCurrency, onCancel, rateType, ...props }: TAdTypeSectionProps) => {
     const { queryString } = useQueryString();
+    const { data: advertiserInfo } = api.advertiser.useGetInfo();
+    const { balance_available: balanceAvailable } = advertiserInfo || {};
     const { localize } = useTranslations();
     const { advertId = '' } = queryString;
     const isEdit = !!advertId;
@@ -95,6 +99,16 @@ const AdTypeSection = ({ currency, localCurrency, onCancel, rateType, ...props }
             )}
             <div className='flex flex-col lg:flex-row lg:gap-[1.6rem]'>
                 <AdFormInput
+                    hint={
+                        isSell ? (
+                            localize('Your Deriv P2P balance is {{balance}} {{currency}}', {
+                                balance: FormatUtils.formatMoney(balanceAvailable ?? 0, { currency }),
+                                currency,
+                            })
+                        ) : (
+                            <div />
+                        )
+                    }
                     isDisabled={isEdit}
                     label={localize('Total amount')}
                     name='amount'

diff --git a/src/pages/my-ads/components/AdTypeSection/__tests__/AdTypeSection.spec.tsx b/src/pages/my-ads/components/AdTypeSection/__tests__/AdTypeSection.spec.tsx
@@ -49,6 +49,19 @@ jest.mock('@/hooks/custom-hooks', () => ({
     useQueryString: jest.fn().mockReturnValue({ queryString: { advertId: '' } }),
 }));
 
+jest.mock('@/hooks', () => ({
+    ...jest.requireActual('@/hooks'),
+    api: {
+        advertiser: {
+            useGetInfo: jest.fn(() => ({
+                data: {
+                    balance_available: 1000,
+                },
+            })),
+        },
+    },
+}));
+
 const mockProps = {
     currency: 'usd' as TCurrency,
     getCurrentStep: jest.fn(() => 1),

diff --git a/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.scss b/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.scss
@@ -0,0 +1,9 @@
+.order-time-selection {
+    margin: 1rem 0;
+}
+
+@include mobile {
+    #react-tiny-popover-container {
+        display: none;
+    }
+}
diff --git a/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx b/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx
@@ -5,7 +5,8 @@ import { OrderTimeTooltipModal } from '@/components/Modals';
 import { getOrderTimeCompletionList, getOrderTimeInfoMessage } from '@/constants';
 import { LabelPairedChevronDownMdRegularIcon, LabelPairedCircleInfoCaptionRegularIcon } from '@deriv/quill-icons';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { Button, Dropdown, Text, Tooltip, useDevice } from '@deriv-com/ui';
+import { Dropdown, Text, TooltipMenuIcon, useDevice } from '@deriv-com/ui';
+import './OrderTimeSelection.scss';
 
 const OrderTimeSelection = () => {
     const { control } = useFormContext();
@@ -14,26 +15,25 @@ const OrderTimeSelection = () => {
     const { localize } = useTranslations();
 
     return (
-        <div className='my-4'>
+        <div className='order-time-selection'>
             <div className='flex items-center gap-[0.8rem]'>
                 <Text color='prominent' size={isMobile ? 'md' : 'sm'}>
                     <Localize i18n_default_text='Orders must be completed in' />
                 </Text>
                 <Text size='xs'>
-                    <Tooltip className='max-w-none' message={getOrderTimeInfoMessage(localize)} position='top'>
-                        <Button
-                            color='white'
-                            onClick={isMobile ? () => setIsModalOpen(true) : () => undefined}
-                            type='button'
-                            variant='contained'
-                        >
-                            <LabelPairedCircleInfoCaptionRegularIcon
-                                data-testid='dt_order_info_icon'
-                                height={24}
-                                width={24}
-                            />
-                        </Button>
-                    </Tooltip>
+                    <TooltipMenuIcon
+                        as='button'
+                        disableHover
+                        onClick={isMobile ? () => setIsModalOpen(true) : () => undefined}
+                        tooltipContent={getOrderTimeInfoMessage(localize)}
+                        type='button'
+                    >
+                        <LabelPairedCircleInfoCaptionRegularIcon
+                            data-testid='dt_order_info_icon'
+                            height={24}
+                            width={24}
+                        />
+                    </TooltipMenuIcon>
                 </Text>
             </div>
             <Controller

diff --git a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx
@@ -50,6 +50,7 @@ const CreateEditAd = () => {
     const { data: p2pSettings } = api.settings.useSettings();
     const { order_payment_period: orderPaymentPeriod } = p2pSettings ?? {};
     const { data: createResponse, error, isError, isSuccess, mutate } = api.advert.useCreate();
+
     const {
         error: updateError,
         isError: isUpdateError,