frontend: add confirm action component via context

frontend/packages/core/src/AppLayout/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { Outlet } from "react-router-dom";
-import styled from "@emotion/styled";
 import { Grid as MuiGrid } from "@mui/material";
 
 import Loadable from "../loading";
+import styled from "../styled";
 import type { AppConfiguration } from "../Types";
 
 import Drawer from "./drawer";
@@ -22,7 +22,7 @@ const ContentGrid = styled(MuiGrid)<{ $isFullScreen: boolean }>(
   })
 );
 
-const MainContent = styled.div({ overflowY: "auto", width: "100%" });
+const MainContent = styled("div")({ overflowY: "auto", width: "100%" });
 
 interface AppLayoutProps {
   isLoading?: boolean;

frontend/packages/core/src/Contexts/index.tsx

@@ -1,7 +1,7 @@
 export { ApplicationContext, useAppContext } from "./app-context";
 export { ShortLinkContext, useShortLinkContext } from "./short-link-context";
 export { WizardContext, useWizardContext } from "./wizard-context";
-export type { WizardNavigationProps } from "./wizard-context";
+export type { WizardNavigationProps, ConfirmActionProps } from "./wizard-context";
 export { WorkflowStorageContext, useWorkflowStorageContext } from "./workflow-storage-context";
 export type {
   WorkflowRemoveDataFn,

frontend/packages/core/src/Contexts/wizard-context.tsx

@@ -5,6 +5,14 @@ export interface WizardNavigationProps {
   keepSearch?: boolean;
 }
 
+export interface ConfirmActionProps {
+  title: string;
+  description: React.ReactNode | string;
+  actionLabel?: string;
+  confirmationText: string;
+  onConfirm: () => void;
+}
+
 export interface ContextProps {
   displayWarnings: (warnings: string[]) => void;
   onBack: (params?: WizardNavigationProps) => void;
@@ -14,6 +22,7 @@ export interface ContextProps {
   setIsLoading: (isLoading: boolean) => void;
   setHasError: (hasError: boolean) => void;
   setIsComplete?: (isComplete: boolean) => void;
+  showConfirmAction?: (props: ConfirmActionProps) => void;
 }
 
 const WizardContext = React.createContext<() => ContextProps>(undefined);

frontend/packages/core/src/index.tsx

@@ -84,6 +84,7 @@ export type {
   WorkflowRetrieveDataFn,
   WorkflowStoreDataFn,
   WizardNavigationProps,
+  ConfirmActionProps,
 } from "./Contexts";
 export type { ClutchError } from "./Network/errors";
 export type { TypographyProps } from "./typography";

frontend/packages/wizard/src/confirm-action.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import {
+  Button,
+  ConfirmActionProps,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  TextField,
+  Typography,
+} from "@clutch-sh/core";
+
+interface ConfirmActionDialogProps extends ConfirmActionProps {
+  open: boolean;
+  onCancel: () => void;
+}
+
+const ConfirmAction: React.FC<ConfirmActionDialogProps> = ({
+  open,
+  title,
+  description,
+  confirmationText,
+  actionLabel,
+  onConfirm,
+  onCancel,
+}) => {
+  const [input, setInput] = React.useState("");
+
+  React.useEffect(() => setInput(""), [open]);
+
+  const handleConfirm = () => {
+    if (input === confirmationText) {
+      onConfirm();
+    }
+  };
+
+  return (
+    <Dialog title={title} open={open} onClose={onCancel}>
+      <DialogContent>
+        {typeof description === "string" ? (
+          <Typography variant="body1">{description}</Typography>
+        ) : (
+          description
+        )}
+        <TextField
+          label="Confirmation"
+          value={input}
+          onChange={e => setInput(e.target.value)}
+          fullWidth
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button text="Cancel" onClick={onCancel} variant="neutral" />
+        <Button
+          text={actionLabel || "Confirm"}
+          onClick={handleConfirm}
+          variant="danger"
+          disabled={input !== confirmationText}
+        />
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ConfirmAction;

frontend/packages/wizard/src/wizard.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import type { WizardNavigationProps } from "@clutch-sh/core";
+import React, { useState } from "react";
+import type { ConfirmActionProps, WizardNavigationProps } from "@clutch-sh/core";
 import {
   Button,
   ButtonGroup,
@@ -27,6 +27,7 @@ import type {
 } from "@mui/material";
 import { alpha, Container as MuiContainer, Theme } from "@mui/material";
 
+import ConfirmAction from "./confirm-action";
 import { useWizardState, WizardActionType } from "./state";
 import type { WizardStepProps } from "./step";
 
@@ -124,6 +125,13 @@ const Wizard = ({
   const [state, dispatch] = useWizardState();
   const [wizardStepData, setWizardStepData] = React.useState<WizardStepData>({});
   const [globalWarnings, setGlobalWarnings] = React.useState<string[]>([]);
+  const [confirmActionOpen, setConfirmActionOpen] = useState(false);
+  const [confirmActionConfig, setConfirmActionConfig] = useState({
+    title: "",
+    description: "",
+    confirmationText: "",
+    onConfirm: () => {},
+  } as ConfirmActionProps);
   const dataLayoutManager = useDataLayoutManager(dataLayout);
   const [, setSearchParams] = useSearchParams();
   const locationState = useLocation().state as { origin?: string };
@@ -186,6 +194,10 @@ const Wizard = ({
       onNext: (params: WizardNavigationProps) => {
         handleNavigation(params, WizardActionType.NEXT);
       },
+      showConfirmAction: (props: ConfirmActionProps) => {
+        setConfirmActionConfig(props);
+        setConfirmActionOpen(true);
+      },
     };
   };
 
@@ -299,6 +311,17 @@ const Wizard = ({
           {error}
         </Toast>
       ))}
+      <ConfirmAction
+        open={confirmActionOpen}
+        title={confirmActionConfig.title}
+        description={confirmActionConfig.description}
+        confirmationText={confirmActionConfig.confirmationText}
+        onConfirm={() => {
+          setConfirmActionOpen(false);
+          confirmActionConfig.onConfirm();
+        }}
+        onCancel={() => setConfirmActionOpen(false)}
+      />
     </Container>
   );
 };