Files
bodyshop/client/src/components/shop-template-editor-save-button/shop-template-editor-save-button.component.jsx
2021-02-24 08:48:55 -08:00

57 lines
1.6 KiB
JavaScript

import React, { useState } from "react";
import { Button, notification } from "antd";
import { useMutation } from "@apollo/client";
import { useTranslation } from "react-i18next";
import { UPDATE_TEMPLATE } from "../../graphql/templates.queries";
import { logImEXEvent } from "../../firebase/firebase.utils";
import axios from "axios";
export default function ShopTemplateSaveButton({
templateId,
gql,
emailEditorRef,
}) {
const { t } = useTranslation();
const [loading, setLoading] = useState(false);
const [updateTemplate] = useMutation(UPDATE_TEMPLATE);
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"]({
message: t("templates.successes.updated"),
});
} else {
notification["error"]({
message: t("templates.errors.updating", {
error: JSON.stringify(result.errors),
}),
});
}
setLoading(false);
});
};
return (
<Button disabled={!!!templateId} loading={loading} onClick={handleSave}>
{t("general.actions.save")}
</Button>
);
}