ProPhoneInput: fix validation and value

src/pages/checkout/components/phoneCard.tsx

@@ -1,23 +1,19 @@
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
 import ProPhoneInput from "components/ProPhoneInput";
-import { selectCart, updatePhone } from "features/order/orderSlice";
+import { selectCart } from "features/order/orderSlice";
 import { useTranslation } from "react-i18next";
-import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { useAppSelector } from "redux/hooks";
 import { OrderType } from "pages/checkout/hooks/types.ts";
 
 export default function PhoneCard() {
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const { phone, orderType } = useAppSelector(selectCart);
+  const { orderType } = useAppSelector(selectCart);
 
   return (
     orderType !== OrderType.Gift && (
       <>
         <ProInputCard title={t("checkout.phoneNumber")}>
-          <ProPhoneInput
-            phone={phone}
-            setPhone={(phone) => dispatch(updatePhone(phone))}
-          />
+          <ProPhoneInput />
         </ProInputCard>
       </>
     )

src/pages/login/page.tsx

@@ -23,19 +23,22 @@ export default function LoginPage() {
   const [sendOtp, { isLoading }] = useSendOtpMutation();
   const { subdomain } = useParams();
 
-  const [phone, setPhone] = useState<string>("");
+  // const [phone, setPhone] = useState<string>("");
   const [selectedDate, setSelectedDate] = useState<string>("");
   const [isOpen, setIsOpen] = useState(false);
   const navigate = useNavigate();
 
   const handleLogin = async () => {
-    localStorage.setItem("userPhone", form.getFieldValue("phone"));
-    if (form.getFieldsValue())
-      sendOtp(form.getFieldsValue()).then((response: any) => {
-        message.info(t("login.OTPSentToYourPhoneNumber"));
-        navigate(`/${subdomain}/otp`);
-        localStorage.setItem("otp", response.data.result.otp);
-      });
+    form.validateFields().then(() => {
+      if (form.getFieldsValue()) {
+        localStorage.setItem("userPhone", form.getFieldValue("phone"));
+        sendOtp(form.getFieldsValue()).then((response: any) => {
+          message.info(t("login.OTPSentToYourPhoneNumber"));
+          navigate(`/${subdomain}/otp`);
+          localStorage.setItem("otp", response.data.result.otp);
+        });
+      }
+    });
   };
 
   return (
@@ -94,7 +97,11 @@ export default function LoginPage() {
           />
         </Form.Item>
 
-        <Form.Item label={t("login.date")} name="date" required>
+        <Form.Item
+          label={t("login.date")}
+          name="date"
+          rules={[{ required: true, message: "" }]}
+        >
           <Input
             placeholder={t("login.DateOfBirth")}
             size="large"
@@ -109,7 +116,7 @@ export default function LoginPage() {
           />
         </Form.Item>
 
-        <ProPhoneInput phone={phone} setPhone={setPhone} />
+        <ProPhoneInput label={t("login.phone")} propName="phone" />
 
         <Form.Item label={null}>
           <Button
@@ -120,19 +127,18 @@ export default function LoginPage() {
             style={{
               width: "100%",
               borderRadius: 1000,
-              backgroundColor:
-                phone.length <= 3 || isLoading
-                  ? themeName === "light"
-                    ? "rgba(233, 233, 233, 1)"
-                    : DisabledColor
-                  : colors.primary,
+              backgroundColor: isLoading
+                ? themeName === "light"
+                  ? "rgba(233, 233, 233, 1)"
+                  : DisabledColor
+                : colors.primary,
               color: "#FFF",
               height: 50,
               border: "none",
               marginTop: "2rem",
               boxShadow: "none",
             }}
-            disabled={phone.length <= 3 || isLoading}
+            disabled={isLoading}
             htmlType="submit"
           >
             {t("login.sendCode")}