Updated form to use material UI

package-lock.json

@@ -8,6 +8,11 @@
       "name": "ivrnet_payment",
       "version": "0.1.0",
       "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/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -2288,6 +2293,163 @@
         "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": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -2381,6 +2543,40 @@
         "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": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -3155,6 +3351,301 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "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": {
       "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",
@@ -3268,7 +3759,6 @@
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -4410,6 +4900,14 @@
         "@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": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -6073,6 +6571,14 @@
         "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": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -7009,6 +7515,15 @@
         "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": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -8360,6 +8875,11 @@
         "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": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -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": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -16222,6 +16757,11 @@
         "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": {
       "version": "3.34.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",

package.json

@@ -3,6 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "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/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/App.js

@@ -22,9 +22,6 @@ function App() {
         </div>
         <div className='p-5'>
           <div className='offset-md-2 col-md-8'>
-            <header className='mb-4'>
-              <h3 className='text-center'>Payment Details</h3>
-            </header>
             <TelepayForm />
           </div>
         </div>

src/component/Pay.css

@@ -11,3 +11,9 @@
 .form-label {
   font-weight: bold;
 }
+
+.center-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/component/Telepay.js

 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 { AddOutlined, CloseOutlined, DeleteOutline } from '@mui/icons-material';
 
 const TelepayForm = () => {
   const [error, setError] = useState(null);
@@ -18,6 +21,8 @@ const TelepayForm = () => {
       { description: '', amount: '' },
     ],
   });
+  const [snackbarOpen, setSnackbarOpen] = React.useState(false);
+  const [submitted, setSubmitted] = React.useState(false);
 
   const handleChange = (field, value) => {
     setFormData({
@@ -44,6 +49,7 @@ const TelepayForm = () => {
   };
 
   const handleSubmit = async (e) => {
+    setSubmitted(true);
     e.preventDefault();
 
     try {
@@ -63,11 +69,13 @@ const TelepayForm = () => {
       } else {
         const errorData = await response.json();
         setError(errorData.error || 'An error occurred');
-        window.scroll({ top: 0, left: 0, behavior: 'smooth' });
+        setSnackbarOpen(true);
       }
     } catch (error) {
       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 = () => {
     });
   };
 
+  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 (
     <div>
-      {error && (
-        <div className='alert alert-danger' role='alert'>
+      <Snackbar
+        open={snackbarOpen}
+        autoHideDuration={3000}
+        onClose={handleClose}
+        message={error}
+        action={action}
+      >
+        <Alert onClose={handleClose} severity='error' sx={{ width: '100%' }}>
           {error}
-        </div>
-      )}
+        </Alert>
+      </Snackbar>
+
       <form onSubmit={handleSubmit}>
+        <Paper elevation={1} sx={{ padding: 3, marginBottom: 4 }}>
+          <Typography variant='h5' gutterBottom>
+            Payment Details
+          </Typography>
+
           <div className='form-group row mb-4'>
-          <div className='col'>
+            <div className='col center-label'>
               <label htmlFor='firstName' className='form-label mt-1'>First Name</label>
             </div>
             <div className='col-md-9'>
-            <input
-              placeholder='First name'
-              className='inputContainer form-control'
+              <TextField
+                label='First Name'
+                placeholder='Enter your first name'
+                variant='outlined'
+                fullWidth
                 value={formData.first_name}
-              onChange={(e) => handleChange('firstName', e.target.value)}
+                onChange={(e) => handleChange('first_name', e.target.value)}
               />
             </div>
           </div>
+
           <div className='form-group row mb-4'>
-          <div className='col'>
-            <label htmlFor='LastName' className='form-label mt-1'>Last Name</label>
+            <div className='col center-label'>
+              <label htmlFor='lastName' className='form-label mt-1'>Last Name</label>
             </div>
             <div className='col-md-9'>
-            <input
-              placeholder='Last name'
-              className='inputContainer form-control'
+              <TextField
+                label='Last Name'
+                placeholder='Enter your last name'
+                variant='outlined'
+                fullWidth
                 value={formData.last_name}
-              onChange={(e) => handleChange('lastName', e.target.value)}
+                onChange={(e) => handleChange('last_name', 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 className='col center-label'>
+              <label htmlFor='address' className='form-label mt-1'>Address</label>
             </div>
             <div className='col-md-9'>
-            <input
-              placeholder='Address'
-              className='inputContainer form-control'
+              <TextField
+                label='Address'
+                placeholder='Enter your address'
+                variant='outlined'
+                fullWidth
                 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 className='col center-label'>
+              <label htmlFor='city' className='form-label mt-1'>City</label>
             </div>
             <div className='col-md-9'>
-            <input
-              placeholder='City'
-              className='inputContainer form-control'
+              <TextField
+                label='City'
+                placeholder='Enter your city'
+                variant='outlined'
+                fullWidth
                 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 className='col center-label'>
+              <label htmlFor='province' className='form-label mt-1'>Province</label>
             </div>
             <div className='col-md-9'>
-            <input
-              placeholder='Province'
-              className='inputContainer form-control'
+              <TextField
+                label='Province'
+                placeholder='Enter your province'
+                variant='outlined'
+                fullWidth
                 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 className='col center-label'>
+              <label htmlFor='country' className='form-label mt-1'>Country</label>
             </div>
             <div className='col-md-9'>
-            <input
-              placeholder='Country'
-              className='inputContainer form-control'
+              <TextField
+                label='Country'
+                placeholder='Enter your country'
+                variant='outlined'
+                fullWidth
                 value={formData.country}
                 onChange={(e) => handleChange('country', e.target.value)}
               />
             </div>
           </div>
+
           <div className='form-group row mb-4'>
-          <div className='col'>
-            <label htmlFor='Email' className='form-label mt-1'>Email</label>
+            <div className='col center-label'>
+              <label htmlFor='email' className='form-label mt-1'>Email</label>
             </div>
             <div className='col-md-9'>
-            <input
-              placeholder='Email'
-              className='inputContainer form-control'
+              <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 className='form-group row mb-4'>
-          <div className='col'>
-            <label htmlFor='Phone' className='form-label mt-1'>Phone</label>
+            <div className='col center-label'>
+              <label htmlFor='phone' className='form-label mt-1'>Phone</label>
             </div>
             <div className='col-md-9'>
-            <input
-              placeholder='Phone number'
-              className='inputContainer form-control'
+              <TextField
+                label='Phone'
+                placeholder='Enter your phone number'
+                variant='outlined'
+                fullWidth
                 value={formData.phone}
                 onChange={(e) => handleChange('phone', e.target.value)}
               />
             </div>
           </div>
+
           <div className='form-group row mb-4'>
-          <div className='col'>
-            <label htmlFor='Description' className='form-label mt-1'>Description</label>
+            <div className='col center-label'>
+              <label htmlFor='description' className='form-label mt-1'>Description</label>
             </div>
             <div className='col-md-9'>
-            <input
+              <TextField
+                label='Description'
                 placeholder='Enter description'
-              className='inputContainer form-control'
+                variant='outlined'
+                fullWidth
                 value={formData.description}
                 onChange={(e) => handleChange('description', e.target.value)}
                 required
               />
             </div>
           </div>
-        <h3 className='text-center'>Line Items</h3>
-        <div className='form-group row mb-4'>
-          <div className='col-md-3'>
-          </div>
-          <div className='col-md-12'>
-            {formData.line_items.map((line_items, index) => (
-              <div key={index}>
-                <div className='row mb-4' id={`lineItem-${index}`}>
-                  <div className='col-md-5 offset-md-1'>
-                    <label htmlFor={`lineItemDes-${index}`} className='form-label mt-1'>
-                      Description
-                    </label>
-                    <input
+
+        </Paper>
+
+        <Paper elevation={1} sx={{ padding: 3, marginBottom: 4 }}>
+          <Typography variant='h5' gutterBottom>
+            Line Items
+          </Typography>
+
+          {formData.line_items.map((lineItem, index) => (
+            <div key={index} style={{ marginBottom: '1rem' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '1rem' }}>
+                <TextField
+                  label='Description'
                   placeholder='Description'
-                      value={line_items.name}
-                      id={`lineItemDes-${index}`}
-                      className='inputContainer form-control'
+                  className='w-100'
+                  value={lineItem.description}
                   onChange={(e) => handleProductChange(index, 'description', e.target.value)}
                   required
                 />
-                  </div>
-                  <div className='col-md-5'>
-                    <label htmlFor={`lineItemAmount-${index}`} className='form-label mt-1'>
-                      Amount
-                    </label>
-                    <input
+                <TextField
+                  label='Amount'
                   placeholder='Enter Price'
                   type='number'
-                      value={line_items.amount}
-                      id={`lineItemAmount-${index}`}
-                      className='inputContainer form-control'
+                  className='w-100'
+                  value={lineItem.amount}
                   onChange={(e) => handleProductChange(index, 'amount', e.target.value)}
                   required
                 />
-                  </div>
-                  <div className='col-md-1'>
-                    <button type='button' className='btn-close' aria-label='Close'
-                            onClick={() => handleDeleteLineItem(index)}></button>
-                  </div>
+                <IconButton
+                  variant='contained'
+                  color='error'
+                  onClick={() => handleDeleteLineItem(index)}
+                  sx={{ marginLeft: '1rem' }}
+                >
+                  <DeleteOutline />
+                </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>
+
+          <div className='d-flex w-100 justify-content-end'>
+            <IconButton
+              variant='outlined'
+              color='primary'
+              onClick={handleAddProduct}
+              sx={{ marginBottom: '1rem' }}
+            >
+              <AddOutlined />
+            </IconButton>
+          </div>
+        </Paper>
         {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}
-          </div>
+          </Paper>
         )}
-        <div className='form-group'>
-          <button type='submit' className='btn btn-outline-primary'>
-            Submit
-          </button>
-        </div>
+
+        <Box sx={{ '& > button': { m: 1 } }}>
+          <LoadingButton loading={submitted} type='submit' variant='outlined' color='primary'>
+            <span>Submit</span>
+          </LoadingButton>
+        </Box>
       </form>
     </div>
   );