marco.pms.web/src/components/collections/AddPayment.jsx

import { zodResolver } from "@hookform/resolvers/zod";
import React, { useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { defaultPayment, paymentSchema } from "./collectionSchema";
import Label from "../common/Label";
import DatePicker from "../common/DatePicker";
import { formatDate } from "date-fns";
import { useCollectionContext } from "../../pages/collections/CollectionPage";
import { useAddPayment, useCollection } from "../../hooks/useCollections";
import { formatFigure, localToUtc } from "../../utils/appUtils";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import Avatar from "../common/Avatar";
import { PaymentHistorySkeleton } from "./CollectionSkeleton";

const AddPayment = ({ onClose }) => {
  const { addPayment } = useCollectionContext();
  const { data, isLoading, isError, error } = useCollection(
    addPayment?.invoiceId
  );
  const methods = useForm({
    resolver: zodResolver(paymentSchema),
    defaultValues: defaultPayment,
  });
  const {
    control,
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = methods;
  const { mutate: AddPayment, isPending } = useAddPayment(() => {
    handleClose();
  });
  const onSubmit = (formData) => {
    const payload = {
      ...formData,
      paymentReceivedDate: localToUtc(formData.paymentReceivedDate),
      invoiceId: addPayment.invoiceId,
    };

    AddPayment(payload);
  };
  const handleClose = (formData) => {
    reset(defaultPayment);
    onClose();
  };

  return (
    <div className="container pb-3">
      <div className="text-black fs-5 mb-2">Add Payment</div>
      <FormProvider {...methods}>
        <form onSubmit={handleSubmit(onSubmit)} className="p-0 text-start">
          <div className="row px-md-1 px-0">
            <div className="col-12 col-md-6  mb-2">
              <Label required>TransanctionId</Label>
              <input
                type="text"
                className="form-control form-control-sm"
                {...register("transactionId")}
              />
              {errors.transactionId && (
                <small className="danger-text">
                  {errors.transactionId.message}
                </small>
              )}
            </div>

            <div className="col-12 col-md-6  mb-2">
              <Label required>Transaction Date </Label>
              <DatePicker
                name="paymentReceivedDate"
                control={control}
                maxDate={new Date()}
              />
              {errors.paymentReceivedDate && (
                <small className="danger-text">
                  {errors.paymentReceivedDate.message}
                </small>
              )}
            </div>

            <div className="col-12 col-md-6  mb-2">
              <Label htmlFor="amount" className="form-label" required>
                Amount
              </Label>
              <input
                type="number"
                id="amount"
                className="form-control form-control-sm"
                min="1"
                step="0.01"
                inputMode="decimal"
                {...register("amount", { valueAsNumber: true })}
              />
              {errors.amount && (
                <small className="danger-text">{errors.amount.message}</small>
              )}
            </div>

            <div className="d-flex justify-content-end gap-3">
              {" "}
              <button
                type="reset"
                className="btn btn-label-secondary btn-sm mt-3"
                onClick={handleClose}
                // disabled={isPending}
              >
                Cancel
              </button>
              <button
                type="submit"
                className="btn btn-primary btn-sm mt-3"
                disabled={isPending}
              >
                {isPending ? "Please Wait..." : "Submit"}
              </button>
            </div>
          </div>
        </form>
      </FormProvider>

      {isLoading ? (
        <PaymentHistorySkeleton />
      ) : (
        data?.receivedInvoicePayments?.length > 0 && (
          <div className="mt-1 text-start">
            <div className="mb-2 text-secondry fs-6">
              <i className="bx bx-history bx-sm me-1"></i>History
            </div>

            <div className="row text-start">
              {data.receivedInvoicePayments.map((payment, index) => (
                <div className="col-12 mb-2" key={payment.id}>
                  <div className=" p-2 border-start border-warning">
                    <div className="d-flex justify-content-between">
                      <p className="mb-1">
                        <strong>Date:</strong>{" "}
                        {formatUTCToLocalTime(payment.paymentReceivedDate)}
                      </p>{" "}
                      <span className="text-secondary ">
                        {formatFigure(payment.amount, {
                          type: "currency",
                          currency: "INR",
                        })}
                      </span>
                    </div>

                    <div className="row">
                      <div className="col-12 col-md-6">
                        <p className="mb-1">
                          <small className="fw-semibold">Transaction ID:</small>{" "}
                          {payment.transactionId}
                        </p>
                      </div>
                      <div className="col-12 col-md-6">
                        <div className="mb-0 d-flex align-items-center">
                          <small className="fw-semibold">Received By:</small>{" "}
                          <Avatar
                            size="xs"
                            firstName={payment?.createdBy?.firstName}
                            lastName={payment?.createdBy?.lastName}
                          />{" "}
                          {payment?.createdBy?.firstName}{" "}
                          {payment.createdBy?.lastName}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )
      )}
    </div>
  );
};

export default AddPayment;