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 | 4x 4x 20x 20x 20x 20x 20x 20x 2x 20x 20x 4x 44x 20x | import { Stack, Box } from "@mui/system";
import Portal from "@mui/material/Portal";
import GiveButton from "@shared/Button/GiveButton";
import React from "react";
import GiveText from "@shared/Text/GiveText";
import ReportStatusSelector from "./ReportStatusSelector";
import { FormProvider, useForm } from "react-hook-form";
import { HFGiveInput } from "@shared/HFInputs/HFGiveInput/HFGiveInput";
import { styled } from "@theme/v2/Provider";
import { useModal } from "@ebay/nice-modal-react";
import ReportEvidenceUpload from "./ReportEvidenceUpload";
import SubmitButton from "./SubmitButton";
import { useCheckDocumentProcessing } from "@redux/slices/uploadProgressSlice";
import { ContentViewTypes } from "../match.types";
import { IComponentProps, MatchStatusEnum, ReportFormFields } from "../types";
import { UploadDocumentTypes } from "@redux/slices/uploadProgressSlice/types";
import { useGetFeatureFlagValues } from "FeatureFlags/useGetFeatureFlagValues";
import MastercardResponse from "./MastercardResponse";
const REPORT_FORM_DEFAULT_VALUES = {
findings: "",
files: [],
status: MatchStatusEnum.Clear,
matchResult: undefined,
};
const AddNewReportView = ({
merchantID,
handleChangeView,
}: IComponentProps) => {
const { isMastercardMatchEnabled } = useGetFeatureFlagValues();
const isConvertingDocument = useCheckDocumentProcessing(
UploadDocumentTypes.merchantMatchReport,
);
const methods = useForm<ReportFormFields>({
defaultValues: REPORT_FORM_DEFAULT_VALUES,
});
const { remove } = useModal();
const changeToBaseView = () => handleChangeView(ContentViewTypes.MATCH);
return (
<Stack gap={2.5}>
<FormProvider {...methods}>
<StyledStack>
<ReportStatusSelector />
<Stack gap={1}>
<GiveText variant="bodyS">Findings</GiveText>
<StyledTextareaContainer
isMastercardMatchEnabled={isMastercardMatchEnabled}
>
<HFGiveInput
name="findings"
multiline
placeholder="Enter your findings..."
rows={!isMastercardMatchEnabled ? 11 : undefined}
maxLength={isMastercardMatchEnabled ? 5000 : undefined}
displayCounter={isMastercardMatchEnabled}
/>
</StyledTextareaContainer>
</Stack>
<ReportEvidenceUpload merchantID={merchantID} />
<MastercardResponse
merchantID={merchantID}
setValue={(val) => methods.setValue("matchResult", val)}
/>
</StyledStack>
<Portal
container={() => document.getElementById("match-report-modal-footer")}
>
<GiveButton
label="Cancel"
size="large"
variant="ghost"
onClick={remove}
disabled={isConvertingDocument}
/>
<SubmitButton
merchantID={merchantID}
onSubmitSuccess={changeToBaseView}
isDisabled={isConvertingDocument}
/>
</Portal>
</FormProvider>
</Stack>
);
};
const StyledStack = styled(Stack)(({ theme }) => ({
gap: theme.spacing(2.5),
}));
const StyledTextareaContainer = styled(Box, {
shouldForwardProp: (prop) => prop !== "isMastercardMatchEnabled",
})<{ isMastercardMatchEnabled: boolean }>(({ isMastercardMatchEnabled }) => ({
...(isMastercardMatchEnabled && {
"& .MuiFormControl-root .MuiOutlinedInput-root": {
padding: "14px 16px !important",
alignItems: "start",
minHeight: "74px !important",
maxHeight: "148px !important",
overflow: "hidden",
},
"& .MuiInputBase-input": {
padding: "0 !important",
minHeight: "20px !important",
maxHeight: "120px !important",
overflowY: "auto !important",
},
}),
}));
export default AddNewReportView;
|