418 lines
13 KiB
TypeScript
418 lines
13 KiB
TypeScript
// React Imports
|
|
import { useState, useEffect } from 'react'
|
|
|
|
// MUI Imports
|
|
import Button from '@mui/material/Button'
|
|
import Drawer from '@mui/material/Drawer'
|
|
import IconButton from '@mui/material/IconButton'
|
|
import MenuItem from '@mui/material/MenuItem'
|
|
import Typography from '@mui/material/Typography'
|
|
import Box from '@mui/material/Box'
|
|
|
|
// Third-party Imports
|
|
import { useForm, Controller } from 'react-hook-form'
|
|
|
|
// Component Imports
|
|
import CustomTextField from '@core/components/mui/TextField'
|
|
|
|
// Types
|
|
import { CampaignRule, RuleType, RewardType, CampaignRuleRequest } from '@/types/services/campaign'
|
|
import { useCampaignRulesMutation } from '@/services/mutations/campaign'
|
|
|
|
type Props = {
|
|
open: boolean
|
|
handleClose: () => void
|
|
campaignId: string // Required campaign ID
|
|
data?: CampaignRule | null // Data for edit mode
|
|
}
|
|
|
|
type FormValidateType = {
|
|
rule_type: RuleType
|
|
condition_value: string
|
|
reward_type: RewardType
|
|
reward_value: number
|
|
reward_subtype: string
|
|
reward_ref_id: string
|
|
}
|
|
|
|
// Initial form data
|
|
const initialData: FormValidateType = {
|
|
rule_type: 'SPEND',
|
|
condition_value: '',
|
|
reward_type: 'POINTS',
|
|
reward_value: 0,
|
|
reward_subtype: '',
|
|
reward_ref_id: ''
|
|
}
|
|
|
|
const AddEditCampaignRuleDrawer = (props: Props) => {
|
|
// Props
|
|
const { open, handleClose, campaignId, data } = props
|
|
|
|
// States
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
|
|
const { createCampaignRule, updateCampaignRule } = useCampaignRulesMutation()
|
|
|
|
// Determine if this is edit mode
|
|
const isEditMode = Boolean(data?.id)
|
|
|
|
// Hooks
|
|
const {
|
|
control,
|
|
reset: resetForm,
|
|
handleSubmit,
|
|
watch,
|
|
formState: { errors }
|
|
} = useForm<FormValidateType>({
|
|
defaultValues: initialData
|
|
})
|
|
|
|
const watchedRewardType = watch('reward_type')
|
|
|
|
// Effect to populate form when editing
|
|
useEffect(() => {
|
|
if (isEditMode && data) {
|
|
const formData: FormValidateType = {
|
|
rule_type: data.rule_type,
|
|
condition_value: data.condition_value || '',
|
|
reward_type: data.reward_type,
|
|
reward_value: data.reward_value || 0,
|
|
reward_subtype: data.reward_subtype || '',
|
|
reward_ref_id: data.reward_ref_id || ''
|
|
}
|
|
|
|
resetForm(formData)
|
|
} else {
|
|
// Reset to initial data for add mode
|
|
resetForm(initialData)
|
|
}
|
|
}, [data, isEditMode, resetForm])
|
|
|
|
const handleFormSubmit = async (formData: FormValidateType) => {
|
|
try {
|
|
setIsSubmitting(true)
|
|
|
|
// Create CampaignRuleRequest object
|
|
const ruleRequest: CampaignRuleRequest = {
|
|
campaign_id: campaignId,
|
|
rule_type: formData.rule_type,
|
|
condition_value: formData.condition_value.trim() || undefined,
|
|
reward_type: formData.reward_type,
|
|
reward_value: formData.reward_value > 0 ? formData.reward_value : undefined,
|
|
reward_subtype: formData.reward_subtype.trim() || undefined,
|
|
reward_ref_id: formData.reward_ref_id.trim() || undefined
|
|
}
|
|
|
|
if (isEditMode && data?.id) {
|
|
// Update existing campaign rule
|
|
updateCampaignRule.mutate(
|
|
{ id: data.id, payload: ruleRequest },
|
|
{
|
|
onSuccess: () => {
|
|
handleReset()
|
|
handleClose()
|
|
},
|
|
onError: error => {
|
|
console.error('Error updating campaign rule:', error)
|
|
}
|
|
}
|
|
)
|
|
} else {
|
|
// Create new campaign rule
|
|
createCampaignRule.mutate(ruleRequest, {
|
|
onSuccess: () => {
|
|
handleReset()
|
|
handleClose()
|
|
},
|
|
onError: error => {
|
|
console.error('Error creating campaign rule:', error)
|
|
}
|
|
})
|
|
}
|
|
} catch (error) {
|
|
console.error('Error submitting campaign rule:', error)
|
|
} finally {
|
|
setIsSubmitting(false)
|
|
}
|
|
}
|
|
|
|
const handleReset = () => {
|
|
handleClose()
|
|
resetForm(initialData)
|
|
}
|
|
|
|
// Helper function to get rule type options
|
|
const getRuleTypeOptions = () => [
|
|
{ value: 'TIER', label: 'Tier Based', icon: 'tabler-medal' },
|
|
{ value: 'SPEND', label: 'Spending Amount', icon: 'tabler-wallet' },
|
|
{ value: 'PRODUCT', label: 'Product Based', icon: 'tabler-package' },
|
|
{ value: 'CATEGORY', label: 'Category Based', icon: 'tabler-category' },
|
|
{ value: 'DAY', label: 'Day Based', icon: 'tabler-calendar' },
|
|
{ value: 'LOCATION', label: 'Location Based', icon: 'tabler-map-pin' }
|
|
]
|
|
|
|
// Helper function to get reward type options
|
|
const getRewardTypeOptions = () => [
|
|
{ value: 'POINTS', label: 'Points', icon: 'tabler-coins' },
|
|
{ value: 'TOKENS', label: 'Tokens', icon: 'tabler-ticket' },
|
|
{ value: 'REWARD', label: 'Reward Item', icon: 'tabler-gift' }
|
|
]
|
|
|
|
// Helper function to get condition placeholder based on rule type
|
|
const getConditionPlaceholder = (ruleType: RuleType) => {
|
|
switch (ruleType) {
|
|
case 'TIER':
|
|
return 'e.g., GOLD, SILVER, BRONZE'
|
|
case 'SPEND':
|
|
return 'e.g., 100000 (minimum spend amount)'
|
|
case 'PRODUCT':
|
|
return 'e.g., product_id_123'
|
|
case 'CATEGORY':
|
|
return 'e.g., electronics, fashion'
|
|
case 'DAY':
|
|
return 'e.g., monday, weekend'
|
|
case 'LOCATION':
|
|
return 'e.g., jakarta, bandung'
|
|
default:
|
|
return 'Enter condition value'
|
|
}
|
|
}
|
|
|
|
// Helper function to get reward subtype options based on reward type
|
|
const getRewardSubtypeOptions = (rewardType: RewardType) => {
|
|
switch (rewardType) {
|
|
case 'POINTS':
|
|
return ['bonus', 'cashback', 'referral']
|
|
case 'TOKENS':
|
|
return ['game', 'lottery', 'voucher']
|
|
case 'REWARD':
|
|
return ['product', 'discount', 'currency', 'experience']
|
|
default:
|
|
return []
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Drawer
|
|
open={open}
|
|
anchor='right'
|
|
variant='temporary'
|
|
onClose={handleReset}
|
|
ModalProps={{ keepMounted: true }}
|
|
sx={{
|
|
'& .MuiDrawer-paper': {
|
|
width: { xs: 300, sm: 400 },
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
height: '100%'
|
|
}
|
|
}}
|
|
>
|
|
{/* Sticky Header */}
|
|
<Box
|
|
sx={{
|
|
position: 'sticky',
|
|
top: 0,
|
|
zIndex: 10,
|
|
backgroundColor: 'background.paper',
|
|
borderBottom: 1,
|
|
borderColor: 'divider'
|
|
}}
|
|
>
|
|
<div className='flex items-center justify-between plb-5 pli-6'>
|
|
<Typography variant='h5'>{isEditMode ? 'Edit Campaign Rule' : 'Add New Campaign Rule'}</Typography>
|
|
<IconButton size='small' onClick={handleReset}>
|
|
<i className='tabler-x text-2xl text-textPrimary' />
|
|
</IconButton>
|
|
</div>
|
|
</Box>
|
|
|
|
{/* Scrollable Content */}
|
|
<Box sx={{ flex: 1, overflowY: 'auto' }}>
|
|
<form id='campaign-rule-form' onSubmit={handleSubmit(handleFormSubmit)}>
|
|
<div className='flex flex-col gap-6 p-6'>
|
|
{/* Rule Type */}
|
|
<div>
|
|
<Typography variant='body2' className='mb-2'>
|
|
Rule Type <span className='text-red-500'>*</span>
|
|
</Typography>
|
|
<Controller
|
|
name='rule_type'
|
|
control={control}
|
|
rules={{ required: 'Rule type is required' }}
|
|
render={({ field }) => (
|
|
<CustomTextField
|
|
{...field}
|
|
select
|
|
fullWidth
|
|
error={!!errors.rule_type}
|
|
helperText={errors.rule_type?.message}
|
|
>
|
|
{getRuleTypeOptions().map(option => (
|
|
<MenuItem key={option.value} value={option.value}>
|
|
<div className='flex items-center gap-2'>
|
|
<i className={`${option.icon} text-primary`} />
|
|
{option.label}
|
|
</div>
|
|
</MenuItem>
|
|
))}
|
|
</CustomTextField>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Condition Value */}
|
|
<div>
|
|
<Typography variant='body2' className='mb-2'>
|
|
Condition Value
|
|
</Typography>
|
|
<Controller
|
|
name='condition_value'
|
|
control={control}
|
|
render={({ field }) => (
|
|
<CustomTextField
|
|
{...field}
|
|
fullWidth
|
|
placeholder={getConditionPlaceholder(watch('rule_type'))}
|
|
error={!!errors.condition_value}
|
|
helperText={errors.condition_value?.message}
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Reward Type */}
|
|
<div>
|
|
<Typography variant='body2' className='mb-2'>
|
|
Reward Type <span className='text-red-500'>*</span>
|
|
</Typography>
|
|
<Controller
|
|
name='reward_type'
|
|
control={control}
|
|
rules={{ required: 'Reward type is required' }}
|
|
render={({ field }) => (
|
|
<CustomTextField
|
|
{...field}
|
|
select
|
|
fullWidth
|
|
error={!!errors.reward_type}
|
|
helperText={errors.reward_type?.message}
|
|
>
|
|
{getRewardTypeOptions().map(option => (
|
|
<MenuItem key={option.value} value={option.value}>
|
|
<div className='flex items-center gap-2'>
|
|
<i className={`${option.icon} text-primary`} />
|
|
{option.label}
|
|
</div>
|
|
</MenuItem>
|
|
))}
|
|
</CustomTextField>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Reward Value */}
|
|
<div>
|
|
<Typography variant='body2' className='mb-2'>
|
|
Reward Value
|
|
</Typography>
|
|
<Controller
|
|
name='reward_value'
|
|
control={control}
|
|
rules={{
|
|
min: { value: 1, message: 'Reward value must be at least 1' }
|
|
}}
|
|
render={({ field }) => (
|
|
<CustomTextField
|
|
{...field}
|
|
fullWidth
|
|
type='number'
|
|
placeholder={`Enter ${watchedRewardType.toLowerCase()} amount`}
|
|
error={!!errors.reward_value}
|
|
helperText={errors.reward_value?.message}
|
|
onChange={e => field.onChange(Number(e.target.value))}
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Reward Subtype */}
|
|
<div>
|
|
<Typography variant='body2' className='mb-2'>
|
|
Reward Subtype
|
|
</Typography>
|
|
<Controller
|
|
name='reward_subtype'
|
|
control={control}
|
|
render={({ field }) => (
|
|
<CustomTextField
|
|
{...field}
|
|
select
|
|
fullWidth
|
|
error={!!errors.reward_subtype}
|
|
helperText={errors.reward_subtype?.message}
|
|
>
|
|
<MenuItem value=''>
|
|
<em>None</em>
|
|
</MenuItem>
|
|
{getRewardSubtypeOptions(watchedRewardType).map(subtype => (
|
|
<MenuItem key={subtype} value={subtype}>
|
|
{subtype.charAt(0).toUpperCase() + subtype.slice(1)}
|
|
</MenuItem>
|
|
))}
|
|
</CustomTextField>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Reward Reference ID */}
|
|
<div>
|
|
<Typography variant='body2' className='mb-2'>
|
|
Reward Reference ID
|
|
</Typography>
|
|
<Controller
|
|
name='reward_ref_id'
|
|
control={control}
|
|
render={({ field }) => (
|
|
<CustomTextField
|
|
{...field}
|
|
fullWidth
|
|
placeholder='e.g., product_id, voucher_id (optional)'
|
|
error={!!errors.reward_ref_id}
|
|
helperText={errors.reward_ref_id?.message || 'Optional reference to specific reward item'}
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</Box>
|
|
|
|
{/* Sticky Footer */}
|
|
<Box
|
|
sx={{
|
|
position: 'sticky',
|
|
bottom: 0,
|
|
zIndex: 10,
|
|
backgroundColor: 'background.paper',
|
|
borderTop: 1,
|
|
borderColor: 'divider',
|
|
p: 3
|
|
}}
|
|
>
|
|
<div className='flex items-center gap-4'>
|
|
<Button variant='contained' type='submit' form='campaign-rule-form' disabled={isSubmitting}>
|
|
{isSubmitting ? (isEditMode ? 'Updating...' : 'Creating...') : isEditMode ? 'Update Rule' : 'Create Rule'}
|
|
</Button>
|
|
<Button variant='outlined' color='error' onClick={handleReset} disabled={isSubmitting}>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</Box>
|
|
</Drawer>
|
|
)
|
|
}
|
|
|
|
export default AddEditCampaignRuleDrawer
|