@bigbinary/neeto-molecules 1.1.13 → 1.1.14

package/dist/ConfirmationModal/index.js

@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useRef } from "react";
 import { Modal, Typography } from "@bigbinary/neetoui";
-import { Button, Form, Input } from "@bigbinary/neetoui/formik";
+import { ActionBlock, Form, Input } from "@bigbinary/neetoui/formik";
 import { type } from "ramda";
+import { useTranslation } from "react-i18next";
 import { INITIAL_VALUES } from "./constants";
 import { deletionValidationSchema } from "./utils";
 var ConfirmationModal = function ConfirmationModal(_ref) {
@@ -16,31 +17,61 @@ var ConfirmationModal = function ConfirmationModal(_ref) {
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? "" : _ref$title,
     onClose = _ref.onClose,
-    onSubmit = _ref.onSubmit;
+    onSubmit = _ref.onSubmit,
+    deleteConfirmationMessage = _ref.deleteConfirmationMessage;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var formikProps = {
     initialValues: INITIAL_VALUES,
     validationSchema: deletionValidationSchema(confirmationText),
     onSubmit: onSubmit
   };
+  var deleteInputLabel = deleteConfirmationMessage || t("neetoMolecules.confirmationModal.deleteConfirmationMessage", {
+    value: confirmationText
+  });
+  var initialFocusRef = useRef(null);
   return /*#__PURE__*/React.createElement(Modal, {
+    initialFocusRef: initialFocusRef,
     isOpen: isOpen,
     onClose: onClose,
     "data-testid": "confirmation-modal"
   }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "confirmation-modal",
     style: "h2"
-  }, title)), /*#__PURE__*/React.createElement(Modal.Body, {
-    className: "space-y-4"
-  }, type(description) === "String" ? /*#__PURE__*/React.createElement(Typography, null, description) : description, /*#__PURE__*/React.createElement(Form, {
-    className: "flex items-start space-x-1",
+  }, title)), /*#__PURE__*/React.createElement(Form, {
     formikProps: formikProps
-  }, /*#__PURE__*/React.createElement(Input, {
-    className: "flex-auto",
-    "data-testid": "confirmation-modal-input",
-    name: "confirmationText"
-  }), /*#__PURE__*/React.createElement(Button, {
-    label: buttonLabel,
-    loading: isSubmitting,
-    style: "danger"
-  }))));
+  }, function (_ref2) {
+    var values = _ref2.values;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal.Body, {
+      className: "space-y-4"
+    }, type(description) === "String" ? /*#__PURE__*/React.createElement(Typography, {
+      style: "body2"
+    }, description) : description, /*#__PURE__*/React.createElement(Input, {
+      "data-testid": "confirmation-modal-input",
+      label: deleteInputLabel,
+      labelProps: {
+        className: "block"
+      },
+      name: "confirmationText",
+      ref: initialFocusRef,
+      type: "text"
+    })), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
+      className: "space-x-2",
+      cancelButtonProps: {
+        label: t("neetoMolecules.common.actions.cancel"),
+        style: "text",
+        onClick: onClose,
+        disabled: false,
+        type: "button"
+      },
+      submitButtonProps: {
+        "data-cy": "delete-continue-button",
+        label: buttonLabel,
+        loading: isSubmitting,
+        style: "danger",
+        disabled: isSubmitting || confirmationText !== values.confirmationText
+      }
+    })));
+  }));
 };
 export default ConfirmationModal;

package/dist/ConfirmationModal/utils.js

@@ -1,10 +1,6 @@
-import { t } from "i18next";
 import * as yup from "yup";
 export var deletionValidationSchema = function deletionValidationSchema(confirmationText) {
-  var errorMessage = t("neetoMolecules.confirmationModal.required", {
-    confirmationText: confirmationText
-  });
   return yup.object({
-    confirmationText: yup.string().required(errorMessage).oneOf([confirmationText], errorMessage)
+    confirmationText: yup.string().required("").oneOf([confirmationText], "")
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "description": "A package of reusable molecular components for neeto products.",
   "repository": "git@github.com:bigbinary/neeto-molecules.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",

package/src/translations/en.json

@@ -558,7 +558,7 @@
       }
     },
     "confirmationModal": {
-      "required": "Enter \"{{confirmationText}}\" to confirm"
+      "deleteConfirmationMessage": "Please type <strong>{{value}}</strong> to confirm."
     },
     "metadata": {
       "detailsTitle": "Details",

package/types/ConfirmationModal.d.ts

@@ -59,5 +59,6 @@ const ConfirmationModal: React.FC<{
   title?: string;
   onClose: Function;
   onSubmit: Function;
+  deleteConfirmationMessage?: string;
 }>;
 export default ConfirmationModal;