Files
bodyshop/client/src/components/shop-template-editor-save-button/shop-template-editor-save-button.component.jsx

56 lines
1.7 KiB
JavaScript

import { useState } from "react";
import { Button } from "antd";
import { useMutation } from "@apollo/client/react";
import { useTranslation } from "react-i18next";
import { UPDATE_TEMPLATE } from "../../graphql/templates.queries";
import { logImEXEvent } from "../../firebase/firebase.utils";
import axios from "axios";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
export default function ShopTemplateSaveButton({ templateId, gql, emailEditorRef }) {
const { t } = useTranslation();
const [loading, setLoading] = useState(false);
const [updateTemplate] = useMutation(UPDATE_TEMPLATE);
const notification = useNotification();
const handleSave = async () => {
logImEXEvent("shop_template_update");
setLoading(true);
emailEditorRef.current.exportHtml(async (data) => {
const response = await axios.post("/render/inlinecss", {
html: data.html,
url: `${window.location.protocol}://${window.location.host}/`
});
const result = await updateTemplate({
variables: {
templateId: templateId,
template: {
query: gql,
html: response.data,
jsontemplate: data.design
}
}
});
if (!result.errors) {
notification.success({
title: t("templates.successes.updated")
});
} else {
notification.error({
title: t("templates.errors.updating", {
error: JSON.stringify(result.errors)
})
});
}
setLoading(false);
});
};
return (
<Button disabled={!templateId} loading={loading} onClick={handleSave}>
{t("general.actions.save")}
</Button>
);
}