Feature/user field correction
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { Button, Grid, Stack, ToggleButton, ToggleButtonGroup, Typography } from "@mui/material";
|
||||
import { Button, Stack, ToggleButton, ToggleButtonGroup, Typography } from "@mui/material";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { CenterLayout } from "@witel/webapp-builder";
|
||||
import { useState } from "react";
|
||||
@@ -7,15 +7,37 @@ import { NextLinkComposed } from "@witel/webapp-builder/dist/utils/linkRouting";
|
||||
import SvgDone from "@/core/components/svgs/SvgDone";
|
||||
import RealPersonForm from "@/components/dashboard/navgan/add-request-loan/forms/RealPersonForm";
|
||||
import LegalPersonForm from "@/components/dashboard/navgan/add-request-loan/forms/LegalPersonForm";
|
||||
import CheckRules from "@/components/dashboard/navgan/add-request-loan/forms/CheckRules";
|
||||
|
||||
const AddFormComponent = () => {
|
||||
const t = useTranslations();
|
||||
const [finishLoanRequest, setFinishLoanRequest] = useState(false);
|
||||
const [rulesAccepted, setRulesAccepted] = useState(false);
|
||||
const [personType, setPersonType] = useState("real");
|
||||
const [rulesChecked, setRulesChecked] = useState({
|
||||
rule1: false,
|
||||
rule2: false,
|
||||
rule3: false,
|
||||
rule4: false,
|
||||
rule5: false,
|
||||
rule6: false,
|
||||
rule7: false,
|
||||
rule8: false,
|
||||
rule9: false,
|
||||
rule10: false,
|
||||
});
|
||||
const allRulesChecked = Object.values(rulesChecked).every(Boolean);
|
||||
|
||||
return (
|
||||
<>
|
||||
{finishLoanRequest ? (
|
||||
{!rulesAccepted ? (
|
||||
<CheckRules
|
||||
allRulesChecked={allRulesChecked}
|
||||
rulesChecked={rulesChecked}
|
||||
setRulesAccepted={setRulesAccepted}
|
||||
setRulesChecked={setRulesChecked}
|
||||
/>
|
||||
) : finishLoanRequest ? (
|
||||
<CenterLayout>
|
||||
<SvgDone width={200} height={200} />
|
||||
<Stack direction={"row"} spacing={0.7} sx={{ mb: 4 }}>
|
||||
@@ -54,5 +76,4 @@ const AddFormComponent = () => {
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddFormComponent;
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
import { Box, Button, Checkbox, FormControlLabel, FormGroup, Stack, Typography } from "@mui/material";
|
||||
import { CenterLayout } from "@witel/webapp-builder";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const CheckRules = ({ rulesChecked, setRulesChecked, setRulesAccepted, allRulesChecked }) => {
|
||||
const t = useTranslations();
|
||||
|
||||
return (
|
||||
<CenterLayout sx={{ p: 2 }}>
|
||||
<Box
|
||||
sx={{
|
||||
border: 1,
|
||||
p: { xs: 2, lg: 4 }, // Smaller padding for mobile
|
||||
borderRadius: 4,
|
||||
borderColor: "divider",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h5" // Smaller typography for mobile
|
||||
align="center"
|
||||
sx={{ mb: 3, fontSize: { xs: "1.2rem", sm: "1.5rem" } }}
|
||||
>
|
||||
{t("LoanRequest.accept_rules_title")}
|
||||
</Typography>
|
||||
<FormGroup>
|
||||
<Stack spacing={1}>
|
||||
{Object.keys(rulesChecked).map((ruleKey, index) => (
|
||||
<FormControlLabel
|
||||
key={ruleKey}
|
||||
control={
|
||||
<Checkbox
|
||||
checked={rulesChecked[ruleKey]}
|
||||
onChange={(e) =>
|
||||
setRulesChecked({
|
||||
...rulesChecked,
|
||||
[ruleKey]: e.target.checked,
|
||||
})
|
||||
}
|
||||
/>
|
||||
}
|
||||
label={t(`LoanRequest.rule${index + 1}`)}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
</FormGroup>
|
||||
<Stack alignItems={"center"} mt={2}>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
disabled={!allRulesChecked}
|
||||
onClick={() => setRulesAccepted(true)}
|
||||
sx={{
|
||||
px: { md: 25 },
|
||||
py: 1,
|
||||
}}
|
||||
>
|
||||
{t("LoanRequest.submit_rules")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
</CenterLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default CheckRules;
|
||||
@@ -489,7 +489,7 @@ const LegalPersonForm = ({ setFinishLoanRequest }) => {
|
||||
name="city_id"
|
||||
label={
|
||||
isLoadingCityList
|
||||
? `${t("LoanRequest.cityList_loading")}`
|
||||
? `${t("LoanRequest.enter_province")}`
|
||||
: cityList.length === 0
|
||||
? `${t("LoanRequest.cityList_empty")}`
|
||||
: cityTextField
|
||||
@@ -909,7 +909,11 @@ const LegalPersonForm = ({ setFinishLoanRequest }) => {
|
||||
<Grid item xs={12} sm={4}>
|
||||
<PriceField
|
||||
name="requested_facilities"
|
||||
label={t("LoanRequest.text_field_requested_facilities")}
|
||||
label={
|
||||
formik.values.vehicle_type === ""
|
||||
? t("LoanRequest.enter_vehicle_type")
|
||||
: t("LoanRequest.text_field_requested_facilities")
|
||||
}
|
||||
type="text"
|
||||
size="small"
|
||||
inputProps={{
|
||||
|
||||
@@ -598,7 +598,7 @@ const RealPersonForm = ({ setFinishLoanRequest }) => {
|
||||
name="city_id"
|
||||
label={
|
||||
isLoadingCityList
|
||||
? `${t("LoanRequest.cityList_loading")}`
|
||||
? `${t("LoanRequest.enter_province")}`
|
||||
: cityList.length === 0
|
||||
? `${t("LoanRequest.cityList_empty")}`
|
||||
: cityTextField
|
||||
@@ -789,7 +789,11 @@ const RealPersonForm = ({ setFinishLoanRequest }) => {
|
||||
<Grid item xs={12} sm={4}>
|
||||
<PriceField
|
||||
name="requested_facilities"
|
||||
label={t("LoanRequest.text_field_requested_facilities")}
|
||||
label={
|
||||
formik.values.vehicle_type === ""
|
||||
? t("LoanRequest.enter_vehicle_type")
|
||||
: t("LoanRequest.text_field_requested_facilities")
|
||||
}
|
||||
type="text"
|
||||
size="small"
|
||||
inputProps={{
|
||||
|
||||
Reference in New Issue
Block a user