diff --git a/src/App.tsx b/src/App.tsx index 8a20840b..944e06d5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -70,6 +70,7 @@ const RealunitTransactionDetailScreen = lazy(() => import('./screens/realunit-tr const RealunitUserScreen = lazy(() => import('./screens/realunit-user.screen')); const PersonalIbanScreen = lazy(() => import('./screens/personal-iban.screen')); const BuyCryptoUpdateScreen = lazy(() => import('./screens/buy-crypto-update.screen')); +const BuyCryptoResetAmlScreen = lazy(() => import('./screens/buy-crypto-reset-aml.screen')); setupLanguages(); @@ -250,6 +251,10 @@ export const Routes = [ path: 'buyCrypto/update', element: withSuspense(), }, + { + path: 'buyCrypto/resetAml', + element: withSuspense(), + }, { path: 'tx', element: withSuspense(), diff --git a/src/screens/buy-crypto-reset-aml.screen.tsx b/src/screens/buy-crypto-reset-aml.screen.tsx new file mode 100644 index 00000000..64b886df --- /dev/null +++ b/src/screens/buy-crypto-reset-aml.screen.tsx @@ -0,0 +1,140 @@ +import { useApi, Utils, Validations } from '@dfx.swiss/react'; +import { + DfxIcon, + Form, + IconSize, + IconVariant, + StyledButton, + StyledButtonColor, + StyledButtonWidth, + StyledInput, + StyledVerticalStack, +} from '@dfx.swiss/react-components'; +import { useState } from 'react'; +import { useForm } from 'react-hook-form'; +import { ErrorHint } from 'src/components/error-hint'; +import { useSettingsContext } from 'src/contexts/settings.context'; +import { useAdminGuard } from 'src/hooks/guard.hook'; +import { useLayoutOptions } from 'src/hooks/layout-config.hook'; + +interface FormData { + buyCryptoId: string; +} + +export default function BuyCryptoResetAmlScreen(): JSX.Element { + useAdminGuard(); + + const { translate, translateError } = useSettingsContext(); + const { call } = useApi(); + + const [isLoading, setIsLoading] = useState(false); + const [showNotification, setShowNotification] = useState(false); + const [awaitConfirm, setAwaitConfirm] = useState(false); + const [error, setError] = useState(); + + const { + control, + handleSubmit, + formState: { isValid, errors }, + reset, + getValues, + } = useForm({ mode: 'onChange' }); + + function onSubmit() { + setError(undefined); + setAwaitConfirm(true); + } + + function onConfirm() { + const { buyCryptoId } = getValues(); + setIsLoading(true); + setError(undefined); + + call({ + url: `buyCrypto/${buyCryptoId}/amlCheck`, + method: 'DELETE', + }) + .then(() => { + setAwaitConfirm(false); + toggleNotification(); + reset(); + }) + .catch((e) => setError(e.message)) + .finally(() => setIsLoading(false)); + } + + function onCancel() { + setAwaitConfirm(false); + setError(undefined); + } + + const toggleNotification = () => { + setShowNotification(true); + setTimeout(() => setShowNotification(false), 2000); + }; + + const rules = Utils.createRules({ + buyCryptoId: [Validations.Required, Validations.Custom((id) => (!isNaN(Number(id)) ? true : 'pattern'))], + }); + + useLayoutOptions({ title: translate('screens/buy-crypto', 'Reset AML Check') }); + + return ( +
+ + + + {error && ( +
+ +
+ )} + + {showNotification ? ( +

+ + {translate('screens/buy-crypto', 'AML check reset successfully')} +

+ ) : awaitConfirm ? ( + +

+ {translate( + 'screens/buy-crypto', + 'This will delete the FiatOutput and reset the AML check. Are you sure?', + )} +

+ + +
+ ) : ( + + )} +
+
+ ); +}