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

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("payments.labels.smspaymentreminder", {
        shopname: bodyshop.shopname,
        amount: amount,
        payment_link: response.data.shorUrl,
      })
    );

    //Add in confirmation & errors.
    if (callback) callback();

    // 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={() => {
            form.resetFields();
            setPaymentLink(null);
            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>
  );
}