@homefile/components-v2 1.5.0 → 1.6.1

package/dist/assets/images/alerts/index.d.ts

@@ -0,0 +1,2 @@
+import SmokeDetectroExpiredImage from './smoke-detector-expired.jpg';
+export { SmokeDetectroExpiredImage };

package/dist/assets/images/alerts/index.js

@@ -0,0 +1,2 @@
+import SmokeDetectroExpiredImage from './smoke-detector-expired.jpg';
+export { SmokeDetectroExpiredImage };

package/dist/assets/images/alerts/index.ts

@@ -0,0 +1,3 @@
+import SmokeDetectroExpiredImage from './smoke-detector-expired.jpg'
+
+export { SmokeDetectroExpiredImage }

package/dist/assets/images/battery.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.027" height="44.459" viewBox="0 0 26.027 44.459">
+  <g id="Group_22444" data-name="Group 22444" transform="translate(-6573.237 14695.079)">
+    <g id="Group_22328" data-name="Group 22328" transform="translate(-838.979)">
+      <rect id="Rectangle_25697" data-name="Rectangle 25697" width="4.116" height="16.135" transform="translate(7417.163 -14690.963) rotate(-90)" fill="#969696"/>
+      <path id="Path_16018" data-name="Path 16018" d="M0,0V26.027H40.343V0Z" transform="translate(7412.217 -14650.62) rotate(-90)" fill="#696969"/>
+    </g>
+    <path id="Path_16020" data-name="Path 16020" d="M0,16.366H8.761L4.507,28.283,16.514,11.9H7.757L12.516,0Z" transform="translate(6577.994 -14685.009)" fill="#ffbd27"/>
+  </g>
+</svg>

package/dist/assets/images/index.d.ts

@@ -3,6 +3,7 @@ import AlertDeletePurple from './alert-delete-purple.svg';
 import Arrow from './arrow.svg';
 import Batery from './batery.svg';
 import Bathroom from './bathroom.svg';
+import Battery from './battery.svg';
 import Battery2 from './battery2.svg';
 import Bedroom from './bedroom.svg';
 import BgBlue from './bg-blue.png';
@@ -146,12 +147,14 @@ import Warranty from './warranty.svg';
 import WellDone from './well-done.png';
 import WholeHome from './whole-home.svg';
 import Wind from './wind.svg';
+import WindWhite from './wind-white.svg';
 import Wizard from './wizard.svg';
 import WizardDetailed from './wizard-detailed.svg';
 import WizardQuick from './wizard-quick.svg';
 import YellowFolder from './yellow-folder.svg';
 import YellowFolderUnshared from './yellow-folder-unshared.svg';
-export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, Box, Building, Calc, Calendar2, Catalog, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Drop, DropCalendar, Electricity, Entryway, Exclamation, Face, Feedback, FileUploading, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
+export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, Box, Building, Calc, Calendar2, Catalog, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Drop, DropCalendar, Electricity, Entryway, Exclamation, Face, Feedback, FileUploading, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
+export * from './alerts';
 export * from './appliances';
 export * from './clouds-animation';
 export * from './form';

package/dist/assets/images/index.js

@@ -3,6 +3,7 @@ import AlertDeletePurple from './alert-delete-purple.svg';
 import Arrow from './arrow.svg';
 import Batery from './batery.svg';
 import Bathroom from './bathroom.svg';
+import Battery from './battery.svg';
 import Battery2 from './battery2.svg';
 import Bedroom from './bedroom.svg';
 import BgBlue from './bg-blue.png';
@@ -146,12 +147,14 @@ import Warranty from './warranty.svg';
 import WellDone from './well-done.png';
 import WholeHome from './whole-home.svg';
 import Wind from './wind.svg';
+import WindWhite from './wind-white.svg';
 import Wizard from './wizard.svg';
 import WizardDetailed from './wizard-detailed.svg';
 import WizardQuick from './wizard-quick.svg';
 import YellowFolder from './yellow-folder.svg';
 import YellowFolderUnshared from './yellow-folder-unshared.svg';
-export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, Box, Building, Calc, Calendar2, Catalog, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Drop, DropCalendar, Electricity, Entryway, Exclamation, Face, Feedback, FileUploading, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
+export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, Box, Building, Calc, Calendar2, Catalog, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Drop, DropCalendar, Electricity, Entryway, Exclamation, Face, Feedback, FileUploading, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
+export * from './alerts';
 export * from './appliances';
 export * from './clouds-animation';
 export * from './form';

package/dist/assets/images/index.ts

@@ -3,6 +3,7 @@ import AlertDeletePurple from './alert-delete-purple.svg'
 import Arrow from './arrow.svg'
 import Batery from './batery.svg'
 import Bathroom from './bathroom.svg'
+import Battery from './battery.svg'
 import Battery2 from './battery2.svg'
 import Bedroom from './bedroom.svg'
 import BgBlue from './bg-blue.png'
@@ -146,6 +147,7 @@ import Warranty from './warranty.svg'
 import WellDone from './well-done.png'
 import WholeHome from './whole-home.svg'
 import Wind from './wind.svg'
+import WindWhite from './wind-white.svg'
 import Wizard from './wizard.svg'
 import WizardDetailed from './wizard-detailed.svg'
 import WizardQuick from './wizard-quick.svg'
@@ -158,6 +160,7 @@ export {
   Arrow,
   Batery,
   Bathroom,
+  Battery,
   Battery2,
   Bedroom,
   BgBlue,
@@ -301,6 +304,7 @@ export {
   WellDone,
   WholeHome,
   Wind,
+  WindWhite,
   Wizard,
   WizardDetailed,
   WizardQuick,
@@ -308,6 +312,7 @@ export {
   YellowFolderUnshared,
 }
 
+export * from './alerts'
 export * from './appliances'
 export * from './clouds-animation'
 export * from './form'

package/dist/assets/images/wind-white.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28.666" height="29.146" viewBox="0 0 28.666 29.146">
+  <g id="Group_21361" data-name="Group 21361" transform="translate(-2367.248 -359.109)">
+    <path id="Path_15541" data-name="Path 15541" d="M13.425,10.969H4.109V8.278h9.316a2.794,2.794,0,1,0-2.794-2.794H7.941a5.484,5.484,0,1,1,5.484,5.484" transform="translate(2365.205 359.109)" fill="#fff"/>
+    <path id="Path_15542" data-name="Path 15542" d="M20.261,45.125a5.49,5.49,0,0,1-5.484-5.484h2.691a2.794,2.794,0,1,0,2.794-2.794H4.116v-2.69H20.261a5.484,5.484,0,0,1,0,10.969" transform="translate(2365.202 343.13)" fill="#fff"/>
+    <path id="Path_15543" data-name="Path 15543" d="M23.182,21.257H0V18.566H23.182a2.794,2.794,0,1,0-2.794-2.794H17.7a5.484,5.484,0,1,1,5.484,5.484" transform="translate(2367.248 353.995)" fill="#fff"/>
+  </g>
+</svg>

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

@@ -104,11 +104,13 @@
     "continue": "Continue",
     "close": "Close",
     "done": "Done",
+    "delete": "Delete",
     "forward": "Forward",
     "next": "Next",
     "previous": "Previous",
     "save": "Save",
     "send": "Send",
+    "share": "Share",
     "skip": "Skip for now",
     "saveStep": "Save Step"
   },
@@ -148,12 +150,20 @@
     "error": "Email should be from a valid Homefile account",
     "homeAddress": "Home Address",
     "notes": "Notes",
+    "sendContact": "You’ve selected to send contact information to",
     "shareContact": "Share Contact",
+    "shareWithEmail": "Share with someone via email",
+    "shareWithSMS": "Share with someone via text/SMS",
+    "shareWithSocial": "Share with your social account",
+    "shareWithHomefile": "Shared with a Homefile user(s)",
     "permissions": "Permissions",
     "placeholders": {
-      "email": "Enter Email"
+      "searchContact": "Search for a contact by email",
+      "email": "Enter Email",
+      "sms": "Enter Area Code + Number"
     },
     "rating": "Homeowner Rating",
+    "recipient": "recipient",
     "title": "Contacts"
   },
   "daysOfWeek": {
@@ -340,7 +350,65 @@
     "updated": "Updated"
   },
   "homeAssistant": {
+    "alerts": {
+      "airFilter": {
+        "description": "HEPA stands for High-Efficiency Particulate Air. HEPA filters catch really tiny particles, as small as 0.3 micrometers. They’re used in air purifiers, vacuum cleaners, and HVAC systems to get rid of things like allergens, dust, and pet dander, making the air cleaner and healthier.",
+        "main": {
+          "description": "Changing your air filter every 30 days ensures efficient system performance and improves indoor air quality by trapping dust and allergens.",
+          "title": "Time to change your heating & cooling air filter."
+        },
+        "bestBadge": "Best",
+        "betterBadge": "Better",
+        "title": "Homefile recommends 2 HEPA filter grades:",
+        "best": {
+          "description": "Standard in many places, these filters capture 99.97% of tiny particles. They are the go-to choice for homes and businesses, ensuring the air is clean and healthy. True HEPA filters are like the dependable players in the indoor air quality game.",
+          "title": "HEPA (Grade H)"
+        },
+        "better": {
+          "description": "These filters catch about 99% of particles. They are cost-effective and work well for everyday use, like in affordable air purifiers and vacuum cleaners. Think of them as the reliable team members suitable for common spaces.",
+          "title": "HEPA Type (Grade E)"
+        }
+      },
+      "smokeDetectorBattery": {
+        "main": {
+          "description": "Checking your smoke detector batteries monthly ensures they function properly and keep your home safe from fire hazards.",
+          "title": "Check the batteries in your Smoke detectors."
+        },
+        "bestBadge": "Best",
+        "betterBadge": "Better",
+        "title": "Which batteries are best to use?",
+        "best": {
+          "description": "Lithium batteries last around 5 years (some lithium cells are also rechargeable, and when used in a mains-powered alarm may last for the entire functional lifespan of the alarm).",
+          "title": "Lithium Batteries"
+        },
+        "better": {
+          "description": "9V alkaline batteries last 12-18 months.",
+          "title": "9 Volt Batteries"
+        }
+      },
+      "smokeDetectorExpired": {
+        "description": "After about 5 years, alarm sensors can become less sensitive to smoke particles. If your alarm is older than 5 years and appears to be working, we still recommend replacing it so you have the best possible protection for your home.",
+        "main": {
+          "description": "Checking your smoke detector batteries monthly ensures they function properly and keep your home safe from fire hazards.",
+          "title": "Your smoke detectors could be expired."
+        },
+        "title": "How to check if your detectors are expired?",
+        "check1": "Remove the alarm from the wall or ceiling.",
+        "check2": "Look at the back of the alarm for the date of manufacture.",
+        "check3": "If older than 5 years, replace."
+      }
+    },
     "details": "Provide details about your home’s",
+    "homeMonitor": "Home Monitor",
+    "homeMonitoring": "Homefile is monitoring your home.",
+    "monitorAlerts": {
+      "collapse": "Collapse Alert",
+      "homeAction": "Home Action",
+      "maintenance": "Maintenance Monitor",
+      "protection": "Protection Monitor",
+      "review": "Review Alert"
+    },
+    "notifications": "Notification coming",
     "selectAppliances": "Select the appliances you have in your home:",
     "steps": {
       "appliances": "Appliances",

package/dist/components/animations/HomieAnimation.d.ts

@@ -0,0 +1 @@
+export declare const HomieAnimation: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/animations/HomieAnimation.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRive } from '@rive-app/react-canvas';
+const url = process.env.REACT_APP_RIVE_ASSETS;
+export const HomieAnimation = () => {
+    const { RiveComponent } = useRive({
+        src: `${url}/homie-v2.riv`,
+        stateMachines: 'State Machine 1',
+        autoplay: true,
+    });
+    return _jsx(RiveComponent, {});
+};

package/dist/components/animations/index.d.ts

@@ -1 +1,2 @@
 export * from './CloudsAnimation';
+export * from './HomieAnimation';

package/dist/components/animations/index.js

@@ -1 +1,2 @@
 export * from './CloudsAnimation';
+export * from './HomieAnimation';

package/dist/components/badge/CustomBadge.d.ts

@@ -0,0 +1,5 @@
+export declare const CustomBadge: ({ bg, color, label, }: {
+    bg?: string | undefined;
+    color?: string | undefined;
+    label?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/badge/CustomBadge.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Center } from '@chakra-ui/react';
+export const CustomBadge = ({ bg = 'neutral.white', color = 'neutral.white', label = '', }) => {
+    return (_jsx(Center, { bg: bg, fontSize: "xxs", color: color, fontWeight: "bold", py: "1", px: "2", rounded: "md", textTransform: "uppercase", children: label }));
+};

package/dist/components/badge/index.d.ts

@@ -1,4 +1,5 @@
-export * from "./LetterBadge";
-export * from "./NewBadge";
-export * from "./NumberBadge";
-export * from "./TextBadge";
+export * from './CustomBadge';
+export * from './LetterBadge';
+export * from './NewBadge';
+export * from './NumberBadge';
+export * from './TextBadge';

package/dist/components/badge/index.js

@@ -1,4 +1,5 @@
-export * from "./LetterBadge";
-export * from "./NewBadge";
-export * from "./NumberBadge";
-export * from "./TextBadge";
+export * from './CustomBadge';
+export * from './LetterBadge';
+export * from './NewBadge';
+export * from './NumberBadge';
+export * from './TextBadge';

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

@@ -1,2 +1,2 @@
 import { ContactCardI } from '../../interfaces';
-export declare const ContactCard: ({ apiError, contact, index, menuItems, onClick, onShare, }: ContactCardI) => import("react/jsx-runtime").JSX.Element;
+export declare const ContactCard: ({ apiError, contact, index, menuItems, onClick, showAvatar, showHeader, }: ContactCardI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/contacts/ContactCard.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Container, Flex, Stack } from '@chakra-ui/react';
 import { ContactCardHeader, ContactCardInfo, ContactCardAddress, } from '..';
 import { colors } from '../../theme/colors';
-export const ContactCard = ({ apiError, contact, index, menuItems, onClick, onShare, }) => {
+export const ContactCard = ({ apiError, contact, index, menuItems, onClick, showAvatar, showHeader = true, }) => {
     const hasOnClick = typeof onClick === 'function';
     return (_jsx(Container, { maxW: "none", textAlign: "start", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(Object.assign(Object.assign({}, contact), { index })), transition: "background-color 0.3s", _hover: {
-            bg: hasOnClick ? 'lightGreen.1' : 'transparent',
-        }, cursor: hasOnClick ? 'pointer' : 'default', children: _jsxs(Stack, { pb: "base", pt: "1", px: "base", spacing: "base", children: [_jsx(ContactCardHeader, { apiError: apiError, contact: contact, menuItems: menuItems, onShare: onShare }), _jsx(CardBody, { contact, index })] }) }));
+            bg: hasOnClick ? 'lightGreen.1' : 'neutral.white',
+        }, cursor: hasOnClick ? 'pointer' : 'default', children: _jsxs(Stack, { pb: "base", pt: "1", px: "base", spacing: "base", children: [showHeader && (_jsx(ContactCardHeader, { apiError: apiError, contact: contact })), _jsx(CardBody, { contact, index, showAvatar })] }) }));
 };
-const CardBody = ({ contact, index, }) => {
-    return (_jsxs(Flex, { justify: "space-between", align: "stretch", gap: "base", children: [_jsx(ContactCardInfo, Object.assign({}, contact, { index })), _jsx(Box, { borderLeft: `1px solid ${colors.lightBlue[1]}`, w: "45%", pl: "base", children: _jsx(ContactCardAddress, Object.assign({}, contact)) })] }));
+const CardBody = ({ contact, index, showAvatar, }) => {
+    return (_jsxs(Flex, { justify: "space-between", align: "stretch", gap: "base", children: [_jsx(ContactCardInfo, Object.assign({}, contact, { index, showAvatar })), _jsx(Box, { borderLeft: `1px solid ${colors.lightBlue[1]}`, w: "45%", pl: "base", children: _jsx(ContactCardAddress, Object.assign({}, contact)) })] }));
 };

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

@@ -1,2 +1,2 @@
 import { ContactCardHeaderI } from '../../interfaces';
-export declare const ContactCardHeader: (props: ContactCardHeaderI) => import("react/jsx-runtime").JSX.Element;
+export declare const ContactCardHeader: ({ contact, menuItems, }: ContactCardHeaderI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/contacts/ContactCardHeader.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Flex, Image, Text } from '@chakra-ui/react';
 import { Contacts } from '../../assets/images';
-import { ContactHeaderMenu } from '..';
-export const ContactCardHeader = (props) => {
+import { IconMenu, MoreHorizontal } from '..';
+export const ContactCardHeader = ({ contact, menuItems = [], }) => {
     var _a;
-    const { category, title } = props.contact;
-    return (_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: "base", children: [_jsx(Image, { src: Contacts, boxSize: "1rem", "aria-label": (_a = t('ariaLabels.contact')) !== null && _a !== void 0 ? _a : ' ' }), _jsxs(Flex, { align: "center", gap: "base", children: [_jsx(Text, { fontSize: "xs", children: category.toUpperCase() }), title && (_jsx(Text, { fontSize: "xs", color: "gray.4", children: "|" })), _jsx(Text, { fontSize: "xs", children: title.toUpperCase() })] })] }), _jsx(ContactHeaderMenu, Object.assign({}, props))] }));
+    const { category, title } = contact;
+    return (_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: "base", children: [_jsx(Image, { src: Contacts, boxSize: "1rem", "aria-label": (_a = t('ariaLabels.contact')) !== null && _a !== void 0 ? _a : ' ' }), _jsxs(Flex, { align: "center", gap: "base", children: [_jsx(Text, { fontSize: "xs", children: category.toUpperCase() }), title && (_jsx(Text, { fontSize: "xs", color: "gray.4", children: "|" })), _jsx(Text, { fontSize: "xs", children: title.toUpperCase() })] })] }), _jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 32 }), itemForm: contact, menuItems: menuItems, disabled: menuItems.length < 1 })] }));
 };

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

@@ -1,2 +1,2 @@
 import { ContactCardInfoI } from '../../interfaces';
-export declare const ContactCardInfo: ({ company, email, firstName, index, lastName, phone, }: ContactCardInfoI) => import("react/jsx-runtime").JSX.Element;
+export declare const ContactCardInfo: ({ company, email, firstName, index, lastName, phone, showAvatar, }: ContactCardInfoI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/contacts/ContactCardInfo.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Box, Flex, Stack, Text } from '@chakra-ui/react';
 import { randomColor } from '../../utils';
-export const ContactCardInfo = ({ company, email, firstName, index, lastName, phone, }) => {
+export const ContactCardInfo = ({ company, email, firstName, index, lastName, phone, showAvatar = true, }) => {
     const name = `${firstName} ${lastName}`.trim() || company;
-    return (_jsxs(Flex, { gap: "base", minH: "50px", align: "center", children: [_jsx(Avatar, { w: "40px", h: "40px", bg: randomColor(index), fontWeight: "bold", color: "neutral.white", name: name }), _jsxs(Stack, { w: "full", spacing: "0.5", children: [_jsx(Text, { fontWeight: "bold", children: name }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "xs", children: phone }), _jsx(Text, { variant: "email", lineHeight: "0.8", children: email })] })] })] }));
+    return (_jsxs(Flex, { gap: "base", minH: "50px", align: "center", children: [showAvatar && (_jsx(Avatar, { w: "40px", h: "40px", bg: randomColor(index), fontWeight: "bold", color: "neutral.white", name: name })), _jsxs(Stack, { w: "full", spacing: "0.5", children: [_jsx(Text, { fontWeight: "bold", children: name }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "xs", children: phone }), _jsx(Text, { variant: "email", lineHeight: "0.8", children: email })] })] })] }));
 };

package/dist/components/contacts/ContactHeaderMenu.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex, IconButton, useDisclosure } from '@chakra-ui/react';
-import { ShareIcon, MoreHorizontal, IconMenu, ShareContactPopover, } from '..';
-export const ContactHeaderMenu = ({ apiError, contact, menuItems, onShare, }) => {
+import { ShareIcon, MoreHorizontal, IconMenu } from '..';
+export const ContactHeaderMenu = ({ apiError, contact, menuItems, onShare = () => null, }) => {
     const { isOpen, onOpen, onClose } = useDisclosure();
-    return (_jsxs(Flex, { align: "center", position: "relative", gap: "base", children: [_jsx(IconButton, { "aria-label": "share", variant: "menuIcon", icon: _jsx(ShareIcon, { size: 18 }), onClick: onOpen, w: "fit-content" }), _jsx(ShareContactPopover, { apiError: apiError, contact: contact, isOpen: isOpen, onClose: onClose, onShare: onShare }), _jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 32 }), itemForm: contact, menuItems: menuItems, disabled: menuItems.length < 1 })] }));
+    return (_jsxs(Flex, { align: "center", position: "relative", gap: "base", children: [_jsx(IconButton, { "aria-label": "share", variant: "menuIcon", icon: _jsx(ShareIcon, { size: 18 }), onClick: onOpen, w: "fit-content" }), _jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 32 }), itemForm: contact, menuItems: menuItems, disabled: Number(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) < 1 })] }));
 };

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, onShare, }: ContactsContentI) => import("react/jsx-runtime").JSX.Element;
+export declare const ContactsContent: ({ apiError, contacts, menuItems, handleClose, children, handleAdd, disabled, onClick, onDeleteContacts, onShareContacts, }: ContactsContentI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/contacts/ContactsContent.js

@@ -1,12 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { DrawerContent, DrawerHeader, DrawerBody, Flex, Stack, } from '@chakra-ui/react';
+import { DrawerContent, DrawerHeader, DrawerBody, Flex, Stack, Checkbox, Box, Text, DrawerFooter, } from '@chakra-ui/react';
 import { Contacts } from '../../assets/images';
-import { ContactCard, LeftButtonAnimated, PanelHeader, SearchInput, } from '..';
-import { useContactsContent, useWindowDimensions } from '../../hooks';
-export const ContactsContent = ({ apiError, contacts, menuItems, handleClose, children, handleAdd, disabled, onClick, onShare, }) => {
-    const { filteredContacts, handleChange, search } = useContactsContent(contacts);
+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, }) => {
+    const { contactsWithoutFirstOrLastName, handleChange, search, splittedContacts, } = useContactsContent(contacts);
+    const { getContactByIds, handleItemSelect, handleSelectAll, isItemSelected, itemsSelected, } = useAssignableList({
+        onItemSelectedChange: () => null,
+        items: contacts,
+    });
     const { windowDimensions: { width }, } = useWindowDimensions();
     const maxW = width > 413 ? '16rem' : '10rem';
-    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsxs(DrawerHeader, { p: "0", children: [_jsx(PanelHeader, { handleCloseButton: handleClose, icon: Contacts, title: t('contacts.title') }), _jsxs(Flex, { justify: "space-between", pl: "base", my: "base", align: "center", gap: "base", children: [_jsx(SearchInput, { maxW: maxW, value: search, onChange: handleChange }), _jsx(LeftButtonAnimated, { onClick: handleAdd, label: t('contacts.addBtn'), disabled: disabled })] })] }), _jsxs(DrawerBody, { p: "0", overflowX: "hidden", children: [_jsx(Stack, { spacing: "2", p: "base", bg: "lightBlue.2", minHeight: "full", children: filteredContacts.map((contact, idx) => (_jsx(ContactCard, { apiError: apiError, contact: contact, menuItems: menuItems, onClick: onClick, onShare: onShare, index: idx }, contact._id))) }), children] })] }));
+    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsxs(DrawerHeader, { p: "0", children: [_jsx(PanelHeader, { handleCloseButton: handleClose, icon: Contacts, title: t('contacts.title') }), _jsxs(Flex, { justify: "space-between", pl: "base", my: "base", align: "center", gap: "base", children: [_jsx(SearchInput, { maxW: maxW, value: search, onChange: handleChange }), _jsx(LeftButtonAnimated, { onClick: handleAdd, label: t('contacts.addBtn'), disabled: disabled })] })] }), _jsxs(DrawerBody, { p: "0", overflowX: "hidden", children: [_jsxs(Stack, { spacing: "base", pt: "base", pb: "120px", pr: "base", bg: "lightBlue.5", minHeight: "full", children: [_jsxs(Flex, { gap: "3", pl: "base", children: [_jsx(Checkbox, { onChange: handleSelectAll }), _jsx(Text, { fontFamily: "secondary", fontSize: "xs", children: t('subscription.select') })] }), _jsx(Box, { children: Object.keys(splittedContacts).map((letter, idx) => {
+                                    const showLetterDivider = idx !== 0;
+                                    return (_jsxs(Stack, { spacing: "0", children: [showLetterDivider && _jsx(LetterDivider, { letter: letter }), _jsx(Stack, { spacing: "2px", children: splittedContacts[letter].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));
+                                                }) })] }, letter));
+                                }) }), 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", children: _jsx(FooterDrawer, { isOpen: true, children: _jsx(FooterButtons, { button1: {
+                            buttonStyle: 'primaryFooter',
+                            label: t('buttons.share'),
+                            isDisabled: Number(itemsSelected.length) === 0,
+                            onClick: () => onShareContacts(getContactByIds(itemsSelected)),
+                        }, button2: {
+                            buttonStyle: 'secondaryFooter',
+                            label: t('buttons.delete'),
+                            onClick: () => onDeleteContacts(itemsSelected),
+                        } }) }) })] }));
+};
+const Card = ({ apiError, contact, onClick, index, menuItems, selected, onChange, }) => {
+    return (_jsxs(Flex, { gap: "3", pl: "base", bg: selected ? 'lightBlue.6' : 'transparent', children: [_jsx(Checkbox, { isChecked: selected, onChange: () => onChange(contact._id) }), _jsx(ContactCard, { apiError: apiError, contact: contact, menuItems: menuItems, onClick: onClick, index: index }, contact._id)] }, contact._id));
 };

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

@@ -0,0 +1,3 @@
+export declare const LetterDivider: ({ letter }: {
+    letter?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/contacts/LetterDivider.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text } from '@chakra-ui/react';
+export const LetterDivider = ({ letter = '' }) => {
+    return (_jsxs(Flex, { align: "center", children: [_jsx(Box, { flex: "1", border: "1px dashed", borderColor: "lightBlue.11", h: "2px" }), _jsx(Box, { px: "4", py: "2", children: _jsx(Text, { fontWeight: "bold", fontSize: "xs", color: "lightBlue.11", children: letter }) }), _jsx(Box, { flex: "1", border: "1px dashed", borderColor: "lightBlue.11", h: "2px" })] }));
+};

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

@@ -0,0 +1,2 @@
+import { ShareContactSectionI } from '../../interfaces';
+export declare const ShareContactSection: (props: ShareContactSectionI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/contacts/ShareContactSection.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { calc, Grid, Stack } from '@chakra-ui/react';
+import { HiddenField, ShareContactByEmail, ShareContactByHomefile, ShareContactBySMS, } from '..';
+import { Feedback, ShareWith, SMS } from '../../assets/images';
+export const ShareContactSection = (props) => {
+    const [activeField, setActiveField] = useState('email');
+    const forms = {
+        email: _jsx(ShareContactByEmail, Object.assign({}, props)),
+        sms: _jsx(ShareContactBySMS, Object.assign({}, props)),
+        homefile: _jsx(ShareContactByHomefile, Object.assign({}, props)),
+    };
+    return (_jsxs(Stack, { align: "center", bg: "lightBlue.1", children: [_jsx(Grid, { templateColumns: "repeat(auto-fill, minmax(80px, 1fr))", gap: "base", p: "base", minW: `${calc(Number(fields.length) * 80)}px`, children: fields.map(({ disabled, icon = 'email', id, name = '' }) => {
+                    return (_jsx(HiddenField, { disabled: disabled, id: id, name: name, icon: fieldIcons[icon], onClick: () => setActiveField(id), isActive: id === activeField }, id));
+                }) }), forms[activeField]] }));
+};
+const fields = [
+    { disabled: false, icon: 'email', id: 'email', name: 'Email' },
+    { disabled: false, icon: 'sms', id: 'sms', name: 'SMS' },
+    { disabled: false, icon: 'homefile', id: 'homefile', name: 'Homefile' },
+];
+const fieldIcons = {
+    homefile: ShareWith,
+    sms: SMS,
+    email: Feedback,
+};

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

@@ -1,5 +1,6 @@
 export * from './addEditPanel';
 export * from './shareContactForms';
+export * from './sharePanel';
 export * from './viewPanel';
 export * from './ContactCard';
 export * from './ContactCardAddress';
@@ -7,4 +8,5 @@ export * from './ContactCardHeader';
 export * from './ContactCardInfo';
 export * from './ContactHeaderMenu';
 export * from './ContactsContent';
-export * from './ShareContactPopover';
+export * from './LetterDivider';
+export * from './ShareContactSection';

package/dist/components/contacts/index.js

@@ -1,5 +1,6 @@
 export * from './addEditPanel';
 export * from './shareContactForms';
+export * from './sharePanel';
 export * from './viewPanel';
 export * from './ContactCard';
 export * from './ContactCardAddress';
@@ -7,4 +8,5 @@ export * from './ContactCardHeader';
 export * from './ContactCardInfo';
 export * from './ContactHeaderMenu';
 export * from './ContactsContent';
-export * from './ShareContactPopover';
+export * from './LetterDivider';
+export * from './ShareContactSection';

package/dist/components/contacts/shareContactForms/AddReceiverButton.d.ts

@@ -0,0 +1,2 @@
+import { AddReceiverButtonI } from '../../../interfaces';
+export declare const AddReceiverButton: ({ onClick, isDisabled, }: AddReceiverButtonI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/contacts/shareContactForms/AddReceiverButton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconButton } from '@chakra-ui/react';
+import { Plus } from '../..';
+import { colors } from '../../../theme/colors';
+export const AddReceiverButton = ({ onClick, isDisabled, }) => {
+    return (_jsx(IconButton, { "aria-label": "Add new receiver", variant: "iconOutlined", icon: _jsx(Plus, { size: 28, stroke: colors.blue[3] }), onClick: onClick, isDisabled: isDisabled, maxH: "input.md" }));
+};

package/dist/components/contacts/shareContactForms/SendToList.d.ts

@@ -0,0 +1,2 @@
+import { SendToListI } from '../../../interfaces';
+export declare const SendToList: ({ sendTo, onDelete }: SendToListI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/contacts/shareContactForms/SendToList.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Stack, Flex, Container, IconButton, Text } from '@chakra-ui/react';
+import { TrashIcon } from '../..';
+import { pluralize } from '../../../utils';
+export const SendToList = ({ sendTo, onDelete }) => {
+    const totalReceivers = sendTo.length;
+    return (_jsxs(Stack, { spacing: "base", h: "full", p: "base", bg: "lightBlue.2", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: `${t('contacts.sendContact')} ${totalReceivers} ${pluralize(totalReceivers, t('contacts.recipient'))}` }), _jsx(Stack, { spacing: "1", children: sendTo.map((receiver) => (_jsxs(Flex, { align: "center", justify: "space-between", borderBottom: "1px solid", borderColor: "lightBlue.2", children: [_jsx(Container, { p: "base", children: _jsx(Text, { fontFamily: "secondary", children: receiver }) }), _jsx(IconButton, { "aria-label": "Remove item", variant: "unstyled", icon: _jsx(TrashIcon, {}), size: "md", position: "relative", right: "-16px", transition: "all 0.2s ease-in-out", _hover: {
+                                filter: 'brightness(0.7)',
+                            }, onClick: () => onDelete(receiver) })] }, receiver))) })] }));
+};

package/dist/components/contacts/shareContactForms/ShareContactByEmail.d.ts

@@ -1,2 +1,2 @@
-import { ShareContactByEmailI } from '../../../interfaces';
-export declare const ShareContactByEmail: ({ apiError, contact, onShare, }: ShareContactByEmailI) => import("react/jsx-runtime").JSX.Element;
+import { ShareContactByI } from '../../../interfaces';
+export declare const ShareContactByEmail: ({ apiErrorMessage, onShare, }: ShareContactByI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/contacts/shareContactForms/ShareContactByEmail.js

@@ -1,21 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
 import { t } from 'i18next';
-import { Box, Button, Flex } from '@chakra-ui/react';
-import { TextInput } from '../..';
+import { Box, Flex, Stack, Text } from '@chakra-ui/react';
+import { AddReceiverButton, SendToList, TextInput } from '../..';
 import { isValidEmail } from '../../../utils';
-export const ShareContactByEmail = ({ apiError, contact, onShare, }) => {
-    const [value, setValue] = useState('');
-    const [isDirty, setIsDirty] = useState(apiError !== null && apiError !== void 0 ? apiError : false);
-    const errorMessage = apiError
-        ? t('contacts.error')
-        : `${t('forms.email')} ${t('forms.required')}`;
-    return (_jsx(Box, { bg: "lightBlue.2", p: "base", w: "100%", children: _jsxs(Flex, { gap: "base", children: [_jsx(TextInput, { errorMessage: errorMessage, hasError: !isValidEmail(value) && isDirty, id: "shareContactByEmail", handleChange: (e) => setValue(e.target.value), placeholder: t('contacts.placeholders.email'), value: value, onBlur: () => setIsDirty(true) }), _jsx(Button, { variant: "secondary", maxW: "fit-content", maxH: "input.md", onClick: () => {
-                        onShare({
-                            contact,
-                            emailTo: value,
-                        });
-                        setValue('');
-                        setIsDirty(false);
-                    }, disabled: !isValidEmail(value), children: t('buttons.send') })] }) }));
+import { useShareContactBy } from '../../../hooks';
+export const ShareContactByEmail = ({ apiErrorMessage, onShare, }) => {
+    const { sendTo, handleAdd, handleChangeValue, handleDelete, handleSetIsDirtyToTrue, isDirty, value, } = useShareContactBy({ onShare, sendBy: 'email' });
+    const errorMessage = apiErrorMessage !== null && apiErrorMessage !== void 0 ? apiErrorMessage : `${t('forms.email')} ${t('forms.required')}`;
+    return (_jsxs(Box, { w: "100%", children: [_jsxs(Stack, { p: "base", w: "100%", spacing: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: t('contacts.shareWithEmail') }), _jsxs(Flex, { gap: "base", children: [_jsx(TextInput, { errorMessage: errorMessage, hasError: !isValidEmail(value) && isDirty, id: "shareContactByEmail", handleChange: handleChangeValue, placeholder: t('contacts.placeholders.email'), value: value, onBlur: handleSetIsDirtyToTrue, type: "email" }), _jsx(AddReceiverButton, { onClick: handleAdd, isDisabled: !isValidEmail(value) })] })] }), _jsx(SendToList, { sendTo: sendTo, onDelete: handleDelete })] }));
 };

package/dist/components/contacts/shareContactForms/ShareContactByHomefile.d.ts

@@ -0,0 +1,2 @@
+import { ShareContactByHomefileI } from '../../../interfaces';
+export declare const ShareContactByHomefile: ({ apiErrorMessage, homefileContacts, isLoading, onShare, onDropdownSelect, onContactSearch, onRemoveContact, shareWithList, }: ShareContactByHomefileI) => import("react/jsx-runtime").JSX.Element;