Polish business dashboard profile, FA layout, and pagination.
Add a real user profile page with multi-address CRUD, localize business profile, fix RTL category tree and login/sidebar logo fallbacks, and keep pagination controls centered with aligned page meta. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
26b6b0a1b6
commit
d8c9c0b017
@@ -0,0 +1,445 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { Save } from 'lucide-react'
|
||||
import {
|
||||
AddressListEditor,
|
||||
createEmptyAddressItem,
|
||||
getLocationOptionLabel,
|
||||
matchCityByName,
|
||||
matchProvinceByName,
|
||||
useLocale,
|
||||
type AddressListItem,
|
||||
} from '@meshkee/dashboard-ui'
|
||||
import { Breadcrumbs } from '../components/Breadcrumbs'
|
||||
import pageStyles from '../components/PageContent.module.css'
|
||||
import { useAuth } from '../context/AuthContext'
|
||||
import { useToast } from '../context/ToastContext'
|
||||
import { useT } from '../i18n/useT'
|
||||
import { ApiError } from '../lib/api'
|
||||
import { formatCellForDisplay } from '../lib/cellNumber'
|
||||
import {
|
||||
createAddress,
|
||||
listAddresses,
|
||||
removeAddress,
|
||||
updateAddress,
|
||||
} from '../services/addressService'
|
||||
import { updateProfile } from '../services/authService'
|
||||
import {
|
||||
listCitiesByProvinceSlug,
|
||||
listIranProvinces,
|
||||
type CityOption,
|
||||
} from '../services/citiesService'
|
||||
import styles from './ProfilePage.module.css'
|
||||
|
||||
type AddressDraft = AddressListItem
|
||||
|
||||
function isAddressFilled(item: AddressDraft) {
|
||||
return Boolean(
|
||||
item.province.trim() && item.city.trim() && item.address.trim(),
|
||||
)
|
||||
}
|
||||
|
||||
export function ProfilePage() {
|
||||
const { user, setUser } = useAuth()
|
||||
const { showToast } = useToast()
|
||||
const { locale } = useLocale()
|
||||
const t = useT()
|
||||
|
||||
const [firstName, setFirstName] = useState('')
|
||||
const [lastName, setLastName] = useState('')
|
||||
const [firstNameEn, setFirstNameEn] = useState('')
|
||||
const [lastNameEn, setLastNameEn] = useState('')
|
||||
const [email, setEmail] = useState('')
|
||||
const [about, setAbout] = useState('')
|
||||
const [instagram, setInstagram] = useState('')
|
||||
const [telegramId, setTelegramId] = useState('')
|
||||
const [linkedin, setLinkedin] = useState('')
|
||||
const [isSaving, setIsSaving] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const [provinces, setProvinces] = useState<CityOption[]>([])
|
||||
const [citiesByProvince, setCitiesByProvince] = useState<Record<string, CityOption[]>>({})
|
||||
const [addresses, setAddresses] = useState<AddressDraft[]>([createEmptyAddressItem()])
|
||||
const [initialAddressIds, setInitialAddressIds] = useState<string[]>([])
|
||||
const [addressesLoading, setAddressesLoading] = useState(true)
|
||||
|
||||
const addressLabels = useMemo(
|
||||
() => ({
|
||||
title: t('profile.addresses'),
|
||||
addLabel: t('profile.addresses.add'),
|
||||
loading: t('profile.addresses.loading'),
|
||||
province: t('profile.province'),
|
||||
city: t('profile.city'),
|
||||
address: t('profile.address'),
|
||||
postalCode: t('profile.postalCode'),
|
||||
landline: t('profile.landline'),
|
||||
selectProvince: t('profile.selectProvince'),
|
||||
selectCity: t('profile.selectCity'),
|
||||
streetPlaceholder: t('profile.streetPlaceholder'),
|
||||
postalPlaceholder: t('profile.postalCode'),
|
||||
landlinePlaceholder: t('profile.landline'),
|
||||
removeAriaLabel: t('profile.addresses.remove'),
|
||||
}),
|
||||
[t],
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (!user) return
|
||||
|
||||
setFirstName(user.firstName ?? '')
|
||||
setLastName(user.lastName ?? '')
|
||||
setFirstNameEn(user.firstNameEn ?? '')
|
||||
setLastNameEn(user.lastNameEn ?? '')
|
||||
setEmail(user.email ?? '')
|
||||
setAbout(user.profile.about ?? '')
|
||||
setInstagram(user.profile.instagram ?? '')
|
||||
setTelegramId(user.profile.telegramId ?? '')
|
||||
setLinkedin(user.profile.linkedin ?? '')
|
||||
}, [user])
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController()
|
||||
void loadAddresses(controller.signal)
|
||||
return () => controller.abort()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
setAddresses((prev) =>
|
||||
prev.map((item) => {
|
||||
if (!item.provinceSlug) return item
|
||||
const province = provinces.find((p) => p.slug === item.provinceSlug)
|
||||
const cities = citiesByProvince[item.provinceSlug] ?? []
|
||||
const city = matchCityByName(item.city, cities)
|
||||
return {
|
||||
...item,
|
||||
province: province ? getLocationOptionLabel(province, locale) : item.province,
|
||||
city: city ? getLocationOptionLabel(city, locale) : item.city,
|
||||
}
|
||||
}),
|
||||
)
|
||||
}, [locale, provinces, citiesByProvince])
|
||||
|
||||
async function loadAddresses(signal?: AbortSignal) {
|
||||
setAddressesLoading(true)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
const [provinceItems, addressData] = await Promise.all([
|
||||
listIranProvinces(signal),
|
||||
listAddresses(signal),
|
||||
])
|
||||
|
||||
setProvinces(provinceItems)
|
||||
|
||||
const nextAddresses =
|
||||
addressData.items.length > 0
|
||||
? addressData.items.map((item) => {
|
||||
const province = matchProvinceByName(item.province, provinceItems)
|
||||
return {
|
||||
id: item.id,
|
||||
provinceSlug: province?.slug ?? '',
|
||||
province: province
|
||||
? getLocationOptionLabel(province, locale)
|
||||
: item.province,
|
||||
city: item.city,
|
||||
address: item.address,
|
||||
postalCode: item.postalCode ?? '',
|
||||
landline: item.landline ?? '',
|
||||
}
|
||||
})
|
||||
: [createEmptyAddressItem()]
|
||||
|
||||
const slugs = [...new Set(nextAddresses.map((item) => item.provinceSlug).filter(Boolean))]
|
||||
const cityGroups = await Promise.all(
|
||||
slugs.map(async (slug) => ({
|
||||
slug,
|
||||
cities: await listCitiesByProvinceSlug(slug, signal),
|
||||
})),
|
||||
)
|
||||
const citiesMap = Object.fromEntries(cityGroups.map((group) => [group.slug, group.cities]))
|
||||
|
||||
const localized = nextAddresses.map((item) => {
|
||||
if (!item.provinceSlug) return item
|
||||
const cities = citiesMap[item.provinceSlug] ?? []
|
||||
const city = matchCityByName(item.city, cities)
|
||||
return {
|
||||
...item,
|
||||
city: city ? getLocationOptionLabel(city, locale) : item.city,
|
||||
}
|
||||
})
|
||||
|
||||
setCitiesByProvince(citiesMap)
|
||||
setAddresses(localized)
|
||||
setInitialAddressIds(
|
||||
addressData.items.map((item) => item.id).filter(Boolean),
|
||||
)
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return
|
||||
setError(err instanceof ApiError ? err.message : t('profile.addresses.error.load'))
|
||||
} finally {
|
||||
setAddressesLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
function updateAddressDraft(index: number, patch: Partial<AddressDraft>) {
|
||||
setAddresses((prev) =>
|
||||
prev.map((item, i) => (i === index ? { ...item, ...patch } : item)),
|
||||
)
|
||||
}
|
||||
|
||||
async function handleProvinceChange(index: number, provinceSlug: string) {
|
||||
const province = provinces.find((item) => item.slug === provinceSlug)
|
||||
updateAddressDraft(index, {
|
||||
provinceSlug,
|
||||
province: province ? getLocationOptionLabel(province, locale) : '',
|
||||
city: '',
|
||||
})
|
||||
|
||||
if (provinceSlug && !citiesByProvince[provinceSlug]) {
|
||||
const cities = await listCitiesByProvinceSlug(provinceSlug)
|
||||
setCitiesByProvince((prev) => ({ ...prev, [provinceSlug]: cities }))
|
||||
}
|
||||
}
|
||||
|
||||
function addAddressRow() {
|
||||
setAddresses((prev) => [...prev, createEmptyAddressItem()])
|
||||
}
|
||||
|
||||
function removeAddressRow(index: number) {
|
||||
setAddresses((prev) =>
|
||||
prev.length === 1 ? [createEmptyAddressItem()] : prev.filter((_, i) => i !== index),
|
||||
)
|
||||
}
|
||||
|
||||
async function syncAddresses() {
|
||||
const filled = addresses.filter(isAddressFilled)
|
||||
const keptIds = new Set(filled.map((item) => item.id).filter(Boolean) as string[])
|
||||
|
||||
for (const id of initialAddressIds) {
|
||||
if (!keptIds.has(id)) {
|
||||
await removeAddress(id)
|
||||
}
|
||||
}
|
||||
|
||||
for (const item of filled) {
|
||||
const payload = {
|
||||
province: item.province.trim(),
|
||||
city: item.city.trim(),
|
||||
address: item.address.trim(),
|
||||
postalCode: item.postalCode.trim() || undefined,
|
||||
landline: item.landline.trim() || undefined,
|
||||
}
|
||||
|
||||
if (item.id) {
|
||||
await updateAddress(item.id, payload)
|
||||
} else {
|
||||
await createAddress(payload)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
setIsSaving(true)
|
||||
|
||||
const incomplete = addresses.some(
|
||||
(item) =>
|
||||
(item.province.trim() ||
|
||||
item.city.trim() ||
|
||||
item.address.trim() ||
|
||||
item.postalCode.trim() ||
|
||||
item.landline.trim()) &&
|
||||
!isAddressFilled(item),
|
||||
)
|
||||
|
||||
if (incomplete) {
|
||||
setError(t('profile.addresses.error.incomplete'))
|
||||
setIsSaving(false)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await updateProfile({
|
||||
firstName: firstName.trim(),
|
||||
lastName: lastName.trim(),
|
||||
firstNameEn: firstNameEn.trim(),
|
||||
lastNameEn: lastNameEn.trim(),
|
||||
email: email.trim() || undefined,
|
||||
about: about.trim(),
|
||||
instagram: instagram.trim(),
|
||||
telegramId: telegramId.trim(),
|
||||
linkedin: linkedin.trim(),
|
||||
})
|
||||
|
||||
await syncAddresses()
|
||||
await loadAddresses()
|
||||
|
||||
setUser(result.user)
|
||||
showToast(t('profile.toast.success'), 'success')
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : t('profile.error.update'))
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<main className={pageStyles.content}>
|
||||
<Breadcrumbs items={[{ label: 'Dashboard', href: '/' }, { label: 'Profile' }]} />
|
||||
|
||||
<div className={pageStyles.pageHeader}>
|
||||
<div>
|
||||
<h2 className={pageStyles.pageTitle}>{t('profile.title')}</h2>
|
||||
<p className={pageStyles.pageSubtitle}>{t('profile.subtitle')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form className={styles.form} onSubmit={(e) => void handleSubmit(e)}>
|
||||
{error && (
|
||||
<div className={styles.alertError} role="alert">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<section className={styles.section}>
|
||||
<h3 className={styles.sectionTitle}>{t('profile.section.general')}</h3>
|
||||
<div className={styles.grid}>
|
||||
<div className={`${styles.field} ${styles.col3}`}>
|
||||
<label htmlFor="profile-first">{t('profile.firstName')}</label>
|
||||
<input
|
||||
id="profile-first"
|
||||
type="text"
|
||||
value={firstName}
|
||||
onChange={(e) => setFirstName(e.target.value)}
|
||||
dir="rtl"
|
||||
lang="fa"
|
||||
className="faText"
|
||||
/>
|
||||
</div>
|
||||
<div className={`${styles.field} ${styles.col3}`}>
|
||||
<label htmlFor="profile-last">{t('profile.lastName')}</label>
|
||||
<input
|
||||
id="profile-last"
|
||||
type="text"
|
||||
value={lastName}
|
||||
onChange={(e) => setLastName(e.target.value)}
|
||||
dir="rtl"
|
||||
lang="fa"
|
||||
className="faText"
|
||||
/>
|
||||
</div>
|
||||
<div className={`${styles.field} ${styles.col3}`}>
|
||||
<label htmlFor="profile-first-en">{t('profile.firstNameEn')}</label>
|
||||
<input
|
||||
id="profile-first-en"
|
||||
type="text"
|
||||
value={firstNameEn}
|
||||
onChange={(e) => setFirstNameEn(e.target.value)}
|
||||
dir="ltr"
|
||||
lang="en"
|
||||
/>
|
||||
</div>
|
||||
<div className={`${styles.field} ${styles.col3}`}>
|
||||
<label htmlFor="profile-last-en">{t('profile.lastNameEn')}</label>
|
||||
<input
|
||||
id="profile-last-en"
|
||||
type="text"
|
||||
value={lastNameEn}
|
||||
onChange={(e) => setLastNameEn(e.target.value)}
|
||||
dir="ltr"
|
||||
lang="en"
|
||||
/>
|
||||
</div>
|
||||
<div className={`${styles.field} ${styles.col3}`}>
|
||||
<label htmlFor="profile-cell">{t('profile.mobile')}</label>
|
||||
<input
|
||||
id="profile-cell"
|
||||
type="tel"
|
||||
value={user ? formatCellForDisplay(user.cellNumber) : ''}
|
||||
readOnly
|
||||
className={styles.readOnly}
|
||||
/>
|
||||
</div>
|
||||
<div className={`${styles.field} ${styles.col3}`}>
|
||||
<label htmlFor="profile-email">{t('profile.email')}</label>
|
||||
<input
|
||||
id="profile-email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder={t('profile.emailPlaceholder')}
|
||||
/>
|
||||
</div>
|
||||
<div className={`${styles.field} ${styles.fullWidth}`}>
|
||||
<label htmlFor="profile-about">{t('profile.about')}</label>
|
||||
<textarea
|
||||
id="profile-about"
|
||||
value={about}
|
||||
onChange={(e) => setAbout(e.target.value)}
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={styles.section}>
|
||||
<AddressListEditor
|
||||
addresses={addresses}
|
||||
provinces={provinces}
|
||||
citiesByProvince={citiesByProvince}
|
||||
onAddressChange={updateAddressDraft}
|
||||
onProvinceChange={handleProvinceChange}
|
||||
onAdd={addAddressRow}
|
||||
onRemove={removeAddressRow}
|
||||
loading={addressesLoading}
|
||||
locale={locale}
|
||||
labels={addressLabels}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className={styles.section}>
|
||||
<h3 className={styles.sectionTitle}>{t('profile.section.social')}</h3>
|
||||
<div className={styles.grid}>
|
||||
<div className={`${styles.field} ${styles.col4}`}>
|
||||
<label htmlFor="profile-instagram">{t('profile.instagram')}</label>
|
||||
<input
|
||||
id="profile-instagram"
|
||||
type="text"
|
||||
value={instagram}
|
||||
onChange={(e) => setInstagram(e.target.value)}
|
||||
placeholder="@username"
|
||||
/>
|
||||
</div>
|
||||
<div className={`${styles.field} ${styles.col4}`}>
|
||||
<label htmlFor="profile-telegram">{t('profile.telegram')}</label>
|
||||
<input
|
||||
id="profile-telegram"
|
||||
type="text"
|
||||
value={telegramId}
|
||||
onChange={(e) => setTelegramId(e.target.value)}
|
||||
placeholder="@username"
|
||||
/>
|
||||
</div>
|
||||
<div className={`${styles.field} ${styles.col4}`}>
|
||||
<label htmlFor="profile-linkedin">{t('profile.linkedin')}</label>
|
||||
<input
|
||||
id="profile-linkedin"
|
||||
type="url"
|
||||
value={linkedin}
|
||||
onChange={(e) => setLinkedin(e.target.value)}
|
||||
placeholder="https://linkedin.com/in/username"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className={styles.actions}>
|
||||
<button type="submit" className={styles.saveBtn} disabled={isSaving || addressesLoading}>
|
||||
<Save size={18} />
|
||||
{isSaving ? t('profile.saving') : t('profile.save')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user