@homefile/components-v2 2.7.18 → 2.7.20

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

@@ -0,0 +1,2 @@
+import { TwoFactorDialogI } from '../../../interfaces';
+export declare const TwoFactorDialog: ({ isOpen, isLoading, onClose, onResend, onReset, twoFactorMethod, }: TwoFactorDialogI) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, ModalContent, ModalOverlay } from '@chakra-ui/react';
+import { TwoFactor } from '../..';
+export const TwoFactorDialog = ({ isOpen, isLoading = false, onClose, onResend, onReset, twoFactorMethod, }) => {
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, children: [_jsx(ModalOverlay, {}), _jsx(ModalContent, { children: _jsx(TwoFactor, { twoFactorMethod: twoFactorMethod, isDialog: true, isLoading: isLoading, onResend: onResend, onReset: onReset }) })] }));
+};

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

@@ -1,2 +1,3 @@
+export * from './TwoFactorDialog';
 export * from './TwoFactorSetting';
 export * from './UserDetails';

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

@@ -1,2 +1,3 @@
+export * from './TwoFactorDialog';
 export * from './TwoFactorSetting';
 export * from './UserDetails';

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

@@ -1,2 +1,2 @@
 import { TwoFactorI } from '../../../interfaces';
-export declare const TwoFactor: ({ handleReset, handleResend, isLoading, twoFactorMethod, }: TwoFactorI) => import("react/jsx-runtime").JSX.Element;
+export declare const TwoFactor: ({ onReset, onResend, isDialog, isLoading, twoFactorMethod, }: TwoFactorI) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,7 +4,7 @@ import { Box, Button, Text, Container, Stack, Center } from '@chakra-ui/react';
 import { Logo, Footer, ButtonLoader, TextInput, BasePageWrapper, } from '../..';
 import { isEmptyField } from '../../../utils';
 import { useTwoFactor } from '../../../hooks';
-export const TwoFactor = ({ handleReset, handleResend, isLoading, twoFactorMethod, }) => {
-    const { code, handleInputChange, handleSubmit, isValidated } = useTwoFactor(handleReset);
-    return (_jsxs(BasePageWrapper, { children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(Logo, {}), _jsxs(Stack, { my: "6", children: [_jsx(Text, { variant: "title", textAlign: "center", px: "10", children: t('reset.2FA.title') }), _jsxs(Text, { fontFamily: "secondary", textAlign: "center", px: ['10', '20'], children: [twoFactorMethod === 'email' && t('reset.2FA.subtitleEmail'), twoFactorMethod === 'sms' && t('reset.2FA.subtitleSms')] })] }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], pb: "container.md", mb: "6", children: _jsxs(Stack, { spacing: "4", children: [_jsx(TextInput, { errorMessage: t('forms.code') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(code), id: "code", placeholder: t('reset.2FA.placeholder'), value: code, handleChange: handleInputChange }), _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: t('forms.submit') }), _jsx(Center, { children: _jsx(Button, { onClick: handleResend, variant: "text", children: t('reset.2FA.resend') }) })] }) })] }), _jsx(Footer, {})] }));
+export const TwoFactor = ({ onReset, onResend, isDialog, isLoading, twoFactorMethod, }) => {
+    const { code, handleInputChange, handleSubmit, isValidated } = useTwoFactor(onReset);
+    return (_jsxs(BasePageWrapper, { children: [_jsxs(Container, { size: "onboarding", boxShadow: !isDialog ? 'lg' : 'none', children: [_jsx(Logo, {}), _jsxs(Stack, { my: "6", children: [_jsx(Text, { variant: "title", textAlign: "center", px: "10", children: t('reset.2FA.title') }), _jsxs(Text, { fontFamily: "secondary", textAlign: "center", px: ['10', '20'], children: [twoFactorMethod === 'email' && t('reset.2FA.subtitleEmail'), twoFactorMethod === 'sms' && t('reset.2FA.subtitleSms')] })] }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], pb: "container.md", mb: "6", children: _jsxs(Stack, { spacing: "4", children: [_jsx(TextInput, { errorMessage: t('forms.code') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(code), id: "code", placeholder: t('reset.2FA.placeholder'), value: code, handleChange: handleInputChange }), _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: t('forms.submit') }), onResend && (_jsx(Center, { children: _jsx(Button, { onClick: onResend, variant: "text", children: t('reset.2FA.resend') }) }))] }) })] }), !isDialog && _jsx(Footer, {})] }));
 };

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

@@ -0,0 +1,8 @@
+export interface TwoFactorDialogI {
+    isLoading?: boolean;
+    isOpen: boolean;
+    onClose: () => void;
+    onResend?: () => void;
+    onReset: (code: string) => void;
+    twoFactorMethod: 'sms' | 'email';
+}

package/dist/interfaces/myProfile/details/TwoFactorDialog.interface.js

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

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

@@ -7,7 +7,7 @@ export interface TwoFactorSettingI {
     defaultValue?: string;
     email?: string;
     loading?: boolean;
-    onChange?: (value: string) => void;
+    onChange?: (value: 'email' | 'sms') => void;
     onSave: (value: TwoFactorFormI) => void;
     sms?: string;
     twoFactor?: string;

package/dist/interfaces/myProfile/details/index.d.ts

@@ -1,2 +1,3 @@
+export * from './TwoFactorDialog.interface';
 export * from './TwoFactorSetting.interface';
 export * from './UserDetails.interface';

package/dist/interfaces/myProfile/details/index.js

@@ -1,2 +1,3 @@
+export * from './TwoFactorDialog.interface';
 export * from './TwoFactorSetting.interface';
 export * from './UserDetails.interface';

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

@@ -1,6 +1,7 @@
 export interface TwoFactorI {
-    handleResend: () => void;
-    handleReset: (code: string) => void;
+    onResend?: () => void;
+    onReset: (code: string) => void;
+    isDialog?: boolean;
     isLoading: boolean;
     twoFactorMethod: 'sms' | 'email';
 }

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

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { TwoFactorDialogI } from '../../../interfaces';
+declare const _default: Meta<TwoFactorDialogI>;
+export default _default;
+export declare const TwoFactorDialogComponent: (args: TwoFactorDialogI) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TwoFactorDialog } from '../../../components';
+import { action } from '@storybook/addon-actions';
+export default {
+    title: 'Components/MyProfile/Details',
+    component: TwoFactorDialog,
+    args: {
+        onReset: action('onReset'),
+        onResend: action('onResend'),
+        onClose: action('onClose'),
+        twoFactorMethod: 'sms',
+        isLoading: false,
+        isOpen: true,
+    },
+};
+export const TwoFactorDialogComponent = (args) => {
+    return _jsx(TwoFactorDialog, Object.assign({}, args));
+};

package/package.json

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

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

@@ -0,0 +1,27 @@
+import { Modal, ModalContent, ModalOverlay } from '@chakra-ui/react'
+import { TwoFactor } from '@/components'
+import { TwoFactorDialogI } from '@/interfaces'
+
+export const TwoFactorDialog = ({
+  isOpen,
+  isLoading = false,
+  onClose,
+  onResend,
+  onReset,
+  twoFactorMethod,
+}: TwoFactorDialogI) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <TwoFactor
+          twoFactorMethod={twoFactorMethod}
+          isDialog
+          isLoading={isLoading}
+          onResend={onResend}
+          onReset={onReset}
+        />
+      </ModalContent>
+    </Modal>
+  )
+}

package/src/components/myProfile/details/index.ts

@@ -1,2 +1,3 @@
+export * from './TwoFactorDialog'
 export * from './TwoFactorSetting'
 export * from './UserDetails'

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

@@ -12,17 +12,18 @@ import { TwoFactorI } from '@/interfaces'
 import { useTwoFactor } from '@/hooks'
 
 export const TwoFactor = ({
-  handleReset,
-  handleResend,
+  onReset,
+  onResend,
+  isDialog,
   isLoading,
   twoFactorMethod,
 }: TwoFactorI) => {
   const { code, handleInputChange, handleSubmit, isValidated } =
-    useTwoFactor(handleReset)
+    useTwoFactor(onReset)
 
   return (
     <BasePageWrapper>
-      <Container size="onboarding" boxShadow="lg">
+      <Container size="onboarding" boxShadow={!isDialog ? 'lg' : 'none'}>
         <Logo />
         <Stack my="6">
           <Text variant="title" textAlign="center" px="10">
@@ -55,15 +56,17 @@ export const TwoFactor = ({
             >
               {t('forms.submit')}
             </Button>
-            <Center>
-              <Button onClick={handleResend} variant="text">
-                {t('reset.2FA.resend')}
-              </Button>
-            </Center>
+            {onResend && (
+              <Center>
+                <Button onClick={onResend} variant="text">
+                  {t('reset.2FA.resend')}
+                </Button>
+              </Center>
+            )}
           </Stack>
         </Box>
       </Container>
-      <Footer />
+      {!isDialog && <Footer />}
     </BasePageWrapper>
   )
 }

package/src/hooks/myProfile/useTwoFactorSetting.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { useRadioGroup } from '@chakra-ui/react'
 import { useForm } from 'react-hook-form'
 import * as yup from 'yup'
@@ -15,7 +15,7 @@ export const useTwoFactorSetting = ({
 }: Partial<TwoFactorSettingI>) => {
   const altText = getIconAltText(Security)
 
-  const handleRadioChange = (value: string) => {
+  const handleRadioChange = (value: 'email' | 'sms') => {
     onChange?.(value)
   }
 
@@ -56,7 +56,8 @@ export const useTwoFactorSetting = ({
   const isSmsChanged = smsValue !== sms
   const radioChanged = radioValue !== defaultValue && is2faEnabled
 
-  const showButtons = isSwitchChanged || isEmailChanged || isSmsChanged || radioChanged
+  const showButtons =
+    isSwitchChanged || isEmailChanged || isSmsChanged || radioChanged
 
   const handlePhoneValidation = (value?: string): boolean => {
     if (radioValue === 'sms')

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

@@ -0,0 +1,8 @@
+export interface TwoFactorDialogI {
+  isLoading?: boolean
+  isOpen: boolean
+  onClose: () => void
+  onResend?: () => void
+  onReset: (code: string) => void
+  twoFactorMethod: 'sms' | 'email'
+}

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

@@ -8,7 +8,7 @@ export interface TwoFactorSettingI {
   defaultValue?: string
   email?: string
   loading?: boolean
-  onChange?: (value: string) => void
+  onChange?: (value: 'email' | 'sms') => void
   onSave: (value: TwoFactorFormI) => void
   sms?: string
   twoFactor?: string

package/src/interfaces/myProfile/details/index.ts

@@ -1,2 +1,3 @@
+export * from './TwoFactorDialog.interface'
 export * from './TwoFactorSetting.interface'
 export * from './UserDetails.interface'

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

@@ -1,6 +1,7 @@
 export interface TwoFactorI {
-  handleResend: () => void
-  handleReset: (code: string) => void
+  onResend?: () => void
+  onReset: (code: string) => void
+  isDialog?: boolean
   isLoading: boolean
   twoFactorMethod: 'sms' | 'email'
 }

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

@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/react'
+import { Box } from '@chakra-ui/react'
+import { TwoFactorDialog } from '@/components'
+import { action } from '@storybook/addon-actions'
+import { TwoFactorDialogI } from '@/interfaces'
+
+export default {
+  title: 'Components/MyProfile/Details',
+  component: TwoFactorDialog,
+  args: {
+    onReset: action('onReset'),
+    onResend: action('onResend'),
+    onClose: action('onClose'),
+    twoFactorMethod: 'sms',
+    isLoading: false,
+    isOpen: true,
+  },
+} as Meta<TwoFactorDialogI>
+
+export const TwoFactorDialogComponent = (args: TwoFactorDialogI) => {
+  return <TwoFactorDialog {...args} />
+}