Updates to SMS payments.

client/src/components/card-payment-modal/card-payment-modal.component..jsx

@@ -178,43 +178,13 @@ const CardPaymentModalComponent = ({
 
   return (
     <Card title="Card Payment">
-      <Button
-        onClick={() => {
-          const data = {
-            operation: "approval",
-            response: {
-              messagetype: "paymentresponse",
-              status: 5,
-              custid: 39117514,
-              paymentid: 64430260,
-              response: "A",
-              authcode: "169753",
-              declinereason: "Approved",
-              avsresult: "Y",
-              fee: 0,
-              invoice: "",
-              account: "QBD272",
-              paymenttype: "C",
-              methodhint: "AX ***1002",
-              cardbrand: "American Express",
-              cardnumdisplay: "379859..1002",
-              amount: 0.01,
-              total: 0.01,
-            },
-          };
-          form.setFieldValue("paymentResponse", data);
-          form.submit();
-        }}
-      >
-        Test
-      </Button>
       <Spin spinning={loading}>
         <Form
           onFinish={handleFinish}
           form={form}
           initialValues={{ jobid: context?.jobid }}
         >
-          <LayoutFormRow grow>
+          <LayoutFormRow grow noDivider>
             <Form.Item
               name="jobid"
               label={t("bills.fields.ro_number")}

client/src/components/job-payments/job-payments.component.jsx

@@ -1,26 +1,25 @@
-import { Button, Card, Space, Table } from "antd";
 import { EditFilled } from "@ant-design/icons";
+import { Button, Card, Space, Table } from "antd";
 import Dinero from "dinero.js";
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import {
+  openChatByPhone,
+  setMessage,
+} from "../../redux/messaging/messaging.actions";
 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 { alphaSort, dateSort } from "../../utils/sorters";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { alphaSort, dateSort } from "../../utils/sorters";
 import DataLabel from "../data-label/data-label.component";
-import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
 import PaymentExpandedRowComponent from "../payment-expanded-row/payment-expanded-row.component";
-import {
-  setMessage,
-  openChatByPhone,
-} from "../../redux/messaging/messaging.actions";
-import { parsePhoneNumber } from "libphonenumber-js";
-import axios from "axios";
+import PaymentsGenerateLink from "../payments-generate-link/payments-generate-link.component";
+import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -51,7 +50,6 @@ export function JobPayments({
     sortedInfo: {},
     filteredInfo: {},
   });
-  const [generatingURL, setGeneratingtURL] = useState(false);
 
   const columns = [
     {
@@ -165,40 +163,7 @@ export function JobPayments({
       title={t("payments.labels.title")}
       extra={
         <Space wrap>
-          <Button
-            disabled={!job.converted}
-            loading={generatingURL}
-            onClick={async () => {
-              const p = parsePhoneNumber(job.ownr_ph1, "CA");
-              setGeneratingtURL(true);
-              const response = await axios.post(
-                "/intellipay/generate_payment_url",
-                {
-                  bodyshop,
-                  amount: balance.getAmount(),
-                  account: job.ro_number,
-                  invoice: job.id,
-                }
-              );
-              setGeneratingtURL(false);
-
-              console.log("SMS", response);
-
-              openChatByPhone({
-                phone_num: p.formatInternational(),
-                jobid: job.id,
-              });
-              setMessage(
-                t("appointments.labels.smspaymentreminder", {
-                  shopname: bodyshop.shopname,
-                  amount: balance.toFormat(),
-                  payment_link: response.data.shorUrl,
-                })
-              );
-            }}
-          >
-            {t("menus.header.paymentremindersms")}
-          </Button>
+          <PaymentsGenerateLink job={job} />
           <Button
             disabled={!job.converted}
             onClick={() =>

client/src/components/payments-generate-link/payments-generate-link.component.jsx

@@ -0,0 +1,159 @@
+import { CopyFilled } from "@ant-design/icons";
+import { Button, Form, Popover, Space, message } from "antd";
+import axios from "axios";
+import Dinero from "dinero.js";
+import { parsePhoneNumber } from "libphonenumber-js";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import {
+    openChatByPhone,
+    setMessage,
+} from "../../redux/messaging/messaging.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import CurrencyFormItemComponent from "../form-items-formatted/currency-form-item.component";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
+  setMessage: (text) => dispatch(setMessage(text)),
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PaymentsGenerateLink);
+
+export function PaymentsGenerateLink({
+  bodyshop,
+  callback,
+  job,
+  openChatByPhone,
+  setMessage,
+}) {
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+
+  const [visible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [paymentLink, setPaymentLink] = useState(null);
+
+  const handleFinish = async ({ amount }) => {
+    setLoading(true);
+
+    const p = parsePhoneNumber(job.ownr_ph1, "CA");
+    setLoading(true);
+    const response = await axios.post("/intellipay/generate_payment_url", {
+      bodyshop,
+      amount: amount,
+      account: job.ro_number,
+      invoice: job.id,
+    });
+    setLoading(false);
+
+    setPaymentLink(response.data.shorUrl);
+
+    openChatByPhone({
+      phone_num: p.formatInternational(),
+      jobid: job.id,
+    });
+    setMessage(
+      t("appointments.labels.smspaymentreminder", {
+        shopname: bodyshop.shopname,
+        amount: amount,
+        payment_link: response.data.shorUrl,
+      })
+    );
+
+    //Add in confirmation & errors.
+    if (callback) callback();
+
+    // if (res.errors) {
+    //   notification["error"]({
+    //     message: t("documents.errors.updating", {
+    //       message: JSON.stringify(res.errors),
+    //     }),
+    //   });
+    // }
+
+    // setVisible(false);
+    setLoading(false);
+  };
+
+  const popContent = (
+    <div>
+      <Form onFinish={handleFinish} layout="vertical" form={form}>
+        <Form.Item
+          label={t("payments.fields.amount")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name="amount"
+        >
+          <CurrencyFormItemComponent />
+        </Form.Item>
+        {paymentLink && (
+          <Space direction="vertical">
+            <Space
+              style={{ cursor: "pointer" }}
+              onClick={() => {
+                navigator.clipboard.writeText(paymentLink);
+                message.success(t("general.actions.copied"));
+              }}
+            >
+              <div
+                onClick={() => {
+                  //Copy the link.
+                }}
+              >
+                {paymentLink}
+              </div>{" "}
+              <CopyFilled />
+            </Space>
+            <Button
+              onClick={() => {
+                const p = parsePhoneNumber(job.ownr_ph1, "CA");
+                openChatByPhone({
+                  phone_num: p.formatInternational(),
+                  jobid: job.id,
+                });
+                setMessage(
+                  t("payments.labels.smspaymentreminder", {
+                    shopname: bodyshop.shopname,
+                    amount: Dinero({
+                      amount: Math.round(form.getFieldValue("amount") * 100),
+                    }).toFormat(),
+                    payment_link: paymentLink,
+                  })
+                );
+              }}
+            >
+              {t("general.actions.sendbysms")}
+            </Button>
+          </Space>
+        )}
+      </Form>
+      <Space>
+        <Button type="primary" onClick={() => form.submit()}>
+          {t("general.actions.submit")}
+        </Button>
+        <Button onClick={() => setVisible(false)}>
+          {t("general.actions.cancel")}
+        </Button>
+      </Space>
+    </div>
+  );
+
+  return (
+    <Popover content={popContent} visible={visible}>
+      <Button onClick={() => setVisible(true)} loading={loading}>
+        {t("payments.actions.generatepaymentlink")}
+      </Button>
+    </Popover>
+  );
+}