Updated query hooks for teams and websites.

src/components/common/ConfirmDeleteForm.tsx

@@ -1,35 +0,0 @@
-import { useState } from 'react';
-import { Button, LoadingButton, Form, FormButtons } from 'react-basics';
-import { useMessages } from 'components/hooks';
-
-export interface ConfirmDeleteFormProps {
-  name: string;
-  onConfirm?: () => void;
-  onClose?: () => void;
-}
-
-export function ConfirmDeleteForm({ name, onConfirm, onClose }: ConfirmDeleteFormProps) {
-  const [loading, setLoading] = useState(false);
-  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
-
-  const handleConfirm = () => {
-    setLoading(true);
-    onConfirm();
-  };
-
-  return (
-    <Form>
-      <p>
-        <FormattedMessage {...messages.confirmDelete} values={{ target: <b>{name}</b> }} />
-      </p>
-      <FormButtons flex>
-        <LoadingButton isLoading={loading} onClick={handleConfirm} variant="danger">
-          {formatMessage(labels.delete)}
-        </LoadingButton>
-        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
-      </FormButtons>
-    </Form>
-  );
-}
-
-export default ConfirmDeleteForm;

src/components/common/ConfirmationForm.tsx

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import { Button, LoadingButton, Form, FormButtons } from 'react-basics';
+import { useMessages } from 'components/hooks';
+
+export interface ConfirmationFormProps {
+  message: ReactNode;
+  buttonLabel?: ReactNode;
+  buttonVariant?: 'none' | 'primary' | 'secondary' | 'quiet' | 'danger';
+  isLoading?: boolean;
+  error?: string | Error;
+  onConfirm?: () => void;
+  onClose?: () => void;
+}
+
+export function ConfirmationForm({
+  message,
+  buttonLabel,
+  buttonVariant,
+  isLoading,
+  error,
+  onConfirm,
+  onClose,
+}: ConfirmationFormProps) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <Form error={error}>
+      <p>{message}</p>
+      <FormButtons flex>
+        <LoadingButton isLoading={isLoading} onClick={onConfirm} variant={buttonVariant}>
+          {buttonLabel || formatMessage(labels.ok)}
+        </LoadingButton>
+        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default ConfirmationForm;

src/components/common/TypeConfirmationForm.tsx

@@ -0,0 +1,58 @@
+import {
+  Button,
+  Form,
+  FormButtons,
+  FormRow,
+  FormInput,
+  TextField,
+  SubmitButton,
+} from 'react-basics';
+import { useMessages } from 'components/hooks';
+
+export function TypeConfirmationForm({
+  confirmationValue,
+  buttonLabel,
+  buttonVariant,
+  isLoading,
+  error,
+  onConfirm,
+  onClose,
+}: {
+  confirmationValue: string;
+  buttonLabel?: string;
+  buttonVariant?: 'none' | 'primary' | 'secondary' | 'quiet' | 'danger';
+  isLoading?: boolean;
+  error?: string | Error;
+  onConfirm?: () => void;
+  onClose?: () => void;
+}) {
+  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
+
+  if (!confirmationValue) {
+    return null;
+  }
+
+  return (
+    <Form onSubmit={onConfirm} error={error}>
+      <p>
+        <FormattedMessage
+          {...messages.actionConfirmation}
+          values={{ confirmation: <b>{confirmationValue}</b> }}
+        />
+      </p>
+      <FormRow label={formatMessage(labels.confirm)}>
+        <FormInput name="confirm" rules={{ validate: value => value === confirmationValue }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <SubmitButton isLoading={isLoading} variant={buttonVariant}>
+          {buttonLabel || formatMessage(labels.ok)}
+        </SubmitButton>
+        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default TypeConfirmationForm;