Skip to content

I
ivrnet_payment
Commit 9c5c7a18 authored by Bilal's avatar Bilal
Browse files
Options

Updated form to use material UI

parent 72197d82
Hide whitespace changes
Inline Side-by-side
Showing with 792 additions and 176 deletions
package-lock.json
View file @ 9c5c7a18
...@@ -8,6 +8,11 @@ ...@@ -8,6 +8,11 @@
"name": "ivrnet_payment", "name": "ivrnet_payment",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.18",
"@mui/lab": "^5.0.0-alpha.153",
"@mui/material": "^5.14.18",
"@testing-library/jest-dom": "^5.17.0", "@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
...@@ -2288,6 +2293,163 @@ ...@@ -2288,6 +2293,163 @@
"postcss-selector-parser": "^6.0.10" "postcss-selector-parser": "^6.0.10"
} }
}, },
"node_modules/@emotion/babel-plugin": {
"version": "11.11.0",
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
"integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
"dependencies": {
"@babel/helper-module-imports": "^7.16.7",
"@babel/runtime": "^7.18.3",
"@emotion/hash": "^0.9.1",
"@emotion/memoize": "^0.8.1",
"@emotion/serialize": "^1.1.2",
"babel-plugin-macros": "^3.1.0",
"convert-source-map": "^1.5.0",
"escape-string-regexp": "^4.0.0",
"find-root": "^1.1.0",
"source-map": "^0.5.7",
"stylis": "4.2.0"
}
},
"node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
"integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
},
"node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@emotion/babel-plugin/node_modules/source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/@emotion/cache": {
"version": "11.11.0",
"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
"integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
"dependencies": {
"@emotion/memoize": "^0.8.1",
"@emotion/sheet": "^1.2.2",
"@emotion/utils": "^1.2.1",
"@emotion/weak-memoize": "^0.3.1",
"stylis": "4.2.0"
}
},
"node_modules/@emotion/hash": {
"version": "0.9.1",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
"integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
},
"node_modules/@emotion/is-prop-valid": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
"integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
"dependencies": {
"@emotion/memoize": "^0.8.1"
}
},
"node_modules/@emotion/memoize": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
"integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
},
"node_modules/@emotion/react": {
"version": "11.11.1",
"resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz",
"integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==",
"dependencies": {
"@babel/runtime": "^7.18.3",
"@emotion/babel-plugin": "^11.11.0",
"@emotion/cache": "^11.11.0",
"@emotion/serialize": "^1.1.2",
"@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
"@emotion/utils": "^1.2.1",
"@emotion/weak-memoize": "^0.3.1",
"hoist-non-react-statics": "^3.3.1"
},
"peerDependencies": {
"react": ">=16.8.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@emotion/serialize": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz",
"integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==",
"dependencies": {
"@emotion/hash": "^0.9.1",
"@emotion/memoize": "^0.8.1",
"@emotion/unitless": "^0.8.1",
"@emotion/utils": "^1.2.1",
"csstype": "^3.0.2"
}
},
"node_modules/@emotion/sheet": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
"integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
},
"node_modules/@emotion/styled": {
"version": "11.11.0",
"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz",
"integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==",
"dependencies": {
"@babel/runtime": "^7.18.3",
"@emotion/babel-plugin": "^11.11.0",
"@emotion/is-prop-valid": "^1.2.1",
"@emotion/serialize": "^1.1.2",
"@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
"@emotion/utils": "^1.2.1"
},
"peerDependencies": {
"@emotion/react": "^11.0.0-rc.0",
"react": ">=16.8.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@emotion/unitless": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
"integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
},
"node_modules/@emotion/use-insertion-effect-with-fallbacks": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
"integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
"peerDependencies": {
"react": ">=16.8.0"
}
},
"node_modules/@emotion/utils": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
"integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
},
"node_modules/@emotion/weak-memoize": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
"integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
},
"node_modules/@eslint-community/eslint-utils": { "node_modules/@eslint-community/eslint-utils": {
"version": "4.4.0", "version": "4.4.0",
"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
...@@ -2381,6 +2543,40 @@ ...@@ -2381,6 +2543,40 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0" "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
} }
}, },
"node_modules/@floating-ui/core": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
"integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
"dependencies": {
"@floating-ui/utils": "^0.1.3"
}
},
"node_modules/@floating-ui/dom": {
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
"integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
"dependencies": {
"@floating-ui/core": "^1.4.2",
"@floating-ui/utils": "^0.1.3"
}
},
"node_modules/@floating-ui/react-dom": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.4.tgz",
"integrity": "sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==",
"dependencies": {
"@floating-ui/dom": "^1.5.1"
},
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/@floating-ui/utils": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
"integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
},
"node_modules/@humanwhocodes/config-array": { "node_modules/@humanwhocodes/config-array": {
"version": "0.11.13", "version": "0.11.13",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
...@@ -3155,6 +3351,301 @@ ...@@ -3155,6 +3351,301 @@
"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
}, },
"node_modules/@mui/base": {
"version": "5.0.0-beta.24",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.24.tgz",
"integrity": "sha512-bKt2pUADHGQtqWDZ8nvL2Lvg2GNJyd/ZUgZAJoYzRgmnxBL9j36MSlS3+exEdYkikcnvVafcBtD904RypFKb0w==",
"dependencies": {
"@babel/runtime": "^7.23.2",
"@floating-ui/react-dom": "^2.0.4",
"@mui/types": "^7.2.9",
"@mui/utils": "^5.14.18",
"@popperjs/core": "^2.11.8",
"clsx": "^2.0.0",
"prop-types": "^15.8.1"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui"
},
"peerDependencies": {
"@types/react": "^17.0.0 || ^18.0.0",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@mui/core-downloads-tracker": {
"version": "5.14.18",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.18.tgz",
"integrity": "sha512-yFpF35fEVDV81nVktu0BE9qn2dD/chs7PsQhlyaV3EnTeZi9RZBuvoEfRym1/jmhJ2tcfeWXiRuHG942mQXJJQ==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui"
}
},
"node_modules/@mui/icons-material": {
"version": "5.14.18",
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.18.tgz",
"integrity": "sha512-o2z49R1G4SdBaxZjbMmkn+2OdT1bKymLvAYaB6pH59obM1CYv/0vAVm6zO31IqhwtYwXv6A7sLIwCGYTaVkcdg==",
"dependencies": {
"@babel/runtime": "^7.23.2"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui"
},
"peerDependencies": {
"@mui/material": "^5.0.0",
"@types/react": "^17.0.0 || ^18.0.0",
"react": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@mui/lab": {
"version": "5.0.0-alpha.153",
"resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.153.tgz",
"integrity": "sha512-vogVniN5JC7ltqPpPhIGYVImnvu0PnE1UbtFvbzVs3ldt3obWJ5XrhYS/OEV6H2/9dey3nUNU6i36FG1yreFDA==",
"dependencies": {
"@babel/runtime": "^7.23.2",
"@mui/base": "5.0.0-beta.24",
"@mui/system": "^5.14.18",
"@mui/types": "^7.2.9",
"@mui/utils": "^5.14.18",
"clsx": "^2.0.0",
"prop-types": "^15.8.1"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui"
},
"peerDependencies": {
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@mui/material": ">=5.10.11",
"@types/react": "^17.0.0 || ^18.0.0",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@emotion/react": {
"optional": true
},
"@emotion/styled": {
"optional": true
},
"@types/react": {
"optional": true
}
}
},
"node_modules/@mui/material": {
"version": "5.14.18",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.18.tgz",
"integrity": "sha512-y3UiR/JqrkF5xZR0sIKj6y7xwuEiweh9peiN3Zfjy1gXWXhz5wjlaLdoxFfKIEBUFfeQALxr/Y8avlHH+B9lpQ==",
"dependencies": {
"@babel/runtime": "^7.23.2",
"@mui/base": "5.0.0-beta.24",
"@mui/core-downloads-tracker": "^5.14.18",
"@mui/system": "^5.14.18",
"@mui/types": "^7.2.9",
"@mui/utils": "^5.14.18",
"@types/react-transition-group": "^4.4.8",
"clsx": "^2.0.0",
"csstype": "^3.1.2",
"prop-types": "^15.8.1",
"react-is": "^18.2.0",
"react-transition-group": "^4.4.5"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui"
},
"peerDependencies": {
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@types/react": "^17.0.0 || ^18.0.0",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@emotion/react": {
"optional": true
},
"@emotion/styled": {
"optional": true
},
"@types/react": {
"optional": true
}
}
},
"node_modules/@mui/material/node_modules/react-is": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
},
"node_modules/@mui/private-theming": {
"version": "5.14.18",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.18.tgz",
"integrity": "sha512-WSgjqRlzfHU+2Rou3HlR2Gqfr4rZRsvFgataYO3qQ0/m6gShJN+lhVEvwEiJ9QYyVzMDvNpXZAcqp8Y2Vl+PAw==",
"dependencies": {
"@babel/runtime": "^7.23.2",
"@mui/utils": "^5.14.18",
"prop-types": "^15.8.1"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui"
},
"peerDependencies": {
"@types/react": "^17.0.0 || ^18.0.0",
"react": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@mui/styled-engine": {
"version": "5.14.18",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.18.tgz",
"integrity": "sha512-pW8bpmF9uCB5FV2IPk6mfbQCjPI5vGI09NOLhtGXPeph/4xIfC3JdIX0TILU0WcTs3aFQqo6s2+1SFgIB9rCXA==",
"dependencies": {
"@babel/runtime": "^7.23.2",
"@emotion/cache": "^11.11.0",
"csstype": "^3.1.2",
"prop-types": "^15.8.1"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui"
},
"peerDependencies": {
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"react": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@emotion/react": {
"optional": true
},
"@emotion/styled": {
"optional": true
}
}
},
"node_modules/@mui/system": {
"version": "5.14.18",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.18.tgz",
"integrity": "sha512-hSQQdb3KF72X4EN2hMEiv8EYJZSflfdd1TRaGPoR7CIAG347OxCslpBUwWngYobaxgKvq6xTrlIl+diaactVww==",
"dependencies": {
"@babel/runtime": "^7.23.2",
"@mui/private-theming": "^5.14.18",
"@mui/styled-engine": "^5.14.18",
"@mui/types": "^7.2.9",
"@mui/utils": "^5.14.18",
"clsx": "^2.0.0",
"csstype": "^3.1.2",
"prop-types": "^15.8.1"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui"
},
"peerDependencies": {
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@types/react": "^17.0.0 || ^18.0.0",
"react": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@emotion/react": {
"optional": true
},
"@emotion/styled": {
"optional": true
},
"@types/react": {
"optional": true
}
}
},
"node_modules/@mui/types": {
"version": "7.2.9",
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.9.tgz",
"integrity": "sha512-k1lN/PolaRZfNsRdAqXtcR71sTnv3z/VCCGPxU8HfdftDkzi335MdJ6scZxvofMAd/K/9EbzCZTFBmlNpQVdCg==",
"peerDependencies": {
"@types/react": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@mui/utils": {
"version": "5.14.18",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.18.tgz",
"integrity": "sha512-HZDRsJtEZ7WMSnrHV9uwScGze4wM/Y+u6pDVo+grUjt5yXzn+wI8QX/JwTHh9YSw/WpnUL80mJJjgCnWj2VrzQ==",
"dependencies": {
"@babel/runtime": "^7.23.2",
"@types/prop-types": "^15.7.10",
"prop-types": "^15.8.1",
"react-is": "^18.2.0"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui"
},
"peerDependencies": {
"@types/react": "^17.0.0 || ^18.0.0",
"react": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@mui/utils/node_modules/react-is": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
},
"node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
"version": "5.1.1-v1", "version": "5.1.1-v1",
"resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
...@@ -3268,7 +3759,6 @@ ...@@ -3268,7 +3759,6 @@
"version": "2.11.8", "version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"peer": true,
"funding": { "funding": {
"type": "opencollective", "type": "opencollective",
"url": "https://opencollective.com/popperjs" "url": "https://opencollective.com/popperjs"
...@@ -4410,6 +4900,14 @@ ...@@ -4410,6 +4900,14 @@
"@types/react": "*" "@types/react": "*"
} }
}, },
"node_modules/@types/react-transition-group": {
"version": "4.4.9",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.9.tgz",
"integrity": "sha512-ZVNmWumUIh5NhH8aMD9CR2hdW0fNuYInlocZHaZ+dgk/1K49j1w/HoAuK1ki+pgscQrOFRTlXeoURtuzEkV3dg==",
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/resolve": { "node_modules/@types/resolve": {
"version": "1.17.1", "version": "1.17.1",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
...@@ -6073,6 +6571,14 @@ ...@@ -6073,6 +6571,14 @@
"wrap-ansi": "^7.0.0" "wrap-ansi": "^7.0.0"
} }
}, },
"node_modules/clsx": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
"integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
"engines": {
"node": ">=6"
}
},
"node_modules/co": { "node_modules/co": {
"version": "4.6.0", "version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
...@@ -7009,6 +7515,15 @@ ...@@ -7009,6 +7515,15 @@
"utila": "~0.4" "utila": "~0.4"
} }
}, },
"node_modules/dom-helpers": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
"dependencies": {
"@babel/runtime": "^7.8.7",
"csstype": "^3.0.2"
}
},
"node_modules/dom-serializer": { "node_modules/dom-serializer": {
"version": "1.4.1", "version": "1.4.1",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
...@@ -8360,6 +8875,11 @@ ...@@ -8360,6 +8875,11 @@
"url": "https://github.com/avajs/find-cache-dir?sponsor=1" "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
} }
}, },
"node_modules/find-root": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
"integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
},
"node_modules/find-up": { "node_modules/find-up": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
...@@ -14936,6 +15456,21 @@ ...@@ -14936,6 +15456,21 @@
} }
} }
}, },
"node_modules/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
"integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
"dependencies": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
"loose-envify": "^1.4.0",
"prop-types": "^15.6.2"
},
"peerDependencies": {
"react": ">=16.6.0",
"react-dom": ">=16.6.0"
}
},
"node_modules/read-cache": { "node_modules/read-cache": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
...@@ -16222,6 +16757,11 @@ ...@@ -16222,6 +16757,11 @@
"postcss": "^8.2.15" "postcss": "^8.2.15"
} }
}, },
"node_modules/stylis": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
"integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
},
"node_modules/sucrase": { "node_modules/sucrase": {
"version": "3.34.0", "version": "3.34.0",
"resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
......
package.json
View file @ 9c5c7a18
...@@ -3,6 +3,11 @@ ...@@ -3,6 +3,11 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.18",
"@mui/lab": "^5.0.0-alpha.153",
"@mui/material": "^5.14.18",
"@testing-library/jest-dom": "^5.17.0", "@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
......
src/App.js
View file @ 9c5c7a18
...@@ -22,9 +22,6 @@ function App() { ...@@ -22,9 +22,6 @@ function App() {
</div> </div>
<div className='p-5'> <div className='p-5'>
<div className='offset-md-2 col-md-8'> <div className='offset-md-2 col-md-8'>
<header className='mb-4'>
<h3 className='text-center'>Payment Details</h3>
</header>
<TelepayForm /> <TelepayForm />
</div> </div>
</div> </div>
......
src/component/Pay.css
View file @ 9c5c7a18
...@@ -11,3 +11,9 @@ ...@@ -11,3 +11,9 @@
.form-label { .form-label {
font-weight: bold; font-weight: bold;
} }
.center-label {
display: flex;
justify-content: center;
align-items: center;
}
src/component/Telepay.js
View file @ 9c5c7a18
import React, { useState } from 'react'; import React, { useState } from 'react';
import LoadingButton from '@mui/lab/LoadingButton';
import { TextField, Typography, Paper, Snackbar, IconButton, Alert, Box } from '@mui/material';
import './Pay.css'; import './Pay.css';
import { AddOutlined, CloseOutlined, DeleteOutline } from '@mui/icons-material';
const TelepayForm = () => { const TelepayForm = () => {
const [error, setError] = useState(null); const [error, setError] = useState(null);
...@@ -18,6 +21,8 @@ const TelepayForm = () => { ...@@ -18,6 +21,8 @@ const TelepayForm = () => {
{ description: '', amount: '' }, { description: '', amount: '' },
], ],
}); });
const [snackbarOpen, setSnackbarOpen] = React.useState(false);
const [submitted, setSubmitted] = React.useState(false);
const handleChange = (field, value) => { const handleChange = (field, value) => {
setFormData({ setFormData({
...@@ -44,6 +49,7 @@ const TelepayForm = () => { ...@@ -44,6 +49,7 @@ const TelepayForm = () => {
}; };
const handleSubmit = async (e) => { const handleSubmit = async (e) => {
setSubmitted(true);
e.preventDefault(); e.preventDefault();
try { try {
...@@ -63,11 +69,13 @@ const TelepayForm = () => { ...@@ -63,11 +69,13 @@ const TelepayForm = () => {
} else { } else {
const errorData = await response.json(); const errorData = await response.json();
setError(errorData.error || 'An error occurred'); setError(errorData.error || 'An error occurred');
window.scroll({ top: 0, left: 0, behavior: 'smooth' }); setSnackbarOpen(true);
} }
} catch (error) { } catch (error) {
setError('An error occurred while making the API request'); setError('An error occurred while making the API request');
window.scroll({ top: 0, left: 0, behavior: 'smooth' }); setSnackbarOpen(true);
} finally {
setSubmitted(false);
} }
}; };
...@@ -80,194 +88,254 @@ const TelepayForm = () => { ...@@ -80,194 +88,254 @@ const TelepayForm = () => {
}); });
}; };
const handleClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
setSnackbarOpen(false);
};
const action = (
<React.Fragment>
<IconButton
size='small'
aria-label='close'
color='inherit'
onClick={handleClose}
>
<CloseOutlined fontSize='small' />
</IconButton>
</React.Fragment>
);
return ( return (
<div> <div>
{error && ( <Snackbar
<div className='alert alert-danger' role='alert'> open={snackbarOpen}
autoHideDuration={3000}
onClose={handleClose}
message={error}
action={action}
>
<Alert onClose={handleClose} severity='error' sx={{ width: '100%' }}>
{error} {error}
</div> </Alert>
)} </Snackbar>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className='form-group row mb-4'> <Paper elevation={1} sx={{ padding: 3, marginBottom: 4 }}>
<div className='col'> <Typography variant='h5' gutterBottom>
<label htmlFor='firstName' className='form-label mt-1'>First Name</label> Payment Details
</div> </Typography>
<div className='col-md-9'>
<input <div className='form-group row mb-4'>
placeholder='First name' <div className='col center-label'>
className='inputContainer form-control' <label htmlFor='firstName' className='form-label mt-1'>First Name</label>
value={formData.first_name} </div>
onChange={(e) => handleChange('firstName', e.target.value)} <div className='col-md-9'>
/> <TextField
</div> label='First Name'
</div> placeholder='Enter your first name'
<div className='form-group row mb-4'> variant='outlined'
<div className='col'> fullWidth
<label htmlFor='LastName' className='form-label mt-1'>Last Name</label> value={formData.first_name}
</div> onChange={(e) => handleChange('first_name', e.target.value)}
<div className='col-md-9'> />
<input </div>
placeholder='Last name'
className='inputContainer form-control'
value={formData.last_name}
onChange={(e) => handleChange('lastName', e.target.value)}
/>
</div>
</div>
<div className='form-group row mb-4'>
<div className='col'>
<label htmlFor='Address' className='form-label mt-1'>Address</label>
</div>
<div className='col-md-9'>
<input
placeholder='Address'
className='inputContainer form-control'
value={formData.address}
onChange={(e) => handleChange('address', e.target.value)}
/>
</div>
</div>
<div className='form-group row mb-4'>
<div className='col'>
<label htmlFor='City' className='form-label mt-1'>City</label>
</div>
<div className='col-md-9'>
<input
placeholder='City'
className='inputContainer form-control'
value={formData.city}
onChange={(e) => handleChange('city', e.target.value)}
/>
</div>
</div>
<div className='form-group row mb-4'>
<div className='col'>
<label htmlFor='Province' className='form-label mt-1'>Province</label>
</div>
<div className='col-md-9'>
<input
placeholder='Province'
className='inputContainer form-control'
value={formData.province}
onChange={(e) => handleChange('province', e.target.value)}
/>
</div>
</div>
<div className='form-group row mb-4'>
<div className='col'>
<label htmlFor='Country' className='form-label mt-1'>Country</label>
</div> </div>
<div className='col-md-9'>
<input <div className='form-group row mb-4'>
placeholder='Country' <div className='col center-label'>
className='inputContainer form-control' <label htmlFor='lastName' className='form-label mt-1'>Last Name</label>
value={formData.country} </div>
onChange={(e) => handleChange('country', e.target.value)} <div className='col-md-9'>
/> <TextField
label='Last Name'
placeholder='Enter your last name'
variant='outlined'
fullWidth
value={formData.last_name}
onChange={(e) => handleChange('last_name', e.target.value)}
/>
</div>
</div> </div>
</div>
<div className='form-group row mb-4'> <div className='form-group row mb-4'>
<div className='col'> <div className='col center-label'>
<label htmlFor='Email' className='form-label mt-1'>Email</label> <label htmlFor='address' className='form-label mt-1'>Address</label>
</div>
<div className='col-md-9'>
<TextField
label='Address'
placeholder='Enter your address'
variant='outlined'
fullWidth
value={formData.address}
onChange={(e) => handleChange('address', e.target.value)}
/>
</div>
</div> </div>
<div className='col-md-9'>
<input <div className='form-group row mb-4'>
placeholder='Email' <div className='col center-label'>
className='inputContainer form-control' <label htmlFor='city' className='form-label mt-1'>City</label>
value={formData.email} </div>
type='email' <div className='col-md-9'>
onChange={(e) => handleChange('email', e.target.value)} <TextField
/> label='City'
placeholder='Enter your city'
variant='outlined'
fullWidth
value={formData.city}
onChange={(e) => handleChange('city', e.target.value)}
/>
</div>
</div> </div>
</div>
<div className='form-group row mb-4'> <div className='form-group row mb-4'>
<div className='col'> <div className='col center-label'>
<label htmlFor='Phone' className='form-label mt-1'>Phone</label> <label htmlFor='province' className='form-label mt-1'>Province</label>
</div>
<div className='col-md-9'>
<TextField
label='Province'
placeholder='Enter your province'
variant='outlined'
fullWidth
value={formData.province}
onChange={(e) => handleChange('province', e.target.value)}
/>
</div>
</div> </div>
<div className='col-md-9'>
<input <div className='form-group row mb-4'>
placeholder='Phone number' <div className='col center-label'>
className='inputContainer form-control' <label htmlFor='country' className='form-label mt-1'>Country</label>
value={formData.phone} </div>
onChange={(e) => handleChange('phone', e.target.value)} <div className='col-md-9'>
/> <TextField
label='Country'
placeholder='Enter your country'
variant='outlined'
fullWidth
value={formData.country}
onChange={(e) => handleChange('country', e.target.value)}
/>
</div>
</div> </div>
</div>
<div className='form-group row mb-4'> <div className='form-group row mb-4'>
<div className='col'> <div className='col center-label'>
<label htmlFor='Description' className='form-label mt-1'>Description</label> <label htmlFor='email' className='form-label mt-1'>Email</label>
</div>
<div className='col-md-9'>
<TextField
label='Email'
placeholder='Enter your email'
variant='outlined'
fullWidth
value={formData.email}
type='email'
onChange={(e) => handleChange('email', e.target.value)}
/>
</div>
</div> </div>
<div className='col-md-9'>
<input <div className='form-group row mb-4'>
placeholder='Enter description' <div className='col center-label'>
className='inputContainer form-control' <label htmlFor='phone' className='form-label mt-1'>Phone</label>
value={formData.description} </div>
onChange={(e) => handleChange('description', e.target.value)} <div className='col-md-9'>
required <TextField
/> label='Phone'
placeholder='Enter your phone number'
variant='outlined'
fullWidth
value={formData.phone}
onChange={(e) => handleChange('phone', e.target.value)}
/>
</div>
</div> </div>
</div>
<h3 className='text-center'>Line Items</h3> <div className='form-group row mb-4'>
<div className='form-group row mb-4'> <div className='col center-label'>
<div className='col-md-3'> <label htmlFor='description' className='form-label mt-1'>Description</label>
</div>
<div className='col-md-9'>
<TextField
label='Description'
placeholder='Enter description'
variant='outlined'
fullWidth
value={formData.description}
onChange={(e) => handleChange('description', e.target.value)}
required
/>
</div>
</div> </div>
<div className='col-md-12'>
{formData.line_items.map((line_items, index) => ( </Paper>
<div key={index}>
<div className='row mb-4' id={`lineItem-${index}`}> <Paper elevation={1} sx={{ padding: 3, marginBottom: 4 }}>
<div className='col-md-5 offset-md-1'> <Typography variant='h5' gutterBottom>
<label htmlFor={`lineItemDes-${index}`} className='form-label mt-1'> Line Items
Description </Typography>
</label>
<input {formData.line_items.map((lineItem, index) => (
placeholder='Description' <div key={index} style={{ marginBottom: '1rem' }}>
value={line_items.name} <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '1rem' }}>
id={`lineItemDes-${index}`} <TextField
className='inputContainer form-control' label='Description'
onChange={(e) => handleProductChange(index, 'description', e.target.value)} placeholder='Description'
required className='w-100'
/> value={lineItem.description}
</div> onChange={(e) => handleProductChange(index, 'description', e.target.value)}
<div className='col-md-5'> required
<label htmlFor={`lineItemAmount-${index}`} className='form-label mt-1'> />
Amount <TextField
</label> label='Amount'
<input placeholder='Enter Price'
placeholder='Enter Price' type='number'
type='number' className='w-100'
value={line_items.amount} value={lineItem.amount}
id={`lineItemAmount-${index}`} onChange={(e) => handleProductChange(index, 'amount', e.target.value)}
className='inputContainer form-control' required
onChange={(e) => handleProductChange(index, 'amount', e.target.value)} />
required <IconButton
/> variant='contained'
</div> color='error'
<div className='col-md-1'> onClick={() => handleDeleteLineItem(index)}
<button type='button' className='btn-close' aria-label='Close' sx={{ marginLeft: '1rem' }}
onClick={() => handleDeleteLineItem(index)}></button> >
</div> <DeleteOutline />
</div> </IconButton>
</div> </div>
))}
</div>
<div className='row'>
<div className='col-12 pe-0'>
<button onClick={handleAddProduct} type='button' className='btn btn-link float-end'>
Add Line Item
</button>
</div> </div>
))}
<div className='d-flex w-100 justify-content-end'>
<IconButton
variant='outlined'
color='primary'
onClick={handleAddProduct}
sx={{ marginBottom: '1rem' }}
>
<AddOutlined />
</IconButton>
</div> </div>
</div> </Paper>
{success && ( {success && (
<div className='alert alert-primary' role='alert'> <Paper elevation={1} style={{backgroundColor: 'rgb(56, 142, 60)', color: 'white'}} sx={{ padding: 3, marginBottom: 4 }}>
Access Code: {success.access_code} Access Code: {success.access_code}
</div> </Paper>
)} )}
<div className='form-group'>
<button type='submit' className='btn btn-outline-primary'> <Box sx={{ '& > button': { m: 1 } }}>
Submit <LoadingButton loading={submitted} type='submit' variant='outlined' color='primary'>
</button> <span>Submit</span>
</div> </LoadingButton>
</Box>
</form> </form>
</div> </div>
); );
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment