@homefile/components-v2 2.25.7 → 2.26.0

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

@@ -482,7 +482,8 @@
   "inbox": {
     "createReply": "Create Reply",
     "enterContent": "Enter content",
-    "forwardTo": "To use Receipt Autofiler, simply forward reciepts to ",
+    "forwardTo": "You can forward a receipt to ",
+    "forwardTo2": " or add a receipt image below.",
     "from": "From: ",
     "message": "Message"
   },

package/dist/components/forms/dynamicForm/HiddenField.d.ts

@@ -1,2 +1,2 @@
 import { HiddenFieldI } from '../../../interfaces';
-export declare const HiddenField: ({ disabled, icon, id, isActive, name, onClick, }: HiddenFieldI) => import("react/jsx-runtime").JSX.Element;
+export declare const HiddenField: ({ disabled, h, icon, id, isActive, name, onClick, showPlusIcon, }: HiddenFieldI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/HiddenField.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Center, Image, Text } from '@chakra-ui/react';
-export const HiddenField = ({ disabled, icon, id, isActive, name, onClick, }) => {
+import { Box, Center, Image, Text } from '@chakra-ui/react';
+import { Plus } from '../..';
+import { colors } from '../../../theme/colors';
+export const HiddenField = ({ disabled, h = '80px', icon, id, isActive, name, onClick, showPlusIcon = false, }) => {
     const handleClick = () => onClick(id);
-    return (_jsxs(Center, { as: "button", disabled: disabled, bg: "neutral.white", borderRadius: "md", w: "auto", h: "80px", boxShadow: "md", flexDirection: "column", onClick: handleClick, gap: "1", transition: "all .2s ease-in-out", border: "1px solid", borderColor: isActive ? 'blue.1' : 'transparent', _hover: {
-            borderColor: 'blue.1',
-        }, _disabled: {
-            opacity: 0.5,
-            _hover: {
-                borderColor: 'transparent',
-            },
-        }, _active: {
-            boxShadow: 'md',
-        }, children: [_jsx(Image, { h: "24px", w: "auto", maxW: "35px", src: icon }), _jsx(Text, { textTransform: "uppercase", fontSize: "xs", noOfLines: 2, overflow: "hidden", lineHeight: "1", width: "100%", children: name })] }));
+    return (_jsxs(Box, { position: "relative", children: [_jsxs(Center, { as: "button", disabled: disabled, bg: "neutral.white", borderRadius: "md", w: "100%", h: h, boxShadow: "md", flexDirection: "column", onClick: handleClick, gap: "1", transition: "all .2s ease-in-out", border: "1px solid", borderColor: isActive ? 'blue.1' : 'transparent', _hover: {
+                    borderColor: 'blue.1',
+                }, _disabled: {
+                    opacity: 0.5,
+                    _hover: {
+                        borderColor: 'transparent',
+                    },
+                }, _active: {
+                    boxShadow: 'md',
+                }, children: [_jsx(Image, { h: "24px", w: "auto", maxW: "35px", src: icon }), _jsx(Text, { textTransform: "uppercase", fontSize: "xs", noOfLines: 2, overflow: "hidden", lineHeight: "1", width: "100%", children: name })] }), showPlusIcon && (_jsx(Box, { position: "absolute", top: "1", left: "4", children: _jsx(Plus, { size: 14, stroke: colors.blue[3] }) }))] }));
 };

package/dist/components/homeBoard/AddToHomefile.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { Button, Circle, Container, Flex, Stack } from '@chakra-ui/react';
-import { ChevronRight, ContainerHeader, DocumentMenu, IconAndText, MoreHorizontal, Plus, TileTooltip, } from '..';
+import { Button, Circle, Container, Flex, Grid, Stack, } from '@chakra-ui/react';
+import { ChevronRight, ContainerHeader, HiddenField, IconAndText, MoreHorizontal, Plus, TileTooltip, } from '..';
 import { GuestBedroom } from '../../assets/images';
 import { colors } from '../../theme/colors';
 export const AddToHomefile = ({ documentList, onItemClick, headerList, isDisabled = false, }) => {
-    return (_jsx(TileTooltip, { label: "addToHomefile", children: _jsxs(Container, { variant: "launchpad", h: "full", minW: ['full', '20rem'], children: [_jsx(ContainerHeader, { title: t('addToHomefile.title'), titleIcon: GuestBedroom, menuItems: headerList, icon: _jsx(MoreHorizontal, { size: 38 }) }), _jsxs(Stack, { spacing: "base", w: "full", p: "4", children: [_jsx(Button, { onClick: onItemClick, disabled: isDisabled, children: _jsxs(Flex, { w: "full", alignItems: "center", justifyContent: "space-between", px: "4", children: [_jsx(IconAndText, { title: t('addHomeItem.btnLabel'), icon: _jsx(Plus, {}) }), _jsx(Circle, { size: "40px", bg: "blue.1", color: "neutral.white", transition: "all 0.2s ease-in-out", children: _jsx(ChevronRight, { size: 26, stroke: colors.neutral.white }) })] }) }), _jsx(DocumentMenu, { documents: documentList, isDisabled: isDisabled, title: t('sendDocument.btLabel') })] })] }) }));
+    return (_jsx(TileTooltip, { label: "addToHomefile", children: _jsxs(Container, { variant: "launchpad", h: "full", minW: ['full', '20rem'], children: [_jsx(ContainerHeader, { title: t('addToHomefile.title'), titleIcon: GuestBedroom, menuItems: headerList, icon: _jsx(MoreHorizontal, { size: 38 }) }), _jsxs(Stack, { spacing: "base", w: "full", p: "4", children: [_jsx(Button, { onClick: onItemClick, disabled: isDisabled, children: _jsxs(Flex, { w: "full", alignItems: "center", justifyContent: "space-between", px: "4", children: [_jsx(IconAndText, { title: t('addHomeItem.btnLabel'), icon: _jsx(Plus, {}) }), _jsx(Circle, { size: "40px", bg: "blue.1", color: "neutral.white", transition: "all 0.2s ease-in-out", children: _jsx(ChevronRight, { size: 26, stroke: colors.neutral.white }) })] }) }), _jsx(Grid, { templateColumns: "repeat(auto-fill, minmax(70px, 1fr))", gap: "base", children: documentList.map((item) => {
+                                return (_jsx(HiddenField, { h: "58px", id: item.label, name: item.label, icon: item.icon, disabled: isDisabled, onClick: onItemClick, showPlusIcon: true }, item.label));
+                            }) })] })] }) }));
 };

package/dist/components/homeBoard/HomeBoard.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Box, DrawerBody, DrawerContent, DrawerHeader, Flex, Stack, } from '@chakra-ui/react';
 import { HomeHeader, HomeCardWithRecipent, AddFolder, EditAccountType, FolderSharing, RightPanel, HomeBoardTour, RoomsMenu, ContactsContent, AppBar, BarDivider, ContactList, PeopleConnected, StorageUsed, TourButton, Trash, TutorialsButton, FolderTypeSelection, DisplayFiles, DisplayOptions, FilesUploader, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, SharedAccounts, ReceiptAutofiler, HomeBoardGrid, ShortPartnerTile, ValueMonitor, TrendingValue, ReceiptsFiled, PropertyTaxes, PartnerCatalogPanel, DynamicForm, PanelHeader, EditHomePanel, HomeCard, EditHomeFooter, HomeAssistant, HomeAssistantPanel, HomeMonitor, HomefileMonitoring, HomeMonitorSteps, NotificationsReminder, NotificationsPanel, AddToHomefile, WeatherWidget, } from '..';
 import { HomeCards, recipientsDb, FoldersDB, selectOptions, RoomsList, RoomsToAdd, } from '../../helpers';
-import { ContactsMock, DisplayFilesMock, formFieldsMock, homeBoardRecorsMock, lineChartData, menuMock, partnerCatalogMock, sharedAccountsMock, socialLinksMock2, taxesMock, userMock, videoMock, homeAssitantStep1FormMock, homeAssitantStep2FormMock, homeAssitantStep3FormMock, homeAssitantStep4FormMock, homeAssitantStep5FormMock, homeAssitantStep6FormMock, tileUIMock, socialLinksMock, notificationsMock, weatherDataMock, } from '../../mocks';
+import { ContactsMock, DisplayFilesMock, formFieldsMock, homeBoardRecorsMock, lineChartData, menuMock, partnerCatalogMock, sharedAccountsMock, socialLinksMock2, taxesMock, userMock, videoMock, homeAssitantStep1FormMock, homeAssitantStep2FormMock, homeAssitantStep3FormMock, homeAssitantStep4FormMock, homeAssitantStep5FormMock, homeAssitantStep6FormMock, tileUIMock, socialLinksMock, notificationsMock, weatherDataMock, documentListMock, } from '../../mocks';
 import { useHomeBoard, useWindowDimensions } from '../../hooks';
 import { Painting } from '../../assets/images';
 import { mapForecastToWidget } from '../../utils';
@@ -58,7 +58,7 @@ export const HomeBoard = () => {
                                                                     label: 'Details',
                                                                     handleClick: handleHomeAssistantClick,
                                                                 },
-                                                            ], onStepClick: () => null })] }) }), _jsx(DynamicForm, { form: tileUIMock, menuItems: menuMock, socialLinks: socialLinksMock, showTitle: false, websiteUrl: "http://www.audreyscheckdesign.com" }), _jsxs(Stack, { spacing: "base", children: [_jsx(ReceiptAutofiler, { onClick: () => null, totalReceipts: 36, totalTitle: "Receipts Received", forwardTo: "reciepts@homefile.cloud", onFilter: () => null, children: _jsx(ReceiptsFiled, { incidentalItemsNumber: 0, incidentalSpent: 0, inventoryItemsNumber: 0, inventorySpent: 0, total: 0 }) }), _jsx(ValueMonitor, { menuItems: menuMock, balance: "+3%", totalValue: 323421, year: "2023", yearValue: 5684 })] }), _jsx(PropertyTaxes, { estimatedTaxValue: 1000, menuItems: menuMock, taxes: taxesMock, title: "Travis County Property Taxes" }), _jsx(ShortPartnerTile, { _id: "1", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" }), _jsx(TrendingValue, { chartData: lineChartData, marketValue: 894000, menuItems: menuMock, mortgageBalance: 220532, purchasePrice: 220532, roi: "+234%" }), _jsx(ShortPartnerTile, { _id: "2", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" }), _jsx(FolderSharing, { folders: FoldersDB, handleAddNewFolder: handleNewFolder, handleFolderClick: handleFolderClick, handleSelect: () => null, initialSelectItem: selectOptions[0], menuItems: menuMock, selectItems: selectOptions }), _jsx(AddToHomefile, { documentList: [], onItemClick: () => null }), _jsx(ShortPartnerTile, { _id: "3", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" })] })] })] })] }), _jsx(HomeBoardTour, { currentStep: currentStep, handleClose: handleClose, handleStep: handleStep, meetStepUrl: videoMock, isActive: activeTour })] }));
+                                                            ], onStepClick: () => null })] }) }), _jsx(DynamicForm, { form: tileUIMock, menuItems: menuMock, socialLinks: socialLinksMock, showTitle: false, websiteUrl: "http://www.audreyscheckdesign.com" }), _jsxs(Stack, { spacing: "base", children: [_jsx(ReceiptAutofiler, { onClick: () => null, totalReceipts: 36, totalTitle: "Receipts Received", forwardTo: "reciepts@homefile.cloud", onFilter: () => null, children: _jsx(ReceiptsFiled, { incidentalItemsNumber: 0, incidentalSpent: 0, inventoryItemsNumber: 0, inventorySpent: 0, total: 0 }) }), _jsx(ValueMonitor, { menuItems: menuMock, balance: "+3%", totalValue: 323421, year: "2023", yearValue: 5684 })] }), _jsx(PropertyTaxes, { estimatedTaxValue: 1000, menuItems: menuMock, taxes: taxesMock, title: "Travis County Property Taxes" }), _jsx(ShortPartnerTile, { _id: "1", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" }), _jsx(TrendingValue, { chartData: lineChartData, marketValue: 894000, menuItems: menuMock, mortgageBalance: 220532, purchasePrice: 220532, roi: "+234%" }), _jsx(ShortPartnerTile, { _id: "2", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" }), _jsx(FolderSharing, { folders: FoldersDB, handleAddNewFolder: handleNewFolder, handleFolderClick: handleFolderClick, handleSelect: () => null, initialSelectItem: selectOptions[0], menuItems: menuMock, selectItems: selectOptions }), _jsx(AddToHomefile, { documentList: documentListMock, onItemClick: () => null }), _jsx(ShortPartnerTile, { _id: "3", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" })] })] })] })] }), _jsx(HomeBoardTour, { currentStep: currentStep, handleClose: handleClose, handleStep: handleStep, meetStepUrl: videoMock, isActive: activeTour })] }));
 };
 export const AppBarComponent = ({ setActiveTour = (value) => { }, onClick = (panel) => { }, }) => {
     const handleTour = () => {

package/dist/components/inboxTile/InboxForwardBanner.js

@@ -3,5 +3,5 @@ import { t } from 'i18next';
 import { AspectRatio, Flex, Text, Image, chakra } from '@chakra-ui/react';
 import { IA } from '../../assets/images';
 export const InboxForwardBanner = () => {
-    return (_jsxs(Flex, { p: "base", gap: "base", align: "center", bg: "lightBlue.2", id: 'forwardReceipts', children: [_jsx(AspectRatio, { ratio: 1, minW: "35px", h: "auto", children: _jsx(Image, { src: IA, alt: "IA" }) }), _jsxs(Text, { variant: "home", lineHeight: "1.2", children: [t('inbox.forwardTo'), _jsx(chakra.span, { fontFamily: "secondary", fontSize: "sm", lineHeight: "1", color: "neutral.black", fontWeight: "bold", display: "inline", children: "homefileit@homefile.com." })] })] }));
+    return (_jsxs(Flex, { p: "base", gap: "base", align: "center", bg: "lightBlue.2", id: "forwardReceipts", children: [_jsx(AspectRatio, { ratio: 1, minW: "35px", h: "auto", children: _jsx(Image, { src: IA, alt: "IA" }) }), _jsxs(Text, { variant: "home", lineHeight: "1.2", children: [t('inbox.forwardTo'), _jsx(chakra.span, { fontFamily: "secondary", fontSize: "sm", lineHeight: "1", color: "neutral.black", fontWeight: "bold", display: "inline", children: "homefileit@homefile.com" }), t('inbox.forwardTo2')] })] }));
 };

package/dist/interfaces/forms/dynamicForm/HiddenField.interface.d.ts

@@ -1,8 +1,10 @@
 export interface HiddenFieldI {
     disabled?: boolean;
+    h?: string;
     name: string;
     icon: string;
     id: string;
     isActive?: boolean;
     onClick: (id: string) => void;
+    showPlusIcon?: boolean;
 }

package/dist/mocks/homeboard/documentList.mock.d.ts

@@ -0,0 +1,6 @@
+export declare const documentListMock: {
+    icon: any;
+    active: boolean;
+    label: string;
+    onClick: () => null;
+}[];

package/dist/mocks/homeboard/documentList.mock.js

@@ -0,0 +1,21 @@
+import { Register } from '../../assets/images';
+export const documentListMock = [
+    {
+        icon: "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='33.439'%20height='26.432'%20viewBox='0%200%2033.439%2026.432'%3e%3cg%20id='Grupo_14045'%20data-name='Grupo%2014045'%20transform='translate(-3080.373%201964.161)'%3e%3cpath%20id='Caminho_10681'%20data-name='Caminho%2010681'%20d='M3099.543-1912.748h-.029a3,3,0,0,0,1.153-2.367v-.047c0-.035,0-.073,0-.109a3.01,3.01,0,0,0-3.01-2.93,3.007,3.007,0,0,0-3.007,2.93c0,.035,0,.073,0,.109v.047a3,3,0,0,0,1.153,2.367h-.032a3.061,3.061,0,0,0-3.06,2.977c0,.053,0,.106,0,.158v.868h9.9v-.868c0-.053,0-.106,0-.158A3.058,3.058,0,0,0,3099.543-1912.748Z'%20transform='translate(-8.713%20-32.478)'%20fill='%231e393d'/%3e%3cpath%20id='Caminho_10682'%20data-name='Caminho%2010682'%20d='M3112.933-1943.991h-31.68a.883.883,0,0,0-.88.88v3.983h33.439v-3.983A.882.882,0,0,0,3112.933-1943.991Zm-12.408,3.147h-6.862a.716.716,0,0,1-.715-.716.716.716,0,0,1,.715-.716h6.862a.715.715,0,0,1,.713.716A.715.715,0,0,1,3100.525-1940.844Z'%20transform='translate(0%20-14.254)'%20fill='%2328b5a8'/%3e%3cpath%20id='Caminho_10683'%20data-name='Caminho%2010683'%20d='M3080.373-1927.411v14.772a.883.883,0,0,0,.88.88h31.68a.882.882,0,0,0,.88-.88v-14.772Z'%20transform='translate(0%20-25.97)'%20fill='%23d2edef'/%3e%3cpath%20id='Caminho_10684'%20data-name='Caminho%2010684'%20d='M3133.216-1958.152v2.059h-5.9v-8.067h5.9Zm-1.9-2.943a1.055,1.055,0,0,0-1.054-1.054,1.054,1.054,0,0,0-1.052,1.054,1.053,1.053,0,0,0,1.052,1.051A1.054,1.054,0,0,0,3131.319-1961.095Z'%20transform='translate(-33.172%200)'%20fill='%23d4334b'/%3e%3cpath%20id='Caminho_10685'%20data-name='Caminho%2010685'%20d='M3102.393-1909.955a3.205,3.205,0,0,0-2.927-3.032l.1-.085h-.1a3.162,3.162,0,0,0,.993-2.267l0-.116a3.159,3.159,0,0,0-3.156-3,3.159,3.159,0,0,0-3.153,3l0,.11a3.166,3.166,0,0,0,.992,2.266h-.1l.1.085a3.205,3.205,0,0,0-2.931,3.031c0,.055,0,.111,0,.166v.942H3102.4v-.942C3102.4-1909.845,3102.4-1909.9,3102.393-1909.955Z'%20transform='translate(-8.36%20-32.302)'%20fill='%23324459'/%3e%3crect%20id='Retângulo_15310'%20data-name='Retângulo%2015310'%20width='6.057'%20height='0.88'%20transform='translate(3097.436%20-1950.724)'%20fill='%23324459'/%3e%3crect%20id='Retângulo_15311'%20data-name='Retângulo%2015311'%20width='13.053'%20height='0.88'%20transform='translate(3097.436%20-1947.06)'%20fill='%23324459'/%3e%3crect%20id='Retângulo_15312'%20data-name='Retângulo%2015312'%20width='13.053'%20height='0.88'%20transform='translate(3097.436%20-1944.693)'%20fill='%23324459'/%3e%3crect%20id='Retângulo_15313'%20data-name='Retângulo%2015313'%20width='9.66'%20height='0.88'%20transform='translate(3097.436%20-1942.323)'%20fill='%23324459'/%3e%3c/g%3e%3c/svg%3e",
+        active: true,
+        label: 'Contact',
+        onClick: () => null,
+    },
+    {
+        icon: "data:image/svg+xml,%3csvg%20id='Group_16074'%20data-name='Group%2016074'%20xmlns='http://www.w3.org/2000/svg'%20width='24.959'%20height='21.661'%20viewBox='0%200%2024.959%2021.661'%3e%3cpath%20id='Path_10977'%20data-name='Path%2010977'%20d='M92.02,60.28v3.867l3.867-3.867Z'%20transform='translate(-70.928%20-46.463)'%20fill='%2300c0b7'/%3e%3cpath%20id='Path_10978'%20data-name='Path%2010978'%20d='M0,17.36V35.041H17.681V31.065H7.277V17.36Z'%20transform='translate(0%20-13.381)'%20fill='%2340566b'/%3e%3cpath%20id='Path_10979'%20data-name='Path%2010979'%20d='M31.75,0V17.684H45.565V13.817h3.867V0Z'%20transform='translate(-24.473)'%20fill='%23f6cf76'/%3e%3crect%20id='Rectangle_15756'%20data-name='Rectangle%2015756'%20width='5.561'%20height='0.688'%20transform='translate(10.557%202.998)'%20fill='%2340566b'/%3e%3crect%20id='Rectangle_15757'%20data-name='Rectangle%2015757'%20width='11.032'%20height='0.688'%20transform='translate(10.601%206.523)'%20fill='%2340566b'/%3e%3crect%20id='Rectangle_15758'%20data-name='Rectangle%2015758'%20width='11.032'%20height='0.688'%20transform='translate(10.601%209.173)'%20fill='%2340566b'/%3e%3c/svg%3e",
+        active: true,
+        label: 'Note',
+        onClick: () => null,
+    },
+    {
+        icon: Register,
+        active: true,
+        label: 'Receipt',
+        onClick: () => null,
+    },
+];

package/dist/mocks/index.d.ts

@@ -13,3 +13,4 @@ export * from './receipts';
 export * from './sharedHomePanel';
 export * from './Menu.mock';
 export * from './images';
+export * from './homeboard/documentList.mock';

package/dist/mocks/index.js

@@ -13,3 +13,4 @@ export * from './receipts';
 export * from './sharedHomePanel';
 export * from './Menu.mock';
 export * from './images';
+export * from './homeboard/documentList.mock';

package/dist/stories/homeBoard/AddToHomefile.stories.js

@@ -2,12 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@chakra-ui/react';
 import { AddToHomefile } from '../../components';
 import { action } from '@storybook/addon-actions';
+import { documentListMock } from '../../mocks';
 export default {
     title: 'Components/HomeBoard',
     component: AddToHomefile,
     args: {
         onItemClick: action('onItemClick'),
-        documentList: [],
+        documentList: documentListMock,
     },
 };
 export const AddToHomefileComponent = (args) => {

package/package.json

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

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

@@ -482,7 +482,8 @@
   "inbox": {
     "createReply": "Create Reply",
     "enterContent": "Enter content",
-    "forwardTo": "To use Receipt Autofiler, simply forward reciepts to ",
+    "forwardTo": "You can forward a receipt to ",
+    "forwardTo2": " or add a receipt image below.",
     "from": "From: ",
     "message": "Message"
   },

package/src/components/forms/dynamicForm/HiddenField.tsx

@@ -1,54 +1,65 @@
-import { Center, Image, Text } from '@chakra-ui/react'
+import { Box, Center, Image, Text } from '@chakra-ui/react'
 import { HiddenFieldI } from '@/interfaces'
+import { Plus } from '@/components'
+import { colors } from '@/theme/colors'
 
 export const HiddenField = ({
   disabled,
+  h = '80px',
   icon,
   id,
   isActive,
   name,
   onClick,
+  showPlusIcon = false,
 }: HiddenFieldI) => {
   const handleClick = () => onClick(id)
   return (
-    <Center
-      as="button"
-      disabled={disabled}
-      bg="neutral.white"
-      borderRadius="md"
-      w="auto"
-      h="80px"
-      boxShadow="md"
-      flexDirection="column"
-      onClick={handleClick}
-      gap="1"
-      transition="all .2s ease-in-out"
-      border="1px solid"
-      borderColor={isActive ? 'blue.1' : 'transparent'}
-      _hover={{
-        borderColor: 'blue.1',
-      }}
-      _disabled={{
-        opacity: 0.5,
-        _hover: {
-          borderColor: 'transparent',
-        },
-      }}
-      _active={{
-        boxShadow: 'md',
-      }}
-    >
-      <Image h="24px" w="auto" maxW="35px" src={icon} />
-      <Text
-        textTransform="uppercase"
-        fontSize="xs"
-        noOfLines={2}
-        overflow="hidden"
-        lineHeight="1"
-        width="100%"
+    <Box position="relative">
+      <Center
+        as="button"
+        disabled={disabled}
+        bg="neutral.white"
+        borderRadius="md"
+        w="100%"
+        h={h}
+        boxShadow="md"
+        flexDirection="column"
+        onClick={handleClick}
+        gap="1"
+        transition="all .2s ease-in-out"
+        border="1px solid"
+        borderColor={isActive ? 'blue.1' : 'transparent'}
+        _hover={{
+          borderColor: 'blue.1',
+        }}
+        _disabled={{
+          opacity: 0.5,
+          _hover: {
+            borderColor: 'transparent',
+          },
+        }}
+        _active={{
+          boxShadow: 'md',
+        }}
       >
-        {name}
-      </Text>
-    </Center>
+        <Image h="24px" w="auto" maxW="35px" src={icon} />
+        <Text
+          textTransform="uppercase"
+          fontSize="xs"
+          noOfLines={2}
+          overflow="hidden"
+          lineHeight="1"
+          width="100%"
+        >
+          {name}
+        </Text>
+      </Center>
+      {showPlusIcon && (
+        <Box position="absolute" top="1" left="4">
+          <Plus size={14} stroke={colors.blue[3]} />
+        </Box>
+      )}
+    </Box>
   )
 }

package/src/components/homeBoard/AddToHomefile.tsx

@@ -1,9 +1,17 @@
 import { t } from 'i18next'
-import { Box, Button, Circle, Container, Flex, Stack } from '@chakra-ui/react'
+import {
+  Box,
+  Button,
+  Circle,
+  Container,
+  Flex,
+  Grid,
+  Stack,
+} from '@chakra-ui/react'
 import {
   ChevronRight,
   ContainerHeader,
-  DocumentMenu,
+  HiddenField,
   IconAndText,
   MoreHorizontal,
   Plus,
@@ -47,11 +55,25 @@ export const AddToHomefile = ({
               </Circle>
             </Flex>
           </Button>
-          <DocumentMenu
-            documents={documentList}
-            isDisabled={isDisabled}
-            title={t('sendDocument.btLabel')}
-          />
+          <Grid
+            templateColumns="repeat(auto-fill, minmax(70px, 1fr))"
+            gap="base"
+          >
+            {documentList.map((item) => {
+              return (
+                <HiddenField
+                  key={item.label}
+                  h="58px"
+                  id={item.label}
+                  name={item.label}
+                  icon={item.icon}
+                  disabled={isDisabled}
+                  onClick={onItemClick}
+                  showPlusIcon
+                />
+              )
+            })}
+          </Grid>
         </Stack>
       </Container>
     </TileTooltip>

package/src/components/homeBoard/HomeBoard.tsx

@@ -92,6 +92,7 @@ import {
   socialLinksMock,
   notificationsMock,
   weatherDataMock,
+  documentListMock,
 } from '@/mocks'
 import { useHomeBoard, useWindowDimensions } from '@/hooks'
 import { Painting } from '@/assets/images'
@@ -465,7 +466,10 @@ export const HomeBoard = () => {
                 selectItems={selectOptions}
               />
 
-              <AddToHomefile documentList={[]} onItemClick={() => null} />
+              <AddToHomefile
+                documentList={documentListMock}
+                onItemClick={() => null}
+              />
 
               <ShortPartnerTile
                 _id="3"

package/src/components/inboxTile/InboxForwardBanner.tsx

@@ -4,7 +4,13 @@ import { IA } from '@/assets/images'
 
 export const InboxForwardBanner = () => {
   return (
-    <Flex p="base" gap="base" align="center" bg="lightBlue.2" id='forwardReceipts'>
+    <Flex
+      p="base"
+      gap="base"
+      align="center"
+      bg="lightBlue.2"
+      id="forwardReceipts"
+    >
       <AspectRatio ratio={1} minW="35px" h="auto">
         <Image src={IA} alt="IA" />
       </AspectRatio>
@@ -19,8 +25,9 @@ export const InboxForwardBanner = () => {
           fontWeight="bold"
           display="inline"
         >
-          homefileit@homefile.com.
+          homefileit@homefile.com
         </chakra.span>
+        {t('inbox.forwardTo2')}
       </Text>
     </Flex>
   )

package/src/interfaces/forms/dynamicForm/HiddenField.interface.ts

@@ -2,9 +2,11 @@ import { ReportI } from '@/interfaces'
 
 export interface HiddenFieldI {
   disabled?: boolean
+  h?: string
   name: string
   icon: string
   id: string
   isActive?: boolean
   onClick: (id: string) => void
+  showPlusIcon?: boolean
 }

package/src/mocks/homeboard/documentList.mock.ts

@@ -0,0 +1,22 @@
+import { Register } from '@/assets/images'
+
+export const documentListMock = [
+  {
+    icon: "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='33.439'%20height='26.432'%20viewBox='0%200%2033.439%2026.432'%3e%3cg%20id='Grupo_14045'%20data-name='Grupo%2014045'%20transform='translate(-3080.373%201964.161)'%3e%3cpath%20id='Caminho_10681'%20data-name='Caminho%2010681'%20d='M3099.543-1912.748h-.029a3,3,0,0,0,1.153-2.367v-.047c0-.035,0-.073,0-.109a3.01,3.01,0,0,0-3.01-2.93,3.007,3.007,0,0,0-3.007,2.93c0,.035,0,.073,0,.109v.047a3,3,0,0,0,1.153,2.367h-.032a3.061,3.061,0,0,0-3.06,2.977c0,.053,0,.106,0,.158v.868h9.9v-.868c0-.053,0-.106,0-.158A3.058,3.058,0,0,0,3099.543-1912.748Z'%20transform='translate(-8.713%20-32.478)'%20fill='%231e393d'/%3e%3cpath%20id='Caminho_10682'%20data-name='Caminho%2010682'%20d='M3112.933-1943.991h-31.68a.883.883,0,0,0-.88.88v3.983h33.439v-3.983A.882.882,0,0,0,3112.933-1943.991Zm-12.408,3.147h-6.862a.716.716,0,0,1-.715-.716.716.716,0,0,1,.715-.716h6.862a.715.715,0,0,1,.713.716A.715.715,0,0,1,3100.525-1940.844Z'%20transform='translate(0%20-14.254)'%20fill='%2328b5a8'/%3e%3cpath%20id='Caminho_10683'%20data-name='Caminho%2010683'%20d='M3080.373-1927.411v14.772a.883.883,0,0,0,.88.88h31.68a.882.882,0,0,0,.88-.88v-14.772Z'%20transform='translate(0%20-25.97)'%20fill='%23d2edef'/%3e%3cpath%20id='Caminho_10684'%20data-name='Caminho%2010684'%20d='M3133.216-1958.152v2.059h-5.9v-8.067h5.9Zm-1.9-2.943a1.055,1.055,0,0,0-1.054-1.054,1.054,1.054,0,0,0-1.052,1.054,1.053,1.053,0,0,0,1.052,1.051A1.054,1.054,0,0,0,3131.319-1961.095Z'%20transform='translate(-33.172%200)'%20fill='%23d4334b'/%3e%3cpath%20id='Caminho_10685'%20data-name='Caminho%2010685'%20d='M3102.393-1909.955a3.205,3.205,0,0,0-2.927-3.032l.1-.085h-.1a3.162,3.162,0,0,0,.993-2.267l0-.116a3.159,3.159,0,0,0-3.156-3,3.159,3.159,0,0,0-3.153,3l0,.11a3.166,3.166,0,0,0,.992,2.266h-.1l.1.085a3.205,3.205,0,0,0-2.931,3.031c0,.055,0,.111,0,.166v.942H3102.4v-.942C3102.4-1909.845,3102.4-1909.9,3102.393-1909.955Z'%20transform='translate(-8.36%20-32.302)'%20fill='%23324459'/%3e%3crect%20id='Retângulo_15310'%20data-name='Retângulo%2015310'%20width='6.057'%20height='0.88'%20transform='translate(3097.436%20-1950.724)'%20fill='%23324459'/%3e%3crect%20id='Retângulo_15311'%20data-name='Retângulo%2015311'%20width='13.053'%20height='0.88'%20transform='translate(3097.436%20-1947.06)'%20fill='%23324459'/%3e%3crect%20id='Retângulo_15312'%20data-name='Retângulo%2015312'%20width='13.053'%20height='0.88'%20transform='translate(3097.436%20-1944.693)'%20fill='%23324459'/%3e%3crect%20id='Retângulo_15313'%20data-name='Retângulo%2015313'%20width='9.66'%20height='0.88'%20transform='translate(3097.436%20-1942.323)'%20fill='%23324459'/%3e%3c/g%3e%3c/svg%3e",
+    active: true,
+    label: 'Contact',
+    onClick: () => null,
+  },
+  {
+    icon: "data:image/svg+xml,%3csvg%20id='Group_16074'%20data-name='Group%2016074'%20xmlns='http://www.w3.org/2000/svg'%20width='24.959'%20height='21.661'%20viewBox='0%200%2024.959%2021.661'%3e%3cpath%20id='Path_10977'%20data-name='Path%2010977'%20d='M92.02,60.28v3.867l3.867-3.867Z'%20transform='translate(-70.928%20-46.463)'%20fill='%2300c0b7'/%3e%3cpath%20id='Path_10978'%20data-name='Path%2010978'%20d='M0,17.36V35.041H17.681V31.065H7.277V17.36Z'%20transform='translate(0%20-13.381)'%20fill='%2340566b'/%3e%3cpath%20id='Path_10979'%20data-name='Path%2010979'%20d='M31.75,0V17.684H45.565V13.817h3.867V0Z'%20transform='translate(-24.473)'%20fill='%23f6cf76'/%3e%3crect%20id='Rectangle_15756'%20data-name='Rectangle%2015756'%20width='5.561'%20height='0.688'%20transform='translate(10.557%202.998)'%20fill='%2340566b'/%3e%3crect%20id='Rectangle_15757'%20data-name='Rectangle%2015757'%20width='11.032'%20height='0.688'%20transform='translate(10.601%206.523)'%20fill='%2340566b'/%3e%3crect%20id='Rectangle_15758'%20data-name='Rectangle%2015758'%20width='11.032'%20height='0.688'%20transform='translate(10.601%209.173)'%20fill='%2340566b'/%3e%3c/svg%3e",
+    active: true,
+    label: 'Note',
+    onClick: () => null,
+  },
+  {
+    icon: Register,
+    active: true,
+    label: 'Receipt',
+    onClick: () => null,
+  },
+]

package/src/mocks/index.ts

@@ -13,3 +13,4 @@ export * from './receipts'
 export * from './sharedHomePanel'
 export * from './Menu.mock'
 export * from './images'
+export * from './homeboard/documentList.mock'

package/src/stories/homeBoard/AddToHomefile.stories.tsx

@@ -3,13 +3,14 @@ import { Box } from '@chakra-ui/react'
 import { AddToHomefile } from '@/components'
 import { AddToHomefileI } from '@/interfaces'
 import { action } from '@storybook/addon-actions'
+import { documentListMock } from '@/mocks'
 
 export default {
   title: 'Components/HomeBoard',
   component: AddToHomefile,
   args: {
     onItemClick: action('onItemClick'),
-    documentList: [],
+    documentList: documentListMock,
   },
 } as Meta<AddToHomefileI>