@@ -12,7 +12,12 @@ import {
1212} from "lucide-react" ;
1313import { MIN_ADD_RUPEES } from "../../constants/billing.constants" ;
1414import { useAddFunds } from "../../hooks/useWallet" ;
15- import { buildAddFundsPreview , formatCredits , formatRupees , validateMinAddFunds } from "../../utils/credits" ;
15+ import {
16+ buildAddFundsPreview ,
17+ formatCredits ,
18+ formatRupees ,
19+ validateMinAddFunds ,
20+ } from "../../utils/credits" ;
1621import type { AddFundsPayload , PaymentState } from "../../Billing.types" ;
1722import Input from "@/Component/ui/Input" ;
1823
@@ -118,10 +123,17 @@ export default function AddFundsModal({ isOpen, onClose, onSuccess, onError }: P
118123 } }
119124 >
120125 < div className = "pr-10" >
121- < p className = "text-xs font-black uppercase tracking-wide" style = { { color : "var(--cd-primary)" } } >
126+ < p
127+ className = "text-xs font-black uppercase tracking-wide"
128+ style = { { color : "var(--cd-primary)" } }
129+ >
122130 Community wallet
123131 </ p >
124- < h2 id = "add-funds-modal-title" className = "mt-1 text-2xl font-black" style = { { color : "var(--cd-text)" } } >
132+ < h2
133+ id = "add-funds-modal-title"
134+ className = "mt-1 text-2xl font-black"
135+ style = { { color : "var(--cd-text)" } }
136+ >
125137 Add Funds
126138 </ h2 >
127139 < p className = "mt-1 text-sm" style = { { color : "var(--cd-text-muted)" } } >
@@ -141,7 +153,7 @@ export default function AddFundsModal({ isOpen, onClose, onSuccess, onError }: P
141153 setAmountStr ( digitsOnly . replace ( / ^ 0 + (? = \d ) / , "" ) ) ;
142154 } }
143155 leftIcon = { < Banknote size = { 18 } /> }
144- error = { validation . valid ? undefined : validation . error ?? undefined }
156+ error = { validation . valid ? undefined : ( validation . error ?? undefined ) }
145157 className = "w-full !mb-0"
146158 inputClassName = "!text-lg !font-bold"
147159 />
@@ -151,14 +163,26 @@ export default function AddFundsModal({ isOpen, onClose, onSuccess, onError }: P
151163 < SectionTitle title = "Credit calculator" />
152164 < div
153165 className = "grid gap-3 rounded-xl border p-4 sm:grid-cols-3"
154- style = { { backgroundColor : "var(--cd-bg)" , borderColor : "var(--cd-border-subtle)" } }
166+ style = { {
167+ backgroundColor : "var(--cd-bg)" ,
168+ borderColor : "var(--cd-border-subtle)" ,
169+ } }
155170 >
156- < GeneratedCreditTile label = "Base credits" value = { formatCredits ( preview . baseCredits ) } />
171+ < GeneratedCreditTile
172+ label = "Base credits"
173+ value = { formatCredits ( preview . baseCredits ) }
174+ />
157175 < GeneratedCreditTile
158176 label = "Bonus credits"
159- value = { preview . bonusCredits > 0 ? `+${ formatCredits ( preview . bonusCredits ) } ` : "0" }
177+ value = {
178+ preview . bonusCredits > 0 ? `+${ formatCredits ( preview . bonusCredits ) } ` : "0"
179+ }
180+ />
181+ < GeneratedCreditTile
182+ label = "Total credits"
183+ value = { formatCredits ( preview . totalCredits ) }
184+ accent
160185 />
161- < GeneratedCreditTile label = "Total credits" value = { formatCredits ( preview . totalCredits ) } accent />
162186 </ div >
163187 </ section >
164188
@@ -195,23 +219,42 @@ export default function AddFundsModal({ isOpen, onClose, onSuccess, onError }: P
195219 < SectionTitle title = "Pay details" />
196220 < div
197221 className = "mt-3 rounded-xl border p-4"
198- style = { { backgroundColor : "var(--cd-surface)" , borderColor : "var(--cd-border-subtle)" } }
222+ style = { {
223+ backgroundColor : "var(--cd-surface)" ,
224+ borderColor : "var(--cd-border-subtle)" ,
225+ } }
199226 >
200227 < div className = "space-y-3 text-sm" >
201228 < SummaryRow label = "Wallet amount" value = { formatRupees ( preview . amountRupees ) } />
202229 < SummaryRow label = "GST (18%)" value = { formatRupees ( preview . gstRupees ) } />
203- < SummaryRow label = "Platform fee" value = { formatRupees ( preview . platformFeeRupees ) } />
230+ < SummaryRow
231+ label = "Platform fee"
232+ value = { formatRupees ( preview . platformFeeRupees ) }
233+ />
204234 < SummaryRow label = "Base credits" value = { formatCredits ( preview . baseCredits ) } />
205235 { preview . bonusCredits > 0 ? (
206- < SummaryRow label = "Bonus credits" value = { `+${ formatCredits ( preview . bonusCredits ) } ` } accent />
236+ < SummaryRow
237+ label = "Bonus credits"
238+ value = { `+${ formatCredits ( preview . bonusCredits ) } ` }
239+ accent
240+ />
207241 ) : null }
208242 </ div >
209243 < div
210244 className = "mt-4 border-t pt-4"
211245 style = { { borderColor : "var(--cd-border-subtle)" } }
212246 >
213- < SummaryRow label = "Credits added" value = { formatCredits ( preview . totalCredits ) } accent strong />
214- < SummaryRow label = "Total payable" value = { formatRupees ( preview . totalPayableRupees ) } strong />
247+ < SummaryRow
248+ label = "Credits added"
249+ value = { formatCredits ( preview . totalCredits ) }
250+ accent
251+ strong
252+ />
253+ < SummaryRow
254+ label = "Total payable"
255+ value = { formatRupees ( preview . totalPayableRupees ) }
256+ strong
257+ />
215258 </ div >
216259 </ div >
217260
@@ -243,7 +286,10 @@ export default function AddFundsModal({ isOpen, onClose, onSuccess, onError }: P
243286 ) }
244287 </ button >
245288
246- < div className = "mt-3 flex items-center justify-center gap-2 text-xs" style = { { color : "var(--cd-text-muted)" } } >
289+ < div
290+ className = "mt-3 flex items-center justify-center gap-2 text-xs"
291+ style = { { color : "var(--cd-text-muted)" } }
292+ >
247293 < ShieldCheck size = { 14 } style = { { color : "var(--cd-success)" } } />
248294 Encrypted payment simulation
249295 </ div >
@@ -257,7 +303,10 @@ export default function AddFundsModal({ isOpen, onClose, onSuccess, onError }: P
257303
258304function SectionTitle ( { title } : { title : string } ) {
259305 return (
260- < h3 className = "mb-3 text-sm font-black uppercase tracking-wide" style = { { color : "var(--cd-text)" } } >
306+ < h3
307+ className = "mb-3 text-sm font-black uppercase tracking-wide"
308+ style = { { color : "var(--cd-text)" } }
309+ >
261310 { title }
262311 </ h3 >
263312 ) ;
@@ -280,10 +329,16 @@ function GeneratedCreditTile({
280329 borderColor : accent ? "var(--cd-primary)" : "var(--cd-border-subtle)" ,
281330 } }
282331 >
283- < span className = "text-xs font-bold uppercase tracking-wide" style = { { color : "var(--cd-text-muted)" } } >
332+ < span
333+ className = "text-xs font-bold uppercase tracking-wide"
334+ style = { { color : "var(--cd-text-muted)" } }
335+ >
284336 { label }
285337 </ span >
286- < span className = "mt-3 block text-2xl font-black" style = { { color : accent ? "var(--cd-primary)" : "var(--cd-text)" } } >
338+ < span
339+ className = "mt-3 block text-2xl font-black"
340+ style = { { color : accent ? "var(--cd-primary)" : "var(--cd-text)" } }
341+ >
287342 { value }
288343 </ span >
289344 </ div >
@@ -328,7 +383,11 @@ function SuccessContent({ credits, onClose }: { credits: number; onClose: () =>
328383 < p className = "mt-2 text-sm" style = { { color : "var(--cd-text-muted)" } } >
329384 { formatCredits ( credits ) } credits have been added to your wallet.
330385 </ p >
331- < button type = "button" onClick = { onClose } className = "cd-btn cd-btn-primary mt-8 rounded-xl px-8 py-2.5" >
386+ < button
387+ type = "button"
388+ onClick = { onClose }
389+ className = "cd-btn cd-btn-primary mt-8 rounded-xl px-8 py-2.5"
390+ >
332391 Done
333392 </ button >
334393 </ div >
0 commit comments