Updates to SMS payments.

2023-08-16 16:14:34 -07:00
parent a879e99e77
commit eb48b56f47
7 changed files with 277 additions and 124 deletions
--- a/client/src/components/payments-generate-link/payments-generate-link.component.jsx
+++ 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>
+  );
+}