Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow decimal amounts #293

Closed
wants to merge 4 commits into from
Closed

Allow decimal amounts #293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1fa9132
Allow decimal amounts
Shreyaschorge May 26, 2022
e2dc09a
fix number to 2 digits after the decimal
Shreyaschorge May 26, 2022
88e6a07
handle translation and restrict user to enter only 2 digits after dec…
Shreyaschorge May 26, 2022
b0af14c
Merge branch 'develop' into bigfix/allow-decimal-amounts
norbertschuler Jun 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 19 additions & 4 deletions src/Donations/Micros/DonationTypes/BouquetDonations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,18 @@ function FundingDonations({ setopenCurrencyModal }: Props): ReactElement {
}
}, [paymentSetup]);

const setCustomInputOnBlur = () => {
setCustomInputValue(
isNaN(quantity)
? ""
: getFormattedNumber(i18n.language, parseFloat(quantity.toFixed(2)))
);
};

React.useEffect(() => {
setCustomInputOnBlur();
}, [i18n.language]);

// IMP TO DO -> Due to new requirements of showing Rounded costs for Bouquet and in future for all we will now have to start passing the amount instead of quantity and unitCost, this demands a structural change in multiple files and hence should be done carefully

// const roundedCostCalculator=(unitCost,quantity)=>{
Expand Down Expand Up @@ -208,10 +220,12 @@ function FundingDonations({ setopenCurrencyModal }: Props): ReactElement {
onInput={(e) => {
// replaces any character other than number to blank
// e.target.value = e.target.value.replace(/[,]/g, '.');
e.target.value = e.target.value.replace(
/[^0-9]/g,
""
);
e.target.value = e.target.value
.replace(/[^0-9^\.]+/g, "")
.replace(".", "$#$")
.replace(/\./g, "")
.replace("$#$", ".")
.replace(/^0+/, "");
// if length of input more than 12, display only 12 digits
if (e.target.value.toString().length >= 12) {
e.target.value = e.target.value
Expand All @@ -227,6 +241,7 @@ function FundingDonations({ setopenCurrencyModal }: Props): ReactElement {
setCustomValue(e);
setCustomInputValue(e.target.value);
}}
onBlur={setCustomInputOnBlur}
ref={customInputRef}
/>
<p
Expand Down
25 changes: 21 additions & 4 deletions src/Donations/Micros/DonationTypes/FundingDonations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { getCountryDataBy } from "../../../Utils/countryUtils";
// import { getPaymentOptionIcons } from "src/Utils/getImageURL";
import { useRouter } from "next/router";
import { approximatelyEqual } from "src/Utils/common";
import { getFormattedNumber } from "../../../Utils/getFormattedNumber";

interface Props {
setopenCurrencyModal: any;
Expand Down Expand Up @@ -101,6 +102,18 @@ function FundingDonations({ setopenCurrencyModal }: Props): ReactElement {
}
}, [isCustomDonation]);

const setCustomInputOnBlur = () => {
setCustomInputValue(
isNaN(quantity)
? ""
: getFormattedNumber(i18n.language, parseFloat(quantity.toFixed(2)))
);
};

React.useEffect(() => {
setCustomInputOnBlur();
}, [i18n.language]);

const customInputRef = React.useRef(null);

return (
Expand Down Expand Up @@ -205,10 +218,13 @@ function FundingDonations({ setopenCurrencyModal }: Props): ReactElement {
}}
onInput={(e) => {
// replaces any character other than number to blank
e.target.value = e.target.value.replace(
/[^0-9]/g,
""
);
e.target.value = e.target.value
.replace(/[^0-9^\.]+/g, "")
.replace(".", "$#$")
.replace(/\./g, "")
.replace("$#$", ".")
.replace(/^0+/, "");

Comment on lines +221 to +227
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this won't allow to input a "," as used as separater for German values, but afterwards will print the amount, e.g. "5.5." in a localized form e.g. "5,5" for German language. It works and we probably cannot support an input parser for every kind of currency formatting, but I am not sure if everybody will understand this logic.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with @norbertschuler, it might be confusing. If it is not possible to find a solution, we should think about a helper text that explains it to the user.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So close this PR or keep it?

// if length of input more than 12, display only 12 digits
if (e.target.value.toString().length >= 12) {
e.target.value = e.target.value
Expand All @@ -224,6 +240,7 @@ function FundingDonations({ setopenCurrencyModal }: Props): ReactElement {
setCustomValue(e);
setCustomInputValue(e.target.value);
}}
onBlur={setCustomInputOnBlur}
ref={customInputRef}
/>
</div>
Expand Down