result screen: company and requester info

ui/pages/PublicTagsSubmit.tsx

 import React from 'react';
 
+import type { FormSubmitResult } from 'ui/publicTags/submit/types';
+
 import useApiQuery from 'lib/api/useApiQuery';
+import * as mocks from 'ui/publicTags/submit/mocks';
 import PublicTagsSubmitForm from 'ui/publicTags/submit/PublicTagsSubmitForm';
 import PublicTagsSubmitResult from 'ui/publicTags/submit/PublicTagsSubmitResult';
 import ContentLoader from 'ui/shared/ContentLoader';
@@ -11,16 +14,24 @@ type Screen = 'form' | 'result' | 'initializing' | 'error';
 
 const PublicTagsSubmit = () => {
 
-  const [ screen, setScreen ] = React.useState<Screen>('initializing');
+  const [ screen, setScreen ] = React.useState<Screen>('result');
+  const [ submitResult, setSubmitResult ] = React.useState<FormSubmitResult>([
+    mocks.item1,
+  ]);
 
   const configQuery = useApiQuery('address_metadata_tag_types');
 
   React.useEffect(() => {
     if (!configQuery.isPending) {
-      setScreen(configQuery.isError ? 'error' : 'form');
+      setScreen(configQuery.isError ? 'error' : 'result');
     }
   }, [ configQuery.isError, configQuery.isPending ]);
 
+  const handleFormSubmitResult = React.useCallback((result: FormSubmitResult) => {
+    setSubmitResult(result);
+    setScreen('result');
+  }, []);
+
   const content = (() => {
     switch (screen) {
       case 'initializing':
@@ -28,9 +39,9 @@ const PublicTagsSubmit = () => {
       case 'error':
         return <DataFetchAlert/>;
       case 'form':
-        return <PublicTagsSubmitForm config={ configQuery.data }/>;
+        return <PublicTagsSubmitForm config={ configQuery.data } onSubmitResult={ handleFormSubmitResult }/>;
       case 'result':
-        return <PublicTagsSubmitResult/>;
+        return <PublicTagsSubmitResult data={ submitResult }/>;
       default:
         return null;
     }

ui/publicTags/submit/PublicTagsSubmitForm.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm, FormProvider } from 'react-hook-form';
 
-import type { FormFields } from './types';
+import type { FormFields, FormSubmitResult } from './types';
 import type { PublicTagTypesResponse } from 'types/api/addressMetadata';
 
 import delay from 'lib/delay';
@@ -21,9 +21,10 @@ import PublicTagsSubmitFieldTags from './fields/PublicTagsSubmitFieldTags';
 
 interface Props {
   config: PublicTagTypesResponse | undefined;
+  onSubmitResult: (result: FormSubmitResult) => void;
 }
 
-const PublicTagsSubmitForm = ({ config }: Props) => {
+const PublicTagsSubmitForm = ({ config, onSubmitResult }: Props) => {
   const isMobile = useIsMobile();
 
   const formApi = useForm<FormFields>({
@@ -38,8 +39,11 @@ const PublicTagsSubmitForm = ({ config }: Props) => {
     // eslint-disable-next-line no-console
     console.log('__>__', data, config);
 
-    await delay(5000);
-  }, [ config ]);
+    await delay(1000);
+    onSubmitResult([
+      { error: null, payload: data },
+    ]);
+  }, [ config, onSubmitResult ]);
 
   return (
     <FormProvider { ...formApi }>

ui/publicTags/submit/PublicTagsSubmitResult.tsx

-import { Box } from '@chakra-ui/react';
+import { Alert, Box, Grid, GridItem } from '@chakra-ui/react';
 import React from 'react';
 
-const PublicTagsSubmitResult = () => {
-  return <Box>PublicTagsSubmitResult</Box>;
+import type { FormSubmitResult } from './types';
+
+import makePrettyLink from 'lib/makePrettyLink';
+import LinkExternal from 'ui/shared/LinkExternal';
+
+import PublicTagsSubmitResultSuccess from './result/PublicTagsSubmitResultSuccess';
+import PublicTagsSubmitResultWithErrors from './result/PublicTagsSubmitResultWithErrors';
+
+interface Props {
+  data: FormSubmitResult;
+}
+
+const PublicTagsSubmitResult = ({ data }: Props) => {
+  const hasErrors = data.some((item) => item.error !== null);
+  const companyWebsite = makePrettyLink(data[0].payload.companyWebsite);
+
+  return (
+    <div>
+      { !hasErrors && (
+        <Alert status="success" mb={ 6 }>
+        Success! All tags went into moderation pipeline and soon will appear in the explorer.
+        </Alert>
+      ) }
+
+      <Box as="h2" textStyle="h4">Company info</Box>
+      <Grid rowGap={ 3 } columnGap={ 6 } gridTemplateColumns="185px 1fr" mt={ 6 }>
+        <GridItem>Your name</GridItem>
+        <GridItem>{ data[0].payload.requesterName }</GridItem>
+        <GridItem>Email</GridItem>
+        <GridItem>{ data[0].payload.requesterEmail }</GridItem>
+        { data[0].payload.companyName && (
+          <>
+            <GridItem>Company name</GridItem>
+            <GridItem>{ data[0].payload.companyName }</GridItem>
+          </>
+        ) }
+        { companyWebsite && (
+          <>
+            <GridItem>Company website</GridItem>
+            <GridItem>
+              <LinkExternal href={ companyWebsite.url }>{ companyWebsite.domain }</LinkExternal>
+            </GridItem>
+          </>
+        ) }
+      </Grid>
+
+      <Box as="h2" textStyle="h4" mt={ 8 } mb={ 5 }>Public tags/labels</Box>
+      { hasErrors ? <PublicTagsSubmitResultWithErrors data={ data }/> : <PublicTagsSubmitResultSuccess data={ data }/> }
+    </div>
+  );
 };
 
 export default PublicTagsSubmitResult;

ui/publicTags/submit/mocks.ts

+import type { FormSubmitResultItem } from './types';
+
+export const item1: FormSubmitResultItem = {
+  error: null,
+  payload: {
+    addresses: [
+      {
+        hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254',
+      },
+    ],
+    tags: [
+      {
+        name: 'hello',
+        type: {
+          label: 'name',
+          value: 'name',
+        },
+        url: 'https://ohhhh.me',
+        tooltipDescription: 'hello again',
+        bgColor: 'add',
+        textColor: '00aa11',
+      },
+    ],
+    requesterName: 'tomm',
+    requesterEmail: 'tom@ohhhh.me',
+    companyName: 'OHHHH',
+    companyWebsite: 'https://ohhhh.me',
+    description: 'chao',
+    reCaptcha: 'xxxx',
+  },
+};

ui/publicTags/submit/result/PublicTagsSubmitResultSuccess.tsx

+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type { FormSubmitResult } from '../types';
+
+interface Props {
+  data: FormSubmitResult;
+}
+
+const PublicTagsSubmitResultSuccess = (props: Props) => {
+  return <Box>{ props.data.length }</Box>;
+};
+
+export default PublicTagsSubmitResultSuccess;

ui/publicTags/submit/result/PublicTagsSubmitResultWithErrors.tsx

+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type { FormSubmitResult } from '../types';
+
+interface Props {
+  data: FormSubmitResult;
+}
+
+const PublicTagsSubmitResultWithErrors = (props: Props) => {
+  return <Box>{ props.data.length }</Box>;
+};
+
+export default PublicTagsSubmitResultWithErrors;

ui/publicTags/submit/types.ts

@@ -22,3 +22,10 @@ export interface FormFieldTag {
   textColor: string | undefined;
   tooltipDescription: string | undefined;
 }
+
+export interface FormSubmitResultItem {
+  error: unknown | null;
+  payload: FormFields;
+}
+
+export type FormSubmitResult = Array<FormSubmitResultItem>;