awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +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

47
backend/src/ee/controllers/v1/organizationsController.ts
View File

@@ -3,25 +3,6 @@ import { getLicenseServerUrl } from "../../../config";
import { licenseServerKeyRequest } from "../../../config/request";
import { EELicenseService } from "../../services";
export const createProductCheckoutSession = async (req: Request, res: Response) => {
const {
productId,
success_url
} = req.body;
console.log('createProductCheckoutSession req.body: ', req.body);
const { data } = await licenseServerKeyRequest.post(
`${await getLicenseServerUrl()}/api/license-server/v1/customers/${req.organization.customerId}/billing-details/session`,
{
productId,
success_url
}
);
console.log('createProductCheckoutSession data: ', data);
return res.status(200).send(data);
}
export const getOrganizationPlansTable = async (req: Request, res: Response) => {
const billingCycle = req.query.billingCycle as string;
@@ -74,30 +55,6 @@ export const getOrganizationPlanTable = async (req: Request, res: Response) => {
return res.status(200).send(data);
}
/**
* Update the organization plan to product with id [productId]
* @param req
* @param res
* @returns
*/
export const updateOrganizationPlan = async (req: Request, res: Response) => {
const {
productId,
} = req.body;
console.log('backend update productId: ', productId);
const { data } = await licenseServerKeyRequest.patch(
`${await getLicenseServerUrl()}/api/license-server/v1/customers/${req.organization.customerId}/cloud-plan`,
{
productId,
}
);
console.log(' ttproductId: ', data);
return res.status(200).send(data);
}
export const getOrganizationBillingDetails = async (req: Request, res: Response) => {
const { data } = await licenseServerKeyRequest.get(
`${await getLicenseServerUrl()}/api/license-server/v1/customers/${req.organization.customerId}/billing-details`
@@ -208,9 +165,9 @@ export const deleteOrganizationTaxId = async (req: Request, res: Response) => {
}
export const getOrganizationInvoices = async (req: Request, res: Response) => {
const { data } = await licenseServerKeyRequest.get(
const { data: { invoices } } = await licenseServerKeyRequest.get(
`${await getLicenseServerUrl()}/api/license-server/v1/customers/${req.organization.customerId}/invoices`
);
return res.status(200).send(data);
return res.status(200).send(invoices);
}

57
backend/src/ee/routes/v1/organizations.ts
View File

@@ -11,26 +11,10 @@ import {
ACCEPTED, ADMIN, MEMBER, OWNER,
} from "../../../variables";
router.post(
"/:organizationId/billing-details/session",
requireAuth({
acceptedAuthModes: ["jwt", "apiKey"],
}),
requireOrganizationAuth({
acceptedRoles: [OWNER, ADMIN, MEMBER],
acceptedStatuses: [ACCEPTED],
}),
param("organizationId").exists().trim(),
body("productId").exists().trim(),
body("success_url").exists().trim(),
validateRequest,
organizationsController.createProductCheckoutSession
);
router.get(
"/:organizationId/plans/table",
requireAuth({
acceptedAuthModes: ["jwt", "apiKey"],
acceptedAuthModes: ["jwt"],
}),
requireOrganizationAuth({
acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -45,7 +29,7 @@ router.get(
router.get(
"/:organizationId/plan",
requireAuth({
acceptedAuthModes: ["jwt", "apiKey"],
acceptedAuthModes: ["jwt"],
}),
requireOrganizationAuth({
acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -60,7 +44,7 @@ router.get(
router.get(
"/:organizationId/plan/billing",
requireAuth({
acceptedAuthModes: ["jwt", "apiKey"],
acceptedAuthModes: ["jwt"],
}),
requireOrganizationAuth({
acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -75,7 +59,7 @@ router.get(
router.get(
"/:organizationId/plan/table",
requireAuth({
acceptedAuthModes: ["jwt", "apiKey"],
acceptedAuthModes: ["jwt"],
}),
requireOrganizationAuth({
acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -87,25 +71,10 @@ router.get(
organizationsController.getOrganizationPlanTable
);
router.patch(
"/:organizationId/plan",
requireAuth({
acceptedAuthModes: ["jwt", "apiKey"],
}),
requireOrganizationAuth({
acceptedRoles: [OWNER, ADMIN, MEMBER],
acceptedStatuses: [ACCEPTED],
}),
param("organizationId").exists().trim(),
body("productId").exists().isString(),
validateRequest,
organizationsController.updateOrganizationPlan
);
router.get(
"/:organizationId/billing-details",
requireAuth({
acceptedAuthModes: ["jwt", "apiKey"],
acceptedAuthModes: ["jwt"],
}),
requireOrganizationAuth({
acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -119,7 +88,7 @@ router.get(
router.patch(
"/:organizationId/billing-details",
requireAuth({
acceptedAuthModes: ["jwt", "apiKey"],
acceptedAuthModes: ["jwt"],
}),
requireOrganizationAuth({
acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -135,7 +104,7 @@ router.patch(
router.get(
"/:organizationId/billing-details/payment-methods",
requireAuth({
acceptedAuthModes: ["jwt", "apiKey"],
acceptedAuthModes: ["jwt"],
}),
requireOrganizationAuth({
acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -149,7 +118,7 @@ router.get(
router.post(
"/:organizationId/billing-details/payment-methods",
requireAuth({
acceptedAuthModes: ["jwt", "apiKey"],
acceptedAuthModes: ["jwt"],
}),
requireOrganizationAuth({
acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -165,7 +134,7 @@ router.post(
router.delete(
"/:organizationId/billing-details/payment-methods/:pmtMethodId",
requireAuth({
acceptedAuthModes: ["jwt", "apiKey"],
acceptedAuthModes: ["jwt"],
}),
requireOrganizationAuth({
acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -180,7 +149,7 @@ router.delete(
router.get(
"/:organizationId/billing-details/tax-ids",
requireAuth({
acceptedAuthModes: ["jwt", "apiKey"],
acceptedAuthModes: ["jwt"],
}),
requireOrganizationAuth({
acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -194,7 +163,7 @@ router.get(
router.post(
"/:organizationId/billing-details/tax-ids",
requireAuth({
acceptedAuthModes: ["jwt", "apiKey"],
acceptedAuthModes: ["jwt"],
}),
requireOrganizationAuth({
acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -210,7 +179,7 @@ router.post(
router.delete(
"/:organizationId/billing-details/tax-ids/:taxId",
requireAuth({
acceptedAuthModes: ["jwt", "apiKey"],
acceptedAuthModes: ["jwt"],
}),
requireOrganizationAuth({
acceptedRoles: [OWNER, ADMIN, MEMBER],
@@ -225,7 +194,7 @@ router.delete(
router.get(
"/:organizationId/invoices",
requireAuth({
acceptedAuthModes: ["jwt", "apiKey"],
acceptedAuthModes: ["jwt"],
}),
requireOrganizationAuth({
acceptedRoles: [OWNER, ADMIN, MEMBER],

2
frontend/src/components/login/InitialLoginStep.tsx
View File

@@ -97,7 +97,7 @@ export default function InitialLoginStep({
setIsLoading(false);
}
return <div className='flex flex-col mx-auto w-full justify-center items-center'>
<h1 className='text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8' >Login to Infisical</h1>
{/* <div className='lg:w-1/6 w-1/4 min-w-[20rem] rounded-md'>

24
frontend/src/hooks/api/organization/index.ts
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";

193
frontend/src/hooks/api/organization/queries.tsx
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');
}
});
};

71
frontend/src/hooks/api/organization/types.ts
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[];
}

4
frontend/src/hooks/usePopUp.tsx
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;

91
frontend/src/pages/settings/billing/[id].tsx
View File

@@ -1,57 +1,11 @@
import { useTranslation } from "react-i18next";
import Head from "next/head";
import { useSubscription } from "@app/context";
import { BillingSettingsPage } from "@app/views/Settings/BillingSettingsPage";
export default function SettingsBilling() {
const { subscription } = useSubscription();
const { t } = useTranslation();
const plans = [
{
key: 1,
name: t("billing.starter.name")!,
price: t("billing.free")!,
priceExplanation: t("billing.starter.price-explanation")!,
text: t("billing.starter.text")!,
subtext: t("billing.starter.subtext")!,
buttonTextMain: t("billing.downgrade")!,
buttonTextSecondary: t("billing.learn-more")!,
current: subscription?.slug === "starter"
},
{
key: 2,
name: "Team",
price: "$8",
priceExplanation: t("billing.professional.price-explanation")!,
text: "Unlimited members, up to 10 projects. Additional developer experience features.",
buttonTextMain: t("billing.upgrade")!,
buttonTextSecondary: t("billing.learn-more")!,
current: subscription?.slug === "team" || subscription?.slug === "team-annual"
},
{
key: 3,
name: t("billing.professional.name")!,
price: "$18",
priceExplanation: t("billing.professional.price-explanation")!,
text: t("billing.enterprise.text")!,
subtext: t("billing.professional.subtext")!,
buttonTextMain: t("billing.upgrade")!,
buttonTextSecondary: t("billing.learn-more")!,
current: subscription?.slug === "pro" || subscription?.slug === "pro-annual"
},
{
key: 4,
name: t("billing.enterprise.name")!,
price: t("billing.custom-pricing")!,
text: "Boost the security and efficiency of your engineering teams.",
buttonTextMain: t("billing.schedule-demo")!,
buttonTextSecondary: t("billing.learn-more")!,
current: subscription?.slug === "enterprise"
}
];
return (
<div className="h-full bg-bunker-800">
<Head>
@@ -63,45 +17,4 @@ export default function SettingsBilling() {
);
}
SettingsBilling.requireAuth = true;
// return (
// <div className="h-full bg-bunker-800">
// <Head>
// <title>{t("common.head-title", { title: t("billing.title") })}</title>
// <link rel="icon" href="/infisical.ico" />
// </Head>
// <div className="h-full bg-red">
// <NavHeader pageName={t("billing.title")} />
// <div className="my-8 ml-6 flex max-w-5xl flex-row items-center justify-between text-xl">
// <div className="flex flex-col items-start justify-start text-3xl">
// <p className="mr-4 font-semibold text-gray-200">{t("billing.title")}</p>
// <p className="mr-4 text-base font-normal text-gray-400">{t("billing.description")}</p>
// </div>
// </div>
// <div className="ml-6 flex w-max flex-col text-mineshaft-50">
// <p className="text-xl font-semibold">{t("billing.subscription")}</p>
// <div className="mt-4 grid grid-cols-2 grid-rows-2 gap-y-6 gap-x-3 overflow-x-auto">
// {plans.map((plan) => (
// <Plan key={plan.name} plan={plan} />
// ))}
// </div>
// {/* <p className="mt-12 text-xl font-bold">{t("billing.current-usage")}</p>
// <div className="flex flex-row">
// <div className="mr-4 mt-8 flex w-60 flex-col items-center justify-center rounded-md bg-white/5 pt-6 pb-10 text-gray-300">
// <p className="text-6xl font-bold">{numUsers}</p>
// <p className="text-gray-300">
// Organization members
// </p>
// </div>
// <div className="mr-4 mt-8 text-gray-300 w-60 pt-6 pb-10 rounded-md bg-white/5 flex justify-center items-center flex flex-col">
// <p className="text-6xl font-bold">1 </p>
// <p className="text-gray-300">Organization projects</p>
// </div>
// </div> */}
// </div>
// </div>
// </div>
// );
SettingsBilling.requireAuth = true;

106
frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx
View File

@@ -1,30 +1,9 @@
import { useTranslation } from "react-i18next";
import Head from "next/head";
import Plan from "@app/components/billing/Plan";
import NavHeader from "@app/components/navigation/NavHeader";
import { useSubscription } from "@app/context";
import {
Input,
Button,
Table,
TableContainer,
TableSkeleton,
TBody,
Td,
Th,
THead,
Tr
} from "@app/components/v2";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus, faMagnifyingGlass, faDownload } from "@fortawesome/free-solid-svg-icons";
import { Tab } from '@headlessui/react'
import { Fragment } from 'react'
import {
BillingCloudTab,
BillingReceiptsTab,
BillingDetailsTab
BillingTabGroup
} from "./components";
export const BillingSettingsPage = () => {
@@ -36,85 +15,10 @@ export const BillingSettingsPage = () => {
<div className="flex text-3xl mt-8 items-start max-w-screen-lg">
<div className="flex-1">
<p className="font-semibold text-gray-200">{t("billing.title")}</p>
{/* <p className="text-base font-normal text-gray-400">
Manage usage and billing for Infisical Cloud and Self-hosted instances here
</p> */}
</div>
<div>
</div>
<div />
</div>
<Tab.Group>
<Tab.List className="mt-8 border-b-2 border-mineshaft-800 max-w-screen-lg">
<Tab as={Fragment}>
{({ selected }) => (
/* Use the `selected` state to conditionally style the selected tab. */
<button className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}>
Infisical Cloud
</button>
)}
</Tab>
{/* <Tab as={Fragment}>
{({ selected }) => (
<button className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}>
Self-hosted
</button>
)}
</Tab> */}
<Tab as={Fragment}>
{({ selected }) => (
/* Use the `selected` state to conditionally style the selected tab. */
<button className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}>
Receipts
</button>
)}
</Tab>
<Tab as={Fragment}>
{({ selected }) => (
/* Use the `selected` state to conditionally style the selected tab. */
<button className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}>
Billing details
</button>
)}
</Tab>
</Tab.List>
<Tab.Panels>
<Tab.Panel>
<BillingCloudTab />
</Tab.Panel>
{/* <Tab.Panel>Content 2</Tab.Panel> */}
<Tab.Panel>
<BillingReceiptsTab />
</Tab.Panel>
<Tab.Panel>
<BillingDetailsTab />
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
{/* <div className="flex w-max flex-col text-mineshaft-50 mt-8">
<p className="text-xl font-semibold">{t("billing.subscription")}</p>
<div className="mt-4 grid grid-cols-2 grid-rows-2 gap-y-6 gap-x-3 overflow-x-auto">
{plans.map((plan) => (
<Plan key={plan.name} plan={plan} />
))}
</div>
<p className="mt-12 text-xl font-bold">{t("billing.current-usage")}</p>
<div className="flex flex-row">
<div className="mr-4 mt-8 flex w-60 flex-col items-center justify-center rounded-md bg-white/5 pt-6 pb-10 text-gray-300">
<p className="text-6xl font-bold">{numUsers}</p>
<p className="text-gray-300">
Organization members
</p>
</div>
<div className="mr-4 mt-8 text-gray-300 w-60 pt-6 pb-10 rounded-md bg-white/5 flex justify-center items-center flex flex-col">
<p className="text-6xl font-bold">1 </p>
<p className="text-gray-300">Organization projects</p>
</div>
</div>
</div> */}
<BillingTabGroup />
</div>
);
};

24
frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/BillingCloudTab.tsx
View File

@@ -1,27 +1,5 @@
import { useTranslation } from "react-i18next";
import Head from "next/head";
import Plan from "@app/components/billing/Plan";
import NavHeader from "@app/components/navigation/NavHeader";
import {
Input,
Button,
Table,
TableContainer,
TableSkeleton,
TBody,
Td,
Th,
THead,
Tr
} from "@app/components/v2";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus, faMagnifyingGlass, faDownload } from "@fortawesome/free-solid-svg-icons";
import { PreviewSection } from "./PreviewSection";
import { CurrentPlanSection } from "./CurrentPlanSection";
// TODO: optimize + modularize
// TODO: get cloud plan full
import { PreviewSection } from "./PreviewSection";
export const BillingCloudTab = () => {
return (

29
frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/CurrentPlanSection.tsx
View File

@@ -1,7 +1,8 @@
import { faCircleCheck, faCircleXmark,faFileInvoice } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
Input,
IconButton,
Button,
EmptyState,
Table,
TableContainer,
TableSkeleton,
@@ -9,24 +10,20 @@ import {
Td,
Th,
THead,
Tr,
EmptyState
} from "@app/components/v2";
Tr} from "@app/components/v2";
import { useOrganization } from "@app/context";
import {
useGetOrgPlanTable
} from "@app/hooks/api";
import { useOrganization } from "@app/context";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFileInvoice, faCircleCheck, faCircleXmark } from "@fortawesome/free-solid-svg-icons";
export const CurrentPlanSection = () => {
const { currentOrg } = useOrganization();
const { data, isLoading } = useGetOrgPlanTable(currentOrg?._id ?? '');
const { data, isLoading } = useGetOrgPlanTable(currentOrg?._id ?? "");
const displayCell = (value: null | number | string | boolean) => {
if (value === null) return '-';
if (value === null) return "-";
if (typeof value === 'boolean') {
if (typeof value === "boolean") {
if (value) return (
<FontAwesomeIcon
icon={faCircleCheck}
@@ -58,14 +55,10 @@ export const CurrentPlanSection = () => {
</Tr>
</THead>
<TBody>
{!isLoading && data?.rows?.length > 0 && data.rows.map(({
{!isLoading && data && data?.rows?.length > 0 && data.rows.map(({
name,
allowed,
used
}: {
name: string;
allowed: number | boolean;
used: string;
}) => {
return (
<Tr key={`current-plan-row-${name}`} className="h-12">
@@ -76,7 +69,7 @@ export const CurrentPlanSection = () => {
);
})}
{isLoading && <TableSkeleton columns={5} key="invoices" />}
{!isLoading && data?.length === 0 && (
{!isLoading && data && data?.rows?.length === 0 && (
<Tr>
<Td colSpan={3}>
<EmptyState

60
frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansModal.tsx
View File

@@ -1,45 +1,25 @@
import { useSubscription } from "@app/context";
import { useOrganization } from "@app/context";
import { Tab } from '@headlessui/react'
import { Fragment } from 'react'
import { Fragment } from "react"
import { Tab } from "@headlessui/react"
import {
useGetOrgPlanBillingInfo,
useGetOrgPlanTable,
useGetOrgPlansTable
} from "@app/hooks/api";
import {
FormControl,
Button,
IconButton,
Input,
Select,
SelectItem,
Table,
TableContainer,
TableSkeleton,
TBody,
Td,
Th,
THead,
Tr,
EmptyState,
Modal,
ModalContent
Modal,
ModalContent
} from "@app/components/v2";
import { usePopUp } from "@app/hooks/usePopUp";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFileInvoice, faCircleCheck, faCircleXmark, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
import { UsePopUpState } from "@app/hooks/usePopUp";
import { ManagePlansTable } from "./ManagePlansTable";
type Props = {
popUp: UsePopUpState<["managePlan"]>;
handlePopUpToggle: (popUpName: keyof UsePopUpState<["managePlan"]>, state?: boolean) => void;
};
export const ManagePlansModal = ({
popUp,
handlePopUpToggle
}) => {
const { subscription, isLoading: isSubscriptionLoading } = useSubscription();
handlePopUpToggle
}: Props) => {
return (
<Modal
<Modal
isOpen={popUp?.managePlan?.isOpen}
onOpenChange={(isOpen) => {
handlePopUpToggle("managePlan", isOpen);
@@ -50,14 +30,20 @@ export const ManagePlansModal = ({
<Tab.List className="border-b-2 border-mineshaft-600 max-w-screen-lg">
<Tab as={Fragment}>
{({ selected }) => (
<button className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}>
<button
type="button"
className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}
>
Bill monthly
</button>
)}
</Tab>
<Tab as={Fragment}>
{({ selected }) => (
<button className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}>
<button
type="button"
className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}
>
Bill yearly
</button>
)}
@@ -75,4 +61,4 @@ export const ManagePlansModal = ({
</ModalContent>
</Modal>
);
}
}

133
frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansTable.tsx
View File

@@ -1,21 +1,9 @@
import { useSubscription } from "@app/context";
import { useOrganization } from "@app/context";
import { Tab } from '@headlessui/react'
import { Fragment } from 'react'
import {
useGetOrgPlanBillingInfo,
useGetOrgPlanTable,
useGetOrgPlansTable,
useUpdateOrgPlan,
useCreateProductCheckoutSession
} from "@app/hooks/api";
import { faCircleCheck, faCircleXmark,faFileInvoice } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
FormControl,
Button,
IconButton,
Input,
Select,
SelectItem,
EmptyState,
Table,
TableContainer,
TableSkeleton,
@@ -24,37 +12,31 @@ import {
Th,
THead,
Tr,
EmptyState,
Modal,
ModalContent
} from "@app/components/v2";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFileInvoice, faCircleCheck, faCircleXmark } from "@fortawesome/free-solid-svg-icons";
// TODO: upgrade
import { useOrganization,useSubscription } from "@app/context";
import {
useCreateCustomerPortalSession,
useGetOrgPlansTable} from "@app/hooks/api";
type Props = {
billingCycle: 'monthly' | 'yearly'
billingCycle: "monthly" | "yearly"
}
export const ManagePlansTable = ({
billingCycle
}: Props) => {
const { currentOrg } = useOrganization();
const { subscription, isLoading: isSubscriptionLoading } = useSubscription();
const { subscription } = useSubscription();
const { data: tableData, isLoading: isTableDataLoading } = useGetOrgPlansTable({
organizationId: currentOrg?._id ?? '',
organizationId: currentOrg?._id ?? "",
billingCycle
});
const updateOrgPlan = useUpdateOrgPlan();
const createProductCheckoutSession = useCreateProductCheckoutSession();
console.log('tableData: ', tableData);
const createCustomerPortalSession = useCreateCustomerPortalSession();
const displayCell = (value: null | number | string | boolean) => {
if (value === null) return '-';
if (value === null) return "-";
if (typeof value === 'boolean') {
if (typeof value === "boolean") {
if (value) return (
<FontAwesomeIcon
icon={faCircleCheck}
@@ -77,20 +59,18 @@ export const ManagePlansTable = ({
<TableContainer>
<Table>
<THead>
{!isTableDataLoading && tableData?.head.length > 0 && (
{subscription && !isTableDataLoading && tableData && (
<Tr>
<Th className="">Feature / Limit</Th>
{tableData.head.map(({
name,
slug,
priceLine
}: {
name: string;
slug: string;
priceLine: string;
}) => {
return (
<Th className={`${slug === subscription.slug ? "bg-mineshaft-600 text-center" : "text-center"}`}>
<Th
key={`plans-feature-head-${billingCycle}-${name}`}
className="text-center flex-1"
>
<p>{name}</p>
<p>{priceLine}</p>
</Th>
@@ -100,26 +80,28 @@ export const ManagePlansTable = ({
)}
</THead>
<TBody>
{!isTableDataLoading && tableData?.rows.length > 0 && tableData.rows.map(({
{subscription && !isTableDataLoading && tableData && tableData.rows.map(({
name,
starter,
team,
pro,
enterprise
}: {
name: string;
starter: null | number | string | boolean;
team: null | number | string | boolean;
pro: null | number | string | boolean;
enterprise: null | number | string | boolean;
}) => {
return (
<Tr className="h-12">
<Tr className="h-12" key={`plans-feature-row-${billingCycle}-${name}`}>
<Td>{displayCell(name)}</Td>
<Td className={'starter' === subscription.slug ? "bg-mineshaft-600 text-center" : "text-center"}>{displayCell(starter)}</Td>
<Td className={'team' === subscription.slug ? "bg-mineshaft-600 text-center" : "text-center"}>{displayCell(team)}</Td>
<Td className={'pro' === subscription.slug ? "bg-mineshaft-600 text-center" : "text-center"}>{displayCell(pro)}</Td>
<Td className={'enterprise' === subscription.slug ? "bg-mineshaft-600 text-center" : "text-center"}>{displayCell(enterprise)}</Td>
<Td className="text-center">
{displayCell(starter)}
</Td>
<Td className="text-center">
{displayCell(team)}
</Td>
<Td className="text-center">
{displayCell(pro)}
</Td>
<Td className="text-center">
{displayCell(enterprise)}
</Td>
</Tr>
);
})}
@@ -134,46 +116,53 @@ export const ManagePlansTable = ({
</Td>
</Tr>
)}
{subscription && !isTableDataLoading && tableData?.head.length > 0 && (
{subscription && !isTableDataLoading && tableData && (
<Tr className="h-12">
<Td></Td>
<Td />
{tableData.head.map(({
slug,
productId
}: {
slug: string;
productId: string;
tier
}) => {
const isCurrentPlan = slug === subscription.slug;
let subscriptionText = "Upgrade";
if (subscription.tier > tier) {
subscriptionText = "Downgrade"
}
if (tier === 3) {
subscriptionText = "Contact sales"
}
console.log('productId: ', productId);
return isCurrentPlan ? (
<Td className="bg-mineshaft-600">
<p className="text-center font-semibold">Current</p>
<Td>
<Button
colorSchema="secondary"
className="w-full"
isDisabled
>
Current
</Button>
</Td>
) : (
<Td>
<Button
onClick={async () => {
console.log('upgrade to product: ', productId);
if (!currentOrg?._id) return;
// const test = await updateOrgPlan.mutateAsync({
// organizationId: currentOrg._id,
// productId
// });
const { url } = await createProductCheckoutSession.mutateAsync({
organizationId: currentOrg._id,
productId,
success_url: window.location.href
})
if (tier !== 3) {
const { url } = await createCustomerPortalSession.mutateAsync(currentOrg._id);
window.location.href = url;
return;
}
window.location.href = url;
window.location.href = "https://infisical.com/scheduledemo";
}}
color="mineshaft"
className="w-full"
>
Upgrade
{subscriptionText}
</Button>
</Td>
);

41
frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
View File

@@ -1,23 +1,26 @@
import { useSubscription } from "@app/context";
import { useOrganization } from "@app/context";
import { useGetOrgPlanBillingInfo } from "@app/hooks/api";
import { Button } from "@app/components/v2";
import { useOrganization,useSubscription } from "@app/context";
import {
useCreateCustomerPortalSession,
useGetOrgPlanBillingInfo} from "@app/hooks/api";
import { usePopUp } from "@app/hooks/usePopUp";
import { ManagePlansModal } from "./ManagePlansModal";
export const PreviewSection = () => {
const { currentOrg } = useOrganization();
const { subscription, isLoading: isSubscriptionLoading } = useSubscription();
const { data, isLoading } = useGetOrgPlanBillingInfo(currentOrg?._id ?? '');
const { data, isLoading } = useGetOrgPlanBillingInfo(currentOrg?._id ?? "");
const createCustomerPortalSession = useCreateCustomerPortalSession();
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
"managePlan"
] as const);
const formatAmount = (amount: number) => {
const formattedTotal = (Math.floor(amount) / 100).toLocaleString('en-US', {
style: 'currency',
currency: 'USD',
const formattedTotal = (Math.floor(amount) / 100).toLocaleString("en-US", {
style: "currency",
currency: "USD",
});
return formattedTotal;
@@ -35,7 +38,7 @@ export const PreviewSection = () => {
return (
<div>
{!isSubscriptionLoading && subscription?.slug !== 'enterprise' && subscription?.slug !== 'pro' && subscription?.slug !== 'pro-annual' && (
{!isSubscriptionLoading && subscription?.slug !== "enterprise" && subscription?.slug !== "pro" && subscription?.slug !== "pro-annual" && (
<div className="p-4 bg-mineshaft-900 rounded-lg flex-1 border border-mineshaft-600 mt-8 flex items-center bg-mineshaft-600 max-w-screen-lg">
<div className="flex-1">
<h2 className="text-xl font-semibold text-mineshaft-50">Become Infisical</h2>
@@ -54,15 +57,29 @@ export const PreviewSection = () => {
<div className="p-4 bg-mineshaft-900 rounded-lg flex-1 mr-4 border border-mineshaft-600">
<p className="mb-2 text-gray-400">Current plan</p>
<p className="text-2xl mb-8 text-mineshaft-50 font-semibold">Starter</p>
<p className="text-primary">Manage plan &rarr;</p>
<button
type="button"
onClick={async () => {
if (!currentOrg?._id) return;
const { url } = await createCustomerPortalSession.mutateAsync(currentOrg._id);
window.location.href = url;
}}
className="text-primary"
>
Manage plan &rarr;
</button>
</div>
<div className="p-4 bg-mineshaft-900 rounded-lg flex-1 border border-mineshaft-600 mr-4">
<p className="mb-2 text-gray-400">Price</p>
<p className="text-2xl mb-8 text-mineshaft-50 font-semibold">{`${formatAmount(data.amount)} / ${data.interval}`}</p>
<p className="text-2xl mb-8 text-mineshaft-50 font-semibold">
{`${formatAmount(data.amount)} / ${data.interval}`}
</p>
</div>
<div className="p-4 bg-mineshaft-900 rounded-lg flex-1 border border-mineshaft-600">
<p className="mb-2 text-gray-400">Subscription renews on</p>
<p className="text-2xl mb-8 text-mineshaft-50 font-semibold">{formatDate(data.currentPeriodEnd)}</p>
<p className="text-2xl mb-8 text-mineshaft-50 font-semibold">
{formatDate(data.currentPeriodEnd)}
</p>
</div>
</div>
)}

4
frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/BillingDetailsTab.tsx
View File

@@ -5,11 +5,11 @@ import { TaxIDSection } from "./TaxIDSection";
export const BillingDetailsTab = () => {
return (
<div>
<>
<CompanyNameSection />
<InvoiceEmailSection />
<PmtMethodsSection />
<TaxIDSection />
</div>
</>
);
}

72
frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/CompanyNameSection.tsx
View File

@@ -1,39 +1,37 @@
import { useEffect } from "react";
import {
Input,
// Button,
FormControl
} from "@app/components/v2";
import { Controller, useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import { Controller, useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import Button from "@app/components/basic/buttons/Button";
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
import { FormControl,Input } from "@app/components/v2";
import { useOrganization } from "@app/context";
import {
useGetOrgBillingDetails,
useUpdateOrgBillingDetails
} from "@app/hooks/api";
import Button from "@app/components/basic/buttons/Button";
const schema = yup.object({
name: yup.string().required('Company name is required')
name: yup.string().required("Company name is required")
}).required();
export const CompanyNameSection = () => {
const { createNotification } = useNotificationContext();
const { currentOrg } = useOrganization();
const { reset, control, register, handleSubmit, watch, formState: { errors } } = useForm({
const { reset, control, handleSubmit } = useForm({
defaultValues: {
name: ''
name: ""
},
resolver: yupResolver(schema)
});
const { data } = useGetOrgBillingDetails(currentOrg?._id ?? '');
const { data } = useGetOrgBillingDetails(currentOrg?._id ?? "");
const updateOrgBillingDetails = useUpdateOrgBillingDetails();
useEffect(() => {
if (data) {
reset({
name: data?.name ?? ''
name: data?.name ?? ""
});
}
}, [data]);
@@ -41,13 +39,22 @@ export const CompanyNameSection = () => {
const onFormSubmit = async ({ name }: { name: string }) => {
try {
if (!currentOrg?._id) return;
if (name === '') return;
if (name === "") return;
await updateOrgBillingDetails.mutateAsync({
name,
organizationId: currentOrg._id
});
createNotification({
text: "Successfully updated business name",
type: "success"
});
} catch (err) {
console.error(err);
createNotification({
text: "Failed to update business name",
type: "error"
});
}
}
@@ -56,17 +63,9 @@ export const CompanyNameSection = () => {
onSubmit={handleSubmit(onFormSubmit)}
className="p-4 bg-mineshaft-900 mt-8 max-w-screen-lg rounded-lg border border-mineshaft-600"
>
<div className="flex items-center mb-8">
<h2 className="text-xl font-semibold flex-1 text-white">
Business name
</h2>
<Button
color="mineshaft"
type="submit"
>
Save
</Button>
</div>
<h2 className="text-xl font-semibold flex-1 text-mineshaft-100 mb-8">
Business name
</h2>
<div className="max-w-md">
<Controller
defaultValue=""
@@ -83,16 +82,15 @@ export const CompanyNameSection = () => {
name="name"
/>
</div>
<Button
text="Test"
onButtonPressed={() => {
console.log('Button pressed');
// setIsAddApiKeyDialogOpen(true);
}}
color="mineshaft"
// icon={faPlus}
size="md"
/>
<div className="inline-block">
<Button
text="Save"
type="submit"
color="mineshaft"
size="md"
onButtonPressed={() => console.log("Saved company name")}
/>
</div>
</form>
);
}

61
frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/InvoiceEmailSection.tsx
View File

@@ -1,12 +1,13 @@
import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import Button from "@app/components/basic/buttons/Button";
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
import {
Input,
Button,
FormControl
} from "@app/components/v2";
import { Controller, useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
FormControl,
Input} from "@app/components/v2";
import { useOrganization } from "@app/context";
import {
useGetOrgBillingDetails,
@@ -14,24 +15,25 @@ import {
} from "@app/hooks/api";
const schema = yup.object({
email: yup.string().required('Email is required')
email: yup.string().required("Email is required")
}).required();
export const InvoiceEmailSection = () => {
const { createNotification } = useNotificationContext();
const { currentOrg } = useOrganization();
const { reset, control, register, handleSubmit, watch, formState: { errors } } = useForm({
const { reset, control, handleSubmit } = useForm({
defaultValues: {
name: ''
email: ""
},
resolver: yupResolver(schema)
});
const { data } = useGetOrgBillingDetails(currentOrg?._id ?? '');
const { data } = useGetOrgBillingDetails(currentOrg?._id ?? "");
const updateOrgBillingDetails = useUpdateOrgBillingDetails();
useEffect(() => {
if (data) {
reset({
email: data?.email ?? ''
email: data?.email ?? ""
});
}
}, [data]);
@@ -39,13 +41,23 @@ export const InvoiceEmailSection = () => {
const onFormSubmit = async ({ email }: { email: string }) => {
try {
if (!currentOrg?._id) return;
if (email === '') return;
if (email === "") return;
await updateOrgBillingDetails.mutateAsync({
email,
organizationId: currentOrg._id
});
createNotification({
text: "Successfully updated invoice email recipient",
type: "success"
});
} catch (err) {
console.error(err);
createNotification({
text: "Failed to update invoice email recipient",
type: "error"
});
}
}
@@ -54,17 +66,9 @@ export const InvoiceEmailSection = () => {
onSubmit={handleSubmit(onFormSubmit)}
className="p-4 bg-mineshaft-900 mt-8 max-w-screen-lg rounded-lg border border-mineshaft-600"
>
<div className="flex items-center mb-8">
<h2 className="text-xl font-semibold flex-1 text-white">
Invoice email recipient
</h2>
<Button
color="mineshaft"
type="submit"
>
Save
</Button>
</div>
<h2 className="text-xl font-semibold flex-1 text-white mb-8">
Invoice email recipient
</h2>
<div className="max-w-md">
<Controller
defaultValue=""
@@ -81,6 +85,15 @@ export const InvoiceEmailSection = () => {
name="email"
/>
</div>
<div className="inline-block">
<Button
text="Save"
type="submit"
color="mineshaft"
size="md"
onButtonPressed={() => console.log("Saved email address")}
/>
</div>
</form>
);
}

120
frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsSection.tsx
View File

@@ -1,32 +1,14 @@
import {
Button,
IconButton,
Table,
TableContainer,
TableSkeleton,
TBody,
Td,
Th,
THead,
Tr,
EmptyState
} from "@app/components/v2";
import { useOrganization } from "@app/context";
import {
useGetOrgPmtMethods,
useAddOrgPmtMethod,
useDeleteOrgPmtMethod
} from "@app/hooks/api";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus, faXmark, faCreditCard } from "@fortawesome/free-solid-svg-icons";
import { faPlus } from "@fortawesome/free-solid-svg-icons";
// TODO: optimize + modularize
import Button from "@app/components/basic/buttons/Button";
import { useOrganization } from "@app/context";
import { useAddOrgPmtMethod } from "@app/hooks/api";
import { PmtMethodsTable } from "./PmtMethodsTable";
export const PmtMethodsSection = () => {
const { currentOrg } = useOrganization();
const { data, isLoading } = useGetOrgPmtMethods(currentOrg?._id ?? '');
const addOrgPmtMethod = useAddOrgPmtMethod();
const deleteOrgPmtMethod = useDeleteOrgPmtMethod();
const handleAddPmtMethodBtnClick = async () => {
if (!currentOrg?._id) return;
@@ -38,14 +20,6 @@ export const PmtMethodsSection = () => {
window.location.href = url;
}
const handleDeletePmtMethodBtnClick = async (pmtMethodId: string) => {
if (!currentOrg?._id) return;
await deleteOrgPmtMethod.mutateAsync({
organizationId: currentOrg._id,
pmtMethodId
});
}
return (
<div className="p-4 bg-mineshaft-900 mt-8 max-w-screen-lg rounded-lg border border-mineshaft-600">
@@ -53,78 +27,18 @@ export const PmtMethodsSection = () => {
<h2 className="text-xl font-semibold flex-1 text-white">
Payment Methods
</h2>
<Button
color="mineshaft"
type="submit"
leftIcon={<FontAwesomeIcon icon={faPlus} />}
onClick={handleAddPmtMethodBtnClick}
>
Add method
</Button>
<div className="inline-block">
<Button
text="Add method"
type="submit"
color="mineshaft"
size="md"
icon={faPlus}
onButtonPressed={handleAddPmtMethodBtnClick}
/>
</div>
</div>
<TableContainer className="mt-4">
<Table>
<THead>
<Tr>
<Th className="flex-1">Brand</Th>
<Th className="flex-1">Type</Th>
<Th className="flex-1">Last 4 Digits</Th>
<Th className="flex-1">Expiration</Th>
<Th className="w-5"></Th>
</Tr>
</THead>
<TBody>
{!isLoading && data?.length > 0 && data.map(({
_id,
brand,
exp_month,
exp_year,
funding,
last4
}: {
_id: string;
brand: string;
exp_month: number;
exp_year: number;
funding: string;
last4: string;
}) => (
<Tr key={`pmt-method-${_id}`} className="h-10">
<Td>{brand}</Td>
<Td>{funding}</Td>
<Td>{last4}</Td>
<Td>{`${exp_month}/${exp_year}`}</Td>
<Td>
<IconButton
onClick={async () => {
console.log('delete pmt method!');
await handleDeletePmtMethodBtnClick(_id);
console.log('delete pmt method done!');
}}
size="lg"
colorSchema="danger"
variant="plain"
ariaLabel="update"
>
<FontAwesomeIcon icon={faXmark} />
</IconButton>
</Td>
</Tr>
))}
{isLoading && <TableSkeleton columns={5} key="pmt-methods" />}
{!isLoading && data?.length === 0 && (
<Tr>
<Td colSpan={5}>
<EmptyState
title="No payment methods on file"
icon={faCreditCard}
/>
</Td>
</Tr>
)}
</TBody>
</Table>
</TableContainer>
<PmtMethodsTable />
</div>
);
}

90
frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsTable.tsx Normal file
View File

@@ -0,0 +1,90 @@
import { faCreditCard, faXmark } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
EmptyState,
IconButton,
Table,
TableContainer,
TableSkeleton,
TBody,
Td,
Th,
THead,
Tr} from "@app/components/v2";
import { useOrganization } from "@app/context";
import {
useDeleteOrgPmtMethod,
useGetOrgPmtMethods
} from "@app/hooks/api";
export const PmtMethodsTable = () => {
const { currentOrg } = useOrganization();
const { data, isLoading } = useGetOrgPmtMethods(currentOrg?._id ?? "");
const deleteOrgPmtMethod = useDeleteOrgPmtMethod();
const handleDeletePmtMethodBtnClick = async (pmtMethodId: string) => {
if (!currentOrg?._id) return;
await deleteOrgPmtMethod.mutateAsync({
organizationId: currentOrg._id,
pmtMethodId
});
}
return (
<TableContainer className="mt-4">
<Table>
<THead>
<Tr>
<Th className="flex-1">Brand</Th>
<Th className="flex-1">Type</Th>
<Th className="flex-1">Last 4 Digits</Th>
<Th className="flex-1">Expiration</Th>
<Th className="w-5" />
</Tr>
</THead>
<TBody>
{!isLoading && data && data?.length > 0 && data.map(({
_id,
brand,
exp_month,
exp_year,
funding,
last4
}) => (
<Tr key={`pmt-method-${_id}`} className="h-10">
<Td>{brand.charAt(0).toUpperCase() + brand.slice(1)}</Td>
<Td>{funding.charAt(0).toUpperCase() + funding.slice(1)}</Td>
<Td>{last4}</Td>
<Td>{`${exp_month}/${exp_year}`}</Td>
<Td>
<IconButton
onClick={async () => {
await handleDeletePmtMethodBtnClick(_id);
}}
size="lg"
colorSchema="danger"
variant="plain"
ariaLabel="update"
>
<FontAwesomeIcon icon={faXmark} />
</IconButton>
</Td>
</Tr>
))}
{isLoading && <TableSkeleton columns={5} key="pmt-methods" />}
{!isLoading && data && data?.length === 0 && (
<Tr>
<Td colSpan={5}>
<EmptyState
title="No payment methods on file"
icon={faCreditCard}
/>
</Td>
</Tr>
)}
</TBody>
</Table>
</TableContainer>
);
}

195
frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDModal.tsx Normal file
View File

@@ -0,0 +1,195 @@
import { Controller, useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
import {
Button,
FormControl,
Input,
Modal,
ModalContent,
Select,
SelectItem} from "@app/components/v2";
import { useOrganization } from "@app/context";
import { useAddOrgTaxId } from "@app/hooks/api";
import { UsePopUpState } from "@app/hooks/usePopUp";
const taxIDTypes = [
{ label: "Australia ABN", value: "au_abn" },
{ label: "Australia ARN", value: "au_arn" },
{ label: "Bulgaria UIC", value: "bg_uic" },
{ label: "Brazil CNPJ", value: "br_cnpj" },
{ label: "Brazil CPF", value: "br_cpf" },
{ label: "Canada BN", value: "ca_bn" },
{ label: "Canada GST/HST", value: "ca_gst_hst" },
{ label: "Canada PST BC", value: "ca_pst_bc" },
{ label: "Canada PST MB", value: "ca_pst_mb" },
{ label: "Canada PST SK", value: "ca_pst_sk" },
{ label: "Canada QST", value: "ca_qst" },
{ label: "Switzerland VAT", value: "ch_vat" },
{ label: "Chile TIN", value: "cl_tin" },
{ label: "Egypt TIN", value: "eg_tin" },
{ label: "Spain CIF", value: "es_cif" },
{ label: "EU OSS VAT", value: "eu_oss_vat" },
{ label: "EU VAT", value: "eu_vat" },
{ label: "GB VAT", value: "gb_vat" },
{ label: "Georgia VAT", value: "ge_vat" },
{ label: "Hong Kong BR", value: "hk_br" },
{ label: "Hungary TIN", value: "hu_tin" },
{ label: "Indonesia NPWP", value: "id_npwp" },
{ label: "Israel VAT", value: "il_vat" },
{ label: "India GST", value: "in_gst" },
{ label: "Iceland VAT", value: "is_vat" },
{ label: "Japan CN", value: "jp_cn" },
{ label: "Japan RN", value: "jp_rn" },
{ label: "Japan TRN", value: "jp_trn" },
{ label: "Kenya PIN", value: "ke_pin" },
{ label: "South Korea BRN", value: "kr_brn" },
{ label: "Liechtenstein UID", value: "li_uid" },
{ label: "Mexico RFC", value: "mx_rfc" },
{ label: "Malaysia FRP", value: "my_frp" },
{ label: "Malaysia ITN", value: "my_itn" },
{ label: "Malaysia SST", value: "my_sst" },
{ label: "Norway VAT", value: "no_vat" },
{ label: "New Zealand GST", value: "nz_gst" },
{ label: "Philippines TIN", value: "ph_tin" },
{ label: "Russia INN", value: "ru_inn" },
{ label: "Russia KPP", value: "ru_kpp" },
{ label: "Saudi Arabia VAT", value: "sa_vat" },
{ label: "Singapore GST", value: "sg_gst" },
{ label: "Singapore UEN", value: "sg_uen" },
{ label: "Slovenia TIN", value: "si_tin" },
{ label: "Thailand VAT", value: "th_vat" },
{ label: "Turkey TIN", value: "tr_tin" },
{ label: "Taiwan VAT", value: "tw_vat" },
{ label: "Ukraine VAT", value: "ua_vat" },
{ label: "US EIN", value: "us_ein" },
{ label: "South Africa VAT", value: "za_vat" }
];
const schema = yup.object({
type: yup.string().required("Tax ID type is required"),
value: yup.string().required("Tax ID value is required")
}).required();
export type AddTaxIDFormData = yup.InferType<typeof schema>;
type Props = {
popUp: UsePopUpState<["addTaxID"]>;
handlePopUpClose: (popUpName: keyof UsePopUpState<["addTaxID"]>) => void;
handlePopUpToggle: (popUpName: keyof UsePopUpState<["addTaxID"]>, state?: boolean) => void;
};
export const TaxIDModal = ({
popUp,
handlePopUpClose,
handlePopUpToggle
}: Props) => {
const { createNotification } = useNotificationContext();
const { currentOrg } = useOrganization();
const addOrgTaxId = useAddOrgTaxId();
const {
control,
handleSubmit,
reset,
formState: { isSubmitting }
} = useForm<AddTaxIDFormData>({
resolver: yupResolver(schema)
});
const onTaxIDModalSubmit = async ({ type, value }: AddTaxIDFormData) => {
try {
if (!currentOrg?._id) return;
await addOrgTaxId.mutateAsync({
organizationId: currentOrg._id,
type,
value
});
createNotification({
text: "Successfully added Tax ID",
type: "success"
});
handlePopUpClose("addTaxID");
} catch (err) {
console.error(err);
createNotification({
text: "Failed to add Tax ID",
type: "error"
});
}
}
return (
<Modal
isOpen={popUp?.addTaxID?.isOpen}
onOpenChange={(isOpen) => {
handlePopUpToggle("addTaxID", isOpen);
reset();
}}
>
<ModalContent title="Add Tax ID">
<form onSubmit={handleSubmit(onTaxIDModalSubmit)}>
<Controller
control={control}
name="type"
defaultValue="eu_vat"
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
<FormControl
label="Type"
errorText={error?.message}
isError={Boolean(error)}
>
<Select
defaultValue={field.value}
{...field}
onValueChange={(e) => onChange(e)}
className="w-full"
>
{taxIDTypes.map(({ label, value }) => (
<SelectItem value={String(value || "")} key={label}>
{label}
</SelectItem>
))}
</Select>
</FormControl>
)}
/>
<Controller
control={control}
defaultValue=""
name="value"
render={({ field, fieldState: { error } }) => (
<FormControl
label="Value"
isError={Boolean(error)}
errorText={error?.message}
>
<Input
{...field}
placeholder="DE000000000"
/>
</FormControl>
)}
/>
<div className="mt-8 flex items-center">
<Button
className="mr-4"
size="sm"
type="submit"
isLoading={isSubmitting}
isDisabled={isSubmitting}
>
Add
</Button>
<Button colorSchema="secondary" variant="plain">
Cancel
</Button>
</div>
</form>
</ModalContent>
</Modal>
);
}

277
frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDSection.tsx
View File

@@ -1,276 +1,39 @@
import {
FormControl,
Button,
IconButton,
Input,
Select,
SelectItem,
Table,
TableContainer,
TableSkeleton,
TBody,
Td,
Th,
THead,
Tr,
EmptyState,
Modal,
ModalContent
} from "@app/components/v2";
import { useOrganization } from "@app/context";
import {
useGetOrgTaxIds,
useAddOrgTaxId,
useDeleteOrgTaxId
} from "@app/hooks/api";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus, faXmark, faFileInvoice } from "@fortawesome/free-solid-svg-icons";
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import Button from "@app/components/basic/buttons/Button";
import { usePopUp } from "@app/hooks/usePopUp";
import { Controller, useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
const taxIDTypes = [
{ label: 'Australia ABN', value: 'au_abn' },
{ label: 'Australia ARN', value: 'au_arn' },
{ label: 'Bulgaria UIC', value: 'bg_uic' },
{ label: 'Brazil CNPJ', value: 'br_cnpj' },
{ label: 'Brazil CPF', value: 'br_cpf' },
{ label: 'Canada BN', value: 'ca_bn' },
{ label: 'Canada GST/HST', value: 'ca_gst_hst' },
{ label: 'Canada PST BC', value: 'ca_pst_bc' },
{ label: 'Canada PST MB', value: 'ca_pst_mb' },
{ label: 'Canada PST SK', value: 'ca_pst_sk' },
{ label: 'Canada QST', value: 'ca_qst' },
{ label: 'Switzerland VAT', value: 'ch_vat' },
{ label: 'Chile TIN', value: 'cl_tin' },
{ label: 'Egypt TIN', value: 'eg_tin' },
{ label: 'Spain CIF', value: 'es_cif' },
{ label: 'EU OSS VAT', value: 'eu_oss_vat' },
{ label: 'EU VAT', value: 'eu_vat' },
{ label: 'GB VAT', value: 'gb_vat' },
{ label: 'Georgia VAT', value: 'ge_vat' },
{ label: 'Hong Kong BR', value: 'hk_br' },
{ label: 'Hungary TIN', value: 'hu_tin' },
{ label: 'Indonesia NPWP', value: 'id_npwp' },
{ label: 'Israel VAT', value: 'il_vat' },
{ label: 'India GST', value: 'in_gst' },
{ label: 'Iceland VAT', value: 'is_vat' },
{ label: 'Japan CN', value: 'jp_cn' },
{ label: 'Japan RN', value: 'jp_rn' },
{ label: 'Japan TRN', value: 'jp_trn' },
{ label: 'Kenya PIN', value: 'ke_pin' },
{ label: 'South Korea BRN', value: 'kr_brn' },
{ label: 'Liechtenstein UID', value: 'li_uid' },
{ label: 'Mexico RFC', value: 'mx_rfc' },
{ label: 'Malaysia FRP', value: 'my_frp' },
{ label: 'Malaysia ITN', value: 'my_itn' },
{ label: 'Malaysia SST', value: 'my_sst' },
{ label: 'Norway VAT', value: 'no_vat' },
{ label: 'New Zealand GST', value: 'nz_gst' },
{ label: 'Philippines TIN', value: 'ph_tin' },
{ label: 'Russia INN', value: 'ru_inn' },
{ label: 'Russia KPP', value: 'ru_kpp' },
{ label: 'Saudi Arabia VAT', value: 'sa_vat' },
{ label: 'Singapore GST', value: 'sg_gst' },
{ label: 'Singapore UEN', value: 'sg_uen' },
{ label: 'Slovenia TIN', value: 'si_tin' },
{ label: 'Thailand VAT', value: 'th_vat' },
{ label: 'Turkey TIN', value: 'tr_tin' },
{ label: 'Taiwan VAT', value: 'tw_vat' },
{ label: 'Ukraine VAT', value: 'ua_vat' },
{ label: 'US EIN', value: 'us_ein' },
{ label: 'South Africa VAT', value: 'za_vat' }
];
const schema = yup.object({
type: yup.string().required('Tax ID type is required'),
value: yup.string().required('Tax ID value is required')
}).required();
export type AddTaxIDFormData = yup.InferType<typeof schema>;
// TODO: optimize + modularize
import { TaxIDModal } from "./TaxIDModal";
import { TaxIDTable } from "./TaxIDTable";
export const TaxIDSection = () => {
const { currentOrg } = useOrganization();
const { data, isLoading } = useGetOrgTaxIds(currentOrg?._id ?? '');
const addOrgTaxId = useAddOrgTaxId();
const deleteOrgTaxId = useDeleteOrgTaxId();
const {
control,
handleSubmit,
reset,
formState: { isSubmitting }
} = useForm<AddTaxIDFormData>({
resolver: yupResolver(schema)
});
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
"addTaxID"
] as const);
const onTaxIDModalSubmit = async ({ type, value }: AddTaxIDFormData) => {
try {
if (!currentOrg?._id) return;
await addOrgTaxId.mutateAsync({
organizationId: currentOrg._id,
type,
value
});
handlePopUpClose("addTaxID");
} catch (err) {
console.error(err);
}
}
const handleDeleteTaxIdBtnClick = async (taxId: string) => {
if (!currentOrg?._id) return;
await deleteOrgTaxId.mutateAsync({
organizationId: currentOrg._id,
taxId
});
}
return (
<div className="p-4 bg-mineshaft-900 mt-8 max-w-screen-lg rounded-lg border border-mineshaft-600">
<div className="flex items-center mb-8">
<h2 className="text-xl font-semibold flex-1 text-white">
Tax ID
</h2>
<Button
color="mineshaft"
type="submit"
leftIcon={<FontAwesomeIcon icon={faPlus} />}
onClick={() => handlePopUpOpen("addTaxID")}
>
Add Tax ID
</Button>
</div>
<TableContainer className="mt-4">
<Table>
<THead>
<Tr>
<Th className="flex-1">Type</Th>
<Th className="flex-1">Value</Th>
<Th className="w-5"></Th>
</Tr>
</THead>
<TBody>
{!isLoading && data?.length > 0 && data.map(({
_id,
country,
type,
value
}: {
_id: string;
country: string;
type: string;
value: string;
}) => (
<Tr key={`tax-id-${_id}`} className="h-10">
<Td>{type}</Td>
<Td>{value}</Td>
<Td>
<IconButton
onClick={async () => {
console.log('del');
await handleDeleteTaxIdBtnClick(_id);
console.log('del done');
}}
size="lg"
colorSchema="danger"
variant="plain"
ariaLabel="update"
>
<FontAwesomeIcon icon={faXmark} />
</IconButton>
</Td>
</Tr>
))}
{isLoading && <TableSkeleton columns={3} key="tax-ids" />}
{!isLoading && data?.length === 0 && (
<Tr>
<Td colSpan={5}>
<EmptyState
title="No Tax IDs on file"
icon={faFileInvoice}
/>
</Td>
</Tr>
)}
</TBody>
</Table>
</TableContainer>
<Modal
isOpen={popUp?.addTaxID?.isOpen}
onOpenChange={(isOpen) => {
handlePopUpToggle("addTaxID", isOpen);
reset();
}}
>
<ModalContent title="Add Tax ID">
<form onSubmit={handleSubmit(onTaxIDModalSubmit)}>
<Controller
control={control}
name="type"
defaultValue="eu_vat"
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
<FormControl
label="Type"
errorText={error?.message}
isError={Boolean(error)}
>
<Select
defaultValue={field.value}
{...field}
onValueChange={(e) => onChange(e)}
className="w-full"
>
{taxIDTypes.map(({ label, value }) => (
<SelectItem value={String(value || "")} key={label}>
{label}
</SelectItem>
))}
</Select>
</FormControl>
)}
/>
<Controller
control={control}
defaultValue=""
name="value"
render={({ field, fieldState: { error } }) => (
<FormControl
label="Value"
isError={Boolean(error)}
errorText={error?.message}
>
<Input
{...field}
placeholder="DE000000000"
/>
</FormControl>
)}
/>
<div className="mt-8 flex items-center">
<div className="inline-block">
<Button
className="mr-4"
size="sm"
text="Add Tax ID"
type="submit"
isLoading={isSubmitting}
isDisabled={isSubmitting}
>
Add
</Button>
<Button colorSchema="secondary" variant="plain">
Cancel
</Button>
</div>
</form>
</ModalContent>
</Modal>
color="mineshaft"
size="md"
icon={faPlus}
onButtonPressed={() => handlePopUpOpen("addTaxID")}
/>
</div>
</div>
<TaxIDTable />
<TaxIDModal
popUp={popUp}
handlePopUpClose={handlePopUpClose}
handlePopUpToggle={handlePopUpToggle}
/>
</div>
);
}

137
frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDTable.tsx Normal file
View File

@@ -0,0 +1,137 @@
import { faFileInvoice,faXmark } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
EmptyState,
IconButton,
Table,
TableContainer,
TableSkeleton,
TBody,
Td,
Th,
THead,
Tr,
} from "@app/components/v2";
import { useOrganization } from "@app/context";
import {
useDeleteOrgTaxId,
useGetOrgTaxIds
} from "@app/hooks/api";
const taxIDTypeLabelMap: { [key: string]: string } = {
"au_abn": "Australia ABN",
"au_arn": "Australia ARN",
"bg_uic": "Bulgaria UIC",
"br_cnpj": "Brazil CNPJ",
"br_cpf": "Brazil CPF",
"ca_bn": "Canada BN",
"ca_gst_hst": "Canada GST/HST",
"ca_pst_bc": "Canada PST BC",
"ca_pst_mb": "Canada PST MB",
"ca_pst_sk": "Canada PST SK",
"ca_qst": "Canada QST",
"ch_vat": "Switzerland VAT",
"cl_tin": "Chile TIN",
"eg_tin": "Egypt TIN",
"es_cif": "Spain CIF",
"eu_oss_vat": "EU OSS VAT",
"eu_vat": "EU VAT",
"gb_vat": "GB VAT",
"ge_vat": "Georgia VAT",
"hk_br": "Hong Kong BR",
"hu_tin": "Hungary TIN",
"id_npwp": "Indonesia NPWP",
"il_vat": "Israel VAT",
"in_gst": "India GST",
"is_vat": "Iceland VAT",
"jp_cn": "Japan CN",
"jp_rn": "Japan RN",
"jp_trn": "Japan TRN",
"ke_pin": "Kenya PIN",
"kr_brn": "South Korea BRN",
"li_uid": "Liechtenstein UID",
"mx_rfc": "Mexico RFC",
"my_frp": "Malaysia FRP",
"my_itn": "Malaysia ITN",
"my_sst": "Malaysia SST",
"no_vat": "Norway VAT",
"nz_gst": "New Zealand GST",
"ph_tin": "Philippines TIN",
"ru_inn": "Russia INN",
"ru_kpp": "Russia KPP",
"sa_vat": "Saudi Arabia VAT",
"sg_gst": "Singapore GST",
"sg_uen": "Singapore UEN",
"si_tin": "Slovenia TIN",
"th_vat": "Thailand VAT",
"tr_tin": "Turkey TIN",
"tw_vat": "Taiwan VAT",
"ua_vat": "Ukraine VAT",
"us_ein": "US EIN",
"za_vat": "South Africa VAT"
};
export const TaxIDTable = () => {
const { currentOrg } = useOrganization();
const { data, isLoading } = useGetOrgTaxIds(currentOrg?._id ?? "");
const deleteOrgTaxId = useDeleteOrgTaxId();
const handleDeleteTaxIdBtnClick = async (taxId: string) => {
if (!currentOrg?._id) return;
await deleteOrgTaxId.mutateAsync({
organizationId: currentOrg._id,
taxId
});
}
return (
<TableContainer className="mt-4">
<Table>
<THead>
<Tr>
<Th className="flex-1">Type</Th>
<Th className="flex-1">Value</Th>
<Th className="w-5" />
</Tr>
</THead>
<TBody>
{!isLoading && data && data?.length > 0 && data.map(({
_id,
type,
value
}) => (
<Tr key={`tax-id-${_id}`} className="h-10">
<Td>{taxIDTypeLabelMap[type]}</Td>
<Td>{value}</Td>
<Td>
<IconButton
onClick={async () => {
await handleDeleteTaxIdBtnClick(_id);
}}
size="lg"
colorSchema="danger"
variant="plain"
ariaLabel="update"
>
<FontAwesomeIcon icon={faXmark} />
</IconButton>
</Td>
</Tr>
))}
{isLoading && <TableSkeleton columns={3} key="tax-ids" />}
{!isLoading && data && data?.length === 0 && (
<Tr>
<Td colSpan={5}>
<EmptyState
title="No Tax IDs on file"
icon={faFileInvoice}
/>
</Td>
</Tr>
)}
</TBody>
</Table>
</TableContainer>
);
}

94
frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx
View File

@@ -1,100 +1,10 @@
import {
IconButton,
Table,
TableContainer,
TableSkeleton,
TBody,
Td,
Th,
THead,
Tr,
EmptyState
} from "@app/components/v2";
import { useOrganization } from "@app/context";
import {
useGetOrgInvoices
} from "@app/hooks/api";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faDownload, faFileInvoice } from "@fortawesome/free-solid-svg-icons";
// TODO: optimize + modularize
import { InvoicesTable } from "./InvoicesTable";
export const BillingReceiptsTab = () => {
const { currentOrg } = useOrganization();
const { data, isLoading } = useGetOrgInvoices(currentOrg?._id ?? '');
return (
<div className="p-4 bg-mineshaft-900 mt-8 max-w-screen-lg rounded-lg border border-mineshaft-600">
<h2 className="text-xl font-semibold flex-1 text-white">Invoices</h2>
<TableContainer className="mt-4">
<Table>
<THead>
<Tr>
<Th className="flex-1">Invoice #</Th>
<Th className="flex-1">Date</Th>
<Th className="flex-1">Status</Th>
<Th className="flex-1">Amount</Th>
<Th className="w-5"></Th>
</Tr>
</THead>
<TBody>
{!isLoading && data?.length > 0 && data.map(({
_id,
created,
paid,
number,
total,
invoice_pdf
}: {
_id: string;
created: number;
paid: boolean;
number: string;
total: number;
invoice_pdf: string;
}) => {
const formattedTotal = (Math.floor(total) / 100).toLocaleString('en-US', {
style: 'currency',
currency: 'USD',
});
const createdDate = new Date(created * 1000);
const day: number = createdDate.getDate();
const month: number = createdDate.getMonth() + 1;
const year: number = createdDate.getFullYear();
const formattedDate: string = `${day}/${month}/${year}`;
return (
<Tr key={`invoice-${_id}`} className="h-10">
<Td>{number}</Td>
<Td>{formattedDate}</Td>
<Td>{paid ? "Paid" : "Not Paid"}</Td>
<Td>{formattedTotal}</Td>
<Td>
<IconButton
onClick={async () => window.open(invoice_pdf)}
size="lg"
variant="plain"
ariaLabel="update"
>
<FontAwesomeIcon icon={faDownload} />
</IconButton>
</Td>
</Tr>
);
})}
{isLoading && <TableSkeleton columns={5} key="invoices" />}
{!isLoading && data?.length === 0 && (
<Tr>
<Td colSpan={5}>
<EmptyState
title="No invoices on file"
icon={faFileInvoice}
/>
</Td>
</Tr>
)}
</TBody>
</Table>
</TableContainer>
<InvoicesTable />
</div>
);
}

88
frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/InvoicesTable.tsx Normal file
View File

@@ -0,0 +1,88 @@
import { faDownload, faFileInvoice } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
EmptyState,
IconButton,
Table,
TableContainer,
TableSkeleton,
TBody,
Td,
Th,
THead,
Tr} from "@app/components/v2";
import { useOrganization } from "@app/context";
import {
useGetOrgInvoices
} from "@app/hooks/api";
export const InvoicesTable = () => {
const { currentOrg } = useOrganization();
const { data, isLoading } = useGetOrgInvoices(currentOrg?._id ?? "");
return (
<TableContainer className="mt-8">
<Table>
<THead>
<Tr>
<Th className="flex-1">Invoice #</Th>
<Th className="flex-1">Date</Th>
<Th className="flex-1">Status</Th>
<Th className="flex-1">Amount</Th>
<Th className="w-5" />
</Tr>
</THead>
<TBody>
{!isLoading && data && data?.length > 0 && data.map(({
_id,
created,
paid,
number,
total,
invoice_pdf
}) => {
const formattedTotal = (Math.floor(total) / 100).toLocaleString("en-US", {
style: "currency",
currency: "USD",
});
const createdDate = new Date(created * 1000);
const day: number = createdDate.getDate();
const month: number = createdDate.getMonth() + 1;
const year: number = createdDate.getFullYear();
const formattedDate: string = `${day}/${month}/${year}`;
return (
<Tr key={`invoice-${_id}`} className="h-10">
<Td>{number}</Td>
<Td>{formattedDate}</Td>
<Td>{paid ? "Paid" : "Not Paid"}</Td>
<Td>{formattedTotal}</Td>
<Td>
<IconButton
onClick={async () => window.open(invoice_pdf)}
size="lg"
variant="plain"
ariaLabel="update"
>
<FontAwesomeIcon icon={faDownload} />
</IconButton>
</Td>
</Tr>
);
})}
{isLoading && <TableSkeleton columns={5} key="invoices" />}
{!isLoading && data && data?.length === 0 && (
<Tr>
<Td colSpan={5}>
<EmptyState
title="No invoices on file"
icon={faFileInvoice}
/>
</Td>
</Tr>
)}
</TBody>
</Table>
</TableContainer>
);
}

0
frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/BillingSelfHostedTab.tsx
View File

0
frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/index.tsx
View File

44
frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/BillingTabGroup.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { Fragment } from "react"
import { Tab } from "@headlessui/react"
import { BillingCloudTab } from "../BillingCloudTab";
import { BillingDetailsTab } from "../BillingDetailsTab";
import { BillingReceiptsTab } from "../BillingReceiptsTab";
const tabs = [
{ name: "Infisical Cloud", key: "tab-infisical-cloud" },
{ name: "Receipts", key: "tab-receipts" },
{ name: "Billing details", key: "tab-billing-details" }
];
export const BillingTabGroup = () => {
return (
<Tab.Group>
<Tab.List className="mt-8 border-b-2 border-mineshaft-800 max-w-screen-lg">
{tabs.map((tab) => (
<Tab as={Fragment} key={tab.key}>
{({ selected }) => (
<button
type="button"
className={`w-30 p-4 font-semibold outline-none ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"}`}
>
{tab.name}
</button>
)}
</Tab>
))}
</Tab.List>
<Tab.Panels>
<Tab.Panel>
<BillingCloudTab />
</Tab.Panel>
<Tab.Panel>
<BillingReceiptsTab />
</Tab.Panel>
<Tab.Panel>
<BillingDetailsTab />
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
);
}

1
frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/index.tsx Normal file
View File

@@ -0,0 +1 @@
export { BillingTabGroup } from "./BillingTabGroup";

4
frontend/src/views/Settings/BillingSettingsPage/components/index.tsx
View File

@@ -1,3 +1 @@
export { BillingCloudTab } from "./BillingCloudTab";
export { BillingReceiptsTab } from "./BillingReceiptsTab";
export { BillingDetailsTab } from "./BillingDetailsTab";
export { BillingTabGroup } from "./BillingTabGroup";