Baseline email wrapper

client/src/pages/manage-root/manage-root.page.component.jsx

@@ -1,42 +1,29 @@
-import { Button } from "antd";
-import axios from "axios";
 import React from "react";
-import { useApolloClient } from "react-apollo";
-import ReactDOMServer from "react-dom/server";
-import { REPORT_QUERY_PARTS_ORDER_BY_PK } from "../../graphql/parts-orders.queries";
-import ReportPartsOrder from "../../reports/pages/parts-order/parts-order.component";
+import SendEmailButton from "../../components/send-email-button/send-email-button.container";
+import PartsOrderEmail from "../../emails/parts-order/parts-order.email";
+import { REPORT_QUERY_PARTS_ORDER_BY_PK } from "../../emails/parts-order/parts-order.query";
 
 export default function ManageRootPageComponent() {
-  const client = useApolloClient();
+  //const client = useApolloClient();
   return (
     <div>
-      <Button
-        onClick={() => {
-          client
-            .query({
-              query: REPORT_QUERY_PARTS_ORDER_BY_PK,
-              variables: { id: "ebe0fb6b-6ec4-4ae0-8fdc-49bdf1e37ff3" },
-              fetchPolicy: "network-only"
-            })
-            .then(response => {
-              axios.post("/sendemail", {
-                from: { name: "Kavia Autobody" },
-                to: "snaptsoft@gmail.com",
-                replyTo: "patrickwf@gmail.com",
-                subject: "Sending Email using Node.js",
-                text: "Plaintext version of the message",
-                html: ReactDOMServer.renderToStaticMarkup(
-                  <ReportPartsOrder
-                    order={response.data.parts_orders_by_pk}
-                    bodyshop={response.data.bodyshops[0]}
-                  />
-                )
-              });
-            });
-        }}>
-        Test Email
-      </Button>
-      <div>Testing Section-Report</div>
+      <SendEmailButton
+        MessageOptions={{
+          from: {
+            name: "Kavia"
+          },
+          to: "patrickwf@gmail.com",
+          replyTo: "patrickwf@gmail.com"
+        }}
+        Template={PartsOrderEmail}
+        QueryConfig={[
+          REPORT_QUERY_PARTS_ORDER_BY_PK,
+          {
+            variables: { id: "ebe0fb6b-6ec4-4ae0-8fdc-49bdf1e37ff3" }
+          }
+        ]}>
+        Send an Email in new Window
+      </SendEmailButton>
     </div>
   );
 }

client/src/pages/manage/manage.page.jsx

@@ -60,15 +60,13 @@ export default function Manage({ match }) {
       </Header>
       <Layout>
         <Content
-          className="content-container"
-          style={{ padding: "0em 4em 4em" }}
-        >
+          className='content-container'
+          style={{ padding: "0em 4em 4em" }}>
           <ErrorBoundary>
             <Suspense
               fallback={
                 <LoadingSpinner message={t("general.labels.loadingapp")} />
-              }
-            >
+              }>
               <Route exact path={`${match.path}`} component={ManageRootPage} />
 
               <Route exact path={`${match.path}/jobs`} component={JobsPage} />