diff --git a/src/components/pages/marketing/MarketingFilter.tsx b/src/components/pages/marketing/MarketingFilter.tsx index 3f56854e..624c573c 100644 --- a/src/components/pages/marketing/MarketingFilter.tsx +++ b/src/components/pages/marketing/MarketingFilter.tsx @@ -10,6 +10,10 @@ import SelectInput, { useSelect, } from '@/components/input/SelectInput'; import { MARKETING_APPROVAL_LINE } from '@/config/approval-line'; +import { + MarketingFilterFormValues, + MarketingFilterSchema, +} from '@/components/pages/marketing/filter/MarketingFilter'; import { MarketingFilter } from '@/types/api/marketing/marketing'; import SelectInputCheckbox from '@/components/input/SelectInputCheckbox'; import { MarketingApi } from '@/services/api/marketing/marketing'; @@ -70,8 +74,8 @@ const MarketingFilterModal = ({ limit: 'limit', }); - const uniqueCustomersOptions = useMemo(() => { - const seen = new Set(); + const salesCustomerOptions = useMemo(() => { + const seen = new Set(); return customersOptions.filter((customer) => { if (seen.has(customer.value)) return false; seen.add(customer.value); @@ -87,23 +91,19 @@ const MarketingFilterModal = ({ { value: 'DITOLAK', label: 'Ditolak' }, ]; - const formik = useFormik<{ - product_ids: OptionType[]; - status: OptionType | null; - customer_id: OptionType | null; - }>({ + const formik = useFormik({ initialValues: { product_ids: [], status: null, - customer_id: null, + customer: null, }, + validationSchema: MarketingFilterSchema, onSubmit: async (values) => { - const formattedValues = { - ...values, + const formattedValues: MarketingFilter = { product_ids: values.product_ids.map((item) => Number(item.value)), status: values.status?.value.toString() || '', - customer_id: Number(values.customer_id?.value), + customer_id: Number(values.customer?.value), }; onSubmit?.(formattedValues); @@ -121,7 +121,10 @@ const MarketingFilterModal = ({ }; const customerChangeHandler = (val: OptionType | OptionType[] | null) => { - formik.setFieldValue('customer_id', val as OptionType); + formik.setFieldValue( + 'customer', + !Array.isArray(val) ? (val as OptionType | null) : null + ); }; const statusChangeHandler = (val: OptionType | OptionType[] | null) => { @@ -187,9 +190,9 @@ const MarketingFilterModal = ({ label='Customer' isClearable placeholder='Pilih customer' - options={uniqueCustomersOptions} + options={salesCustomerOptions} isLoading={isLoadingCustomersOptions} - value={formik.values.customer_id} + value={formik.values.customer} onChange={customerChangeHandler} onInputChange={setCustomersInputValue} onMenuScrollToBottom={loadMoreCustomers} diff --git a/src/components/pages/marketing/filter/MarketingFilter.ts b/src/components/pages/marketing/filter/MarketingFilter.ts new file mode 100644 index 00000000..4ff9a792 --- /dev/null +++ b/src/components/pages/marketing/filter/MarketingFilter.ts @@ -0,0 +1,14 @@ +import { array, mixed, object } from 'yup'; +import { OptionType } from '@/components/input/SelectInput'; + +export const MarketingFilterSchema = object({ + product_ids: array().of(mixed>().required()).required(), + status: mixed>().nullable(), + customer: mixed>().nullable(), +}); + +export type MarketingFilterFormValues = { + product_ids: OptionType[]; + status: OptionType | null; + customer: OptionType | null; +};