diff --git a/package-lock.json b/package-lock.json index 94972aad..76af6798 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,9 +35,9 @@ } }, "@babel/helper-plugin-utils": { - "version": "7.16.5", - "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.5.tgz", - "integrity": "sha512-59KHWHXxVA9K4HNF4sbHCf+eJeFe0Te/ZFGqBT4OjXhrwvA04sGfaEGsVTdsjoszq0YTP49RC9UKe5g8uN2RwQ==" + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz", + "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==" }, "@babel/helper-validator-identifier": { "version": "7.15.7", @@ -352,9 +352,9 @@ } }, "@next/env": { - "version": "12.0.5", - "resolved": "https://registry.npmjs.org/@next/env/-/env-12.0.5.tgz", - "integrity": "sha512-Q8Imt2zahveh369OKCpuXTQbpkUhXsI2HZ4VTkzA0ymkhA3WVAjM369eW/ceEE2cR7YFA6LzgQ35kfoX4fOd+Q==" + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/env/-/env-12.0.7.tgz", + "integrity": "sha512-TNDqBV37wd95SiNdZsSUq8gnnrTwr+aN9wqy4Zxrxw4bC/jCHNsbK94DxjkG99VL30VCRXXDBTA1/Wa2jIpF9Q==" }, "@next/eslint-plugin-next": { "version": "11.1.2", @@ -366,14 +366,14 @@ } }, "@next/polyfill-module": { - "version": "12.0.5", - "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-12.0.5.tgz", - "integrity": "sha512-OknhYqdrIlAEopdUoybh76ewIvWfX4JnOdLwJoj1PO+oRkmxNJ8aeOapHBXSM8qeZuOQuDUfNbQn86Ra/qd3nQ==" + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-12.0.7.tgz", + "integrity": "sha512-sA8LAMMlmcspIZw/jeQuJTyA3uGrqOhTBaQE+G9u6DPohqrBFRkaz7RzzJeqXkUXw600occsIBknSjyVd1R67A==" }, "@next/react-dev-overlay": { - "version": "12.0.5", - "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-12.0.5.tgz", - "integrity": "sha512-CAzJ0oaH4KQEmnsJKGKWbpoB/rYBE8vQ+rAkdH7+JN+yFHE4r8X/C19ZK1TSB5TfuLqjzKySAPDmr7vF/aE5xA==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-12.0.7.tgz", + "integrity": "sha512-dSQLgpZ5uzyittFtIHlJCLAbc0LlMFbRBSYuGsIlrtGyjYN+WMcnz8lK48VLxNPFGuB/hEzkWV4TW5Zu75+Fzg==", "requires": { "@babel/code-frame": "7.12.11", "anser": "1.4.9", @@ -408,74 +408,74 @@ } }, "@next/react-refresh-utils": { - "version": "12.0.5", - "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-12.0.5.tgz", - "integrity": "sha512-pnVmX+DSC6BaJ2P+OdT/8+pyLaL1E3a60ivRcFf9rXtoNVo59ByXqXeQXfPJgSnJqF3vFLf8He2NjVDB1RdweQ==" + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-12.0.7.tgz", + "integrity": "sha512-Pglj1t+7RxH0txEqVcD8ZxrJgqLDmKvQDqxKq3ZPRWxMv7LTl7FVT2Pnb36QFeBwCvMVl67jxsADKsW0idz8sA==" }, "@next/swc-android-arm64": { - "version": "12.0.5", - "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.0.5.tgz", - "integrity": "sha512-UTwJFbhxiucxb1/ai9PjdOKgDfz2dj3wMmTXWbLVgDfZk1PH/J0BbfTXpgJ7zEmoCIPoMjj+J0nPC3YGVkMICQ==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.0.7.tgz", + "integrity": "sha512-yViT7EEc7JqxncRT+ZTeTsrAYXLlcefo0Y0eAfYmmalGD2605L4FWAVrJi4WnrSLji7l+veczw1WBmNeHICKKA==", "optional": true }, "@next/swc-darwin-arm64": { - "version": "12.0.5", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.0.5.tgz", - "integrity": "sha512-snOoobsQ6MyFZyjODglqcfvXbqlp2BC9fOlTVM4tViX+KWy8/MTdMCov1oezukai/0oqgJnHpZQAyFK4bqbJqQ==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.0.7.tgz", + "integrity": "sha512-vhAyW2rDEUcQesRVaj0z1hSoz7QhDzzGd0V1/5/5i9YJOfOtyrPsVJ82tlf7BfXl6/Ep+eKNfWVIb5/Jv89EKg==", "optional": true }, "@next/swc-darwin-x64": { - "version": "12.0.5", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.0.5.tgz", - "integrity": "sha512-YbI95eUUh6HH2nh26UoyezZABWd5NbjeIs9GeQGZSznolVoS4JNUvzzl3yf2Ugew0yrXlxJgOpG86qoXvhGBZQ==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.0.7.tgz", + "integrity": "sha512-km+6Rx6TvbraoQ1f0MXa69ol/x0RxzucFGa2OgZaYJERas0spy0iwW8hpASsGcf597D8VRW1x+R2C7ZdjVBSTw==", "optional": true }, "@next/swc-linux-arm-gnueabihf": { - "version": "12.0.5", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.0.5.tgz", - "integrity": "sha512-4ZOzb8GoCX1f/SmCjNCDIpyLukhPElAulPPUgeMo4cfHX/rSkXMXmfZQmUk0MFabRl6Y1mX0GFN1Qflya3bxYw==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.0.7.tgz", + "integrity": "sha512-d0zWr877YqZ2cf/DQy6obouaR39r0FPebcXj2nws9AC99m68CO2xVpWv9jT7mFvpY+T40HJisLH80jSZ2iQ9sA==", "optional": true }, "@next/swc-linux-arm64-gnu": { - "version": "12.0.5", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.0.5.tgz", - "integrity": "sha512-fa4Cd0m64zln0hIUovDtbRef4PDJuxlEdywv0TnJqYqLBl6MV7wYJeC5vZjNtRjsnEBTWXAlMXN3mBXwfOQatA==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.0.7.tgz", + "integrity": "sha512-fdobh5u6gG13Gd5LkHhJ+W8tF9hbaFolRW99FhzArMe5/nMKlLdBymOxvitE3K4gSFQxbXJA6TbU0Vv0e59Kww==", "optional": true }, "@next/swc-linux-arm64-musl": { - "version": "12.0.5", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.0.5.tgz", - "integrity": "sha512-keXca5WEa9poQ+3jJY6wVKFdOYYrfTx2exanV0DiZrz8ImJAMof6r9h5vHze+g7R+kDSZKM1UnM0I4lqcQqshQ==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.0.7.tgz", + "integrity": "sha512-vx0c5Q3oIScFNT/4jI9rCe0yPzKuCqWOkiO/OOV0ixSI2gLhbrwDIcdkm79fKVn3i8JOJunxE4zDoFeR/g8xqQ==", "optional": true }, "@next/swc-linux-x64-gnu": { - "version": "12.0.5", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.0.5.tgz", - "integrity": "sha512-E8lDTLuK+oyg0/WrkimFlLRnhsPuzIkFYgnB3WT9HwAW/2bcjbER3rVkOdXkg6UrfpU2aeJrHYmvzNcbp5rCKw==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.0.7.tgz", + "integrity": "sha512-9ITyp6s6uGVKNx3C/GP7GrYycbcwTADG7TdIXzXUxOOZORrdB1GNg3w/EL3Am4VMPPEpO6v1RfKo2IKZpVKfTA==", "optional": true }, "@next/swc-linux-x64-musl": { - "version": "12.0.5", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.0.5.tgz", - "integrity": "sha512-x4FAVszuNYKU7K8e5cLs6giQBZIS9rhTmylA4C5CvOonI6cSsR6yGxZiuivdHZ07TxEKL3o70InrSnDnqCtvUQ==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.0.7.tgz", + "integrity": "sha512-C+k+cygbIZXYfc+Hx2fNPUBEg7jzio+mniP5ywZevuTXW14zodIfQ3ZMoMJR8EpOVvYpjWFk2uAjiwqgx8vo/g==", "optional": true }, "@next/swc-win32-arm64-msvc": { - "version": "12.0.5", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.0.5.tgz", - "integrity": "sha512-jWA+cNtMpW7etgQ0R+8mAYzeraFI13SuxsEWaPBFXS8x60UAdYR3re3Kz9Y+vQdUkBV+a+l7zV1Ss+laKhOeug==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.0.7.tgz", + "integrity": "sha512-7jTRjOKkDVnb5s7VoHT7eX+eyT/5BQJ/ljP2G56riAgKGqPL63/V7FXemLhhLT67D+OjoP8DRA2E2ne6IPHk4w==", "optional": true }, "@next/swc-win32-ia32-msvc": { - "version": "12.0.5", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.0.5.tgz", - "integrity": "sha512-7tJGeWIiQWg+FKpwcY8xZ7JsSn2HVD7bM62KPkC3nkArmI3v/oAP95rHStVnMEuul6cnbSPAcvLJvCfJCIj+Wg==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.0.7.tgz", + "integrity": "sha512-2u5pGDsk7H6gGxob2ATIojzlwKzgYsrijo7RRpXOiPePVqwPWg6/pmhaJzLdpfjaBgRg1NFmwSp/7Ump9X8Ijg==", "optional": true }, "@next/swc-win32-x64-msvc": { - "version": "12.0.5", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.5.tgz", - "integrity": "sha512-6o9CJZy/qzlkMKvCHZsPNCUP4hzIgcOCpynOhJaCy3kqeyZsv/3lEg9SHKywoEhZjTkV06RgZO6hV3kmjeajYw==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.7.tgz", + "integrity": "sha512-frEWtbf+q8Oz4e2UqKJrNssk6DZ6/NLCQXn5/ORWE9dPAfe9XS6aK5FRZ6DuEPmmKd5gOoRkKJFFz5nYd+TeyQ==", "optional": true }, "@nodelib/fs.scandir": { @@ -1419,9 +1419,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001287", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001287.tgz", - "integrity": "sha512-4udbs9bc0hfNrcje++AxBuc6PfLNHwh3PO9kbwnfCQWyqtlzg3py0YgFu8jyRTTo85VAz4U+VLxSlID09vNtWA==" + "version": "1.0.30001296", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001296.tgz", + "integrity": "sha512-WfrtPEoNSoeATDlf4y3QvkwiELl9GyPLISV5GejTbbQRtQx4LhsXmc9IQ6XCL2d7UxCyEzToEZNMeqR79OUw8Q==" }, "caseless": { "version": "0.12.0", @@ -1763,6 +1763,11 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.19.tgz", "integrity": "sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==" }, + "currency.js": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/currency.js/-/currency.js-2.0.4.tgz", + "integrity": "sha512-6/OplJYgJ0RUlli74d93HJ/OsKVBi8lB1+Z6eJYS1YZzBuIp4qKKHpJ7ad+GvTlWmLR/hLJOWTykN5Nm8NJ7+w==" + }, "cypress": { "version": "8.7.0", "resolved": "https://registry.npmjs.org/cypress/-/cypress-8.7.0.tgz", @@ -1982,9 +1987,9 @@ } }, "electron-to-chromium": { - "version": "1.4.20", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.20.tgz", - "integrity": "sha512-N7ZVNrdzX8NE90OXEFBMsBf3fp8P/vVDUER3WCUZjzC7OkNTXHVoF6W9qVhq8+dA8tGnbDajzUpj2ISNVVyj+Q==" + "version": "1.4.35", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.35.tgz", + "integrity": "sha512-wzTOMh6HGFWeALMI3bif0mzgRrVGyP1BdFRx7IvWukFrSC5QVQELENuy+Fm2dCrAdQH9T3nuqr07n94nPDFBWA==" }, "elliptic": { "version": "6.5.4", @@ -4026,28 +4031,28 @@ "dev": true }, "next": { - "version": "12.0.5", - "resolved": "https://registry.npmjs.org/next/-/next-12.0.5.tgz", - "integrity": "sha512-Yuq01fmjnwmiZCOOP8nPJKp7/kFDTCUv1xX3qO9iMouWRl5rHPvp14U2J6VexttxesaIAaP+1CABP2yR2HLXTA==", + "version": "12.0.7", + "resolved": "https://registry.npmjs.org/next/-/next-12.0.7.tgz", + "integrity": "sha512-sKO8GJJYfuk9c+q+zHSNumvff+wP7ufmOlwT6BuzwiYfFJ61VTTkfTcDLSJ+95ErQJiC54uS4Yg5JEE8H6jXRA==", "requires": { "@babel/runtime": "7.15.4", "@hapi/accept": "5.0.2", "@napi-rs/triples": "1.0.3", - "@next/env": "12.0.5", - "@next/polyfill-module": "12.0.5", - "@next/react-dev-overlay": "12.0.5", - "@next/react-refresh-utils": "12.0.5", - "@next/swc-android-arm64": "12.0.5", - "@next/swc-darwin-arm64": "12.0.5", - "@next/swc-darwin-x64": "12.0.5", - "@next/swc-linux-arm-gnueabihf": "12.0.5", - "@next/swc-linux-arm64-gnu": "12.0.5", - "@next/swc-linux-arm64-musl": "12.0.5", - "@next/swc-linux-x64-gnu": "12.0.5", - "@next/swc-linux-x64-musl": "12.0.5", - "@next/swc-win32-arm64-msvc": "12.0.5", - "@next/swc-win32-ia32-msvc": "12.0.5", - "@next/swc-win32-x64-msvc": "12.0.5", + "@next/env": "12.0.7", + "@next/polyfill-module": "12.0.7", + "@next/react-dev-overlay": "12.0.7", + "@next/react-refresh-utils": "12.0.7", + "@next/swc-android-arm64": "12.0.7", + "@next/swc-darwin-arm64": "12.0.7", + "@next/swc-darwin-x64": "12.0.7", + "@next/swc-linux-arm-gnueabihf": "12.0.7", + "@next/swc-linux-arm64-gnu": "12.0.7", + "@next/swc-linux-arm64-musl": "12.0.7", + "@next/swc-linux-x64-gnu": "12.0.7", + "@next/swc-linux-x64-musl": "12.0.7", + "@next/swc-win32-arm64-msvc": "12.0.7", + "@next/swc-win32-ia32-msvc": "12.0.7", + "@next/swc-win32-x64-msvc": "12.0.7", "acorn": "8.5.0", "assert": "2.0.0", "browserify-zlib": "0.2.0", diff --git a/package.json b/package.json index 92a07d7f..4b67a7a8 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@stripe/react-stripe-js": "^1.4.0", "@stripe/stripe-js": "^1.13.2", "axios": "^0.21.1", + "currency.js": "^2.0.4", "dom-to-image": "^2.6.0", "geocoder-arcgis": "^2.0.5", "next": "^12.0.5", diff --git a/src/Donations/Components/DonationsForm.tsx b/src/Donations/Components/DonationsForm.tsx index 2ee4b30f..7dec61f7 100644 --- a/src/Donations/Components/DonationsForm.tsx +++ b/src/Donations/Components/DonationsForm.tsx @@ -43,13 +43,15 @@ function DonationsForm() { profile, frequency, tenant, - setTransferDetails + setTransferDetails, } = React.useContext(QueryParamContext); const { t, i18n } = useTranslation(["common", "country", "donate"]); const [minAmt, setMinAmt] = React.useState(0); const [showFrequencyOptions, setShowFrequencyOptions] = React.useState(false); + const [invalidAmount, setInvalidAmount] = React.useState(false); const { isLoading, isAuthenticated, getAccessTokenSilently } = useAuth0(); + const router = useRouter(); React.useEffect(() => { @@ -127,7 +129,7 @@ function DonationsForm() { payDonationFunction({ gateway: "stripe", method: "card", // Hard coding card here since we only have card enabled in gpay and apple pay - providerObject: paymentMethod,// payment method + providerObject: paymentMethod, // payment method setIsPaymentProcessing, setPaymentError, t, @@ -140,7 +142,7 @@ function DonationsForm() { setshowErrorCard, router, tenant, - setTransferDetails + setTransferDetails, }); }); }; @@ -150,9 +152,19 @@ function DonationsForm() { const donationSelection = () => { switch (projectDetails.purpose) { case "funds": - return ; + return ( + + ); case "bouquet": - return ; + return ( + + ); case "trees": default: return ; @@ -215,13 +227,14 @@ function DonationsForm() { )} {process.env.RECURRENCY && - showFrequencyOptions && - !(isGift && giftDetails.recipientName === "") ? ( + showFrequencyOptions && + !(isGift && giftDetails.recipientName === "") ? (
@@ -232,8 +245,9 @@ function DonationsForm() { {donationSelection()}
@@ -243,12 +257,13 @@ function DonationsForm() { {paymentSetup && projectDetails ? ( minAmt && - (paymentSetup.unitBased - ? paymentSetup?.unitCost * quantity - : quantity) >= minAmt ? ( + !invalidAmount && + (paymentSetup.unitBased + ? paymentSetup?.unitCost * quantity + : quantity) >= minAmt ? ( !isPaymentOptionsLoading && - paymentSetup?.gateways?.stripe?.account && - currency ? ( + paymentSetup?.gateways?.stripe?.account && + currency ? (
) + ) : invalidAmount ? ( +

+ Invalid amount entered +

) : minAmt > 0 ? (

{t("minDonate")}{" "} diff --git a/src/Donations/Micros/DonationTypes/BouquetDonations.tsx b/src/Donations/Micros/DonationTypes/BouquetDonations.tsx index bd20fedd..7f1d4b64 100644 --- a/src/Donations/Micros/DonationTypes/BouquetDonations.tsx +++ b/src/Donations/Micros/DonationTypes/BouquetDonations.tsx @@ -94,6 +94,9 @@ function FundingDonations({ setopenCurrencyModal }: Props): ReactElement { setisCustomDonation(true); } else if (newQuantity == 0) { setisCustomDonation(true); + } else if (newQuantity == 0) { + setisCustomDonation(true); + customInputRef.current.focus(); } else { setCustomInputValue(""); setisCustomDonation(false); @@ -118,12 +121,6 @@ function FundingDonations({ setopenCurrencyModal }: Props): ReactElement { > {paymentSetup.options && paymentSetup.options.slice(0, 6).map((option, index) => { - console.log( - `option.quantity, quantity`, - option.quantity, - quantity, - option.quantity === quantity - ); return (

{ - if (e.target) { - if (e.target.value === "" || e.target.value < 1) { + const setCustomValue = (value: any) => { + if (value) { + if (value === "" || value < 1) { // if input is '', default 1 setquantity(1); - } else if (e.target.value.toString().length <= 12) { - setquantity(e.target.value); + } else if (value.toString().length <= 12) { + setquantity(value); } } }; @@ -77,6 +81,9 @@ function FundingDonations({ setopenCurrencyModal }: Props): ReactElement { setisCustomDonation(true); } else if (newQuantity == 0) { setisCustomDonation(true); + } else if (newQuantity == 0) { + setisCustomDonation(true); + customInputRef.current.focus(); } else { setCustomInputValue(""); setisCustomDonation(false); @@ -91,6 +98,9 @@ function FundingDonations({ setopenCurrencyModal }: Props): ReactElement { const customInputRef = React.useRef(null); + const amountRegex1 = /^(\d+(\.\d{0,2})?|\.?\d{1,2})$/; + const amountRegex2 = /^(\d+(\,\d{0,2})?|\,?\d{1,2})$/; + return ( <>
{ + // ^\d{0,5}(\.,\d{1,3})?$ // 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, + "" + ); // if length of input more than 12, display only 12 digits if (e.target.value.toString().length >= 12) { e.target.value = e.target.value @@ -190,11 +204,21 @@ function FundingDonations({ setopenCurrencyModal }: Props): ReactElement { }} value={customInputValue} type="text" - inputMode="numeric" - pattern="\d*" + inputMode="decimal" + // pattern="/^(\d+)(\,\d{1,2}|\.\d{1,2})?$/" onChange={(e) => { - setCustomValue(e); setCustomInputValue(e.target.value); + if ( + !amountRegex1.test(e.target.value) && + !amountRegex2.test(e.target.value) + ) { + setInvalidAmount(true); + } else { + setCustomValue( + Number(e.target.value.replace(/[,]/g, ".")) + ); + setInvalidAmount(false); + } }} ref={customInputRef} />