@homefile/components-v2 2.23.2 → 2.23.4

package/dist/components/householdItems/ItemNameHeader.d.ts

@@ -1,2 +1,2 @@
 import { ItemNameHeaderI } from '../../interfaces';
-export declare const ItemNameHeader: ({ id, value, onSave, onValueChange, padding, }: ItemNameHeaderI) => import("react/jsx-runtime").JSX.Element;
+export declare const ItemNameHeader: ({ id, value, onSave, onValueChange, padding, required, }: ItemNameHeaderI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/householdItems/ItemNameHeader.js

@@ -4,7 +4,7 @@ import { Box, Flex, Button } from '@chakra-ui/react';
 import { TextInput } from '..';
 import { isEmptyField } from '../../utils';
 import { useState, useEffect } from 'react';
-export const ItemNameHeader = ({ id = '', value = '', onSave, onValueChange, padding = 'base', }) => {
+export const ItemNameHeader = ({ id = '', value = '', onSave, onValueChange, padding = 'base', required = true, }) => {
     const [name, setName] = useState(value);
     useEffect(() => {
         setName(value);
@@ -13,5 +13,5 @@ export const ItemNameHeader = ({ id = '', value = '', onSave, onValueChange, pad
         setName(e.target.value);
         onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(e.target.value);
     };
-    return (_jsx(Box, { bg: "lightBlue.2", p: padding, w: "100%", children: _jsxs(Flex, { gap: "base", align: "center", children: [_jsx(TextInput, { errorMessage: `${t('householdItems.headers.itemName')} ${t('forms.required')}`, hasError: isEmptyField(name), id: id, handleChange: handleChange, placeholder: t('householdItems.headers.placeholder'), value: name }), name && (_jsx(Button, { variant: "secondary", maxW: "fit-content", maxH: "input.md", onClick: () => onSave(name), children: t('createDocument.buttons.save') }))] }) }));
+    return (_jsx(Box, { bg: "lightBlue.2", p: padding, w: "100%", children: _jsxs(Flex, { gap: "base", align: "center", children: [_jsx(TextInput, { errorMessage: `${t('householdItems.headers.itemName')} ${t('forms.required')}`, hasError: required && isEmptyField(name), id: id, handleChange: handleChange, placeholder: t('householdItems.headers.placeholder'), value: name }), name && (_jsx(Button, { variant: "secondary", maxW: "fit-content", maxH: "input.md", onClick: () => onSave(name), children: t('createDocument.buttons.save') }))] }) }));
 };

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack } from '@chakra-ui/react';
+import { Price } from '../../../assets/images';
 import { ReceiptItemBody, ReceiptItemContainer, ReceiptItemHeader, } from '../..';
-export const ReceiptItem = ({ icon, isChecked, itemPrice, onChange, onSelectedChange = () => { }, total, quantity, sku, title, }) => {
+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 })] }) }));
 };

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex, Stack } from '@chakra-ui/react';
+import { Price } from '../../../assets/images';
 import { Overlay, ReceiptItemBody, ReceiptItemContainer, ReceiptItemHeader, ReceiptRoom, } from '../..';
-export const ReceiptItemAssigned = ({ icon, isChecked, itemPrice, onChange, onSelectedChange = () => { }, onRoomClick = () => { }, total, quantity, roomId = '', roomType, sku, title, variant = 'secondary', }) => {
+export const ReceiptItemAssigned = ({ icon = Price, isChecked, itemPrice, onChange, onSelectedChange = () => { }, onRoomClick = () => { }, total, quantity, roomId = '', roomType, sku, title, variant = 'secondary', }) => {
     return (_jsx(ReceiptItemContainer, { isChecked: isChecked, onChange: onChange, children: _jsxs(Flex, { flex: "auto", children: [roomType && (_jsx(ReceiptRoom, { roomType: roomType, roomId: roomId, onClick: onRoomClick })), _jsxs(Stack, { p: "base", bg: "lightGreen.1", spacing: "1", justify: "space-between", position: "relative", flex: "1", children: [!isChecked && (_jsx(Overlay, { position: "absolute", w: "inherit", h: "inherit", bg: "#F0F8F080" })), _jsx(ReceiptItemHeader, { icon: icon, sku: sku, onSelectedChange: onSelectedChange, variant: variant }), _jsx(ReceiptItemBody, { isTitleItalic: !isChecked, itemPrice: itemPrice, quantity: quantity, title: title, total: total })] })] }) }));
 };

package/dist/interfaces/headers/ItemNameHeader.interface.d.ts

@@ -4,4 +4,5 @@ export interface ItemNameHeaderI {
     onValueChange?: (value: string) => void;
     onSave: (name: string) => void;
     padding?: string;
+    required?: boolean;
 }

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { action } from '@storybook/addon-actions';
 import { RightPanel, ReceiptContent, ReceiptItems, ReceiptDetails, TabsHeader, PdfButton, PanelHeader, DynamicForm, EditItemName, ReceiptBody, SearchItemLoader, FooterButtons, FooterDrawer, } from '../../../components';
-import { receiptList } from '../../../helpers';
 import { Register } from '../../../assets/images';
 import { receiptFieldsMock } from '../../../mocks';
 import { useState } from 'react';
@@ -35,10 +34,10 @@ function StepOne({ onSave }) {
                         } }) }) })] }));
 }
 function StepThree() {
-    return (_jsxs(_Fragment, { children: [_jsxs(ReceiptBody, { children: [_jsx(ReceiptDetails, { _id: "1", cashier: "Rochelle", itemQuantity: 4, paymentMethod: "Debit", purchaseDate: new Date(), tax: "3.17", store: "8418", storePhone: "512.258.7914", total: "41.65" }), _jsx(TabsHeader, { rightButton: _jsx(PdfButton, { onClick: action('Pdf click') }), tabList: [
+    return (_jsxs(_Fragment, { children: [_jsxs(ReceiptBody, { children: [_jsx(ReceiptDetails, Object.assign({}, receiptSchemaMock.receipt, { purchaseDate: new Date(receiptSchemaMock.receipt.purchaseDate) })), _jsx(TabsHeader, { rightButton: _jsx(PdfButton, { onClick: action('Pdf click') }), tabList: [
                             {
                                 label: 'Items',
-                                component: (_jsx(ReceiptItems, { isSelectDisabled: true, receipts: receiptList, leftOptions: ['Project', 'Room', 'Folder'], rightOptions: ['Kitchen', 'Landscape', 'Bedroom'], receiptOptions: ['unassigned', 'inventory', 'incidentals'], onItemSelectedChange: action('onItemSelectedChange'), onLeftSelectChange: action('onLeftSelectChange'), onReceiptSelectedChange: action('onReceiptSelectedChange'), onRightSelectChange: action('onRightSelectChange') })),
+                                component: (_jsx(ReceiptItems, { isSelectDisabled: true, receipts: receiptSchemaMock.receipt.items, leftOptions: receiptSchemaMock.options.leftOptions, rightOptions: receiptSchemaMock.options.rightOptions, receiptOptions: receiptSchemaMock.options.receiptOptions, onItemSelectedChange: action('onItemSelectedChange'), onLeftSelectChange: action('onLeftSelectChange'), onReceiptSelectedChange: action('onReceiptSelectedChange'), onRightSelectChange: action('onRightSelectChange') })),
                             },
                             {
                                 label: 'Notes',
@@ -54,3 +53,46 @@ function StepThree() {
                             onClick: action('onConfirm'),
                         } }) }) })] }));
 }
+const receiptSchemaMock = {
+    receipt: {
+        _id: '1',
+        name: 'Receipt for Palmgain Palm Fertilizer',
+        cashier: 'Rochelle',
+        itemQuantity: 4,
+        paymentMethod: 'Debit',
+        purchaseDate: '2024-06-18T00:00:00.000Z',
+        tax: '3.17',
+        store: '8418',
+        storePhone: '512.258.7914',
+        total: '41.65',
+        items: [
+            {
+                description: 'Palmgain Palm Fertilizer 10LB',
+                title: 'Palmgain Palm Fertilizer 10LB Palmgain Palm Fertilizer 10LB',
+                itemPrice: '1.99',
+                total: '31.99',
+                quantity: 1,
+                sku: '1234567890',
+                _id: '1',
+            },
+            {
+                description: 'Palmgain Palm Fertilizer 10LB',
+                title: 'Palmgain Palm Fertilizer 10LB',
+                itemPrice: '4.99',
+                total: '33.99',
+                quantity: 1,
+                roomType: 'living_room',
+                roomId: 'room-1',
+                sku: '1234567890',
+                _id: '2',
+            },
+        ],
+        notes: '',
+        pdfUrl: 'https://url-do-pdf.com/receipt.pdf',
+    },
+    options: {
+        leftOptions: ['Project', 'Room', 'Folder'],
+        rightOptions: ['Kitchen', 'Landscape', 'Bedroom'],
+        receiptOptions: ['unassigned', 'inventory', 'incidentals'],
+    },
+};

package/package.json

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

package/src/components/householdItems/ItemNameHeader.tsx

@@ -11,6 +11,7 @@ export const ItemNameHeader = ({
   onSave,
   onValueChange,
   padding = 'base',
+  required = true,
 }: ItemNameHeaderI) => {
   const [name, setName] = useState(value)
 
@@ -29,7 +30,7 @@ export const ItemNameHeader = ({
           errorMessage={`${t('householdItems.headers.itemName')} ${t(
             'forms.required'
           )}`}
-          hasError={isEmptyField(name)}
+          hasError={required && isEmptyField(name)}
           id={id}
           handleChange={handleChange}
           placeholder={t('householdItems.headers.placeholder')}

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

@@ -1,5 +1,6 @@
 import { Stack } from '@chakra-ui/react'
 import { ReceiptItemI } from '@/interfaces'
+import { Price } from '@/assets/images'
 import {
   ReceiptItemBody,
   ReceiptItemContainer,
@@ -7,7 +8,7 @@ import {
 } from '@/components'
 
 export const ReceiptItem = ({
-  icon,
+  icon = Price,
   isChecked,
   itemPrice,
   onChange,

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

@@ -1,5 +1,6 @@
 import { Flex, Stack } from '@chakra-ui/react'
 import { ReceiptItemI } from '@/interfaces'
+import { Price } from '@/assets/images'
 import {
   Overlay,
   ReceiptItemBody,
@@ -9,7 +10,7 @@ import {
 } from '@/components'
 
 export const ReceiptItemAssigned = ({
-  icon,
+  icon = Price,
   isChecked,
   itemPrice,
   onChange,

package/src/interfaces/headers/ItemNameHeader.interface.ts

@@ -4,4 +4,5 @@ export interface ItemNameHeaderI {
   onValueChange?: (value: string) => void
   onSave: (name: string) => void
   padding?: string
+  required?: boolean
 }

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

@@ -15,7 +15,6 @@ import {
   FooterButtons,
   FooterDrawer,
 } from '@/components'
-import { receiptList } from '@/helpers'
 import { Register } from '@/assets/images'
 import { ReceiptContentI } from '@/interfaces'
 import { receiptFieldsMock } from '@/mocks'
@@ -102,15 +101,8 @@ function StepThree() {
     <>
       <ReceiptBody>
         <ReceiptDetails
-          _id="1"
-          cashier="Rochelle"
-          itemQuantity={4}
-          paymentMethod="Debit"
-          purchaseDate={new Date()}
-          tax="3.17"
-          store="8418"
-          storePhone="512.258.7914"
-          total="41.65"
+          {...receiptSchemaMock.receipt}
+          purchaseDate={new Date(receiptSchemaMock.receipt.purchaseDate)}
         />
 
         <TabsHeader
@@ -121,10 +113,10 @@ function StepThree() {
               component: (
                 <ReceiptItems
                   isSelectDisabled={true}
-                  receipts={receiptList}
-                  leftOptions={['Project', 'Room', 'Folder']}
-                  rightOptions={['Kitchen', 'Landscape', 'Bedroom']}
-                  receiptOptions={['unassigned', 'inventory', 'incidentals']}
+                  receipts={receiptSchemaMock.receipt.items}
+                  leftOptions={receiptSchemaMock.options.leftOptions}
+                  rightOptions={receiptSchemaMock.options.rightOptions}
+                  receiptOptions={receiptSchemaMock.options.receiptOptions}
                   onItemSelectedChange={action('onItemSelectedChange')}
                   onLeftSelectChange={action('onLeftSelectChange')}
                   onReceiptSelectedChange={action('onReceiptSelectedChange')}
@@ -158,3 +150,47 @@ function StepThree() {
     </>
   )
 }
+
+const receiptSchemaMock = {
+  receipt: {
+    _id: '1',
+    name: 'Receipt for Palmgain Palm Fertilizer',
+    cashier: 'Rochelle',
+    itemQuantity: 4,
+    paymentMethod: 'Debit',
+    purchaseDate: '2024-06-18T00:00:00.000Z',
+    tax: '3.17',
+    store: '8418',
+    storePhone: '512.258.7914',
+    total: '41.65',
+    items: [
+      {
+        description: 'Palmgain Palm Fertilizer 10LB',
+        title: 'Palmgain Palm Fertilizer 10LB Palmgain Palm Fertilizer 10LB',
+        itemPrice: '1.99',
+        total: '31.99',
+        quantity: 1,
+        sku: '1234567890',
+        _id: '1',
+      },
+      {
+        description: 'Palmgain Palm Fertilizer 10LB',
+        title: 'Palmgain Palm Fertilizer 10LB',
+        itemPrice: '4.99',
+        total: '33.99',
+        quantity: 1,
+        roomType: 'living_room',
+        roomId: 'room-1',
+        sku: '1234567890',
+        _id: '2',
+      },
+    ],
+    notes: '',
+    pdfUrl: 'https://url-do-pdf.com/receipt.pdf',
+  },
+  options: {
+    leftOptions: ['Project', 'Room', 'Folder'],
+    rightOptions: ['Kitchen', 'Landscape', 'Bedroom'],
+    receiptOptions: ['unassigned', 'inventory', 'incidentals'],
+  },
+}