@homefile/components-v2 2.7.5 → 2.7.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/buttons/HelpButton.js +1 -1
- package/dist/components/footers/FooterButtons.js +1 -1
- package/dist/components/headers/PanelHeader.js +1 -1
- package/dist/components/inputs/SelectInput.js +1 -1
- package/dist/components/launchpad/IconMenu.js +1 -1
- package/dist/components/receipts/LaunchpadReceiptPanel.d.ts +2 -0
- package/dist/components/receipts/LaunchpadReceiptPanel.js +21 -0
- package/dist/components/receipts/index.d.ts +1 -0
- package/dist/components/receipts/index.js +1 -0
- package/dist/components/sharedHomePanel/ShareHomeForm.js +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/interfaces/receipts/LaunchpadReceiptPanel.interface.d.ts +7 -0
- package/dist/interfaces/receipts/LaunchpadReceiptPanel.interface.js +1 -0
- package/dist/interfaces/receipts/index.d.ts +1 -0
- package/dist/interfaces/receipts/index.js +1 -0
- package/dist/stories/receipts/LaunchpadReceiptPanel.stories.d.ts +17 -0
- package/dist/stories/receipts/LaunchpadReceiptPanel.stories.js +22 -0
- package/package.json +1 -1
- package/src/components/buttons/HelpButton.tsx +12 -2
- package/src/components/footers/FooterButtons.tsx +3 -0
- package/src/components/headers/PanelHeader.tsx +1 -0
- package/src/components/inputs/SelectInput.tsx +1 -1
- package/src/components/launchpad/IconMenu.tsx +1 -0
- package/src/components/receipts/LaunchpadReceiptPanel.tsx +49 -0
- package/src/components/receipts/index.ts +2 -1
- package/src/components/sharedHomePanel/ShareHomeForm.tsx +1 -0
- package/src/index.ts +1 -0
- package/src/interfaces/receipts/LaunchpadReceiptPanel.interface.ts +8 -0
- package/src/interfaces/receipts/index.ts +2 -1
- package/src/stories/myHomes/HomeDetailsContent.stories.tsx +0 -1
- package/src/stories/receipts/LaunchpadReceiptPanel.stories.tsx +30 -0
|
@@ -3,5 +3,5 @@ import { t } from 'i18next';
|
|
|
3
3
|
import { Button, Image } from '@chakra-ui/react';
|
|
4
4
|
import { NeedHelp } from '../../assets/images';
|
|
5
5
|
export const HelpButton = ({ children, onClick }) => {
|
|
6
|
-
return (_jsxs(_Fragment, { children: [_jsx(Button, { minW: "fit-content", maxW: "fit-content", variant: "icon", onClick: onClick, children: _jsx(Image, { src: NeedHelp, boxSize: "1.8rem", "aria-label": t('help.ariaLabel') }) }), children] }));
|
|
6
|
+
return (_jsxs(_Fragment, { children: [_jsx(Button, { minW: "fit-content", maxW: "fit-content", variant: "icon", onClick: onClick, "data-testid": "help-button", children: _jsx(Image, { src: NeedHelp, boxSize: "1.8rem", "aria-label": t('help.ariaLabel') }) }), children] }));
|
|
7
7
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Box, Button, Flex } from '@chakra-ui/react';
|
|
3
3
|
export const FooterButtons = ({ button1, button2, button3, px = 'base', }) => {
|
|
4
|
-
return (_jsxs(Flex, { align: "center", justifyContent: "space-between", w: "full", px: px, children: [_jsxs(Flex, { align: "center", gap: "2", children: [button1 ? (_jsx(Button, { variant: button1.buttonStyle, onClick: button1.onClick, disabled: button1.isDisabled, isLoading: button1.isLoading, children: button1.label })) : (_jsx(Box, {})), button2 && (_jsx(Button, { variant: button2.buttonStyle, onClick: button2.onClick, disabled: button2.isDisabled, isLoading: button2.isLoading, children: button2.label }))] }), button3 && (_jsx(Button, { variant: button3.buttonStyle, onClick: button3.onClick, disabled: button3.isDisabled, isLoading: button3.isLoading, children: button3.label }))] }));
|
|
4
|
+
return (_jsxs(Flex, { align: "center", justifyContent: "space-between", w: "full", px: px, children: [_jsxs(Flex, { align: "center", gap: "2", children: [button1 ? (_jsx(Button, { "data-testid": "footer-button-1", variant: button1.buttonStyle, onClick: button1.onClick, disabled: button1.isDisabled, isLoading: button1.isLoading, children: button1.label })) : (_jsx(Box, {})), button2 && (_jsx(Button, { "data-testid": "footer-button-2", variant: button2.buttonStyle, onClick: button2.onClick, disabled: button2.isDisabled, isLoading: button2.isLoading, children: button2.label }))] }), button3 && (_jsx(Button, { "data-testid": "footer-button-3", variant: button3.buttonStyle, onClick: button3.onClick, disabled: button3.isDisabled, isLoading: button3.isLoading, children: button3.label }))] }));
|
|
5
5
|
};
|
|
@@ -5,5 +5,5 @@ import { Close } from '..';
|
|
|
5
5
|
import { getIconAltText } from '../../utils';
|
|
6
6
|
export const PanelHeader = ({ bg = 'neutral.white', children, handleCloseButton, icon = '', title = '', }) => {
|
|
7
7
|
const alt = getIconAltText(icon);
|
|
8
|
-
return (_jsxs(Flex, { justify: "space-between", bg: bg, py: "base", pl: "base", pr: "2", alignItems: "center", children: [_jsxs(Flex, { gap: "base", children: [icon && _jsx(Image, { src: icon, alt: alt, maxW: "24px", maxH: "24px" }), _jsx(Text, { fontWeight: "regular", textTransform: "capitalize", children: title })] }), _jsxs(Flex, { align: "center", children: [children, _jsx(IconButton, { variant: "menuIconWithShadow", "aria-label": t('myHomes.newHome.btAria'), maxW: "fit-content", onClick: handleCloseButton, icon: _jsx(Close, { size: 32 }) })] })] }));
|
|
8
|
+
return (_jsxs(Flex, { justify: "space-between", bg: bg, py: "base", pl: "base", pr: "2", alignItems: "center", children: [_jsxs(Flex, { gap: "base", children: [icon && _jsx(Image, { src: icon, alt: alt, maxW: "24px", maxH: "24px" }), _jsx(Text, { fontWeight: "regular", textTransform: "capitalize", children: title })] }), _jsxs(Flex, { align: "center", children: [children, _jsx(IconButton, { "data-testid": "panel-header-icon-button", variant: "menuIconWithShadow", "aria-label": t('myHomes.newHome.btAria'), maxW: "fit-content", onClick: handleCloseButton, icon: _jsx(Close, { size: 32 }) })] })] }));
|
|
9
9
|
};
|
|
@@ -18,6 +18,6 @@ export const SelectInput = ({ filterValue = '', handleClick, handleFilter = () =
|
|
|
18
18
|
handleClick(item);
|
|
19
19
|
setSelectedValue(name);
|
|
20
20
|
};
|
|
21
|
-
return (_jsx(SelectItem, { onClick: handleItemClick, children: _jsx(Text, Object.assign({}, textOptionVariants[variant], { children: name })) }, id));
|
|
21
|
+
return (_jsx(SelectItem, { onClick: handleItemClick, "data-testid": id, children: _jsx(Text, Object.assign({}, textOptionVariants[variant], { children: name })) }, id));
|
|
22
22
|
})] })] }));
|
|
23
23
|
};
|
|
@@ -3,7 +3,7 @@ import { MenuButton, IconButton, Menu, MenuItem, MenuList, Box, } from '@chakra-
|
|
|
3
3
|
import { Overlay } from '..';
|
|
4
4
|
import { Fragment } from 'react/jsx-runtime';
|
|
5
5
|
export const IconMenu = ({ disabled = false, icon, itemForm, menuItems, onClick, variant = 'menuIcon', width = 'fit-content', zIndex = '999', }) => {
|
|
6
|
-
return (_jsx(Box, { zIndex: zIndex, children: _jsx(Menu, { isLazy: true, children: ({ isOpen }) => (_jsxs(_Fragment, { children: [_jsx(Overlay, { bg: "overlay", showOverlay: isOpen, position: "fixed" }), _jsx(MenuButton, { as: IconButton, "aria-label": "Options", icon: _jsx(Fragment, { children: icon }), variant: variant, w: width, disabled: disabled, marginTop: "0 !important", onClick: onClick }), _jsx(MenuList, { zIndex: "5", children: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(({ handleClick, label }) => (_jsx(MenuItem, { onClick: () => handleClick(itemForm), _hover: {
|
|
6
|
+
return (_jsx(Box, { zIndex: zIndex, children: _jsx(Menu, { isLazy: true, children: ({ isOpen }) => (_jsxs(_Fragment, { children: [_jsx(Overlay, { bg: "overlay", showOverlay: isOpen, position: "fixed" }), _jsx(MenuButton, { as: IconButton, "aria-label": "Options", icon: _jsx(Fragment, { children: icon }), variant: variant, w: width, disabled: disabled, marginTop: "0 !important", onClick: onClick }), _jsx(MenuList, { zIndex: "5", children: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(({ handleClick, label }) => (_jsx(MenuItem, { "data-testid": label, onClick: () => handleClick(itemForm), _hover: {
|
|
7
7
|
bg: 'lightGreen.1',
|
|
8
8
|
}, _focus: {
|
|
9
9
|
bg: 'lightGreen.1',
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import { t } from 'i18next';
|
|
14
|
+
import { DrawerContent, DrawerHeader, DrawerBody, DrawerFooter } from '@chakra-ui/react';
|
|
15
|
+
import { Receipts } from '../../assets/images';
|
|
16
|
+
import { PanelHeader, Loading, AssignableReceipts, FooterDrawer } from '..';
|
|
17
|
+
export const LaunchpadReceiptPanel = (_a) => {
|
|
18
|
+
var props = __rest(_a, []);
|
|
19
|
+
const { receipts, rightOptions, onRightSelectChange, leftOptions, onLeftSelectChange, onItemSelectedChange, isLoading, handleClose, footerButtons } = props;
|
|
20
|
+
return (_jsxs(DrawerContent, { bg: "lightBlue.2", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: handleClose, title: t('receipts.title'), icon: Receipts }) }), _jsx(DrawerBody, { p: "0", children: isLoading ? (_jsx(Loading, {})) : (_jsx(AssignableReceipts, { receipts: receipts, rightOptions: rightOptions, onRightSelectChange: onRightSelectChange, leftOptions: leftOptions, onLeftSelectChange: onLeftSelectChange, onItemSelectedChange: onItemSelectedChange, isSelectDisabled: false })) }), _jsx(DrawerFooter, { children: _jsx(FooterDrawer, { isOpen: true, children: footerButtons }) })] }));
|
|
21
|
+
};
|
|
@@ -9,5 +9,5 @@ export const ShareHomeForm = ({ contacts, loading, onAdd, onEmailSave, }) => {
|
|
|
9
9
|
return (_jsx(Box, { p: "base", w: "100%", children: _jsxs(Flex, { w: "100%", gap: "base", children: [_jsxs(Flex, { position: "relative", flex: 1, children: [_jsx(ShareWithButton, { marginRight: "-1px", onClick: handleOpen }), _jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", errorMessage: t('forms.errorEmail'), handleChange: handleChange, hasError: hasError, id: "email", placeholder: t('shareHome.placeholder'), value: contact.email, noOfLines: 1 }), open && (_jsx(ShareHomeContactList, { contacts: contacts, onClick: handleSelectContact, onDone: handleOpen, onChange: handleChange, onSave: (contact) => {
|
|
10
10
|
onEmailSave(contact);
|
|
11
11
|
handleOpen();
|
|
12
|
-
}, selectedContact: contact }))] }), _jsx(SelectInputWithBadge, { handleClick: handleInputSelect, initialValue: accountTypes[0], items: types, width: "70px", height: "md" }), _jsx(Button, { variant: "tertiary", onClick: handleSubmit, disabled: !contact.email, isLoading: loading, h: "48px", children: t('shareHome.btInvite') })] }) }));
|
|
12
|
+
}, selectedContact: contact }))] }), _jsx(SelectInputWithBadge, { handleClick: handleInputSelect, initialValue: accountTypes[0], items: types, width: "70px", height: "md" }), _jsx(Button, { "data-testid": "share-home-form-submit", variant: "tertiary", onClick: handleSubmit, disabled: !contact.email, isLoading: loading, h: "48px", children: t('shareHome.btInvite') })] }) }));
|
|
13
13
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadTour, LeftPanel, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WellDone, YtdTile, } from './components';
|
|
1
|
+
export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WellDone, YtdTile, } from './components';
|
|
2
2
|
export { useCustomToast } from './hooks';
|
|
3
3
|
export { randomColor } from './utils';
|
|
4
4
|
export { billingProxy, dynamicFormProxy, homeCardProxy, partnerContentProxy, partnerDetailsProxy, paymentMethodProxy, recordsInputsProxy, recordsInputsToDBProxy, userDetailsProxy, confirmAddressProxy, } from './proxies';
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadTour, LeftPanel, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WellDone, YtdTile, } from './components';
|
|
1
|
+
export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WellDone, YtdTile, } from './components';
|
|
2
2
|
export { useCustomToast } from './hooks';
|
|
3
3
|
export { randomColor } from './utils';
|
|
4
4
|
export { billingProxy, dynamicFormProxy, homeCardProxy, partnerContentProxy, partnerDetailsProxy, paymentMethodProxy, recordsInputsProxy, recordsInputsToDBProxy, userDetailsProxy, confirmAddressProxy, } from './proxies';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { Meta } from '@storybook/react';
|
|
2
|
+
import { LaunchpadReceiptPanelI } from '../../interfaces';
|
|
3
|
+
declare const _default: Meta<LaunchpadReceiptPanelI>;
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const LaunchpadReceiptPanelComponent: {
|
|
6
|
+
(args: LaunchpadReceiptPanelI): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
args: {
|
|
8
|
+
isSelectDisabled: boolean;
|
|
9
|
+
receipts: import("../../interfaces").ReceiptDetailsDBI[];
|
|
10
|
+
leftOptions: string[];
|
|
11
|
+
rightOptions: string[];
|
|
12
|
+
onItemSelectedChange: import("@storybook/addon-actions").HandlerFunction;
|
|
13
|
+
handleClose: () => null;
|
|
14
|
+
isLoading: boolean;
|
|
15
|
+
footerButtons: import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { LaunchpadReceiptPanel, FooterButtons, RightPanel } from '../../components';
|
|
3
|
+
import { receiptsReceivedMock } from '../../mocks';
|
|
4
|
+
import { action } from '@storybook/addon-actions';
|
|
5
|
+
import { ButtonsFooter } from '../../helpers';
|
|
6
|
+
export default {
|
|
7
|
+
title: 'Components/Receipts',
|
|
8
|
+
component: LaunchpadReceiptPanel,
|
|
9
|
+
};
|
|
10
|
+
export const LaunchpadReceiptPanelComponent = (args) => {
|
|
11
|
+
return (_jsx(RightPanel, { onClose: () => null, isOpen: true, size: "md", children: _jsx(LaunchpadReceiptPanel, Object.assign({}, args)) }));
|
|
12
|
+
};
|
|
13
|
+
LaunchpadReceiptPanelComponent.args = {
|
|
14
|
+
isSelectDisabled: false,
|
|
15
|
+
receipts: receiptsReceivedMock,
|
|
16
|
+
leftOptions: ['Project', 'Room', 'Folder'],
|
|
17
|
+
rightOptions: ['Kitchen', 'Landscape', 'Bedroom'],
|
|
18
|
+
onItemSelectedChange: action('onItemSelectedChange'),
|
|
19
|
+
handleClose: () => null,
|
|
20
|
+
isLoading: false,
|
|
21
|
+
footerButtons: _jsx(FooterButtons, { button1: ButtonsFooter.button1 })
|
|
22
|
+
};
|
package/package.json
CHANGED
|
@@ -6,8 +6,18 @@ import { HelpButtonI } from '@/interfaces'
|
|
|
6
6
|
export const HelpButton = ({ children, onClick }: HelpButtonI) => {
|
|
7
7
|
return (
|
|
8
8
|
<>
|
|
9
|
-
<Button
|
|
10
|
-
|
|
9
|
+
<Button
|
|
10
|
+
minW="fit-content"
|
|
11
|
+
maxW="fit-content"
|
|
12
|
+
variant="icon"
|
|
13
|
+
onClick={onClick}
|
|
14
|
+
data-testid="help-button"
|
|
15
|
+
>
|
|
16
|
+
<Image
|
|
17
|
+
src={NeedHelp}
|
|
18
|
+
boxSize="1.8rem"
|
|
19
|
+
aria-label={t('help.ariaLabel')}
|
|
20
|
+
/>
|
|
11
21
|
</Button>
|
|
12
22
|
{children}
|
|
13
23
|
</>
|
|
@@ -12,6 +12,7 @@ export const FooterButtons = ({
|
|
|
12
12
|
<Flex align="center" gap="2">
|
|
13
13
|
{button1 ? (
|
|
14
14
|
<Button
|
|
15
|
+
data-testid="footer-button-1"
|
|
15
16
|
variant={button1.buttonStyle}
|
|
16
17
|
onClick={button1.onClick}
|
|
17
18
|
disabled={button1.isDisabled}
|
|
@@ -24,6 +25,7 @@ export const FooterButtons = ({
|
|
|
24
25
|
)}
|
|
25
26
|
{button2 && (
|
|
26
27
|
<Button
|
|
28
|
+
data-testid="footer-button-2"
|
|
27
29
|
variant={button2.buttonStyle}
|
|
28
30
|
onClick={button2.onClick}
|
|
29
31
|
disabled={button2.isDisabled}
|
|
@@ -35,6 +37,7 @@ export const FooterButtons = ({
|
|
|
35
37
|
</Flex>
|
|
36
38
|
{button3 && (
|
|
37
39
|
<Button
|
|
40
|
+
data-testid="footer-button-3"
|
|
38
41
|
variant={button3.buttonStyle}
|
|
39
42
|
onClick={button3.onClick}
|
|
40
43
|
disabled={button3.isDisabled}
|
|
@@ -71,7 +71,7 @@ export const SelectInput = ({
|
|
|
71
71
|
setSelectedValue(name)
|
|
72
72
|
}
|
|
73
73
|
return (
|
|
74
|
-
<SelectItem key={id} onClick={handleItemClick}>
|
|
74
|
+
<SelectItem key={id} onClick={handleItemClick} data-testid={id}>
|
|
75
75
|
<Text {...textOptionVariants[variant]}>{name}</Text>
|
|
76
76
|
</SelectItem>
|
|
77
77
|
)
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { t } from 'i18next'
|
|
2
|
+
import { DrawerContent, DrawerHeader, DrawerBody, DrawerFooter } from '@chakra-ui/react'
|
|
3
|
+
import { Receipts } from '@/assets/images'
|
|
4
|
+
import {
|
|
5
|
+
PanelHeader,
|
|
6
|
+
Loading,
|
|
7
|
+
AssignableReceipts,
|
|
8
|
+
FooterDrawer
|
|
9
|
+
} from '@/components'
|
|
10
|
+
import { LaunchpadReceiptPanelI } from '@/interfaces'
|
|
11
|
+
|
|
12
|
+
export const LaunchpadReceiptPanel = ({...props}: LaunchpadReceiptPanelI) => {
|
|
13
|
+
const {receipts, rightOptions, onRightSelectChange, leftOptions, onLeftSelectChange, onItemSelectedChange, isLoading, handleClose, footerButtons} = props
|
|
14
|
+
|
|
15
|
+
return (
|
|
16
|
+
<DrawerContent bg="lightBlue.2">
|
|
17
|
+
<DrawerHeader p="0">
|
|
18
|
+
<PanelHeader
|
|
19
|
+
handleCloseButton={handleClose}
|
|
20
|
+
title={t('receipts.title')}
|
|
21
|
+
icon={Receipts}
|
|
22
|
+
/>
|
|
23
|
+
</DrawerHeader>
|
|
24
|
+
<DrawerBody p="0">
|
|
25
|
+
{
|
|
26
|
+
isLoading ? (
|
|
27
|
+
<Loading />
|
|
28
|
+
) : (
|
|
29
|
+
|
|
30
|
+
<AssignableReceipts
|
|
31
|
+
receipts={receipts}
|
|
32
|
+
rightOptions={rightOptions}
|
|
33
|
+
onRightSelectChange={onRightSelectChange}
|
|
34
|
+
leftOptions={leftOptions}
|
|
35
|
+
onLeftSelectChange={onLeftSelectChange}
|
|
36
|
+
onItemSelectedChange={onItemSelectedChange}
|
|
37
|
+
isSelectDisabled={false}
|
|
38
|
+
/>
|
|
39
|
+
)
|
|
40
|
+
}
|
|
41
|
+
</DrawerBody>
|
|
42
|
+
<DrawerFooter>
|
|
43
|
+
<FooterDrawer isOpen={true}>
|
|
44
|
+
{footerButtons}
|
|
45
|
+
</FooterDrawer>
|
|
46
|
+
</DrawerFooter>
|
|
47
|
+
</DrawerContent>
|
|
48
|
+
)
|
|
49
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -13,4 +13,5 @@ export * from './TotalHeader.interface'
|
|
|
13
13
|
export * from './AssignableReceiptCard.interface'
|
|
14
14
|
export * from './autofiler'
|
|
15
15
|
export * from './displayReceipts'
|
|
16
|
-
export * from './receipt'
|
|
16
|
+
export * from './receipt'
|
|
17
|
+
export * from './LaunchpadReceiptPanel.interface'
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Meta } from '@storybook/react'
|
|
2
|
+
import { LaunchpadReceiptPanel, FooterButtons, RightPanel } from '@/components'
|
|
3
|
+
import { LaunchpadReceiptPanelI } from '@/interfaces'
|
|
4
|
+
import { receiptsReceivedMock } from '@/mocks'
|
|
5
|
+
import { action } from '@storybook/addon-actions'
|
|
6
|
+
import { ButtonsFooter } from '@/helpers'
|
|
7
|
+
|
|
8
|
+
export default {
|
|
9
|
+
title: 'Components/Receipts',
|
|
10
|
+
component: LaunchpadReceiptPanel,
|
|
11
|
+
} as Meta<LaunchpadReceiptPanelI>
|
|
12
|
+
|
|
13
|
+
export const LaunchpadReceiptPanelComponent = (args: LaunchpadReceiptPanelI) => {
|
|
14
|
+
return (
|
|
15
|
+
<RightPanel onClose={() => null} isOpen size="md">
|
|
16
|
+
<LaunchpadReceiptPanel {...args} />
|
|
17
|
+
</RightPanel>
|
|
18
|
+
)
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
LaunchpadReceiptPanelComponent.args = {
|
|
22
|
+
isSelectDisabled: false,
|
|
23
|
+
receipts: receiptsReceivedMock,
|
|
24
|
+
leftOptions: ['Project', 'Room', 'Folder'],
|
|
25
|
+
rightOptions: ['Kitchen', 'Landscape', 'Bedroom'],
|
|
26
|
+
onItemSelectedChange: action('onItemSelectedChange'),
|
|
27
|
+
handleClose: () => null,
|
|
28
|
+
isLoading: false,
|
|
29
|
+
footerButtons: <FooterButtons button1={ButtonsFooter.button1}/>
|
|
30
|
+
}
|