144 lines
3.9 KiB
JavaScript
144 lines
3.9 KiB
JavaScript
import { useEffect, useRef, useState } from "react";
|
|
import { myFetch, showInputsInvalidNotification } from "../../../utils";
|
|
import { useParams } from "react-router-dom";
|
|
import { Card, Form, notification } from "antd";
|
|
import {
|
|
MyCompanyNameFormInput,
|
|
MyFormInput,
|
|
} from "../../../Components/MyFormInputs";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
RequestState,
|
|
RequestStateItem,
|
|
} from "../../../Components/MyRequestStateItem";
|
|
|
|
export default function StoreSettings() {
|
|
const { t } = useTranslation();
|
|
const [notificationApi, notificationContextHolder] =
|
|
notification.useNotification();
|
|
|
|
const { storeId } = useParams();
|
|
const [form] = Form.useForm();
|
|
|
|
const [isRequesting, setIsRequesting] = useState(true);
|
|
const [requestState, setRequestState] = useState(RequestState.INIT);
|
|
|
|
const delayTimeout = useRef();
|
|
|
|
const companyName = Form.useWatch("companyName", form);
|
|
const phoneNumber = Form.useWatch("phoneNumber", form);
|
|
const email = Form.useWatch("email", form);
|
|
const address = Form.useWatch("address", form);
|
|
|
|
useEffect(() => {
|
|
myFetch({
|
|
url: `/store/${storeId}`,
|
|
method: "GET",
|
|
notificationApi: notificationApi,
|
|
t: t,
|
|
})
|
|
.then((data) => {
|
|
form.setFieldsValue({
|
|
companyName: data.store.name,
|
|
phoneNumber: data.store.phone_number,
|
|
email: data.store.email,
|
|
address: data.store.address,
|
|
});
|
|
|
|
setIsRequesting(false);
|
|
})
|
|
.catch(() => {});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (
|
|
companyName === undefined ||
|
|
phoneNumber === undefined ||
|
|
email === undefined ||
|
|
address === undefined
|
|
)
|
|
return;
|
|
|
|
if (RequestState.INIT === requestState) {
|
|
setRequestState(RequestState.NOTHING);
|
|
return;
|
|
}
|
|
|
|
setRequestState(RequestState.REQUESTING);
|
|
|
|
if (delayTimeout.current) {
|
|
clearTimeout(delayTimeout.current);
|
|
}
|
|
|
|
delayTimeout.current = setTimeout(() => {
|
|
form
|
|
.validateFields()
|
|
.then(() => {
|
|
myFetch({
|
|
url: `/store/${storeId}`,
|
|
method: "POST",
|
|
body: {
|
|
name: companyName,
|
|
phoneNumber,
|
|
email,
|
|
address,
|
|
},
|
|
notificationApi: notificationApi,
|
|
t: t,
|
|
})
|
|
.then(() => setRequestState(RequestState.SUCCESS))
|
|
.catch(() => setRequestState(RequestState.FAILED));
|
|
})
|
|
.catch(() => {
|
|
setRequestState(RequestState.NOTHING);
|
|
showInputsInvalidNotification(notificationApi, t);
|
|
});
|
|
}, 500);
|
|
}, [companyName, phoneNumber, email, address]);
|
|
|
|
return (
|
|
<>
|
|
{notificationContextHolder}
|
|
|
|
<Card
|
|
title={t("storeSettings.pageTitle")}
|
|
extra={
|
|
<RequestStateItem
|
|
state={requestState}
|
|
setRequestState={setRequestState}
|
|
/>
|
|
}
|
|
>
|
|
<Form form={form} requiredMark={false} layout="vertical">
|
|
<MyCompanyNameFormInput showSkeleton={isRequesting} />
|
|
|
|
<MyFormInput
|
|
formItemName="phoneNumber"
|
|
label={t("common.companyPhoneNumber")}
|
|
inputPlaceholder={t("common.companyPhoneNumberPlaceholder")}
|
|
showSkeleton={isRequesting}
|
|
inputNotRequired
|
|
/>
|
|
|
|
<MyFormInput
|
|
formItemName="email"
|
|
label={t("common.companyEmail")}
|
|
inputPlaceholder={t("common.companyEmailPlaceholder")}
|
|
showSkeleton={isRequesting}
|
|
inputNotRequired
|
|
/>
|
|
|
|
<MyFormInput
|
|
formItemName="address"
|
|
label={t("common.companyAddress")}
|
|
inputType="textarea"
|
|
inputPlaceholder={t("common.companyAddressPlaceholder")}
|
|
showSkeleton={isRequesting}
|
|
inputNotRequired
|
|
/>
|
|
</Form>
|
|
</Card>
|
|
</>
|
|
);
|
|
}
|