From eb48b56f47e16184397c684b063ce476002251b7 Mon Sep 17 00:00:00 2001
From: Patrick Fic <patrick@thinkimex.com>
Date: Wed, 16 Aug 2023 16:14:34 -0700
Subject: [PATCH] Updates to SMS payments.

---
 bodyshop_translations.babel                   | 133 ++++++++++-----
 .../card-payment-modal.component..jsx         |  32 +---
 .../job-payments/job-payments.component.jsx   |  53 +-----
 .../payments-generate-link.component.jsx      | 159 ++++++++++++++++++
 client/src/translations/en_us/common.json     |   8 +-
 client/src/translations/es/common.json        |   8 +-
 client/src/translations/fr/common.json        |   8 +-
 7 files changed, 277 insertions(+), 124 deletions(-)
 create mode 100644 client/src/components/payments-generate-link/payments-generate-link.component.jsx

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index 01106a812..2a5aaa41d 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -1,4 +1,4 @@
-<babeledit_project be_version="2.7.1" version="1.2">
+<babeledit_project version="1.2" be_version="2.7.1">
     <!--
 
     BabelEdit project file
@@ -1009,27 +1009,6 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
-                                    <concept_node>
-                                        <name>smspaymentreminder</name>
-                                        <definition_loaded>false</definition_loaded>
-                                        <description></description>
-                                        <comment></comment>
-                                        <default_text></default_text>
-                                        <translations>
-                                            <translation>
-                                                <language>en-US</language>
-                                                <approved>false</approved>
-                                            </translation>
-                                            <translation>
-                                                <language>es-MX</language>
-                                                <approved>false</approved>
-                                            </translation>
-                                            <translation>
-                                                <language>fr-CA</language>
-                                                <approved>false</approved>
-                                            </translation>
-                                        </translations>
-                                    </concept_node>
                                     <concept_node>
                                         <name>suggesteddates</name>
                                         <definition_loaded>false</definition_loaded>
@@ -16228,6 +16207,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>copied</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>copylink</name>
                                         <definition_loaded>false</definition_loaded>
@@ -16564,6 +16564,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>sendbysms</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>senderrortosupport</name>
                                         <definition_loaded>false</definition_loaded>
@@ -33005,27 +33026,6 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
-                                    <concept_node>
-                                        <name>paymentremindersms</name>
-                                        <definition_loaded>false</definition_loaded>
-                                        <description></description>
-                                        <comment></comment>
-                                        <default_text></default_text>
-                                        <translations>
-                                            <translation>
-                                                <language>en-US</language>
-                                                <approved>false</approved>
-                                            </translation>
-                                            <translation>
-                                                <language>es-MX</language>
-                                                <approved>false</approved>
-                                            </translation>
-                                            <translation>
-                                                <language>fr-CA</language>
-                                                <approved>false</approved>
-                                            </translation>
-                                        </translations>
-                                    </concept_node>
                                     <concept_node>
                                         <name>phonebook</name>
                                         <definition_loaded>false</definition_loaded>
@@ -37230,6 +37230,32 @@
                     <folder_node>
                         <name>payments</name>
                         <children>
+                            <folder_node>
+                                <name>actions</name>
+                                <children>
+                                    <concept_node>
+                                        <name>generatepaymentlink</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
                             <folder_node>
                                 <name>errors</name>
                                 <children>
@@ -37747,6 +37773,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>smspaymentreminder</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>title</name>
                                         <definition_loaded>false</definition_loaded>
diff --git a/client/src/components/card-payment-modal/card-payment-modal.component..jsx b/client/src/components/card-payment-modal/card-payment-modal.component..jsx
index 6c1d8f522..15c4ffe3a 100644
--- a/client/src/components/card-payment-modal/card-payment-modal.component..jsx
+++ b/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")}
diff --git a/client/src/components/job-payments/job-payments.component.jsx b/client/src/components/job-payments/job-payments.component.jsx
index 72cef3aa9..a54c98ef7 100644
--- a/client/src/components/job-payments/job-payments.component.jsx
+++ b/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={() =>
diff --git a/client/src/components/payments-generate-link/payments-generate-link.component.jsx b/client/src/components/payments-generate-link/payments-generate-link.component.jsx
new file mode 100644
index 000000000..da3873598
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index e488ccb51..583beeaa9 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -63,7 +63,6 @@
 				"scheduledfor": "Scheduled appointment for: ",
 				"severalerrorsfound": "Several jobs have issues which may prevent accurate smart scheduling. Click to expand.",
 				"smartscheduling": "Smart Scheduling",
-				"smspaymentreminder": "This is {{shopname}} reminding you about your remaining balance of {{amount}}. To pay for the said balance click the link {{payment_link}}. Thank you very much.",
 				"suggesteddates": "Suggested Dates"
 			},
 			"successes": {
@@ -1015,6 +1014,7 @@
 				"cancel": "Cancel",
 				"clear": "Clear",
 				"close": "Close",
+				"copied": "Copied!",
 				"copylink": "Copy Link",
 				"create": "Create",
 				"delete": "Delete",
@@ -1031,6 +1031,7 @@
 				"saveandnew": "Save and New",
 				"selectall": "Select All",
 				"send": "Send",
+				"sendbysms": "Send by SMS",
 				"senderrortosupport": "Send Error to Support",
 				"submit": "Submit",
 				"tryagain": "Try Again",
@@ -1939,7 +1940,6 @@
 				"newjob": "Create New Job",
 				"owners": "Owners",
 				"parts-queue": "Parts Queue",
-				"paymentremindersms": "Send Payment Reminder via SMS",
 				"phonebook": "Phonebook",
 				"productionboard": "Production Board - Visual",
 				"productionlist": "Production Board - List",
@@ -2201,6 +2201,9 @@
 			}
 		},
 		"payments": {
+			"actions": {
+				"generatepaymentlink": "Generate Payment Link"
+			},
 			"errors": {
 				"exporting": "Error exporting payment(s). {{error}}",
 				"exporting-partner": "Error exporting to partner. Please check the partner interaction log for more errors."
@@ -2230,6 +2233,7 @@
 				"markforreexport": "Mark for Re-export",
 				"new": "New Payment",
 				"signup": "Please contact support to sign up for electronic payments.",
+				"smspaymentreminder": "This is {{shopname}} reminding you about your balance of {{amount}}. To pay for the said balance click the link {{payment_link}}.",
 				"title": "Payments",
 				"totalpayments": "Total Payments"
 			},
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 746d542a9..9ea597631 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -63,7 +63,6 @@
 				"scheduledfor": "Cita programada para:",
 				"severalerrorsfound": "",
 				"smartscheduling": "",
-				"smspaymentreminder": "",
 				"suggesteddates": ""
 			},
 			"successes": {
@@ -1015,6 +1014,7 @@
 				"cancel": "",
 				"clear": "",
 				"close": "",
+				"copied": "",
 				"copylink": "",
 				"create": "",
 				"delete": "Borrar",
@@ -1031,6 +1031,7 @@
 				"saveandnew": "",
 				"selectall": "",
 				"send": "",
+				"sendbysms": "",
 				"senderrortosupport": "",
 				"submit": "",
 				"tryagain": "",
@@ -1939,7 +1940,6 @@
 				"newjob": "",
 				"owners": "propietarios",
 				"parts-queue": "",
-				"paymentremindersms": "",
 				"phonebook": "",
 				"productionboard": "",
 				"productionlist": "",
@@ -2201,6 +2201,9 @@
 			}
 		},
 		"payments": {
+			"actions": {
+				"generatepaymentlink": ""
+			},
 			"errors": {
 				"exporting": "",
 				"exporting-partner": ""
@@ -2230,6 +2233,7 @@
 				"markforreexport": "",
 				"new": "",
 				"signup": "",
+				"smspaymentreminder": "",
 				"title": "",
 				"totalpayments": ""
 			},
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 82a729b19..4a76f081c 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -63,7 +63,6 @@
 				"scheduledfor": "Rendez-vous prévu pour:",
 				"severalerrorsfound": "",
 				"smartscheduling": "",
-				"smspaymentreminder": "",
 				"suggesteddates": ""
 			},
 			"successes": {
@@ -1015,6 +1014,7 @@
 				"cancel": "",
 				"clear": "",
 				"close": "",
+				"copied": "",
 				"copylink": "",
 				"create": "",
 				"delete": "Effacer",
@@ -1031,6 +1031,7 @@
 				"saveandnew": "",
 				"selectall": "",
 				"send": "",
+				"sendbysms": "",
 				"senderrortosupport": "",
 				"submit": "",
 				"tryagain": "",
@@ -1939,7 +1940,6 @@
 				"newjob": "",
 				"owners": "Propriétaires",
 				"parts-queue": "",
-				"paymentremindersms": "",
 				"phonebook": "",
 				"productionboard": "",
 				"productionlist": "",
@@ -2201,6 +2201,9 @@
 			}
 		},
 		"payments": {
+			"actions": {
+				"generatepaymentlink": ""
+			},
 			"errors": {
 				"exporting": "",
 				"exporting-partner": ""
@@ -2230,6 +2233,7 @@
 				"markforreexport": "",
 				"new": "",
 				"signup": "",
+				"smspaymentreminder": "",
 				"title": "",
 				"totalpayments": ""
 			},