IO-2433 Delete on cancel, improved styling.

client/src/App/App.styles.scss

@@ -480,4 +480,5 @@
 .esignature-embed {
 width: 100%;
 height: 100%;
+border-width: 0;
 }

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

@@ -1,11 +1,11 @@
-import { Button, Modal } from "antd";
+import { EmbedUpdateDocumentV1 } from "@documenso/embed-react";
+import { Modal } from "antd";
+import axios from "axios";
 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";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 
 const mapStateToProps = createStructuredSelector({
@@ -26,23 +26,42 @@ export function EsignatureModalContainer({ esignatureModal, toggleModalVisible,
     <Modal
       open={open}
       title={t("jobs.labels.esignature")}
-      onOk={() => {
-        toggleModalVisible();
+      onOk={async () => {
+        try {
+          const distResult = await axios.post("/esign/distribute", {
+            documentId,
+            envelopeId,
+            jobid,
+            bodyshopid: bodyshop.id
+          });
+          console.log("Distribution result:", distResult);
+          toggleModalVisible();
+        } catch (error) {
+          console.error("Error distributing document:", error);
+        }
       }}
-      onCancel={() => {
-        toggleModalVisible();
+      onCancel={async () => {
+        try {
+          const cancelResult = await axios.post("/esign/delete", {
+            documentId,
+            envelopeId
+          });
+          console.log("Cancel result:", cancelResult);
+          toggleModalVisible();
+        } catch (error) {
+          console.error("Error cancelling document:", error);
+        }
       }}
-      cancelButtonProps={{ style: { display: "none" } }}
+      okButtonProps={{ title: "Distribute by Email" }}
       width="90%"
       destroyOnHidden
     >
-      <div style={{ height: "800px", width: "100%" }}>
+      <div style={{ height: "600px", width: "100%" }}>
         {token ? (
           <EmbedUpdateDocumentV1
             presignToken={token}
             host="https://stg-app.documenso.com"
             documentId={documentId}
-            externalId={jobid}
             className="esignature-embed"
             onDocumentUpdated={(data) => {
               console.log("Document updated:", data.documentId);
@@ -51,24 +70,6 @@ export function EsignatureModalContainer({ esignatureModal, toggleModalVisible,
         ) : (
           <div>No token...</div>
         )}
-        <Button
-          onClick={async () => {
-            // Add your button click handler logic here
-            try {
-              const distResult = await axios.post("/esign/distribute", {
-                documentId,
-                envelopeId,
-                jobid,
-                bodyshopid: bodyshop.id
-              });
-              console.log("Distribution result:", distResult);
-            } catch (error) {
-              console.error("Error distributing document:", error);
-            }
-          }}
-        >
-          Distribute Document
-        </Button>
       </div>
     </Modal>
   );