campaign detail
This commit is contained in:
efrilm
parent
e55357e305
commit
1bf2bad52c
@ -0,0 +1,7 @@
|
|||||||
|
import CampaignDetailContent from '@/views/apps/marketing/campaign/detail'
|
||||||
|
|
||||||
|
const CampaignDetailPage = () => {
|
||||||
|
return <CampaignDetailContent />
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CampaignDetailPage
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import { CampaignRequest } from '@/types/services/campaign'
|
import { CampaignRequest, CampaignRuleRequest } from '@/types/services/campaign'
|
||||||
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||||
import { toast } from 'react-toastify'
|
import { toast } from 'react-toastify'
|
||||||
import { api } from '../api'
|
import { api } from '../api'
|
||||||
@ -50,3 +50,51 @@ export const useCampaignsMutation = () => {
|
|||||||
|
|
||||||
return { createCampaign, updateCampaign, deleteCampaign }
|
return { createCampaign, updateCampaign, deleteCampaign }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const useCampaignRulesMutation = () => {
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
|
||||||
|
const createCampaignRule = useMutation({
|
||||||
|
mutationFn: async (newCampaignRule: CampaignRuleRequest) => {
|
||||||
|
const response = await api.post('/marketing/campaign-rules', newCampaignRule)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
toast.success('CampaignRule created successfully!')
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['campaign-rules/campaign'] })
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
toast.error(error.response?.data?.errors?.[0]?.cause || 'Create failed')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const updateCampaignRule = useMutation({
|
||||||
|
mutationFn: async ({ id, payload }: { id: string; payload: CampaignRuleRequest }) => {
|
||||||
|
const response = await api.put(`/marketing/campaign-rules/${id}`, payload)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
toast.success('CampaignRule updated successfully!')
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['campaign-rules/campaign'] })
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
toast.error(error.response?.data?.errors?.[0]?.cause || 'Update failed')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const deleteCampaignRule = useMutation({
|
||||||
|
mutationFn: async (id: string) => {
|
||||||
|
const response = await api.delete(`/marketing/campaign-rules/${id}`)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
toast.success('CampaignRule deleted successfully!')
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['campaign-rules/campaign'] })
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
toast.error(error.response?.data?.errors?.[0]?.cause || 'Delete failed')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return { createCampaignRule, updateCampaignRule, deleteCampaignRule }
|
||||||
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import { useQuery } from '@tanstack/react-query'
|
import { useQuery } from '@tanstack/react-query'
|
||||||
import { api } from '../api'
|
import { api } from '../api'
|
||||||
import { Campaign, Campaigns } from '@/types/services/campaign'
|
import { Campaign, CampaignRule, Campaigns } from '@/types/services/campaign'
|
||||||
|
|
||||||
interface CampaignQueryParams {
|
interface CampaignQueryParams {
|
||||||
page?: number
|
page?: number
|
||||||
@ -44,3 +44,13 @@ export function useCampaignById(id: string) {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function useCampaignRulesByCampaignId(id: string) {
|
||||||
|
return useQuery<CampaignRule[]>({
|
||||||
|
queryKey: ['campaign-rules/campaign', id],
|
||||||
|
queryFn: async () => {
|
||||||
|
const res = await api.get(`/marketing/campaign-rules/campaign/${id}`)
|
||||||
|
return res.data.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@ -50,11 +50,13 @@ export interface CampaignRequest {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface CampaignRuleRequest {
|
export interface CampaignRuleRequest {
|
||||||
rule_type: RuleType
|
campaign_id: string
|
||||||
|
rule_type: 'TIER' | 'SPEND' | 'PRODUCT' | 'CATEGORY' | 'DAY' | 'LOCATION'
|
||||||
condition_value?: string
|
condition_value?: string
|
||||||
reward_type: RewardType
|
reward_type: 'POINTS' | 'TOKENS' | 'REWARD'
|
||||||
reward_value?: number
|
reward_value?: number
|
||||||
reward_subtype?: string
|
reward_subtype?: string
|
||||||
|
reward_ref_id?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Campaigns {
|
export interface Campaigns {
|
||||||
|
|||||||
@ -141,85 +141,6 @@ const getCampaignTypeColor = (type: string): ThemeColor => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const getCampaignTypeIcon = (type: string): string => {
|
|
||||||
switch (type) {
|
|
||||||
case 'POINTS':
|
|
||||||
return 'tabler-coins'
|
|
||||||
case 'TOKENS':
|
|
||||||
return 'tabler-ticket'
|
|
||||||
case 'REWARD':
|
|
||||||
return 'tabler-gift'
|
|
||||||
case 'MIXED':
|
|
||||||
return 'tabler-layers-intersect'
|
|
||||||
default:
|
|
||||||
return 'tabler-tag'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const getRewardTypeColor = (rewardType: string): ThemeColor => {
|
|
||||||
switch (rewardType) {
|
|
||||||
case 'POINTS':
|
|
||||||
return 'primary'
|
|
||||||
case 'TOKENS':
|
|
||||||
return 'success'
|
|
||||||
case 'REWARD':
|
|
||||||
return 'warning'
|
|
||||||
default:
|
|
||||||
return 'info'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const getRewardTypeIcon = (rewardType: string): string => {
|
|
||||||
switch (rewardType) {
|
|
||||||
case 'POINTS':
|
|
||||||
return 'tabler-coins'
|
|
||||||
case 'TOKENS':
|
|
||||||
return 'tabler-ticket'
|
|
||||||
case 'REWARD':
|
|
||||||
return 'tabler-percentage'
|
|
||||||
default:
|
|
||||||
return 'tabler-gift'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const formatRewardValue = (rewardType: string, rewardValue?: number, rewardSubtype?: string): string => {
|
|
||||||
if (!rewardValue) return '-'
|
|
||||||
|
|
||||||
switch (rewardType) {
|
|
||||||
case 'POINTS':
|
|
||||||
return `${formatPoints(rewardValue)} Poin`
|
|
||||||
case 'TOKENS':
|
|
||||||
return formatCurrency(rewardValue)
|
|
||||||
case 'REWARD':
|
|
||||||
if (rewardSubtype === 'DISCOUNT_PERCENT') {
|
|
||||||
return `${rewardValue}%`
|
|
||||||
}
|
|
||||||
return formatCurrency(rewardValue)
|
|
||||||
default:
|
|
||||||
return rewardValue.toString()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const getMinimumPurchase = (campaign: Campaign): number => {
|
|
||||||
// Check rules for spend condition
|
|
||||||
const spendRule = campaign.rules?.find(rule => rule.rule_type === 'SPEND')
|
|
||||||
if (spendRule?.condition_value) {
|
|
||||||
return parseInt(spendRule.condition_value)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fallback to metadata
|
|
||||||
return campaign.metadata?.minPurchase || 0
|
|
||||||
}
|
|
||||||
|
|
||||||
const getPrimaryReward = (campaign: Campaign): { type: string; value?: number; subtype?: string } => {
|
|
||||||
const primaryRule = campaign.rules?.[0]
|
|
||||||
return {
|
|
||||||
type: primaryRule?.reward_type || 'POINTS',
|
|
||||||
value: primaryRule?.reward_value,
|
|
||||||
subtype: primaryRule?.reward_subtype
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Column Definitions
|
// Column Definitions
|
||||||
const columnHelper = createColumnHelper<CampaignWithAction>()
|
const columnHelper = createColumnHelper<CampaignWithAction>()
|
||||||
|
|
||||||
@ -331,7 +252,7 @@ const CampaignListTable = () => {
|
|||||||
cell: ({ row }) => (
|
cell: ({ row }) => (
|
||||||
<div className='flex items-center gap-4'>
|
<div className='flex items-center gap-4'>
|
||||||
<div className='flex flex-col'>
|
<div className='flex flex-col'>
|
||||||
<Link href={getLocalizedUrl(`/apps/campaigns/${row.original.id}/detail`, locale as Locale)}>
|
<Link href={getLocalizedUrl(`/apps/marketing/campaign/${row.original.id}/detail`, locale as Locale)}>
|
||||||
<Typography className='font-medium cursor-pointer hover:underline text-primary'>
|
<Typography className='font-medium cursor-pointer hover:underline text-primary'>
|
||||||
{row.original.name}
|
{row.original.name}
|
||||||
</Typography>
|
</Typography>
|
||||||
@ -356,38 +277,6 @@ const CampaignListTable = () => {
|
|||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}),
|
}),
|
||||||
columnHelper.accessor('metadata', {
|
|
||||||
header: 'Minimum Pembelian',
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const minPurchase = getMinimumPurchase(row.original)
|
|
||||||
return (
|
|
||||||
<div className='flex items-center gap-2'>
|
|
||||||
<Icon className='tabler-coin' sx={{ color: 'var(--mui-palette-primary-main)' }} />
|
|
||||||
<Typography color='text.primary'>{minPurchase > 0 ? formatCurrency(minPurchase) : '-'}</Typography>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
columnHelper.accessor('rules', {
|
|
||||||
header: 'Reward Utama',
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const reward = getPrimaryReward(row.original)
|
|
||||||
return (
|
|
||||||
<div className='flex items-center gap-2'>
|
|
||||||
<Icon
|
|
||||||
className={getRewardTypeIcon(reward.type)}
|
|
||||||
sx={{ color: `var(--mui-palette-${getRewardTypeColor(reward.type)}-main)` }}
|
|
||||||
/>
|
|
||||||
<Chip
|
|
||||||
label={formatRewardValue(reward.type, reward.value, reward.subtype)}
|
|
||||||
color={getRewardTypeColor(reward.type)}
|
|
||||||
variant='tonal'
|
|
||||||
size='small'
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
columnHelper.accessor('start_date', {
|
columnHelper.accessor('start_date', {
|
||||||
header: 'Periode Kampanye',
|
header: 'Periode Kampanye',
|
||||||
cell: ({ row }) => (
|
cell: ({ row }) => (
|
||||||
|
|||||||
@ -0,0 +1,417 @@
|
|||||||
|
// 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
|
||||||
401
src/views/apps/marketing/campaign/detail/index.tsx
Normal file
401
src/views/apps/marketing/campaign/detail/index.tsx
Normal file
@ -0,0 +1,401 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import Loading from '@/components/layout/shared/Loading'
|
||||||
|
import { useCampaignById, useCampaignRulesByCampaignId } from '@/services/queries/campaign'
|
||||||
|
import { CampaignRule, RewardType, RuleType } from '@/types/services/campaign'
|
||||||
|
import { formatCurrency } from '@/utils/transform'
|
||||||
|
import {
|
||||||
|
Avatar,
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardContent,
|
||||||
|
Chip,
|
||||||
|
Typography,
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableContainer,
|
||||||
|
TableHead,
|
||||||
|
TableRow,
|
||||||
|
Paper,
|
||||||
|
Box,
|
||||||
|
Divider,
|
||||||
|
Button,
|
||||||
|
IconButton,
|
||||||
|
Tooltip,
|
||||||
|
Dialog,
|
||||||
|
DialogTitle,
|
||||||
|
DialogContent,
|
||||||
|
DialogActions,
|
||||||
|
DialogContentText
|
||||||
|
} from '@mui/material'
|
||||||
|
// Using Tabler icons instead of Material-UI icons
|
||||||
|
import { useParams } from 'next/navigation'
|
||||||
|
import { useState } from 'react'
|
||||||
|
|
||||||
|
const CampaignDetailContent = () => {
|
||||||
|
const params = useParams()
|
||||||
|
|
||||||
|
// State for dialogs
|
||||||
|
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
|
||||||
|
const [selectedRuleId, setSelectedRuleId] = useState<string | null>(null)
|
||||||
|
const [selectedRule, setSelectedRule] = useState<CampaignRule | null>(null)
|
||||||
|
|
||||||
|
const { data: campaign, isLoading, error } = useCampaignById(params?.id as string)
|
||||||
|
const { data: rules, isLoading: rulesLoading, error: rulesError } = useCampaignRulesByCampaignId(params?.id as string)
|
||||||
|
|
||||||
|
if (isLoading) return <Loading />
|
||||||
|
|
||||||
|
// Action handlers
|
||||||
|
const handleAddRule = () => {
|
||||||
|
// TODO: Implement add rule functionality
|
||||||
|
// Could open a modal/form or navigate to add rule page
|
||||||
|
console.log('Add new rule for campaign:', params?.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEditRule = (rule: CampaignRule) => {
|
||||||
|
// TODO: Implement edit rule functionality
|
||||||
|
// Could open a modal/form or navigate to edit rule page
|
||||||
|
console.log('Edit rule:', rule.id)
|
||||||
|
setSelectedRule(rule)
|
||||||
|
// You might want to open an edit modal here
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDeleteRule = (rule: CampaignRule) => {
|
||||||
|
setSelectedRule(rule)
|
||||||
|
setSelectedRuleId(rule.id)
|
||||||
|
setDeleteDialogOpen(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const confirmDeleteRule = async () => {
|
||||||
|
if (selectedRuleId) {
|
||||||
|
try {
|
||||||
|
// TODO: Implement actual delete API call
|
||||||
|
console.log('Deleting rule:', selectedRuleId)
|
||||||
|
// await deleteRuleMutation.mutateAsync(selectedRuleId)
|
||||||
|
|
||||||
|
// Close dialog and reset state
|
||||||
|
setDeleteDialogOpen(false)
|
||||||
|
setSelectedRuleId(null)
|
||||||
|
setSelectedRule(null)
|
||||||
|
|
||||||
|
// Show success message or refresh data
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to delete rule:', error)
|
||||||
|
// Handle error (show toast, etc.)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const cancelDelete = () => {
|
||||||
|
setDeleteDialogOpen(false)
|
||||||
|
setSelectedRuleId(null)
|
||||||
|
setSelectedRule(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to format rule type display
|
||||||
|
const formatRuleType = (ruleType: RuleType) => {
|
||||||
|
const ruleTypeLabels: Record<RuleType, string> = {
|
||||||
|
TIER: 'Tier Based',
|
||||||
|
SPEND: 'Spending Amount',
|
||||||
|
PRODUCT: 'Product Based',
|
||||||
|
CATEGORY: 'Category Based',
|
||||||
|
DAY: 'Day Based',
|
||||||
|
LOCATION: 'Location Based'
|
||||||
|
}
|
||||||
|
return ruleTypeLabels[ruleType] || ruleType
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to get rule type color
|
||||||
|
const getRuleTypeColor = (ruleType: RuleType): 'primary' | 'secondary' | 'success' | 'warning' | 'info' => {
|
||||||
|
const colorMap: Record<RuleType, 'primary' | 'secondary' | 'success' | 'warning' | 'info'> = {
|
||||||
|
TIER: 'primary',
|
||||||
|
SPEND: 'success',
|
||||||
|
PRODUCT: 'info',
|
||||||
|
CATEGORY: 'warning',
|
||||||
|
DAY: 'secondary',
|
||||||
|
LOCATION: 'primary'
|
||||||
|
}
|
||||||
|
return colorMap[ruleType] || 'primary'
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to format reward type display
|
||||||
|
const formatRewardType = (rewardType: RewardType) => {
|
||||||
|
const rewardTypeLabels: Record<RewardType, string> = {
|
||||||
|
POINTS: 'Points',
|
||||||
|
TOKENS: 'Tokens',
|
||||||
|
REWARD: 'Reward Item'
|
||||||
|
}
|
||||||
|
return rewardTypeLabels[rewardType] || rewardType
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to get reward type color
|
||||||
|
const getRewardTypeColor = (rewardType: RewardType): 'primary' | 'secondary' | 'success' => {
|
||||||
|
const colorMap: Record<RewardType, 'primary' | 'secondary' | 'success'> = {
|
||||||
|
POINTS: 'success',
|
||||||
|
TOKENS: 'primary',
|
||||||
|
REWARD: 'secondary'
|
||||||
|
}
|
||||||
|
return colorMap[rewardType] || 'primary'
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to format reward value
|
||||||
|
const formatRewardValue = (rewardValue?: number, rewardType?: RewardType, rewardSubtype?: string) => {
|
||||||
|
if (!rewardValue) return '-'
|
||||||
|
|
||||||
|
// Format based on reward type
|
||||||
|
switch (rewardType) {
|
||||||
|
case 'POINTS':
|
||||||
|
return `${rewardValue.toLocaleString()} pts`
|
||||||
|
case 'TOKENS':
|
||||||
|
return `${rewardValue.toLocaleString()} tokens`
|
||||||
|
case 'REWARD':
|
||||||
|
// For reward items, check if it's currency-based
|
||||||
|
if (rewardSubtype === 'currency') {
|
||||||
|
return formatCurrency(rewardValue)
|
||||||
|
}
|
||||||
|
return rewardValue.toString()
|
||||||
|
default:
|
||||||
|
return rewardValue.toString()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to format date
|
||||||
|
const formatDate = (dateString: string) => {
|
||||||
|
return new Date(dateString).toLocaleDateString('en-US', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className='space-y-6'>
|
||||||
|
{/* Header Card */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader
|
||||||
|
avatar={<Avatar src={campaign?.metadata?.banner_url || ''} alt={campaign?.name} className='w-16 h-16' />}
|
||||||
|
title={
|
||||||
|
<div className='flex items-center gap-3'>
|
||||||
|
<Typography variant='h4' component='h1' className='font-bold'>
|
||||||
|
{campaign?.name} ({campaign?.type})
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Chip
|
||||||
|
label={campaign?.is_active ? 'Active' : 'Inactive'}
|
||||||
|
color={campaign?.is_active ? 'success' : 'error'}
|
||||||
|
size='small'
|
||||||
|
/>
|
||||||
|
<Chip
|
||||||
|
label={campaign?.show_on_app ? 'Show on App' : 'Hide on App'}
|
||||||
|
color={campaign?.show_on_app ? 'info' : 'error'}
|
||||||
|
size='small'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
subheader={
|
||||||
|
<div className='flex flex-col gap-1 mt-2'>
|
||||||
|
<Typography variant='body2' color='textSecondary'>
|
||||||
|
{campaign?.start_date} - {campaign?.end_date}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body2' color='textSecondary'>
|
||||||
|
{campaign?.description}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Campaign Rules Table */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader
|
||||||
|
title={
|
||||||
|
<div className='flex items-center justify-between'>
|
||||||
|
<div>
|
||||||
|
<Typography variant='h5' component='h2' className='font-semibold'>
|
||||||
|
Campaign Rules
|
||||||
|
</Typography>
|
||||||
|
{rules && rules.length > 0 && (
|
||||||
|
<Chip
|
||||||
|
label={`${rules.length} rule${rules.length !== 1 ? 's' : ''}`}
|
||||||
|
size='small'
|
||||||
|
variant='outlined'
|
||||||
|
className='mt-1'
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant='contained'
|
||||||
|
startIcon={<i className='tabler-plus' />}
|
||||||
|
onClick={handleAddRule}
|
||||||
|
size='small'
|
||||||
|
>
|
||||||
|
Add Rule
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
subheader={
|
||||||
|
<Typography variant='body2' color='textSecondary'>
|
||||||
|
Rules and rewards configuration for this campaign
|
||||||
|
</Typography>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Divider />
|
||||||
|
<CardContent className='p-0'>
|
||||||
|
{rulesLoading ? (
|
||||||
|
<Box className='p-8 text-center'>
|
||||||
|
<Loading />
|
||||||
|
</Box>
|
||||||
|
) : rulesError ? (
|
||||||
|
<Box className='p-8 text-center'>
|
||||||
|
<Typography variant='body1' color='error'>
|
||||||
|
Failed to load campaign rules
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body2' color='textSecondary' className='mt-1'>
|
||||||
|
{rulesError.message || 'Please try refreshing the page'}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
) : rules && rules.length > 0 ? (
|
||||||
|
<TableContainer component={Paper} elevation={0}>
|
||||||
|
<Table>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>Rule Type</TableCell>
|
||||||
|
<TableCell>Condition</TableCell>
|
||||||
|
<TableCell>Reward Type</TableCell>
|
||||||
|
<TableCell>Reward Value</TableCell>
|
||||||
|
<TableCell>Subtype</TableCell>
|
||||||
|
<TableCell>Created</TableCell>
|
||||||
|
<TableCell>Updated</TableCell>
|
||||||
|
<TableCell align='center' width={120}>
|
||||||
|
Actions
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{rules.map((rule: CampaignRule) => (
|
||||||
|
<TableRow key={rule.id} hover>
|
||||||
|
<TableCell>
|
||||||
|
<Chip
|
||||||
|
label={formatRuleType(rule.rule_type)}
|
||||||
|
variant='outlined'
|
||||||
|
size='small'
|
||||||
|
color={getRuleTypeColor(rule.rule_type)}
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Typography variant='body2'>{rule.condition_value || '-'}</Typography>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Chip
|
||||||
|
label={formatRewardType(rule.reward_type)}
|
||||||
|
variant='outlined'
|
||||||
|
size='small'
|
||||||
|
color={getRewardTypeColor(rule.reward_type)}
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Typography variant='body2' className='font-medium'>
|
||||||
|
{formatRewardValue(rule.reward_value, rule.reward_type, rule.reward_subtype)}
|
||||||
|
</Typography>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{rule.reward_subtype && (
|
||||||
|
<Chip label={rule.reward_subtype} variant='outlined' size='small' color='default' />
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Typography variant='caption' color='textSecondary'>
|
||||||
|
{formatDate(rule.created_at)}
|
||||||
|
</Typography>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Typography variant='caption' color='textSecondary'>
|
||||||
|
{formatDate(rule.updated_at)}
|
||||||
|
</Typography>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell align='center'>
|
||||||
|
<Box className='flex items-center gap-1'>
|
||||||
|
<Tooltip title='Edit rule'>
|
||||||
|
<IconButton size='small' onClick={() => handleEditRule(rule)} color='primary'>
|
||||||
|
<i className='tabler-edit' />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip title='Delete rule'>
|
||||||
|
<IconButton size='small' onClick={() => handleDeleteRule(rule)} color='error'>
|
||||||
|
<i className='tabler-trash' />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</Box>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
) : (
|
||||||
|
<Box className='p-8 text-center'>
|
||||||
|
<Typography variant='body1' color='textSecondary'>
|
||||||
|
No rules configured for this campaign
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body2' color='textSecondary' className='mt-1'>
|
||||||
|
Add rules to define how rewards are distributed
|
||||||
|
</Typography>
|
||||||
|
<Button
|
||||||
|
variant='outlined'
|
||||||
|
startIcon={<i className='tabler-plus' />}
|
||||||
|
onClick={handleAddRule}
|
||||||
|
className='mt-4'
|
||||||
|
>
|
||||||
|
Add First Rule
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Delete Confirmation Dialog */}
|
||||||
|
<Dialog
|
||||||
|
open={deleteDialogOpen}
|
||||||
|
onClose={cancelDelete}
|
||||||
|
aria-labelledby='delete-rule-dialog-title'
|
||||||
|
aria-describedby='delete-rule-dialog-description'
|
||||||
|
>
|
||||||
|
<DialogTitle id='delete-rule-dialog-title'>Confirm Delete Rule</DialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogContentText id='delete-rule-dialog-description'>
|
||||||
|
Are you sure you want to delete this rule? This action cannot be undone.
|
||||||
|
{selectedRule && (
|
||||||
|
<Box className='mt-3 p-3 bg-gray-50 rounded'>
|
||||||
|
<Typography variant='body2' className='font-medium'>
|
||||||
|
Rule Details:
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='caption' display='block'>
|
||||||
|
Type: {formatRuleType(selectedRule.rule_type)}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='caption' display='block'>
|
||||||
|
Reward:{' '}
|
||||||
|
{formatRewardValue(selectedRule.reward_value, selectedRule.reward_type, selectedRule.reward_subtype)}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</DialogContentText>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={cancelDelete} color='primary'>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button onClick={confirmDeleteRule} color='error' variant='contained'>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CampaignDetailContent
|
||||||
Loading…
x
Reference in New Issue
Block a user