Add shipping cost management and checkout shipping fees.
Business store shipping groups/static rates UI, and customer checkout that quotes and applies shipping on delivery and payment. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
95390933a7
commit
c59ca4444f
@@ -0,0 +1,294 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { X } from 'lucide-react'
|
||||
import { useLocale } from '@meshkee/dashboard-ui'
|
||||
import { useT } from '../i18n/useT'
|
||||
import type {
|
||||
ShippingCostGroup,
|
||||
ShippingCostGroupFormPayload,
|
||||
ShippingMethodId,
|
||||
} from '../types/shippingCostGroup'
|
||||
import { SHIPPING_METHOD_IDS } from '../types/shippingCostGroup'
|
||||
import { formatIrtInput, parseIrtInput } from '../utils/irtPrice'
|
||||
import styles from './ShippingCostGroupModal.module.css'
|
||||
|
||||
const METHOD_EN_LABELS: Record<ShippingMethodId, string> = {
|
||||
post: 'Post',
|
||||
tipax: 'Tipax',
|
||||
mahex: 'Mahex',
|
||||
freight: 'Freight',
|
||||
air: 'Air',
|
||||
}
|
||||
|
||||
interface ShippingCostGroupModalProps {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
onSubmit: (data: ShippingCostGroupFormPayload) => void
|
||||
editingGroup?: ShippingCostGroup | null
|
||||
isSubmitting?: boolean
|
||||
}
|
||||
|
||||
const ANIMATION_MS = 220
|
||||
|
||||
export function ShippingCostGroupModal({
|
||||
open,
|
||||
onClose,
|
||||
onSubmit,
|
||||
editingGroup = null,
|
||||
isSubmitting = false,
|
||||
}: ShippingCostGroupModalProps) {
|
||||
const t = useT()
|
||||
const { locale } = useLocale()
|
||||
const isFa = locale === 'fa'
|
||||
const [mounted, setMounted] = useState(open)
|
||||
const [closing, setClosing] = useState(false)
|
||||
const [nameFa, setNameFa] = useState('')
|
||||
const [nameEn, setNameEn] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const [methods, setMethods] = useState<ShippingMethodId[]>([])
|
||||
const [defaultAmount, setDefaultAmount] = useState('')
|
||||
const [isDefault, setIsDefault] = useState(false)
|
||||
const [formError, setFormError] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setMounted(true)
|
||||
setClosing(false)
|
||||
setNameFa(editingGroup?.nameFa ?? '')
|
||||
setNameEn(editingGroup?.nameEn ?? '')
|
||||
setDescription(editingGroup?.description ?? '')
|
||||
setMethods(editingGroup?.methods ?? [])
|
||||
setDefaultAmount(
|
||||
editingGroup
|
||||
? formatIrtInput(String(Math.round(editingGroup.defaultAmount)))
|
||||
: '',
|
||||
)
|
||||
setIsDefault(editingGroup?.isDefault ?? false)
|
||||
setFormError('')
|
||||
} else if (mounted) {
|
||||
setClosing(true)
|
||||
const timer = setTimeout(() => {
|
||||
setMounted(false)
|
||||
setClosing(false)
|
||||
}, ANIMATION_MS)
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [open, editingGroup, mounted])
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted || closing) return
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape' && !isSubmitting) onClose()
|
||||
}
|
||||
document.addEventListener('keydown', onKey)
|
||||
return () => document.removeEventListener('keydown', onKey)
|
||||
}, [mounted, closing, onClose, isSubmitting])
|
||||
|
||||
if (!mounted) return null
|
||||
|
||||
function toggleMethod(method: ShippingMethodId) {
|
||||
setMethods((prev) =>
|
||||
prev.includes(method) ? prev.filter((item) => item !== method) : [...prev, method],
|
||||
)
|
||||
}
|
||||
|
||||
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault()
|
||||
setFormError('')
|
||||
|
||||
const trimmedFa = nameFa.trim()
|
||||
const trimmedEn = nameEn.trim()
|
||||
const amount = parseIrtInput(defaultAmount)
|
||||
|
||||
if (!trimmedFa || !trimmedEn) {
|
||||
setFormError(t('store.shipping.form.errorRequired'))
|
||||
return
|
||||
}
|
||||
if (!methods.length) {
|
||||
setFormError(t('store.shipping.form.errorMethods'))
|
||||
return
|
||||
}
|
||||
if (amount === null || amount < 0) {
|
||||
setFormError(t('store.shipping.form.errorAmount'))
|
||||
return
|
||||
}
|
||||
|
||||
onSubmit({
|
||||
nameFa: trimmedFa,
|
||||
nameEn: trimmedEn,
|
||||
description: description.trim() || undefined,
|
||||
methods,
|
||||
defaultAmount: amount,
|
||||
isDefault,
|
||||
})
|
||||
}
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className={`${styles.overlay} ${closing ? styles.overlayOut : styles.overlayIn}`}
|
||||
onClick={() => !isSubmitting && onClose()}
|
||||
>
|
||||
<div
|
||||
className={`${styles.modal} ${closing ? styles.modalOut : styles.modalIn}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="shipping-group-modal-title"
|
||||
lang={isFa ? 'fa' : 'en'}
|
||||
dir={isFa ? 'rtl' : 'ltr'}
|
||||
>
|
||||
<div className={styles.header}>
|
||||
<h3 id="shipping-group-modal-title" className={styles.title}>
|
||||
{editingGroup ? t('store.shipping.form.editTitle') : t('store.shipping.form.addTitle')}
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.closeBtn}
|
||||
onClick={onClose}
|
||||
disabled={isSubmitting}
|
||||
aria-label={t('common.close')}
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form className={styles.form} onSubmit={handleSubmit}>
|
||||
{formError ? (
|
||||
<div className={styles.error} role="alert">
|
||||
{formError}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="shipping-name-fa">{t('store.shipping.form.nameFa')}</label>
|
||||
<input
|
||||
id="shipping-name-fa"
|
||||
type="text"
|
||||
dir="rtl"
|
||||
className="faText"
|
||||
placeholder={t('store.shipping.form.nameFaPlaceholder')}
|
||||
value={nameFa}
|
||||
onChange={(e) => setNameFa(e.target.value)}
|
||||
disabled={isSubmitting}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="shipping-name-en">{t('store.shipping.form.nameEn')}</label>
|
||||
<input
|
||||
id="shipping-name-en"
|
||||
type="text"
|
||||
dir="ltr"
|
||||
lang="en"
|
||||
placeholder={t('store.shipping.form.nameEnPlaceholder')}
|
||||
value={nameEn}
|
||||
onChange={(e) => setNameEn(e.target.value)}
|
||||
disabled={isSubmitting}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="shipping-description">{t('store.shipping.form.description')}</label>
|
||||
<textarea
|
||||
id="shipping-description"
|
||||
rows={3}
|
||||
dir={isFa ? 'rtl' : 'ltr'}
|
||||
placeholder={t('store.shipping.form.descriptionPlaceholder')}
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.field}>
|
||||
<span className={styles.fieldLabel}>{t('store.shipping.form.methods')}</span>
|
||||
<p className={styles.hint}>{t('store.shipping.form.methodsHint')}</p>
|
||||
<div className={styles.chipGrid} role="group" aria-label={t('store.shipping.form.methods')}>
|
||||
{SHIPPING_METHOD_IDS.map((method) => {
|
||||
const checked = methods.includes(method)
|
||||
return (
|
||||
<button
|
||||
key={method}
|
||||
type="button"
|
||||
className={`${styles.chip} ${checked ? styles.chipSelected : ''}`}
|
||||
onClick={() => toggleMethod(method)}
|
||||
disabled={isSubmitting}
|
||||
aria-pressed={checked}
|
||||
>
|
||||
<span className={styles.chipFa}>
|
||||
{t(`store.shipping.method.${method}` as `store.shipping.method.${typeof method}`)}
|
||||
</span>
|
||||
<span className={styles.chipEn} dir="ltr" lang="en">
|
||||
{METHOD_EN_LABELS[method]}
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="shipping-default-amount">
|
||||
{t('store.shipping.form.defaultAmount')}
|
||||
</label>
|
||||
<p className={styles.hint}>{t('store.shipping.form.defaultAmountHint')}</p>
|
||||
<div className={styles.amountRow}>
|
||||
<input
|
||||
id="shipping-default-amount"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
dir="ltr"
|
||||
lang="en"
|
||||
placeholder={t('store.shipping.form.defaultAmountPlaceholder')}
|
||||
value={defaultAmount}
|
||||
onChange={(e) => setDefaultAmount(formatIrtInput(e.target.value))}
|
||||
disabled={isSubmitting}
|
||||
required
|
||||
/>
|
||||
<span className={styles.amountUnit}>IRT</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label className={styles.checkRow} htmlFor="shipping-is-default">
|
||||
<input
|
||||
id="shipping-is-default"
|
||||
type="checkbox"
|
||||
checked={isDefault}
|
||||
onChange={(e) => setIsDefault(e.target.checked)}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<span className={styles.checkText}>
|
||||
<span className={styles.checkTitle}>
|
||||
{t('store.shipping.form.isDefault')}
|
||||
</span>
|
||||
<span className={styles.checkHint}>
|
||||
{t('store.shipping.form.isDefaultHint')}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<div className={styles.actions}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.cancelBtn}
|
||||
onClick={onClose}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{t('store.shipping.form.cancel')}
|
||||
</button>
|
||||
<button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
|
||||
{isSubmitting
|
||||
? t('store.shipping.form.saving')
|
||||
: editingGroup
|
||||
? t('store.shipping.form.update')
|
||||
: t('store.shipping.form.save')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user