@orbe-agro/client-core 5.3.85 → 5.3.89

package/dist/@ecme/views/concepts/customers/CustomerDetails/BillingSection.js

@@ -1,27 +1,27 @@
-import { jsx as e, jsxs as o, Fragment as D } from "react/jsx-runtime";
-import { useState as C, useMemo as A } from "react";
+import { jsx as e, jsxs as o, Fragment as N } from "react/jsx-runtime";
+import { useState as h, useMemo as b } from "react";
 import "../../../../components/ui/Card/index.js";
-import { Table as M } from "../../../../components/ui/Table/index.js";
+import { Table as f } from "../../../../components/ui/Table/index.js";
 import "../../../../components/ui/Badge/index.js";
 import "../../../../components/ui/Tag/index.js";
 import "../../../../components/ui/toast/index.js";
 import "../../../../components/ui/Button/index.js";
 import "../../../../components/ui/Notification/index.js";
-import R from "../../../../utils/classNames.js";
-import E from "../../../../utils/isLastChild.js";
+import v from "../../../../utils/classNames.js";
+import C from "../../../../utils/isLastChild.js";
 import "../../../../components/view/CreditCardDialog/index.js";
-import { createColumnHelper as k, useReactTable as H, getSortedRowModel as Y, getCoreRowModel as j, flexRender as B } from "@tanstack/react-table";
-import { NumericFormat as F } from "react-number-format";
-import { countryList as P } from "../../../../constants/countries.constant.js";
-import z from "dayjs";
-import J from "../../../../components/ui/Badge/Badge.js";
-import O from "../../../../components/ui/toast/toast.js";
-import V from "../../../../components/ui/Notification/Notification.js";
+import { createColumnHelper as M, useReactTable as w, getSortedRowModel as S, getCoreRowModel as I, flexRender as T } from "@tanstack/react-table";
+import { NumericFormat as D } from "react-number-format";
+import { countryList as A } from "../../../../constants/countries.constant.js";
+import R from "dayjs";
+import E from "../../../../components/ui/Badge/Badge.js";
+import k from "../../../../components/ui/toast/toast.js";
+import H from "../../../../components/ui/Notification/Notification.js";
 import a from "../../../../components/ui/Card/Card.js";
-import $ from "../../../../components/ui/Tag/Tag.js";
-import L from "../../../../components/ui/Button/Button.js";
-import q from "../../../../components/view/CreditCardDialog/CreditCardDialog.js";
-const { Tr: G, Td: K, TBody: Q } = M, U = [
+import Y from "../../../../components/ui/Tag/Tag.js";
+import j from "../../../../components/ui/Button/Button.js";
+import B from "../../../../components/view/CreditCardDialog/CreditCardDialog.js";
+const { Tr: F, Td: P, TBody: z } = f, J = [
   "Jan",
   "Feb",
   "Mar",
@@ -34,10 +34,10 @@ const { Tr: G, Td: K, TBody: Q } = M, U = [
   "Oct",
   "Nov",
   "Dec"
-], W = {
+], O = {
   paid: "bg-emerald-500",
   pending: "bg-amber-400"
-}, i = k(), X = [
+}, i = M(), V = [
   i.accessor("item", {
     header: "Product",
     cell: (r) => {
@@ -50,7 +50,7 @@ const { Tr: G, Td: K, TBody: Q } = M, U = [
     cell: (r) => {
       const s = r.row.original;
       return /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ e(J, { className: W[s.status] }),
+        /* @__PURE__ */ e(E, { className: O[s.status] }),
         /* @__PURE__ */ e("span", { className: "heading-text font-bold capitalize", children: s.status })
       ] });
     }
@@ -59,7 +59,7 @@ const { Tr: G, Td: K, TBody: Q } = M, U = [
     header: "Date",
     cell: (r) => {
       const s = r.row.original;
-      return /* @__PURE__ */ e("div", { className: "flex items-center", children: z.unix(s.date).format("MM/DD/YYYY") });
+      return /* @__PURE__ */ e("div", { className: "flex items-center", children: R.unix(s.date).format("MM/DD/YYYY") });
     }
   }),
   i.accessor("amount", {
@@ -67,7 +67,7 @@ const { Tr: G, Td: K, TBody: Q } = M, U = [
     cell: (r) => {
       const s = r.row.original;
       return /* @__PURE__ */ e("div", { className: "flex items-center", children: /* @__PURE__ */ e(
-        F,
+        D,
         {
           displayType: "text",
           value: (Math.round(s.amount * 100) / 100).toFixed(2),
@@ -82,22 +82,15 @@ const { Tr: G, Td: K, TBody: Q } = M, U = [
   ccNumber: "",
   cardExpiry: "",
   code: ""
-}, ve = ({ data: r }) => {
-  var h, f, u, g, x, y, N, b;
-  const [s, c] = C(n), [w, d] = C(!1), S = H({
+}, pe = ({ data: r }) => {
+  const [s, c] = h(n), [u, d] = h(!1), g = w({
     data: r.orderHistory || [],
-    columns: X,
-    getCoreRowModel: j(),
-    getSortedRowModel: Y()
-  }), m = A(() => {
-    var t;
-    return (t = P.find(
-      (l) => {
-        var v;
-        return l.value === ((v = r.personalInfo) == null ? void 0 : v.country);
-      }
-    )) == null ? void 0 : t.label;
-  }, [(h = r.personalInfo) == null ? void 0 : h.country]), I = (t, l) => {
+    columns: V,
+    getCoreRowModel: I(),
+    getSortedRowModel: S()
+  }), m = b(() => A.find(
+    (t) => t.value === r.personalInfo?.country
+  )?.label, [r.personalInfo?.country]), x = (t, l) => {
     c({
       ...n,
       cardHolderName: t,
@@ -105,17 +98,17 @@ const { Tr: G, Td: K, TBody: Q } = M, U = [
     }), d(!0);
   }, p = () => {
     c(n), d(!1);
-  }, T = () => {
-    p(), O.push(
-      /* @__PURE__ */ e(V, { title: "Successfully updated!", type: "success" }),
+  }, y = () => {
+    p(), k.push(
+      /* @__PURE__ */ e(H, { title: "Successfully updated!", type: "success" }),
       {
         placement: "top-center"
       }
     );
   };
-  return /* @__PURE__ */ o(D, { children: [
+  return /* @__PURE__ */ o(N, { children: [
     /* @__PURE__ */ e("h6", { className: "mb-4", children: "Purchase history" }),
-    /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(Q, { children: S.getRowModel().rows.slice(0, 10).map((t) => /* @__PURE__ */ e(G, { children: t.getVisibleCells().map((l) => /* @__PURE__ */ e(K, { children: B(
+    /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(z, { children: g.getRowModel().rows.slice(0, 10).map((t) => /* @__PURE__ */ e(F, { children: t.getVisibleCells().map((l) => /* @__PURE__ */ e(P, { children: T(
       l.column.columnDef.cell,
       l.getContext()
     ) }, l.id)) }, t.id)) }) }),
@@ -124,30 +117,30 @@ const { Tr: G, Td: K, TBody: Q } = M, U = [
       /* @__PURE__ */ o(a, { children: [
         /* @__PURE__ */ e("div", { className: "font-bold heading-text", children: "Billing Address" }),
         /* @__PURE__ */ o("div", { className: "mt-4 flex flex-col gap-1 font-semibold", children: [
-          /* @__PURE__ */ e("span", { children: (f = r.personalInfo) == null ? void 0 : f.address }),
-          /* @__PURE__ */ e("span", { children: (u = r.personalInfo) == null ? void 0 : u.city }),
-          /* @__PURE__ */ e("span", { children: (g = r.personalInfo) == null ? void 0 : g.postcode }),
+          /* @__PURE__ */ e("span", { children: r.personalInfo?.address }),
+          /* @__PURE__ */ e("span", { children: r.personalInfo?.city }),
+          /* @__PURE__ */ e("span", { children: r.personalInfo?.postcode }),
           /* @__PURE__ */ e("span", { children: m })
         ] })
       ] }),
       /* @__PURE__ */ o(a, { children: [
         /* @__PURE__ */ e("div", { className: "font-bold heading-text", children: "Delivery Address" }),
         /* @__PURE__ */ o("div", { className: "mt-4 flex flex-col gap-1 font-semibold", children: [
-          /* @__PURE__ */ e("span", { children: (x = r.personalInfo) == null ? void 0 : x.address }),
-          /* @__PURE__ */ e("span", { children: (y = r.personalInfo) == null ? void 0 : y.city }),
-          /* @__PURE__ */ e("span", { children: (N = r.personalInfo) == null ? void 0 : N.postcode }),
+          /* @__PURE__ */ e("span", { children: r.personalInfo?.address }),
+          /* @__PURE__ */ e("span", { children: r.personalInfo?.city }),
+          /* @__PURE__ */ e("span", { children: r.personalInfo?.postcode }),
           /* @__PURE__ */ e("span", { children: m })
         ] })
       ] })
     ] }),
     /* @__PURE__ */ e("h6", { className: "mt-8", children: "Payment Methods" }),
     /* @__PURE__ */ o(a, { className: "mt-4", bodyClass: "py-0", children: [
-      (b = r.paymentMethod) == null ? void 0 : b.map((t, l) => /* @__PURE__ */ o(
+      r.paymentMethod?.map((t, l) => /* @__PURE__ */ o(
         "div",
         {
-          className: R(
+          className: v(
             "flex flex-col lg:flex-row lg:items-center justify-between gap-3 p-4",
-            !E(r.paymentMethod || [], l) && "border-b border-gray-200 dark:border-gray-600"
+            !C(r.paymentMethod || [], l) && "border-b border-gray-200 dark:border-gray-600"
           ),
           children: [
             /* @__PURE__ */ o("div", { className: "flex items-center gap-3", children: [
@@ -161,7 +154,7 @@ const { Tr: G, Td: K, TBody: Q } = M, U = [
                     " ",
                     t.last4Number
                   ] }),
-                  t.primary && /* @__PURE__ */ e($, { className: "bg-sky-100 text-primary dark:bg-primary/20 dark:text-primary rounded-md border-0 mx-2", children: /* @__PURE__ */ o("span", { className: "capitalize", children: [
+                  t.primary && /* @__PURE__ */ e(Y, { className: "bg-sky-100 text-primary dark:bg-primary/20 dark:text-primary rounded-md border-0 mx-2", children: /* @__PURE__ */ o("span", { className: "capitalize", children: [
                     " ",
                     "Primary",
                     " "
@@ -170,17 +163,17 @@ const { Tr: G, Td: K, TBody: Q } = M, U = [
                 /* @__PURE__ */ o("span", { children: [
                   "Expired",
                   " ",
-                  U[parseInt(t.expMonth) - 1],
+                  J[parseInt(t.expMonth) - 1],
                   " 20",
                   t.expYear
                 ] })
               ] })
             ] }),
             /* @__PURE__ */ e("div", { className: "flex justify-end", children: /* @__PURE__ */ e(
-              L,
+              j,
               {
                 size: "sm",
-                onClick: () => I(
+                onClick: () => x(
                   t.cardHolderName,
                   `${t.expMonth}${t.expYear}`
                 ),
@@ -192,19 +185,19 @@ const { Tr: G, Td: K, TBody: Q } = M, U = [
         t.last4Number
       )),
       /* @__PURE__ */ e(
-        q,
+        B,
         {
           title: "Edit credit card",
           defaultValues: s,
-          dialogOpen: w,
+          dialogOpen: u,
           onDialogClose: p,
-          onSubmit: T
+          onSubmit: y
         }
       )
     ] })
   ] });
 };
 export {
-  ve as default
+  pe as default
 };
 //# sourceMappingURL=BillingSection.js.map

package/dist/@ecme/views/concepts/customers/CustomerDetails/BillingSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"BillingSection.js","sources":["../../../../../../lib/@ecme/views/concepts/customers/CustomerDetails/BillingSection.tsx"],"sourcesContent":["import { useState, useMemo } from 'react'\nimport Card from '@/components/ui/Card'\nimport Table from '@/components/ui/Table'\nimport Badge from '@/components/ui/Badge'\nimport Tag from '@/components/ui/Tag'\nimport toast from '@/components/ui/toast'\nimport Button from '@/components/ui/Button'\nimport Notification from '@/components/ui/Notification'\nimport classNames from '@/utils/classNames'\nimport isLastChild from '@/utils/isLastChild'\nimport CreditCardDialog from '@/components/view/CreditCardDialog'\nimport {\n    flexRender,\n    getCoreRowModel,\n    getSortedRowModel,\n    useReactTable,\n    createColumnHelper,\n} from '@tanstack/react-table'\nimport { NumericFormat } from 'react-number-format'\nimport { countryList } from '@/constants/countries.constant'\nimport dayjs from 'dayjs'\n\ntype OrderHistory = {\n    id: string\n    item: string\n    status: string\n    amount: number\n    date: number\n}\n\ntype PaymentMethod = {\n    cardHolderName: string\n    cardType: string\n    expMonth: string\n    expYear: string\n    last4Number: string\n    primary: boolean\n}\n\ntype BillingSectionProps = {\n    data: Partial<{\n        orderHistory: OrderHistory[]\n        personalInfo: {\n            address: string\n            postcode: string\n            city: string\n            country: string\n        }\n        paymentMethod: PaymentMethod[]\n    }>\n}\n\nconst { Tr, Td, TBody } = Table\n\nconst months = [\n    'Jan',\n    'Feb',\n    'Mar',\n    'Apr',\n    'May',\n    'Jun',\n    'Jul',\n    'Aug',\n    'Sep',\n    'Oct',\n    'Nov',\n    'Dec',\n]\n\nconst statusColor: Record<string, string> = {\n    paid: 'bg-emerald-500',\n    pending: 'bg-amber-400',\n}\n\nconst columnHelper = createColumnHelper<OrderHistory>()\n\nconst columns = [\n    columnHelper.accessor('item', {\n        header: 'Product',\n        cell: (props) => {\n            const row = props.row.original\n            return (\n                <div className=\"flex items-center gap-2\">\n                    <span className=\"font-semibold\">{row.item}</span>\n                </div>\n            )\n        },\n    }),\n    columnHelper.accessor('status', {\n        header: 'Status',\n        cell: (props) => {\n            const row = props.row.original\n            return (\n                <div className=\"flex items-center gap-2\">\n                    <Badge className={statusColor[row.status]} />\n                    <span className=\"heading-text font-bold capitalize\">\n                        {row.status}\n                    </span>\n                </div>\n            )\n        },\n    }),\n    columnHelper.accessor('date', {\n        header: 'Date',\n        cell: (props) => {\n            const row = props.row.original\n            return (\n                <div className=\"flex items-center\">\n                    {dayjs.unix(row.date).format('MM/DD/YYYY')}\n                </div>\n            )\n        },\n    }),\n    columnHelper.accessor('amount', {\n        header: 'Amount',\n        cell: (props) => {\n            const row = props.row.original\n            return (\n                <div className=\"flex items-center\">\n                    <NumericFormat\n                        displayType=\"text\"\n                        value={(Math.round(row.amount * 100) / 100).toFixed(2)}\n                        prefix={'$'}\n                        thousandSeparator={true}\n                    />\n                </div>\n            )\n        },\n    }),\n]\n\nconst initialSelectedCard = {\n    cardHolderName: '',\n    ccNumber: '',\n    cardExpiry: '',\n    code: '',\n}\n\nconst BillingSection = ({ data }: BillingSectionProps) => {\n    const [selectedCard, setSelectedCard] = useState<{\n        cardHolderName: string\n        ccNumber: string\n        cardExpiry: string\n        code: string\n    }>(initialSelectedCard)\n\n    const [dialogOpen, setDialogOpen] = useState(false)\n\n    const table = useReactTable({\n        data: data.orderHistory || [],\n        columns,\n        getCoreRowModel: getCoreRowModel(),\n        getSortedRowModel: getSortedRowModel(),\n    })\n\n    const countryName = useMemo(() => {\n        return countryList.find(\n            (country) => country.value === data.personalInfo?.country,\n        )?.label\n    }, [data.personalInfo?.country])\n\n    const handleEdit = (cardHolderName: string, cardExpiry: string) => {\n        setSelectedCard({\n            ...initialSelectedCard,\n            cardHolderName,\n            cardExpiry,\n        })\n        setDialogOpen(true)\n    }\n\n    const handleEditClose = () => {\n        setSelectedCard(initialSelectedCard)\n        setDialogOpen(false)\n    }\n\n    const handleSubmit = () => {\n        handleEditClose()\n        toast.push(\n            <Notification title={'Successfully updated!'} type=\"success\" />,\n            {\n                placement: 'top-center',\n            },\n        )\n    }\n\n    return (\n        <>\n            <h6 className=\"mb-4\">Purchase history</h6>\n            <Table>\n                <TBody>\n                    {table\n                        .getRowModel()\n                        .rows.slice(0, 10)\n                        .map((row) => {\n                            return (\n                                <Tr key={row.id}>\n                                    {row.getVisibleCells().map((cell) => {\n                                        return (\n                                            <Td key={cell.id}>\n                                                {flexRender(\n                                                    cell.column.columnDef.cell,\n                                                    cell.getContext(),\n                                                )}\n                                            </Td>\n                                        )\n                                    })}\n                                </Tr>\n                            )\n                        })}\n                </TBody>\n            </Table>\n            <h6 className=\"mt-8\">Addresses</h6>\n            <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4\">\n                <Card>\n                    <div className=\"font-bold heading-text\">\n                        Billing Address\n                    </div>\n                    <div className=\"mt-4 flex flex-col gap-1 font-semibold\">\n                        <span>{data.personalInfo?.address}</span>\n                        <span>{data.personalInfo?.city}</span>\n                        <span>{data.personalInfo?.postcode}</span>\n                        <span>{countryName}</span>\n                    </div>\n                </Card>\n                <Card>\n                    <div className=\"font-bold heading-text\">\n                        Delivery Address\n                    </div>\n                    <div className=\"mt-4 flex flex-col gap-1 font-semibold\">\n                        <span>{data.personalInfo?.address}</span>\n                        <span>{data.personalInfo?.city}</span>\n                        <span>{data.personalInfo?.postcode}</span>\n                        <span>{countryName}</span>\n                    </div>\n                </Card>\n            </div>\n            <h6 className=\"mt-8\">Payment Methods</h6>\n            <Card className=\"mt-4\" bodyClass=\"py-0\">\n                {data.paymentMethod?.map((card, index) => (\n                    <div\n                        key={card.last4Number}\n                        className={classNames(\n                            'flex flex-col lg:flex-row lg:items-center justify-between gap-3 p-4',\n                            !isLastChild(data.paymentMethod || [], index) &&\n                                'border-b border-gray-200 dark:border-gray-600',\n                        )}\n                    >\n                        <div className=\"flex items-center gap-3\">\n                            {card.cardType === 'VISA' && (\n                                <img src=\"/img/others/img-8.png\" alt=\"visa\" />\n                            )}\n                            {card.cardType === 'MASTER' && (\n                                <img src=\"/img/others/img-9.png\" alt=\"master\" />\n                            )}\n                            <div>\n                                <div className=\"flex items-center\">\n                                    <div className=\"text-gray-900 dark:text-gray-100 font-semibold\">\n                                        {card.cardHolderName} ••••{' '}\n                                        {card.last4Number}\n                                    </div>\n                                    {card.primary && (\n                                        <Tag className=\"bg-sky-100 text-primary dark:bg-primary/20 dark:text-primary rounded-md border-0 mx-2\">\n                                            <span className=\"capitalize\">\n                                                {' '}\n                                                Primary{' '}\n                                            </span>\n                                        </Tag>\n                                    )}\n                                </div>\n                                <span>\n                                    Expired{' '}\n                                    {months[parseInt(card.expMonth) - 1]} 20\n                                    {card.expYear}\n                                </span>\n                            </div>\n                        </div>\n                        <div className=\"flex justify-end\">\n                            <Button\n                                size=\"sm\"\n                                onClick={() =>\n                                    handleEdit(\n                                        card.cardHolderName,\n                                        `${card.expMonth}${card.expYear}`,\n                                    )\n                                }\n                            >\n                                Edit\n                            </Button>\n                        </div>\n                    </div>\n                ))}\n                <CreditCardDialog\n                    title=\"Edit credit card\"\n                    defaultValues={selectedCard}\n                    dialogOpen={dialogOpen}\n                    onDialogClose={handleEditClose}\n                    onSubmit={handleSubmit}\n                />\n            </Card>\n        </>\n    )\n}\n\nexport default BillingSection\n"],"names":["Tr","Td","TBody","Table","months","statusColor","columnHelper","createColumnHelper","columns","props","row","jsx","jsxs","Badge","dayjs","NumericFormat","initialSelectedCard","BillingSection","data","selectedCard","setSelectedCard","useState","dialogOpen","setDialogOpen","table","useReactTable","getCoreRowModel","getSortedRowModel","countryName","useMemo","_a","countryList","country","handleEdit","cardHolderName","cardExpiry","handleEditClose","handleSubmit","toast","Notification","Fragment","cell","flexRender","Card","_b","_c","_d","_e","_f","_g","_h","card","index","classNames","isLastChild","Tag","Button","CreditCardDialog"],"mappings":"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"}
+{"version":3,"file":"BillingSection.js","sources":["../../../../../../lib/@ecme/views/concepts/customers/CustomerDetails/BillingSection.tsx"],"sourcesContent":["import { useState, useMemo } from 'react'\nimport Card from '@/components/ui/Card'\nimport Table from '@/components/ui/Table'\nimport Badge from '@/components/ui/Badge'\nimport Tag from '@/components/ui/Tag'\nimport toast from '@/components/ui/toast'\nimport Button from '@/components/ui/Button'\nimport Notification from '@/components/ui/Notification'\nimport classNames from '@/utils/classNames'\nimport isLastChild from '@/utils/isLastChild'\nimport CreditCardDialog from '@/components/view/CreditCardDialog'\nimport {\n    flexRender,\n    getCoreRowModel,\n    getSortedRowModel,\n    useReactTable,\n    createColumnHelper,\n} from '@tanstack/react-table'\nimport { NumericFormat } from 'react-number-format'\nimport { countryList } from '@/constants/countries.constant'\nimport dayjs from 'dayjs'\n\ntype OrderHistory = {\n    id: string\n    item: string\n    status: string\n    amount: number\n    date: number\n}\n\ntype PaymentMethod = {\n    cardHolderName: string\n    cardType: string\n    expMonth: string\n    expYear: string\n    last4Number: string\n    primary: boolean\n}\n\ntype BillingSectionProps = {\n    data: Partial<{\n        orderHistory: OrderHistory[]\n        personalInfo: {\n            address: string\n            postcode: string\n            city: string\n            country: string\n        }\n        paymentMethod: PaymentMethod[]\n    }>\n}\n\nconst { Tr, Td, TBody } = Table\n\nconst months = [\n    'Jan',\n    'Feb',\n    'Mar',\n    'Apr',\n    'May',\n    'Jun',\n    'Jul',\n    'Aug',\n    'Sep',\n    'Oct',\n    'Nov',\n    'Dec',\n]\n\nconst statusColor: Record<string, string> = {\n    paid: 'bg-emerald-500',\n    pending: 'bg-amber-400',\n}\n\nconst columnHelper = createColumnHelper<OrderHistory>()\n\nconst columns = [\n    columnHelper.accessor('item', {\n        header: 'Product',\n        cell: (props) => {\n            const row = props.row.original\n            return (\n                <div className=\"flex items-center gap-2\">\n                    <span className=\"font-semibold\">{row.item}</span>\n                </div>\n            )\n        },\n    }),\n    columnHelper.accessor('status', {\n        header: 'Status',\n        cell: (props) => {\n            const row = props.row.original\n            return (\n                <div className=\"flex items-center gap-2\">\n                    <Badge className={statusColor[row.status]} />\n                    <span className=\"heading-text font-bold capitalize\">\n                        {row.status}\n                    </span>\n                </div>\n            )\n        },\n    }),\n    columnHelper.accessor('date', {\n        header: 'Date',\n        cell: (props) => {\n            const row = props.row.original\n            return (\n                <div className=\"flex items-center\">\n                    {dayjs.unix(row.date).format('MM/DD/YYYY')}\n                </div>\n            )\n        },\n    }),\n    columnHelper.accessor('amount', {\n        header: 'Amount',\n        cell: (props) => {\n            const row = props.row.original\n            return (\n                <div className=\"flex items-center\">\n                    <NumericFormat\n                        displayType=\"text\"\n                        value={(Math.round(row.amount * 100) / 100).toFixed(2)}\n                        prefix={'$'}\n                        thousandSeparator={true}\n                    />\n                </div>\n            )\n        },\n    }),\n]\n\nconst initialSelectedCard = {\n    cardHolderName: '',\n    ccNumber: '',\n    cardExpiry: '',\n    code: '',\n}\n\nconst BillingSection = ({ data }: BillingSectionProps) => {\n    const [selectedCard, setSelectedCard] = useState<{\n        cardHolderName: string\n        ccNumber: string\n        cardExpiry: string\n        code: string\n    }>(initialSelectedCard)\n\n    const [dialogOpen, setDialogOpen] = useState(false)\n\n    const table = useReactTable({\n        data: data.orderHistory || [],\n        columns,\n        getCoreRowModel: getCoreRowModel(),\n        getSortedRowModel: getSortedRowModel(),\n    })\n\n    const countryName = useMemo(() => {\n        return countryList.find(\n            (country) => country.value === data.personalInfo?.country,\n        )?.label\n    }, [data.personalInfo?.country])\n\n    const handleEdit = (cardHolderName: string, cardExpiry: string) => {\n        setSelectedCard({\n            ...initialSelectedCard,\n            cardHolderName,\n            cardExpiry,\n        })\n        setDialogOpen(true)\n    }\n\n    const handleEditClose = () => {\n        setSelectedCard(initialSelectedCard)\n        setDialogOpen(false)\n    }\n\n    const handleSubmit = () => {\n        handleEditClose()\n        toast.push(\n            <Notification title={'Successfully updated!'} type=\"success\" />,\n            {\n                placement: 'top-center',\n            },\n        )\n    }\n\n    return (\n        <>\n            <h6 className=\"mb-4\">Purchase history</h6>\n            <Table>\n                <TBody>\n                    {table\n                        .getRowModel()\n                        .rows.slice(0, 10)\n                        .map((row) => {\n                            return (\n                                <Tr key={row.id}>\n                                    {row.getVisibleCells().map((cell) => {\n                                        return (\n                                            <Td key={cell.id}>\n                                                {flexRender(\n                                                    cell.column.columnDef.cell,\n                                                    cell.getContext(),\n                                                )}\n                                            </Td>\n                                        )\n                                    })}\n                                </Tr>\n                            )\n                        })}\n                </TBody>\n            </Table>\n            <h6 className=\"mt-8\">Addresses</h6>\n            <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4\">\n                <Card>\n                    <div className=\"font-bold heading-text\">\n                        Billing Address\n                    </div>\n                    <div className=\"mt-4 flex flex-col gap-1 font-semibold\">\n                        <span>{data.personalInfo?.address}</span>\n                        <span>{data.personalInfo?.city}</span>\n                        <span>{data.personalInfo?.postcode}</span>\n                        <span>{countryName}</span>\n                    </div>\n                </Card>\n                <Card>\n                    <div className=\"font-bold heading-text\">\n                        Delivery Address\n                    </div>\n                    <div className=\"mt-4 flex flex-col gap-1 font-semibold\">\n                        <span>{data.personalInfo?.address}</span>\n                        <span>{data.personalInfo?.city}</span>\n                        <span>{data.personalInfo?.postcode}</span>\n                        <span>{countryName}</span>\n                    </div>\n                </Card>\n            </div>\n            <h6 className=\"mt-8\">Payment Methods</h6>\n            <Card className=\"mt-4\" bodyClass=\"py-0\">\n                {data.paymentMethod?.map((card, index) => (\n                    <div\n                        key={card.last4Number}\n                        className={classNames(\n                            'flex flex-col lg:flex-row lg:items-center justify-between gap-3 p-4',\n                            !isLastChild(data.paymentMethod || [], index) &&\n                                'border-b border-gray-200 dark:border-gray-600',\n                        )}\n                    >\n                        <div className=\"flex items-center gap-3\">\n                            {card.cardType === 'VISA' && (\n                                <img src=\"/img/others/img-8.png\" alt=\"visa\" />\n                            )}\n                            {card.cardType === 'MASTER' && (\n                                <img src=\"/img/others/img-9.png\" alt=\"master\" />\n                            )}\n                            <div>\n                                <div className=\"flex items-center\">\n                                    <div className=\"text-gray-900 dark:text-gray-100 font-semibold\">\n                                        {card.cardHolderName} ••••{' '}\n                                        {card.last4Number}\n                                    </div>\n                                    {card.primary && (\n                                        <Tag className=\"bg-sky-100 text-primary dark:bg-primary/20 dark:text-primary rounded-md border-0 mx-2\">\n                                            <span className=\"capitalize\">\n                                                {' '}\n                                                Primary{' '}\n                                            </span>\n                                        </Tag>\n                                    )}\n                                </div>\n                                <span>\n                                    Expired{' '}\n                                    {months[parseInt(card.expMonth) - 1]} 20\n                                    {card.expYear}\n                                </span>\n                            </div>\n                        </div>\n                        <div className=\"flex justify-end\">\n                            <Button\n                                size=\"sm\"\n                                onClick={() =>\n                                    handleEdit(\n                                        card.cardHolderName,\n                                        `${card.expMonth}${card.expYear}`,\n                                    )\n                                }\n                            >\n                                Edit\n                            </Button>\n                        </div>\n                    </div>\n                ))}\n                <CreditCardDialog\n                    title=\"Edit credit card\"\n                    defaultValues={selectedCard}\n                    dialogOpen={dialogOpen}\n                    onDialogClose={handleEditClose}\n                    onSubmit={handleSubmit}\n                />\n            </Card>\n        </>\n    )\n}\n\nexport default BillingSection\n"],"names":["Tr","Td","TBody","Table","months","statusColor","columnHelper","createColumnHelper","columns","props","row","jsx","jsxs","Badge","dayjs","NumericFormat","initialSelectedCard","BillingSection","data","selectedCard","setSelectedCard","useState","dialogOpen","setDialogOpen","table","useReactTable","getCoreRowModel","getSortedRowModel","countryName","useMemo","countryList","country","handleEdit","cardHolderName","cardExpiry","handleEditClose","handleSubmit","toast","Notification","Fragment","cell","flexRender","Card","card","index","classNames","isLastChild","Tag","Button","CreditCardDialog"],"mappings":"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"}

package/dist/@ecme/views/concepts/customers/CustomerDetails/ProfileSection.js

@@ -1,160 +1,147 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { useState as x } from "react";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useState as h } from "react";
 import "../../../../components/ui/Card/index.js";
 import "../../../../components/ui/Button/index.js";
-import g from "../../../../components/ui/Avatar/Avatar.js";
+import u from "../../../../components/ui/Avatar/Avatar.js";
 import "../../../../components/ui/Notification/index.js";
 import "../../../../components/ui/Tooltip/index.js";
 import "../../../../components/ui/toast/index.js";
-import b from "../../../../components/shared/ConfirmDialog.js";
-import v from "dayjs";
-import { HiPencil as N, HiOutlineTrash as C } from "react-icons/hi";
-import { FaFacebookF as k, FaXTwitter as y, FaLinkedinIn as w, FaPinterestP as D } from "react-icons/fa6";
-import { useNavigate as I } from "react-router-dom";
-import F from "../../../../components/ui/toast/toast.js";
-import O from "../../../../components/ui/Notification/Notification.js";
-import S from "../../../../components/ui/Card/Card.js";
-import j from "../../../../components/ui/Tooltip/Tooltip.js";
-import i from "../../../../components/ui/Button/Button.js";
-const r = ({ title: o, value: s }) => /* @__PURE__ */ l("div", { children: [
+import x from "../../../../components/shared/ConfirmDialog.js";
+import g from "dayjs";
+import { HiPencil as b, HiOutlineTrash as v } from "react-icons/hi";
+import { FaFacebookF as N, FaXTwitter as C, FaLinkedinIn as k, FaPinterestP as y } from "react-icons/fa6";
+import { useNavigate as w } from "react-router-dom";
+import D from "../../../../components/ui/toast/toast.js";
+import I from "../../../../components/ui/Notification/Notification.js";
+import F from "../../../../components/ui/Card/Card.js";
+import O from "../../../../components/ui/Tooltip/Tooltip.js";
+import l from "../../../../components/ui/Button/Button.js";
+const n = ({ title: o, value: i }) => /* @__PURE__ */ t("div", { children: [
   /* @__PURE__ */ e("span", { className: "font-semibold", children: o }),
-  /* @__PURE__ */ e("p", { className: "heading-text font-bold", children: s })
-] }), U = ({ data: o = {} }) => {
-  var m, d;
-  const s = I(), [p, c] = x(!1), n = (t = "") => {
-    window.open(`https://${t}`, "_blank", "rel=noopener noreferrer");
-  }, a = () => {
-    c(!1);
-  }, f = () => {
-    c(!0);
-  }, h = () => {
-    c(!1), s("/concepts/customers/customer-list"), F.push(
-      /* @__PURE__ */ e(O, { title: "Successfully Deleted", type: "success", children: "Customer successfuly deleted" })
+  /* @__PURE__ */ e("p", { className: "heading-text font-bold", children: i })
+] }), K = ({ data: o = {} }) => {
+  const i = w(), [a, r] = h(!1), s = (f = "") => {
+    window.open(`https://${f}`, "_blank", "rel=noopener noreferrer");
+  }, c = () => {
+    r(!1);
+  }, m = () => {
+    r(!0);
+  }, d = () => {
+    r(!1), i("/concepts/customers/customer-list"), D.push(
+      /* @__PURE__ */ e(I, { title: "Successfully Deleted", type: "success", children: "Customer successfuly deleted" })
     );
-  }, u = () => {
-    s("/concepts/chat");
+  }, p = () => {
+    i("/concepts/chat");
   };
-  return /* @__PURE__ */ l(S, { className: "w-full", children: [
-    /* @__PURE__ */ e("div", { className: "flex justify-end", children: /* @__PURE__ */ e(j, { title: "Edit customer", children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ t(F, { className: "w-full", children: [
+    /* @__PURE__ */ e("div", { className: "flex justify-end", children: /* @__PURE__ */ e(O, { title: "Edit customer", children: /* @__PURE__ */ e(
       "button",
       {
         className: "close-button button-press-feedback",
         type: "button",
         onClick: () => {
-          s(`/concepts/customers/customer-edit/${o.id}`);
+          i(`/concepts/customers/customer-edit/${o.id}`);
         },
-        children: /* @__PURE__ */ e(N, {})
+        children: /* @__PURE__ */ e(b, {})
       }
     ) }) }),
-    /* @__PURE__ */ l("div", { className: "flex flex-col xl:justify-between h-full 2xl:min-w-[360px] mx-auto", children: [
-      /* @__PURE__ */ l("div", { className: "flex xl:flex-col items-center gap-4 mt-6", children: [
-        /* @__PURE__ */ e(g, { size: 90, shape: "circle", src: o.img }),
+    /* @__PURE__ */ t("div", { className: "flex flex-col xl:justify-between h-full 2xl:min-w-[360px] mx-auto", children: [
+      /* @__PURE__ */ t("div", { className: "flex xl:flex-col items-center gap-4 mt-6", children: [
+        /* @__PURE__ */ e(u, { size: 90, shape: "circle", src: o.img }),
         /* @__PURE__ */ e("h4", { className: "font-bold", children: o.name })
       ] }),
-      /* @__PURE__ */ l("div", { className: "grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-1 gap-y-7 gap-x-4 mt-10", children: [
-        /* @__PURE__ */ e(r, { title: "Email", value: o.email }),
+      /* @__PURE__ */ t("div", { className: "grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-1 gap-y-7 gap-x-4 mt-10", children: [
+        /* @__PURE__ */ e(n, { title: "Email", value: o.email }),
         /* @__PURE__ */ e(
-          r,
+          n,
           {
             title: "Phone",
-            value: (m = o.personalInfo) == null ? void 0 : m.phoneNumber
+            value: o.personalInfo?.phoneNumber
           }
         ),
         /* @__PURE__ */ e(
-          r,
+          n,
           {
             title: "Date of birth",
-            value: (d = o.personalInfo) == null ? void 0 : d.birthday
+            value: o.personalInfo?.birthday
           }
         ),
         /* @__PURE__ */ e(
-          r,
+          n,
           {
             title: "Last Online",
-            value: v.unix(o.lastOnline).format("DD MMM YYYY hh:mm A")
+            value: g.unix(o.lastOnline).format("DD MMM YYYY hh:mm A")
           }
         ),
-        /* @__PURE__ */ l("div", { className: "mb-7", children: [
+        /* @__PURE__ */ t("div", { className: "mb-7", children: [
           /* @__PURE__ */ e("span", { children: "Social" }),
-          /* @__PURE__ */ l("div", { className: "flex mt-4 gap-2", children: [
+          /* @__PURE__ */ t("div", { className: "flex mt-4 gap-2", children: [
             /* @__PURE__ */ e(
-              i,
+              l,
               {
                 size: "sm",
-                icon: /* @__PURE__ */ e(k, { className: "text-[#2259f2]" }),
-                onClick: () => {
-                  var t;
-                  return n(
-                    (t = o.personalInfo) == null ? void 0 : t.facebook
-                  );
-                }
+                icon: /* @__PURE__ */ e(N, { className: "text-[#2259f2]" }),
+                onClick: () => s(
+                  o.personalInfo?.facebook
+                )
               }
             ),
             /* @__PURE__ */ e(
-              i,
+              l,
               {
                 size: "sm",
-                icon: /* @__PURE__ */ e(y, { className: "text-black dark:text-white" }),
-                onClick: () => {
-                  var t;
-                  return n(
-                    (t = o.personalInfo) == null ? void 0 : t.twitter
-                  );
-                }
+                icon: /* @__PURE__ */ e(C, { className: "text-black dark:text-white" }),
+                onClick: () => s(
+                  o.personalInfo?.twitter
+                )
               }
             ),
             /* @__PURE__ */ e(
-              i,
+              l,
               {
                 size: "sm",
-                icon: /* @__PURE__ */ e(w, { className: "text-[#155fb8]" }),
-                onClick: () => {
-                  var t;
-                  return n(
-                    (t = o.personalInfo) == null ? void 0 : t.linkedIn
-                  );
-                }
+                icon: /* @__PURE__ */ e(k, { className: "text-[#155fb8]" }),
+                onClick: () => s(
+                  o.personalInfo?.linkedIn
+                )
               }
             ),
             /* @__PURE__ */ e(
-              i,
+              l,
               {
                 size: "sm",
-                icon: /* @__PURE__ */ e(D, { className: "text-[#df0018]" }),
-                onClick: () => {
-                  var t;
-                  return n(
-                    (t = o.personalInfo) == null ? void 0 : t.pinterest
-                  );
-                }
+                icon: /* @__PURE__ */ e(y, { className: "text-[#df0018]" }),
+                onClick: () => s(
+                  o.personalInfo?.pinterest
+                )
               }
             )
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ l("div", { className: "flex flex-col gap-4", children: [
-        /* @__PURE__ */ e(i, { block: !0, variant: "solid", onClick: u, children: "Send Messsage" }),
+      /* @__PURE__ */ t("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ e(l, { block: !0, variant: "solid", onClick: p, children: "Send Messsage" }),
         /* @__PURE__ */ e(
-          i,
+          l,
           {
             block: !0,
             customColorClass: () => "text-error hover:border-error hover:ring-1 ring-error hover:text-error",
-            icon: /* @__PURE__ */ e(C, {}),
-            onClick: f,
+            icon: /* @__PURE__ */ e(v, {}),
+            onClick: m,
             children: "Delete"
           }
         )
       ] }),
       /* @__PURE__ */ e(
-        b,
+        x,
         {
-          isOpen: p,
+          isOpen: a,
           type: "danger",
           title: "Delete customer",
-          onClose: a,
-          onRequestClose: a,
-          onCancel: a,
-          onConfirm: h,
+          onClose: c,
+          onRequestClose: c,
+          onCancel: c,
+          onConfirm: d,
           children: /* @__PURE__ */ e("p", { children: "Are you sure you want to delete this customer? All record related to this customer will be deleted as well. This action cannot be undone." })
         }
       )
@@ -162,6 +149,6 @@ const r = ({ title: o, value: s }) => /* @__PURE__ */ l("div", { children: [
   ] });
 };
 export {
-  U as default
+  K as default
 };
 //# sourceMappingURL=ProfileSection.js.map

package/dist/@ecme/views/concepts/customers/CustomerDetails/ProfileSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileSection.js","sources":["../../../../../../lib/@ecme/views/concepts/customers/CustomerDetails/ProfileSection.tsx"],"sourcesContent":["import { useState } from 'react'\nimport Card from '@/components/ui/Card'\nimport Button from '@/components/ui/Button'\nimport Avatar from '@/components/ui/Avatar/Avatar'\nimport Notification from '@/components/ui/Notification'\nimport Tooltip from '@/components/ui/Tooltip'\nimport toast from '@/components/ui/toast'\nimport ConfirmDialog from '@/components/shared/ConfirmDialog'\nimport dayjs from 'dayjs'\nimport { HiPencil, HiOutlineTrash } from 'react-icons/hi'\nimport {\n    FaXTwitter,\n    FaFacebookF,\n    FaLinkedinIn,\n    FaPinterestP,\n} from 'react-icons/fa6'\nimport { useNavigate } from 'react-router-dom'\n\ntype CustomerInfoFieldProps = {\n    title?: string\n    value?: string\n}\n\ntype ProfileSectionProps = {\n    data: Partial<{\n        id: string\n        img: string\n        name: string\n        email: string\n        lastOnline: number\n        personalInfo: {\n            location: string\n            title: string\n            birthday: string\n            phoneNumber: string\n            facebook: string\n            twitter: string\n            pinterest: string\n            linkedIn: string\n        }\n    }>\n}\n\nconst CustomerInfoField = ({ title, value }: CustomerInfoFieldProps) => {\n    return (\n        <div>\n            <span className=\"font-semibold\">{title}</span>\n            <p className=\"heading-text font-bold\">{value}</p>\n        </div>\n    )\n}\n\nconst ProfileSection = ({ data = {} }: ProfileSectionProps) => {\n    const navigate = useNavigate()\n\n    const [dialogOpen, setDialogOpen] = useState(false)\n\n    const handleSocialNavigate = (link: string = '') => {\n        window.open(`https://${link}`, '_blank', 'rel=noopener noreferrer')\n    }\n\n    const handleDialogClose = () => {\n        setDialogOpen(false)\n    }\n\n    const handleDialogOpen = () => {\n        setDialogOpen(true)\n    }\n\n    const handleDelete = () => {\n        setDialogOpen(false)\n        navigate('/concepts/customers/customer-list')\n        toast.push(\n            <Notification title={'Successfully Deleted'} type=\"success\">\n                Customer successfuly deleted\n            </Notification>,\n        )\n    }\n\n    const handleSendMessage = () => {\n        navigate('/concepts/chat')\n    }\n\n    const handleEdit = () => {\n        navigate(`/concepts/customers/customer-edit/${data.id}`)\n    }\n\n    return (\n        <Card className=\"w-full\">\n            <div className=\"flex justify-end\">\n                <Tooltip title=\"Edit customer\">\n                    <button\n                        className=\"close-button button-press-feedback\"\n                        type=\"button\"\n                        onClick={handleEdit}\n                    >\n                        <HiPencil />\n                    </button>\n                </Tooltip>\n            </div>\n            <div className=\"flex flex-col xl:justify-between h-full 2xl:min-w-[360px] mx-auto\">\n                <div className=\"flex xl:flex-col items-center gap-4 mt-6\">\n                    <Avatar size={90} shape=\"circle\" src={data.img} />\n                    <h4 className=\"font-bold\">{data.name}</h4>\n                </div>\n                <div className=\"grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-1 gap-y-7 gap-x-4 mt-10\">\n                    <CustomerInfoField title=\"Email\" value={data.email} />\n                    <CustomerInfoField\n                        title=\"Phone\"\n                        value={data.personalInfo?.phoneNumber}\n                    />\n                    <CustomerInfoField\n                        title=\"Date of birth\"\n                        value={data.personalInfo?.birthday}\n                    />\n                    <CustomerInfoField\n                        title=\"Last Online\"\n                        value={dayjs\n                            .unix(data.lastOnline as number)\n                            .format('DD MMM YYYY hh:mm A')}\n                    />\n                    <div className=\"mb-7\">\n                        <span>Social</span>\n                        <div className=\"flex mt-4 gap-2\">\n                            <Button\n                                size=\"sm\"\n                                icon={\n                                    <FaFacebookF className=\"text-[#2259f2]\" />\n                                }\n                                onClick={() =>\n                                    handleSocialNavigate(\n                                        data.personalInfo?.facebook,\n                                    )\n                                }\n                            />\n                            <Button\n                                size=\"sm\"\n                                icon={\n                                    <FaXTwitter className=\"text-black dark:text-white\" />\n                                }\n                                onClick={() =>\n                                    handleSocialNavigate(\n                                        data.personalInfo?.twitter,\n                                    )\n                                }\n                            />\n                            <Button\n                                size=\"sm\"\n                                icon={\n                                    <FaLinkedinIn className=\"text-[#155fb8]\" />\n                                }\n                                onClick={() =>\n                                    handleSocialNavigate(\n                                        data.personalInfo?.linkedIn,\n                                    )\n                                }\n                            />\n                            <Button\n                                size=\"sm\"\n                                icon={\n                                    <FaPinterestP className=\"text-[#df0018]\" />\n                                }\n                                onClick={() =>\n                                    handleSocialNavigate(\n                                        data.personalInfo?.pinterest,\n                                    )\n                                }\n                            />\n                        </div>\n                    </div>\n                </div>\n                <div className=\"flex flex-col gap-4\">\n                    <Button block variant=\"solid\" onClick={handleSendMessage}>\n                        Send Messsage\n                    </Button>\n                    <Button\n                        block\n                        customColorClass={() =>\n                            'text-error hover:border-error hover:ring-1 ring-error hover:text-error'\n                        }\n                        icon={<HiOutlineTrash />}\n                        onClick={handleDialogOpen}\n                    >\n                        Delete\n                    </Button>\n                </div>\n                <ConfirmDialog\n                    isOpen={dialogOpen}\n                    type=\"danger\"\n                    title=\"Delete customer\"\n                    onClose={handleDialogClose}\n                    onRequestClose={handleDialogClose}\n                    onCancel={handleDialogClose}\n                    onConfirm={handleDelete}\n                >\n                    <p>\n                        Are you sure you want to delete this customer? All\n                        record related to this customer will be deleted as well.\n                        This action cannot be undone.\n                    </p>\n                </ConfirmDialog>\n            </div>\n        </Card>\n    )\n}\n\nexport default ProfileSection\n"],"names":["CustomerInfoField","title","value","jsx","ProfileSection","data","navigate","useNavigate","dialogOpen","setDialogOpen","useState","handleSocialNavigate","link","handleDialogClose","handleDialogOpen","handleDelete","toast","Notification","handleSendMessage","jsxs","Card","Tooltip","HiPencil","Avatar","_a","_b","dayjs","Button","FaFacebookF","FaXTwitter","FaLinkedinIn","FaPinterestP","HiOutlineTrash","ConfirmDialog"],"mappings":"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"}
+{"version":3,"file":"ProfileSection.js","sources":["../../../../../../lib/@ecme/views/concepts/customers/CustomerDetails/ProfileSection.tsx"],"sourcesContent":["import { useState } from 'react'\nimport Card from '@/components/ui/Card'\nimport Button from '@/components/ui/Button'\nimport Avatar from '@/components/ui/Avatar/Avatar'\nimport Notification from '@/components/ui/Notification'\nimport Tooltip from '@/components/ui/Tooltip'\nimport toast from '@/components/ui/toast'\nimport ConfirmDialog from '@/components/shared/ConfirmDialog'\nimport dayjs from 'dayjs'\nimport { HiPencil, HiOutlineTrash } from 'react-icons/hi'\nimport {\n    FaXTwitter,\n    FaFacebookF,\n    FaLinkedinIn,\n    FaPinterestP,\n} from 'react-icons/fa6'\nimport { useNavigate } from 'react-router-dom'\n\ntype CustomerInfoFieldProps = {\n    title?: string\n    value?: string\n}\n\ntype ProfileSectionProps = {\n    data: Partial<{\n        id: string\n        img: string\n        name: string\n        email: string\n        lastOnline: number\n        personalInfo: {\n            location: string\n            title: string\n            birthday: string\n            phoneNumber: string\n            facebook: string\n            twitter: string\n            pinterest: string\n            linkedIn: string\n        }\n    }>\n}\n\nconst CustomerInfoField = ({ title, value }: CustomerInfoFieldProps) => {\n    return (\n        <div>\n            <span className=\"font-semibold\">{title}</span>\n            <p className=\"heading-text font-bold\">{value}</p>\n        </div>\n    )\n}\n\nconst ProfileSection = ({ data = {} }: ProfileSectionProps) => {\n    const navigate = useNavigate()\n\n    const [dialogOpen, setDialogOpen] = useState(false)\n\n    const handleSocialNavigate = (link: string = '') => {\n        window.open(`https://${link}`, '_blank', 'rel=noopener noreferrer')\n    }\n\n    const handleDialogClose = () => {\n        setDialogOpen(false)\n    }\n\n    const handleDialogOpen = () => {\n        setDialogOpen(true)\n    }\n\n    const handleDelete = () => {\n        setDialogOpen(false)\n        navigate('/concepts/customers/customer-list')\n        toast.push(\n            <Notification title={'Successfully Deleted'} type=\"success\">\n                Customer successfuly deleted\n            </Notification>,\n        )\n    }\n\n    const handleSendMessage = () => {\n        navigate('/concepts/chat')\n    }\n\n    const handleEdit = () => {\n        navigate(`/concepts/customers/customer-edit/${data.id}`)\n    }\n\n    return (\n        <Card className=\"w-full\">\n            <div className=\"flex justify-end\">\n                <Tooltip title=\"Edit customer\">\n                    <button\n                        className=\"close-button button-press-feedback\"\n                        type=\"button\"\n                        onClick={handleEdit}\n                    >\n                        <HiPencil />\n                    </button>\n                </Tooltip>\n            </div>\n            <div className=\"flex flex-col xl:justify-between h-full 2xl:min-w-[360px] mx-auto\">\n                <div className=\"flex xl:flex-col items-center gap-4 mt-6\">\n                    <Avatar size={90} shape=\"circle\" src={data.img} />\n                    <h4 className=\"font-bold\">{data.name}</h4>\n                </div>\n                <div className=\"grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-1 gap-y-7 gap-x-4 mt-10\">\n                    <CustomerInfoField title=\"Email\" value={data.email} />\n                    <CustomerInfoField\n                        title=\"Phone\"\n                        value={data.personalInfo?.phoneNumber}\n                    />\n                    <CustomerInfoField\n                        title=\"Date of birth\"\n                        value={data.personalInfo?.birthday}\n                    />\n                    <CustomerInfoField\n                        title=\"Last Online\"\n                        value={dayjs\n                            .unix(data.lastOnline as number)\n                            .format('DD MMM YYYY hh:mm A')}\n                    />\n                    <div className=\"mb-7\">\n                        <span>Social</span>\n                        <div className=\"flex mt-4 gap-2\">\n                            <Button\n                                size=\"sm\"\n                                icon={\n                                    <FaFacebookF className=\"text-[#2259f2]\" />\n                                }\n                                onClick={() =>\n                                    handleSocialNavigate(\n                                        data.personalInfo?.facebook,\n                                    )\n                                }\n                            />\n                            <Button\n                                size=\"sm\"\n                                icon={\n                                    <FaXTwitter className=\"text-black dark:text-white\" />\n                                }\n                                onClick={() =>\n                                    handleSocialNavigate(\n                                        data.personalInfo?.twitter,\n                                    )\n                                }\n                            />\n                            <Button\n                                size=\"sm\"\n                                icon={\n                                    <FaLinkedinIn className=\"text-[#155fb8]\" />\n                                }\n                                onClick={() =>\n                                    handleSocialNavigate(\n                                        data.personalInfo?.linkedIn,\n                                    )\n                                }\n                            />\n                            <Button\n                                size=\"sm\"\n                                icon={\n                                    <FaPinterestP className=\"text-[#df0018]\" />\n                                }\n                                onClick={() =>\n                                    handleSocialNavigate(\n                                        data.personalInfo?.pinterest,\n                                    )\n                                }\n                            />\n                        </div>\n                    </div>\n                </div>\n                <div className=\"flex flex-col gap-4\">\n                    <Button block variant=\"solid\" onClick={handleSendMessage}>\n                        Send Messsage\n                    </Button>\n                    <Button\n                        block\n                        customColorClass={() =>\n                            'text-error hover:border-error hover:ring-1 ring-error hover:text-error'\n                        }\n                        icon={<HiOutlineTrash />}\n                        onClick={handleDialogOpen}\n                    >\n                        Delete\n                    </Button>\n                </div>\n                <ConfirmDialog\n                    isOpen={dialogOpen}\n                    type=\"danger\"\n                    title=\"Delete customer\"\n                    onClose={handleDialogClose}\n                    onRequestClose={handleDialogClose}\n                    onCancel={handleDialogClose}\n                    onConfirm={handleDelete}\n                >\n                    <p>\n                        Are you sure you want to delete this customer? All\n                        record related to this customer will be deleted as well.\n                        This action cannot be undone.\n                    </p>\n                </ConfirmDialog>\n            </div>\n        </Card>\n    )\n}\n\nexport default ProfileSection\n"],"names":["CustomerInfoField","title","value","jsx","ProfileSection","data","navigate","useNavigate","dialogOpen","setDialogOpen","useState","handleSocialNavigate","link","handleDialogClose","handleDialogOpen","handleDelete","toast","Notification","handleSendMessage","jsxs","Card","Tooltip","HiPencil","Avatar","dayjs","Button","FaFacebookF","FaXTwitter","FaLinkedinIn","FaPinterestP","HiOutlineTrash","ConfirmDialog"],"mappings":"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"}