improvement: disable tab select by default on filterable select

* feat: Add new tag when creating secret

.env.example

@@ -74,8 +74,8 @@ CAPTCHA_SECRET=
 
 NEXT_PUBLIC_CAPTCHA_SITE_KEY=
 
-OTEL_TELEMETRY_COLLECTION_ENABLED=
-OTEL_EXPORT_TYPE=
+OTEL_TELEMETRY_COLLECTION_ENABLED=false
+OTEL_EXPORT_TYPE=prometheus
 OTEL_EXPORT_OTLP_ENDPOINT=
 OTEL_OTLP_PUSH_INTERVAL=
 

backend/src/lib/config/env.ts

@@ -10,7 +10,7 @@ export const GITLAB_URL = "https://gitlab.com";
 export const IS_PACKAGED = (process as any)?.pkg !== undefined;
 
 const zodStrBool = z
-  .enum(["true", "false"])
+  .string()
   .optional()
   .transform((val) => val === "true");
 

frontend/package-lock.json

@@ -89,7 +89,7 @@
         "react-mailchimp-subscribe": "^2.1.3",
         "react-markdown": "^8.0.3",
         "react-redux": "^8.0.2",
-        "react-select": "^5.8.1",
+        "react-select": "^5.8.3",
         "react-table": "^7.8.0",
         "react-toastify": "^9.1.3",
         "sanitize-html": "^2.12.1",
@@ -21259,9 +21259,9 @@
       }
     },
     "node_modules/react-select": {
-      "version": "5.8.1",
-      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.1.tgz",
-      "integrity": "sha512-RT1CJmuc+ejqm5MPgzyZujqDskdvB9a9ZqrdnVLsvAHjJ3Tj0hELnLeVPQlmYdVKCdCpxanepl6z7R5KhXhWzg==",
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.3.tgz",
+      "integrity": "sha512-lVswnIq8/iTj1db7XCG74M/3fbGB6ZaluCzvwPGT5ZOjCdL/k0CLWhEK0vCBLuU5bHTEf6Gj8jtSvi+3v+tO1w==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.12.0",

frontend/package.json

@@ -162,4 +162,4 @@
     "tailwindcss": "3.2",
     "typescript": "^4.9.3"
   }
-}
+}

frontend/src/components/v2/CreatableSelect/CreatableSelect.tsx

@@ -0,0 +1,68 @@
+import { GroupBase } from "react-select";
+import ReactSelectCreatable, { CreatableProps } from "react-select/creatable";
+import { twMerge } from "tailwind-merge";
+
+import { ClearIndicator, DropdownIndicator, MultiValueRemove, Option } from "../Select/components";
+
+export const CreatableSelect = <T,>({
+  isMulti,
+  closeMenuOnSelect,
+  ...props
+}: CreatableProps<T, boolean, GroupBase<T>>) => {
+  return (
+    <ReactSelectCreatable
+      isMulti={isMulti}
+      closeMenuOnSelect={closeMenuOnSelect ?? !isMulti}
+      hideSelectedOptions={false}
+      unstyled
+      styles={{
+        input: (base) => ({
+          ...base,
+          "input:focus": {
+            boxShadow: "none"
+          }
+        }),
+        multiValueLabel: (base) => ({
+          ...base,
+          whiteSpace: "normal",
+          overflow: "visible"
+        }),
+        control: (base) => ({
+          ...base,
+          transition: "none"
+        })
+      }}
+      components={{ DropdownIndicator, ClearIndicator, MultiValueRemove, Option }}
+      classNames={{
+        container: () => "w-full font-inter",
+        control: ({ isFocused }) =>
+          twMerge(
+            isFocused ? "border-primary-400/50" : "border-mineshaft-600 hover:border-gray-400",
+            "border w-full p-0.5 rounded-md text-mineshaft-200 font-inter bg-mineshaft-900 hover:cursor-pointer"
+          ),
+        placeholder: () => "text-mineshaft-400 text-sm pl-1 py-0.5",
+        input: () => "pl-1 py-0.5",
+        valueContainer: () => `p-1 max-h-[14rem] ${isMulti ? "!overflow-y-scroll" : ""} gap-1`,
+        singleValue: () => "leading-7 ml-1",
+        multiValue: () => "bg-mineshaft-600 rounded items-center py-0.5 px-2 gap-1.5",
+        multiValueLabel: () => "leading-6 text-sm",
+        multiValueRemove: () => "hover:text-red text-bunker-400",
+        indicatorsContainer: () => "p-1 gap-1",
+        clearIndicator: () => "p-1 hover:text-red text-bunker-400",
+        indicatorSeparator: () => "bg-bunker-400",
+        dropdownIndicator: () => "text-bunker-200 p-1",
+        menu: () =>
+          "mt-2 border text-sm text-mineshaft-200 bg-mineshaft-900 border-mineshaft-600 rounded-md",
+        groupHeading: () => "ml-3 mt-2 mb-1 text-mineshaft-400 text-sm",
+        option: ({ isFocused, isSelected }) =>
+          twMerge(
+            isFocused && "bg-mineshaft-700 active:bg-mineshaft-600",
+            isSelected && "text-mineshaft-200",
+            "hover:cursor-pointer text-xs px-3 py-2"
+          ),
+        noOptionsMessage: () => "text-mineshaft-400 p-2 rounded-md"
+      }}
+      {...props}
+    />
+  );
+};

frontend/src/components/v2/CreatableSelect/index.tsx

@@ -0,0 +1 @@
+export * from "./CreatableSelect";

frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx

@@ -1,52 +1,14 @@
-import Select, {
-  ClearIndicatorProps,
-  components,
-  DropdownIndicatorProps,
-  MultiValueRemoveProps,
-  OptionProps,
-  Props
-} from "react-select";
-import { faCheckCircle, faCircleXmark } from "@fortawesome/free-regular-svg-icons";
-import { faChevronDown, faXmark } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Select, { Props } from "react-select";
 import { twMerge } from "tailwind-merge";
 
-const DropdownIndicator = <T,>(props: DropdownIndicatorProps<T>) => {
-  return (
-    <components.DropdownIndicator {...props}>
-      <FontAwesomeIcon icon={faChevronDown} size="xs" />
-    </components.DropdownIndicator>
-  );
-};
+import { ClearIndicator, DropdownIndicator, MultiValueRemove, Option } from "../Select/components";
 
-const ClearIndicator = <T,>(props: ClearIndicatorProps<T>) => {
-  return (
-    <components.ClearIndicator {...props}>
-      <FontAwesomeIcon icon={faCircleXmark} />
-    </components.ClearIndicator>
-  );
-};
-
-const MultiValueRemove = (props: MultiValueRemoveProps) => {
-  return (
-    <components.MultiValueRemove {...props}>
-      <FontAwesomeIcon icon={faXmark} size="xs" />
-    </components.MultiValueRemove>
-  );
-};
-
-const Option = <T,>({ isSelected, children, ...props }: OptionProps<T>) => {
-  return (
-    <components.Option isSelected={isSelected} {...props}>
-      {children}
-      {isSelected && (
-        <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
-      )}
-    </components.Option>
-  );
-};
-
-export const FilterableSelect = <T,>({ isMulti, closeMenuOnSelect, ...props }: Props<T>) => (
+export const FilterableSelect = <T,>({
+  isMulti,
+  closeMenuOnSelect,
+  tabSelectsValue = false,
+  ...props
+}: Props<T>) => (
   <Select
     isMulti={isMulti}
     closeMenuOnSelect={closeMenuOnSelect ?? !isMulti}
@@ -69,6 +31,7 @@ export const FilterableSelect = <T,>({ isMulti, closeMenuOnSelect, ...props }: P
         transition: "none"
       })
     }}
+    tabSelectsValue={tabSelectsValue}
     components={{ DropdownIndicator, ClearIndicator, MultiValueRemove, Option }}
     classNames={{
       container: () => "w-full font-inter",

frontend/src/components/v2/Select/components/index.tsx

@@ -0,0 +1,45 @@
+import {
+  ClearIndicatorProps,
+  components,
+  DropdownIndicatorProps,
+  MultiValueRemoveProps,
+  OptionProps
+} from "react-select";
+import { faCheckCircle, faCircleXmark } from "@fortawesome/free-regular-svg-icons";
+import { faChevronDown, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+export const DropdownIndicator = <T,>(props: DropdownIndicatorProps<T>) => {
+  return (
+    <components.DropdownIndicator {...props}>
+      <FontAwesomeIcon icon={faChevronDown} size="xs" />
+    </components.DropdownIndicator>
+  );
+};
+
+export const ClearIndicator = <T,>(props: ClearIndicatorProps<T>) => {
+  return (
+    <components.ClearIndicator {...props}>
+      <FontAwesomeIcon icon={faCircleXmark} />
+    </components.ClearIndicator>
+  );
+};
+
+export const MultiValueRemove = (props: MultiValueRemoveProps) => {
+  return (
+    <components.MultiValueRemove {...props}>
+      <FontAwesomeIcon icon={faXmark} size="xs" />
+    </components.MultiValueRemove>
+  );
+};
+
+export const Option = <T,>({ isSelected, children, ...props }: OptionProps<T>) => {
+  return (
+    <components.Option isSelected={isSelected} {...props}>
+      {children}
+      {isSelected && (
+        <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
+      )}
+    </components.Option>
+  );
+};

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/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/AddOrgMemberModal.tsx

@@ -1,28 +1,18 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-import {
-  faCheckCircle,
-  faChevronDown,
-  faExclamationCircle
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
 import {
   Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
+  FilterableSelect,
   FormControl,
   Modal,
   ModalContent,
   Select,
   SelectItem,
-  TextArea,
-  Tooltip
+  TextArea
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { isCustomOrgRole } from "@app/helpers/roles";
@@ -44,7 +34,16 @@ const EmailSchema = z.string().email().min(1).trim().toLowerCase();
 
 const addMemberFormSchema = z.object({
   emails: z.string().min(1).trim().toLowerCase(),
-  projectIds: z.array(z.string().min(1).trim().toLowerCase()).default([]),
+  projects: z
+    .array(
+      z.object({
+        name: z.string(),
+        id: z.string(),
+        slug: z.string(),
+        version: z.nativeEnum(ProjectVersion)
+      })
+    )
+    .default([]),
   projectRoleSlug: z.string().min(1).default(DEFAULT_ORG_AND_PROJECT_MEMBER_ROLE_SLUG),
   organizationRoleSlug: z.string().min(1).default(DEFAULT_ORG_AND_PROJECT_MEMBER_ROLE_SLUG)
 });
@@ -72,7 +71,7 @@ export const AddOrgMemberModal = ({
   const { data: organizationRoles } = useGetOrgRoles(currentOrg?.id ?? "");
   const { data: serverDetails } = useFetchServerStatus();
   const { mutateAsync: addUsersMutateAsync } = useAddUsersToOrg();
-  const { data: projects } = useGetUserWorkspaces(true);
+  const { data: projects, isLoading: isProjectsLoading } = useGetUserWorkspaces(true);
 
   const {
     control,
@@ -95,18 +94,14 @@ export const AddOrgMemberModal = ({
     }
   }, [organizationRoles]);
 
-  const selectedProjectIds = watch("projectIds", []);
-
   const onAddMembers = async ({
     emails,
     organizationRoleSlug,
-    projectIds,
+    projects: selectedProjects,
     projectRoleSlug
   }: TAddMemberForm) => {
     if (!currentOrg?.id) return;
 
-    const selectedProjects = projects?.filter((project) => projectIds.includes(String(project.id)));
-
     if (selectedProjects?.length) {
       // eslint-disable-next-line no-restricted-syntax
       for (const project of selectedProjects) {
@@ -144,7 +139,7 @@ export const AddOrgMemberModal = ({
         organizationId: currentOrg?.id,
         inviteeEmails: emails.split(",").map((email) => email.trim()),
         organizationRoleSlug,
-        projects: projectIds.map((id) => ({ id, projectRoleSlug: [projectRoleSlug] }))
+        projects: selectedProjects.map(({ id }) => ({ id, projectRoleSlug: [projectRoleSlug] }))
       });
 
       setCompleteInviteLinks(data?.completeInviteLinks ?? null);
@@ -182,6 +177,7 @@ export const AddOrgMemberModal = ({
       }}
     >
       <ModalContent
+        bodyClassName="overflow-visible"
         title={`Invite others to ${currentOrg?.name}`}
         subTitle={
           <div>
@@ -236,98 +232,33 @@ export const AddOrgMemberModal = ({
               )}
             />
 
-            <div className="flex items-center justify-between gap-2">
+            <div className="flex items-start justify-between gap-2">
               <div className="w-full">
                 <Controller
                   control={control}
-                  name="projectIds"
-                  render={({ field, fieldState: { error } }) => (
+                  name="projects"
+                  render={({ field: { value, onChange }, fieldState: { error } }) => (
                     <FormControl
-                      label="Assign users to projects (optional)"
+                      label="Assign users to projects"
+                      isOptional
                       isError={Boolean(error?.message)}
                       errorText={error?.message}
                     >
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          {projects && projects.length > 0 ? (
-                            <div className="inline-flex w-full cursor-pointer items-center justify-between rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
-                              {/* eslint-disable-next-line no-nested-ternary */}
-                              {selectedProjectIds.length === 1
-                                ? projects.find((project) => project.id === selectedProjectIds[0])
-                                    ?.name
-                                : selectedProjectIds.length === 0
-                                ? "No projects selected"
-                                : `${selectedProjectIds.length} projects selected`}
-                              <FontAwesomeIcon icon={faChevronDown} className="text-xs" />
-                            </div>
-                          ) : (
-                            <div className="inline-flex w-full cursor-default items-center justify-between rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
-                              No projects found
-                            </div>
-                          )}
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent
-                          align="start"
-                          className="thin-scrollbar z-[100] max-h-80"
-                        >
-                          {projects && projects.length > 0 ? (
-                            projects.map((project) => {
-                              const isSelected = selectedProjectIds.includes(String(project.id));
-
-                              return (
-                                <DropdownMenuItem
-                                  onSelect={(event) =>
-                                    projects.length > 1 && event.preventDefault()
-                                  }
-                                  onClick={() => {
-                                    if (selectedProjectIds.includes(String(project.id))) {
-                                      field.onChange(
-                                        selectedProjectIds.filter(
-                                          (projectId: string) => projectId !== String(project.id)
-                                        )
-                                      );
-                                    } else {
-                                      field.onChange([...selectedProjectIds, String(project.id)]);
-                                    }
-                                  }}
-                                  key={`project-id-${project.id}`}
-                                  icon={
-                                    isSelected ? (
-                                      <FontAwesomeIcon
-                                        icon={faCheckCircle}
-                                        className="pr-0.5 text-primary"
-                                      />
-                                    ) : (
-                                      <div className="pl-[1.01rem]" />
-                                    )
-                                  }
-                                  iconPos="left"
-                                  className="w-[28.4rem] text-sm"
-                                >
-                                  <div className="flex items-center gap-2 capitalize">
-                                    {project.name}
-                                    {project.version !== ProjectVersion.V3 && (
-                                      <Tooltip content="Project is not compatible with this action, please upgrade this project.">
-                                        <FontAwesomeIcon
-                                          icon={faExclamationCircle}
-                                          className="text-xs opacity-50"
-                                        />
-                                      </Tooltip>
-                                    )}
-                                  </div>
-                                </DropdownMenuItem>
-                              );
-                            })
-                          ) : (
-                            <div />
-                          )}
-                        </DropdownMenuContent>
-                      </DropdownMenu>
+                      <FilterableSelect
+                        isMulti
+                        value={value}
+                        onChange={onChange}
+                        isLoading={isProjectsLoading}
+                        getOptionLabel={(project) => project.name}
+                        getOptionValue={(project) => project.id}
+                        options={projects}
+                        placeholder="Select projects..."
+                      />
                     </FormControl>
                   )}
                 />
               </div>
-              <div className="flex min-w-fit justify-end">
+              <div className="mt-[0.15rem] flex min-w-fit justify-end">
                 <Controller
                   control={control}
                   name="projectRoleSlug"
@@ -340,7 +271,7 @@ export const AddOrgMemberModal = ({
                     >
                       <div>
                         <Select
-                          isDisabled={selectedProjectIds.length === 0}
+                          isDisabled={watch("projects", []).length === 0}
                           defaultValue={DEFAULT_ORG_AND_PROJECT_MEMBER_ROLE_SLUG}
                           {...field}
                           onValueChange={(val) => field.onChange(val)}

frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -6,11 +6,12 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FilterableSelect, FormControl, Input } from "@app/components/v2";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { CreatableSelect } from "@app/components/v2/CreatableSelect";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
 import { getKeyValue } from "@app/helpers/parseEnvVar";
-import { useCreateSecretV3, useGetWsTags } from "@app/hooks/api";
+import { useCreateSecretV3, useCreateWsTag, useGetWsTags } from "@app/hooks/api";
 import { SecretType } from "@app/hooks/api/types";
 
 import { PopUpNames, usePopUpAction } from "../../SecretMainPage.store";
@@ -50,12 +51,32 @@ export const CreateSecretForm = ({
   const { closePopUp } = usePopUpAction();
 
   const { mutateAsync: createSecretV3 } = useCreateSecretV3();
+  const createWsTag = useCreateWsTag();
+
   const { permission } = useProjectPermission();
   const canReadTags = permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.Tags);
   const { data: projectTags, isLoading: isTagsLoading } = useGetWsTags(
     canReadTags ? workspaceId : ""
   );
 
+  const slugSchema = z.string().trim().toLowerCase().min(1);
+  const createNewTag = async (slug: string) => {
+    // TODO: Replace with slugSchema generic
+    try {
+      const parsedSlug = slugSchema.parse(slug);
+      await createWsTag.mutateAsync({
+        workspaceID: workspaceId,
+        tagSlug: parsedSlug,
+        tagColor: ""
+      });
+    } catch {
+      createNotification({
+        type: "error",
+        text: "Failed to create new tag"
+      });
+    }
+  };
+
   const handleFormSubmit = async ({ key, value, tags }: TFormSchema) => {
     try {
       await createSecretV3({
@@ -148,16 +169,18 @@ export const CreateSecretForm = ({
               )
             }
           >
-            <FilterableSelect
+            <CreatableSelect
+              isMulti
               className="w-full"
               placeholder="Select tags to assign to secret..."
-              isMulti
+              isValidNewOption={(v) => slugSchema.safeParse(v).success}
               name="tagIds"
               isDisabled={!canReadTags}
               isLoading={isTagsLoading && canReadTags}
               options={projectTags?.map((el) => ({ label: el.slug, value: el.id }))}
               value={field.value}
               onChange={field.onChange}
+              onCreateOption={createNewTag}
             />
           </FormControl>
         )}

frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -7,15 +7,8 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  Checkbox,
-  FilterableSelect,
-  FormControl,
-  FormLabel,
-  Input,
-  Tooltip
-} from "@app/components/v2";
+import { Button, Checkbox, FormControl, FormLabel, Input, Tooltip } from "@app/components/v2";
+import { CreatableSelect } from "@app/components/v2/CreatableSelect";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import {
   ProjectPermissionActions,
@@ -27,6 +20,7 @@ import { getKeyValue } from "@app/helpers/parseEnvVar";
 import {
   useCreateFolder,
   useCreateSecretV3,
+  useCreateWsTag,
   useGetWsTags,
   useUpdateSecretV3
 } from "@app/hooks/api";
@@ -199,6 +193,25 @@ export const CreateSecretForm = ({ secretPath = "/", getSecretByKey, onClose }:
     setValue("value", value);
   };
 
+  const createWsTag = useCreateWsTag();
+  const slugSchema = z.string().trim().toLowerCase().min(1);
+  const createNewTag = async (slug: string) => {
+    // TODO: Replace with slugSchema generic
+    try {
+      const parsedSlug = slugSchema.parse(slug);
+      await createWsTag.mutateAsync({
+        workspaceID: workspaceId,
+        tagSlug: parsedSlug,
+        tagColor: ""
+      });
+    } catch {
+      createNotification({
+        type: "error",
+        text: "Failed to create new tag"
+      });
+    }
+  };
+
   return (
     <form onSubmit={handleSubmit(handleFormSubmit)} noValidate>
       <FormControl
@@ -249,16 +262,18 @@ export const CreateSecretForm = ({ secretPath = "/", getSecretByKey, onClose }:
               )
             }
           >
-            <FilterableSelect
-              className="w-full"
-              placeholder="Select tags to assign to secrets..."
+            <CreatableSelect
               isMulti
+              className="w-full"
+              placeholder="Select tags to assign to secret..."
+              isValidNewOption={(v) => slugSchema.safeParse(v).success}
               name="tagIds"
               isDisabled={!canReadTags}
               isLoading={isTagsLoading && canReadTags}
               options={projectTags?.map((el) => ({ label: el.slug, value: el.id }))}
               value={field.value}
               onChange={field.onChange}
+              onCreateOption={createNewTag}
             />
           </FormControl>
         )}

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,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}
+      />
+    </>
   );
 };