update src/views/Address/index.js

src/views/Address/index.js

@@ -1,7 +1,13 @@
 import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
 import { useNavigate, useLocation } from "react-router-dom";
-import { publicApi, userAddress, dialog, user } from "../../redux/actions";
+import {
+  publicApi,
+  userAddress,
+  dialog,
+  user,
+  dashboard,
+} from "../../redux/actions";
 
 import onInput from "../../utils/onInput";
 import location from "../../utils/location";
@@ -33,18 +39,14 @@ export const Address = ({
   isMobile,
   isDark,
   setDialog,
-  profilePage,
   editPage,
-  setProfileFields,
-  profileFields,
-  setProfile,
-  user,
   setHeaderOptions,
   headerOptions,
   getAddress,
   addressInfo,
   updateAddress,
   isDashboard,
+  setDashboardPage,
 }) => {
   const [addressFields, setAddressFields] = useState({});
   const [mapAddress, setMapAddress] = useState(null);
@@ -57,7 +59,7 @@ export const Address = ({
       getProvince();
     }
     if (isMobile) {
-      if (editPage || profilePage) {
+      if (editPage) {
         setHeaderOptions(headerOptions);
       } else {
         setHeaderOptions({
@@ -106,61 +108,10 @@ export const Address = ({
     }
   }, [addressFields]);
 
-  useEffect(() => {
-    if (profileFields?.provinceId) {
-      getCity({
-        provinceId: profileFields?.provinceId,
-      });
-    }
-  }, [profileFields]);
-
   const onChange = (name, value) => {
     setAddressFields({ ...addressFields, [name]: value });
   };
 
-  const submitProfile = () => {
-    if (user.cellphone && user.cellphone.length < 11) {
-      setDialog({
-        text: window.t("شماره موبایل خود را وارد کنید."),
-        type: "alert",
-        accept: () => {},
-        open: true,
-      });
-      return;
-    }
-    const postalCode = profileFields?.postalCode || user.postalCode;
-    if (postalCode && postalCode.length < 10) {
-      setDialog({
-        text: window.t("شماره کد پستی خود را وارد کنید."),
-        type: "alert",
-        accept: () => {},
-        open: true,
-      });
-      return;
-    }
-    const data = {
-      firstName: profileFields?.firstName || user.firstName,
-      lastName: profileFields?.lastName || user.lastName,
-      username: profileFields?.username || user.username,
-      cellphone: user.cellphone,
-      password: profileFields?.password || user.password,
-      postalCode,
-      address: profileFields?.address || user.address,
-      email: profileFields?.email || user.email,
-      phone: profileFields?.phone || user.phone,
-      nationalId: profileFields?.nationalId || user.nationalId,
-      picFileId: profileFields?.picFileId || user.picFileId,
-      gender: profileFields?.gender || user.gender,
-      birthDate: profileFields?.birthDate || user.birthDate,
-      schools: profileFields?.schools || user.schools,
-      gradeIds: profileFields?.gradeIds || user.gradeIds,
-      provinceId: profileFields?.provinceId || user.provinceId,
-      cityId: profileFields?.cityId || user.cityId,
-      docFileIds: profileFields?.docFileIds || user.docFileIds,
-    };
-    setProfile(data);
-  };
-
   const [activeCheckbox, setActiveCheckbox] = useState(true);
 
   const submit = () => {
@@ -300,107 +251,101 @@ export const Address = ({
   return (
     <div
       className={`flex flex-col lg:flex-row-reverse px-4 flex-1 lg:pt-0 pb-20 gap-5 lg:divide-x lg:divide-solid lg:divide-gray-200 ${
-        location?.state?.panel === isMobile ? "mt-2" : "lg:mt-32 lg:px-10"
+        location?.state?.panel === isMobile ? "mt-2" : "lg:pt-10 lg:px-10"
       } `}
       // style={{ minHeight: "calc(100vh - 500px)" }}
     >
-      {!profilePage && (
+      <div className="flex flex-col w-full lg:w-1/2">
-        <div className="flex flex-col w-full lg:w-1/2">
+        <Input
-          <Input
+          width="100%"
-            width="100%"
+          label={window.t("انتخاب آدرس ")}
-            label={window.t("انتخاب آدرس ")}
+          regex={(val) => onInput.numberOnly(val)}
-            regex={(val) => onInput.numberOnly(val)}
+          name="address"
-            name="address"
+          onChange={(name, value) => setMapAddress(value)}
-            onChange={(name, value) => setMapAddress(value)}
+          value={mapAddress}
-            value={mapAddress}
+          align="text-right"
-            align="text-right"
+          direction="rtl"
-            direction="rtl"
+        />
-          />
+        <div
-          <div
+          className="w-full overflow-hidden rounded-md mt-6"
-            className="w-full overflow-hidden rounded-md mt-6"
+          style={{ height: isMobile ? "calc(100vh / 4)" : "calc(100vh / 2)" }}
-            style={{ height: isMobile ? "calc(100vh / 4)" : "calc(100vh / 2)" }}
+        >
-          >
+          <ReverseMap setAddress={(val) => setMapAddress(val)} />
-            <ReverseMap setAddress={(val) => setMapAddress(val)} />
+        </div>
-          </div>
+        <div className="hidden lg:flex w-full items-end mt-8 flex-col">
-          <div className="hidden lg:flex w-full items-end mt-8 flex-col">
+          <div className="flex flex-col items-cente w-2/5">
-            <div className="flex flex-col items-cente w-2/5">
+            <Button
-              <Button
+              loading={loading}
-                loading={loading}
+              title={window.t("ثبت آدرس")}
-                title={window.t("ثبت آدرس")}
+              backgroundColor="bg-blueC0"
-                backgroundColor="bg-blueC0"
+              border={{ color: "#196EC055", width: "0px" }}
-                border={{ color: "#196EC055", width: "0px" }}
+              width="100%"
-                width="100%"
+              color="text-white"
-                color="text-white"
+              onClick={() => submit()}
-                onClick={() => submit()}
+            />
-              />
+            <button
-              <button
+              className="bg-transparent mt-4 text-base lg:text-tiny border border-blueC0 text-blueC0 font-bold rounded-md py-3.5 lg:py-4 flex justify-center items-center"
-                className="bg-transparent mt-4 text-base lg:text-tiny border border-blueC0 text-blueC0 font-bold rounded-md py-3.5 lg:py-4 flex justify-center items-center"
+              onClick={() => {
-                onClick={() => {
+                if (isDashboard) {
+                  setDashboardPage("addresses");
+                } else {
                   setPhase("deliveryForm");
                   navigation(-1);
-                }}
+                }
-              >
+              }}
-                {window.t("بازگشت")}
+            >
-                <img
+              {window.t("بازگشت")}
-                  src={dropdownIcon}
+              <img
-                  alt=""
+                src={dropdownIcon}
-                  className="w-4 transform rotate-90"
+                alt=""
-                />
+                className="w-4 transform rotate-90"
-              </button>
+              />
-            </div>
+            </button>
           </div>
         </div>
-      )}
+      </div>
 
-      <div
+      <div className={`flex flex-col w-full lg:w-1/2 lg:pl-4`}>
-        className={`flex flex-col w-full lg:w-1/2 lg:pl-4 ${
+        <div className="flex item-center gap-x-4">
-          profilePage ? "mx-auto" : ""
+          {/* my self */}
-        }`}
+          <div
-      >
+            className={`flex items-center mb-7 cursor-pointer 
-        {!profilePage && (
-          <>
-            <div className="flex item-center gap-x-4">
-              {/* my self */}
-              <div
-                className={`flex items-center mb-7 cursor-pointer 
 `}
-                onClick={() => {
+            onClick={() => {
-                  setActiveCheckbox(true);
+              setActiveCheckbox(true);
-                }}
+            }}
-              >
+          >
-                <div className="w-4 h-4 flex flex-col items-center justify-center ml-1 bg-gray-200 rounded-full">
+            <div className="w-4 h-4 flex flex-col items-center justify-center ml-1 bg-gray-200 rounded-full">
-                  <div
-                    className={`w-2 h-2 rounded-full ${
-                      activeCheckbox === true ? "bg-blueC0" : ""
-                    }`}
-                  ></div>
-                </div>
-                <p className="font-bold text-sm">{window.t("برای خودم")}</p>
-              </div>
-              {/* someone else */}
               <div
-                className={`flex items-center mb-7 cursor-pointer 
+                className={`w-2 h-2 rounded-full ${
+                  activeCheckbox === true ? "bg-blueC0" : ""
+                }`}
+              ></div>
+            </div>
+            <p className="font-bold text-sm">{window.t("برای خودم")}</p>
+          </div>
+          {/* someone else */}
+          <div
+            className={`flex items-center mb-7 cursor-pointer 
 `}
-                onClick={() => {
+            onClick={() => {
-                  setActiveCheckbox(false);
+              setActiveCheckbox(false);
-                }}
+            }}
-              >
+          >
-                <div className="w-4 h-4 flex flex-col items-center justify-center ml-1 bg-gray-200 rounded-full">
+            <div className="w-4 h-4 flex flex-col items-center justify-center ml-1 bg-gray-200 rounded-full">
-                  <div
+              <div
-                    className={`w-2 h-2 rounded-full ${
+                className={`w-2 h-2 rounded-full ${
-                      activeCheckbox === false ? "bg-blueC0" : ""
+                  activeCheckbox === false ? "bg-blueC0" : ""
-                    }`}
+                }`}
-                  ></div>
+              ></div>
-                </div>
-                <p className="font-bold text-sm ">
-                  {window.t("گیرنده فرد دیگری است")}
-                </p>
-              </div>
             </div>
-          </>
+            <p className="font-bold text-sm ">
-        )}
+              {window.t("گیرنده فرد دیگری است")}
+            </p>
+          </div>
+        </div>
 
-        {profilePage || activeCheckbox === false ? (
+        {activeCheckbox === false ? (
           <>
             <Header
               title={window.t("اطلاعات هویتی")}
@@ -415,16 +360,8 @@ export const Address = ({
                 label={window.t("نام")}
                 regex={(val) => val}
                 name="firstName"
-                onChange={(name, value) =>
+                onChange={(name, value) => onChange(name, value)}
-                  profilePage
+                value={addressFields?.firstName}
-                    ? setProfileFields({ ...profileFields, firstName: value })
-                    : onChange(name, value)
-                }
-                value={
-                  profilePage
-                    ? profileFields.firstName || user.firstName
-                    : addressFields?.firstName
-                }
                 align="text-right"
                 direction="rtl"
               />
@@ -434,16 +371,8 @@ export const Address = ({
                 label={window.t("نام خانوادگی")}
                 regex={(val) => val}
                 name="lastName"
-                onChange={(name, value) =>
+                onChange={(name, value) => onChange(name, value)}
-                  profilePage
+                value={addressFields?.lastName}
-                    ? setProfileFields({ ...profileFields, lastName: value })
-                    : onChange(name, value)
-                }
-                value={
-                  profilePage
-                    ? profileFields.lastName || user.lastName
-                    : addressFields?.lastName
-                }
                 align="text-right"
                 direction="rtl"
               />
@@ -462,11 +391,7 @@ export const Address = ({
                 label={window.t("شماره موبایل")}
                 regex={(val) => onInput.phonenumber(val)}
                 name="cellphone"
-                value={
+                value={addressFields?.cellphone}
-                  profilePage
-                    ? profileFields.cellphone || user.cellphone
-                    : addressFields?.cellphone
-                }
                 onChange={(name, value) => onChange(name, value)}
                 align="text-right"
                 direction="ltr"
@@ -477,16 +402,8 @@ export const Address = ({
                 label={window.t("شماره تلفن")}
                 regex={(val) => onInput.numberOnly(val)}
                 name="phone"
-                value={
+                value={addressFields?.phone}
-                  profilePage
+                onChange={(name, value) => onChange(name, value)}
-                    ? profileFields.phone || user.phone
-                    : addressFields?.phone
-                }
-                onChange={(name, value) =>
-                  profilePage
-                    ? setProfileFields({ ...profileFields, phone: value })
-                    : onChange(name, value)
-                }
                 align="text-right"
                 direction="ltr"
                 maxLength={11}
@@ -507,17 +424,9 @@ export const Address = ({
             selectProvince={"استان"}
             options={provinces.map((e) => ({ value: e.id, name: e.name }))}
             name="provinceId"
-            defaultValue={
+            defaultValue={provinces[0]?.id}
-              profilePage
-                ? profileFields.provinceId || provinces[0]?.id
-                : provinces[0]?.id
-            }
             onChange={(name, value) =>
-              value === window.t("استان")
+              value === window.t("استان") ? {} : onChange(name, value)
-                ? {}
-                : profilePage
-                ? setProfileFields({ ...profileFields, provinceId: value })
-                : onChange(name, value)
             }
             width={isMobile ? "w-full" : "w-1/2"}
             backgroundColor={
@@ -530,17 +439,9 @@ export const Address = ({
               selectProvince={"شهر"}
               options={cities.map((e) => ({ value: e.id, name: e.name }))}
               name="cityId"
-              defaultValue={
+              defaultValue={cities[0]?.id}
-                profilePage
-                  ? profileFields.cityId || cities[0]?.id
-                  : cities[0]?.id
-              }
               onChange={(name, value) =>
-                value === window.t("شهر")
+                value === window.t("شهر") ? {} : onChange(name, value)
-                  ? {}
-                  : profilePage
-                  ? setProfileFields({ ...profileFields, cityId: value })
-                  : onChange(name, value)
               }
               width={isMobile ? "w-full" : "w-1/2"}
               backgroundColor={
@@ -567,16 +468,8 @@ export const Address = ({
             label={window.t("کد پستی")}
             regex={(val) => onInput.numberOnly(val)}
             name="postalCode"
-            value={
+            value={addressFields?.postalCode}
-              profilePage
+            onChange={(name, value) => onChange(name, value)}
-                ? profileFields.postalCode || user.postalCode
-                : addressFields?.postalCode
-            }
-            onChange={(name, value) =>
-              profilePage
-                ? setProfileFields({ ...profileFields, postalCode: value })
-                : onChange(name, value)
-            }
             align="text-right"
             direction="ltr"
             maxLength={10}
@@ -584,41 +477,35 @@ export const Address = ({
           <div className="lg:w-1/2"></div>
         </div>
 
-        <div
+        <div className={`flex lg:hidden flex-col items-end w-full mt-3`}>
-          className={`flex ${
-            profilePage ? "mt-10" : "lg:hidden"
-          } flex-col items-end w-full mt-3`}
-        >
           <Button
             loading={loading}
-            title={
+            title={window.t("ذخیره اطلاعات و بازگشت به صفحه قبل")}
-              !profilePage
-                ? `${window.t("ذخیره اطلاعات و بازگشت به صفحه قبل")}`
-                : `${window.t("ارسال")}`
-            }
             backgroundColor="bg-blueC0"
             border={{ color: "#196EC055", width: "0px" }}
-            width={profilePage ? "30%" : "100%"}
+            width={"100%"}
             color="text-white"
-            onClick={() => (profilePage ? submitProfile() : submit())}
+            onClick={() => submit()}
           />
-          {!isMobile && (
+          <button
-            <button
+            style={{ width: "30%" }}
-              style={{ width: "30%" }}
+            className="hidden lg:flex justify-center items-center mt-4 py-3 text-blueC0 text-base lg:text-tiny border-2 border-blueC0 cursor-pointer rounded-md"
-              className="flex justify-center items-center mt-4 py-3 text-blueC0 text-base lg:text-tiny border-2 border-blueC0 cursor-pointer rounded-md"
+            onClick={() => {
-              onClick={() => {
+              if (isDashboard) {
+                setDashboardPage("addresses");
+              } else {
                 setPhase("deliveryForm");
                 navigation(-1);
-              }}
+              }
-            >
+            }}
-              {window.t("بازگشت")}
+          >
-              <img
+            {window.t("بازگشت")}
-                src={lightGreenArrow}
+            <img
-                alt=""
+              src={lightGreenArrow}
-                className="w-3.5 transform rotate-90"
+              alt=""
-              />
+              className="w-3.5 transform rotate-90"
-            </button>
+            />
-          )}
+          </button>
         </div>
       </div>
     </div>
@@ -635,7 +522,6 @@ const mapStateToProps = (state) => ({
   cityLoading: state.publicApi.loading,
   isMobile: state.config.device === "mobile",
   isDark: state.publicApi.isDark,
-  profileFields: state.user.profileFields,
   addressInfo: state.userAddress.info,
 });
 
@@ -646,9 +532,8 @@ const mapDispatchToProps = {
   updateAddress: userAddress.update,
   getAddress: userAddress.info,
   setDialog: dialog.set,
-  setProfileFields: user.setProfileFields,
-  setProfile: user.setProfile,
   setHeaderOptions: publicApi.setHeaderOptions,
+  setDashboardPage: dashboard.setPage,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Address);