@orbe-agro/client-core 3.4.12 → 5.0.0

package/dist/lib/@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'\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":["baseValidationSchema","z","validationSchema","value","OrderForm","props","onFormSubmit","children","defaultValues","defaultProducts","setProductOption","setProductList","setSelectedProduct","useOrderFormStore","getTopGapValue","useLayoutGap","larger","useResponsive","useSWR","_","params","apiGetProductList","resp","list","label","img","quantity","useEffect","isEmpty","reset","onSubmit","values","handleSubmit","watch","errors","control","useForm","zodResolver","selectedPaymentMethod","jsx","jsxs","Form","Container","Affix","Card","Navigator","ProductSelectSection","CustomerDetailSection","BillingAddressSection","PaymentMethodSection","BottomStickyBar"],"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":["baseValidationSchema","z","validationSchema","value","OrderForm","props","onFormSubmit","children","defaultValues","defaultProducts","setProductOption","setProductList","setSelectedProduct","useOrderFormStore","getTopGapValue","useLayoutGap","larger","useResponsive","useSWR","_","params","apiGetProductList","resp","list","label","img","quantity","useEffect","isEmpty","reset","onSubmit","values","handleSubmit","watch","errors","control","useForm","zodResolver","selectedPaymentMethod","jsx","jsxs","Form","Container","Affix","Card","Navigator","ProductSelectSection","CustomerDetailSection","BillingAddressSection","PaymentMethodSection","BottomStickyBar"],"mappings":"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"}

package/dist/lib/@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'\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":["Control","components","CustomSelectOption","props","jsx","DefaultOption","data","label","jsxs","Avatar","CustomControl","children","selected","BillingAddressSection","control","errors","Card","FormItem","_a","Controller","field","Select","countryList","option","_b","Input","_c","_d"],"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":["Control","components","CustomSelectOption","props","jsx","DefaultOption","data","label","jsxs","Avatar","CustomControl","children","selected","BillingAddressSection","control","errors","Card","FormItem","_a","Controller","field","Select","countryList","option","_b","Input","_c","_d"],"mappings":"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"}

package/dist/lib/@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'\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":["Control","components","CustomSelectOption","props","jsx","DefaultOption","data","jsxs","Avatar","CustomControl","children","selected","CustomerDetailSection","control","errors","dialCodeList","useMemo","countryList","country","Card","FormItem","_a","Controller","field","Input","_b","_c","Select","option","_d","NumericInput"],"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":["Control","components","CustomSelectOption","props","jsx","DefaultOption","data","jsxs","Avatar","CustomControl","children","selected","CustomerDetailSection","control","errors","dialCodeList","useMemo","countryList","country","Card","FormItem","_a","Controller","field","Input","_b","_c","Select","option","_d","NumericInput"],"mappings":"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"}

package/dist/lib/@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'\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":["navigationList","TbPackage","TbUserSquare","TbMapPin","TbCreditCard","Navigator","nav","jsx","Link","jsxs","Avatar"],"mappings":";;;;AAKA,MAAMA,IAAiB;AAAA,EACnB;AAAA,IACI,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,wBAAOC,GAAU,CAAA,CAAA;AAAA,EACrB;AAAA,EACA;AAAA,IACI,OAAO;AAAA,IACP,aACI;AAAA,IACJ,MAAM;AAAA,IACN,wBAAOC,GAAa,CAAA,CAAA;AAAA,EACxB;AAAA,EACA;AAAA,IACI,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,wBAAOC,GAAS,CAAA,CAAA;AAAA,EACpB;AAAA,EACA;AAAA,IACI,OAAO;AAAA,IACP,aACI;AAAA,IACJ,MAAM;AAAA,IACN,wBAAOC,GAAa,CAAA,CAAA;AAAA,EAAA;AAE5B,GAEMC,IAAY,wBAET,OAAI,EAAA,WAAU,uBACV,UAAeL,EAAA,IAAI,CAACM,MACjB,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IAEG,aAAY;AAAA,IACZ,WAAU;AAAA,IACV,IAAIF,EAAI;AAAA,IACR,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,QAAQ;AAAA,IAER,UAAA,gBAAAG,EAAC,QAAK,EAAA,WAAU,2BACZ,UAAA;AAAA,MAAA,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,MAAMJ,EAAI;AAAA,UACV,WAAU;AAAA,QAAA;AAAA,MACd;AAAA,MACA,gBAAAG,EAAC,QAAK,EAAA,WAAU,wBACZ,UAAA;AAAA,QAAA,gBAAAF,EAAC,QAAK,EAAA,WAAU,0BACX,UAAAD,EAAI,OACT;AAAA,QACA,gBAAAC,EAAC,QAAM,EAAA,UAAAD,EAAI,YAAY,CAAA;AAAA,MAAA,EAC3B,CAAA;AAAA,IAAA,EACJ,CAAA;AAAA,EAAA;AAAA,EApBKA,EAAI;AAsBhB,CAAA,GACL;"}
+{"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":["navigationList","TbPackage","TbUserSquare","TbMapPin","TbCreditCard","Navigator","nav","jsx","Link","jsxs","Avatar"],"mappings":";;;;AAKA,MAAMA,IAAiB;AAAA,EACnB;AAAA,IACI,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,wBAAOC,GAAA,CAAA,CAAU;AAAA,EAAA;AAAA,EAErB;AAAA,IACI,OAAO;AAAA,IACP,aACI;AAAA,IACJ,MAAM;AAAA,IACN,wBAAOC,GAAA,CAAA,CAAa;AAAA,EAAA;AAAA,EAExB;AAAA,IACI,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,wBAAOC,GAAA,CAAA,CAAS;AAAA,EAAA;AAAA,EAEpB;AAAA,IACI,OAAO;AAAA,IACP,aACI;AAAA,IACJ,MAAM;AAAA,IACN,wBAAOC,GAAA,CAAA,CAAa;AAAA,EAAA;AAE5B,GAEMC,IAAY,wBAET,OAAA,EAAI,WAAU,uBACV,UAAAL,EAAe,IAAI,CAACM,MACjB,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IAEG,aAAY;AAAA,IACZ,WAAU;AAAA,IACV,IAAIF,EAAI;AAAA,IACR,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,QAAQ;AAAA,IAER,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,2BACZ,UAAA;AAAA,MAAA,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,MAAMJ,EAAI;AAAA,UACV,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAEd,gBAAAG,EAAC,QAAA,EAAK,WAAU,wBACZ,UAAA;AAAA,QAAA,gBAAAF,EAAC,QAAA,EAAK,WAAU,0BACX,UAAAD,EAAI,OACT;AAAA,QACA,gBAAAC,EAAC,QAAA,EAAM,UAAAD,EAAI,YAAA,CAAY;AAAA,MAAA,EAAA,CAC3B;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA;AAAA,EApBKA,EAAI;AAAA,CAsBhB,GACL;"}

package/dist/lib/@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'\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":["paymentMethodOptions","TbCreditCard","jsx","TbBrandPaypal","TbBuildingBank","limit","val","max","cardExpiryFormat","month","date","Control","components","CustomSelectOption","props","DefaultOption","data","label","jsxs","CustomControl","children","selected","PaymentMethodSection","control","errors","selectedPaymentMethod","Card","FormItem","_a","Controller","field","Select","option","Fragment","_b","Input","_c","FormPatternInput","e","_d","FormCustomFormatInput","_e","_f","_g","_h","_i","_j","_k"],"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":["paymentMethodOptions","TbCreditCard","jsx","TbBrandPaypal","TbBuildingBank","limit","val","max","cardExpiryFormat","month","date","Control","components","CustomSelectOption","props","DefaultOption","data","label","jsxs","CustomControl","children","selected","PaymentMethodSection","control","errors","selectedPaymentMethod","Card","FormItem","_a","Controller","field","Select","option","Fragment","_b","Input","_c","FormPatternInput","e","_d","FormCustomFormatInput","_e","_f","_g","_h","_i","_j","_k"],"mappings":"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"}

package/dist/lib/@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'\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":["Tr","Th","Td","THead","TBody","Table","ProductSelectSection","productOption","productList","selectedProduct","setSelectedProduct","useOrderFormStore","inputValue","setInputValue","useState","productsDialogOpen","setProductsDialogOpen","smaller","useResponsive","handleOptionSelect","option","selected","product","handleProductIncremental","productToIncrease","handleProductDecremental","productToDecrease","targeted","handleProductChecked","checked","total","useMemo","accumulator","jsxs","Fragment","Card","jsx","AutoComplete","Avatar","TbSearch","Button","NumericFormat","TbMinus","TbPlus","Dialog","ScrollBar","classNames","Checkbox","value"],"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":["Tr","Th","Td","THead","TBody","Table","ProductSelectSection","productOption","productList","selectedProduct","setSelectedProduct","useOrderFormStore","inputValue","setInputValue","useState","productsDialogOpen","setProductsDialogOpen","smaller","useResponsive","handleOptionSelect","option","selected","product","handleProductIncremental","productToIncrease","handleProductDecremental","productToDecrease","targeted","handleProductChecked","checked","total","useMemo","accumulator","jsxs","Fragment","Card","jsx","AutoComplete","Avatar","TbSearch","Button","NumericFormat","TbMinus","TbPlus","Dialog","ScrollBar","classNames","Checkbox","value"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBA,MAAM,EAAE,IAAAA,GAAI,IAAAC,GAAI,IAAAC,GAAI,OAAAC,GAAO,OAAAC,MAAUC,GAE/BC,KAAuB,MAAM;AAC/B,QAAM,EAAE,eAAAC,GAAe,aAAAC,GAAa,iBAAAC,GAAiB,oBAAAC,EAAA,IACjDC,EAAA,GAEE,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAE,GAEzC,CAACC,GAAoBC,CAAqB,IAAIF,EAAS,EAAK,GAE5D,EAAE,SAAAG,EAAA,IAAYC,EAAA,GAEdC,IAAqB,CAACC,MAA0B;AAClD,UAAMC,IAAWb,EAAY;AAAA,MACzB,CAACc,MAAYA,EAAQ,OAAOF,EAAO;AAAA,IAAA;AAGvC,QAAIC,GAAU;AACV,UAAIZ,EAAgB,KAAK,CAACa,MAAYA,EAAQ,OAAOD,EAAS,EAAE;AAC5D;AAEA,MAAAZ,EAAgB,KAAK,EAAE,GAAGY,GAAU,UAAU,GAAG,GACjDX,EAAmBD,CAAe;AAAA,IACtC;AAAA,EACJ,GAGEc,IAA2B,CAACC,MAAuC;AACrE,IAAAd;AAAA,MACID,EAAgB,IAAI,CAACa,OACbA,EAAQ,OAAOE,EAAkB,OACjCF,EAAQ,WAAWA,EAAQ,WAAW,IAEnCA,EACV;AAAA,IAAA;AAAA,EACL,GAGEG,IAA2B,CAACC,MAAuC;AACrE,UAAMC,IAAWD;AAEjB,IAAAC,EAAS,WAAWA,EAAS,WAAW,GACpCA,EAAS,aAAa,IACtBjB;AAAA,MACID,EAAgB,OAAO,CAACa,MAAYA,EAAQ,OAAOK,EAAS,EAAE;AAAA,IAAA,IAGlEjB;AAAA,MACID,EAAgB,IAAI,CAACa,OACbA,EAAQ,OAAOK,EAAS,OACxBL,IAAUK,IAEPL,EACV;AAAA,IAAA;AAAA,EAET,GAGEM,IAAuB,CAACC,GAAkBR,MAAsB;AAClE,IAAIQ,KACApB,EAAgB,KAAK,EAAE,GAAGY,GAAU,UAAU,GAAG,GACjDX,EAAmBD,CAAe,KAElCC;AAAA,MACID,EAAgB,OAAO,CAACa,MAAYA,EAAQ,OAAOD,EAAS,EAAE;AAAA,IAAA;AAAA,EAEtE,GAGES,IAAQC,EAAQ,MACXtB,EAAgB,OAAO,CAACuB,GAAaV,MACjCU,IAAcV,EAAQ,QAAQA,EAAQ,UAC9C,CAAC,GAEL,CAACb,GAAiBA,EAAgB,MAAM,CAAC;AAE5C,SACI,gBAAAwB,EAAAC,GAAA,EACI,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EAAK,IAAG,kBACL,UAAA;AAAA,MAAA,gBAAAC,EAAC,MAAA,EAAG,WAAU,QAAO,UAAA,mBAAe;AAAA,MACpC,gBAAAH,EAAC,OAAA,EAAI,WAAU,2BACX,UAAA;AAAA,QAAA,gBAAAG;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,MAAM9B;AAAA,YACN,WAAW,CAACe,MAAYA,EAAQ;AAAA,YAChC,OAAOV;AAAA,YACP,cAAc,CAACQ,MACX,gBAAAa,EAAC,OAAA,EAAI,WAAU,2BACX,UAAA;AAAA,cAAA,gBAAAG,EAACE,GAAA,EAAO,OAAM,SAAQ,KAAKlB,EAAO,KAAK;AAAA,cACvC,gBAAAgB,EAAC,QAAA,EAAM,UAAAhB,EAAO,MAAA,CAAM;AAAA,YAAA,GACxB;AAAA,YAEJ,QAAQ,gBAAAgB,EAACG,GAAA,EAAS,WAAU,UAAA,CAAU;AAAA,YACtC,aAAY;AAAA,YACZ,eAAe1B;AAAA,YACf,kBAAkBM;AAAA,UAAA;AAAA,QAAA;AAAA,QAEtB,gBAAAiB;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,SAAS,MAAMxB,EAAsB,EAAI;AAAA,YAC5C,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED,GACJ;AAAA,wBACCX,GAAA,EAAM,SAASY,EAAQ,IAAI,WAAU,QAClC,UAAA;AAAA,QAAA,gBAAAmB,EAACjC,GAAA,EACG,4BAACH,GAAA,EACG,UAAA;AAAA,UAAA,gBAAAoC,EAACnC,GAAA,EAAG,WAAU,WAAU,UAAA,WAAO;AAAA,UAC/B,gBAAAmC,EAACnC,KAAG,UAAA,QAAA,CAAK;AAAA,UACT,gBAAAmC,EAACnC,KAAG,UAAA,WAAA,CAAQ;AAAA,QAAA,EAAA,CAChB,EAAA,CACJ;AAAA,QACA,gBAAAmC,EAAChC,GAAA,EACI,UAAAK,EAAgB,SAAS,IACtBA,EAAgB,IAAI,CAACa,MACjB,gBAAAW,EAACjC,GAAA,EACG,UAAA;AAAA,UAAA,gBAAAoC,EAAClC,GAAA,EACG,UAAA,gBAAA+B,EAAC,OAAA,EAAI,WAAU,2BACX,UAAA;AAAA,YAAA,gBAAAG;AAAA,cAACE;AAAA,cAAA;AAAA,gBACG,OAAM;AAAA,gBACN,KAAKhB,EAAQ;AAAA,cAAA;AAAA,YAAA;AAAA,8BAEhB,OAAA,EACG,UAAA;AAAA,cAAA,gBAAAc,EAAC,OAAA,EAAI,WAAU,0BACV,UAAAd,EAAQ,MACb;AAAA,gCACC,OAAA,EAAI,UAAA;AAAA,gBAAA;AAAA,gBACIA,EAAQ;AAAA,cAAA,EAAA,CACjB;AAAA,YAAA,EAAA,CACJ;AAAA,UAAA,EAAA,CACJ,EAAA,CACJ;AAAA,UACA,gBAAAc,EAAClC,GAAA,EACG,UAAA,gBAAAkC,EAAC,OAAA,EAAI,WAAU,0BACX,UAAA,gBAAAA;AAAA,YAACK;AAAA,YAAA;AAAA,cACG,mBAAiB;AAAA,cACjB,QAAO;AAAA,cACP,aAAY;AAAA,cACZ,OACInB,EAAQ,QACRA,EAAQ;AAAA,cAEZ,cAAc;AAAA,cACd,mBAAmB;AAAA,YAAA;AAAA,UAAA,GAE3B,EAAA,CACJ;AAAA,UACA,gBAAAc,EAAClC,GAAA,EACG,UAAA,gBAAA+B,EAAC,OAAA,EAAI,WAAU,qBACX,UAAA;AAAA,YAAA,gBAAAG;AAAA,cAACI;AAAA,cAAA;AAAA,gBACG,MAAK;AAAA,gBACL,wBAAOE,GAAA,EAAQ;AAAA,gBACf,MAAK;AAAA,gBACL,SAAS,MACLjB;AAAA,kBACIH;AAAA,gBAAA;AAAA,cACJ;AAAA,YAAA;AAAA,YAGR,gBAAAc,EAAC,SAAI,WAAU,oBACX,4BAAC,QAAA,EAAM,UAAAd,EAAQ,UAAS,EAAA,CAC5B;AAAA,YACA,gBAAAc;AAAA,cAACI;AAAA,cAAA;AAAA,gBACG,MAAK;AAAA,gBACL,wBAAOG,GAAA,EAAO;AAAA,gBACd,MAAK;AAAA,gBACL,SAAS,MACLpB;AAAA,kBACID;AAAA,gBAAA;AAAA,cACJ;AAAA,YAAA;AAAA,UAER,EAAA,CACJ,EAAA,CACJ;AAAA,QAAA,EAAA,GA1DKA,EAAQ,EA2DjB,CACH,sBAEAtB,GAAA,EACG,UAAA,gBAAAoC,EAAClC,GAAA,EAAG,WAAU,eAAc,SAAS,GAAG,UAAA,uBAAA,CAExC,GACJ,EAAA,CAER;AAAA,MAAA,GACJ;AAAA,wBACC,OAAA,EAAI,WAAU,yBACX,UAAA,gBAAA+B,EAAC,QAAA,EAAK,WAAU,qCACZ,UAAA;AAAA,QAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,WAAO;AAAA,QACvC,gBAAAA,EAAC,QAAA,EAAK,WAAU,kCACZ,UAAA,gBAAAA;AAAA,UAACK;AAAA,UAAA;AAAA,YACG,mBAAiB;AAAA,YACjB,QAAO;AAAA,YACP,aAAY;AAAA,YACZ,OAAOX;AAAA,YACP,cAAc;AAAA,YACd,mBAAmB;AAAA,UAAA;AAAA,QAAA,EACvB,CACJ;AAAA,MAAA,EAAA,CACJ,EAAA,CACJ;AAAA,IAAA,GACJ;AAAA,IACA,gBAAAG;AAAA,MAACW;AAAA,MAAA;AAAA,QACG,QAAQ7B;AAAA,QACR,SAAS,MAAMC,EAAsB,EAAK;AAAA,QAC1C,gBAAgB,MAAMA,EAAsB,EAAK;AAAA,QAEjD,UAAA;AAAA,UAAA,gBAAAiB,EAAC,OAAA,EAAI,WAAU,oBACX,UAAA;AAAA,YAAA,gBAAAG,EAAC,MAAA,EAAG,WAAU,QAAO,UAAA,gBAAY;AAAA,YACjC,gBAAAA,EAAC,OAAE,UAAA,8BAAA,CAA2B;AAAA,UAAA,GAClC;AAAA,4BACC,OAAA,EAAI,WAAU,QACX,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,QACX,UAAA,gBAAAA;AAAA,YAACS;AAAA,YAAA;AAAA,cACG,WAAWC,EAAW,sBAAsB;AAAA,cAE3C,UAAAtC,EAAY,IAAI,CAACc,MACd,gBAAAW;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEG,WAAU;AAAA,kBAEV,UAAA;AAAA,oBAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2BACX,UAAA;AAAA,sBAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,QACX,UAAA,gBAAAA;AAAA,wBAACW;AAAA,wBAAA;AAAA,0BACG,SAAStC,EAAgB;AAAA,4BACrB,CAACY,MACGA,EAAS,OACTC,EAAQ;AAAA,0BAAA;AAAA,0BAEhB,UAAU,CAAC0B,MACPpB;AAAA,4BACIoB;AAAA,4BACA1B;AAAA,0BAAA;AAAA,wBACJ;AAAA,sBAAA,GAGZ;AAAA,sBACA,gBAAAW,EAAC,OAAA,EAAI,WAAU,2BACX,UAAA;AAAA,wBAAA,gBAAAG;AAAA,0BAACE;AAAA,0BAAA;AAAA,4BACG,MAAK;AAAA,4BACL,OAAM;AAAA,4BACN,KAAKhB,EAAQ;AAAA,0BAAA;AAAA,wBAAA;AAAA,0CAEhB,OAAA,EACG,UAAA;AAAA,0BAAA,gBAAAc,EAAC,KAAA,EAAE,WAAU,0BACR,UAAAd,EAAQ,MACb;AAAA,4CACC,KAAA,EAAE,UAAA;AAAA,4BAAA;AAAA,4BAAKA,EAAQ;AAAA,0BAAA,EAAA,CAAY;AAAA,wBAAA,EAAA,CAChC;AAAA,sBAAA,EAAA,CACJ;AAAA,oBAAA,GACJ;AAAA,sCACC,OAAA,EAAI,UAAA;AAAA,sBAAA;AAAA,sBACI;AAAA,sBACL,gBAAAc,EAAC,QAAA,EAAK,WAAU,0BACX,YAAQ,MAAA,CACb;AAAA,oBAAA,EAAA,CACJ;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAtCKd,EAAQ;AAAA,cAAA,CAwCpB;AAAA,YAAA;AAAA,UAAA,GAET,EAAA,CACJ;AAAA,UACA,gBAAAc;AAAA,YAACI;AAAA,YAAA;AAAA,cACG,OAAK;AAAA,cACL,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,SAAS,MAAMxB,EAAsB,EAAK;AAAA,cAC7C,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAED;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;"}

package/dist/lib/@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'\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":["initialState","useOrderFormStore","create","set","payload"],"mappings":";AAeA,MAAMA,IAA+B;AAAA,EACjC,aAAa,CAAC;AAAA,EACd,eAAe,CAAC;AAAA,EAChB,iBAAiB,CAAA;AACrB,GAEaC,IAAoBC;AAAA,EAC7B,CAACC,OAAS;AAAA,IACN,GAAGH;AAAA,IACH,kBAAkB,CAACI,MAAYD,EAAI,OAAO,EAAE,eAAeC,IAAU;AAAA,IACrE,gBAAgB,CAACA,MAAYD,EAAI,OAAO,EAAE,aAAaC,IAAU;AAAA,IACjE,oBAAoB,CAACA,MACjBD,EAAI,OAAO,EAAE,iBAAiBC,IAAU;AAAA,EAChD;AACJ;"}
+{"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":["initialState","useOrderFormStore","create","set","payload"],"mappings":";AAeA,MAAMA,IAA+B;AAAA,EACjC,aAAa,CAAA;AAAA,EACb,eAAe,CAAA;AAAA,EACf,iBAAiB,CAAA;AACrB,GAEaC,IAAoBC;AAAA,EAC7B,CAACC,OAAS;AAAA,IACN,GAAGH;AAAA,IACH,kBAAkB,CAACI,MAAYD,EAAI,OAAO,EAAE,eAAeC,IAAU;AAAA,IACrE,gBAAgB,CAACA,MAAYD,EAAI,OAAO,EAAE,aAAaC,IAAU;AAAA,IACjE,oBAAoB,CAACA,MACjBD,EAAI,OAAO,EAAE,iBAAiBC,IAAU;AAAA,EAAA;AAEpD;"}

package/dist/lib/@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'\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":["OrderList","Container","jsx","AdaptiveCard","jsxs","OrderListActionTools","OrderListTableTools","OrderListTable"],"mappings":";;;;;;AAMA,MAAMA,IAAY,wBAETC,GACG,EAAA,UAAA,gBAAAC,EAACC,KACG,UAAC,gBAAAC,EAAA,OAAA,EAAI,WAAU,uBACX,UAAA;AAAA,EAAC,gBAAAA,EAAA,OAAA,EAAI,WAAU,sEACX,UAAA;AAAA,IAAA,gBAAAF,EAAC,QAAG,UAAM,SAAA,CAAA;AAAA,sBACTG,GAAqB,CAAA,CAAA;AAAA,EAAA,GAC1B;AAAA,oBACCC,GAAoB,EAAA;AAAA,oBACpBC,GAAe,CAAA,CAAA;AAAA,EACpB,CAAA,EACJ,CAAA,GACJ;"}
+{"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":["OrderList","Container","jsx","AdaptiveCard","jsxs","OrderListActionTools","OrderListTableTools","OrderListTable"],"mappings":";;;;;;AAMA,MAAMA,IAAY,wBAETC,GAAA,EACG,UAAA,gBAAAC,EAACC,KACG,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,uBACX,UAAA;AAAA,EAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,sEACX,UAAA;AAAA,IAAA,gBAAAF,EAAC,QAAG,UAAA,SAAA,CAAM;AAAA,sBACTG,GAAA,CAAA,CAAqB;AAAA,EAAA,GAC1B;AAAA,oBACCC,GAAA,EAAoB;AAAA,oBACpBC,GAAA,CAAA,CAAe;AAAA,EAAA,CACpB,GACJ,GACJ;"}

package/dist/lib/@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'\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":["OrderListActionTools","navigate","useNavigate","orderList","useOrderlist","jsxs","jsx","CSVLink","Button","TbCloudDownload","TbPlus"],"mappings":";;;;;;;AAMA,MAAMA,IAAuB,MAAM;AAC/B,QAAMC,IAAWC,EAAY,GAEvB,EAAE,WAAAC,EAAU,IAAIC,EAAa;AAG/B,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAU,mCACX,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,UAAS;AAAA,QACT,MAAMJ;AAAA,QAEN,UAAA,gBAAAG;AAAA,UAACE;AAAA,UAAA;AAAA,YACG,MAAM,gBAAAF,EAACG,GAAgB,EAAA,WAAU,UAAU,CAAA;AAAA,YAC3C,WAAU;AAAA,YACb,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IACJ;AAAA,IACA,gBAAAH;AAAA,MAACE;AAAA,MAAA;AAAA,QACG,SAAQ;AAAA,QACR,MAAM,gBAAAF,EAACI,GAAO,EAAA,WAAU,UAAU,CAAA;AAAA,QAClC,SAAS,MAAMT,EAAS,+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":["OrderListActionTools","navigate","useNavigate","orderList","useOrderlist","jsxs","jsx","CSVLink","Button","TbCloudDownload","TbPlus"],"mappings":";;;;;;;AAMA,MAAMA,IAAuB,MAAM;AAC/B,QAAMC,IAAWC,EAAA,GAEX,EAAE,WAAAC,EAAA,IAAcC,EAAA;AAEtB,SACI,gBAAAC,EAAC,OAAA,EAAI,WAAU,mCACX,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,UAAS;AAAA,QACT,MAAMJ;AAAA,QAEN,UAAA,gBAAAG;AAAA,UAACE;AAAA,UAAA;AAAA,YACG,MAAM,gBAAAF,EAACG,GAAA,EAAgB,WAAU,UAAA,CAAU;AAAA,YAC3C,WAAU;AAAA,YACb,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,IAEJ,gBAAAH;AAAA,MAACE;AAAA,MAAA;AAAA,QACG,SAAQ;AAAA,QACR,MAAM,gBAAAF,EAACI,GAAA,EAAO,WAAU,UAAA,CAAU;AAAA,QAClC,SAAS,MAAMT,EAAS,+BAA+B;AAAA,QAC1D,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,GACJ;AAER;"}

package/dist/lib/@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'\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":["orderStatusColor","OrderColumn","row","navigate","useNavigate","jsxs","ActionColumn","jsx","Tooltip","TbEye","TbTrash","PaymentMethodImage","paymentMehod","className","Fragment","OrderListTable","orderList","orderListTotal","tableData","isLoading","setTableData","useOrderlist","columns","useMemo","props","dayjs","status","Tag","paymentIdendifier","totalAmount","NumericFormat","handleSetTableData","data","handlePaginationChange","page","newTableData","cloneDeep","handleSelectChange","value","handleSort","sort","DataTable"],"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":["orderStatusColor","OrderColumn","row","navigate","useNavigate","jsxs","ActionColumn","jsx","Tooltip","TbEye","TbTrash","PaymentMethodImage","paymentMehod","className","Fragment","OrderListTable","orderList","orderListTotal","tableData","isLoading","setTableData","useOrderlist","columns","useMemo","props","dayjs","status","Tag","paymentIdendifier","totalAmount","NumericFormat","handleSetTableData","data","handlePaginationChange","page","newTableData","cloneDeep","handleSelectChange","value","handleSort","sort","DataTable"],"mappings":"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"}