Add new fields [wip]

centrifuge · Sep 17, 2024 · 35bc8e6 · 35bc8e6
1 parent 1181892
commit 35bc8e6
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 0 deletions.
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/CustomCategories.tsx b/centrifuge-app/src/pages/IssuerCreatePool/CustomCategories.tsx
@@ -0,0 +1,133 @@
+import { PoolMetadataInput } from '@centrifuge/centrifuge-js/dist/modules/pools'
+import { Box, Button, NumberInput, Select, Shelf, Stack, Text, TextInput } from '@centrifuge/fabric'
+import { Field, FieldArray, FieldProps, useFormikContext } from 'formik'
+
+const OPTIONS = [
+  { 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 createCategory = () => ({
+  type: '',
+  value: '',
+  customType: '',
+})
+
+export type IssuerDetail = {
+  type?: string
+  value?: string
+  customType?: string
+}
+
+export function CustomCategories() {
+  const fmk = useFormikContext<PoolMetadataInput>()
+  const { values } = fmk
+
+  console.log('FORM', values)
+
+  return (
+    <FieldArray name="issuerCategories">
+      {(fldArr) => (
+        <Stack gap={2}>
+          <Shelf justifyContent="space-between">
+            <Box>
+              <Text as="h3">Issuer profile categories</Text>
+              <Text as="span" variant="body2" color="textSecondary">
+                Add additional information
+              </Text>
+            </Box>
+            <Button
+              variant="secondary"
+              type="button"
+              onClick={() => {
+                fldArr.push(createCategory())
+              }}
+              small
+            >
+              {values.issuerCategories?.length ? 'Add another' : 'Add'}
+            </Button>
+          </Shelf>
+
+          {!!values?.issuerCategories?.length &&
+            values.issuerCategories.map(
+              (category: { type: string; value: string | number; customType?: string }, index: number) => {
+                return (
+                  <Field name={`issuerCategories.${index}.type`} key={index}>
+                    {({ field, meta }: FieldProps) => {
+                      return (
+                        <Shelf gap={2} alignItems="flex-start">
+                          <Box flex="1">
+                            <Select
+                              name={`issuerCategories.${index}.type`}
+                              onChange={(event) => {
+                                const selectedValue = event.target.value
+                                fmk.setFieldValue(`issuerCategories.${index}.type`, selectedValue)
+                                if (selectedValue !== 'other') {
+                                  fmk.setFieldValue(`issuerCategories.${index}.customType`, '')
+                                }
+                              }}
+                              onBlur={field.onBlur}
+                              errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                              value={field.value}
+                              options={OPTIONS}
+                              label="Type"
+                            />
+                          </Box>
+                          {category.type === 'other' && (
+                            <Box flex="1">
+                              <Field
+                                as={TextInput}
+                                name={`issuerCategories.${index}.customType`}
+                                value={category.customType}
+                                label="Custom Type"
+                                onBlur={field.onBlur}
+                                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                                  fmk.setFieldValue(`issuerCategories.${index}.customType`, event.target.value)
+                                }}
+                              />
+                            </Box>
+                          )}
+                          <Box flex="1">
+                            <Field
+                              as={category.type === 'historicalDefaultRate' ? NumberInput : TextInput}
+                              symbol={category.type === 'historicalDefaultRate' ? '%' : undefined}
+                              name={`issuerCategories.${index}.value`}
+                              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                                fmk.setFieldValue(`issuerCategories.${index}.value`, event.target.value)
+                              }}
+                              onBlur={field.onBlur}
+                              value={category.value}
+                              label="Value"
+                            />
+                          </Box>
+                          <Box alignSelf="end" marginLeft="auto">
+                            <Button
+                              type="button"
+                              variant="secondary"
+                              small
+                              onClick={() => {
+                                fldArr.remove(index)
+                              }}
+                            >
+                              Remove
+                            </Button>
+                          </Box>
+                        </Shelf>
+                      )
+                    }}
+                  </Field>
+                )
+              }
+            )}
+        </Stack>
+      )}
+    </FieldArray>
+  )
+}
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/IssuerInput.tsx b/centrifuge-app/src/pages/IssuerCreatePool/IssuerInput.tsx
@@ -3,6 +3,7 @@ import { Field, FieldProps } from 'formik'
 import { FieldWithErrorMessage } from '../../components/FieldWithErrorMessage'
 import { Tooltips } from '../../components/Tooltips'
 import { isTestEnv } from '../../config'
+import { CustomCategories } from './CustomCategories'
 import { CustomDetails } from './CustomDetails'
 import { validate } from './validate'
 
@@ -132,6 +133,9 @@ export function IssuerInput({ waitingForStoredIssuer = false }: Props) {
       <Box gridColumn={['span 1', 'span 2']}>
         <CustomDetails />
       </Box>
+      <Box gridColumn={['span 1', 'span 2']}>
+        <CustomCategories />
+      </Box>
     </Grid>
   )
 }
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
@@ -113,6 +113,7 @@ export type CreatePoolValues = Omit<
   poolType: 'open' | 'closed'
   investorType: string
   issuerShortDescription: string
+  issuerCategories: { type: string; value: string }[]
   ratingAgency: string
   ratingValue: string
   ratingReportUrl: string
@@ -135,6 +136,7 @@ const initialValues: CreatePoolValues = {
   issuerLogo: null,
   issuerDescription: '',
   issuerShortDescription: '',
+  issuerCategories: [],
 
   executiveSummary: null,
   website: '',

diff --git a/centrifuge-app/src/pages/IssuerPool/Configuration/Issuer.tsx b/centrifuge-app/src/pages/IssuerPool/Configuration/Issuer.tsx
@@ -24,6 +24,7 @@ type Values = Pick<
   | 'issuerLogo'
   | 'issuerDescription'
   | 'issuerShortDescription'
+  | 'issuerCategories'
   | 'executiveSummary'
   | 'website'
   | 'forum'
@@ -73,6 +74,7 @@ export function Issuer() {
       ratingAgency: metadata?.pool?.rating?.ratingAgency ?? '',
       ratingValue: metadata?.pool?.rating?.ratingValue ?? '',
       ratingReportUrl: metadata?.pool?.rating?.ratingReportUrl ?? '',
+      issuerCategories: metadata?.pool?.issuerCategories ?? [{ type: '', value: '' }],
     }),
     [metadata, logoFile]
   )

diff --git a/centrifuge-js/src/modules/pools.ts b/centrifuge-js/src/modules/pools.ts
@@ -684,6 +684,7 @@ export interface PoolMetadataInput {
   issuerLogo?: FileType | null
   issuerDescription: string
   issuerShortDescription: string
+  issuerCategories: { type: string; value: string; customType?: string }[]
 
   poolReport?: {
     authorName: string