@orbe-agro/client-core 5.6.0 → 5.6.6

package/dist/@ecme/views/concepts/orders/OrderForm/OrderForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderForm.js","sources":["../../../../../../lib/@ecme/views/concepts/orders/OrderForm/OrderForm.tsx"],"sourcesContent":["import { useEffect } from 'react'\r\nimport { Form } from '@/components/ui/Form'\r\nimport Affix from '@/components/shared/Affix'\r\nimport Card from '@/components/ui/Card'\r\nimport Container from '@/components/shared/Container'\r\nimport BottomStickyBar from '@/components/template/BottomStickyBar'\r\nimport { apiGetProductList } from '@/services/ProductService'\r\nimport ProductSelectSection from './components/ProductSelectSection'\r\nimport CustomerDetailSection from './components/CustomerDetailSection'\r\nimport BillingAddressSection from './components/BillingAddressSection'\r\nimport PaymentMethodSection from './components/PaymentMethodSection'\r\nimport Navigator from './components/Navigator'\r\nimport { useOrderFormStore } from './store/orderFormStore'\r\nimport useLayoutGap from '@/utils/hooks/useLayoutGap'\r\nimport useResponsive from '@/utils/hooks/useResponsive'\r\nimport useSWR from 'swr'\r\nimport isEmpty from 'lodash/isEmpty'\r\nimport { useForm } from 'react-hook-form'\r\nimport { zodResolver } from '@hookform/resolvers/zod'\r\nimport { z } from 'zod'\r\nimport type { ZodType } from 'zod'\r\nimport type { ReactNode } from 'react'\r\nimport type {\r\n    GetProductListResponse,\r\n    OrderFormSchema,\r\n    SelectedProduct,\r\n} from './types'\r\nimport type { TableQueries, CommonProps } from '@/@types/common'\r\n\r\ntype OrderFormProps = {\r\n    children: ReactNode\r\n    onFormSubmit: (values: OrderFormSchema) => void\r\n    defaultValues?: OrderFormSchema\r\n    defaultProducts?: SelectedProduct[]\r\n    newOrder?: boolean\r\n} & CommonProps\r\n\r\nconst baseValidationSchema = z.object({\r\n    firstName: z.string().min(1, { message: 'First name required' }),\r\n    lastName: z.string().min(1, { message: 'Last name required' }),\r\n    email: z\r\n        .string()\r\n        .min(1, { message: 'Email required' })\r\n        .email({ message: 'Invalid email' }),\r\n    dialCode: z.string().min(1, { message: 'Please select your country code' }),\r\n    phoneNumber: z\r\n        .string()\r\n        .min(1, { message: 'Please input your mobile number' }),\r\n    country: z.string().min(1, { message: 'Please select a country' }),\r\n    address: z.string().min(1, { message: 'Addrress required' }),\r\n    postcode: z.string().min(1, { message: 'Postcode required' }),\r\n    city: z.string().min(1, { message: 'City required' }),\r\n})\r\n\r\nconst validationSchema: ZodType<OrderFormSchema> = z.discriminatedUnion(\r\n    'paymentMethod',\r\n    [\r\n        z\r\n            .object({\r\n                paymentMethod: z.literal('creditOrDebitCard'),\r\n                cardHolderName: z\r\n                    .string()\r\n                    .min(1, { message: 'Card holder name required' }),\r\n                ccNumber: z\r\n                    .string()\r\n                    .min(1, 'Credit card number required')\r\n                    .refine(\r\n                        (value) =>\r\n                            /^(?:4[0-9]{12}(?:[0-9]{3})?|[25][1-7][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\\d{3})\\d{11})$/.test(\r\n                                value,\r\n                            ),\r\n                        'Invalid credit card number',\r\n                    ),\r\n                cardExpiry: z\r\n                    .string()\r\n                    .min(1, { message: 'Card holder name required' })\r\n                    .refine(\r\n                        (value) =>\r\n                            /^(0[1-9]|1[0-2])\\/?([0-9]{4}|[0-9]{2})$/.test(\r\n                                value,\r\n                            ),\r\n                        'Invalid Date',\r\n                    ),\r\n                code: z\r\n                    .string()\r\n                    .min(1, { message: 'Code required' })\r\n                    .refine((value) => /^[0-9]{3}$/.test(value), 'Invalid CVV'),\r\n            })\r\n            .merge(baseValidationSchema),\r\n        z\r\n            .object({\r\n                paymentMethod: z.literal('paypal'),\r\n                paypalEmail: z\r\n                    .string()\r\n                    .min(1, { message: 'Email required' })\r\n                    .email({ message: 'Invalid email' }),\r\n            })\r\n            .merge(baseValidationSchema),\r\n        z\r\n            .object({\r\n                paymentMethod: z.literal('bankTransfer'),\r\n                bankName: z.string().min(1, { message: 'Bank name required' }),\r\n                accountNumber: z\r\n                    .string()\r\n                    .min(1, { message: 'Account number required' }),\r\n                accountHolderName: z\r\n                    .string()\r\n                    .min(1, { message: 'Account holder name required' }),\r\n                IBAN: z.string().min(1, { message: 'IBAN required' }),\r\n            })\r\n            .merge(baseValidationSchema),\r\n        z\r\n            .object({\r\n                paymentMethod: z.literal(''),\r\n            })\r\n            .merge(baseValidationSchema),\r\n    ],\r\n)\r\n\r\nconst OrderForm = (props: OrderFormProps) => {\r\n    const { onFormSubmit, children, defaultValues, defaultProducts } = props\r\n\r\n    const { setProductOption, setProductList, setSelectedProduct } =\r\n        useOrderFormStore()\r\n\r\n    const { getTopGapValue } = useLayoutGap()\r\n\r\n    const { larger } = useResponsive()\r\n\r\n    useSWR(\r\n        [\r\n            '/api/products',\r\n            {\r\n                pageIndex: 1,\r\n                pageSize: 10,\r\n                query: '',\r\n                sort: {\r\n                    order: '',\r\n                    key: '',\r\n                },\r\n            } as TableQueries,\r\n        ],\r\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n        ([_, params]) =>\r\n            apiGetProductList<GetProductListResponse, TableQueries>(params),\r\n        {\r\n            revalidateOnFocus: false,\r\n            onSuccess: (resp) => {\r\n                const list = resp.list.map(\r\n                    ({ id: value, name: label, img, stock: quantity }) => ({\r\n                        label,\r\n                        value,\r\n                        img,\r\n                        quantity,\r\n                    }),\r\n                )\r\n                setProductList(resp.list)\r\n                setProductOption(list)\r\n            },\r\n        },\r\n    )\r\n\r\n    useEffect(() => {\r\n        if (defaultProducts) {\r\n            setSelectedProduct(defaultProducts)\r\n        }\r\n        if (!isEmpty(defaultValues)) {\r\n            reset(defaultValues)\r\n        }\r\n        return () => {\r\n            setSelectedProduct([])\r\n        }\r\n        // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    }, [])\r\n\r\n    const onSubmit = (values: OrderFormSchema) => {\r\n        onFormSubmit?.(values)\r\n    }\r\n\r\n    const {\r\n        handleSubmit,\r\n        reset,\r\n        watch,\r\n        formState: { errors },\r\n        control,\r\n    } = useForm<OrderFormSchema>({\r\n        defaultValues: {\r\n            paymentMethod: 'creditOrDebitCard',\r\n            ...(defaultValues ? defaultValues : {}),\r\n        },\r\n        resolver: zodResolver(validationSchema),\r\n    })\r\n\r\n    const selectedPaymentMethod = watch('paymentMethod', '')\r\n\r\n    return (\r\n        <div className=\"flex\">\r\n            <Form\r\n                className=\"flex-1 flex flex-col overflow-hidden\"\r\n                onSubmit={handleSubmit(onSubmit)}\r\n            >\r\n                <Container>\r\n                    <div className=\"flex gap-4\">\r\n                        {larger.xl && (\r\n                            <div className=\"w-[360px]\">\r\n                                <Affix offset={getTopGapValue()}>\r\n                                    <Card>\r\n                                        <Navigator />\r\n                                    </Card>\r\n                                </Affix>\r\n                            </div>\r\n                        )}\r\n\r\n                        <div className=\"flex-1\">\r\n                            <div className=\"flex flex-col gap-4\">\r\n                                <ProductSelectSection />\r\n                                <CustomerDetailSection\r\n                                    control={control}\r\n                                    errors={errors}\r\n                                />\r\n                                <BillingAddressSection\r\n                                    control={control}\r\n                                    errors={errors}\r\n                                />\r\n                                <PaymentMethodSection\r\n                                    control={control}\r\n                                    errors={errors}\r\n                                    selectedPaymentMethod={\r\n                                        selectedPaymentMethod\r\n                                    }\r\n                                />\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </Container>\r\n                <BottomStickyBar>{children}</BottomStickyBar>\r\n            </Form>\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default OrderForm\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"OrderForm.js","sources":["../../../../../../lib/@ecme/views/concepts/orders/OrderForm/OrderForm.tsx"],"sourcesContent":["import { useEffect } from 'react'\nimport { Form } from '@/components/ui/Form'\nimport Affix from '@/components/shared/Affix'\nimport Card from '@/components/ui/Card'\nimport Container from '@/components/shared/Container'\nimport BottomStickyBar from '@/components/template/BottomStickyBar'\nimport { apiGetProductList } from '@/services/ProductService'\nimport ProductSelectSection from './components/ProductSelectSection'\nimport CustomerDetailSection from './components/CustomerDetailSection'\nimport BillingAddressSection from './components/BillingAddressSection'\nimport PaymentMethodSection from './components/PaymentMethodSection'\nimport Navigator from './components/Navigator'\nimport { useOrderFormStore } from './store/orderFormStore'\nimport useLayoutGap from '@/utils/hooks/useLayoutGap'\nimport useResponsive from '@/utils/hooks/useResponsive'\nimport useSWR from 'swr'\nimport isEmpty from 'lodash/isEmpty'\nimport { useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { z } from 'zod'\nimport type { ZodType } from 'zod'\nimport type { ReactNode } from 'react'\nimport type {\n    GetProductListResponse,\n    OrderFormSchema,\n    SelectedProduct,\n} from './types'\nimport type { TableQueries, CommonProps } from '@/@types/common'\n\ntype OrderFormProps = {\n    children: ReactNode\n    onFormSubmit: (values: OrderFormSchema) => void\n    defaultValues?: OrderFormSchema\n    defaultProducts?: SelectedProduct[]\n    newOrder?: boolean\n} & CommonProps\n\nconst baseValidationSchema = z.object({\n    firstName: z.string().min(1, { message: 'First name required' }),\n    lastName: z.string().min(1, { message: 'Last name required' }),\n    email: z\n        .string()\n        .min(1, { message: 'Email required' })\n        .email({ message: 'Invalid email' }),\n    dialCode: z.string().min(1, { message: 'Please select your country code' }),\n    phoneNumber: z\n        .string()\n        .min(1, { message: 'Please input your mobile number' }),\n    country: z.string().min(1, { message: 'Please select a country' }),\n    address: z.string().min(1, { message: 'Addrress required' }),\n    postcode: z.string().min(1, { message: 'Postcode required' }),\n    city: z.string().min(1, { message: 'City required' }),\n})\n\nconst validationSchema: ZodType<OrderFormSchema> = z.discriminatedUnion(\n    'paymentMethod',\n    [\n        z\n            .object({\n                paymentMethod: z.literal('creditOrDebitCard'),\n                cardHolderName: z\n                    .string()\n                    .min(1, { message: 'Card holder name required' }),\n                ccNumber: z\n                    .string()\n                    .min(1, 'Credit card number required')\n                    .refine(\n                        (value) =>\n                            /^(?:4[0-9]{12}(?:[0-9]{3})?|[25][1-7][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\\d{3})\\d{11})$/.test(\n                                value,\n                            ),\n                        'Invalid credit card number',\n                    ),\n                cardExpiry: z\n                    .string()\n                    .min(1, { message: 'Card holder name required' })\n                    .refine(\n                        (value) =>\n                            /^(0[1-9]|1[0-2])\\/?([0-9]{4}|[0-9]{2})$/.test(\n                                value,\n                            ),\n                        'Invalid Date',\n                    ),\n                code: z\n                    .string()\n                    .min(1, { message: 'Code required' })\n                    .refine((value) => /^[0-9]{3}$/.test(value), 'Invalid CVV'),\n            })\n            .merge(baseValidationSchema),\n        z\n            .object({\n                paymentMethod: z.literal('paypal'),\n                paypalEmail: z\n                    .string()\n                    .min(1, { message: 'Email required' })\n                    .email({ message: 'Invalid email' }),\n            })\n            .merge(baseValidationSchema),\n        z\n            .object({\n                paymentMethod: z.literal('bankTransfer'),\n                bankName: z.string().min(1, { message: 'Bank name required' }),\n                accountNumber: z\n                    .string()\n                    .min(1, { message: 'Account number required' }),\n                accountHolderName: z\n                    .string()\n                    .min(1, { message: 'Account holder name required' }),\n                IBAN: z.string().min(1, { message: 'IBAN required' }),\n            })\n            .merge(baseValidationSchema),\n        z\n            .object({\n                paymentMethod: z.literal(''),\n            })\n            .merge(baseValidationSchema),\n    ],\n)\n\nconst OrderForm = (props: OrderFormProps) => {\n    const { onFormSubmit, children, defaultValues, defaultProducts } = props\n\n    const { setProductOption, setProductList, setSelectedProduct } =\n        useOrderFormStore()\n\n    const { getTopGapValue } = useLayoutGap()\n\n    const { larger } = useResponsive()\n\n    useSWR(\n        [\n            '/api/products',\n            {\n                pageIndex: 1,\n                pageSize: 10,\n                query: '',\n                sort: {\n                    order: '',\n                    key: '',\n                },\n            } as TableQueries,\n        ],\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        ([_, params]) =>\n            apiGetProductList<GetProductListResponse, TableQueries>(params),\n        {\n            revalidateOnFocus: false,\n            onSuccess: (resp) => {\n                const list = resp.list.map(\n                    ({ id: value, name: label, img, stock: quantity }) => ({\n                        label,\n                        value,\n                        img,\n                        quantity,\n                    }),\n                )\n                setProductList(resp.list)\n                setProductOption(list)\n            },\n        },\n    )\n\n    useEffect(() => {\n        if (defaultProducts) {\n            setSelectedProduct(defaultProducts)\n        }\n        if (!isEmpty(defaultValues)) {\n            reset(defaultValues)\n        }\n        return () => {\n            setSelectedProduct([])\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [])\n\n    const onSubmit = (values: OrderFormSchema) => {\n        onFormSubmit?.(values)\n    }\n\n    const {\n        handleSubmit,\n        reset,\n        watch,\n        formState: { errors },\n        control,\n    } = useForm<OrderFormSchema>({\n        defaultValues: {\n            paymentMethod: 'creditOrDebitCard',\n            ...(defaultValues ? defaultValues : {}),\n        },\n        resolver: zodResolver(validationSchema),\n    })\n\n    const selectedPaymentMethod = watch('paymentMethod', '')\n\n    return (\n        <div className=\"flex\">\n            <Form\n                className=\"flex-1 flex flex-col overflow-hidden\"\n                onSubmit={handleSubmit(onSubmit)}\n            >\n                <Container>\n                    <div className=\"flex gap-4\">\n                        {larger.xl && (\n                            <div className=\"w-[360px]\">\n                                <Affix offset={getTopGapValue()}>\n                                    <Card>\n                                        <Navigator />\n                                    </Card>\n                                </Affix>\n                            </div>\n                        )}\n\n                        <div className=\"flex-1\">\n                            <div className=\"flex flex-col gap-4\">\n                                <ProductSelectSection />\n                                <CustomerDetailSection\n                                    control={control}\n                                    errors={errors}\n                                />\n                                <BillingAddressSection\n                                    control={control}\n                                    errors={errors}\n                                />\n                                <PaymentMethodSection\n                                    control={control}\n                                    errors={errors}\n                                    selectedPaymentMethod={\n                                        selectedPaymentMethod\n                                    }\n                                />\n                            </div>\n                        </div>\n                    </div>\n                </Container>\n                <BottomStickyBar>{children}</BottomStickyBar>\n            </Form>\n        </div>\n    )\n}\n\nexport default OrderForm\n"],"names":[],"mappings":"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"}

package/dist/@ecme/views/concepts/orders/OrderForm/components/BillingAddressSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"BillingAddressSection.js","sources":["../../../../../../../lib/@ecme/views/concepts/orders/OrderForm/components/BillingAddressSection.tsx"],"sourcesContent":["import Card from '@/components/ui/Card'\r\nimport Input from '@/components/ui/Input'\r\nimport Select, { Option as DefaultOption } from '@/components/ui/Select'\r\nimport Avatar from '@/components/ui/Avatar'\r\nimport { FormItem } from '@/components/ui/Form'\r\nimport { countryList } from '@/constants/countries.constant'\r\nimport { Controller } from 'react-hook-form'\r\nimport { components } from 'react-select'\r\nimport type { FormSectionBaseProps } from '../types'\r\nimport type { ControlProps, OptionProps } from 'react-select'\r\n\r\ntype BillingAddressSectionProps = FormSectionBaseProps\r\n\r\ntype CountryOption = {\r\n    label: string\r\n    dialCode: string\r\n    value: string\r\n}\r\n\r\nconst { Control } = components\r\n\r\nconst CustomSelectOption = (props: OptionProps<CountryOption>) => {\r\n    return (\r\n        <DefaultOption<CountryOption>\r\n            {...props}\r\n            customLabel={(data, label) => (\r\n                <span className=\"flex items-center gap-2\">\r\n                    <Avatar\r\n                        shape=\"circle\"\r\n                        size={20}\r\n                        src={`/img/countries/${data.value}.png`}\r\n                    />\r\n                    <span>{label}</span>\r\n                </span>\r\n            )}\r\n        />\r\n    )\r\n}\r\n\r\nconst CustomControl = ({ children, ...props }: ControlProps<CountryOption>) => {\r\n    const selected = props.getValue()[0]\r\n    return (\r\n        <Control {...props}>\r\n            {selected && (\r\n                <Avatar\r\n                    className=\"ltr:ml-4 rtl:mr-4\"\r\n                    shape=\"circle\"\r\n                    size={20}\r\n                    src={`/img/countries/${selected.value}.png`}\r\n                />\r\n            )}\r\n            {children}\r\n        </Control>\r\n    )\r\n}\r\n\r\nconst BillingAddressSection = ({\r\n    control,\r\n    errors,\r\n}: BillingAddressSectionProps) => {\r\n    return (\r\n        <Card id=\"addressInformation\">\r\n            <h4 className=\"mb-6\">Address Information</h4>\r\n            <FormItem\r\n                label=\"Country\"\r\n                invalid={Boolean(errors.country)}\r\n                errorMessage={errors.country?.message}\r\n            >\r\n                <Controller\r\n                    name=\"country\"\r\n                    control={control}\r\n                    render={({ field }) => (\r\n                        <Select<CountryOption>\r\n                            options={countryList}\r\n                            {...field}\r\n                            components={{\r\n                                Option: CustomSelectOption,\r\n                                Control: CustomControl,\r\n                            }}\r\n                            placeholder=\"\"\r\n                            value={countryList.filter(\r\n                                (option) => option.value === field.value,\r\n                            )}\r\n                            onChange={(option) => field.onChange(option?.value)}\r\n                        />\r\n                    )}\r\n                />\r\n            </FormItem>\r\n            <FormItem\r\n                label=\"Address\"\r\n                invalid={Boolean(errors.address)}\r\n                errorMessage={errors.address?.message}\r\n            >\r\n                <Controller\r\n                    name=\"address\"\r\n                    control={control}\r\n                    render={({ field }) => (\r\n                        <Input\r\n                            type=\"text\"\r\n                            autoComplete=\"off\"\r\n                            placeholder=\"Address\"\r\n                            {...field}\r\n                        />\r\n                    )}\r\n                />\r\n            </FormItem>\r\n            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n                <FormItem\r\n                    label=\"City\"\r\n                    invalid={Boolean(errors.city)}\r\n                    errorMessage={errors.city?.message}\r\n                >\r\n                    <Controller\r\n                        name=\"city\"\r\n                        control={control}\r\n                        render={({ field }) => (\r\n                            <Input\r\n                                type=\"text\"\r\n                                autoComplete=\"off\"\r\n                                placeholder=\"City\"\r\n                                {...field}\r\n                            />\r\n                        )}\r\n                    />\r\n                </FormItem>\r\n                <FormItem\r\n                    label=\"Postal Code\"\r\n                    invalid={Boolean(errors.postcode)}\r\n                    errorMessage={errors.postcode?.message}\r\n                >\r\n                    <Controller\r\n                        name=\"postcode\"\r\n                        control={control}\r\n                        render={({ field }) => (\r\n                            <Input\r\n                                type=\"text\"\r\n                                autoComplete=\"off\"\r\n                                placeholder=\"Postal Code\"\r\n                                {...field}\r\n                            />\r\n                        )}\r\n                    />\r\n                </FormItem>\r\n            </div>\r\n        </Card>\r\n    )\r\n}\r\n\r\nexport default BillingAddressSection\r\n"],"names":["DefaultOption"],"mappings":"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"}
+{"version":3,"file":"BillingAddressSection.js","sources":["../../../../../../../lib/@ecme/views/concepts/orders/OrderForm/components/BillingAddressSection.tsx"],"sourcesContent":["import Card from '@/components/ui/Card'\nimport Input from '@/components/ui/Input'\nimport Select, { Option as DefaultOption } from '@/components/ui/Select'\nimport Avatar from '@/components/ui/Avatar'\nimport { FormItem } from '@/components/ui/Form'\nimport { countryList } from '@/constants/countries.constant'\nimport { Controller } from 'react-hook-form'\nimport { components } from 'react-select'\nimport type { FormSectionBaseProps } from '../types'\nimport type { ControlProps, OptionProps } from 'react-select'\n\ntype BillingAddressSectionProps = FormSectionBaseProps\n\ntype CountryOption = {\n    label: string\n    dialCode: string\n    value: string\n}\n\nconst { Control } = components\n\nconst CustomSelectOption = (props: OptionProps<CountryOption>) => {\n    return (\n        <DefaultOption<CountryOption>\n            {...props}\n            customLabel={(data, label) => (\n                <span className=\"flex items-center gap-2\">\n                    <Avatar\n                        shape=\"circle\"\n                        size={20}\n                        src={`/img/countries/${data.value}.png`}\n                    />\n                    <span>{label}</span>\n                </span>\n            )}\n        />\n    )\n}\n\nconst CustomControl = ({ children, ...props }: ControlProps<CountryOption>) => {\n    const selected = props.getValue()[0]\n    return (\n        <Control {...props}>\n            {selected && (\n                <Avatar\n                    className=\"ltr:ml-4 rtl:mr-4\"\n                    shape=\"circle\"\n                    size={20}\n                    src={`/img/countries/${selected.value}.png`}\n                />\n            )}\n            {children}\n        </Control>\n    )\n}\n\nconst BillingAddressSection = ({\n    control,\n    errors,\n}: BillingAddressSectionProps) => {\n    return (\n        <Card id=\"addressInformation\">\n            <h4 className=\"mb-6\">Address Information</h4>\n            <FormItem\n                label=\"Country\"\n                invalid={Boolean(errors.country)}\n                errorMessage={errors.country?.message}\n            >\n                <Controller\n                    name=\"country\"\n                    control={control}\n                    render={({ field }) => (\n                        <Select<CountryOption>\n                            options={countryList}\n                            {...field}\n                            components={{\n                                Option: CustomSelectOption,\n                                Control: CustomControl,\n                            }}\n                            placeholder=\"\"\n                            value={countryList.filter(\n                                (option) => option.value === field.value,\n                            )}\n                            onChange={(option) => field.onChange(option?.value)}\n                        />\n                    )}\n                />\n            </FormItem>\n            <FormItem\n                label=\"Address\"\n                invalid={Boolean(errors.address)}\n                errorMessage={errors.address?.message}\n            >\n                <Controller\n                    name=\"address\"\n                    control={control}\n                    render={({ field }) => (\n                        <Input\n                            type=\"text\"\n                            autoComplete=\"off\"\n                            placeholder=\"Address\"\n                            {...field}\n                        />\n                    )}\n                />\n            </FormItem>\n            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n                <FormItem\n                    label=\"City\"\n                    invalid={Boolean(errors.city)}\n                    errorMessage={errors.city?.message}\n                >\n                    <Controller\n                        name=\"city\"\n                        control={control}\n                        render={({ field }) => (\n                            <Input\n                                type=\"text\"\n                                autoComplete=\"off\"\n                                placeholder=\"City\"\n                                {...field}\n                            />\n                        )}\n                    />\n                </FormItem>\n                <FormItem\n                    label=\"Postal Code\"\n                    invalid={Boolean(errors.postcode)}\n                    errorMessage={errors.postcode?.message}\n                >\n                    <Controller\n                        name=\"postcode\"\n                        control={control}\n                        render={({ field }) => (\n                            <Input\n                                type=\"text\"\n                                autoComplete=\"off\"\n                                placeholder=\"Postal Code\"\n                                {...field}\n                            />\n                        )}\n                    />\n                </FormItem>\n            </div>\n        </Card>\n    )\n}\n\nexport default BillingAddressSection\n"],"names":["DefaultOption"],"mappings":"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"}

package/dist/@ecme/views/concepts/orders/OrderForm/components/CustomerDetailSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomerDetailSection.js","sources":["../../../../../../../lib/@ecme/views/concepts/orders/OrderForm/components/CustomerDetailSection.tsx"],"sourcesContent":["import { useMemo } from 'react'\r\nimport Card from '@/components/ui/Card'\r\nimport Input from '@/components/ui/Input'\r\nimport Select, { Option as DefaultOption } from '@/components/ui/Select'\r\nimport Avatar from '@/components/ui/Avatar'\r\nimport { FormItem } from '@/components/ui/Form'\r\nimport NumericInput from '@/components/shared/NumericInput'\r\nimport { countryList } from '@/constants/countries.constant'\r\nimport { Controller } from 'react-hook-form'\r\nimport { components } from 'react-select'\r\nimport type { FormSectionBaseProps } from '../types'\r\nimport type { ControlProps, OptionProps } from 'react-select'\r\n\r\ntype CustomerDetailSectionProps = FormSectionBaseProps\r\n\r\ntype CountryOption = {\r\n    label: string\r\n    dialCode: string\r\n    value: string\r\n}\r\n\r\nconst { Control } = components\r\n\r\nconst CustomSelectOption = (props: OptionProps<CountryOption>) => {\r\n    return (\r\n        <DefaultOption<CountryOption>\r\n            {...props}\r\n            customLabel={(data) => (\r\n                <span className=\"flex items-center gap-2\">\r\n                    <Avatar\r\n                        shape=\"circle\"\r\n                        size={20}\r\n                        src={`/img/countries/${data.value}.png`}\r\n                    />\r\n                    <span>{data.dialCode}</span>\r\n                </span>\r\n            )}\r\n        />\r\n    )\r\n}\r\n\r\nconst CustomControl = ({ children, ...props }: ControlProps<CountryOption>) => {\r\n    const selected = props.getValue()[0]\r\n    return (\r\n        <Control {...props}>\r\n            {selected && (\r\n                <Avatar\r\n                    className=\"ltr:ml-4 rtl:mr-4\"\r\n                    shape=\"circle\"\r\n                    size={20}\r\n                    src={`/img/countries/${selected.value}.png`}\r\n                />\r\n            )}\r\n            {children}\r\n        </Control>\r\n    )\r\n}\r\n\r\nconst CustomerDetailSection = ({\r\n    control,\r\n    errors,\r\n}: CustomerDetailSectionProps) => {\r\n    const dialCodeList = useMemo(() => {\r\n        const newCountryList: Array<CountryOption> = JSON.parse(\r\n            JSON.stringify(countryList),\r\n        )\r\n\r\n        return newCountryList.map((country) => {\r\n            country.label = country.dialCode\r\n            return country\r\n        })\r\n    }, [])\r\n\r\n    return (\r\n        <Card id=\"customerDetails\">\r\n            <h4 className=\"mb-6\">Customer details</h4>\r\n            <div className=\"grid md:grid-cols-2 gap-4\">\r\n                <FormItem\r\n                    label=\"First Name\"\r\n                    invalid={Boolean(errors.firstName)}\r\n                    errorMessage={errors.firstName?.message}\r\n                >\r\n                    <Controller\r\n                        name=\"firstName\"\r\n                        control={control}\r\n                        render={({ field }) => (\r\n                            <Input\r\n                                type=\"text\"\r\n                                autoComplete=\"off\"\r\n                                placeholder=\"First Name\"\r\n                                {...field}\r\n                            />\r\n                        )}\r\n                    />\r\n                </FormItem>\r\n                <FormItem\r\n                    label=\"User Name\"\r\n                    invalid={Boolean(errors.lastName)}\r\n                    errorMessage={errors.lastName?.message}\r\n                >\r\n                    <Controller\r\n                        name=\"lastName\"\r\n                        control={control}\r\n                        render={({ field }) => (\r\n                            <Input\r\n                                type=\"text\"\r\n                                autoComplete=\"off\"\r\n                                placeholder=\"Last Name\"\r\n                                {...field}\r\n                            />\r\n                        )}\r\n                    />\r\n                </FormItem>\r\n            </div>\r\n            <FormItem\r\n                label=\"Email\"\r\n                invalid={Boolean(errors.email)}\r\n                errorMessage={errors.email?.message}\r\n            >\r\n                <Controller\r\n                    name=\"email\"\r\n                    control={control}\r\n                    render={({ field }) => (\r\n                        <Input\r\n                            type=\"email\"\r\n                            autoComplete=\"off\"\r\n                            placeholder=\"Email\"\r\n                            {...field}\r\n                        />\r\n                    )}\r\n                />\r\n            </FormItem>\r\n            <div className=\"flex items-end gap-4 w-full\">\r\n                <FormItem\r\n                    invalid={\r\n                        Boolean(errors.phoneNumber) || Boolean(errors.dialCode)\r\n                    }\r\n                >\r\n                    <label className=\"form-label mb-2\">Phone number</label>\r\n                    <Controller\r\n                        name=\"dialCode\"\r\n                        control={control}\r\n                        render={({ field }) => (\r\n                            <Select<CountryOption>\r\n                                options={dialCodeList}\r\n                                {...field}\r\n                                className=\"w-[150px]\"\r\n                                components={{\r\n                                    Option: CustomSelectOption,\r\n                                    Control: CustomControl,\r\n                                }}\r\n                                placeholder=\"\"\r\n                                value={dialCodeList.filter(\r\n                                    (option) => option.dialCode === field.value,\r\n                                )}\r\n                                onChange={(option) =>\r\n                                    field.onChange(option?.dialCode)\r\n                                }\r\n                            />\r\n                        )}\r\n                    />\r\n                </FormItem>\r\n                <FormItem\r\n                    className=\"w-full\"\r\n                    invalid={\r\n                        Boolean(errors.phoneNumber) || Boolean(errors.dialCode)\r\n                    }\r\n                    errorMessage={errors.phoneNumber?.message}\r\n                >\r\n                    <Controller\r\n                        name=\"phoneNumber\"\r\n                        control={control}\r\n                        render={({ field }) => (\r\n                            <NumericInput\r\n                                autoComplete=\"off\"\r\n                                placeholder=\"Phone Number\"\r\n                                value={field.value}\r\n                                onChange={field.onChange}\r\n                                onBlur={field.onBlur}\r\n                            />\r\n                        )}\r\n                    />\r\n                </FormItem>\r\n            </div>\r\n        </Card>\r\n    )\r\n}\r\n\r\nexport default CustomerDetailSection\r\n"],"names":["DefaultOption"],"mappings":"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"}
+{"version":3,"file":"CustomerDetailSection.js","sources":["../../../../../../../lib/@ecme/views/concepts/orders/OrderForm/components/CustomerDetailSection.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport Card from '@/components/ui/Card'\nimport Input from '@/components/ui/Input'\nimport Select, { Option as DefaultOption } from '@/components/ui/Select'\nimport Avatar from '@/components/ui/Avatar'\nimport { FormItem } from '@/components/ui/Form'\nimport NumericInput from '@/components/shared/NumericInput'\nimport { countryList } from '@/constants/countries.constant'\nimport { Controller } from 'react-hook-form'\nimport { components } from 'react-select'\nimport type { FormSectionBaseProps } from '../types'\nimport type { ControlProps, OptionProps } from 'react-select'\n\ntype CustomerDetailSectionProps = FormSectionBaseProps\n\ntype CountryOption = {\n    label: string\n    dialCode: string\n    value: string\n}\n\nconst { Control } = components\n\nconst CustomSelectOption = (props: OptionProps<CountryOption>) => {\n    return (\n        <DefaultOption<CountryOption>\n            {...props}\n            customLabel={(data) => (\n                <span className=\"flex items-center gap-2\">\n                    <Avatar\n                        shape=\"circle\"\n                        size={20}\n                        src={`/img/countries/${data.value}.png`}\n                    />\n                    <span>{data.dialCode}</span>\n                </span>\n            )}\n        />\n    )\n}\n\nconst CustomControl = ({ children, ...props }: ControlProps<CountryOption>) => {\n    const selected = props.getValue()[0]\n    return (\n        <Control {...props}>\n            {selected && (\n                <Avatar\n                    className=\"ltr:ml-4 rtl:mr-4\"\n                    shape=\"circle\"\n                    size={20}\n                    src={`/img/countries/${selected.value}.png`}\n                />\n            )}\n            {children}\n        </Control>\n    )\n}\n\nconst CustomerDetailSection = ({\n    control,\n    errors,\n}: CustomerDetailSectionProps) => {\n    const dialCodeList = useMemo(() => {\n        const newCountryList: Array<CountryOption> = JSON.parse(\n            JSON.stringify(countryList),\n        )\n\n        return newCountryList.map((country) => {\n            country.label = country.dialCode\n            return country\n        })\n    }, [])\n\n    return (\n        <Card id=\"customerDetails\">\n            <h4 className=\"mb-6\">Customer details</h4>\n            <div className=\"grid md:grid-cols-2 gap-4\">\n                <FormItem\n                    label=\"First Name\"\n                    invalid={Boolean(errors.firstName)}\n                    errorMessage={errors.firstName?.message}\n                >\n                    <Controller\n                        name=\"firstName\"\n                        control={control}\n                        render={({ field }) => (\n                            <Input\n                                type=\"text\"\n                                autoComplete=\"off\"\n                                placeholder=\"First Name\"\n                                {...field}\n                            />\n                        )}\n                    />\n                </FormItem>\n                <FormItem\n                    label=\"User Name\"\n                    invalid={Boolean(errors.lastName)}\n                    errorMessage={errors.lastName?.message}\n                >\n                    <Controller\n                        name=\"lastName\"\n                        control={control}\n                        render={({ field }) => (\n                            <Input\n                                type=\"text\"\n                                autoComplete=\"off\"\n                                placeholder=\"Last Name\"\n                                {...field}\n                            />\n                        )}\n                    />\n                </FormItem>\n            </div>\n            <FormItem\n                label=\"Email\"\n                invalid={Boolean(errors.email)}\n                errorMessage={errors.email?.message}\n            >\n                <Controller\n                    name=\"email\"\n                    control={control}\n                    render={({ field }) => (\n                        <Input\n                            type=\"email\"\n                            autoComplete=\"off\"\n                            placeholder=\"Email\"\n                            {...field}\n                        />\n                    )}\n                />\n            </FormItem>\n            <div className=\"flex items-end gap-4 w-full\">\n                <FormItem\n                    invalid={\n                        Boolean(errors.phoneNumber) || Boolean(errors.dialCode)\n                    }\n                >\n                    <label className=\"form-label mb-2\">Phone number</label>\n                    <Controller\n                        name=\"dialCode\"\n                        control={control}\n                        render={({ field }) => (\n                            <Select<CountryOption>\n                                options={dialCodeList}\n                                {...field}\n                                className=\"w-[150px]\"\n                                components={{\n                                    Option: CustomSelectOption,\n                                    Control: CustomControl,\n                                }}\n                                placeholder=\"\"\n                                value={dialCodeList.filter(\n                                    (option) => option.dialCode === field.value,\n                                )}\n                                onChange={(option) =>\n                                    field.onChange(option?.dialCode)\n                                }\n                            />\n                        )}\n                    />\n                </FormItem>\n                <FormItem\n                    className=\"w-full\"\n                    invalid={\n                        Boolean(errors.phoneNumber) || Boolean(errors.dialCode)\n                    }\n                    errorMessage={errors.phoneNumber?.message}\n                >\n                    <Controller\n                        name=\"phoneNumber\"\n                        control={control}\n                        render={({ field }) => (\n                            <NumericInput\n                                autoComplete=\"off\"\n                                placeholder=\"Phone Number\"\n                                value={field.value}\n                                onChange={field.onChange}\n                                onBlur={field.onBlur}\n                            />\n                        )}\n                    />\n                </FormItem>\n            </div>\n        </Card>\n    )\n}\n\nexport default CustomerDetailSection\n"],"names":["DefaultOption"],"mappings":"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"}

package/dist/@ecme/views/concepts/orders/OrderForm/components/Navigator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigator.js","sources":["../../../../../../../lib/@ecme/views/concepts/orders/OrderForm/components/Navigator.tsx"],"sourcesContent":["import Avatar from '@/components/ui/Avatar'\r\n// eslint-disable-next-line import/named\r\nimport { Link } from 'react-scroll'\r\nimport { TbPackage, TbUserSquare, TbMapPin, TbCreditCard } from 'react-icons/tb'\r\n\r\nconst navigationList = [\r\n    {\r\n        label: 'Select products',\r\n        description: 'Add product to purchase list.',\r\n        link: 'selectProducts',\r\n        icon: <TbPackage />,\r\n    },\r\n    {\r\n        label: 'Customer details',\r\n        description:\r\n            'Enter customer information like name, email & phone number.',\r\n        link: 'customerDetails',\r\n        icon: <TbUserSquare />,\r\n    },\r\n    {\r\n        label: 'Address Information',\r\n        description: 'Provide shipping address details.',\r\n        link: 'addressInformation',\r\n        icon: <TbMapPin />,\r\n    },\r\n    {\r\n        label: 'Payment',\r\n        description:\r\n            'Enter payment method and details to complete the transaction.',\r\n        link: 'payment',\r\n        icon: <TbCreditCard />,\r\n    },\r\n]\r\n\r\nconst Navigator = () => {\r\n    return (\r\n        <div className=\"flex flex-col gap-2\">\r\n            {navigationList.map((nav) => (\r\n                <Link\r\n                    key={nav.label}\r\n                    activeClass=\"bg-gray-100 dark:bg-gray-700 active\"\r\n                    className=\"cursor-pointer p-4 rounded-xl group hover:bg-gray-100 dark:hover:bg-gray-700\"\r\n                    to={nav.link}\r\n                    spy={true}\r\n                    smooth={true}\r\n                    duration={500}\r\n                    offset={-80}\r\n                >\r\n                    <span className=\"flex items-center gap-2\">\r\n                        <Avatar\r\n                            icon={nav.icon}\r\n                            className=\"bg-gray-100 dark:bg-gray-700 group-hover:bg-white group-[.active]:bg-white dark:group-hover:bg-gray-800 dark:group-[.active]:bg-gray-800 heading-text \"\r\n                        />\r\n                        <span className=\"flex flex-col flex-1\">\r\n                            <span className=\"heading-text font-bold\">\r\n                                {nav.label}\r\n                            </span>\r\n                            <span>{nav.description}</span>\r\n                        </span>\r\n                    </span>\r\n                </Link>\r\n            ))}\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default Navigator\r\n"],"names":[],"mappings":";;;;AAKA,MAAM,iBAAiB;AAAA,EACnB;AAAA,IACI,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,0BAAO,WAAA,CAAA,CAAU;AAAA,EAAA;AAAA,EAErB;AAAA,IACI,OAAO;AAAA,IACP,aACI;AAAA,IACJ,MAAM;AAAA,IACN,0BAAO,cAAA,CAAA,CAAa;AAAA,EAAA;AAAA,EAExB;AAAA,IACI,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,0BAAO,UAAA,CAAA,CAAS;AAAA,EAAA;AAAA,EAEpB;AAAA,IACI,OAAO;AAAA,IACP,aACI;AAAA,IACJ,MAAM;AAAA,IACN,0BAAO,cAAA,CAAA,CAAa;AAAA,EAAA;AAE5B;AAEA,MAAM,YAAY,MAAM;AACpB,6BACK,OAAA,EAAI,WAAU,uBACV,UAAA,eAAe,IAAI,CAAC,QACjB;AAAA,IAAC;AAAA,IAAA;AAAA,MAEG,aAAY;AAAA,MACZ,WAAU;AAAA,MACV,IAAI,IAAI;AAAA,MACR,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,UAAA,qBAAC,QAAA,EAAK,WAAU,2BACZ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAM,IAAI;AAAA,YACV,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEd,qBAAC,QAAA,EAAK,WAAU,wBACZ,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,0BACX,UAAA,IAAI,OACT;AAAA,UACA,oBAAC,QAAA,EAAM,UAAA,IAAI,YAAA,CAAY;AAAA,QAAA,EAAA,CAC3B;AAAA,MAAA,EAAA,CACJ;AAAA,IAAA;AAAA,IApBK,IAAI;AAAA,EAAA,CAsBhB,GACL;AAER;"}
+{"version":3,"file":"Navigator.js","sources":["../../../../../../../lib/@ecme/views/concepts/orders/OrderForm/components/Navigator.tsx"],"sourcesContent":["import Avatar from '@/components/ui/Avatar'\n// eslint-disable-next-line import/named\nimport { Link } from 'react-scroll'\nimport { TbPackage, TbUserSquare, TbMapPin, TbCreditCard } from 'react-icons/tb'\n\nconst navigationList = [\n    {\n        label: 'Select products',\n        description: 'Add product to purchase list.',\n        link: 'selectProducts',\n        icon: <TbPackage />,\n    },\n    {\n        label: 'Customer details',\n        description:\n            'Enter customer information like name, email & phone number.',\n        link: 'customerDetails',\n        icon: <TbUserSquare />,\n    },\n    {\n        label: 'Address Information',\n        description: 'Provide shipping address details.',\n        link: 'addressInformation',\n        icon: <TbMapPin />,\n    },\n    {\n        label: 'Payment',\n        description:\n            'Enter payment method and details to complete the transaction.',\n        link: 'payment',\n        icon: <TbCreditCard />,\n    },\n]\n\nconst Navigator = () => {\n    return (\n        <div className=\"flex flex-col gap-2\">\n            {navigationList.map((nav) => (\n                <Link\n                    key={nav.label}\n                    activeClass=\"bg-gray-100 dark:bg-gray-700 active\"\n                    className=\"cursor-pointer p-4 rounded-xl group hover:bg-gray-100 dark:hover:bg-gray-700\"\n                    to={nav.link}\n                    spy={true}\n                    smooth={true}\n                    duration={500}\n                    offset={-80}\n                >\n                    <span className=\"flex items-center gap-2\">\n                        <Avatar\n                            icon={nav.icon}\n                            className=\"bg-gray-100 dark:bg-gray-700 group-hover:bg-white group-[.active]:bg-white dark:group-hover:bg-gray-800 dark:group-[.active]:bg-gray-800 heading-text \"\n                        />\n                        <span className=\"flex flex-col flex-1\">\n                            <span className=\"heading-text font-bold\">\n                                {nav.label}\n                            </span>\n                            <span>{nav.description}</span>\n                        </span>\n                    </span>\n                </Link>\n            ))}\n        </div>\n    )\n}\n\nexport default Navigator\n"],"names":[],"mappings":";;;;AAKA,MAAM,iBAAiB;AAAA,EACnB;AAAA,IACI,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,0BAAO,WAAA,CAAA,CAAU;AAAA,EAAA;AAAA,EAErB;AAAA,IACI,OAAO;AAAA,IACP,aACI;AAAA,IACJ,MAAM;AAAA,IACN,0BAAO,cAAA,CAAA,CAAa;AAAA,EAAA;AAAA,EAExB;AAAA,IACI,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,0BAAO,UAAA,CAAA,CAAS;AAAA,EAAA;AAAA,EAEpB;AAAA,IACI,OAAO;AAAA,IACP,aACI;AAAA,IACJ,MAAM;AAAA,IACN,0BAAO,cAAA,CAAA,CAAa;AAAA,EAAA;AAE5B;AAEA,MAAM,YAAY,MAAM;AACpB,6BACK,OAAA,EAAI,WAAU,uBACV,UAAA,eAAe,IAAI,CAAC,QACjB;AAAA,IAAC;AAAA,IAAA;AAAA,MAEG,aAAY;AAAA,MACZ,WAAU;AAAA,MACV,IAAI,IAAI;AAAA,MACR,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,UAAA,qBAAC,QAAA,EAAK,WAAU,2BACZ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAM,IAAI;AAAA,YACV,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEd,qBAAC,QAAA,EAAK,WAAU,wBACZ,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,0BACX,UAAA,IAAI,OACT;AAAA,UACA,oBAAC,QAAA,EAAM,UAAA,IAAI,YAAA,CAAY;AAAA,QAAA,EAAA,CAC3B;AAAA,MAAA,EAAA,CACJ;AAAA,IAAA;AAAA,IApBK,IAAI;AAAA,EAAA,CAsBhB,GACL;AAER;"}

package/dist/@ecme/views/concepts/orders/OrderForm/components/PaymentMethodSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethodSection.js","sources":["../../../../../../../lib/@ecme/views/concepts/orders/OrderForm/components/PaymentMethodSection.tsx"],"sourcesContent":["import Card from '@/components/ui/Card'\r\nimport Input from '@/components/ui/Input'\r\nimport Select, { Option as DefaultOption } from '@/components/ui/Select'\r\nimport { FormItem } from '@/components/ui/Form'\r\nimport FormCustomFormatInput from '@/components/shared/CustomFormatInput'\r\nimport FormPatternInput from '@/components/shared/PatternInput'\r\nimport { Controller } from 'react-hook-form'\r\nimport { TbCreditCard, TbBrandPaypal, TbBuildingBank } from 'react-icons/tb'\r\nimport { components } from 'react-select'\r\nimport type {\r\n    FormSectionBaseProps,\r\n    GetPaymentMethodFields,\r\n    PaymentType,\r\n} from '../types'\r\nimport type { ControlProps, OptionProps } from 'react-select'\r\nimport type { FieldErrors } from 'react-hook-form'\r\nimport type { ReactNode } from 'react'\r\n\r\ntype CreditCardFieldError = FieldErrors<\r\n    GetPaymentMethodFields<'creditOrDebitCard'>\r\n>\r\ntype PaypalFieldError = FieldErrors<GetPaymentMethodFields<'paypal'>>\r\ntype BankTransferFieldError = FieldErrors<\r\n    GetPaymentMethodFields<'bankTransfer'>\r\n>\r\n\r\ntype PaymentMethodSectionProps = FormSectionBaseProps & {\r\n    selectedPaymentMethod: string\r\n}\r\n\r\ntype PaymentMethodOption = {\r\n    label: string\r\n    value: PaymentType\r\n    icon: ReactNode\r\n}\r\n\r\nconst paymentMethodOptions: PaymentMethodOption[] = [\r\n    {\r\n        label: 'Credit/Debit card',\r\n        value: 'creditOrDebitCard',\r\n        icon: <TbCreditCard />,\r\n    },\r\n    { label: 'Paypal', value: 'paypal', icon: <TbBrandPaypal /> },\r\n    { label: 'Bank transfer', value: 'bankTransfer', icon: <TbBuildingBank /> },\r\n]\r\n\r\nfunction limit(val: string, max: string) {\r\n    if (val.length === 1 && val[0] > max[0]) {\r\n        val = '0' + val\r\n    }\r\n\r\n    if (val.length === 2) {\r\n        if (Number(val) === 0) {\r\n            val = '01'\r\n        } else if (val > max) {\r\n            val = max\r\n        }\r\n    }\r\n\r\n    return val\r\n}\r\n\r\nfunction cardExpiryFormat(val: string) {\r\n    const month = limit(val.substring(0, 2), '12')\r\n    const date = limit(val.substring(2, 4), '31')\r\n\r\n    return month + (date.length ? '/' + date : '')\r\n}\r\n\r\nconst { Control } = components\r\n\r\nconst CustomSelectOption = (props: OptionProps<PaymentMethodOption>) => {\r\n    return (\r\n        <DefaultOption<PaymentMethodOption>\r\n            {...props}\r\n            customLabel={(data, label) => (\r\n                <span className=\"flex items-center gap-2\">\r\n                    <span className=\"text-xl\">{data.icon}</span>\r\n                    <span>{label}</span>\r\n                </span>\r\n            )}\r\n        />\r\n    )\r\n}\r\n\r\nconst CustomControl = ({\r\n    children,\r\n    ...props\r\n}: ControlProps<PaymentMethodOption>) => {\r\n    const selected = props.getValue()[0]\r\n    return (\r\n        <Control {...props}>\r\n            {selected && (\r\n                <span className=\"text-xl ltr:ml-4 rtl:mr-4 text-primary\">\r\n                    {selected.icon}\r\n                </span>\r\n            )}\r\n            {children}\r\n        </Control>\r\n    )\r\n}\r\n\r\nconst PaymentMethodSection = ({\r\n    control,\r\n    errors,\r\n    selectedPaymentMethod,\r\n}: PaymentMethodSectionProps) => {\r\n    return (\r\n        <Card id=\"payment\">\r\n            <h4 className=\"mb-6\">Payment</h4>\r\n            <FormItem\r\n                label=\"Payment method\"\r\n                invalid={Boolean(errors.paymentMethod)}\r\n                errorMessage={errors.paymentMethod?.message}\r\n            >\r\n                <Controller\r\n                    name=\"paymentMethod\"\r\n                    control={control}\r\n                    render={({ field }) => (\r\n                        <Select<PaymentMethodOption>\r\n                            options={paymentMethodOptions}\r\n                            {...field}\r\n                            components={{\r\n                                Option: CustomSelectOption,\r\n                                Control: CustomControl,\r\n                            }}\r\n                            placeholder=\"\"\r\n                            value={paymentMethodOptions.filter(\r\n                                (option) => option.value === field.value,\r\n                            )}\r\n                            onChange={(option) => field.onChange(option?.value)}\r\n                        />\r\n                    )}\r\n                />\r\n            </FormItem>\r\n            {selectedPaymentMethod === 'creditOrDebitCard' && (\r\n                <>\r\n                    <FormItem\r\n                        label=\"User Name\"\r\n                        invalid={Boolean(\r\n                            (errors as CreditCardFieldError).cardHolderName,\r\n                        )}\r\n                        errorMessage={\r\n                            (errors as CreditCardFieldError).cardHolderName\r\n                                ?.message\r\n                        }\r\n                    >\r\n                        <Controller\r\n                            name=\"cardHolderName\"\r\n                            control={control}\r\n                            render={({ field }) => (\r\n                                <Input\r\n                                    type=\"text\"\r\n                                    autoComplete=\"off\"\r\n                                    placeholder=\"Card holder name\"\r\n                                    {...field}\r\n                                />\r\n                            )}\r\n                        />\r\n                    </FormItem>\r\n                    <FormItem\r\n                        label=\"Credit card number\"\r\n                        invalid={Boolean(\r\n                            (errors as CreditCardFieldError).ccNumber,\r\n                        )}\r\n                        errorMessage={\r\n                            (errors as CreditCardFieldError).ccNumber?.message\r\n                        }\r\n                    >\r\n                        <Controller\r\n                            name=\"ccNumber\"\r\n                            control={control}\r\n                            render={({ field }) => (\r\n                                <FormPatternInput\r\n                                    placeholder=\"•••• •••• •••• ••••\"\r\n                                    format=\"#### #### #### ####\"\r\n                                    value={field.value}\r\n                                    onValueChange={(e) => {\r\n                                        field.onChange(e.value)\r\n                                    }}\r\n                                />\r\n                            )}\r\n                        />\r\n                    </FormItem>\r\n                    <div className=\"grid grid-cols-2 gap-4\">\r\n                        <FormItem\r\n                            label=\"Expiration date\"\r\n                            invalid={Boolean(\r\n                                (errors as CreditCardFieldError).cardExpiry,\r\n                            )}\r\n                            errorMessage={\r\n                                (errors as CreditCardFieldError).cardExpiry\r\n                                    ?.message\r\n                            }\r\n                        >\r\n                            <Controller\r\n                                name=\"cardExpiry\"\r\n                                control={control}\r\n                                render={({ field }) => (\r\n                                    <FormCustomFormatInput\r\n                                        placeholder=\"••/••\"\r\n                                        format={cardExpiryFormat}\r\n                                        value={field.value}\r\n                                        onValueChange={(e) => {\r\n                                            field.onChange(e.value)\r\n                                        }}\r\n                                    />\r\n                                )}\r\n                            />\r\n                        </FormItem>\r\n                        <FormItem\r\n                            label=\"CVV\"\r\n                            invalid={Boolean(\r\n                                (errors as CreditCardFieldError).code,\r\n                            )}\r\n                            errorMessage={\r\n                                (errors as CreditCardFieldError).code?.message\r\n                            }\r\n                        >\r\n                            <Controller\r\n                                name=\"code\"\r\n                                control={control}\r\n                                render={({ field }) => (\r\n                                    <FormPatternInput\r\n                                        placeholder=\"•••\"\r\n                                        format=\"###\"\r\n                                        value={field.value}\r\n                                        onValueChange={(e) => {\r\n                                            field.onChange(e.value)\r\n                                        }}\r\n                                    />\r\n                                )}\r\n                            />\r\n                        </FormItem>\r\n                    </div>\r\n                </>\r\n            )}\r\n            {selectedPaymentMethod === 'paypal' && (\r\n                <>\r\n                    <FormItem\r\n                        label=\"Paypal email\"\r\n                        invalid={Boolean(\r\n                            (errors as PaypalFieldError).paypalEmail,\r\n                        )}\r\n                        errorMessage={\r\n                            (errors as PaypalFieldError).paypalEmail?.message\r\n                        }\r\n                    >\r\n                        <Controller\r\n                            name=\"paypalEmail\"\r\n                            control={control}\r\n                            render={({ field }) => (\r\n                                <Input\r\n                                    type=\"email\"\r\n                                    autoComplete=\"off\"\r\n                                    placeholder=\"Email\"\r\n                                    {...field}\r\n                                />\r\n                            )}\r\n                        />\r\n                    </FormItem>\r\n                </>\r\n            )}\r\n            {selectedPaymentMethod === 'bankTransfer' && (\r\n                <>\r\n                    <FormItem\r\n                        label=\"Bank name\"\r\n                        invalid={Boolean(\r\n                            (errors as BankTransferFieldError).bankName,\r\n                        )}\r\n                        errorMessage={\r\n                            (errors as BankTransferFieldError).bankName?.message\r\n                        }\r\n                    >\r\n                        <Controller\r\n                            name=\"bankName\"\r\n                            control={control}\r\n                            render={({ field }) => (\r\n                                <Input\r\n                                    type=\"text\"\r\n                                    autoComplete=\"off\"\r\n                                    placeholder=\"Bank name\"\r\n                                    {...field}\r\n                                />\r\n                            )}\r\n                        />\r\n                    </FormItem>\r\n                    <FormItem\r\n                        label=\"Account number\"\r\n                        invalid={Boolean(\r\n                            (errors as BankTransferFieldError).accountNumber,\r\n                        )}\r\n                        errorMessage={\r\n                            (errors as BankTransferFieldError).accountNumber\r\n                                ?.message\r\n                        }\r\n                    >\r\n                        <Controller\r\n                            name=\"accountNumber\"\r\n                            control={control}\r\n                            render={({ field }) => (\r\n                                <Input\r\n                                    type=\"text\"\r\n                                    autoComplete=\"off\"\r\n                                    placeholder=\"Account number\"\r\n                                    {...field}\r\n                                />\r\n                            )}\r\n                        />\r\n                    </FormItem>\r\n                    <FormItem\r\n                        label=\"Account holder name\"\r\n                        invalid={Boolean(\r\n                            (errors as BankTransferFieldError)\r\n                                .accountHolderName,\r\n                        )}\r\n                        errorMessage={\r\n                            (errors as BankTransferFieldError).accountHolderName\r\n                                ?.message\r\n                        }\r\n                    >\r\n                        <Controller\r\n                            name=\"accountHolderName\"\r\n                            control={control}\r\n                            render={({ field }) => (\r\n                                <Input\r\n                                    type=\"text\"\r\n                                    autoComplete=\"off\"\r\n                                    placeholder=\"Account holder name\"\r\n                                    {...field}\r\n                                />\r\n                            )}\r\n                        />\r\n                    </FormItem>\r\n                    <div className=\"grid grid-cols-2 gap-4\">\r\n                        <FormItem\r\n                            label=\"IBAN\"\r\n                            invalid={Boolean(\r\n                                (errors as BankTransferFieldError).IBAN,\r\n                            )}\r\n                            errorMessage={\r\n                                (errors as BankTransferFieldError).IBAN?.message\r\n                            }\r\n                        >\r\n                            <Controller\r\n                                name=\"IBAN\"\r\n                                control={control}\r\n                                render={({ field }) => (\r\n                                    <Input\r\n                                        type=\"text\"\r\n                                        autoComplete=\"off\"\r\n                                        placeholder=\"IBAN\"\r\n                                        {...field}\r\n                                    />\r\n                                )}\r\n                            />\r\n                        </FormItem>\r\n                        <FormItem\r\n                            label=\"Reference number\"\r\n                            invalid={Boolean(\r\n                                (errors as BankTransferFieldError)\r\n                                    .referenceNumber,\r\n                            )}\r\n                            errorMessage={\r\n                                (errors as BankTransferFieldError)\r\n                                    .referenceNumber?.message\r\n                            }\r\n                        >\r\n                            <Controller\r\n                                name=\"referenceNumber\"\r\n                                control={control}\r\n                                render={({ field }) => (\r\n                                    <Input\r\n                                        type=\"text\"\r\n                                        autoComplete=\"off\"\r\n                                        placeholder=\"Reference number\"\r\n                                        {...field}\r\n                                    />\r\n                                )}\r\n                            />\r\n                        </FormItem>\r\n                    </div>\r\n                </>\r\n            )}\r\n        </Card>\r\n    )\r\n}\r\n\r\nexport default PaymentMethodSection\r\n"],"names":["DefaultOption","FormPatternInput"],"mappings":"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"}
+{"version":3,"file":"PaymentMethodSection.js","sources":["../../../../../../../lib/@ecme/views/concepts/orders/OrderForm/components/PaymentMethodSection.tsx"],"sourcesContent":["import Card from '@/components/ui/Card'\nimport Input from '@/components/ui/Input'\nimport Select, { Option as DefaultOption } from '@/components/ui/Select'\nimport { FormItem } from '@/components/ui/Form'\nimport FormCustomFormatInput from '@/components/shared/CustomFormatInput'\nimport FormPatternInput from '@/components/shared/PatternInput'\nimport { Controller } from 'react-hook-form'\nimport { TbCreditCard, TbBrandPaypal, TbBuildingBank } from 'react-icons/tb'\nimport { components } from 'react-select'\nimport type {\n    FormSectionBaseProps,\n    GetPaymentMethodFields,\n    PaymentType,\n} from '../types'\nimport type { ControlProps, OptionProps } from 'react-select'\nimport type { FieldErrors } from 'react-hook-form'\nimport type { ReactNode } from 'react'\n\ntype CreditCardFieldError = FieldErrors<\n    GetPaymentMethodFields<'creditOrDebitCard'>\n>\ntype PaypalFieldError = FieldErrors<GetPaymentMethodFields<'paypal'>>\ntype BankTransferFieldError = FieldErrors<\n    GetPaymentMethodFields<'bankTransfer'>\n>\n\ntype PaymentMethodSectionProps = FormSectionBaseProps & {\n    selectedPaymentMethod: string\n}\n\ntype PaymentMethodOption = {\n    label: string\n    value: PaymentType\n    icon: ReactNode\n}\n\nconst paymentMethodOptions: PaymentMethodOption[] = [\n    {\n        label: 'Credit/Debit card',\n        value: 'creditOrDebitCard',\n        icon: <TbCreditCard />,\n    },\n    { label: 'Paypal', value: 'paypal', icon: <TbBrandPaypal /> },\n    { label: 'Bank transfer', value: 'bankTransfer', icon: <TbBuildingBank /> },\n]\n\nfunction limit(val: string, max: string) {\n    if (val.length === 1 && val[0] > max[0]) {\n        val = '0' + val\n    }\n\n    if (val.length === 2) {\n        if (Number(val) === 0) {\n            val = '01'\n        } else if (val > max) {\n            val = max\n        }\n    }\n\n    return val\n}\n\nfunction cardExpiryFormat(val: string) {\n    const month = limit(val.substring(0, 2), '12')\n    const date = limit(val.substring(2, 4), '31')\n\n    return month + (date.length ? '/' + date : '')\n}\n\nconst { Control } = components\n\nconst CustomSelectOption = (props: OptionProps<PaymentMethodOption>) => {\n    return (\n        <DefaultOption<PaymentMethodOption>\n            {...props}\n            customLabel={(data, label) => (\n                <span className=\"flex items-center gap-2\">\n                    <span className=\"text-xl\">{data.icon}</span>\n                    <span>{label}</span>\n                </span>\n            )}\n        />\n    )\n}\n\nconst CustomControl = ({\n    children,\n    ...props\n}: ControlProps<PaymentMethodOption>) => {\n    const selected = props.getValue()[0]\n    return (\n        <Control {...props}>\n            {selected && (\n                <span className=\"text-xl ltr:ml-4 rtl:mr-4 text-primary\">\n                    {selected.icon}\n                </span>\n            )}\n            {children}\n        </Control>\n    )\n}\n\nconst PaymentMethodSection = ({\n    control,\n    errors,\n    selectedPaymentMethod,\n}: PaymentMethodSectionProps) => {\n    return (\n        <Card id=\"payment\">\n            <h4 className=\"mb-6\">Payment</h4>\n            <FormItem\n                label=\"Payment method\"\n                invalid={Boolean(errors.paymentMethod)}\n                errorMessage={errors.paymentMethod?.message}\n            >\n                <Controller\n                    name=\"paymentMethod\"\n                    control={control}\n                    render={({ field }) => (\n                        <Select<PaymentMethodOption>\n                            options={paymentMethodOptions}\n                            {...field}\n                            components={{\n                                Option: CustomSelectOption,\n                                Control: CustomControl,\n                            }}\n                            placeholder=\"\"\n                            value={paymentMethodOptions.filter(\n                                (option) => option.value === field.value,\n                            )}\n                            onChange={(option) => field.onChange(option?.value)}\n                        />\n                    )}\n                />\n            </FormItem>\n            {selectedPaymentMethod === 'creditOrDebitCard' && (\n                <>\n                    <FormItem\n                        label=\"User Name\"\n                        invalid={Boolean(\n                            (errors as CreditCardFieldError).cardHolderName,\n                        )}\n                        errorMessage={\n                            (errors as CreditCardFieldError).cardHolderName\n                                ?.message\n                        }\n                    >\n                        <Controller\n                            name=\"cardHolderName\"\n                            control={control}\n                            render={({ field }) => (\n                                <Input\n                                    type=\"text\"\n                                    autoComplete=\"off\"\n                                    placeholder=\"Card holder name\"\n                                    {...field}\n                                />\n                            )}\n                        />\n                    </FormItem>\n                    <FormItem\n                        label=\"Credit card number\"\n                        invalid={Boolean(\n                            (errors as CreditCardFieldError).ccNumber,\n                        )}\n                        errorMessage={\n                            (errors as CreditCardFieldError).ccNumber?.message\n                        }\n                    >\n                        <Controller\n                            name=\"ccNumber\"\n                            control={control}\n                            render={({ field }) => (\n                                <FormPatternInput\n                                    placeholder=\"•••• •••• •••• ••••\"\n                                    format=\"#### #### #### ####\"\n                                    value={field.value}\n                                    onValueChange={(e) => {\n                                        field.onChange(e.value)\n                                    }}\n                                />\n                            )}\n                        />\n                    </FormItem>\n                    <div className=\"grid grid-cols-2 gap-4\">\n                        <FormItem\n                            label=\"Expiration date\"\n                            invalid={Boolean(\n                                (errors as CreditCardFieldError).cardExpiry,\n                            )}\n                            errorMessage={\n                                (errors as CreditCardFieldError).cardExpiry\n                                    ?.message\n                            }\n                        >\n                            <Controller\n                                name=\"cardExpiry\"\n                                control={control}\n                                render={({ field }) => (\n                                    <FormCustomFormatInput\n                                        placeholder=\"••/••\"\n                                        format={cardExpiryFormat}\n                                        value={field.value}\n                                        onValueChange={(e) => {\n                                            field.onChange(e.value)\n                                        }}\n                                    />\n                                )}\n                            />\n                        </FormItem>\n                        <FormItem\n                            label=\"CVV\"\n                            invalid={Boolean(\n                                (errors as CreditCardFieldError).code,\n                            )}\n                            errorMessage={\n                                (errors as CreditCardFieldError).code?.message\n                            }\n                        >\n                            <Controller\n                                name=\"code\"\n                                control={control}\n                                render={({ field }) => (\n                                    <FormPatternInput\n                                        placeholder=\"•••\"\n                                        format=\"###\"\n                                        value={field.value}\n                                        onValueChange={(e) => {\n                                            field.onChange(e.value)\n                                        }}\n                                    />\n                                )}\n                            />\n                        </FormItem>\n                    </div>\n                </>\n            )}\n            {selectedPaymentMethod === 'paypal' && (\n                <>\n                    <FormItem\n                        label=\"Paypal email\"\n                        invalid={Boolean(\n                            (errors as PaypalFieldError).paypalEmail,\n                        )}\n                        errorMessage={\n                            (errors as PaypalFieldError).paypalEmail?.message\n                        }\n                    >\n                        <Controller\n                            name=\"paypalEmail\"\n                            control={control}\n                            render={({ field }) => (\n                                <Input\n                                    type=\"email\"\n                                    autoComplete=\"off\"\n                                    placeholder=\"Email\"\n                                    {...field}\n                                />\n                            )}\n                        />\n                    </FormItem>\n                </>\n            )}\n            {selectedPaymentMethod === 'bankTransfer' && (\n                <>\n                    <FormItem\n                        label=\"Bank name\"\n                        invalid={Boolean(\n                            (errors as BankTransferFieldError).bankName,\n                        )}\n                        errorMessage={\n                            (errors as BankTransferFieldError).bankName?.message\n                        }\n                    >\n                        <Controller\n                            name=\"bankName\"\n                            control={control}\n                            render={({ field }) => (\n                                <Input\n                                    type=\"text\"\n                                    autoComplete=\"off\"\n                                    placeholder=\"Bank name\"\n                                    {...field}\n                                />\n                            )}\n                        />\n                    </FormItem>\n                    <FormItem\n                        label=\"Account number\"\n                        invalid={Boolean(\n                            (errors as BankTransferFieldError).accountNumber,\n                        )}\n                        errorMessage={\n                            (errors as BankTransferFieldError).accountNumber\n                                ?.message\n                        }\n                    >\n                        <Controller\n                            name=\"accountNumber\"\n                            control={control}\n                            render={({ field }) => (\n                                <Input\n                                    type=\"text\"\n                                    autoComplete=\"off\"\n                                    placeholder=\"Account number\"\n                                    {...field}\n                                />\n                            )}\n                        />\n                    </FormItem>\n                    <FormItem\n                        label=\"Account holder name\"\n                        invalid={Boolean(\n                            (errors as BankTransferFieldError)\n                                .accountHolderName,\n                        )}\n                        errorMessage={\n                            (errors as BankTransferFieldError).accountHolderName\n                                ?.message\n                        }\n                    >\n                        <Controller\n                            name=\"accountHolderName\"\n                            control={control}\n                            render={({ field }) => (\n                                <Input\n                                    type=\"text\"\n                                    autoComplete=\"off\"\n                                    placeholder=\"Account holder name\"\n                                    {...field}\n                                />\n                            )}\n                        />\n                    </FormItem>\n                    <div className=\"grid grid-cols-2 gap-4\">\n                        <FormItem\n                            label=\"IBAN\"\n                            invalid={Boolean(\n                                (errors as BankTransferFieldError).IBAN,\n                            )}\n                            errorMessage={\n                                (errors as BankTransferFieldError).IBAN?.message\n                            }\n                        >\n                            <Controller\n                                name=\"IBAN\"\n                                control={control}\n                                render={({ field }) => (\n                                    <Input\n                                        type=\"text\"\n                                        autoComplete=\"off\"\n                                        placeholder=\"IBAN\"\n                                        {...field}\n                                    />\n                                )}\n                            />\n                        </FormItem>\n                        <FormItem\n                            label=\"Reference number\"\n                            invalid={Boolean(\n                                (errors as BankTransferFieldError)\n                                    .referenceNumber,\n                            )}\n                            errorMessage={\n                                (errors as BankTransferFieldError)\n                                    .referenceNumber?.message\n                            }\n                        >\n                            <Controller\n                                name=\"referenceNumber\"\n                                control={control}\n                                render={({ field }) => (\n                                    <Input\n                                        type=\"text\"\n                                        autoComplete=\"off\"\n                                        placeholder=\"Reference number\"\n                                        {...field}\n                                    />\n                                )}\n                            />\n                        </FormItem>\n                    </div>\n                </>\n            )}\n        </Card>\n    )\n}\n\nexport default PaymentMethodSection\n"],"names":["DefaultOption","FormPatternInput"],"mappings":"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"}

package/dist/@ecme/views/concepts/orders/OrderForm/components/ProductSelectSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductSelectSection.js","sources":["../../../../../../../lib/@ecme/views/concepts/orders/OrderForm/components/ProductSelectSection.tsx"],"sourcesContent":["import { useMemo, useState } from 'react'\r\nimport Card from '@/components/ui/Card'\r\nimport Button from '@/components/ui/Button'\r\nimport Dialog from '@/components/ui/Dialog'\r\nimport Checkbox from '@/components/ui/Checkbox'\r\nimport Avatar from '@/components/ui/Avatar'\r\nimport Table from '@/components/ui/Table'\r\nimport ScrollBar from '@/components/ui/ScrollBar'\r\nimport AutoComplete from '@/components/shared/AutoComplete'\r\nimport useResponsive from '@/utils/hooks/useResponsive'\r\nimport { useOrderFormStore } from '../store/orderFormStore'\r\nimport classNames from '@/utils/classNames'\r\nimport { NumericFormat } from 'react-number-format'\r\nimport { TbSearch, TbMinus, TbPlus } from 'react-icons/tb'\r\nimport type { Product, ProductOption, SelectedProduct } from '../types'\r\n\r\nconst { Tr, Th, Td, THead, TBody } = Table\r\n\r\nconst ProductSelectSection = () => {\r\n    const { productOption, productList, selectedProduct, setSelectedProduct } =\r\n        useOrderFormStore()\r\n\r\n    const [inputValue, setInputValue] = useState('')\r\n\r\n    const [productsDialogOpen, setProductsDialogOpen] = useState(false)\r\n\r\n    const { smaller } = useResponsive()\r\n\r\n    const handleOptionSelect = (option: ProductOption) => {\r\n        const selected = productList.find(\r\n            (product) => product.id === option.value,\r\n        )\r\n\r\n        if (selected) {\r\n            if (selectedProduct.some((product) => product.id === selected.id)) {\r\n                return\r\n            } else {\r\n                selectedProduct.push({ ...selected, quantity: 1 })\r\n                setSelectedProduct(selectedProduct)\r\n            }\r\n        }\r\n    }\r\n\r\n    const handleProductIncremental = (productToIncrease: SelectedProduct) => {\r\n        setSelectedProduct(\r\n            selectedProduct.map((product) => {\r\n                if (product.id === productToIncrease.id) {\r\n                    product.quantity = product.quantity + 1\r\n                }\r\n                return product\r\n            }),\r\n        )\r\n    }\r\n\r\n    const handleProductDecremental = (productToDecrease: SelectedProduct) => {\r\n        const targeted = productToDecrease\r\n\r\n        targeted.quantity = targeted.quantity - 1\r\n        if (targeted.quantity === 0) {\r\n            setSelectedProduct(\r\n                selectedProduct.filter((product) => product.id !== targeted.id),\r\n            )\r\n        } else {\r\n            setSelectedProduct(\r\n                selectedProduct.map((product) => {\r\n                    if (product.id === targeted.id) {\r\n                        product = targeted\r\n                    }\r\n                    return product\r\n                }),\r\n            )\r\n        }\r\n    }\r\n\r\n    const handleProductChecked = (checked: boolean, selected: Product) => {\r\n        if (checked) {\r\n            selectedProduct.push({ ...selected, quantity: 1 })\r\n            setSelectedProduct(selectedProduct)\r\n        } else {\r\n            setSelectedProduct(\r\n                selectedProduct.filter((product) => product.id !== selected.id),\r\n            )\r\n        }\r\n    }\r\n\r\n    const total = useMemo(() => {\r\n        return selectedProduct.reduce((accumulator, product) => {\r\n            return accumulator + product.price * product.quantity\r\n        }, 0)\r\n        // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    }, [selectedProduct, selectedProduct.length])\r\n\r\n    return (\r\n        <>\r\n            <Card id=\"selectProducts\">\r\n                <h4 className=\"mb-6\">Select products</h4>\r\n                <div className=\"flex items-center gap-2\">\r\n                    <AutoComplete<ProductOption>\r\n                        data={productOption}\r\n                        optionKey={(product) => product.label}\r\n                        value={inputValue}\r\n                        renderOption={(option) => (\r\n                            <div className=\"flex items-center gap-2\">\r\n                                <Avatar shape=\"round\" src={option.img} />\r\n                                <span>{option.label}</span>\r\n                            </div>\r\n                        )}\r\n                        suffix={<TbSearch className=\"text-lg\" />}\r\n                        placeholder=\"Search product\"\r\n                        onInputChange={setInputValue}\r\n                        onOptionSelected={handleOptionSelect}\r\n                    />\r\n                    <Button\r\n                        type=\"button\"\r\n                        variant=\"solid\"\r\n                        onClick={() => setProductsDialogOpen(true)}\r\n                    >\r\n                        Browse products\r\n                    </Button>\r\n                </div>\r\n                <Table compact={smaller.sm} className=\"mt-6\">\r\n                    <THead>\r\n                        <Tr>\r\n                            <Th className=\"w-[70%]\">Product</Th>\r\n                            <Th>Price</Th>\r\n                            <Th>Quantity</Th>\r\n                        </Tr>\r\n                    </THead>\r\n                    <TBody>\r\n                        {selectedProduct.length > 0 ? (\r\n                            selectedProduct.map((product) => (\r\n                                <Tr key={product.id}>\r\n                                    <Td>\r\n                                        <div className=\"flex items-center gap-2\">\r\n                                            <Avatar\r\n                                                shape=\"round\"\r\n                                                src={product.img}\r\n                                            />\r\n                                            <div>\r\n                                                <div className=\"heading-text font-bold\">\r\n                                                    {product.name}\r\n                                                </div>\r\n                                                <div>\r\n                                                    ID: {product.productCode}\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </Td>\r\n                                    <Td>\r\n                                        <div className=\"heading-text font-bold\">\r\n                                            <NumericFormat\r\n                                                fixedDecimalScale\r\n                                                prefix=\"$\"\r\n                                                displayType=\"text\"\r\n                                                value={\r\n                                                    product.price *\r\n                                                    product.quantity\r\n                                                }\r\n                                                decimalScale={2}\r\n                                                thousandSeparator={true}\r\n                                            />\r\n                                        </div>\r\n                                    </Td>\r\n                                    <Td>\r\n                                        <div className=\"flex items-center\">\r\n                                            <Button\r\n                                                type=\"button\"\r\n                                                icon={<TbMinus />}\r\n                                                size=\"xs\"\r\n                                                onClick={() =>\r\n                                                    handleProductDecremental(\r\n                                                        product,\r\n                                                    )\r\n                                                }\r\n                                            />\r\n                                            <div className=\"w-10 text-center\">\r\n                                                <span>{product.quantity}</span>\r\n                                            </div>\r\n                                            <Button\r\n                                                type=\"button\"\r\n                                                icon={<TbPlus />}\r\n                                                size=\"xs\"\r\n                                                onClick={() =>\r\n                                                    handleProductIncremental(\r\n                                                        product,\r\n                                                    )\r\n                                                }\r\n                                            />\r\n                                        </div>\r\n                                    </Td>\r\n                                </Tr>\r\n                            ))\r\n                        ) : (\r\n                            <Tr>\r\n                                <Td className=\"text-center\" colSpan={3}>\r\n                                    No product selected!\r\n                                </Td>\r\n                            </Tr>\r\n                        )}\r\n                    </TBody>\r\n                </Table>\r\n                <div className=\"mt-8 flex justify-end\">\r\n                    <span className=\"text-base flex items-center gap-2\">\r\n                        <span className=\"font-semibold\">Total: </span>\r\n                        <span className=\"text-lg font-bold heading-text\">\r\n                            <NumericFormat\r\n                                fixedDecimalScale\r\n                                prefix=\"$\"\r\n                                displayType=\"text\"\r\n                                value={total}\r\n                                decimalScale={2}\r\n                                thousandSeparator={true}\r\n                            />\r\n                        </span>\r\n                    </span>\r\n                </div>\r\n            </Card>\r\n            <Dialog\r\n                isOpen={productsDialogOpen}\r\n                onClose={() => setProductsDialogOpen(false)}\r\n                onRequestClose={() => setProductsDialogOpen(false)}\r\n            >\r\n                <div className=\"text-center mb-6\">\r\n                    <h4 className=\"mb-1\">All products</h4>\r\n                    <p>Add products to this order.</p>\r\n                </div>\r\n                <div className=\"mt-4\">\r\n                    <div className=\"mb-6\">\r\n                        <ScrollBar\r\n                            className={classNames('overflow-y-auto h-80')}\r\n                        >\r\n                            {productList.map((product) => (\r\n                                <div\r\n                                    key={product.id}\r\n                                    className=\"py-3 pr-5 rounded-lg flex items-center justify-between\"\r\n                                >\r\n                                    <div className=\"flex items-center gap-2\">\r\n                                        <div className=\"px-1\">\r\n                                            <Checkbox\r\n                                                checked={selectedProduct.some(\r\n                                                    (selected) =>\r\n                                                        selected.id ===\r\n                                                        product.id,\r\n                                                )}\r\n                                                onChange={(value) =>\r\n                                                    handleProductChecked(\r\n                                                        value,\r\n                                                        product,\r\n                                                    )\r\n                                                }\r\n                                            />\r\n                                        </div>\r\n                                        <div className=\"flex items-center gap-2\">\r\n                                            <Avatar\r\n                                                size=\"lg\"\r\n                                                shape=\"round\"\r\n                                                src={product.img}\r\n                                            />\r\n                                            <div>\r\n                                                <p className=\"heading-text font-bold\">\r\n                                                    {product.name}\r\n                                                </p>\r\n                                                <p>ID: {product.productCode}</p>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div>\r\n                                        Qty:{' '}\r\n                                        <span className=\"heading-text font-bold\">\r\n                                            {product.stock}\r\n                                        </span>\r\n                                    </div>\r\n                                </div>\r\n                            ))}\r\n                        </ScrollBar>\r\n                    </div>\r\n                </div>\r\n                <Button\r\n                    block\r\n                    type=\"button\"\r\n                    variant=\"solid\"\r\n                    onClick={() => setProductsDialogOpen(false)}\r\n                >\r\n                    Done\r\n                </Button>\r\n            </Dialog>\r\n        </>\r\n    )\r\n}\r\n\r\nexport default ProductSelectSection\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProductSelectSection.js","sources":["../../../../../../../lib/@ecme/views/concepts/orders/OrderForm/components/ProductSelectSection.tsx"],"sourcesContent":["import { useMemo, useState } from 'react'\nimport Card from '@/components/ui/Card'\nimport Button from '@/components/ui/Button'\nimport Dialog from '@/components/ui/Dialog'\nimport Checkbox from '@/components/ui/Checkbox'\nimport Avatar from '@/components/ui/Avatar'\nimport Table from '@/components/ui/Table'\nimport ScrollBar from '@/components/ui/ScrollBar'\nimport AutoComplete from '@/components/shared/AutoComplete'\nimport useResponsive from '@/utils/hooks/useResponsive'\nimport { useOrderFormStore } from '../store/orderFormStore'\nimport classNames from '@/utils/classNames'\nimport { NumericFormat } from 'react-number-format'\nimport { TbSearch, TbMinus, TbPlus } from 'react-icons/tb'\nimport type { Product, ProductOption, SelectedProduct } from '../types'\n\nconst { Tr, Th, Td, THead, TBody } = Table\n\nconst ProductSelectSection = () => {\n    const { productOption, productList, selectedProduct, setSelectedProduct } =\n        useOrderFormStore()\n\n    const [inputValue, setInputValue] = useState('')\n\n    const [productsDialogOpen, setProductsDialogOpen] = useState(false)\n\n    const { smaller } = useResponsive()\n\n    const handleOptionSelect = (option: ProductOption) => {\n        const selected = productList.find(\n            (product) => product.id === option.value,\n        )\n\n        if (selected) {\n            if (selectedProduct.some((product) => product.id === selected.id)) {\n                return\n            } else {\n                selectedProduct.push({ ...selected, quantity: 1 })\n                setSelectedProduct(selectedProduct)\n            }\n        }\n    }\n\n    const handleProductIncremental = (productToIncrease: SelectedProduct) => {\n        setSelectedProduct(\n            selectedProduct.map((product) => {\n                if (product.id === productToIncrease.id) {\n                    product.quantity = product.quantity + 1\n                }\n                return product\n            }),\n        )\n    }\n\n    const handleProductDecremental = (productToDecrease: SelectedProduct) => {\n        const targeted = productToDecrease\n\n        targeted.quantity = targeted.quantity - 1\n        if (targeted.quantity === 0) {\n            setSelectedProduct(\n                selectedProduct.filter((product) => product.id !== targeted.id),\n            )\n        } else {\n            setSelectedProduct(\n                selectedProduct.map((product) => {\n                    if (product.id === targeted.id) {\n                        product = targeted\n                    }\n                    return product\n                }),\n            )\n        }\n    }\n\n    const handleProductChecked = (checked: boolean, selected: Product) => {\n        if (checked) {\n            selectedProduct.push({ ...selected, quantity: 1 })\n            setSelectedProduct(selectedProduct)\n        } else {\n            setSelectedProduct(\n                selectedProduct.filter((product) => product.id !== selected.id),\n            )\n        }\n    }\n\n    const total = useMemo(() => {\n        return selectedProduct.reduce((accumulator, product) => {\n            return accumulator + product.price * product.quantity\n        }, 0)\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [selectedProduct, selectedProduct.length])\n\n    return (\n        <>\n            <Card id=\"selectProducts\">\n                <h4 className=\"mb-6\">Select products</h4>\n                <div className=\"flex items-center gap-2\">\n                    <AutoComplete<ProductOption>\n                        data={productOption}\n                        optionKey={(product) => product.label}\n                        value={inputValue}\n                        renderOption={(option) => (\n                            <div className=\"flex items-center gap-2\">\n                                <Avatar shape=\"round\" src={option.img} />\n                                <span>{option.label}</span>\n                            </div>\n                        )}\n                        suffix={<TbSearch className=\"text-lg\" />}\n                        placeholder=\"Search product\"\n                        onInputChange={setInputValue}\n                        onOptionSelected={handleOptionSelect}\n                    />\n                    <Button\n                        type=\"button\"\n                        variant=\"solid\"\n                        onClick={() => setProductsDialogOpen(true)}\n                    >\n                        Browse products\n                    </Button>\n                </div>\n                <Table compact={smaller.sm} className=\"mt-6\">\n                    <THead>\n                        <Tr>\n                            <Th className=\"w-[70%]\">Product</Th>\n                            <Th>Price</Th>\n                            <Th>Quantity</Th>\n                        </Tr>\n                    </THead>\n                    <TBody>\n                        {selectedProduct.length > 0 ? (\n                            selectedProduct.map((product) => (\n                                <Tr key={product.id}>\n                                    <Td>\n                                        <div className=\"flex items-center gap-2\">\n                                            <Avatar\n                                                shape=\"round\"\n                                                src={product.img}\n                                            />\n                                            <div>\n                                                <div className=\"heading-text font-bold\">\n                                                    {product.name}\n                                                </div>\n                                                <div>\n                                                    ID: {product.productCode}\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </Td>\n                                    <Td>\n                                        <div className=\"heading-text font-bold\">\n                                            <NumericFormat\n                                                fixedDecimalScale\n                                                prefix=\"$\"\n                                                displayType=\"text\"\n                                                value={\n                                                    product.price *\n                                                    product.quantity\n                                                }\n                                                decimalScale={2}\n                                                thousandSeparator={true}\n                                            />\n                                        </div>\n                                    </Td>\n                                    <Td>\n                                        <div className=\"flex items-center\">\n                                            <Button\n                                                type=\"button\"\n                                                icon={<TbMinus />}\n                                                size=\"xs\"\n                                                onClick={() =>\n                                                    handleProductDecremental(\n                                                        product,\n                                                    )\n                                                }\n                                            />\n                                            <div className=\"w-10 text-center\">\n                                                <span>{product.quantity}</span>\n                                            </div>\n                                            <Button\n                                                type=\"button\"\n                                                icon={<TbPlus />}\n                                                size=\"xs\"\n                                                onClick={() =>\n                                                    handleProductIncremental(\n                                                        product,\n                                                    )\n                                                }\n                                            />\n                                        </div>\n                                    </Td>\n                                </Tr>\n                            ))\n                        ) : (\n                            <Tr>\n                                <Td className=\"text-center\" colSpan={3}>\n                                    No product selected!\n                                </Td>\n                            </Tr>\n                        )}\n                    </TBody>\n                </Table>\n                <div className=\"mt-8 flex justify-end\">\n                    <span className=\"text-base flex items-center gap-2\">\n                        <span className=\"font-semibold\">Total: </span>\n                        <span className=\"text-lg font-bold heading-text\">\n                            <NumericFormat\n                                fixedDecimalScale\n                                prefix=\"$\"\n                                displayType=\"text\"\n                                value={total}\n                                decimalScale={2}\n                                thousandSeparator={true}\n                            />\n                        </span>\n                    </span>\n                </div>\n            </Card>\n            <Dialog\n                isOpen={productsDialogOpen}\n                onClose={() => setProductsDialogOpen(false)}\n                onRequestClose={() => setProductsDialogOpen(false)}\n            >\n                <div className=\"text-center mb-6\">\n                    <h4 className=\"mb-1\">All products</h4>\n                    <p>Add products to this order.</p>\n                </div>\n                <div className=\"mt-4\">\n                    <div className=\"mb-6\">\n                        <ScrollBar\n                            className={classNames('overflow-y-auto h-80')}\n                        >\n                            {productList.map((product) => (\n                                <div\n                                    key={product.id}\n                                    className=\"py-3 pr-5 rounded-lg flex items-center justify-between\"\n                                >\n                                    <div className=\"flex items-center gap-2\">\n                                        <div className=\"px-1\">\n                                            <Checkbox\n                                                checked={selectedProduct.some(\n                                                    (selected) =>\n                                                        selected.id ===\n                                                        product.id,\n                                                )}\n                                                onChange={(value) =>\n                                                    handleProductChecked(\n                                                        value,\n                                                        product,\n                                                    )\n                                                }\n                                            />\n                                        </div>\n                                        <div className=\"flex items-center gap-2\">\n                                            <Avatar\n                                                size=\"lg\"\n                                                shape=\"round\"\n                                                src={product.img}\n                                            />\n                                            <div>\n                                                <p className=\"heading-text font-bold\">\n                                                    {product.name}\n                                                </p>\n                                                <p>ID: {product.productCode}</p>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <div>\n                                        Qty:{' '}\n                                        <span className=\"heading-text font-bold\">\n                                            {product.stock}\n                                        </span>\n                                    </div>\n                                </div>\n                            ))}\n                        </ScrollBar>\n                    </div>\n                </div>\n                <Button\n                    block\n                    type=\"button\"\n                    variant=\"solid\"\n                    onClick={() => setProductsDialogOpen(false)}\n                >\n                    Done\n                </Button>\n            </Dialog>\n        </>\n    )\n}\n\nexport default ProductSelectSection\n"],"names":[],"mappings":"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"}

package/dist/@ecme/views/concepts/orders/OrderForm/store/orderFormStore.js.map

@@ -1 +1 @@
-{"version":3,"file":"orderFormStore.js","sources":["../../../../../../../lib/@ecme/views/concepts/orders/OrderForm/store/orderFormStore.ts"],"sourcesContent":["import { create } from 'zustand'\r\nimport type { ProductOption, Products, SelectedProduct } from '../types'\r\n\r\nexport type OrderFormState = {\r\n    productList: Products\r\n    productOption: ProductOption[]\r\n    selectedProduct: SelectedProduct[]\r\n}\r\n\r\ntype OrderFormAction = {\r\n    setProductList: (payload: Products) => void\r\n    setProductOption: (payload: ProductOption[]) => void\r\n    setSelectedProduct: (payload: SelectedProduct[]) => void\r\n}\r\n\r\nconst initialState: OrderFormState = {\r\n    productList: [],\r\n    productOption: [],\r\n    selectedProduct: [],\r\n}\r\n\r\nexport const useOrderFormStore = create<OrderFormState & OrderFormAction>(\r\n    (set) => ({\r\n        ...initialState,\r\n        setProductOption: (payload) => set(() => ({ productOption: payload })),\r\n        setProductList: (payload) => set(() => ({ productList: payload })),\r\n        setSelectedProduct: (payload) =>\r\n            set(() => ({ selectedProduct: payload })),\r\n    }),\r\n)\r\n"],"names":[],"mappings":";AAeA,MAAM,eAA+B;AAAA,EACjC,aAAa,CAAA;AAAA,EACb,eAAe,CAAA;AAAA,EACf,iBAAiB,CAAA;AACrB;AAEO,MAAM,oBAAoB;AAAA,EAC7B,CAAC,SAAS;AAAA,IACN,GAAG;AAAA,IACH,kBAAkB,CAAC,YAAY,IAAI,OAAO,EAAE,eAAe,UAAU;AAAA,IACrE,gBAAgB,CAAC,YAAY,IAAI,OAAO,EAAE,aAAa,UAAU;AAAA,IACjE,oBAAoB,CAAC,YACjB,IAAI,OAAO,EAAE,iBAAiB,UAAU;AAAA,EAAA;AAEpD;"}
+{"version":3,"file":"orderFormStore.js","sources":["../../../../../../../lib/@ecme/views/concepts/orders/OrderForm/store/orderFormStore.ts"],"sourcesContent":["import { create } from 'zustand'\nimport type { ProductOption, Products, SelectedProduct } from '../types'\n\nexport type OrderFormState = {\n    productList: Products\n    productOption: ProductOption[]\n    selectedProduct: SelectedProduct[]\n}\n\ntype OrderFormAction = {\n    setProductList: (payload: Products) => void\n    setProductOption: (payload: ProductOption[]) => void\n    setSelectedProduct: (payload: SelectedProduct[]) => void\n}\n\nconst initialState: OrderFormState = {\n    productList: [],\n    productOption: [],\n    selectedProduct: [],\n}\n\nexport const useOrderFormStore = create<OrderFormState & OrderFormAction>(\n    (set) => ({\n        ...initialState,\n        setProductOption: (payload) => set(() => ({ productOption: payload })),\n        setProductList: (payload) => set(() => ({ productList: payload })),\n        setSelectedProduct: (payload) =>\n            set(() => ({ selectedProduct: payload })),\n    }),\n)\n"],"names":[],"mappings":";AAeA,MAAM,eAA+B;AAAA,EACjC,aAAa,CAAA;AAAA,EACb,eAAe,CAAA;AAAA,EACf,iBAAiB,CAAA;AACrB;AAEO,MAAM,oBAAoB;AAAA,EAC7B,CAAC,SAAS;AAAA,IACN,GAAG;AAAA,IACH,kBAAkB,CAAC,YAAY,IAAI,OAAO,EAAE,eAAe,UAAU;AAAA,IACrE,gBAAgB,CAAC,YAAY,IAAI,OAAO,EAAE,aAAa,UAAU;AAAA,IACjE,oBAAoB,CAAC,YACjB,IAAI,OAAO,EAAE,iBAAiB,UAAU;AAAA,EAAA;AAEpD;"}

package/dist/@ecme/views/concepts/orders/OrderList/OrderList.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderList.js","sources":["../../../../../../lib/@ecme/views/concepts/orders/OrderList/OrderList.tsx"],"sourcesContent":["import Container from '@/components/shared/Container'\r\nimport AdaptiveCard from '@/components/shared/AdaptiveCard'\r\nimport OrderListTable from './components/OrderListTable'\r\nimport OrderListActionTools from './components/OrderListActionTools'\r\nimport OrderListTableTools from './components/OrderListTableTools'\r\n\r\nconst OrderList = () => {\r\n    return (\r\n        <Container>\r\n            <AdaptiveCard>\r\n                <div className=\"flex flex-col gap-4\">\r\n                    <div className=\"flex flex-col md:flex-row md:items-center md:justify-between gap-2\">\r\n                        <h3>Orders</h3>\r\n                        <OrderListActionTools />\r\n                    </div>\r\n                    <OrderListTableTools />\r\n                    <OrderListTable />\r\n                </div>\r\n            </AdaptiveCard>\r\n        </Container>\r\n    )\r\n}\r\n\r\nexport default OrderList\r\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,YAAY,MAAM;AACpB,6BACK,WAAA,EACG,UAAA,oBAAC,gBACG,UAAA,qBAAC,OAAA,EAAI,WAAU,uBACX,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,sEACX,UAAA;AAAA,MAAA,oBAAC,QAAG,UAAA,SAAA,CAAM;AAAA,0BACT,sBAAA,CAAA,CAAqB;AAAA,IAAA,GAC1B;AAAA,wBACC,qBAAA,EAAoB;AAAA,wBACpB,gBAAA,CAAA,CAAe;AAAA,EAAA,EAAA,CACpB,GACJ,GACJ;AAER;"}
+{"version":3,"file":"OrderList.js","sources":["../../../../../../lib/@ecme/views/concepts/orders/OrderList/OrderList.tsx"],"sourcesContent":["import Container from '@/components/shared/Container'\nimport AdaptiveCard from '@/components/shared/AdaptiveCard'\nimport OrderListTable from './components/OrderListTable'\nimport OrderListActionTools from './components/OrderListActionTools'\nimport OrderListTableTools from './components/OrderListTableTools'\n\nconst OrderList = () => {\n    return (\n        <Container>\n            <AdaptiveCard>\n                <div className=\"flex flex-col gap-4\">\n                    <div className=\"flex flex-col md:flex-row md:items-center md:justify-between gap-2\">\n                        <h3>Orders</h3>\n                        <OrderListActionTools />\n                    </div>\n                    <OrderListTableTools />\n                    <OrderListTable />\n                </div>\n            </AdaptiveCard>\n        </Container>\n    )\n}\n\nexport default OrderList\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,YAAY,MAAM;AACpB,6BACK,WAAA,EACG,UAAA,oBAAC,gBACG,UAAA,qBAAC,OAAA,EAAI,WAAU,uBACX,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,sEACX,UAAA;AAAA,MAAA,oBAAC,QAAG,UAAA,SAAA,CAAM;AAAA,0BACT,sBAAA,CAAA,CAAqB;AAAA,IAAA,GAC1B;AAAA,wBACC,qBAAA,EAAoB;AAAA,wBACpB,gBAAA,CAAA,CAAe;AAAA,EAAA,EAAA,CACpB,GACJ,GACJ;AAER;"}

package/dist/@ecme/views/concepts/orders/OrderList/components/OrderListActionTools.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderListActionTools.js","sources":["../../../../../../../lib/@ecme/views/concepts/orders/OrderList/components/OrderListActionTools.tsx"],"sourcesContent":["import Button from '@/components/ui/Button'\r\nimport { TbCloudDownload, TbPlus } from 'react-icons/tb'\r\nimport { useNavigate } from 'react-router-dom'\r\nimport useOrderlist from '../hooks/useOrderlist'\r\nimport { CSVLink } from 'react-csv'\r\n\r\nconst OrderListActionTools = () => {\r\n    const navigate = useNavigate()\r\n\r\n    const { orderList } = useOrderlist()\r\n\r\n    return (\r\n        <div className=\"flex flex-col md:flex-row gap-3\">\r\n            <CSVLink\r\n                className=\"w-full\"\r\n                filename=\"customerList.csv\"\r\n                data={orderList}\r\n            >\r\n                <Button\r\n                    icon={<TbCloudDownload className=\"text-xl\" />}\r\n                    className=\"w-full\"\r\n                >\r\n                    Download\r\n                </Button>\r\n            </CSVLink>\r\n            <Button\r\n                variant=\"solid\"\r\n                icon={<TbPlus className=\"text-xl\" />}\r\n                onClick={() => navigate('/concepts/orders/order-create')}\r\n            >\r\n                Add new\r\n            </Button>\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default OrderListActionTools\r\n"],"names":["useOrderlist"],"mappings":";;;;;;;AAMA,MAAM,uBAAuB,MAAM;AAC/B,QAAM,WAAW,YAAA;AAEjB,QAAM,EAAE,UAAA,IAAcA,aAAA;AAEtB,SACI,qBAAC,OAAA,EAAI,WAAU,mCACX,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,UAAS;AAAA,QACT,MAAM;AAAA,QAEN,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAM,oBAAC,iBAAA,EAAgB,WAAU,UAAA,CAAU;AAAA,YAC3C,WAAU;AAAA,YACb,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,IAEJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,SAAQ;AAAA,QACR,MAAM,oBAAC,QAAA,EAAO,WAAU,UAAA,CAAU;AAAA,QAClC,SAAS,MAAM,SAAS,+BAA+B;AAAA,QAC1D,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,GACJ;AAER;"}
+{"version":3,"file":"OrderListActionTools.js","sources":["../../../../../../../lib/@ecme/views/concepts/orders/OrderList/components/OrderListActionTools.tsx"],"sourcesContent":["import Button from '@/components/ui/Button'\nimport { TbCloudDownload, TbPlus } from 'react-icons/tb'\nimport { useNavigate } from 'react-router-dom'\nimport useOrderlist from '../hooks/useOrderlist'\nimport { CSVLink } from 'react-csv'\n\nconst OrderListActionTools = () => {\n    const navigate = useNavigate()\n\n    const { orderList } = useOrderlist()\n\n    return (\n        <div className=\"flex flex-col md:flex-row gap-3\">\n            <CSVLink\n                className=\"w-full\"\n                filename=\"customerList.csv\"\n                data={orderList}\n            >\n                <Button\n                    icon={<TbCloudDownload className=\"text-xl\" />}\n                    className=\"w-full\"\n                >\n                    Download\n                </Button>\n            </CSVLink>\n            <Button\n                variant=\"solid\"\n                icon={<TbPlus className=\"text-xl\" />}\n                onClick={() => navigate('/concepts/orders/order-create')}\n            >\n                Add new\n            </Button>\n        </div>\n    )\n}\n\nexport default OrderListActionTools\n"],"names":["useOrderlist"],"mappings":";;;;;;;AAMA,MAAM,uBAAuB,MAAM;AAC/B,QAAM,WAAW,YAAA;AAEjB,QAAM,EAAE,UAAA,IAAcA,aAAA;AAEtB,SACI,qBAAC,OAAA,EAAI,WAAU,mCACX,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,UAAS;AAAA,QACT,MAAM;AAAA,QAEN,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAM,oBAAC,iBAAA,EAAgB,WAAU,UAAA,CAAU;AAAA,YAC3C,WAAU;AAAA,YACb,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,IAEJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,SAAQ;AAAA,QACR,MAAM,oBAAC,QAAA,EAAO,WAAU,UAAA,CAAU;AAAA,QAClC,SAAS,MAAM,SAAS,+BAA+B;AAAA,QAC1D,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,GACJ;AAER;"}

package/dist/@ecme/views/concepts/orders/OrderList/components/OrderListTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderListTable.js","sources":["../../../../../../../lib/@ecme/views/concepts/orders/OrderList/components/OrderListTable.tsx"],"sourcesContent":["import { useMemo } from 'react'\r\nimport Tag from '@/components/ui/Tag'\r\nimport Tooltip from '@/components/ui/Tooltip'\r\nimport DataTable from '@/components/shared/DataTable'\r\nimport useOrderlist from '../hooks/useOrderlist'\r\nimport cloneDeep from 'lodash/cloneDeep'\r\nimport { useNavigate } from 'react-router-dom'\r\nimport { TbTrash, TbEye } from 'react-icons/tb'\r\nimport dayjs from 'dayjs'\r\nimport { NumericFormat } from 'react-number-format'\r\nimport type { OnSortParam, ColumnDef } from '@/components/shared/DataTable'\r\nimport type { Order } from '../types'\r\nimport type { TableQueries } from '@/@types/common'\r\n\r\nconst orderStatusColor: Record<\r\n    number,\r\n    {\r\n        label: string\r\n        bgClass: string\r\n        textClass: string\r\n    }\r\n> = {\r\n    0: {\r\n        label: 'Paid',\r\n        bgClass: 'bg-success-subtle',\r\n        textClass: 'text-success',\r\n    },\r\n    1: {\r\n        label: 'Pending',\r\n        bgClass: 'bg-warning-subtle',\r\n        textClass: 'text-warning',\r\n    },\r\n    2: { label: 'Failed', bgClass: 'bg-error-subtle', textClass: 'text-error' },\r\n}\r\n\r\nconst OrderColumn = ({ row }: { row: Order }) => {\r\n    const navigate = useNavigate()\r\n\r\n    const onView = () => {\r\n        navigate(`/concepts/orders/order-details/${row.id}`)\r\n    }\r\n\r\n    return (\r\n        <span\r\n            className=\"cursor-pointer font-bold heading-text hover:text-primary\"\r\n            onClick={onView}\r\n        >\r\n            #{row.id}\r\n        </span>\r\n    )\r\n}\r\n\r\nconst ActionColumn = ({ row }: { row: Order }) => {\r\n    const navigate = useNavigate()\r\n\r\n    const onDelete = () => {}\r\n\r\n    const onView = () => {\r\n        navigate(`/concepts/orders/order-details/${row.id}`)\r\n    }\r\n\r\n    return (\r\n        <div className=\"flex justify-end text-lg gap-1\">\r\n            <Tooltip wrapperClass=\"flex\" title=\"View\">\r\n                <span className={`cursor-pointer p-2`} onClick={onView}>\r\n                    <TbEye />\r\n                </span>\r\n            </Tooltip>\r\n            <Tooltip wrapperClass=\"flex\" title=\"Delete\">\r\n                <span\r\n                    className=\"cursor-pointer p-2 hover:text-red-500\"\r\n                    onClick={onDelete}\r\n                >\r\n                    <TbTrash />\r\n                </span>\r\n            </Tooltip>\r\n        </div>\r\n    )\r\n}\r\n\r\nconst PaymentMethodImage = ({\r\n    paymentMehod,\r\n    className,\r\n}: {\r\n    paymentMehod: string\r\n    className: string\r\n}) => {\r\n    switch (paymentMehod) {\r\n        case 'visa':\r\n            return (\r\n                <img\r\n                    className={className}\r\n                    src=\"/img/others/img-8.png\"\r\n                    alt={paymentMehod}\r\n                />\r\n            )\r\n        case 'master':\r\n            return (\r\n                <img\r\n                    className={className}\r\n                    src=\"/img/others/img-9.png\"\r\n                    alt={paymentMehod}\r\n                />\r\n            )\r\n        case 'paypal':\r\n            return (\r\n                <img\r\n                    className={className}\r\n                    src=\"/img/others/img-10.png\"\r\n                    alt={paymentMehod}\r\n                />\r\n            )\r\n        default:\r\n            return <></>\r\n    }\r\n}\r\n\r\nconst OrderListTable = () => {\r\n    const { orderList, orderListTotal, tableData, isLoading, setTableData } =\r\n        useOrderlist()\r\n\r\n    const columns: ColumnDef<Order>[] = useMemo(\r\n        () => [\r\n            {\r\n                header: 'Order',\r\n                accessorKey: 'id',\r\n                cell: (props) => <OrderColumn row={props.row.original} />,\r\n            },\r\n            {\r\n                header: 'Date',\r\n                accessorKey: 'date',\r\n                cell: (props) => {\r\n                    const row = props.row.original\r\n                    return (\r\n                        <span className=\"font-semibold\">\r\n                            {dayjs.unix(row.date).format('DD/MM/YYYY')}\r\n                        </span>\r\n                    )\r\n                },\r\n            },\r\n            {\r\n                header: 'Customer',\r\n                accessorKey: 'customer',\r\n                cell: (props) => {\r\n                    const row = props.row.original\r\n                    return <span className=\"font-semibold\">{row.customer}</span>\r\n                },\r\n            },\r\n            {\r\n                header: 'Status',\r\n                accessorKey: 'status',\r\n                cell: (props) => {\r\n                    const { status } = props.row.original\r\n                    return (\r\n                        <Tag className={orderStatusColor[status].bgClass}>\r\n                            <span\r\n                                className={`capitalize font-semibold ${orderStatusColor[status].textClass}`}\r\n                            >\r\n                                {orderStatusColor[status].label}\r\n                            </span>\r\n                        </Tag>\r\n                    )\r\n                },\r\n            },\r\n            {\r\n                header: 'Payment Method',\r\n                accessorKey: 'paymentMehod',\r\n                cell: (props) => {\r\n                    const { paymentMehod, paymentIdendifier } =\r\n                        props.row.original\r\n                    return (\r\n                        <span className=\"flex items-center gap-2\">\r\n                            <PaymentMethodImage\r\n                                className=\"max-h-[20px]\"\r\n                                paymentMehod={paymentMehod}\r\n                            />\r\n                            <span className=\"font-semibold\">\r\n                                {paymentIdendifier}\r\n                            </span>\r\n                        </span>\r\n                    )\r\n                },\r\n            },\r\n            {\r\n                header: 'Total',\r\n                accessorKey: 'totalAmount',\r\n                cell: (props) => {\r\n                    const { totalAmount } = props.row.original\r\n                    return (\r\n                        <NumericFormat\r\n                            className=\"heading-text font-bold\"\r\n                            displayType=\"text\"\r\n                            value={(\r\n                                Math.round(totalAmount * 100) / 100\r\n                            ).toFixed(2)}\r\n                            prefix={'$'}\r\n                            thousandSeparator={true}\r\n                        />\r\n                    )\r\n                },\r\n            },\r\n            {\r\n                header: '',\r\n                id: 'action',\r\n                cell: (props) => <ActionColumn row={props.row.original} />,\r\n            },\r\n        ],\r\n        [],\r\n    )\r\n\r\n    const handleSetTableData = (data: TableQueries) => {\r\n        setTableData(data)\r\n    }\r\n\r\n    const handlePaginationChange = (page: number) => {\r\n        const newTableData = cloneDeep(tableData)\r\n        newTableData.pageIndex = page\r\n        handleSetTableData(newTableData)\r\n    }\r\n\r\n    const handleSelectChange = (value: number) => {\r\n        const newTableData = cloneDeep(tableData)\r\n        newTableData.pageSize = Number(value)\r\n        newTableData.pageIndex = 1\r\n        handleSetTableData(newTableData)\r\n    }\r\n\r\n    const handleSort = (sort: OnSortParam) => {\r\n        const newTableData = cloneDeep(tableData)\r\n        newTableData.sort = sort\r\n        handleSetTableData(newTableData)\r\n    }\r\n\r\n    return (\r\n        <DataTable\r\n            columns={columns}\r\n            data={orderList}\r\n            noData={!isLoading && orderList.length === 0}\r\n            skeletonAvatarColumns={[0]}\r\n            skeletonAvatarProps={{ width: 28, height: 28 }}\r\n            loading={isLoading}\r\n            pagingData={{\r\n                total: orderListTotal,\r\n                pageIndex: tableData.pageIndex as number,\r\n                pageSize: tableData.pageSize as number,\r\n            }}\r\n            onPaginationChange={handlePaginationChange}\r\n            onSelectChange={handleSelectChange}\r\n            onSort={handleSort}\r\n        />\r\n    )\r\n}\r\n\r\nexport default OrderListTable\r\n"],"names":["useOrderlist"],"mappings":"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"}
+{"version":3,"file":"OrderListTable.js","sources":["../../../../../../../lib/@ecme/views/concepts/orders/OrderList/components/OrderListTable.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport Tag from '@/components/ui/Tag'\nimport Tooltip from '@/components/ui/Tooltip'\nimport DataTable from '@/components/shared/DataTable'\nimport useOrderlist from '../hooks/useOrderlist'\nimport cloneDeep from 'lodash/cloneDeep'\nimport { useNavigate } from 'react-router-dom'\nimport { TbTrash, TbEye } from 'react-icons/tb'\nimport dayjs from 'dayjs'\nimport { NumericFormat } from 'react-number-format'\nimport type { OnSortParam, ColumnDef } from '@/components/shared/DataTable'\nimport type { Order } from '../types'\nimport type { TableQueries } from '@/@types/common'\n\nconst orderStatusColor: Record<\n    number,\n    {\n        label: string\n        bgClass: string\n        textClass: string\n    }\n> = {\n    0: {\n        label: 'Paid',\n        bgClass: 'bg-success-subtle',\n        textClass: 'text-success',\n    },\n    1: {\n        label: 'Pending',\n        bgClass: 'bg-warning-subtle',\n        textClass: 'text-warning',\n    },\n    2: { label: 'Failed', bgClass: 'bg-error-subtle', textClass: 'text-error' },\n}\n\nconst OrderColumn = ({ row }: { row: Order }) => {\n    const navigate = useNavigate()\n\n    const onView = () => {\n        navigate(`/concepts/orders/order-details/${row.id}`)\n    }\n\n    return (\n        <span\n            className=\"cursor-pointer font-bold heading-text hover:text-primary\"\n            onClick={onView}\n        >\n            #{row.id}\n        </span>\n    )\n}\n\nconst ActionColumn = ({ row }: { row: Order }) => {\n    const navigate = useNavigate()\n\n    const onDelete = () => {}\n\n    const onView = () => {\n        navigate(`/concepts/orders/order-details/${row.id}`)\n    }\n\n    return (\n        <div className=\"flex justify-end text-lg gap-1\">\n            <Tooltip wrapperClass=\"flex\" title=\"View\">\n                <span className={`cursor-pointer p-2`} onClick={onView}>\n                    <TbEye />\n                </span>\n            </Tooltip>\n            <Tooltip wrapperClass=\"flex\" title=\"Delete\">\n                <span\n                    className=\"cursor-pointer p-2 hover:text-red-500\"\n                    onClick={onDelete}\n                >\n                    <TbTrash />\n                </span>\n            </Tooltip>\n        </div>\n    )\n}\n\nconst PaymentMethodImage = ({\n    paymentMehod,\n    className,\n}: {\n    paymentMehod: string\n    className: string\n}) => {\n    switch (paymentMehod) {\n        case 'visa':\n            return (\n                <img\n                    className={className}\n                    src=\"/img/others/img-8.png\"\n                    alt={paymentMehod}\n                />\n            )\n        case 'master':\n            return (\n                <img\n                    className={className}\n                    src=\"/img/others/img-9.png\"\n                    alt={paymentMehod}\n                />\n            )\n        case 'paypal':\n            return (\n                <img\n                    className={className}\n                    src=\"/img/others/img-10.png\"\n                    alt={paymentMehod}\n                />\n            )\n        default:\n            return <></>\n    }\n}\n\nconst OrderListTable = () => {\n    const { orderList, orderListTotal, tableData, isLoading, setTableData } =\n        useOrderlist()\n\n    const columns: ColumnDef<Order>[] = useMemo(\n        () => [\n            {\n                header: 'Order',\n                accessorKey: 'id',\n                cell: (props) => <OrderColumn row={props.row.original} />,\n            },\n            {\n                header: 'Date',\n                accessorKey: 'date',\n                cell: (props) => {\n                    const row = props.row.original\n                    return (\n                        <span className=\"font-semibold\">\n                            {dayjs.unix(row.date).format('DD/MM/YYYY')}\n                        </span>\n                    )\n                },\n            },\n            {\n                header: 'Customer',\n                accessorKey: 'customer',\n                cell: (props) => {\n                    const row = props.row.original\n                    return <span className=\"font-semibold\">{row.customer}</span>\n                },\n            },\n            {\n                header: 'Status',\n                accessorKey: 'status',\n                cell: (props) => {\n                    const { status } = props.row.original\n                    return (\n                        <Tag className={orderStatusColor[status].bgClass}>\n                            <span\n                                className={`capitalize font-semibold ${orderStatusColor[status].textClass}`}\n                            >\n                                {orderStatusColor[status].label}\n                            </span>\n                        </Tag>\n                    )\n                },\n            },\n            {\n                header: 'Payment Method',\n                accessorKey: 'paymentMehod',\n                cell: (props) => {\n                    const { paymentMehod, paymentIdendifier } =\n                        props.row.original\n                    return (\n                        <span className=\"flex items-center gap-2\">\n                            <PaymentMethodImage\n                                className=\"max-h-[20px]\"\n                                paymentMehod={paymentMehod}\n                            />\n                            <span className=\"font-semibold\">\n                                {paymentIdendifier}\n                            </span>\n                        </span>\n                    )\n                },\n            },\n            {\n                header: 'Total',\n                accessorKey: 'totalAmount',\n                cell: (props) => {\n                    const { totalAmount } = props.row.original\n                    return (\n                        <NumericFormat\n                            className=\"heading-text font-bold\"\n                            displayType=\"text\"\n                            value={(\n                                Math.round(totalAmount * 100) / 100\n                            ).toFixed(2)}\n                            prefix={'$'}\n                            thousandSeparator={true}\n                        />\n                    )\n                },\n            },\n            {\n                header: '',\n                id: 'action',\n                cell: (props) => <ActionColumn row={props.row.original} />,\n            },\n        ],\n        [],\n    )\n\n    const handleSetTableData = (data: TableQueries) => {\n        setTableData(data)\n    }\n\n    const handlePaginationChange = (page: number) => {\n        const newTableData = cloneDeep(tableData)\n        newTableData.pageIndex = page\n        handleSetTableData(newTableData)\n    }\n\n    const handleSelectChange = (value: number) => {\n        const newTableData = cloneDeep(tableData)\n        newTableData.pageSize = Number(value)\n        newTableData.pageIndex = 1\n        handleSetTableData(newTableData)\n    }\n\n    const handleSort = (sort: OnSortParam) => {\n        const newTableData = cloneDeep(tableData)\n        newTableData.sort = sort\n        handleSetTableData(newTableData)\n    }\n\n    return (\n        <DataTable\n            columns={columns}\n            data={orderList}\n            noData={!isLoading && orderList.length === 0}\n            skeletonAvatarColumns={[0]}\n            skeletonAvatarProps={{ width: 28, height: 28 }}\n            loading={isLoading}\n            pagingData={{\n                total: orderListTotal,\n                pageIndex: tableData.pageIndex as number,\n                pageSize: tableData.pageSize as number,\n            }}\n            onPaginationChange={handlePaginationChange}\n            onSelectChange={handleSelectChange}\n            onSort={handleSort}\n        />\n    )\n}\n\nexport default OrderListTable\n"],"names":["useOrderlist"],"mappings":"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"}

package/dist/@ecme/views/concepts/orders/OrderList/components/OrderListTableFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderListTableFilter.js","sources":["../../../../../../../lib/@ecme/views/concepts/orders/OrderList/components/OrderListTableFilter.tsx"],"sourcesContent":["import { useState } from 'react'\r\nimport Button from '@/components/ui/Button'\r\nimport DatePicker from '@/components/ui/DatePicker'\r\nimport Drawer from '@/components/ui/Drawer'\r\nimport Checkbox from '@/components/ui/Checkbox'\r\nimport Badge from '@/components/ui/Badge'\r\nimport Select, { Option as DefaultOption } from '@/components/ui/Select'\r\nimport { components } from 'react-select'\r\nimport { Form, FormItem } from '@/components/ui/Form'\r\nimport useOrderlist from '../hooks/useOrderlist'\r\nimport { TbFilter } from 'react-icons/tb'\r\nimport { useForm, Controller } from 'react-hook-form'\r\nimport { zodResolver } from '@hookform/resolvers/zod'\r\nimport { z } from 'zod'\r\nimport type { ZodType } from 'zod'\r\nimport type { ControlProps, OptionProps } from 'react-select'\r\nimport classNames from '@/utils/classNames'\r\n\r\ntype FormSchema = {\r\n    date: [Date, Date]\r\n    status: string\r\n    paymentMethod: Array<string>\r\n}\r\n\r\ntype Option = {\r\n    value: string\r\n    label: string\r\n    className: string\r\n}\r\n\r\nconst { Control } = components\r\n\r\nconst statusOption: Option[] = [\r\n    { value: 'paid', label: 'Paid', className: 'bg-emerald-500' },\r\n    { value: 'failed', label: 'Failed', className: 'bg-red-500' },\r\n    { value: 'pending', label: 'Pending', className: 'bg-amber-500' },\r\n    { value: 'all', label: 'All', className: 'bg-gray-400' },\r\n]\r\n\r\nconst paymentMethodList = [\r\n    'Credit card',\r\n    'Debit card',\r\n    'Paypal',\r\n    'Stripe',\r\n    'Cash',\r\n]\r\n\r\nconst CustomSelectOption = (props: OptionProps<Option>) => {\r\n    return (\r\n        <DefaultOption<Option>\r\n            {...props}\r\n            customLabel={(data, label) => (\r\n                <span className=\"flex items-center gap-2\">\r\n                    <Badge className={data.className} />\r\n                    <span className=\"ml-2 rtl:mr-2\">{label}</span>\r\n                </span>\r\n            )}\r\n        />\r\n    )\r\n}\r\n\r\nconst CustomControl = ({ children, ...props }: ControlProps<Option>) => {\r\n    const selected = props.getValue()[0]\r\n    return (\r\n        <Control {...props}>\r\n            {selected && (\r\n                <Badge className={classNames('ml-4', selected.className)} />\r\n            )}\r\n            {children}\r\n        </Control>\r\n    )\r\n}\r\n\r\nconst validationSchema: ZodType<FormSchema> = z.object({\r\n    date: z.tuple([z.date(), z.date()]),\r\n    status: z.string(),\r\n    paymentMethod: z.array(z.string()),\r\n})\r\n\r\nconst OrderListTableFilter = () => {\r\n    const [filterIsOpen, setFilterIsOpen] = useState(false)\r\n\r\n    const { filterData, setFilterData } = useOrderlist()\r\n\r\n    const { handleSubmit, control } = useForm<FormSchema>({\r\n        defaultValues: filterData,\r\n        resolver: zodResolver(validationSchema),\r\n    })\r\n\r\n    const onSubmit = (values: FormSchema) => {\r\n        setFilterData(values)\r\n        setFilterIsOpen(false)\r\n    }\r\n\r\n    return (\r\n        <>\r\n            <Button icon={<TbFilter />} onClick={() => setFilterIsOpen(true)}>\r\n                Filter\r\n            </Button>\r\n            <Drawer\r\n                title=\"Filter\"\r\n                isOpen={filterIsOpen}\r\n                onClose={() => setFilterIsOpen(false)}\r\n                onRequestClose={() => setFilterIsOpen(false)}\r\n            >\r\n                <Form\r\n                    className=\"h-full\"\r\n                    containerClassName=\"flex flex-col justify-between h-full\"\r\n                    onSubmit={handleSubmit(onSubmit)}\r\n                >\r\n                    <div>\r\n                        <FormItem label=\"Product price\">\r\n                            <div className=\"flex items-center gap-2\">\r\n                                <Controller\r\n                                    name=\"date\"\r\n                                    control={control}\r\n                                    render={({ field }) => (\r\n                                        <DatePicker.DatePickerRange\r\n                                            value={field.value}\r\n                                            onChange={field.onChange}\r\n                                        />\r\n                                    )}\r\n                                />\r\n                            </div>\r\n                        </FormItem>\r\n                        <FormItem label=\"Product status\">\r\n                            <Controller\r\n                                name=\"status\"\r\n                                control={control}\r\n                                render={({ field }) => (\r\n                                    <Select<Option>\r\n                                        options={statusOption}\r\n                                        {...field}\r\n                                        value={statusOption.filter(\r\n                                            (option) =>\r\n                                                option.value === field.value,\r\n                                        )}\r\n                                        components={{\r\n                                            Option: CustomSelectOption,\r\n                                            Control: CustomControl,\r\n                                        }}\r\n                                        onChange={(option) =>\r\n                                            field.onChange(option?.value)\r\n                                        }\r\n                                    />\r\n                                )}\r\n                            />\r\n                        </FormItem>\r\n                        <FormItem label=\"Product type\">\r\n                            <div className=\"mt-4\">\r\n                                <Controller\r\n                                    name=\"paymentMethod\"\r\n                                    control={control}\r\n                                    render={({ field }) => (\r\n                                        <Checkbox.Group\r\n                                            vertical\r\n                                            className=\"flex\"\r\n                                            {...field}\r\n                                        >\r\n                                            {paymentMethodList.map(\r\n                                                (type, index) => (\r\n                                                    <Checkbox\r\n                                                        key={type + index}\r\n                                                        name={field.name}\r\n                                                        value={type}\r\n                                                        className=\"justify-between flex-row-reverse heading-text\"\r\n                                                    >\r\n                                                        {type}\r\n                                                    </Checkbox>\r\n                                                ),\r\n                                            )}\r\n                                        </Checkbox.Group>\r\n                                    )}\r\n                                />\r\n                            </div>\r\n                        </FormItem>\r\n                    </div>\r\n                    <Button variant=\"solid\" type=\"submit\">\r\n                        Query\r\n                    </Button>\r\n                </Form>\r\n            </Drawer>\r\n        </>\r\n    )\r\n}\r\n\r\nexport default OrderListTableFilter\r\n"],"names":["DefaultOption","useOrderlist"],"mappings":"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"}
+{"version":3,"file":"OrderListTableFilter.js","sources":["../../../../../../../lib/@ecme/views/concepts/orders/OrderList/components/OrderListTableFilter.tsx"],"sourcesContent":["import { useState } from 'react'\nimport Button from '@/components/ui/Button'\nimport DatePicker from '@/components/ui/DatePicker'\nimport Drawer from '@/components/ui/Drawer'\nimport Checkbox from '@/components/ui/Checkbox'\nimport Badge from '@/components/ui/Badge'\nimport Select, { Option as DefaultOption } from '@/components/ui/Select'\nimport { components } from 'react-select'\nimport { Form, FormItem } from '@/components/ui/Form'\nimport useOrderlist from '../hooks/useOrderlist'\nimport { TbFilter } from 'react-icons/tb'\nimport { useForm, Controller } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { z } from 'zod'\nimport type { ZodType } from 'zod'\nimport type { ControlProps, OptionProps } from 'react-select'\nimport classNames from '@/utils/classNames'\n\ntype FormSchema = {\n    date: [Date, Date]\n    status: string\n    paymentMethod: Array<string>\n}\n\ntype Option = {\n    value: string\n    label: string\n    className: string\n}\n\nconst { Control } = components\n\nconst statusOption: Option[] = [\n    { value: 'paid', label: 'Paid', className: 'bg-emerald-500' },\n    { value: 'failed', label: 'Failed', className: 'bg-red-500' },\n    { value: 'pending', label: 'Pending', className: 'bg-amber-500' },\n    { value: 'all', label: 'All', className: 'bg-gray-400' },\n]\n\nconst paymentMethodList = [\n    'Credit card',\n    'Debit card',\n    'Paypal',\n    'Stripe',\n    'Cash',\n]\n\nconst CustomSelectOption = (props: OptionProps<Option>) => {\n    return (\n        <DefaultOption<Option>\n            {...props}\n            customLabel={(data, label) => (\n                <span className=\"flex items-center gap-2\">\n                    <Badge className={data.className} />\n                    <span className=\"ml-2 rtl:mr-2\">{label}</span>\n                </span>\n            )}\n        />\n    )\n}\n\nconst CustomControl = ({ children, ...props }: ControlProps<Option>) => {\n    const selected = props.getValue()[0]\n    return (\n        <Control {...props}>\n            {selected && (\n                <Badge className={classNames('ml-4', selected.className)} />\n            )}\n            {children}\n        </Control>\n    )\n}\n\nconst validationSchema: ZodType<FormSchema> = z.object({\n    date: z.tuple([z.date(), z.date()]),\n    status: z.string(),\n    paymentMethod: z.array(z.string()),\n})\n\nconst OrderListTableFilter = () => {\n    const [filterIsOpen, setFilterIsOpen] = useState(false)\n\n    const { filterData, setFilterData } = useOrderlist()\n\n    const { handleSubmit, control } = useForm<FormSchema>({\n        defaultValues: filterData,\n        resolver: zodResolver(validationSchema),\n    })\n\n    const onSubmit = (values: FormSchema) => {\n        setFilterData(values)\n        setFilterIsOpen(false)\n    }\n\n    return (\n        <>\n            <Button icon={<TbFilter />} onClick={() => setFilterIsOpen(true)}>\n                Filter\n            </Button>\n            <Drawer\n                title=\"Filter\"\n                isOpen={filterIsOpen}\n                onClose={() => setFilterIsOpen(false)}\n                onRequestClose={() => setFilterIsOpen(false)}\n            >\n                <Form\n                    className=\"h-full\"\n                    containerClassName=\"flex flex-col justify-between h-full\"\n                    onSubmit={handleSubmit(onSubmit)}\n                >\n                    <div>\n                        <FormItem label=\"Product price\">\n                            <div className=\"flex items-center gap-2\">\n                                <Controller\n                                    name=\"date\"\n                                    control={control}\n                                    render={({ field }) => (\n                                        <DatePicker.DatePickerRange\n                                            value={field.value}\n                                            onChange={field.onChange}\n                                        />\n                                    )}\n                                />\n                            </div>\n                        </FormItem>\n                        <FormItem label=\"Product status\">\n                            <Controller\n                                name=\"status\"\n                                control={control}\n                                render={({ field }) => (\n                                    <Select<Option>\n                                        options={statusOption}\n                                        {...field}\n                                        value={statusOption.filter(\n                                            (option) =>\n                                                option.value === field.value,\n                                        )}\n                                        components={{\n                                            Option: CustomSelectOption,\n                                            Control: CustomControl,\n                                        }}\n                                        onChange={(option) =>\n                                            field.onChange(option?.value)\n                                        }\n                                    />\n                                )}\n                            />\n                        </FormItem>\n                        <FormItem label=\"Product type\">\n                            <div className=\"mt-4\">\n                                <Controller\n                                    name=\"paymentMethod\"\n                                    control={control}\n                                    render={({ field }) => (\n                                        <Checkbox.Group\n                                            vertical\n                                            className=\"flex\"\n                                            {...field}\n                                        >\n                                            {paymentMethodList.map(\n                                                (type, index) => (\n                                                    <Checkbox\n                                                        key={type + index}\n                                                        name={field.name}\n                                                        value={type}\n                                                        className=\"justify-between flex-row-reverse heading-text\"\n                                                    >\n                                                        {type}\n                                                    </Checkbox>\n                                                ),\n                                            )}\n                                        </Checkbox.Group>\n                                    )}\n                                />\n                            </div>\n                        </FormItem>\n                    </div>\n                    <Button variant=\"solid\" type=\"submit\">\n                        Query\n                    </Button>\n                </Form>\n            </Drawer>\n        </>\n    )\n}\n\nexport default OrderListTableFilter\n"],"names":["DefaultOption","useOrderlist"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAM,EAAE,YAAY;AAEpB,MAAM,eAAyB;AAAA,EAC3B,EAAE,OAAO,QAAQ,OAAO,QAAQ,WAAW,iBAAA;AAAA,EAC3C,EAAE,OAAO,UAAU,OAAO,UAAU,WAAW,aAAA;AAAA,EAC/C,EAAE,OAAO,WAAW,OAAO,WAAW,WAAW,eAAA;AAAA,EACjD,EAAE,OAAO,OAAO,OAAO,OAAO,WAAW,cAAA;AAC7C;AAEA,MAAM,oBAAoB;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AAEA,MAAM,qBAAqB,CAAC,UAA+B;AACvD,SACI;AAAA,IAACA;AAAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,aAAa,CAAC,MAAM,UAChB,qBAAC,QAAA,EAAK,WAAU,2BACZ,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAM,WAAW,KAAK,UAAA,CAAW;AAAA,QAClC,oBAAC,QAAA,EAAK,WAAU,iBAAiB,UAAA,MAAA,CAAM;AAAA,MAAA,EAAA,CAC3C;AAAA,IAAA;AAAA,EAAA;AAIhB;AAEA,MAAM,gBAAgB,CAAC,EAAE,UAAU,GAAG,YAAkC;AACpE,QAAM,WAAW,MAAM,SAAA,EAAW,CAAC;AACnC,SACI,qBAAC,SAAA,EAAS,GAAG,OACR,UAAA;AAAA,IAAA,gCACI,OAAA,EAAM,WAAW,WAAW,QAAQ,SAAS,SAAS,GAAG;AAAA,IAE7D;AAAA,EAAA,GACL;AAER;AAEA,MAAM,mBAAwC,EAAE,OAAO;AAAA,EACnD,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAA,CAAM,CAAC;AAAA,EAClC,QAAQ,EAAE,OAAA;AAAA,EACV,eAAe,EAAE,MAAM,EAAE,QAAQ;AACrC,CAAC;AAED,MAAM,uBAAuB,MAAM;AAC/B,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,QAAM,EAAE,YAAY,cAAA,IAAkBC,aAAA;AAEtC,QAAM,EAAE,cAAc,QAAA,IAAY,QAAoB;AAAA,IAClD,eAAe;AAAA,IACf,UAAU,YAAY,gBAAgB;AAAA,EAAA,CACzC;AAED,QAAM,WAAW,CAAC,WAAuB;AACrC,kBAAc,MAAM;AACpB,oBAAgB,KAAK;AAAA,EACzB;AAEA,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAO,MAAM,oBAAC,UAAA,CAAA,CAAS,GAAI,SAAS,MAAM,gBAAgB,IAAI,GAAG,UAAA,SAAA,CAElE;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,OAAM;AAAA,QACN,QAAQ;AAAA,QACR,SAAS,MAAM,gBAAgB,KAAK;AAAA,QACpC,gBAAgB,MAAM,gBAAgB,KAAK;AAAA,QAE3C,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAU;AAAA,YACV,oBAAmB;AAAA,YACnB,UAAU,aAAa,QAAQ;AAAA,YAE/B,UAAA;AAAA,cAAA,qBAAC,OAAA,EACG,UAAA;AAAA,gBAAA,oBAAC,YAAS,OAAM,iBACZ,UAAA,oBAAC,OAAA,EAAI,WAAU,2BACX,UAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACG,MAAK;AAAA,oBACL;AAAA,oBACA,QAAQ,CAAC,EAAE,MAAA,MACP;AAAA,sBAAC,WAAW;AAAA,sBAAX;AAAA,wBACG,OAAO,MAAM;AAAA,wBACb,UAAU,MAAM;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACpB;AAAA,gBAAA,GAGZ,EAAA,CACJ;AAAA,gBACA,oBAAC,UAAA,EAAS,OAAM,kBACZ,UAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACG,MAAK;AAAA,oBACL;AAAA,oBACA,QAAQ,CAAC,EAAE,MAAA,MACP;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACG,SAAS;AAAA,wBACR,GAAG;AAAA,wBACJ,OAAO,aAAa;AAAA,0BAChB,CAAC,WACG,OAAO,UAAU,MAAM;AAAA,wBAAA;AAAA,wBAE/B,YAAY;AAAA,0BACR,QAAQ;AAAA,0BACR,SAAS;AAAA,wBAAA;AAAA,wBAEb,UAAU,CAAC,WACP,MAAM,SAAS,QAAQ,KAAK;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBAEpC;AAAA,gBAAA,GAGZ;AAAA,oCACC,UAAA,EAAS,OAAM,gBACZ,UAAA,oBAAC,OAAA,EAAI,WAAU,QACX,UAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACG,MAAK;AAAA,oBACL;AAAA,oBACA,QAAQ,CAAC,EAAE,MAAA,MACP;AAAA,sBAAC,SAAS;AAAA,sBAAT;AAAA,wBACG,UAAQ;AAAA,wBACR,WAAU;AAAA,wBACT,GAAG;AAAA,wBAEH,UAAA,kBAAkB;AAAA,0BACf,CAAC,MAAM,UACH;AAAA,4BAAC;AAAA,4BAAA;AAAA,8BAEG,MAAM,MAAM;AAAA,8BACZ,OAAO;AAAA,8BACP,WAAU;AAAA,8BAET,UAAA;AAAA,4BAAA;AAAA,4BALI,OAAO;AAAA,0BAAA;AAAA,wBAMhB;AAAA,sBAER;AAAA,oBAAA;AAAA,kBACJ;AAAA,gBAAA,GAGZ,EAAA,CACJ;AAAA,cAAA,GACJ;AAAA,kCACC,QAAA,EAAO,SAAQ,SAAQ,MAAK,UAAS,UAAA,QAAA,CAEtC;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;"}