Skip to content

Commit 27c3e41

Browse files
abhishek-nexgen-devabhishek-nexgen-dev
committed
feat: Refactor billing pages and components for improved readability and maintainability
- Updated AddFundsPage with consistent formatting and improved error handling. - Enhanced BillingHubPage layout and styling for better user experience. - Streamlined CommunityWalletPage and UsageDashboardPage with cleaner code. - Added permission management components and store for member actions. - Implemented PermissionWrapper for conditional rendering based on user permissions. - Updated tests for webhook forms and billing scenarios to ensure reliability. - Refactored MemberLayout for better styling and structure. - Added new routes for member management and permissions.
1 parent 3e78b77 commit 27c3e41

44 files changed

Lines changed: 553 additions & 248 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎eslint.config.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,11 @@ export default tseslint.config(
2626
},
2727
rules: {
2828
...reactHooks.configs.recommended.rules,
29-
"react-refresh/only-export-components": [
30-
"warn",
31-
{ allowConstantExport: true },
32-
],
29+
"react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
3330
"@typescript-eslint/no-explicit-any": "warn",
3431
"@typescript-eslint/no-unused-vars": [
3532
"error",
36-
{ "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
33+
{ argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
3734
],
3835
},
3936
},

‎playwright.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default defineConfig({
2222

2323
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
2424
trace: "on-first-retry",
25-
25+
2626
/* Disable video/screenshots by default for speed, can be enabled on retry */
2727
screenshot: "only-on-failure",
2828
},

‎pnpm-lock.yaml‎

Lines changed: 38 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/config/sidebar.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const sidebarItems = [
3434
},
3535
{
3636
title: "Teams",
37-
path: "/org/teams",
37+
path: "/member/teams",
3838
icon: Users,
3939
},
4040
{

‎src/features/Auth/v1/Pages/LoginPage.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,9 @@ const LoginPage = () => {
5151
password,
5252
});
5353

54-
const Role = response.data.role;
54+
console.log("Login successful: come from login page --->", response);
55+
56+
const Role = response.data.FindUser.role;
5557

5658
if (Role === "organization") {
5759
navigate("/org/dashboard");

‎src/features/Auth/v1/Store/Organization.Store.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { create } from "zustand";
22
import { persist } from "zustand/middleware";
33
import { CommunitySchema } from "../Types/Organization.Type";
44

5-
65
const useOrganizationStore = create<{
76
organization: CommunitySchema | null;
87
setOrganization: (organization: CommunitySchema) => void;

‎src/features/Auth/v1/hooks/useAuth.ts‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@ import AUTH_ENDPOINTS from "../Constant/Auth.Endpoint.Constant";
55
import useAuthStore from "../Store/Auth.Store";
66
import useOrganizationStore from "../Store/Organization.Store";
77

8-
const baseUrl =
9-
import.meta.env.VITE_API_BASE_URL || "http://localhost:8000/api/v1";
8+
import usePermissionStore from "@/features/Permission/Store/Permission.Store";
9+
10+
const baseUrl = import.meta.env.VITE_API_BASE_URL || "http://localhost:8000/api/v1";
1011

1112
// =========================
1213
// GET ORGANIZATION
@@ -18,13 +19,14 @@ const useGetOrganizationMutation = () => {
1819

1920
mutationFn: async (_id: string) => {
2021
const response = await api.get(
21-
`${baseUrl}${AUTH_ENDPOINTS.GET_ORGANIZATION_BY_ID}?ownerId=${_id}`
22+
`${baseUrl}${AUTH_ENDPOINTS.GET_ORGANIZATION_BY_ID}?ownerId=${_id}`,
2223
);
2324

2425
return response.data;
2526
},
2627

2728
onSuccess: (response) => {
29+
console.log("Organization fetched successfully:", response.data);
2830
useOrganizationStore.getState().setOrganization(response.data);
2931
},
3032

@@ -44,23 +46,17 @@ const useLoginMutation = () => {
4446
return useMutation({
4547
mutationKey: ["login"],
4648

47-
mutationFn: async (credentials: {
48-
email: string;
49-
password: string;
50-
}) => {
51-
const response = await api.post(
52-
`${baseUrl}${AUTH_ENDPOINTS.LOGIN}`,
53-
credentials
54-
);
49+
mutationFn: async (credentials: { email: string; password: string }) => {
50+
const response = await api.post(`${baseUrl}${AUTH_ENDPOINTS.LOGIN}`, credentials);
5551

5652
return response.data;
5753
},
5854

5955
onSuccess: async (response) => {
60-
const user = response.data;
56+
const user = response.data.FindUser;
6157
const token = response.token;
6258

63-
console.log("Login successful:", user);
59+
usePermissionStore.getState().setPermissions(response.data.perms);
6460

6561
// Save auth first
6662
useAuthStore.getState().setAuthData(user, token);
@@ -87,4 +83,4 @@ export const useAuth = () => {
8783
return {
8884
loginMutation,
8985
};
90-
};
86+
};

‎src/features/Billing/v1/components/analytics/UsageCharts.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,10 @@ export default function UsageCharts() {
3232
<div
3333
key={i}
3434
className="h-64 rounded-2xl border animate-pulse"
35-
style={{ backgroundColor: "var(--cd-surface-2)", borderColor: "var(--cd-border-subtle)" }}
35+
style={{
36+
backgroundColor: "var(--cd-surface-2)",
37+
borderColor: "var(--cd-border-subtle)",
38+
}}
3639
/>
3740
))}
3841
</div>

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

Lines changed: 77 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,12 @@ import {
1212
} from "lucide-react";
1313
import { MIN_ADD_RUPEES } from "../../constants/billing.constants";
1414
import { 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";
1621
import type { AddFundsPayload, PaymentState } from "../../Billing.types";
1722
import 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

258304
function 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

Comments
 (0)