@homefile/components-v2 2.7.15 → 2.7.17

package/dist/components/myProfile/details/UserDetails.d.ts

@@ -1,2 +1,2 @@
 import { UserDetailsI } from '../../../interfaces';
-export declare const UserDetails: ({ email, firstName, lastName, onSave, bg }: UserDetailsI) => import("react/jsx-runtime").JSX.Element;
+export declare const UserDetails: ({ email, firstName, lastName, onSave, bg, }: UserDetailsI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/myProfile/details/UserDetails.js

@@ -17,9 +17,9 @@ const schema = yup.object({
         .email(`${t('forms.invalid')} ${t('forms.email')}`)
         .required(`${t('forms.email')} ${t('forms.required')}`),
 });
-export const UserDetails = ({ email, firstName, lastName, onSave, bg }) => {
+export const UserDetails = ({ email, firstName, lastName, onSave, bg, }) => {
     const nameInitials = `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
-    const { control, handleSubmit, reset, formState: { errors, dirtyFields, touchedFields }, } = useForm({
+    const { control, handleSubmit, reset, formState: { errors, isDirty }, } = useForm({
         defaultValues: {
             firstName,
             lastName,
@@ -27,7 +27,13 @@ export const UserDetails = ({ email, firstName, lastName, onSave, bg }) => {
         },
         resolver: yupResolver(schema),
     });
-    const showButtons = Object.keys(Object.assign(Object.assign({}, dirtyFields), touchedFields)).length > 0;
+    const handleOnSave = (data) => {
+        onSave(data);
+        reset(data, {
+            keepDirty: false,
+            keepTouched: false,
+        });
+    };
     return (_jsxs(Flex, { align: "start", gap: "input.sm", bg: "lightBlue.2", p: "base", pb: "6", children: [_jsx(Center, { h: "121px", w: "121px", bg: bg, children: _jsx(Text, { fontSize: "5xl", fontWeight: "extrabold", fontFamily: "primary", color: "neutral.white", children: nameInitials }) }), _jsxs(Stack, { flex: "1", spacing: "input.sm", children: [_jsx(Controller, { name: "firstName", control: control, render: ({ field: { value, onBlur, onChange }, fieldState: { invalid }, }) => {
                             var _a;
                             return (_jsx(TextInput, { handleChange: onChange, placeholder: t('myProfile.placeholders.firstName'), value: value, onBlur: onBlur, hasError: invalid, errorMessage: (_a = errors.firstName) === null || _a === void 0 ? void 0 : _a.message }));
@@ -37,5 +43,14 @@ export const UserDetails = ({ email, firstName, lastName, onSave, bg }) => {
                         } }), _jsx(Controller, { name: "email", control: control, render: ({ field: { value, onBlur, onChange }, fieldState: { invalid }, }) => {
                             var _a;
                             return (_jsx(TextInput, { handleChange: onChange, placeholder: t('myProfile.placeholders.email'), value: value, onBlur: onBlur, hasError: invalid, errorMessage: (_a = errors.email) === null || _a === void 0 ? void 0 : _a.message }));
-                        } }), showButtons && (_jsx(ContextButtons, { onCancel: reset, onSave: handleSubmit(onSave) }))] })] }));
+                        } }), isDirty && (_jsx(ContextButtons, { onCancel: () => {
+                            reset({
+                                firstName,
+                                lastName,
+                                email,
+                            }, {
+                                keepDirty: false,
+                                keepTouched: false,
+                            });
+                        }, onSave: handleSubmit(handleOnSave) }))] })] }));
 };

package/dist/interfaces/myProfile/details/TwoFactorSetting.interface.d.ts

@@ -1,4 +1,5 @@
 interface TwoFactorFormI {
+    '2fa': boolean;
     email?: string;
     sms?: string;
 }

package/dist/stories/myProfile/details/UserDetails.stories.d.ts

@@ -4,9 +4,5 @@ declare const _default: Meta<UserDetailsI>;
 export default _default;
 export declare const UserDetailsComponent: {
     (args: UserDetailsI): import("react/jsx-runtime").JSX.Element;
-    args: {
-        email: string;
-        firstName: string;
-        lastName: string;
-    };
+    args: {};
 };

package/dist/stories/myProfile/details/UserDetails.stories.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@chakra-ui/react';
 import { UserDetails } from '../../../components';
+import { action } from '@storybook/addon-actions';
 export default {
     title: 'Components/MyProfile/Details',
     component: UserDetails,
+    args: {
+        email: 'user@user.com',
+        firstName: 'Gary',
+        lastName: 'Edmunds',
+        onSave: action('onSave'),
+    },
 };
 export const UserDetailsComponent = (args) => {
     return (_jsx(Box, { w: ['full', 'md'], p: "base", children: _jsx(UserDetails, Object.assign({}, args)) }));
 };
-UserDetailsComponent.args = {
-    email: 'user@user.com',
-    firstName: 'Gary',
-    lastName: 'Edmunds',
-};
+UserDetailsComponent.args = {};

package/package.json

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

package/src/components/myProfile/details/UserDetails.tsx

@@ -26,7 +26,7 @@ export const UserDetails = ({
   firstName,
   lastName,
   onSave,
-  bg
+  bg,
 }: UserDetailsI) => {
   const nameInitials = `${firstName.charAt(0)}${lastName.charAt(
     0
@@ -36,7 +36,7 @@ export const UserDetails = ({
     control,
     handleSubmit,
     reset,
-    formState: { errors, dirtyFields, touchedFields },
+    formState: { errors, isDirty },
   } = useForm<FormData>({
     defaultValues: {
       firstName,
@@ -46,16 +46,16 @@ export const UserDetails = ({
     resolver: yupResolver(schema),
   })
 
-  const showButtons = Object.keys({...dirtyFields, ...touchedFields}).length > 0
+  const handleOnSave = (data: FormData) => {
+    onSave(data)
+    reset(data, {
+      keepDirty: false,
+      keepTouched: false,
+    })
+  }
 
   return (
-    <Flex
-      align="start"
-      gap="input.sm"
-      bg="lightBlue.2"
-      p="base"
-      pb="6"
-    >
+    <Flex align="start" gap="input.sm" bg="lightBlue.2" p="base" pb="6">
       <Center h="121px" w="121px" bg={bg}>
         <Text
           fontSize="5xl"
@@ -118,8 +118,23 @@ export const UserDetails = ({
             />
           )}
         />
-        {showButtons && (
-          <ContextButtons onCancel={reset} onSave={handleSubmit(onSave)} />
+        {isDirty && (
+          <ContextButtons
+            onCancel={() => {
+              reset(
+                {
+                  firstName,
+                  lastName,
+                  email,
+                },
+                {
+                  keepDirty: false,
+                  keepTouched: false,
+                }
+              )
+            }}
+            onSave={handleSubmit(handleOnSave)}
+          />
         )}
       </Stack>
     </Flex>

package/src/interfaces/myProfile/details/TwoFactorSetting.interface.ts

@@ -1,4 +1,5 @@
 interface TwoFactorFormI {
+  '2fa': boolean
   email?: string
   sms?: string
 }

package/src/stories/myProfile/details/UserDetails.stories.tsx

@@ -2,10 +2,17 @@ import { Meta } from '@storybook/react'
 import { Box } from '@chakra-ui/react'
 import { UserDetails } from '@/components'
 import { UserDetailsI } from '@/interfaces'
+import { action } from '@storybook/addon-actions'
 
 export default {
   title: 'Components/MyProfile/Details',
   component: UserDetails,
+  args: {
+    email: 'user@user.com',
+    firstName: 'Gary',
+    lastName: 'Edmunds',
+    onSave: action('onSave'),
+  },
 } as Meta<UserDetailsI>
 
 export const UserDetailsComponent = (args: UserDetailsI) => {
@@ -16,8 +23,4 @@ export const UserDetailsComponent = (args: UserDetailsI) => {
   )
 }
 
-UserDetailsComponent.args = {
-  email: 'user@user.com',
-  firstName: 'Gary',
-  lastName: 'Edmunds',
-}
+UserDetailsComponent.args = {}