Skip to content

Commit

Permalink
Merge pull request #37 from nada-deriv/nada/FEQ-2054/buy-sell-style-f…
Browse files Browse the repository at this point in the history 
…ixes

[FEQ] P2PV2 style issues in buy sell section
  • Loading branch information
@farrah-deriv
farrah-deriv authored Apr 30, 2024
2 parents 97d68cf + 5247d7a commit 179f9b0
Show file tree
Hide file tree
Showing 16 changed files with 202 additions and 164 deletions.
27 changes: 16 additions & 11 deletions src/components/AdvertsTableRow/AdvertsTableRow.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { Fragment, memo, useEffect, useRef, useState } from 'react';
import { Fragment, memo, useEffect, useRef } from 'react';
import clsx from 'clsx';
import { useHistory } from 'react-router-dom';
import { TAdvertiserPaymentMethod, TAdvertsTableRowRenderer, TCurrency, TExchangeRate, TPaymentMethod } from 'types';
import { Badge, BuySellForm, PaymentMethodLabel, StarRating, UserAvatar } from '@/components';
import { ADVERTISER_URL, BUY_SELL } from '@/constants';
import { api } from '@/hooks';
import { useIsAdvertiser } from '@/hooks/custom-hooks';
import { useIsAdvertiser, useModalManager } from '@/hooks/custom-hooks';
import { generateEffectiveRate, getCurrentRoute } from '@/utils';
import { LabelPairedChevronRightMdRegularIcon } from '@deriv/quill-icons';
import { useExchangeRates } from '@deriv-com/api-hooks';
Expand All @@ -15,7 +15,7 @@ import './AdvertsTableRow.scss';
const BASE_CURRENCY = 'USD';

const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
const [isModalOpen, setIsModalOpen] = useState(false);
const { hideModal, isModalOpenFor, showModal } = useModalManager({ shouldReinitializeModals: false });
const { subscribeRates } = useExchangeRates();
const { isDesktop, isMobile } = useDevice();
const history = useHistory();
Expand Down Expand Up @@ -127,12 +127,12 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
)}
<Container {...(isMobile && { className: clsx('flex flex-col', { 'mt-3 ml-14': isBuySellPage }) })}>
{isMobile && (
<Text color={isBuySellPage ? 'general' : 'less-prominent'} size={isBuySellPage ? '2xs' : 'sm'}>
<Text color={isBuySellPage ? 'general' : 'less-prominent'} size={isBuySellPage ? 'xs' : 'sm'}>
Rate (1 USD)
</Text>
)}
<Container {...(isMobile && { className: 'flex flex-col-reverse mb-7' })}>
<Text color={textColor} size={isMobile && isBuySellPage ? 'xs' : 'sm'}>
<Text color={textColor} size='sm'>
{isMobile && 'Limits:'} {min_order_amount_limit_display}-{max_order_amount_limit_display}{' '}
{account_currency}
</Text>
Expand All @@ -148,7 +148,12 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
<div className='flex flex-wrap gap-2'>
{payment_method_names ? (
payment_method_names.map((method: string, idx: number) => (
<PaymentMethodLabel color={textColor} key={idx} paymentMethodName={method} />
<PaymentMethodLabel
color={textColor}
key={idx}
paymentMethodName={method}
size={isMobile ? 'sm' : 'xs'}
/>
))
) : (
<PaymentMethodLabel color={textColor} paymentMethodName='-' />
Expand All @@ -168,15 +173,15 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
)}
<Button
className='lg:w-[7.5rem]'
onClick={() => setIsModalOpen(true)}
size={isMobile ? 'lg' : 'sm'}
onClick={() => showModal('BuySellForm')}
size={isMobile ? 'md' : 'sm'}
textSize={isMobile ? 'md' : 'xs'}
>
{isBuyAdvert ? 'Buy' : 'Sell'} {account_currency}
</Button>
</div>
)}
{isModalOpen && (
{isModalOpenFor('BuySellForm') && (
<BuySellForm
advert={props}
advertiserBuyLimit={Number(daily_buy_limit) - Number(daily_buy)}
Expand All @@ -185,8 +190,8 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
balanceAvailable={data?.balance_available ?? 0}
displayEffectiveRate={displayEffectiveRate}
effectiveRate={effectiveRate}
isModalOpen={isModalOpen}
onRequestClose={() => setIsModalOpen(false)}
isModalOpen={!!isModalOpenFor('BuySellForm')}
onRequestClose={hideModal}
paymentMethods={paymentMethods as TPaymentMethod[]}
/>
)}
Expand Down
12 changes: 12 additions & 0 deletions src/components/BuySellForm/BuySellAmount/BuySellAmount.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,16 @@
font-size: 1.2rem;
}
}
&__value {
display: flex;
flex-direction: column;
width: 100%;
padding: 1.5rem 2.4rem 0 0;
margin: auto;

@include mobile {
padding-top: 0;
padding-left: 1.6rem;
}
}
}
193 changes: 140 additions & 53 deletions src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import { useEffect, useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { TCurrency } from 'types';
import { LightDivider } from '@/components';
import { floatingPointValidator } from '@/utils';
import { Input, Text, useDevice } from '@deriv-com/ui';
import { VALID_SYMBOLS_PATTERN } from '@/constants';
import { floatingPointValidator, getTextFieldError } from '@/utils';
import { Input, Text, TextArea, useDevice } from '@deriv-com/ui';
import { FormatUtils } from '@deriv-com/utils';
import './BuySellAmount.scss';

Expand All @@ -17,6 +18,7 @@ type TBuySellAmountProps = {
localCurrency: TCurrency;
maxLimit: string;
minLimit: string;
paymentMethodNames?: string[];
};
const BuySellAmount = ({
accountCurrency,
Expand All @@ -28,6 +30,7 @@ const BuySellAmount = ({
localCurrency,
maxLimit,
minLimit,
paymentMethodNames,
}: TBuySellAmountProps) => {
const { isMobile } = useDevice();
const labelSize = isMobile ? 'sm' : 'xs';
Expand All @@ -43,66 +46,150 @@ const BuySellAmount = ({
}, [calculatedRate, inputValue, localCurrency]);

return (
<div className='flex flex-col gap-[2rem] py-[2.4rem]'>
<Text className='px-[2.4rem]' color='less-prominent' size='sm'>
{`Enter ${isBuy ? 'sell' : 'buy'} amount`}
</Text>
<div className='buy-sell-amount__input-wrapper'>
<Controller
control={control}
name='amount'
render={({ field: { onBlur, onChange, value }, fieldState: { error } }) => (
<div className='px-[2.4rem] pr-6 '>
<Input
data-lpignore='true'
disabled={isDisabled}
error={!!error?.message}
isFullWidth
label={`${isBuy ? 'Sell' : 'Buy'} amount`}
message={error ? error?.message : `Limit: ${minLimit}-${maxLimit}${accountCurrency}`}
min={0}
name='amount'
onBlur={onBlur}
onChange={event => {
setInputValue(event.target.value);
onChange(event);
}}
onKeyDown={event => {
if (!floatingPointValidator(event.key)) {
event.preventDefault();
<div className='flex flex-col gap-[2rem] py-[1.6rem]'>
<div className='flex w-full'>
<div className='flex flex-col gap-[2rem] w-full'>
<Text className='px-[1.6rem] lg:px-[2.4rem]' color='less-prominent' size='sm'>
{`Enter ${isBuy ? 'sell' : 'buy'} amount`}
</Text>
<Controller
control={control}
name='amount'
render={({ field: { onBlur, onChange, value }, fieldState: { error } }) => (
<div className='px-[1.6rem] lg:px-[2.4rem] pr-6 '>
<Input
className='mb-[0.2rem]'
data-lpignore='true'
disabled={isDisabled}
error={!!error?.message}
isFullWidth
label={`${isBuy ? 'Sell' : 'Buy'} amount`}
message={
error ? error?.message : `Limit: ${minLimit}-${maxLimit}${accountCurrency}`
}
min={0}
name='amount'
onBlur={onBlur}
onChange={event => {
setInputValue(event.target.value);
onChange(event);
}}
onKeyDown={event => {
if (!floatingPointValidator(event.key)) {
event.preventDefault();
}
}}
rightPlaceholder={
<Text color='less-prominent' size='sm'>
{accountCurrency}
</Text>
}
step='any'
type='number'
value={value}
/>
</div>
)}
rules={{
max: {
message: `Maximum is ${maxLimit}${accountCurrency}`,
value: maxLimit,
},
min: {
message: `Minimum is ${minLimit}${accountCurrency}`,
value: minLimit,
},
required: 'Enter a valid amount',
}}
/>
</div>
{isMobile && <LightDivider />}
{!isMobile && (
<div className='buy-sell-amount__value'>
<Text color='less-prominent' size={labelSize}>{`You'll ${isBuy ? 'receive' : 'send'}`}</Text>
<Text size={isMobile ? 'md' : 'sm'} weight='bold'>
{buySellAmount} {localCurrency}
</Text>
</div>
)}
</div>
{isBuy && (
<div className='flex flex-col gap-[1.6rem]'>
{!paymentMethodNames?.length && (
<>
<LightDivider />
<Controller
control={control}
name='bank_details'
render={({ field: { onBlur, onChange, value }, fieldState: { error } }) => {
return (
<div className='px-[1.6rem] lg:px-[2.4rem] pt-[1.8rem]'>
<TextArea
hint={
error
? error.message
: 'Bank name, account number, beneficiary name'
}
isInvalid={!!error}
label='Your bank details'
maxLength={300}
onBlur={onBlur}
onChange={onChange}
shouldShowCounter
textSize='sm'
value={value}
/>
</div>
);
}}
rules={{
pattern: {
message: getTextFieldError('Bank details'),
value: VALID_SYMBOLS_PATTERN,
},
required: 'Bank details is required',
}}
rightPlaceholder={
<Text color='less-prominent' size='sm'>
{accountCurrency}
</Text>
}
step='any'
type='number'
value={value}
/>
</div>
</>
)}
rules={{
max: {
message: `Maximum is ${maxLimit}${accountCurrency}`,
value: maxLimit,
},
min: {
message: `Minimum is ${minLimit}${accountCurrency}`,
value: minLimit,
},
required: 'Enter a valid amount',
}}
/>
{isMobile && <LightDivider />}
<div className='flex flex-col w-full px-[2.4rem]'>
<LightDivider />
<Controller
control={control}
name='contact_details'
render={({ field: { onBlur, onChange, value }, fieldState: { error } }) => (
<div className='px-[1.6rem] lg:px-[2.4rem]'>
<TextArea
hint={error ? error.message : ''}
isInvalid={!!error}
label='Your contact details'
maxLength={300}
onBlur={onBlur}
onChange={onChange}
shouldShowCounter
textSize='sm'
value={value}
/>
</div>
)}
rules={{
pattern: {
message: getTextFieldError('Contact details'),
value: VALID_SYMBOLS_PATTERN,
},
required: 'Contact details is required',
}}
/>
</div>
)}
{isMobile && <LightDivider />}
{isMobile && (
<div className='buy-sell-amount__value'>
<Text color='less-prominent' size={labelSize}>{`You'll ${isBuy ? 'receive' : 'send'}`}</Text>
<Text size={isMobile ? 'md' : 'sm'} weight='bold'>
{buySellAmount} {localCurrency}
</Text>
</div>
</div>
)}
</div>
);
};
Expand Down
5 changes: 2 additions & 3 deletions src/components/BuySellForm/BuySellData/BuySellData.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
.buy-sell-data {
&__details {
display: grid;
grid-auto-flow: column;
display: flex;
margin-bottom: 1.6rem;

@include mobile {
grid-auto-flow: row;
flex-direction: column;
gap: 1.6rem;
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/components/BuySellForm/BuySellData/BuySellData.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,15 @@ const BuySellData = ({
}, {});

return (
<div className='p-[2.4rem]'>
<div className='p-[1.6rem] lg:px-[2.4rem]'>
<div className='buy-sell-data__details'>
<div className='flex flex-col'>
<div className='flex flex-col w-full'>
<Text color='less-prominent' size={labelSize}>
{isBuy ? 'Buyer' : 'Seller'}
</Text>
<Text size={valueSize}>{name}</Text>
</div>
<div className='flex flex-col'>
<div className='flex flex-col w-full'>
<Text color='less-prominent' size={labelSize}>{`Rate (1 ${accountCurrency})`}</Text>
<Text size={valueSize}>
{rate}
Expand Down
2 changes: 1 addition & 1 deletion src/components/BuySellForm/BuySellForm.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
top: -4rem;
left: 0;
z-index: 1;
height: calc(100vh - 8rem);
height: calc(100vh - 4rem);

& .mobile-wrapper__body {
overflow: auto;
Expand Down
Loading

0 comments on commit 179f9b0

Please sign in to comment.