Add feeback

centrifuge · Dec 12, 2024 · 0de80d4 · 0de80d4
1 parent 2838bbb
commit 0de80d4
Show file tree

Hide file tree

Showing 9 changed files with 172 additions and 73 deletions.
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/IssuerCategories.tsx b/centrifuge-app/src/pages/IssuerCreatePool/IssuerCategories.tsx
@@ -1,6 +1,7 @@
 import { PoolMetadataInput } from '@centrifuge/centrifuge-js'
 import { Box, Grid, IconButton, IconTrash, Select, Text, TextInput } from '@centrifuge/fabric'
 import { Field, FieldArray, FieldProps, useFormikContext } from 'formik'
+import { FieldWithErrorMessage } from '../../../src/components/FieldWithErrorMessage'
 import { AddButton } from './PoolDetailsSection'
 import { StyledGrid } from './PoolStructureSection'
 
@@ -16,10 +17,18 @@ const PROVIDERS = [
   { label: 'Other', value: 'other' },
 ]
 
-const LabelWithDeleteButton = ({ onDelete, hideButton }: { onDelete: () => void; hideButton: boolean }) => {
+export const LabelWithDeleteButton = ({
+  onDelete,
+  hideButton,
+  label,
+}: {
+  onDelete: () => void
+  hideButton: boolean
+  label: string
+}) => {
   return (
     <Box display="flex" justifyContent="space-between" alignItems="center">
-      <Text variant="heading4">Name of provider</Text>
+      <Text variant="heading4">{label}</Text>
       {!hideButton && (
         <IconButton onClick={onDelete}>
           <IconTrash color="textSecondary" />
@@ -51,29 +60,43 @@ export const IssuerCategoriesSection = () => {
                           value={field.value}
                           options={PROVIDERS}
                           placeholder="Please select..."
+                          errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                          activePlaceholder
                         />
                       )}
                     </Field>
                     {category.type === 'other' && (
                       <Field name={`issuerCategories.${index}.description`}>
                         {({ field, meta }: FieldProps) => (
-                          <TextInput {...field} label="Description" placeholder="Type here..." maxLength={100} />
+                          <FieldWithErrorMessage
+                            {...field}
+                            label="Description"
+                            placeholder="Type here..."
+                            maxLength={100}
+                            as={TextInput}
+                            errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                            onBlur={field.onBlur}
+                          />
                         )}
                       </Field>
                     )}
                   </Grid>
                   <Field name={`issuerCategories.${index}.value`}>
-                    {({ field }: FieldProps) => (
-                      <TextInput
+                    {({ field, meta }: FieldProps) => (
+                      <FieldWithErrorMessage
                         {...field}
                         label={
                           <LabelWithDeleteButton
                             onDelete={() => remove(index)}
                             hideButton={form.values.issuerCategories.length === 1}
+                            label="Name of provider"
                           />
                         }
                         placeholder="Type here..."
                         maxLength={100}
+                        errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                        onBlur={field.onBlur}
+                        as={TextInput}
                       />
                     )}
                   </Field>

diff --git a/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx b/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx
@@ -5,6 +5,7 @@ import {
   CurrencyInput,
   FileUpload,
   Grid,
+  InputErrorMessage,
   Select,
   Text,
   TextAreaInput,
@@ -59,6 +60,7 @@ export const PoolDetailsSection = () => {
                 errorMessage={meta.touched && meta.error ? meta.error : undefined}
                 accept="image/svg+xml"
                 fileTypeText="SVG (in square size)"
+                onClear={() => form.setFieldValue('poolIcon', null)}
               />
             )}
           </Field>
@@ -119,19 +121,23 @@ export const PoolDetailsSection = () => {
           <Grid gap={2}>
             <Field name="issuerName" validate={validate.issuerName}>
               {({ field, meta, form }: FieldProps) => (
-                <FieldWithErrorMessage
-                  name="issuerName"
-                  label={
-                    <Tooltips type="issuerName" label={<Text variant="heading4">Legal name of the issuer*</Text>} />
-                  }
-                  onChange={(event: any) => form.setFieldValue('issuerName', event.target.value)}
-                  onBlur={field.onBlur}
-                  errorMessage={meta.touched && meta.error ? meta.error : undefined}
-                  value={field.value}
-                  as={TextInput}
-                  placeholder="Type here..."
-                  maxLength={100}
-                />
+                <Box position="relative">
+                  <Field
+                    name="issuerName"
+                    label={
+                      <Tooltips type="issuerName" label={<Text variant="heading4">Legal name of the issuer*</Text>} />
+                    }
+                    onChange={(event: any) => form.setFieldValue('issuerName', event.target.value)}
+                    onBlur={field.onBlur}
+                    value={field.value}
+                    as={TextInput}
+                    placeholder="Type here..."
+                    maxLength={100}
+                  />
+                  {meta.touched ? (
+                    <InputErrorMessage style={{ position: 'absolute' }}>{meta.error}</InputErrorMessage>
+                  ) : null}
+                </Box>
               )}
             </Field>
             <Field name="issuerLogo">
@@ -142,6 +148,7 @@ export const PoolDetailsSection = () => {
                   accept="image/png, image/jpeg, image/jpg"
                   fileTypeText="SVG, PNG, or JPG (max. 1MB; 480x480px)"
                   label="Issuer logo"
+                  onClear={() => form.setFieldValue('issuerLogo', null)}
                 />
               )}
             </Field>
@@ -169,7 +176,7 @@ export const PoolDetailsSection = () => {
               {({ field, meta, form }: FieldProps) => (
                 <FieldWithErrorMessage
                   name="issuerShortDescription"
-                  label="Landing page description (max 100 characters)*"
+                  label="Landing page description (50-100 characters)"
                   onChange={(event: any) => form.setFieldValue('issuerShortDescription', event.target.value)}
                   onBlur={field.onBlur}
                   errorMessage={meta.touched && meta.error ? meta.error : undefined}
@@ -188,7 +195,7 @@ export const PoolDetailsSection = () => {
                   validate={validate.issuerDescription}
                   name="issuerDescription"
                   as={TextAreaInput}
-                  label="Overview page description (max. 3000 characters)*"
+                  label="Overview page description (100-3000 characters)*"
                   placeholder="Type here..."
                   maxLength={1000}
                   errorMessage={meta.touched && meta.error ? meta.error : undefined}
@@ -228,6 +235,7 @@ export const PoolDetailsSection = () => {
                   accept="application/pdf"
                   label={createLabel('Executive summary PDF')}
                   placeholder="Choose file"
+                  onClear={() => form.setFieldValue(`executiveSummary`, null)}
                   small
                 />
               )}
@@ -274,7 +282,7 @@ export const PoolDetailsSection = () => {
       <PoolRatingsSection />
 
       <Box mt={4} mb={3}>
-        <Text variant="heading2">Service analysis</Text>
+        <Text variant="heading2">Pool analysis</Text>
         <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={3}>
           <FieldWithErrorMessage
             name="reportUrl"
@@ -306,6 +314,7 @@ export const PoolDetailsSection = () => {
                 label="Reviewer avatar"
                 placeholder="Choose file"
                 accept="image/png, image/jpeg, image/jpg"
+                onClear={() => form.setFieldValue('reportAuthorAvatar', null)}
                 small
               />
             )}

diff --git a/centrifuge-app/src/pages/IssuerCreatePool/PoolRatings.tsx b/centrifuge-app/src/pages/IssuerCreatePool/PoolRatings.tsx
@@ -2,17 +2,19 @@ import { PoolMetadataInput } from '@centrifuge/centrifuge-js'
 import { Box, FileUpload, Text, TextInput, URLInput } from '@centrifuge/fabric'
 import { Field, FieldArray, FieldProps, useFormikContext } from 'formik'
 import { FieldWithErrorMessage } from '../../../src/components/FieldWithErrorMessage'
+import { LabelWithDeleteButton } from './IssuerCategories'
 import { AddButton } from './PoolDetailsSection'
 import { StyledGrid } from './PoolStructureSection'
 
 export const PoolRatingsSection = () => {
   const form = useFormikContext<PoolMetadataInput>()
+
   return (
     <Box mt={4} mb={3}>
       <Text variant="heading2">Pool rating</Text>
       <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} mt={3}>
         <FieldArray name="poolRatings">
-          {({ push }) => (
+          {({ push, remove }) => (
             <>
               {form.values.poolRatings.map((_, index) => (
                 <>
@@ -32,8 +34,14 @@ export const PoolRatingsSection = () => {
                       <FieldWithErrorMessage
                         {...field}
                         as={TextInput}
-                        label="Rating value"
                         placeholder="Type here..."
+                        label={
+                          <LabelWithDeleteButton
+                            onDelete={() => remove(index)}
+                            hideButton={form.values.poolRatings.length === 1}
+                            label="Rating value"
+                          />
+                        }
                       />
                     )}
                   </Field>
@@ -50,7 +58,7 @@ export const PoolRatingsSection = () => {
                   </Field>
 
                   <Field name={`poolRatings.${index}.reportFile`}>
-                    {({ field, form }: FieldProps) => (
+                    {({ field, form, meta }: FieldProps) => (
                       <FileUpload
                         file={field.value}
                         onFileChange={(file) => {
@@ -61,6 +69,8 @@ export const PoolRatingsSection = () => {
                         label="Executive summary PDF"
                         placeholder="Choose file"
                         small
+                        errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                        onClear={() => form.setFieldValue(`poolRatings.${index}.reportFile`, null)}
                       />
                     )}
                   </Field>