Skip to content

Commit 1091426

Browse files
montezumemontezume
authored
fix: change high precision money display (#661)
refactor: new high precision badge
1 parent 4a3ac0f commit 1091426

13 files changed

+173
-89
lines changed

‎src/components/fields/money-field/money-field.js

+3-27
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import requiredIf from 'react-required-if';
4-
import { FormattedMessage, injectIntl } from 'react-intl';
54
import has from 'lodash/has';
65
import Constraints from '../../constraints';
76
import Spacings from '../../spacings';
@@ -10,10 +9,7 @@ import MoneyInput from '../../inputs/money-input';
109
import getFieldId from '../../../utils/get-field-id';
1110
import createSequentialId from '../../../utils/create-sequential-id';
1211
import FieldErrors from '../../field-errors';
13-
import { VerifiedIcon } from '../../icons';
14-
import Text from '../../typography/text';
1512
import filterDataAttributes from '../../../utils/filter-data-attributes';
16-
import messages from './messages';
1713

1814
const sequentialId = createSequentialId('money-field-');
1915

@@ -35,6 +31,7 @@ class MoneyField extends React.Component {
3531
amount: PropTypes.bool,
3632
currencyCode: PropTypes.bool,
3733
}),
34+
hasHighPrecisionBadge: PropTypes.bool,
3835

3936
// Some other fields use isTouched, but the check isn't as simple here.
4037
// isTouched accepts a boolean, whereas touched takes an object.
@@ -72,11 +69,6 @@ class MoneyField extends React.Component {
7269
),
7370
hintIcon: PropTypes.node,
7471
description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
75-
hasHighPrecisionBadge: PropTypes.bool,
76-
// HoC
77-
intl: PropTypes.shape({
78-
locale: PropTypes.string.isRequired,
79-
}).isRequired,
8072
};
8173

8274
static defaultProps = {
@@ -108,23 +100,6 @@ class MoneyField extends React.Component {
108100
description={this.props.description}
109101
onInfoButtonClick={this.props.onInfoButtonClick}
110102
hintIcon={this.props.hintIcon}
111-
badge={
112-
this.props.hasHighPrecisionBadge &&
113-
!MoneyInput.isEmpty(this.props.value) &&
114-
MoneyInput.isHighPrecision(
115-
this.props.value,
116-
this.props.intl.locale
117-
) ? (
118-
<Spacings.Inline scale="xs" alignItems="flexEnd">
119-
<VerifiedIcon size="medium" theme="blue" />
120-
<Text.Detail isInline={true}>
121-
<FormattedMessage {...messages.highPrecision} />
122-
</Text.Detail>
123-
</Spacings.Inline>
124-
) : (
125-
undefined
126-
)
127-
}
128103
hasRequiredIndicator={this.props.isRequired}
129104
htmlFor={this.state.id}
130105
/>
@@ -141,6 +116,7 @@ class MoneyField extends React.Component {
141116
isReadOnly={this.props.isReadOnly}
142117
onChange={this.props.onChange}
143118
hasError={hasError}
119+
hasHighPrecisionBadge={this.props.hasHighPrecisionBadge}
144120
{...filterDataAttributes(this.props)}
145121
/>
146122
<FieldErrors
@@ -154,4 +130,4 @@ class MoneyField extends React.Component {
154130
}
155131
}
156132

157-
export default injectIntl(MoneyField);
133+
export default MoneyField;

‎src/components/fields/money-field/money-field.spec.js

-17
Original file line numberDiff line numberDiff line change
@@ -185,23 +185,6 @@ describe('when `hint` is passed', () => {
185185
});
186186
});
187187

188-
describe('when high precision price should be shown', () => {
189-
it('should be visible when a high precision price is entered', () => {
190-
const { container } = renderMoneyField({
191-
value: { amount: '12.004', currencyCode: 'EUR' },
192-
hasHighPrecisionBadge: true,
193-
});
194-
expect(container).toHaveTextContent(/High Precision Price/i);
195-
});
196-
it('should not be visible when no high precision price is entered', () => {
197-
const { container } = renderMoneyField({
198-
value: { amount: '12.00', currencyCode: 'EUR' },
199-
hasHighPrecisionBadge: true,
200-
});
201-
expect(container).not.toHaveTextContent(/High Precision Price/i);
202-
});
203-
});
204-
205188
describe('when disabled', () => {
206189
it('should disable the inputs', () => {
207190
const { getByLabelText } = renderMoneyField({ isDisabled: true });

‎src/components/icons/index.js

+5
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ import OrigFilterIcon from './svg/filter.react.svg';
6161
import OrigFlagFilledIcon from './svg/flag-filled.react.svg';
6262
import OrigFlagLinearIcon from './svg/flag-linear.react.svg';
6363
import OrigFlameIcon from './svg/flame.react.svg';
64+
import OrigFractionDigitsIcon from './svg/fraction-digits.react.svg';
6465
import OrigGearIcon from './svg/gear.react.svg';
6566
import OrigGraduationCapIcon from './svg/graduation-cap.react.svg';
6667
import OrigGraphIcon from './svg/graph.react.svg';
@@ -255,6 +256,10 @@ export const FlagLinearIcon = createStyledIcon(
255256
'FlagLinearIcon'
256257
);
257258
export const FlameIcon = createStyledIcon(OrigFlameIcon, 'FlameIcon');
259+
export const FractionDigitsIcon = createStyledIcon(
260+
OrigFractionDigitsIcon,
261+
'FractionDigitsIcon'
262+
);
258263
export const GearIcon = createStyledIcon(OrigGearIcon, 'GearIcon');
259264
export const GraduationCapIcon = createStyledIcon(
260265
OrigGraduationCapIcon,

‎src/components/icons/svg/fraction-digits.react.svg

+14
Loading

‎src/components/inputs/money-input/README.md

+18-17
Original file line numberDiff line numberDiff line change
@@ -30,23 +30,24 @@ The amount can have an arbitrary precision. When the precision of the amount exc
3030
3131
#### Properties
3232

33-
| Props | Type | Required | Values | Default | Description |
34-
| ---------------------- | ------------------------------------------ | :------: | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
35-
| `name` | `string` | | - | - | The prefix used to create a HTML `name` property for the amount input field (`${name}.amount`) and the currency dropdown (`${name}.currencyCode`). |
36-
| `value` | `{ currencyCode: string, amount: string }` | ✅ | - | - | Value of the input. Consists of the currency code and an amount. `amount` is a string representing the amount. A dot has to be used as the decimal separator. |
37-
| `value.currencyCode` | `string` | ✅ | - | - | The currency code influences the fraction digits when formatting on blur. Can be an empty string. |
38-
| `value.amount` | `string` | ✅ | - | - | Amount formatted as a number, e.g. "10.30". Must use a dot as the decimal separator. Can be an empty string. |
39-
| `currencies` | array of `string` | - | - | [] | List of possible currencies. When not provided or empty, the component renders a label with the value's currency instead of a dropdown. |
40-
| `placeholder` | `string` | - | | - | Placeholder text for the input. |
41-
| `onFocus` | `func` | - | - | - | Called when the amount field or the currency code dropdown gains focus. |
42-
| `onBlur` | `func` | - | - | - | Called when the amount field or the currency code dropdown is blurred. |
43-
| `isDisabled` | `bool` | - | - | `false` | Indicates that the field cannot be used. |
44-
| `isReadOnly` | `bool` | - | - | `false` | Indicates that the field is displaying read-only content |
45-
| `isAutofocussed` | `bool` | - | - | - | Focus the input field on initial render |
46-
| `onChange` | `function(event)` | ✳️ | - | - | Called with the event of the input or dropdown when either the currency or the amount have changed. Either `onChange` or `onChangeValue` must be passed. |
47-
| `hasError` | `bool` | - | - | - | Indicates if the input has an error |
48-
| `hasWarning` | `bool` | - | - | - | Indicates if the input has a warning |
49-
| `horizontalConstraint` | `string` | - | `s`, `m`, `l`, `xl`, `scale` | `scale` | Horizontal size limit of the input fields. |
33+
| Props | Type | Required | Values | Default | Description |
34+
| ----------------------- | ------------------------------------------ | :------: | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
35+
| `name` | `string` | | - | - | The prefix used to create a HTML `name` property for the amount input field (`${name}.amount`) and the currency dropdown (`${name}.currencyCode`). |
36+
| `value` | `{ currencyCode: string, amount: string }` | ✅ | - | - | Value of the input. Consists of the currency code and an amount. `amount` is a string representing the amount. A dot has to be used as the decimal separator. |
37+
| `value.currencyCode` | `string` | ✅ | - | - | The currency code influences the fraction digits when formatting on blur. Can be an empty string. |
38+
| `value.amount` | `string` | ✅ | - | - | Amount formatted as a number, e.g. "10.30". Must use a dot as the decimal separator. Can be an empty string. |
39+
| `currencies` | array of `string` | - | - | [] | List of possible currencies. When not provided or empty, the component renders a label with the value's currency instead of a dropdown. |
40+
| `placeholder` | `string` | - | | - | Placeholder text for the input. |
41+
| `onFocus` | `func` | - | - | - | Called when the amount field or the currency code dropdown gains focus. |
42+
| `onBlur` | `func` | - | - | - | Called when the amount field or the currency code dropdown is blurred. |
43+
| `isDisabled` | `bool` | - | - | `false` | Indicates that the field cannot be used. |
44+
| `isReadOnly` | `bool` | - | - | `false` | Indicates that the field is displaying read-only content |
45+
| `isAutofocussed` | `bool` | - | - | - | Focus the input field on initial render |
46+
| `onChange` | `function(event)` | ✳️ | - | - | Called with the event of the input or dropdown when either the currency or the amount have changed. Either `onChange` or `onChangeValue` must be passed. |
47+
| `hasError` | `bool` | - | - | - | Indicates if the input has an error |
48+
| `hasWarning` | `bool` | - | - | - | Indicates if the input has a warning |
49+
| `horizontalConstraint` | `string` | - | `s`, `m`, `l`, `xl`, `scale` | `scale` | Horizontal size limit of the input fields. |
50+
| `hasHighPrecisionBadge` | `bool` | - | - | - | Shows high precision badge in case current value uses high precision. |
5051

5152
### Static methods
5253

‎src/components/inputs/money-input/messages.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { defineMessages } from 'react-intl';
2+
3+
export default defineMessages({
4+
highPrecision: {
5+
id: 'UIKit.MoneyInput.highPrecision',
6+
description: 'Label of high precision tooltip in MoneyInput',
7+
defaultMessage: 'High Precision Price',
8+
},
9+
});

0 commit comments

Comments
 (0)