IO-2933 Add in ability to text payments for multiple ROs.

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

@@ -1,6 +1,6 @@
-import { DeleteFilled } from "@ant-design/icons";
+import { DeleteFilled, CopyFilled } from "@ant-design/icons";
 import { useLazyQuery, useMutation } from "@apollo/client";
-import { Button, Card, Col, Form, Input, Row, Space, Spin, Statistic, notification } from "antd";
+import { Button, Card, Col, Form, Input, Row, Space, Spin, Statistic, message, notification } from "antd";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -29,7 +29,7 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
   const { context, actions } = cardPaymentModal;
 
   const [form] = Form.useForm();
-
+  const [paymentLink, setPaymentLink] = useState();
   const [loading, setLoading] = useState(false);
   // const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
   const [insertPaymentResponse] = useMutation(INSERT_PAYMENT_RESPONSE);
@@ -51,8 +51,7 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
       //2024-04-25: Nothing is going to happen here anymore. We'll completely rely on the callback.
       //Add a slight delay to allow the refetch to properly get the data.
       setTimeout(() => {
-        if (actions && actions.refetch && typeof actions.refetch === "function")
-          actions.refetch();
+        if (actions && actions.refetch && typeof actions.refetch === "function") actions.refetch();
         setLoading(false);
         toggleModalVisible();
       }, 750);
@@ -86,7 +85,6 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
     });
   };
 
-
   const handleIntelliPayCharge = async () => {
     setLoading(true);
     //Validate
@@ -101,7 +99,7 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
       const response = await axios.post("/intellipay/lightbox_credentials", {
         bodyshop,
         refresh: !!window.intellipay,
-        paymentSplitMeta: form.getFieldsValue(),
+        paymentSplitMeta: form.getFieldsValue()
       });
 
       if (window.intellipay) {
@@ -126,6 +124,42 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
     }
   };
 
+  const handleIntelliPayChargeShortLink = async () => {
+    setLoading(true);
+    //Validate
+    try {
+      await form.validateFields();
+    } catch (error) {
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const { payments } = form.getFieldsValue();
+      const response = await axios.post("/intellipay/generate_payment_url", {
+        bodyshop,
+        amount: payments?.reduce((acc, val) => {
+          return acc + (val?.amount || 0);
+        }, 0),
+        account: payments && data && data.jobs.length > 0 ? data.jobs.map((j) => j.ro_number).join(", ") : null,
+        comment: btoa(JSON.stringify(payments)),
+        paymentSplitMeta: form.getFieldsValue()
+      });
+      if (response.data) {
+        setPaymentLink(response.data?.shorUrl);
+        navigator.clipboard.writeText(response.data?.shorUrl);
+        message.success(t("general.actions.copied"));
+      }
+      setLoading(false);
+    } catch (error) {
+      notification.open({
+        type: "error",
+        message: t("job_payments.notifications.error.openingip")
+      });
+      setLoading(false);
+    }
+  };
+
   return (
     <Card title="Card Payment">
       <Spin spinning={loading}>
@@ -208,10 +242,7 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
             {() => {
               //If all of the job ids have been fileld in, then query and update the IP field.
               const { payments } = form.getFieldsValue();
-              if (
-                payments?.length > 0 &&
-                payments?.filter((p) => p?.jobid).length === payments?.length
-              ) {
+              if (payments?.length > 0 && payments?.filter((p) => p?.jobid).length === payments?.length) {
                 refetch({ jobids: payments.map((p) => p.jobid) });
               }
               return (
@@ -246,7 +277,6 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
               const totalAmountToCharge = payments?.reduce((acc, val) => {
                 return acc + (val?.amount || 0);
               }, 0);
-
               return (
                 <Space style={{ float: "right" }}>
                   <Statistic title="Amount To Charge" value={totalAmountToCharge} precision={2} />
@@ -273,11 +303,42 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
                   >
                     {t("job_payments.buttons.proceedtopayment")}
                   </Button>
+                  <Space direction="vertical" align="center">
+                    <Button
+                      type="primary"
+                      //  data-ipayname="submit"
+                      className="ipayfield"
+                      loading={queryLoading || loading}
+                      disabled={!(totalAmountToCharge > 0)}
+                      onClick={handleIntelliPayChargeShortLink}
+                    >
+                      {t("job_payments.buttons.create_short_link")}
+                    </Button>
+                  </Space>
                 </Space>
               );
             }}
           </Form.Item>
         </Form>
+        {paymentLink && (
+          <Space
+            style={{ cursor: "pointer", float: "right" }}
+            align="end"
+            onClick={() => {
+              navigator.clipboard.writeText(paymentLink);
+              message.success(t("general.actions.copied"));
+            }}
+          >
+            <div
+              onClick={() => {
+                //Copy the link.
+              }}
+            >
+              {paymentLink}
+            </div>
+            <CopyFilled />
+          </Space>
+        )}
       </Spin>
     </Card>
   );

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

@@ -30,8 +30,12 @@ export function PaymentsGenerateLink({ bodyshop, callback, job, openChatByPhone,
 
   const handleFinish = async ({ amount }) => {
     setLoading(true);
-
-    const p = parsePhoneNumber(job.ownr_ph1, "CA");
+    let p;
+    try {
+      p = parsePhoneNumber(job.ownr_ph1 || "", "CA");
+    } catch (error) {
+      console.log("Unable to part phone number");
+    }
     setLoading(true);
     const response = await axios.post("/intellipay/generate_payment_url", {
       bodyshop,
@@ -42,17 +46,19 @@ export function PaymentsGenerateLink({ bodyshop, callback, job, openChatByPhone,
     setLoading(false);
     setPaymentLink(response.data.shorUrl);
 
-    openChatByPhone({
-      phone_num: p.formatInternational(),
-      jobid: job.id
-    });
-    setMessage(
-      t("payments.labels.smspaymentreminder", {
-        shopname: bodyshop.shopname,
-        amount: amount,
-        payment_link: response.data.shorUrl
-      })
-    );
+    if (p) {
+      openChatByPhone({
+        phone_num: p.formatInternational(),
+        jobid: job.id
+      });
+      setMessage(
+        t("payments.labels.smspaymentreminder", {
+          shopname: bodyshop.shopname,
+          amount: amount,
+          payment_link: response.data.shorUrl
+        })
+      );
+    }
 
     //Add in confirmation & errors.
     if (callback) callback();

client/src/translations/en_us/common.json

@@ -1373,6 +1373,7 @@
     },
     "job_payments": {
       "buttons": {
+        "create_short_link": "Generate Short Link",
         "goback": "Go Back",
         "proceedtopayment": "Proceed to Payment",
         "refundpayment": "Refund Payment"

client/src/translations/fr/common.json

@@ -1373,6 +1373,7 @@
 		},
 		"job_payments": {
 			"buttons": {
+				"create_short_link": "",
 				"goback": "",
 				"proceedtopayment": "",
 				"refundpayment": ""