All files / src/components/Disputes/GiveDisputePanel/modals GiveRespondToDisputeModal.tsx

100% Statements 8/8
73.33% Branches 11/15
100% Functions 2/2
100% Lines 8/8

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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113                                          1x 61x                             60x   60x                         60x   60x   60x                                                         2x                                                      
import NiceModal, { useModal } from "@ebay/nice-modal-react";
import { useRespondToDispute } from "@components/Disputes/RespondToDispute/hooks/useRespondToDispute";
import GiveBaseModal from "@shared/modals/GiveBaseModal";
import { FormProvider } from "react-hook-form";
import GiveRespondToDisputeBody from "./GiveRespondToDisputeBody";
import GiveButton from "@shared/Button/GiveButton";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
 
type Props = {
  disputeId: string;
  lastCaseId: string;
  merchantId: number;
  isDraft?: boolean;
  caseAction?: string;
  isPassedDispute?: boolean;
  isPanelAction?: boolean;
  panelActionProps?: any;
  status?: string;
  isAmex?: boolean;
  isWorldpay?: boolean;
};
export const GiveRespondToDisputeModal = NiceModal.create((props: Props) => {
  const { visible, remove } = useModal();
 
  const {
    methods,
    handleSaveDraft,
    handleClose,
    caseActions,
    isLoading,
    handleShowConfirmationPopup,
    hideInputsNotRequired,
    riskAcceptedRequired,
    autoPdfMissing,
    notes,
    isInitialLoading,
    hasError,
  } = useRespondToDispute(props);
 
  const caseActionValue = methods.watch("caseAction");
 
  const {
    panelActionProps: {
      label: title,
      action,
      primaryAction,
      secondaryAction,
      description,
    } = {},
    isPanelAction,
    isAmex,
    isWorldpay,
  } = props;
 
  const disableSave = !caseActionValue && !action;
 
  return (
    <GiveBaseModal
      open={visible}
      title={title ? title : "Respond to Chargeback Dispute"}
      width="720px"
      onClose={remove}
      buttons={
        <>
          <GiveTooltip
            color="default"
            title="Case Action is mandatory"
            fluidWidth
            disableFocusListener={!disableSave}
            disableHoverListener={!disableSave}
            disableTouchListener={!disableSave}
          >
            <GiveButton
              label={
                isPanelAction ? secondaryAction?.label : "Save Draft and Close"
              }
              variant="ghost"
              onClick={isPanelAction ? handleClose : handleSaveDraft}
              disabled={disableSave || isLoading}
              hidden={props?.status === "under_review"}
            />
          </GiveTooltip>
          <GiveButton
            label={isPanelAction ? primaryAction?.label : "Submit Evidence"}
            size="large"
            onClick={() => handleShowConfirmationPopup(action)}
            disabled={hasError || isLoading}
          />
        </>
      }
    >
      <FormProvider {...methods}>
        <GiveRespondToDisputeBody
          hideInputsNotRequired={hideInputsNotRequired}
          caseActions={caseActions}
          riskAcceptedRequired={riskAcceptedRequired}
          isPassedDispute={props?.isPassedDispute}
          isPanelAction={isPanelAction}
          action={action}
          isAmex={isAmex}
          isWorldpay={isWorldpay}
          autoPdfMissing={autoPdfMissing}
          description={description}
          notes={notes}
          isLoading={isInitialLoading}
        />
      </FormProvider>
    </GiveBaseModal>
  );
});
 
export default GiveRespondToDisputeModal;