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);