FIXUP

centrifuge-app/src/components/FieldWithErrorMessage.tsx

@@ -1,11 +1,35 @@
-import { Field, FieldAttributes, useField } from 'formik'
+import { Box, URLInput } from '@centrifuge/fabric'
+import { Field, FieldAttributes, useField, useFormikContext } from 'formik'
 import * as React from 'react'
 
 type Props = FieldAttributes<any> & {
   label?: string | React.ReactElement
+  prefix?: string
+  isUrl?: boolean
 }
 
 export function FieldWithErrorMessage(props: Props) {
-  const [, meta] = useField(props)
-  return <Field errorMessage={meta.touched ? meta.error : undefined} {...props} />
+  const [field, meta] = useField(props)
+  const form = useFormikContext()
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    form.setFieldValue(field.name, event.target.value)
+  }
+
+  return props.isUrl ? (
+    <Box>
+      <URLInput
+        label={props.label}
+        prefix={props.prefix}
+        value={field.value}
+        onChange={handleChange}
+        name={field.name}
+        placeholder={props.placeholder}
+        disabled={props.disabled}
+        errorMessage={meta.touched && meta.error ? meta.error : undefined}
+      />
+    </Box>
+  ) : (
+    <Field errorMessage={meta.touched ? meta.error : undefined} {...props} />
+  )
 }

centrifuge-app/src/components/LoanList.tsx

@@ -279,6 +279,7 @@ export function LoanList({ loans, snapshots }: Props) {
                 </Text>
               }
               onChange={(e) => setShowRepaid(!showRepaid)}
+              variant="square"
             />
           </Box>
           <Button

centrifuge-app/src/pages/IssuerCreatePool/IssuerCategories.tsx

@@ -0,0 +1,76 @@
+import { PoolMetadataInput } from '@centrifuge/centrifuge-js'
+import { Box, IconButton, IconTrash, Select, Text, TextInput } from '@centrifuge/fabric'
+import { Field, FieldArray, FieldProps, useFormikContext } from 'formik'
+import { AddButton } from './PoolDetailsSection'
+import { StyledGrid } from './PoolStructureSection'
+
+const PROVIDERS = [
+  { label: 'Fund admin', value: 'fundAdmin' },
+  { label: 'Trustee', value: 'trustee' },
+  { label: 'Pricing oracle provider', value: 'pricingOracleProvider' },
+  { label: 'Auditor', value: 'auditor' },
+  { label: 'Custodian', value: 'custodian' },
+  { label: 'Investment manager', value: 'Investment manager' },
+  { label: 'Sub-advisor', value: 'subadvisor' },
+  { label: 'Historical default rate', value: 'historicalDefaultRate' },
+  { label: 'Other', value: 'other' },
+]
+
+const LabelWithDeleteButton = ({ onDelete }: { onDelete: () => void }) => {
+  return (
+    <Box display="flex" justifyContent="space-between" alignItems="center">
+      <Text variant="heading4">Name of provider</Text>
+      <IconButton onClick={onDelete}>
+        <IconTrash color="textSecondary" />
+      </IconButton>
+    </Box>
+  )
+}
+
+export const IssuerCategoriesSection = () => {
+  const form = useFormikContext<PoolMetadataInput>()
+  return (
+    <Box mt={4} mb={3}>
+      <Text variant="heading2">Service providers</Text>
+      <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} mt={3}>
+        <FieldArray name="issuerCategories">
+          {({ push, remove }) => (
+            <>
+              {form.values.issuerCategories.map((_, index) => (
+                <>
+                  <Field name={`issuerCategories.${index}.type`}>
+                    {({ field, meta }: FieldProps) => (
+                      <Select
+                        name={field.name}
+                        label="Type"
+                        onChange={(event) => form.setFieldValue(field.name, event.target.value)}
+                        onBlur={field.onBlur}
+                        value={field.value}
+                        options={PROVIDERS}
+                        placeholder="Please select..."
+                      />
+                    )}
+                  </Field>
+
+                  <Field name={`issuerCategories.${index}.value`}>
+                    {({ field, meta }: FieldProps) => (
+                      <TextInput
+                        {...field}
+                        label={<LabelWithDeleteButton onDelete={() => remove(index)} />}
+                        placeholder="Type here..."
+                        maxLength={100}
+                      />
+                    )}
+                  </Field>
+                </>
+              ))}
+              <Box gridColumn="span 2">
+                <AddButton onClick={() => push({ type: '', value: '' })} />
+              </Box>
+            </>
+          )}
+        </FieldArray>
+      </StyledGrid>
+    </Box>
+  )
+}