tag preview

configs/app/features/publicTagsSubmission.ts

 import type { Feature } from './types';
 
+import services from '../services';
 import { getEnvValue } from '../utils';
 import addressMetadata from './addressMetadata';
 
@@ -8,7 +9,7 @@ const apiHost = getEnvValue('NEXT_PUBLIC_ADMIN_SERVICE_API_HOST');
 const title = 'Public tag submission';
 
 const config: Feature<{ api: { endpoint: string; basePath: string } }> = (() => {
-  if (addressMetadata.isEnabled && apiHost) {
+  if (services.reCaptcha.siteKey && addressMetadata.isEnabled && apiHost) {
     return Object.freeze({
       title,
       isEnabled: true,

ui/publicTags/submit/PublicTagsSubmitForm.tsx

@@ -48,10 +48,10 @@ const PublicTagsSubmitForm = ({ config }: Props) => {
           </GridItem>
           <PublicTagsSubmitFieldRequesterName/>
           <chakra.div bgColor="blue.100" h={ 20 }/>
-          <chakra.div bgColor="yellow.100" h={ 20 }/>
+          <div/>
           <PublicTagsSubmitFieldRequesterEmail/>
           <chakra.div bgColor="blue.100" h={ 20 }/>
-          <chakra.div bgColor="yellow.100" h={ 20 }/>
+          <div/>
 
           <GridItem colSpan={{ base: 1, lg: 3 }} as="h2" textStyle="h4" mt={ 3 }>
             Public tags/labels

ui/publicTags/submit/fields/PublicTagsSubmitFieldDescription.tsx

@@ -24,7 +24,10 @@ const PublicTagsSubmitFieldDescription = () => {
         maxH="160px"
         maxLength={ MAX_LENGTH }
       />
-      <InputPlaceholder text="Any comments for moderation... Specify the reason for adding tags and color preference(s)." error={ fieldState.error }/>
+      <InputPlaceholder
+        text="Comment - for moderation purposes. Please provide a way to confirm the connection between address and tags."
+        error={ fieldState.error }
+      />
     </FormControl>
   );
 };

ui/publicTags/submit/fields/PublicTagsSubmitFieldTag.tsx

@@ -7,6 +7,7 @@ import type { PublicTagType } from 'types/api/addressMetadata';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { validator as urlValidator } from 'lib/validations/url';
+import EntityTag from 'ui/shared/EntityTags/EntityTag';
 import IconSvg from 'ui/shared/IconSvg';
 import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
@@ -15,6 +16,7 @@ import PublicTagsSubmitFieldTagType from './PublicTagsSubmitFieldTagType';
 
 interface Props {
   index: number;
+  field: FormFieldTag;
   tagTypes: Array<PublicTagType> | undefined;
   register: UseFormRegister<FormFields>;
   errors: Merge<FieldError, FieldErrorsImpl<FormFieldTag>> | undefined;
@@ -23,7 +25,7 @@ interface Props {
   onRemoveClick?: (index: number) => void;
 }
 
-const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddClick, onRemoveClick, tagTypes }: Props) => {
+const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddClick, onRemoveClick, tagTypes, field }: Props) => {
   const isMobile = useIsMobile();
   const bgColorDefault = useColorModeValue('blackAlpha.50', 'whiteAlpha.100');
   const inputBgColor = useColorModeValue('white', 'black');
@@ -101,7 +103,6 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
             </FormControl>
           </GridItem>
         </Grid>
-
       </GridItem>
       <GridItem py={{ lg: '10px' }}>
         <Flex
@@ -133,10 +134,28 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
             />
           ) }
         </Flex>
-        { !isMobile && <chakra.div bgColor="yellow.100" h={ 40 } mt="10px"/> }
+        { !isMobile && (
+          <Flex flexDir="column" alignItems="flex-start" mt="10px" rowGap={ 2 }>
+            <EntityTag data={{
+              name: field.name || 'Tag name',
+              tagType: field.type.value,
+              meta: {
+                tagUrl: field.url,
+                bgColor: field.bgColor ? `#${ field.bgColor }` : undefined,
+                textColor: field.textColor ? `#${ field.textColor }` : undefined,
+                tooltipDescription: field.tooltipDescription,
+              },
+              slug: 'new',
+              ordinal: 0,
+            }}/>
+            <chakra.span color="text_secondary" fontSize="sm">
+              { tagTypes?.find(({ type }) => type === field.type.value)?.description }
+            </chakra.span>
+          </Flex>
+        ) }
       </GridItem>
     </>
   );
 };
 
-export default React.memo(PublicTagsSubmitFieldTag);
+export default PublicTagsSubmitFieldTag;

ui/publicTags/submit/fields/PublicTagsSubmitFieldTags.tsx

@@ -13,7 +13,7 @@ interface Props {
 }
 
 const PublicTagsSubmitFieldTags = ({ tagTypes }: Props) => {
-  const { control, formState, register } = useFormContext<FormFields>();
+  const { control, formState, register, watch } = useFormContext<FormFields>();
   const { fields, insert, remove } = useFieldArray<FormFields, 'tags'>({
     name: 'tags',
     control,
@@ -44,6 +44,7 @@ const PublicTagsSubmitFieldTags = ({ tagTypes }: Props) => {
         return (
           <PublicTagsSubmitFieldTag
             key={ field.id }
+            field={ watch(`tags.${ index }`) }
             index={ index }
             tagTypes={ tagTypes }
             register={ register }