@@ -89,64 +89,59 @@ const SurveyForm = () => {
8989 ) => {
9090 setFormData({ ...formData, [e.target.name]: e.target.value })
9191 }
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>
10992
11093 const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
11194 e.preventDefault()
11295 try {
11396 const response = await fetch('/api/forms/forms/feedback', {
11497 method: 'POST',
115- headers : {
116- ' Content-Type ' : ' application/json' ,
117- },
98+ headers: { 'Content-Type': 'application/json' },
11899 body: JSON.stringify(formData),
119100 })
120101
121- if (!response.ok) {
122- throw new Error('Network response was not ok')
123- }
102+ if (!response.ok) throw new Error('Failed to submit')
124103
125104 const data: { id: string } = await response.json()
126105 setSubmissionId(data.id)
127106 alert('Survey submitted successfully!')
128107 } catch (error) {
129- console.error('Error submitting survey :', error)
108+ console.error('Submission error :', error)
130109 alert('Failed to submit survey.')
131110 }
132111 }
133112
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+
134125 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 :
140134 <input
141135 type="text"
142136 name="name"
143137 value={formData.name}
144138 onChange={handleChange}
145139 required
146140 />
147- </div>
148- <div>
149- <label>Rating (1–5):</label>
141+ </label>
142+
143+ <label>
144+ Rating (1–5) :
150145 <input
151146 type="number"
152147 name="rating"
@@ -156,40 +151,26 @@ const SurveyForm = () => {
156151 max="5"
157152 required
158153 />
159- </div>
160- <div>
161- <label>Feedback:</label>
154+ </label>
155+
156+ <label>
157+ Feedback :
162158 <textarea
163159 name="feedback"
164160 value={formData.feedback}
165161 onChange={handleChange}
166162 />
167- </div>
163+ </label>
164+
168165 <button type="submit">Submit</button>
169166 </form>
170167
171168 {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>
193174 </div>
194175 )}
195176 </div>
0 commit comments