Skip to content

Commit 77eb269

Browse files
itzzavdheshitzzavdhesh
committed
updation
1 parent 81e5f3c commit 77eb269

8 files changed

Lines changed: 127 additions & 177 deletions

File tree

‎src/features/Billing/v1/components/layout/AddFundsModal.tsx‎

Lines changed: 15 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { MIN_ADD_RUPEES } from "../../constants/billing.constants";
1414
import { useAddFunds } from "../../hooks/useWallet";
1515
import { buildAddFundsPreview, formatCredits, formatRupees, validateMinAddFunds } from "../../utils/credits";
1616
import type { AddFundsPayload, PaymentState } from "../../Billing.types";
17+
import Input from "@/Component/ui/Input";
1718

1819
const PAYMENT_METHODS: Array<{
1920
id: AddFundsPayload["paymentMethod"];
@@ -130,35 +131,20 @@ export default function AddFundsModal({ isOpen, onClose, onSuccess, onError }: P
130131

131132
<section className="mt-6">
132133
<SectionTitle title="Custom amount" />
133-
<label className="block text-sm font-bold" style={{ color: "var(--cd-text)" }}>
134-
Custom amount (Rs., min {MIN_ADD_RUPEES})
135-
</label>
136-
<div className="relative mt-2">
137-
<Banknote
138-
size={18}
139-
className="absolute left-4 top-1/2 -translate-y-1/2"
140-
style={{ color: "var(--cd-text-muted)" }}
141-
/>
142-
<input
143-
type="number"
144-
inputMode="numeric"
145-
pattern="[0-9]*"
146-
min={MIN_ADD_RUPEES}
147-
step={50}
148-
value={amountStr}
149-
onChange={(event) => {
150-
const digitsOnly = event.target.value.replace(/\D/g, "");
151-
setAmountStr(digitsOnly.replace(/^0+(?=\d)/, ""));
152-
}}
153-
className="w-full rounded-xl border bg-transparent py-3 pl-11 pr-4 text-lg font-bold outline-none focus:ring-4 focus:ring-[var(--cd-primary-subtle)]"
154-
style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
155-
/>
156-
</div>
157-
{!validation.valid && (
158-
<p className="mt-2 text-xs font-semibold" style={{ color: "var(--cd-danger)" }}>
159-
{validation.error}
160-
</p>
161-
)}
134+
<Input
135+
label={`Custom amount (Rs., min ${MIN_ADD_RUPEES})`}
136+
name="amount"
137+
type="number"
138+
value={amountStr}
139+
onChange={(_, val) => {
140+
const digitsOnly = val.replace(/\D/g, "");
141+
setAmountStr(digitsOnly.replace(/^0+(?=\d)/, ""));
142+
}}
143+
leftIcon={<Banknote size={18} />}
144+
error={validation.valid ? undefined : validation.error ?? undefined}
145+
className="w-full !mb-0"
146+
inputClassName="!text-lg !font-bold"
147+
/>
162148
</section>
163149

164150
<section className="mt-6">

‎src/features/Billing/v1/components/layout/AutoRechargePanel.tsx‎

Lines changed: 19 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useState } from "react";
22
import { RefreshCw } from "lucide-react";
33
import type { Wallet } from "../../Billing.types";
4+
import Input from "@/Component/ui/Input";
45
import { useAutoRecharge } from "../../hooks/useWallet";
56
import { MIN_ADD_RUPEES } from "../../constants/billing.constants";
67

@@ -66,34 +67,24 @@ export default function AutoRechargePanel({ wallet, onSuccess }: Props) {
6667
</label>
6768

6869
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-5">
69-
<div>
70-
<label className="text-xs font-medium mb-1 block" style={{ color: "var(--cd-text-muted)" }}>
71-
Threshold (credits)
72-
</label>
73-
<input
74-
type="number"
75-
min={0}
76-
value={threshold}
77-
onChange={(e) => setThreshold(Number(e.target.value))}
78-
disabled={!enabled}
79-
className="w-full rounded-xl border px-3 py-2.5 text-sm bg-transparent outline-none focus:ring-4 focus:ring-[var(--cd-primary-subtle)]"
80-
style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
81-
/>
82-
</div>
83-
<div>
84-
<label className="text-xs font-medium mb-1 block" style={{ color: "var(--cd-text-muted)" }}>
85-
Recharge amount (Rs., min {MIN_ADD_RUPEES})
86-
</label>
87-
<input
88-
type="number"
89-
min={MIN_ADD_RUPEES}
90-
value={amount}
91-
onChange={(e) => setAmount(Number(e.target.value))}
92-
disabled={!enabled}
93-
className="w-full rounded-xl border px-3 py-2.5 text-sm bg-transparent outline-none focus:ring-4 focus:ring-[var(--cd-primary-subtle)]"
94-
style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
95-
/>
96-
</div>
70+
<Input
71+
label="Threshold (credits)"
72+
name="threshold"
73+
type="number"
74+
value={threshold}
75+
onChange={(_, val) => setThreshold(Number(val) || 0)}
76+
disabled={!enabled}
77+
className="w-full !mb-0"
78+
/>
79+
<Input
80+
label={`Recharge amount (Rs., min ${MIN_ADD_RUPEES})`}
81+
name="amount"
82+
type="number"
83+
value={amount}
84+
onChange={(_, val) => setAmount(Number(val) || 0)}
85+
disabled={!enabled}
86+
className="w-full !mb-0"
87+
/>
9788
</div>
9889

9990
<button

‎src/features/Billing/v1/components/layout/PayoutAccountDetails.tsx‎

Lines changed: 38 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useState } from "react";
22
import { CheckCircle2, Landmark, Save } from "lucide-react";
33
import { useToast } from "@/features/Tasks/v1/components/common/ToastNotification";
4+
import Input from "@/Component/ui/Input";
45

56
export default function PayoutAccountDetails() {
67
const { addToast } = useToast();
@@ -47,51 +48,43 @@ export default function PayoutAccountDetails() {
4748
</div>
4849
</div>
4950

50-
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
51-
<div>
52-
<label className="text-xs font-semibold mb-1 block" style={{ color: "var(--cd-text-muted)" }}>Account Holder Name</label>
53-
<input
54-
type="text"
55-
value={form.accountHolder}
56-
onChange={(e) => setForm({ ...form, accountHolder: e.target.value })}
57-
className="w-full rounded-xl border px-3 py-2.5 text-sm bg-transparent outline-none focus:ring-4 focus:ring-[var(--cd-primary-subtle)]"
58-
style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
59-
placeholder="John Doe"
60-
/>
61-
</div>
62-
<div>
63-
<label className="text-xs font-semibold mb-1 block" style={{ color: "var(--cd-text-muted)" }}>Bank Name</label>
64-
<input
65-
type="text"
66-
value={form.bankName}
67-
onChange={(e) => setForm({ ...form, bankName: e.target.value })}
68-
className="w-full rounded-xl border px-3 py-2.5 text-sm bg-transparent outline-none focus:ring-4 focus:ring-[var(--cd-primary-subtle)]"
69-
style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
70-
placeholder="HDFC Bank"
71-
/>
72-
</div>
73-
<div>
74-
<label className="text-xs font-semibold mb-1 block" style={{ color: "var(--cd-text-muted)" }}>Account Number</label>
75-
<input
76-
type="password"
77-
value={form.accountNumber}
78-
onChange={(e) => setForm({ ...form, accountNumber: e.target.value })}
79-
className="w-full rounded-xl border px-3 py-2.5 text-sm bg-transparent outline-none focus:ring-4 focus:ring-[var(--cd-primary-subtle)]"
80-
style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
81-
placeholder="********4567"
82-
/>
83-
</div>
84-
<div>
85-
<label className="text-xs font-semibold mb-1 block" style={{ color: "var(--cd-text-muted)" }}>IFSC / Swift Code</label>
86-
<input
87-
type="text"
88-
value={form.ifsc}
89-
onChange={(e) => setForm({ ...form, ifsc: e.target.value.toUpperCase() })}
90-
className="w-full rounded-xl border px-3 py-2.5 text-sm bg-transparent outline-none focus:ring-4 focus:ring-[var(--cd-primary-subtle)]"
91-
style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
92-
placeholder="HDFC0001234"
93-
/>
94-
</div>
51+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 mb-2">
52+
<Input
53+
label="Account Holder Name"
54+
name="accountHolder"
55+
type="text"
56+
value={form.accountHolder}
57+
onChange={(_, val) => setForm({ ...form, accountHolder: val })}
58+
placeholder="John Doe"
59+
className="w-full"
60+
/>
61+
<Input
62+
label="Bank Name"
63+
name="bankName"
64+
type="text"
65+
value={form.bankName}
66+
onChange={(_, val) => setForm({ ...form, bankName: val })}
67+
placeholder="HDFC Bank"
68+
className="w-full"
69+
/>
70+
<Input
71+
label="Account Number"
72+
name="accountNumber"
73+
type="password"
74+
value={form.accountNumber}
75+
onChange={(_, val) => setForm({ ...form, accountNumber: val })}
76+
placeholder="********4567"
77+
className="w-full"
78+
/>
79+
<Input
80+
label="IFSC / Swift Code"
81+
name="ifsc"
82+
type="text"
83+
value={form.ifsc}
84+
onChange={(_, val) => setForm({ ...form, ifsc: val.toUpperCase() })}
85+
placeholder="HDFC0001234"
86+
className="w-full"
87+
/>
9588
</div>
9689

9790
<div className="flex justify-end">

‎src/features/Billing/v1/components/layout/QuickRecharge.tsx‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useState } from "react";
22
import { CreditCard, Loader2, Zap } from "lucide-react";
3+
import Input from "@/Component/ui/Input";
34
import { formatRupees, buildAddFundsPreview, formatCredits } from "../../utils/credits";
45
import { useAddFunds } from "../../hooks/useWallet";
56
import { useToast } from "@/features/Tasks/v1/components/common/ToastNotification";
@@ -71,22 +72,19 @@ export default function QuickRecharge() {
7172
})}
7273
</div>
7374

74-
<div className="mb-5">
75-
<label className="text-xs font-semibold mb-1 block" style={{ color: "var(--cd-text-muted)" }}>Custom Amount (Rs.)</label>
76-
<input
77-
type="text"
78-
inputMode="numeric"
79-
pattern="[0-9]*"
80-
value={amountStr}
81-
onChange={(e) => {
82-
const digitsOnly = e.target.value.replace(/\D/g, "");
83-
const val = digitsOnly.replace(/^0+(?=\d)/, "");
84-
setAmountStr(val);
85-
}}
86-
className="w-full rounded-xl border px-3 py-2.5 text-sm font-semibold bg-transparent outline-none focus:ring-4 focus:ring-[var(--cd-primary-subtle)]"
87-
style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
88-
/>
89-
</div>
75+
<Input
76+
label="Custom Amount (Rs.)"
77+
name="amount"
78+
type="text"
79+
value={amountStr}
80+
onChange={(_, val) => {
81+
const digitsOnly = val.replace(/\D/g, "");
82+
const cleanVal = digitsOnly.replace(/^0+(?=\d)/, "");
83+
setAmountStr(cleanVal);
84+
}}
85+
className="w-full !mb-5"
86+
inputClassName="font-semibold"
87+
/>
9088

9189
<div
9290
className="mb-5 rounded-xl border p-4"

‎src/features/Billing/v1/components/layout/WalletFilters.tsx‎

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Search, X } from "lucide-react";
22
import type { CreditTransactionType, TransactionFilters } from "../../Billing.types";
3+
import Input from "@/Component/ui/Input";
34

45
interface Props {
56
filters: TransactionFilters;
@@ -27,28 +28,21 @@ export default function WalletFiltersBar({ filters, onChange, filteredCount, tot
2728
}}
2829
>
2930
<div className="mx-auto flex w-full max-w-[1440px] flex-wrap items-center gap-3">
30-
<div
31-
className="flex flex-1 min-w-[200px] items-center gap-2 rounded-lg border px-3 py-2"
32-
style={{
33-
backgroundColor: "var(--cd-surface)",
34-
borderColor: "var(--cd-border-subtle)",
35-
}}
36-
>
37-
<Search size={16} style={{ color: "var(--cd-text-muted)" }} />
38-
<input
39-
type="text"
40-
placeholder="Search transactions..."
41-
value={filters.search}
42-
onChange={(e) => onChange({ ...filters, search: e.target.value, page: 1 })}
43-
className="flex-1 bg-transparent text-sm outline-none"
44-
style={{ color: "var(--cd-text)" }}
45-
/>
46-
{filters.search && (
47-
<button onClick={() => onChange({ ...filters, search: "", page: 1 })}>
48-
<X size={14} style={{ color: "var(--cd-text-muted)" }} />
49-
</button>
50-
)}
51-
</div>
31+
<Input
32+
name="search"
33+
placeholder="Search transactions..."
34+
value={filters.search}
35+
onChange={(_, val) => onChange({ ...filters, search: val, page: 1 })}
36+
leftIcon={<Search size={16} />}
37+
rightIcon={
38+
filters.search ? (
39+
<button type="button" onClick={() => onChange({ ...filters, search: "", page: 1 })}>
40+
<X size={14} />
41+
</button>
42+
) : undefined
43+
}
44+
className="flex-1 min-w-[200px] !mb-0"
45+
/>
5246

5347
<div className="flex flex-wrap gap-2">
5448
{TYPE_OPTIONS.map((opt) => {

‎src/features/Billing/v1/pages/AddFundsPage.tsx‎

Lines changed: 16 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { buildAddFundsPreview, formatCredits, formatRupees, validateMinAddFunds
1717
import { useAddFunds } from "../hooks/useWallet";
1818
import { ToastContainer, useToast } from "@/features/Tasks/v1/components/common/ToastNotification";
1919
import type { PaymentState } from "../Billing.types";
20+
import Input from "@/Component/ui/Input";
2021

2122
const PAYMENT_METHODS = [
2223
{ id: "upi", label: "UPI", icon: Smartphone },
@@ -154,36 +155,21 @@ export default function AddFundsPage() {
154155
className="rounded-2xl border p-5"
155156
style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}
156157
>
157-
<label className="text-sm font-bold mb-2 block" style={{ color: "var(--cd-text)" }}>
158-
Custom amount (Rs., min {MIN_ADD_RUPEES})
159-
</label>
160-
<div className="relative">
161-
<Banknote
162-
size={18}
163-
className="absolute left-4 top-1/2 -translate-y-1/2"
164-
style={{ color: "var(--cd-text-muted)" }}
165-
/>
166-
<input
167-
type="number"
168-
inputMode="numeric"
169-
pattern="[0-9]*"
170-
min={MIN_ADD_RUPEES}
171-
step={50}
172-
value={amountStr}
173-
onChange={(e) => {
174-
const digitsOnly = e.target.value.replace(/\D/g, "");
175-
const val = digitsOnly.replace(/^0+(?=\d)/, "");
176-
setAmountStr(val);
177-
}}
178-
className="w-full rounded-xl border py-3 pl-11 pr-4 text-lg font-bold bg-transparent outline-none focus:ring-4 focus:ring-[var(--cd-primary-subtle)]"
179-
style={{ borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
180-
/>
181-
</div>
182-
{!validation.valid && (
183-
<p className="text-xs mt-2" style={{ color: "var(--cd-danger)" }}>
184-
{validation.error}
185-
</p>
186-
)}
158+
<Input
159+
label={`Custom amount (Rs., min ${MIN_ADD_RUPEES})`}
160+
name="amount"
161+
type="number"
162+
value={amountStr}
163+
onChange={(_, val) => {
164+
const digitsOnly = val.replace(/\D/g, "");
165+
const cleanVal = digitsOnly.replace(/^0+(?=\d)/, "");
166+
setAmountStr(cleanVal);
167+
}}
168+
leftIcon={<Banknote size={18} />}
169+
error={validation.valid ? undefined : validation.error ?? undefined}
170+
className="w-full !mb-0"
171+
inputClassName="!text-lg !font-bold"
172+
/>
187173
</section>
188174

189175
<section>

‎test-results/.last-run.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"status": "passed",
3+
"failedTests": []
4+
}

0 commit comments

Comments
 (0)