@homefile/components-v2 2.23.9 → 2.23.11

package/dist/components/receipts/receipt/ReceiptDetails.d.ts

@@ -1,2 +1,4 @@
 import { ReceiptDetailsDBI } from '../../../interfaces';
-export declare const ReceiptDetails: ({ cashier, itemQuantity, paymentMethod, purchaseDate, tax, store, receiptOrigin, storePhone, total, }: ReceiptDetailsDBI) => import("react/jsx-runtime").JSX.Element;
+export declare const ReceiptDetails: ({ name, cashier, itemQuantity, paymentMethod, purchaseDate, tax, store, receiptOrigin, storePhone, total, onEdit, }: Partial<ReceiptDetailsDBI> & {
+    onEdit?: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/receipts/receipt/ReceiptDetails.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { Box, Divider, Flex, Image } from '@chakra-ui/react';
+import { Box, Divider, Flex, IconButton, Image, Text } from '@chakra-ui/react';
 import { formatDate } from '../../../utils';
-import { DetailsColumn } from '../..';
+import { DetailsColumn, Edit } from '../..';
 import { receiptOrigins } from '../../../helpers';
-export const ReceiptDetails = ({ cashier = '', itemQuantity, paymentMethod, purchaseDate, tax, store, receiptOrigin = 'homeDepot', storePhone = '', total, }) => {
+export const ReceiptDetails = ({ name, cashier = '', itemQuantity, paymentMethod, purchaseDate, tax, store, receiptOrigin = 'homeDepot', storePhone = '', total, onEdit, }) => {
     const storeImage = receiptOrigins[receiptOrigin];
     const leftLabels = t('receipts.columnLeft').split(',');
     const rightLabels = t('receipts.columnRight').split(',');
@@ -44,5 +44,5 @@ export const ReceiptDetails = ({ cashier = '', itemQuantity, paymentMethod, purc
             value: paymentMethod,
         },
     ];
-    return (_jsxs(Box, { boxShadow: "md", minW: "108px", bg: "lightBlue.2", borderBottom: "1px solid", borderColor: "lightBlue.2", children: [_jsx(Box, { w: "100%", h: "10px", bg: "lightBlue.2", overflow: "hidden", position: "relative", children: _jsxs("svg", { width: "100%", height: "8", viewBox: "0 0 100 10", preserveAspectRatio: "none", style: { display: 'block', position: 'absolute', bottom: 0, left: 0 }, children: [_jsx("defs", { children: _jsx("pattern", { id: "triangle", width: "4", height: "10", patternUnits: "userSpaceOnUse", children: _jsx("polygon", { points: "0,10 2,0 4,10", fill: "white" }) }) }), _jsx("rect", { width: "100%", height: "10", fill: "url(#triangle)" })] }) }), _jsx(Box, { bg: "neutral.white", px: "2", p: "base", children: _jsxs(Flex, { align: "center", gap: "base", children: [_jsx(Image, { src: storeImage, w: "75px", h: "75px", fit: "cover" }), _jsxs(Flex, { align: "center", gap: "2", flex: "auto", children: [_jsx(DetailsColumn, { details: leftColumn }), _jsx(Divider, { orientation: "vertical", bg: "lightBlue.2", h: "63px", mr: "6" }), _jsx(DetailsColumn, { align: "right", details: rightColumn })] })] }) })] }));
+    return (_jsxs(Box, { boxShadow: "md", minW: "108px", bg: "lightBlue.2", borderBottom: "1px solid", borderColor: "lightBlue.2", children: [onEdit && (_jsxs(Flex, { align: "center", justify: "space-between", p: "base", children: [_jsx(Text, { children: name }), _jsx(IconButton, { variant: "menuIconWithShadow", maxW: "fit-content", "aria-label": t('ariaLabels.edit'), p: "1", icon: _jsx(Edit, {}), onClick: onEdit })] })), _jsx(Box, { w: "100%", h: "10px", bg: "lightBlue.2", overflow: "hidden", position: "relative", children: _jsxs("svg", { width: "100%", height: "8", viewBox: "0 0 100 10", preserveAspectRatio: "none", style: { display: 'block', position: 'absolute', bottom: 0, left: 0 }, children: [_jsx("defs", { children: _jsx("pattern", { id: "triangle", width: "4", height: "10", patternUnits: "userSpaceOnUse", children: _jsx("polygon", { points: "0,10 2,0 4,10", fill: "white" }) }) }), _jsx("rect", { width: "100%", height: "10", fill: "url(#triangle)" })] }) }), _jsx(Box, { bg: "neutral.white", px: "2", p: "base", children: _jsxs(Flex, { align: "center", gap: "base", children: [_jsx(Image, { src: storeImage, w: "75px", h: "75px", fit: "cover" }), _jsxs(Flex, { align: "center", gap: "2", flex: "auto", children: [_jsx(DetailsColumn, { details: leftColumn }), _jsx(Divider, { orientation: "vertical", bg: "lightBlue.2", h: "63px", mr: "6" }), _jsx(DetailsColumn, { align: "right", details: rightColumn })] })] }) })] }));
 };

package/dist/components/receipts/receipt/ReceiptItem.d.ts

@@ -1,2 +1,2 @@
 import { ReceiptItemI } from '../../../interfaces';
-export declare const ReceiptItem: ({ icon, isChecked, itemPrice, onChange, onSelectedChange, total, quantity, sku, title, }: ReceiptItemI) => import("react/jsx-runtime").JSX.Element;
+export declare const ReceiptItem: ({ icon, isChecked, itemPrice, onChange, onSelectedChange, onEditClick, total, quantity, sku, title, }: ReceiptItemI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/receipts/receipt/ReceiptItem.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Stack } from '@chakra-ui/react';
+import { t } from 'i18next';
+import { Flex, IconButton, Stack } from '@chakra-ui/react';
 import { Price } from '../../../assets/images';
-import { ReceiptItemBody, ReceiptItemContainer, ReceiptItemHeader, } from '../..';
-export const ReceiptItem = ({ icon = Price, isChecked, itemPrice, onChange, onSelectedChange = () => { }, total, quantity, sku, title, }) => {
-    return (_jsx(ReceiptItemContainer, { isChecked: isChecked, onChange: onChange, children: _jsxs(Stack, { w: "100%", p: "base", bg: isChecked ? 'lightGreen.1' : 'neutral.white', spacing: "1", justify: "space-between", children: [_jsx(ReceiptItemHeader, { icon: icon, sku: sku, onSelectedChange: onSelectedChange, variant: "tertiary" }), _jsx(ReceiptItemBody, { itemPrice: itemPrice, quantity: quantity, title: title, total: total })] }) }));
+import { Edit, ReceiptItemBody, ReceiptItemContainer, ReceiptItemHeader, } from '../..';
+export const ReceiptItem = ({ icon = Price, isChecked, itemPrice, onChange, onSelectedChange = () => { }, onEditClick, total, quantity, sku, title, }) => {
+    return (_jsx(ReceiptItemContainer, { isChecked: isChecked, onChange: onChange, children: _jsxs(Stack, { w: "100%", p: "base", bg: isChecked ? 'lightGreen.1' : 'neutral.white', spacing: "1", justify: "space-between", children: [_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsx(ReceiptItemHeader, { icon: icon, sku: sku, onSelectedChange: onSelectedChange, variant: "tertiary" }), onEditClick && (_jsx(IconButton, { variant: "menuIconWithShadow", maxW: "fit-content", "aria-label": t('ariaLabels.edit'), p: "1", icon: _jsx(Edit, {}), onClick: onEditClick }))] }), _jsx(ReceiptItemBody, { itemPrice: itemPrice, quantity: quantity, title: title, total: total })] }) }));
 };

package/dist/components/receipts/receipt/ReceiptItems.d.ts

@@ -1,2 +1,2 @@
 import { ReceiptItemsI } from '../../../interfaces';
-export declare const ReceiptItems: ({ isSelectDisabled, leftOptions, onItemSelectedChange, onLeftSelectChange, onReceiptSelectedChange, onRightSelectChange, onRoomClick, receipts, receiptOptions, rightOptions, title, variant, }: ReceiptItemsI) => import("react/jsx-runtime").JSX.Element;
+export declare const ReceiptItems: ({ isSelectDisabled, leftOptions, onItemSelectedChange, onLeftSelectChange, onReceiptSelectedChange, onRightSelectChange, onRoomClick, onEditReceipt, receipts, receiptOptions, rightOptions, title, variant, }: ReceiptItemsI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/receipts/receipt/ReceiptItems.js

@@ -3,13 +3,13 @@ import { t } from 'i18next';
 import { Flex, Checkbox, Text, Stack, Box } from '@chakra-ui/react';
 import { DoubleSelects, ReceiptItem, ReceiptItemAssigned } from '../..';
 import { useAssignableList } from '../../../hooks';
-export const ReceiptItems = ({ isSelectDisabled = true, leftOptions = [], onItemSelectedChange, onLeftSelectChange = () => null, onReceiptSelectedChange, onRightSelectChange = () => null, onRoomClick = () => null, receipts, receiptOptions, rightOptions = [], title = t('receipts.assign'), variant = 'secondary', }) => {
+export const ReceiptItems = ({ isSelectDisabled = true, leftOptions = [], onItemSelectedChange, onLeftSelectChange = () => null, onReceiptSelectedChange, onRightSelectChange = () => null, onRoomClick = () => null, onEditReceipt, receipts, receiptOptions, rightOptions = [], title = t('receipts.assign'), variant = 'secondary', }) => {
     const { handleItemSelect, handleSelectAll, isItemSelected } = useAssignableList({
         onItemSelectedChange,
         items: receipts,
     });
     return (_jsxs(Box, { mb: "10rem", children: [_jsxs(Stack, { bg: "lightBlue.2", px: "4", pb: "base", pt: "2", children: [_jsx(Text, { textTransform: "uppercase", variant: "home", children: title }), _jsxs(Flex, { gap: "base", align: "center", children: [_jsx(Checkbox, { onChange: handleSelectAll }), _jsx(DoubleSelects, { isSelectDisabled: isSelectDisabled, leftOptions: leftOptions, rightOptions: rightOptions, onLeftSelectChange: onLeftSelectChange, onRightSelectChange: onRightSelectChange })] })] }), receipts.map((receipt) => {
                 const hasRoomType = !!(receipt === null || receipt === void 0 ? void 0 : receipt.roomType);
-                return (_jsxs(Box, { children: [!hasRoomType && (_jsx(ReceiptItem, Object.assign({ onChange: () => handleItemSelect(receipt._id), isChecked: isItemSelected(receipt._id), onSelectedChange: onReceiptSelectedChange, selectItems: receiptOptions, variant: variant }, receipt))), hasRoomType && (_jsx(ReceiptItemAssigned, Object.assign({ onChange: () => handleItemSelect(receipt._id), onRoomClick: onRoomClick, isChecked: isItemSelected(receipt._id), onSelectedChange: onReceiptSelectedChange, initialSelectValue: receiptOptions === null || receiptOptions === void 0 ? void 0 : receiptOptions[1], selectItems: receiptOptions, variant: variant }, receipt)))] }, receipt._id));
+                return (_jsxs(Box, { children: [!hasRoomType && (_jsx(ReceiptItem, Object.assign({ onChange: () => handleItemSelect(receipt._id), isChecked: isItemSelected(receipt._id), onSelectedChange: onReceiptSelectedChange, onEditClick: () => onEditReceipt === null || onEditReceipt === void 0 ? void 0 : onEditReceipt(receipt._id), selectItems: receiptOptions, variant: variant }, receipt))), hasRoomType && (_jsx(ReceiptItemAssigned, Object.assign({ onChange: () => handleItemSelect(receipt._id), onRoomClick: onRoomClick, isChecked: isItemSelected(receipt._id), onSelectedChange: onReceiptSelectedChange, initialSelectValue: receiptOptions === null || receiptOptions === void 0 ? void 0 : receiptOptions[1], selectItems: receiptOptions, variant: variant }, receipt)))] }, receipt._id));
             })] }));
 };

package/dist/interfaces/receipts/receipt/DetailsColumn.interface.d.ts

@@ -1,6 +1,6 @@
 interface DetailRowI {
-    label: string;
-    value: string | number | Date;
+    label?: string;
+    value?: string | number | Date;
 }
 export interface DetailsColumnI {
     align?: 'left' | 'right';

package/dist/interfaces/receipts/receipt/ReceiptItem.interface.d.ts

@@ -1,4 +1,4 @@
-import { SelectItemI } from "../..";
+import { SelectItemI } from '../..';
 export interface ReceiptItemFeaturesI {
     description: string;
     icon?: string;
@@ -15,6 +15,7 @@ export type VariantTypes = 'secondary' | 'tertiary';
 export interface ReceiptItemI extends ReceiptItemFeaturesI {
     isChecked?: boolean;
     initialSelectValue?: string;
+    onEditClick?: () => void;
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onSelectedChange?: (value: string | SelectItemI) => void;
     onRoomClick?: (roomId: string) => void;

package/dist/interfaces/receipts/receipt/ReceiptItems.interface.d.ts

@@ -4,6 +4,7 @@ export interface ReceiptItemsI extends DoubleSelectsI {
     onItemSelectedChange: (_ids: string[]) => void;
     onReceiptSelectedChange?: (value: string | SelectItemI) => void;
     onRoomClick?: (roomId: string) => void;
+    onEditReceipt?: (receiptId: string) => void;
     receiptOptions?: string[];
     receipts: ReceiptItemFeaturesI[];
     title?: string;

package/dist/stories/receipts/receipt/ReceiptDetails.stories.d.ts

@@ -12,6 +12,8 @@ export declare const ReceiptDetailsComponent: {
         tax: string;
         store: string;
         storePhone: string;
+        name: string;
         total: string;
+        onEdit: import("@storybook/addon-actions").HandlerFunction;
     };
 };

package/dist/stories/receipts/receipt/ReceiptDetails.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
 import { Box } from '@chakra-ui/react';
 import { ReceiptDetails } from '../../../components';
 export default {
@@ -16,5 +17,7 @@ ReceiptDetailsComponent.args = {
     tax: '0.5',
     store: '8418',
     storePhone: '1234567890',
+    name: 'Home Depot',
     total: '41.65',
+    onEdit: action('onEdit'),
 };

package/dist/stories/receipts/receipt/ReceiptItem.stories.d.ts

@@ -6,6 +6,7 @@ export declare const ReceiptItemComponent: {
     (args: ReceiptItemI): import("react/jsx-runtime").JSX.Element;
     args: {
         onChange: import("@storybook/addon-actions").HandlerFunction;
+        onEditClick: import("@storybook/addon-actions").HandlerFunction;
         description: string;
         icon?: string;
         itemPrice: string;

package/dist/stories/receipts/receipt/ReceiptItem.stories.js

@@ -10,4 +10,4 @@ export default {
 export const ReceiptItemComponent = (args) => {
     return (_jsx(Box, { width: ['full', '30rem'], p: "base", children: _jsx(ReceiptItem, Object.assign({}, args)) }));
 };
-ReceiptItemComponent.args = Object.assign(Object.assign({}, receiptList[0]), { onChange: action('onChange') });
+ReceiptItemComponent.args = Object.assign(Object.assign({}, receiptList[0]), { onChange: action('onChange'), onEditClick: action('onEditClick') });

package/package.json

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

package/src/components/receipts/receipt/ReceiptDetails.tsx

@@ -1,12 +1,12 @@
 import { t } from 'i18next'
-import { Box, Divider, Flex, Image } from '@chakra-ui/react'
-import { ReceiptBg } from '@/assets/images'
+import { Box, Divider, Flex, IconButton, Image, Text } from '@chakra-ui/react'
 import { formatDate } from '@/utils'
-import { DetailsColumn } from '@/components'
+import { DetailsColumn, Edit } from '@/components'
 import { ColumnDetailsType, ReceiptDetailsDBI } from '@/interfaces'
 import { receiptOrigins } from '@/helpers'
 
 export const ReceiptDetails = ({
+  name,
   cashier = '',
   itemQuantity,
   paymentMethod,
@@ -16,11 +16,12 @@ export const ReceiptDetails = ({
   receiptOrigin = 'homeDepot',
   storePhone = '',
   total,
-}: ReceiptDetailsDBI) => {
+  onEdit,
+}: Partial<ReceiptDetailsDBI> & { onEdit?: () => void }) => {
   const storeImage = receiptOrigins[receiptOrigin]
   const leftLabels = t('receipts.columnLeft').split(',')
   const rightLabels = t('receipts.columnRight').split(',')
-  const leftColumn: ColumnDetailsType[] = [
+  const leftColumn: Partial<ColumnDetailsType>[] = [
     {
       label: leftLabels[0],
       value: formatDate({ date: purchaseDate }).replace(' ', ' @ '),
@@ -39,7 +40,7 @@ export const ReceiptDetails = ({
     },
   ]
 
-  const rightColumn: ColumnDetailsType[] = [
+  const rightColumn: Partial<ColumnDetailsType>[] = [
     {
       label: rightLabels[0],
       value: itemQuantity,
@@ -65,6 +66,19 @@ export const ReceiptDetails = ({
       borderBottom="1px solid"
       borderColor="lightBlue.2"
     >
+      {onEdit && (
+        <Flex align="center" justify="space-between" p="base">
+          <Text>{name}</Text>
+          <IconButton
+            variant="menuIconWithShadow"
+            maxW="fit-content"
+            aria-label={t('ariaLabels.edit')}
+            p="1"
+            icon={<Edit />}
+            onClick={onEdit}
+          />
+        </Flex>
+      )}
       <Box
         w="100%"
         h="10px"

package/src/components/receipts/receipt/ReceiptItem.tsx

@@ -1,7 +1,9 @@
-import { Stack } from '@chakra-ui/react'
+import { t } from 'i18next'
+import { Flex, IconButton, Stack } from '@chakra-ui/react'
 import { ReceiptItemI } from '@/interfaces'
 import { Price } from '@/assets/images'
 import {
+  Edit,
   ReceiptItemBody,
   ReceiptItemContainer,
   ReceiptItemHeader,
@@ -13,6 +15,7 @@ export const ReceiptItem = ({
   itemPrice,
   onChange,
   onSelectedChange = () => {},
+  onEditClick,
   total,
   quantity,
   sku,
@@ -27,12 +30,24 @@ export const ReceiptItem = ({
         spacing="1"
         justify="space-between"
       >
-        <ReceiptItemHeader
-          icon={icon}
-          sku={sku}
-          onSelectedChange={onSelectedChange}
-          variant="tertiary"
-        />
+        <Flex align="center" justify="space-between">
+          <ReceiptItemHeader
+            icon={icon}
+            sku={sku}
+            onSelectedChange={onSelectedChange}
+            variant="tertiary"
+          />
+          {onEditClick && (
+            <IconButton
+              variant="menuIconWithShadow"
+              maxW="fit-content"
+              aria-label={t('ariaLabels.edit')}
+              p="1"
+              icon={<Edit />}
+              onClick={onEditClick}
+            />
+          )}
+        </Flex>
         <ReceiptItemBody
           itemPrice={itemPrice}
           quantity={quantity}

package/src/components/receipts/receipt/ReceiptItems.tsx

@@ -12,6 +12,7 @@ export const ReceiptItems = ({
   onReceiptSelectedChange,
   onRightSelectChange = () => null,
   onRoomClick = () => null,
+  onEditReceipt,
   receipts,
   receiptOptions,
   rightOptions = [],
@@ -50,6 +51,7 @@ export const ReceiptItems = ({
                 onChange={() => handleItemSelect(receipt._id)}
                 isChecked={isItemSelected(receipt._id)}
                 onSelectedChange={onReceiptSelectedChange}
+                onEditClick={() => onEditReceipt?.(receipt._id)}
                 selectItems={receiptOptions}
                 variant={variant}
                 {...receipt}

package/src/interfaces/receipts/receipt/DetailsColumn.interface.ts

@@ -1,6 +1,6 @@
 interface DetailRowI {
-  label: string
-  value: string | number | Date
+  label?: string
+  value?: string | number | Date
 }
 
 export interface DetailsColumnI {

package/src/interfaces/receipts/receipt/ReceiptItem.interface.ts

@@ -1,4 +1,4 @@
-import { SelectItemI } from "@/interfaces"
+import { SelectItemI } from '@/interfaces'
 
 export interface ReceiptItemFeaturesI {
   description: string
@@ -18,6 +18,7 @@ export type VariantTypes = 'secondary' | 'tertiary'
 export interface ReceiptItemI extends ReceiptItemFeaturesI {
   isChecked?: boolean
   initialSelectValue?: string
+  onEditClick?: () => void
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
   onSelectedChange?: (value: string | SelectItemI) => void
   onRoomClick?: (roomId: string) => void

package/src/interfaces/receipts/receipt/ReceiptItems.interface.ts

@@ -5,6 +5,7 @@ export interface ReceiptItemsI extends DoubleSelectsI {
   onItemSelectedChange: (_ids: string[]) => void
   onReceiptSelectedChange?: (value: string | SelectItemI) => void
   onRoomClick?: (roomId: string) => void
+  onEditReceipt?: (receiptId: string) => void
   receiptOptions?: string[]
   receipts: ReceiptItemFeaturesI[]
   title?: string

package/src/stories/receipts/receipt/ReceiptDetails.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
 import { Box } from '@chakra-ui/react'
 import { ReceiptDetails } from '@/components'
 import { ReceiptDetailsDBI } from '@/interfaces'
@@ -24,5 +25,7 @@ ReceiptDetailsComponent.args = {
   tax: '0.5',
   store: '8418',
   storePhone: '1234567890',
+  name: 'Home Depot',
   total: '41.65',
+  onEdit: action('onEdit'),
 }

package/src/stories/receipts/receipt/ReceiptItem.stories.tsx

@@ -21,4 +21,5 @@ export const ReceiptItemComponent = (args: ReceiptItemI) => {
 ReceiptItemComponent.args = {
   ...receiptList[0],
   onChange: action('onChange'),
+  onEditClick: action('onEditClick'),
 }