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

114 lines
3.5 KiB
JavaScript

import { EmbedUpdateDocumentV1 } from "@documenso/embed-react";
import { Modal, notification, Result } 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 { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
import { useState } from "react";
import InstanceRenderManager from "../../utils/instanceRenderMgr";
import { hasDocumensoApiKey } from "../../utils/esignature.js";
const mapStateToProps = createStructuredSelector({
esignatureModal: selectEsignature,
bodyshop: selectBodyshop,
currentUser: selectCurrentUser
});
const mapDispatchToProps = (dispatch) => ({
toggleModalVisible: () => dispatch(toggleModalVisible("esignature"))
});
export function EsignatureModalContainer({ esignatureModal, toggleModalVisible, bodyshop, currentUser }) {
const { t } = useTranslation();
const { open, context } = esignatureModal;
const { token, envelopeId, documentId, jobid } = context;
const [distributing, setDistributing] = useState(false);
const hasToken = Boolean(token);
if (!hasDocumensoApiKey(bodyshop)) {
return null;
}
return (
<Modal
open={open}
title={InstanceRenderManager({
imex: t("jobs.labels.esignature_imex"),
rome: t("jobs.labels.esignature_rome")
})}
onOk={async () => {
if (!hasToken) {
return;
}
try {
setDistributing(true);
await axios.post("/esign/distribute", {
documentId,
envelopeId,
jobid,
bodyshopid: bodyshop.id
});
toggleModalVisible();
} catch (error) {
notification.error({
message: t("esignature.distribute_error"),
description: error?.response?.data?.message || error.message
});
}
setDistributing(false);
}}
onCancel={async () => {
if (!hasToken) {
toggleModalVisible();
return;
}
try {
await axios.post("/esign/delete", {
documentId,
envelopeId,
bodyshopid: bodyshop.id
});
toggleModalVisible();
} catch (error) {
notification.error({
message: t("esignature.cancel_error"),
description: error?.response?.data?.message || error.message
});
}
}}
okButtonProps={{ loading: distributing, style: hasToken ? undefined : { display: "none" } }}
okText={t("esignature.actions.distribute")}
destroyOnHidden
width="calc(100vw - 32px)"
wrapClassName="esignature-modal"
styles={{ body: { overflow: "hidden", padding: 0 } }}
>
<div className="esignature-modal-frame">
{hasToken ? (
<EmbedUpdateDocumentV1
presignToken={token}
host="https://sign.imex.online"
documentId={documentId}
externalId={`${jobid}|${currentUser?.email}`}
className="esignature-embed"
onDocumentUpdated={(data) => {
console.log("Document updated:", data);
}}
/>
) : (
<Result status="warning" title={t("esignature.errors.no_token")} />
)}
</div>
</Modal>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(EsignatureModalContainer);