ModalContent.js

export default function ModalContent({ closeModal, onChange, factoryId }) {
    const [_t] = useTranslation();
    const [state, dispatch] = React.useReducer(reducer, initialState);
    const [feriaValue, feriaInput, setFeriaInput] = useInput({
        type: "text",
        label: _t("Fair"),
        placeholder: _t("Enter the fair or season your products belong to"),
        rules: {
            isRequired: true,
            minLenght: 3,
        }
    });

    const { wrappedApi, isLoading, error } = useBluelagoonPromise({
        method: "upsertQuotationList",
        defaultLoadingState: false,
    });

    const handleSaveSampleList = () => {
        wrappedApi({
            fair: feriaValue,
            quotationRequestedDate: state.date,
            factoryId,
        })
            .then((resp) => {
                if (onChange) {
                    onChange(resp);
                }
                closeModal();
            })
            .catch(() => {});
    };

    return (
        <Modal>
            <div className="container">
                <div className="header">
                    <h2>{_t`Create Quotation Selection`}</h2>
                </div>
                <div className="body">
                    <Field>
                        <FieldBody>
                            {feriaInput}
                            <Field>
                                <ControlExtended>
                                    <label>{_t`Quotation Request Date`}</label>
                                    <DateSingleInput
                                        onDateChange={(data) =>
                                            dispatch({
                                                type: "dateChange",
                                                payload: data,
                                            })
                                        }
                                        onFocusChange={(focusedInput) =>
                                            dispatch({
                                                type: "focusChange",
                                                payload: focusedInput,
                                            })
                                        }
                                        date={state.date} // Date or null
                                        showDatepicker={state.showDatepicker} // Boolean
                                    />
                                </ControlExtended>
                            </Field>
                        </FieldBody>
                    </Field>
                    {error ? <Message>{error.reason}</Message> : null}
                </div>

                <div className="footer">
                    <Buttons isRight className="fullwidth">
                        <Button white width="150" onClick={closeModal}>
                            {_t`Discard`}
                        </Button>
                        <Button
                            primary
                            width="150"
                            loading={isLoading ? isLoading : undefined}
                            onClick={handleSaveSampleList}
                        >
                            {_t`Save`}
                        </Button>
                    </Buttons>
                </div>
            </div>
        </Modal>
    );
}