meshkee-app/dashboards
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Share customer session cookies with the storefront and polish business settings.

Browse Source 
Keep JWT login mirrored on the tenant cookie domain, improve e-payment settings UX, and add a storefront link from the customer sidebar.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-25 16:40:52 +03:30
co-authored by Cursor
parent c289de5d2e
commit dc570c1e7f
20 changed files with 463 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/business/src/components/VariationsModal.module.css
+4 -3
View File
@@ -57,6 +57,7 @@
font-size: 13px;
color: var(--text-secondary);
margin-top: 4px;
text-align: start;
}
.modalHint {
@@ -122,14 +123,13 @@
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
text-align: start;
}
.listItemName:global(.faText),
.listItemValues:global(.faText),
.subtitle:global(.faText) {
font-weight: 500;
text-align: left;
unicode-bidi: plaintext;
}
.listItemValues {
@@ -139,6 +139,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: start;
}
.listItemEnd {
@@ -146,7 +147,7 @@
align-items: center;
gap: 8px;
flex-shrink: 0;
margin-left: auto;
margin-inline-start: auto;
}
.listItemType {
apps/business/src/components/VariationsModal.tsx
+6 -6
View File
@@ -124,8 +124,8 @@ export function VariationsModal({
{categoryName && (
<p
className={[styles.subtitle, categoryLocale.className].filter(Boolean).join(' ')}
lang={categoryLocale.lang}
dir={categoryLocale.dir}
lang={isFa ? 'fa' : categoryLocale.lang}
dir={isFa ? 'rtl' : categoryLocale.dir}
>
{categoryName}
</p>
@@ -149,15 +149,15 @@ export function VariationsModal({
<div className={styles.listItemInfo}>
<div
className={[styles.listItemName, nameLocale.className].filter(Boolean).join(' ')}
lang={nameLocale.lang}
dir={nameLocale.dir}
lang={isFa ? 'fa' : nameLocale.lang}
dir={isFa ? 'rtl' : nameLocale.dir}
>
{title}
</div>
<div
className={[styles.listItemValues, valuesLocale.className].filter(Boolean).join(' ')}
lang={valuesLocale.lang}
dir={valuesLocale.dir}
lang={isFa ? 'fa' : valuesLocale.lang}
dir={isFa ? 'rtl' : valuesLocale.dir}
>
{valuesText}
</div>
apps/business/src/i18n/messages.ts
+2 -2
View File
@@ -1441,7 +1441,7 @@ const en = {
'portfolio.form.abstract': 'Abstract',
'portfolio.form.abstractPlaceholder': 'Short summary shown in portfolio listings',
'portfolio.form.link': 'Website link',
'portfolio.form.linkPlaceholder': 'https://example.com',
'portfolio.form.linkPlaceholder': 'example.com',
'portfolio.form.mainText': 'Main Text',
'portfolio.form.mainTextPlaceholder': 'Full portfolio content with formatting and images...',
'portfolio.form.gallery': 'Image Gallery',
@@ -3624,7 +3624,7 @@ const fa: Record<MessageKey, string> = {
'portfolio.form.abstract': 'خلاصه',
'portfolio.form.abstractPlaceholder': 'خلاصه کوتاه برای نمایش در فهرست نمونه کارها',
'portfolio.form.link': 'لینک وبسایت',
'portfolio.form.linkPlaceholder': 'https://example.com',
'portfolio.form.linkPlaceholder': 'example.com',
'portfolio.form.mainText': 'متن اصلی',
'portfolio.form.mainTextPlaceholder': 'محتوای کامل نمونه کار با قالب‌بندی و تصاویر...',
'portfolio.form.gallery': 'گالری تصاویر',
apps/business/src/pages/AddCustomerProductPage.tsx
+3 -13
View File
@@ -32,7 +32,7 @@ import {
type UserProductPriceCurrency,
type UserProductTechnicalValueInput,
} from '../services/userProductsService'
import { resolveDataUrlToMediaId, resolveDataUrlsToMediaIds } from '../services/mediaService'
import { galleryMediaIdsAfterChange, resolveDataUrlToMediaId, resolveDataUrlsToMediaIds } from '../services/mediaService'
import { formatIrtInput, parseIrtInput } from '../utils/irtPrice'
import styles from './AddCustomerProductPage.module.css'
@@ -744,20 +744,10 @@ export function AddCustomerProductPage() {
<ImageUploader
images={gallery}
onChange={(next) => {
const prevUrlToId = new Map(
gallery.map((url, index) => [
url,
galleryMediaIds[index] ?? '',
]),
setGalleryMediaIds(
galleryMediaIdsAfterChange(gallery, galleryMediaIds, next),
)
setGallery(next)
setGalleryMediaIds(
next.map((url) =>
url.startsWith('data:')
? ''
: prevUrlToId.get(url) ?? '',
),
)
}}
/>
</div>
apps/business/src/pages/AddNewPortfolioPage.tsx
+12 -2
View File
@@ -14,6 +14,7 @@ import {
mapPortfolioCategoryToUi,
} from '../services/portfolioCategoryService'
import {
galleryMediaIdsAfterChange,
resolveDataUrlToMediaId,
resolveDataUrlsToMediaIds,
resolveHtmlEmbeddedDataUrls,
@@ -329,10 +330,11 @@ export function AddNewPortfolioPage() {
<input
id="portfolio-link"
name="projectUrl"
type="url"
type="text"
dir="ltr"
lang="en"
inputMode="url"
autoComplete="url"
placeholder={t('portfolio.form.linkPlaceholder')}
value={projectUrl}
onChange={(e) => setProjectUrl(e.target.value)}
@@ -354,7 +356,15 @@ export function AddNewPortfolioPage() {
<div className={`${styles.field} ${styles.col12}`}>
<label>{t('portfolio.form.gallery')}</label>
<ImageUploader images={images} onChange={setImages} />
<ImageUploader
images={images}
onChange={(next) => {
setGalleryMediaIds(
galleryMediaIdsAfterChange(images, galleryMediaIds, next),
)
setImages(next)
}}
/>
</div>
<div className={`${styles.field} ${styles.col12}`}>
apps/business/src/pages/AddNewProductPage.tsx
+10 -1
View File
@@ -14,6 +14,7 @@ import { ApiError } from '../lib/api'
import { listProductCategories, mapProductCategoryToUi } from '../services/productCategoryService'
import { listAllBrands, mapBrandToSelectOption } from '../services/brandService'
import {
galleryMediaIdsAfterChange,
resolveDataUrlToMediaId,
resolveDataUrlsToMediaIds,
} from '../services/mediaService'
@@ -372,7 +373,15 @@ export function AddNewProductPage() {
<div className={`${styles.field} ${styles.col12}`}>
<label>{t('products.form.images')}</label>
<ImageUploader images={images} onChange={setImages} />
<ImageUploader
images={images}
onChange={(next) => {
setGalleryMediaIds(
galleryMediaIdsAfterChange(images, galleryMediaIds, next),
)
setImages(next)
}}
/>
</div>
<div className={`${styles.field} ${styles.col12}`}>
apps/business/src/pages/AddNewWorkshopPage.tsx
+10 -1
View File
@@ -15,6 +15,7 @@ import {
mapWorkshopCategoryToUi,
} from '../services/workshopCategoryService'
import {
galleryMediaIdsAfterChange,
resolveDataUrlToMediaId,
resolveDataUrlsToMediaIds,
resolveHtmlEmbeddedDataUrls,
@@ -353,7 +354,15 @@ export function AddNewWorkshopPage() {
<div className={`${styles.field} ${styles.col12}`}>
<label>{t('workshop.form.gallery')}</label>
<ImageUploader images={images} onChange={setImages} />
<ImageUploader
images={images}
onChange={(next) => {
setGalleryMediaIds(
galleryMediaIdsAfterChange(images, galleryMediaIds, next),
)
setImages(next)
}}
/>
</div>
<div className={`${styles.field} ${styles.col12}`}>
apps/business/src/pages/SettingsPage.module.css
+90 -9
View File
@@ -43,10 +43,27 @@
.credentials {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 18px;
padding-top: 18px;
gap: 10px 12px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(148, 163, 184, 0.2);
align-items: end;
}
.credentialsInline {
display: flex;
align-items: center;
gap: 10px 12px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(148, 163, 184, 0.2);
}
.credentialsDisabled {
filter: blur(2px);
opacity: 0.55;
pointer-events: none;
user-select: none;
}
.field {
@@ -54,8 +71,38 @@
min-width: 0;
}
.fullRow {
grid-column: 1 / -1;
.inlineLabel {
flex-shrink: 0;
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
white-space: nowrap;
}
.inlineInput {
flex: 1;
min-width: 0;
min-height: var(--field-height);
padding: var(--field-padding-y) var(--field-padding-x);
font-size: var(--field-font-size);
line-height: 1.4;
font-family: var(--font-ui);
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
box-sizing: border-box;
}
.inlineInput:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
}
.inlineInput:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.hint {
@@ -90,15 +137,22 @@
border-radius: var(--radius-sm);
}
.passwordToggle:hover {
.passwordToggle:hover:not(:disabled) {
color: var(--text-primary);
background: rgba(148, 163, 184, 0.15);
}
.actions {
grid-column: 1 / -1;
.passwordToggle:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.actionsInline {
grid-column: span 3;
display: flex;
align-items: flex-end;
justify-content: flex-end;
min-width: 0;
}
.saveBtn {
@@ -112,6 +166,8 @@
font-weight: 600;
font-family: var(--font-ui);
cursor: pointer;
flex-shrink: 0;
white-space: nowrap;
}
.saveBtn:disabled {
@@ -143,10 +199,35 @@
grid-template-columns: 1fr;
}
.field {
.field,
.actionsInline {
grid-column: 1 / -1;
}
.actionsInline {
justify-content: stretch;
}
.actionsInline .saveBtn {
width: 100%;
}
.credentialsInline {
flex-wrap: wrap;
}
.inlineLabel {
width: 100%;
}
.inlineInput {
flex: 1 1 100%;
}
.credentialsInline .saveBtn {
width: 100%;
}
.gatewayHeader {
flex-direction: column;
}
apps/business/src/pages/SettingsPage.tsx
+67 -99
View File
@@ -104,16 +104,22 @@ export function SettingsPage() {
try {
const payload: EPaymentSettings = {
...next,
enabled: next.enabled,
defaultGateway: next.defaultGateway,
gateways: {
...next.gateways,
mellat: {
...next.gateways.mellat,
enabled: next.gateways.mellat.enabled,
terminalId: next.gateways.mellat.terminalId,
username: next.gateways.mellat.username,
password: password ?? '',
},
sep: { enabled: next.gateways.sep.enabled },
snappay: { enabled: next.gateways.snappay.enabled },
digipay: { enabled: next.gateways.digipay.enabled },
zarinpal: {
...next.gateways.zarinpal,
enabled: next.gateways.zarinpal.enabled,
merchantId: next.gateways.zarinpal.merchantId.trim(),
sandbox: next.gateways.zarinpal.sandbox,
},
},
}
@@ -180,15 +186,6 @@ export function SettingsPage() {
return
}
if (
ePayment.gateways.mellat.enabled &&
!ePayment.gateways.mellat.passwordSet &&
!passwordDraft.trim()
) {
setError(t('website.ePayment.error.passwordRequired'))
return
}
await patchEPayment(
'mellat-credentials',
{
@@ -284,12 +281,18 @@ export function SettingsPage() {
<Switch
id="epayment-mellat"
checked={ePayment.gateways.mellat.enabled}
disabled={savingKey !== null || !ePayment.enabled}
disabled={savingKey !== null}
onChange={(checked) => void handleMellatToggle(checked)}
/>
</div>
<form className={styles.credentials} onSubmit={handleSaveMellatCredentials}>
<form
className={`${styles.credentials} ${
!ePayment.gateways.mellat.enabled ? styles.credentialsDisabled : ''
}`}
onSubmit={handleSaveMellatCredentials}
aria-disabled={!ePayment.gateways.mellat.enabled}
>
<div className={`${fieldStyles.field} ${styles.field}`}>
<label htmlFor="mellat-terminal">
{t('website.ePayment.terminalId')}
@@ -301,7 +304,7 @@ export function SettingsPage() {
autoComplete="off"
dir="ltr"
value={ePayment.gateways.mellat.terminalId}
disabled={savingKey !== null}
disabled={savingKey !== null || !ePayment.gateways.mellat.enabled}
onChange={(e) =>
setEPayment((current) => ({
...current,
@@ -327,7 +330,7 @@ export function SettingsPage() {
autoComplete="off"
dir="ltr"
value={ePayment.gateways.mellat.username}
disabled={savingKey !== null}
disabled={savingKey !== null || !ePayment.gateways.mellat.enabled}
onChange={(e) =>
setEPayment((current) => ({
...current,
@@ -346,12 +349,6 @@ export function SettingsPage() {
<div className={`${fieldStyles.field} ${styles.field}`}>
<label htmlFor="mellat-password">
{t('website.ePayment.password')}
{ePayment.gateways.mellat.passwordSet ? (
<span className={styles.hint}>
{' '}
({t('website.ePayment.passwordSet')})
</span>
) : null}
</label>
<div className={styles.passwordWrap}>
<input
@@ -359,13 +356,9 @@ export function SettingsPage() {
type={showPassword ? 'text' : 'password'}
autoComplete="new-password"
dir="ltr"
placeholder={
ePayment.gateways.mellat.passwordSet
? t('website.ePayment.passwordPlaceholderSet')
: t('website.ePayment.passwordPlaceholder')
}
placeholder={t('website.ePayment.passwordPlaceholderSet')}
value={passwordDraft}
disabled={savingKey !== null}
disabled={savingKey !== null || !ePayment.gateways.mellat.enabled}
onChange={(e) => setPasswordDraft(e.target.value)}
/>
<Tooltip
@@ -379,6 +372,7 @@ export function SettingsPage() {
type="button"
className={styles.passwordToggle}
onClick={() => setShowPassword((v) => !v)}
disabled={savingKey !== null || !ePayment.gateways.mellat.enabled}
aria-label={
showPassword
? t('website.ePayment.hidePassword')
@@ -391,11 +385,11 @@ export function SettingsPage() {
</div>
</div>
<div className={styles.actions}>
<div className={styles.actionsInline}>
<button
type="submit"
className={styles.saveBtn}
disabled={savingKey !== null}
disabled={savingKey !== null || !ePayment.gateways.mellat.enabled}
>
{savingKey === 'mellat-credentials'
? t('storeSettings.saving')
@@ -418,79 +412,53 @@ export function SettingsPage() {
<Switch
id="epayment-zarinpal"
checked={ePayment.gateways.zarinpal.enabled}
disabled={savingKey !== null || !ePayment.enabled}
disabled={savingKey !== null}
onChange={(checked) => void handleZarinpalToggle(checked)}
/>
</div>
<form className={styles.credentials} onSubmit={handleSaveZarinpalCredentials}>
<div className={`${fieldStyles.field} ${styles.field}`}>
<label htmlFor="zarinpal-merchant">
{t('website.ePayment.merchantId')}
</label>
<input
id="zarinpal-merchant"
type="text"
autoComplete="off"
dir="ltr"
spellCheck={false}
placeholder={t('website.ePayment.merchantIdPlaceholder')}
value={ePayment.gateways.zarinpal.merchantId}
disabled={savingKey !== null}
onChange={(e) =>
setEPayment((current) => ({
...current,
gateways: {
...current.gateways,
zarinpal: {
...current.gateways.zarinpal,
merchantId: e.target.value,
},
<form
className={`${styles.credentialsInline} ${
!ePayment.gateways.zarinpal.enabled ? styles.credentialsDisabled : ''
}`}
onSubmit={handleSaveZarinpalCredentials}
aria-disabled={!ePayment.gateways.zarinpal.enabled}
>
<label className={styles.inlineLabel} htmlFor="zarinpal-merchant">
{t('website.ePayment.merchantId')}
</label>
<input
id="zarinpal-merchant"
className={styles.inlineInput}
type="text"
autoComplete="off"
dir="ltr"
spellCheck={false}
placeholder={t('website.ePayment.merchantIdPlaceholder')}
value={ePayment.gateways.zarinpal.merchantId}
disabled={savingKey !== null || !ePayment.gateways.zarinpal.enabled}
onChange={(e) =>
setEPayment((current) => ({
...current,
gateways: {
...current.gateways,
zarinpal: {
...current.gateways.zarinpal,
merchantId: e.target.value,
},
}))
}
/>
</div>
<div className={`${sharedStyles.row} ${styles.fullRow}`}>
<div className={sharedStyles.rowText}>
<label className={sharedStyles.rowLabel} htmlFor="zarinpal-sandbox">
{t('website.ePayment.sandbox')}
</label>
<p className={sharedStyles.rowDescription}>
{t('website.ePayment.sandboxDesc')}
</p>
</div>
<Switch
id="zarinpal-sandbox"
checked={ePayment.gateways.zarinpal.sandbox}
disabled={savingKey !== null}
onChange={(checked) =>
setEPayment((current) => ({
...current,
gateways: {
...current.gateways,
zarinpal: {
...current.gateways.zarinpal,
sandbox: checked,
},
},
}))
}
/>
</div>
<div className={styles.actions}>
<button
type="submit"
className={styles.saveBtn}
disabled={savingKey !== null}
>
{savingKey === 'zarinpal-credentials'
? t('storeSettings.saving')
: t('website.ePayment.saveCredentials')}
</button>
</div>
},
}))
}
/>
<button
type="submit"
className={styles.saveBtn}
disabled={savingKey !== null || !ePayment.gateways.zarinpal.enabled}
>
{savingKey === 'zarinpal-credentials'
? t('storeSettings.saving')
: t('website.ePayment.saveCredentials')}
</button>
</form>
</section>
apps/business/src/pages/StoreSettingsPage.tsx
-1
View File
@@ -39,7 +39,6 @@ const DEFAULT_STORE_SETTINGS: StoreSettings = {
terminalId: '',
username: '',
password: '',
passwordSet: false,
},
sep: { enabled: false },
snappay: { enabled: false },
apps/business/src/services/mediaService.ts
+13
View File
@@ -146,6 +146,19 @@ export async function resolveHtmlEmbeddedDataUrls(html: string): Promise<string>
return doc.body.innerHTML
}
export function galleryMediaIdsAfterChange(
previousImages: string[],
previousIds: string[],
nextImages: string[],
): string[] {
const prevUrlToId = new Map(
previousImages.map((url, index) => [url, previousIds[index] ?? '']),
)
return nextImages.map((url) =>
isDataUrl(url) ? '' : prevUrlToId.get(url) ?? '',
)
}
export async function resolveDataUrlsToMediaIds(
values: string[],
existingMediaIds: string[],
apps/business/src/services/settingsService.ts
+1 -3
View File
@@ -31,9 +31,8 @@ export interface MellatGatewaySettings {
enabled: boolean
terminalId: string
username: string
/** Always empty in API responses; use passwordSet. */
/** Always empty in API responses; send a new value to replace the stored secret. */
password: string
passwordSet?: boolean
}
export interface ZarinpalGatewaySettings {
@@ -73,7 +72,6 @@ export const DEFAULT_EPAYMENT_SETTINGS: EPaymentSettings = {
terminalId: '',
username: '',
password: '',
passwordSet: false,
},
sep: { enabled: false },
snappay: { enabled: false },
apps/customer/.env.example
+3
View File
@@ -5,3 +5,6 @@ VITE_API_BASE_URL=http://localhost:3000/api/v1
# Leave unset for multi-tenant dev — tenant is resolved from hostname
# (e.g. customer.sanihome.ir → sanihome.ir, customer.safeteb.com → safeteb.com).
# VITE_BUSINESS_DOMAIN=sanihome.ir
# Optional storefront origin (local Next often needs an explicit port).
# VITE_WEBSITE_ORIGIN=http://sanihome.com:3001
apps/customer/src/components/Sidebar.module.css
+17
View File
@@ -21,6 +21,19 @@
margin-bottom: 24px;
padding: 4px 8px 12px;
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
text-decoration: none;
color: inherit;
border-radius: var(--radius-sm);
transition: background 0.15s;
cursor: pointer;
}
.brand:hover {
background: rgba(148, 163, 184, 0.1);
}
.brand:hover .brandName {
color: var(--primary);
}
.brandLogo {
@@ -109,6 +122,10 @@
transition: all 0.2s ease;
width: 100%;
text-align: start;
text-decoration: none;
background: transparent;
cursor: pointer;
box-sizing: border-box;
}
.navItem:hover {
apps/customer/src/components/Sidebar.tsx
+22 -6
View File
@@ -1,13 +1,13 @@
import { useEffect, useState } from 'react'
import { NavLink, useNavigate } from 'react-router-dom'
import { Home, User, MapPin, ShoppingBag, Heart, Package, HelpCircle, LogOut } from 'lucide-react'
import { Home, User, MapPin, ShoppingBag, Heart, Package, HelpCircle, LogOut, Globe } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { useAuth } from '../context/AuthContext'
import { useTenantBranding } from '../context/TenantBrandingContext'
import { useT } from '../i18n/useT'
import { getActiveBusinessDomain } from '../lib/businessContext'
import { isAbortError } from '../lib/api'
import { getWebsiteBusinessInfo } from '../services/websiteService'
import { getWebsiteBusinessInfo, getWebsiteUrl } from '../services/websiteService'
import { hasBusinessModule } from '../utils/businessModules'
import meshkeeLogo from '../assets/meshkee-logo.png'
import styles from './Sidebar.module.css'
@@ -26,6 +26,7 @@ export function Sidebar({ open = false }: SidebarProps) {
const [logoUrl, setLogoUrl] = useState<string | null>(null)
const businessDomain = getActiveBusinessDomain()
const websiteUrl = getWebsiteUrl(businessDomain)
const fallbackBusinessName = user?.customerBusinesses[0]?.name ?? t('app.storeFallback')
const displayName = brandName || fallbackBusinessName
const showMyProducts = hasBusinessModule(enabledModules, 'customer_products')
@@ -73,17 +74,23 @@ export function Sidebar({ open = false }: SidebarProps) {
id="dashboard-sidebar"
className={`${styles.sidebar} ${open ? styles.open : ''}`}
>
<div className={styles.brand}>
<a
href={websiteUrl}
className={styles.brand}
target="_blank"
rel="noopener noreferrer"
aria-label={t('nav.goToWebsite')}
>
<img
src={logoUrl || meshkeeLogo}
alt={displayName}
className={styles.brandLogo}
alt=""
className={logoUrl ? `${styles.brandLogo} ${styles.brandLogoUploaded}` : styles.brandLogo}
/>
<div className={styles.brandText}>
<span className={styles.brandName}>{displayName}</span>
<span className={styles.brandDomain}>{businessDomain}</span>
</div>
</div>
</a>
<nav className={styles.nav}>
{navItems.map((item) => (
@@ -102,6 +109,15 @@ export function Sidebar({ open = false }: SidebarProps) {
</nav>
<div className={styles.footer}>
<a
href={websiteUrl}
className={styles.navItem}
target="_blank"
rel="noopener noreferrer"
>
<Globe size={20} />
<span>{t('nav.goToWebsite')}</span>
</a>
<button type="button" className={styles.navItem}>
<HelpCircle size={20} />
<span>{t('nav.help')}</span>
apps/customer/src/i18n/messages.ts
+2
View File
@@ -16,6 +16,7 @@ const en = {
'nav.favorites': 'My Favorites',
'nav.myProducts': 'My Products',
'nav.help': 'Help Center',
'nav.goToWebsite': 'Go to website',
'nav.logout': 'Logout',
'header.toggleMenu': 'Toggle menu',
@@ -413,6 +414,7 @@ const fa: Record<MessageKey, string> = {
'nav.favorites': 'علاقه‌مندی‌ها',
'nav.myProducts': 'محصولات من',
'nav.help': 'مرکز راهنما',
'nav.goToWebsite': 'رفتن به وبسایت',
'nav.logout': 'خروج',
'header.toggleMenu': 'باز و بسته کردن منو',
apps/customer/src/lib/api.ts
+56 -6
View File
@@ -1,20 +1,70 @@
import { createApiClient } from '@meshkee/dashboard-core'
import {
clearSharedAuthCookies,
hydrateLocalTokensFromSharedCookies,
writeSharedAuthCookies,
} from './sharedAuthCookie'
const API_BASE_URL =
import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:3000/api/v1'
export const api = createApiClient({
const ACCESS_KEY = 'meshkee_customer_access_token'
const REFRESH_KEY = 'meshkee_customer_refresh_token'
const base = createApiClient({
baseUrl: API_BASE_URL,
accessTokenKey: 'meshkee_customer_access_token',
refreshTokenKey: 'meshkee_customer_refresh_token',
accessTokenKey: ACCESS_KEY,
refreshTokenKey: REFRESH_KEY,
})
export const {
apiRequest,
hydrateLocalTokensFromSharedCookies()
// Keep cookies aligned with an existing localStorage session (pre-cookie logins / refresh)
function mirrorLocalTokensToCookies() {
const access = localStorage.getItem(ACCESS_KEY)
if (!access) return
writeSharedAuthCookies(access, localStorage.getItem(REFRESH_KEY) ?? undefined)
}
mirrorLocalTokensToCookies()
export function getAccessToken() {
hydrateLocalTokensFromSharedCookies()
return base.getAccessToken()
}
export function getRefreshToken() {
return base.getRefreshToken()
}
export function setTokens(accessToken: string, refreshToken: string) {
base.setTokens(accessToken, refreshToken)
writeSharedAuthCookies(accessToken, refreshToken)
}
export function clearTokens() {
base.clearTokens()
clearSharedAuthCookies()
}
export async function apiRequest<T>(
path: string,
options?: Parameters<typeof base.apiRequest<T>>[1],
): Promise<T> {
try {
return await base.apiRequest<T>(path, options)
} finally {
mirrorLocalTokensToCookies()
}
}
export const api = {
...base,
getAccessToken,
getRefreshToken,
setTokens,
clearTokens,
} = api
apiRequest,
}
export { ApiError, isAbortError } from '@meshkee/dashboard-core'
apps/customer/src/lib/guestCart.ts
+8 -5
View File
@@ -106,9 +106,10 @@ export function ingestGuestCartFromLocation(): GuestCartItem[] {
if (typeof window === 'undefined') return []
const hash = window.location.hash.replace(/^#/, '')
const search = window.location.search.replace(/^\?/, '')
const params = new URLSearchParams(hash.includes('=') ? hash : search)
const encoded = params.get(GUEST_CART_URL_PARAM)
const searchParams = new URLSearchParams(window.location.search)
const hashParams = new URLSearchParams(hash.includes('=') ? hash : '')
const encoded =
hashParams.get(GUEST_CART_URL_PARAM) || searchParams.get(GUEST_CART_URL_PARAM)
if (!encoded) return []
const items = decodeGuestCartFromUrl(encoded)
@@ -116,8 +117,10 @@ export function ingestGuestCartFromLocation(): GuestCartItem[] {
saveGuestCart(items)
// Clean the payload from the address bar
const nextUrl = `${window.location.pathname}${window.location.search}`
// Clean guestCart from address bar (keep other query params)
searchParams.delete(GUEST_CART_URL_PARAM)
const nextSearch = searchParams.toString()
const nextUrl = `${window.location.pathname}${nextSearch ? `?${nextSearch}` : ''}`
window.history.replaceState(null, '', nextUrl)
return items
apps/customer/src/lib/sharedAuthCookie.ts
+124
View File
@@ -0,0 +1,124 @@
/** Shared auth cookies so storefront + customer.{domain} share one login. */
export const SHARED_ACCESS_TOKEN_KEY = 'meshkee_customer_access_token'
export const SHARED_REFRESH_TOKEN_KEY = 'meshkee_customer_refresh_token'
const CHUNK_SIZE = 2800
const MAX_CHUNKS = 24
function cookieDomain(): string | undefined {
if (typeof window === 'undefined') return undefined
const host = window.location.hostname.toLowerCase()
if (host === 'localhost' || host === '127.0.0.1') return undefined
const parts = host.split('.').filter(Boolean)
if (parts.length < 2) return undefined
return `.${parts.slice(-2).join('.')}`
}
function readRawCookie(name: string): string | null {
if (typeof document === 'undefined') return null
const prefix = `${name}=`
const match = document.cookie.split('; ').find((row) => row.startsWith(prefix))
if (!match) return null
return match.slice(prefix.length)
}
function writeRawCookie(name: string, value: string | null) {
if (typeof document === 'undefined') return
const domain = cookieDomain()
if (value == null) {
let cookie = `${name}=; path=/; max-age=0; SameSite=Lax`
if (domain) cookie += `; domain=${domain}`
document.cookie = cookie
return
}
const maxAge = 60 * 60 * 24 * 30
let cookie = `${name}=${value}; path=/; max-age=${maxAge}; SameSite=Lax`
if (domain) cookie += `; domain=${domain}`
document.cookie = cookie
}
function clearChunkedCookie(name: string) {
writeRawCookie(name, null)
const n = Number(readRawCookie(`${name}_n`) || '0')
writeRawCookie(`${name}_n`, null)
for (let i = 0; i < Math.max(n, MAX_CHUNKS); i++) {
writeRawCookie(`${name}_${i}`, null)
}
}
function writeCookie(name: string, value: string | null) {
clearChunkedCookie(name)
if (value == null || value === '') return
const encoded = encodeURIComponent(value)
if (encoded.length <= 3500) {
writeRawCookie(name, encoded)
return
}
const chunks: string[] = []
for (let i = 0; i < encoded.length; i += CHUNK_SIZE) {
chunks.push(encoded.slice(i, i + CHUNK_SIZE))
}
writeRawCookie(`${name}_n`, String(chunks.length))
chunks.forEach((chunk, i) => writeRawCookie(`${name}_${i}`, chunk))
}
function readCookie(name: string): string | null {
const n = Number(readRawCookie(`${name}_n`) || '0')
if (n > 0) {
let encoded = ''
for (let i = 0; i < n; i++) {
const part = readRawCookie(`${name}_${i}`)
if (part == null) return null
encoded += part
}
try {
return decodeURIComponent(encoded)
} catch {
return null
}
}
const raw = readRawCookie(name)
if (raw == null) return null
try {
return decodeURIComponent(raw)
} catch {
return null
}
}
export function writeSharedAuthCookies(accessToken: string, refreshToken?: string) {
writeCookie(SHARED_ACCESS_TOKEN_KEY, accessToken)
if (refreshToken) writeCookie(SHARED_REFRESH_TOKEN_KEY, refreshToken)
}
export function clearSharedAuthCookies() {
writeCookie(SHARED_ACCESS_TOKEN_KEY, null)
writeCookie(SHARED_REFRESH_TOKEN_KEY, null)
}
export function readSharedAccessToken(): string | null {
return readCookie(SHARED_ACCESS_TOKEN_KEY)
}
export function readSharedRefreshToken(): string | null {
return readCookie(SHARED_REFRESH_TOKEN_KEY)
}
/** Copy shared cookies into localStorage when this origin has no tokens yet. */
export function hydrateLocalTokensFromSharedCookies(
accessKey = SHARED_ACCESS_TOKEN_KEY,
refreshKey = SHARED_REFRESH_TOKEN_KEY,
): boolean {
if (typeof window === 'undefined') return false
if (localStorage.getItem(accessKey)) return false
const access = readSharedAccessToken()
if (!access) return false
localStorage.setItem(accessKey, access)
const refresh = readSharedRefreshToken()
if (refresh) localStorage.setItem(refreshKey, refresh)
return true
}
apps/customer/src/services/websiteService.ts
+13 -2
View File
@@ -16,7 +16,18 @@ export async function getWebsiteBusinessInfo(host: string, signal?: AbortSignal)
})
}
/** Public storefront URL for the tenant (e.g. https://sanihome.ir). */
/** Public storefront URL for the tenant (e.g. https://sanihome.com). */
export function getWebsiteUrl(domain = getTenantDomain()) {
return `${window.location.protocol}//${domain}`
const configured = (import.meta.env.VITE_WEBSITE_ORIGIN as string | undefined)?.replace(
/\/$/,
'',
)
if (configured) return configured
const { protocol, port } = window.location
// Local customer app is :5175; Sanihome Next storefront runs on :3001
if (import.meta.env.DEV && (port === '5175' || port === '')) {
return `${protocol}//${domain}:3001`
}
return `${protocol}//${domain}`
}