@homefile/components-v2 2.24.25 → 2.25.0

package/dist/components/forms/Collapsible.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
 import { CollapsibleI } from '../../interfaces';
-export declare const Collapsible: ({ children, icon, title, }: PropsWithChildren<CollapsibleI>) => import("react/jsx-runtime").JSX.Element;
+export declare const Collapsible: ({ children, icon, title, showShadow, }: PropsWithChildren<CollapsibleI>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/Collapsible.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Accordion, AccordionButton, AccordionItem, AccordionPanel, Box, Flex, } from '@chakra-ui/react';
 import { ChevronRight, CollapsibleHeader } from '..';
-export const Collapsible = ({ children, icon, title, }) => {
-    return (_jsx(Accordion, { flex: "1", allowMultiple: true, boxShadow: "md", children: _jsx(AccordionItem, { border: "none", children: ({ isExpanded }) => (_jsxs(_Fragment, { children: [_jsx(AccordionButton, { w: "100%", p: "base", bg: "neutral.white", transition: "all .2s ease-in-out", borderBottom: "1px solid", borderColor: isExpanded ? 'lightBlue.2' : 'transparent', _hover: {
-                            boxShadow: 'lg',
+export const Collapsible = ({ children, icon, title, showShadow = true, }) => {
+    return (_jsx(Accordion, { flex: "1", allowMultiple: true, boxShadow: showShadow ? 'md' : 'none', children: _jsx(AccordionItem, { border: "none", children: ({ isExpanded }) => (_jsxs(_Fragment, { children: [_jsx(AccordionButton, { w: "100%", p: "base", bg: "neutral.white", transition: "all .2s ease-in-out", borderBottom: "1px solid", borderColor: isExpanded ? 'lightBlue.2' : 'transparent', _hover: {
+                            boxShadow: showShadow ? 'lg' : 'none',
                         }, _focus: {
                             outline: 'none',
                         }, children: _jsxs(Flex, { align: "center", justify: "space-between", flex: "1", children: [_jsx(CollapsibleHeader, { icon: icon, title: title }), _jsx(Box, { rounded: "full", border: "1px solid", padding: "1", borderColor: "blue.3", transition: "all .2s ease-in-out", transform: isExpanded ? 'rotate(-90deg)' : 'rotate(0)', children: _jsx(ChevronRight, {}) })] }) }), _jsx(AccordionPanel, { p: "base", bg: "neutral.white", children: children })] })) }) }));

package/dist/components/forms/readOnly/ReadOnlyDynamicForm.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { Box } from '@chakra-ui/react';
-import { ReadOnlyAppliances, ReadOnlyDate, ReadOnlyGrid, ReadOnlyGroup, ReadOnlyInput, ReadOnlyNotes, ReadOnlyRating, ReadOnlyTextArea, } from '../..';
+import { ReadOnlyAppliances, ReadOnlyCollapsible, ReadOnlyDate, ReadOnlyGrid, ReadOnlyGroup, ReadOnlyInput, ReadOnlyNotes, ReadOnlyRating, ReadOnlyTextArea, } from '../..';
 import { fieldIcons } from '../../../helpers';
-export const ReadOnlyDynamicForm = ({ form: fields, onClick, onEdit = () => { }, }) => {
+export const ReadOnlyDynamicForm = ({ form: fields, onClick, onEdit, }) => {
     return (_jsx(Box, { bg: "lightBlue.1", overflow: "scroll", children: fields === null || fields === void 0 ? void 0 : fields.map((field) => {
             const { children = [], icon, id, name, type, value } = field;
             const baseProps = {
@@ -33,6 +33,8 @@ export const ReadOnlyDynamicForm = ({ form: fields, onClick, onEdit = () => { },
                     return _jsx(ReadOnlyGroup, { children: children }, id);
                 case 'appliances':
                     return _createElement(ReadOnlyAppliances, Object.assign({}, field, { key: id, onEdit: onEdit }));
+                case 'collapsible':
+                    return _createElement(ReadOnlyCollapsible, Object.assign({}, field, { key: id }));
                 case 'notes':
                     return _createElement(ReadOnlyNotes, Object.assign({}, field, { key: id }));
                 default:

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyAppliances.js

@@ -5,19 +5,20 @@ import { colors } from '../../../../../theme/colors';
 export const ReadOnlyAppliances = ({ description, id, name, children, onEdit, value, }) => {
     const rating = children === null || children === void 0 ? void 0 : children.find(({ type }) => type === 'rating');
     const images = children === null || children === void 0 ? void 0 : children.find(({ type }) => type === 'images');
-    return (_jsxs(Stack, { spacing: "base", p: "base", bg: "neutral.white", mt: "2px", children: [_jsxs(Flex, { justify: "space-between", children: [_jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: name }), _jsx(IconButton, { "aria-label": "Edit appliance", variant: "ghost", w: "fit-content", icon: _jsx(Edit, { size: 18, stroke: colors.blue[3] }), onClick: () => onEdit(id) })] }), _jsxs(Flex, { gap: "base", children: [_jsx(ReadOnlyHomeItemImages, Object.assign({}, images)), _jsxs(Stack, { spacing: "4", flex: "1", children: [_jsx(ReadOnlyHomeItemRating, Object.assign({}, rating)), _jsxs(Stack, { spacing: "base", children: [_jsx(Text, { fontSize: "22px", fontWeight: "semibold", children: value }), _jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: description })] }), _jsx(Box, { flex: "1", borderBottom: "1px dashed", borderColor: "lightBlue.6", h: "1px" }), _jsx(Box, { children: children === null || children === void 0 ? void 0 : children.map(({ id, name, value, type }) => {
-                                    const baseProps = {
-                                        key: `${id}-${name}-${value}-${type}`,
-                                        id,
-                                        value,
-                                        type,
-                                        name,
-                                    };
-                                    switch (type) {
-                                        case 'text':
-                                            return _jsx(ReadOnlyHomeItemText, Object.assign({}, baseProps));
-                                        default:
-                                            return null;
-                                    }
-                                }) })] })] })] }));
+    return (_jsxs(Stack, { spacing: "base", p: "base", bg: "neutral.white", mt: "2px", children: [name ||
+                (onEdit && (_jsxs(Flex, { justify: "space-between", children: [_jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: name }), onEdit && (_jsx(IconButton, { "aria-label": "Edit appliance", variant: "ghost", w: "fit-content", icon: _jsx(Edit, { size: 18, stroke: colors.blue[3] }), onClick: () => onEdit(id) }))] }))), _jsxs(Flex, { gap: "base", children: [_jsx(ReadOnlyHomeItemImages, Object.assign({}, images)), _jsxs(Stack, { spacing: "4", flex: "1", children: [_jsx(ReadOnlyHomeItemRating, Object.assign({}, rating)), _jsxs(Stack, { spacing: "base", children: [_jsx(Text, { fontSize: "22px", fontWeight: "semibold", children: value }), _jsx(Box, { children: children === null || children === void 0 ? void 0 : children.map(({ id, name, value, type }) => {
+                                            const baseProps = {
+                                                key: `${id}-${name}-${value}-${type}`,
+                                                id,
+                                                value,
+                                                type,
+                                                name,
+                                            };
+                                            switch (type) {
+                                                case 'text':
+                                                    return _jsx(ReadOnlyHomeItemText, Object.assign({}, baseProps));
+                                                default:
+                                                    return null;
+                                            }
+                                        }) }), _jsx(Box, { flex: "1", borderBottom: "1px dashed", borderColor: "lightBlue.6", h: "1px" }), _jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: description })] })] })] })] }));
 };

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyAppliances.tsx

@@ -20,18 +20,23 @@ export const ReadOnlyAppliances = ({
   const images = children?.find(({ type }) => type === 'images')
   return (
     <Stack spacing="base" p="base" bg="neutral.white" mt="2px">
-      <Flex justify="space-between">
-        <Text fontSize="xs" textTransform="uppercase">
-          {name}
-        </Text>
-        <IconButton
-          aria-label="Edit appliance"
-          variant="ghost"
-          w="fit-content"
-          icon={<Edit size={18} stroke={colors.blue[3]} />}
-          onClick={() => onEdit(id)}
-        />
-      </Flex>
+      {name ||
+        (onEdit && (
+          <Flex justify="space-between">
+            <Text fontSize="xs" textTransform="uppercase">
+              {name}
+            </Text>
+            {onEdit && (
+              <IconButton
+                aria-label="Edit appliance"
+                variant="ghost"
+                w="fit-content"
+                icon={<Edit size={18} stroke={colors.blue[3]} />}
+                onClick={() => onEdit(id)}
+              />
+            )}
+          </Flex>
+        ))}
       <Flex gap="base">
         <ReadOnlyHomeItemImages {...images} />
         <Stack spacing="4" flex="1">
@@ -40,33 +45,33 @@ export const ReadOnlyAppliances = ({
             <Text fontSize="22px" fontWeight="semibold">
               {value}
             </Text>
+            <Box>
+              {children?.map(({ id, name, value, type }) => {
+                const baseProps = {
+                  key: `${id}-${name}-${value}-${type}`,
+                  id,
+                  value,
+                  type,
+                  name,
+                }
+                switch (type) {
+                  case 'text':
+                    return <ReadOnlyHomeItemText {...baseProps} />
+                  default:
+                    return null
+                }
+              })}
+            </Box>
+            <Box
+              flex="1"
+              borderBottom="1px dashed"
+              borderColor="lightBlue.6"
+              h="1px"
+            />
             <Text fontFamily="secondary" fontSize="sm">
               {description}
             </Text>
           </Stack>
-          <Box
-            flex="1"
-            borderBottom="1px dashed"
-            borderColor="lightBlue.6"
-            h="1px"
-          />
-          <Box>
-            {children?.map(({ id, name, value, type }) => {
-              const baseProps = {
-                key: `${id}-${name}-${value}-${type}`,
-                id,
-                value,
-                type,
-                name,
-              }
-              switch (type) {
-                case 'text':
-                  return <ReadOnlyHomeItemText {...baseProps} />
-                default:
-                  return null
-              }
-            })}
-          </Box>
         </Stack>
       </Flex>
     </Stack>

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyCollapsible.d.ts

@@ -0,0 +1,2 @@
+import { ReportI } from '../../../../../interfaces';
+export declare const ReadOnlyCollapsible: ({ children, }: Pick<ReportI, "children">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyCollapsible.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack } from '@chakra-ui/react';
+import { Collapsible, ReadOnlyTextArea } from '../../../..';
+export const ReadOnlyCollapsible = ({ children, }) => {
+    return (_jsx(Stack, { bg: "lightBlue.2", spacing: "2px", children: children === null || children === void 0 ? void 0 : children.map(({ id, name = '', value, type }) => {
+            const baseProps = {
+                id,
+                value,
+                type,
+                name,
+            };
+            switch (type) {
+                case 'text':
+                    return (_jsx(Collapsible, { title: name, showShadow: false, children: _jsx(ReadOnlyTextArea, Object.assign({}, baseProps)) }, `${id}-${name}-${value}-${type}`));
+                default:
+                    return null;
+            }
+        }) }));
+};

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyCollapsible.tsx

@@ -0,0 +1,34 @@
+import { Stack } from '@chakra-ui/react'
+import { Collapsible, ReadOnlyTextArea } from '@/components'
+import { ReportI } from '@/interfaces'
+
+export const ReadOnlyCollapsible = ({
+  children,
+}: Pick<ReportI, 'children'>) => {
+  return (
+    <Stack bg="lightBlue.2" spacing="2px">
+      {children?.map(({ id, name = '', value, type }) => {
+        const baseProps = {
+          id,
+          value,
+          type,
+          name,
+        }
+        switch (type) {
+          case 'text':
+            return (
+              <Collapsible
+                title={name}
+                showShadow={false}
+                key={`${id}-${name}-${value}-${type}`}
+              >
+                <ReadOnlyTextArea {...baseProps} />
+              </Collapsible>
+            )
+          default:
+            return null
+        }
+      })}
+    </Stack>
+  )
+}

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyGuidelines.js

@@ -3,7 +3,7 @@ import { Text, Stack, Grid } from '@chakra-ui/react';
 import { HiddenField } from '../../../..';
 import { fieldIcons } from '../../../../../helpers';
 export const ReadOnlyGuidelines = ({ name, children, onClick, }) => {
-    return (_jsxs(Stack, { spacing: "base", children: [_jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: name }), _jsx(Grid, { templateColumns: "repeat(2, minmax(80px, 1fr))", gap: "base", children: children === null || children === void 0 ? void 0 : children.map((child) => {
+    return (_jsxs(Stack, { spacing: "base", flex: "1", width: "100%", children: [_jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: name }), _jsx(Grid, { templateColumns: "repeat(auto-fit, minmax(0, 75px))", gap: "base", children: children === null || children === void 0 ? void 0 : children.map((child) => {
                     const { id, icon, value } = child;
                     const btnIcon = icon ? fieldIcons[icon] : '';
                     return (_jsx(HiddenField, { id: id, icon: btnIcon, name: value, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(id) }, id));

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyGuidelines.tsx

@@ -9,11 +9,11 @@ export const ReadOnlyGuidelines = ({
   onClick,
 }: ReadOnlyGuidelinesI) => {
   return (
-    <Stack spacing="base">
+    <Stack spacing="base" flex="1" width="100%">
       <Text fontSize="xs" textTransform="uppercase">
         {name}
       </Text>
-      <Grid templateColumns="repeat(2, minmax(80px, 1fr))" gap="base">
+      <Grid templateColumns="repeat(auto-fit, minmax(0, 75px))" gap="base">
         {children?.map((child) => {
           const { id, icon, value } = child
           const btnIcon = icon ? fieldIcons[icon] : ''

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyHomeItemText.js

@@ -3,7 +3,7 @@ import { Box, Flex, Text } from '@chakra-ui/react';
 export const ReadOnlyHomeItemText = ({ name, value }) => {
     if (!name)
         return null;
-    return (_jsxs(Flex, { gap: "base", children: [_jsx(Box, { w: "20%", children: _jsx(CustomText, { children: `${name}:` }) }), _jsx(CustomText, { children: String(value) })] }));
+    return (_jsxs(Flex, { gap: "base", children: [_jsx(Box, { w: "30%", children: _jsx(CustomText, { children: `${name}:` }) }), _jsx(CustomText, { children: String(value) })] }));
 };
 const CustomText = ({ children = '' }) => {
     return (_jsx(Text, { fontSize: "sm", fontFamily: "secondary", children: children }));

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyHomeItemText.tsx

@@ -5,7 +5,7 @@ export const ReadOnlyHomeItemText = ({ name, value }: Partial<ReportI>) => {
   if (!name) return null
   return (
     <Flex gap="base">
-      <Box w="20%">
+      <Box w="30%">
         <CustomText>{`${name}:`}</CustomText>
       </Box>
       <CustomText>{String(value)}</CustomText>

package/dist/components/forms/readOnly/fields/homeItem/index.d.ts

@@ -1,4 +1,5 @@
 export * from './ReadOnlyAppliances';
+export * from './ReadOnlyCollapsible';
 export * from './ReadOnlyGuidelines';
 export * from './ReadOnlyHomeItemImages';
 export * from './ReadOnlyHomeItemRating';

package/dist/components/forms/readOnly/fields/homeItem/index.js

@@ -1,4 +1,5 @@
 export * from './ReadOnlyAppliances';
+export * from './ReadOnlyCollapsible';
 export * from './ReadOnlyGuidelines';
 export * from './ReadOnlyHomeItemImages';
 export * from './ReadOnlyHomeItemRating';

package/dist/components/forms/readOnly/fields/homeItem/index.ts

@@ -1,4 +1,5 @@
 export * from './ReadOnlyAppliances'
+export * from './ReadOnlyCollapsible'
 export * from './ReadOnlyGuidelines'
 export * from './ReadOnlyHomeItemImages'
 export * from './ReadOnlyHomeItemRating'

package/dist/components/headers/CollapsibleHeader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex, Image, Text } from '@chakra-ui/react';
 export const CollapsibleHeader = ({ icon, title, }) => {
-    return (_jsxs(Flex, { align: "center", gap: "base", children: [_jsx(Image, { h: "auto", w: "icon.md", src: icon }), _jsx(Text, { fontSize: "sm", textTransform: "uppercase", children: title })] }));
+    return (_jsxs(Flex, { align: "center", gap: "base", children: [icon && _jsx(Image, { h: "auto", w: "icon.md", src: icon }), _jsx(Text, { fontSize: "sm", textTransform: "uppercase", children: title })] }));
 };

package/dist/helpers/receipts/Receipts.helper.js

@@ -1,16 +1,17 @@
 import { HomeDepot, Lowes, Walmart, DefaultReceipt } from '../../assets/images';
 export const receiptOrigins = {
-    homeDepot: HomeDepot,
-    HomeDepot: HomeDepot,
+    homedepot: HomeDepot,
     lowes: Lowes,
-    Lowes: Lowes,
     walmart: Walmart,
-    Walmart: Walmart,
     "": DefaultReceipt
 };
+function normalize(input) {
+    return input.trim().toLowerCase().replace(/['\s]+/g, '');
+}
 export const getReceiptOrigin = (key) => {
     var _a;
-    return (_a = receiptOrigins[key]) !== null && _a !== void 0 ? _a : DefaultReceipt;
+    const normalizedKey = normalize(key);
+    return (_a = receiptOrigins[normalizedKey]) !== null && _a !== void 0 ? _a : DefaultReceipt;
 };
 export const receipts = [
     {

package/dist/interfaces/forms/Collapsible.interface.d.ts

@@ -1,4 +1,5 @@
 export interface CollapsibleI {
-    icon: string;
+    icon?: string;
     title: string;
+    showShadow?: boolean;
 }

package/dist/interfaces/forms/dynamicForm/DynamicForm.interface.d.ts

@@ -1,5 +1,5 @@
 import { AIGridFieldI, AlertFieldType, AlertTabType, FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '../..';
-export type KindTypes = 'ai-image' | 'ai-grid' | 'checkbox' | 'checkbox-agreement' | 'checkbox-group' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'hidden' | 'notes' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default' | 'video' | UIKindTypes | HomeItemTypes | AlertTabType | AlertFieldType;
+export type KindTypes = 'ai-image' | 'ai-grid' | 'checkbox' | 'checkbox-agreement' | 'checkbox-group' | 'collapsible' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'hidden' | 'notes' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default' | 'video' | UIKindTypes | HomeItemTypes | AlertTabType | AlertFieldType;
 export type UIKindTypes = 'tile-body' | 'tile-body-logo' | 'tile-body-header' | 'tile-body-section' | 'tile-body-section-grid' | 'tile-body-partner-image' | 'tile-body-description' | 'tile-form' | 'tile-body-action' | 'vertical-icon' | 'primary-cta' | 'secondary-cta';
 export type HomeItemTypes = 'appliances' | 'images' | 'guidelines' | 'item-related' | 'item-icon-btn';
 export type IconTypes = 'barcode' | 'battery' | 'billing' | 'book' | 'book-opened' | 'calc' | 'calendar' | 'check' | 'co2' | 'contact' | 'date' | 'default' | 'detector' | 'electricity' | 'fire' | 'goldbars' | 'heart' | 'image' | 'life-preserver' | 'notes' | 'palette' | 'plant' | 'people' | 'price' | 'rating' | 'receipt' | 'registry' | 'sprinkler' | 'tools' | 'wind' | '68' | 'calendar2' | 'water' | 'calendar-drop' | 'umbrella' | 'heater' | 'roof' | 'foundation' | 'solar-panel' | 'pool' | 'drop' | 'mobile-drop' | 'light' | 'plate' | 'pressure-washer' | 'house' | 'target' | 'title' | 'company' | 'wallet' | UIIconTypes;

package/dist/interfaces/forms/readOnly/homeItem/ReadOnlyAppliances.interface.d.ts

@@ -1,4 +1,4 @@
 import { ReportI } from '../../..';
 export interface ReadOnlyAppliancesI extends ReportI {
-    onEdit: (id: string) => void;
+    onEdit?: (id: string) => void;
 }

package/dist/mocks/forms/dynamicForm.mock.js

@@ -673,7 +673,7 @@ export const tileUIMock = [
 export const viewingHomeItemMock = [
     {
         id: faker.database.mongodbObjectId(),
-        name: 'Appliances',
+        name: '',
         description: 'KitchenAid Counter-depth 20-cu ft French Door Refrigerator with Ice Maker and Water dispenser (Stainless Steel) ENERGY STAR',
         comments: faker.lorem.sentence(),
         value: 'Refrigerator',
@@ -687,21 +687,13 @@ export const viewingHomeItemMock = [
                 description: '',
                 comments: '',
                 value: [
-                    faker.image.urlLoremFlickr(),
-                    faker.image.urlLoremFlickr(),
-                    faker.image.urlLoremFlickr(),
-                    faker.image.urlLoremFlickr(),
+                    faker.image.urlPicsumPhotos(),
+                    faker.image.urlPicsumPhotos(),
+                    faker.image.urlPicsumPhotos(),
+                    faker.image.urlPicsumPhotos(),
                 ],
                 type: 'images',
             },
-            {
-                id: faker.database.mongodbObjectId(),
-                name: '',
-                description: '',
-                comments: '',
-                value: 4,
-                type: 'rating',
-            },
             {
                 id: faker.database.mongodbObjectId(),
                 name: 'Brand',
@@ -772,13 +764,41 @@ export const viewingHomeItemMock = [
     },
     {
         id: faker.database.mongodbObjectId(),
-        name: 'Notes',
+        name: 'Collapsible',
         description: '',
         comments: faker.lorem.sentence(),
         value: faker.lorem.paragraphs(),
-        type: 'notes',
+        type: 'collapsible',
         visible: true,
-        options: [],
+        children: [
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Care Instructions',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: faker.lorem.paragraphs(),
+                type: 'text',
+                visible: true,
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'OVERVIEW',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: faker.lorem.paragraphs(),
+                type: 'text',
+                visible: true,
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Dimensions',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: faker.lorem.paragraphs(),
+                type: 'text',
+                visible: true,
+            },
+        ],
     },
 ];
 export const unknownFormMock = {

package/dist/stories/forms/readOnly/ReadOnlyDynamicForm.stories.d.ts

@@ -3,3 +3,4 @@ import { DynamicFormI } from '../../../interfaces';
 declare const _default: Meta;
 export default _default;
 export declare const ReadOnlyDynamicFormComponent: (args: DynamicFormI) => import("react/jsx-runtime").JSX.Element;
+export declare const ReadOnlyAddItem: (args: DynamicFormI) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/forms/readOnly/ReadOnlyDynamicForm.stories.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@chakra-ui/react';
+import { action } from '@storybook/addon-actions';
 import { ReadOnlyDynamicForm } from '../../../components';
-import { unknownFormMock } from '../../../mocks';
+import { unknownFormMock, viewingHomeItemMock } from '../../../mocks';
 import { mapApiObjectToFormFields } from '../../../utils';
 export default {
     title: 'Components/Forms/ReadOnlyDynamicForm',
@@ -13,3 +14,6 @@ export const ReadOnlyDynamicFormComponent = (args) => {
     });
     return (_jsx(Box, { p: "base", bg: "neutral.white", w: ['full', '500px'], children: _jsx(ReadOnlyDynamicForm, { form: unknownForm }) }));
 };
+export const ReadOnlyAddItem = (args) => {
+    return (_jsx(Box, { p: "base", bg: "#EFECF7", w: ['full', '433px'], children: _jsx(ReadOnlyDynamicForm, { form: viewingHomeItemMock, onClick: action('onClick') }) }));
+};

package/dist/stories/receipts/receipt/ReceiptDetails.stories.d.ts

@@ -13,6 +13,7 @@ export declare const ReceiptDetailsComponent: {
         store: string;
         storePhone: string;
         name: string;
+        origin: string;
         total: string;
         onEdit: import("@storybook/addon-actions").HandlerFunction;
         onFileClick: () => void;

package/dist/stories/receipts/receipt/ReceiptDetails.stories.js

@@ -18,6 +18,7 @@ ReceiptDetailsComponent.args = {
     store: '8418',
     storePhone: '1234567890',
     name: 'Home Depot',
+    origin: "Home Depot",
     total: '41.65',
     onEdit: action('onEdit'),
     onFileClick: () => { }

package/package.json

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

package/src/components/forms/Collapsible.tsx

@@ -14,9 +14,10 @@ export const Collapsible = ({
   children,
   icon,
   title,
+  showShadow = true,
 }: PropsWithChildren<CollapsibleI>) => {
   return (
-    <Accordion flex="1" allowMultiple boxShadow="md">
+    <Accordion flex="1" allowMultiple boxShadow={showShadow ? 'md' : 'none'}>
       <AccordionItem border="none">
         {({ isExpanded }) => (
           <>
@@ -28,7 +29,7 @@ export const Collapsible = ({
               borderBottom="1px solid"
               borderColor={isExpanded ? 'lightBlue.2' : 'transparent'}
               _hover={{
-                boxShadow: 'lg',
+                boxShadow: showShadow ? 'lg' : 'none',
               }}
               _focus={{
                 outline: 'none',

package/src/components/forms/readOnly/ReadOnlyDynamicForm.tsx

@@ -2,6 +2,7 @@ import { Box } from '@chakra-ui/react'
 import { ReadOnlyDynamicFormI, IconTypes } from '@/interfaces'
 import {
   ReadOnlyAppliances,
+  ReadOnlyCollapsible,
   ReadOnlyDate,
   ReadOnlyGrid,
   ReadOnlyGroup,
@@ -15,7 +16,7 @@ import { fieldIcons } from '@/helpers'
 export const ReadOnlyDynamicForm = ({
   form: fields,
   onClick,
-  onEdit = () => {},
+  onEdit,
 }: ReadOnlyDynamicFormI) => {
   return (
     <Box bg="lightBlue.1" overflow="scroll">
@@ -74,6 +75,8 @@ export const ReadOnlyDynamicForm = ({
             return <ReadOnlyGroup key={id}>{children}</ReadOnlyGroup>
           case 'appliances':
             return <ReadOnlyAppliances {...field} key={id} onEdit={onEdit} />
+          case 'collapsible':
+            return <ReadOnlyCollapsible {...field} key={id} />
           case 'notes':
             return <ReadOnlyNotes {...field} key={id} />
           default:

package/src/components/forms/readOnly/fields/homeItem/ReadOnlyAppliances.tsx

@@ -20,18 +20,23 @@ export const ReadOnlyAppliances = ({
   const images = children?.find(({ type }) => type === 'images')
   return (
     <Stack spacing="base" p="base" bg="neutral.white" mt="2px">
-      <Flex justify="space-between">
-        <Text fontSize="xs" textTransform="uppercase">
-          {name}
-        </Text>
-        <IconButton
-          aria-label="Edit appliance"
-          variant="ghost"
-          w="fit-content"
-          icon={<Edit size={18} stroke={colors.blue[3]} />}
-          onClick={() => onEdit(id)}
-        />
-      </Flex>
+      {name ||
+        (onEdit && (
+          <Flex justify="space-between">
+            <Text fontSize="xs" textTransform="uppercase">
+              {name}
+            </Text>
+            {onEdit && (
+              <IconButton
+                aria-label="Edit appliance"
+                variant="ghost"
+                w="fit-content"
+                icon={<Edit size={18} stroke={colors.blue[3]} />}
+                onClick={() => onEdit(id)}
+              />
+            )}
+          </Flex>
+        ))}
       <Flex gap="base">
         <ReadOnlyHomeItemImages {...images} />
         <Stack spacing="4" flex="1">
@@ -40,33 +45,33 @@ export const ReadOnlyAppliances = ({
             <Text fontSize="22px" fontWeight="semibold">
               {value}
             </Text>
+            <Box>
+              {children?.map(({ id, name, value, type }) => {
+                const baseProps = {
+                  key: `${id}-${name}-${value}-${type}`,
+                  id,
+                  value,
+                  type,
+                  name,
+                }
+                switch (type) {
+                  case 'text':
+                    return <ReadOnlyHomeItemText {...baseProps} />
+                  default:
+                    return null
+                }
+              })}
+            </Box>
+            <Box
+              flex="1"
+              borderBottom="1px dashed"
+              borderColor="lightBlue.6"
+              h="1px"
+            />
             <Text fontFamily="secondary" fontSize="sm">
               {description}
             </Text>
           </Stack>
-          <Box
-            flex="1"
-            borderBottom="1px dashed"
-            borderColor="lightBlue.6"
-            h="1px"
-          />
-          <Box>
-            {children?.map(({ id, name, value, type }) => {
-              const baseProps = {
-                key: `${id}-${name}-${value}-${type}`,
-                id,
-                value,
-                type,
-                name,
-              }
-              switch (type) {
-                case 'text':
-                  return <ReadOnlyHomeItemText {...baseProps} />
-                default:
-                  return null
-              }
-            })}
-          </Box>
         </Stack>
       </Flex>
     </Stack>

package/src/components/forms/readOnly/fields/homeItem/ReadOnlyCollapsible.tsx

@@ -0,0 +1,34 @@
+import { Stack } from '@chakra-ui/react'
+import { Collapsible, ReadOnlyTextArea } from '@/components'
+import { ReportI } from '@/interfaces'
+
+export const ReadOnlyCollapsible = ({
+  children,
+}: Pick<ReportI, 'children'>) => {
+  return (
+    <Stack bg="lightBlue.2" spacing="2px">
+      {children?.map(({ id, name = '', value, type }) => {
+        const baseProps = {
+          id,
+          value,
+          type,
+          name,
+        }
+        switch (type) {
+          case 'text':
+            return (
+              <Collapsible
+                title={name}
+                showShadow={false}
+                key={`${id}-${name}-${value}-${type}`}
+              >
+                <ReadOnlyTextArea {...baseProps} />
+              </Collapsible>
+            )
+          default:
+            return null
+        }
+      })}
+    </Stack>
+  )
+}

package/src/components/forms/readOnly/fields/homeItem/ReadOnlyGuidelines.tsx

@@ -9,11 +9,11 @@ export const ReadOnlyGuidelines = ({
   onClick,
 }: ReadOnlyGuidelinesI) => {
   return (
-    <Stack spacing="base">
+    <Stack spacing="base" flex="1" width="100%">
       <Text fontSize="xs" textTransform="uppercase">
         {name}
       </Text>
-      <Grid templateColumns="repeat(2, minmax(80px, 1fr))" gap="base">
+      <Grid templateColumns="repeat(auto-fit, minmax(0, 75px))" gap="base">
         {children?.map((child) => {
           const { id, icon, value } = child
           const btnIcon = icon ? fieldIcons[icon] : ''

package/src/components/forms/readOnly/fields/homeItem/ReadOnlyHomeItemText.tsx

@@ -5,7 +5,7 @@ export const ReadOnlyHomeItemText = ({ name, value }: Partial<ReportI>) => {
   if (!name) return null
   return (
     <Flex gap="base">
-      <Box w="20%">
+      <Box w="30%">
         <CustomText>{`${name}:`}</CustomText>
       </Box>
       <CustomText>{String(value)}</CustomText>

package/src/components/forms/readOnly/fields/homeItem/index.ts

@@ -1,4 +1,5 @@
 export * from './ReadOnlyAppliances'
+export * from './ReadOnlyCollapsible'
 export * from './ReadOnlyGuidelines'
 export * from './ReadOnlyHomeItemImages'
 export * from './ReadOnlyHomeItemRating'

package/src/components/headers/CollapsibleHeader.tsx

@@ -7,7 +7,7 @@ export const CollapsibleHeader = ({
 }: Pick<CollapsibleI, 'icon' | 'title'>) => {
   return (
     <Flex align="center" gap="base">
-      <Image h="auto" w="icon.md" src={icon} />
+      {icon && <Image h="auto" w="icon.md" src={icon} />}
       <Text fontSize="sm" textTransform="uppercase">
         {title}
       </Text>

package/src/helpers/receipts/Receipts.helper.ts

@@ -2,17 +2,19 @@ import { ReceiptCardItemI } from '@/interfaces'
 import { HomeDepot, Lowes, Walmart, DefaultReceipt } from '@/assets/images'
 
 export const receiptOrigins: Record<string, string> = {
-  homeDepot: HomeDepot,
-  HomeDepot: HomeDepot,
+  homedepot: HomeDepot,
   lowes: Lowes,
-  Lowes: Lowes,
   walmart: Walmart,
-  Walmart: Walmart,
   "" : DefaultReceipt
 }
 
+function normalize(input: string) {
+  return input.trim().toLowerCase().replace(/['\s]+/g, '');
+}
+
 export const getReceiptOrigin = (key: string): string => {
-  return receiptOrigins[key] ?? DefaultReceipt;
+  const normalizedKey = normalize(key)
+  return receiptOrigins[normalizedKey] ?? DefaultReceipt;
 };
 
 export const receipts: ReceiptCardItemI[] = [

package/src/interfaces/forms/Collapsible.interface.ts

@@ -1,4 +1,5 @@
 export interface CollapsibleI {
-  icon: string
+  icon?: string
   title: string
+  showShadow?: boolean
 }

package/src/interfaces/forms/dynamicForm/DynamicForm.interface.ts

@@ -14,6 +14,7 @@ export type KindTypes =
   | 'checkbox'
   | 'checkbox-agreement'
   | 'checkbox-group'
+  | 'collapsible'
   | 'currency'
   | 'date'
   | 'email'

package/src/interfaces/forms/readOnly/homeItem/ReadOnlyAppliances.interface.ts

@@ -1,5 +1,5 @@
 import { ReportI } from '@/interfaces'
 
 export interface ReadOnlyAppliancesI extends ReportI {
-  onEdit: (id: string) => void
+  onEdit?: (id: string) => void
 }

package/src/mocks/forms/dynamicForm.mock.ts

@@ -681,7 +681,7 @@ export const tileUIMock: ReportI[] = [
 export const viewingHomeItemMock: ReportI[] = [
   {
     id: faker.database.mongodbObjectId(),
-    name: 'Appliances',
+    name: '',
     description:
       'KitchenAid Counter-depth 20-cu ft French Door Refrigerator with Ice Maker and Water dispenser (Stainless Steel) ENERGY STAR',
     comments: faker.lorem.sentence(),
@@ -696,21 +696,13 @@ export const viewingHomeItemMock: ReportI[] = [
         description: '',
         comments: '',
         value: [
-          faker.image.urlLoremFlickr(),
-          faker.image.urlLoremFlickr(),
-          faker.image.urlLoremFlickr(),
-          faker.image.urlLoremFlickr(),
+          faker.image.urlPicsumPhotos(),
+          faker.image.urlPicsumPhotos(),
+          faker.image.urlPicsumPhotos(),
+          faker.image.urlPicsumPhotos(),
         ],
         type: 'images',
       },
-      {
-        id: faker.database.mongodbObjectId(),
-        name: '',
-        description: '',
-        comments: '',
-        value: 4,
-        type: 'rating',
-      },
       {
         id: faker.database.mongodbObjectId(),
         name: 'Brand',
@@ -781,13 +773,41 @@ export const viewingHomeItemMock: ReportI[] = [
   },
   {
     id: faker.database.mongodbObjectId(),
-    name: 'Notes',
+    name: 'Collapsible',
     description: '',
     comments: faker.lorem.sentence(),
     value: faker.lorem.paragraphs(),
-    type: 'notes',
+    type: 'collapsible',
     visible: true,
-    options: [],
+    children: [
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Care Instructions',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: faker.lorem.paragraphs(),
+        type: 'text',
+        visible: true,
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'OVERVIEW',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: faker.lorem.paragraphs(),
+        type: 'text',
+        visible: true,
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Dimensions',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: faker.lorem.paragraphs(),
+        type: 'text',
+        visible: true,
+      },
+    ],
   },
 ]
 

package/src/stories/forms/readOnly/ReadOnlyDynamicForm.stories.tsx

@@ -1,7 +1,8 @@
 import { Meta } from '@storybook/react'
 import { Box } from '@chakra-ui/react'
+import { action } from '@storybook/addon-actions'
 import { ReadOnlyDynamicForm } from '@/components'
-import { unknownFormMock } from '@/mocks'
+import { unknownFormMock, viewingHomeItemMock } from '@/mocks'
 import { DynamicFormI } from '@/interfaces'
 import { mapApiObjectToFormFields } from '@/utils'
 
@@ -20,3 +21,14 @@ export const ReadOnlyDynamicFormComponent = (args: DynamicFormI) => {
     </Box>
   )
 }
+
+export const ReadOnlyAddItem = (args: DynamicFormI) => {
+  return (
+    <Box p="base" bg="#EFECF7" w={['full', '433px']}>
+      <ReadOnlyDynamicForm
+        form={viewingHomeItemMock}
+        onClick={action('onClick')}
+      />
+    </Box>
+  )
+}

package/src/stories/receipts/receipt/ReceiptDetails.stories.tsx

@@ -26,6 +26,7 @@ ReceiptDetailsComponent.args = {
   store: '8418',
   storePhone: '1234567890',
   name: 'Home Depot',
+  origin: "Home Depot",
   total: '41.65',
   onEdit: action('onEdit'),
   onFileClick: () => {}