-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
sc-11501 Refactor the add new managed modal (#919)
Co-authored-by: Cletus Razakou <[email protected]>
- Loading branch information
Showing
5 changed files
with
380 additions
and
298 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import { Stack, chakra, ModalFooter, Button, Text } from '@chakra-ui/react'; | ||
| import { Trans } from '@lingui/macro'; | ||
| import React from 'react'; | ||
| import { SubmitHandler, useFormContext } from 'react-hook-form'; | ||
| import CheckboxFormControl from './ui/CheckboxFormControl'; | ||
| import InputFormControl from './ui/InputFormControl'; | ||
|
|
||
| type AddNewVaspFormProps = { | ||
| onSubmit: SubmitHandler<any>; | ||
| isCreatingVasp: boolean; | ||
| closeModal: () => void; | ||
| }; | ||
|
|
||
| function AddNewVaspForm({ onSubmit, isCreatingVasp, closeModal }: AddNewVaspFormProps) { | ||
| const { | ||
| handleSubmit, | ||
| register, | ||
| watch, | ||
| formState: { errors } | ||
| } = useFormContext(); | ||
| const accept = watch('accept'); | ||
|
|
||
| return ( | ||
| <form onSubmit={handleSubmit(onSubmit)}> | ||
| <Text> | ||
| <Trans> | ||
| Please input the name of the new managed Virtual Asset Service Provider (VASP). When the | ||
| entity is created, you will have the ability to add collaborators, start and complete the | ||
| certificate registration process, and manage the VASP account. Please acknowledge below | ||
| and provide the name of the entity. | ||
| </Trans> | ||
| </Text> | ||
|
|
||
| <Stack pt={4}> | ||
| <InputFormControl | ||
| controlId="name" | ||
| isInvalid={!!errors.name} | ||
| data-testid="name" | ||
| formHelperText={errors.name?.message} | ||
| isDisabled={!accept || isCreatingVasp} | ||
| {...register('name')} | ||
| label={ | ||
| <> | ||
| <chakra.span fontWeight={700}> | ||
| <Trans>VASP Name</Trans> | ||
| </chakra.span>{' '} | ||
| (<Trans>required</Trans>) | ||
| </> | ||
| } | ||
| /> | ||
| <InputFormControl | ||
| controlId="domain" | ||
| isInvalid={!!errors.domain} | ||
| data-testid="domain" | ||
| formHelperText={errors.domain?.message} | ||
| isDisabled={!accept || isCreatingVasp} | ||
| placeholder="https://" | ||
| {...register('domain')} | ||
| label={ | ||
| <> | ||
| <chakra.span fontWeight={700}> | ||
| <Trans>VASP Domain</Trans> | ||
| </chakra.span>{' '} | ||
| (<Trans>required</Trans>) | ||
| </> | ||
| } | ||
| /> | ||
| </Stack> | ||
| <CheckboxFormControl | ||
| controlId="accept" | ||
| data-testid="accept" | ||
| {...register('accept', { required: true })} | ||
| colorScheme="gray"> | ||
| <Trans> | ||
| TRISA is a network of trusted members. I acknowledge that the new VASP has a legitimate | ||
| business purpose to join TRISA. | ||
| </Trans> | ||
| </CheckboxFormControl> | ||
| <ModalFooter display="flex" flexDir="column" justifyContent="center" gap={2}> | ||
| <Button | ||
| isLoading={isCreatingVasp} | ||
| bg="orange" | ||
| _hover={{ bg: 'orange' }} | ||
| type="submit" | ||
| minW={150} | ||
| isDisabled={!accept || isCreatingVasp}> | ||
| <Trans id="Next">Create</Trans> | ||
| </Button> | ||
| <Button variant="ghost" onClick={closeModal} disabled={isCreatingVasp}> | ||
| <Trans id="Cancel">Cancel</Trans> | ||
| </Button> | ||
| </ModalFooter> | ||
| </form> | ||
| ); | ||
| } | ||
|
|
||
| export default AddNewVaspForm; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { Modal, ModalContent } from '@chakra-ui/react'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import { ReactNode } from 'react'; | ||
| import { dynamicActivate } from 'utils/i18nLoaderHelper'; | ||
| import { act, fireEvent, render, screen } from 'utils/test-utils'; | ||
| import AddNewVaspForm from './AddNewVaspForm'; | ||
|
|
||
| const ModalWrapper = ({ children }: { children: ReactNode }) => ( | ||
| <Modal isOpen onClose={jest.fn()}> | ||
| <ModalContent>{children}</ModalContent> | ||
| </Modal> | ||
| ); | ||
|
|
||
| describe('<AddNewVaspModal />', () => { | ||
| beforeEach(() => { | ||
| dynamicActivate('en'); | ||
| }); | ||
|
|
||
| it('should be disabled when checkbox is unchecked', () => { | ||
| render( | ||
| <ModalWrapper> | ||
| <AddNewVaspForm isCreatingVasp={false} onSubmit={jest.fn()} closeModal={jest.fn()} /> | ||
| </ModalWrapper> | ||
| ); | ||
|
|
||
| expect(screen.getByTestId('accept').querySelector('input[type="checkbox"]')).not.toBeChecked(); | ||
|
|
||
| expect(screen.getByTestId('name')).toBeDisabled(); | ||
| expect(screen.getByTestId('domain')).toBeDisabled(); | ||
| expect(screen.getByRole('button', { name: /next/i })).toBeDisabled(); | ||
| }); | ||
|
|
||
| it('should be enabled when checkbox is checked', () => { | ||
| render( | ||
| <ModalWrapper> | ||
| <AddNewVaspForm isCreatingVasp={false} onSubmit={jest.fn()} closeModal={jest.fn()} /> | ||
| </ModalWrapper> | ||
| ); | ||
|
|
||
| const acceptElement = screen.getByTestId('accept').querySelector('input[type="checkbox"]'); | ||
| userEvent.click(acceptElement!); | ||
|
|
||
| expect(screen.getByTestId('accept').querySelector('input[type="checkbox"]')).toBeChecked(); | ||
|
|
||
| expect(screen.getByTestId('name')).toBeEnabled(); | ||
| expect(screen.getByTestId('domain')).toBeEnabled(); | ||
| expect(screen.getByRole('button', { name: /next/i })).toBeEnabled(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.