Files
bodyshop/client/src/components/shop-template-test-render/shop-template-test-render.component.jsx

70 lines
2.2 KiB
JavaScript

import { Button } from "antd";
import { JsonEditor as Editor } from "jsoneditor-react";
import "jsoneditor-react/es/editor.min.css";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export function ShopTemplateTestRender({ bodyshop, query, emailEditorRef, style }) {
const [variables, setVariables] = useState({ id: "uuid" });
const [loading, setLoading] = useState(false);
const { t } = useTranslation();
const handleTestRender = async () => {
try {
setLoading(true);
emailEditorRef.current.exportHtml(async (data) => {
try {
// const inlineHtml = await axios.post("/render/inlinecss", {
// html: data.html,
// url: `${window.location.protocol}://${window.location.host}/`,
// });
// const { data: contextData } = await client.query({
// query: gql(query),
// variables: variables,
//
// });
// const renderResponse = await axios.post("/render", {
// view: inlineHtml.data,
// context: { ...contextData, bodyshop: bodyshop },
// });
// displayTemplateInWindowNoprint(renderResponse.data);
setLoading(false);
} catch (error) {
setLoading(false);
alert(error);
}
});
} catch (error) {
setLoading(false);
alert(error);
}
};
return (
<div style={{ ...style, margin: "1rem", display: "flex" }}>
<div style={{ flex: 1 }}>
<Editor value={variables} onChange={(e) => setVariables(e)} />
</div>
<Button loading={loading} type="ghost" onClick={handleTestRender}>
{t("bodyshop.actions.testrender")}
</Button>
</div>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(ShopTemplateTestRender);