@@ -89,64 +89,59 @@ const SurveyForm = () => {
89
89
) => {
90
90
setFormData({ ...formData, [e.target.name]: e.target.value })
91
91
}
92
- ;<button
93
- onClick={async () => {
94
- try {
95
- const response = await fetch(` /api/forms/receipts/${submissionId}`)
96
- if (!response.ok) {
97
- throw new Error('Could not get receipt URL')
98
- }
99
- const { url } = await response.json()
100
- window.location.href = url // behaves like a 303 redirect
101
- } catch (err) {
102
- console.error(err)
103
- alert('Failed to load receipt')
104
- }
105
- }}
106
- >
107
- View Receipt
108
- </button>
109
92
110
93
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
111
94
e.preventDefault()
112
95
try {
113
96
const response = await fetch('/api/forms/forms/feedback', {
114
97
method: 'POST',
115
- headers : {
116
- ' Content-Type ' : ' application/json' ,
117
- },
98
+ headers: { 'Content-Type': 'application/json' },
118
99
body: JSON.stringify(formData),
119
100
})
120
101
121
- if (!response.ok) {
122
- throw new Error('Network response was not ok')
123
- }
102
+ if (!response.ok) throw new Error('Failed to submit')
124
103
125
104
const data: { id: string } = await response.json()
126
105
setSubmissionId(data.id)
127
106
alert('Survey submitted successfully!')
128
107
} catch (error) {
129
- console.error('Error submitting survey :', error)
108
+ console.error('Submission error :', error)
130
109
alert('Failed to submit survey.')
131
110
}
132
111
}
133
112
113
+ const fetchReceipt = async () => {
114
+ try {
115
+ const response = await fetch(` /api/receipts/receipts/${submissionId}`)
116
+ if (!response.ok) throw new Error('Could not get receipt URL')
117
+ const url = await response.text()
118
+ window.location.href = url
119
+ } catch (err) {
120
+ console.error(err)
121
+ alert('Failed to load receipt')
122
+ }
123
+ }
124
+
134
125
return (
135
- <div>
136
- <h2>Survey</h2>
137
- <form onSubmit={handleSubmit}>
138
- <div>
139
- <label>Name:</label>
126
+ <div style={{ maxWidth : 500, margin: '0 auto', padding: 20 }}>
127
+ <h2>Feedback Survey</h2>
128
+ <form
129
+ onSubmit={handleSubmit}
130
+ style={{ display : ' flex' , flexDirection: 'column', gap: 12 }}
131
+ >
132
+ <label>
133
+ Name :
140
134
<input
141
135
type="text"
142
136
name="name"
143
137
value={formData.name}
144
138
onChange={handleChange}
145
139
required
146
140
/>
147
- </div>
148
- <div>
149
- <label>Rating (1–5):</label>
141
+ </label>
142
+
143
+ <label>
144
+ Rating (1–5) :
150
145
<input
151
146
type="number"
152
147
name="rating"
@@ -156,40 +151,26 @@ const SurveyForm = () => {
156
151
max="5"
157
152
required
158
153
/>
159
- </div>
160
- <div>
161
- <label>Feedback:</label>
154
+ </label>
155
+
156
+ <label>
157
+ Feedback :
162
158
<textarea
163
159
name="feedback"
164
160
value={formData.feedback}
165
161
onChange={handleChange}
166
162
/>
167
- </div>
163
+ </label>
164
+
168
165
<button type="submit">Submit</button>
169
166
</form>
170
167
171
168
{submissionId && (
172
- <div>
173
- <p>Submission ID : {submissionId}</p>
174
- <button
175
- onClick={async () => {
176
- try {
177
- const response = await fetch(
178
- ` /api/receipts/receipts/${submissionId}` ,
179
- )
180
- if (!response.ok) {
181
- throw new Error('Could not get receipt URL')
182
- }
183
- const url = await response.text()
184
- window.location.href = url
185
- } catch (err) {
186
- console.error(err)
187
- alert('Failed to load receipt')
188
- }
189
- }}
190
- >
191
- View Receipt
192
- </button>
169
+ <div style={{ marginTop : 20 }}>
170
+ <p>
171
+ Thank you! Your submission ID is <code>{submissionId}</code>
172
+ </p>
173
+ <button onClick={fetchReceipt}>View Receipt</button>
193
174
</div>
194
175
)}
195
176
</div>
0 commit comments