Add SMS templates UI, prepaid balance settings, and list filter layout.
Business settings manage templates and balance; Super Admin verifies templates and tops up via SMS settings; filters use a separate panel with even field gaps. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
8f0b4cef85
commit
0eb19bbebd
@@ -7,7 +7,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 200;
|
||||
z-index: 1100;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,465 @@
|
||||
import { useEffect, useState, type FormEvent } from 'react'
|
||||
import { Eye, EyeOff } from 'lucide-react'
|
||||
import { Switch } from './Switch'
|
||||
import { Tooltip } from './Tooltip'
|
||||
import { useToast } from '../context/ToastContext'
|
||||
import { useT } from '../i18n/useT'
|
||||
import type { BusinessMessageKey } from '../i18n/messages'
|
||||
import { ApiError } from '../lib/api'
|
||||
import {
|
||||
DEFAULT_EPAYMENT_SETTINGS,
|
||||
getSettings,
|
||||
updateStoreSettings,
|
||||
type EPaymentSettings,
|
||||
type PaymentGatewayId,
|
||||
} from '../services/settingsService'
|
||||
import sharedStyles from '../pages/ProductSettingsPage.module.css'
|
||||
import fieldStyles from '../pages/AddNewProductPage.module.css'
|
||||
import styles from '../pages/SettingsPage.module.css'
|
||||
|
||||
const COMING_SOON_GATEWAYS: {
|
||||
id: Exclude<PaymentGatewayId, 'mellat' | 'zarinpal'>
|
||||
nameKey: BusinessMessageKey
|
||||
descKey: BusinessMessageKey
|
||||
}[] = [
|
||||
{
|
||||
id: 'sep',
|
||||
nameKey: 'website.ePayment.gateway.sep',
|
||||
descKey: 'website.ePayment.gateway.sepDesc',
|
||||
},
|
||||
{
|
||||
id: 'snappay',
|
||||
nameKey: 'website.ePayment.gateway.snappay',
|
||||
descKey: 'website.ePayment.gateway.snappayDesc',
|
||||
},
|
||||
{
|
||||
id: 'digipay',
|
||||
nameKey: 'website.ePayment.gateway.digipay',
|
||||
descKey: 'website.ePayment.gateway.digipayDesc',
|
||||
},
|
||||
]
|
||||
|
||||
function nextDefaultGateway(
|
||||
current: EPaymentSettings,
|
||||
gatewayId: PaymentGatewayId,
|
||||
enabled: boolean,
|
||||
): PaymentGatewayId | null {
|
||||
if (enabled && !current.defaultGateway) return gatewayId
|
||||
if (!enabled && current.defaultGateway === gatewayId) {
|
||||
if (gatewayId !== 'mellat' && current.gateways.mellat.enabled) return 'mellat'
|
||||
if (gatewayId !== 'zarinpal' && current.gateways.zarinpal.enabled) {
|
||||
return 'zarinpal'
|
||||
}
|
||||
return null
|
||||
}
|
||||
return current.defaultGateway
|
||||
}
|
||||
|
||||
export function EPaymentSettingsSection() {
|
||||
const t = useT()
|
||||
const { showToast } = useToast()
|
||||
const [ePayment, setEPayment] = useState<EPaymentSettings>(DEFAULT_EPAYMENT_SETTINGS)
|
||||
const [passwordDraft, setPasswordDraft] = useState('')
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [savingKey, setSavingKey] = useState<string | null>(null)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController()
|
||||
void loadSettings(controller.signal)
|
||||
return () => controller.abort()
|
||||
}, [])
|
||||
|
||||
async function loadSettings(signal?: AbortSignal) {
|
||||
setIsLoading(true)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
const data = await getSettings(signal)
|
||||
setEPayment(data.settings.store.ePayment ?? DEFAULT_EPAYMENT_SETTINGS)
|
||||
setPasswordDraft('')
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return
|
||||
if (err instanceof ApiError) {
|
||||
setError(err.message)
|
||||
} else {
|
||||
setError(t('productSettings.errorLoad'))
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function patchEPayment(
|
||||
saving: string,
|
||||
next: EPaymentSettings,
|
||||
password?: string,
|
||||
) {
|
||||
setSavingKey(saving)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
const payload: EPaymentSettings = {
|
||||
enabled: next.enabled,
|
||||
defaultGateway: next.defaultGateway,
|
||||
gateways: {
|
||||
mellat: {
|
||||
enabled: next.gateways.mellat.enabled,
|
||||
terminalId: next.gateways.mellat.terminalId,
|
||||
username: next.gateways.mellat.username,
|
||||
password: password ?? '',
|
||||
},
|
||||
sep: { enabled: next.gateways.sep.enabled },
|
||||
snappay: { enabled: next.gateways.snappay.enabled },
|
||||
digipay: { enabled: next.gateways.digipay.enabled },
|
||||
zarinpal: {
|
||||
enabled: next.gateways.zarinpal.enabled,
|
||||
merchantId: next.gateways.zarinpal.merchantId.trim(),
|
||||
sandbox: next.gateways.zarinpal.sandbox,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const data = await updateStoreSettings({ ePayment: payload })
|
||||
setEPayment(data.settings.store.ePayment ?? DEFAULT_EPAYMENT_SETTINGS)
|
||||
if (password) setPasswordDraft('')
|
||||
showToast(t('productSettings.saved'), 'success')
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError) {
|
||||
setError(err.message)
|
||||
} else {
|
||||
setError(t('productSettings.errorSave'))
|
||||
}
|
||||
} finally {
|
||||
setSavingKey(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleMasterToggle(checked: boolean) {
|
||||
await patchEPayment('master', {
|
||||
...ePayment,
|
||||
enabled: checked,
|
||||
defaultGateway: checked
|
||||
? ePayment.defaultGateway ??
|
||||
(ePayment.gateways.mellat.enabled
|
||||
? 'mellat'
|
||||
: ePayment.gateways.zarinpal.enabled
|
||||
? 'zarinpal'
|
||||
: 'mellat')
|
||||
: ePayment.defaultGateway,
|
||||
})
|
||||
}
|
||||
|
||||
async function handleMellatToggle(checked: boolean) {
|
||||
await patchEPayment('mellat-enabled', {
|
||||
...ePayment,
|
||||
enabled: checked ? true : ePayment.enabled,
|
||||
gateways: {
|
||||
...ePayment.gateways,
|
||||
mellat: { ...ePayment.gateways.mellat, enabled: checked },
|
||||
},
|
||||
defaultGateway: nextDefaultGateway(ePayment, 'mellat', checked),
|
||||
})
|
||||
}
|
||||
|
||||
async function handleZarinpalToggle(checked: boolean) {
|
||||
await patchEPayment('zarinpal-enabled', {
|
||||
...ePayment,
|
||||
enabled: checked ? true : ePayment.enabled,
|
||||
gateways: {
|
||||
...ePayment.gateways,
|
||||
zarinpal: { ...ePayment.gateways.zarinpal, enabled: checked },
|
||||
},
|
||||
defaultGateway: nextDefaultGateway(ePayment, 'zarinpal', checked),
|
||||
})
|
||||
}
|
||||
|
||||
async function handleSaveMellatCredentials(event: FormEvent) {
|
||||
event.preventDefault()
|
||||
const terminalId = ePayment.gateways.mellat.terminalId.trim()
|
||||
const username = ePayment.gateways.mellat.username.trim()
|
||||
|
||||
if (ePayment.gateways.mellat.enabled && (!terminalId || !username)) {
|
||||
setError(t('website.ePayment.error.credentials'))
|
||||
return
|
||||
}
|
||||
|
||||
await patchEPayment(
|
||||
'mellat-credentials',
|
||||
{
|
||||
...ePayment,
|
||||
gateways: {
|
||||
...ePayment.gateways,
|
||||
mellat: {
|
||||
...ePayment.gateways.mellat,
|
||||
terminalId,
|
||||
username,
|
||||
},
|
||||
},
|
||||
},
|
||||
passwordDraft.trim() || undefined,
|
||||
)
|
||||
}
|
||||
|
||||
async function handleSaveZarinpalCredentials(event: FormEvent) {
|
||||
event.preventDefault()
|
||||
const merchantId = ePayment.gateways.zarinpal.merchantId.trim()
|
||||
|
||||
if (ePayment.gateways.zarinpal.enabled && !merchantId) {
|
||||
setError(t('website.ePayment.error.zarinpalMerchant'))
|
||||
return
|
||||
}
|
||||
|
||||
await patchEPayment('zarinpal-credentials', {
|
||||
...ePayment,
|
||||
gateways: {
|
||||
...ePayment.gateways,
|
||||
zarinpal: {
|
||||
...ePayment.gateways.zarinpal,
|
||||
merchantId,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <p className={sharedStyles.status}>{t('productSettings.loading')}</p>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.stack}>
|
||||
{error ? <div className={sharedStyles.alertError}>{error}</div> : null}
|
||||
|
||||
<section className={sharedStyles.panel}>
|
||||
<h3 className={sharedStyles.sectionTitle}>{t('title.ePayment')}</h3>
|
||||
<div className={sharedStyles.list}>
|
||||
<div className={sharedStyles.row}>
|
||||
<div className={sharedStyles.rowText}>
|
||||
<label className={sharedStyles.rowLabel} htmlFor="epayment-master">
|
||||
{t('website.ePayment.master')}
|
||||
</label>
|
||||
<p className={sharedStyles.rowDescription}>
|
||||
{t('website.ePayment.masterDesc')}
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="epayment-master"
|
||||
checked={ePayment.enabled}
|
||||
disabled={savingKey !== null}
|
||||
onChange={(checked) => void handleMasterToggle(checked)}
|
||||
/>
|
||||
</div>
|
||||
{!ePayment.enabled &&
|
||||
(ePayment.gateways.mellat.enabled || ePayment.gateways.zarinpal.enabled) ? (
|
||||
<p className={styles.masterOffHint} role="status">
|
||||
{t('website.ePayment.masterOffHint')}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={styles.gatewayCard} data-card-hover>
|
||||
<div className={styles.gatewayHeader}>
|
||||
<div>
|
||||
<h3 className={styles.gatewayTitle}>
|
||||
{t('website.ePayment.gateway.mellat')}
|
||||
</h3>
|
||||
<p className={styles.gatewayDesc}>
|
||||
{t('website.ePayment.gateway.mellatDesc')}
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="epayment-mellat"
|
||||
checked={ePayment.gateways.mellat.enabled}
|
||||
disabled={savingKey !== null}
|
||||
onChange={(checked) => void handleMellatToggle(checked)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<form
|
||||
className={`${styles.credentials} ${
|
||||
!ePayment.gateways.mellat.enabled ? styles.credentialsDisabled : ''
|
||||
}`}
|
||||
onSubmit={handleSaveMellatCredentials}
|
||||
aria-disabled={!ePayment.gateways.mellat.enabled}
|
||||
>
|
||||
<div className={`${fieldStyles.field} ${styles.field}`}>
|
||||
<label htmlFor="mellat-terminal">{t('website.ePayment.terminalId')}</label>
|
||||
<input
|
||||
id="mellat-terminal"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
autoComplete="off"
|
||||
dir="ltr"
|
||||
value={ePayment.gateways.mellat.terminalId}
|
||||
disabled={savingKey !== null || !ePayment.gateways.mellat.enabled}
|
||||
onChange={(e) =>
|
||||
setEPayment((current) => ({
|
||||
...current,
|
||||
gateways: {
|
||||
...current.gateways,
|
||||
mellat: {
|
||||
...current.gateways.mellat,
|
||||
terminalId: e.target.value,
|
||||
},
|
||||
},
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`${fieldStyles.field} ${styles.field}`}>
|
||||
<label htmlFor="mellat-username">{t('website.ePayment.username')}</label>
|
||||
<input
|
||||
id="mellat-username"
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
dir="ltr"
|
||||
value={ePayment.gateways.mellat.username}
|
||||
disabled={savingKey !== null || !ePayment.gateways.mellat.enabled}
|
||||
onChange={(e) =>
|
||||
setEPayment((current) => ({
|
||||
...current,
|
||||
gateways: {
|
||||
...current.gateways,
|
||||
mellat: {
|
||||
...current.gateways.mellat,
|
||||
username: e.target.value,
|
||||
},
|
||||
},
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`${fieldStyles.field} ${styles.field}`}>
|
||||
<label htmlFor="mellat-password">{t('website.ePayment.password')}</label>
|
||||
<div className={styles.passwordWrap}>
|
||||
<input
|
||||
id="mellat-password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
autoComplete="new-password"
|
||||
dir="ltr"
|
||||
placeholder={t('website.ePayment.passwordPlaceholderSet')}
|
||||
value={passwordDraft}
|
||||
disabled={savingKey !== null || !ePayment.gateways.mellat.enabled}
|
||||
onChange={(e) => setPasswordDraft(e.target.value)}
|
||||
/>
|
||||
<Tooltip
|
||||
label={
|
||||
showPassword
|
||||
? t('website.ePayment.hidePassword')
|
||||
: t('website.ePayment.showPassword')
|
||||
}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.passwordToggle}
|
||||
onClick={() => setShowPassword((v) => !v)}
|
||||
disabled={savingKey !== null || !ePayment.gateways.mellat.enabled}
|
||||
aria-label={
|
||||
showPassword
|
||||
? t('website.ePayment.hidePassword')
|
||||
: t('website.ePayment.showPassword')
|
||||
}
|
||||
>
|
||||
{showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.actionsInline}>
|
||||
<button
|
||||
type="submit"
|
||||
className={styles.saveBtn}
|
||||
disabled={savingKey !== null || !ePayment.gateways.mellat.enabled}
|
||||
>
|
||||
{savingKey === 'mellat-credentials'
|
||||
? t('storeSettings.saving')
|
||||
: t('website.ePayment.saveCredentials')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className={styles.gatewayCard} data-card-hover>
|
||||
<div className={styles.gatewayHeader}>
|
||||
<div>
|
||||
<h3 className={styles.gatewayTitle}>
|
||||
{t('website.ePayment.gateway.zarinpal')}
|
||||
</h3>
|
||||
<p className={styles.gatewayDesc}>
|
||||
{t('website.ePayment.gateway.zarinpalDesc')}
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="epayment-zarinpal"
|
||||
checked={ePayment.gateways.zarinpal.enabled}
|
||||
disabled={savingKey !== null}
|
||||
onChange={(checked) => void handleZarinpalToggle(checked)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<form
|
||||
className={`${styles.credentialsInline} ${
|
||||
!ePayment.gateways.zarinpal.enabled ? styles.credentialsDisabled : ''
|
||||
}`}
|
||||
onSubmit={handleSaveZarinpalCredentials}
|
||||
aria-disabled={!ePayment.gateways.zarinpal.enabled}
|
||||
>
|
||||
<label className={styles.inlineLabel} htmlFor="zarinpal-merchant">
|
||||
{t('website.ePayment.merchantId')}
|
||||
</label>
|
||||
<input
|
||||
id="zarinpal-merchant"
|
||||
className={styles.inlineInput}
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
dir="ltr"
|
||||
spellCheck={false}
|
||||
placeholder={t('website.ePayment.merchantIdPlaceholder')}
|
||||
value={ePayment.gateways.zarinpal.merchantId}
|
||||
disabled={savingKey !== null || !ePayment.gateways.zarinpal.enabled}
|
||||
onChange={(e) =>
|
||||
setEPayment((current) => ({
|
||||
...current,
|
||||
gateways: {
|
||||
...current.gateways,
|
||||
zarinpal: {
|
||||
...current.gateways.zarinpal,
|
||||
merchantId: e.target.value,
|
||||
},
|
||||
},
|
||||
}))
|
||||
}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className={styles.saveBtn}
|
||||
disabled={savingKey !== null || !ePayment.gateways.zarinpal.enabled}
|
||||
>
|
||||
{savingKey === 'zarinpal-credentials'
|
||||
? t('storeSettings.saving')
|
||||
: t('website.ePayment.saveCredentials')}
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<div className={styles.comingSoonGrid}>
|
||||
{COMING_SOON_GATEWAYS.map((gateway) => (
|
||||
<section key={gateway.id} className={styles.comingSoonCard}>
|
||||
<div className={styles.gatewayHeader}>
|
||||
<div>
|
||||
<h3 className={styles.gatewayTitle}>{t(gateway.nameKey)}</h3>
|
||||
<p className={styles.gatewayDesc}>{t(gateway.descKey)}</p>
|
||||
</div>
|
||||
<span className={styles.badge}>{t('website.ePayment.comingSoon')}</span>
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -3,13 +3,14 @@ import { createPortal } from 'react-dom'
|
||||
import { X } from 'lucide-react'
|
||||
import { useLocale } from '@meshkee/dashboard-ui'
|
||||
import { useT } from '../i18n/useT'
|
||||
import { ApiError } from '../lib/api'
|
||||
import { ApiError, isAbortError } from '../lib/api'
|
||||
import { formatCellForDisplay } from '../lib/cellNumber'
|
||||
import {
|
||||
sendCustomerSms,
|
||||
sendCustomersBulkSms,
|
||||
type BusinessCustomerListItem,
|
||||
} from '../services/customerService'
|
||||
import { listSmsTemplates, type SmsTemplate } from '../services/smsTemplateService'
|
||||
import modalStyles from './VariationsModal.module.css'
|
||||
|
||||
export type SmsComposeTarget =
|
||||
@@ -39,6 +40,9 @@ export function SendCustomerSmsModal({
|
||||
const [mounted, setMounted] = useState(open)
|
||||
const [closing, setClosing] = useState(false)
|
||||
const [message, setMessage] = useState('')
|
||||
const [templateId, setTemplateId] = useState('')
|
||||
const [templates, setTemplates] = useState<SmsTemplate[]>([])
|
||||
const [templatesLoading, setTemplatesLoading] = useState(false)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
@@ -47,6 +51,7 @@ export function SendCustomerSmsModal({
|
||||
setMounted(true)
|
||||
setClosing(false)
|
||||
setMessage('')
|
||||
setTemplateId('')
|
||||
setError('')
|
||||
} else if (mounted) {
|
||||
setClosing(true)
|
||||
@@ -58,6 +63,24 @@ export function SendCustomerSmsModal({
|
||||
}
|
||||
}, [open, target, mounted])
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !target) return
|
||||
const controller = new AbortController()
|
||||
setTemplatesLoading(true)
|
||||
void listSmsTemplates(controller.signal)
|
||||
.then((res) => {
|
||||
if (!controller.signal.aborted) setTemplates(res.items)
|
||||
})
|
||||
.catch((err) => {
|
||||
if (isAbortError(err)) return
|
||||
if (!controller.signal.aborted) setTemplates([])
|
||||
})
|
||||
.finally(() => {
|
||||
if (!controller.signal.aborted) setTemplatesLoading(false)
|
||||
})
|
||||
return () => controller.abort()
|
||||
}, [open, target])
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted || closing) return
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
@@ -69,16 +92,25 @@ export function SendCustomerSmsModal({
|
||||
|
||||
if (!mounted || !target) return null
|
||||
|
||||
const selectedTemplate = templates.find((item) => item.id === templateId) ?? null
|
||||
const trimmed = message.trim()
|
||||
const canSend = trimmed.length > 0 && trimmed.length <= MAX_LEN
|
||||
|
||||
function applyTemplate(nextId: string) {
|
||||
setTemplateId(nextId)
|
||||
if (!nextId) return
|
||||
const tpl = templates.find((item) => item.id === nextId)
|
||||
if (tpl) setMessage(tpl.body.slice(0, MAX_LEN))
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!target || !canSend) return
|
||||
setIsSubmitting(true)
|
||||
setError('')
|
||||
try {
|
||||
const tplId = templateId || null
|
||||
if (target.mode === 'single') {
|
||||
const result = await sendCustomerSms(target.customer.id, trimmed)
|
||||
const result = await sendCustomerSms(target.customer.id, trimmed, tplId)
|
||||
if (!result.enabled) {
|
||||
setError(result.message || t('customers.smsModal.errorDisabled'))
|
||||
return
|
||||
@@ -90,7 +122,7 @@ export function SendCustomerSmsModal({
|
||||
})
|
||||
} else {
|
||||
const userIds = target.mode === 'selected' ? target.userIds : undefined
|
||||
const result = await sendCustomersBulkSms(trimmed, userIds)
|
||||
const result = await sendCustomersBulkSms(trimmed, userIds, tplId)
|
||||
if (!result.enabled) {
|
||||
setError(result.message || t('customers.smsModal.errorDisabled'))
|
||||
return
|
||||
@@ -154,6 +186,34 @@ export function SendCustomerSmsModal({
|
||||
<div className={modalStyles.body}>
|
||||
{error ? <p className={modalStyles.errorText}>{error}</p> : null}
|
||||
|
||||
<div className={modalStyles.field}>
|
||||
<label htmlFor="customer-sms-template">{t('customers.smsModal.template')}</label>
|
||||
<select
|
||||
id="customer-sms-template"
|
||||
value={templateId}
|
||||
onChange={(e) => applyTemplate(e.target.value)}
|
||||
disabled={isSubmitting || templatesLoading}
|
||||
>
|
||||
<option value="">{t('customers.smsModal.templateNone')}</option>
|
||||
{templates.map((tpl) => (
|
||||
<option key={tpl.id} value={tpl.id}>
|
||||
{tpl.name}
|
||||
{tpl.isVerified ? ' ✓' : ''}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{templatesLoading ? (
|
||||
<p className={modalStyles.modalHint}>{t('customers.smsModal.templateLoading')}</p>
|
||||
) : null}
|
||||
{selectedTemplate ? (
|
||||
<p className={modalStyles.modalHint}>
|
||||
{selectedTemplate.isVerified
|
||||
? t('customers.smsModal.templateHintVerified')
|
||||
: t('customers.smsModal.templateHintPending')}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className={modalStyles.field}>
|
||||
<label htmlFor="customer-sms-message">{t('customers.smsModal.message')}</label>
|
||||
<textarea
|
||||
@@ -161,9 +221,10 @@ export function SendCustomerSmsModal({
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value.slice(0, MAX_LEN))}
|
||||
rows={5}
|
||||
disabled={isSubmitting}
|
||||
disabled={isSubmitting || Boolean(selectedTemplate?.isVerified)}
|
||||
placeholder={t('customers.smsModal.placeholder')}
|
||||
dir={isFa ? 'rtl' : 'auto'}
|
||||
readOnly={Boolean(selectedTemplate?.isVerified)}
|
||||
/>
|
||||
<p className={modalStyles.modalHint}>
|
||||
{message.length} / {MAX_LEN}
|
||||
|
||||
@@ -0,0 +1,536 @@
|
||||
import { useEffect, useRef, useState, type FormEvent } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { MessageSquare, Pencil, Plus, Send, Trash2, X } from 'lucide-react'
|
||||
import { useLocale } from '@meshkee/dashboard-ui'
|
||||
import { ConfirmDeleteModal } from './ConfirmDeleteModal'
|
||||
import { EmptyState } from './EmptyState'
|
||||
import { Tooltip } from './Tooltip'
|
||||
import { useToast } from '../context/ToastContext'
|
||||
import { useT } from '../i18n/useT'
|
||||
import { ApiError, isAbortError } from '../lib/api'
|
||||
import { formatIrtPrice } from '../utils/irtPrice'
|
||||
import {
|
||||
createSmsTemplate,
|
||||
deleteSmsTemplate,
|
||||
getSmsCredit,
|
||||
listSmsTemplates,
|
||||
requestSmsTemplateVerification,
|
||||
updateSmsTemplate,
|
||||
type SmsTemplate,
|
||||
type SmsTemplateVerificationStatus,
|
||||
} from '../services/smsTemplateService'
|
||||
import controlStyles from './CategoryRow.module.css'
|
||||
import fieldStyles from '../pages/AddNewProductPage.module.css'
|
||||
import sharedStyles from '../pages/ProductSettingsPage.module.css'
|
||||
import settingsStyles from '../pages/SettingsPage.module.css'
|
||||
import modalStyles from './VariationsModal.module.css'
|
||||
|
||||
const SMS_TEMPLATE_VARS = ['{{user.name}}', '{{user.lastname}}', '{{user.title}}'] as const
|
||||
const LOW_BALANCE_IRT = 200_000
|
||||
const ANIMATION_MS = 220
|
||||
const MAX_BODY_LEN = 700
|
||||
|
||||
function templateStatus(template: SmsTemplate): SmsTemplateVerificationStatus {
|
||||
if (template.verificationStatus === 'pending' || template.verificationStatus === 'verified') {
|
||||
return template.verificationStatus
|
||||
}
|
||||
if (template.isVerified) return 'verified'
|
||||
return 'free'
|
||||
}
|
||||
|
||||
export function SmsSettingsSection() {
|
||||
const t = useT()
|
||||
const { locale } = useLocale()
|
||||
const isFa = locale === 'fa'
|
||||
const { showToast } = useToast()
|
||||
const [balance, setBalance] = useState(0)
|
||||
const [templates, setTemplates] = useState<SmsTemplate[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
const [listOpen, setListOpen] = useState(false)
|
||||
const [editorOpen, setEditorOpen] = useState(false)
|
||||
const [editing, setEditing] = useState<SmsTemplate | null>(null)
|
||||
const [draftName, setDraftName] = useState('')
|
||||
const [draftBody, setDraftBody] = useState('')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [editorError, setEditorError] = useState('')
|
||||
const [removeTarget, setRemoveTarget] = useState<SmsTemplate | null>(null)
|
||||
const [busyId, setBusyId] = useState<string | null>(null)
|
||||
const bodyRef = useRef<HTMLTextAreaElement>(null)
|
||||
|
||||
const [listMounted, setListMounted] = useState(false)
|
||||
const [listClosing, setListClosing] = useState(false)
|
||||
const [editorMounted, setEditorMounted] = useState(false)
|
||||
const [editorClosing, setEditorClosing] = useState(false)
|
||||
|
||||
async function reload(signal?: AbortSignal) {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const [tpl, creditRes] = await Promise.all([
|
||||
listSmsTemplates(signal),
|
||||
getSmsCredit(signal),
|
||||
])
|
||||
if (signal?.aborted) return
|
||||
setTemplates(tpl.items)
|
||||
setBalance(creditRes.balance ?? creditRes.credit ?? 0)
|
||||
} catch (err) {
|
||||
if (isAbortError(err)) return
|
||||
setError(err instanceof ApiError ? err.message : t('settings.sms.errorLoad'))
|
||||
} finally {
|
||||
if (!signal?.aborted) setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController()
|
||||
void reload(controller.signal)
|
||||
return () => controller.abort()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (listOpen) {
|
||||
setListMounted(true)
|
||||
setListClosing(false)
|
||||
} else if (listMounted) {
|
||||
setListClosing(true)
|
||||
const timer = setTimeout(() => {
|
||||
setListMounted(false)
|
||||
setListClosing(false)
|
||||
}, ANIMATION_MS)
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [listOpen, listMounted])
|
||||
|
||||
useEffect(() => {
|
||||
if (editorOpen) {
|
||||
setEditorMounted(true)
|
||||
setEditorClosing(false)
|
||||
} else if (editorMounted) {
|
||||
setEditorClosing(true)
|
||||
const timer = setTimeout(() => {
|
||||
setEditorMounted(false)
|
||||
setEditorClosing(false)
|
||||
}, ANIMATION_MS)
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [editorOpen, editorMounted])
|
||||
|
||||
useEffect(() => {
|
||||
if (!listMounted && !editorMounted) return
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key !== 'Escape' || submitting) return
|
||||
if (editorOpen) {
|
||||
setEditorOpen(false)
|
||||
return
|
||||
}
|
||||
if (listOpen && removeTarget === null) setListOpen(false)
|
||||
}
|
||||
document.addEventListener('keydown', onKey)
|
||||
return () => document.removeEventListener('keydown', onKey)
|
||||
}, [listMounted, editorMounted, editorOpen, listOpen, submitting, removeTarget])
|
||||
|
||||
const verifiedCount = templates.filter((item) => item.isVerified).length
|
||||
const isLowBalance = balance < LOW_BALANCE_IRT
|
||||
|
||||
function openCreate() {
|
||||
setEditing(null)
|
||||
setDraftName('')
|
||||
setDraftBody('')
|
||||
setEditorError('')
|
||||
setEditorOpen(true)
|
||||
}
|
||||
|
||||
function openEdit(template: SmsTemplate) {
|
||||
setEditing(template)
|
||||
setDraftName(template.name)
|
||||
setDraftBody(template.body)
|
||||
setEditorError('')
|
||||
setEditorOpen(true)
|
||||
}
|
||||
|
||||
function insertVariable(token: string) {
|
||||
const el = bodyRef.current
|
||||
const start = el?.selectionStart ?? draftBody.length
|
||||
const end = el?.selectionEnd ?? draftBody.length
|
||||
const next = `${draftBody.slice(0, start)}${token}${draftBody.slice(end)}`.slice(
|
||||
0,
|
||||
MAX_BODY_LEN,
|
||||
)
|
||||
const inserted = Math.min(token.length, MAX_BODY_LEN - draftBody.slice(0, start).length)
|
||||
const cursor = start + Math.max(0, inserted)
|
||||
setDraftBody(next)
|
||||
requestAnimationFrame(() => {
|
||||
el?.focus()
|
||||
el?.setSelectionRange(cursor, cursor)
|
||||
})
|
||||
}
|
||||
|
||||
async function saveTemplate(e: FormEvent) {
|
||||
e.preventDefault()
|
||||
const name = draftName.trim()
|
||||
const body = draftBody.trim()
|
||||
if (!name || !body) {
|
||||
setEditorError(t('settings.sms.templateRequired'))
|
||||
return
|
||||
}
|
||||
setSubmitting(true)
|
||||
setEditorError('')
|
||||
try {
|
||||
if (editing) {
|
||||
const wasVerified = editing.isVerified
|
||||
await updateSmsTemplate(editing.id, { name, body })
|
||||
showToast(
|
||||
wasVerified
|
||||
? t('settings.sms.templateUpdatedUnverified')
|
||||
: t('settings.sms.templateUpdated'),
|
||||
'success',
|
||||
)
|
||||
} else {
|
||||
await createSmsTemplate({ name, body })
|
||||
showToast(t('settings.sms.templateCreated'), 'success')
|
||||
}
|
||||
setEditorOpen(false)
|
||||
await reload()
|
||||
} catch (err) {
|
||||
setEditorError(err instanceof ApiError ? err.message : t('settings.sms.errorSave'))
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmRemove() {
|
||||
if (!removeTarget) return
|
||||
try {
|
||||
await deleteSmsTemplate(removeTarget.id)
|
||||
showToast(t('settings.sms.templateRemoved'), 'success')
|
||||
setRemoveTarget(null)
|
||||
await reload()
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : t('settings.sms.errorSave'))
|
||||
setRemoveTarget(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRequestVerification(template: SmsTemplate) {
|
||||
setBusyId(template.id)
|
||||
try {
|
||||
await requestSmsTemplateVerification(template.id)
|
||||
showToast(t('settings.sms.requestVerificationDone'), 'success')
|
||||
await reload()
|
||||
} catch (err) {
|
||||
showToast(
|
||||
err instanceof ApiError ? err.message : t('settings.sms.requestVerificationError'),
|
||||
'error',
|
||||
)
|
||||
} finally {
|
||||
setBusyId(null)
|
||||
}
|
||||
}
|
||||
|
||||
function statusBadge(status: SmsTemplateVerificationStatus) {
|
||||
if (status === 'verified') {
|
||||
return {
|
||||
className: settingsStyles.smsBadgeVerified,
|
||||
label: t('settings.sms.badgeVerified'),
|
||||
}
|
||||
}
|
||||
if (status === 'pending') {
|
||||
return {
|
||||
className: settingsStyles.smsBadgePending,
|
||||
label: t('settings.sms.badgePending'),
|
||||
}
|
||||
}
|
||||
return {
|
||||
className: settingsStyles.smsBadgeFree,
|
||||
label: t('settings.sms.badgeFree'),
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className={settingsStyles.gatewayCard}>
|
||||
<div className={settingsStyles.gatewayHeader}>
|
||||
<div>
|
||||
<h3 className={settingsStyles.gatewayTitle}>{t('settings.sms.title')}</h3>
|
||||
<p className={settingsStyles.gatewayDesc}>{t('settings.sms.desc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error ? <p className={sharedStyles.errorText}>{error}</p> : null}
|
||||
|
||||
<div
|
||||
className={`${settingsStyles.smsCreditRow} ${
|
||||
isLowBalance ? settingsStyles.smsCreditRowLow : settingsStyles.smsCreditRowOk
|
||||
}`}
|
||||
>
|
||||
<span className={settingsStyles.smsCreditLabel}>{t('settings.sms.balance')}</span>
|
||||
<strong className={settingsStyles.smsCreditValue}>
|
||||
{loading ? '…' : formatIrtPrice(balance)}
|
||||
</strong>
|
||||
</div>
|
||||
|
||||
<div className={settingsStyles.smsTemplatesSummary}>
|
||||
<div className={settingsStyles.smsTemplatesSummaryText}>
|
||||
<h4 className={settingsStyles.smsTemplatesTitle}>{t('settings.sms.templates')}</h4>
|
||||
<p className={settingsStyles.smsTemplatesCounts}>
|
||||
{loading
|
||||
? t('settings.sms.loading')
|
||||
: t('settings.sms.templatesCounts', {
|
||||
total: templates.length,
|
||||
verified: verifiedCount,
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className={settingsStyles.saveBtn}
|
||||
onClick={() => setListOpen(true)}
|
||||
disabled={loading}
|
||||
>
|
||||
{t('settings.sms.manageTemplates')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{listMounted
|
||||
? createPortal(
|
||||
<div
|
||||
className={`${modalStyles.overlay} ${
|
||||
listClosing ? modalStyles.overlayOut : modalStyles.overlayIn
|
||||
}`}
|
||||
onClick={() => {
|
||||
if (!submitting && !editorOpen) setListOpen(false)
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`${modalStyles.modal} ${settingsStyles.smsTemplatesModal} ${
|
||||
listClosing ? modalStyles.modalOut : modalStyles.modalIn
|
||||
}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="sms-templates-list-title"
|
||||
lang={isFa ? 'fa' : 'en'}
|
||||
dir={isFa ? 'rtl' : 'ltr'}
|
||||
>
|
||||
<div className={modalStyles.header}>
|
||||
<div>
|
||||
<h3 id="sms-templates-list-title" className={modalStyles.title}>
|
||||
{t('settings.sms.templates')}
|
||||
</h3>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className={modalStyles.closeBtn}
|
||||
onClick={() => setListOpen(false)}
|
||||
disabled={submitting}
|
||||
aria-label={t('common.close')}
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={modalStyles.body}>
|
||||
{templates.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={MessageSquare}
|
||||
message={t('settings.sms.templatesEmpty')}
|
||||
actionLabel={t('settings.sms.addTemplate')}
|
||||
onAction={openCreate}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className={settingsStyles.smsModalToolbar}>
|
||||
<p className={modalStyles.modalHint}>
|
||||
{t('settings.sms.templatesCounts', {
|
||||
total: templates.length,
|
||||
verified: verifiedCount,
|
||||
})}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
className={settingsStyles.saveBtn}
|
||||
onClick={openCreate}
|
||||
disabled={submitting}
|
||||
>
|
||||
<Plus size={16} />
|
||||
{t('settings.sms.addTemplate')}
|
||||
</button>
|
||||
</div>
|
||||
<ul className={settingsStyles.smsTemplateList}>
|
||||
{templates.map((template) => {
|
||||
const status = templateStatus(template)
|
||||
const badge = statusBadge(status)
|
||||
return (
|
||||
<li key={template.id} className={settingsStyles.smsTemplateRow}>
|
||||
<div className={settingsStyles.smsTemplateMeta}>
|
||||
<div className={settingsStyles.smsTemplateTop}>
|
||||
<strong className={settingsStyles.smsTemplateName}>
|
||||
{template.name}
|
||||
</strong>
|
||||
<span className={badge.className}>{badge.label}</span>
|
||||
</div>
|
||||
<p className={settingsStyles.smsTemplateBody} title={template.body}>
|
||||
{template.body}
|
||||
</p>
|
||||
</div>
|
||||
<div className={settingsStyles.smsTemplateActions}>
|
||||
{status === 'free' ? (
|
||||
<Tooltip label={t('settings.sms.requestVerification')}>
|
||||
<button
|
||||
type="button"
|
||||
className={controlStyles.controlBtn}
|
||||
onClick={() => void handleRequestVerification(template)}
|
||||
disabled={busyId === template.id || submitting}
|
||||
aria-label={t('settings.sms.requestVerification')}
|
||||
>
|
||||
<Send size={15} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
) : null}
|
||||
<Tooltip label={t('settings.sms.editTemplate')}>
|
||||
<button
|
||||
type="button"
|
||||
className={controlStyles.controlBtn}
|
||||
onClick={() => openEdit(template)}
|
||||
aria-label={t('settings.sms.editTemplate')}
|
||||
>
|
||||
<Pencil size={15} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<Tooltip label={t('settings.sms.deleteTemplate')}>
|
||||
<button
|
||||
type="button"
|
||||
className={`${controlStyles.controlBtn} ${controlStyles.danger}`}
|
||||
onClick={() => setRemoveTarget(template)}
|
||||
aria-label={t('settings.sms.deleteTemplate')}
|
||||
>
|
||||
<Trash2 size={15} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)
|
||||
: null}
|
||||
|
||||
{editorMounted
|
||||
? createPortal(
|
||||
<div
|
||||
className={`${modalStyles.overlay} ${modalStyles.overlayNested} ${
|
||||
editorClosing ? modalStyles.overlayOut : modalStyles.overlayIn
|
||||
}`}
|
||||
onClick={() => {
|
||||
if (!submitting) setEditorOpen(false)
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`${modalStyles.modal} ${modalStyles.modalFormWide} ${
|
||||
editorClosing ? modalStyles.modalOut : modalStyles.modalIn
|
||||
}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="sms-template-editor-title"
|
||||
lang={isFa ? 'fa' : 'en'}
|
||||
dir={isFa ? 'rtl' : 'ltr'}
|
||||
>
|
||||
<div className={modalStyles.header}>
|
||||
<div>
|
||||
<h3 id="sms-template-editor-title" className={modalStyles.title}>
|
||||
{editing
|
||||
? t('settings.sms.editTemplate')
|
||||
: t('settings.sms.addTemplate')}
|
||||
</h3>
|
||||
{editing?.isVerified ? (
|
||||
<p className={modalStyles.subtitle}>
|
||||
{t('settings.sms.editClearsVerification')}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className={modalStyles.closeBtn}
|
||||
onClick={() => setEditorOpen(false)}
|
||||
disabled={submitting}
|
||||
aria-label={t('common.close')}
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form className={modalStyles.body} onSubmit={(e) => void saveTemplate(e)}>
|
||||
{editorError ? <p className={modalStyles.errorText}>{editorError}</p> : null}
|
||||
<label className={fieldStyles.field}>
|
||||
{t('settings.sms.templateName')}
|
||||
<input
|
||||
value={draftName}
|
||||
onChange={(e) => setDraftName(e.target.value)}
|
||||
disabled={submitting}
|
||||
/>
|
||||
</label>
|
||||
<div className={`${fieldStyles.field} ${settingsStyles.smsEditorField}`}>
|
||||
<span>{t('settings.sms.templateBody')}</span>
|
||||
<div className={settingsStyles.smsVarChips} role="group" aria-label={t('settings.sms.variablesHint')}>
|
||||
{SMS_TEMPLATE_VARS.map((token) => (
|
||||
<button
|
||||
key={token}
|
||||
type="button"
|
||||
className={settingsStyles.smsVarChip}
|
||||
onClick={() => insertVariable(token)}
|
||||
disabled={submitting || draftBody.length >= MAX_BODY_LEN}
|
||||
dir="ltr"
|
||||
>
|
||||
{token}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<textarea
|
||||
ref={bodyRef}
|
||||
value={draftBody}
|
||||
onChange={(e) => setDraftBody(e.target.value.slice(0, MAX_BODY_LEN))}
|
||||
rows={5}
|
||||
disabled={submitting}
|
||||
/>
|
||||
</div>
|
||||
<div className={modalStyles.actions}>
|
||||
<button
|
||||
type="button"
|
||||
className={modalStyles.cancelBtn}
|
||||
onClick={() => setEditorOpen(false)}
|
||||
disabled={submitting}
|
||||
>
|
||||
{t('common.cancel')}
|
||||
</button>
|
||||
<button type="submit" className={modalStyles.submitBtn} disabled={submitting}>
|
||||
{submitting ? t('settings.sms.saving') : t('settings.sms.saveTemplate')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)
|
||||
: null}
|
||||
|
||||
<ConfirmDeleteModal
|
||||
open={removeTarget !== null}
|
||||
title={t('settings.sms.deleteTitle')}
|
||||
message={
|
||||
removeTarget
|
||||
? t('settings.sms.deleteMessage', { name: removeTarget.name })
|
||||
: ''
|
||||
}
|
||||
onCancel={() => setRemoveTarget(null)}
|
||||
onConfirm={() => void confirmRemove()}
|
||||
/>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user