update src/views/Address/index.js

master
Reza_ashrafi 2 years ago
parent ea659e0ac0
commit ef69dbe468
  1. 193
      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,11 +251,10 @@ 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">
<Input
width="100%"
@ -336,8 +286,12 @@ export const Address = ({
<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"
onClick={() => {
if (isDashboard) {
setDashboardPage("addresses");
} else {
setPhase("deliveryForm");
navigation(-1);
}
}}
>
{window.t("بازگشت")}
@ -350,15 +304,8 @@ export const Address = ({
</div>
</div>
</div>
)}
<div
className={`flex flex-col w-full lg:w-1/2 lg:pl-4 ${
profilePage ? "mx-auto" : ""
}`}
>
{!profilePage && (
<>
<div className={`flex flex-col w-full lg:w-1/2 lg:pl-4`}>
<div className="flex item-center gap-x-4">
{/* my self */}
<div
@ -397,10 +344,8 @@ export const Address = ({
</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) =>
profilePage
? setProfileFields({ ...profileFields, firstName: value })
: onChange(name, value)
}
value={
profilePage
? profileFields.firstName || user.firstName
: addressFields?.firstName
}
onChange={(name, value) => onChange(name, value)}
value={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) =>
profilePage
? setProfileFields({ ...profileFields, lastName: value })
: onChange(name, value)
}
value={
profilePage
? profileFields.lastName || user.lastName
: addressFields?.lastName
}
onChange={(name, value) => onChange(name, value)}
value={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={
profilePage
? profileFields.cellphone || user.cellphone
: addressFields?.cellphone
}
value={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={
profilePage
? profileFields.phone || user.phone
: addressFields?.phone
}
onChange={(name, value) =>
profilePage
? setProfileFields({ ...profileFields, phone: value })
: onChange(name, value)
}
value={addressFields?.phone}
onChange={(name, 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={
profilePage
? profileFields.provinceId || provinces[0]?.id
: provinces[0]?.id
}
defaultValue={provinces[0]?.id}
onChange={(name, value) =>
value === window.t("استان")
? {}
: profilePage
? setProfileFields({ ...profileFields, provinceId: value })
: onChange(name, value)
value === window.t("استان") ? {} : 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={
profilePage
? profileFields.cityId || cities[0]?.id
: cities[0]?.id
}
defaultValue={cities[0]?.id}
onChange={(name, value) =>
value === window.t("شهر")
? {}
: profilePage
? setProfileFields({ ...profileFields, cityId: value })
: onChange(name, value)
value === window.t("شهر") ? {} : 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={
profilePage
? profileFields.postalCode || user.postalCode
: addressFields?.postalCode
}
onChange={(name, value) =>
profilePage
? setProfileFields({ ...profileFields, postalCode: value })
: onChange(name, value)
}
value={addressFields?.postalCode}
onChange={(name, value) => onChange(name, value)}
align="text-right"
direction="ltr"
maxLength={10}
@ -584,31 +477,26 @@ export const Address = ({
<div className="lg:w-1/2"></div>
</div>
<div
className={`flex ${
profilePage ? "mt-10" : "lg:hidden"
} flex-col items-end w-full mt-3`}
>
<div className={`flex lg:hidden flex-col items-end w-full mt-3`}>
<Button
loading={loading}
title={
!profilePage
? `${window.t("ذخیره اطلاعات و بازگشت به صفحه قبل")}`
: `${window.t("ارسال")}`
}
title={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
style={{ width: "30%" }}
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"
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"
onClick={() => {
if (isDashboard) {
setDashboardPage("addresses");
} else {
setPhase("deliveryForm");
navigation(-1);
}
}}
>
{window.t("بازگشت")}
@ -618,7 +506,6 @@ export const Address = ({
className="w-3.5 transform rotate-90"
/>
</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);

Loading…
Cancel
Save