Scribd
Upload
14 views4 pages

DDD

Uploaded by

fsilvasimpro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views4 pages

DDD

Uploaded by

fsilvasimpro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

import React from 'react';

import PropTypes from 'prop-types';


import { Divider, Space } from 'antd';

import Content from '../Content/Content';


import MaskedInput from '../Input/NewMaskedInput';
import { Caption, Subtitle } from '../Text/Text';
import { Div, colors, fonts, spaces } from '../../styles/style';
import Segment from '../Select/Segmented';
import formatNumber from '../../lib/helpers/formatNumber';
import formatCurrency from '../../lib/helpers/formatCurrency';
import HowDoesItWorksButton from '../Button/HowDoesItWorksButton';

const FineInterestDiscount = ({ values, onChangeValues = (f) => f }) => {


const typeOptions = [
{ value: 'PERCENTAGE', label: 'Percentual' },
{ value: 'FIXED', label: 'Valor fixo' },
];

const renderInput = ({ field, type, value, onChange = (f) => f }) => {


const isPercentage = type === 'PERCENTAGE';
const maskOptions = isPercentage
? {
suffix: '%',
prefix: '',
allowDecimal: true,
}
: {
prefix: 'R$',
allowDecimal: true,
};
return (
<MaskedInput
type="number"
defaultValue={formatCurrency(value)}
placeholder={isPercentage ? '0,00%' : 'R$00,00'}
maskOptions={maskOptions}
onChange={(e) =>
onChange((prev) => ({
...prev,
[field]: formatNumber(e.target.value),
}))
}
/>
);
};

const onChangeTypes = ({ key, value }) => {


return onChangeValues((prev) => ({ ...prev, [key]: value }));
};

const Interest = (
<Div gap={spaces.space2} direction="column" align="start">
<Div justify="space-between" $fullWidth>
<Caption size={fonts.sizeMd}>
Insira abaixo os valores que serão sugeridos na criação das suas
cobranças Vobi Pay.
</Caption>
<HowDoesItWorksButton id="HowJMDWorks" className="hideMobile" />
</Div>

<Div gap={spaces.space2} direction="column" align="start">


<Subtitle
weight={fonts.weight600}
type="secondary"
color={colors.neutral40}
>
Juros
</Subtitle>
<Caption weight={fonts.weight500}>
Cobre juros caso o pagamento não seja efetuado até a data de
vencimento. O valor da parcela será atualizado automaticamente todos
os dias até que o pagamento seja feito.
</Caption>
<Div direction="column" align="start">
<Caption weight={fonts.weight500}>Percentual de juros ao mês</Caption>
{renderInput({
field: 'interest',
type: 'PERCENTAGE',
value: values?.interest,
onChange: onChangeValues,
})}
</Div>
</Div>
</Div>
);

const Fine = (
<Div gap={spaces.space2} direction="column" align="start">
<Subtitle
weight={fonts.weight600}
type="secondary"
color={colors.neutral40}
>
Multa
</Subtitle>

<Div gap={spaces.space2} direction="column" align="start">


<Caption weight={fonts.weight500}>
Se o pagamento for efetuado após a data de vencimento, a multa será
somada ao valor da parcela.
</Caption>

<Segment
id="fineType"
options={typeOptions}
value={values?.fineType}
onChange={(e) => onChangeTypes({ key: 'fineType', value: e })}
/>
<Div direction="column" align="start">
<Caption weight={fonts.weight500}>
{`${
values?.fineType === 'PERCENTAGE' ? 'Percentual' : 'Valor'
} da multa`}
</Caption>
{renderInput({
field: 'fine',
type: values?.fineType,
value: values?.fine,
onChange: onChangeValues,
})}
</Div>
</Div>
</Div>
);

const Percentage = (
<Div gap={spaces.space2} direction="column" align="start">
<Subtitle
weight={fonts.weight600}
type="secondary"
color={colors.neutral40}
>
Desconto por pagamento antecipado
</Subtitle>
<Div gap={spaces.space2} direction="column" align="start">
<Caption weight={fonts.weight500}>
Ofereça um desconto em cada parcela da cobrança para incentivar seus
clientes a realizar o pagamento antes do vencimento.
</Caption>
<Segment
id="fineType"
options={typeOptions}
value={values?.discountType}
onChange={(e) => onChangeTypes({ key: 'discountType', value: e })}
/>
<Div direction="column" align="start">
<Caption weight={fonts.weight500}>
{`${
values?.discountType === 'PERCENTAGE' ? 'Percentual' : 'Valor'
} do desconto`}
</Caption>
{renderInput({
field: 'discount',
type: values?.discountType,
value: values?.discount,
onChange: onChangeValues,
})}
</Div>
</Div>
</Div>
);

return (
<Space direction="vertical" size={8} style={{ width: '100%' }}>
<Content>{Interest}</Content>
<Divider style={{ marginTop: 0, marginBottom: 0 }} />
<Content>{Fine}</Content>
<Divider style={{ marginTop: 0, marginBottom: 0 }} />
<Content>{Percentage}</Content>
<Divider style={{ marginTop: 0, marginBottom: 0 }} />
</Space>
);
};

FineInterestDiscount.propTypes = {
values: PropTypes.instanceOf(Object),
onChangeValues: PropTypes.func,
};

export default FineInterestDiscount;

You might also like