awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-06 15:27:27 +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
frontend/src/hooks/api/organization/types.ts
+1 -1
View File
@@ -52,7 +52,7 @@ export type Invoice = {
}; };
export type PmtMethod = { export type PmtMethod = {
id: string; _id: string;
brand: string; brand: string;
exp_month: number; exp_month: number;
exp_year: number; exp_year: number;
frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsTable.tsx
+86 -59
View File
@@ -1,8 +1,10 @@
import { faCreditCard, faXmark } from "@fortawesome/free-solid-svg-icons"; import { faCreditCard, faXmark } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { createNotification } from "@app/components/notifications";
import { OrgPermissionCan } from "@app/components/permissions"; import { OrgPermissionCan } from "@app/components/permissions";
import { import {
DeleteActionModal,
EmptyState, EmptyState,
IconButton, IconButton,
Table, Table,
@@ -15,76 +17,101 @@ import {
Tr Tr
} from "@app/components/v2"; } from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context"; import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
import { usePopUp } from "@app/hooks";
import { useDeleteOrgPmtMethod, useGetOrgPmtMethods } from "@app/hooks/api"; import { useDeleteOrgPmtMethod, useGetOrgPmtMethods } from "@app/hooks/api";
export const PmtMethodsTable = () => { export const PmtMethodsTable = () => {
const { currentOrg } = useOrganization(); const { currentOrg } = useOrganization();
const { data, isLoading } = useGetOrgPmtMethods(currentOrg?.id ?? ""); const { data, isLoading } = useGetOrgPmtMethods(currentOrg?.id ?? "");
const deleteOrgPmtMethod = useDeleteOrgPmtMethod(); const deleteOrgPmtMethod = useDeleteOrgPmtMethod();
const { handlePopUpOpen, handlePopUpClose, handlePopUpToggle, popUp } = usePopUp([
"removeCard"
] as const);
const handleDeletePmtMethodBtnClick = async (pmtMethodId: string) => { const pmtMethodToRemove = popUp.removeCard.data as { id: string; last4: string } | undefined;
if (!currentOrg?.id) return;
await deleteOrgPmtMethod.mutateAsync({ const handleDeletePmtMethodBtnClick = async () => {
organizationId: currentOrg.id, if (!currentOrg?.id || !pmtMethodToRemove) return;
pmtMethodId 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 ( return (
<TableContainer className="mt-4"> <>
<Table> <TableContainer className="mt-4">
<THead> <Table>
<Tr> <THead>
<Th className="flex-1">Brand</Th> <Tr>
<Th className="flex-1">Type</Th> <Th className="flex-1">Brand</Th>
<Th className="flex-1">Last 4 Digits</Th> <Th className="flex-1">Type</Th>
<Th className="flex-1">Expiration</Th> <Th className="flex-1">Last 4 Digits</Th>
<Th className="w-5" /> <Th className="flex-1">Expiration</Th>
</Tr> <Th className="w-5" />
</THead> </Tr>
<TBody> </THead>
{!isLoading && <TBody>
data && {!isLoading &&
data?.length > 0 && data &&
data.map(({ id, brand, exp_month, exp_year, funding, last4 }) => ( data?.length > 0 &&
<Tr key={`pmt-method-${id}`} className="h-10"> data.map(({ _id: id, brand, exp_month, exp_year, funding, last4 }) => (
<Td>{brand.charAt(0).toUpperCase() + brand.slice(1)}</Td> <Tr key={`pmt-method-${id}`} className="h-10">
<Td>{funding.charAt(0).toUpperCase() + funding.slice(1)}</Td> <Td>{brand.charAt(0).toUpperCase() + brand.slice(1)}</Td>
<Td>{last4}</Td> <Td>{funding.charAt(0).toUpperCase() + funding.slice(1)}</Td>
<Td>{`${exp_month}/${exp_year}`}</Td> <Td>{last4}</Td>
<Td> <Td>{`${exp_month}/${exp_year}`}</Td>
<OrgPermissionCan <Td>
I={OrgPermissionActions.Delete} <OrgPermissionCan
a={OrgPermissionSubjects.Billing} I={OrgPermissionActions.Delete}
> a={OrgPermissionSubjects.Billing}
{(isAllowed) => ( >
<IconButton {(isAllowed) => (
onClick={async () => { <IconButton
await handleDeletePmtMethodBtnClick(id); onClick={() => handlePopUpOpen("removeCard", { id, last4 })}
}} size="lg"
size="lg" isDisabled={!isAllowed}
isDisabled={!isAllowed} colorSchema="danger"
colorSchema="danger" variant="plain"
variant="plain" ariaLabel="update"
ariaLabel="update" >
> <FontAwesomeIcon icon={faXmark} />
<FontAwesomeIcon icon={faXmark} /> </IconButton>
</IconButton> )}
)} </OrgPermissionCan>
</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> </Td>
</Tr> </Tr>
))} )}
{isLoading && <TableSkeleton columns={5} innerKey="pmt-methods" />} </TBody>
{!isLoading && data && data?.length === 0 && ( </Table>
<Tr> </TableContainer>
<Td colSpan={5}> <DeleteActionModal
<EmptyState title="No payment methods on file" icon={faCreditCard} /> isOpen={popUp.removeCard.isOpen}
</Td> deleteKey="confirm"
</Tr> onChange={(isOpen) => handlePopUpToggle("removeCard", isOpen)}
)} title={`Remove payment method ending in *${pmtMethodToRemove?.last4}?`}
</TBody> onDeleteApproved={handleDeletePmtMethodBtnClick}
</Table> />
</TableContainer> </>
); );
}; };