From e8b9b292708134b4de713e1fe60075782260df96 Mon Sep 17 00:00:00 2001 From: eman-bfloat Date: Thu, 26 Sep 2024 03:58:18 +0300 Subject: [PATCH] feat: add billing and account pages --- apps/client/src/Layout/layout.tsx | 7 +- apps/client/src/pages/account/index.tsx | 131 ------------------ apps/client/src/pages/billing/index.tsx | 102 ++++++++++++++ packages/features/auth/lib/accessRules.ts | 2 +- .../features/auth/lib/handleDecryptToken.ts | 1 + 5 files changed, 110 insertions(+), 133 deletions(-) create mode 100644 apps/client/src/pages/billing/index.tsx diff --git a/apps/client/src/Layout/layout.tsx b/apps/client/src/Layout/layout.tsx index 83e6016b..7a1499c2 100644 --- a/apps/client/src/Layout/layout.tsx +++ b/apps/client/src/Layout/layout.tsx @@ -10,7 +10,7 @@ import { HiOutlineBriefcase, HiOutlineUserCircle, HiOutlineTruck, - HiOutlineBuildingOffice, + HiOutlineCreditCard, } from "react-icons/hi2"; const links = [ @@ -29,6 +29,11 @@ const links = [ href: "/account", icon: HiOutlineUserCircle, }, + { + name: "Billing", + href: "/billing", + icon: HiOutlineCreditCard, + } ]; export default function Layout({ children, ...props }: LayoutProps) { diff --git a/apps/client/src/pages/account/index.tsx b/apps/client/src/pages/account/index.tsx index f4384f68..b070f606 100644 --- a/apps/client/src/pages/account/index.tsx +++ b/apps/client/src/pages/account/index.tsx @@ -35,7 +35,6 @@ export default function Account() { // @ts-ignore business && } -
@@ -46,136 +45,6 @@ export default function Account() { ); } -const MomoAccountDetails = () => { - return ( - -

Momo Account Details

- - - - ); -}; - -const MomoUserInfo = () => { - // const { data, loading, refetch } = useGetMomoAccountInfo(); - // const [isRefetching, setIsRefetching] = useState(false); - - // const handleRefetch = async () => { - // if (!isRefetching) { - // setIsRefetching(true); - // await refetch().then(() => setIsRefetching(false)); - // } - // }; - return ( - -
-
-

Given Name

- {/* {loading ? ( -
- ) : ( -

{data?.given_name}

- )} */} -
-
-

Family Name

- {/* {loading ? ( -
- ) : ( -

{data?.family_name}

- )} */} -
-
-

Gender

- {/* {loading ? ( -
- ) : ( -

{data?.gender}

- )} */} -
-
-

Status

- {/* {loading ? ( -
- ) : ( -

{data?.status || "Active"}

- )} */} -
-
- {/* {data === null && ( -
-

- {isRefetching - ? "Refetching account info..." - : "Couldn't fetch account info."} -

- -
- )} */} - - ); -}; - -const MomoAccountBalance = () => { - // const { data, loading, refetch } = useGetAccountBalance(); - const [isRefetching, setIsRefetching] = useState(false); - - // const handleRefetch = async () => { - // if (!isRefetching) { - // setIsRefetching(true); - // await refetch().then(() => setIsRefetching(false)); - // } - // }; - - return ( - -

Hello

- {/*
-
-

Currency

- {loading ? ( -
- ) : ( -

{data?.currency}

- )} -
-
-

Balance

- {loading ? ( -
- ) : ( -

{data?.availableBalance}

- )} -
-
- {data === null && ( -
-

- {isRefetching - ? "Refetching balance..." - : "Couldn't fetch account balance."} -

- -
- )} */} - - ); -}; - const TransactionsHistory = () => { const transactions = [ { diff --git a/apps/client/src/pages/billing/index.tsx b/apps/client/src/pages/billing/index.tsx new file mode 100644 index 00000000..4ecf82af --- /dev/null +++ b/apps/client/src/pages/billing/index.tsx @@ -0,0 +1,102 @@ +import { HiOutlineCurrencyDollar, HiOutlineCreditCard, HiOutlineDocumentText, HiPlus } from "react-icons/hi2"; +import { Card } from "ui"; +import { useState } from "react"; + +const PaymentMethodCard = ({ method, isPreferred, onEdit, onSetPreferred }) => ( + +
+
+ {method.type} ending in {method.last4} + {isPreferred && Preferred} +
+
+ + {!isPreferred && ( + + )} +
+
+ +); + +export default function Billing() { + const [paymentMethods, setPaymentMethods] = useState([ + { id: 1, type: 'Visa', last4: '1234' }, + { id: 2, type: 'Mastercard', last4: '5678' }, + ]); + const [preferredMethodId, setPreferredMethodId] = useState(1); + + const handleAddPaymentMethod = () => { + // Implement add payment method logic + }; + + const handleEditPaymentMethod = (id) => { + // Implement edit payment method logic + }; + + const handleSetPreferred = (id) => { + setPreferredMethodId(id); + }; + + return ( +
+

Billing

+
+
+

+ Payment Methods +

+ {paymentMethods.map((method) => ( + handleEditPaymentMethod(method.id)} + onSetPreferred={() => handleSetPreferred(method.id)} + /> + ))} + +
+
+
+
+

+ Summary +

+
+
+ Total Earned + $1,234.56 +
+
+ Total Spent + $567.89 +
+
+
+
+

+ Recent Transactions +

+
    +
  • + Product Sale + +$50.00 +
    • +
  • + Platform Fee + -$5.00 +
    • +
+
+
+
+
+
+ ); +} diff --git a/packages/features/auth/lib/accessRules.ts b/packages/features/auth/lib/accessRules.ts index 9cf22039..3aa54068 100644 --- a/packages/features/auth/lib/accessRules.ts +++ b/packages/features/auth/lib/accessRules.ts @@ -11,7 +11,7 @@ export const AGENT_ACCESS_RULES = [ ]; export const CLIENT_ACCESS_RULES = [ - { path: "/", roles: ["supplier", "business"] }, + { path: "/", roles: ["supplier", "business", "admin"] }, // Add more rules as needed for client ]; diff --git a/packages/features/auth/lib/handleDecryptToken.ts b/packages/features/auth/lib/handleDecryptToken.ts index 8a19c94c..f07ec02e 100644 --- a/packages/features/auth/lib/handleDecryptToken.ts +++ b/packages/features/auth/lib/handleDecryptToken.ts @@ -6,6 +6,7 @@ export function handleDecryptToken( return async function handler(req: NextApiRequest, res: NextApiResponse) { try { const payload = await getIdTokenClaims(req); + console.log("payload", payload); if (!payload) { res.status(401).json({ message: "Unauthorized" }); return;