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
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user