@homefile/components-v2 2.24.8 → 2.24.10

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

@@ -1270,7 +1270,8 @@
     "resendResetBt": "Resend Reset Password Link",
     "title1": "We just sent a message to ",
     "title2": " with a link to activate your account.",
-    "title3": "to reset your password."
+    "title3": "to reset your password.",
+    "backToLogin": "Back to Login"
   },
   "valueMonitor": {
     "description": "Est Value of Property Added to Homefile",

package/dist/components/onboarding/pages/ResendResetPassword.d.ts

@@ -1,2 +1,2 @@
 import { EmailValidationI } from '../../../interfaces';
-export declare const ResendResetPassword: ({ email, isLoading, handleResendBt, }: EmailValidationI) => import("react/jsx-runtime").JSX.Element;
+export declare const ResendResetPassword: ({ email, isLoading, handleResendBt, handleBack }: EmailValidationI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/onboarding/pages/ResendResetPassword.js

@@ -3,6 +3,6 @@ import { t } from 'i18next';
 import { chakra, Container, Text, Image, Center, Button, } from '@chakra-ui/react';
 import { BasePageWrapper, ButtonLoader, Logo } from '../..';
 import { ResendPassword } from '../../../assets/images';
-export const ResendResetPassword = ({ email, isLoading = false, handleResendBt, }) => {
-    return (_jsx(BasePageWrapper, { children: _jsxs(Container, { size: "validation", boxShadow: "lg", children: [_jsxs(Container, { variant: "secondary", children: [_jsx(Logo, {}), _jsxs(Text, { variant: "title", textAlign: "center", px: ['container.sm', 'container.xl'], pb: 6, minH: "6rem", children: [_jsx(chakra.span, { color: "gray.3", children: t('validation.title1') }), _jsx(chakra.span, { color: "blue.2", children: email }), _jsx(Text, { variant: "title", children: t('validation.title3') })] }), _jsx(Center, { children: _jsx(Image, { src: ResendPassword, alt: "Activate account", h: ['100px', '145px'], w: "auto" }) })] }), _jsx(Text, { variant: "info", px: ['container.md', 'container.lg'], py: "2rem", textAlign: "center", children: t('validation.alert1') }), _jsx(Center, { children: _jsx(Button, { mb: 10, mx: 4, variant: "secondary", onClick: handleResendBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.resendResetBt') }) })] }) }));
+export const ResendResetPassword = ({ email, isLoading = false, handleResendBt, handleBack }) => {
+    return (_jsx(BasePageWrapper, { children: _jsxs(Container, { size: "validation", boxShadow: "lg", children: [_jsxs(Container, { variant: "secondary", children: [_jsx(Logo, {}), _jsxs(Text, { variant: "title", textAlign: "center", px: ['container.sm', 'container.xl'], pb: 6, minH: "6rem", children: [_jsx(chakra.span, { color: "gray.3", children: t('validation.title1') }), _jsx(chakra.span, { color: "blue.2", children: email }), _jsx(Text, { variant: "title", children: t('validation.title3') })] }), _jsx(Center, { children: _jsx(Image, { src: ResendPassword, alt: "Activate account", h: ['100px', '145px'], w: "auto" }) })] }), _jsx(Text, { variant: "info", px: ['container.md', 'container.lg'], py: "2rem", textAlign: "center", children: t('validation.alert1') }), _jsx(Center, { children: _jsx(Button, { mb: handleBack ? 5 : 10, mx: 4, variant: "secondary", onClick: handleResendBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.resendResetBt') }) }), handleBack && (_jsx(Center, { children: _jsx(Button, { mb: 10, mx: 4, variant: "primary", onClick: handleResendBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.backToLogin') }) }))] }) }));
 };

package/dist/hooks/forms/useDynamicForm.js

@@ -3,59 +3,56 @@ import { useForm } from 'react-hook-form';
 import { dynamicFormProxy } from '../../proxies';
 export const useDynamicForm = ({ fields, onUpload }) => {
     const [stateFields, setStateFields] = useState(fields);
-    const visibleFields = stateFields.filter((field) => field.visible || field.visible === undefined);
-    const hiddenFields = stateFields.filter((field) => field.visible === false);
     const form = useForm();
-    const { watch, setValue } = form;
+    const { watch, setValue, reset } = form;
+    useEffect(() => {
+        const setDefaults = (fields) => {
+            fields.forEach((field) => {
+                setValue(field.id, field.value);
+                if (field.children)
+                    setDefaults(field.children);
+            });
+        };
+        setDefaults(fields);
+        setStateFields(fields);
+        dynamicFormProxy.setFields(fields);
+    }, [fields, setValue]);
+    useEffect(() => {
+        const subscription = watch((fieldValues) => {
+            const updateFields = (fields) => fields.map((field) => (Object.assign(Object.assign({}, field), { value: field.type === 'currency'
+                    ? parseCurrencyValue(fieldValues[field.id])
+                    : fieldValues[field.id], children: field.children ? updateFields(field.children) : undefined })));
+            const updatedFields = updateFields(stateFields);
+            dynamicFormProxy.setFields(updatedFields);
+        });
+        return () => subscription.unsubscribe();
+    }, [stateFields, watch]);
+    useEffect(() => {
+        return () => {
+            dynamicFormProxy.setFields([]);
+            reset();
+        };
+    }, [reset]);
+    const visibleFields = stateFields.filter((field) => field.visible !== false);
+    const hiddenFields = stateFields.filter((field) => field.visible === false);
     const handleAddAll = () => {
-        const newFields = stateFields.map((field) => (Object.assign(Object.assign({}, field), { visible: true })));
-        setStateFields(newFields);
+        setStateFields(stateFields.map((field) => (Object.assign(Object.assign({}, field), { visible: true }))));
     };
     const handleAdd = (id) => {
-        const newFields = stateFields.map((field) => field.id === id ? Object.assign(Object.assign({}, field), { visible: true }) : field);
-        setStateFields(newFields);
+        setStateFields(stateFields.map((field) => field.id === id ? Object.assign(Object.assign({}, field), { visible: true }) : field));
     };
     const handleRemove = (id) => {
-        const newFields = stateFields.map((field) => field.id === id ? Object.assign(Object.assign({}, field), { visible: false }) : field);
-        setStateFields(newFields);
+        setStateFields(stateFields.map((field) => field.id === id ? Object.assign(Object.assign({}, field), { visible: false }) : field));
+    };
+    const handleFilesUpload = ({ id, files }) => {
+        onUpload === null || onUpload === void 0 ? void 0 : onUpload({ [id]: files });
     };
-    const parseCurrenyValue = (value) => {
+    function parseCurrencyValue(value) {
         if (typeof value === 'number')
             return value;
         const justNumbers = value === null || value === void 0 ? void 0 : value.replace(/[^0-9.]/g, '');
         return parseFloat(justNumbers);
-    };
-    const handleUpdateFields = (field, fieldValues) => {
-        var _a;
-        const value = fieldValues[field.id];
-        const isCurrency = field.type === 'currency';
-        const parsedValue = isCurrency ? parseCurrenyValue(value) : value;
-        return Object.assign(Object.assign({}, field), { value: parsedValue, children: (_a = field === null || field === void 0 ? void 0 : field.children) === null || _a === void 0 ? void 0 : _a.map((child) => handleUpdateFields(child, fieldValues)) });
-    };
-    const fieldValues = watch();
-    const handleFilesUpload = ({ id, files }) => {
-        const filesByField = {
-            [id]: files,
-        };
-        onUpload === null || onUpload === void 0 ? void 0 : onUpload(filesByField);
-    };
-    const handleSetDefaultValues = (fields) => {
-        fields.forEach((field) => {
-            setValue(field.id, field.value);
-            handleSetDefaultValues(field.children || []);
-        });
-    };
-    useEffect(() => {
-        handleSetDefaultValues(fields);
-        setStateFields(fields);
-        const updatedFields = fields.map((field) => {
-            return handleUpdateFields(field, fieldValues);
-        });
-        dynamicFormProxy.setFields(updatedFields);
-        return () => {
-            dynamicFormProxy.setFields([]);
-        };
-    }, [fields]);
+    }
     return {
         form,
         visibleFields,

package/dist/interfaces/pages/EmailValidation.interface.d.ts

@@ -2,4 +2,5 @@ export interface EmailValidationI {
     email: string;
     isLoading?: boolean;
     handleResendBt: () => void;
+    handleBack?: () => void;
 }

package/package.json

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

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

@@ -1270,7 +1270,8 @@
     "resendResetBt": "Resend Reset Password Link",
     "title1": "We just sent a message to ",
     "title2": " with a link to activate your account.",
-    "title3": "to reset your password."
+    "title3": "to reset your password.",
+    "backToLogin": "Back to Login"
   },
   "valueMonitor": {
     "description": "Est Value of Property Added to Homefile",

package/src/components/onboarding/pages/ResendResetPassword.tsx

@@ -16,6 +16,7 @@ export const ResendResetPassword = ({
   email,
   isLoading = false,
   handleResendBt,
+  handleBack
 }: EmailValidationI) => {
   return (
     <BasePageWrapper>
@@ -53,7 +54,7 @@ export const ResendResetPassword = ({
         </Text>
         <Center>
           <Button
-            mb={10}
+            mb={handleBack ? 5 : 10}
             mx={4}
             variant="secondary"
             onClick={handleResendBt}
@@ -64,6 +65,23 @@ export const ResendResetPassword = ({
             {t('validation.resendResetBt')}
           </Button>
         </Center>
+        {
+          handleBack && (
+            <Center>
+            <Button
+              mb={10}
+              mx={4}
+              variant="primary"
+              onClick={handleResendBt}
+              isLoading={isLoading}
+              spinner={<ButtonLoader isOutlined />}
+              size="onboarding"
+            >
+              {t('validation.backToLogin')}
+            </Button>
+          </Center>
+          )
+        }
       </Container>
     </BasePageWrapper>
   )

package/src/hooks/forms/useDynamicForm.ts

@@ -15,87 +15,78 @@ interface UseDynamicFormI {
 
 export const useDynamicForm = ({ fields, onUpload }: UseDynamicFormI) => {
   const [stateFields, setStateFields] = useState(fields)
-  const visibleFields = stateFields.filter(
-    (field) => field.visible || field.visible === undefined
-  )
+  const form = useForm()
+  const { watch, setValue, reset } = form
 
-  const hiddenFields = stateFields.filter((field) => field.visible === false)
+  useEffect(() => {
+    const setDefaults = (fields: ReportI[]) => {
+      fields.forEach((field) => {
+        setValue(field.id, field.value)
+        if (field.children) setDefaults(field.children)
+      })
+    }
+    setDefaults(fields)
+    setStateFields(fields)
+    dynamicFormProxy.setFields(fields)
+  }, [fields, setValue])
 
-  const form = useForm()
+  useEffect(() => {
+    const subscription = watch((fieldValues: FieldValues) => {
+      const updateFields = (fields: ReportI[]): ReportI[] =>
+        fields.map((field) => ({
+          ...field,
+          value:
+            field.type === 'currency'
+              ? parseCurrencyValue(fieldValues[field.id])
+              : fieldValues[field.id],
+          children: field.children ? updateFields(field.children) : undefined,
+        }))
+      const updatedFields = updateFields(stateFields)
+      dynamicFormProxy.setFields(updatedFields)
+    })
+    return () => subscription.unsubscribe()
+  }, [stateFields, watch])
 
-  const { watch, setValue } = form
+  useEffect(() => {
+    return () => {
+      dynamicFormProxy.setFields([])
+      reset()
+    }
+  }, [reset])
+
+  const visibleFields = stateFields.filter((field) => field.visible !== false)
+  const hiddenFields = stateFields.filter((field) => field.visible === false)
 
   const handleAddAll = () => {
-    const newFields = stateFields.map((field) => ({ ...field, visible: true }))
-    setStateFields(newFields)
+    setStateFields(stateFields.map((field) => ({ ...field, visible: true })))
   }
 
   const handleAdd = (id: string) => {
-    const newFields = stateFields.map((field) =>
-      field.id === id ? { ...field, visible: true } : field
+    setStateFields(
+      stateFields.map((field) =>
+        field.id === id ? { ...field, visible: true } : field
+      )
     )
-    setStateFields(newFields)
   }
 
   const handleRemove = (id: string) => {
-    const newFields = stateFields.map((field) =>
-      field.id === id ? { ...field, visible: false } : field
+    setStateFields(
+      stateFields.map((field) =>
+        field.id === id ? { ...field, visible: false } : field
+      )
     )
-    setStateFields(newFields)
-  }
-
-  const parseCurrenyValue = (value: string | number): number => {
-    if (typeof value === 'number') return value
-    const justNumbers = value?.replace(/[^0-9.]/g, '')
-    return parseFloat(justNumbers)
   }
 
-  const handleUpdateFields = (
-    field: ReportI,
-    fieldValues: FieldValues
-  ): ReportI => {
-    const value = fieldValues[field.id]
-    const isCurrency = field.type === 'currency'
-    const parsedValue = isCurrency ? parseCurrenyValue(value) : value
-
-    return {
-      ...field,
-      value: parsedValue,
-      children: field?.children?.map((child) =>
-        handleUpdateFields(child, fieldValues)
-      ),
-    }
-  }
-
-  const fieldValues = watch()
-
   const handleFilesUpload = ({ id, files }: FilesUploadI) => {
-    const filesByField = {
-      [id]: files,
-    }
-    onUpload?.(filesByField)
+    onUpload?.({ [id]: files })
   }
 
-  const handleSetDefaultValues = (fields: ReportI[]) => {
-    fields.forEach((field) => {
-      setValue(field.id, field.value)
-      handleSetDefaultValues(field.children || [])
-    })
+  function parseCurrencyValue(value: string | number): number {
+    if (typeof value === 'number') return value
+    const justNumbers = value?.replace(/[^0-9.]/g, '')
+    return parseFloat(justNumbers)
   }
 
-  useEffect(() => {
-    handleSetDefaultValues(fields)
-    setStateFields(fields)
-    const updatedFields = fields.map((field) => {
-      return handleUpdateFields(field, fieldValues)
-    })
-    dynamicFormProxy.setFields(updatedFields)
-
-    return () => {
-      dynamicFormProxy.setFields([])
-    }
-  }, [fields])
-
   return {
     form,
     visibleFields,

package/src/interfaces/pages/EmailValidation.interface.ts

@@ -2,4 +2,5 @@ export interface EmailValidationI {
   email: string
   isLoading?: boolean
   handleResendBt: () => void
+  handleBack?: () => void
 }