All files / src/features/Merchants/MerchantSidePanel/Modals/MatchReport/components SubmitButton.tsx

100% Statements 13/13
75% Branches 6/8
100% Functions 3/3
100% Lines 13/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64                          4x         28x 28x 28x     28x       28x     28x         28x 1x 1x 1x               1x         28x                        
import GiveButton from "@shared/Button/GiveButton";
import React from "react";
import NiceModal from "@ebay/nice-modal-react";
import { GIVE_CONFIRMATION_POP_UP } from "modals/modal_names";
import { statusOptions } from "../utils";
import { ReportFormFields, UseSubmitMatchReportType } from "../types";
import useSubmitMatchReport from "../hooks/useSubmitMatchReport";
import { useGetFeatureFlagValues } from "FeatureFlags/useGetFeatureFlagValues";
import { useFormContext, useWatch } from "react-hook-form";
 
interface ISubmitButton extends UseSubmitMatchReportType {
  isDisabled?: boolean;
}
const SubmitButton = ({
  merchantID,
  onSubmitSuccess,
  isDisabled = false,
}: ISubmitButton) => {
  const { isMastercardMatchEnabled } = useGetFeatureFlagValues();
  const { getValues } = useFormContext<ReportFormFields>();
  const findings: ReportFormFields["findings"] = useWatch({
    name: "findings",
  });
  const matchResult: ReportFormFields["matchResult"] = useWatch({
    name: "matchResult",
  });
 
  const isDisabledBasedOnForm = isMastercardMatchEnabled
    ? !matchResult
    : !findings.trim();
  const { handleSubmit, isSubmitting } = useSubmitMatchReport({
    merchantID,
    onSubmitSuccess,
  });
 
  const handleShowConfirmation = () => {
    const formValues = getValues();
    const { status } = formValues;
    NiceModal.show(GIVE_CONFIRMATION_POP_UP, {
      modalType: status === "clear" ? "approved" : "warning-red",
      title: "Submit MATCH Report",
      customSubmitBtnText: `Yes, Submit as ${statusOptions[status].label}`,
      showCancelBtn: true,
      description:
        "Please confirm that you have thoroughly reviewed all the information and that it is accurate and complete.",
      actions: {
        handleSuccess: { onClick: () => handleSubmit(formValues) },
      },
    });
  };
 
  return (
    <GiveButton
      label="Submit"
      size="large"
      variant="filled"
      disabled={isDisabledBasedOnForm || isSubmitting || isDisabled} //TODO: disable button while mastercard API is loading or is in error
      onClick={handleShowConfirmation}
    />
  );
};
 
export default SubmitButton;