@antscorp/antsomi-ui 1.3.7-beta.71 → 1.3.7-beta.74

package/es/components/organism/BasicLogin/components/AuthenticateResult/AuthenticateResult.js

@@ -17,7 +17,7 @@ export const AuthenticateResult = props => {
             backLogin();
         }
     };
-    return (_jsx(WidgetLayout, { header: null, isShowLogo: false, title: _jsx("div", { style: { marginBottom: 100 } }), gapContent: 40, content: _jsx(Flex, { vertical: true, gap: 50, style: { marginTop: 20 }, children: _jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: authenSuccessImg, alt: "" }), _jsx(Title, { isMobile: isMobile, children: "Authenticated!" }), _jsxs(Text, { isMobile: isMobile, children: ["Sign in as ", get(loginData, 'personal.full_name')] })] }) }), footer: _jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
+    return (_jsx(WidgetLayout, { header: null, isShowLogo: false, title: _jsx("div", { style: { marginBottom: 100 } }), gapContent: 30, content: _jsx(Flex, { vertical: true, gap: 50, children: _jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: authenSuccessImg, alt: "" }), _jsx(Title, { isMobile: isMobile, children: "Authenticated!" }), _jsxs(Text, { isMobile: isMobile, children: ["Sign in as ", get(loginData, 'personal.full_name')] })] }) }), footer: _jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
                     fontSize: isMobile ? '16px' : '14px',
                 }, children: "Sign in with a different account" }) }) }));
 };

package/es/components/organism/BasicLogin/components/ChooseMethod/ChooseMethod.js

@@ -5,7 +5,7 @@ import { Button, Flex } from 'antd';
 import { get } from 'lodash';
 import { useMemo } from 'react';
 import { isMobile } from 'react-device-detect';
-import { EmailTemplateIcon, KeyValueIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { EmailTemplateIcon, PhoneIphoneIcon } from '@antscorp/antsomi-ui/es/components/icons';
 // Components
 import { WidgetLayout } from '../WidgetLayout';
 import { Method } from './Method';
@@ -13,6 +13,8 @@ import { Method } from './Method';
 import verifyImage from '../../../../../assets/images/components/Login/loginStep2.png';
 // Utils
 import { maskEmail } from './utils';
+// Styled
+import { SubTitle } from './styled';
 import { Title } from '../WidgetLayout/styled';
 import { Text } from '../../styled';
 import { LOGIN_METHODS } from '../../constants';
@@ -24,31 +26,47 @@ export const ChooseMethod = props => {
         }
     };
     const methods = useMemo(() => {
-        const options = loginData?.auth_options || [];
-        return options.map(opt => {
+        const options = [...(loginData?.auth_options || [])].sort((first, second) => {
+            if (first.provider === 'email') {
+                return -1;
+            }
+            if (second.provider === 'email') {
+                return 1;
+            }
+            return 0;
+        });
+        return options
+            .filter(opt => opt.provider !== 'google' || loginData.G2FA_user === 1)
+            .flatMap(opt => {
             switch (opt.provider) {
                 case 'google':
-                    return {
-                        disable: opt.status !== 1,
-                        icon: _jsx(KeyValueIcon, { color: "#005eb8" }),
-                        name: LOGIN_METHODS.GOOGLE_AUTHENTICATOR,
-                        label: opt.status === 1
-                            ? 'Use your security code using Google Authenticator.'
-                            : 'Use your security code using Google Authenticator. Authenticator not available.',
-                    };
+                    return [
+                        {
+                            disable: opt.status !== 1,
+                            icon: _jsx(PhoneIphoneIcon, { color: "#005eb8" }),
+                            name: LOGIN_METHODS.GOOGLE_AUTHENTICATOR,
+                            label: 'Authenticator app',
+                            description: opt.status === 1
+                                ? 'Enter the code from your authenticator app.'
+                                : 'Enter the code from your authenticator app. Authenticator not available.',
+                        },
+                    ];
                 case 'email':
-                    return {
-                        disable: opt.status !== 1,
-                        icon: _jsx(EmailTemplateIcon, { color: "#005eb8" }),
-                        name: LOGIN_METHODS.EMAIL,
-                        label: `Get verification code at ${maskEmail(get(loginData, 'personal.email', ''))}`,
-                    };
+                    return [
+                        {
+                            disable: opt.status !== 1,
+                            icon: _jsx(EmailTemplateIcon, { color: "#005eb8" }),
+                            name: LOGIN_METHODS.EMAIL,
+                            label: 'Email Verification',
+                            description: `We'll send a 6-digit verification code to ${maskEmail(get(loginData, 'personal.email', ''))}`,
+                        },
+                    ];
                 default:
-                    return null;
+                    return [];
             }
         });
     }, [loginData]);
-    return (_jsx(WidgetLayout, { header: null, isShowLogo: false, title: _jsx(Title, { isMobile: isMobile, style: { marginTop: 20 }, children: "Identity Verification" }), gapContent: 30, content: _jsxs(Flex, { vertical: true, gap: 50, style: { marginTop: 20 }, children: [_jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: verifyImage, alt: "" }), _jsx(Text, { isMobile: isMobile, color: "#595959", children: "For added security, we need to verify your identity." })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 10 : 13, children: [_jsx(Flex, { gap: 5, align: "center", justify: "center", children: _jsx(Title, { isMobile: isMobile, children: "Choose how you want to sign in:" }) }), _jsx(Flex, { vertical: true, gap: isMobile ? 20 : 11, children: methods.map(({ disable, icon, name, label }) => (_jsx(Method, { disable: disable, onClick: () => onChooseMethod(name), icon: icon, name: name, label: label }, name))) })] })] }), footer: _jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
+    return (_jsx(WidgetLayout, { header: null, isShowLogo: false, title: _jsx(Title, { isMobile: isMobile, style: { marginTop: 20 }, children: "Identity Verification" }), gapContent: 20, content: _jsxs(Flex, { vertical: true, gap: 50, children: [_jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: verifyImage, alt: "" }), _jsx(Text, { isMobile: isMobile, color: "#595959", children: "For your security, we need to verify your identity before continuing." })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 10 : 13, children: [_jsx(Flex, { gap: 5, align: "center", justify: "center", children: _jsx(SubTitle, { isMobile: isMobile, children: "How would you like to verify your identity?" }) }), _jsx(Flex, { vertical: true, gap: isMobile ? 20 : 11, children: methods.map(({ disable, icon, name, label, description }) => (_jsx(Method, { disable: disable, onClick: onChooseMethod, icon: icon, name: name, label: label, description: description }, name))) })] })] }), footer: _jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
                     fontSize: isMobile ? '16px' : '14px',
                 }, children: "Sign in with a different account" }) }) }));
 };

package/es/components/organism/BasicLogin/components/ChooseMethod/Method.d.ts

@@ -3,6 +3,7 @@ type TMethod = {
     onClick: (name: string) => void;
     icon: React.ReactNode;
     label: React.ReactNode;
+    description: React.ReactNode;
     disable?: boolean;
     name: string;
 };

package/es/components/organism/BasicLogin/components/ChooseMethod/Method.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isMobile } from 'react-device-detect';
-import { BlockMethod } from './styled';
-import { Text } from '../../styled';
+import { ChevronRightIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { BlockMethod, MethodContent, MethodDescription, MethodIcon, MethodLabel } from './styled';
 export const Method = (props) => {
-    const { onClick, icon, label, disable, name } = props;
+    const { onClick, icon, label, description, disable, name } = props;
     const onChooseMethod = () => {
         if (!disable && onClick) {
             onClick(name);
         }
     };
-    return (_jsxs(BlockMethod, { onClick: onChooseMethod, disable: disable, "data-test": name, children: [_jsx("div", { children: icon }), _jsx(Text, { isMobile: isMobile, color: disable ? '#9C9B9B' : '#595959', children: label })] }));
+    return (_jsxs(BlockMethod, { type: "button", onClick: onChooseMethod, disabled: disable, "$disable": disable, "data-test": name, children: [_jsx(MethodIcon, { children: icon }), _jsxs(MethodContent, { children: [_jsx(MethodLabel, { "$disable": disable, children: label }), _jsx(MethodDescription, { "$disable": disable, children: description })] }), _jsx(ChevronRightIcon, { "aria-hidden": true, color: disable ? '#9c9b9b' : '#005eb8', width: 20, height: 20 })] }));
 };

package/es/components/organism/BasicLogin/components/ChooseMethod/styled.d.ts

@@ -1,10 +1,17 @@
-/// <reference types="react" />
 export declare const TextInfo: import("styled-components").StyledComponent<"span", any, {
     isMobile: boolean;
 }, never>;
 export declare const SubTitle: import("styled-components").StyledComponent<"span", any, {
     isMobile: boolean;
 }, never>;
-export declare const BlockMethod: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
-    disable?: boolean | undefined;
+export declare const BlockMethod: import("styled-components").StyledComponent<"button", any, {
+    $disable?: boolean | undefined;
+}, never>;
+export declare const MethodIcon: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const MethodContent: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const MethodLabel: import("styled-components").StyledComponent<"span", any, {
+    $disable?: boolean | undefined;
+}, never>;
+export declare const MethodDescription: import("styled-components").StyledComponent<"span", any, {
+    $disable?: boolean | undefined;
 }, never>;

package/es/components/organism/BasicLogin/components/ChooseMethod/styled.js

@@ -1,4 +1,3 @@
-import { Flex } from 'antd';
 import styled from 'styled-components';
 export const TextInfo = styled.span `
   color: #7f7f7f;
@@ -9,16 +8,65 @@ export const SubTitle = styled.span `
   font-size: ${(props) => (props.isMobile ? ' 16px ' : '14px')};
   font-weight: 500;
 `;
-export const BlockMethod = styled(Flex) `
+export const BlockMethod = styled.button `
+  display: flex;
   align-items: center;
   gap: 10px;
+  width: 100%;
+  min-height: 64px;
   padding: 10px;
-  cursor: ${props => (props.disable ? 'not-allowed' : 'pointer')};
+  box-sizing: border-box;
+  cursor: ${props => (props.$disable ? 'not-allowed' : 'pointer')};
+  background-color: #ffffff;
+  border: 1px solid #b8cfe6;
   border-radius: 10px;
+  font-family: inherit;
+  text-align: left;
+  opacity: ${props => (props.$disable ? '0.5' : '1')};
 
-  opacity: ${props => (props.disable ? '0.5' : '1')};
+  &:hover:not(:disabled) {
+    background-color: #f2f9ff;
+    border-color: #81bcf4;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #005eb8;
+    outline-offset: 2px;
+  }
+`;
+export const MethodIcon = styled.span `
+  display: flex;
+  flex: 0 0 24px;
+  align-self: flex-start;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin-top: 2px;
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+`;
+export const MethodContent = styled.span `
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: 5px;
+`;
+export const MethodLabel = styled.span `
+  color: ${props => (props.$disable ? '#9c9b9b' : '#000000')};
+  font-size: 14px;
+
+  @media (max-width: 768px) {
+    font-size: 16px;
+  }
+`;
+export const MethodDescription = styled.span `
+  color: ${props => (props.$disable ? '#9c9b9b' : '#595959')};
+  font-size: 12px;
 
-  &:hover {
-    background-color: ${props => (props.disable ? '#f2f2f2' : '#e6f0ff')};
+  @media (max-width: 768px) {
+    font-size: 13px;
   }
 `;

package/es/components/organism/BasicLogin/components/LoginWithEmail/LoginWithEmail.js

@@ -186,7 +186,7 @@ export const LoginWithEmail = ({ loginData, domainLogin, codeKey = 'code', token
     const renderAlternativeSignIn = () => (_jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
                 fontSize: isMobile ? '16px' : '14px',
             }, children: "Sign in with a different account" }) }));
-    const renderContent = () => (_jsxs(Flex, { vertical: true, gap: 50, style: { marginTop: 20 }, children: [_jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: loginStep2Image, alt: "Identity Verification" }), _jsx(Text, { isMobile: isMobile, color: "#595959", children: "For added security, we need to verify your identity." })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 10 : 15, children: [renderResendSection(), _jsx(Flex, { vertical: true, gap: isMobile ? 20 : 11, children: renderCodeInput() }), _jsx(Flex, { vertical: true, gap: isMobile ? 30 : 15, style: { marginTop: isMobile ? 20 : 15 }, children: renderActionButtons() })] })] }));
+    const renderContent = () => (_jsxs(Flex, { vertical: true, gap: 50, children: [_jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: loginStep2Image, alt: "Identity Verification" }), _jsx(Text, { isMobile: isMobile, color: "#595959", children: "For your security, we need to verify your identity before continuing." })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 10 : 15, children: [renderResendSection(), _jsx(Flex, { vertical: true, gap: isMobile ? 20 : 11, children: renderCodeInput() }), _jsx(Flex, { vertical: true, gap: isMobile ? 30 : 15, style: { marginTop: isMobile ? 20 : 15 }, children: renderActionButtons() })] })] }));
     const renderFooter = () => renderAlternativeSignIn();
-    return (_jsx(WidgetLayout, { header: null, isShowLogo: false, title: _jsx(Title, { isMobile: isMobile, style: { marginTop: 20 }, children: "Identity Verification" }), gapContent: 30, content: renderContent(), footer: renderFooter() }));
+    return (_jsx(WidgetLayout, { header: null, isShowLogo: false, title: _jsx(Title, { isMobile: isMobile, style: { marginTop: 20 }, children: "Identity Verification" }), gapContent: 20, content: renderContent(), footer: renderFooter() }));
 };

package/es/components/organism/BasicLogin/components/LoginWithGG/LoginWithGG.js

@@ -99,9 +99,9 @@ export const LoginWithGG = ({ domainLogin, codeKey = 'code', token = '', onLogin
     const renderAlternativeSignIn = () => (_jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
                 fontSize: isMobile ? '16px' : '14px',
             }, children: "Sign in with a different account" }) }));
-    const renderHeaderSection = () => (_jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: loginStep2Image, alt: "Identity Verification Step" }), _jsx(Text, { isMobile: isMobile, color: "#595959", children: "For added security, we need to verify your identity." })] }));
+    const renderHeaderSection = () => (_jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: loginStep2Image, alt: "Identity Verification Step" }), _jsx(Text, { isMobile: isMobile, color: "#595959", children: "For your security, we need to verify your identity before continuing." })] }));
     const renderInputSection = () => (_jsxs(Flex, { vertical: true, gap: isMobile ? 10 : 15, children: [renderInstructionSection(), _jsx(Flex, { vertical: true, gap: isMobile ? 20 : 11, children: renderCodeInput() }), _jsx(Flex, { vertical: true, gap: isMobile ? 30 : 15, style: { marginTop: isMobile ? 20 : 15 }, children: renderActionButtons() })] }));
-    const renderContent = () => (_jsxs(Flex, { vertical: true, gap: 50, style: { marginTop: 20 }, children: [renderHeaderSection(), renderInputSection()] }));
+    const renderContent = () => (_jsxs(Flex, { vertical: true, gap: 50, children: [renderHeaderSection(), renderInputSection()] }));
     const renderFooter = () => renderAlternativeSignIn();
-    return (_jsx(WidgetLayout, { header: null, isShowLogo: false, title: _jsx(Title, { isMobile: isMobile, style: { marginTop: 20 }, children: "Identity Verification" }), gapContent: 30, content: renderContent(), footer: renderFooter() }));
+    return (_jsx(WidgetLayout, { header: null, isShowLogo: false, title: _jsx(Title, { isMobile: isMobile, style: { marginTop: 20 }, children: "Identity Verification" }), gapContent: 20, content: renderContent(), footer: renderFooter() }));
 };

package/es/components/organism/Login/components/ChooseMethod/ChooseMethod.js

@@ -12,8 +12,9 @@ import { Method } from './Method';
 // Images
 import loginStep2Image from '../../../../../assets/images/components/Login/loginStep2.png';
 import { Text } from '../../styled';
+import { SubTitle } from './styled';
 import { Title } from '../WidgetLayout/styled';
-import { EmailTemplateIcon, KeyValueIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { EmailTemplateIcon, PhoneIphoneIcon } from '@antscorp/antsomi-ui/es/components/icons';
 import { maskEmail } from './utils';
 import { LOGIN_METHODS } from '../../constants';
 export const ChooseMethod = props => {
@@ -24,31 +25,47 @@ export const ChooseMethod = props => {
         }
     };
     const methods = useMemo(() => {
-        const options = loginData?.auth_options || [];
-        return options.map(opt => {
+        const options = [...(loginData?.auth_options || [])].sort((first, second) => {
+            if (first.provider === 'email') {
+                return -1;
+            }
+            if (second.provider === 'email') {
+                return 1;
+            }
+            return 0;
+        });
+        return options
+            .filter(opt => opt.provider !== 'google' || loginData.G2FA_user === 1)
+            .flatMap(opt => {
             switch (opt.provider) {
                 case 'google':
-                    return {
-                        disable: opt.status !== 1,
-                        icon: _jsx(KeyValueIcon, { color: "#005eb8" }),
-                        name: LOGIN_METHODS.GOOGLE_AUTHENTICATOR,
-                        label: opt.status === 1
-                            ? 'Use your security code using Google Authenticator.'
-                            : 'Use your security code using Google Authenticator. Authenticator not available.',
-                    };
+                    return [
+                        {
+                            disable: opt.status !== 1,
+                            icon: _jsx(PhoneIphoneIcon, { color: "#005eb8" }),
+                            name: LOGIN_METHODS.GOOGLE_AUTHENTICATOR,
+                            label: 'Authenticator app',
+                            description: opt.status === 1
+                                ? 'Enter the code from your authenticator app.'
+                                : 'Enter the code from your authenticator app. Authenticator not available.',
+                        },
+                    ];
                 case 'email':
-                    return {
-                        disable: opt.status !== 1,
-                        icon: _jsx(EmailTemplateIcon, { color: "#005eb8" }),
-                        name: LOGIN_METHODS.EMAIL,
-                        label: `Get verification code at ${maskEmail(get(loginData, 'personal.email', ''))}`,
-                    };
+                    return [
+                        {
+                            disable: opt.status !== 1,
+                            icon: _jsx(EmailTemplateIcon, { color: "#005eb8" }),
+                            name: LOGIN_METHODS.EMAIL,
+                            label: 'Email Verification',
+                            description: `We'll send a 6-digit verification code to ${maskEmail(get(loginData, 'personal.email', ''))}`,
+                        },
+                    ];
                 default:
-                    return null;
+                    return [];
             }
         });
     }, [loginData]);
-    return (_jsx(WidgetLayout, { header: _jsx(Avatar, { image: get(loginData, 'personal.avatar'), name: get(loginData, 'personal.full_name'), email: get(loginData, 'personal.email') }), isShowLogo: false, title: _jsx(Title, { isMobile: isMobile, style: { marginTop: 20 }, children: "Identity Verification" }), gapContent: 30, content: _jsxs(Flex, { vertical: true, gap: 50, style: { marginTop: 20 }, children: [_jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: loginStep2Image, alt: "" }), _jsx(Text, { isMobile: isMobile, color: "#595959", children: "For added security, we need to verify your identity." })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 10 : 13, children: [_jsx(Flex, { gap: 5, align: "center", justify: "center", children: _jsx(Title, { isMobile: isMobile, children: "Choose how you want to sign in:" }) }), _jsx(Flex, { vertical: true, gap: isMobile ? 20 : 11, children: methods.map(({ disable, icon, name, label }) => (_jsx(Method, { disable: disable, onClick: onChooseMethod, icon: icon, name: name, label: label }, name))) })] })] }), footer: _jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
+    return (_jsx(WidgetLayout, { header: _jsx(Avatar, { image: get(loginData, 'personal.avatar'), name: get(loginData, 'personal.full_name'), email: get(loginData, 'personal.email') }), isShowLogo: false, title: _jsx(Title, { isMobile: isMobile, style: { marginTop: 20 }, children: "Identity Verification" }), gapContent: 20, content: _jsxs(Flex, { vertical: true, gap: 50, children: [_jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: loginStep2Image, alt: "" }), _jsx(Text, { isMobile: isMobile, color: "#595959", isCenter: true, children: "For your security, we need to verify your identity before continuing." })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 10 : 13, children: [_jsx(Flex, { gap: 5, align: "center", justify: "center", children: _jsx(SubTitle, { isMobile: isMobile, children: "How would you like to verify your identity?" }) }), _jsx(Flex, { vertical: true, gap: isMobile ? 20 : 11, children: methods.map(({ disable, icon, name, label, description }) => (_jsx(Method, { disable: disable, onClick: onChooseMethod, icon: icon, name: name, label: label, description: description }, name))) })] })] }), footer: _jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
                     fontSize: isMobile ? '16px' : '14px',
                 }, children: "Sign in with a different account" }) }) }));
 };

package/es/components/organism/Login/components/ChooseMethod/ChooseMethod.spec.d.ts

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

package/es/components/organism/Login/components/ChooseMethod/ChooseMethod.spec.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cleanup, render, screen } from '@testing-library/react';
+import { ChooseMethod as LoginChooseMethod } from './ChooseMethod';
+import { ChooseMethod as BasicLoginChooseMethod } from '../../../BasicLogin/components/ChooseMethod/ChooseMethod';
+const loginDataWithout2FA = {
+    G2FA_user: 0,
+    personal: {
+        avatar: '',
+        email: 'user@example.com',
+        full_name: 'Test User',
+        language: 'en',
+        role: '',
+        user_id: '1',
+    },
+    auth_options: [
+        { provider: 'google', status: 1 },
+        { provider: 'email', status: 1 },
+    ],
+};
+describe.each([
+    ['Login', LoginChooseMethod],
+    ['BasicLogin', BasicLoginChooseMethod],
+])('%s ChooseMethod', (_, ChooseMethod) => {
+    afterEach(cleanup);
+    it('renders Google Authenticator only when the account has enabled 2FA', () => {
+        const { rerender } = render(_jsx(ChooseMethod, { backLogin: () => undefined, loginData: loginDataWithout2FA, onChooseMethod: () => undefined }));
+        expect(screen.queryByText('Enter the code from your authenticator app.')).toBeNull();
+        expect(screen.queryByRole('button', { name: /Email Verification/ })).not.toBeNull();
+        rerender(_jsx(ChooseMethod, { backLogin: () => undefined, loginData: { ...loginDataWithout2FA, G2FA_user: 1 }, onChooseMethod: () => undefined }));
+        expect(screen.queryByText('Enter the code from your authenticator app.')).not.toBeNull();
+    });
+    it('renders each verification method with a label and description', () => {
+        render(_jsx(ChooseMethod, { backLogin: () => undefined, loginData: { ...loginDataWithout2FA, G2FA_user: 1 }, onChooseMethod: () => undefined }));
+        expect(screen.queryByText('How would you like to verify your identity?')).not.toBeNull();
+        expect(screen.queryByRole('button', {
+            name: "Email Verification We'll send a 6-digit verification code to u****r@e*******m.",
+        })).not.toBeNull();
+        expect(screen.queryByRole('button', {
+            name: 'Authenticator app Enter the code from your authenticator app.',
+        })).not.toBeNull();
+    });
+    it('renders Email Verification before Authenticator app regardless of backend order', () => {
+        render(_jsx(ChooseMethod, { backLogin: () => undefined, loginData: { ...loginDataWithout2FA, G2FA_user: 1 }, onChooseMethod: () => undefined }));
+        const methodButtons = screen.getAllByRole('button', {
+            name: /Email Verification|Authenticator app/,
+        });
+        expect(methodButtons[0].textContent).toContain('Email Verification');
+        expect(methodButtons[1].textContent).toContain('Authenticator app');
+    });
+});

package/es/components/organism/Login/components/ChooseMethod/Method.d.ts

@@ -3,6 +3,7 @@ type TMethod = {
     onClick: (name: string) => void;
     icon: React.ReactNode;
     label: React.ReactNode;
+    description: React.ReactNode;
     disable?: boolean;
     name: string;
 };

package/es/components/organism/Login/components/ChooseMethod/Method.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isMobile } from 'react-device-detect';
-import { BlockMethod } from './styled';
-import { Text } from '../../styled';
+import { ChevronRightIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { BlockMethod, MethodContent, MethodDescription, MethodIcon, MethodLabel } from './styled';
 export const Method = (props) => {
-    const { onClick, icon, label, disable, name } = props;
+    const { onClick, icon, label, description, disable, name } = props;
     const onChooseMethod = () => {
         if (!disable && onClick) {
             onClick(name);
         }
     };
-    return (_jsxs(BlockMethod, { onClick: onChooseMethod, disable: disable, "data-test": name, children: [_jsx("div", { children: icon }), _jsx(Text, { isMobile: isMobile, color: disable ? '#9C9B9B' : '#595959', children: label })] }));
+    return (_jsxs(BlockMethod, { type: "button", onClick: onChooseMethod, disabled: disable, "$disable": disable, "data-test": name, children: [_jsx(MethodIcon, { children: icon }), _jsxs(MethodContent, { children: [_jsx(MethodLabel, { "$disable": disable, children: label }), _jsx(MethodDescription, { "$disable": disable, children: description })] }), _jsx(ChevronRightIcon, { "aria-hidden": true, color: disable ? '#9c9b9b' : '#005eb8', width: 20, height: 20 })] }));
 };

package/es/components/organism/Login/components/ChooseMethod/styled.d.ts

@@ -1,10 +1,17 @@
-/// <reference types="react" />
 export declare const TextInfo: import("styled-components").StyledComponent<"span", any, {
     isMobile: boolean;
 }, never>;
 export declare const SubTitle: import("styled-components").StyledComponent<"span", any, {
     isMobile: boolean;
 }, never>;
-export declare const BlockMethod: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
-    disable?: boolean | undefined;
+export declare const BlockMethod: import("styled-components").StyledComponent<"button", any, {
+    $disable?: boolean | undefined;
+}, never>;
+export declare const MethodIcon: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const MethodContent: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const MethodLabel: import("styled-components").StyledComponent<"span", any, {
+    $disable?: boolean | undefined;
+}, never>;
+export declare const MethodDescription: import("styled-components").StyledComponent<"span", any, {
+    $disable?: boolean | undefined;
 }, never>;

package/es/components/organism/Login/components/ChooseMethod/styled.js

@@ -1,4 +1,3 @@
-import { Flex } from 'antd';
 import styled from 'styled-components';
 export const TextInfo = styled.span `
   color: #7f7f7f;
@@ -9,16 +8,65 @@ export const SubTitle = styled.span `
   font-size: ${(props) => (props.isMobile ? ' 16px ' : '14px')};
   font-weight: 500;
 `;
-export const BlockMethod = styled(Flex) `
+export const BlockMethod = styled.button `
+  display: flex;
   align-items: center;
   gap: 10px;
+  width: 100%;
+  min-height: 64px;
   padding: 10px;
-  cursor: ${props => (props.disable ? 'not-allowed' : 'pointer')};
+  box-sizing: border-box;
+  cursor: ${props => (props.$disable ? 'not-allowed' : 'pointer')};
+  background-color: #ffffff;
+  border: 1px solid #b8cfe6;
   border-radius: 10px;
+  font-family: inherit;
+  text-align: left;
+  opacity: ${props => (props.$disable ? '0.5' : '1')};
 
-  opacity: ${props => (props.disable ? '0.5' : '1')};
+  &:hover:not(:disabled) {
+    background-color: #f2f9ff;
+    border-color: #81bcf4;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #005eb8;
+    outline-offset: 2px;
+  }
+`;
+export const MethodIcon = styled.span `
+  display: flex;
+  flex: 0 0 24px;
+  align-self: flex-start;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin-top: 2px;
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+`;
+export const MethodContent = styled.span `
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: 5px;
+`;
+export const MethodLabel = styled.span `
+  color: ${props => (props.$disable ? '#9c9b9b' : '#000000')};
+  font-size: 14px;
+
+  @media (max-width: 768px) {
+    font-size: 16px;
+  }
+`;
+export const MethodDescription = styled.span `
+  color: ${props => (props.$disable ? '#9c9b9b' : '#595959')};
+  font-size: 12px;
 
-  &:hover {
-    background-color: ${props => (props.disable ? '#f2f2f2' : '#e6f0ff')};
+  @media (max-width: 768px) {
+    font-size: 13px;
   }
 `;

package/es/components/organism/Login/components/LoginSelectPortal/LoginSelectPortal.js

@@ -177,7 +177,7 @@ export const LoginSelectPortal = props => {
         return draftListNetwork.filter(netWork => netWork.networkName.toLocaleLowerCase().indexOf(state.portalSearch.toLocaleLowerCase()) !==
             -1);
     }, [listNetworks, state.portalSearch]);
-    return (_jsx(WidgetLayout, { header: _jsx(Avatar, { image: get(loginData, 'personal.avatar'), name: get(loginData, 'personal.full_name'), email: get(loginData, 'personal.email') }), gapContent: 30, isShowLogo: false, title: "Select Portal", content: _jsxs(Flex, { vertical: true, gap: 30, children: [_jsxs(Flex, { vertical: true, gap: 20, children: [_jsx(StyleInput, { isMobile: isMobile, placeholder: "Search", suffix: _jsx(Icon, { type: "icon-ants-search-2", style: {
+    return (_jsx(WidgetLayout, { header: _jsx(Avatar, { image: get(loginData, 'personal.avatar'), name: get(loginData, 'personal.full_name'), email: get(loginData, 'personal.email') }), gapContent: 20, isShowLogo: false, title: "Select Portal", content: _jsxs(Flex, { vertical: true, gap: 30, children: [_jsxs(Flex, { vertical: true, gap: 20, children: [_jsx(StyleInput, { isMobile: isMobile, placeholder: "Search", suffix: _jsx(Icon, { type: "icon-ants-search-2", style: {
                                     fontSize: 24,
                                 }, color: "#595959" }), onChange: e => setPortalSearch(e.target.value) }), isEmpty(filterListNetworks) ? (_jsxs(Flex, { vertical: true, align: "center", justify: "center", style: { height: 514 }, gap: 15, children: [!isMobile && _jsx(Image, { src: NoData, alt: "", width: 80, height: 80 }), _jsx(Text, { style: {
                                         color: '#595959',

package/es/components/organism/Login/components/LoginWithEmail/LoginWithEmail.js

@@ -205,7 +205,7 @@ export const LoginWithEmail = ({ loginData, domainLogin, codeKey = 'code', token
         const baseText = `Please enter the 6-digit code send to ${maskedEmail} Haven't received it? `;
         return (_jsx(Flex, { gap: 5, align: "center", children: _jsxs(Text, { isMobile: isMobile, color: "#595959", children: [baseText, state.isShowResend ? (_jsx(Text, { color: state.isDisableResend ? '#a2a2a2' : '#005eb8', onClick: state.isDisableResend ? undefined : onResendCode, isMobile: isMobile, style: { cursor: state.isDisableResend ? 'not-allowed' : 'pointer' }, children: "Resend." })) : (`Resend code in ${seconds}s.`)] }) }));
     };
-    return (_jsx(WidgetLayout, { header: _jsx(Avatar, { image: userAvatar, name: userFullName, email: userEmail }), isShowLogo: false, title: _jsx(Title, { isMobile: isMobile, style: { marginTop: 20 }, children: "Identity Verification" }), gapContent: 30, content: _jsxs(Flex, { vertical: true, gap: 50, style: { marginTop: 20 }, children: [_jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: loginStep2Image, alt: "Identity Verification" }), _jsx(Text, { isMobile: isMobile, color: "#595959", children: "For added security, we need to verify your identity." })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 10 : 15, children: [renderResendSection(), _jsxs(Flex, { vertical: true, gap: isMobile ? 20 : 11, children: [_jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(StyleInput, { isMobile: isMobile, maxLength: CODE_LENGTH, placeholder: "Input your code", value: state.code, onChange: handleCodeChange, status: errorRef.current && state.codeError ? 'error' : undefined, disabled: state.isTooManyMistakes }), renderErrorMessages()] }), _jsx(Checkbox, { checked: state.isTrust, onChange: handleTrustChange, disabled: state.isTooManyMistakes, children: _jsx(TextInfo, { isMobile: isMobile, children: "Remember this browser for future logins" }) })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 30 : 15, style: { marginTop: isMobile ? 20 : 15 }, children: [_jsx(StyleButton, { isMobile: isMobile, type: "primary", onClick: signIn, loading: state.isLoading, disabled: state.isTooManyMistakes, children: "Verify" }), _jsx(StyleButton, { isMobile: isMobile, onClick: handleBack, type: "text", children: "Back to login" })] })] })] }), footer: _jsx(Flex, { vertical: true, gap: 115, children: _jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
+    return (_jsx(WidgetLayout, { header: _jsx(Avatar, { image: userAvatar, name: userFullName, email: userEmail }), isShowLogo: false, title: _jsx(Title, { isMobile: isMobile, style: { marginTop: 20 }, children: "Identity Verification" }), gapContent: 20, content: _jsxs(Flex, { vertical: true, gap: 50, children: [_jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: loginStep2Image, alt: "Identity Verification" }), _jsx(Text, { isMobile: isMobile, color: "#595959", isCenter: true, children: "For your security, we need to verify your identity before continuing." })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 10 : 15, children: [renderResendSection(), _jsxs(Flex, { vertical: true, gap: isMobile ? 20 : 11, children: [_jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(StyleInput, { isMobile: isMobile, maxLength: CODE_LENGTH, placeholder: "Input your code", value: state.code, onChange: handleCodeChange, status: errorRef.current && state.codeError ? 'error' : undefined, disabled: state.isTooManyMistakes }), renderErrorMessages()] }), _jsx(Checkbox, { checked: state.isTrust, onChange: handleTrustChange, disabled: state.isTooManyMistakes, children: _jsx(TextInfo, { isMobile: isMobile, children: "Remember this browser for future logins" }) })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 30 : 15, style: { marginTop: isMobile ? 20 : 15 }, children: [_jsx(StyleButton, { isMobile: isMobile, type: "primary", onClick: signIn, loading: state.isLoading, disabled: state.isTooManyMistakes, children: "Verify" }), _jsx(StyleButton, { isMobile: isMobile, onClick: handleBack, type: "text", children: "Back to login" })] })] })] }), footer: _jsx(Flex, { vertical: true, gap: 115, children: _jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
                         fontSize: isMobile ? '16px' : '14px',
                     }, children: "Sign in with a different account" }) }) }) }));
 };

package/es/components/organism/Login/components/LoginWithGG/LoginWithGG.js

@@ -98,7 +98,7 @@ export const LoginWithGG = props => {
             });
         }
     }, [state.code]);
-    return (_jsx(WidgetLayout, { header: _jsx(Avatar, { image: get(loginData, 'personal.avatar'), name: get(loginData, 'personal.full_name'), email: get(loginData, 'personal.email') }), isShowLogo: false, title: _jsx(Title, { isMobile: isMobile, style: { marginTop: 20 }, children: "Identity Verification" }), gapContent: 30, content: _jsxs(Flex, { vertical: true, gap: 50, style: { marginTop: 20 }, children: [_jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: loginStep2Image, alt: "" }), _jsx(Text, { isMobile: isMobile, color: "#595959", children: "For added security, we need to verify your identity." })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 10 : 15, children: [_jsxs(Flex, { gap: 5, align: "center", children: [_jsx(Text, { isMobile: isMobile, color: "#595959", children: "Please enter the 6-digit code registered to your device." }), _jsx(IconInfo, { image: step2, title: _jsx(TextAntsomiUI, { style: {
+    return (_jsx(WidgetLayout, { header: _jsx(Avatar, { image: get(loginData, 'personal.avatar'), name: get(loginData, 'personal.full_name'), email: get(loginData, 'personal.email') }), isShowLogo: false, title: _jsx(Title, { isMobile: isMobile, style: { marginTop: 20 }, children: "Identity Verification" }), gapContent: 20, content: _jsxs(Flex, { vertical: true, gap: 50, children: [_jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: loginStep2Image, alt: "" }), _jsx(Text, { isMobile: isMobile, color: "#595959", isCenter: true, children: "For your security, we need to verify your identity before continuing." })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 10 : 15, children: [_jsxs(Flex, { gap: 5, align: "center", children: [_jsx(Text, { isMobile: isMobile, color: "#595959", children: "Please enter the 6-digit code registered to your device." }), _jsx(IconInfo, { image: step2, title: _jsx(TextAntsomiUI, { style: {
                                             marginTop: 20,
                                             textAlign: 'center',
                                         }, children: _jsxs(Text, { isMobile: isMobile, children: ["Open Google Authenticator and enter the code from ", _jsx("b", { children: "antsomi.com" })] }) }) })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 20 : 11, children: [_jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(StyleInput, { isMobile: isMobile, maxLength: 6, placeholder: "Input your code", value: state.code, onChange: e => {

package/es/components/organism/Login/components/WidgetLayout/styled.d.ts

@@ -2,4 +2,7 @@
 export declare const Title: import("styled-components").StyledComponent<"div", any, {
     isMobile: boolean;
 }, never>;
+export declare const Label: import("styled-components").StyledComponent<"div", any, {
+    isMobile: boolean;
+}, never>;
 export declare const WidgetLayoutMain: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/es/components/organism/Login/components/WidgetLayout/styled.js

@@ -6,6 +6,12 @@ export const Title = styled.div `
   color: #005eb8;
   text-align: center;
 `;
+export const Label = styled.div `
+  font-size: ${props => (props.isMobile ? '16px' : '14px')};
+  font-weight: 500;
+  color: #005eb8;
+  text-align: center;
+`;
 export const WidgetLayoutMain = styled(Flex) `
   position: relative;
 

package/es/components/organism/Login/styled.d.ts

@@ -48,4 +48,5 @@ export declare const Text: import("styled-components").StyledComponent<"div", an
     color?: string | undefined;
     isBold?: boolean | undefined;
     isMobile?: boolean | undefined;
+    isCenter?: boolean | undefined;
 }, never>;

package/es/components/organism/Login/styled.js

@@ -126,4 +126,5 @@ export const Text = styled.div `
   color: ${props => (props.color ? props.color : ' #000000')};
   font-size: ${props => (props.isMobile ? ' 14px !important' : '12px')};
   font-weight: ${props => (props.isBold ? 'bold' : 'normal')};
+  text-align: ${props => (props.isCenter ? 'center' : 'left')};
 `;