company name and website fields

ui/publicTags/submit/PublicTagsSubmitForm.tsx

@@ -9,6 +9,8 @@ import type { PublicTagTypesResponse } from 'types/api/addressMetadata';
 import Hint from 'ui/shared/Hint';
 
 import PublicTagsSubmitFieldAddresses from './fields/PublicTagsSubmitFieldAddresses';
+import PublicTagsSubmitFieldCompanyName from './fields/PublicTagsSubmitFieldCompanyName';
+import PublicTagsSubmitFieldCompanyWebsite from './fields/PublicTagsSubmitFieldCompanyWebsite';
 import PublicTagsSubmitFieldDescription from './fields/PublicTagsSubmitFieldDescription';
 import PublicTagsSubmitFieldRequesterEmail from './fields/PublicTagsSubmitFieldRequesterEmail';
 import PublicTagsSubmitFieldRequesterName from './fields/PublicTagsSubmitFieldRequesterName';
@@ -23,7 +25,7 @@ const PublicTagsSubmitForm = ({ config }: Props) => {
     mode: 'onBlur',
     defaultValues: {
       addresses: [ { hash: '' } ],
-      tags: [ { name: '', type: { label: 'name', value: 'name' }, url: undefined, bgColor: undefined, textColor: undefined } ],
+      tags: [ { name: '', type: { label: 'name', value: 'name' } } ],
     },
   });
 
@@ -47,10 +49,10 @@ const PublicTagsSubmitForm = ({ config }: Props) => {
             Company info
           </GridItem>
           <PublicTagsSubmitFieldRequesterName/>
-          <chakra.div bgColor="blue.100" h={ 20 }/>
+          <PublicTagsSubmitFieldCompanyName/>
           <div/>
           <PublicTagsSubmitFieldRequesterEmail/>
-          <chakra.div bgColor="blue.100" h={ 20 }/>
+          <PublicTagsSubmitFieldCompanyWebsite/>
           <div/>
 
           <GridItem colSpan={{ base: 1, lg: 3 }} as="h2" textStyle="h4" mt={ 3 }>

ui/publicTags/submit/fields/PublicTagsSubmitFieldCompanyName.tsx

+import { FormControl, Input } from '@chakra-ui/react';
+import React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+const PublicTagsSubmitFieldCompanyName = () => {
+  const { control } = useFormContext<FormFields>();
+  const { field, fieldState, formState } = useController<FormFields, 'companyName'>({ control, name: 'companyName' });
+
+  const isDisabled = formState.isSubmitting;
+
+  return (
+    <FormControl variant="floating" isDisabled={ isDisabled } size={{ base: 'md', lg: 'lg' }}>
+      <Input
+        { ...field }
+        isInvalid={ Boolean(fieldState.error) }
+        isDisabled={ isDisabled }
+        autoComplete="off"
+      />
+      <InputPlaceholder text="Company name" error={ fieldState.error }/>
+    </FormControl>
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldCompanyName);

ui/publicTags/submit/fields/PublicTagsSubmitFieldCompanyWebsite.tsx

+import { FormControl, Input } from '@chakra-ui/react';
+import React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import { validator as urlValidator } from 'lib/validations/url';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+const PublicTagsSubmitFieldCompanyWebsite = () => {
+  const { control } = useFormContext<FormFields>();
+  const { field, fieldState, formState } = useController<FormFields, 'companyWebsite'>({ control, name: 'companyWebsite', rules: { validate: urlValidator } });
+
+  const isDisabled = formState.isSubmitting;
+
+  return (
+    <FormControl variant="floating" isDisabled={ isDisabled } size={{ base: 'md', lg: 'lg' }}>
+      <Input
+        { ...field }
+        isInvalid={ Boolean(fieldState.error) }
+        isDisabled={ isDisabled }
+        autoComplete="off"
+      />
+      <InputPlaceholder text="Company website" error={ fieldState.error }/>
+    </FormControl>
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldCompanyWebsite);

ui/publicTags/submit/types.ts

@@ -3,9 +3,11 @@ import type { AddressMetadataTagType } from 'types/api/addressMetadata';
 export interface FormFields {
   requesterName: string;
   requesterEmail: string;
+  companyName: string | undefined;
+  companyWebsite: string | undefined;
   addresses: Array<{ hash: string }>;
   tags: Array<FormFieldTag>;
-  description: string;
+  description: string | undefined;
 }
 
 export interface FormFieldTag {