@homefile/components-v2 2.49.1 → 2.49.2

package/dist/components/partner/customers/PartnerCustomerCard.d.ts

@@ -1,2 +1,2 @@
 import { PartnerCustomerCardI } from '../../../interfaces';
-export declare const PartnerCustomerCard: ({ addressLines, customerName, display, footerActionLabel, imageAlt, imageSrc, onFooterActionClick, statusColor, statusLabel, }: PartnerCustomerCardI) => import("react/jsx-runtime").JSX.Element;
+export declare const PartnerCustomerCard: ({ addressLines, customerName, display, footerActionLabel, imageAlt, imageSrc, onCardClick, onFooterActionClick, statusColor, statusLabel, }: PartnerCustomerCardI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/partner/customers/PartnerCustomerCard.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Container, Flex, IconButton, Image, Stack, Text, } from '@chakra-ui/react';
 import { House1 } from '../../../assets/images';
 import { TicketBookmark } from '../../../components';
-export const PartnerCustomerCard = ({ addressLines, customerName, display = 'grid', footerActionLabel, imageAlt, imageSrc, onFooterActionClick, statusColor, statusLabel, }) => {
+export const PartnerCustomerCard = ({ addressLines, customerName, display = 'grid', footerActionLabel, imageAlt, imageSrc, onCardClick, onFooterActionClick, statusColor, statusLabel, }) => {
     const isListDisplay = display === 'list';
     const dividerColor = 'lightBlue.2';
     const cardWidth = isListDisplay ? '100%' : '180px';
@@ -15,7 +15,13 @@ export const PartnerCustomerCard = ({ addressLines, customerName, display = 'gri
     const renderStatus = () => (_jsxs(Flex, { align: "center", gap: "2", p: "2", children: [_jsx(Box, { boxSize: "10px", borderRadius: "full", bg: customerStatusColor, flexShrink: 0 }), _jsx(Text, { fontSize: "xs", fontWeight: "medium", textTransform: "uppercase", children: customerStatusLabel })] }));
     const renderAddress = () => (_jsx(Stack, { spacing: "0.5", children: customerAddressLines.map((line) => (_jsx(Text, { fontFamily: "secondary", fontSize: "sm", lineHeight: "1.2", children: line }, line))) }));
     if (isListDisplay) {
-        return (_jsx(Container, { variant: "launchpad", w: cardWidth, maxW: "none", mx: "0", overflow: "hidden", bg: "neutral.white", children: _jsxs(Flex, { direction: { base: 'column', md: 'row' }, align: "stretch", children: [_jsx(Box, { minW: { base: '100%', md: '140px' }, borderBottomWidth: { base: '1px', md: '0' }, borderBottomStyle: "solid", borderRightWidth: { base: '0', md: '1px' }, borderRightStyle: "solid", borderBottomColor: dividerColor, borderRightColor: dividerColor, children: renderStatus() }), _jsx(Box, { minW: { base: '100%', md: '140px' }, borderBottomWidth: { base: '1px', md: '0' }, borderBottomStyle: "solid", borderRightWidth: { base: '0', md: '1px' }, borderRightStyle: "solid", borderBottomColor: dividerColor, borderRightColor: dividerColor, children: _jsx(Image, { src: imageSource, alt: imageAlternativeText, h: { base: '160px', md: '88px' }, w: "100%", objectFit: "cover" }) }), _jsxs(Stack, { spacing: "1", p: "base", flex: "1", justify: "center", minW: "0", children: [_jsx(Text, { textTransform: "uppercase", fontWeight: "medium", children: customerTitle }), renderAddress()] }), _jsx(Flex, { p: "base", align: "center", justify: "center", borderTopWidth: { base: '1px', md: '0' }, borderTopStyle: "solid", borderLeftWidth: { base: '0', md: '1px' }, borderLeftStyle: "solid", borderTopColor: dividerColor, borderLeftColor: dividerColor, minW: { base: '100%', md: '64px' }, children: _jsx(IconButton, { "aria-label": footerActionLabel !== null && footerActionLabel !== void 0 ? footerActionLabel : 'Save customer', variant: "icon", width: "fit-content", onClick: onFooterActionClick, children: _jsx(TicketBookmark, { boxSize: "5" }) }) })] }) }));
+        return (_jsx(Container, { variant: "launchpad", w: cardWidth, maxW: "none", mx: "0", overflow: "hidden", bg: "neutral.white", cursor: onCardClick ? 'pointer' : 'default', onClick: onCardClick, children: _jsxs(Flex, { direction: { base: 'column', md: 'row' }, align: "stretch", children: [_jsx(Box, { minW: { base: '100%', md: '140px' }, borderBottomWidth: { base: '1px', md: '0' }, borderBottomStyle: "solid", borderRightWidth: { base: '0', md: '1px' }, borderRightStyle: "solid", borderBottomColor: dividerColor, borderRightColor: dividerColor, children: renderStatus() }), _jsx(Box, { minW: { base: '100%', md: '140px' }, borderBottomWidth: { base: '1px', md: '0' }, borderBottomStyle: "solid", borderRightWidth: { base: '0', md: '1px' }, borderRightStyle: "solid", borderBottomColor: dividerColor, borderRightColor: dividerColor, children: _jsx(Image, { src: imageSource, alt: imageAlternativeText, h: { base: '160px', md: '88px' }, w: "100%", objectFit: "cover" }) }), _jsxs(Stack, { spacing: "1", p: "base", flex: "1", justify: "center", minW: "0", children: [_jsx(Text, { textTransform: "uppercase", fontWeight: "medium", children: customerTitle }), renderAddress()] }), _jsx(Flex, { p: "base", align: "center", justify: "center", borderTopWidth: { base: '1px', md: '0' }, borderTopStyle: "solid", borderLeftWidth: { base: '0', md: '1px' }, borderLeftStyle: "solid", borderTopColor: dividerColor, borderLeftColor: dividerColor, minW: { base: '100%', md: '64px' }, children: onFooterActionClick ? (_jsx(IconButton, { "aria-label": footerActionLabel !== null && footerActionLabel !== void 0 ? footerActionLabel : 'Save customer', variant: "icon", width: "fit-content", onClick: (event) => {
+                                event.stopPropagation();
+                                onFooterActionClick();
+                            }, children: _jsx(TicketBookmark, { boxSize: "5" }) })) : null })] }) }));
     }
-    return (_jsxs(Container, { variant: "launchpad", w: cardWidth, maxW: "none", mx: "0", overflow: "hidden", bg: "neutral.white", children: [renderStatus(), _jsx(Image, { src: imageSource, alt: imageAlternativeText, h: "90px", w: "100%", objectFit: "cover" }), _jsxs(Stack, { spacing: "1", p: "base", borderBottom: "1px solid", borderColor: dividerColor, children: [_jsx(Text, { textTransform: "uppercase", fontWeight: "medium", children: customerTitle }), renderAddress()] }), _jsx(Flex, { h: "40px", p: "base", align: "center", justify: "space-between", children: _jsx(IconButton, { "aria-label": footerActionLabel !== null && footerActionLabel !== void 0 ? footerActionLabel : 'Save customer', variant: "icon", width: "fit-content", onClick: onFooterActionClick, children: _jsx(TicketBookmark, { boxSize: "5" }) }) })] }));
+    return (_jsxs(Container, { variant: "launchpad", w: cardWidth, maxW: "none", mx: "0", overflow: "hidden", bg: "neutral.white", cursor: onCardClick ? 'pointer' : 'default', onClick: onCardClick, children: [renderStatus(), _jsx(Image, { src: imageSource, alt: imageAlternativeText, h: "90px", w: "100%", objectFit: "cover" }), _jsxs(Stack, { spacing: "1", p: "base", borderBottom: "1px solid", borderColor: dividerColor, children: [_jsx(Text, { textTransform: "uppercase", fontWeight: "medium", children: customerTitle }), renderAddress()] }), _jsx(Flex, { h: "40px", p: "base", align: "center", justify: "space-between", children: onFooterActionClick && (_jsx(IconButton, { "aria-label": footerActionLabel !== null && footerActionLabel !== void 0 ? footerActionLabel : 'Save customer', variant: "icon", width: "fit-content", onClick: (event) => {
+                        event.stopPropagation();
+                        onFooterActionClick();
+                    }, children: _jsx(TicketBookmark, { boxSize: "5" }) })) })] }));
 };

package/dist/components/partner/serviceTickets/PartnerServiceTicketCard.d.ts

@@ -1,2 +1,2 @@
 import { PartnerServiceTicketCardI } from '../../../interfaces';
-export declare const PartnerServiceTicketCard: ({ customerName, display, description, footerActionLabel, headerLabel, infoBackground, meta, onFooterActionClick, }: PartnerServiceTicketCardI) => import("react/jsx-runtime").JSX.Element;
+export declare const PartnerServiceTicketCard: ({ customerName, display, description, footerActionLabel, headerLabel, infoBackground, meta, onCardClick, onFooterActionClick, }: PartnerServiceTicketCardI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/partner/serviceTickets/PartnerServiceTicketCard.js

@@ -1,14 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Container, Flex, Grid, IconButton, Stack, Text, } from '@chakra-ui/react';
 import { TicketBookmark } from '../../../components';
-export const PartnerServiceTicketCard = ({ customerName, display = 'grid', description, footerActionLabel, headerLabel, infoBackground = '#e6ddf1', meta, onFooterActionClick, }) => {
+export const PartnerServiceTicketCard = ({ customerName, display = 'grid', description, footerActionLabel, headerLabel, infoBackground = '#e6ddf1', meta, onCardClick, onFooterActionClick, }) => {
     const isListDisplay = display === 'list';
     const dividerColor = 'lightBlue.2';
     const cardWidth = isListDisplay ? '100%' : '180px';
     const renderMeta = () => (_jsx(Box, { bg: infoBackground, p: "base", minW: { base: '100%', md: '220px' }, children: meta.map(({ label, value }) => (_jsxs(Grid, { templateColumns: "40% 60%", gap: "0", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "xxs", textTransform: "uppercase", lineHeight: "1.4", children: label }), _jsx(Text, { fontFamily: "secondary", fontSize: "xxs", fontWeight: "bold", textTransform: "uppercase", lineHeight: "1.4", children: value })] }, label))) }));
     const renderBody = () => (_jsxs(Stack, { spacing: "1", p: "base", borderBottom: "1px solid", borderColor: dividerColor, flex: "1", justify: "center", children: [_jsx(Text, { textTransform: "uppercase", fontWeight: "medium", children: customerName }), _jsx(Text, { fontFamily: "secondary", fontSize: "sm", lineHeight: "1.2", children: description })] }));
     if (isListDisplay) {
-        return (_jsx(Container, { variant: "launchpad", w: cardWidth, maxW: "none", mx: "0", overflow: "hidden", bg: "neutral.white", children: _jsxs(Flex, { direction: { base: 'column', md: 'row' }, align: "stretch", children: [_jsx(Flex, { p: "2", align: "center", minW: { base: '100%', md: '130px' }, borderBottomWidth: { base: '1px', md: '0' }, borderBottomStyle: "solid", borderRightWidth: { base: '0', md: '1px' }, borderRightStyle: "solid", borderBottomColor: dividerColor, borderRightColor: dividerColor, children: _jsx(Text, { fontSize: "xs", fontWeight: "medium", textTransform: "uppercase", children: headerLabel }) }), renderMeta(), _jsxs(Stack, { spacing: "1", p: "base", flex: "1", justify: "center", minW: "0", children: [_jsx(Text, { textTransform: "uppercase", fontWeight: "medium", children: customerName }), _jsx(Text, { fontFamily: "secondary", fontSize: "sm", lineHeight: "1.2", children: description })] }), _jsx(Flex, { p: "base", align: "center", justify: "center", borderTopWidth: { base: '1px', md: '0' }, borderTopStyle: "solid", borderLeftWidth: { base: '0', md: '1px' }, borderLeftStyle: "solid", borderTopColor: dividerColor, borderLeftColor: dividerColor, minW: { base: '100%', md: '64px' }, children: _jsx(IconButton, { "aria-label": footerActionLabel !== null && footerActionLabel !== void 0 ? footerActionLabel : 'Save ticket', variant: "icon", width: "fit-content", onClick: onFooterActionClick, children: _jsx(TicketBookmark, { boxSize: "5" }) }) })] }) }));
+        return (_jsx(Container, { variant: "launchpad", w: cardWidth, maxW: "none", mx: "0", overflow: "hidden", bg: "neutral.white", cursor: onCardClick ? 'pointer' : 'default', onClick: onCardClick, children: _jsxs(Flex, { direction: { base: 'column', md: 'row' }, align: "stretch", children: [_jsx(Flex, { p: "2", align: "center", minW: { base: '100%', md: '130px' }, borderBottomWidth: { base: '1px', md: '0' }, borderBottomStyle: "solid", borderRightWidth: { base: '0', md: '1px' }, borderRightStyle: "solid", borderBottomColor: dividerColor, borderRightColor: dividerColor, children: _jsx(Text, { fontSize: "xs", fontWeight: "medium", textTransform: "uppercase", children: headerLabel }) }), renderMeta(), _jsxs(Stack, { spacing: "1", p: "base", flex: "1", justify: "center", minW: "0", children: [_jsx(Text, { textTransform: "uppercase", fontWeight: "medium", children: customerName }), _jsx(Text, { fontFamily: "secondary", fontSize: "sm", lineHeight: "1.2", children: description })] }), _jsx(Flex, { p: "base", align: "center", justify: "center", borderTopWidth: { base: '1px', md: '0' }, borderTopStyle: "solid", borderLeftWidth: { base: '0', md: '1px' }, borderLeftStyle: "solid", borderTopColor: dividerColor, borderLeftColor: dividerColor, minW: { base: '100%', md: '64px' }, children: onFooterActionClick && (_jsx(IconButton, { "aria-label": footerActionLabel !== null && footerActionLabel !== void 0 ? footerActionLabel : 'Save ticket', variant: "icon", width: "fit-content", onClick: (event) => {
+                                event.stopPropagation();
+                                onFooterActionClick();
+                            }, children: _jsx(TicketBookmark, { boxSize: "5" }) })) })] }) }));
     }
-    return (_jsxs(Container, { variant: "launchpad", w: cardWidth, maxW: "none", mx: "0", overflow: "hidden", bg: "neutral.white", children: [_jsx(Box, { p: "2", children: _jsx(Text, { fontSize: "xs", fontWeight: "medium", textTransform: "uppercase", children: headerLabel }) }), renderMeta(), renderBody(), _jsx(Flex, { h: "40px", p: "base", align: "center", justify: "space-between", children: _jsx(IconButton, { "aria-label": footerActionLabel !== null && footerActionLabel !== void 0 ? footerActionLabel : 'Save ticket', variant: "icon", width: "fit-content", onClick: onFooterActionClick, children: _jsx(TicketBookmark, { boxSize: "5" }) }) })] }));
+    return (_jsxs(Container, { variant: "launchpad", w: cardWidth, maxW: "none", mx: "0", overflow: "hidden", bg: "neutral.white", cursor: onCardClick ? 'pointer' : 'default', onClick: onCardClick, children: [_jsx(Box, { p: "2", children: _jsx(Text, { fontSize: "xs", fontWeight: "medium", textTransform: "uppercase", children: headerLabel }) }), renderMeta(), renderBody(), _jsx(Flex, { h: "40px", p: "base", align: "center", justify: "space-between", children: onFooterActionClick && (_jsx(IconButton, { "aria-label": footerActionLabel !== null && footerActionLabel !== void 0 ? footerActionLabel : 'Save ticket', variant: "icon", width: "fit-content", onClick: (event) => {
+                        event.stopPropagation();
+                        onFooterActionClick();
+                    }, children: _jsx(TicketBookmark, { boxSize: "5" }) })) })] }));
 };

package/dist/interfaces/partner/customers/PartnerCustomerCard.interface.d.ts

@@ -6,6 +6,7 @@ export interface PartnerCustomerCardI {
     footerActionLabel?: string;
     imageAlt?: string;
     imageSrc?: string;
+    onCardClick?: () => void;
     onFooterActionClick?: () => void;
     statusColor?: string;
     statusLabel?: string;

package/dist/interfaces/partner/serviceTickets/PartnerServiceTicketCard.interface.d.ts

@@ -12,6 +12,7 @@ export interface PartnerServiceTicketCardI {
     headerLabel: string;
     infoBackground?: string;
     meta: PartnerServiceTicketMetaI[];
+    onCardClick?: () => void;
     onFooterActionClick?: () => void;
     onStatusChange?: (value: string) => void;
     statusOptions?: SelectItemI<string>[];

package/dist/stories/partner/PartnerCustomersWrapper.stories.js

@@ -28,6 +28,7 @@ const customers = [
         statusLabel: 'Dormant',
         statusColor: 'lightBlue.8',
         addressLines: ['3273 S First Street', 'Austin, TX 78742'],
+        onCardClick: action('onCardClick'),
         onFooterActionClick: action('onFooterActionClick'),
     },
     {
@@ -35,6 +36,7 @@ const customers = [
         statusLabel: 'Active',
         statusColor: 'green.2',
         addressLines: ['3273 S First Street', 'Austin, TX 78742'],
+        onCardClick: action('onCardClick'),
         onFooterActionClick: action('onFooterActionClick'),
     },
     {
@@ -42,6 +44,7 @@ const customers = [
         statusLabel: 'Cancelled',
         statusColor: 'orange.2',
         addressLines: ['3273 S First Street', 'Austin, TX 78742'],
+        onCardClick: action('onCardClick'),
         onFooterActionClick: action('onFooterActionClick'),
     },
     {
@@ -49,6 +52,7 @@ const customers = [
         statusLabel: 'New',
         statusColor: 'violet.1',
         addressLines: ['3273 S First Street', 'Austin, TX 78742'],
+        onCardClick: action('onCardClick'),
         onFooterActionClick: action('onFooterActionClick'),
     },
 ];

package/dist/stories/partner/PartnerServiceTicketsWrapper.stories.js

@@ -42,13 +42,13 @@ export const PartnerServiceTicketsWrapperComponent = (args) => {
                                         { label: 'Customer', value: 'New Customer' },
                                         { label: 'Received', value: '9:30 AM' },
                                         { label: 'ID', value: '553HMF 8422324-D' },
-                                    ], onFooterActionClick: action('onFooterActionClick') }) }) }), _jsx(WrapItem, { w: isListDisplay ? '100%' : 'auto', children: _jsx(Box, { w: isListDisplay ? '100%' : 'auto', children: _jsx(PartnerServiceTicketCard, { display: displayType, customerName: "Jane Smith", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do", headerLabel: "Support", infoBackground: "#efdaf6", meta: [
+                                    ], onCardClick: action('onCardClick'), onFooterActionClick: action('onFooterActionClick') }) }) }), _jsx(WrapItem, { w: isListDisplay ? '100%' : 'auto', children: _jsx(Box, { w: isListDisplay ? '100%' : 'auto', children: _jsx(PartnerServiceTicketCard, { display: displayType, customerName: "Jane Smith", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do", headerLabel: "Support", infoBackground: "#efdaf6", meta: [
                                         { label: 'Customer', value: 'Existing' },
                                         { label: 'Received', value: '9:30 AM' },
                                         { label: 'ID', value: '553HMF 8422324-D' },
-                                    ], onFooterActionClick: action('onFooterActionClick') }) }) }), _jsx(WrapItem, { w: isListDisplay ? '100%' : 'auto', children: _jsx(Box, { w: isListDisplay ? '100%' : 'auto', children: _jsx(PartnerServiceTicketCard, { display: displayType, customerName: "Michael Smith", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do", headerLabel: "Support", infoBackground: "#f5e3d7", meta: [
+                                    ], onCardClick: action('onCardClick'), onFooterActionClick: action('onFooterActionClick') }) }) }), _jsx(WrapItem, { w: isListDisplay ? '100%' : 'auto', children: _jsx(Box, { w: isListDisplay ? '100%' : 'auto', children: _jsx(PartnerServiceTicketCard, { display: displayType, customerName: "Michael Smith", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do", headerLabel: "Support", infoBackground: "#f5e3d7", meta: [
                                         { label: 'Customer', value: 'Existing' },
                                         { label: 'Received', value: '9:30 AM' },
                                         { label: 'ID', value: '553HMF 8422324-D' },
-                                    ], onFooterActionClick: action('onFooterActionClick') }) }) })] })] })) }));
+                                    ], onCardClick: action('onCardClick'), onFooterActionClick: action('onFooterActionClick') }) }) })] })] })) }));
 };

package/dist/stories/partner/serviceTickets/PartnerServiceTicketCard.stories.js

@@ -16,6 +16,7 @@ export default {
             { label: 'Received', value: '9:30 AM' },
             { label: 'ID', value: '553HMF 8422324-D' },
         ],
+        onCardClick: action('onCardClick'),
         onFooterActionClick: action('onFooterActionClick'),
     },
 };

package/package.json

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