Modernize ConfirmActionDropdown to ConfirmActionModal

components/display-product-modal.tsx

@@ -19,7 +19,7 @@ import ImageCarousel from "./utility-components/image-carousel";
 import CompactCategories from "./utility-components/compact-categories";
 import { locationAvatar } from "./utility-components/dropdowns/location-dropdown";
 import { SHOPSTRBUTTONCLASSNAMES } from "@/utils/STATIC-VARIABLES";
-import ConfirmActionDropdown from "./utility-components/dropdowns/confirm-action-dropdown";
+import ConfirmActionModal from "./utility-components/modals/confirm-action-modal";
 import { ProfileWithDropdown } from "./utility-components/profile/profile-dropdown";
 import SuccessModal from "./utility-components/success-modal";
 import { SignerContext } from "@/components/utility-components/nostr-context-provider";
@@ -326,9 +326,9 @@ export default function DisplayProductModal({
                   >
                     Edit Listing
                   </Button>
-                  <ConfirmActionDropdown
-                    helpText="Are you sure you want to delete this listing?"
-                    buttonLabel="Delete Listing"
+                  <ConfirmActionModal
+                    description="Are you sure you want to delete this listing?"
+                    confirmLabel="Delete Listing"
                     onConfirm={beginDeleteListingProcess}
                   >
                     <Button
@@ -341,7 +341,7 @@ export default function DisplayProductModal({
                     >
                       Delete Listing
                     </Button>
-                  </ConfirmActionDropdown>
+                  </ConfirmActionModal>
                 </>
               )}
             </div>

components/my-listings/discount-codes.tsx

@@ -10,7 +10,7 @@ import {
 import { TrashIcon } from "@heroicons/react/24/outline";
 import { SHOPSTRBUTTONCLASSNAMES } from "@/utils/STATIC-VARIABLES";
 import { SignerContext } from "@/components/utility-components/nostr-context-provider";
-import ConfirmActionDropdown from "../utility-components/dropdowns/confirm-action-dropdown";
+import ConfirmActionModal from "../utility-components/modals/confirm-action-modal";
 
 interface DiscountCode {
   code: string;
@@ -218,15 +218,15 @@ export default function DiscountCodes() {
                       </p>
                     )}
                   </div>
-                  <ConfirmActionDropdown
-                    helpText="Are you sure you want to delete this discount code?"
-                    buttonLabel="Delete Code"
+                  <ConfirmActionModal
+                    description="Are you sure you want to delete this discount code?"
+                    confirmLabel="Delete Code"
                     onConfirm={() => handleDeleteCode(code.code)}
                   >
                     <Button isIconOnly color="danger" variant="light" size="sm">
                       <TrashIcon className="h-5 w-5" />
                     </Button>
-                  </ConfirmActionDropdown>
+                  </ConfirmActionModal>
                 </div>
               </CardBody>
             </Card>

components/product-form.tsx

@@ -38,7 +38,7 @@ import {
   finalizeAndSendNostrEvent,
 } from "@/utils/nostr/nostr-helper-functions";
 import LocationDropdown from "./utility-components/dropdowns/location-dropdown";
-import ConfirmActionDropdown from "./utility-components/dropdowns/confirm-action-dropdown";
+import ConfirmActionModal from "./utility-components/modals/confirm-action-modal";
 import { ProductContext, ProfileMapContext } from "../utils/context/context";
 import { ProductData } from "@/utils/parsers/product-parser-functions";
 import { buildSrcSet } from "@/utils/images";
@@ -492,9 +492,9 @@ export default function ProductForm({
                       <div className="absolute right-4 top-4 z-20">
                         {" "}
                         {/* Increased spacing */}
-                        <ConfirmActionDropdown
-                          helpText="Are you sure you want to delete this image?"
-                          buttonLabel="Delete Image"
+                        <ConfirmActionModal
+                          description="Are you sure you want to delete this image?"
+                          confirmLabel="Delete Image"
                           onConfirm={deleteImage(index)}
                         >
                           <Button
@@ -509,7 +509,7 @@ export default function ProductForm({
                           >
                             <TrashIcon style={{ padding: 4 }} />
                           </Button>
-                        </ConfirmActionDropdown>
+                        </ConfirmActionModal>
                       </div>
                       <Image
                         alt="Product Image"
@@ -1781,17 +1781,17 @@ export default function ProductForm({
           </ModalBody>
 
           <ModalFooter>
-            <ConfirmActionDropdown
-              helpText={
+            <ConfirmActionModal
+              description={
                 "Are you sure you want to clear this form? You will lose all current progress."
               }
-              buttonLabel={"Clear Form"}
+              confirmLabel={"Clear Form"}
               onConfirm={clear}
             >
               <Button color="danger" variant="light">
                 Clear
               </Button>
-            </ConfirmActionDropdown>
+            </ConfirmActionModal>
 
             <Button
               className={SHOPSTRBUTTONCLASSNAMES}

components/utility-components/modals/__tests__/confirm-action-modal.test.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import ConfirmActionModal from "../confirm-action-modal";
+
+// Mock NextUI components to avoid complex DOM structures in tests
+jest.mock("@nextui-org/react", () => {
+  const React = require("react");
+  return {
+    useDisclosure: () => {
+      const [isOpen, setIsOpen] = React.useState(false);
+      return {
+        isOpen,
+        onOpen: () => setIsOpen(true),
+        onOpenChange: () => setIsOpen(!isOpen),
+      };
+    },
+    Modal: ({ children, isOpen }: { children: React.ReactNode; isOpen: boolean }) => (
+      isOpen ? <div role="dialog">{children}</div> : null
+    ),
+    ModalContent: ({ children }: { children: (onClose: () => void) => React.ReactNode }) => (
+      <div>{children(() => {})}</div>
+    ),
+    ModalHeader: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    ModalBody: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    ModalFooter: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    Button: ({ 
+      children, 
+      onPress, 
+      color, 
+      variant 
+    }: { 
+      children: React.ReactNode; 
+      onPress?: () => void;
+      color?: string;
+      variant?: string;
+    }) => (
+      <button 
+        onClick={onPress} 
+        data-color={color} 
+        data-variant={variant}
+      >
+        {children}
+      </button>
+    ),
+  };
+});
+
+describe("ConfirmActionModal", () => {
+  const mockOnConfirm = jest.fn();
+  const props = {
+    title: "Confirm Delete",
+    description: "Are you sure you want to proceed?",
+    confirmLabel: "Yes, Confirm",
+    onConfirm: mockOnConfirm,
+    children: <button>Trigger Action</button>,
+  };
+
+  beforeEach(() => {
+    mockOnConfirm.mockClear();
+  });
+
+  it("renders the trigger component correctly", () => {
+    render(<ConfirmActionModal {...props} />);
+    expect(screen.getByText("Trigger Action")).toBeInTheDocument();
+  });
+
+  it("does not show the modal by default", () => {
+    render(<ConfirmActionModal {...props} />);
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("opens the modal when the trigger is clicked", async () => {
+    const user = userEvent.setup();
+    render(<ConfirmActionModal {...props} />);
+
+    await user.click(screen.getByText("Trigger Action"));
+
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByText("Are you sure you want to proceed?")).toBeInTheDocument();
+    expect(screen.getByText("Confirm Delete")).toBeInTheDocument();
+  });
+
+  it("calls the onConfirm callback when the confirm button is clicked", async () => {
+    const user = userEvent.setup();
+    render(<ConfirmActionModal {...props} />);
+
+    // Open modal
+    await user.click(screen.getByText("Trigger Action"));
+
+    // Click confirm
+    const confirmButton = screen.getByText("Yes, Confirm");
+    await user.click(confirmButton);
+
+    expect(mockOnConfirm).toHaveBeenCalledTimes(1);
+  });
+
+  it("closes the modal after confirmation", async () => {
+    const user = userEvent.setup();
+    render(<ConfirmActionModal {...props} />);
+
+    await user.click(screen.getByText("Trigger Action"));
+    await user.click(screen.getByText("Yes, Confirm"));
+
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+});