@homefile/components-v2 2.24.20 → 2.24.22

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

@@ -834,7 +834,7 @@
     "totalReceipts": "Total Receipts Received",
     "totalItems": "Total Items Identified",
     "totalItemsAdded": "Total Items Added",
-    "viewPdf": "View receipt PDF",
+    "viewPdf": "View receipt File",
     "whereItsAt": "Where it's at"
   },
   "registration": {

package/dist/components/forms/dynamicForm/fields/CurrencyField.js

@@ -5,7 +5,7 @@ import { Flex, Input } from '@chakra-ui/react';
 import { FormIcon, LabeledField } from '../../..';
 export const CurrencyField = ({ label, id, icon, placeholder, value, }) => {
     const { control } = useFormContext();
-    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", children: [_jsx(FormIcon, { icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field }) => {
+    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", w: "full", children: [_jsx(FormIcon, { icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field }) => {
                     return (_jsx(LabeledField, { label: label, children: _jsx(NumericFormat, Object.assign({}, field, { customInput: Input, thousandSeparator: true, decimalScale: 2, fixedDecimalScale: true, prefix: "$", placeholder: placeholder, textAlign: "right", _placeholder: { color: 'gray.2' }, onValueChange: ({ floatValue }) => {
                                 field.onChange(floatValue);
                             } })) }));

package/dist/components/forms/dynamicForm/fields/NumberField.js

@@ -5,7 +5,7 @@ import { FieldDescription, LabeledField } from '../../..';
 export const NumberField = ({ description, icon, id, label, placeholder, value, }) => {
     const { control } = useFormContext();
     const hasDescriptionAndIcon = Boolean(description) && Boolean(icon);
-    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", children: [hasDescriptionAndIcon && (_jsx(FieldDescription, { description: description, icon: icon })), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
+    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", w: "full", children: [hasDescriptionAndIcon && (_jsx(FieldDescription, { description: description, icon: icon })), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
                     return (_jsx(LabeledField, { label: label, children: _jsx(Input, { onChange: (e) => {
                                 const value = e.target.valueAsNumber;
                                 const isNumber = !isNaN(value);

package/dist/components/forms/dynamicForm/fields/TextField.js

@@ -4,7 +4,7 @@ import { Flex } from '@chakra-ui/react';
 import { FormIcon, TextInput } from '../../..';
 export const TextField = ({ id, icon, placeholder = '', label, type = 'text', showIcon = false, value, }) => {
     const { control } = useFormContext();
-    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", children: [showIcon && icon && _jsx(FormIcon, { icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
+    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", w: "full", children: [showIcon && icon && _jsx(FormIcon, { icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
                     return (_jsx(TextInput, { handleChange: onChange, placeholder: placeholder, type: type, value: value, label: label }));
                 } })] }));
 };

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

@@ -3,5 +3,7 @@ import { t } from 'i18next';
 import { Text, Image, Flex } from '@chakra-ui/react';
 import { PdfIcon } from '../../../assets/images';
 export const PdfButton = ({ onClick }) => {
-    return (_jsxs(Flex, { align: "center", gap: "base", as: "button", minW: "fit-content", bg: "neutral.white", pr: "base", onClick: onClick, children: [_jsx(Text, { variant: "home", color: "blue.2", fontWeight: "medium", textTransform: "capitalize", children: t('receipts.viewPdf') }), _jsx(Image, { src: PdfIcon, h: "23px", w: "auto" })] }));
+    return (_jsxs(Flex, { align: "center", gap: "base", as: "button", minW: "fit-content", bg: "neutral.white", 
+        // pr="base"
+        onClick: onClick, children: [_jsx(Text, { variant: "home", color: "blue.2", fontWeight: "medium", textTransform: "capitalize", children: t('receipts.viewPdf') }), _jsx(Image, { src: PdfIcon, h: "23px", w: "auto" })] }));
 };

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

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

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

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Box, Divider, Flex, IconButton, Image, Text } from '@chakra-ui/react';
 import { formatDate } from '../../../utils';
-import { DetailsColumn, Edit } from '../..';
+import { DetailsColumn, Edit, PdfButton } from '../..';
 import { getReceiptOrigin } from '../../../helpers';
-export const ReceiptDetails = ({ name, cashier = '', itemQuantity, paymentMethod, purchaseDate, tax, store, origin = "", storePhone = '', total, onEdit, }) => {
+export const ReceiptDetails = ({ name, cashier = '', itemQuantity, paymentMethod, purchaseDate, tax, store, origin = "", storePhone = '', total, onEdit, onFileClick }) => {
     const storeImage = getReceiptOrigin(origin);
     const leftLabels = t('receipts.columnLeft').split(',');
     const rightLabels = t('receipts.columnRight').split(',');
@@ -44,5 +44,5 @@ export const ReceiptDetails = ({ name, cashier = '', itemQuantity, paymentMethod
             value: paymentMethod,
         },
     ];
-    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 })] })] }) })] }));
+    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)" })] }) }), _jsxs(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 })] })] }), _jsx(Flex, { justifyContent: 'flex-end', pt: '.5rem', children: onFileClick && (_jsx(PdfButton, { onClick: onFileClick })) })] })] }));
 };

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

@@ -15,5 +15,6 @@ export declare const ReceiptDetailsComponent: {
         name: string;
         total: string;
         onEdit: import("@storybook/addon-actions").HandlerFunction;
+        onFileClick: () => void;
     };
 };

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

@@ -20,4 +20,5 @@ ReceiptDetailsComponent.args = {
     name: 'Home Depot',
     total: '41.65',
     onEdit: action('onEdit'),
+    onFileClick: () => { }
 };

package/package.json

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

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

@@ -834,7 +834,7 @@
     "totalReceipts": "Total Receipts Received",
     "totalItems": "Total Items Identified",
     "totalItemsAdded": "Total Items Added",
-    "viewPdf": "View receipt PDF",
+    "viewPdf": "View receipt File",
     "whereItsAt": "Where it's at"
   },
   "registration": {

package/src/components/forms/dynamicForm/fields/CurrencyField.tsx

@@ -1,5 +1,5 @@
 import { Controller, useFormContext } from 'react-hook-form'
-import {NumericFormat} from 'react-number-format'
+import { NumericFormat } from 'react-number-format'
 import { Flex, Input } from '@chakra-ui/react'
 import { TextFieldI } from '@/interfaces'
 import { FormIcon, LabeledField } from '@/components'
@@ -14,13 +14,13 @@ export const CurrencyField = ({
   const { control } = useFormContext()
 
   return (
-    <Flex align="center" gap="base" flex="auto">
+    <Flex align="center" gap="base" flex="auto" w="full">
       <FormIcon icon={icon} />
       <Controller
         control={control}
         name={id}
         defaultValue={value}
-        render={({ field}) => {
+        render={({ field }) => {
           return (
             <LabeledField label={label}>
               <NumericFormat

package/src/components/forms/dynamicForm/fields/NumberField.tsx

@@ -14,7 +14,7 @@ export const NumberField = ({
   const { control } = useFormContext()
   const hasDescriptionAndIcon = Boolean(description) && Boolean(icon)
   return (
-    <Flex align="center" gap="base" flex="auto">
+    <Flex align="center" gap="base" flex="auto" w="full">
       {hasDescriptionAndIcon && (
         <FieldDescription description={description} icon={icon} />
       )}

package/src/components/forms/dynamicForm/fields/TextField.tsx

@@ -14,7 +14,7 @@ export const TextField = ({
 }: TextFieldI) => {
   const { control } = useFormContext()
   return (
-    <Flex align="center" gap="base" flex="auto">
+    <Flex align="center" gap="base" flex="auto" w="full">
       {showIcon && icon && <FormIcon icon={icon} />}
       <Controller
         control={control}

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

@@ -10,7 +10,7 @@ export const PdfButton = ({ onClick }: { onClick: () => void }) => {
       as="button"
       minW="fit-content"
       bg="neutral.white"
-      pr="base"
+      // pr="base"
       onClick={onClick}
     >
       <Text

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

@@ -1,7 +1,7 @@
 import { t } from 'i18next'
 import { Box, Divider, Flex, IconButton, Image, Text } from '@chakra-ui/react'
 import { formatDate } from '@/utils'
-import { DetailsColumn, Edit } from '@/components'
+import { DetailsColumn, Edit, PdfButton } from '@/components'
 import { ColumnDetailsType, ReceiptDetailsDBI } from '@/interfaces'
 import { getReceiptOrigin } from '@/helpers'
 
@@ -17,7 +17,8 @@ export const ReceiptDetails = ({
   storePhone = '',
   total,
   onEdit,
-}: Partial<ReceiptDetailsDBI> & { onEdit?: () => void }) => {
+  onFileClick
+}: Partial<ReceiptDetailsDBI> & { onEdit?: () => void, onFileClick?: () => void }) => {
   const storeImage = getReceiptOrigin(origin)
   const leftLabels = t('receipts.columnLeft').split(',')
   const rightLabels = t('receipts.columnRight').split(',')
@@ -115,6 +116,13 @@ export const ReceiptDetails = ({
             <DetailsColumn align="right" details={rightColumn} />
           </Flex>
         </Flex>
+        <Flex justifyContent={'flex-end'} pt={'.5rem'}>
+          {
+            onFileClick && (
+              <PdfButton onClick={onFileClick}/>
+            )
+          }
+        </Flex>
       </Box>
     </Box>
   )

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

@@ -28,4 +28,5 @@ ReceiptDetailsComponent.args = {
   name: 'Home Depot',
   total: '41.65',
   onEdit: action('onEdit'),
+  onFileClick: () => {}
 }