awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-15 14:27:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix lint errors for revamped billing and usage page

Browse Source
This commit is contained in:
Tuan Dang
2023-06-27 15:39:36 +07:00
parent a127d452bd
commit 924a969307
29 changed files with 989 additions and 1080 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/hooks/api/organization/index.ts
+11 -13
View File
@@ -1,18 +1,16 @@
export {
useGetOrgPlanBillingInfo,
useGetOrgPlanTable,
useGetOrgPlansTable,
useGetOrganization,
useRenameOrg,
useGetOrgBillingDetails,
useUpdateOrgBillingDetails,
useGetOrgPmtMethods,
useAddOrgPmtMethod,
useDeleteOrgPmtMethod,
useGetOrgTaxIds,
useAddOrgTaxId,
useCreateCustomerPortalSession,
useDeleteOrgPmtMethod,
useDeleteOrgTaxId,
useGetOrganization,
useGetOrgBillingDetails,
useGetOrgInvoices,
useUpdateOrgPlan,
useCreateProductCheckoutSession
} from "./queries";
useGetOrgPlanBillingInfo,
useGetOrgPlansTable,
useGetOrgPlanTable,
useGetOrgPmtMethods,
useGetOrgTaxIds,
useRenameOrg,
useUpdateOrgBillingDetails} from "./queries";
frontend/src/hooks/api/organization/queries.tsx
+88 -105
View File
@@ -1,6 +1,17 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { apiRequest } from "@app/config/request";
import { Organization, RenameOrgDTO, BillingDetails } from "./types";
import {
BillingDetails,
Invoice,
Organization,
OrgPlanTable,
PlanBillingInfo,
PmtMethod,
ProductsTable,
RenameOrgDTO,
TaxID} from "./types";
const organizationKeys = {
getUserOrganization: ["organization"] as const,
@@ -13,50 +24,17 @@ const organizationKeys = {
getOrgInvoices: (orgId: string) => [{ orgId }, "organization-invoices"] as const
};
const fetchUserOrganization = async () => {
const { data } = await apiRequest.get<{ organizations: Organization[] }>("/api/v1/organization");
export const useGetOrganization = () => {
return useQuery({
queryKey: organizationKeys.getUserOrganization,
queryFn: async () => {
const { data } = await apiRequest.get<{ organizations: Organization[] }>("/api/v1/organization");
return data.organizations;
};
// TODO: fix the type situation here and move fetches directly into hooks
const fetchOrgBillingDetails = async (organizationId: string) => {
const { data } = await apiRequest.get<BillingDetails>(
`/api/v1/organizations/${organizationId}/billing-details`
);
return data;
return data.organizations;
}
});
}
const fetchOrgPmtMethods = async (organizationId: string) => {
const { data } = await apiRequest.get<BillingDetails>(
`/api/v1/organizations/${organizationId}/billing-details/payment-methods`
);
return data;
}
const fetchOrgTaxIds = async (organizationId: string) => {
const { data } = await apiRequest.get<BillingDetails>(
`/api/v1/organizations/${organizationId}/billing-details/tax-ids`
);
return data;
}
const fetchOrgInvoices = async (organizationId: string) => {
const { data: { invoices } } = await apiRequest.get<BillingDetails>(
`/api/v1/organizations/${organizationId}/invoices`
);
return invoices;
}
export const useGetOrganization = () =>
useQuery({ queryKey: organizationKeys.getUserOrganization, queryFn: fetchUserOrganization });
// mutation
export const useRenameOrg = () => {
const queryClient = useQueryClient();
@@ -73,7 +51,7 @@ export const useGetOrgPlanBillingInfo = (organizationId: string) => {
return useQuery({
queryKey: organizationKeys.getOrgPlanBillingInfo(organizationId),
queryFn: async () => {
const { data } = await apiRequest.get<BillingDetails>(
const { data } = await apiRequest.get<PlanBillingInfo>(
`/api/v1/organizations/${organizationId}/plan/billing`
);
@@ -87,7 +65,7 @@ export const useGetOrgPlanTable = (organizationId: string) => {
return useQuery({
queryKey: organizationKeys.getOrgPlanTable(organizationId),
queryFn: async () => {
const { data } = await apiRequest.get<BillingDetails>(
const { data } = await apiRequest.get<OrgPlanTable>(
`/api/v1/organizations/${organizationId}/plan/table`
);
@@ -102,12 +80,12 @@ export const useGetOrgPlansTable = ({
billingCycle
}: {
organizationId: string;
billingCycle: "monthly" | "annual"
billingCycle: "monthly" | "yearly"
}) => {
return useQuery({
queryKey: organizationKeys.getOrgPlansTable(organizationId, billingCycle),
queryFn: async () => {
const { data } = await apiRequest.get<BillingDetails>(
const { data } = await apiRequest.get<ProductsTable>(
`/api/v1/organizations/${organizationId}/plans/table?billingCycle=${billingCycle}`
);
@@ -120,7 +98,13 @@ export const useGetOrgPlansTable = ({
export const useGetOrgBillingDetails = (organizationId: string) => {
return useQuery({
queryKey: organizationKeys.getOrgBillingDetails(organizationId),
queryFn: () => fetchOrgBillingDetails(organizationId),
queryFn: async () => {
const { data } = await apiRequest.get<BillingDetails>(
`/api/v1/organizations/${organizationId}/billing-details`
);
return data;
},
enabled: true
});
}
@@ -137,10 +121,14 @@ export const useUpdateOrgBillingDetails = () => {
name?: string;
email?: string;
}) => {
const { data } = await apiRequest.patch(`/api/v1/organizations/${organizationId}/billing-details`, {
name,
email
});
const { data } = await apiRequest.patch(
`/api/v1/organizations/${organizationId}/billing-details`,
{
name,
email
}
);
return data;
},
onSuccess(_, dto) {
@@ -152,7 +140,13 @@ export const useUpdateOrgBillingDetails = () => {
export const useGetOrgPmtMethods = (organizationId: string) => {
return useQuery({
queryKey: organizationKeys.getOrgPmtMethods(organizationId),
queryFn: () => fetchOrgPmtMethods(organizationId),
queryFn: async () => {
const { data } = await apiRequest.get<PmtMethod[]>(
`/api/v1/organizations/${organizationId}/billing-details/payment-methods`
);
return data;
},
enabled: true
});
}
@@ -170,10 +164,14 @@ export const useAddOrgPmtMethod = () => {
success_url: string;
cancel_url: string;
}) => {
const { data: { url } } = await apiRequest.post(`/api/v1/organizations/${organizationId}/billing-details/payment-methods`, {
success_url,
cancel_url
});
const { data: { url } } = await apiRequest.post(
`/api/v1/organizations/${organizationId}/billing-details/payment-methods`,
{
success_url,
cancel_url
}
);
return url;
},
onSuccess(_, dto) {
@@ -193,7 +191,10 @@ export const useDeleteOrgPmtMethod = () => {
organizationId: string;
pmtMethodId: string;
}) => {
const { data } = await apiRequest.delete(`/api/v1/organizations/${organizationId}/billing-details/payment-methods/${pmtMethodId}`);
const { data } = await apiRequest.delete(
`/api/v1/organizations/${organizationId}/billing-details/payment-methods/${pmtMethodId}`
);
return data;
},
onSuccess(_, dto) {
@@ -205,7 +206,13 @@ export const useDeleteOrgPmtMethod = () => {
export const useGetOrgTaxIds = (organizationId: string) => {
return useQuery({
queryKey: organizationKeys.getOrgTaxIds(organizationId),
queryFn: () => fetchOrgTaxIds(organizationId),
queryFn: async () => {
const { data } = await apiRequest.get<TaxID[]>(
`/api/v1/organizations/${organizationId}/billing-details/tax-ids`
);
return data;
},
enabled: true
});
}
@@ -223,10 +230,13 @@ export const useAddOrgTaxId = () => {
type: string;
value: string;
}) => {
const { data } = await apiRequest.post(`/api/v1/organizations/${organizationId}/billing-details/tax-ids`, {
type,
value
});
const { data } = await apiRequest.post(
`/api/v1/organizations/${organizationId}/billing-details/tax-ids`,
{
type,
value
}
);
return data;
},
@@ -247,7 +257,10 @@ export const useDeleteOrgTaxId = () => {
organizationId: string;
taxId: string;
}) => {
const { data } = await apiRequest.delete(`/api/v1/organizations/${organizationId}/billing-details/tax-ids/${taxId}`);
const { data } = await apiRequest.delete(
`/api/v1/organizations/${organizationId}/billing-details/tax-ids/${taxId}`
);
return data;
},
onSuccess(_, dto) {
@@ -259,54 +272,24 @@ export const useDeleteOrgTaxId = () => {
export const useGetOrgInvoices = (organizationId: string) => {
return useQuery({
queryKey: organizationKeys.getOrgInvoices(organizationId),
queryFn: () => fetchOrgInvoices(organizationId),
queryFn: async () => {
const { data } = await apiRequest.get<Invoice[]>(
`/api/v1/organizations/${organizationId}/invoices`
);
return data;
},
enabled: true
});
}
export const useUpdateOrgPlan = () => {
const queryClient = useQueryClient();
export const useCreateCustomerPortalSession = () => {
return useMutation({
mutationFn: async ({
organizationId,
productId
}: {
organizationId: string;
productId: string;
}) => {
const { data } = await apiRequest.patch(`/api/v1/organizations/${organizationId}/plan`, {
productId
});
mutationFn: async (organizationId: string) => {
const { data } = await apiRequest.post(
`/api/v1/organization/${organizationId}/customer-portal-session`
);
return data;
},
onSuccess(_, dto) {
queryClient.invalidateQueries([
organizationKeys.getOrgPlanTable(dto.organizationId),
]);
}
});
};
export const useCreateProductCheckoutSession = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({
organizationId,
productId,
success_url
}: {
organizationId: string;
productId: string;
success_url: string;
}) => {
const { data } = await apiRequest.post(`/api/v1/organizations/${organizationId}/billing-details/session`, {
productId,
success_url
});
return data;
},
onSuccess(_, dto) {
console.log('onSuccess');
}
});
};
frontend/src/hooks/api/organization/types.ts
+71
View File
@@ -13,4 +13,75 @@ export type RenameOrgDTO = {
export type BillingDetails = {
name: string;
email: string;
}
export type PlanBillingInfo = {
amount: number;
currentPeriodEnd: number;
currentPeriodStart: number;
interval: "month" | "year";
intervalCount: number;
quantity: number;
}
export type Invoice = {
_id: string;
created: number;
invoice_pdf: string;
number: string;
paid: boolean;
total: number;
}
export type PmtMethod = {
_id: string;
brand: string;
exp_month: number;
exp_year: number;
funding: string;
last4: string;
}
export type TaxID = {
_id: string;
country: string;
type: string;
value: string;
}
export type OrgPlanTableHead = {
name: string;
}
export type OrgPlanTableRow = {
name: string;
allowed: number | boolean | null;
used: string;
}
export type OrgPlanTable = {
head: OrgPlanTableHead[];
rows: OrgPlanTableRow[];
}
export type ProductsTableHead = {
name: string;
price: number | null;
priceLine: string;
productId: string;
slug: string;
tier: number;
}
export type ProductsTableRow = {
name: string;
starter: number | boolean | null;
team: number | boolean | null;
pro: number | boolean | null;
enterprise: number | boolean | null;
}
export type ProductsTable = {
head: ProductsTableHead[];
rows: ProductsTableRow[];
}
frontend/src/hooks/usePopUp.tsx
+2 -2
View File
@@ -10,14 +10,14 @@ interface UsePopUpProps {
* checks which type of inputProps were given and converts them into key-names
* SIDENOTE: On inputting give it as const and not string with (as const)
*/
type UsePopUpState<T extends Readonly<string[]> | UsePopUpProps[]> = {
export type UsePopUpState<T extends Readonly<string[]> | UsePopUpProps[]> = {
[P in T extends UsePopUpProps[] ? T[number]["name"] : T[number]]: {
isOpen: boolean;
data?: unknown;
};
};
interface UsePopUpReturn<T extends Readonly<string[]> | UsePopUpProps[]> {
export interface UsePopUpReturn<T extends Readonly<string[]> | UsePopUpProps[]> {
popUp: UsePopUpState<T>;
handlePopUpOpen: (popUpName: keyof UsePopUpState<T>, data?: unknown) => void;
handlePopUpClose: (popUpName: keyof UsePopUpState<T>) => void;