Skip to content

Commit 43e8087

Browse files
paanSinghCoderpaanSinghCoder
committed
feat(plans): move plans page to lib and use in apps
1 parent ccab2a3 commit 43e8087

File tree

8 files changed

+43
-44
lines changed

8 files changed

+43
-44
lines changed

‎web/apps/admin/src/pages/plans/PlansPage.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { PlansView } from "@raystack/frontier/admin";
2+
import { useNavigate, useParams } from "react-router-dom";
3+
4+
export function PlansPage() {
5+
const { planId } = useParams();
6+
const navigate = useNavigate();
7+
8+
return (
9+
<PlansView
10+
selectedPlanId={planId}
11+
onCloseDetail={() => navigate("/plans")}
12+
/>
13+
);
14+
}

‎web/apps/admin/src/routes.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ import LoadingState from "./components/states/Loading";
77
import UnauthorizedState from "./components/states/Unauthorized";
88

99
import App from "./App";
10-
import PlanList from "./containers/billingplans.list";
11-
import PlanDetails from "./containers/billingplans.list/details";
10+
import { PlansPage } from "./pages/plans/PlansPage";
1211
import Login from "./containers/login";
1312
import MagicLink from "./containers/magiclink";
1413

@@ -84,9 +83,8 @@ export default memo(function AppRoutes() {
8483

8584
<Route path="audit-logs" element={<AuditLogsPage />} />
8685

87-
<Route path="plans" element={<PlanList />}>
88-
<Route path=":planId" element={<PlanDetails />} />
89-
</Route>
86+
<Route path="plans" element={<PlansPage />} />
87+
<Route path="plans/:planId" element={<PlansPage />} />
9088

9189
<Route path="roles" element={<RolesPage />} />
9290
<Route path="roles/:roleId" element={<RolesPage />} />

‎web/lib/admin/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export { default as InvoicesView } from "./views/invoices";
66
export { ProductsView, ProductPricesView } from "./views/products/exports";
77
export { default as AuditLogsView } from "./views/audit-logs";
88
export { default as AdminsView } from "./views/admins";
9+
export { default as PlansView } from "./views/plans";
910

1011
// utils exports
1112
export {

web/apps/admin/src/containers/billingplans.list/columns.tsx renamed to web/lib/admin/views/plans/columns.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Link } from "react-router-dom";
22
import { type DataTableColumnDef } from "@raystack/apsara";
33
import type { Plan } from "@raystack/proton/frontier";
4-
import { timestampToDate, TimeStamp } from "~/utils/connect-timestamp";
4+
import { timestampToDate, type TimeStamp } from "../../utils/connect-timestamp";
55

66
export const getColumns: () => DataTableColumnDef<
77
Plan,

web/apps/admin/src/containers/billingplans.list/details.tsx renamed to web/lib/admin/views/plans/details.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { Flex, Text, Grid } from "@raystack/apsara";
2-
import { usePlan } from ".";
3-
import { timestampToDate } from "~/utils/connect-timestamp";
2+
import type { Plan } from "@raystack/proton/frontier";
3+
import { timestampToDate } from "../../utils/connect-timestamp";
44

5-
export default function PlanDetails() {
6-
const { plan } = usePlan();
5+
export default function PlanDetails({ plan }: { plan: Plan | null }) {
76

87
return (
98
<Flex direction="column" gap={9}>

web/apps/admin/src/containers/billingplans.list/header.tsx renamed to web/lib/admin/views/plans/header.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { DataTable } from "@raystack/apsara";
2-
import PageHeader from "~/components/page-header";
2+
import { PageHeader } from "../../components/PageHeader";
33
import styles from "./plans.module.css";
44

55
export const PlanHeader = ({ header }: any) => {

web/apps/admin/src/containers/billingplans.list/index.tsx renamed to web/lib/admin/views/plans/index.tsx

Lines changed: 20 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,32 @@
11
import { EmptyState, Flex, DataTable, Sheet } from "@raystack/apsara";
2-
import {
3-
Outlet,
4-
useNavigate,
5-
useOutletContext,
6-
useParams,
7-
} from "react-router-dom";
8-
92
import type { Plan } from "@raystack/proton/frontier";
10-
import { reduceByKey } from "~/utils/helper";
3+
import { reduceByKey } from "../../utils/helper";
114
import { getColumns } from "./columns";
125
import { PlanHeader } from "./header";
136
import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
147
import styles from "./plans.module.css";
15-
import PageTitle from "~/components/page-title";
16-
import { SheetHeader } from "~/components/sheet/header";
8+
import { PageTitle } from "../../components/PageTitle";
9+
import { SheetHeader } from "../../components/SheetHeader";
1710
import { useQuery } from "@connectrpc/connect-query";
1811
import { FrontierServiceQueries } from "@raystack/proton/frontier";
12+
import PlanDetails from "./details";
1913

2014
const pageHeader = {
2115
title: "Plans",
2216
breadcrumb: [],
2317
};
2418

25-
type ContextType = { plan: Plan | null };
26-
export default function PlanList() {
19+
export type PlansViewProps = {
20+
selectedPlanId?: string;
21+
onCloseDetail?: () => void;
22+
appName?: string;
23+
};
24+
25+
export default function PlansView({
26+
selectedPlanId,
27+
onCloseDetail,
28+
appName,
29+
}: PlansViewProps = {}) {
2730
const {
2831
data: plansResponse,
2932
isLoading: isPlansLoading,
@@ -34,19 +37,9 @@ export default function PlanList() {
3437
});
3538

3639
const plans = plansResponse?.plans || [];
37-
38-
let { planId } = useParams();
39-
4040
const planMapById = reduceByKey(plans ?? [], "id");
41-
4241
const columns = getColumns();
4342

44-
const navigate = useNavigate();
45-
46-
function onClose() {
47-
navigate("/plans");
48-
}
49-
5043
if (isError) {
5144
console.error("ConnectRPC Error:", error);
5245
return (
@@ -70,21 +63,19 @@ export default function PlanList() {
7063
defaultSort={{ name: "title", order: "asc" }}
7164
>
7265
<Flex direction="column">
73-
<PageTitle title="Plans" />
66+
<PageTitle title="Plans" appName={appName} />
7467
<PlanHeader header={pageHeader} />
7568
<DataTable.Content
7669
emptyState={noDataChildren}
7770
classNames={{ root: styles.tableRoot, table: styles.table }}
7871
/>
7972
</Flex>
80-
<Sheet open={planId !== undefined}>
73+
<Sheet open={selectedPlanId !== undefined}>
8174
<Sheet.Content className={styles.sheetContent}>
82-
<SheetHeader title="Plan Details" onClick={onClose} />
75+
<SheetHeader title="Plan Details" onClick={onCloseDetail ?? (() => {})} />
8376
<Flex className={styles.sheetContentBody}>
84-
<Outlet
85-
context={{
86-
plan: planId ? planMapById[planId] : null,
87-
}}
77+
<PlanDetails
78+
plan={selectedPlanId ? planMapById[selectedPlanId] ?? null : null}
8879
/>
8980
</Flex>
9081
</Sheet.Content>
@@ -93,10 +84,6 @@ export default function PlanList() {
9384
);
9485
}
9586

96-
export function usePlan() {
97-
return useOutletContext<ContextType>();
98-
}
99-
10087
export const noDataChildren = (
10188
<EmptyState icon={<ExclamationTriangleIcon />} heading="0 plan created" />
10289
);

web/apps/admin/src/containers/billingplans.list/plans.module.css renamed to web/lib/admin/views/plans/plans.module.css

File renamed without changes.

0 commit comments

Comments
 (0)