IO-2433 Basic embedded authoring.

client/src/components/esignature-modal/esignature-modal.container.jsx

@@ -0,0 +1,70 @@
+import { Button, Modal } from "antd";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import { selectEsignature } from "../../redux/modals/modals.selectors";
+import { EmbedUpdateDocumentV1 } from "@documenso/embed-react";
+import axios from "axios";
+
+const mapStateToProps = createStructuredSelector({
+  esignatureModal: selectEsignature
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("esignature"))
+});
+
+export function EsignatureModalContainer({ esignatureModal, toggleModalVisible }) {
+  const { t } = useTranslation();
+  const { open, context } = esignatureModal;
+  const { token, envelopeId, documentId } = context;
+
+  return (
+    <Modal
+      open={open}
+      title={t("jobs.labels.esignature")}
+      onOk={() => {
+        toggleModalVisible();
+      }}
+      onCancel={() => {
+        toggleModalVisible();
+      }}
+      cancelButtonProps={{ style: { display: "none" } }}
+      width="90%"
+      destroyOnHidden
+    >
+      <div style={{ height: "800px", width: "100%" }}>
+        {token ? (
+          <EmbedUpdateDocumentV1
+            presignToken={token}
+            host="https://stg-app.documenso.com"
+            documentId={documentId}
+            externalId="order-12345"
+            className="esignature-embed"
+            onDocumentUpdated={(data) => {
+              console.log("Document updated:", data.documentId);
+            }}
+          />
+        ) : (
+          <div>No token...</div>
+        )}
+        <Button
+          onClick={async () => {
+            // Add your button click handler logic here
+            try {
+              const distResult = await axios.post("/esign/distribute", { documentId, envelopeId });
+              console.log("Distribution result:", distResult);
+            } catch (error) {
+              console.error("Error distributing document:", error);
+            }
+          }}
+        >
+          Distribute Document
+        </Button>
+      </div>
+    </Modal>
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(EsignatureModalContainer);

client/src/components/print-center-item/print-center-item.component.jsx

@@ -1,4 +1,4 @@
-import { MailOutlined, PrinterOutlined } from "@ant-design/icons";
+import { MailOutlined, PrinterOutlined, SignatureFilled } from "@ant-design/icons";
 import { Space, Spin } from "antd";
 import { useState } from "react";
 import { connect } from "react-redux";
@@ -10,6 +10,8 @@ import { GenerateDocument } from "../../utils/RenderTemplate";
 import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import { HasFeatureAccess } from "./../feature-wrapper/feature-wrapper.component";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import axios from "axios";
+import { setModalContext } from "../../redux/modals/modals.actions.js";
 
 const mapStateToProps = createStructuredSelector({
   printCenterModal: selectPrintCenter,
@@ -17,9 +19,25 @@ const mapStateToProps = createStructuredSelector({
   technician: selectTechnician
 });
 
-const mapDispatchToProps = () => ({});
+const mapDispatchToProps = (dispatch) => ({
+  setEsignatureContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "esignature"
+      })
+    )
+});
 
-export function PrintCenterItemComponent({ printCenterModal, item, id, bodyshop, disabled, technician }) {
+export function PrintCenterItemComponent({
+  printCenterModal,
+  setEsignatureContext,
+  item,
+  id,
+  bodyshop,
+  disabled,
+  technician
+}) {
   const [loading, setLoading] = useState(false);
   const { context } = printCenterModal;
   const notification = useNotification();
@@ -39,6 +57,30 @@ export function PrintCenterItemComponent({ printCenterModal, item, id, bodyshop,
     setLoading(false);
   };
 
+  const esignatureGenerate = async () => {
+    setLoading(true);
+    try {
+      const {
+        data: { token, documentId, evnelopeId }
+      } = await axios.post("/esign/new", {
+        name: item.key,
+        variables: { id: id },
+        context,
+        bodyshop,
+        templateObject: {
+          name: item.key,
+          variables: { id: id }
+        }
+      });
+
+      setEsignatureContext({ context: { token, documentId, evnelopeId }, jobid: id });
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   if (
     disabled ||
     (item.featureNameRestricted && !HasFeatureAccess({ featureName: item.featureNameRestricted, bodyshop }))
@@ -54,6 +96,7 @@ export function PrintCenterItemComponent({ printCenterModal, item, id, bodyshop,
     <li>
       <Space wrap>
         {item.title}
+        <SignatureFilled onClick={esignatureGenerate} />
         <PrinterOutlined onClick={renderToNewWindow} />
         {!technician ? (
           <MailOutlined