@homefile/components-v2 2.9.1 → 2.9.3

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

@@ -113,7 +113,8 @@
     "share": "Share",
     "skip": "Skip for now",
     "saveStep": "Save Step",
-    "finish": "Finish"
+    "finish": "Finish",
+    "loadMore": "Load More"
   },
   "createDocument": {
     "tabs": {

package/dist/components/contacts/ContactsContent.d.ts

@@ -1,2 +1,2 @@
 import { ContactsContentI } from '../../interfaces';
-export declare const ContactsContent: ({ apiError, contacts, menuItems, handleClose, children, handleAdd, disabled, onClick, onDeleteContacts, onShareContacts, }: ContactsContentI) => import("react/jsx-runtime").JSX.Element;
+export declare const ContactsContent: ({ apiError, contacts, menuItems, handleClose, children, handleAdd, disabled, onClick, onDeleteContacts, onShareContacts, showLoadMore, handleLoadMore, loadMoreDisabled }: ContactsContentI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/contacts/ContactsContent.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { DrawerContent, DrawerHeader, DrawerBody, Flex, Stack, Checkbox, Box, Text, DrawerFooter, } from '@chakra-ui/react';
+import { DrawerContent, DrawerHeader, DrawerBody, Flex, Stack, Checkbox, Box, Text, DrawerFooter, Button } from '@chakra-ui/react';
 import { Contacts } from '../../assets/images';
 import { ContactCard, FooterButtons, FooterDrawer, LeftButtonAnimated, LetterDivider, PanelHeader, SearchInput, } from '..';
 import { useAssignableList, useContactsContent, useWindowDimensions, } from '../../hooks';
-export const ContactsContent = ({ apiError, contacts, menuItems, handleClose, children, handleAdd, disabled, onClick, onDeleteContacts, onShareContacts, }) => {
+export const ContactsContent = ({ apiError, contacts, menuItems, handleClose, children, handleAdd, disabled, onClick, onDeleteContacts, onShareContacts, showLoadMore, handleLoadMore, loadMoreDisabled }) => {
     const { contactsWithoutFirstOrLastName, handleChange, search, splittedContacts, } = useContactsContent(contacts);
     const { getContactByIds, handleItemSelect, handleSelectAll, isItemSelected, itemsSelected, } = useAssignableList({
         onItemSelectedChange: () => null,
@@ -22,7 +22,7 @@ export const ContactsContent = ({ apiError, contacts, menuItems, handleClose, ch
                                 }) }), Number(contactsWithoutFirstOrLastName.length) > 0 && (_jsx(LetterDivider, { letter: "Others" })), _jsx(Box, { children: contactsWithoutFirstOrLastName.map((contact, idx) => {
                                     const selected = isItemSelected(contact._id);
                                     return (_jsx(Card, { apiError: apiError, contact: contact, onClick: onClick, index: idx, menuItems: menuItems, selected: selected, onChange: handleItemSelect }, contact._id));
-                                }) })] }), children] }), _jsx(DrawerFooter, { p: "0", zIndex: "overlay", children: _jsx(FooterDrawer, { isOpen: !isDisabled, children: _jsx(FooterButtons, { button1: {
+                                }) })] }), children, showLoadMore && (_jsx(Flex, { justifyContent: 'center', bg: "lightBlue.2", p: '1rem', children: _jsx(Button, { onClick: handleLoadMore, variant: "primaryFooter", disabled: loadMoreDisabled, children: t('buttons.loadMore') }) }))] }), _jsx(DrawerFooter, { p: "0", zIndex: "overlay", children: _jsx(FooterDrawer, { isOpen: !isDisabled, children: _jsx(FooterButtons, { button1: {
                             buttonStyle: 'primaryFooter',
                             label: t('buttons.share'),
                             onClick: () => onShareContacts(getContactByIds(itemsSelected)),

package/dist/components/homeBoard/HomeBoard.js

@@ -45,7 +45,7 @@ export const HomeBoard = () => {
                     label: 'Edit Contact',
                     handleClick: () => null,
                 },
-            ], onShareContacts: () => null, onDeleteContacts: () => null })),
+            ], onShareContacts: () => null, onDeleteContacts: () => null, handleLoadMore: () => null, showLoadMore: false, loadMoreDisabled: false })),
         PartnerCatalog: (_jsx(PartnerCatalogPanel, { onClose: onRightClose, onPartnerAdd: () => null, partners: partnerCatalogMock })),
         AddHouseholdItem: (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: handleClose, icon: Painting, title: "Add Household Item" }) }), _jsx(DrawerBody, { children: _jsx(DynamicForm, { form: formFieldsMock }) })] })),
         HomeAssistant: (_jsx(HomeAssistantPanel, { currentStep: homeAssistantCurrentStep, currentForm: currentHomeAssistantForm, onNext: handleHomeAssistantFormChange, onBack: handleHomeAssistantBack, onApplianceClick: () => null, onClose: onRightClose, onSave: () => { }, backDisabled: false, nextDisabled: false, hasCompleted: true, isLoading: false })),

package/dist/components/launchpad/Launchpad.js

@@ -6,6 +6,6 @@ import { useLaunchpad } from '../../hooks';
 import { videoMock } from '../../mocks';
 export const Launchpad = () => {
     const { activeTour, currentStep, firstName, handleCardClick, handleClose, handleStep, homes, isLeftOpen, isRightOpen, onLeftClose, onLeftOpen, onRightClose, setActiveTour, showOverlay, } = useLaunchpad();
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { w: "full", children: [_jsx(LeftPanel, { children: _jsx(AddHomeContent, { handleSkipClick: onLeftClose, userFirstName: firstName, handleCreateHomeClick: onLeftClose, isFirstHome: false }), isOpen: isLeftOpen, onClose: onLeftClose, overlay: showOverlay }), _jsx(RightPanel, { children: _jsx(CreateDocumentContent, { handleDateRange: homes.handleDateRange, handleSelectHome: homes.handleSelectHome, homes: homes.homes, initialHome: homes.initialHome, onCloseButton: onRightClose }), isOpen: isRightOpen, onClose: onRightClose, size: "lg" }), _jsx(AppBarComponent, { setActiveTour: setActiveTour }), _jsxs(Box, { children: [_jsx(Header, { firstName: firstName }), _jsxs(Flex, { direction: ['column-reverse', 'row'], gap: "base", w: "full", px: [0, 'base'], children: [_jsx(Box, { w: "full", children: _jsx(MyHomes, { handleFilterClick: (_) => null, cardList: HomeCards, cardMenuItems: MenuItems, handleCardClick: handleCardClick, handleNewHomeClick: onLeftOpen, headerMenuItems: MyHomeMenuItems, addImage: () => null, loading: false, loadingId: "" }) }), _jsxs(Stack, { spacing: "base", children: [_jsx(Subscription, { availableStorage: 8, state: "paid", totalStorage: 10, totalUsed: 2 }), _jsx(LaunchpadReceiptAutofiler, { onClick: () => { }, totalReceipts: 5, totalTitle: "To be assigned" })] })] })] })] }), _jsx(LaunchpadTour, { currentStep: currentStep, handleStep: handleStep, handleClose: handleClose, meetStepUrl: videoMock, isActive: activeTour })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { w: "full", children: [_jsx(LeftPanel, { children: _jsx(AddHomeContent, { handleSkipClick: onLeftClose, userFirstName: firstName, handleCreateHomeClick: onLeftClose, isFirstHome: false }), isOpen: isLeftOpen, onClose: onLeftClose, overlay: showOverlay }), _jsx(RightPanel, { children: _jsx(CreateDocumentContent, { handleDateRange: homes.handleDateRange, handleSelectHome: homes.handleSelectHome, homes: homes.homes, initialHome: homes.initialHome, onCloseButton: onRightClose }), isOpen: isRightOpen, onClose: onRightClose, size: "lg" }), _jsx(AppBarComponent, { setActiveTour: setActiveTour }), _jsxs(Box, { children: [_jsx(Header, { firstName: firstName }), _jsxs(Flex, { direction: ['column-reverse', 'row'], gap: "base", w: "full", px: [0, 'base'], children: [_jsx(Box, { w: "full", children: _jsx(MyHomes, { handleFilterClick: (_) => null, cardList: HomeCards, cardMenuItems: MenuItems, handleCardClick: handleCardClick, handleNewHomeClick: onLeftOpen, headerMenuItems: MyHomeMenuItems, addImage: () => null, loading: false, loadingId: "", handleLoadMore: () => null, showLoadMore: false, loadMoreDisabled: false }) }), _jsxs(Stack, { spacing: "base", children: [_jsx(Subscription, { availableStorage: 8, state: "paid", totalStorage: 10, totalUsed: 2 }), _jsx(LaunchpadReceiptAutofiler, { onClick: () => { }, totalReceipts: 5, totalTitle: "To be assigned" })] })] })] })] }), _jsx(LaunchpadTour, { currentStep: currentStep, handleStep: handleStep, handleClose: handleClose, meetStepUrl: videoMock, isActive: activeTour })] }));
 };
 export default Launchpad;

package/dist/components/myHomes/MyHomes.d.ts

@@ -1,2 +1,2 @@
 import { MyHomesI } from '../../interfaces';
-export declare const MyHomes: ({ cardList, cardMenuItems, handleCardClick, handleFilterClick, handleNewHomeClick, headerMenuItems, addImage, loading, loadingId, }: MyHomesI) => import("react/jsx-runtime").JSX.Element;
+export declare const MyHomes: ({ cardList, cardMenuItems, handleCardClick, handleFilterClick, handleNewHomeClick, headerMenuItems, addImage, loading, loadingId, showLoadMore, handleLoadMore, loadMoreDisabled }: MyHomesI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/myHomes/MyHomes.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { Box, Container, Wrap, WrapItem } from '@chakra-ui/react';
+import { Box, Container, Wrap, WrapItem, Button, Flex } from '@chakra-ui/react';
 import { MyHomesHeader, MyHomeCard, ContainerHeader, MoreHorizontal, TileTooltip, InviteRolesStep, BaseStep, } from '..';
 import { House } from '../../assets/images';
 import { useState } from 'react';
-export const MyHomes = ({ cardList = [], cardMenuItems = [], handleCardClick, handleFilterClick, handleNewHomeClick, headerMenuItems, addImage, loading, loadingId, }) => {
+export const MyHomes = ({ cardList = [], cardMenuItems = [], handleCardClick, handleFilterClick, handleNewHomeClick, headerMenuItems, addImage, loading, loadingId, showLoadMore, handleLoadMore, loadMoreDisabled }) => {
     const [showChildren, setShowChildren] = useState(false);
     const handleHelpClick = () => setShowChildren(!showChildren);
     return (_jsx(TileTooltip, { label: "myHomes", children: _jsxs(Container, { variant: "launchpad", maxW: "none", pb: "3rem", position: "relative", children: [showChildren && (_jsx(BaseStep, { top: "60px", right: "60px", onClose: handleHelpClick, children: _jsx(InviteRolesStep, {}) })), _jsx(ContainerHeader, { disabled: true, menuItems: headerMenuItems, title: t('myHomes.title'), icon: _jsx(MoreHorizontal, { size: 38 }), titleIcon: House, showHelp: true, onHelpClick: handleHelpClick }), _jsx(MyHomesHeader, { onFilterClick: handleFilterClick, onNewHomeClick: handleNewHomeClick }), _jsx(Wrap, { spacing: "base", px: "base", alignItems: "start", children: cardList.length > 0 &&
                         (cardList === null || cardList === void 0 ? void 0 : cardList.map(({ accountType, address, active, _id, image, name }, index) => (_jsx(WrapItem, { children: _jsxs(Container, { w: "179px", position: "relative", transition: "all 0.3s ease-in-out", _hover: {
                                     boxShadow: 'xl',
-                                }, id: index === 0 ? 'homeCard' : '', children: [_jsx(ContainerHeader, { menuItems: accountType === "Member" ? [] : cardMenuItems, itemForm: { _id, name }, icon: _jsx(MoreHorizontal, {}), isThin: true, index: index }), _jsx(Box, { w: "179px", textAlign: "left", children: _jsx(MyHomeCard, { accountType: accountType, address: address, image: image, name: name, active: active, _id: _id, index: index, handleCardClick: handleCardClick, addImage: addImage, loading: loading, loadingId: loadingId }) })] }) }, _id)))) })] }) }));
+                                }, id: index === 0 ? 'homeCard' : '', children: [_jsx(ContainerHeader, { menuItems: accountType === "Member" ? [] : cardMenuItems, itemForm: { _id, name }, icon: _jsx(MoreHorizontal, {}), isThin: true, index: index }), _jsx(Box, { w: "179px", textAlign: "left", children: _jsx(MyHomeCard, { accountType: accountType, address: address, image: image, name: name, active: active, _id: _id, index: index, handleCardClick: handleCardClick, addImage: addImage, loading: loading, loadingId: loadingId }) })] }) }, _id)))) }), showLoadMore && (_jsx(Flex, { justifyContent: 'center', mt: '2rem', children: _jsx(Button, { onClick: handleLoadMore, variant: "primaryFooter", disabled: loadMoreDisabled, children: t('buttons.loadMore') }) }))] }) }));
 };

package/dist/components/tour/HomeBoardTour.js

@@ -132,6 +132,13 @@ export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px'
             topRef: getYPosition(height, height - 300),
             component: (_jsx(BubbleText, { title: t('tour.steps.partnerCatalog.title'), description: t('tour.steps.partnerCatalog.description') })),
         },
+        // Reference component id -> HomeBoard/HomeHeader
+        backToLaunchpad: {
+            arrowLeft: 'left-top',
+            leftRef: ((_r = coordinates.backToLaunchpad) === null || _r === void 0 ? void 0 : _r.x) + getDistanceFromArrow(36),
+            topRef: getYPosition((_s = coordinates.backToLaunchpad) === null || _s === void 0 ? void 0 : _s.y, distanceFromEdgeArrowToBorder),
+            component: (_jsx(BubbleText, { title: t('tour.steps.backToLaunchpad.title'), description: t('tour.steps.backToLaunchpad.description') })),
+        },
         addHouseholdItem: {
             arrowRight: 'right-top',
             leftRef: getXPosition(width, panelBubbleArrowSize + 30),
@@ -144,13 +151,6 @@ export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px'
             topRef: getYPosition(height, height - 400),
             component: (_jsx(BubbleText, { title: t('tour.steps.customizeItems.title'), description: t('tour.steps.customizeItems.description') })),
         },
-        // Reference component id -> HomeBoard/HomeHeader
-        backToLaunchpad: {
-            arrowLeft: 'left-top',
-            leftRef: ((_r = coordinates.backToLaunchpad) === null || _r === void 0 ? void 0 : _r.x) + getDistanceFromArrow(36),
-            topRef: getYPosition((_s = coordinates.backToLaunchpad) === null || _s === void 0 ? void 0 : _s.y, distanceFromEdgeArrowToBorder),
-            component: (_jsx(BubbleText, { title: t('tour.steps.backToLaunchpad.title'), description: t('tour.steps.backToLaunchpad.description') })),
-        },
     };
     if (!isActive)
         return null;

package/dist/interfaces/contacts/ContactsContent.interface.d.ts

@@ -14,6 +14,9 @@ export interface ContactsContentI {
     onClick?: (contact: ContactAndIndexForm) => void;
     onDeleteContacts: (contactsIds: string[]) => void;
     onShareContacts: (contacts: InfoContactCardI[]) => void;
+    showLoadMore: boolean;
+    handleLoadMore: () => void;
+    loadMoreDisabled: boolean;
 }
 export interface CardOnContactListI {
     apiError: ContactsContentI['apiError'];

package/dist/interfaces/myHomes/MyHomes.interface.d.ts

@@ -13,4 +13,7 @@ export interface MyHomesI {
     addImage: (img: HomeImageI) => void;
     loading: boolean;
     loadingId: string;
+    showLoadMore: boolean;
+    handleLoadMore: () => void;
+    loadMoreDisabled: boolean;
 }

package/dist/stories/contacts/ContactsContent.stories.js

@@ -11,6 +11,7 @@ export default {
         onClick: action('onClick'),
         contacts: ContactsMock,
         menuItems: menuMock,
+        showLoadMore: true
     },
 };
 export const ContactsContentComponent = (args) => {

package/dist/stories/myHomes/MyHomes.stories.d.ts

@@ -47,5 +47,8 @@ export declare const MyHomesComponent: {
         loading: boolean;
         loadingId: string;
         handleFilterClick: import("@storybook/addon-actions").HandlerFunction;
+        showLoadMore: boolean;
+        handleLoadMore: import("@storybook/addon-actions").HandlerFunction;
+        loadMoreDisabled: boolean;
     };
 };

package/dist/stories/myHomes/MyHomes.stories.js

@@ -16,4 +16,7 @@ MyHomesComponent.args = {
     loading: true,
     loadingId: '2',
     handleFilterClick: action('Filter Clicked'),
+    showLoadMore: true,
+    handleLoadMore: action("Load More Clicked"),
+    loadMoreDisabled: false
 };

package/package.json

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

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

@@ -113,7 +113,8 @@
     "share": "Share",
     "skip": "Skip for now",
     "saveStep": "Save Step",
-    "finish": "Finish"
+    "finish": "Finish",
+    "loadMore": "Load More"
   },
   "createDocument": {
     "tabs": {

package/src/components/contacts/ContactsContent.tsx

@@ -9,6 +9,7 @@ import {
   Box,
   Text,
   DrawerFooter,
+  Button
 } from '@chakra-ui/react'
 import { Contacts } from '@/assets/images'
 import {
@@ -42,6 +43,9 @@ export const ContactsContent = ({
   onClick,
   onDeleteContacts,
   onShareContacts,
+  showLoadMore,
+  handleLoadMore,
+  loadMoreDisabled
 }: ContactsContentI) => {
   const {
     contactsWithoutFirstOrLastName,
@@ -155,6 +159,15 @@ export const ContactsContent = ({
           </Box>
         </Stack>
         {children}
+        {
+          showLoadMore && (
+            <Flex justifyContent={'center'} bg="lightBlue.2" p={'1rem'}>
+              <Button onClick={handleLoadMore} variant={"primaryFooter"} disabled={loadMoreDisabled}>
+                {t('buttons.loadMore')}
+              </Button>
+            </Flex>
+          )
+        }
       </DrawerBody>
       <DrawerFooter p="0" zIndex="overlay">
         <FooterDrawer isOpen={!isDisabled}>

package/src/components/homeBoard/HomeBoard.tsx

@@ -244,6 +244,9 @@ export const HomeBoard = () => {
         ]}
         onShareContacts={() => null}
         onDeleteContacts={() => null}
+        handleLoadMore={() => null}
+        showLoadMore={false}
+        loadMoreDisabled={false}
       />
     ),
     PartnerCatalog: (

package/src/components/launchpad/Launchpad.tsx

@@ -83,6 +83,9 @@ export const Launchpad = () => {
                 addImage={() => null}
                 loading={false}
                 loadingId=""
+                handleLoadMore={() => null}
+                showLoadMore={false}
+                loadMoreDisabled={false}
               />
             </Box>
             <Stack spacing="base">

package/src/components/myHomes/MyHomes.tsx

@@ -1,5 +1,5 @@
 import { t } from 'i18next'
-import { Box, Container, Wrap, WrapItem } from '@chakra-ui/react'
+import { Box, Container, Wrap, WrapItem, Button, Flex } from '@chakra-ui/react'
 import {
   MyHomesHeader,
   MyHomeCard,
@@ -23,6 +23,9 @@ export const MyHomes = ({
   addImage,
   loading,
   loadingId,
+  showLoadMore,
+  handleLoadMore,
+  loadMoreDisabled
 }: MyHomesI) => {
   const [showChildren, setShowChildren] = useState(false)
   const handleHelpClick = () => setShowChildren(!showChildren)
@@ -88,6 +91,15 @@ export const MyHomes = ({
               )
             )}
         </Wrap>
+          {
+            showLoadMore && (
+              <Flex justifyContent={'center'} mt={'2rem'}>
+                <Button onClick={handleLoadMore} variant={"primaryFooter"} disabled={loadMoreDisabled}>
+                  {t('buttons.loadMore')}
+                </Button>
+              </Flex>
+            )
+          }
       </Container>
     </TileTooltip>
   )

package/src/components/tour/HomeBoardTour.tsx

@@ -247,6 +247,21 @@ export const HomeBoardTour = ({
         />
       ),
     },
+    // Reference component id -> HomeBoard/HomeHeader
+    backToLaunchpad: {
+      arrowLeft: 'left-top',
+      leftRef: coordinates.backToLaunchpad?.x + getDistanceFromArrow(36),
+      topRef: getYPosition(
+        coordinates.backToLaunchpad?.y,
+        distanceFromEdgeArrowToBorder
+      ),
+      component: (
+        <BubbleText
+          title={t('tour.steps.backToLaunchpad.title')}
+          description={t('tour.steps.backToLaunchpad.description')}
+        />
+      ),
+    },
     addHouseholdItem: {
       arrowRight: 'right-top',
       leftRef: getXPosition(width, panelBubbleArrowSize + 30),
@@ -269,21 +284,6 @@ export const HomeBoardTour = ({
         />
       ),
     },
-    // Reference component id -> HomeBoard/HomeHeader
-    backToLaunchpad: {
-      arrowLeft: 'left-top',
-      leftRef: coordinates.backToLaunchpad?.x + getDistanceFromArrow(36),
-      topRef: getYPosition(
-        coordinates.backToLaunchpad?.y,
-        distanceFromEdgeArrowToBorder
-      ),
-      component: (
-        <BubbleText
-          title={t('tour.steps.backToLaunchpad.title')}
-          description={t('tour.steps.backToLaunchpad.description')}
-        />
-      ),
-    },
   }
 
   if (!isActive) return null

package/src/interfaces/contacts/ContactsContent.interface.ts

@@ -14,6 +14,9 @@ export interface ContactsContentI {
   onClick?: (contact: ContactAndIndexForm) => void
   onDeleteContacts: (contactsIds: string[]) => void
   onShareContacts: (contacts: InfoContactCardI[]) => void
+  showLoadMore: boolean
+  handleLoadMore: () => void
+  loadMoreDisabled: boolean
 }
 
 export interface CardOnContactListI {

package/src/interfaces/myHomes/MyHomes.interface.ts

@@ -15,4 +15,7 @@ export interface MyHomesI {
   addImage: (img: HomeImageI) => void
   loading: boolean
   loadingId: string
+  showLoadMore: boolean
+  handleLoadMore: () => void
+  loadMoreDisabled: boolean
 }

package/src/stories/contacts/ContactsContent.stories.tsx

@@ -13,6 +13,7 @@ export default {
     onClick: action('onClick'),
     contacts: ContactsMock,
     menuItems: menuMock,
+    showLoadMore: true
   },
 } as Meta<ContactsContentI>
 

package/src/stories/myHomes/MyHomes.stories.tsx

@@ -20,4 +20,7 @@ MyHomesComponent.args = {
   loading: true,
   loadingId: '2',
   handleFilterClick: action('Filter Clicked'),
+  showLoadMore: true,
+  handleLoadMore: action("Load More Clicked"),
+  loadMoreDisabled: false
 }