Added payment export BOD-147

2020-06-30 16:23:25 -07:00
parent f1f9d7424b
commit 044fb4b9e0
29 changed files with 960 additions and 286 deletions
--- a/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx
+++ b/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx
@@ -0,0 +1,189 @@
+import { Input, Table } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { alphaSort } from "../../utils/sorters";
+import PaymentExportButton from "../payment-export-button/payment-export-button.component";
+import { PaymentsExportAllButton } from "../payments-export-all-button/payments-export-all-button.component";
+
+export default function AccountingPayablesTableComponent({
+  loading,
+  payments,
+}) {
+  const { t } = useTranslation();
+  const [selectedPayments, setSelectedPayments] = useState([]);
+  const [transInProgress, setTransInProgress] = useState(false);
+  const [state, setState] = useState({
+    sortedInfo: {},
+    search: "",
+  });
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  const columns = [
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
+      sortOrder:
+        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+      render: (text, record) => (
+        <Link to={"/manage/jobs/" + record.job.id}>{record.job.ro_number}</Link>
+      ),
+    },
+    {
+      title: t("jobs.fields.est_number"),
+      dataIndex: "est_number",
+      key: "est_number",
+      sorter: (a, b) => a.job.est_number - b.job.est_number,
+      sortOrder:
+        state.sortedInfo.columnKey === "est_number" && state.sortedInfo.order,
+      render: (text, record) => (
+        <Link to={"/manage/jobs/" + record.job.id}>
+          {record.job.est_number}
+        </Link>
+      ),
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a.job.ownr_ln, b.job.ownr_ln),
+      sortOrder:
+        state.sortedInfo.columnKey === "ownr_ln" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.job.owner ? (
+          <Link to={"/manage/owners/" + record.job.owner.id}>
+            {`${record.job.ownr_fn || ""} ${record.job.ownr_ln || ""}`}
+          </Link>
+        ) : (
+          <span>{`${record.job.ownr_fn || ""} ${
+            record.job.ownr_ln || ""
+          }`}</span>
+        );
+      },
+    },
+    {
+      title: t("payments.fields.amount"),
+      dataIndex: "amount",
+      key: "amount",
+      render: (text, record) => (
+        <CurrencyFormatter>{record.amount}</CurrencyFormatter>
+      ),
+    },
+    {
+      title: t("payments.fields.memo"),
+      dataIndex: "memo",
+      key: "memo",
+    },
+    {
+      title: t("payments.fields.transactionid"),
+      dataIndex: "transactionid",
+      key: "transactionid",
+    },
+    {
+      title: t("payments.fields.stripeid"),
+      dataIndex: "stripeid",
+      key: "stripeid",
+    },
+    {
+      title: t("payments.fields.created_at"),
+      dataIndex: "created_at",
+      key: "created_at",
+      render: (text, record) => (
+        <DateTimeFormatter>{record.created_at}</DateTimeFormatter>
+      ),
+    },
+    {
+      title: t("payments.fields.exportedat"),
+      dataIndex: "exportedat",
+      key: "exportedat",
+      render: (text, record) => (
+        <DateTimeFormatter>{record.exportedat}</DateTimeFormatter>
+      ),
+    },
+
+    {
+      title: t("general.labels.actions"),
+      dataIndex: "actions",
+      key: "actions",
+      sorter: (a, b) => a.clm_total - b.clm_total,
+
+      render: (text, record) => (
+        <div>
+          <PaymentExportButton
+            paymentId={record.id}
+            disabled={transInProgress || !!record.exportedat}
+            loadingCallback={setTransInProgress}
+          />
+        </div>
+      ),
+    },
+  ];
+
+  const handleSearch = (e) => {
+    setState({ ...state, search: e.target.value });
+  };
+
+  const dataSource = state.search
+    ? payments.filter(
+        (v) =>
+          (v.vendor.name || "")
+            .toLowerCase()
+            .includes(state.search.toLowerCase()) ||
+          (v.invoice_number || "")
+            .toLowerCase()
+            .includes(state.search.toLowerCase())
+      )
+    : payments;
+
+  return (
+    <div>
+      <Table
+        loading={loading}
+        title={() => {
+          return (
+            <div>
+              <Input
+                value={state.search}
+                onChange={handleSearch}
+                placeholder={t("general.labels.search")}
+                allowClear
+              />
+              <PaymentsExportAllButton
+                paymentIds={selectedPayments}
+                disabled={transInProgress}
+                loadingCallback={setTransInProgress}
+                completedCallback={setSelectedPayments}
+              />
+            </div>
+          );
+        }}
+        dataSource={dataSource}
+        size="small"
+        pagination={{ position: "top", pageSize: 50 }}
+        columns={columns}
+        rowKey="id"
+        onChange={handleTableChange}
+        rowSelection={{
+          onSelectAll: (selected, selectedRows) =>
+            setSelectedPayments(selectedRows.map((i) => i.id)),
+          onSelect: (record, selected, selectedRows, nativeEvent) => {
+            setSelectedPayments(selectedRows.map((i) => i.id));
+          },
+          getCheckboxProps: (record) => ({
+            disabled: record.exported,
+          }),
+          selectedRowKeys: selectedPayments,
+          type: "checkbox",
+        }}
+      />
+    </div>
+  );
+}
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -232,19 +232,30 @@ function Header({
              >
                {t("menus.header.entertimeticket")}
              </Menu.Item>
-              <Menu.Item key="receivables">
-                <Link to="/manage/accounting/receivables">
-                  {t("menus.header.accounting-receivables")}
+
+              <Menu.SubMenu title={t("menus.header.export")}>
+                <Menu.Item key="receivables">
+                  <Link to="/manage/accounting/receivables">
+                    {t("menus.header.accounting-receivables")}
+                  </Link>
+                </Menu.Item>
+                <Menu.Item key="payables">
+                  <Link to="/manage/accounting/payables">
+                    {t("menus.header.accounting-payables")}
+                  </Link>
+                </Menu.Item>
+                <Menu.Item key="payments">
+                  <Link to="/manage/accounting/payments">
+                    {t("menus.header.accounting-payments")}
+                  </Link>
+                </Menu.Item>
+              </Menu.SubMenu>
+
+              <Menu.Item key="allpayments">
+                <Link to="/manage/payments">
+                  {t("menus.header.allpayments")}
                </Link>
              </Menu.Item>
-              <Menu.Item key="payables">
-                <Link to="/manage/accounting/payables">
-                  {t("menus.header.accounting-payables")}
-                </Link>
-              </Menu.Item>
-              <Menu.Item key="payments">
-                <Link to="/manage/payments">{t("menus.header.payments")}</Link>
-              </Menu.Item>
            </Menu.SubMenu>
            <Menu.SubMenu title={t("menus.header.shop")}>
              <Menu.Item key="shop">
--- a/client/src/components/jobs-close-export-button/jobs-close-export-button.component.jsx
+++ b/client/src/components/jobs-close-export-button/jobs-close-export-button.component.jsx
@@ -44,8 +44,8 @@ export function JobsCloseExportButton({ bodyshop, jobId, disabled }) {
    let PartnerResponse;
    try {
      PartnerResponse = await axios.post(
-        // "http://localhost:1337/qb/",
-        "http://b47e67f9cbe3.ngrok.io/qb/",
+        "http://localhost:1337/qb/",
+        // "http://609feaeae986.ngrok.io/qb/",
        QbXmlResponse.data,
        {
          headers: {
--- a/client/src/components/payment-export-button/payment-export-button.component.jsx
+++ b/client/src/components/payment-export-button/payment-export-button.component.jsx
@@ -0,0 +1,124 @@
+import { useMutation } from "@apollo/react-hooks";
+import { Button, notification } from "antd";
+import axios from "axios";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { auth } from "../../firebase/firebase.utils";
+import { UPDATE_PAYMENTS } from "../../graphql/payments.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+export function PaymentExportButton({
+  bodyshop,
+  paymentId,
+  disabled,
+  loadingCallback,
+}) {
+  const { t } = useTranslation();
+  const [updatePayment] = useMutation(UPDATE_PAYMENTS);
+  const [loading, setLoading] = useState(false);
+
+  const handleQbxml = async () => {
+    setLoading(true);
+    if (!!loadingCallback) loadingCallback(true);
+
+    let QbXmlResponse;
+    try {
+      QbXmlResponse = await axios.post(
+        "/accounting/qbxml/payments",
+        { payments: [paymentId] },
+        {
+          headers: {
+            Authorization: `Bearer ${await auth.currentUser.getIdToken(true)}`,
+          },
+        }
+      );
+      console.log("handle -> XML", QbXmlResponse);
+    } catch (error) {
+      console.log("Error getting QBXML from Server.", error);
+      notification["error"]({
+        message: t("payments.errors.exporting", {
+          error: "Unable to retrieve QBXML. " + JSON.stringify(error.message),
+        }),
+      });
+      if (loadingCallback) loadingCallback(false);
+      setLoading(false);
+      return;
+    }
+
+    let PartnerResponse;
+
+    try {
+      PartnerResponse = await axios.post(
+        "http://localhost:1337/qb/",
+        //"http://609feaeae986.ngrok.io/qb/",
+        QbXmlResponse.data
+      );
+    } catch (error) {
+      console.log("Error connecting to quickbooks or partner.", error);
+      notification["error"]({
+        message: t("payments.errors.exporting-partner"),
+      });
+      if (!!loadingCallback) loadingCallback(false);
+      setLoading(false);
+      return;
+    }
+
+    console.log("handleQbxml -> PartnerResponse", PartnerResponse);
+    const failedTransactions = PartnerResponse.data.filter((r) => !r.success);
+    const successfulTransactions = PartnerResponse.data.filter(
+      (r) => r.success
+    );
+    if (failedTransactions.length > 0) {
+      //Uh oh. At least one was no good.
+      failedTransactions.map((ft) =>
+        notification["error"]({
+          message: t("payments.errors.exporting", {
+            error: ft.errorMessage || "",
+          }),
+        })
+      );
+    }
+    if (successfulTransactions.length > 0) {
+      const paymentUpdateResponse = await updatePayment({
+        variables: {
+          paymentIdList: successfulTransactions.map((st) => st.id),
+          payment: {
+            exportedat: new Date(),
+          },
+        },
+      });
+      if (!!!paymentUpdateResponse.errors) {
+        notification["success"]({
+          message: t("jobs.successes.exported"),
+        });
+      } else {
+        notification["error"]({
+          message: t("jobs.errors.exporting", {
+            error: JSON.stringify(paymentUpdateResponse.error),
+          }),
+        });
+      }
+    }
+
+    if (!!loadingCallback) loadingCallback(false);
+    setLoading(false);
+  };
+
+  return (
+    <Button
+      onClick={handleQbxml}
+      loading={loading}
+      disabled={disabled}
+      type="dashed"
+    >
+      {t("jobs.actions.export")}
+    </Button>
+  );
+}
+
+export default connect(mapStateToProps, null)(PaymentExportButton);
--- a/client/src/components/payments-export-all-button/payments-export-all-button.component.jsx
+++ b/client/src/components/payments-export-all-button/payments-export-all-button.component.jsx
@@ -0,0 +1,126 @@
+import { useMutation } from "@apollo/react-hooks";
+import { Button, notification } from "antd";
+import axios from "axios";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { auth } from "../../firebase/firebase.utils";
+import { UPDATE_PAYMENTS } from "../../graphql/payments.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+export function PaymentsExportAllButton({
+  bodyshop,
+  paymentIds,
+  disabled,
+  loadingCallback,
+  completedCallback,
+}) {
+  const { t } = useTranslation();
+  const [updatePayments] = useMutation(UPDATE_PAYMENTS);
+  const [loading, setLoading] = useState(false);
+
+  const handleQbxml = async () => {
+    setLoading(true);
+    if (!!loadingCallback) loadingCallback(true);
+
+    let QbXmlResponse;
+    try {
+      QbXmlResponse = await axios.post(
+        "/accounting/qbxml/payments",
+        { payments: paymentIds },
+        {
+          headers: {
+            Authorization: `Bearer ${await auth.currentUser.getIdToken(true)}`,
+          },
+        }
+      );
+      console.log("handle -> XML", QbXmlResponse);
+    } catch (error) {
+      console.log("Error getting QBXML from Server.", error);
+      notification["error"]({
+        message: t("payments.errors.exporting", {
+          error: "Unable to retrieve QBXML. " + JSON.stringify(error.message),
+        }),
+      });
+      if (loadingCallback) loadingCallback(false);
+      setLoading(false);
+      return;
+    }
+
+    let PartnerResponse;
+
+    try {
+      PartnerResponse = await axios.post(
+        "http://localhost:1337/qb/",
+        QbXmlResponse.data
+      );
+    } catch (error) {
+      console.log("Error connecting to quickbooks or partner.", error);
+      notification["error"]({
+        message: t("payments.errors.exporting-partner"),
+      });
+      if (!!loadingCallback) loadingCallback(false);
+      setLoading(false);
+      return;
+    }
+
+    console.log("handleQbxml -> PartnerResponse", PartnerResponse);
+    const failedTransactions = PartnerResponse.data.filter((r) => !r.success);
+    const successfulTransactions = PartnerResponse.data.filter(
+      (r) => r.success
+    );
+    if (failedTransactions.length > 0) {
+      //Uh oh. At least one was no good.
+      failedTransactions.map((ft) =>
+        notification["error"]({
+          message: t("payments.errors.exporting", {
+            error: ft.errorMessage || "",
+          }),
+        })
+      );
+    }
+    if (successfulTransactions.length > 0) {
+      const paymentUpdateResponse = await updatePayments({
+        variables: {
+          paymentIdList: successfulTransactions.map((st) => st.id),
+          payment: {
+            //exported: true,
+            exportedat: new Date(),
+          },
+        },
+      });
+      if (!!!paymentUpdateResponse.errors) {
+        notification["success"]({
+          message: t("jobs.successes.exported"),
+        });
+      } else {
+        notification["error"]({
+          message: t("jobs.errors.exporting", {
+            error: JSON.stringify(paymentUpdateResponse.error),
+          }),
+        });
+      }
+    }
+
+    if (!!completedCallback) completedCallback([]);
+    if (!!loadingCallback) loadingCallback(false);
+    setLoading(false);
+  };
+
+  return (
+    <Button
+      onClick={handleQbxml}
+      loading={loading}
+      disabled={disabled}
+      type="dashed"
+    >
+      {t("jobs.actions.exportselected")}
+    </Button>
+  );
+}
+
+export default connect(mapStateToProps, null)(PaymentsExportAllButton);
--- a/client/src/components/tech-lookup-jobs-list/tech-lookup-jobs-list.component.jsx
+++ b/client/src/components/tech-lookup-jobs-list/tech-lookup-jobs-list.component.jsx
@@ -10,11 +10,8 @@ import { createStructuredSelector } from "reselect";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { onlyUnique } from "../../utils/arrayHelper";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import PhoneFormatter from "../../utils/PhoneFormatter";
 import { alphaSort } from "../../utils/sorters";
 import AlertComponent from "../alert/alert.component";
-import StartChatButton from "../chat-open-button/chat-open-button.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,