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

Merge pull request #2782 from Infisical/fix-remove-payment-method

Browse Source 
Fix: Resolve Remove Payment Method Error
This commit is contained in:
Scott Wilson
2024-11-26 10:54:55 -08:00
committed by GitHub
parent 44b02d5324 46ad1d47a9
commit 539e5b1907
2 changed files with 87 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/hooks/api/organization/types.ts
View File

@@ -52,7 +52,7 @@ export type Invoice = {
};
export type PmtMethod = {
id: string;
_id: string;
brand: string;
exp_month: number;
exp_year: number;

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

@@ -1,8 +1,10 @@
import { faCreditCard, faXmark } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { createNotification } from "@app/components/notifications";
import { OrgPermissionCan } from "@app/components/permissions";
import {
DeleteActionModal,
EmptyState,
IconButton,
Table,
@@ -15,76 +17,101 @@ import {
Tr
} from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
import { usePopUp } from "@app/hooks";
import { useDeleteOrgPmtMethod, useGetOrgPmtMethods } from "@app/hooks/api";
export const PmtMethodsTable = () => {
const { currentOrg } = useOrganization();
const { data, isLoading } = useGetOrgPmtMethods(currentOrg?.id ?? "");
const deleteOrgPmtMethod = useDeleteOrgPmtMethod();
const { handlePopUpOpen, handlePopUpClose, handlePopUpToggle, popUp } = usePopUp([
"removeCard"
] as const);
const handleDeletePmtMethodBtnClick = async (pmtMethodId: string) => {
if (!currentOrg?.id) return;
await deleteOrgPmtMethod.mutateAsync({
organizationId: currentOrg.id,
pmtMethodId
});
const pmtMethodToRemove = popUp.removeCard.data as { id: string; last4: string } | undefined;
const handleDeletePmtMethodBtnClick = async () => {
if (!currentOrg?.id || !pmtMethodToRemove) return;
try {
await deleteOrgPmtMethod.mutateAsync({
organizationId: currentOrg.id,
pmtMethodId: pmtMethodToRemove.id
});
createNotification({
type: "success",
text: "Successfully removed payment method"
});
handlePopUpClose("removeCard");
} catch (error: any) {
createNotification({
type: "error",
text: error.message ?? "Error removing payment method"
});
}
};
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>
<OrgPermissionCan
I={OrgPermissionActions.Delete}
a={OrgPermissionSubjects.Billing}
>
{(isAllowed) => (
<IconButton
onClick={async () => {
await handleDeletePmtMethodBtnClick(id);
}}
size="lg"
isDisabled={!isAllowed}
colorSchema="danger"
variant="plain"
ariaLabel="update"
>
<FontAwesomeIcon icon={faXmark} />
</IconButton>
)}
</OrgPermissionCan>
<>
<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: 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>
<OrgPermissionCan
I={OrgPermissionActions.Delete}
a={OrgPermissionSubjects.Billing}
>
{(isAllowed) => (
<IconButton
onClick={() => handlePopUpOpen("removeCard", { id, last4 })}
size="lg"
isDisabled={!isAllowed}
colorSchema="danger"
variant="plain"
ariaLabel="update"
>
<FontAwesomeIcon icon={faXmark} />
</IconButton>
)}
</OrgPermissionCan>
</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>
))}
{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>
)}
</TBody>
</Table>
</TableContainer>
<DeleteActionModal
isOpen={popUp.removeCard.isOpen}
deleteKey="confirm"
onChange={(isOpen) => handlePopUpToggle("removeCard", isOpen)}
title={`Remove payment method ending in *${pmtMethodToRemove?.last4}?`}
onDeleteApproved={handleDeletePmtMethodBtnClick}
/>
</>
);
};