@homefile/components-v2 2.30.0 → 2.31.0

package/dist/components/homeAssistant/HomeAssistantTutorial.d.ts

@@ -1,2 +1,2 @@
 import { HomeAssistantTutorialI } from '../../interfaces';
-export declare const HomeAssistantTutorial: ({ onStart, videoUrl, }: HomeAssistantTutorialI) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeAssistantTutorial: ({ onStart, videoUrl, maxWidth, }: HomeAssistantTutorialI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/HomeAssistantTutorial.js

@@ -4,7 +4,7 @@ import { t } from 'i18next';
 import { Box, Button, Circle, Flex, Stack, Text } from '@chakra-ui/react';
 import { ChevronRight, VideoPlayerModal, VideoPlayerTrigger, } from '..';
 import { colors } from '../../theme/colors';
-export const HomeAssistantTutorial = ({ onStart, videoUrl, }) => {
+export const HomeAssistantTutorial = ({ onStart, videoUrl, maxWidth, }) => {
     const [url, setUrl] = useState();
-    return (_jsxs(Stack, { spacing: "base", align: "center", maxW: "483px", px: ['base', 0], zIndex: "2", children: [_jsx(Text, { fontSize: "30px", lineHeight: "32px", textAlign: "center", children: t('homeAssistant.tutorialTitle') }), _jsx(Text, { fontFamily: "secondary", textAlign: "center", children: t('homeAssistant.tutorialDescription') }), _jsxs(Stack, { spacing: "base", w: "284px", children: [_jsx(Box, { boxShadow: "lg", children: _jsx(VideoPlayerTrigger, { url: videoUrl, value: videoUrl, ratio: 16 / 9, onPlay: (value) => setUrl(value) }) }), _jsx(Button, { onClick: onStart, textTransform: "capitalize", children: _jsxs(Flex, { align: "center", justify: "space-between", w: "100%", px: "base", children: [_jsx(Text, { color: "neutral.white", children: t('homeAssistant.tutorialButton') }), _jsx(Circle, { size: "40px", bg: "blue.1", color: "neutral.white", children: _jsx(ChevronRight, { size: 26, stroke: colors.neutral.white }) })] }) })] }), _jsx(Text, { fontFamily: "secondary", textAlign: "center", children: t('homeAssistant.tutorialNote') }), url && (_jsx(VideoPlayerModal, { url: url, onClose: () => setUrl(undefined), showOverlay: true }))] }));
+    return (_jsxs(Stack, { spacing: "base", align: "center", maxW: maxWidth || '483px', px: ['base', 0], zIndex: "2", children: [_jsx(Text, { fontSize: "30px", lineHeight: "32px", textAlign: "center", children: t('homeAssistant.tutorialTitle') }), _jsx(Text, { fontFamily: "secondary", textAlign: "center", children: t('homeAssistant.tutorialDescription') }), _jsxs(Stack, { spacing: "base", w: "284px", children: [videoUrl && (_jsx(Box, { boxShadow: "lg", children: _jsx(VideoPlayerTrigger, { url: videoUrl, value: videoUrl, ratio: 16 / 9, onPlay: (value) => setUrl(value) }) })), _jsx(Button, { onClick: onStart, textTransform: "capitalize", children: _jsxs(Flex, { align: "center", justify: "space-between", w: "100%", px: "base", children: [_jsx(Text, { color: "neutral.white", children: t('homeAssistant.tutorialButton') }), _jsx(Circle, { size: "40px", bg: "blue.1", color: "neutral.white", children: _jsx(ChevronRight, { size: 26, stroke: colors.neutral.white }) })] }) })] }), _jsx(Text, { fontFamily: "secondary", textAlign: "center", children: t('homeAssistant.tutorialNote') }), url && (_jsx(VideoPlayerModal, { url: url, onClose: () => setUrl(undefined), showOverlay: true }))] }));
 };

package/dist/components/wizard/WizardSuccessHeader.d.ts

@@ -0,0 +1,2 @@
+import { WizardSuccessHeaderI } from '../../interfaces';
+export declare const WizardSuccessHeader: ({ title, subtitle, address, name, image, }: WizardSuccessHeaderI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/wizard/WizardSuccessHeader.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Center, Show, Stack, Text, Box, Flex, Container, Image, } from '@chakra-ui/react';
+import { ContainerHeader, Logo } from '..';
+import { randomImages } from '../../utils';
+import { useMyHomeCard } from '../../hooks';
+export const WizardSuccessHeader = ({ title, subtitle, address, name, image, }) => {
+    return (_jsx(Center, { w: "full", bg: "lightGreen.1", minH: "212px", children: _jsxs(Stack, { w: "full", spacing: "0", align: "center", children: [_jsx(Show, { below: "md", children: _jsx(Logo, {}) }), _jsxs(Flex, { gap: "8", w: { base: '80%', md: '70%' }, align: "center", pt: { base: '0', md: '8' }, direction: { base: 'column', md: 'row' }, children: [_jsx(WizardHomeCard, { address: address, name: name, image: image }), _jsxs(Stack, { spacing: "2", children: [_jsxs(Text, { fontSize: "xl", fontWeight: "semibold", color: "green.1", children: [t('ariaLabels.success'), "!"] }), _jsx(Text, { fontSize: { base: '2xl', md: '3xl' }, lineHeight: "shorter", children: title }), subtitle && _jsx(Text, { fontFamily: "secondary", children: subtitle }), _jsx(Show, { below: "md", children: _jsx(Box, { h: "6" }) })] })] })] }) }));
+};
+const WizardHomeCard = ({ address, name, image, }) => {
+    const { imageUrl } = useMyHomeCard({
+        image,
+    });
+    const { city, state, street, number = '', zip } = address || {};
+    return (_jsxs(Container, { w: "250px", children: [_jsx(ContainerHeader, { menuItems: [], isThin: true }), _jsx(Image, { src: ((image === null || image === void 0 ? void 0 : image.bucketName) && imageUrl) || randomImages(0), alt: `${name} ${t('images.altImage')}`, objectFit: "cover", w: "full" }), _jsxs(Stack, { bg: "neutral.white", px: "2", py: "4", children: [_jsx(Flex, { align: "center", gap: "1", children: _jsx(Box, { children: _jsx(Text, { textOverflow: "ellipsis", noOfLines: 1, textAlign: "left", textTransform: "uppercase", children: name }) }) }), _jsxs(Box, { lineHeight: "1.2", textAlign: "left", children: [_jsx(Text, { isTruncated: true, variant: "home", children: `${number} ${street}` }), _jsxs(Flex, { gap: "1", children: [_jsx(Text, { isTruncated: true, variant: "home", children: `${city},` }), _jsx(Text, { isTruncated: true, variant: "home", children: state })] }), _jsx(Text, { variant: "home", children: zip })] })] })] }));
+};

package/dist/hooks/myHomes/useMyHomeCard.d.ts

@@ -1,6 +1,6 @@
 import { ImageI } from '../../interfaces';
 interface useMyHomeCardI {
-    accountType: string | undefined;
+    accountType?: string | undefined;
     image: ImageI | null | undefined;
 }
 export declare const useMyHomeCard: ({ accountType, image }: useMyHomeCardI) => {

package/dist/interfaces/homeAssistant/HomeAssistantTutorial.interface.d.ts

@@ -1,4 +1,5 @@
 export interface HomeAssistantTutorialI {
     onStart: () => void;
-    videoUrl: string;
+    videoUrl?: string;
+    maxWidth?: string;
 }

package/dist/interfaces/wizard/WizardSuccessHeader.interface.d.ts

@@ -0,0 +1,3 @@
+import { MyHomeCardI, WizardTextHeaderI } from '..';
+export interface WizardSuccessHeaderI extends WizardTextHeaderI, Pick<MyHomeCardI, 'address' | 'name' | 'image'> {
+}

package/dist/interfaces/wizard/WizardSuccessHeader.interface.js

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

package/dist/interfaces/wizard/index.d.ts

@@ -1,2 +1,3 @@
 export * from './ControlledWizard.interface';
 export * from './WizardTextHeader.interface';
+export * from './WizardSuccessHeader.interface';

package/dist/interfaces/wizard/index.js

@@ -1,2 +1,3 @@
 export * from './ControlledWizard.interface';
 export * from './WizardTextHeader.interface';
+export * from './WizardSuccessHeader.interface';

package/dist/stories/wizard/ControlledWizard.stories.js

@@ -8,11 +8,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ConfirmProperty, ControlledWizard, MyHomeDetails, SearchRecords, WizardTextHeader, } from '../../components';
-import { Box } from '@chakra-ui/react';
+import { ConfirmProperty, ControlledWizard, HomeAssistantTutorial, MyHomeDetails, SearchRecords, WizardTextHeader, } from '../../components';
+import { Box, Center } from '@chakra-ui/react';
 import { useState } from 'react';
 import { formValues } from '../../helpers';
 import { propertiesMock } from '../../mocks';
+import { WizardSuccessHeader } from '../../components/wizard/WizardSuccessHeader';
 export default {
     title: 'Components/Wizard/ControlledWizard',
     component: ControlledWizard,
@@ -41,8 +42,18 @@ export const ControlledWizardComponent = () => {
             {
                 header: (_jsx(WizardTextHeader, { title: "This is the data we found in public records.", subtitle: "Details may not represent the most up-to-date info about your home." })),
                 body: () => (_jsx(ConfirmProperty, { isWizard: true, properties: propertiesMock, handleAddress: () => {
-                        setStep(0);
+                        setStep(3);
                     } })),
             },
+            {
+                header: (_jsx(WizardSuccessHeader, { title: "Your homefile has been created.", subtitle: "Your Homefile is created. You will be able to edit and update your home details once setup is complete.", address: {
+                        city: 'Austin',
+                        state: 'Texas',
+                        street: 'Ronald Regan long name st here',
+                        number: '123',
+                        zip: '80123',
+                    }, name: "your home" })),
+                body: () => (_jsx(Center, { w: "full", h: "full", children: _jsx(HomeAssistantTutorial, { onStart: () => { }, maxWidth: "500px" }) })),
+            },
         ] }));
 };

package/package.json

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

package/src/components/homeAssistant/HomeAssistantTutorial.tsx

@@ -12,13 +12,14 @@ import { HomeAssistantTutorialI } from '@/interfaces'
 export const HomeAssistantTutorial = ({
   onStart,
   videoUrl,
+  maxWidth,
 }: HomeAssistantTutorialI) => {
   const [url, setUrl] = useState<string | undefined>()
   return (
     <Stack
       spacing="base"
       align="center"
-      maxW="483px"
+      maxW={maxWidth || '483px'}
       px={['base', 0]}
       zIndex="2"
     >
@@ -29,14 +30,16 @@ export const HomeAssistantTutorial = ({
         {t('homeAssistant.tutorialDescription')}
       </Text>
       <Stack spacing="base" w="284px">
-        <Box boxShadow="lg">
-          <VideoPlayerTrigger
-            url={videoUrl}
-            value={videoUrl}
-            ratio={16 / 9}
-            onPlay={(value) => setUrl(value)}
-          />
-        </Box>
+        {videoUrl && (
+          <Box boxShadow="lg">
+            <VideoPlayerTrigger
+              url={videoUrl}
+              value={videoUrl}
+              ratio={16 / 9}
+              onPlay={(value) => setUrl(value)}
+            />
+          </Box>
+        )}
         <Button onClick={onStart} textTransform="capitalize">
           <Flex align="center" justify="space-between" w="100%" px="base">
             <Text color="neutral.white">

package/src/components/wizard/WizardSuccessHeader.tsx

@@ -0,0 +1,102 @@
+import { t } from 'i18next'
+import {
+  Center,
+  Show,
+  Stack,
+  Text,
+  Box,
+  Flex,
+  Container,
+  Image,
+} from '@chakra-ui/react'
+import { ContainerHeader, Logo } from '@/components'
+import { MyHomeCardI, WizardSuccessHeaderI } from '@/interfaces'
+import { randomImages } from '@/utils'
+import { useMyHomeCard } from '@/hooks'
+
+export const WizardSuccessHeader = ({
+  title,
+  subtitle,
+  address,
+  name,
+  image,
+}: WizardSuccessHeaderI) => {
+  return (
+    <Center w="full" bg="lightGreen.1" minH="212px">
+      <Stack w="full" spacing="0" align="center">
+        <Show below="md">
+          <Logo />
+        </Show>
+        <Flex
+          gap="8"
+          w={{ base: '80%', md: '70%' }}
+          align="center"
+          pt={{ base: '0', md: '8' }}
+          direction={{ base: 'column', md: 'row' }}
+        >
+          <WizardHomeCard address={address} name={name} image={image} />
+          <Stack spacing="2">
+            <Text fontSize="xl" fontWeight="semibold" color="green.1">
+              {t('ariaLabels.success')}!
+            </Text>
+            <Text fontSize={{ base: '2xl', md: '3xl' }} lineHeight="shorter">
+              {title}
+            </Text>
+            {subtitle && <Text fontFamily="secondary">{subtitle}</Text>}
+            <Show below="md">
+              <Box h="6" />
+            </Show>
+          </Stack>
+        </Flex>
+      </Stack>
+    </Center>
+  )
+}
+
+const WizardHomeCard = ({
+  address,
+  name,
+  image,
+}: Pick<MyHomeCardI, 'address' | 'name' | 'image'>) => {
+  const { imageUrl } = useMyHomeCard({
+    image,
+  })
+  const { city, state, street, number = '', zip } = address || {}
+  return (
+    <Container w="250px">
+      <ContainerHeader menuItems={[]} isThin />
+      <Image
+        src={(image?.bucketName && imageUrl) || randomImages(0)}
+        alt={`${name} ${t('images.altImage')}`}
+        objectFit="cover"
+        w="full"
+      />
+      <Stack bg="neutral.white" px="2" py="4">
+        <Flex align="center" gap="1">
+          <Box>
+            <Text
+              textOverflow="ellipsis"
+              noOfLines={1}
+              textAlign="left"
+              textTransform="uppercase"
+            >
+              {name}
+            </Text>
+          </Box>
+        </Flex>
+        <Box lineHeight="1.2" textAlign="left">
+          <Text isTruncated variant="home">
+            {`${number} ${street}`}
+          </Text>
+          <Flex gap="1">
+            <Text isTruncated variant="home">{`${city},`}</Text>
+            <Text isTruncated variant="home">
+              {state}
+            </Text>
+          </Flex>
+          <Text variant="home">{zip}</Text>
+        </Box>
+      </Stack>
+    </Container>
+  )
+}

package/src/hooks/myHomes/useMyHomeCard.ts

@@ -3,7 +3,7 @@ import { useImage } from '@/hooks'
 import { ImageI } from '@/interfaces'
 
 interface useMyHomeCardI {
-  accountType: string | undefined
+  accountType?: string | undefined
   image: ImageI | null | undefined
 }
 

package/src/interfaces/homeAssistant/HomeAssistantTutorial.interface.ts

@@ -1,4 +1,5 @@
 export interface HomeAssistantTutorialI {
   onStart: () => void
-  videoUrl: string
+  videoUrl?: string
+  maxWidth?: string
 }

package/src/interfaces/wizard/WizardSuccessHeader.interface.ts

@@ -0,0 +1,5 @@
+import { MyHomeCardI, WizardTextHeaderI } from '@/interfaces'
+
+export interface WizardSuccessHeaderI
+  extends WizardTextHeaderI,
+    Pick<MyHomeCardI, 'address' | 'name' | 'image'> {}

package/src/interfaces/wizard/index.ts

@@ -1,2 +1,3 @@
 export * from './ControlledWizard.interface'
 export * from './WizardTextHeader.interface'
+export * from './WizardSuccessHeader.interface'

package/src/stories/wizard/ControlledWizard.stories.tsx

@@ -2,15 +2,17 @@ import { Meta } from '@storybook/react'
 import {
   ConfirmProperty,
   ControlledWizard,
+  HomeAssistantTutorial,
   MyHomeDetails,
   SearchRecords,
   WizardTextHeader,
 } from '@/components'
-import { Box } from '@chakra-ui/react'
+import { Box, Center } from '@chakra-ui/react'
 import { useState } from 'react'
 import { formValues } from '@/helpers'
 import { propertiesMock } from '@/mocks'
 import { ControlledWizardI, HomeFormI } from '@/interfaces'
+import { WizardSuccessHeader } from '@/components/wizard/WizardSuccessHeader'
 
 export default {
   title: 'Components/Wizard/ControlledWizard',
@@ -74,11 +76,32 @@ export const ControlledWizardComponent = () => {
               isWizard
               properties={propertiesMock}
               handleAddress={() => {
-                setStep(0)
+                setStep(3)
               }}
             />
           ),
         },
+        {
+          header: (
+            <WizardSuccessHeader
+              title="Your homefile has been created."
+              subtitle="Your Homefile is created. You will be able to edit and update your home details once setup is complete."
+              address={{
+                city: 'Austin',
+                state: 'Texas',
+                street: 'Ronald Regan long name st here',
+                number: '123',
+                zip: '80123',
+              }}
+              name="your home"
+            />
+          ),
+          body: () => (
+            <Center w="full" h="full">
+              <HomeAssistantTutorial onStart={() => {}} maxWidth="500px" />
+            </Center>
+          ),
+        },
       ]}
     />
   )