Add store installments module with calculator and public API docs.
Business dashboard can manage credit methods and preview plans; cropper and module flags support the new flow. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
ff419603bf
commit
e2950fa20e
@@ -37,6 +37,8 @@ import { OrdersPage } from './pages/OrdersPage'
|
||||
import { LoginPage } from './pages/LoginPage'
|
||||
import { ShoppingCardsPage } from './pages/ShoppingCardsPage'
|
||||
import { StoreSettingsPage } from './pages/StoreSettingsPage'
|
||||
import { StoreInstallmentsPage } from './pages/StoreInstallmentsPage'
|
||||
import { AddStoreInstallmentPage } from './pages/AddStoreInstallmentPage'
|
||||
import { BlogPage } from './pages/BlogPage'
|
||||
import { BlogListPage } from './pages/BlogListPage'
|
||||
import { AddNewBlogPage } from './pages/AddNewBlogPage'
|
||||
@@ -110,6 +112,9 @@ function App() {
|
||||
<Route path="store/items" element={<StoreItemsPage />} />
|
||||
<Route path="store/orders" element={<OrdersPage />} />
|
||||
<Route path="store/cards" element={<ShoppingCardsPage />} />
|
||||
<Route path="store/installments" element={<StoreInstallmentsPage />} />
|
||||
<Route path="store/installments/new" element={<AddStoreInstallmentPage />} />
|
||||
<Route path="store/installments/edit/:id" element={<AddStoreInstallmentPage />} />
|
||||
<Route path="store/settings" element={<StoreSettingsPage />} />
|
||||
<Route path="customers" element={<CustomersPage />} />
|
||||
<Route path="finance" element={<FinancePage />} />
|
||||
|
||||
@@ -115,6 +115,7 @@ export function BrandModal({
|
||||
onChange={setImage}
|
||||
outputFormat="png"
|
||||
accept="image/png"
|
||||
minZoom={0.4}
|
||||
uploadLabel={t('brands.modal.uploadLogo')}
|
||||
hint={t('brands.modal.logoHint')}
|
||||
changeLabel={t('brands.modal.changeLogo')}
|
||||
|
||||
@@ -226,14 +226,15 @@
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 6px 18px rgba(31, 38, 135, 0.18);
|
||||
z-index: 10000;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
|
||||
.bar {
|
||||
position: relative;
|
||||
flex: none;
|
||||
width: 80%;
|
||||
max-width: 14px;
|
||||
min-width: 8px;
|
||||
width: 40%;
|
||||
max-width: 7px;
|
||||
min-width: 4px;
|
||||
border-radius: 3px 3px 1px 1px;
|
||||
transition: height 0.3s ease;
|
||||
cursor: default;
|
||||
|
||||
@@ -43,15 +43,19 @@ function formatDayLabel(dateKey: string, locale: string): string {
|
||||
})
|
||||
}
|
||||
|
||||
/** Tooltip label with month context (e.g. ۶ شهریور / Sep 6). */
|
||||
/** Tooltip label with month context (e.g. ۲ مهر / Sep 6). */
|
||||
function formatDayTooltip(dateKey: string, locale: string): string {
|
||||
return parseDateKey(dateKey).toLocaleDateString(locale === 'fa' ? 'fa-IR' : 'en-US', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
numberingSystem: 'latn',
|
||||
...(locale === 'fa' ? {} : { numberingSystem: 'latn' as const }),
|
||||
})
|
||||
}
|
||||
|
||||
function formatTooltipCount(value: number, locale: string): string {
|
||||
return value.toLocaleString(locale === 'fa' ? 'fa-IR' : 'en-US')
|
||||
}
|
||||
|
||||
/** Full calendar date for subtitle ranges (e.g. ۴ شهریور ۱۴۰۵ / September 4, 2026). */
|
||||
function formatRangeDate(dateKey: string, locale: string): string {
|
||||
return parseDateKey(dateKey).toLocaleDateString(locale === 'fa' ? 'fa-IR' : 'en-US', {
|
||||
@@ -236,12 +240,12 @@ export function DailyActivityChart({
|
||||
const primaryTip = t(primaryBarTitleKey, {
|
||||
day: item.label,
|
||||
month: item.label,
|
||||
count: item.primary,
|
||||
count: formatTooltipCount(item.primary, locale),
|
||||
})
|
||||
const secondaryTip = t(secondaryBarTitleKey, {
|
||||
day: item.label,
|
||||
month: item.label,
|
||||
count: item.secondary,
|
||||
count: formatTooltipCount(item.secondary, locale),
|
||||
})
|
||||
|
||||
return (
|
||||
@@ -254,7 +258,13 @@ export function DailyActivityChart({
|
||||
height: Math.max(primaryHeight, item.primary > 0 ? 4 : 0),
|
||||
}}
|
||||
>
|
||||
<span className={styles.barTooltip}>{primaryTip}</span>
|
||||
<span
|
||||
className={styles.barTooltip}
|
||||
lang={locale === 'fa' ? 'fa' : 'en'}
|
||||
dir={locale === 'fa' ? 'rtl' : 'ltr'}
|
||||
>
|
||||
{primaryTip}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{showSecondary ? (
|
||||
@@ -265,7 +275,13 @@ export function DailyActivityChart({
|
||||
height: Math.max(secondaryHeight, item.secondary > 0 ? 4 : 0),
|
||||
}}
|
||||
>
|
||||
<span className={styles.barTooltip}>{secondaryTip}</span>
|
||||
<span
|
||||
className={styles.barTooltip}
|
||||
lang={locale === 'fa' ? 'fa' : 'en'}
|
||||
dir={locale === 'fa' ? 'rtl' : 'ltr'}
|
||||
>
|
||||
{secondaryTip}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
@@ -289,11 +305,11 @@ export function DailyActivityChart({
|
||||
const tooltipDay = formatDayTooltip(item.date, locale)
|
||||
const primaryTip = t(primaryBarTitleKey, {
|
||||
day: tooltipDay,
|
||||
count: item.count,
|
||||
count: formatTooltipCount(item.count, locale),
|
||||
})
|
||||
const secondaryTip = t(secondaryBarTitleKey, {
|
||||
day: tooltipDay,
|
||||
count: secondaryCount,
|
||||
count: formatTooltipCount(secondaryCount, locale),
|
||||
})
|
||||
|
||||
return (
|
||||
@@ -306,7 +322,13 @@ export function DailyActivityChart({
|
||||
height: Math.max(primaryHeight, item.count > 0 ? 4 : 0),
|
||||
}}
|
||||
>
|
||||
<span className={styles.barTooltip}>{primaryTip}</span>
|
||||
<span
|
||||
className={styles.barTooltip}
|
||||
lang={locale === 'fa' ? 'fa' : 'en'}
|
||||
dir={locale === 'fa' ? 'rtl' : 'ltr'}
|
||||
>
|
||||
{primaryTip}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{showSecondary ? (
|
||||
@@ -317,7 +339,13 @@ export function DailyActivityChart({
|
||||
height: Math.max(secondaryHeight, secondaryCount > 0 ? 4 : 0),
|
||||
}}
|
||||
>
|
||||
<span className={styles.barTooltip}>{secondaryTip}</span>
|
||||
<span
|
||||
className={styles.barTooltip}
|
||||
lang={locale === 'fa' ? 'fa' : 'en'}
|
||||
dir={locale === 'fa' ? 'rtl' : 'ltr'}
|
||||
>
|
||||
{secondaryTip}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
@@ -98,6 +98,16 @@
|
||||
background: #1e293b;
|
||||
}
|
||||
|
||||
.cropAreaTransparent {
|
||||
background:
|
||||
linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
|
||||
linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
|
||||
background-size: 16px 16px;
|
||||
background-position: 0 0, 0 8px, 8px -8px, -8px 0;
|
||||
}
|
||||
|
||||
.cropControls {
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
|
||||
@@ -10,6 +10,10 @@ interface ImageCropperProps {
|
||||
onChange: (value: string | null) => void
|
||||
/** Crop aspect ratio. Defaults to square (1). */
|
||||
aspect?: number
|
||||
/**
|
||||
* Output format. When omitted, follows the uploaded file
|
||||
* (PNG stays PNG with transparent padding; other images become JPEG with white padding).
|
||||
*/
|
||||
outputFormat?: 'jpeg' | 'png'
|
||||
/** Fill color for JPEG and for crop areas outside the image. */
|
||||
fillColor?: string
|
||||
@@ -24,13 +28,24 @@ interface ImageCropperProps {
|
||||
compact?: boolean
|
||||
}
|
||||
|
||||
function isPngSource(file: File): boolean {
|
||||
return (
|
||||
file.type === 'image/png' ||
|
||||
file.name.toLowerCase().endsWith('.png')
|
||||
)
|
||||
}
|
||||
|
||||
function isPngDataUrl(src: string): boolean {
|
||||
return /^data:image\/png/i.test(src)
|
||||
}
|
||||
|
||||
export function ImageCropper({
|
||||
value,
|
||||
onChange,
|
||||
aspect = 1,
|
||||
outputFormat = 'jpeg',
|
||||
outputFormat,
|
||||
fillColor,
|
||||
minZoom = 1,
|
||||
minZoom = 0.4,
|
||||
maxZoom = 3,
|
||||
accept = 'image/*',
|
||||
uploadLabel,
|
||||
@@ -42,13 +57,18 @@ export function ImageCropper({
|
||||
const resolvedUploadLabel = uploadLabel ?? t('products.form.thumbnailUpload')
|
||||
const resolvedHint = hint ?? t('products.form.thumbnailHint')
|
||||
const resolvedChangeLabel = changeLabel ?? t('products.form.thumbnailChange')
|
||||
const resolvedFillColor = fillColor ?? (outputFormat === 'jpeg' ? '#ffffff' : undefined)
|
||||
const cropSurfaceColor = resolvedFillColor ?? '#1e293b'
|
||||
const [imageSrc, setImageSrc] = useState<string | null>(null)
|
||||
const [sourceIsPng, setSourceIsPng] = useState(false)
|
||||
const [crop, setCrop] = useState({ x: 0, y: 0 })
|
||||
const [zoom, setZoom] = useState(1)
|
||||
const [croppedArea, setCroppedArea] = useState<Area | null>(null)
|
||||
|
||||
const resolvedFormat: 'jpeg' | 'png' =
|
||||
outputFormat ?? (sourceIsPng ? 'png' : 'jpeg')
|
||||
const resolvedFillColor =
|
||||
fillColor ?? (resolvedFormat === 'jpeg' ? '#ffffff' : undefined)
|
||||
const useTransparentPad = resolvedFormat === 'png' && !resolvedFillColor
|
||||
|
||||
useEffect(() => {
|
||||
setCrop({ x: 0, y: 0 })
|
||||
setZoom(1)
|
||||
@@ -62,6 +82,8 @@ export function ImageCropper({
|
||||
function handleFile(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const file = e.target.files?.[0]
|
||||
if (!file) return
|
||||
const png = isPngSource(file)
|
||||
setSourceIsPng(png)
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => {
|
||||
setImageSrc(reader.result as string)
|
||||
@@ -75,12 +97,10 @@ export function ImageCropper({
|
||||
|
||||
async function applyCrop() {
|
||||
if (!imageSrc || !croppedArea) return
|
||||
const cropped = await getCroppedImage(
|
||||
imageSrc,
|
||||
croppedArea,
|
||||
outputFormat,
|
||||
resolvedFillColor,
|
||||
)
|
||||
const format: 'jpeg' | 'png' =
|
||||
outputFormat ?? (isPngDataUrl(imageSrc) || sourceIsPng ? 'png' : 'jpeg')
|
||||
const fill = fillColor ?? (format === 'jpeg' ? '#ffffff' : undefined)
|
||||
const cropped = await getCroppedImage(imageSrc, croppedArea, format, fill)
|
||||
onChange(cropped)
|
||||
setImageSrc(null)
|
||||
setZoom(1)
|
||||
@@ -116,6 +136,10 @@ export function ImageCropper({
|
||||
alignSelf: 'center',
|
||||
}
|
||||
|
||||
const cropSurfaceStyle: React.CSSProperties = useTransparentPad
|
||||
? { ...frameStyle }
|
||||
: { ...frameStyle, background: resolvedFillColor ?? '#1e293b' }
|
||||
|
||||
return (
|
||||
<div className={`${styles.wrapper} ${compact ? styles.compact : ''}`}>
|
||||
{value && !imageSrc && (
|
||||
@@ -144,8 +168,8 @@ export function ImageCropper({
|
||||
{imageSrc && (
|
||||
<div className={styles.cropPanel}>
|
||||
<div
|
||||
className={styles.cropArea}
|
||||
style={{ ...frameStyle, background: cropSurfaceColor }}
|
||||
className={`${styles.cropArea} ${useTransparentPad ? styles.cropAreaTransparent : ''}`}
|
||||
style={cropSurfaceStyle}
|
||||
>
|
||||
<Cropper
|
||||
key={String(aspect)}
|
||||
@@ -160,7 +184,9 @@ export function ImageCropper({
|
||||
onCropComplete={onCropComplete}
|
||||
restrictPosition={minZoom >= 1}
|
||||
style={{
|
||||
containerStyle: { background: cropSurfaceColor },
|
||||
containerStyle: useTransparentPad
|
||||
? { background: 'transparent' }
|
||||
: { background: resolvedFillColor ?? '#1e293b' },
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -154,6 +154,14 @@ export function Sidebar({ open = false }: SidebarProps) {
|
||||
{ labelKey: 'nav.store.orders', to: '/store/orders' },
|
||||
{ labelKey: 'nav.store.shipping', to: '/store/shipping' },
|
||||
{ labelKey: 'nav.store.cards', to: '/store/cards' },
|
||||
...(hasBusinessModule(enabledModules, 'store_installments')
|
||||
? [
|
||||
{
|
||||
labelKey: 'nav.store.installments' as BusinessMessageKey,
|
||||
to: '/store/installments',
|
||||
},
|
||||
]
|
||||
: []),
|
||||
{ labelKey: 'nav.store.settings', to: '/store/settings' },
|
||||
],
|
||||
},
|
||||
|
||||
@@ -0,0 +1,211 @@
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.row:hover {
|
||||
background: rgba(var(--primary-rgb) / 0.04);
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 44px;
|
||||
width: auto;
|
||||
max-width: 88px;
|
||||
flex-shrink: 0;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
border-radius: 8px;
|
||||
background:
|
||||
linear-gradient(45deg, rgba(148, 163, 184, 0.12) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, rgba(148, 163, 184, 0.12) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.12) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.12) 75%);
|
||||
background-size: 12px 12px;
|
||||
background-position: 0 0, 0 6px, 6px -6px, -6px 0;
|
||||
border: 1px solid rgba(148, 163, 184, 0.2);
|
||||
}
|
||||
|
||||
.titleBlock {
|
||||
flex: 0 1 180px;
|
||||
min-width: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.names {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.namePrimary {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.nameSecondary {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.nameEn {
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
font-family: var(--font-en), var(--font-ui);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.35;
|
||||
color: var(--text-secondary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.metrics {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
max-width: 100%;
|
||||
min-height: 32px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(148, 163, 184, 0.1);
|
||||
border: 1px solid rgba(148, 163, 184, 0.16);
|
||||
}
|
||||
|
||||
.chipLabel {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chipValue {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 3px 5px;
|
||||
min-width: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-feature-settings: 'tnum' 1;
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
font-family: var(--font-en), var(--font-ui);
|
||||
}
|
||||
|
||||
.chipNumber {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.chipSep {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.chipUnit {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.chipHint {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.controlBtn {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
color: var(--text-secondary);
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.controlBtn:hover {
|
||||
background: rgba(var(--primary-rgb) / 0.1);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.useBtn {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.useBtn:hover {
|
||||
background: rgba(var(--primary-rgb) / 0.14);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.danger:hover {
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.titleBlock {
|
||||
flex: 1 1 160px;
|
||||
}
|
||||
|
||||
.metrics {
|
||||
flex: 1 1 100%;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
import { Calculator, Pencil, Trash2 } from 'lucide-react'
|
||||
import { useLocale } from '@meshkee/dashboard-ui'
|
||||
import type { StoreLoanMethod } from '../types/storeLoanMethod'
|
||||
import { useT } from '../i18n/useT'
|
||||
import { Tooltip } from './Tooltip'
|
||||
import styles from './StoreLoanMethodRow.module.css'
|
||||
|
||||
interface StoreLoanMethodRowProps {
|
||||
method: StoreLoanMethod
|
||||
onUse: (id: string) => void
|
||||
onEdit: (id: string) => void
|
||||
onRemove: (id: string) => void
|
||||
}
|
||||
|
||||
function formatMoney(value: number) {
|
||||
return Math.round(value).toLocaleString('en-US')
|
||||
}
|
||||
|
||||
function formatInterest(value: number) {
|
||||
return Number.isInteger(value) ? String(value) : value.toLocaleString('en-US')
|
||||
}
|
||||
|
||||
export function StoreLoanMethodRow({
|
||||
method,
|
||||
onUse,
|
||||
onEdit,
|
||||
onRemove,
|
||||
}: StoreLoanMethodRowProps) {
|
||||
const t = useT()
|
||||
const { locale } = useLocale()
|
||||
const isFa = locale === 'fa'
|
||||
const primaryName = isFa ? method.nameFa || method.nameEn : method.nameEn || method.nameFa
|
||||
const secondaryName = isFa
|
||||
? method.nameFa
|
||||
? method.nameEn
|
||||
: ''
|
||||
: method.nameEn
|
||||
? method.nameFa
|
||||
: ''
|
||||
|
||||
return (
|
||||
<div className={styles.row}>
|
||||
{method.imageUrl ? (
|
||||
<img src={method.imageUrl} alt="" className={styles.logo} />
|
||||
) : null}
|
||||
|
||||
<div className={styles.titleBlock}>
|
||||
<div className={styles.names}>
|
||||
<span className={`${styles.namePrimary} ${!isFa ? styles.nameEn : ''}`}>
|
||||
{primaryName}
|
||||
</span>
|
||||
{secondaryName ? (
|
||||
<span className={`${styles.nameSecondary} ${isFa ? styles.nameEn : ''}`}>
|
||||
{secondaryName}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
{method.description ? (
|
||||
<p className={styles.description}>{method.description}</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className={styles.metrics}>
|
||||
<div className={styles.chip}>
|
||||
<span className={styles.chipLabel}>
|
||||
{t('store.installments.row.minShopping')}
|
||||
</span>
|
||||
<span className={styles.chipValue}>
|
||||
<span className={styles.chipNumber}>
|
||||
{formatMoney(method.minShoppingAmount)}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.chip}>
|
||||
<span className={styles.chipLabel}>
|
||||
{t('store.installments.row.creditAmount')}
|
||||
</span>
|
||||
<span className={styles.chipValue}>
|
||||
<span className={styles.chipNumber}>{formatMoney(method.minAmount)}</span>
|
||||
<span className={styles.chipSep}>–</span>
|
||||
<span className={styles.chipNumber}>{formatMoney(method.maxAmount)}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.chip}>
|
||||
<span className={styles.chipLabel}>
|
||||
{t('store.installments.row.interest')}
|
||||
</span>
|
||||
<span className={styles.chipValue}>
|
||||
<span className={styles.chipNumber}>{formatInterest(method.interest)}</span>
|
||||
<span className={styles.chipUnit}>%</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.chip}>
|
||||
<span className={styles.chipLabel}>
|
||||
{t('store.installments.row.months')}
|
||||
</span>
|
||||
<span className={styles.chipValue}>
|
||||
<span className={styles.chipNumber}>{method.returnMonthsMin}</span>
|
||||
<span className={styles.chipSep}>–</span>
|
||||
<span className={styles.chipNumber}>{method.returnMonthsMax}</span>
|
||||
<span className={styles.chipUnit}>
|
||||
{t('store.installments.row.monthsUnit')}
|
||||
</span>
|
||||
</span>
|
||||
<span className={styles.chipHint}>
|
||||
{t('store.installments.row.monthsStep', {
|
||||
step: method.returnMonthsStep,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.controls}>
|
||||
<Tooltip label={t('store.installments.tooltip.use')}>
|
||||
<button
|
||||
type="button"
|
||||
className={`${styles.controlBtn} ${styles.useBtn}`}
|
||||
onClick={() => onUse(method.id)}
|
||||
aria-label={t('store.installments.tooltip.use')}
|
||||
>
|
||||
<Calculator size={17} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<Tooltip label={t('store.installments.tooltip.edit')}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.controlBtn}
|
||||
onClick={() => onEdit(method.id)}
|
||||
aria-label={t('store.installments.tooltip.edit')}
|
||||
>
|
||||
<Pencil size={17} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<Tooltip label={t('store.installments.tooltip.remove')}>
|
||||
<button
|
||||
type="button"
|
||||
className={`${styles.controlBtn} ${styles.danger}`}
|
||||
onClick={() => onRemove(method.id)}
|
||||
aria-label={t('store.installments.tooltip.remove')}
|
||||
>
|
||||
<Trash2 size={17} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,402 @@
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: var(--modal-overlay-bg);
|
||||
backdrop-filter: blur(var(--modal-overlay-blur));
|
||||
-webkit-backdrop-filter: blur(var(--modal-overlay-blur));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 300;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.overlayIn {
|
||||
animation: overlayIn 0.22s ease forwards;
|
||||
}
|
||||
|
||||
.overlayOut {
|
||||
animation: overlayOut 0.22s ease forwards;
|
||||
}
|
||||
|
||||
.modal {
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
max-height: calc(100vh - 24px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--elevated-surface, var(--surface));
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 20px 60px rgba(var(--primary-rgb) / 0.16);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modalIn {
|
||||
animation: modalIn 0.22s ease forwards;
|
||||
}
|
||||
|
||||
.modalOut {
|
||||
animation: modalOut 0.22s ease forwards;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 14px 16px 10px;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.headerText {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.headerBadge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
width: fit-content;
|
||||
padding: 3px 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
background: rgba(var(--primary-rgb) / 0.12);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.closeBtn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.closeBtn:hover {
|
||||
background: rgba(var(--primary-rgb) / 0.1);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 12px 16px 16px;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
background: rgba(148, 163, 184, 0.06);
|
||||
border: 1px solid rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.planGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 0.9fr 1.5fr;
|
||||
gap: 10px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.field label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.field input:not([type='range']),
|
||||
.field select {
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
padding: 0 10px;
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
background: var(--surface);
|
||||
border: 1px solid rgba(148, 163, 184, 0.28);
|
||||
border-radius: var(--radius-sm);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.field select {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.field input:not([type='range']):focus,
|
||||
.field select:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
|
||||
}
|
||||
|
||||
.field input:disabled,
|
||||
.field select:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.sliderHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sliderValue {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
accent-color: var(--primary);
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.slider:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.sliderMeta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.sliderMeta > span:nth-child(2) {
|
||||
direction: inherit;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin: 0;
|
||||
font-size: 10px;
|
||||
line-height: 1.35;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.warning {
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
color: #b45309;
|
||||
background: rgba(245, 158, 11, 0.12);
|
||||
border: 1px solid rgba(245, 158, 11, 0.28);
|
||||
}
|
||||
|
||||
.emptyResult {
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.summaryGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.summaryCard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 10px;
|
||||
background: var(--surface);
|
||||
border: 1px solid rgba(148, 163, 184, 0.16);
|
||||
}
|
||||
|
||||
.summaryCardWide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.summaryLabel {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.summaryValue {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-feature-settings: 'tnum' 1;
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
font-family: var(--font-en), var(--font-ui);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.schedule {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.scheduleHead {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.scheduleList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 180px;
|
||||
overflow: auto;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.16);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.scheduleRow {
|
||||
display: grid;
|
||||
grid-template-columns: 72px 1fr auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
padding: 7px 10px;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
|
||||
}
|
||||
|
||||
.scheduleRow:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.scheduleIndex {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.scheduleDate {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.scheduleAmount {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
font-family: var(--font-en), var(--font-ui);
|
||||
}
|
||||
|
||||
@keyframes overlayIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes overlayOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modalIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px) scale(0.98);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modalOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(8px) scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.planGrid,
|
||||
.summaryGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.scheduleRow {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
.scheduleIndex {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,367 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { Calculator, X } from 'lucide-react'
|
||||
import { useLocale } from '@meshkee/dashboard-ui'
|
||||
import { useT } from '../i18n/useT'
|
||||
import type { StoreLoanMethod } from '../types/storeLoanMethod'
|
||||
import { formatIrtInput, parseIrtInput } from '../utils/irtPrice'
|
||||
import {
|
||||
calculateStoreLoanPlan,
|
||||
clampCreditAmount,
|
||||
listReturnMonthOptions,
|
||||
} from '../utils/storeLoanCalculator'
|
||||
import styles from './StoreLoanUseModal.module.css'
|
||||
|
||||
interface StoreLoanUseModalProps {
|
||||
open: boolean
|
||||
method: StoreLoanMethod | null
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const ANIMATION_MS = 220
|
||||
|
||||
function formatMoney(value: number) {
|
||||
return Math.round(value).toLocaleString('en-US')
|
||||
}
|
||||
|
||||
function formatDate(value: Date, locale: 'en' | 'fa') {
|
||||
return value.toLocaleDateString(locale === 'fa' ? 'fa-IR' : 'en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: '2-digit',
|
||||
})
|
||||
}
|
||||
|
||||
export function StoreLoanUseModal({ open, method, onClose }: StoreLoanUseModalProps) {
|
||||
const t = useT()
|
||||
const { locale } = useLocale()
|
||||
const isFa = locale === 'fa'
|
||||
const [mounted, setMounted] = useState(open)
|
||||
const [closing, setClosing] = useState(false)
|
||||
const [totalValueInput, setTotalValueInput] = useState('')
|
||||
const [creditInput, setCreditInput] = useState('')
|
||||
const [months, setMonths] = useState(0)
|
||||
|
||||
const monthOptions = useMemo(() => {
|
||||
if (!method) return []
|
||||
return listReturnMonthOptions(
|
||||
method.returnMonthsMin,
|
||||
method.returnMonthsMax,
|
||||
method.returnMonthsStep,
|
||||
)
|
||||
}, [method])
|
||||
|
||||
useEffect(() => {
|
||||
if (open && method) {
|
||||
setMounted(true)
|
||||
setClosing(false)
|
||||
setTotalValueInput('')
|
||||
setCreditInput('')
|
||||
const options = listReturnMonthOptions(
|
||||
method.returnMonthsMin,
|
||||
method.returnMonthsMax,
|
||||
method.returnMonthsStep,
|
||||
)
|
||||
setMonths(options[0] ?? method.returnMonthsMin)
|
||||
} else if (mounted) {
|
||||
setClosing(true)
|
||||
const timer = setTimeout(() => {
|
||||
setMounted(false)
|
||||
setClosing(false)
|
||||
}, ANIMATION_MS)
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [open, method, mounted])
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted || closing) return
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose()
|
||||
}
|
||||
document.addEventListener('keydown', onKey)
|
||||
return () => document.removeEventListener('keydown', onKey)
|
||||
}, [mounted, closing, onClose])
|
||||
|
||||
const totalValue = parseIrtInput(totalValueInput)
|
||||
const creditRaw = parseIrtInput(creditInput)
|
||||
|
||||
const plan = useMemo(() => {
|
||||
if (!method || totalValue === null || creditRaw === null) return null
|
||||
const creditAmount = clampCreditAmount(
|
||||
creditRaw,
|
||||
totalValue,
|
||||
method.minAmount,
|
||||
method.maxAmount,
|
||||
)
|
||||
return calculateStoreLoanPlan({
|
||||
totalValue,
|
||||
creditAmount,
|
||||
interestPercent: method.interest,
|
||||
months,
|
||||
})
|
||||
}, [method, totalValue, creditRaw, months])
|
||||
|
||||
const validationMessage = useMemo(() => {
|
||||
if (!method) return ''
|
||||
if (totalValue === null) return ''
|
||||
if (totalValue < method.minShoppingAmount) {
|
||||
return t('store.installments.use.errorMinShopping', {
|
||||
amount: formatMoney(method.minShoppingAmount),
|
||||
})
|
||||
}
|
||||
if (creditRaw === null) return ''
|
||||
if (creditRaw > totalValue) {
|
||||
return t('store.installments.use.errorCreditOverTotal')
|
||||
}
|
||||
if (creditRaw < method.minAmount || creditRaw > method.maxAmount) {
|
||||
return t('store.installments.use.errorCreditRange', {
|
||||
min: formatMoney(method.minAmount),
|
||||
max: formatMoney(method.maxAmount),
|
||||
})
|
||||
}
|
||||
return ''
|
||||
}, [method, totalValue, creditRaw, t])
|
||||
|
||||
if (!mounted || !method) return null
|
||||
|
||||
const primaryName = isFa ? method.nameFa || method.nameEn : method.nameEn || method.nameFa
|
||||
|
||||
function handleTotalChange(raw: string) {
|
||||
const formatted = formatIrtInput(raw)
|
||||
setTotalValueInput(formatted)
|
||||
const nextTotal = parseIrtInput(formatted)
|
||||
if (nextTotal === null || !method) return
|
||||
const suggested = clampCreditAmount(
|
||||
Math.min(nextTotal, method.maxAmount),
|
||||
nextTotal,
|
||||
method.minAmount,
|
||||
method.maxAmount,
|
||||
)
|
||||
if (!creditInput || creditRaw === null) {
|
||||
setCreditInput(formatIrtInput(String(suggested)))
|
||||
} else {
|
||||
const clamped = clampCreditAmount(
|
||||
creditRaw,
|
||||
nextTotal,
|
||||
method.minAmount,
|
||||
method.maxAmount,
|
||||
)
|
||||
setCreditInput(formatIrtInput(String(clamped)))
|
||||
}
|
||||
}
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className={`${styles.overlay} ${closing ? styles.overlayOut : styles.overlayIn}`}
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className={`${styles.modal} ${closing ? styles.modalOut : styles.modalIn}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="store-loan-use-title"
|
||||
lang={isFa ? 'fa' : 'en'}
|
||||
dir={isFa ? 'rtl' : 'ltr'}
|
||||
>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.headerText}>
|
||||
<div className={styles.headerBadge}>
|
||||
<Calculator size={16} />
|
||||
<span>{t('store.installments.use.badge')}</span>
|
||||
</div>
|
||||
<h3 id="store-loan-use-title" className={styles.title}>
|
||||
{primaryName}
|
||||
</h3>
|
||||
<p className={styles.subtitle}>{t('store.installments.use.subtitle')}</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.closeBtn}
|
||||
onClick={onClose}
|
||||
aria-label={t('common.close')}
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={styles.body}>
|
||||
<section className={styles.section}>
|
||||
<h4 className={styles.sectionTitle}>
|
||||
{t('store.installments.use.section.value')}
|
||||
</h4>
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="loan-use-total">
|
||||
{t('store.installments.use.totalValue')}
|
||||
</label>
|
||||
<input
|
||||
id="loan-use-total"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
value={totalValueInput}
|
||||
onChange={(e) => handleTotalChange(e.target.value)}
|
||||
placeholder={t('store.installments.use.totalValuePlaceholder')}
|
||||
/>
|
||||
<p className={styles.hint}>
|
||||
{t('store.installments.use.totalValueHint', {
|
||||
amount: formatMoney(method.minShoppingAmount),
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={styles.section}>
|
||||
<h4 className={styles.sectionTitle}>
|
||||
{t('store.installments.use.section.plan')}
|
||||
</h4>
|
||||
<div className={styles.planGrid}>
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="loan-use-credit">
|
||||
{t('store.installments.use.creditAmount')}
|
||||
</label>
|
||||
<input
|
||||
id="loan-use-credit"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
value={creditInput}
|
||||
onChange={(e) => setCreditInput(formatIrtInput(e.target.value))}
|
||||
placeholder={t('store.installments.use.creditAmountPlaceholder')}
|
||||
disabled={totalValue === null}
|
||||
/>
|
||||
<p className={styles.hint}>
|
||||
{t('store.installments.use.creditAmountHint', {
|
||||
min: formatMoney(method.minAmount),
|
||||
max: formatMoney(method.maxAmount),
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.field}>
|
||||
<div className={styles.sliderHeader}>
|
||||
<label htmlFor="loan-use-months">
|
||||
{t('store.installments.use.months')}
|
||||
</label>
|
||||
<span className={styles.sliderValue}>
|
||||
{t('store.installments.use.monthsOption', { months })}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
id="loan-use-months"
|
||||
className={styles.slider}
|
||||
type="range"
|
||||
min={method.returnMonthsMin}
|
||||
max={method.returnMonthsMax}
|
||||
step={method.returnMonthsStep}
|
||||
value={months}
|
||||
onChange={(e) => setMonths(Number(e.target.value))}
|
||||
disabled={monthOptions.length === 0}
|
||||
/>
|
||||
<div className={styles.sliderMeta}>
|
||||
<span>{method.returnMonthsMin}</span>
|
||||
<span>
|
||||
{t('store.installments.use.monthsHint', {
|
||||
step: method.returnMonthsStep,
|
||||
})}
|
||||
</span>
|
||||
<span>{method.returnMonthsMax}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={styles.section}>
|
||||
<h4 className={styles.sectionTitle}>
|
||||
{t('store.installments.use.section.result')}
|
||||
</h4>
|
||||
|
||||
{validationMessage ? (
|
||||
<div className={styles.warning} role="status">
|
||||
{validationMessage}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{!plan || validationMessage ? (
|
||||
<p className={styles.emptyResult}>
|
||||
{t('store.installments.use.resultEmpty')}
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<div className={styles.summaryGrid}>
|
||||
<div className={styles.summaryCard}>
|
||||
<span className={styles.summaryLabel}>
|
||||
{t('store.installments.use.result.totalValue')}
|
||||
</span>
|
||||
<span className={styles.summaryValue}>
|
||||
{formatMoney(plan.totalValue)}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.summaryCard}>
|
||||
<span className={styles.summaryLabel}>
|
||||
{t('store.installments.use.result.credit')}
|
||||
</span>
|
||||
<span className={styles.summaryValue}>
|
||||
{formatMoney(plan.creditAmount)}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.summaryCard}>
|
||||
<span className={styles.summaryLabel}>
|
||||
{t('store.installments.use.result.cash')}
|
||||
</span>
|
||||
<span className={styles.summaryValue}>
|
||||
{formatMoney(plan.cashPayment)}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.summaryCard}>
|
||||
<span className={styles.summaryLabel}>
|
||||
{t('store.installments.use.result.fees')}
|
||||
</span>
|
||||
<span className={styles.summaryValue}>
|
||||
{formatMoney(plan.interestFee)}
|
||||
</span>
|
||||
</div>
|
||||
<div className={`${styles.summaryCard} ${styles.summaryCardWide}`}>
|
||||
<span className={styles.summaryLabel}>
|
||||
{t('store.installments.use.result.totalRepay')}
|
||||
</span>
|
||||
<span className={styles.summaryValue}>
|
||||
{formatMoney(plan.totalRepay)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.schedule}>
|
||||
<div className={styles.scheduleHead}>
|
||||
<span>{t('store.installments.use.schedule.title')}</span>
|
||||
<span>
|
||||
{t('store.installments.use.schedule.count', {
|
||||
count: plan.installments.length,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.scheduleList}>
|
||||
{plan.installments.map((item) => (
|
||||
<div key={item.index} className={styles.scheduleRow}>
|
||||
<span className={styles.scheduleIndex}>
|
||||
{t('store.installments.use.schedule.item', {
|
||||
index: item.index,
|
||||
})}
|
||||
</span>
|
||||
<span className={styles.scheduleDate}>
|
||||
{formatDate(item.dueDate, locale)}
|
||||
</span>
|
||||
<span className={styles.scheduleAmount}>
|
||||
{formatMoney(item.amount)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)
|
||||
}
|
||||
@@ -32,6 +32,7 @@ const en = {
|
||||
'nav.store.orders': 'My Orders',
|
||||
'nav.store.shipping': 'Shipping Fees',
|
||||
'nav.store.cards': 'Shopping Cards',
|
||||
'nav.store.installments': 'Installments & Facilities',
|
||||
'nav.store.settings': 'Settings',
|
||||
'nav.customers': 'Users',
|
||||
'nav.customerProducts': 'Customer products',
|
||||
@@ -912,8 +913,111 @@ const en = {
|
||||
'store.card.shipping.link': 'Manage shipping',
|
||||
'store.card.cards.desc': 'Manage saved shopping cards and payment methods.',
|
||||
'store.card.cards.link': 'View cards',
|
||||
'store.card.installments.desc':
|
||||
'Define installment and loan facilities available to customers.',
|
||||
'store.card.installments.link': 'Manage installments',
|
||||
'store.card.settings.desc': 'Configure store preferences, pages and themes.',
|
||||
'store.card.settings.link': 'View settings',
|
||||
'store.installments.page.subtitle':
|
||||
'Create loan and installment methods your store can offer customers.',
|
||||
'store.installments.loading': 'Loading installment methods…',
|
||||
'store.installments.empty': 'No installment methods yet. Add your first one.',
|
||||
'store.installments.add': 'Add installment method',
|
||||
'store.installments.errorLoad': 'Failed to load installment methods.',
|
||||
'store.installments.errorDelete': 'Failed to delete installment method.',
|
||||
'store.installments.deleteTitle': 'Delete installment method',
|
||||
'store.installments.deleteMessage':
|
||||
'Are you sure you want to delete "{name}"? This action cannot be undone.',
|
||||
'store.installments.toast.created': 'Installment method created.',
|
||||
'store.installments.toast.updated': 'Installment method updated.',
|
||||
'store.installments.toast.deleted': 'Installment method deleted.',
|
||||
'store.installments.tooltip.edit': 'Edit',
|
||||
'store.installments.tooltip.remove': 'Delete',
|
||||
'store.installments.tooltip.use': 'Use / calculate',
|
||||
'store.installments.row.summary':
|
||||
'Min shopping {minShopping} · Loan {minAmount}–{maxAmount} · Interest {interest}% · {monthsMin}–{monthsMax} months (step {monthsStep})',
|
||||
'store.installments.row.minShopping': 'Min shopping',
|
||||
'store.installments.row.creditAmount': 'Credit amount',
|
||||
'store.installments.row.interest': 'Interest',
|
||||
'store.installments.row.months': 'Return months',
|
||||
'store.installments.row.monthsUnit': 'mo',
|
||||
'store.installments.row.monthsStep': 'Step {step}',
|
||||
'store.installments.use.badge': 'Installment calculator',
|
||||
'store.installments.use.subtitle':
|
||||
'Enter the purchase value, choose credit and term, then review repayments.',
|
||||
'store.installments.use.section.value': '1. Purchase value',
|
||||
'store.installments.use.section.plan': '2. Credit & repayment term',
|
||||
'store.installments.use.section.result': '3. Payment plan',
|
||||
'store.installments.use.totalValue': 'Total value',
|
||||
'store.installments.use.totalValuePlaceholder': 'e.g. 10,000,000',
|
||||
'store.installments.use.totalValueHint': 'Minimum shopping for this method: {amount}',
|
||||
'store.installments.use.creditAmount': 'Credit amount',
|
||||
'store.installments.use.creditAmountPlaceholder': 'Amount financed',
|
||||
'store.installments.use.creditAmountHint': 'Allowed credit: {min} – {max}',
|
||||
'store.installments.use.months': 'Repayment months',
|
||||
'store.installments.use.monthsOption': '{months} months',
|
||||
'store.installments.use.monthsHint': 'Options use step {step}',
|
||||
'store.installments.use.errorMinShopping':
|
||||
'Purchase value must be at least {amount} for this method.',
|
||||
'store.installments.use.errorCreditOverTotal':
|
||||
'Credit cannot be greater than the purchase value.',
|
||||
'store.installments.use.errorCreditRange':
|
||||
'Credit must be between {min} and {max}.',
|
||||
'store.installments.use.resultEmpty':
|
||||
'Enter a valid purchase value and credit to see the payment plan.',
|
||||
'store.installments.use.result.totalValue': 'Total value',
|
||||
'store.installments.use.result.credit': 'Credit value',
|
||||
'store.installments.use.result.cash': 'Cash / down payment',
|
||||
'store.installments.use.result.fees': 'Total interest / fees',
|
||||
'store.installments.use.result.totalRepay': 'Total repayable',
|
||||
'store.installments.use.schedule.title': 'Installment schedule',
|
||||
'store.installments.use.schedule.count': '{count} payments',
|
||||
'store.installments.use.schedule.item': 'Payment {index}',
|
||||
'store.installments.form.add.subtitle':
|
||||
'Define how customers can buy with installments or facilities.',
|
||||
'store.installments.form.edit.subtitle': 'Update this installment method.',
|
||||
'store.installments.form.name': 'Name',
|
||||
'store.installments.form.nameFa': 'Name (FA)',
|
||||
'store.installments.form.nameEn': 'Name (EN)',
|
||||
'store.installments.form.namePlaceholder': 'e.g. 12-month credit',
|
||||
'store.installments.form.nameFaPlaceholder': 'مثلاً اعتبار ۱۲ ماهه',
|
||||
'store.installments.form.nameEnPlaceholder': 'e.g. 12-month credit',
|
||||
'store.installments.form.image': 'Image',
|
||||
'store.installments.form.uploadImage': 'Upload image',
|
||||
'store.installments.form.changeImage': 'Change image',
|
||||
'store.installments.form.cropHint': 'Crop the image, then apply.',
|
||||
'store.installments.form.aspectAria': 'Image aspect ratio',
|
||||
'store.installments.form.minShoppingAmount': 'Min shopping',
|
||||
'store.installments.form.minShoppingAmount.hint':
|
||||
'Cart total must reach this amount before this facility can be used.',
|
||||
'store.installments.form.minAmount': 'Min loan',
|
||||
'store.installments.form.minAmount.hint': 'Smallest loan amount offered with this method.',
|
||||
'store.installments.form.maxAmount': 'Max loan',
|
||||
'store.installments.form.maxAmount.hint': 'Largest loan amount offered with this method.',
|
||||
'store.installments.form.interest': 'Interest %',
|
||||
'store.installments.form.interest.hint': 'Annual interest rate applied to the loan.',
|
||||
'store.installments.form.returnMonthsMin': 'Min months',
|
||||
'store.installments.form.returnMonthsMin.hint': 'Shortest repayment period in months.',
|
||||
'store.installments.form.returnMonthsMax': 'Max months',
|
||||
'store.installments.form.returnMonthsMax.hint': 'Longest repayment period in months.',
|
||||
'store.installments.form.returnMonthsStep': 'Step',
|
||||
'store.installments.form.returnMonthsStep.hint':
|
||||
'Choose 2, 3, 4, 6, or 12 — e.g. 3 → 6 → 9 → 12.',
|
||||
'store.installments.form.description': 'Description',
|
||||
'store.installments.form.descriptionPlaceholder': 'Terms for customers…',
|
||||
'store.installments.form.cancel': 'Cancel',
|
||||
'store.installments.form.save': 'Save',
|
||||
'store.installments.form.update': 'Update',
|
||||
'store.installments.form.saving': 'Saving…',
|
||||
'store.installments.form.errorRequired': 'Please fill in all required fields.',
|
||||
'store.installments.form.errorAmountRange':
|
||||
'Minimum loan amount cannot be greater than maximum.',
|
||||
'store.installments.form.errorMonthsRange':
|
||||
'Minimum return months cannot be greater than maximum.',
|
||||
'store.installments.form.errorMonthsStep': 'Choose a valid month step.',
|
||||
'store.installments.form.errorMonthsStepReach':
|
||||
'Max months must be reachable from min months using the step.',
|
||||
'store.installments.form.errorSave': 'Failed to save installment method.',
|
||||
|
||||
'storeItems.subtitle': 'Products for sale with one or more priced variants.',
|
||||
'storeItems.filters': 'Filters',
|
||||
@@ -2253,6 +2357,9 @@ const en = {
|
||||
'title.storeItems': 'My Store Items',
|
||||
'title.orders': 'My Orders',
|
||||
'title.shoppingCards': 'Shopping Cards',
|
||||
'title.installments': 'Installments & Facilities',
|
||||
'title.addInstallment': 'Add Installment Method',
|
||||
'title.editInstallment': 'Edit Installment Method',
|
||||
'title.customers': 'Users',
|
||||
'title.customerProducts': 'Customer products',
|
||||
'title.content': 'Content',
|
||||
@@ -2691,6 +2798,7 @@ const fa: Record<MessageKey, string> = {
|
||||
'nav.store.orders': 'سفارشهای من',
|
||||
'nav.store.shipping': 'هزینه ارسال',
|
||||
'nav.store.cards': 'کارتهای خرید',
|
||||
'nav.store.installments': 'اقساط و تسهیلات',
|
||||
'nav.store.settings': 'تنظیمات',
|
||||
'nav.customers': 'کاربران',
|
||||
'nav.customerProducts': 'محصولات مشتریان',
|
||||
@@ -2934,26 +3042,26 @@ const fa: Record<MessageKey, string> = {
|
||||
'home.chart.blogViews.legend': 'بازدید ({count})',
|
||||
'home.chart.blogViews.loading': 'در حال بارگذاری نمودار...',
|
||||
'home.chart.blogViews.error': 'بارگذاری بازدید مقالات ممکن نشد.',
|
||||
'home.chart.blogViews.bar': '{day}: {count} بازدید',
|
||||
'home.chart.blogViews.bar': 'تعداد بازدید در {day} {count} بار',
|
||||
'home.chart.productViews.title': 'بازدید محصولات',
|
||||
'home.chart.productViews.subtitle':
|
||||
'بازدید صفحات محصول و محصولات کاربران در ۳۰ روز گذشته از {from} تا {to}',
|
||||
'home.chart.productViews.legend': 'بازدید ({count})',
|
||||
'home.chart.productViews.loading': 'در حال بارگذاری نمودار...',
|
||||
'home.chart.productViews.error': 'بارگذاری بازدید محصولات ممکن نشد.',
|
||||
'home.chart.productViews.bar': '{day}: {count} بازدید',
|
||||
'home.chart.productViews.bar': 'تعداد بازدید در {day} {count} بار',
|
||||
'home.chart.websiteViews.title': 'بازدید وبسایت',
|
||||
'home.chart.websiteViews.subtitle': 'بازدید صفحات فروشگاه در ۳۰ روز گذشته از {from} تا {to}',
|
||||
'home.chart.websiteViews.legend': 'بازدید ({count})',
|
||||
'home.chart.websiteViews.loading': 'در حال بارگذاری نمودار...',
|
||||
'home.chart.websiteViews.error': 'بارگذاری بازدید وبسایت ممکن نشد.',
|
||||
'home.chart.websiteViews.bar': '{day}: {count} بازدید',
|
||||
'home.chart.websiteViews.bar': 'تعداد بازدید در {day} {count} بار',
|
||||
'home.chart.portfolioViews.title': 'بازدید نمونهکارها',
|
||||
'home.chart.portfolioViews.subtitle': 'بازدید صفحات نمونهکار در ۳۰ روز گذشته از {from} تا {to}',
|
||||
'home.chart.portfolioViews.legend': 'بازدید ({count})',
|
||||
'home.chart.portfolioViews.loading': 'در حال بارگذاری نمودار...',
|
||||
'home.chart.portfolioViews.error': 'بارگذاری بازدید نمونهکارها ممکن نشد.',
|
||||
'home.chart.portfolioViews.bar': '{day}: {count} بازدید',
|
||||
'home.chart.portfolioViews.bar': 'تعداد بازدید در {day} {count} بار',
|
||||
|
||||
'statistics.page.subtitle': 'بازدید وبسایت و فعالیت فروشگاه شما.',
|
||||
'statistics.errorLoad': 'بارگذاری آمار بازدید ممکن نشد.',
|
||||
@@ -3566,8 +3674,111 @@ const fa: Record<MessageKey, string> = {
|
||||
'store.card.shipping.link': 'مدیریت ارسال',
|
||||
'store.card.cards.desc': 'کارتهای خرید ذخیرهشده و روشهای پرداخت را مدیریت کنید.',
|
||||
'store.card.cards.link': 'مشاهده کارتها',
|
||||
'store.card.installments.desc':
|
||||
'روشهای اقساط و تسهیلات قابل ارائه به مشتریان را تعریف کنید.',
|
||||
'store.card.installments.link': 'مدیریت اقساط',
|
||||
'store.card.settings.desc': 'ترجیحات، صفحات و ظاهر فروشگاه را پیکربندی کنید.',
|
||||
'store.card.settings.link': 'مشاهده تنظیمات',
|
||||
'store.installments.page.subtitle':
|
||||
'روشهای وام و اقساطی که فروشگاه به مشتریان ارائه میدهد را بسازید.',
|
||||
'store.installments.loading': 'در حال بارگذاری روشهای اقساط…',
|
||||
'store.installments.empty': 'هنوز روش اقساطی تعریف نشده. اولین مورد را اضافه کنید.',
|
||||
'store.installments.add': 'افزودن روش اقساط',
|
||||
'store.installments.errorLoad': 'بارگذاری روشهای اقساط ناموفق بود.',
|
||||
'store.installments.errorDelete': 'حذف روش اقساط ناموفق بود.',
|
||||
'store.installments.deleteTitle': 'حذف روش اقساط',
|
||||
'store.installments.deleteMessage':
|
||||
'آیا از حذف «{name}» مطمئن هستید؟ این عمل قابل بازگشت نیست.',
|
||||
'store.installments.toast.created': 'روش اقساط ایجاد شد.',
|
||||
'store.installments.toast.updated': 'روش اقساط بهروزرسانی شد.',
|
||||
'store.installments.toast.deleted': 'روش اقساط حذف شد.',
|
||||
'store.installments.tooltip.edit': 'ویرایش',
|
||||
'store.installments.tooltip.remove': 'حذف',
|
||||
'store.installments.tooltip.use': 'استفاده / محاسبه',
|
||||
'store.installments.row.summary':
|
||||
'حداقل خرید {minShopping} · وام {minAmount}–{maxAmount} · سود {interest}٪ · {monthsMin}–{monthsMax} ماه (گام {monthsStep})',
|
||||
'store.installments.row.minShopping': 'حداقل خرید',
|
||||
'store.installments.row.creditAmount': 'مبلغ اعتبار',
|
||||
'store.installments.row.interest': 'سود',
|
||||
'store.installments.row.months': 'بازپرداخت',
|
||||
'store.installments.row.monthsUnit': 'ماه',
|
||||
'store.installments.row.monthsStep': 'گام {step}',
|
||||
'store.installments.use.badge': 'ماشینحساب اقساط',
|
||||
'store.installments.use.subtitle':
|
||||
'مبلغ خرید را وارد کنید، اعتبار و مدت را انتخاب کنید و برنامه بازپرداخت را ببینید.',
|
||||
'store.installments.use.section.value': '۱. مبلغ خرید',
|
||||
'store.installments.use.section.plan': '۲. اعتبار و مدت بازپرداخت',
|
||||
'store.installments.use.section.result': '۳. برنامه پرداخت',
|
||||
'store.installments.use.totalValue': 'مبلغ کل',
|
||||
'store.installments.use.totalValuePlaceholder': 'مثلاً ۱۰,۰۰۰,۰۰۰',
|
||||
'store.installments.use.totalValueHint': 'حداقل خرید این روش: {amount}',
|
||||
'store.installments.use.creditAmount': 'مبلغ اعتبار',
|
||||
'store.installments.use.creditAmountPlaceholder': 'مبلغ تأمینشده از اعتبار',
|
||||
'store.installments.use.creditAmountHint': 'بازه مجاز اعتبار: {min} – {max}',
|
||||
'store.installments.use.months': 'مدت بازپرداخت',
|
||||
'store.installments.use.monthsOption': '{months} ماه',
|
||||
'store.installments.use.monthsHint': 'گزینهها با گام {step}',
|
||||
'store.installments.use.errorMinShopping':
|
||||
'مبلغ خرید باید حداقل {amount} باشد.',
|
||||
'store.installments.use.errorCreditOverTotal':
|
||||
'مبلغ اعتبار نمیتواند بیشتر از مبلغ خرید باشد.',
|
||||
'store.installments.use.errorCreditRange':
|
||||
'مبلغ اعتبار باید بین {min} و {max} باشد.',
|
||||
'store.installments.use.resultEmpty':
|
||||
'برای دیدن برنامه پرداخت، مبلغ خرید و اعتبار معتبر وارد کنید.',
|
||||
'store.installments.use.result.totalValue': 'مبلغ کل',
|
||||
'store.installments.use.result.credit': 'مبلغ اعتبار',
|
||||
'store.installments.use.result.cash': 'پرداخت نقدی / پیشپرداخت',
|
||||
'store.installments.use.result.fees': 'جمع سود / کارمزد',
|
||||
'store.installments.use.result.totalRepay': 'جمع بازپرداخت اقساط',
|
||||
'store.installments.use.schedule.title': 'جدول اقساط',
|
||||
'store.installments.use.schedule.count': '{count} قسط',
|
||||
'store.installments.use.schedule.item': 'قسط {index}',
|
||||
'store.installments.form.add.subtitle':
|
||||
'نحوه خرید اقساطی یا تسهیلاتی مشتریان را تعریف کنید.',
|
||||
'store.installments.form.edit.subtitle': 'این روش اقساط را ویرایش کنید.',
|
||||
'store.installments.form.name': 'نام',
|
||||
'store.installments.form.nameFa': 'نام فارسی',
|
||||
'store.installments.form.nameEn': 'نام انگلیسی',
|
||||
'store.installments.form.namePlaceholder': 'مثلاً اعتبار ۱۲ ماهه',
|
||||
'store.installments.form.nameFaPlaceholder': 'مثلاً اعتبار ۱۲ ماهه',
|
||||
'store.installments.form.nameEnPlaceholder': 'e.g. 12-month credit',
|
||||
'store.installments.form.image': 'تصویر',
|
||||
'store.installments.form.uploadImage': 'آپلود تصویر',
|
||||
'store.installments.form.changeImage': 'تغییر تصویر',
|
||||
'store.installments.form.cropHint': 'تصویر را برش دهید و اعمال کنید.',
|
||||
'store.installments.form.aspectAria': 'نسبت تصویر',
|
||||
'store.installments.form.minShoppingAmount': 'حداقل خرید',
|
||||
'store.installments.form.minShoppingAmount.hint':
|
||||
'حداقل مبلغ سبد خرید برای فعالشدن این تسهیلات.',
|
||||
'store.installments.form.minAmount': 'حداقل وام',
|
||||
'store.installments.form.minAmount.hint': 'کمترین مبلغ وامی که با این روش ارائه میشود.',
|
||||
'store.installments.form.maxAmount': 'حداکثر وام',
|
||||
'store.installments.form.maxAmount.hint': 'بیشترین مبلغ وامی که با این روش ارائه میشود.',
|
||||
'store.installments.form.interest': 'سود ٪',
|
||||
'store.installments.form.interest.hint': 'نرخ سود سالانه اعمالشده روی مبلغ وام.',
|
||||
'store.installments.form.returnMonthsMin': 'حداقل ماه',
|
||||
'store.installments.form.returnMonthsMin.hint': 'کوتاهترین دوره بازپرداخت به ماه.',
|
||||
'store.installments.form.returnMonthsMax': 'حداکثر ماه',
|
||||
'store.installments.form.returnMonthsMax.hint': 'بلندترین دوره بازپرداخت به ماه.',
|
||||
'store.installments.form.returnMonthsStep': 'گام',
|
||||
'store.installments.form.returnMonthsStep.hint':
|
||||
'یکی از ۲، ۳، ۴، ۶ یا ۱۲ — مثلاً ۳ ← ۶ ← ۹ ← ۱۲.',
|
||||
'store.installments.form.description': 'توضیحات',
|
||||
'store.installments.form.descriptionPlaceholder': 'شرایط برای مشتریان…',
|
||||
'store.installments.form.cancel': 'انصراف',
|
||||
'store.installments.form.save': 'ذخیره',
|
||||
'store.installments.form.update': 'بهروزرسانی',
|
||||
'store.installments.form.saving': 'در حال ذخیره…',
|
||||
'store.installments.form.errorRequired': 'لطفاً همه فیلدهای الزامی را پر کنید.',
|
||||
'store.installments.form.errorAmountRange':
|
||||
'حداقل مبلغ وام نمیتواند بیشتر از حداکثر باشد.',
|
||||
'store.installments.form.errorMonthsRange':
|
||||
'حداقل ماه بازپرداخت نمیتواند بیشتر از حداکثر باشد.',
|
||||
'store.installments.form.errorMonthsStep': 'یک گام ماه معتبر انتخاب کنید.',
|
||||
'store.installments.form.errorMonthsStepReach':
|
||||
'حداکثر ماه باید با گام از حداقل ماه قابل دستیابی باشد.',
|
||||
'store.installments.form.errorSave': 'ذخیره روش اقساط ناموفق بود.',
|
||||
|
||||
'storeItems.subtitle': 'محصولات فروش با یک یا چند تنوع قیمتگذاریشده.',
|
||||
'storeItems.filters': 'فیلترها',
|
||||
@@ -4909,6 +5120,9 @@ const fa: Record<MessageKey, string> = {
|
||||
'title.storeItems': 'محصولات فروشگاه',
|
||||
'title.orders': 'سفارشهای من',
|
||||
'title.shoppingCards': 'کارتهای خرید',
|
||||
'title.installments': 'اقساط و تسهیلات',
|
||||
'title.addInstallment': 'افزودن روش اقساط',
|
||||
'title.editInstallment': 'ویرایش روش اقساط',
|
||||
'title.customers': 'کاربران',
|
||||
'title.customerProducts': 'محصولات مشتریان',
|
||||
'title.content': 'مدیریت محتوا',
|
||||
@@ -5341,6 +5555,9 @@ const BREADCRUMB_LABEL_KEYS: Record<string, MessageKey> = {
|
||||
'My Orders': 'nav.store.orders',
|
||||
'Shipping Fees': 'nav.store.shipping',
|
||||
'Shopping Cards': 'nav.store.cards',
|
||||
'Installments & Facilities': 'nav.store.installments',
|
||||
'Add Installment Method': 'title.addInstallment',
|
||||
'Edit Installment Method': 'title.editInstallment',
|
||||
Customers: 'nav.customers',
|
||||
'Customer products': 'nav.customerProducts',
|
||||
Blog: 'nav.blog',
|
||||
@@ -5426,6 +5643,15 @@ export function getBusinessRouteTitleRules(locale: DashboardLocale): RouteTitleR
|
||||
{ match: '/store/items', labels: [t('title.store'), t('title.storeItems')] },
|
||||
{ match: '/store/orders', labels: [t('title.store'), t('title.orders')] },
|
||||
{ match: '/store/cards', labels: [t('title.store'), t('title.shoppingCards')] },
|
||||
{
|
||||
match: '/store/installments/new',
|
||||
labels: [t('title.store'), t('title.installments'), t('title.addInstallment')],
|
||||
},
|
||||
{
|
||||
match: /^\/store\/installments\/edit\/[^/]+$/,
|
||||
labels: [t('title.store'), t('title.installments'), t('title.editInstallment')],
|
||||
},
|
||||
{ match: '/store/installments', labels: [t('title.store'), t('title.installments')] },
|
||||
{ match: '/store/settings', labels: [t('title.store'), t('title.settings')] },
|
||||
{ match: '/store', labels: [t('title.store')] },
|
||||
{ match: '/customers', labels: [t('title.customers')] },
|
||||
|
||||
@@ -773,6 +773,7 @@ export function AddCustomerProductPage() {
|
||||
}}
|
||||
aspect={1}
|
||||
minZoom={0.4}
|
||||
outputFormat="jpeg"
|
||||
hint={t('customerProducts.form.images.thumbnailHint')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
.col2 { grid-column: span 2; }
|
||||
.col3 { grid-column: span 3; }
|
||||
.col4 { grid-column: span 4; }
|
||||
.col5 { grid-column: span 5; }
|
||||
.col6 { grid-column: 1 / span 6; }
|
||||
.col8 { grid-column: span 8; }
|
||||
.col7 { grid-column: span 7; }
|
||||
@@ -437,6 +438,7 @@
|
||||
.col2,
|
||||
.col3,
|
||||
.col4,
|
||||
.col5,
|
||||
.col6,
|
||||
.col6Span,
|
||||
.col7,
|
||||
|
||||
@@ -285,7 +285,12 @@ export function AddNewProductPage() {
|
||||
<div className={styles.formGrid}>
|
||||
<div className={`${styles.field} ${styles.col2} ${styles.thumbnailField}`}>
|
||||
<label>{t('products.form.thumbnail')}</label>
|
||||
<ImageCropper value={thumbnail} onChange={setThumbnail} minZoom={0.4} />
|
||||
<ImageCropper
|
||||
value={thumbnail}
|
||||
onChange={setThumbnail}
|
||||
minZoom={0.4}
|
||||
outputFormat="jpeg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.col10}>
|
||||
|
||||
@@ -0,0 +1,201 @@
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
|
||||
gap: 16px 20px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
gap: 10px 12px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.field label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.field input,
|
||||
.field select,
|
||||
.field textarea {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: var(--field-height, 40px);
|
||||
padding: 0 10px;
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
background: var(--surface);
|
||||
border: 1px solid rgba(148, 163, 184, 0.28);
|
||||
border-radius: var(--radius-sm);
|
||||
outline: none;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.field select {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
|
||||
linear-gradient(135deg, currentColor 50%, transparent 50%);
|
||||
background-position:
|
||||
calc(100% - 16px) calc(50% - 2px),
|
||||
calc(100% - 11px) calc(50% - 2px);
|
||||
background-size: 5px 5px, 5px 5px;
|
||||
background-repeat: no-repeat;
|
||||
padding-inline-end: 28px;
|
||||
}
|
||||
|
||||
:global([dir='rtl']) .field select {
|
||||
background-position:
|
||||
11px calc(50% - 2px),
|
||||
16px calc(50% - 2px);
|
||||
}
|
||||
|
||||
.field textarea {
|
||||
height: auto;
|
||||
min-height: 84px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
resize: vertical;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.field input:focus,
|
||||
.field select:focus,
|
||||
.field textarea:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
|
||||
}
|
||||
|
||||
.field input:disabled,
|
||||
.field select:disabled,
|
||||
.field textarea:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
line-height: 1.35;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nameFa,
|
||||
.nameEn {
|
||||
grid-column: span 6;
|
||||
}
|
||||
|
||||
.descriptionFull {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.minShopping,
|
||||
.interest {
|
||||
grid-column: span 4;
|
||||
}
|
||||
|
||||
.loanGroup,
|
||||
.monthsGroup {
|
||||
grid-column: span 8;
|
||||
}
|
||||
|
||||
.group {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px 10px;
|
||||
min-width: 0;
|
||||
padding-inline: 10px;
|
||||
border-inline-start: 1px solid rgba(148, 163, 184, 0.35);
|
||||
border-inline-end: 1px solid rgba(148, 163, 184, 0.35);
|
||||
}
|
||||
|
||||
.monthsGroup {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.imageCol {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.imageCol > label {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.imageCol {
|
||||
max-width: 220px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.row {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.nameFa,
|
||||
.nameEn,
|
||||
.minShopping,
|
||||
.loanGroup,
|
||||
.interest,
|
||||
.monthsGroup,
|
||||
.descriptionFull {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
.loanGroup,
|
||||
.monthsGroup,
|
||||
.descriptionFull {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.nameFa,
|
||||
.nameEn,
|
||||
.minShopping,
|
||||
.loanGroup,
|
||||
.interest,
|
||||
.monthsGroup,
|
||||
.descriptionFull {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.group {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,505 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom'
|
||||
import { ImageCropper } from '../components/ImageCropper'
|
||||
import { Breadcrumbs } from '../components/Breadcrumbs'
|
||||
import { useToast } from '../context/ToastContext'
|
||||
import { useT } from '../i18n/useT'
|
||||
import { ApiError } from '../lib/api'
|
||||
import { resolveDataUrlToMediaId } from '../services/mediaService'
|
||||
import {
|
||||
createStoreLoanMethod,
|
||||
getStoreLoanMethod,
|
||||
mapStoreLoanMethodApiToUi,
|
||||
updateStoreLoanMethod,
|
||||
} from '../services/storeLoanMethodService'
|
||||
import type { StoreLoanImageAspect } from '../types/storeLoanMethod'
|
||||
import { formatIrtInput, parseIrtInput } from '../utils/irtPrice'
|
||||
import pageStyles from '../components/PageContent.module.css'
|
||||
import formStyles from './AddNewProductPage.module.css'
|
||||
import styles from './AddStoreInstallmentPage.module.css'
|
||||
|
||||
const IMAGE_ASPECTS: { id: StoreLoanImageAspect; aspect: number }[] = [
|
||||
{ id: '1:1', aspect: 1 },
|
||||
{ id: '3:2', aspect: 3 / 2 },
|
||||
]
|
||||
|
||||
const MONTH_STEP_OPTIONS = [2, 3, 4, 6, 12] as const
|
||||
const DEFAULT_MONTH_STEP = '3'
|
||||
|
||||
function normalizeMonthStep(value: number | string | null | undefined): string {
|
||||
const parsed = Number(value)
|
||||
return (MONTH_STEP_OPTIONS as readonly number[]).includes(parsed)
|
||||
? String(parsed)
|
||||
: DEFAULT_MONTH_STEP
|
||||
}
|
||||
|
||||
function parseNumberInput(value: string): number | null {
|
||||
const trimmed = value.trim().replace(/,/g, '')
|
||||
if (!trimmed) return null
|
||||
const parsed = Number(trimmed)
|
||||
return Number.isFinite(parsed) ? parsed : null
|
||||
}
|
||||
|
||||
function mediaFilenameFromDataUrl(value: string | null): string {
|
||||
if (value?.startsWith('data:image/png')) return 'store-loan-method.png'
|
||||
return 'store-loan-method.jpg'
|
||||
}
|
||||
|
||||
export function AddStoreInstallmentPage() {
|
||||
const { id } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const { showToast } = useToast()
|
||||
const t = useT()
|
||||
const isEdit = Boolean(id)
|
||||
|
||||
const [nameFa, setNameFa] = useState('')
|
||||
const [nameEn, setNameEn] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const [image, setImage] = useState<string | null>(null)
|
||||
const [imageMediaId, setImageMediaId] = useState<string | null>(null)
|
||||
const [imageAspect, setImageAspect] = useState<StoreLoanImageAspect>('1:1')
|
||||
const [minShoppingAmount, setMinShoppingAmount] = useState('')
|
||||
const [minAmount, setMinAmount] = useState('')
|
||||
const [maxAmount, setMaxAmount] = useState('')
|
||||
const [interest, setInterest] = useState('')
|
||||
const [returnMonthsMin, setReturnMonthsMin] = useState('')
|
||||
const [returnMonthsMax, setReturnMonthsMax] = useState('')
|
||||
const [returnMonthsStep, setReturnMonthsStep] = useState(DEFAULT_MONTH_STEP)
|
||||
const [loaded, setLoaded] = useState(!isEdit)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const selectedAspect =
|
||||
IMAGE_ASPECTS.find((option) => option.id === imageAspect)?.aspect ?? 1
|
||||
|
||||
useEffect(() => {
|
||||
if (!isEdit || !id) return
|
||||
|
||||
const controller = new AbortController()
|
||||
|
||||
async function loadMethod() {
|
||||
setError('')
|
||||
try {
|
||||
const data = await getStoreLoanMethod(id!, controller.signal)
|
||||
const method = mapStoreLoanMethodApiToUi(data.method)
|
||||
setNameFa(method.nameFa)
|
||||
setNameEn(method.nameEn)
|
||||
setDescription(method.description)
|
||||
setImage(method.imageUrl)
|
||||
setImageMediaId(method.imageMediaId)
|
||||
setImageAspect(method.imageAspectRatio)
|
||||
setMinShoppingAmount(
|
||||
method.minShoppingAmount != null
|
||||
? formatIrtInput(String(Math.round(method.minShoppingAmount)))
|
||||
: '',
|
||||
)
|
||||
setMinAmount(
|
||||
method.minAmount != null
|
||||
? formatIrtInput(String(Math.round(method.minAmount)))
|
||||
: '',
|
||||
)
|
||||
setMaxAmount(
|
||||
method.maxAmount != null
|
||||
? formatIrtInput(String(Math.round(method.maxAmount)))
|
||||
: '',
|
||||
)
|
||||
setInterest(String(method.interest))
|
||||
setReturnMonthsMin(String(method.returnMonthsMin))
|
||||
setReturnMonthsMax(String(method.returnMonthsMax))
|
||||
setReturnMonthsStep(normalizeMonthStep(method.returnMonthsStep))
|
||||
setLoaded(true)
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return
|
||||
navigate('/store/installments', { replace: true })
|
||||
}
|
||||
}
|
||||
|
||||
void loadMethod()
|
||||
return () => controller.abort()
|
||||
}, [isEdit, id, navigate])
|
||||
|
||||
if (!loaded) return null
|
||||
|
||||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
setError('')
|
||||
|
||||
const parsedMinShopping = parseIrtInput(minShoppingAmount)
|
||||
const parsedMinAmount = parseIrtInput(minAmount)
|
||||
const parsedMaxAmount = parseIrtInput(maxAmount)
|
||||
const parsedInterest = parseNumberInput(interest)
|
||||
const parsedMonthsMin = parseNumberInput(returnMonthsMin)
|
||||
const parsedMonthsMax = parseNumberInput(returnMonthsMax)
|
||||
const parsedMonthsStep = parseNumberInput(returnMonthsStep)
|
||||
|
||||
if (
|
||||
!nameFa.trim() ||
|
||||
!nameEn.trim() ||
|
||||
parsedMinShopping === null ||
|
||||
parsedMinAmount === null ||
|
||||
parsedMaxAmount === null ||
|
||||
parsedInterest === null ||
|
||||
parsedMonthsMin === null ||
|
||||
parsedMonthsMax === null ||
|
||||
parsedMonthsStep === null
|
||||
) {
|
||||
setError(t('store.installments.form.errorRequired'))
|
||||
setIsSubmitting(false)
|
||||
return
|
||||
}
|
||||
|
||||
if (parsedMinAmount > parsedMaxAmount) {
|
||||
setError(t('store.installments.form.errorAmountRange'))
|
||||
setIsSubmitting(false)
|
||||
return
|
||||
}
|
||||
|
||||
if (parsedMonthsMin > parsedMonthsMax) {
|
||||
setError(t('store.installments.form.errorMonthsRange'))
|
||||
setIsSubmitting(false)
|
||||
return
|
||||
}
|
||||
|
||||
if (!(MONTH_STEP_OPTIONS as readonly number[]).includes(parsedMonthsStep)) {
|
||||
setError(t('store.installments.form.errorMonthsStep'))
|
||||
setIsSubmitting(false)
|
||||
return
|
||||
}
|
||||
|
||||
if ((parsedMonthsMax - parsedMonthsMin) % parsedMonthsStep !== 0) {
|
||||
setError(t('store.installments.form.errorMonthsStepReach'))
|
||||
setIsSubmitting(false)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const nextImageMediaId = await resolveDataUrlToMediaId(
|
||||
image,
|
||||
mediaFilenameFromDataUrl(image),
|
||||
imageMediaId,
|
||||
)
|
||||
|
||||
const payload = {
|
||||
nameFa: nameFa.trim(),
|
||||
nameEn: nameEn.trim(),
|
||||
description: description.trim() || null,
|
||||
imageAspectRatio: imageAspect,
|
||||
minShoppingAmount: parsedMinShopping,
|
||||
minAmount: parsedMinAmount,
|
||||
maxAmount: parsedMaxAmount,
|
||||
interest: parsedInterest,
|
||||
returnMonthsMin: Math.round(parsedMonthsMin),
|
||||
returnMonthsMax: Math.round(parsedMonthsMax),
|
||||
returnMonthsStep: Math.round(parsedMonthsStep),
|
||||
...(isEdit
|
||||
? { imageMediaId: nextImageMediaId }
|
||||
: nextImageMediaId
|
||||
? { imageMediaId: nextImageMediaId }
|
||||
: {}),
|
||||
}
|
||||
|
||||
if (isEdit && id) {
|
||||
await updateStoreLoanMethod(id, payload)
|
||||
showToast(t('store.installments.toast.updated'), 'success')
|
||||
} else {
|
||||
await createStoreLoanMethod({
|
||||
...payload,
|
||||
description: description.trim() || undefined,
|
||||
})
|
||||
showToast(t('store.installments.toast.created'), 'success')
|
||||
}
|
||||
|
||||
navigate('/store/installments')
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError) {
|
||||
setError(err.message)
|
||||
} else if (err instanceof Error) {
|
||||
setError(err.message)
|
||||
} else {
|
||||
setError(t('store.installments.form.errorSave'))
|
||||
}
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<main className={pageStyles.content}>
|
||||
<Breadcrumbs
|
||||
items={
|
||||
isEdit
|
||||
? [
|
||||
{ label: 'Dashboard', href: '/' },
|
||||
{ label: 'Store', href: '/store' },
|
||||
{ label: 'Installments & Facilities', href: '/store/installments' },
|
||||
{ label: 'Edit Installment Method' },
|
||||
]
|
||||
: [
|
||||
{ label: 'Dashboard', href: '/' },
|
||||
{ label: 'Store', href: '/store' },
|
||||
{ label: 'Installments & Facilities', href: '/store/installments' },
|
||||
{ label: 'Add Installment Method' },
|
||||
]
|
||||
}
|
||||
/>
|
||||
<div className={pageStyles.pageHeader}>
|
||||
<div>
|
||||
<h2 className={pageStyles.pageTitle}>
|
||||
{isEdit
|
||||
? t('title.editInstallment')
|
||||
: t('title.addInstallment')}
|
||||
</h2>
|
||||
<p className={pageStyles.pageSubtitle}>
|
||||
{isEdit
|
||||
? t('store.installments.form.edit.subtitle')
|
||||
: t('store.installments.form.add.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className={formStyles.error} role="alert">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form className={formStyles.form} onSubmit={handleSubmit}>
|
||||
<div className={styles.layout}>
|
||||
<div className={styles.imageCol}>
|
||||
<label>{t('store.installments.form.image')}</label>
|
||||
<ImageCropper
|
||||
value={image}
|
||||
onChange={setImage}
|
||||
aspect={selectedAspect}
|
||||
compact
|
||||
uploadLabel={t('store.installments.form.uploadImage')}
|
||||
hint={t('store.installments.form.cropHint')}
|
||||
changeLabel={t('store.installments.form.changeImage')}
|
||||
/>
|
||||
<div
|
||||
className={formStyles.aspectSwitch}
|
||||
role="radiogroup"
|
||||
aria-label={t('store.installments.form.aspectAria')}
|
||||
>
|
||||
{IMAGE_ASPECTS.map((option) => (
|
||||
<button
|
||||
key={option.id}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={imageAspect === option.id}
|
||||
className={`${formStyles.aspectSwitchBtn} ${
|
||||
imageAspect === option.id ? formStyles.aspectSwitchBtnSelected : ''
|
||||
}`}
|
||||
onClick={() => {
|
||||
if (option.id === imageAspect) return
|
||||
setImageAspect(option.id)
|
||||
if (image) {
|
||||
setImage(null)
|
||||
setImageMediaId(null)
|
||||
}
|
||||
}}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{option.id}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.fields}>
|
||||
<div className={styles.row}>
|
||||
<div className={`${styles.field} ${styles.nameFa}`}>
|
||||
<label htmlFor="loan-name-fa">{t('store.installments.form.nameFa')}</label>
|
||||
<input
|
||||
id="loan-name-fa"
|
||||
type="text"
|
||||
value={nameFa}
|
||||
onChange={(e) => setNameFa(e.target.value)}
|
||||
placeholder={t('store.installments.form.nameFaPlaceholder')}
|
||||
required
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`${styles.field} ${styles.nameEn}`}>
|
||||
<label htmlFor="loan-name-en">{t('store.installments.form.nameEn')}</label>
|
||||
<input
|
||||
id="loan-name-en"
|
||||
type="text"
|
||||
value={nameEn}
|
||||
onChange={(e) => setNameEn(e.target.value)}
|
||||
placeholder={t('store.installments.form.nameEnPlaceholder')}
|
||||
required
|
||||
disabled={isSubmitting}
|
||||
dir="ltr"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.row}>
|
||||
<div className={`${styles.field} ${styles.descriptionFull}`}>
|
||||
<label htmlFor="loan-description">
|
||||
{t('store.installments.form.description')}
|
||||
</label>
|
||||
<textarea
|
||||
id="loan-description"
|
||||
rows={3}
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder={t('store.installments.form.descriptionPlaceholder')}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.row}>
|
||||
<div className={`${styles.field} ${styles.minShopping}`}>
|
||||
<label htmlFor="loan-min-shopping">
|
||||
{t('store.installments.form.minShoppingAmount')}
|
||||
</label>
|
||||
<input
|
||||
id="loan-min-shopping"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
value={minShoppingAmount}
|
||||
onChange={(e) => setMinShoppingAmount(formatIrtInput(e.target.value))}
|
||||
required
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<p className={styles.hint}>
|
||||
{t('store.installments.form.minShoppingAmount.hint')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={`${styles.group} ${styles.loanGroup}`}>
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="loan-min-amount">
|
||||
{t('store.installments.form.minAmount')}
|
||||
</label>
|
||||
<input
|
||||
id="loan-min-amount"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
value={minAmount}
|
||||
onChange={(e) => setMinAmount(formatIrtInput(e.target.value))}
|
||||
required
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<p className={styles.hint}>{t('store.installments.form.minAmount.hint')}</p>
|
||||
</div>
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="loan-max-amount">
|
||||
{t('store.installments.form.maxAmount')}
|
||||
</label>
|
||||
<input
|
||||
id="loan-max-amount"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
value={maxAmount}
|
||||
onChange={(e) => setMaxAmount(formatIrtInput(e.target.value))}
|
||||
required
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<p className={styles.hint}>{t('store.installments.form.maxAmount.hint')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.row}>
|
||||
<div className={`${styles.field} ${styles.interest}`}>
|
||||
<label htmlFor="loan-interest">
|
||||
{t('store.installments.form.interest')}
|
||||
</label>
|
||||
<input
|
||||
id="loan-interest"
|
||||
type="number"
|
||||
min={0}
|
||||
step="any"
|
||||
value={interest}
|
||||
onChange={(e) => setInterest(e.target.value)}
|
||||
required
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<p className={styles.hint}>{t('store.installments.form.interest.hint')}</p>
|
||||
</div>
|
||||
|
||||
<div className={`${styles.group} ${styles.monthsGroup}`}>
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="loan-months-min">
|
||||
{t('store.installments.form.returnMonthsMin')}
|
||||
</label>
|
||||
<input
|
||||
id="loan-months-min"
|
||||
type="number"
|
||||
min={1}
|
||||
step={1}
|
||||
value={returnMonthsMin}
|
||||
onChange={(e) => setReturnMonthsMin(e.target.value)}
|
||||
required
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<p className={styles.hint}>
|
||||
{t('store.installments.form.returnMonthsMin.hint')}
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="loan-months-max">
|
||||
{t('store.installments.form.returnMonthsMax')}
|
||||
</label>
|
||||
<input
|
||||
id="loan-months-max"
|
||||
type="number"
|
||||
min={1}
|
||||
step={1}
|
||||
value={returnMonthsMax}
|
||||
onChange={(e) => setReturnMonthsMax(e.target.value)}
|
||||
required
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<p className={styles.hint}>
|
||||
{t('store.installments.form.returnMonthsMax.hint')}
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="loan-months-step">
|
||||
{t('store.installments.form.returnMonthsStep')}
|
||||
</label>
|
||||
<select
|
||||
id="loan-months-step"
|
||||
value={returnMonthsStep}
|
||||
onChange={(e) => setReturnMonthsStep(e.target.value)}
|
||||
required
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{MONTH_STEP_OPTIONS.map((step) => (
|
||||
<option key={step} value={step}>
|
||||
{step}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<p className={styles.hint}>
|
||||
{t('store.installments.form.returnMonthsStep.hint')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={formStyles.actions}>
|
||||
<Link to="/store/installments" className={formStyles.cancelBtn}>
|
||||
{t('store.installments.form.cancel')}
|
||||
</Link>
|
||||
<button type="submit" className={formStyles.submitBtn} disabled={isSubmitting}>
|
||||
{isSubmitting
|
||||
? t('store.installments.form.saving')
|
||||
: isEdit
|
||||
? t('store.installments.form.update')
|
||||
: t('store.installments.form.save')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,164 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { HandCoins, Plus } from 'lucide-react'
|
||||
import { Breadcrumbs } from '../components/Breadcrumbs'
|
||||
import { EmptyState } from '../components/EmptyState'
|
||||
import { PageTitle } from '../components/PageTitle'
|
||||
import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
|
||||
import { StoreLoanMethodRow } from '../components/StoreLoanMethodRow'
|
||||
import { StoreLoanUseModal } from '../components/StoreLoanUseModal'
|
||||
import { useToast } from '../context/ToastContext'
|
||||
import { useT } from '../i18n/useT'
|
||||
import { ApiError } from '../lib/api'
|
||||
import {
|
||||
deleteStoreLoanMethod,
|
||||
listAllStoreLoanMethods,
|
||||
mapStoreLoanMethodApiToUi,
|
||||
} from '../services/storeLoanMethodService'
|
||||
import type { StoreLoanMethod } from '../types/storeLoanMethod'
|
||||
import pageStyles from '../components/PageContent.module.css'
|
||||
import styles from './BrandsPage.module.css'
|
||||
|
||||
export function StoreInstallmentsPage() {
|
||||
const t = useT()
|
||||
const navigate = useNavigate()
|
||||
const { showToast } = useToast()
|
||||
const [methods, setMethods] = useState<StoreLoanMethod[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [deleteTarget, setDeleteTarget] = useState<StoreLoanMethod | null>(null)
|
||||
const [useTarget, setUseTarget] = useState<StoreLoanMethod | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController()
|
||||
void loadMethods(controller.signal)
|
||||
return () => controller.abort()
|
||||
}, [])
|
||||
|
||||
async function loadMethods(signal?: AbortSignal) {
|
||||
setIsLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const items = await listAllStoreLoanMethods(signal)
|
||||
setMethods(items.map(mapStoreLoanMethodApiToUi))
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return
|
||||
if (err instanceof ApiError) {
|
||||
setError(err.message)
|
||||
} else {
|
||||
setError(t('store.installments.errorLoad'))
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmDelete() {
|
||||
if (!deleteTarget) return
|
||||
|
||||
setIsSubmitting(true)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
await deleteStoreLoanMethod(deleteTarget.id)
|
||||
setMethods((prev) => prev.filter((method) => method.id !== deleteTarget.id))
|
||||
setDeleteTarget(null)
|
||||
showToast(t('store.installments.toast.deleted'), 'success')
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError) {
|
||||
setError(err.message)
|
||||
} else {
|
||||
setError(t('store.installments.errorDelete'))
|
||||
}
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<main className={pageStyles.content}>
|
||||
<Breadcrumbs
|
||||
items={[
|
||||
{ label: 'Dashboard', href: '/' },
|
||||
{ label: 'Store', href: '/store' },
|
||||
{ label: 'Installments & Facilities' },
|
||||
]}
|
||||
/>
|
||||
<div className={pageStyles.pageHeader}>
|
||||
<div>
|
||||
<PageTitle en="INSTALLMENTS">{t('title.installments')}</PageTitle>
|
||||
<p className={pageStyles.pageSubtitle}>{t('store.installments.page.subtitle')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className={styles.error} role="alert">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<div className={styles.list}>
|
||||
<p className={styles.empty}>{t('store.installments.loading')}</p>
|
||||
</div>
|
||||
) : methods.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={HandCoins}
|
||||
message={t('store.installments.empty')}
|
||||
actionLabel={t('store.installments.add')}
|
||||
onAction={() => navigate('/store/installments/new')}
|
||||
/>
|
||||
) : (
|
||||
<div className={styles.list}>
|
||||
{methods.map((method) => (
|
||||
<StoreLoanMethodRow
|
||||
key={method.id}
|
||||
method={method}
|
||||
onUse={(id) => {
|
||||
const item = methods.find((entry) => entry.id === id)
|
||||
if (item) setUseTarget(item)
|
||||
}}
|
||||
onEdit={(id) => navigate(`/store/installments/edit/${id}`)}
|
||||
onRemove={(id) => {
|
||||
const item = methods.find((entry) => entry.id === id)
|
||||
if (item) setDeleteTarget(item)
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<StoreLoanUseModal
|
||||
open={!!useTarget}
|
||||
method={useTarget}
|
||||
onClose={() => setUseTarget(null)}
|
||||
/>
|
||||
|
||||
<ConfirmDeleteModal
|
||||
open={!!deleteTarget}
|
||||
title={t('store.installments.deleteTitle')}
|
||||
message={
|
||||
deleteTarget
|
||||
? t('store.installments.deleteMessage', {
|
||||
name: deleteTarget.nameFa || deleteTarget.nameEn,
|
||||
})
|
||||
: ''
|
||||
}
|
||||
onConfirm={confirmDelete}
|
||||
onCancel={() => !isSubmitting && setDeleteTarget(null)}
|
||||
/>
|
||||
|
||||
<div className={styles.fabDock}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.addFab}
|
||||
onClick={() => navigate('/store/installments/new')}
|
||||
aria-label={t('store.installments.add')}
|
||||
>
|
||||
<Plus size={24} />
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -3,13 +3,16 @@ import {
|
||||
ShoppingCart,
|
||||
Truck,
|
||||
CreditCard,
|
||||
HandCoins,
|
||||
Settings,
|
||||
} from 'lucide-react'
|
||||
import { SectionCard } from '../components/SectionCard'
|
||||
import { Breadcrumbs } from '../components/Breadcrumbs'
|
||||
import { PageTitle } from '../components/PageTitle'
|
||||
import { useTenantBranding } from '../context/TenantBrandingContext'
|
||||
import { useT } from '../i18n/useT'
|
||||
import type { BusinessMessageKey } from '../i18n/messages'
|
||||
import { hasBusinessModule } from '../utils/businessModules'
|
||||
import styles from '../components/PageContent.module.css'
|
||||
|
||||
const storeSections: {
|
||||
@@ -17,6 +20,7 @@ const storeSections: {
|
||||
titleKey: BusinessMessageKey
|
||||
descKey: BusinessMessageKey
|
||||
href: string
|
||||
moduleId?: 'store_installments'
|
||||
}[] = [
|
||||
{
|
||||
icon: Package,
|
||||
@@ -42,6 +46,13 @@ const storeSections: {
|
||||
descKey: 'store.card.cards.desc',
|
||||
href: '/store/cards',
|
||||
},
|
||||
{
|
||||
icon: HandCoins,
|
||||
titleKey: 'nav.store.installments',
|
||||
descKey: 'store.card.installments.desc',
|
||||
href: '/store/installments',
|
||||
moduleId: 'store_installments',
|
||||
},
|
||||
{
|
||||
icon: Settings,
|
||||
titleKey: 'nav.store.settings',
|
||||
@@ -52,6 +63,11 @@ const storeSections: {
|
||||
|
||||
export function StorePage() {
|
||||
const t = useT()
|
||||
const { enabledModules } = useTenantBranding()
|
||||
const visibleSections = storeSections.filter(
|
||||
(section) =>
|
||||
!section.moduleId || hasBusinessModule(enabledModules, section.moduleId),
|
||||
)
|
||||
|
||||
return (
|
||||
<main className={styles.content}>
|
||||
@@ -69,7 +85,7 @@ export function StorePage() {
|
||||
</div>
|
||||
|
||||
<div className={styles.gridHome}>
|
||||
{storeSections.map((section) => (
|
||||
{visibleSections.map((section) => (
|
||||
<SectionCard
|
||||
key={section.href}
|
||||
icon={section.icon}
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
import { apiRequest } from '../lib/api'
|
||||
import { getActiveBusinessId } from '../lib/businessContext'
|
||||
import type {
|
||||
StoreLoanImageAspect,
|
||||
StoreLoanMethod,
|
||||
StoreLoanMethodApi,
|
||||
StoreLoanMethodFormPayload,
|
||||
StoreLoanMethodsListResponse,
|
||||
} from '../types/storeLoanMethod'
|
||||
|
||||
function businessPath(suffix = '') {
|
||||
const businessId = getActiveBusinessId()
|
||||
if (!businessId) {
|
||||
throw new Error('No active business selected. Please sign in again.')
|
||||
}
|
||||
return `/businesses/${businessId}/store-loan-methods${suffix}`
|
||||
}
|
||||
|
||||
function normalizeAspect(value: string | undefined | null): StoreLoanImageAspect {
|
||||
return value === '3:2' ? '3:2' : '1:1'
|
||||
}
|
||||
|
||||
export async function listStoreLoanMethods(
|
||||
page = 1,
|
||||
pageSize = 100,
|
||||
signal?: AbortSignal,
|
||||
) {
|
||||
const params = new URLSearchParams({
|
||||
page: String(page),
|
||||
pageSize: String(pageSize),
|
||||
})
|
||||
|
||||
return apiRequest<StoreLoanMethodsListResponse>(
|
||||
`${businessPath()}?${params.toString()}`,
|
||||
{ auth: true, signal },
|
||||
)
|
||||
}
|
||||
|
||||
export async function listAllStoreLoanMethods(signal?: AbortSignal) {
|
||||
const pageSize = 100
|
||||
let page = 1
|
||||
let items: StoreLoanMethodApi[] = []
|
||||
let total = Infinity
|
||||
|
||||
while (items.length < total) {
|
||||
const data = await listStoreLoanMethods(page, pageSize, signal)
|
||||
items = items.concat(data.items)
|
||||
total = data.total
|
||||
page += 1
|
||||
}
|
||||
|
||||
return items
|
||||
}
|
||||
|
||||
export async function getStoreLoanMethod(methodId: string, signal?: AbortSignal) {
|
||||
return apiRequest<{ method: StoreLoanMethodApi }>(businessPath(`/${methodId}`), {
|
||||
auth: true,
|
||||
signal,
|
||||
})
|
||||
}
|
||||
|
||||
export async function createStoreLoanMethod(payload: StoreLoanMethodFormPayload) {
|
||||
return apiRequest<{ message: string; method: StoreLoanMethodApi }>(businessPath(), {
|
||||
method: 'POST',
|
||||
auth: true,
|
||||
body: payload,
|
||||
})
|
||||
}
|
||||
|
||||
export async function updateStoreLoanMethod(
|
||||
methodId: string,
|
||||
payload: StoreLoanMethodFormPayload,
|
||||
) {
|
||||
return apiRequest<{ message: string; method: StoreLoanMethodApi }>(
|
||||
businessPath(`/${methodId}`),
|
||||
{
|
||||
method: 'PATCH',
|
||||
auth: true,
|
||||
body: payload,
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
export async function deleteStoreLoanMethod(methodId: string) {
|
||||
return apiRequest<{ message: string }>(businessPath(`/${methodId}`), {
|
||||
method: 'DELETE',
|
||||
auth: true,
|
||||
})
|
||||
}
|
||||
|
||||
export function mapStoreLoanMethodApiToUi(method: StoreLoanMethodApi): StoreLoanMethod {
|
||||
return {
|
||||
id: method.id,
|
||||
nameFa: method.nameFa,
|
||||
nameEn: method.nameEn,
|
||||
description: method.description ?? '',
|
||||
imageUrl: method.imageUrl,
|
||||
imageMediaId: method.imageMediaId,
|
||||
imageAspectRatio: normalizeAspect(method.imageAspectRatio),
|
||||
minShoppingAmount: method.minShoppingAmount,
|
||||
minAmount: method.minAmount,
|
||||
maxAmount: method.maxAmount,
|
||||
interest: method.interest,
|
||||
returnMonthsMin: method.returnMonthsMin,
|
||||
returnMonthsMax: method.returnMonthsMax,
|
||||
returnMonthsStep: method.returnMonthsStep,
|
||||
sortOrder: method.sortOrder,
|
||||
isActive: method.isActive,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
export type StoreLoanImageAspect = '1:1' | '3:2'
|
||||
|
||||
export interface StoreLoanMethod {
|
||||
id: string
|
||||
nameFa: string
|
||||
nameEn: string
|
||||
description: string
|
||||
imageUrl: string | null
|
||||
imageMediaId: string | null
|
||||
imageAspectRatio: StoreLoanImageAspect
|
||||
minShoppingAmount: number
|
||||
minAmount: number
|
||||
maxAmount: number
|
||||
interest: number
|
||||
returnMonthsMin: number
|
||||
returnMonthsMax: number
|
||||
returnMonthsStep: number
|
||||
sortOrder: number
|
||||
isActive: boolean
|
||||
}
|
||||
|
||||
export interface StoreLoanMethodApi {
|
||||
id: string
|
||||
businessId: string
|
||||
nameFa: string
|
||||
nameEn: string
|
||||
description: string | null
|
||||
imageMediaId: string | null
|
||||
imageUrl: string | null
|
||||
imageAspectRatio: string
|
||||
minShoppingAmount: number
|
||||
minAmount: number
|
||||
maxAmount: number
|
||||
interest: number
|
||||
returnMonthsMin: number
|
||||
returnMonthsMax: number
|
||||
returnMonthsStep: number
|
||||
sortOrder: number
|
||||
isActive: boolean
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
export interface StoreLoanMethodsListResponse {
|
||||
items: StoreLoanMethodApi[]
|
||||
total: number
|
||||
page: number
|
||||
pageSize: number
|
||||
}
|
||||
|
||||
export interface StoreLoanMethodFormPayload {
|
||||
nameFa: string
|
||||
nameEn: string
|
||||
description?: string | null
|
||||
imageMediaId?: string | null
|
||||
imageAspectRatio: StoreLoanImageAspect
|
||||
minShoppingAmount: number
|
||||
minAmount: number
|
||||
maxAmount: number
|
||||
interest: number
|
||||
returnMonthsMin: number
|
||||
returnMonthsMax: number
|
||||
returnMonthsStep: number
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
export const BUSINESS_DASHBOARD_MODULE_IDS = [
|
||||
'products',
|
||||
'store',
|
||||
'store_installments',
|
||||
'portfolio',
|
||||
'blog',
|
||||
'warehouse',
|
||||
@@ -53,7 +54,10 @@ export const DEFAULT_NEW_BUSINESS_MODULES: BusinessModuleId[] = [
|
||||
*/
|
||||
export const DEFAULT_ENABLED_BUSINESS_MODULES: BusinessModuleId[] =
|
||||
BUSINESS_DASHBOARD_MODULE_IDS.filter(
|
||||
(id) => id !== 'workshops' && id !== 'multilanguage_data',
|
||||
(id) =>
|
||||
id !== 'workshops' &&
|
||||
id !== 'multilanguage_data' &&
|
||||
id !== 'store_installments',
|
||||
)
|
||||
|
||||
export const DEFAULT_HOME_CHARTS: [HomeChartId, HomeChartId] = [
|
||||
|
||||
@@ -11,8 +11,9 @@ function createImage(url: string): Promise<HTMLImageElement> {
|
||||
|
||||
/**
|
||||
* Crop `imageSrc` to `pixelCrop`. Areas outside the source image use `fillColor`
|
||||
* when provided. JPEG always defaults to white so transparent PNG/WebP uploads
|
||||
* do not become black.
|
||||
* when provided.
|
||||
* - JPEG: defaults to white fill (product thumbnails).
|
||||
* - PNG: omit fillColor to keep transparent padding when unzoomed.
|
||||
*/
|
||||
export async function getCroppedImage(
|
||||
imageSrc: string,
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
export type LoanPaymentInstallment = {
|
||||
index: number
|
||||
dueDate: Date
|
||||
amount: number
|
||||
}
|
||||
|
||||
export type LoanCalculationResult = {
|
||||
totalValue: number
|
||||
creditAmount: number
|
||||
cashPayment: number
|
||||
interestFee: number
|
||||
totalRepay: number
|
||||
months: number
|
||||
installments: LoanPaymentInstallment[]
|
||||
}
|
||||
|
||||
export function listReturnMonthOptions(
|
||||
min: number,
|
||||
max: number,
|
||||
step: number,
|
||||
): number[] {
|
||||
if (min > max || step < 1) return []
|
||||
const options: number[] = []
|
||||
for (let value = min; value <= max; value += step) {
|
||||
options.push(value)
|
||||
}
|
||||
return options
|
||||
}
|
||||
|
||||
/**
|
||||
* Flat annual interest prorated by term months:
|
||||
* fee = credit × (interest% / 100) × (months / 12)
|
||||
* repay = credit + fee, split across monthly installments.
|
||||
*/
|
||||
export function calculateStoreLoanPlan(input: {
|
||||
totalValue: number
|
||||
creditAmount: number
|
||||
interestPercent: number
|
||||
months: number
|
||||
startDate?: Date
|
||||
}): LoanCalculationResult | null {
|
||||
const totalValue = Math.max(0, Math.round(input.totalValue))
|
||||
const creditAmount = Math.max(0, Math.round(input.creditAmount))
|
||||
const months = Math.round(input.months)
|
||||
const interestPercent = Number(input.interestPercent)
|
||||
|
||||
if (
|
||||
!Number.isFinite(totalValue) ||
|
||||
!Number.isFinite(creditAmount) ||
|
||||
!Number.isFinite(months) ||
|
||||
!Number.isFinite(interestPercent) ||
|
||||
months < 1 ||
|
||||
creditAmount <= 0 ||
|
||||
creditAmount > totalValue
|
||||
) {
|
||||
return null
|
||||
}
|
||||
|
||||
const cashPayment = totalValue - creditAmount
|
||||
const interestFee = Math.round(
|
||||
creditAmount * (interestPercent / 100) * (months / 12),
|
||||
)
|
||||
const totalRepay = creditAmount + interestFee
|
||||
const basePayment = Math.floor(totalRepay / months)
|
||||
const remainder = totalRepay - basePayment * months
|
||||
|
||||
const start = input.startDate ? new Date(input.startDate) : new Date()
|
||||
const installments: LoanPaymentInstallment[] = []
|
||||
|
||||
for (let index = 1; index <= months; index += 1) {
|
||||
const dueDate = new Date(start)
|
||||
dueDate.setMonth(dueDate.getMonth() + index)
|
||||
const amount = basePayment + (index === months ? remainder : 0)
|
||||
installments.push({ index, dueDate, amount })
|
||||
}
|
||||
|
||||
return {
|
||||
totalValue,
|
||||
creditAmount,
|
||||
cashPayment,
|
||||
interestFee,
|
||||
totalRepay,
|
||||
months,
|
||||
installments,
|
||||
}
|
||||
}
|
||||
|
||||
export function clampCreditAmount(
|
||||
value: number,
|
||||
totalValue: number,
|
||||
minAmount: number,
|
||||
maxAmount: number,
|
||||
): number {
|
||||
const upper = Math.min(Math.round(maxAmount), Math.round(totalValue))
|
||||
const lower = Math.min(Math.round(minAmount), upper)
|
||||
return Math.min(upper, Math.max(lower, Math.round(value)))
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
export const BUSINESS_DASHBOARD_MODULE_IDS = [
|
||||
'products',
|
||||
'store',
|
||||
'store_installments',
|
||||
'portfolio',
|
||||
'blog',
|
||||
'warehouse',
|
||||
@@ -32,6 +33,7 @@ export const BUSINESS_DASHBOARD_MODULE_LABELS: Record<
|
||||
> = {
|
||||
products: 'Products',
|
||||
store: 'Store',
|
||||
store_installments: 'Installments & Facilities',
|
||||
portfolio: 'Portfolio',
|
||||
blog: 'Blog',
|
||||
warehouse: 'Warehouse',
|
||||
@@ -82,7 +84,10 @@ export const HOME_CHART_LABELS: Record<HomeChartId, string> = {
|
||||
*/
|
||||
export const DEFAULT_ENABLED_BUSINESS_MODULES: BusinessModuleId[] =
|
||||
BUSINESS_DASHBOARD_MODULE_IDS.filter(
|
||||
(id) => id !== 'workshops' && id !== 'multilanguage_data',
|
||||
(id) =>
|
||||
id !== 'workshops' &&
|
||||
id !== 'multilanguage_data' &&
|
||||
id !== 'store_installments',
|
||||
)
|
||||
|
||||
export const DEFAULT_HOME_CHARTS: [HomeChartId, HomeChartId] = [
|
||||
|
||||
Reference in New Issue
Block a user