Added payment reprint and print wrapper component IO-543

client/src/components/jobs-detail-totals/jobs-detail-totals.component.jsx

@@ -9,7 +9,9 @@ import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { TemplateList } from "../../utils/TemplateConstants";
 import JobTotalsTable from "../job-totals-table/job-totals-table.component";
+import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -65,6 +67,7 @@ export function JobsDetailTotals({
               <th>{t("payments.fields.type")}</th>
               <th>{t("payments.fields.transactionid")}</th>
               <th>{t("payments.fields.stripeid")}</th>
+              <th>{t("general.labels.actions")}</th>
             </tr>
           </thead>
           <tbody>
@@ -93,6 +96,14 @@ export function JobsDetailTotals({
                     </a>
                   ) : null}
                 </td>
+                <td>
+                  <PrintWrapperComponent
+                    templateObject={{
+                      name: TemplateList("payment").payment_receipt.key,
+                      variables: { id: p.id },
+                    }}
+                  />
+                </td>
               </tr>
             ))}
           </tbody>

client/src/components/parts-order-list-table/parts-order-list-table.component.jsx

@@ -1,4 +1,4 @@
-import { MailFilled, PrinterFilled, SyncOutlined } from "@ant-design/icons";
+import { SyncOutlined } from "@ant-design/icons";
 import { Button, Checkbox, Input, Space, Table, Typography } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
@@ -12,10 +12,10 @@ import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
-import { GenerateDocument } from "../../utils/RenderTemplate";
 import { alphaSort } from "../../utils/sorters";
 import { TemplateList } from "../../utils/TemplateConstants";
 import PartsOrderLineBackorderButton from "../parts-order-line-backorder-button/parts-order-line-backorder-button.component";
+import PrintWrapper from "../print-wrapper/print-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
@@ -135,33 +135,13 @@ export function PartsOrderListTableComponent({
           >
             {t("parts_orders.actions.receivebill")}
           </Button>
-          <PrinterFilled
+          <PrintWrapper
-            onClick={() =>
+            templateObject={{
-              GenerateDocument(
+              name: record.isReturn
-                {
+                ? TemplateList("partsorder").parts_return_confirmation.key
-                  name: record.isReturn
+                : TemplateList("partsorder").parts_order_confirmation.key,
-                    ? TemplateList("partsorder").parts_return_confirmation.key
+              variables: { id: record.id },
-                    : TemplateList("partsorder").parts_order_confirmation.key,
+            }}
-                  variables: { id: record.id },
-                },
-                {},
-                "p"
-              )
-            }
-          />
-          <MailFilled
-            onClick={() =>
-              GenerateDocument(
-                {
-                  name: record.isReturn
-                    ? TemplateList("partsorder").parts_return_confirmation.key
-                    : TemplateList("partsorder").parts_order_confirmation.key,
-                  variables: { id: record.id },
-                },
-                {},
-                "e"
-              )
-            }
           />
         </Space>
       ),

client/src/components/payments-list-paginated/payment-list-paginated.component.jsx

@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Input, Table } from "antd";
+import { Button, Input, Space, Table } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -11,6 +11,9 @@ import { alphaSort } from "../../utils/sorters";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { setModalContext } from "../../redux/modals/modals.actions";
+import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
+import { TemplateList } from "../../utils/TemplateConstants";
+
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
 });
@@ -124,19 +127,25 @@ export function PaymentsListPaginated({
       dataIndex: "actions",
       key: "actions",
       render: (text, record) => (
-        <div>
+        <Space>
           <Button
             disabled={record.exportedat}
             onClick={() => {
               setPaymentContext({
                 actions: { refetch: refetch },
-                context:  record ,
+                context: record,
               });
             }}
           >
             {t("general.actions.edit")}
           </Button>
-        </div>
+          <PrintWrapperComponent
+            templateObject={{
+              name: TemplateList("payment").payment_receipt.key,
+              variables: { id: record.id },
+            }}
+          />
+        </Space>
       ),
     },
   ];

client/src/components/print-wrapper/print-wrapper.component.jsx

@@ -0,0 +1,22 @@
+import { MailFilled, PrinterFilled } from "@ant-design/icons";
+import { Space } from "antd";
+import React from "react";
+import { GenerateDocument } from "../../utils/RenderTemplate";
+
+export default function PrintWrapperComponent({
+  templateObject,
+  messageObject = {},
+  children,
+}) {
+  return (
+    <Space>
+      {children || null}
+      <PrinterFilled
+        onClick={() => GenerateDocument(templateObject, {}, "p")}
+      />
+      <MailFilled
+        onClick={() => GenerateDocument(templateObject, messageObject, "e")}
+      />
+    </Space>
+  );
+}