mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-16 19:28:35 +00:00
feat: added new secret input component and updated toolbar key special prop to innerKey
This commit is contained in:
akhilmhdh
+55
-70
@@ -1,4 +1,4 @@
|
||||
import { faCircleCheck, faCircleXmark,faFileInvoice } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faCircleCheck, faCircleXmark, faFileInvoice } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import {
|
||||
@@ -10,78 +10,63 @@ import {
|
||||
Td,
|
||||
Th,
|
||||
THead,
|
||||
Tr} from "@app/components/v2";
|
||||
Tr
|
||||
} from "@app/components/v2";
|
||||
import { useOrganization } from "@app/context";
|
||||
import {
|
||||
useGetOrgPlanTable
|
||||
} from "@app/hooks/api";
|
||||
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 (
|
||||
<FontAwesomeIcon
|
||||
icon={faCircleCheck}
|
||||
color='#2ecc71'
|
||||
/>
|
||||
);
|
||||
const { currentOrg } = useOrganization();
|
||||
const { data, isLoading } = useGetOrgPlanTable(currentOrg?._id ?? "");
|
||||
|
||||
return (
|
||||
<FontAwesomeIcon
|
||||
icon={faCircleXmark}
|
||||
color='#e74c3c'
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return value;
|
||||
const displayCell = (value: null | number | string | boolean) => {
|
||||
if (value === null) return "-";
|
||||
|
||||
if (typeof value === "boolean") {
|
||||
if (value) return <FontAwesomeIcon icon={faCircleCheck} color="#2ecc71" />;
|
||||
|
||||
return <FontAwesomeIcon icon={faCircleXmark} color="#e74c3c" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
|
||||
<h2 className="text-xl font-semibold flex-1 text-white mb-8">Current Usage</h2>
|
||||
<TableContainer className="mt-4">
|
||||
<Table>
|
||||
<THead>
|
||||
<Tr>
|
||||
<Th className="w-1/3">Feature</Th>
|
||||
<Th className="w-1/3">Allowed</Th>
|
||||
<Th className="w-1/3">Used</Th>
|
||||
</Tr>
|
||||
</THead>
|
||||
<TBody>
|
||||
{!isLoading && data && data?.rows?.length > 0 && data.rows.map(({
|
||||
name,
|
||||
allowed,
|
||||
used
|
||||
}) => {
|
||||
return (
|
||||
<Tr key={`current-plan-row-${name}`} className="h-12">
|
||||
<Td>{name}</Td>
|
||||
<Td>{displayCell(allowed)}</Td>
|
||||
<Td>{used}</Td>
|
||||
</Tr>
|
||||
);
|
||||
})}
|
||||
{isLoading && <TableSkeleton columns={5} key="invoices" />}
|
||||
{!isLoading && data && data?.rows?.length === 0 && (
|
||||
<Tr>
|
||||
<Td colSpan={3}>
|
||||
<EmptyState
|
||||
title="No plan details found"
|
||||
icon={faFileInvoice}
|
||||
/>
|
||||
</Td>
|
||||
</Tr>
|
||||
)}
|
||||
</TBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return value;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
|
||||
<h2 className="mb-8 flex-1 text-xl font-semibold text-white">Current Usage</h2>
|
||||
<TableContainer className="mt-4">
|
||||
<Table>
|
||||
<THead>
|
||||
<Tr>
|
||||
<Th className="w-1/3">Feature</Th>
|
||||
<Th className="w-1/3">Allowed</Th>
|
||||
<Th className="w-1/3">Used</Th>
|
||||
</Tr>
|
||||
</THead>
|
||||
<TBody>
|
||||
{!isLoading &&
|
||||
data &&
|
||||
data?.rows?.length > 0 &&
|
||||
data.rows.map(({ name, allowed, used }) => {
|
||||
return (
|
||||
<Tr key={`current-plan-row-${name}`} className="h-12">
|
||||
<Td>{name}</Td>
|
||||
<Td>{displayCell(allowed)}</Td>
|
||||
<Td>{used}</Td>
|
||||
</Tr>
|
||||
);
|
||||
})}
|
||||
{isLoading && <TableSkeleton columns={5} innerKey="invoices" />}
|
||||
{!isLoading && data && data?.rows?.length === 0 && (
|
||||
<Tr>
|
||||
<Td colSpan={3}>
|
||||
<EmptyState title="No plan details found" icon={faFileInvoice} />
|
||||
</Td>
|
||||
</Tr>
|
||||
)}
|
||||
</TBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
+117
-154
@@ -1,4 +1,4 @@
|
||||
import { faCircleCheck, faCircleXmark,faFileInvoice } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faCircleCheck, faCircleXmark, faFileInvoice } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import {
|
||||
@@ -11,166 +11,129 @@ import {
|
||||
Td,
|
||||
Th,
|
||||
THead,
|
||||
Tr,
|
||||
Tr
|
||||
} from "@app/components/v2";
|
||||
import { useOrganization,useSubscription } from "@app/context";
|
||||
import {
|
||||
useCreateCustomerPortalSession,
|
||||
useGetOrgPlansTable} from "@app/hooks/api";
|
||||
import { useOrganization, useSubscription } from "@app/context";
|
||||
import { useCreateCustomerPortalSession, useGetOrgPlansTable } from "@app/hooks/api";
|
||||
|
||||
type Props = {
|
||||
billingCycle: "monthly" | "yearly"
|
||||
}
|
||||
billingCycle: "monthly" | "yearly";
|
||||
};
|
||||
|
||||
export const ManagePlansTable = ({
|
||||
export const ManagePlansTable = ({ billingCycle }: Props) => {
|
||||
const { currentOrg } = useOrganization();
|
||||
const { subscription } = useSubscription();
|
||||
const { data: tableData, isLoading: isTableDataLoading } = useGetOrgPlansTable({
|
||||
organizationId: currentOrg?._id ?? "",
|
||||
billingCycle
|
||||
}: Props) => {
|
||||
const { currentOrg } = useOrganization();
|
||||
const { subscription } = useSubscription();
|
||||
const { data: tableData, isLoading: isTableDataLoading } = useGetOrgPlansTable({
|
||||
organizationId: currentOrg?._id ?? "",
|
||||
billingCycle
|
||||
});
|
||||
const createCustomerPortalSession = useCreateCustomerPortalSession();
|
||||
});
|
||||
const createCustomerPortalSession = useCreateCustomerPortalSession();
|
||||
|
||||
const displayCell = (value: null | number | string | boolean) => {
|
||||
if (value === null) return "Unlimited";
|
||||
|
||||
if (typeof value === "boolean") {
|
||||
if (value) return (
|
||||
<FontAwesomeIcon
|
||||
icon={faCircleCheck}
|
||||
color='#2ecc71'
|
||||
/>
|
||||
);
|
||||
const displayCell = (value: null | number | string | boolean) => {
|
||||
if (value === null) return "Unlimited";
|
||||
|
||||
return (
|
||||
<FontAwesomeIcon
|
||||
icon={faCircleXmark}
|
||||
color='#e74c3c'
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return value;
|
||||
if (typeof value === "boolean") {
|
||||
if (value) return <FontAwesomeIcon icon={faCircleCheck} color="#2ecc71" />;
|
||||
|
||||
return <FontAwesomeIcon icon={faCircleXmark} color="#e74c3c" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<THead>
|
||||
{subscription && !isTableDataLoading && tableData && (
|
||||
<Tr>
|
||||
<Th className="">Feature / Limit</Th>
|
||||
{tableData.head.map(({
|
||||
name,
|
||||
priceLine
|
||||
}) => {
|
||||
return (
|
||||
<Th
|
||||
key={`plans-feature-head-${billingCycle}-${name}`}
|
||||
className="text-center flex-1"
|
||||
>
|
||||
<p>{name}</p>
|
||||
<p>{priceLine}</p>
|
||||
</Th>
|
||||
);
|
||||
})}
|
||||
</Tr>
|
||||
)}
|
||||
</THead>
|
||||
<TBody>
|
||||
{subscription && !isTableDataLoading && tableData && tableData.rows.map(({
|
||||
name,
|
||||
starter,
|
||||
team,
|
||||
pro,
|
||||
enterprise
|
||||
}) => {
|
||||
return (
|
||||
<Tr className="h-12" key={`plans-feature-row-${billingCycle}-${name}`}>
|
||||
<Td>{displayCell(name)}</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>
|
||||
);
|
||||
})}
|
||||
{isTableDataLoading && <TableSkeleton columns={5} key="cloud-products" />}
|
||||
{!isTableDataLoading && tableData?.rows.length === 0 && (
|
||||
<Tr>
|
||||
<Td colSpan={5}>
|
||||
<EmptyState
|
||||
title="No cloud product details found"
|
||||
icon={faFileInvoice}
|
||||
/>
|
||||
</Td>
|
||||
</Tr>
|
||||
)}
|
||||
{subscription && !isTableDataLoading && tableData && (
|
||||
<Tr className="h-12">
|
||||
<Td />
|
||||
{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 value;
|
||||
};
|
||||
|
||||
return isCurrentPlan ? (
|
||||
<Td>
|
||||
<Button
|
||||
colorSchema="secondary"
|
||||
className="w-full"
|
||||
isDisabled
|
||||
>
|
||||
Current
|
||||
</Button>
|
||||
</Td>
|
||||
) : (
|
||||
<Td>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
if (!currentOrg?._id) return;
|
||||
|
||||
if (tier !== 3) {
|
||||
const { url } = await createCustomerPortalSession.mutateAsync(currentOrg._id);
|
||||
window.location.href = url;
|
||||
return;
|
||||
}
|
||||
|
||||
window.location.href = "https://infisical.com/scheduledemo";
|
||||
}}
|
||||
color="mineshaft"
|
||||
className="w-full"
|
||||
>
|
||||
{subscriptionText}
|
||||
</Button>
|
||||
</Td>
|
||||
);
|
||||
})}
|
||||
</Tr>
|
||||
)}
|
||||
</TBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<THead>
|
||||
{subscription && !isTableDataLoading && tableData && (
|
||||
<Tr>
|
||||
<Th className="">Feature / Limit</Th>
|
||||
{tableData.head.map(({ name, priceLine }) => {
|
||||
return (
|
||||
<Th
|
||||
key={`plans-feature-head-${billingCycle}-${name}`}
|
||||
className="flex-1 text-center"
|
||||
>
|
||||
<p>{name}</p>
|
||||
<p>{priceLine}</p>
|
||||
</Th>
|
||||
);
|
||||
})}
|
||||
</Tr>
|
||||
)}
|
||||
</THead>
|
||||
<TBody>
|
||||
{subscription &&
|
||||
!isTableDataLoading &&
|
||||
tableData &&
|
||||
tableData.rows.map(({ name, starter, team, pro, enterprise }) => {
|
||||
return (
|
||||
<Tr className="h-12" key={`plans-feature-row-${billingCycle}-${name}`}>
|
||||
<Td>{displayCell(name)}</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>
|
||||
);
|
||||
})}
|
||||
{isTableDataLoading && <TableSkeleton columns={5} innerKey="cloud-products" />}
|
||||
{!isTableDataLoading && tableData?.rows.length === 0 && (
|
||||
<Tr>
|
||||
<Td colSpan={5}>
|
||||
<EmptyState title="No cloud product details found" icon={faFileInvoice} />
|
||||
</Td>
|
||||
</Tr>
|
||||
)}
|
||||
{subscription && !isTableDataLoading && tableData && (
|
||||
<Tr className="h-12">
|
||||
<Td />
|
||||
{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 ? (
|
||||
<Td>
|
||||
<Button colorSchema="secondary" className="w-full" isDisabled>
|
||||
Current
|
||||
</Button>
|
||||
</Td>
|
||||
) : (
|
||||
<Td>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
if (!currentOrg?._id) return;
|
||||
|
||||
if (tier !== 3) {
|
||||
const { url } = await createCustomerPortalSession.mutateAsync(
|
||||
currentOrg._id
|
||||
);
|
||||
window.location.href = url;
|
||||
return;
|
||||
}
|
||||
|
||||
window.location.href = "https://infisical.com/scheduledemo";
|
||||
}}
|
||||
color="mineshaft"
|
||||
className="w-full"
|
||||
>
|
||||
{subscriptionText}
|
||||
</Button>
|
||||
</Td>
|
||||
);
|
||||
})}
|
||||
</Tr>
|
||||
)}
|
||||
</TBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
);
|
||||
};
|
||||
|
||||
+61
-71
@@ -14,78 +14,68 @@ import {
|
||||
Tr
|
||||
} from "@app/components/v2";
|
||||
import { useOrganization } from "@app/context";
|
||||
import {
|
||||
useDeleteOrgPmtMethod,
|
||||
useGetOrgPmtMethods
|
||||
} from "@app/hooks/api";
|
||||
import { useDeleteOrgPmtMethod, useGetOrgPmtMethods } from "@app/hooks/api";
|
||||
|
||||
export const PmtMethodsTable = () => {
|
||||
const { currentOrg } = useOrganization();
|
||||
const { data, isLoading } = useGetOrgPmtMethods(currentOrg?._id ?? "");
|
||||
const deleteOrgPmtMethod = useDeleteOrgPmtMethod();
|
||||
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
|
||||
});
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
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} innerKey="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>
|
||||
);
|
||||
};
|
||||
|
||||
+109
-116
@@ -1,4 +1,4 @@
|
||||
import { faFileInvoice,faXmark } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faFileInvoice, faXmark } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import {
|
||||
@@ -11,127 +11,120 @@ import {
|
||||
Td,
|
||||
Th,
|
||||
THead,
|
||||
Tr,
|
||||
Tr
|
||||
} from "@app/components/v2";
|
||||
import { useOrganization } from "@app/context";
|
||||
import {
|
||||
useDeleteOrgTaxId,
|
||||
useGetOrgTaxIds
|
||||
} from "@app/hooks/api";
|
||||
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"
|
||||
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 { 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
|
||||
});
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
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} innerKey="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>
|
||||
);
|
||||
};
|
||||
|
||||
+61
-70
@@ -14,76 +14,67 @@ import {
|
||||
Tr
|
||||
} from "@app/components/v2";
|
||||
import { useOrganization } from "@app/context";
|
||||
import {
|
||||
useGetOrgInvoices
|
||||
} from "@app/hooks/api";
|
||||
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" />
|
||||
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>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
);
|
||||
})}
|
||||
{isLoading && <TableSkeleton columns={5} innerKey="invoices" />}
|
||||
{!isLoading && data && data?.length === 0 && (
|
||||
<Tr>
|
||||
<Td colSpan={5}>
|
||||
<EmptyState title="No invoices on file" icon={faFileInvoice} />
|
||||
</Td>
|
||||
</Tr>
|
||||
)}
|
||||
</TBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user