refactor(ui): refactor some component structure (#943)

* refactor(ui): refactor some component structure

refactor some component structure

* refactor(ui): relocate terms of use modal

relocate terms of use modal

packages/ui/src/components/ConfirmModal/index.tsx

@@ -1,15 +1,2 @@
-import React from 'react';
-
-import usePlatform from '@/hooks/use-platform';
-
-import AcModal from './AcModal';
-import MobileModal from './MobileModal';
-import { ModalProps } from './type';
-
-const ConfirmModal = (props: ModalProps) => {
-  const { isMobile } = usePlatform();
-
-  return isMobile ? <MobileModal {...props} /> : <AcModal {...props} />;
-};
-
-export default ConfirmModal;
+export { default as WebModal } from './AcModal';
+export { default as MobileModal } from './MobileModal';

packages/ui/src/components/Input/index.tsx

@@ -6,6 +6,9 @@ import ErrorMessage, { ErrorType } from '@/components/ErrorMessage';
 
 import * as styles from './index.module.scss';
 
+export { default as PasswordInput } from './PasswordInput';
+export { default as PhoneInput } from './PhoneInput';
+
 export type Props = HTMLProps<HTMLInputElement> & {
   className?: string;
   error?: ErrorType;

packages/ui/src/containers/Passwordless/EmailPasswordless.tsx

@@ -6,7 +6,6 @@ import { useNavigate } from 'react-router-dom';
 import { getSendPasscodeApi } from '@/apis/utils';
 import Button from '@/components/Button';
 import Input from '@/components/Input';
-import PasswordlessConfirmModal from '@/containers/PasswordlessConfirmModal';
 import TermsOfUse from '@/containers/TermsOfUse';
 import useApi, { ErrorHandlers } from '@/hooks/use-api';
 import useForm from '@/hooks/use-form';
@@ -14,6 +13,7 @@ import useTerms from '@/hooks/use-terms';
 import { UserFlow } from '@/types';
 import { emailValidation } from '@/utils/field-validations';
 
+import PasswordlessConfirmModal from './PasswordlessConfirmModal';
 import * as styles from './index.module.scss';
 
 type Props = {

packages/ui/src/containers/Passwordless/PasswordlessConfirmModal.tsx

@@ -3,8 +3,9 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
 import { getSendPasscodeApi, PasscodeChannel } from '@/apis/utils';
-import ConfirmModal from '@/components/ConfirmModal';
+import { WebModal, MobileModal } from '@/components/ConfirmModal';
 import useApi from '@/hooks/use-api';
+import usePlatform from '@/hooks/use-platform';
 import { UserFlow } from '@/types';
 
 type Props = {
@@ -20,8 +21,10 @@ const PasswordlessConfirmModal = ({ className, isOpen, type, method, value, onCl
   const { t } = useTranslation(undefined, { keyPrefix: 'main_flow' });
   const sendPasscode = getSendPasscodeApi(type, method);
   const navigate = useNavigate();
+  const { isMobile } = usePlatform();
 
   const { result, run: asyncSendPasscode } = useApi(sendPasscode);
+  const ConfirmModal = isMobile ? MobileModal : WebModal;
 
   const onConfirmHandler = useCallback(() => {
     onClose();

packages/ui/src/containers/Passwordless/PhonePasswordless.tsx

@@ -5,8 +5,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { getSendPasscodeApi } from '@/apis/utils';
 import Button from '@/components/Button';
-import PhoneInput from '@/components/Input/PhoneInput';
-import PasswordlessConfirmModal from '@/containers/PasswordlessConfirmModal';
+import { PhoneInput } from '@/components/Input';
 import TermsOfUse from '@/containers/TermsOfUse';
 import useApi, { ErrorHandlers } from '@/hooks/use-api';
 import useForm from '@/hooks/use-form';
@@ -14,6 +13,7 @@ import usePhoneNumber, { countryList } from '@/hooks/use-phone-number';
 import useTerms from '@/hooks/use-terms';
 import { UserFlow } from '@/types';
 
+import PasswordlessConfirmModal from './PasswordlessConfirmModal';
 import * as styles from './index.module.scss';
 
 type Props = {

packages/ui/src/containers/TermsOfUse/TermsOfUseConfirmModal/index.tsx

@@ -2,8 +2,9 @@ import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import reactStringReplace from 'react-string-replace';
 
-import ConfirmModal from '@/components/ConfirmModal';
+import { WebModal, MobileModal } from '@/components/ConfirmModal';
 import TextLink from '@/components/TextLink';
+import usePlatform from '@/hooks/use-platform';
 
 type Props = {
   isOpen?: boolean;
@@ -12,8 +13,10 @@ type Props = {
   termsUrl: string;
 };
 
-const TermsOfUseModal = ({ isOpen = false, termsUrl, onConfirm, onClose }: Props) => {
+const TermsOfUseConfirmModal = ({ isOpen = false, termsUrl, onConfirm, onClose }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'main_flow' });
+  const { isMobile } = usePlatform();
+  const ConfirmModal = isMobile ? MobileModal : WebModal;
 
   const terms = t('description.terms_of_use');
   const content = t('description.agree_with_terms_modal', { terms });
@@ -29,4 +32,4 @@ const TermsOfUseModal = ({ isOpen = false, termsUrl, onConfirm, onClose }: Props
   );
 };
 
-export default TermsOfUseModal;
+export default TermsOfUseConfirmModal;

packages/ui/src/containers/TermsOfUse/TermsOfUsePromiseModal/index.tsx

@@ -1,15 +1,16 @@
 import React, { useContext } from 'react';
 import { create, InstanceProps } from 'react-modal-promise';
 
-import TermsOfUseModal from '@/components/TermsOfUseModal';
 import { PageContext } from '@/hooks/use-page-context';
 
+import TermsOfUseConfirmModal from '../TermsOfUseConfirmModal';
+
 const TermsOfUsePromiseModal = ({ isOpen, onResolve, onReject }: InstanceProps<boolean>) => {
   const { setTermsAgreement, experienceSettings } = useContext(PageContext);
   const { termsOfUse } = experienceSettings ?? {};
 
   return (
-    <TermsOfUseModal
+    <TermsOfUseConfirmModal
       isOpen={isOpen}
       termsUrl={termsOfUse?.contentUrl ?? ''}
       onConfirm={() => {

packages/ui/src/containers/TermsOfUse/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ModalContainer from 'react-modal-promise';
 
-import PureTermsOfUse from '@/components/TermsOfUse';
+import TermsOfUseComponent from '@/components/TermsOfUse';
 import useTerms from '@/hooks/use-terms';
 
 type Props = {
@@ -17,7 +17,7 @@ const TermsOfUse = ({ className }: Props) => {
 
   return (
     <>
-      <PureTermsOfUse
+      <TermsOfUseComponent
         className={className}
         name="termsAgreement"
         termsUrl={termsSettings.contentUrl}

packages/ui/src/containers/UsernameSignin/index.tsx

@@ -5,8 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { signInBasic } from '@/apis/sign-in';
 import Button from '@/components/Button';
 import ErrorMessage from '@/components/ErrorMessage';
-import Input from '@/components/Input';
-import PasswordInput from '@/components/Input/PasswordInput';
+import Input, { PasswordInput } from '@/components/Input';
 import TermsOfUse from '@/containers/TermsOfUse';
 import useApi, { ErrorHandlers } from '@/hooks/use-api';
 import useForm from '@/hooks/use-form';

packages/ui/src/hooks/use-terms.ts

@@ -1,6 +1,6 @@
 import { useContext, useCallback } from 'react';
 
-import { termsOfUseModalPromise } from '@/containers/TermsOfUsePromiseModal';
+import { termsOfUseModalPromise } from '@/containers/TermsOfUse/TermsOfUsePromiseModal';
 
 import { PageContext } from './use-page-context';