From afcc799d95a59381519a23399e37a42170555b5b Mon Sep 17 00:00:00 2001
From: Mohammad Jalali <muhammad.art79@gmail.com>
Date: Mon, 24 Jul 2023 14:32:52 +0330
Subject: [PATCH] add change phone number button and refer action in both login
 register of navy and welfare

---
 public/locales/fa/app.json                    |  2 +-
 src/components/login-navy/SendToken.jsx       | 22 ++++++-
 src/components/login-navy/SendUserData.jsx    |  4 +-
 src/components/login-navy/index.jsx           |  8 ++-
 .../login-welfare-services/SendUserData.jsx   |  4 +-
 .../login-welfare-services/index.jsx          |  8 ++-
 .../login-welfare-services/sendToken.jsx      | 24 +++++++-
 src/components/register-navy/SendToken.jsx    | 60 +++++++++----------
 .../SendUserData.jsx                          |  6 +-
 .../register-welfare-services/index.jsx       |  4 +-
 .../register-welfare-services/sendToken.jsx   | 24 +++++++-
 11 files changed, 116 insertions(+), 50 deletions(-)

diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json
index 84ffa11..2461a38 100644
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -73,7 +73,7 @@
     "button_request_verification": "دریافت کد یکبارمصرف",
     "button_submit": "ورود",
     "button_back_to_send_data": "بازگشت",
-    "sent_token_to": "ارسال پیامک به شماره",
+    "sent_token_to": "ارسال کد یکبار مصرف به شماره",
     "change_phone_number": "تغییر شماره"
   },
   "Dashboard": {
diff --git a/src/components/login-navy/SendToken.jsx b/src/components/login-navy/SendToken.jsx
index cbbb0ee..26eb4f7 100644
--- a/src/components/login-navy/SendToken.jsx
+++ b/src/components/login-navy/SendToken.jsx
@@ -5,6 +5,7 @@ import CenterLayout from "@/layouts/CenterLayout";
 import FullPageLayout from "@/layouts/FullPageLayout";
 import useDirection from "@/lib/app/hooks/useDirection";
 import useUser from "@/lib/app/hooks/useUser";
+import ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
 import LoginIcon from "@mui/icons-material/Login";
 import {
     Box,
@@ -22,7 +23,7 @@ import { useTranslations } from "next-intl";
 import Image from "next/image";
 import * as Yup from "yup";
 
-const SendToken = ({ PhoneNumber }) => {
+const SendToken = ({ PhoneNumber, setOtpToken }) => {
   const t = useTranslations();
   const { directionApp } = useDirection();
   const { setToken } = useUser();
@@ -81,6 +82,25 @@ const SendToken = ({ PhoneNumber }) => {
                   </Typography>
                   <StyledForm sx={{ width: "100%" }}>
                     <Stack spacing={3} sx={{ p: 2 }}>
+                      <Box
+                        sx={{
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                        }}
+                      >
+                        <Typography variant="button">
+                          {t("RegisterPage.sent_token_to")}: {PhoneNumber}{" "}
+                        </Typography>
+                        <Button
+                          size="small"
+                          startIcon={<ChangeCircleIcon />}
+                          variant="outlined"
+                          onClick={() => setOtpToken(false)}
+                        >
+                          {t("RegisterPage.change_phone_number")}
+                        </Button>
+                      </Box>
                       <Field
                         as={TextField}
                         name="verification_code"
diff --git a/src/components/login-navy/SendUserData.jsx b/src/components/login-navy/SendUserData.jsx
index db8a018..26b4d52 100644
--- a/src/components/login-navy/SendUserData.jsx
+++ b/src/components/login-navy/SendUserData.jsx
@@ -24,7 +24,7 @@ import Image from "next/image";
 import { useSearchParams } from "next/navigation";
 import * as Yup from "yup";
 
-const SendUserData = ({ setOtpToken, setPhoneNumber }) => {
+const SendUserData = ({ setOtpToken, setPhoneNumber, PhoneNumber }) => {
   const t = useTranslations();
   const { directionApp } = useDirection();
 
@@ -32,7 +32,7 @@ const SendUserData = ({ setOtpToken, setPhoneNumber }) => {
   const backUrlDecodedPath = searchParams.get("back_url");
 
   const initialValues = {
-    phone_number: "",
+    phone_number: PhoneNumber,
   };
   const validationSchema = Yup.object().shape({
     phone_number: Yup.string().required(t("LoginPage.error_message_required")),
diff --git a/src/components/login-navy/index.jsx b/src/components/login-navy/index.jsx
index ba30668..2ea750f 100644
--- a/src/components/login-navy/index.jsx
+++ b/src/components/login-navy/index.jsx
@@ -8,10 +8,14 @@ const LoginComponent = () => {
 
   if (!otpToken) {
     return (
-      <SendUserData setOtpToken={setOtpToken} setPhoneNumber={setPhoneNumber} />
+      <SendUserData
+        setOtpToken={setOtpToken}
+        setPhoneNumber={setPhoneNumber}
+        PhoneNumber={PhoneNumber}
+      />
     );
   } else {
-    return <SendToken PhoneNumber={PhoneNumber} />;
+    return <SendToken PhoneNumber={PhoneNumber} setOtpToken={setOtpToken} />;
   }
 };
 
diff --git a/src/components/login-welfare-services/SendUserData.jsx b/src/components/login-welfare-services/SendUserData.jsx
index 3541261..d9f5e2b 100644
--- a/src/components/login-welfare-services/SendUserData.jsx
+++ b/src/components/login-welfare-services/SendUserData.jsx
@@ -24,7 +24,7 @@ import Image from "next/image";
 import { useSearchParams } from "next/navigation";
 import * as Yup from "yup";
 
-const SendUserData = ({ setOtpToken, setPhoneNumber }) => {
+const SendUserData = ({ setOtpToken, setPhoneNumber, PhoneNumber }) => {
   const t = useTranslations();
   const { directionApp } = useDirection();
 
@@ -32,7 +32,7 @@ const SendUserData = ({ setOtpToken, setPhoneNumber }) => {
   const backUrlDecodedPath = searchParams.get("back_url");
 
   const initialValues = {
-    phone_number: "",
+    phone_number: PhoneNumber,
   };
   const validationSchema = Yup.object().shape({
     phone_number: Yup.string().required(t("LoginPage.error_message_required")),
diff --git a/src/components/login-welfare-services/index.jsx b/src/components/login-welfare-services/index.jsx
index ba30668..2ea750f 100644
--- a/src/components/login-welfare-services/index.jsx
+++ b/src/components/login-welfare-services/index.jsx
@@ -8,10 +8,14 @@ const LoginComponent = () => {
 
   if (!otpToken) {
     return (
-      <SendUserData setOtpToken={setOtpToken} setPhoneNumber={setPhoneNumber} />
+      <SendUserData
+        setOtpToken={setOtpToken}
+        setPhoneNumber={setPhoneNumber}
+        PhoneNumber={PhoneNumber}
+      />
     );
   } else {
-    return <SendToken PhoneNumber={PhoneNumber} />;
+    return <SendToken PhoneNumber={PhoneNumber} setOtpToken={setOtpToken} />;
   }
 };
 
diff --git a/src/components/login-welfare-services/sendToken.jsx b/src/components/login-welfare-services/sendToken.jsx
index 4d14dd1..2193883 100644
--- a/src/components/login-welfare-services/sendToken.jsx
+++ b/src/components/login-welfare-services/sendToken.jsx
@@ -6,6 +6,7 @@ import FullPageLayout from "@/layouts/FullPageLayout";
 import useDirection from "@/lib/app/hooks/useDirection";
 import useUser from "@/lib/app/hooks/useUser";
 import LoginIcon from "@mui/icons-material/Login";
+import ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
 import {
   Box,
   Button,
@@ -22,7 +23,7 @@ import { useTranslations } from "next-intl";
 import Image from "next/image";
 import * as Yup from "yup";
 
-const SendToken = ({ PhoneNumber }) => {
+const SendToken = ({ PhoneNumber, setOtpToken }) => {
   const t = useTranslations();
   const { directionApp } = useDirection();
   const { setToken } = useUser();
@@ -77,10 +78,29 @@ const SendToken = ({ PhoneNumber }) => {
                     />
                   </Box>
                   <Typography margin={2} variant="h4" textAlign="center">
-                    {t("login_navy")}
+                    {t("login_welfare_services")}
                   </Typography>
                   <StyledForm sx={{ width: "100%" }}>
                     <Stack spacing={3} sx={{ p: 2 }}>
+                      <Box
+                        sx={{
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                        }}
+                      >
+                        <Typography variant="button">
+                          {t("RegisterPage.sent_token_to")}: {PhoneNumber}{" "}
+                        </Typography>
+                        <Button
+                          size="small"
+                          startIcon={<ChangeCircleIcon />}
+                          variant="outlined"
+                          onClick={() => setOtpToken(false)}
+                        >
+                          {t("RegisterPage.change_phone_number")}
+                        </Button>
+                      </Box>
                       <Field
                         as={TextField}
                         name="verification_code"
diff --git a/src/components/register-navy/SendToken.jsx b/src/components/register-navy/SendToken.jsx
index 376e18b..5216fc5 100644
--- a/src/components/register-navy/SendToken.jsx
+++ b/src/components/register-navy/SendToken.jsx
@@ -7,13 +7,11 @@ import FullPageLayout from "@/layouts/FullPageLayout";
 import useDirection from "@/lib/app/hooks/useDirection";
 import useUser from "@/lib/app/hooks/useUser";
 import LoginIcon from "@mui/icons-material/Login";
-import ReplyAllIcon from "@mui/icons-material/ReplyAll";
+import ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
 import {
   Box,
   Button,
   Container,
-  Grid,
-  Link,
   Paper,
   Stack,
   TextField,
@@ -25,7 +23,13 @@ import { useTranslations } from "next-intl";
 import Image from "next/image";
 import * as Yup from "yup";
 
-const SendToken = ({ PhoneNumber, nationalId, navganId, typeId, setOtpToken }) => {
+const SendToken = ({
+  PhoneNumber,
+  nationalId,
+  navganId,
+  typeId,
+  setOtpToken,
+}) => {
   const t = useTranslations();
   const { directionApp } = useDirection();
   const { setToken } = useUser();
@@ -90,6 +94,25 @@ const SendToken = ({ PhoneNumber, nationalId, navganId, typeId, setOtpToken }) =
                   </Typography>
                   <StyledForm sx={{ width: "100%" }}>
                     <Stack spacing={3} sx={{ p: 2 }}>
+                      <Box
+                        sx={{
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                        }}
+                      >
+                        <Typography variant="button">
+                          {t("RegisterPage.sent_token_to")}: {PhoneNumber}{" "}
+                        </Typography>
+                        <Button
+                          size="small"
+                          startIcon={<ChangeCircleIcon />}
+                          variant="outlined"
+                          onClick={() => setOtpToken(false)}
+                        >
+                          {t("RegisterPage.change_phone_number")}
+                        </Button>
+                      </Box>
                       <Field
                         as={TextField}
                         name="verification_code"
@@ -112,33 +135,6 @@ const SendToken = ({ PhoneNumber, nationalId, navganId, typeId, setOtpToken }) =
                             : null
                         }
                       />
-                      {/* <Grid
-                        container
-                        rowSpacing={{ xs: 1, sm: 0 }}
-                        sx={{
-                          flexDirection: { xs: "column-reverse", sm: "row" },
-                        }}
-                      >
-                        <Grid item xs={12} sm={6} sx={{ pr: { xs: 0, sm: 1 } }}>
-                          <Button
-                            fullWidth
-                            type="back"
-                            variant="outlined"
-                            size="large"
-                            onClick={() => setOtpToken(false)}
-                            endIcon={<ReplyAllIcon />}
-                            disabled={props.isSubmitting ? true : false}
-                          >
-                            {t("RegisterPage.button_back_to_send_data")}
-                          </Button>
-                        </Grid> */}
-                      {/* <Grid item xs={12} sm={6} sx={{ pl: { xs: 0, sm: 1 } }}> */}
-                      <Button size="small" onClick={() => setOtpToken(false)}>
-                        <Link underline="hover">
-                          {t("RegisterPage.sent_token_to")}: {PhoneNumber}{" "}
-                          {t("RegisterPage.change_phone_number")}
-                        </Link>
-                      </Button>
                       <Button
                         fullWidth
                         type="submit"
@@ -149,8 +145,6 @@ const SendToken = ({ PhoneNumber, nationalId, navganId, typeId, setOtpToken }) =
                       >
                         {t("RegisterPage.button_submit")}
                       </Button>
-                      {/* </Grid> */}
-                      {/* </Grid> */}
                     </Stack>
                   </StyledForm>
                 </Stack>
diff --git a/src/components/register-welfare-services/SendUserData.jsx b/src/components/register-welfare-services/SendUserData.jsx
index 07fb6e0..ce818fa 100644
--- a/src/components/register-welfare-services/SendUserData.jsx
+++ b/src/components/register-welfare-services/SendUserData.jsx
@@ -27,6 +27,8 @@ const SendUserData = ({
   setPhoneNumber,
   setNationalId,
   setTypeId,
+  PhoneNumber,
+  nationalId,
 }) => {
   const t = useTranslations();
   const { directionApp } = useDirection();
@@ -36,8 +38,8 @@ const SendUserData = ({
 
   const initialValues = {
     type_id: "2",
-    phone_number: "",
-    national_id: "",
+    phone_number: PhoneNumber,
+    national_id: nationalId,
   };
   const validationSchema = Yup.object().shape({
     phone_number: Yup.string().required(
diff --git a/src/components/register-welfare-services/index.jsx b/src/components/register-welfare-services/index.jsx
index 24678eb..a2fc649 100644
--- a/src/components/register-welfare-services/index.jsx
+++ b/src/components/register-welfare-services/index.jsx
@@ -6,7 +6,6 @@ const RegisterNavyComponent = () => {
   const [otpToken, setOtpToken] = useState(false);
   const [PhoneNumber, setPhoneNumber] = useState("");
   const [nationalId, setNationalId] = useState("");
-  const [navganId, setNavganId] = useState("");
   const [typeId, setTypeId] = useState("");
 
   if (!otpToken) {
@@ -16,6 +15,8 @@ const RegisterNavyComponent = () => {
         setPhoneNumber={setPhoneNumber}
         setNationalId={setNationalId}
         setTypeId={setTypeId}
+        PhoneNumber={PhoneNumber}
+        nationalId={nationalId}
       />
     );
   } else {
@@ -24,6 +25,7 @@ const RegisterNavyComponent = () => {
         PhoneNumber={PhoneNumber}
         nationalId={nationalId}
         typeId={typeId}
+        setOtpToken={setOtpToken}
       />
     );
   }
diff --git a/src/components/register-welfare-services/sendToken.jsx b/src/components/register-welfare-services/sendToken.jsx
index 5d5af44..b1e3651 100644
--- a/src/components/register-welfare-services/sendToken.jsx
+++ b/src/components/register-welfare-services/sendToken.jsx
@@ -6,6 +6,7 @@ import FullPageLayout from "@/layouts/FullPageLayout";
 import useDirection from "@/lib/app/hooks/useDirection";
 import useUser from "@/lib/app/hooks/useUser";
 import LoginIcon from "@mui/icons-material/Login";
+import ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
 import {
   Box,
   Button,
@@ -21,7 +22,7 @@ import { useTranslations } from "next-intl";
 import Image from "next/image";
 import * as Yup from "yup";
 
-const SendToken = ({ PhoneNumber, nationalId, typeId }) => {
+const SendToken = ({ PhoneNumber, nationalId, typeId, setOtpToken }) => {
   const t = useTranslations();
   const { directionApp } = useDirection();
   const { setToken } = useUser();
@@ -80,10 +81,29 @@ const SendToken = ({ PhoneNumber, nationalId, typeId }) => {
                     />
                   </Box>
                   <Typography margin={2} variant="h4" textAlign="center">
-                    {t("register_navy")}
+                    {t("register_welfare_services")}
                   </Typography>
                   <StyledForm sx={{ width: "100%" }}>
                     <Stack spacing={3} sx={{ p: 2 }}>
+                      <Box
+                        sx={{
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                        }}
+                      >
+                        <Typography variant="button">
+                          {t("RegisterPage.sent_token_to")}: {PhoneNumber}{" "}
+                        </Typography>
+                        <Button
+                          size="small"
+                          startIcon={<ChangeCircleIcon />}
+                          variant="outlined"
+                          onClick={() => setOtpToken(false)}
+                        >
+                          {t("RegisterPage.change_phone_number")}
+                        </Button>
+                      </Box>
                       <Field
                         as={TextField}
                         name="verification_code"