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

Fix: Resolve Remove Payment Method Error

frontend/src/hooks/api/organization/types.ts

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

frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsTable.tsx

@@ -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,22 +17,41 @@ 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) => {
+  const pmtMethodToRemove = popUp.removeCard.data as { id: string; last4: string } | undefined;
-    if (!currentOrg?.id) return;
+
+  const handleDeletePmtMethodBtnClick = async () => {
+    if (!currentOrg?.id || !pmtMethodToRemove) return;
+    try {
       await deleteOrgPmtMethod.mutateAsync({
         organizationId: currentOrg.id,
-      pmtMethodId
+        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>
@@ -46,7 +67,7 @@ export const PmtMethodsTable = () => {
             {!isLoading &&
               data &&
               data?.length > 0 &&
-            data.map(({ id, brand, exp_month, exp_year, funding, last4 }) => (
+              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>
@@ -59,9 +80,7 @@ export const PmtMethodsTable = () => {
                     >
                       {(isAllowed) => (
                         <IconButton
-                        onClick={async () => {
+                          onClick={() => handlePopUpOpen("removeCard", { id, last4 })}
-                          await handleDeletePmtMethodBtnClick(id);
-                        }}
                           size="lg"
                           isDisabled={!isAllowed}
                           colorSchema="danger"
@@ -86,5 +105,13 @@ export const PmtMethodsTable = () => {
           </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}
+      />
+    </>
   );
 };