@homefile/components-v2 2.8.42 → 2.8.44

package/dist/components/appBar/ContactList.js

@@ -8,5 +8,5 @@ import { MOBILE_WIDTH } from '../../utils';
 export const ContactList = ({ onClick, total }) => {
     const { windowDimensions: { width }, } = useWindowDimensions();
     const isMobile = width < MOBILE_WIDTH;
-    return (_jsx(Tooltip, { label: t('tooltips.contacts'), children: _jsx(Box, { id: "viewContacts", children: _jsxs(Flex, { gap: "1", as: "button", onClick: onClick, children: [_jsx(Img, { src: Contact, "aria-label": t('tooltips.contacts'), h: "26px", w: "auto" }), !isMobile && _jsx(NumberBadge, { total: total })] }) }) }));
+    return (_jsx(Tooltip, { label: t('tooltips.contacts'), children: _jsx(Box, { id: "viewContacts", "data-testid": "contact-list", children: _jsxs(Flex, { gap: "1", as: "button", onClick: onClick, children: [_jsx(Img, { src: Contact, "aria-label": t('tooltips.contacts'), h: "26px", w: "auto" }), !isMobile && _jsx(NumberBadge, { total: total })] }) }) }));
 };

package/dist/components/appBar/HomefileLogo.js

@@ -6,5 +6,5 @@ import { MOBILE_WIDTH } from '../../utils';
 export const HomefileLogo = ({ onClick }) => {
     const { windowDimensions: { width }, } = useWindowDimensions();
     const isMobile = width < MOBILE_WIDTH;
-    return (_jsx(Button, { variant: "menuIcon", maxW: "fit-content", onClick: onClick, children: _jsx(Image, { src: isMobile ? LogoSmall : Homefile, alt: "Homefile", h: "image.logo" }) }));
+    return (_jsx(Button, { variant: "menuIcon", maxW: "fit-content", onClick: onClick, "data-testid": "homefile-logo", children: _jsx(Image, { src: isMobile ? LogoSmall : Homefile, alt: "Homefile", h: "image.logo" }) }));
 };

package/dist/components/appBar/NotificationsReminder.js

@@ -9,7 +9,7 @@ import { MOBILE_WIDTH } from '../../utils';
 export const NotificationsReminder = ({ onClick, total }) => {
     const { windowDimensions: { width }, } = useWindowDimensions();
     const isMobile = width < MOBILE_WIDTH;
-    return (_jsx(Tooltip, { label: t('tooltips.notifications'), children: _jsx(Box, { id: "notificationsRemember", children: _jsxs(Flex, { gap: "1", as: "button", onClick: onClick, children: [_jsx(Img, { src: Speaker, "aria-label": t('tooltips.notifications'), h: "26px", w: "auto" }), !isMobile && (_jsx(NumberBadge, { total: total, background: "linear-gradient(120deg, #0b8dd7, #730bd7, #0bd7ac)", backgroundSize: 100, animation: `${bgGradient} 6s linear infinite` }))] }) }) }));
+    return (_jsx(Tooltip, { label: t('tooltips.notifications'), children: _jsx(Box, { id: "notificationsRemember", "data-testid": "notifications-reminder", children: _jsxs(Flex, { gap: "1", as: "button", onClick: onClick, children: [_jsx(Img, { src: Speaker, "aria-label": t('tooltips.notifications'), h: "26px", w: "auto" }), !isMobile && (_jsx(NumberBadge, { total: total, background: "linear-gradient(120deg, #0b8dd7, #730bd7, #0bd7ac)", backgroundSize: 100, animation: `${bgGradient} 6s linear infinite` }))] }) }) }));
 };
 const bgGradient = keyframes `
  0% {

package/dist/components/appBar/PeopleConnected.js

@@ -8,5 +8,5 @@ import { MOBILE_WIDTH } from '../../utils';
 export const PeopleConnected = ({ onClick, total }) => {
     const { windowDimensions: { width }, } = useWindowDimensions();
     const isMobile = width < MOBILE_WIDTH;
-    return (_jsx(Tooltip, { label: t('tooltips.shareHome'), children: _jsxs(Flex, { gap: "1", as: "button", onClick: onClick, id: "shareWithOthers", children: [_jsx(Img, { src: PersonMail, "aria-label": t('tooltips.shareHome'), h: "26px", w: "auto" }), !isMobile && _jsx(NumberBadge, { total: total })] }) }));
+    return (_jsx(Tooltip, { label: t('tooltips.shareHome'), children: _jsxs(Flex, { gap: "1", as: "button", onClick: onClick, id: "shareWithOthers", "data-testid": "people-connected", children: [_jsx(Img, { src: PersonMail, "aria-label": t('tooltips.shareHome'), h: "26px", w: "auto" }), !isMobile && _jsx(NumberBadge, { total: total })] }) }));
 };

package/dist/components/appBar/StorageUsed.js

@@ -8,5 +8,5 @@ export const StorageUsed = ({ onClick, totalStorage, state, totalUsed, }) => {
         ? t('subscription.trial2')
         : `${totalUsed} ${t('subscription.of')} ${totalStorage}GB`;
     const progressValue = (totalUsed / totalStorage) * 100;
-    return (_jsx(Tooltip, { label: t('tooltips.storage'), children: _jsxs(Box, { as: "button", onClick: onClick, id: "storageUsed", children: [_jsx(Text, { fontSize: "xxs", textAlign: "left", children: text }), _jsx(Progress, { size: "md", value: progressValue, height: "10px", w: "60px", variant: progressColor[state] })] }) }));
+    return (_jsx(Tooltip, { label: t('tooltips.storage'), children: _jsxs(Box, { as: "button", onClick: onClick, id: "storageUsed", "data-testid": "storage-used", children: [_jsx(Text, { fontSize: "xxs", textAlign: "left", children: text }), _jsx(Progress, { size: "md", value: progressValue, height: "10px", w: "60px", variant: progressColor[state] })] }) }));
 };

package/dist/components/appBar/TourButton.js

@@ -3,5 +3,5 @@ import { t } from 'i18next';
 import { Box, Flex, Image } from '@chakra-ui/react';
 import { Flag } from '../../assets/images';
 export const TourButton = ({ label, onClick }) => {
-    return (_jsx(Box, { as: "button", boxShadow: "none", borderRadius: "full", bg: "lightGreen.5", fontFamily: "secondary", transition: "all 0.2s ease-in-out", _hover: { bg: 'lightGreen.4' }, onClick: onClick, flexShrink: 0, overflow: "hidden", children: _jsxs(Flex, { align: "center", pr: "base", py: "1", children: [_jsx(Image, { src: Flag, w: "40px", h: "auto", alt: "tour", position: "relative", bottom: "-4px" }), label !== null && label !== void 0 ? label : t('help.buttonTour')] }) }));
+    return (_jsx(Box, { "data-testid": "tour-button", as: "button", boxShadow: "none", borderRadius: "full", bg: "lightGreen.5", fontFamily: "secondary", transition: "all 0.2s ease-in-out", _hover: { bg: 'lightGreen.4' }, onClick: onClick, flexShrink: 0, overflow: "hidden", children: _jsxs(Flex, { align: "center", pr: "base", py: "1", children: [_jsx(Image, { src: Flag, w: "40px", h: "auto", alt: "tour", position: "relative", bottom: "-4px" }), label !== null && label !== void 0 ? label : t('help.buttonTour')] }) }));
 };

package/dist/components/appBar/Trash.js

@@ -8,5 +8,5 @@ import { MOBILE_WIDTH } from '../../utils';
 export const Trash = ({ onClick, total }) => {
     const { windowDimensions: { width }, } = useWindowDimensions();
     const isMobile = width < MOBILE_WIDTH;
-    return (_jsx(Tooltip, { label: t('tooltips.deleted'), children: _jsxs(Flex, { gap: "1", as: "button", onClick: onClick, children: [_jsx(TrashIcon, { stroke: colors.violet[1], size: 28 }), !isMobile && _jsx(NumberBadge, { total: total, bg: "violet.1" })] }) }));
+    return (_jsx(Tooltip, { label: t('tooltips.deleted'), children: _jsxs(Flex, { gap: "1", as: "button", onClick: onClick, "data-testid": "appbar-trash", children: [_jsx(TrashIcon, { stroke: colors.violet[1], size: 28 }), !isMobile && _jsx(NumberBadge, { total: total, bg: "violet.1" })] }) }));
 };

package/dist/components/appBar/TutorialsButton.js

@@ -3,5 +3,5 @@ import { t } from 'i18next';
 import { Tooltip, Button, Image } from '@chakra-ui/react';
 import { NeedHelp } from '../../assets/images';
 export const TutorialsButton = ({ onClick }) => {
-    return (_jsx(Tooltip, { label: t('tooltips.help'), children: _jsx(Button, { id: "feedback", variant: "icon", w: "fit-content", onClick: onClick, children: _jsx(Image, { src: NeedHelp, w: "27px", h: "auto", "aria-label": t('ariaLabels.help') }) }) }));
+    return (_jsx(Tooltip, { label: t('tooltips.help'), "data-testid": "tutorials-button", children: _jsx(Button, { id: "feedback", variant: "icon", w: "fit-content", onClick: onClick, children: _jsx(Image, { src: NeedHelp, w: "27px", h: "auto", "aria-label": t('ariaLabels.help') }) }) }));
 };

package/dist/components/appBar/UserProfile.js

@@ -7,5 +7,5 @@ import { MOBILE_WIDTH } from '../../utils';
 export const UserProfile = ({ avatarUrl, firstName, userName, menuItems, bg, }) => {
     const { windowDimensions: { width }, } = useWindowDimensions();
     const isMobile = width < MOBILE_WIDTH;
-    return (_jsxs(Flex, { alignItems: "center", gap: ['1', 'base'], children: [!isMobile && (_jsx(Text, { minW: "fit-content", noOfLines: 1, children: `${t('welcome.greeting2')} ${firstName}` })), _jsx(Avatar, { size: "sm", name: userName, bg: bg, src: avatarUrl, fontWeight: "bold", color: "neutral.white", id: "profile" }), _jsx(IconMenu, { menuItems: menuItems })] }));
+    return (_jsxs(Flex, { alignItems: "center", gap: ['1', 'base'], "data-testid": "user-profile", children: [!isMobile && (_jsx(Text, { minW: "fit-content", noOfLines: 1, children: `${t('welcome.greeting2')} ${firstName}` })), _jsx(Avatar, { size: "sm", name: userName, bg: bg, src: avatarUrl, fontWeight: "bold", color: "neutral.white", id: "profile" }), _jsx(IconMenu, { menuItems: menuItems })] }));
 };

package/dist/components/rooms/GroupCardHeader.js

@@ -4,11 +4,9 @@ import { Divider, Flex, Image, Show, Text } from '@chakra-ui/react';
 import { IconMenu, MoreHorizontal } from '..';
 import { Group } from '../../assets/images';
 import { GroupIcons } from '../../helpers';
-import { useGroupCardHeader } from '../../hooks';
+import { getIconAltText } from '../../utils';
 export const GroupCardHeader = ({ title, totalAmount, menuItems, }) => {
-    const { haveNoMenuItems, iconAlt } = useGroupCardHeader({
-        menuItems,
-        title,
-    });
-    return (_jsxs(Flex, { justifyContent: "space-between", bg: "neutral.white", align: "center", children: [_jsxs(Flex, { gap: "base", id: "organizeByGroup", bg: "neutral.white", p: "4", children: [_jsx(Image, { src: GroupIcons[title] || Group, alt: iconAlt, w: "1rem", h: "auto" }), _jsx(Text, { noOfLines: 1, children: title })] }), _jsxs(Flex, { align: "center", gap: "base", p: "4", id: "trackGroupValue", bg: "neutral.white", children: [_jsx(Show, { breakpoint: "(min-width: 600px)", children: _jsx(Text, { textColor: "gray.4", fontWeight: "semibold", fontSize: "xs", mr: "3", children: t('groups.total') }) }), _jsx(Text, { textColor: "blue.8", fontWeight: "semibold", fontSize: ['md', 'lg'], children: totalAmount }), menuItems && menuItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Show, { breakpoint: "(min-width: 600px)", children: _jsx(Divider, { orientation: "vertical", h: "6" }) }), _jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 38 }), menuItems: menuItems, disabled: haveNoMenuItems })] }))] })] }));
+    const iconAlt = getIconAltText(GroupIcons[title]);
+    const hasMenuItems = Number(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) > 0;
+    return (_jsxs(Flex, { justifyContent: "space-between", bg: "neutral.white", align: "center", children: [_jsxs(Flex, { gap: "base", id: "organizeByGroup", bg: "neutral.white", p: "4", children: [_jsx(Image, { src: GroupIcons[title] || Group, alt: iconAlt, w: "1rem", h: "auto" }), _jsx(Text, { noOfLines: 1, children: title })] }), _jsxs(Flex, { align: "center", gap: "base", p: "4", id: "trackGroupValue", bg: "neutral.white", children: [_jsx(Show, { breakpoint: "(min-width: 600px)", children: _jsx(Text, { textColor: "gray.4", fontWeight: "semibold", fontSize: "xs", mr: "3", children: t('groups.total') }) }), _jsx(Text, { textColor: "blue.8", fontWeight: "semibold", fontSize: ['md', 'lg'], children: totalAmount }), hasMenuItems && (_jsxs(_Fragment, { children: [_jsx(Show, { breakpoint: "(min-width: 600px)", children: _jsx(Divider, { orientation: "vertical", h: "6" }) }), _jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 38 }), menuItems: menuItems, disabled: !hasMenuItems })] }))] })] }));
 };

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

@@ -16,6 +16,11 @@ export declare enum RoomEnum {
     HALLWAY = "hallway",
     STRUCTURE = "structure"
 }
+export interface VideoI {
+    bucketName: string;
+    fileName: string;
+    extension: string;
+}
 export interface RoomItemI {
     active: boolean;
     _id: string;
@@ -25,7 +30,7 @@ export interface RoomItemI {
     order?: number;
     subTypes?: string[];
     items?: ReportsI[];
-    videos?: any[];
+    videos?: VideoI[];
 }
 export interface AddRoomI {
     name: string;

package/package.json

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

package/src/components/appBar/ContactList.tsx

@@ -13,7 +13,7 @@ export const ContactList = ({ onClick, total }: AppBarIconI) => {
   const isMobile = width < MOBILE_WIDTH
   return (
     <Tooltip label={t('tooltips.contacts')}>
-      <Box id="viewContacts">
+      <Box id="viewContacts" data-testid="contact-list">
         <Flex gap="1" as="button" onClick={onClick}>
           <Img
             src={Contact}

package/src/components/appBar/HomefileLogo.tsx

@@ -10,7 +10,12 @@ export const HomefileLogo = ({ onClick }: HomefileLogoI) => {
   } = useWindowDimensions()
   const isMobile = width < MOBILE_WIDTH
   return (
-    <Button variant="menuIcon" maxW="fit-content" onClick={onClick}>
+    <Button
+      variant="menuIcon"
+      maxW="fit-content"
+      onClick={onClick}
+      data-testid="homefile-logo"
+    >
       <Image
         src={isMobile ? LogoSmall : Homefile}
         alt="Homefile"

package/src/components/appBar/NotificationsReminder.tsx

@@ -14,7 +14,7 @@ export const NotificationsReminder = ({ onClick, total }: AppBarIconI) => {
   const isMobile = width < MOBILE_WIDTH
   return (
     <Tooltip label={t('tooltips.notifications')}>
-      <Box id="notificationsRemember">
+      <Box id="notificationsRemember" data-testid="notifications-reminder">
         <Flex gap="1" as="button" onClick={onClick}>
           <Img
             src={Speaker}

package/src/components/appBar/PeopleConnected.tsx

@@ -13,7 +13,13 @@ export const PeopleConnected = ({ onClick, total }: AppBarIconI) => {
   const isMobile = width < MOBILE_WIDTH
   return (
     <Tooltip label={t('tooltips.shareHome')}>
-      <Flex gap="1" as="button" onClick={onClick} id="shareWithOthers">
+      <Flex
+        gap="1"
+        as="button"
+        onClick={onClick}
+        id="shareWithOthers"
+        data-testid="people-connected"
+      >
         <Img
           src={PersonMail}
           aria-label={t('tooltips.shareHome')}

package/src/components/appBar/StorageUsed.tsx

@@ -16,7 +16,12 @@ export const StorageUsed = ({
   const progressValue = (totalUsed / totalStorage) * 100
   return (
     <Tooltip label={t('tooltips.storage')}>
-      <Box as="button" onClick={onClick} id="storageUsed">
+      <Box
+        as="button"
+        onClick={onClick}
+        id="storageUsed"
+        data-testid="storage-used"
+      >
         <Text fontSize="xxs" textAlign="left">
           {text}
         </Text>

package/src/components/appBar/TourButton.tsx

@@ -6,6 +6,7 @@ import { Flag } from '@/assets/images'
 export const TourButton = ({ label, onClick }: TourButtonI) => {
   return (
     <Box
+      data-testid="tour-button"
       as="button"
       boxShadow="none"
       borderRadius="full"

package/src/components/appBar/Trash.tsx

@@ -13,7 +13,7 @@ export const Trash = ({ onClick, total }: AppBarIconI) => {
   const isMobile = width < MOBILE_WIDTH
   return (
     <Tooltip label={t('tooltips.deleted')}>
-      <Flex gap="1" as="button" onClick={onClick}>
+      <Flex gap="1" as="button" onClick={onClick} data-testid="appbar-trash">
         <TrashIcon stroke={colors.violet[1]} size={28} />
         {!isMobile && <NumberBadge total={total} bg="violet.1" />}
       </Flex>

package/src/components/appBar/TutorialsButton.tsx

@@ -5,7 +5,7 @@ import { TutorialsButtonI } from '@/interfaces'
 
 export const TutorialsButton = ({ onClick }: TutorialsButtonI) => {
   return (
-    <Tooltip label={t('tooltips.help')}>
+    <Tooltip label={t('tooltips.help')} data-testid="tutorials-button">
       <Button id="feedback" variant="icon" w="fit-content" onClick={onClick}>
         <Image
           src={NeedHelp}

package/src/components/appBar/UserProfile.tsx

@@ -17,7 +17,7 @@ export const UserProfile = ({
   } = useWindowDimensions()
   const isMobile = width < MOBILE_WIDTH
   return (
-    <Flex alignItems="center" gap={['1', 'base']}>
+    <Flex alignItems="center" gap={['1', 'base']} data-testid="user-profile">
       {!isMobile && (
         <Text minW="fit-content" noOfLines={1}>{`${t(
           'welcome.greeting2'

package/src/components/rooms/GroupCardHeader.tsx

@@ -4,17 +4,15 @@ import { IconMenu, MoreHorizontal } from '@/components'
 import { GroupCardHeaderI } from '@/interfaces'
 import { Group } from '@/assets/images'
 import { GroupIcons } from '@/helpers'
-import { useGroupCardHeader } from '@/hooks'
+import { getIconAltText } from '@/utils'
 
 export const GroupCardHeader = ({
   title,
   totalAmount,
   menuItems,
 }: GroupCardHeaderI) => {
-  const { haveNoMenuItems, iconAlt } = useGroupCardHeader({
-    menuItems,
-    title,
-  })
+  const iconAlt = getIconAltText(GroupIcons[title])
+  const hasMenuItems = Number(menuItems?.length) > 0
 
   return (
     <Flex justifyContent="space-between" bg="neutral.white" align="center">
@@ -42,7 +40,7 @@ export const GroupCardHeader = ({
         <Text textColor="blue.8" fontWeight="semibold" fontSize={['md', 'lg']}>
           {totalAmount}
         </Text>
-        {menuItems && menuItems.length > 0 && (
+        {hasMenuItems && (
           <>
             <Show breakpoint="(min-width: 600px)">
               <Divider orientation="vertical" h="6" />
@@ -50,7 +48,7 @@ export const GroupCardHeader = ({
             <IconMenu
               icon={<MoreHorizontal size={38} />}
               menuItems={menuItems}
-              disabled={haveNoMenuItems}
+              disabled={!hasMenuItems}
             />
           </>
         )}

package/src/interfaces/rooms/RoomsMenu.interface.ts

@@ -18,6 +18,12 @@ export enum RoomEnum {
   STRUCTURE = 'structure',
 }
 
+export interface VideoI {
+  bucketName: string
+  fileName: string
+  extension: string
+}
+
 export interface RoomItemI {
   active: boolean
   _id: string
@@ -27,7 +33,7 @@ export interface RoomItemI {
   order?: number
   subTypes?: string[]
   items?: ReportsI[]
-  videos?: any[]
+  videos?: VideoI[]
 }
 
 export interface AddRoomI {