@homefile/components-v2 1.0.15 → 1.2.0

package/dist/interfaces/myProfile/index.js

@@ -1,6 +1,7 @@
 export * from './email';
 export * from './details';
 export * from './payment';
+export * from './permissions';
 export * from './CancelAccount.interface';
 export * from './ContextButtons.interface';
 export * from './MyProfileBody.interface';

package/dist/interfaces/myProfile/permissions/ActionCheckbox.interface.d.ts

@@ -0,0 +1,8 @@
+import { ActionsPermitted } from '../..';
+export interface ActionCheckboxI {
+    action: ActionsPermitted;
+    label?: string;
+    isChecked: boolean;
+    isDisabled: boolean;
+    onChange: (action: ActionsPermitted) => void;
+}

package/dist/interfaces/myProfile/permissions/ActionCheckbox.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/myProfile/permissions/RoleButton.interface.d.ts

@@ -0,0 +1,7 @@
+import { RoleType } from '../../../helpers';
+export interface RoleButtonI {
+    role: RoleType;
+    onClick: () => void;
+    isSelected: boolean;
+    showBorder?: boolean;
+}

package/dist/interfaces/myProfile/permissions/RoleButton.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/myProfile/permissions/RolePermissionsTab.interface.d.ts

@@ -0,0 +1,12 @@
+import { ReducedRoleType } from '../../../helpers';
+export type ActionsPermitted = 'view' | 'add' | 'edit' | 'delete';
+export interface RolePermissionI {
+    id: string;
+    label: string;
+    permissions: Record<ActionsPermitted, string[]>;
+}
+export type RolePermissionObject = Record<ReducedRoleType, Record<ActionsPermitted, string[]>>;
+export interface RolePermissionsTabI {
+    selected: RolePermissionObject;
+    onSelect(object: RolePermissionObject): void;
+}

package/dist/interfaces/myProfile/permissions/RolePermissionsTab.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/myProfile/permissions/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ActionCheckbox.interface';
+export * from './RoleButton.interface';
+export * from './RolePermissionsTab.interface';

package/dist/interfaces/myProfile/permissions/index.js

@@ -0,0 +1,3 @@
+export * from './ActionCheckbox.interface';
+export * from './RoleButton.interface';
+export * from './RolePermissionsTab.interface';

package/dist/interfaces/overlay/Overlay.interface.d.ts

@@ -1,4 +1,5 @@
-import { ChakraProps } from "@chakra-ui/react";
+import { ChakraProps } from '@chakra-ui/react';
 export interface OverlayI extends ChakraProps {
     showOverlay?: boolean;
+    onClick?: () => void;
 }

package/dist/interfaces/rooms/GroupCard.interface.d.ts

@@ -8,4 +8,5 @@ export interface GroupCardI extends GroupCardHeaderI, Omit<MoveModalI, 'title'>
     onClickDetails: (id: string) => void;
     onMove: (data: Partial<ReportsI>) => void;
     disabled?: boolean;
+    itemsDisabled?: boolean;
 }

package/dist/interfaces/rooms/ItemCard.interface.d.ts

@@ -6,4 +6,5 @@ export interface ItemCardI extends MoveModalI, Partial<ReportsI> {
     onClickDelete: (id: string) => void;
     onClickDetails: (id: string) => void;
     onMove: (data: Partial<ReportsI>) => void;
+    disabled?: boolean;
 }

package/dist/mocks/myProfile/Permissions.mock.d.ts

@@ -0,0 +1,2 @@
+import { RolePermissionObject } from '../../interfaces';
+export declare const featuresSelectedMock: RolePermissionObject;

package/dist/mocks/myProfile/Permissions.mock.js

@@ -0,0 +1,66 @@
+export const featuresSelectedMock = {
+    member: {
+        view: [
+            'property-data',
+            'financial-data',
+            'partners',
+            'folders',
+            'home-items',
+            'rooms',
+            'rooms-categories',
+        ],
+        add: [],
+        edit: [],
+        delete: [],
+    },
+    contributor: {
+        view: [
+            'property-data',
+            'financial-data',
+            'partners',
+            'folders',
+            'home-items',
+            'rooms',
+            'rooms-categories',
+        ],
+        add: ['home-items', 'rooms', 'rooms-categories'],
+        edit: ['folders', 'rooms', 'rooms-categories'],
+        delete: ['rooms-categories'],
+    },
+    manager: {
+        view: [
+            'property-data',
+            'financial-data',
+            'partners',
+            'folders',
+            'home-items',
+            'rooms',
+            'rooms-categories',
+        ],
+        add: [
+            'property-data',
+            'financial-data',
+            'partners',
+            'folders',
+            'home-items',
+            'rooms',
+            'rooms-categories',
+        ],
+        edit: [
+            'property-data',
+            'financial-data',
+            'folders',
+            'home-items',
+            'rooms',
+            'rooms-categories',
+        ],
+        delete: [
+            'financial-data',
+            'partners',
+            'folders',
+            'home-items',
+            'rooms',
+            'rooms-categories',
+        ],
+    },
+};

package/dist/mocks/myProfile/index.d.ts

@@ -1 +1,2 @@
+export * from './Permissions.mock';
 export * from './Receipts.mock';

package/dist/mocks/myProfile/index.js

@@ -1 +1,2 @@
+export * from './Permissions.mock';
 export * from './Receipts.mock';

package/dist/stories/assets/Illustrations.stories.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Center, Grid, Image, Text } from '@chakra-ui/react';
-import { AlertDelete, AlertDeletePurple, Arrow, Balustrades, Barcode, Batery, Bathroom, Battery2, Bedding, Bedroom, Billing, BillingAddress, BlueFolder, BlueFolderShared, Book, Box as BoxIcon, Building, Calc, Calendar, Calendar2, Catalog, Check, CheckInCircle, CheckPen, Chemistry, Cleaning, Closet, Co2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Cookware, Countertops, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Doors, Drop, DropCalendar, Electricity, Electronics, Entryway, Equipment, Exclamation, Exterior, Face, Feedback, FileUploading, Finance, Fire, Flag, Flooring, FormSent, Foundation, Furniture, Garage, GearPencil, GearTime, GenericField, GlassWater, GoldenBars, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Hardware, Heart, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, LargeAppliances, Laundry, Light, Lighting, LivingRoom, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Mattress, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Notes, Office, Paint, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plants, Plate, Play, Plus, Pool, Pool2, Porch, Price, Profile, ProgressReport, Proposal, Rating, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, Registry, RelationshipHome, ResendPassword, Rocket, Roof, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SmallAppliances, SolarPanel, Sprinkler, Steps, Structure, Structures, Subscription, Supplies, Table, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Tile, Tools, Tools2, Trash, Utensils, VideoIcon, VideoPlay, VioletFolder, WallDecor, Warning, Warranty, Water, WellDone, WholeHome, Wind, Window, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, } from '../../assets/images';
+import { AlertDelete, AlertDeletePurple, Arrow, Balustrades, Barcode, Batery, Bathroom, Battery2, Bedding, Bedroom, Billing, BillingAddress, BlueFolder, BlueFolderShared, Book, Box as BoxIcon, Building, Calc, Calendar, Calendar2, Catalog, Check, CheckInCircle, CheckPen, Chemistry, Cleaning, Closet, Co2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Cookware, Countertops, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Doors, Drop, DropCalendar, Electricity, Electronics, Entryway, Equipment, Exclamation, Exterior, Face, Feedback, FileUploading, Finance, Fire, Flag, Flooring, FormSent, Foundation, Furniture, Garage, GearPencil, GearTime, GenericField, GlassWater, GoldenBars, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Hardware, Heart, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, LargeAppliances, Laundry, Light, Lighting, LivingRoom, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Mattress, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Notes, Office, Paint, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plants, Plate, Play, Plus, Pool, Pool2, Porch, Price, Profile, ProgressReport, Proposal, Rating, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, Registry, RelationshipHome, ResendPassword, Rocket, Roof, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SmallAppliances, SolarPanel, Sprinkler, Steps, Structure, Structures, Subscription, Supplies, Table, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Tile, Tools, Tools2, Trash, Utensils, VideoIcon, VideoPlay, VioletFolder, WallDecor, Warning, Warranty, Water, WellDone, WholeHome, Wind, Window, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, } from '../../assets/images';
 import { CookTop, Dishwasher, Dryer, Freezer, Fridge, Microwave, Oven, Range, Washer, } from '../../assets/images/appliances';
 export default {
     title: 'Assets/Illustrations',
 };
 export const Illustrations = () => {
-    return (_jsxs(Grid, { maxW: "600px", templateColumns: "repeat(auto-fill, minmax(75px, 1fr))", p: "base", gap: "8", children: [_jsx(IconWrapper, { icon: CookTop, name: "CookTop" }), _jsx(IconWrapper, { icon: Dishwasher, name: "Dishwasher" }), _jsx(IconWrapper, { icon: Dryer, name: "Dryer" }), _jsx(IconWrapper, { icon: Freezer, name: "Freezer" }), _jsx(IconWrapper, { icon: Fridge, name: "Fridge" }), _jsx(IconWrapper, { icon: Microwave, name: "Microwave" }), _jsx(IconWrapper, { icon: Oven, name: "Oven" }), _jsx(IconWrapper, { icon: Range, name: "Range" }), _jsx(IconWrapper, { icon: Washer, name: "Washer" }), _jsx(IconWrapper, { icon: Barcode, name: "Barcode" }), _jsx(IconWrapper, { icon: Book, name: "Book" }), _jsx(IconWrapper, { icon: Calendar, name: "Calendar" }), _jsx(IconWrapper, { icon: GoldenBars, name: "GoldenBars" }), _jsx(IconWrapper, { icon: Heart, name: "Heart" }), _jsx(IconWrapper, { icon: Notes, name: "Notes" }), _jsx(IconWrapper, { icon: Rating, name: "Rating" }), _jsx(IconWrapper, { icon: Registry, name: "Registry" }), _jsx(IconWrapper, { icon: Tools2, name: "Tools2" }), _jsx(IconWrapper, { icon: Balustrades, name: "Balustrades" }), _jsx(IconWrapper, { icon: Bedding, name: "Bedding" }), _jsx(IconWrapper, { icon: Cookware, name: "Cookware" }), _jsx(IconWrapper, { icon: Countertops, name: "Countertops" }), _jsx(IconWrapper, { icon: Doors, name: "Doors" }), _jsx(IconWrapper, { icon: Electronics, name: "Electronics" }), _jsx(IconWrapper, { icon: Equipment, name: "Equipment" }), _jsx(IconWrapper, { icon: Exterior, name: "Exterior" }), _jsx(IconWrapper, { icon: Fire, name: "Fire" }), _jsx(IconWrapper, { icon: Flooring, name: "Flooring" }), _jsx(IconWrapper, { icon: Furniture, name: "Furniture" }), _jsx(IconWrapper, { icon: Hardware, name: "Hardware" }), _jsx(IconWrapper, { icon: IA, name: "IA" }), _jsx(IconWrapper, { icon: LargeAppliances, name: "LargeAppliances" }), _jsx(IconWrapper, { icon: Lighting, name: "Lighting" }), _jsx(IconWrapper, { icon: Mattress, name: "Mattress" }), _jsx(IconWrapper, { icon: Paint, name: "Paint" }), _jsx(IconWrapper, { icon: Plants, name: "Plants" }), _jsx(IconWrapper, { icon: Porch, name: "Porch" }), _jsx(IconWrapper, { icon: Roof, name: "Roof" }), _jsx(IconWrapper, { icon: SmallAppliances, name: "SmallAppliances" }), _jsx(IconWrapper, { icon: Steps, name: "Steps" }), _jsx(IconWrapper, { icon: Structures, name: "Structures" }), _jsx(IconWrapper, { icon: Supplies, name: "Supplies" }), _jsx(IconWrapper, { icon: Table, name: "Table" }), _jsx(IconWrapper, { icon: Temperature, name: "Temperature" }), _jsx(IconWrapper, { icon: Tile, name: "Tile" }), _jsx(IconWrapper, { icon: Tools, name: "Tools" }), _jsx(IconWrapper, { icon: Utensils, name: "Utensils" }), _jsx(IconWrapper, { icon: WallDecor, name: "WallDecor" }), _jsx(IconWrapper, { icon: Water, name: "Water" }), _jsx(IconWrapper, { icon: Window, name: "Window" }), _jsx(IconWrapper, { icon: AlertDelete, name: "AlertDelete" }), _jsx(IconWrapper, { icon: AlertDeletePurple, name: "AlertDeletePurple" }), _jsx(IconWrapper, { icon: Arrow, name: "Arrow" }), _jsx(IconWrapper, { icon: Batery, name: "Batery" }), _jsx(IconWrapper, { icon: Bathroom, name: "Bathroom" }), _jsx(IconWrapper, { icon: Battery2, name: "Battery2" }), _jsx(IconWrapper, { icon: Bedroom, name: "Bedroom" }), _jsx(IconWrapper, { icon: Billing, name: "Billing" }), _jsx(IconWrapper, { icon: BillingAddress, name: "BillingAddress" }), _jsx(IconWrapper, { icon: BlueFolder, name: "BlueFolder" }), _jsx(IconWrapper, { icon: BlueFolderShared, name: "BlueFolderShared" }), _jsx(IconWrapper, { icon: BoxIcon, name: "Box" }), _jsx(IconWrapper, { icon: Building, name: "Building" }), _jsx(IconWrapper, { icon: Calc, name: "Calc" }), _jsx(IconWrapper, { icon: Calendar2, name: "Calendar2" }), _jsx(IconWrapper, { icon: Catalog, name: "Catalog" }), _jsx(IconWrapper, { icon: Check, name: "Check" }), _jsx(IconWrapper, { icon: CheckInCircle, name: "CheckInCircle" }), _jsx(IconWrapper, { icon: CheckPen, name: "CheckPen" }), _jsx(IconWrapper, { icon: Chemistry, name: "Chemistry" }), _jsx(IconWrapper, { icon: Cleaning, name: "Cleaning" }), _jsx(IconWrapper, { icon: Closet, name: "Closet" }), _jsx(IconWrapper, { icon: Co2, name: "Co2" }), _jsx(IconWrapper, { icon: ComputerReport, name: "ComputerReport" }), _jsx(IconWrapper, { icon: Confirmation, name: "Confirmation" }), _jsx(IconWrapper, { icon: Construction, name: "Construction" }), _jsx(IconWrapper, { icon: Contacts, name: "Contacts" }), _jsx(IconWrapper, { icon: Contacts2, name: "Contacts2" }), _jsx(IconWrapper, { icon: Contributor, name: "Contributor" }), _jsx(IconWrapper, { icon: CreditCard, name: "CreditCard" }), _jsx(IconWrapper, { icon: Detector, name: "Detector" }), _jsx(IconWrapper, { icon: Diamond, name: "Diamond" }), _jsx(IconWrapper, { icon: DiningRoom, name: "DiningRoom" }), _jsx(IconWrapper, { icon: DocIcon, name: "DocIcon" }), _jsx(IconWrapper, { icon: Document, name: "Document" }), _jsx(IconWrapper, { icon: Drop, name: "Drop" }), _jsx(IconWrapper, { icon: DropCalendar, name: "DropCalendar" }), _jsx(IconWrapper, { icon: Electricity, name: "Electricity" }), _jsx(IconWrapper, { icon: Entryway, name: "Entryway" }), _jsx(IconWrapper, { icon: Exclamation, name: "Exclamation" }), _jsx(IconWrapper, { icon: Face, name: "Face" }), _jsx(IconWrapper, { icon: Feedback, name: "Feedback" }), _jsx(IconWrapper, { icon: FileUploading, name: "FileUploading" }), _jsx(IconWrapper, { icon: Finance, name: "Finance" }), _jsx(IconWrapper, { icon: Flag, name: "Flag" }), _jsx(IconWrapper, { icon: FormSent, name: "FormSent" }), _jsx(IconWrapper, { icon: Foundation, name: "Foundation" }), _jsx(IconWrapper, { icon: Garage, name: "Garage" }), _jsx(IconWrapper, { icon: GearPencil, name: "GearPencil" }), _jsx(IconWrapper, { icon: GearTime, name: "GearTime" }), _jsx(IconWrapper, { icon: GenericField, name: "GenericField" }), _jsx(IconWrapper, { icon: GlassWater, name: "GlassWater" }), _jsx(IconWrapper, { icon: GreenFolder, name: "GreenFolder" }), _jsx(IconWrapper, { icon: Group, name: "Group" }), _jsx(IconWrapper, { icon: Groups, name: "Groups" }), _jsx(IconWrapper, { icon: GuestBedroom, name: "GuestBedroom" }), _jsx(IconWrapper, { icon: Hallway, name: "Hallway" }), _jsx(IconWrapper, { icon: HandPencil, name: "HandPencil" }), _jsx(IconWrapper, { icon: Heater, name: "Heater" }), _jsx(IconWrapper, { icon: Help, name: "Help" }), _jsx(IconWrapper, { icon: HomeAddress, name: "HomeAddress" }), _jsx(IconWrapper, { icon: Homeowner, name: "Homeowner" }), _jsx(IconWrapper, { icon: House, name: "House" }), _jsx(IconWrapper, { icon: HouseHands, name: "HouseHands" }), _jsx(IconWrapper, { icon: ImageDefault, name: "ImageDefault" }), _jsx(IconWrapper, { icon: ImgIcon, name: "ImgIcon" }), _jsx(IconWrapper, { icon: Inbox, name: "Inbox" }), _jsx(IconWrapper, { icon: Insect, name: "Insect" }), _jsx(IconWrapper, { icon: Kitchen, name: "Kitchen" }), _jsx(IconWrapper, { icon: Laundry, name: "Laundry" }), _jsx(IconWrapper, { icon: Light, name: "Light" }), _jsx(IconWrapper, { icon: LivingRoom, name: "LivingRoom" }), _jsx(IconWrapper, { icon: LogoSmall, name: "LogoSmall" }), _jsx(IconWrapper, { icon: MagnifyingGlassReport, name: "MagnifyingGlassReport" }), _jsx(IconWrapper, { icon: Manager, name: "Manager" }), _jsx(IconWrapper, { icon: MasterBedroom, name: "MasterBedroom" }), _jsx(IconWrapper, { icon: Member, name: "Member" }), _jsx(IconWrapper, { icon: Message, name: "Message" }), _jsx(IconWrapper, { icon: MobileDrop, name: "MobileDrop" }), _jsx(IconWrapper, { icon: Money, name: "Money" }), _jsx(IconWrapper, { icon: Mudroom, name: "Mudroom" }), _jsx(IconWrapper, { icon: NeedHelp, name: "NeedHelp" }), _jsx(IconWrapper, { icon: Office, name: "Office" }), _jsx(IconWrapper, { icon: Painting, name: "Painting" }), _jsx(IconWrapper, { icon: PartnerGeneric, name: "PartnerGeneric" }), _jsx(IconWrapper, { icon: Patio, name: "Patio" }), _jsx(IconWrapper, { icon: PdfIcon, name: "PdfIcon" }), _jsx(IconWrapper, { icon: PersonMail, name: "PersonMail" }), _jsx(IconWrapper, { icon: Plate, name: "Plate" }), _jsx(IconWrapper, { icon: Play, name: "Play" }), _jsx(IconWrapper, { icon: Plus, name: "Plus" }), _jsx(IconWrapper, { icon: Pool, name: "Pool" }), _jsx(IconWrapper, { icon: Pool2, name: "Pool2" }), _jsx(IconWrapper, { icon: Price, name: "Price" }), _jsx(IconWrapper, { icon: Profile, name: "Profile" }), _jsx(IconWrapper, { icon: ProgressReport, name: "ProgressReport" }), _jsx(IconWrapper, { icon: Proposal, name: "Proposal" }), _jsx(IconWrapper, { icon: RealEstate, name: "RealEstate" }), _jsx(IconWrapper, { icon: Receipt, name: "Receipt" }), _jsx(IconWrapper, { icon: ReceiptBg, name: "ReceiptBg" }), _jsx(IconWrapper, { icon: ReceiptHouse, name: "ReceiptHouse" }), _jsx(IconWrapper, { icon: Receipts, name: "Receipts" }), _jsx(IconWrapper, { icon: Recipient, name: "Recipient" }), _jsx(IconWrapper, { icon: Records, name: "Records" }), _jsx(IconWrapper, { icon: Register, name: "Register" }), _jsx(IconWrapper, { icon: RelationshipHome, name: "RelationshipHome" }), _jsx(IconWrapper, { icon: ResendPassword, name: "ResendPassword" }), _jsx(IconWrapper, { icon: Rocket, name: "Rocket" }), _jsx(IconWrapper, { icon: Roof2, name: "Roof2" }), _jsx(IconWrapper, { icon: Security, name: "Security" }), _jsx(IconWrapper, { icon: Send, name: "Send" }), _jsx(IconWrapper, { icon: ShareHome, name: "ShareHome" }), _jsx(IconWrapper, { icon: ShareWith, name: "ShareWith" }), _jsx(IconWrapper, { icon: SixtyEight, name: "SixtyEight" }), _jsx(IconWrapper, { icon: SolarPanel, name: "SolarPanel" }), _jsx(IconWrapper, { icon: Sprinkler, name: "Sprinkler" }), _jsx(IconWrapper, { icon: Structure, name: "Structure" }), _jsx(IconWrapper, { icon: Subscription, name: "Subscription" }), _jsx(IconWrapper, { icon: Target, name: "Target" }), _jsx(IconWrapper, { icon: Theatre, name: "Theatre" }), _jsx(IconWrapper, { icon: Thumbnail, name: "Thumbnail" }), _jsx(IconWrapper, { icon: ThumbnailSmall, name: "ThumbnailSmall" }), _jsx(IconWrapper, { icon: ThumbUp, name: "ThumbUp" }), _jsx(IconWrapper, { icon: Trash, name: "Trash" }), _jsx(IconWrapper, { icon: VideoIcon, name: "VideoIcon" }), _jsx(IconWrapper, { icon: VideoPlay, name: "VideoPlay" }), _jsx(IconWrapper, { icon: VioletFolder, name: "VioletFolder" }), _jsx(IconWrapper, { icon: Warning, name: "Warning" }), _jsx(IconWrapper, { icon: Warranty, name: "Warranty" }), _jsx(IconWrapper, { icon: WellDone, name: "WellDone" }), _jsx(IconWrapper, { icon: WholeHome, name: "WholeHome" }), _jsx(IconWrapper, { icon: Wind, name: "Wind" }), _jsx(IconWrapper, { icon: Wizard, name: "Wizard" }), _jsx(IconWrapper, { icon: WizardDetailed, name: "WizardDetailed" }), _jsx(IconWrapper, { icon: WizardQuick, name: "WizardQuick" }), _jsx(IconWrapper, { icon: YellowFolder, name: "YellowFolder" }), _jsx(IconWrapper, { icon: YellowFolderUnshared, name: "YellowFolderUnshared" })] }));
+    return (_jsxs(Grid, { maxW: "600px", templateColumns: "repeat(auto-fill, minmax(75px, 1fr))", p: "base", gap: "8", children: [_jsx(IconWrapper, { icon: CookTop, name: "CookTop" }), _jsx(IconWrapper, { icon: Dishwasher, name: "Dishwasher" }), _jsx(IconWrapper, { icon: Dryer, name: "Dryer" }), _jsx(IconWrapper, { icon: Freezer, name: "Freezer" }), _jsx(IconWrapper, { icon: Fridge, name: "Fridge" }), _jsx(IconWrapper, { icon: Microwave, name: "Microwave" }), _jsx(IconWrapper, { icon: Oven, name: "Oven" }), _jsx(IconWrapper, { icon: Range, name: "Range" }), _jsx(IconWrapper, { icon: Washer, name: "Washer" }), _jsx(IconWrapper, { icon: Barcode, name: "Barcode" }), _jsx(IconWrapper, { icon: Book, name: "Book" }), _jsx(IconWrapper, { icon: Calendar, name: "Calendar" }), _jsx(IconWrapper, { icon: GoldenBars, name: "GoldenBars" }), _jsx(IconWrapper, { icon: Heart, name: "Heart" }), _jsx(IconWrapper, { icon: Notes, name: "Notes" }), _jsx(IconWrapper, { icon: Rating, name: "Rating" }), _jsx(IconWrapper, { icon: Registry, name: "Registry" }), _jsx(IconWrapper, { icon: Tools2, name: "Tools2" }), _jsx(IconWrapper, { icon: Balustrades, name: "Balustrades" }), _jsx(IconWrapper, { icon: Bedding, name: "Bedding" }), _jsx(IconWrapper, { icon: Cookware, name: "Cookware" }), _jsx(IconWrapper, { icon: Countertops, name: "Countertops" }), _jsx(IconWrapper, { icon: Doors, name: "Doors" }), _jsx(IconWrapper, { icon: Electronics, name: "Electronics" }), _jsx(IconWrapper, { icon: Equipment, name: "Equipment" }), _jsx(IconWrapper, { icon: Exterior, name: "Exterior" }), _jsx(IconWrapper, { icon: Fire, name: "Fire" }), _jsx(IconWrapper, { icon: Flooring, name: "Flooring" }), _jsx(IconWrapper, { icon: Furniture, name: "Furniture" }), _jsx(IconWrapper, { icon: Hardware, name: "Hardware" }), _jsx(IconWrapper, { icon: IA, name: "IA" }), _jsx(IconWrapper, { icon: LargeAppliances, name: "LargeAppliances" }), _jsx(IconWrapper, { icon: Lighting, name: "Lighting" }), _jsx(IconWrapper, { icon: Mattress, name: "Mattress" }), _jsx(IconWrapper, { icon: Paint, name: "Paint" }), _jsx(IconWrapper, { icon: Plants, name: "Plants" }), _jsx(IconWrapper, { icon: Porch, name: "Porch" }), _jsx(IconWrapper, { icon: Roof, name: "Roof" }), _jsx(IconWrapper, { icon: SmallAppliances, name: "SmallAppliances" }), _jsx(IconWrapper, { icon: Steps, name: "Steps" }), _jsx(IconWrapper, { icon: Structures, name: "Structures" }), _jsx(IconWrapper, { icon: Supplies, name: "Supplies" }), _jsx(IconWrapper, { icon: Table, name: "Table" }), _jsx(IconWrapper, { icon: Temperature, name: "Temperature" }), _jsx(IconWrapper, { icon: Tile, name: "Tile" }), _jsx(IconWrapper, { icon: Tools, name: "Tools" }), _jsx(IconWrapper, { icon: Utensils, name: "Utensils" }), _jsx(IconWrapper, { icon: WallDecor, name: "WallDecor" }), _jsx(IconWrapper, { icon: Water, name: "Water" }), _jsx(IconWrapper, { icon: Window, name: "Window" }), _jsx(IconWrapper, { icon: AlertDelete, name: "AlertDelete" }), _jsx(IconWrapper, { icon: AlertDeletePurple, name: "AlertDeletePurple" }), _jsx(IconWrapper, { icon: Arrow, name: "Arrow" }), _jsx(IconWrapper, { icon: Batery, name: "Batery" }), _jsx(IconWrapper, { icon: Bathroom, name: "Bathroom" }), _jsx(IconWrapper, { icon: Battery2, name: "Battery2" }), _jsx(IconWrapper, { icon: Bedroom, name: "Bedroom" }), _jsx(IconWrapper, { icon: Billing, name: "Billing" }), _jsx(IconWrapper, { icon: BillingAddress, name: "BillingAddress" }), _jsx(IconWrapper, { icon: BlueFolder, name: "BlueFolder" }), _jsx(IconWrapper, { icon: BlueFolderShared, name: "BlueFolderShared" }), _jsx(IconWrapper, { icon: BoxIcon, name: "Box" }), _jsx(IconWrapper, { icon: Building, name: "Building" }), _jsx(IconWrapper, { icon: Calc, name: "Calc" }), _jsx(IconWrapper, { icon: Calendar2, name: "Calendar2" }), _jsx(IconWrapper, { icon: Catalog, name: "Catalog" }), _jsx(IconWrapper, { icon: Check, name: "Check" }), _jsx(IconWrapper, { icon: CheckInCircle, name: "CheckInCircle" }), _jsx(IconWrapper, { icon: CheckPen, name: "CheckPen" }), _jsx(IconWrapper, { icon: Chemistry, name: "Chemistry" }), _jsx(IconWrapper, { icon: Cleaning, name: "Cleaning" }), _jsx(IconWrapper, { icon: Closet, name: "Closet" }), _jsx(IconWrapper, { icon: Co2, name: "Co2" }), _jsx(IconWrapper, { icon: ComputerReport, name: "ComputerReport" }), _jsx(IconWrapper, { icon: Confirmation, name: "Confirmation" }), _jsx(IconWrapper, { icon: Construction, name: "Construction" }), _jsx(IconWrapper, { icon: Contacts, name: "Contacts" }), _jsx(IconWrapper, { icon: Contacts2, name: "Contacts2" }), _jsx(IconWrapper, { icon: Contributor, name: "Contributor" }), _jsx(IconWrapper, { icon: CreditCard, name: "CreditCard" }), _jsx(IconWrapper, { icon: Detector, name: "Detector" }), _jsx(IconWrapper, { icon: Diamond, name: "Diamond" }), _jsx(IconWrapper, { icon: DiningRoom, name: "DiningRoom" }), _jsx(IconWrapper, { icon: DocIcon, name: "DocIcon" }), _jsx(IconWrapper, { icon: Document, name: "Document" }), _jsx(IconWrapper, { icon: Drop, name: "Drop" }), _jsx(IconWrapper, { icon: DropCalendar, name: "DropCalendar" }), _jsx(IconWrapper, { icon: Electricity, name: "Electricity" }), _jsx(IconWrapper, { icon: Entryway, name: "Entryway" }), _jsx(IconWrapper, { icon: Exclamation, name: "Exclamation" }), _jsx(IconWrapper, { icon: Face, name: "Face" }), _jsx(IconWrapper, { icon: Feedback, name: "Feedback" }), _jsx(IconWrapper, { icon: FileUploading, name: "FileUploading" }), _jsx(IconWrapper, { icon: Finance, name: "Finance" }), _jsx(IconWrapper, { icon: Flag, name: "Flag" }), _jsx(IconWrapper, { icon: FormSent, name: "FormSent" }), _jsx(IconWrapper, { icon: Foundation, name: "Foundation" }), _jsx(IconWrapper, { icon: Garage, name: "Garage" }), _jsx(IconWrapper, { icon: GearPencil, name: "GearPencil" }), _jsx(IconWrapper, { icon: GearTime, name: "GearTime" }), _jsx(IconWrapper, { icon: GenericField, name: "GenericField" }), _jsx(IconWrapper, { icon: GlassWater, name: "GlassWater" }), _jsx(IconWrapper, { icon: GreenFolder, name: "GreenFolder" }), _jsx(IconWrapper, { icon: Group, name: "Group" }), _jsx(IconWrapper, { icon: Groups, name: "Groups" }), _jsx(IconWrapper, { icon: GuestBedroom, name: "GuestBedroom" }), _jsx(IconWrapper, { icon: Hallway, name: "Hallway" }), _jsx(IconWrapper, { icon: HandPencil, name: "HandPencil" }), _jsx(IconWrapper, { icon: Heater, name: "Heater" }), _jsx(IconWrapper, { icon: Help, name: "Help" }), _jsx(IconWrapper, { icon: HomeAddress, name: "HomeAddress" }), _jsx(IconWrapper, { icon: Homeowner, name: "Homeowner" }), _jsx(IconWrapper, { icon: House, name: "House" }), _jsx(IconWrapper, { icon: HouseHands, name: "HouseHands" }), _jsx(IconWrapper, { icon: ImageDefault, name: "ImageDefault" }), _jsx(IconWrapper, { icon: ImgIcon, name: "ImgIcon" }), _jsx(IconWrapper, { icon: Inbox, name: "Inbox" }), _jsx(IconWrapper, { icon: Insect, name: "Insect" }), _jsx(IconWrapper, { icon: Kitchen, name: "Kitchen" }), _jsx(IconWrapper, { icon: Laundry, name: "Laundry" }), _jsx(IconWrapper, { icon: Light, name: "Light" }), _jsx(IconWrapper, { icon: LivingRoom, name: "LivingRoom" }), _jsx(IconWrapper, { icon: LogoSmall, name: "LogoSmall" }), _jsx(IconWrapper, { icon: MagnifyingGlassReport, name: "MagnifyingGlassReport" }), _jsx(IconWrapper, { icon: Manager, name: "Manager" }), _jsx(IconWrapper, { icon: MasterBedroom, name: "MasterBedroom" }), _jsx(IconWrapper, { icon: Member, name: "Member" }), _jsx(IconWrapper, { icon: Message, name: "Message" }), _jsx(IconWrapper, { icon: MobileDrop, name: "MobileDrop" }), _jsx(IconWrapper, { icon: Money, name: "Money" }), _jsx(IconWrapper, { icon: Mudroom, name: "Mudroom" }), _jsx(IconWrapper, { icon: NeedHelp, name: "NeedHelp" }), _jsx(IconWrapper, { icon: Office, name: "Office" }), _jsx(IconWrapper, { icon: Painting, name: "Painting" }), _jsx(IconWrapper, { icon: PartnerGeneric, name: "PartnerGeneric" }), _jsx(IconWrapper, { icon: Patio, name: "Patio" }), _jsx(IconWrapper, { icon: PdfIcon, name: "PdfIcon" }), _jsx(IconWrapper, { icon: PersonMail, name: "PersonMail" }), _jsx(IconWrapper, { icon: Plate, name: "Plate" }), _jsx(IconWrapper, { icon: Play, name: "Play" }), _jsx(IconWrapper, { icon: Plus, name: "Plus" }), _jsx(IconWrapper, { icon: Pool, name: "Pool" }), _jsx(IconWrapper, { icon: Pool2, name: "Pool2" }), _jsx(IconWrapper, { icon: Price, name: "Price" }), _jsx(IconWrapper, { icon: Profile, name: "Profile" }), _jsx(IconWrapper, { icon: ProgressReport, name: "ProgressReport" }), _jsx(IconWrapper, { icon: Proposal, name: "Proposal" }), _jsx(IconWrapper, { icon: RealEstate, name: "RealEstate" }), _jsx(IconWrapper, { icon: Receipt, name: "Receipt" }), _jsx(IconWrapper, { icon: ReceiptBg, name: "ReceiptBg" }), _jsx(IconWrapper, { icon: ReceiptHouse, name: "ReceiptHouse" }), _jsx(IconWrapper, { icon: Receipts, name: "Receipts" }), _jsx(IconWrapper, { icon: Recipient, name: "Recipient" }), _jsx(IconWrapper, { icon: Records, name: "Records" }), _jsx(IconWrapper, { icon: Register, name: "Register" }), _jsx(IconWrapper, { icon: RelationshipHome, name: "RelationshipHome" }), _jsx(IconWrapper, { icon: ResendPassword, name: "ResendPassword" }), _jsx(IconWrapper, { icon: Rocket, name: "Rocket" }), _jsx(IconWrapper, { icon: Roof2, name: "Roof2" }), _jsx(IconWrapper, { icon: Security, name: "Security" }), _jsx(IconWrapper, { icon: Send, name: "Send" }), _jsx(IconWrapper, { icon: ShareHome, name: "ShareHome" }), _jsx(IconWrapper, { icon: ShareWith, name: "ShareWith" }), _jsx(IconWrapper, { icon: SixtyEight, name: "SixtyEight" }), _jsx(IconWrapper, { icon: SMS, name: "SMS" }), _jsx(IconWrapper, { icon: Social, name: "Social" }), _jsx(IconWrapper, { icon: SolarPanel, name: "SolarPanel" }), _jsx(IconWrapper, { icon: Sprinkler, name: "Sprinkler" }), _jsx(IconWrapper, { icon: Structure, name: "Structure" }), _jsx(IconWrapper, { icon: Subscription, name: "Subscription" }), _jsx(IconWrapper, { icon: Target, name: "Target" }), _jsx(IconWrapper, { icon: Theatre, name: "Theatre" }), _jsx(IconWrapper, { icon: Thumbnail, name: "Thumbnail" }), _jsx(IconWrapper, { icon: ThumbnailSmall, name: "ThumbnailSmall" }), _jsx(IconWrapper, { icon: ThumbUp, name: "ThumbUp" }), _jsx(IconWrapper, { icon: Trash, name: "Trash" }), _jsx(IconWrapper, { icon: VideoIcon, name: "VideoIcon" }), _jsx(IconWrapper, { icon: VideoPlay, name: "VideoPlay" }), _jsx(IconWrapper, { icon: VioletFolder, name: "VioletFolder" }), _jsx(IconWrapper, { icon: Warning, name: "Warning" }), _jsx(IconWrapper, { icon: Warranty, name: "Warranty" }), _jsx(IconWrapper, { icon: WellDone, name: "WellDone" }), _jsx(IconWrapper, { icon: WholeHome, name: "WholeHome" }), _jsx(IconWrapper, { icon: Wind, name: "Wind" }), _jsx(IconWrapper, { icon: Wizard, name: "Wizard" }), _jsx(IconWrapper, { icon: WizardDetailed, name: "WizardDetailed" }), _jsx(IconWrapper, { icon: WizardQuick, name: "WizardQuick" }), _jsx(IconWrapper, { icon: YellowFolder, name: "YellowFolder" }), _jsx(IconWrapper, { icon: YellowFolderUnshared, name: "YellowFolderUnshared" })] }));
 };
 const IconWrapper = ({ icon, name }) => {
     return (_jsxs(Center, { flexDirection: "column", children: [_jsx(Image, { src: icon, boxSize: "30px", mb: "2" }), _jsx(Text, { variant: "home", children: name })] }));

package/dist/stories/myProfile/MyProfilePanel.stories.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { t } from 'i18next';
 import { Box, Divider, DrawerBody } from '@chakra-ui/react';
-import { ActiveSubscription, CancelAccount, CreditCardContainer, CreditCardError, EmailPermissions, MonthlyCharge, MyProfileBody, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, PaymentReceipts, RightPanel, TwoFactorSetting, UserDetails, } from '../../components';
+import { ActiveSubscription, CancelAccount, CreditCardContainer, CreditCardError, MonthlyCharge, MyProfileBody, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, PaymentReceipts, RightPanel, RolePermissionsTab, TwoFactorSetting, UserDetails, } from '../../components';
 import { action } from '@storybook/addon-actions';
-import { menuMock, receiptsMock } from '../../mocks';
+import { featuresSelectedMock, menuMock, receiptsMock } from '../../mocks';
 import { useState } from 'react';
 export default {
     title: 'Components/MyProfile',
@@ -15,5 +14,5 @@ export const MyProfilePanelComponent = () => {
     const handleCloseNewCreditCardPanel = () => setIsNewCreditCardPanelOpen(false);
     const handleOpenNewCreditCardPanel = () => setIsNewCreditCardPanelOpen(true);
     const handleError = () => setHasError(true);
-    return (_jsxs(_Fragment, { children: [_jsx(RightPanel, { isOpen: true, onClose: action('onCloseClick'), children: _jsxs(MyProfilePanel, { children: [_jsx(MyProfileHeader, { onClose: action('onCloseClick') }), _jsx(MyProfileBody, { isLoading: false, account: _jsxs(_Fragment, { children: [_jsx(ActiveSubscription, { nextCharge: "2024-12-01", subscriptionPrice: 36, totalStorage: 2, totalUsed: 1, availableStorage: 200, state: 'trial' }), _jsx(Divider, { width: "calc(100% - 26px)", mx: "auto" }), _jsx(MonthlyCharge, { additionalPrice: 36, monthlyCharge: 36, monthDate: "03/01/2023", nextCharge: "01/12/2024", taxPercentage: 8.5, taxValue: 3.06, subtotal: 36.0 }), _jsx(CancelAccount, { label: "Contact Homefile", onClick: action('onCancelAccountClick') })] }), details: _jsxs(_Fragment, { children: [_jsx(UserDetails, { email: "gary.edmunds@gmail.com", firstName: "Gary", lastName: "Edmunds", onSave: action('onSaveClick'), bg: "#4CC35A" }), _jsx(TwoFactorSetting, { email: "gary.edmunds@gmail.com", sms: "2032409108", onChange: action('on2FAChangeClick'), onSave: action('onSaveClick'), defaultValue: "email", twoFactor: 'active' })] }), email: _jsx(EmailPermissions, { initialPermissions: ['Promotions', 'Homefile News'], emailPermissions: t('myProfile.email.permissions').split(', '), onSubmit: (data) => action('onDeleteCard')(data) }), payment: _jsxs(Box, { bg: "lightBlue.2", h: "inherit", children: [_jsx(CreditCardContainer, { cardNumber: "1234 5678 9012 3456", brand: "visa", onAddCard: action('onAddCard'), onDeleteCard: handleOpenNewCreditCardPanel, onSubmit: (data) => action('onDeleteCard')(data), cardHolder: "Gary Edmunds", cvv: "123", expirationMonth: "12", expirationYear: "2024" }), _jsx(PaymentReceipts, { receipts: receiptsMock, menuItems: menuMock })] }) })] }) }), _jsx(RightPanel, { isOpen: isNewCreditCardPanelOpen, onClose: handleCloseNewCreditCardPanel, children: _jsxs(MyProfilePanel, { children: [_jsx(MyProfileHeader, { onClose: handleCloseNewCreditCardPanel }), _jsxs(DrawerBody, { p: "0", children: [_jsx(NewCreditCardHeader, { onClick: handleCloseNewCreditCardPanel }), hasError && _jsx(CreditCardError, {}), _jsx(NewCreditCard, { hasError: hasError, onSubmit: handleError })] })] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(RightPanel, { isOpen: true, onClose: action('onCloseClick'), children: _jsxs(MyProfilePanel, { children: [_jsx(MyProfileHeader, { onClose: action('onCloseClick') }), _jsx(MyProfileBody, { isLoading: false, account: _jsxs(_Fragment, { children: [_jsx(ActiveSubscription, { nextCharge: "2024-12-01", subscriptionPrice: 36, totalStorage: 2, totalUsed: 1, availableStorage: 200, state: 'trial' }), _jsx(Divider, { width: "calc(100% - 26px)", mx: "auto" }), _jsx(MonthlyCharge, { additionalPrice: 36, monthlyCharge: 36, monthDate: "03/01/2023", nextCharge: "01/12/2024", taxPercentage: 8.5, taxValue: 3.06, subtotal: 36.0 }), _jsx(CancelAccount, { label: "Contact Homefile", onClick: action('onCancelAccountClick') })] }), details: _jsxs(_Fragment, { children: [_jsx(UserDetails, { email: "gary.edmunds@gmail.com", firstName: "Gary", lastName: "Edmunds", onSave: action('onSaveClick'), bg: "#4CC35A" }), _jsx(TwoFactorSetting, { email: "gary.edmunds@gmail.com", sms: "2032409108", onChange: action('on2FAChangeClick'), onSave: action('onSaveClick'), defaultValue: "email", twoFactor: 'active' })] }), payment: _jsxs(Box, { bg: "lightBlue.2", h: "inherit", children: [_jsx(CreditCardContainer, { cardNumber: "1234 5678 9012 3456", brand: "visa", onAddCard: action('onAddCard'), onDeleteCard: handleOpenNewCreditCardPanel, onSubmit: (data) => action('onDeleteCard')(data), cardHolder: "Gary Edmunds", cvv: "123", expirationMonth: "12", expirationYear: "2024" }), _jsx(PaymentReceipts, { receipts: receiptsMock, menuItems: menuMock })] }), rolePermissions: _jsx(RolePermissionsTab, { selected: featuresSelectedMock, onSelect: action('onSelect') }) })] }) }), _jsx(RightPanel, { isOpen: isNewCreditCardPanelOpen, onClose: handleCloseNewCreditCardPanel, children: _jsxs(MyProfilePanel, { children: [_jsx(MyProfileHeader, { onClose: handleCloseNewCreditCardPanel }), _jsxs(DrawerBody, { p: "0", children: [_jsx(NewCreditCardHeader, { onClick: handleCloseNewCreditCardPanel }), hasError && _jsx(CreditCardError, {}), _jsx(NewCreditCard, { hasError: hasError, onSubmit: handleError })] })] }) })] }));
 };

package/dist/stories/myProfile/permissions/RolePermissionsTab.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { RolePermissionsTabI } from '../../../interfaces';
+declare const _default: Meta<RolePermissionsTabI>;
+export default _default;
+export declare const RolePermissionsTabComponent: (args: RolePermissionsTabI) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/myProfile/permissions/RolePermissionsTab.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@chakra-ui/react';
+import { action } from '@storybook/addon-actions';
+import { RolePermissionsTab } from '../../../components';
+import { featuresSelectedMock } from '../../../mocks';
+export default {
+    title: 'Components/MyProfile',
+    component: RolePermissionsTab,
+    args: {
+        selected: featuresSelectedMock,
+        onSelect: action('onSelect'),
+    },
+};
+export const RolePermissionsTabComponent = (args) => {
+    return (_jsx(Box, { w: ['full', '500px'], bg: "white", children: _jsx(RolePermissionsTab, Object.assign({}, args)) }));
+};

package/dist/theme/colors.d.ts

@@ -110,4 +110,5 @@ export declare const colors: {
         2: string;
     };
     skyGradient: string;
+    overlay: string;
 };

package/dist/theme/colors.js

@@ -110,4 +110,5 @@ export const colors = {
         2: '#F544DA',
     },
     skyGradient: 'linear(to-b, #cff1fc, #F9FEFF)',
+    overlay: '#00000040',
 };

package/package.json

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

package/src/assets/images/index.ts

@@ -119,6 +119,8 @@ import Send from './send.svg'
 import ShareHome from './share-home.svg'
 import ShareWith from './share-with.svg'
 import SixtyEight from './sixty-eight.svg'
+import SMS from './sms.svg'
+import Social from './social.svg'
 import SolarPanel from './solar-panel.svg'
 import Sprinkler from './sprinkler.svg'
 import Structure from './structure.svg'
@@ -269,6 +271,8 @@ export {
   ShareHome,
   ShareWith,
   SixtyEight,
+  SMS,
+  Social,
   SolarPanel,
   Sprinkler,
   Structure,

package/src/assets/images/sms.svg

@@ -0,0 +1,21 @@
+<svg id="Group_18906" data-name="Group 18906" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.228" height="24" viewBox="0 0 20.228 24">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_22680" data-name="Rectangle 22680" width="20.227" height="24" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_18894" data-name="Group 18894" clip-path="url(#clip-path)">
+    <path id="Path_14256" data-name="Path 14256" d="M7.713,26.082H8.926l1.288,1.469L11.5,26.082h1.815v5.3H0V14.26H13.316v3.114h-5.6a.762.762,0,0,0-.76.76v7.188a.762.762,0,0,0,.76.76" transform="translate(0 -11.033)" fill="#40566b"/>
+    <path id="Path_14257" data-name="Path 14257" d="M15.3,26.083v5.3H3.618V14.26H15.3V26.083Z" transform="translate(-2.799 -11.033)" fill="#daf1f3"/>
+    <rect id="Rectangle_22678" data-name="Rectangle 22678" width="6.635" height="0.453" transform="matrix(0.707, -0.707, 0.707, 0.707, 3.174, 12.446)" fill="#fff"/>
+    <rect id="Rectangle_22679" data-name="Rectangle 22679" width="6.593" height="0.453" transform="matrix(0.707, -0.707, 0.707, 0.707, 3.174, 15.761)" fill="#fff"/>
+    <path id="Path_14258" data-name="Path 14258" d="M44,28.781v7.188a.762.762,0,0,1-.758.76H35.27L33.982,38.2l-1.287-1.469H31.481a.762.762,0,0,1-.76-.76V28.781a.762.762,0,0,1,.76-.76H43.238a.761.761,0,0,1,.758.76" transform="translate(-23.769 -21.68)" fill="#e24c5d"/>
+    <path id="Path_14259" data-name="Path 14259" d="M70.756,41.351a1.026,1.026,0,1,1-1.025,1.025,1.026,1.026,0,0,1,1.025-1.025" transform="translate(-53.95 -31.993)" fill="#fff"/>
+    <path id="Path_14260" data-name="Path 14260" d="M56.147,41.351a1.026,1.026,0,1,1-1.028,1.025,1.026,1.026,0,0,1,1.028-1.025" transform="translate(-42.645 -31.993)" fill="#fff"/>
+    <path id="Path_14261" data-name="Path 14261" d="M41.548,41.351a1.026,1.026,0,1,1-1.027,1.025,1.025,1.025,0,0,1,1.027-1.025" transform="translate(-31.351 -31.993)" fill="#fff"/>
+    <path id="Path_14262" data-name="Path 14262" d="M13.316,89.931v2.385a1.268,1.268,0,0,1-1.265,1.263H1.263A1.268,1.268,0,0,1,0,92.316V89.931Z" transform="translate(0 -69.579)" fill="#40566b"/>
+    <path id="Path_14263" data-name="Path 14263" d="M13.316,1.263V3.227H0V1.263A1.268,1.268,0,0,1,1.263,0H12.051a1.268,1.268,0,0,1,1.265,1.263" fill="#40566b"/>
+    <path id="Path_14264" data-name="Path 14264" d="M25.614,6.309h-2.34a.339.339,0,1,1,0-.679h2.34a.339.339,0,0,1,0,.679" transform="translate(-17.745 -4.356)" fill="#18252f"/>
+    <path id="Path_14265" data-name="Path 14265" d="M27.057,94.069a.977.977,0,1,1-.977-.977.977.977,0,0,1,.977.977" transform="translate(-19.422 -72.025)" fill="#323954"/>
+  </g>
+</svg>

package/src/assets/images/social.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22.558" height="17.29" viewBox="0 0 22.558 17.29">
+  <g id="Group_18914" data-name="Group 18914" transform="translate(-2445.885 -801.401)">
+    <g id="Group_18893" data-name="Group 18893" transform="translate(2445.885 801.401)">
+      <g id="Group_18913" data-name="Group 18913" transform="translate(0 0)">
+        <path id="Path_14254" data-name="Path 14254" d="M22.558,13.5A1.3,1.3,0,0,1,21.264,14.8H7.73L5.541,17.29,3.351,14.8H1.291A1.3,1.3,0,0,1,0,13.5V1.291A1.293,1.293,0,0,1,1.291,0H21.264a1.3,1.3,0,0,1,1.294,1.291Zm-4.34-6.51-5.272,0-5.274,0" transform="translate(0 0)" fill="#e24c5d"/>
+      </g>
+    </g>
+    <text id="_" data-name="#" transform="translate(2450.934 812.401)" fill="#fff" font-size="10" font-family="Poppins-Medium, Poppins" font-weight="500"><tspan x="0" y="0">#</tspan></text>
+  </g>
+</svg>

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

@@ -108,6 +108,7 @@
     "next": "Next",
     "previous": "Previous",
     "save": "Save",
+    "send": "Send",
     "skip": "Skip for now"
   },
   "createDocument": {
@@ -138,6 +139,11 @@
   },
   "contacts": {
     "addBtn": "Contact",
+    "error": "Email should be from a valid Homefile account",
+    "shareContact": "Share Contact",
+    "placeholders": {
+      "email": "Enter Email"
+    },
     "title": "Contacts"
   },
   "daysOfWeek": {
@@ -448,6 +454,13 @@
     "title": "My Homes"
   },
   "myProfile": {
+    "actions": {
+      "add": "Add",
+      "can": "Can",
+      "edit": "Edit",
+      "delete": "Delete",
+      "view": "View"
+    },
     "account": {
       "cancel": "Cancel Account",
       "cancelInfo": "To cancel your Homefile account, please contact Homefile below.",
@@ -477,6 +490,20 @@
       "receiptsTitle": "Receipts",
       "toDelete": "To delete a card, you must first add a new card."
     },
+    "permissions": {
+      "contributor": {
+        "description": "Can view, add, and edit the information when you share a home.",
+        "title": "Contributor Permissions"
+      },
+      "manager": {
+        "description": "Can view, add, and edit all home information within a home.",
+        "title": "Manager Permissions"
+      },
+      "member": {
+        "description": "Can only view information when you share a home.",
+        "title": "Member Permissions"
+      }
+    },
     "placeholders": {
       "cardHolder": "Name on card",
       "cardNumber": "Card number",
@@ -491,7 +518,8 @@
       "tab2": "Subscription",
       "tab3": "Payment",
       "tab4": "Email",
-      "tab5": "Sharing"
+      "tab5": "Sharing",
+      "tab6": "Role Permissions"
     }
   },
   "newPassword": {

package/src/components/contacts/ContactCard.tsx

@@ -7,7 +7,13 @@ import {
 } from '@/components'
 import { colors } from '@/theme/colors'
 
-export const ContactCard = ({ contact, index, menuItems }: ContactCardI) => {
+export const ContactCard = ({
+  apiError,
+  contact,
+  index,
+  menuItems,
+  onShare,
+}: ContactCardI) => {
   const {
     address,
     city,
@@ -22,7 +28,12 @@ export const ContactCard = ({ contact, index, menuItems }: ContactCardI) => {
   return (
     <Container maxW={'none'}>
       <Stack pb="base" px="base">
-        <ContactCardHeader contact={contact} menuItems={menuItems} />
+        <ContactCardHeader
+          apiError={apiError}
+          contact={contact}
+          menuItems={menuItems}
+          onShare={onShare}
+        />
         <Flex justify="space-between" align="stretch" gap="base">
           <ContactCardInfo
             {...{ company, email, firstName, lastName, phone, index }}

package/src/components/contacts/ContactCardHeader.tsx

@@ -1,14 +1,22 @@
 import { t } from 'i18next'
-import { Flex, Image, Text } from '@chakra-ui/react'
+import { Flex, IconButton, Image, Text, useDisclosure } from '@chakra-ui/react'
 import { Contacts } from '@/assets/images'
-import { IconMenu, MoreHorizontal } from '@/components'
+import {
+  IconMenu,
+  MoreHorizontal,
+  ShareContactPopover,
+  ShareIcon,
+} from '@/components'
 import { ContactCardHeaderI } from '@/interfaces'
 
 export const ContactCardHeader = ({
+  apiError,
   contact,
   menuItems,
+  onShare,
 }: ContactCardHeaderI) => {
   const { category, title } = contact
+  const { isOpen, onOpen, onClose } = useDisclosure()
   return (
     <Flex align="center" justify="space-between">
       <Flex align="center" gap="base">
@@ -27,12 +35,29 @@ export const ContactCardHeader = ({
           <Text fontSize="xs">{title.toUpperCase()}</Text>
         </Flex>
       </Flex>
-      <IconMenu
-        icon={<MoreHorizontal size={32} />}
-        itemForm={contact}
-        menuItems={menuItems}
-        disabled={!menuItems}
-      />
+      <Flex align="center" position="relative" gap="base" py="base">
+        <IconButton
+          aria-label="share"
+          variant="menuIcon"
+          icon={<ShareIcon size={18} />}
+          onClick={onOpen}
+          w="fit-content"
+        />
+        <ShareContactPopover
+          apiError={apiError}
+          contact={contact}
+          isOpen={isOpen}
+          onClose={onClose}
+          onShare={onShare}
+        />
+
+        <IconMenu
+          icon={<MoreHorizontal size={32} />}
+          itemForm={contact}
+          menuItems={menuItems}
+          disabled={menuItems.length < 1}
+        />
+      </Flex>
     </Flex>
   )
 }

package/src/components/contacts/ContactsContent.tsx

@@ -17,12 +17,14 @@ import { ContactsContentI } from '@/interfaces'
 import { useContactsContent, useWindowDimensions } from '@/hooks'
 
 export const ContactsContent = ({
+  apiError,
   contacts,
   menuItems,
   handleClose,
   children,
   handleAdd,
   disabled,
+  onShare,
 }: ContactsContentI) => {
   const { filteredContacts, handleChange, search } =
     useContactsContent(contacts)
@@ -60,9 +62,11 @@ export const ContactsContent = ({
         <Stack spacing="2" p="base" bg="lightBlue.2" minHeight="full">
           {filteredContacts.map((contact, idx) => (
             <ContactCard
+              apiError={apiError}
               key={contact._id}
               contact={contact}
               menuItems={menuItems}
+              onShare={onShare}
               index={idx}
             />
           ))}