pay-sdk-web10 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +157 -0
- package/dist/WalletPaymentForm.esm.js +1389 -0
- package/dist/WalletPaymentForm.js +331 -0
- package/dist/WalletPaymentForm.umd.js +1395 -0
- package/dist/dist/WalletPaymentForm.css +1 -0
- package/dist/logo.jpg +0 -0
- package/git_push.sh +32 -0
- package/package.json +44 -0
- package/postcss.config.js +7 -0
- package/rollup.config.js +43 -0
- package/src/EnterPasscode.js +295 -0
- package/src/HasAccountSummary.js +168 -0
- package/src/HasFundsSummary.js +165 -0
- package/src/InsufficientFunds.js +140 -0
- package/src/LoadingOverlay.js +85 -0
- package/src/PaymentFailed.js +140 -0
- package/src/PaymentSuccess.js +140 -0
- package/src/TransactionSummary.js +200 -0
- package/src/WalletPaymentForm.css +136 -0
- package/src/WalletPaymentForm.js +204 -0
- package/src/assets/logo.jpg +0 -0
- package/src/test.md +34 -0
- package/src/test.pdf +0 -0
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const HasAccountSummary = ({ onClose }) => {
|
|
4
|
+
return (
|
|
5
|
+
<>
|
|
6
|
+
<div className="popup-content">
|
|
7
|
+
<div className="popup-header">
|
|
8
|
+
<div className="logo">
|
|
9
|
+
<img
|
|
10
|
+
src="https://res.cloudinary.com/dlfa42ans/image/upload/v1741686201/logo_n7vrsf.jpg"
|
|
11
|
+
alt="EvZone Logo"
|
|
12
|
+
className="header-icon"
|
|
13
|
+
/>
|
|
14
|
+
</div>
|
|
15
|
+
<h2>
|
|
16
|
+
<span className="evzone">EVzone</span>
|
|
17
|
+
<span className="pay"> Pay</span>
|
|
18
|
+
</h2>
|
|
19
|
+
<button className="close-btn" onClick={onClose}>
|
|
20
|
+
<span>×</span>
|
|
21
|
+
</button>
|
|
22
|
+
</div>
|
|
23
|
+
<div className="error-content">
|
|
24
|
+
<div className="message-container">
|
|
25
|
+
<div className="info-icon">i</div>
|
|
26
|
+
<div className="message-text">
|
|
27
|
+
<h3>EVzone requires you to sign in to proceed with this transaction</h3>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
<button onClick={onClose} className="submit-button">Sign in</button>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
<style>{`
|
|
34
|
+
.popup-content {
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-direction: column;
|
|
37
|
+
align-items: center;
|
|
38
|
+
background: white;
|
|
39
|
+
border-radius: 10px;
|
|
40
|
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
41
|
+
max-width: 400px;
|
|
42
|
+
width: 90%;
|
|
43
|
+
text-align: center;
|
|
44
|
+
border: 1px solid #ddd;
|
|
45
|
+
font-family: Arial, sans-serif;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.popup-header {
|
|
49
|
+
display: flex;
|
|
50
|
+
align-items: center;
|
|
51
|
+
justify-content: space-between;
|
|
52
|
+
margin-bottom: 15px;
|
|
53
|
+
width: 100%;
|
|
54
|
+
padding: 10px 15px;
|
|
55
|
+
border-bottom: 1px solid #ddd;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.logo {
|
|
59
|
+
width: 40px;
|
|
60
|
+
height: 40px;
|
|
61
|
+
display: flex;
|
|
62
|
+
align-items: center;
|
|
63
|
+
justify-content: center;
|
|
64
|
+
margin-right: 10px;
|
|
65
|
+
border-radius: 50%;
|
|
66
|
+
overflow: hidden;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.header-icon {
|
|
70
|
+
width: 100%;
|
|
71
|
+
height: auto;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.popup-header h2 {
|
|
75
|
+
font-size: 1.2em;
|
|
76
|
+
color: #080808;
|
|
77
|
+
margin: 0;
|
|
78
|
+
font-weight: bold;
|
|
79
|
+
text-align: left;
|
|
80
|
+
flex-grow: 1;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.popup-header .evzone {
|
|
84
|
+
color: #0a0a0a;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.popup-header .pay {
|
|
88
|
+
color: #0a0a0a;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.close-btn {
|
|
92
|
+
background: none;
|
|
93
|
+
border: none;
|
|
94
|
+
font-size: 1.5em;
|
|
95
|
+
color: #ff5a5f;
|
|
96
|
+
cursor: pointer;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.error-content {
|
|
100
|
+
display: flex;
|
|
101
|
+
flex-direction: column;
|
|
102
|
+
align-items: center;
|
|
103
|
+
padding: 20px;
|
|
104
|
+
background-color: #fff;
|
|
105
|
+
border-radius: 8px;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.message-container {
|
|
109
|
+
display: flex;
|
|
110
|
+
align-items: center;
|
|
111
|
+
width: 100%;
|
|
112
|
+
margin-bottom: 20px;
|
|
113
|
+
background-color: #e0f7fa;
|
|
114
|
+
border-radius: 10px;
|
|
115
|
+
padding: 10px 15px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.info-icon {
|
|
119
|
+
display: flex;
|
|
120
|
+
justify-content: center;
|
|
121
|
+
align-items: center;
|
|
122
|
+
width: 40px;
|
|
123
|
+
height: 40px;
|
|
124
|
+
background-color: #b3e5fc;
|
|
125
|
+
color: #0288d1;
|
|
126
|
+
border-radius: 50%;
|
|
127
|
+
font-size: 24px;
|
|
128
|
+
font-weight: bold;
|
|
129
|
+
margin-right: 15px;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.message-text {
|
|
133
|
+
flex: 1;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.message-text h3 {
|
|
137
|
+
font-size: 1.2em;
|
|
138
|
+
margin: 0;
|
|
139
|
+
color: #333;
|
|
140
|
+
font-weight: 500;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.submit-button {
|
|
144
|
+
background-color: #0288d1;
|
|
145
|
+
color: #fff;
|
|
146
|
+
border: none;
|
|
147
|
+
border-radius: 5px;
|
|
148
|
+
padding: 10px 20px;
|
|
149
|
+
font-size: 1em;
|
|
150
|
+
font-weight: 500;
|
|
151
|
+
cursor: pointer;
|
|
152
|
+
transition: background-color 0.3s ease;
|
|
153
|
+
width: 100%;
|
|
154
|
+
max-width: 200px;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.submit-button:hover {
|
|
158
|
+
background-color: #0277bd;
|
|
159
|
+
}
|
|
160
|
+
`}</style>
|
|
161
|
+
</>
|
|
162
|
+
);
|
|
163
|
+
};
|
|
164
|
+
|
|
165
|
+
export default HasAccountSummary;
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FaExclamationCircle } from 'react-icons/fa';
|
|
3
|
+
|
|
4
|
+
const InsufficientFunds = ({ onClose }) => {
|
|
5
|
+
const renderHeader = () => (
|
|
6
|
+
<div className="popup-header">
|
|
7
|
+
<div className="logo">
|
|
8
|
+
<img
|
|
9
|
+
src="https://res.cloudinary.com/dlfa42ans/image/upload/v1741686201/logo_n7vrsf.jpg"
|
|
10
|
+
alt="EVzone Logo"
|
|
11
|
+
className="header-icon"
|
|
12
|
+
/>
|
|
13
|
+
</div>
|
|
14
|
+
<h2>
|
|
15
|
+
<span className="evzone">EVzone</span><span className="pay"> Pay</span>
|
|
16
|
+
</h2>
|
|
17
|
+
</div>
|
|
18
|
+
);
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<>
|
|
22
|
+
<div className="popup-content">
|
|
23
|
+
{renderHeader()}
|
|
24
|
+
<div className="error-content">
|
|
25
|
+
<FaExclamationCircle className="icon" />
|
|
26
|
+
<h3>Insufficient Funds</h3>
|
|
27
|
+
<p>Please add funds to your wallet to proceed.</p>
|
|
28
|
+
<button onClick={onClose} className="close-button">Close</button>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
<style>{`
|
|
32
|
+
.popup-content {
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-direction: column;
|
|
35
|
+
align-items: center;
|
|
36
|
+
background: white;
|
|
37
|
+
border-radius: 10px;
|
|
38
|
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
39
|
+
max-width: 400px;
|
|
40
|
+
width: 90%;
|
|
41
|
+
text-align: center;
|
|
42
|
+
border: 1px solid #ddd;
|
|
43
|
+
font-family: Arial, sans-serif;
|
|
44
|
+
z-index: 1001;
|
|
45
|
+
position: relative;
|
|
46
|
+
pointer-events: auto;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.popup-header {
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
justify-content: center;
|
|
53
|
+
margin-bottom: 15px;
|
|
54
|
+
width: 100%;
|
|
55
|
+
padding: 10px 15px;
|
|
56
|
+
border-bottom: 1px solid #ddd;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.logo {
|
|
60
|
+
width: 40px;
|
|
61
|
+
height: 40px;
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
margin-right: 10px;
|
|
66
|
+
border-radius: 50%;
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.header-icon {
|
|
71
|
+
width: 100%;
|
|
72
|
+
height: auto;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.popup-header h2 {
|
|
76
|
+
font-size: 1.2em;
|
|
77
|
+
color: #080808;
|
|
78
|
+
margin: 0;
|
|
79
|
+
font-weight: bold;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.popup-header .evzone {
|
|
83
|
+
color: #0a0a0a;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.popup-header .pay {
|
|
87
|
+
color: #0a0a0a;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.error-content {
|
|
91
|
+
display: flex;
|
|
92
|
+
flex-direction: column;
|
|
93
|
+
align-items: center;
|
|
94
|
+
padding: 20px;
|
|
95
|
+
background-color: #fff;
|
|
96
|
+
border-radius: 8px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.error-content .icon {
|
|
100
|
+
color: #ff9800;
|
|
101
|
+
font-size: 40px;
|
|
102
|
+
margin-bottom: 10px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.error-content h3 {
|
|
106
|
+
font-size: 1.2em;
|
|
107
|
+
margin: 0 0 15px;
|
|
108
|
+
color: #333;
|
|
109
|
+
font-weight: 500;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.error-content p {
|
|
113
|
+
font-size: 1em;
|
|
114
|
+
color: #666;
|
|
115
|
+
margin-bottom: 15px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.close-button {
|
|
119
|
+
background-color: #0288d1;
|
|
120
|
+
color: #fff;
|
|
121
|
+
border: none;
|
|
122
|
+
border-radius: 5px;
|
|
123
|
+
padding: 10px 20px;
|
|
124
|
+
font-size: 1em;
|
|
125
|
+
font-weight: 500;
|
|
126
|
+
cursor: pointer;
|
|
127
|
+
transition: background-color 0.3s ease;
|
|
128
|
+
width: 100%;
|
|
129
|
+
max-width: 200px;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.close-button:hover {
|
|
133
|
+
background-color: #0277bd;
|
|
134
|
+
}
|
|
135
|
+
`}</style>
|
|
136
|
+
</>
|
|
137
|
+
);
|
|
138
|
+
};
|
|
139
|
+
|
|
140
|
+
export default InsufficientFunds;
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const LoadingOverlay = () => {
|
|
4
|
+
return (
|
|
5
|
+
<>
|
|
6
|
+
<div className="loading-overlay">
|
|
7
|
+
<div className="loading-content">
|
|
8
|
+
<img
|
|
9
|
+
src="https://res.cloudinary.com/dlfa42ans/image/upload/v1741686201/logo_n7vrsf.jpg"
|
|
10
|
+
alt="EvZone Logo"
|
|
11
|
+
className="loading-logo"
|
|
12
|
+
/>
|
|
13
|
+
<p className="loading-text">
|
|
14
|
+
<span className="evzone">EVzone</span>{' '}
|
|
15
|
+
<span className="pay">Pay</span>
|
|
16
|
+
</p>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
<style>{`
|
|
20
|
+
.loading-overlay {
|
|
21
|
+
position: fixed;
|
|
22
|
+
top: 0;
|
|
23
|
+
left: 0;
|
|
24
|
+
width: 100%;
|
|
25
|
+
height: 100%;
|
|
26
|
+
background: rgba(0, 0, 0, 0.5);
|
|
27
|
+
display: flex;
|
|
28
|
+
justify-content: center;
|
|
29
|
+
align-items: center;
|
|
30
|
+
z-index: 1001;
|
|
31
|
+
pointer-events: auto;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.loading-content {
|
|
35
|
+
text-align: center;
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
justify-content: center;
|
|
39
|
+
align-items: center;
|
|
40
|
+
background: white;
|
|
41
|
+
padding: 30px; /* Increased from 20px to 30px for more space */
|
|
42
|
+
border-radius: 10px;
|
|
43
|
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.loading-logo {
|
|
47
|
+
width: 120px;
|
|
48
|
+
height: 120px;
|
|
49
|
+
margin-bottom: 30px; /* Increased from 20px to 30px for more space */
|
|
50
|
+
border-radius: 50%;
|
|
51
|
+
overflow: hidden;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.loading-text {
|
|
55
|
+
font-size: 40px; /* Increased from 36px to 40px */
|
|
56
|
+
font-weight: bold;
|
|
57
|
+
margin: 0;
|
|
58
|
+
animation: blink 1.5s step-start infinite;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.loading-text .evzone {
|
|
62
|
+
color: rgb(76, 184, 123);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.loading-text .pay {
|
|
66
|
+
color: rgb(235, 182, 67);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@keyframes blink {
|
|
70
|
+
0% {
|
|
71
|
+
opacity: 1;
|
|
72
|
+
}
|
|
73
|
+
50% {
|
|
74
|
+
opacity: 0;
|
|
75
|
+
}
|
|
76
|
+
100% {
|
|
77
|
+
opacity: 1;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
`}</style>
|
|
81
|
+
</>
|
|
82
|
+
);
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
export default LoadingOverlay;
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FaTimesCircle } from 'react-icons/fa';
|
|
3
|
+
|
|
4
|
+
const PaymentFailed = ({ onClose }) => {
|
|
5
|
+
const renderHeader = () => (
|
|
6
|
+
<div className="popup-header">
|
|
7
|
+
<div className="logo">
|
|
8
|
+
<img
|
|
9
|
+
src="https://res.cloudinary.com/dlfa42ans/image/upload/v1741686201/logo_n7vrsf.jpg"
|
|
10
|
+
alt="EVzone Logo"
|
|
11
|
+
className="header-icon"
|
|
12
|
+
/>
|
|
13
|
+
</div>
|
|
14
|
+
<h2>
|
|
15
|
+
<span className="evzone">EVzone</span><span className="pay"> Pay</span>
|
|
16
|
+
</h2>
|
|
17
|
+
</div>
|
|
18
|
+
);
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<>
|
|
22
|
+
<div className="popup-content">
|
|
23
|
+
{renderHeader()}
|
|
24
|
+
<div className="error-content">
|
|
25
|
+
<FaTimesCircle className="icon" />
|
|
26
|
+
<h3>Payment Failed</h3>
|
|
27
|
+
<p>Please check your wallet for details.</p>
|
|
28
|
+
<button onClick={onClose} className="close-button">Details</button>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
<style>{`
|
|
32
|
+
.popup-content {
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-direction: column;
|
|
35
|
+
align-items: center;
|
|
36
|
+
background: white;
|
|
37
|
+
border-radius: 10px;
|
|
38
|
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
39
|
+
max-width: 400px;
|
|
40
|
+
width: 90%;
|
|
41
|
+
text-align: center;
|
|
42
|
+
border: 1px solid #ddd;
|
|
43
|
+
font-family: Arial, sans-serif;
|
|
44
|
+
z-index: 1001;
|
|
45
|
+
position: relative;
|
|
46
|
+
pointer-events: auto;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.popup-header {
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
justify-content: center;
|
|
53
|
+
margin-bottom: 15px;
|
|
54
|
+
width: 100%;
|
|
55
|
+
padding: 10px 15px;
|
|
56
|
+
border-bottom: 1px solid #ddd;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.logo {
|
|
60
|
+
width: 40px;
|
|
61
|
+
height: 40px;
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
margin-right: 10px;
|
|
66
|
+
border-radius: 50%;
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.header-icon {
|
|
71
|
+
width: 100%;
|
|
72
|
+
height: auto;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.popup-header h2 {
|
|
76
|
+
font-size: 1.2em;
|
|
77
|
+
color: #080808;
|
|
78
|
+
margin: 0;
|
|
79
|
+
font-weight: bold;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.popup-header .evzone {
|
|
83
|
+
color: #0a0a0a;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.popup-header .pay {
|
|
87
|
+
color: #0a0a0a;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.error-content {
|
|
91
|
+
display: flex;
|
|
92
|
+
flex-direction: column;
|
|
93
|
+
align-items: center;
|
|
94
|
+
padding: 20px;
|
|
95
|
+
background-color: #fff;
|
|
96
|
+
border-radius: 8px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.error-content .icon {
|
|
100
|
+
color: #ff5a5f;
|
|
101
|
+
font-size: 40px;
|
|
102
|
+
margin-bottom: 10px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.error-content h3 {
|
|
106
|
+
font-size: 1.2em;
|
|
107
|
+
margin: 0 0 15px;
|
|
108
|
+
color: #333;
|
|
109
|
+
font-weight: 500;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.error-content p {
|
|
113
|
+
font-size: 1em;
|
|
114
|
+
color: #666;
|
|
115
|
+
margin-bottom: 15px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.close-button {
|
|
119
|
+
background-color: #0288d1;
|
|
120
|
+
color: #fff;
|
|
121
|
+
border: none;
|
|
122
|
+
border-radius: 5px;
|
|
123
|
+
padding: 10px 20px;
|
|
124
|
+
font-size: 1em;
|
|
125
|
+
font-weight: 500;
|
|
126
|
+
cursor: pointer;
|
|
127
|
+
transition: background-color 0.3s ease;
|
|
128
|
+
width: 100%;
|
|
129
|
+
max-width: 200px;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.close-button:hover {
|
|
133
|
+
background-color: #0277bd;
|
|
134
|
+
}
|
|
135
|
+
`}</style>
|
|
136
|
+
</>
|
|
137
|
+
);
|
|
138
|
+
};
|
|
139
|
+
|
|
140
|
+
export default PaymentFailed;
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FaCheckCircle } from 'react-icons/fa';
|
|
3
|
+
|
|
4
|
+
const PaymentSuccess = ({ amount, onClose }) => {
|
|
5
|
+
const renderHeader = () => (
|
|
6
|
+
<div className="popup-header">
|
|
7
|
+
<div className="logo">
|
|
8
|
+
<img
|
|
9
|
+
src="https://res.cloudinary.com/dlfa42ans/image/upload/v1741686201/logo_n7vrsf.jpg"
|
|
10
|
+
alt="EVzone Logo"
|
|
11
|
+
className="header-icon"
|
|
12
|
+
/>
|
|
13
|
+
</div>
|
|
14
|
+
<h2>
|
|
15
|
+
<span className="evzone">EVzone</span><span className="pay"> Pay</span>
|
|
16
|
+
</h2>
|
|
17
|
+
</div>
|
|
18
|
+
);
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<>
|
|
22
|
+
<div className="popup-content">
|
|
23
|
+
{renderHeader()}
|
|
24
|
+
<div className="success-content">
|
|
25
|
+
<FaCheckCircle className="icon" />
|
|
26
|
+
<h3>Payment Successful</h3>
|
|
27
|
+
<p>Your payment of UGX {amount.toFixed(2)} was processed successfully!</p>
|
|
28
|
+
<button onClick={onClose} className="close-button">Close</button>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
<style>{`
|
|
32
|
+
.popup-content {
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-direction: column;
|
|
35
|
+
align-items: center;
|
|
36
|
+
background: white;
|
|
37
|
+
border-radius: 10px;
|
|
38
|
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
39
|
+
max-width: 400px;
|
|
40
|
+
width: 90%;
|
|
41
|
+
text-align: center;
|
|
42
|
+
border: 1px solid #ddd;
|
|
43
|
+
font-family: Arial, sans-serif;
|
|
44
|
+
z-index: 1001;
|
|
45
|
+
position: relative;
|
|
46
|
+
pointer-events: auto;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.popup-header {
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
justify-content: center;
|
|
53
|
+
margin-bottom: 15px;
|
|
54
|
+
width: 100%;
|
|
55
|
+
padding: 10px 15px;
|
|
56
|
+
border-bottom: 1px solid #ddd;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.logo {
|
|
60
|
+
width: 40px;
|
|
61
|
+
height: 40px;
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
margin-right: 10px;
|
|
66
|
+
border-radius: 50%;
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.header-icon {
|
|
71
|
+
width: 100%;
|
|
72
|
+
height: auto;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.popup-header h2 {
|
|
76
|
+
font-size: 1.2em;
|
|
77
|
+
color: #080808;
|
|
78
|
+
margin: 0;
|
|
79
|
+
font-weight: bold;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.popup-header .evzone {
|
|
83
|
+
color: #0a0a0a;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.popup-header .pay {
|
|
87
|
+
color: #0a0a0a;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.success-content {
|
|
91
|
+
display: flex;
|
|
92
|
+
flex-direction: column;
|
|
93
|
+
align-items: center;
|
|
94
|
+
padding: 20px;
|
|
95
|
+
background-color: #fff;
|
|
96
|
+
border-radius: 8px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.success-content .icon {
|
|
100
|
+
color: #02CD8D;
|
|
101
|
+
font-size: 40px;
|
|
102
|
+
margin-bottom: 10px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.success-content h3 {
|
|
106
|
+
font-size: 1.2em;
|
|
107
|
+
margin: 0 0 15px;
|
|
108
|
+
color: #333;
|
|
109
|
+
font-weight: 500;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.success-content p {
|
|
113
|
+
font-size: 1em;
|
|
114
|
+
color: #666;
|
|
115
|
+
margin-bottom: 15px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.close-button {
|
|
119
|
+
background-color: #0288d1;
|
|
120
|
+
color: #fff;
|
|
121
|
+
border: none;
|
|
122
|
+
border-radius: 5px;
|
|
123
|
+
padding: 10px 20px;
|
|
124
|
+
font-size: 1em;
|
|
125
|
+
font-weight: 500;
|
|
126
|
+
cursor: pointer;
|
|
127
|
+
transition: background-color 0.3s ease;
|
|
128
|
+
width: 100%;
|
|
129
|
+
max-width: 200px;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.close-button:hover {
|
|
133
|
+
background-color: #0277bd;
|
|
134
|
+
}
|
|
135
|
+
`}</style>
|
|
136
|
+
</>
|
|
137
|
+
);
|
|
138
|
+
};
|
|
139
|
+
|
|
140
|
+
export default PaymentSuccess;
|