452 lines
17 KiB
TypeScript
452 lines
17 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { useEffect, useMemo, useState } from 'react';
|
|
import { useMutation, useQuery } from '@tanstack/react-query';
|
|
import { toast } from 'sonner';
|
|
import { Icons } from '@/components/icons';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
ProjectPartiesEditor,
|
|
type ProjectPartyEditorItem
|
|
} from '@/features/crm/components/project-parties-editor';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue
|
|
} from '@/components/ui/select';
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetDescription,
|
|
SheetFooter,
|
|
SheetHeader,
|
|
SheetTitle
|
|
} from '@/components/ui/sheet';
|
|
import { useAppForm, useFormFields } from '@/components/ui/tanstack-form';
|
|
import { enquiryProjectPartiesOptions } from '../api/queries';
|
|
import { createEnquiryMutation, updateEnquiryMutation } from '../api/mutations';
|
|
import type { EnquiryMutationPayload, EnquiryRecord, EnquiryReferenceData } from '../api/types';
|
|
import { enquirySchema, type EnquiryFormValues } from '../schemas/enquiry.schema';
|
|
|
|
function toDefaultValues(
|
|
enquiry: EnquiryRecord | undefined,
|
|
referenceData: EnquiryReferenceData
|
|
): EnquiryFormValues {
|
|
return {
|
|
customerId: enquiry?.customerId ?? referenceData.customers[0]?.id ?? '',
|
|
contactId: enquiry?.contactId ?? undefined,
|
|
assignedToUserId: enquiry?.assignedToUserId ?? undefined,
|
|
title: enquiry?.title ?? '',
|
|
description: enquiry?.description ?? '',
|
|
requirement: enquiry?.requirement ?? '',
|
|
projectName: enquiry?.projectName ?? '',
|
|
projectLocation: enquiry?.projectLocation ?? '',
|
|
branchId: enquiry?.branchId ?? undefined,
|
|
productType: enquiry?.productType ?? referenceData.productTypes[0]?.id ?? '',
|
|
status: enquiry?.status ?? referenceData.statuses[0]?.id ?? '',
|
|
priority:
|
|
enquiry?.priority ?? referenceData.priorities[1]?.id ?? referenceData.priorities[0]?.id ?? '',
|
|
leadChannel: enquiry?.leadChannel ?? undefined,
|
|
estimatedValue: enquiry?.estimatedValue ?? undefined,
|
|
chancePercent: enquiry?.chancePercent ?? undefined,
|
|
expectedCloseDate: enquiry?.expectedCloseDate ? enquiry.expectedCloseDate.slice(0, 10) : '',
|
|
competitor: enquiry?.competitor ?? '',
|
|
source: enquiry?.source ?? '',
|
|
isHotProject: enquiry?.isHotProject ?? false,
|
|
notes: enquiry?.notes ?? '',
|
|
isActive: enquiry?.isActive ?? true
|
|
};
|
|
}
|
|
|
|
export function EnquiryFormSheet({
|
|
enquiry,
|
|
open,
|
|
onOpenChange,
|
|
referenceData,
|
|
workspace = 'enquiry'
|
|
}: {
|
|
enquiry?: EnquiryRecord;
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
referenceData: EnquiryReferenceData;
|
|
workspace?: 'lead' | 'enquiry';
|
|
}) {
|
|
const isEdit = !!enquiry;
|
|
const defaultValues = useMemo(
|
|
() => toDefaultValues(enquiry, referenceData),
|
|
[enquiry, referenceData]
|
|
);
|
|
const [selectedCustomerId, setSelectedCustomerId] = useState(defaultValues.customerId);
|
|
const [projectParties, setProjectParties] = useState<ProjectPartyEditorItem[]>([]);
|
|
const { FormTextField, FormTextareaField, FormSelectField, FormSwitchField } =
|
|
useFormFields<EnquiryFormValues>();
|
|
const projectPartiesQuery = useQuery({
|
|
...enquiryProjectPartiesOptions(enquiry?.id ?? ''),
|
|
enabled: open && !!enquiry?.id
|
|
});
|
|
|
|
const createMutation = useMutation({
|
|
...createEnquiryMutation,
|
|
onSuccess: () => {
|
|
toast.success(`สร้าง${recordLabel}สำเร็จ`);
|
|
onOpenChange(false);
|
|
},
|
|
onError: (error) =>
|
|
toast.error(error instanceof Error ? error.message : `ไม่สามารถสร้าง${recordLabel}ได้`)
|
|
});
|
|
|
|
const updateMutation = useMutation({
|
|
...updateEnquiryMutation,
|
|
onSuccess: () => {
|
|
toast.success(`อัปเดต${recordLabel}สำเร็จ`);
|
|
onOpenChange(false);
|
|
},
|
|
onError: (error) =>
|
|
toast.error(error instanceof Error ? error.message : `ไม่สามารถอัปเดต${recordLabel}ได้`)
|
|
});
|
|
|
|
const contactsForCustomer = referenceData.contacts.filter(
|
|
(contact) => contact.customerId === selectedCustomerId
|
|
);
|
|
const selectedCustomer = referenceData.customers.find((customer) => customer.id === selectedCustomerId);
|
|
|
|
const form = useAppForm({
|
|
defaultValues,
|
|
validators: {
|
|
onSubmit: enquirySchema
|
|
},
|
|
onSubmit: async ({ value }) => {
|
|
const payload: EnquiryMutationPayload = {
|
|
customerId: value.customerId,
|
|
contactId: value.contactId || null,
|
|
assignedToUserId: value.assignedToUserId || null,
|
|
title: value.title,
|
|
description: value.description,
|
|
requirement: value.requirement,
|
|
projectName: value.projectName,
|
|
projectLocation: value.projectLocation,
|
|
branchId: value.branchId || null,
|
|
productType: value.productType,
|
|
status: value.status,
|
|
priority: value.priority,
|
|
leadChannel: value.leadChannel || null,
|
|
estimatedValue:
|
|
typeof value.estimatedValue === 'number' ? value.estimatedValue : null,
|
|
chancePercent:
|
|
typeof value.chancePercent === 'number' ? value.chancePercent : null,
|
|
expectedCloseDate: value.expectedCloseDate || null,
|
|
competitor: value.competitor,
|
|
source: value.source,
|
|
isHotProject: value.isHotProject ?? false,
|
|
notes: value.notes,
|
|
isActive: value.isActive ?? true,
|
|
projectParties: projectParties
|
|
.filter((item) => item.customerId && item.role)
|
|
.map((item) => ({
|
|
customerId: item.customerId,
|
|
role: item.role,
|
|
remark: item.remark || null
|
|
}))
|
|
};
|
|
|
|
if (isEdit && enquiry) {
|
|
await updateMutation.mutateAsync({ id: enquiry.id, values: payload });
|
|
return;
|
|
}
|
|
|
|
await createMutation.mutateAsync(payload);
|
|
}
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!open) {
|
|
return;
|
|
}
|
|
|
|
setSelectedCustomerId(defaultValues.customerId);
|
|
form.reset(defaultValues);
|
|
setProjectParties(
|
|
enquiry
|
|
? (projectPartiesQuery.data?.items ?? []).map((item) => ({
|
|
key: item.id,
|
|
customerId: item.customerId,
|
|
role: item.role,
|
|
remark: item.remark ?? ''
|
|
}))
|
|
: []
|
|
);
|
|
}, [defaultValues, enquiry, form, open, projectPartiesQuery.data?.items]);
|
|
|
|
useEffect(() => {
|
|
if (!open || isEdit) {
|
|
return;
|
|
}
|
|
|
|
const ownerUserId =
|
|
referenceData.customers.find((customer) => customer.id === selectedCustomerId)?.ownerUserId ?? '';
|
|
|
|
form.setFieldValue('assignedToUserId', ownerUserId);
|
|
}, [form, isEdit, open, referenceData.customers, selectedCustomerId]);
|
|
|
|
const isPending = createMutation.isPending || updateMutation.isPending;
|
|
|
|
const recordLabel = workspace === 'lead' ? 'ลีด' : 'โอกาสขาย';
|
|
|
|
return (
|
|
<Sheet open={open} onOpenChange={onOpenChange}>
|
|
<SheetContent className='flex flex-col sm:max-w-4xl'>
|
|
<SheetHeader>
|
|
<SheetTitle>{isEdit ? `แก้ไข${recordLabel}` : `เพิ่ม${recordLabel}`}</SheetTitle>
|
|
<SheetDescription>
|
|
{workspace === 'lead'
|
|
? 'บันทึกข้อมูลลีดของฝ่ายการตลาดก่อนส่งต่อให้ฝ่ายขาย'
|
|
: 'บันทึกข้อมูลโอกาสขายของฝ่ายขายก่อนเริ่มทำใบเสนอราคา'}
|
|
</SheetDescription>
|
|
</SheetHeader>
|
|
|
|
<div className='flex-1 overflow-auto'>
|
|
<form.AppForm>
|
|
<form.Form id='enquiry-form-sheet' className='grid gap-4 md:grid-cols-2'>
|
|
<form.AppField
|
|
name='customerId'
|
|
children={(field) => (
|
|
<field.FieldSet>
|
|
<field.Field>
|
|
<field.FieldLabel>ลูกค้าผู้รับใบเสนอราคา *</field.FieldLabel>
|
|
<Select
|
|
value={field.state.value ?? ''}
|
|
onValueChange={(value) => {
|
|
field.handleChange(value);
|
|
field.handleBlur();
|
|
setSelectedCustomerId(value);
|
|
form.setFieldValue('contactId', '');
|
|
}}
|
|
>
|
|
<SelectTrigger aria-label='ลูกค้า'>
|
|
<SelectValue placeholder='เลือกลูกค้า' />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{referenceData.customers.map((customer) => (
|
|
<SelectItem key={customer.id} value={customer.id}>
|
|
{customer.name} ({customer.code})
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</field.Field>
|
|
<field.FieldError />
|
|
</field.FieldSet>
|
|
)}
|
|
/>
|
|
|
|
<form.AppField
|
|
name='contactId'
|
|
children={(field) => (
|
|
<field.FieldSet>
|
|
<field.Field>
|
|
<field.FieldLabel>ผู้ติดต่อ</field.FieldLabel>
|
|
<Select
|
|
value={field.state.value ?? ''}
|
|
onValueChange={(value) => {
|
|
field.handleChange(value === '__none__' ? '' : value);
|
|
field.handleBlur();
|
|
}}
|
|
>
|
|
<SelectTrigger aria-label='ผู้ติดต่อ'>
|
|
<SelectValue placeholder='เลือกผู้ติดต่อ' />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{contactsForCustomer.length ? (
|
|
contactsForCustomer.map((contact) => (
|
|
<SelectItem key={contact.id} value={contact.id}>
|
|
{contact.name}
|
|
{contact.isPrimary ? ' (ผู้ติดต่อหลัก)' : ''}
|
|
</SelectItem>
|
|
))
|
|
) : (
|
|
<SelectItem value='__none__'>ไม่เลือกผู้ติดต่อ</SelectItem>
|
|
)}
|
|
</SelectContent>
|
|
</Select>
|
|
</field.Field>
|
|
<field.FieldError />
|
|
</field.FieldSet>
|
|
)}
|
|
/>
|
|
<FormSelectField
|
|
name='assignedToUserId'
|
|
label='Suggested Sales Owner'
|
|
description={
|
|
selectedCustomer?.ownerName
|
|
? `Suggested from customer owner: ${selectedCustomer.ownerName}`
|
|
: 'Optional sales owner suggestion for this lead or enquiry'
|
|
}
|
|
options={referenceData.assignableUsers.map((user) => ({
|
|
value: user.id,
|
|
label: user.name
|
|
}))}
|
|
/>
|
|
|
|
<FormTextField
|
|
name='title'
|
|
label='ชื่อรายการ'
|
|
required
|
|
placeholder='Warehouse crane upgrade enquiry'
|
|
/>
|
|
<FormTextField
|
|
name='projectName'
|
|
label='ชื่อโครงการ'
|
|
placeholder='Bangna Warehouse Expansion'
|
|
/>
|
|
<FormTextField
|
|
name='projectLocation'
|
|
label='สถานที่โครงการ'
|
|
placeholder='Bangkok'
|
|
/>
|
|
<FormTextField
|
|
name='source'
|
|
label='ที่มา'
|
|
placeholder='Existing customer referral'
|
|
/>
|
|
<FormSelectField
|
|
name='branchId'
|
|
label='สาขา'
|
|
options={referenceData.branches.map((branch) => ({
|
|
value: branch.id,
|
|
label: branch.name
|
|
}))}
|
|
/>
|
|
<FormSelectField
|
|
name='productType'
|
|
label='ประเภทสินค้า'
|
|
required
|
|
options={referenceData.productTypes.map((item) => ({
|
|
value: item.id,
|
|
label: item.label
|
|
}))}
|
|
/>
|
|
<FormSelectField
|
|
name='status'
|
|
label='สถานะ'
|
|
required
|
|
options={referenceData.statuses.map((item) => ({
|
|
value: item.id,
|
|
label: item.label
|
|
}))}
|
|
/>
|
|
<FormSelectField
|
|
name='priority'
|
|
label='ความสำคัญ'
|
|
required
|
|
options={referenceData.priorities.map((item) => ({
|
|
value: item.id,
|
|
label: item.label
|
|
}))}
|
|
/>
|
|
<FormSelectField
|
|
name='leadChannel'
|
|
label='ที่มาของลีด'
|
|
options={referenceData.leadChannels.map((item) => ({
|
|
value: item.id,
|
|
label: item.label
|
|
}))}
|
|
/>
|
|
<FormTextField
|
|
name='estimatedValue'
|
|
label='มูลค่าประมาณการ'
|
|
type='number'
|
|
placeholder='2500000'
|
|
/>
|
|
<FormTextField name='chancePercent' label='โอกาสปิดการขาย %' type='number' placeholder='60' />
|
|
<FormTextField
|
|
name='expectedCloseDate'
|
|
label='วันที่คาดว่าจะปิดการขาย'
|
|
placeholder='YYYY-MM-DD'
|
|
/>
|
|
<FormTextField name='competitor' label='คู่แข่ง' placeholder='Other vendor name' />
|
|
<div className='md:col-span-2'>
|
|
<FormTextareaField
|
|
name='description'
|
|
label='รายละเอียด'
|
|
placeholder='สรุปภาพรวมของลีดหรือโอกาสขาย'
|
|
/>
|
|
</div>
|
|
<div className='md:col-span-2'>
|
|
<FormTextareaField
|
|
name='requirement'
|
|
label='ความต้องการ'
|
|
placeholder='ความต้องการเชิงเทคนิคหรือเชิงพาณิชย์'
|
|
/>
|
|
</div>
|
|
<div className='md:col-span-2'>
|
|
<FormTextareaField
|
|
name='notes'
|
|
label='หมายเหตุ'
|
|
placeholder='หมายเหตุภายใน อุปสรรค หรือข้อมูลประกอบการส่งต่องาน'
|
|
/>
|
|
</div>
|
|
<div className='md:col-span-2 grid gap-4 md:grid-cols-2'>
|
|
<FormSwitchField
|
|
name='isHotProject'
|
|
label='โครงการด่วน'
|
|
description='ใช้สำหรับงานเร่งด่วนหรือโครงการสำคัญเชิงกลยุทธ์'
|
|
/>
|
|
<FormSwitchField
|
|
name='isActive'
|
|
label='ใช้งานอยู่'
|
|
description='รายการที่ปิดใช้งานจะยังอยู่ในประวัติ แต่ไม่ควรถูกดำเนินการต่อ'
|
|
/>
|
|
</div>
|
|
<div className='md:col-span-2'>
|
|
<ProjectPartiesEditor
|
|
customers={referenceData.customers}
|
|
roles={referenceData.projectPartyRoles}
|
|
items={projectParties}
|
|
onChange={setProjectParties}
|
|
/>
|
|
</div>
|
|
</form.Form>
|
|
</form.AppForm>
|
|
</div>
|
|
|
|
<SheetFooter>
|
|
<Button type='button' variant='outline' onClick={() => onOpenChange(false)}>
|
|
ยกเลิก
|
|
</Button>
|
|
<Button type='submit' form='enquiry-form-sheet' isLoading={isPending}>
|
|
<Icons.check className='mr-2 h-4 w-4' />
|
|
{isEdit ? `อัปเดต${recordLabel}` : `สร้าง${recordLabel}`}
|
|
</Button>
|
|
</SheetFooter>
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
}
|
|
|
|
export function EnquiryFormSheetTrigger({
|
|
referenceData,
|
|
workspace = 'enquiry'
|
|
}: {
|
|
referenceData: EnquiryReferenceData;
|
|
workspace?: 'lead' | 'enquiry';
|
|
}) {
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
return (
|
|
<>
|
|
<Button onClick={() => setOpen(true)}>
|
|
<Icons.add className='mr-2 h-4 w-4' /> {workspace === 'lead' ? 'เพิ่มลีด' : 'เพิ่มโอกาสขาย'}
|
|
</Button>
|
|
<EnquiryFormSheet
|
|
open={open}
|
|
onOpenChange={setOpen}
|
|
referenceData={referenceData}
|
|
workspace={workspace}
|
|
/>
|
|
</>
|
|
);
|
|
}
|