@agilemotion/oui-react-js 1.8.78 → 2.0.0

package/dist/components/signatures/AgilitySignaturePanel.js

@@ -7,15 +7,18 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _Icon = _interopRequireDefault(require("../Icon"));
-var _Utils = _interopRequireDefault(require("../../Utils"));
 var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
 var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
+var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
 var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _SignatureInput = _interopRequireDefault(require("../signatures/SignatureInput"));
 var _htmlToImage = require("html-to-image");
 var _HtmlSignatureDocumentContainer = _interopRequireDefault(require("./HtmlSignatureDocumentContainer"));
 var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 var _reactPromiseTracker = require("react-promise-tracker");
+var _DynamicSignatureDocumentContainer = _interopRequireDefault(require("./DynamicSignatureDocumentContainer"));
+var _ServiceCallActionHandler = _interopRequireDefault(require("../../event/ServiceCallActionHandler"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const status = response => {
   if (response.ok) {
@@ -38,8 +41,65 @@ const AgilitySignaturePanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_rea
   const [refresher, setRefresher] = _react.default.useState(false);
   const [initialImage, setInitialImage] = _react.default.useState(null);
   const [systemSignatures, setSystemSignatures] = _react.default.useState(null);
+  const [pdf, setPdf] = _react.default.useState(null);
+  const [grabbedItem, setGrabbedItem] = _react.default.useState(null);
+  const [textDialogOpen, setTextDialogOpen] = _react.default.useState(false);
+  const [textDialogValue, setTextDialogValue] = _react.default.useState('');
+  const [resetConfirmOpen, setResetConfirmOpen] = _react.default.useState(false);
+  const [placementsChanged, setPlacementsChanged] = _react.default.useState(false);
+  const dynamicContainerRef = _react.default.useRef(null);
+  function processFileData(data, fileType) {
+    let file = {};
+    if (data.payloadBase64) {
+      file.base64 = data.payloadBase64;
+    } else if (data.url) {
+      file.base64 = data.url.replace('data:application/pdf;base64,', '').replace('data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,', '');
+    } else if (data.payload && typeof data.payload === 'string') {
+      file.base64 = data.payload.replace('data:application/pdf;base64,', '').replace('data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,', '');
+    }
+    file.name = data.name;
+    file.type = fileType;
+    setPdf(file);
+  }
   _react.default.useEffect(() => {
     fetchImages();
+    if (props.config.signaturePlacementStrategy === 'DYNAMIC') {
+      let actionConfig = {};
+      const contentRef = props.config.documents[0].contentBeingSignedRepositoryId;
+      const isCache = contentRef && contentRef.includes('::');
+      if (isCache) {
+        const [bucket, ...keyParts] = contentRef.split('::');
+        const key = keyParts.join('::');
+        actionConfig.service = {
+          type: "rest",
+          url: "/docs/api/v1/manager/cache/find",
+          method: "POST",
+          parameters: [{
+            httpParameterType: "REQUEST_BODY",
+            value: {
+              bucket,
+              key
+            }
+          }],
+          contentType: "application/json"
+        };
+      } else {
+        actionConfig.service = {
+          type: "rest",
+          url: "/docs/api/v1/manager/find",
+          method: "GET",
+          parameters: [{
+            httpParameterType: "PATH_VARIABLE",
+            value: contentRef || props.config.documents[0].originalDocumentRepositoryId
+          }]
+        };
+      }
+      _ServiceCallActionHandler.default.execute(actionConfig, null, null, 'agility-signature-panel', data => {
+        processFileData(data, data.type);
+      }, e => {
+        console.error(e);
+      }, () => {});
+    }
   }, []);
   const validate = () => {
     let signers = props.config.documents[0].signers;
@@ -57,23 +117,49 @@ const AgilitySignaturePanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_rea
   };
   _react.default.useEffect(() => {
     let signers = props.config.documents[0].signers;
-    for (const signer of signers) {
-      if (signer.email === props.config.signatoryId) {
-        let signingInputs = signer.signatureInputs;
-        for (const signingInput of signingInputs) {
-          if ('SIGN' === signingInput.inputType) {
-            signingInput.value = signatureImage;
-          } else if ('INITIAL' === signingInput.inputType) {
-            signingInput.value = initialImage;
+    if (props.config.signaturePlacementStrategy === 'DYNAMIC') {
+      const dynamicPlacements = dynamicContainerRef.current ? dynamicContainerRef.current.getPlacements() : [];
+      if (dynamicPlacements.length > 0) {
+        props.valueChangeHandler({
+          signers,
+          dynamicPlacements
+        });
+      }
+    } else {
+      for (const signer of signers) {
+        if (signer.email === props.config.signatoryId) {
+          let signingInputs = signer.signatureInputs;
+          for (const signingInput of signingInputs) {
+            if ('SIGN' === signingInput.inputType) {
+              signingInput.value = signatureImage;
+            } else if ('INITIAL' === signingInput.inputType) {
+              signingInput.value = initialImage;
+            }
           }
         }
       }
+      if (validate()) {
+        props.valueChangeHandler({
+          signers
+        });
+      }
     }
-    if (validate()) {
-      props.valueChangeHandler(signers);
-    }
-  }, [initialImage, signatureImage, refresher]);
+  }, [initialImage, signatureImage, refresher, placementsChanged]);
   const showInput = mode => {
+    if (props.config.signaturePlacementStrategy === 'DYNAMIC') {
+      const existingImage = mode === 'SIGN' ? signatureImage || (systemSignatures === null || systemSignatures === void 0 ? void 0 : systemSignatures.signature) : initialImage || (systemSignatures === null || systemSignatures === void 0 ? void 0 : systemSignatures.initial);
+      if (existingImage) {
+        const dataUrl = typeof existingImage === 'object' ? existingImage.url : existingImage;
+        document.body.style.cursor = 'grabbing';
+        setGrabbedItem({
+          type: mode,
+          imageDataUrl: dataUrl,
+          width: mode === 'SIGN' ? 200 : 80,
+          height: 80
+        });
+        return;
+      }
+    }
     setInputMode(mode);
     setOpen(true);
   };
@@ -85,6 +171,54 @@ const AgilitySignaturePanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_rea
       setInitialImage(dataUrl);
     }
     setOpen(false);
+    if (props.config.signaturePlacementStrategy === 'DYNAMIC') {
+      document.body.style.cursor = 'grabbing';
+      setGrabbedItem({
+        type: inputMode,
+        imageDataUrl: dataUrl,
+        width: inputMode === 'SIGN' ? 200 : 80,
+        height: 80
+      });
+    }
+  };
+  const grabText = () => {
+    setTextDialogOpen(true);
+    setTextDialogValue('');
+  };
+  const confirmText = () => {
+    if (!textDialogValue.trim()) return;
+    setTextDialogOpen(false);
+    document.body.style.cursor = 'grabbing';
+    setGrabbedItem({
+      type: 'TEXT',
+      content: textDialogValue.trim(),
+      width: 200,
+      height: 48
+    });
+  };
+  const grabDate = () => {
+    const today = new Date().toLocaleDateString('en-ZA', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+    document.body.style.cursor = 'grabbing';
+    setGrabbedItem({
+      type: 'DATE',
+      content: today,
+      width: 160,
+      height: 32
+    });
+  };
+  const confirmReset = () => {
+    setSignatureImage(null);
+    setInitialImage(null);
+    setGrabbedItem(null);
+    document.body.style.cursor = 'default';
+    if (dynamicContainerRef.current) {
+      dynamicContainerRef.current.clearPlacements();
+    }
+    setResetConfirmOpen(false);
   };
   const sign = (method, data) => {
     setSigning(true);
@@ -144,7 +278,7 @@ const AgilitySignaturePanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_rea
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: 'template',
     style: {
-      font: 'italic 32px Brush Script MT, Brush Script Std, cursive',
+      font: 'italic 64px Brush Script MT, Brush Script Std, cursive',
       background: 'transparent',
       padding: '8px'
     }
@@ -182,9 +316,38 @@ const AgilitySignaturePanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_rea
         setOpen(false);
       } else {
         sign(mode, data);
+        setOpen(false);
       }
     }
-  }))), /*#__PURE__*/_react.default.createElement("div", {
+  }))), /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+    open: textDialogOpen,
+    maxWidth: "sm",
+    fullWidth: true,
+    onClose: () => setTextDialogOpen(false)
+  }, /*#__PURE__*/_react.default.createElement(_DialogTitle.default, null, "Enter Text"), /*#__PURE__*/_react.default.createElement(_DialogContent.default, null, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    autoFocus: true,
+    fullWidth: true,
+    margin: "dense",
+    label: "Text",
+    value: textDialogValue,
+    onChange: e => setTextDialogValue(e.target.value),
+    onKeyDown: e => {
+      if (e.key === 'Enter') confirmText();
+    }
+  })), /*#__PURE__*/_react.default.createElement(_DialogActions.default, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setTextDialogOpen(false)
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: confirmText,
+    disabled: !textDialogValue.trim()
+  }, "Grab"))), /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+    open: resetConfirmOpen,
+    onClose: () => setResetConfirmOpen(false)
+  }, /*#__PURE__*/_react.default.createElement(_DialogTitle.default, null, "Reset All"), /*#__PURE__*/_react.default.createElement(_DialogContent.default, null, "This action will clear all placed items and signature/initial images. Are you sure?"), /*#__PURE__*/_react.default.createElement(_DialogActions.default, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setResetConfirmOpen(false)
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: confirmReset,
+    color: "error"
+  }, "Reset"))), /*#__PURE__*/_react.default.createElement("div", {
     className: "doc-container-toolbar",
     style: {
       height: '64px',
@@ -200,6 +363,7 @@ const AgilitySignaturePanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_rea
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'col-*-*'
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    color: 'success',
     variant: 'text',
     size: "large",
     style: {
@@ -214,6 +378,7 @@ const AgilitySignaturePanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_rea
       color: 'rgba(0, 0, 0, 0.54)'
     })
   }, "INITIAL"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    color: 'success',
     variant: 'text',
     size: "large",
     style: {
@@ -224,10 +389,48 @@ const AgilitySignaturePanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_rea
       showInput('SIGN');
     },
     startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      id: 'SIGN',
+      id: 'SIGN'
+    })
+  }, "SIGN"), props.config.signaturePlacementStrategy === 'DYNAMIC' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    color: 'inherit',
+    variant: 'text',
+    size: "large",
+    style: {
+      width: '100px',
+      height: '48px'
+    },
+    onClick: grabText,
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'EDIT',
       color: 'rgba(0, 0, 0, 0.54)'
     })
-  }, "SIGN")))), /*#__PURE__*/_react.default.createElement("div", {
+  }, "TEXT"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    color: 'inherit',
+    variant: 'text',
+    size: "large",
+    style: {
+      width: '100px',
+      height: '48px'
+    },
+    onClick: grabDate,
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'CALENDAR',
+      color: 'rgba(0, 0, 0, 0.54)'
+    })
+  }, "DATE"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    color: 'error',
+    variant: 'text',
+    size: "large",
+    style: {
+      width: '100px',
+      height: '48px'
+    },
+    onClick: () => setResetConfirmOpen(true),
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'CLEAR',
+      color: 'rgba(0, 0, 0, 0.54)'
+    })
+  }, "RESET"))))), /*#__PURE__*/_react.default.createElement("div", {
     className: "doc-container-body",
     style: {
       flex: 1,
@@ -243,10 +446,15 @@ const AgilitySignaturePanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_rea
     signatureImage: signatureImage,
     initialImage: initialImage,
     refresher: refresher
-  }) : /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      padding: '32px'
-    }
-  }, "Unsupported signature placement strategy")));
+  }) : /*#__PURE__*/_react.default.createElement(_DynamicSignatureDocumentContainer.default, {
+    ref: dynamicContainerRef,
+    file: pdf,
+    grabbedItem: grabbedItem,
+    onDrop: () => {
+      setGrabbedItem(null);
+      setPlacementsChanged(prev => !prev);
+    },
+    onPlacementsChange: () => setPlacementsChanged(prev => !prev)
+  })));
 }));
 var _default = exports.default = AgilitySignaturePanel;