@homefile/components-v2 2.49.3 → 2.49.5

package/dist/assets/locales/en/index.json

@@ -524,7 +524,8 @@
     "forwardTo": "Simply forward images & paperwork to ",
     "forwardTo2": " or add a receipt image below.",
     "from": "From: ",
-    "message": "Message"
+    "message": "Message",
+    "senderDetails": "Customer Details"
   },
   "launchpad": {
     "menu": {

package/dist/components/buttons/LeftButton.js

@@ -14,5 +14,5 @@ import { Button } from '@chakra-ui/react';
 import { Plus } from '../../components';
 export const LeftButton = (_a) => {
     var { bgColor = 'green.1', onClick, height = '1.75rem', label } = _a, props = __rest(_a, ["bgColor", "onClick", "height", "label"]);
-    return (_jsxs(Button, Object.assign({}, props, { h: height, variant: "leftRounded", bg: bgColor, onClick: onClick, px: "1rem", children: [_jsx(Plus, {}), label] })));
+    return (_jsxs(Button, Object.assign({}, props, { h: height, variant: "leftRounded", bg: bgColor, onClick: onClick, px: "1rem", children: [_jsx(Plus, { size: "1em" }), label] })));
 };

package/dist/components/icons/Plus.d.ts

@@ -1,4 +1,4 @@
 export declare const Plus: ({ stroke, size }: {
-    stroke?: string | undefined;
-    size?: number | undefined;
+    stroke?: string;
+    size?: string | number;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inboxTile/panel/MessageCard.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { t } from 'i18next';
-import { Avatar, Box, Center, chakra, Container, Divider, Flex, Stack, Text, } from '@chakra-ui/react';
+import { Avatar, Box, Center, Container, Divider, Flex, Stack, Text, } from '@chakra-ui/react';
 import { ChatBubble } from '../../../assets/images';
 import { TextBadge } from '../../../components';
-import { formatDateWithAt } from '../../../utils';
+import { formatLongDateWithAt } from '../../../utils';
 export const MessageCard = ({ message, onClick, variant = 'inbox', }) => {
     const { currentUser, from, subject, date, isNew, chatReplies, description = '', } = message;
-    const formattedDate = formatDateWithAt({ date });
+    const formattedDate = formatLongDateWithAt({ date });
     const showChatBubble = Number(chatReplies === null || chatReplies === void 0 ? void 0 : chatReplies.length) > 0;
     const isInbox = variant === 'inbox';
     const isCurrentUser = (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userName) === from;
-    return (_jsxs(Flex, { gap: "base", children: [!isCurrentUser && !isInbox && (_jsx(Avatar, { size: "sm", name: from, bg: "blue.4", fontWeight: "bold", color: "neutral.white" })), _jsx(Container, { as: isInbox ? 'button' : 'div', bg: isCurrentUser ? 'yellow.6' : 'neutral.white', transition: "background-color 0.3s", textAlign: "left", _hover: isInbox ? { bg: 'lightGreen.1' } : {}, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(message), children: _jsxs(Box, { children: [!isCurrentUser && (_jsxs(Flex, { justify: "space-between", align: "center", py: "1", pr: "base", pl: isNew ? '' : 'base', children: [_jsxs(Flex, { gap: "base", align: "center", position: "relative", left: isNew ? '-13px' : '', children: [isNew && isInbox && (_jsx(TextBadge, { text: "New", showAnimation: false, bgColor: "violet.1" })), _jsxs(Text, { variant: "home", color: "gray.1", children: [t('inbox.from'), _jsx(chakra.span, { color: "gray.4", children: from })] })] }), _jsx(Text, { variant: "home", fontSize: "xs", children: formattedDate })] })), isInbox && _jsx(Divider, {}), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsx(Text, { variant: "home", fontWeight: "bold", children: subject }), showChatBubble && isInbox && (_jsx(Center, { backgroundImage: `url(${ChatBubble})`, backgroundRepeat: "no-repeat", backgroundSize: "contain", backgroundPosition: "bottom", w: "20px", h: "24px", children: _jsx(Text, { fontSize: "10px", color: "blue.2", fontWeight: "bold", children: chatReplies === null || chatReplies === void 0 ? void 0 : chatReplies.length }) }))] }), isInbox && (_jsx(Text, { variant: "home", noOfLines: 3, textOverflow: "ellipsis", dangerouslySetInnerHTML: {
+    return (_jsxs(Flex, { gap: "base", children: [!isCurrentUser && !isInbox && (_jsx(Avatar, { size: "sm", name: from, bg: "blue.4", fontWeight: "bold", color: "neutral.white" })), _jsx(Container, { as: isInbox ? 'button' : 'div', bg: isCurrentUser ? 'yellow.6' : 'neutral.white', transition: "background-color 0.3s", textAlign: "left", _hover: isInbox ? { bg: 'lightGreen.1' } : {}, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(message), children: _jsxs(Box, { children: [!isCurrentUser && (_jsx(Flex, { justify: "space-between", align: "center", py: "1", pr: "base", pl: isNew ? '' : 'base', children: _jsxs(Flex, { gap: "base", align: "center", position: "relative", left: isNew ? '-13px' : '', children: [isNew && isInbox && (_jsx(TextBadge, { text: "New", showAnimation: false, bgColor: "violet.1" })), _jsx(Text, { variant: "home", fontSize: "xs", children: formattedDate })] }) })), isInbox && _jsx(Divider, {}), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsx(Text, { variant: "home", fontWeight: "bold", children: subject }), showChatBubble && isInbox && (_jsx(Center, { backgroundImage: `url(${ChatBubble})`, backgroundRepeat: "no-repeat", backgroundSize: "contain", backgroundPosition: "bottom", w: "20px", h: "24px", children: _jsx(Text, { fontSize: "10px", color: "blue.2", fontWeight: "bold", children: chatReplies === null || chatReplies === void 0 ? void 0 : chatReplies.length }) }))] }), isInbox && (_jsx(Text, { variant: "home", noOfLines: 3, textOverflow: "ellipsis", dangerouslySetInnerHTML: {
                                         __html: description,
                                     } })), !isInbox && (_jsx(Text, { variant: "home", dangerouslySetInnerHTML: {
                                         __html: description,

package/dist/components/inboxTile/panel/MessageChatPanel.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { t } from 'i18next';
@@ -13,16 +22,20 @@ export const MessageChatPanel = ({ message, onBack, onClose, onReply, }) => {
     const onChange = (content) => {
         setValue(content);
     };
+    const handleReply = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        yield onReply({
+            id: (_a = message === null || message === void 0 ? void 0 : message._id) !== null && _a !== void 0 ? _a : '',
+            message: value,
+        });
+        setValue('');
+    });
     return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, title: (_a = message === null || message === void 0 ? void 0 : message.from) !== null && _a !== void 0 ? _a : '', icon: Document2 }) }), _jsxs(DrawerBody, { p: "0", children: [onBack && (_jsx(Box, { bg: "lightBlue.2", py: "2", px: "base", children: _jsx(BackCircleButton, { onClick: onBack }) })), _jsx(Stack, { spacing: "base", p: "base", pb: "4", children: (_b = message === null || message === void 0 ? void 0 : message.chatReplies) === null || _b === void 0 ? void 0 : _b.map((reply) => (_jsx(MessageCard, { message: Object.assign(Object.assign({}, reply), { currentUser: message.currentUser }), variant: "chat" }, reply._id))) })] }), _jsx(DrawerFooter, { p: "0", maxH: "400px", children: _jsx(WrapperWithShadow, { animation: up, fadeDelay: 0.2, children: _jsxs(Stack, { spacing: "base", children: [_jsx(Text, { children: t('inbox.createReply') }), _jsx(QuillEditor, { theme: "snow", value: value, modules: { toolbar }, onChange: onChange, placeholder: t('inbox.enterContent') }), _jsx(FooterButtons, { px: "0", button1: {
                                     buttonStyle: 'secondaryFooter',
                                     label: t('buttons.send'),
                                     isDisabled: Number(value.length) === 0,
                                     onClick: () => {
-                                        var _a;
-                                        return onReply({
-                                            id: (_a = message === null || message === void 0 ? void 0 : message._id) !== null && _a !== void 0 ? _a : '',
-                                            message: value,
-                                        });
+                                        void handleReply();
                                     },
                                 } })] }) }) })] }));
 };

package/dist/components/inboxTile/panel/MessagePanel.d.ts

@@ -1,2 +1,2 @@
 import { MessagePanelI } from '../../../interfaces';
-export declare const MessagePanel: ({ messages, onClick, onClose }: MessagePanelI) => import("react/jsx-runtime").JSX.Element;
+export declare const MessagePanel: ({ icon, messages, onClick, onClose, title, email, firstName, lastName, phone, address, city, state, zip, showAvatar, showHeader, onAction, actionLabel, }: MessagePanelI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inboxTile/panel/MessagePanel.js

@@ -2,11 +2,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Box, DrawerBody, DrawerContent, DrawerHeader, Stack, } from '@chakra-ui/react';
 import { Inbox } from '../../../assets/images';
-import { BaseCounter, MessageCard, PanelHeader, SelectInput, } from '../../../components';
+import { BaseCounter, MessageCard, MessageSenderCard, PanelHeader, SelectInput, } from '../../../components';
 import { useMessagePanel } from '../../../hooks';
 import { pluralize } from '../../../utils';
-export const MessagePanel = ({ messages, onClick, onClose }) => {
+export const MessagePanel = ({ icon = Inbox, messages, onClick, onClose, title = t('inbox.message'), email, firstName, lastName, phone, address, city, state, zip, showAvatar, showHeader, onAction, actionLabel, }) => {
     const { currentSort, sortedMessages, handleSelectItem, items } = useMessagePanel(messages);
     const baseCounterText = `${t('counter.showing')} ${sortedMessages.length} ${t('counter.of')} ${messages.length} ${pluralize(sortedMessages.length, t('inbox.message').toLowerCase())} `;
-    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, title: t('inbox.message'), icon: Inbox }) }), _jsx(DrawerBody, { p: "0", children: _jsxs(Stack, { spacing: "base", pb: "4", children: [_jsx(Box, { p: "base", bg: "lightBlue.2", children: _jsx(SelectInput, { handleClick: handleSelectItem, initialValue: currentSort, items: items }) }), _jsx(Box, { px: "base", children: _jsx(BaseCounter, { text: baseCounterText }) }), _jsx(Stack, { spacing: "1", pl: "26px", pr: "base", children: sortedMessages.map((message) => (_jsx(MessageCard, { message: message, onClick: onClick }, message._id))) })] }) })] }));
+    const senderCardData = {
+        email,
+        firstName,
+        lastName,
+        phone,
+        address,
+        city,
+        state,
+        zip,
+        showAvatar,
+        showHeader,
+        onAction,
+        actionLabel,
+    };
+    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, title: title, icon: icon }) }), _jsx(DrawerBody, { p: "0", children: _jsxs(Stack, { spacing: "base", children: [_jsxs(Box, { children: [_jsx(MessageSenderCard, Object.assign({}, senderCardData)), _jsx(Box, { p: "base", bg: "lightBlue.2", children: _jsx(SelectInput, { handleClick: handleSelectItem, initialValue: currentSort, items: items }) })] }), _jsx(Box, { px: "base", children: _jsx(BaseCounter, { text: baseCounterText }) }), _jsx(Stack, { spacing: "1", pl: "26px", pr: "base", children: sortedMessages.map((message) => (_jsx(MessageCard, { message: message, onClick: onClick }, message._id))) })] }) })] }));
 };

package/dist/components/inboxTile/panel/MessageSenderCard.d.ts

@@ -0,0 +1,2 @@
+import { MessageSenderCardI } from '../../../interfaces';
+export declare const MessageSenderCard: ({ address, city, email, firstName, lastName, phone, showAvatar, showHeader, state, zip, onAction, actionLabel, }: MessageSenderCardI) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/inboxTile/panel/MessageSenderCard.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Flex, Stack, Text } from '@chakra-ui/react';
+import { MessageSenderCardHeader, MessageSenderCardInfo, LeftButton, } from '../../../components';
+export const MessageSenderCard = ({ address, city, email, firstName, lastName, phone, showAvatar = true, showHeader = true, state, zip, onAction, actionLabel = '', }) => {
+    const hasData = firstName || lastName || email || phone || address || city || state || zip;
+    if (!hasData) {
+        return null;
+    }
+    return (_jsxs(Box, { position: "relative", w: "100%", children: [_jsx(Box, { bg: "lightGreen.1", p: "base", children: _jsxs(Stack, { spacing: "2", children: [showHeader && _jsx(MessageSenderCardHeader, {}), _jsx(CardBody, { address,
+                            city,
+                            email,
+                            firstName,
+                            lastName,
+                            phone,
+                            showAvatar,
+                            state,
+                            zip })] }) }), onAction && (_jsx(Box, { position: "absolute", right: "0", top: "2", children: _jsx(LeftButton, { bgColor: "blue.2", onClick: onAction, label: actionLabel, fontSize: "sm", fontWeight: "medium", gap: "1" }) }))] }));
+};
+const CardBody = ({ address, city, email, firstName, lastName, phone, showAvatar, state, zip, }) => {
+    const hasContact = Boolean(phone || email);
+    return (_jsxs(Flex, { align: "stretch", gap: "8", children: [_jsx(MessageSenderCardInfo, { address,
+                city,
+                firstName,
+                lastName,
+                state,
+                showAvatar,
+                zip }), hasContact && (_jsxs(_Fragment, { children: [_jsx(Box, { bg: "lightBlue.2", w: "1px" }), _jsxs(Stack, { spacing: "0", justify: "end", children: [phone && (_jsx(Text, { fontSize: "12px", fontFamily: "secondary", lineHeight: "15px", children: phone })), email && (_jsx(Text, { variant: "email", fontSize: "12px", fontFamily: "secondary", lineHeight: "15px", children: email }))] })] }))] }));
+};

package/dist/components/inboxTile/panel/MessageSenderCardAddress.d.ts

@@ -0,0 +1,2 @@
+import { SenderDetailsAddressI } from '../../../interfaces';
+export declare const MessageSenderCardAddress: ({ address, city, state, zip, }: SenderDetailsAddressI) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/inboxTile/panel/MessageSenderCardAddress.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, Text } from '@chakra-ui/react';
+export const MessageSenderCardAddress = ({ address, city, state, zip, }) => {
+    if (!address && !city && !state && !zip) {
+        return null;
+    }
+    return (_jsxs(Stack, { spacing: "0", minH: "full", children: [address && (_jsx(Text, { variant: "address", lineHeight: "13px", children: address })), (city || state || zip) && (_jsxs(Text, { variant: "address", lineHeight: "13px", children: [city, city && state ? ', ' : '', state, " ", zip] }))] }));
+};

package/dist/components/inboxTile/panel/MessageSenderCardHeader.d.ts

@@ -0,0 +1 @@
+export declare const MessageSenderCardHeader: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/inboxTile/panel/MessageSenderCardHeader.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Flex, Image, Text } from '@chakra-ui/react';
+import { BillingAddress } from '../../../assets/images';
+export const MessageSenderCardHeader = () => {
+    return (_jsxs(Flex, { align: "center", gap: "2", children: [_jsx(Image, { src: BillingAddress, alt: "Sender Details", h: "18px", w: "auto" }), _jsx(Text, { fontSize: "10px", textTransform: "uppercase", lineHeight: "1", children: t('inbox.senderDetails') })] }));
+};

package/dist/components/inboxTile/panel/MessageSenderCardInfo.d.ts

@@ -0,0 +1,2 @@
+import { MessageSenderCardI } from '../../../interfaces';
+export declare const MessageSenderCardInfo: ({ address, city, firstName, lastName, state, showAvatar, zip, }: MessageSenderCardI) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/inboxTile/panel/MessageSenderCardInfo.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, Flex, Box, Text } from '@chakra-ui/react';
+import { MessageSenderCardAddress } from '../../../components';
+export const MessageSenderCardInfo = ({ address, city, firstName, lastName, state, showAvatar = true, zip, }) => {
+    const name = `${firstName} ${lastName}`.trim();
+    const hasAddress = Boolean(address || city || state || zip);
+    if (!name && !hasAddress) {
+        return null;
+    }
+    return (_jsxs(Flex, { gap: "base", align: "center", children: [showAvatar && name && (_jsx(Avatar, { boxSize: "50px", borderRadius: "none", bg: "blue.4", fontWeight: "bold", color: "neutral.white", name: name })), _jsxs(Box, { children: [name && (_jsx(Text, { fontWeight: "medium", fontSize: "lg", lineHeight: "1.2", children: name })), _jsx(MessageSenderCardAddress, { address,
+                        city,
+                        state,
+                        zip })] })] }));
+};

package/dist/components/inboxTile/panel/index.d.ts

@@ -1,3 +1,7 @@
 export * from './MessageCard';
 export * from './MessageChatPanel';
 export * from './MessagePanel';
+export * from './MessageSenderCard';
+export * from './MessageSenderCardHeader';
+export * from './MessageSenderCardInfo';
+export * from './MessageSenderCardAddress';

package/dist/components/inboxTile/panel/index.js

@@ -1,3 +1,7 @@
 export * from './MessageCard';
 export * from './MessageChatPanel';
 export * from './MessagePanel';
+export * from './MessageSenderCard';
+export * from './MessageSenderCardHeader';
+export * from './MessageSenderCardInfo';
+export * from './MessageSenderCardAddress';

package/dist/interfaces/inboxTile/MessageChatPanel.interface.d.ts

@@ -5,7 +5,7 @@ interface InboxMessageReplyI {
 }
 export interface MessageChatPanelI {
     message?: InboxMessageI;
-    onReply: (props: InboxMessageReplyI) => void;
+    onReply: (props: InboxMessageReplyI) => void | Promise<void>;
     onClose: () => void;
     onBack?: () => void;
 }

package/dist/interfaces/inboxTile/MessagePanel.interface.d.ts

@@ -1,6 +1,8 @@
-import { InboxMessageI } from '../../interfaces';
-export interface MessagePanelI {
+import { InboxMessageI, MessageSenderCardI } from '../../interfaces';
+export interface MessagePanelI extends Partial<MessageSenderCardI> {
+    icon?: string;
     messages: InboxMessageI[];
+    title?: string;
     onClick: (message: InboxMessageI) => void;
     onClose: () => void;
 }

package/dist/interfaces/inboxTile/MessageSenderCard.interface.d.ts

@@ -0,0 +1,18 @@
+export interface SenderDetailsInfoI {
+    email?: string;
+    firstName?: string;
+    lastName?: string;
+    phone?: string;
+    showAvatar?: boolean;
+}
+export interface SenderDetailsAddressI {
+    address?: string;
+    city?: string;
+    state?: string;
+    zip?: string;
+}
+export interface MessageSenderCardI extends SenderDetailsInfoI, SenderDetailsAddressI {
+    onAction?: () => void;
+    actionLabel?: string;
+    showHeader?: boolean;
+}

package/dist/interfaces/inboxTile/MessageSenderCard.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/inboxTile/index.d.ts

@@ -3,3 +3,4 @@ export * from './InboxTile.interface';
 export * from './MessageCard.interface';
 export * from './MessageChatPanel.interface';
 export * from './MessagePanel.interface';
+export * from './MessageSenderCard.interface';

package/dist/interfaces/inboxTile/index.js

@@ -3,3 +3,4 @@ export * from './InboxTile.interface';
 export * from './MessageCard.interface';
 export * from './MessageChatPanel.interface';
 export * from './MessagePanel.interface';
+export * from './MessageSenderCard.interface';

package/dist/stories/inboxTile/MessagePanel.stories.js

@@ -1,13 +1,35 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MessageChatPanel, MessagePanel, RightPanel } from '../../components';
 import { action } from '@storybook/addon-actions';
 import { messagesMock } from '../../mocks';
 import { Fragment, useState } from 'react';
+import { Manager } from '../../assets/images';
 export default {
     title: 'Components/Inbox',
     component: MessagePanel,
     args: {
         messages: messagesMock,
+        title: 'Service Ticket : 422325623',
+        icon: Manager,
+        firstName: 'Michael',
+        lastName: 'Smith',
+        email: 'email.address@gmail.com',
+        phone: '555-555-1212',
+        address: '1134 South First Avenue',
+        city: 'Austin',
+        state: 'TX',
+        zip: '78732',
+        showAvatar: true,
+        showHeader: true,
     },
     decorators: [
         (Story) => (_jsx(RightPanel, { isOpen: true, onClose: action('onClose'), children: _jsx(Story, {}) })),
@@ -16,9 +38,12 @@ export default {
 export const MessagePanelComponent = (args) => {
     const [showMessageChat, setShowMessageChat] = useState(false);
     const [selectedMessage, setSelectedMessage] = useState(undefined);
+    const onReply = action('onReply');
     const handleMessageChatToggle = () => setShowMessageChat(!showMessageChat);
     return (_jsxs(Fragment, { children: [_jsx(MessagePanel, Object.assign({}, args, { onClick: (message) => {
                     setSelectedMessage(message);
                     handleMessageChatToggle();
-                } })), _jsx(RightPanel, { isOpen: showMessageChat, onClose: handleMessageChatToggle, children: _jsx(MessageChatPanel, { message: selectedMessage, onReply: action('onReply'), onClose: action('onCloseChatPanel'), onBack: handleMessageChatToggle }) })] }));
+                }, onAction: action('onAction'), actionLabel: "NOTE" })), _jsx(RightPanel, { isOpen: showMessageChat, onClose: handleMessageChatToggle, children: _jsx(MessageChatPanel, { message: selectedMessage, onReply: (reply) => __awaiter(void 0, void 0, void 0, function* () {
+                        onReply(reply);
+                    }), onClose: action('onCloseChatPanel'), onBack: handleMessageChatToggle }) })] }));
 };

package/dist/utils/Formaters.utils.d.ts

@@ -5,6 +5,7 @@ interface FormatDateI {
 }
 export declare const formatDate: ({ date, locale }: FormatDateI) => string;
 export declare const formatDateWithAt: ({ date, locale, }: FormatDateI) => string;
+export declare const formatLongDateWithAt: ({ date }: FormatDateI) => string;
 export declare const shortFormatDate: ({ date, locale, }: FormatDateI) => string;
 export declare const monthAndYearFormatDate: ({ date, locale, }: FormatDateI) => string;
 export declare const dayAndMonthFormatDate: ({ date, locale, }: FormatDateI) => string;

package/dist/utils/Formaters.utils.js

@@ -35,6 +35,14 @@ export const formatDateWithAt = ({ date, locale = 'en-US', }) => {
         .replaceAll('/', '.');
     return dateFormat + ' @ ' + timeFormat;
 };
+export const formatLongDateWithAt = ({ date }) => {
+    if (!date)
+        return '';
+    const parsedDate = new Date(date);
+    const dateFormat = format(parsedDate, 'EEEE MMM d, yyyy');
+    const timeFormat = format(parsedDate, 'h:mm a');
+    return `${dateFormat}  @${timeFormat}`;
+};
 export const shortFormatDate = ({ date, locale = 'en-US', }) => {
     if (!date)
         return '';
@@ -104,21 +112,19 @@ export const joinDayMonthYear = (value) => {
     });
 };
 export const formatISODate = (value) => {
-    const displayValue = (isValid(parseISO(value)) || isValid(new Date(value)))
+    const displayValue = isValid(parseISO(value)) || isValid(new Date(value))
         ? format(value, 'MM/dd/yyyy')
         : '';
     return displayValue;
 };
 export const toQuantity = (q) => {
-    if (typeof q === "number")
-        return Number.isFinite(q) ? q : "";
-    const cleaned = (q !== null && q !== void 0 ? q : "")
-        .toString()
-        .replace(/\D/g, ""); // remove all non-digits
+    if (typeof q === 'number')
+        return Number.isFinite(q) ? q : '';
+    const cleaned = (q !== null && q !== void 0 ? q : '').toString().replace(/\D/g, ''); // remove all non-digits
     if (!cleaned)
-        return ""; // no digits found
+        return ''; // no digits found
     const n = Number(cleaned);
-    return Number.isInteger(n) && n > 0 ? n : "";
+    return Number.isInteger(n) && n > 0 ? n : '';
 };
 export const formatCurrency = ({ country = 'en-US', currrency = 'USD', value, }) => {
     if (!value) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.49.3",
+  "version": "2.49.5",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",