feat: Version 2

Closes #627, closes #1047

client/src/components/common/ConfirmationStep/ConfirmationStep.jsx

@@ -0,0 +1,108 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Button, Form, Input } from 'semantic-ui-react';
+import { Popup } from '../../../lib/custom-ui';
+
+import { useForm, useNestedRef } from '../../../hooks';
+
+import styles from './ConfirmationStep.module.scss';
+
+const ButtonTypes = {
+  POSITIVE: 'positive',
+  NEGATIVE: 'negative',
+};
+
+const ConfirmationStep = React.memo(
+  ({ title, content, buttonType, buttonContent, typeValue, typeContent, onConfirm, onBack }) => {
+    const [t] = useTranslation();
+
+    const [data, handleFieldChange] = useForm({
+      typeValue: '',
+    });
+
+    const [nameFieldRef, handleNameFieldRef] = useNestedRef('inputRef');
+
+    const handleSubmit = useCallback(() => {
+      if (typeValue) {
+        const cleanData = {
+          ...data,
+          typeValue: data.typeValue.trim(),
+        };
+
+        if (cleanData.typeValue.toLowerCase() !== typeValue.toLowerCase()) {
+          nameFieldRef.current.select();
+          return;
+        }
+      }
+
+      onConfirm();
+    }, [typeValue, onConfirm, data, nameFieldRef]);
+
+    useEffect(() => {
+      if (typeValue) {
+        nameFieldRef.current.select();
+      }
+    }, [typeValue, nameFieldRef]);
+
+    return (
+      <>
+        <Popup.Header onBack={onBack}>
+          {t(title, {
+            context: 'title',
+          })}
+        </Popup.Header>
+        <Popup.Content>
+          <div className={styles.content}>{t(content)}</div>
+          {typeContent && <div className={styles.content}>{t(typeContent)}</div>}
+          <Form onSubmit={handleSubmit}>
+            {typeValue && (
+              <Input
+                fluid
+                ref={handleNameFieldRef}
+                name="typeValue"
+                value={data.typeValue}
+                placeholder={typeValue}
+                maxLength={128}
+                className={styles.field}
+                onChange={handleFieldChange}
+              />
+            )}
+            <Button
+              {...{
+                [buttonType]: true,
+              }}
+              fluid
+              content={t(buttonContent)}
+            />
+          </Form>
+        </Popup.Content>
+      </>
+    );
+  },
+);
+
+ConfirmationStep.propTypes = {
+  title: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+  buttonType: PropTypes.oneOf(Object.values(ButtonTypes)),
+  buttonContent: PropTypes.string.isRequired,
+  typeValue: PropTypes.string,
+  typeContent: PropTypes.string,
+  onConfirm: PropTypes.func.isRequired,
+  onBack: PropTypes.func,
+};
+
+ConfirmationStep.defaultProps = {
+  buttonType: ButtonTypes.NEGATIVE,
+  typeValue: undefined,
+  typeContent: undefined,
+  onBack: undefined,
+};
+
+export default ConfirmationStep;