fix: correct payment ID to remove payment method and add confirmation…

…/notification for removal
Infisical · Nov 23, 2024 · 46ad1d4 · 46ad1d4
1 parent 64bfa4f
commit 46ad1d4
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 60 deletions.
diff --git a/frontend/src/hooks/api/organization/types.ts b/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;

diff --git a/...d/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsTable.tsx b/...d/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,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>
-                </Td>
-              </Tr>
-            ))}
-          {isLoading && <TableSkeleton columns={5} innerKey="pmt-methods" />}
-          {!isLoading && data && data?.length === 0 && (
+    <>
+      <TableContainer className="mt-4">
+        <Table>
+          <THead>
             <Tr>
-              <Td colSpan={5}>
-                <EmptyState title="No payment methods on file" icon={faCreditCard} />
-              </Td>
+              <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>
-          )}
-        </TBody>
-      </Table>
-    </TableContainer>
+          </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>
+            )}
+          </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}
+      />
+    </>
   );
 };