+ <>
{t("common.head-title", { title: t("integrations.title") })}
@@ -411,52 +20,26 @@ export default function Integrations() {
-
+
- setIsActivateBotDialogOpen(false)}
- selectedIntegrationOption={selectedIntegrationOption}
- integrationOptionPress={integrationOptionPress}
- />
- {
- if (!bot.isActive) {
- // case: bot is not active -> open modal to activate bot
- setIsActivateBotDialogOpen(true);
- return;
- }
- integrationOptionPress(integrationOption);
- }}
- integrationAuths={integrationAuths}
- handleDeleteIntegrationAuth={handleDeleteIntegrationAuth}
- />
- ) : (
- <>
-
-
-
- {t("integrations.cloud-integrations")}
-{t("integrations.click-to-start")}
-
- {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].map(elem => )}
-
-
- )}
-
+
{t("common.head-title", { title: t("billing.title") })}
- = {};
+ data.forEach((el) => {
+ groupBy[el.integration] = el;
+ });
+ return groupBy;
+ }, [])
+ );
+ // mutation
+ const {
+ data: integrations,
+ isLoading: isIntegrationLoading,
+ isFetching: isIntegrationFetching
+ } = useGetWorkspaceIntegrations(workspaceId);
+
+ const { data: bot } = useGetWorkspaceBot(workspaceId);
+
+ // mutation
+ const { mutateAsync: updateBotActiveStatus, mutate: updateBotActiveStatusSync } =
+ useUpdateBotActiveStatus();
+ const { mutateAsync: deleteIntegration } = useDeleteIntegration();
+ const {
+ mutateAsync: deleteIntegrationAuth,
+ isLoading: isDeleteIntegrationAuthSuccess,
+ reset: resetDeleteIntegrationAuth
+ } = useDeleteIntegrationAuth();
+
+ // summary: this use effect is trigger when all integration auths are removed thus deactivate bot
+ // details: so onsuccessfully deleting an integration auth, immediately integration list is refeteched
+ // After the refetch is completed check if its empty. Then set bot active and reset the submit hook
+ useEffect(() => {
+ if (isDeleteIntegrationAuthSuccess && !isIntegrationFetching && !integrations?.length) {
+ if (bot?._id)
+ updateBotActiveStatusSync({
+ isActive: false,
+ botId: bot._id,
+ workspaceId
+ });
+ resetDeleteIntegrationAuth();
+ }
+ }, [isIntegrationFetching, isDeleteIntegrationAuthSuccess, integrations?.length]);
+
+ const handleProviderIntegration = async (provider: string) => {
+ const selectedCloudIntegration = cloudIntegrations?.find(({ slug }) => provider === slug);
+ if (!selectedCloudIntegration) return;
+
+ try {
+ if (bot && !bot.isActive) {
+ const botKey = generateBotKey(bot.publicKey, latestWsKey!);
+ await updateBotActiveStatus({
+ workspaceId,
+ botKey,
+ isActive: true,
+ botId: bot._id
+ });
+ }
+ const integrationAuthForProvider = integrationAuths?.[provider];
+ if (!integrationAuthForProvider) {
+ redirectForProviderAuth(selectedCloudIntegration);
+ return;
+ }
+
+ const url = redirectToIntegrationAppConfigScreen(provider, integrationAuthForProvider._id);
+ router.push(url);
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ // function to strat integration for a provider
+ // confirmation to user passing the bot key for provider to get secret access
+ const handleProviderIntegrationStart = (provider: string) => {
+ if (!bot?.isActive) {
+ handlePopUpOpen("activeBot", { provider });
+ return;
+ }
+ handleProviderIntegration(provider);
+ };
+
+ const handleUserAcceptBotCondition = () => {
+ const { provider } = popUp.activeBot?.data as { provider: string };
+ handleProviderIntegration(provider);
+ handlePopUpClose("activeBot");
+ };
+
+ const handleIntegrationDelete = async (integrationId: string, cb: () => void) => {
+ try {
+ await deleteIntegration({ id: integrationId, workspaceId });
+ if (cb) cb();
+ createNotification({
+ type: "success",
+ text: "Deleted integration"
+ });
+ } catch (err) {
+ console.log(err);
+ createNotification({
+ type: "error",
+ text: "Failed to delete integration"
+ });
+ }
+ };
+
+ const handleIntegrationAuthRevoke = async (provider: string, cb?: () => void) => {
+ const integrationAuthForProvider = integrationAuths?.[provider];
+ if (!integrationAuthForProvider) return;
+ try {
+ await deleteIntegrationAuth({
+ id: integrationAuthForProvider._id,
+ workspaceId
+ });
+ if (cb) cb();
+ createNotification({
+ type: "success",
+ text: "Revoked provider authentication"
+ });
+ } catch (err) {
+ console.error(err);
+ createNotification({
+ type: "error",
+ text: "Failed to revoke provider authentication"
+ });
+ }
+ };
+
+ return (
+
+ );
+};
diff --git a/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx b/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx
new file mode 100644
index 000000000..d3e118e37
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx
@@ -0,0 +1,140 @@
+import { useTranslation } from "react-i18next";
+import { faCheck, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { DeleteActionModal,Skeleton, Tooltip } from "@app/components/v2";
+import { usePopUp } from "@app/hooks";
+import { IntegrationAuth, TCloudIntegration } from "@app/hooks/api/types";
+
+type Props = {
+ isLoading?: boolean;
+ integrationAuths?: Record
-
+
-
-
-
-
-
- {t("billing.title")}
-{t("billing.description")}
-
-
- {t("billing.subscription")}
-
- {plans.map((plan) => (
-
- {/* {t("billing.current-usage")}
-
-
*/}
-
-
- {numUsers}
-- Organization members -
-
-
- 1
-Organization projects
-
+ handleIntegrationDelete(id, cb)}
+ />
+ handlePopUpToggle("activeBot", isOpen)}
+ >
+
+
+
+
+ }
+ >
+ {t("integrations.why-infisical-needs-access")}
+
+
+
+ handlePopUpToggle("deleteConfirmation", isOpen)}
+ deleteKey={(popUp?.deleteConfirmation?.data as TRevokeIntegrationPopUp)?.provider || ""}
+ onDeleteApproved={async () => {
+ onIntegrationRevoke(
+ (popUp.deleteConfirmation.data as TRevokeIntegrationPopUp)?.provider,
+ () => handlePopUpClose("deleteConfirmation")
+ );
+ }}
+ />
+
+ );
+};
diff --git a/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/index.tsx b/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/index.tsx
new file mode 100644
index 000000000..62f7a006c
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/index.tsx
@@ -0,0 +1 @@
+export { CloudIntegrationSection } from "./CloudIntegrationSection";
diff --git a/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx b/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx
new file mode 100644
index 000000000..9b567eaaa
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx
@@ -0,0 +1,54 @@
+import { useTranslation } from "react-i18next";
+
+type Props = {
+ frameworks: Array<{
+ name: string;
+ image: string;
+ slug: string;
+ docsLink: string;
+ }>;
+};
+
+export const FrameworkIntegrationSection = ({ frameworks }: Props) => {
+ const { t } = useTranslation();
+
+ return (
+ <>
+
+
+ {t("integrations.cloud-integrations")}
+{t("integrations.click-to-start")}
+
+ {isLoading &&
+ Array.from({ length: 12 }).map((_, index) => (
+
+ {isEmpty && (
+ null}
+ role="button"
+ tabIndex={0}
+ className={`group relative ${
+ cloudIntegration.isAvailable
+ ? "cursor-pointer duration-200 hover:bg-mineshaft-700"
+ : "opacity-50"
+ } flex h-32 flex-row items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4`}
+ onClick={() => {
+ if (!cloudIntegration.isAvailable) return;
+ onIntegrationStart(cloudIntegration.slug);
+ }}
+ key={cloudIntegration.slug}
+ >
+ 
+ {cloudIntegration.name.split(" ").length > 2 ? (
+
+ ))}
+
+ {cloudIntegration.name.split(" ").length > 2 ? (
+
+
+ ) : (
+ {cloudIntegration.name.split(" ")[0]}
+
+ {cloudIntegration.name.split(" ")[1]} {cloudIntegration.name.split(" ")[2]}
+
+
+ {cloudIntegration.name}
+
+ )}
+ {cloudIntegration.isAvailable &&
+ Boolean(integrationAuths?.[cloudIntegration.slug]) && (
+
+
+ )}
+
+
+
+
+
+
+ null}
+ role="button"
+ tabIndex={0}
+ onClick={async (event) => {
+ event.stopPropagation();
+ handlePopUpOpen("deleteConfirmation", {
+ provider: cloudIntegration.slug
+ });
+ }}
+ className="absolute top-0 right-0 flex h-0 w-12 cursor-pointer items-center justify-center overflow-hidden rounded-r-md bg-red text-xs opacity-50 transition-all duration-300 hover:opacity-100 group-hover:h-full"
+ >
+
+
+ {Array.from({ length: 16 }).map((_, index) => (
+
+ ))}
+
+ )}
+
+
+ {t("integrations.framework-integrations")}
+{t("integrations.click-to-setup")}
+
+ {frameworks.map((framework) => (
+
+
+
+ );
+};
diff --git a/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/index.tsx b/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/index.tsx
new file mode 100644
index 000000000..1738b8179
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/index.tsx
@@ -0,0 +1 @@
+export { FrameworkIntegrationSection } from "./FrameworkIntegrationSection";
diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
new file mode 100644
index 000000000..e61c6fe47
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
@@ -0,0 +1,149 @@
+import { faArrowRight, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { integrationSlugNameMapping } from "public/data/frequentConstants";
+
+import {
+ DeleteActionModal,
+ EmptyState,
+ FormControl,
+ FormLabel,
+ IconButton,
+ Select,
+ SelectItem,
+ Skeleton,
+ Tooltip
+} from "@app/components/v2";
+import { usePopUp } from "@app/hooks";
+import { TIntegration } from "@app/hooks/api/types";
+
+type Props = {
+ environments: Array<{ name: string; slug: string }>;
+ integrations?: TIntegration[];
+ isLoading?: boolean;
+ onIntegrationDelete: (integration: TIntegration, cb: () => void) => void;
+};
+
+export const IntegrationsSection = ({
+ integrations = [],
+ environments = [],
+ isLoading,
+ onIntegrationDelete
+}: Props) => {
+ const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+ "deleteConfirmation"
+ ] as const);
+
+ return (
+ 1 ? "px-1 text-sm" : "px-2 text-xl"
+ } w-full max-w-xs text-center`}
+ >
+ {framework?.image && (
+ 
+ )}
+ {framework?.name && framework?.image && }
+ {framework?.name && framework.name}
+
+
+ ))}
+
+ )}
+ {framework?.name && framework?.image && }
+ {framework?.name && framework.name}
+
+ handlePopUpToggle("deleteConfirmation", isOpen)}
+ deleteKey={(popUp?.deleteConfirmation?.data as TIntegration)?.app || ""}
+ onDeleteApproved={async () =>
+ onIntegrationDelete(popUp?.deleteConfirmation.data as TIntegration, () =>
+ handlePopUpClose("deleteConfirmation")
+ )
+ }
+ />
+
+ );
+};
diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/index.tsx b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/index.tsx
new file mode 100644
index 000000000..6f40d79fa
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/index.tsx
@@ -0,0 +1 @@
+export { IntegrationsSection } from "./IntegrationsSection";
diff --git a/frontend/src/views/IntegrationsPage/index.tsx b/frontend/src/views/IntegrationsPage/index.tsx
new file mode 100644
index 000000000..eb9f8496e
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/index.tsx
@@ -0,0 +1 @@
+export { IntegrationsPage } from "./IntegrationsPage";
diff --git a/frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx b/frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx
new file mode 100644
index 000000000..ae5c01c85
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx
@@ -0,0 +1,26 @@
+import { useTranslation } from "react-i18next";
+
+import NavHeader from "@app/components/navigation/NavHeader";
+
+import {
+ BillingTabGroup
+} from "./components";
+
+export const BillingSettingsPage = () => {
+ const { t } = useTranslation();
+ return (
+
+
+ {isLoading && (
+ Current Integrations
+Manage integrations with third-party services.
+
+
+ )}
+ {!isLoading && !integrations.length && (
+
+ {integrations?.map((integration) => (
+
+ )}
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ {integration.secretPath}
+
+
+
+
+
+
+ {integrationSlugNameMapping[integration.integration]}
+
+
+
+ {(integration.integration === "vercel" ||
+ integration.integration === "netlify" ||
+ integration.integration === "railway" ||
+ integration.integration === "gitlab") && (
+
+ {integration.integration === "hashicorp-vault"
+ ? `${integration.app} - path: ${integration.path}`
+ : integration.app}
+
+
+
+ )}
+
+ {integration.targetEnvironment}
+
+
+
+
+
+ handlePopUpOpen("deleteConfirmation", integration)}
+ ariaLabel="delete"
+ colorSchema="danger"
+ variant="star"
+ >
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/BillingCloudTab.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/BillingCloudTab.tsx
new file mode 100644
index 000000000..4ce5fb1d7
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/BillingCloudTab.tsx
@@ -0,0 +1,11 @@
+import { CurrentPlanSection } from "./CurrentPlanSection";
+import { PreviewSection } from "./PreviewSection";
+
+export const BillingCloudTab = () => {
+ return (
+
+
+
+
+
+ {t("billing.title")}
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/CurrentPlanSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/CurrentPlanSection.tsx
new file mode 100644
index 000000000..c9973646a
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/CurrentPlanSection.tsx
@@ -0,0 +1,87 @@
+import { faCircleCheck, faCircleXmark,faFileInvoice } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+ EmptyState,
+ Table,
+ TableContainer,
+ TableSkeleton,
+ TBody,
+ Td,
+ Th,
+ THead,
+ Tr} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import {
+ useGetOrgPlanTable
+} from "@app/hooks/api";
+
+export const CurrentPlanSection = () => {
+ const { currentOrg } = useOrganization();
+ const { data, isLoading } = useGetOrgPlanTable(currentOrg?._id ?? "");
+
+ const displayCell = (value: null | number | string | boolean) => {
+ if (value === null) return "-";
+
+ if (typeof value === "boolean") {
+ if (value) return (
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansModal.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansModal.tsx
new file mode 100644
index 000000000..20c240544
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansModal.tsx
@@ -0,0 +1,64 @@
+import { Fragment } from "react"
+import { Tab } from "@headlessui/react"
+
+import {
+ Modal,
+ ModalContent
+} from "@app/components/v2";
+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
+}: Props) => {
+ return (
+ Current Usage
+| Feature | +Allowed | +Used | +
|---|---|---|
| {name} | +{displayCell(allowed)} | +{used} | +
|
+ |
+
| Feature / Limit | + {tableData.head.map(({ + name, + priceLine + }) => { + return ( +
+ {name} +{priceLine} + |
+ );
+ })}
+ |||
|---|---|---|---|---|
| {displayCell(name)} | ++ {displayCell(starter)} + | ++ {displayCell(team)} + | ++ {displayCell(pro)} + | ++ {displayCell(enterprise)} + | +
|
+ |
+ ||||
| + {tableData.head.map(({ + slug, + tier + }) => { + + const isCurrentPlan = slug === subscription.slug; + let subscriptionText = "Upgrade"; + + if (subscription.tier > tier) { + subscriptionText = "Downgrade" + } + + if (tier === 3) { + subscriptionText = "Contact sales" + } + + return isCurrentPlan ? ( + | + + | + ) : ( ++ + | + ); + })} +
+ {!isSubscriptionLoading && subscription?.slug !== "enterprise" && subscription?.slug !== "pro" && subscription?.slug !== "pro-annual" && (
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/index.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/index.tsx
new file mode 100644
index 000000000..07696dc7e
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/index.tsx
@@ -0,0 +1 @@
+export { BillingCloudTab } from "./BillingCloudTab";
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/BillingDetailsTab.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/BillingDetailsTab.tsx
new file mode 100644
index 000000000..3e149a1fd
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/BillingDetailsTab.tsx
@@ -0,0 +1,15 @@
+import { CompanyNameSection } from "./CompanyNameSection";
+import { InvoiceEmailSection } from "./InvoiceEmailSection";
+import { PmtMethodsSection } from "./PmtMethodsSection";
+import { TaxIDSection } from "./TaxIDSection";
+
+export const BillingDetailsTab = () => {
+ return (
+ <>
+
+
+ )}
+ {!isLoading && data && subscription && (
+
+
+
+ Become Infisical
+Unlimited members, projects, RBAC, smart alerts, and so much more
+
+
+ )}
+
+
+ Current plan
++ {formatPlanSlug(subscription.slug)} +
+ +
+
+ Price
++ {`${formatAmount(data.amount)} / ${data.interval}`} +
+
+
+ Subscription renews on
++ {formatDate(data.currentPeriodEnd)} +
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsTable.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsTable.tsx
new file mode 100644
index 000000000..4eba19a50
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsTable.tsx
@@ -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 (
+
+
+ + Payment Methods +
+
+
+
+ | Brand | +Type | +Last 4 Digits | +Expiration | ++ |
|---|---|---|---|---|
| {brand.charAt(0).toUpperCase() + brand.slice(1)} | +{funding.charAt(0).toUpperCase() + funding.slice(1)} | +{last4} | +{`${exp_month}/${exp_year}`} | +
+ |
+
|
+ |
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDTable.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDTable.tsx
new file mode 100644
index 000000000..873b41cf6
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDTable.tsx
@@ -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 (
+
+
+ + Tax ID +
+
+
+ | Type | +Value | ++ |
|---|---|---|
| {taxIDTypeLabelMap[type]} | +{value} | +
+ |
+
|
+ |
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/InvoicesTable.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/InvoicesTable.tsx
new file mode 100644
index 000000000..9050f9d5f
--- /dev/null
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/InvoicesTable.tsx
@@ -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 (
+ Invoices
+| Invoice # | +Date | +Status | +Amount | ++ |
|---|---|---|---|---|
| {number} | +{formattedDate} | +{paid ? "Paid" : "Not Paid"} | +{formattedTotal} | +
+ |
+
|
+ |
+