sc-10544 Add New managed VASP on user ui

web/gds-user-ui/src/App.tsx

@@ -5,14 +5,15 @@ import { ErrorBoundary } from 'react-error-boundary';
 import ErrorFallback from 'components/ErrorFallback';
 import { isMaintenanceMode } from './application/config/index';
 import Maintenance from 'components/Maintenance';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { isProdEnv } from 'application/config';
-const query = new QueryClient();
+import { queryClient } from 'utils/react-query';
+
 const App: React.FC = () => {
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
-      <QueryClientProvider client={query}>
+      <QueryClientProvider client={queryClient}>
         <BrowserRouter>
           <div className="App">{isMaintenanceMode() ? <Maintenance /> : <AppRouter />}</div>
         </BrowserRouter>

web/gds-user-ui/src/application/routes/routes.ts

@@ -136,7 +136,6 @@ const appRoutes = [
     component: SwitchOrganization,
     layout: 'dashboard',
     route: '/organization/switch'
-
   },
   {
     path: '/dashboard/certificate-management',
@@ -173,6 +172,13 @@ const appRoutes = [
     component: Collaborators,
     layout: 'dashboard'
   },
+  // {
+  //   path: '/dashboard/organisation/select',
+  //   name: 'Certificate Inventory',
+  //   component: ChooseAnAccount,
+  //   layout: 'dashboard',
+  //   route: '/organisation/select'
+  // },
   //  -------ERROR ROUTES-------
   {
     path: '/not-found',

web/gds-user-ui/src/components/Account/Account.spec.tsx

@@ -11,13 +11,13 @@ describe('<Account />', () => {
   });
 
   it('should display props correctly', () => {
-    const { username, vaspName } = {
-      vaspName: faker.internet.domainName(),
-      username: faker.internet.userName()
+    const { name, domain } = {
+      name: faker.internet.domainName(),
+      domain: faker.internet.userName()
     };
-    render(<Account username={username} vaspName={vaspName} />);
+    render(<Account name={name} domain={domain} />);
 
     expect(screen.getByTestId('vaspName')).toBeInTheDocument();
-    expect(screen.getByTestId('username')).toBeInTheDocument();
+    expect(screen.getByTestId('vaspDomain')).toBeInTheDocument();
   });
 });

web/gds-user-ui/src/components/Account/index.tsx

@@ -1,15 +1,14 @@
 import { Avatar, Box, HStack, Text } from '@chakra-ui/react';
+import { Organization } from 'modules/dashboard/organization/organizationType';
 import { BsChevronRight } from 'react-icons/bs';
 import { Link } from 'react-router-dom';
 
 type AccountProps = {
-  vaspName: string;
-  username: string;
   src?: string;
   alt?: string;
-};
+} & Partial<Organization>;
 
-export const Account = ({ vaspName, username, src, alt }: AccountProps) => (
+export const Account = ({ domain, name, src }: AccountProps) => (
   <Link to="/#" role="group">
     <HStack
       direction="row"
@@ -19,12 +18,12 @@ export const Account = ({ vaspName, username, src, alt }: AccountProps) => (
       transition="background 400ms">
       <HStack width="100%" alignItems="center">
         <HStack>
-          <Avatar bg="blue" name={username} src={src} fontWeight={700} />
+          <Avatar bg="blue" name={name} src={src} fontWeight={700} />
           <Box>
             <Text fontWeight={700} data-testid="vaspName">
-              {vaspName}
+              {name}
             </Text>
-            <Text data-testid="username">{username}</Text>
+            <Text data-testid="vaspDomain">{domain}</Text>
           </Box>
         </HStack>
       </HStack>

web/gds-user-ui/src/components/AddNewVaspModal.tsx

@@ -0,0 +1,162 @@
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Stack,
+  Text,
+  useDisclosure,
+  chakra,
+  useToast
+} from '@chakra-ui/react';
+import { t, Trans } from '@lingui/macro';
+import { usePostOrganizations } from 'modules/dashboard/organization/usePostOrganization';
+import { FormProvider, useForm } from 'react-hook-form';
+import CheckboxFormControl from './ui/CheckboxFormControl';
+import InputFormControl from './ui/InputFormControl';
+import * as Yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { queryClient } from 'utils/react-query';
+import { FETCH_ORGANIZATION } from 'constants/query-keys';
+
+const validationSchema = Yup.object().shape({
+  name: Yup.string().required(t`The VASP Name is required.`),
+  domain: Yup.string()
+    .url(t`The Domain Name is invalid.`)
+    .required(t`The Domain Name is required.`)
+});
+
+function AddNewVaspModal() {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const methods = useForm({
+    defaultValues: {
+      name: '',
+      domain: '',
+      accept: false
+    },
+    mode: 'onSubmit',
+    resolver: yupResolver(validationSchema)
+  });
+  const {
+    register,
+    watch,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting }
+  } = methods;
+  const { mutate, isLoading } = usePostOrganizations();
+  const toast = useToast();
+  const isCreatingVasp = isSubmitting || isLoading;
+
+  const accept = watch('accept');
+  const onSubmit = (values: any) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { accept: _accept, ...payload } = values;
+
+    mutate(payload, {
+      onSuccess() {
+        queryClient.invalidateQueries([FETCH_ORGANIZATION]);
+        reset();
+        onClose();
+      },
+      onError: (error) => {
+        console.log('[mutate] error', error.response?.data.error);
+        toast({
+          title: error.response?.data?.error || error.message,
+          status: 'error',
+          position: 'top-right'
+        });
+      }
+    });
+  };
+
+  return (
+    <>
+      <Button onClick={onOpen}>+ Add New VASP</Button>
+
+      <Modal blockScrollOnMount isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader textAlign="center">Modal Title</ModalHeader>
+
+          <ModalBody>
+            <FormProvider {...methods}>
+              <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>
+                <CheckboxFormControl
+                  controlId="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>
+                <Stack py={5}>
+                  <InputFormControl
+                    controlId="name"
+                    isInvalid={!!errors.name}
+                    data-testid="name"
+                    formHelperText={errors.name?.message}
+                    isDisabled={!accept}
+                    {...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}
+                    placeholder="https://"
+                    {...register('domain')}
+                    label={
+                      <>
+                        <chakra.span fontWeight={700}>
+                          <Trans>VASP Domain</Trans>
+                        </chakra.span>{' '}
+                        (<Trans>required</Trans>)
+                      </>
+                    }
+                  />
+                </Stack>
+                <ModalFooter display="flex" flexDir="column" justifyContent="center" gap={2}>
+                  <Button
+                    bg="orange"
+                    _hover={{ bg: 'orange' }}
+                    type="submit"
+                    minW={150}
+                    isDisabled={!accept || isCreatingVasp}>
+                    <Trans id="Next">Create</Trans>
+                  </Button>
+                  <Button variant="ghost" onClick={onClose} disabled={isCreatingVasp}>
+                    <Trans id="Cancel">Cancel</Trans>
+                  </Button>
+                </ModalFooter>
+              </form>
+            </FormProvider>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
+
+export default AddNewVaspModal;

web/gds-user-ui/src/components/ChooseAnOrganization/ChooseAnAccount.stories.tsx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/react';
+import ChooseAnOrganization, { ChooseAnAccountProps } from '.';
+
+export default {
+  title: 'components/ChooseAnAccount',
+  component: ChooseAnOrganization
+} as Meta<ChooseAnAccountProps>;
+
+const Template: Story<ChooseAnAccountProps> = (args) => <ChooseAnOrganization {...args} />;
+
+export const Standard = Template.bind({});
+Template.args = {};