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 | 4x 4x 4x 4x 4x 1x 1x 1x 1x 1x 1x 4x 1x 1x 13x | import { Stack } from "@mui/material";
import { FileTextIcon } from "@phosphor-icons/react";
import { usePayBuilderForm } from "@sections/PayBuilder/provider/PayBuilderFormProvider";
import { GiveInput } from "@shared/GiveInputs/GiveInput";
import HFGiveSelect from "@shared/HFInputs/HFGiveSelect/HFGiveSelect";
import GiveText from "@shared/Text/GiveText";
import { Controller } from "react-hook-form";
import { paymentDueDateOptions } from "../conts";
import { getDueDateHelperText } from "../utils";
import moment from "moment";
import { ControlledDatePicker } from "@sections/PayBuilder/Forms/DateAndLocation/components/ControlledDatePicker";
function InvoiceDetailsSection() {
const { methods } = usePayBuilderForm();
const dueDate = methods.watch("About.endsAt");
const selectedOption = methods.watch("About.selectedDueDateOption");
const isCustom = selectedOption === "custom";
const addDaysFn = (value: any) => {
const currentDate = moment.utc().startOf("day");
let dueDate = null;
Eif (value !== "never" && value !== "custom") {
dueDate = currentDate.clone().add(Number(value), "days");
}
methods.setValue("About.selectedDueDateOption", value);
methods.setValue("About.endsAt", dueDate ? dueDate.unix() : null);
};
return (
<Stack gap="16px">
<Stack direction="row" spacing={2}>
<FileTextIcon size={24} />
<GiveText variant="bodyL" color="primary">
Details
</GiveText>
</Stack>
<GiveText variant="bodyS" color="primary">
Payment Due
</GiveText>
<HFGiveSelect
options={paymentDueDateOptions}
name="About.selectedDueDateOption"
onChange={(e) => {
const value = e.target.value;
addDaysFn(value);
}}
/>
{isCustom && (
<ControlledDatePicker name="About.endsAt" disablePast useUTCMoment />
)}
{getDueDateHelperText(dueDate || "")}
<GiveText variant="bodyS" color="primary">
Add a note (Optional)
</GiveText>
<Controller
control={methods.control}
name={"About.notes"}
render={({ field: { onChange, value } }) => {
return (
<GiveInput
name={"About.notes"}
value={value}
onChange={onChange}
maxLength={500}
displayCounter
multiline
rows={6}
/>
);
}}
/>
</Stack>
);
}
export default InvoiceDetailsSection;
|