From 3b170615e044328789492f1dac394c478ff1e7c2 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Sun, 16 Jul 2023 11:29:24 +0330 Subject: [PATCH 1/5] notification handling for register and login in navy and welfare --- src/components/login-navy/SendToken.jsx | 4 +++- src/components/login-welfare-services/SendUserData.jsx | 6 ++++-- src/components/login-welfare-services/sendToken.jsx | 2 ++ src/components/register-navy/SendToken.jsx | 4 +++- src/components/register-navy/SendUserData.jsx | 4 ++++ .../register-welfare-services/SendUserData.jsx | 5 +++++ src/components/register-welfare-services/sendToken.jsx | 9 ++++++--- 7 files changed, 27 insertions(+), 7 deletions(-) diff --git a/src/components/login-navy/SendToken.jsx b/src/components/login-navy/SendToken.jsx index d7fb84b..b274224 100644 --- a/src/components/login-navy/SendToken.jsx +++ b/src/components/login-navy/SendToken.jsx @@ -1,4 +1,4 @@ -// import Notifications from "@/core/components/notifications"; +import Notifications from "@/core/components/notifications"; import StyledForm from "@/core/components/StyledForm"; import { LOGIN } from "@/core/data/apiRoutes"; import CenterLayout from "@/layouts/CenterLayout"; @@ -38,12 +38,14 @@ const SendToken = ({ PhoneNumber }) => { }); const handleSubmit = async (values, props) => { + Notifications(directionApp, t, undefined); await axios .post(LOGIN, { phone_number: values.phone_number, verification_code: values.verification_code, }) .then(function (response) { + Notifications(directionApp, t, response); setToken(response.data.token); }) .catch(function (error) { diff --git a/src/components/login-welfare-services/SendUserData.jsx b/src/components/login-welfare-services/SendUserData.jsx index ec8072f..0a8280b 100644 --- a/src/components/login-welfare-services/SendUserData.jsx +++ b/src/components/login-welfare-services/SendUserData.jsx @@ -1,4 +1,4 @@ -// import Notifications from "@/core/components/notifications"; +import Notifications from "@/core/components/notifications"; import LinkRouting from "@/core/components/LinkRouting"; import StyledForm from "@/core/components/StyledForm"; import { LOGIN_SEND_OTP_TOKEN } from "@/core/data/apiRoutes"; @@ -39,16 +39,18 @@ const SendUserData = ({ setOtpToken, setPhoneNumber }) => { }); const handleSubmit = async (values, props) => { + Notifications(directionApp, t, undefined); await axios .post(LOGIN_SEND_OTP_TOKEN, { phone_number: values.phone_number, }) .then(function (response) { + Notifications(directionApp, t, response); setPhoneNumber(values.phone_number); setOtpToken(true); }) .catch(function (error) { - // Notifications(directionApp, error.response, t); + Notifications(directionApp, error.response, t); props.setSubmitting(false); }); }; diff --git a/src/components/login-welfare-services/sendToken.jsx b/src/components/login-welfare-services/sendToken.jsx index 00414b7..2ddefe2 100644 --- a/src/components/login-welfare-services/sendToken.jsx +++ b/src/components/login-welfare-services/sendToken.jsx @@ -38,12 +38,14 @@ const SendToken = ({ PhoneNumber }) => { }); const handleSubmit = async (values, props) => { + Notifications(directionApp, t, undefined); await axios .post(LOGIN, { phone_number: values.phone_number, verification_code: values.verification_code, }) .then(function (response) { + Notifications(directionApp, t, response); setToken(response.data.token); }) .catch(function (error) { diff --git a/src/components/register-navy/SendToken.jsx b/src/components/register-navy/SendToken.jsx index ab8a4ba..45d3606 100644 --- a/src/components/register-navy/SendToken.jsx +++ b/src/components/register-navy/SendToken.jsx @@ -37,6 +37,7 @@ const SendToken = ({ PhoneNumber, nationalId, navganId, typeId }) => { }); const handleSubmit = async (values, props) => { + Notifications(directionApp, t, undefined); await axios .post(REGISTER, { phone_number: values.phone_number, @@ -46,10 +47,11 @@ const SendToken = ({ PhoneNumber, nationalId, navganId, typeId }) => { verification_code: values.verification_code, }) .then(function (response) { + Notifications(directionApp, t, response); setToken(response.data.token); }) .catch(function (error) { - // Notifications(directionApp, error.response, t); + Notifications(directionApp, error.response, t); props.setSubmitting(false); }); }; diff --git a/src/components/register-navy/SendUserData.jsx b/src/components/register-navy/SendUserData.jsx index 8766d44..ff7431e 100644 --- a/src/components/register-navy/SendUserData.jsx +++ b/src/components/register-navy/SendUserData.jsx @@ -1,4 +1,5 @@ import LinkRouting from "@/core/components/LinkRouting"; +import Notifications from "@/core/components/notifications"; import StyledForm from "@/core/components/StyledForm"; import { REGISTER_SEND_OTP_TOKEN } from "@/core/data/apiRoutes"; import CenterLayout from "@/layouts/CenterLayout"; @@ -26,6 +27,7 @@ const SendUserData = ({ setTypeId, }) => { const t = useTranslations(); + const { directionApp } = useDirection(); const searchParams = useSearchParams(); const backUrlDecodedPath = searchParams.get("back_url"); @@ -47,6 +49,7 @@ const SendUserData = ({ }); const handleSubmit = async (values, props) => { + Notifications(directionApp, t, undefined); await axios .post(REGISTER_SEND_OTP_TOKEN, { type_id: values.type_id, @@ -55,6 +58,7 @@ const SendUserData = ({ phone_number: values.phone_number, }) .then(function (response) { + Notifications(directionApp, t, response); setPhoneNumber(values.phone_number); setNationalId(values.national_id); setNavganId(values.navgan_id); diff --git a/src/components/register-welfare-services/SendUserData.jsx b/src/components/register-welfare-services/SendUserData.jsx index ddf4933..b579131 100644 --- a/src/components/register-welfare-services/SendUserData.jsx +++ b/src/components/register-welfare-services/SendUserData.jsx @@ -1,8 +1,10 @@ import LinkRouting from "@/core/components/LinkRouting"; +import Notifications from "@/core/components/notifications"; import StyledForm from "@/core/components/StyledForm"; import { REGISTER_SEND_OTP_TOKEN } from "@/core/data/apiRoutes"; import CenterLayout from "@/layouts/CenterLayout"; import FullPageLayout from "@/layouts/FullPageLayout"; +import useDirection from "@/lib/app/hooks/useDirection"; import FingerprintIcon from "@mui/icons-material/Fingerprint"; import { Box, @@ -27,6 +29,7 @@ const SendUserData = ({ setTypeId, }) => { const t = useTranslations(); + const { directionApp } = useDirection(); const searchParams = useSearchParams(); const backUrlDecodedPath = searchParams.get("back_url"); @@ -46,6 +49,7 @@ const SendUserData = ({ }); const handleSubmit = async (values, props) => { + Notifications(directionApp, t, undefined); await axios .post(REGISTER_SEND_OTP_TOKEN, { type_id: values.type_id, @@ -53,6 +57,7 @@ const SendUserData = ({ phone_number: values.phone_number, }) .then(function (response) { + Notifications(directionApp, t, response); setPhoneNumber(values.phone_number); setNationalId(values.national_id); setTypeId(values.type_id); diff --git a/src/components/register-welfare-services/sendToken.jsx b/src/components/register-welfare-services/sendToken.jsx index 3fa7f1c..02431cc 100644 --- a/src/components/register-welfare-services/sendToken.jsx +++ b/src/components/register-welfare-services/sendToken.jsx @@ -1,8 +1,9 @@ +import Notifications from "@/core/components/notifications"; import StyledForm from "@/core/components/StyledForm"; import { REGISTER } from "@/core/data/apiRoutes"; import CenterLayout from "@/layouts/CenterLayout"; import FullPageLayout from "@/layouts/FullPageLayout"; -// import useDirection from "@/lib/app/hooks/useDirection"; +import useDirection from "@/lib/app/hooks/useDirection"; import useUser from "@/lib/app/hooks/useUser"; import LoginIcon from "@mui/icons-material/Login"; import { @@ -22,7 +23,7 @@ import * as Yup from "yup"; const SendToken = ({ PhoneNumber, nationalId, typeId }) => { const t = useTranslations(); - // const { directionApp } = useDirection(); + const { directionApp } = useDirection(); const { setToken } = useUser(); const initialValues = { @@ -38,6 +39,7 @@ const SendToken = ({ PhoneNumber, nationalId, typeId }) => { }); const handleSubmit = async (values, props) => { + Notifications(directionApp, t, undefined); await axios .post(REGISTER, { phone_number: values.phone_number, @@ -46,10 +48,11 @@ const SendToken = ({ PhoneNumber, nationalId, typeId }) => { verification_code: values.verification_code, }) .then(function (response) { + Notifications(directionApp, t, response); setToken(response.data.token); }) .catch(function (error) { - // Notifications(directionApp, error.response, t); + Notifications(directionApp, error.response, t); props.setSubmitting(false); }); }; From e440ca83e1dd6c5cfc0270953c03dbcaf7aa1acb Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Sun, 16 Jul 2023 11:43:47 +0330 Subject: [PATCH 2/5] debug notification --- src/components/login-navy/SendToken.jsx | 2 +- src/components/login-welfare-services/SendUserData.jsx | 2 +- src/components/login-welfare-services/sendToken.jsx | 2 +- src/components/register-navy/SendToken.jsx | 2 +- src/components/register-navy/SendUserData.jsx | 2 +- src/components/register-welfare-services/SendUserData.jsx | 2 +- src/components/register-welfare-services/sendToken.jsx | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/login-navy/SendToken.jsx b/src/components/login-navy/SendToken.jsx index b274224..cbbb0ee 100644 --- a/src/components/login-navy/SendToken.jsx +++ b/src/components/login-navy/SendToken.jsx @@ -49,7 +49,7 @@ const SendToken = ({ PhoneNumber }) => { setToken(response.data.token); }) .catch(function (error) { - Notifications(directionApp, error.response, t); + Notifications(directionApp, t, error.response); props.setSubmitting(false); }); }; diff --git a/src/components/login-welfare-services/SendUserData.jsx b/src/components/login-welfare-services/SendUserData.jsx index 0a8280b..3541261 100644 --- a/src/components/login-welfare-services/SendUserData.jsx +++ b/src/components/login-welfare-services/SendUserData.jsx @@ -50,7 +50,7 @@ const SendUserData = ({ setOtpToken, setPhoneNumber }) => { setOtpToken(true); }) .catch(function (error) { - Notifications(directionApp, error.response, t); + Notifications(directionApp, t, error.response); props.setSubmitting(false); }); }; diff --git a/src/components/login-welfare-services/sendToken.jsx b/src/components/login-welfare-services/sendToken.jsx index 2ddefe2..bd7e466 100644 --- a/src/components/login-welfare-services/sendToken.jsx +++ b/src/components/login-welfare-services/sendToken.jsx @@ -49,7 +49,7 @@ const SendToken = ({ PhoneNumber }) => { setToken(response.data.token); }) .catch(function (error) { - Notifications(directionApp, error.response, t); + Notifications(directionApp, t, error.response); props.setSubmitting(false); }); }; diff --git a/src/components/register-navy/SendToken.jsx b/src/components/register-navy/SendToken.jsx index 45d3606..d4156b8 100644 --- a/src/components/register-navy/SendToken.jsx +++ b/src/components/register-navy/SendToken.jsx @@ -51,7 +51,7 @@ const SendToken = ({ PhoneNumber, nationalId, navganId, typeId }) => { setToken(response.data.token); }) .catch(function (error) { - Notifications(directionApp, error.response, t); + Notifications(directionApp, t, error.response); props.setSubmitting(false); }); }; diff --git a/src/components/register-navy/SendUserData.jsx b/src/components/register-navy/SendUserData.jsx index ff7431e..bb13517 100644 --- a/src/components/register-navy/SendUserData.jsx +++ b/src/components/register-navy/SendUserData.jsx @@ -66,7 +66,7 @@ const SendUserData = ({ setOtpToken(true) }) .catch(function (error) { - Notifications(directionApp, error.response, t); + Notifications(directionApp, t, error.response); props.setSubmitting(false); }); }; diff --git a/src/components/register-welfare-services/SendUserData.jsx b/src/components/register-welfare-services/SendUserData.jsx index b579131..c74a1f4 100644 --- a/src/components/register-welfare-services/SendUserData.jsx +++ b/src/components/register-welfare-services/SendUserData.jsx @@ -64,7 +64,7 @@ const SendUserData = ({ setOtpToken(true); }) .catch(function (error) { - Notifications(directionApp, error.response, t); + Notifications(directionApp, t, error.response); props.setSubmitting(false); }); }; diff --git a/src/components/register-welfare-services/sendToken.jsx b/src/components/register-welfare-services/sendToken.jsx index 02431cc..7634f93 100644 --- a/src/components/register-welfare-services/sendToken.jsx +++ b/src/components/register-welfare-services/sendToken.jsx @@ -52,7 +52,7 @@ const SendToken = ({ PhoneNumber, nationalId, typeId }) => { setToken(response.data.token); }) .catch(function (error) { - Notifications(directionApp, error.response, t); + Notifications(directionApp, t, error.response); props.setSubmitting(false); }); }; From 74acce64ccdf442dc7d0895b85c19d205959c7b8 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Sun, 16 Jul 2023 11:57:14 +0330 Subject: [PATCH 3/5] show diffrent between welfare and navy to user --- src/components/dashboard/loan-request/index.jsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/dashboard/loan-request/index.jsx b/src/components/dashboard/loan-request/index.jsx index 7f6f827..3b5d31f 100644 --- a/src/components/dashboard/loan-request/index.jsx +++ b/src/components/dashboard/loan-request/index.jsx @@ -3,14 +3,25 @@ import DashboardLayouts from "@/layouts/dashboardLayouts"; import useUser from "@/lib/app/hooks/useUser"; import NavyForm from "./NavyForm"; import WelfareServicesForm from "./WelfareServicesForm"; +import { Divider, Chip, Box } from "@mui/material"; +import { useTranslations } from "next-intl"; const DashboardLoanRequestComponent = () => { - - const { token, user } = useUser(); + const t = useTranslations(); + const { user } = useUser(); return ( + + + + + {user.type_id == 1 ? : } From e0b63a6f74a7a9b3b97154de902b808ad17642a3 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Sun, 16 Jul 2023 12:07:04 +0330 Subject: [PATCH 4/5] add notification in pages that do not have that --- src/components/login-welfare-services/sendToken.jsx | 2 +- src/components/register-navy/SendToken.jsx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/login-welfare-services/sendToken.jsx b/src/components/login-welfare-services/sendToken.jsx index bd7e466..4d14dd1 100644 --- a/src/components/login-welfare-services/sendToken.jsx +++ b/src/components/login-welfare-services/sendToken.jsx @@ -1,4 +1,4 @@ -// import Notifications from "@/core/components/notifications"; +import Notifications from "@/core/components/notifications"; import StyledForm from "@/core/components/StyledForm"; import { LOGIN } from "@/core/data/apiRoutes"; import CenterLayout from "@/layouts/CenterLayout"; diff --git a/src/components/register-navy/SendToken.jsx b/src/components/register-navy/SendToken.jsx index d4156b8..fcba709 100644 --- a/src/components/register-navy/SendToken.jsx +++ b/src/components/register-navy/SendToken.jsx @@ -1,8 +1,9 @@ +import Notifications from "@/core/components/notifications"; import StyledForm from "@/core/components/StyledForm"; import { REGISTER } from "@/core/data/apiRoutes"; import CenterLayout from "@/layouts/CenterLayout"; import FullPageLayout from "@/layouts/FullPageLayout"; -// import useDirection from "@/lib/app/hooks/useDirection"; +import useDirection from "@/lib/app/hooks/useDirection"; import useUser from "@/lib/app/hooks/useUser"; import LoginIcon from "@mui/icons-material/Login"; import { @@ -20,7 +21,7 @@ import * as Yup from "yup"; const SendToken = ({ PhoneNumber, nationalId, navganId, typeId }) => { const t = useTranslations(); - // const { directionApp } = useDirection(); + const { directionApp } = useDirection(); const { setToken } = useUser(); const initialValues = { From 285e8bb2bffe0aff50024d9fdbefdb466a8c5a83 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Tue, 18 Jul 2023 16:48:31 +0330 Subject: [PATCH 5/5] add image uploading and document uploading system by a reusable component named UploadSystem --- public/images/upload-image.svg | 1 + public/locales/fa/app.json | 11 +- .../dashboard/loan-follow-up/index.jsx | 188 ++++++--------- .../dashboard/loan-request/NavyForm.jsx | 99 ++++---- .../loan-request/WelfareServicesForm.jsx | 220 +++++++++--------- src/components/first/index.jsx | 1 + src/components/register-navy/SendToken.jsx | 1 + src/components/register-navy/SendUserData.jsx | 2 + .../SendUserData.jsx | 1 + .../register-welfare-services/sendToken.jsx | 1 + src/core/components/Messages.jsx | 1 + src/core/components/UploadSystem.jsx | 163 +++++++++++++ src/core/data/apiRoutes.js | 2 + 13 files changed, 400 insertions(+), 291 deletions(-) create mode 100644 public/images/upload-image.svg create mode 100644 src/core/components/UploadSystem.jsx diff --git a/public/images/upload-image.svg b/public/images/upload-image.svg new file mode 100644 index 0000000..3bbca65 --- /dev/null +++ b/public/images/upload-image.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index 67cc090..138c4b9 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -11,6 +11,7 @@ "pending": "درحال اجرا...", "user_navy": "ناوگان", "page_not_found": "صفحه مورد نظر یافت نشد", + "delete": "حذف", "header": { "open_profile": "پروفایل", "edit_profile": "ویرایش پروفایل", @@ -83,10 +84,8 @@ "error_message_required": "اجباری!", "text_field_phone_number": "شماره تلفن", "text_field_enter_your_phone_number": "شماره تلفن خود را وارد کنید", - "text_field_first_name": "نام", - "text_field_enter_your_first_name": "نام خود را وارد کنید", - "text_field_last_name": "نام خانوادگی", - "text_field_enter_your_last_name": "نام خانوادگی خود را وارد کنید", + "text_field_name": "نام", + "text_field_enter_your_name": "نام خود را وارد کنید", "text_field_vehicle_type": "نام وسیله نقلیه", "text_field_enter_your_vehicle_type": "نام وسیله نقلیه خود را وارد کنید", "text_field_province": "استان", @@ -95,8 +94,8 @@ "text_field_enter_your_navgan_id": "شماره ناوگان خود را وارد کنید", "text_field_national_code": "کد ملی", "text_field_enter_your_national_code": "کد ملی خود را وارد کنید", - "text_field_birth_certificate_id": "شماره شناسنامه", - "text_field_enter_your_birth_certificate_id": "شماره شناسنامه خود را وارد کنید", + "text_field_shenasname_id": "شماره شناسنامه", + "text_field_enter_your_shenasname_id": "شماره شناسنامه خود را وارد کنید", "text_field_plate_number": "شماره پلاک", "text_field_enter_your_plate_number": "شماره پلاک خود را وارد کنید", "button_submit": "ثبت درخواست" diff --git a/src/components/dashboard/loan-follow-up/index.jsx b/src/components/dashboard/loan-follow-up/index.jsx index e05fa20..1b211af 100644 --- a/src/components/dashboard/loan-follow-up/index.jsx +++ b/src/components/dashboard/loan-follow-up/index.jsx @@ -1,11 +1,8 @@ -import CenterLayout from "@/layouts/CenterLayout"; import DashboardLayouts from "@/layouts/dashboardLayouts"; import useUser from "@/lib/app/hooks/useUser"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import { - Avatar, - Box, - Card, + Avatar, Card, CardActions, CardContent, CardHeader, @@ -13,7 +10,7 @@ import { Grid, IconButton, Stack, - Typography, + Typography } from "@mui/material"; import { styled } from "@mui/material/styles"; import { useTranslations } from "next-intl"; @@ -30,19 +27,42 @@ const ExpandMore = styled((props) => { }), })); +const data = [ + { + name: "جان دو", + date: "۱۳۹۹/۰۴/۲۵", + description: + "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.", + }, + { + name: "جین اسمیت", + date: "۱۳۹۹/۰۴/۲۶", + description: "نُلا ویته الیت لیبرو آ، آ فارِترا آوگوه.", + }, + { + name: "مایک جانسون", + date: "۱۳۹۹/۰۴/۲۷", + description: + "دوئیس مولیس، است نُن کُمُدو لُکتوس، نیسی ارات پورتیتور لیگولا.", + }, +]; + const DashboardLoanFollowUpComponent = () => { const t = useTranslations(); const { token } = useUser(); - const [expanded, setExpanded] = useState(false); + const [expanded, setExpanded] = useState([]); - const handleExpandClick = () => { - setExpanded(!expanded); + const handleExpandClick = (index) => { + setExpanded((prevExpanded) => { + const newExpanded = [...prevExpanded]; + newExpanded[index] = !newExpanded[index]; + return newExpanded; + }); }; return ( - { container columnSpacing={2} rowSpacing={2} - sx={{ alignItems: "center", justifyContent: "center" }} + sx={{ alignItems: "start", justifyContent: "center" }} > - - - - } - title="اسم اقاهه" - subheader="تاریخ اگه خواستیم" - /> - - - متن تست - - - - - - - - + {data.map((item, index) => ( + + + + } + title={item.name} + subheader={item.date} + /> - اطلاعات تکمیلی: - پارت دوم متن تست - پارت سه همون قبلی - در ادامه باید بگم که... - درپایان همینه که هست + + متن تست + - - - - - - - } - title="اسم اقاهه" - subheader="تاریخ اگه خواستیم" - /> - - - متن تست - - - - - - - - - - اطلاعات تکمیلی: - پارت دوم متن تست - پارت سه همون قبلی - در ادامه باید بگم که... - درپایان همینه که هست - - - - - - - - } - title="اسم اقاهه" - subheader="تاریخ اگه خواستیم" - /> - - - متن تست - - - - - - - - - - اطلاعات تکمیلی: - پارت دوم متن تست - پارت سه همون قبلی - در ادامه باید بگم که... - درپایان همینه که هست - - - - + + handleExpandClick(index)} + aria-expanded={expanded[index]} + aria-label="show more" + > + + + + + + اطلاعات تکمیلی: + {item.description} + + + + + ))} - ); }; diff --git a/src/components/dashboard/loan-request/NavyForm.jsx b/src/components/dashboard/loan-request/NavyForm.jsx index fc7ed83..7686862 100644 --- a/src/components/dashboard/loan-request/NavyForm.jsx +++ b/src/components/dashboard/loan-request/NavyForm.jsx @@ -1,4 +1,6 @@ +import Notifications from "@/core/components/notifications"; import StyledForm from "@/core/components/StyledForm"; +import useDirection from "@/lib/app/hooks/useDirection"; import DataSaverOnIcon from "@mui/icons-material/DataSaverOn"; import { Box, Button, Stack, TextField } from "@mui/material"; import { Field, Formik } from "formik"; @@ -7,26 +9,45 @@ import Image from "next/image"; const NavyForm = () => { const t = useTranslations(); + const { directionApp } = useDirection(); const initialValues = { - first_name: "", - last_name: "", + name: "", phone_number: "", vehicle_type: "", plate_number: "", province: "", navgan_id: "", national_code: "", - birth_certificate_id: "", + shenasname_id: "", national_card_img: "", - birth_certificate_img: "", + shenasname_img: "", + }; + + const handleSubmit = async (values, props) => { + Notifications(directionApp, t, undefined); + await axios + .post(SEND_LOAN_REQUEST_NAVGAN, { + name: values.name, + phone_number: values.phone_number, + vehicle_type: values.vehicle_type, + plate_number: values.plate_number, + province_id: values.province, + navgan_id: values.navgan_id, + national_code: values.national_code, + shenasname_id: values.shenasname_id, + }) + .then(function (response) { + Notifications(directionApp, t, response); + }) + .catch(function (error) { + Notifications(directionApp, t, error.response); + props.setSubmitting(false); + }); }; return ( - + {(props) => ( { - - - { diff --git a/src/components/dashboard/loan-request/WelfareServicesForm.jsx b/src/components/dashboard/loan-request/WelfareServicesForm.jsx index 0bca6ff..4ea21b6 100644 --- a/src/components/dashboard/loan-request/WelfareServicesForm.jsx +++ b/src/components/dashboard/loan-request/WelfareServicesForm.jsx @@ -1,31 +1,71 @@ +import Notifications from "@/core/components/notifications"; import StyledForm from "@/core/components/StyledForm"; +import UploadSystem from "@/core/components/UploadSystem"; +import { SEND_LOAN_REQUEST_WELFARE } from "@/core/data/apiRoutes"; +import useDirection from "@/lib/app/hooks/useDirection"; import DataSaverOnIcon from "@mui/icons-material/DataSaverOn"; import { Box, Button, Stack, TextField } from "@mui/material"; +import axios from "axios"; import { Field, Formik } from "formik"; import { useTranslations } from "next-intl"; -import Image from "next/image"; +import { useState } from "react"; import * as Yup from "yup"; const WelfareServicesForm = () => { const t = useTranslations(); + const { directionApp } = useDirection(); + // upload files + const [selectedImageShenasname, setSelectedImageShenasname] = useState( + "/images/upload-image.svg" + ); + const [fileTypeShenasname, setFileTypeShenasname] = useState(null); + const [fileNameShenasname, setFileNameShenasname] = useState(null); + const [selectedImageNationalCard, setSelectedImageNationalCard] = useState( + "/images/upload-image.svg" + ); + const [fileTypeNationalCard, setFileTypeNationalCard] = useState(null); + const [fileNameNationalCard, setFileNameNationalCard] = useState(null); + + const handleUploadChangeShenasname = (event, setFieldValue) => { + const uploadedFile = event.target?.files?.[0]; + const fileType = event.target.files[0].type; + const fileName = event.target.files[0].name; + if (uploadedFile) { + setSelectedImageShenasname(URL.createObjectURL(uploadedFile)); + setFileTypeShenasname(fileType); + setFileNameShenasname(fileName); + setFieldValue("shenasname_img", uploadedFile); + } + }; + const handleUploadChangeNationalCard = (event, setFieldValue) => { + const uploadedFile = event.target?.files?.[0]; + const fileType = event.target.files[0].type; + const fileName = event.target.files[0].name; + if (uploadedFile) { + setSelectedImageNationalCard(URL.createObjectURL(uploadedFile)); + setFileTypeNationalCard(fileType); + setFileNameNationalCard(fileName); + setFieldValue("national_card_img", uploadedFile); + } + }; + // end upload files + + // initial values, validation and request action of form const initialValues = { - first_name: "", - last_name: "", + name: "", phone_number: "", vehicle_type: "", plate_number: "", province: "", - navgan_id: "", national_code: "", - birth_certificate_id: "", - national_card_img: "", - birth_certificate_img: "", + shenasname_id: "", + national_card_img: null, + shenasname_img: null, }; const validationSchema = Yup.object().shape({ - first_name: Yup.string().required(t("LoanRequest.error_message_required")), - last_name: Yup.string().required(t("LoanRequest.error_message_required")), + name: Yup.string().required(t("LoanRequest.error_message_required")), phone_number: Yup.string().required( t("LoanRequest.error_message_required") ), @@ -36,19 +76,45 @@ const WelfareServicesForm = () => { t("LoanRequest.error_message_required") ), province: Yup.string().required(t("LoanRequest.error_message_required")), - navgan_id: Yup.string().required(t("LoanRequest.error_message_required")), national_code: Yup.string().required( t("LoanRequest.error_message_required") ), - birth_certificate_id: Yup.string().required( + shenasname_id: Yup.string().required( t("LoanRequest.error_message_required") ), }); + const handleSubmit = async (values, props) => { + Notifications(directionApp, t, undefined); + console.log(values.national_card_img); + console.log(values.shenasname_img); + await axios + .post(SEND_LOAN_REQUEST_WELFARE, { + name: values.name, + phone_number: values.phone_number, + vehicle_type: values.vehicle_type, + plate_number: values.plate_number, + province_id: values.province, + navgan_id: values.navgan_id, + national_code: values.national_code, + shenasname_id: values.shenasname_id, + national_card_image: values.national_card_img, + shenasname_image: values.shenasname_img, + }) + .then(function (response) { + Notifications(directionApp, t, response); + }) + .catch(function (error) { + Notifications(directionApp, t, error.response); + props.setSubmitting(false); + }); + }; + // end initial values, validation and request action of form + return ( {(props) => ( @@ -79,50 +145,15 @@ const WelfareServicesForm = () => { - - - { width: "100%", }} > - - - { @@ -365,24 +368,32 @@ const WelfareServicesForm = () => { width: "100%", }} > - - {t("app_name")} - - - {t("app_name")} - + + handleUploadChangeShenasname(e, props.setFieldValue) + } + setselectedImage={setSelectedImageShenasname} + setFieldValue={props.setFieldValue} + fieldname="shenasname_img" + fileType={fileTypeShenasname} + fileName={fileNameShenasname} + imageAlt={t("app_name")} + imageSize={[300 /*width*/, 150 /*height*/]} + /> + + handleUploadChangeNationalCard(e, props.setFieldValue) + } + setselectedImage={setSelectedImageNationalCard} + setFieldValue={props.setFieldValue} + fieldname="national_card_img" + fileType={fileTypeNationalCard} + fileName={fileNameNationalCard} + imageAlt={t("app_name")} + imageSize={[300 /*width*/, 150 /*height*/]} + /> { flexDirection: { xs: "column", sm: "row" }, alignItems: "center", mx: "auto", + my: 2, width: { xs: "100%", sm: "30%", md: "25%" }, }} > diff --git a/src/components/first/index.jsx b/src/components/first/index.jsx index 897f7cd..edd3a8a 100644 --- a/src/components/first/index.jsx +++ b/src/components/first/index.jsx @@ -19,6 +19,7 @@ const FirstComponent = () => { alt={t("app_name")} width={300} height={200} + priority /> {t("app_name")} diff --git a/src/components/register-navy/SendToken.jsx b/src/components/register-navy/SendToken.jsx index fcba709..62bbb86 100644 --- a/src/components/register-navy/SendToken.jsx +++ b/src/components/register-navy/SendToken.jsx @@ -76,6 +76,7 @@ const SendToken = ({ PhoneNumber, nationalId, navganId, typeId }) => { fill src="/images/register.svg" alt={t("app_name")} + priority /> diff --git a/src/components/register-navy/SendUserData.jsx b/src/components/register-navy/SendUserData.jsx index bb13517..1433266 100644 --- a/src/components/register-navy/SendUserData.jsx +++ b/src/components/register-navy/SendUserData.jsx @@ -4,6 +4,7 @@ import StyledForm from "@/core/components/StyledForm"; import { REGISTER_SEND_OTP_TOKEN } from "@/core/data/apiRoutes"; import CenterLayout from "@/layouts/CenterLayout"; import FullPageLayout from "@/layouts/FullPageLayout"; +import useDirection from "@/lib/app/hooks/useDirection"; import FingerprintIcon from "@mui/icons-material/Fingerprint"; import { Box, @@ -90,6 +91,7 @@ const SendUserData = ({ fill src="/images/register.svg" alt={t("app_name")} + priority /> diff --git a/src/components/register-welfare-services/SendUserData.jsx b/src/components/register-welfare-services/SendUserData.jsx index c74a1f4..07fb6e0 100644 --- a/src/components/register-welfare-services/SendUserData.jsx +++ b/src/components/register-welfare-services/SendUserData.jsx @@ -88,6 +88,7 @@ const SendUserData = ({ fill src="/images/register.svg" alt={t("app_name")} + priority /> diff --git a/src/components/register-welfare-services/sendToken.jsx b/src/components/register-welfare-services/sendToken.jsx index 7634f93..5d5af44 100644 --- a/src/components/register-welfare-services/sendToken.jsx +++ b/src/components/register-welfare-services/sendToken.jsx @@ -76,6 +76,7 @@ const SendToken = ({ PhoneNumber, nationalId, typeId }) => { fill src="/images/register.svg" alt={t("app_name")} + priority /> diff --git a/src/core/components/Messages.jsx b/src/core/components/Messages.jsx index db6a980..2bd45c8 100644 --- a/src/core/components/Messages.jsx +++ b/src/core/components/Messages.jsx @@ -11,6 +11,7 @@ const Message = ({ text, actions }) => { alt="loading loan facilities" width={100} height={100} + priority /> {text} {actions} diff --git a/src/core/components/UploadSystem.jsx b/src/core/components/UploadSystem.jsx new file mode 100644 index 0000000..b60552a --- /dev/null +++ b/src/core/components/UploadSystem.jsx @@ -0,0 +1,163 @@ +import { Box, Button, TextField, Typography } from "@mui/material"; +import { useTranslations } from "next-intl"; +import Image from "next/image"; +import DeleteForeverIcon from "@mui/icons-material/DeleteForever"; +import { useRef } from "react"; + +const UploadSystem = ({ + selectedImage, + setselectedImage, + handleUploadChange, + fieldname, + setFieldValue, + imageAlt, + imageSize, + fileType, + fileName, +}) => { + const t = useTranslations(); + const fileInputRef = useRef(null); + + const handleClick = () => { + fileInputRef.current.click(); + }; + const handleDeleteImage = () => { + setselectedImage("/images/upload-image.svg"); + setFieldValue(fieldname, null); + }; + + const isDocumentFormat = (fileType) => { + const documentFormats = [ + "application/pdf", + "application/msword", + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + "application/vnd.ms-excel", + "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", + ]; + return documentFormats.includes(fileType); + }; + + return ( + + {selectedImage === "/images/upload-image.svg" ? ( + {imageAlt} + ) : fileType && fileType.startsWith("image/") ? ( + {imageAlt} + ) : ( + fileType && + isDocumentFormat(fileType) && ( + + + {fileName} + + + ) + )} + + + + + ); +}; + +export default UploadSystem; + + + +//////****** usage document ******///////// +// 1.) use component inside your page +// 2.) list of props that you need to send is down below +// 2.1) selectedImage // this value come from useState that you need to write on your own component +// 2.2) handleUploadChange // use on your own component (explain below more) you should set it to {(e) =>handleUploadChange[your special name]](e, props.setFieldValue)} +// 2.3) setFieldValue // for setting value of file to null when user click on Delete button. you should set it to {props.setFieldValue} +// 2.4) fieldname name that file field has on your formik initialValues. +// 2.5) fileType // type of your file shows its document image etc... +// 2.6) imageAlt // alt of your image. +// 2.7) imageSize // this is size of your image box and value type is like that imageSize={ [width , height] }. +// 2.9) setselectedImage // for making box empty when user click on delete button (explain below more) + +// const [selectedImage[your special name]], setSelectedImage[your special name]] = useState( +// "/images/upload-image.svg" // default image +// ); +// const [fileType[your special name], setFileType[your special name]] = useState(null); +// const [fileName[your special name], setFileName[your special name]] = useState(null); + + +// const handleUploadChange[your special name]] = (event, setFieldValue) => { +// const uploadedFile = event.target?.files?.[0]; +// const fileType = event.target.files[0].type; +// const fileName = event.target.files[0].name; +// if (uploadedFile) { // just check file is uploaded or not +// setSelectedImage[your special name]](URL.createObjectURL(uploadedFile)); // set image value +// setFileType[your special name]](fileType); // set fileType +// setFileName[your special name]](fileName); // set fileName +// setFieldValue("[your special name]]_img", uploadedFile); set field value for sending data (this automaticaly append value in initial state) +// } +// }; +//////****** end usage document ******///////// diff --git a/src/core/data/apiRoutes.js b/src/core/data/apiRoutes.js index b4a2241..ebbd73c 100644 --- a/src/core/data/apiRoutes.js +++ b/src/core/data/apiRoutes.js @@ -5,5 +5,7 @@ export const LOGIN = BASE_URL + "/login"; export const REGISTER_SEND_OTP_TOKEN = BASE_URL + "/register/send_otp"; export const REGISTER = BASE_URL + "/register"; export const USER_INFO = BASE_URL + "/profile/info"; +export const SEND_LOAN_REQUEST_NAVGAN = BASE_URL + "/navgan/store_loan"; +export const SEND_LOAN_REQUEST_WELFARE = BASE_URL + "/navgan/store_loan";