From c80bf3c08ee51efa886f21287e437805223a738d Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Fri, 15 Nov 2024 15:01:25 +0100
Subject: [PATCH] Add pool setup section UI

---
 .../IssuerCreatePool/PoolDetailsSection.tsx   |  31 +-
 .../IssuerCreatePool/PoolSetupSection.tsx     | 314 ++++++++++++++++++
 .../IssuerCreatePool/PoolStructureSection.tsx |   2 +-
 .../src/pages/IssuerCreatePool/index.tsx      |   9 +-
 .../src/pages/IssuerCreatePool/types.ts       |  11 +-
 fabric/src/components/TextInput/index.tsx     |   6 +-
 6 files changed, 343 insertions(+), 30 deletions(-)
 create mode 100644 centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx

diff --git a/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx b/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx
index de9bd5251d..bb9655b0e6 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx
@@ -18,6 +18,12 @@ import { isTestEnv } from '../../../src/config'
 import { StyledGrid } from './PoolStructureSection'
 import { validate } from './validate'
 
+export const AddButton = () => (
+  <Button variant="secondary" small style={{ width: 163, height: 36 }}>
+    Add another
+  </Button>
+)
+
 const PROVIDERS = [
   { label: 'Fund admin', value: 'fundAdmin' },
   { label: 'Trustee', value: 'trustee' },
@@ -30,11 +36,6 @@ const PROVIDERS = [
   { label: 'Other', value: 'other' },
 ]
 
-export const Line = () => {
-  const theme = useTheme()
-  return <Box border={`.5px solid ${theme.colors.borderPrimary}`} width="100%" />
-}
-
 export const PoolDetailsSection = () => {
   const theme = useTheme()
   const form = useFormikContext<PoolMetadataInput>()
@@ -125,7 +126,7 @@ export const PoolDetailsSection = () => {
       </StyledGrid>
 
       <Box mt={4} mb={3}>
-        <Text>Issuer</Text>
+        <Text variant="heading2">Issuer</Text>
         <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={3}>
           <Grid gap={2}>
             <Field name="issuerName" validate={validate.issuerName}>
@@ -291,7 +292,7 @@ export const PoolDetailsSection = () => {
         </StyledGrid>
       </Box>
       <Box mt={4} mb={3}>
-        <Text>Service Providers</Text>
+        <Text variant="heading2">Service providers</Text>
         <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={3}>
           <Field name="assetClass" validate={validate.assetClass}>
             {({ field, meta, form }: FieldProps) => (
@@ -321,15 +322,11 @@ export const PoolDetailsSection = () => {
               />
             )}
           </Field>
-          <Box width="163px">
-            <Button variant="secondary" small>
-              Add another
-            </Button>
-          </Box>
+          <AddButton />
         </StyledGrid>
       </Box>
       <Box mt={4} mb={3}>
-        <Text>Pool rating</Text>
+        <Text variant="heading2">Pool rating</Text>
         <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={3}>
           <Field name="poolName" validate={validate.poolName}>
             {({ field, meta, form }: FieldProps) => (
@@ -366,15 +363,11 @@ export const PoolDetailsSection = () => {
               />
             )}
           </Field>
-          <Box width="163px">
-            <Button variant="secondary" small>
-              Add another
-            </Button>
-          </Box>
+          <AddButton />
         </StyledGrid>
       </Box>
       <Box mt={4} mb={3}>
-        <Text>Pool analysis</Text>
+        <Text variant="heading2">Service analysis</Text>
         <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={3}>
           <Field name="poolName" validate={validate.poolName}>
             {({ field, meta, form }: FieldProps) => (
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx b/centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx
new file mode 100644
index 0000000000..92dd2f95fe
--- /dev/null
+++ b/centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx
@@ -0,0 +1,314 @@
+import { PoolMetadataInput } from '@centrifuge/centrifuge-js'
+import {
+  Box,
+  Button,
+  Checkbox,
+  FileUpload,
+  Grid,
+  IconButton,
+  IconHelpCircle,
+  IconInfo,
+  IconTrash,
+  NumberInput,
+  Select,
+  Text,
+  TextInput,
+} from '@centrifuge/fabric'
+import { Field, FieldProps, useFormikContext } from 'formik'
+import { useTheme } from 'styled-components'
+import { FieldWithErrorMessage } from '../../../src/components/FieldWithErrorMessage'
+import { Tooltips } from '../../../src/components/Tooltips'
+import { feeCategories, isTestEnv } from '../../../src/config'
+import { AddButton } from './PoolDetailsSection'
+import { CheckboxOption, Line, StyledGrid } from './PoolStructureSection'
+
+const MAX_FEES = 5
+
+const FEE_TYPES = [
+  { label: 'Direct charge', value: 'chargedUpTo' },
+  { label: 'Fixed %', value: 'fixed' },
+]
+
+const FEE_POSISTIONS = [{ label: 'Top of waterfall', value: 'Top of waterfall' }]
+
+export const PoolSetupSection = () => {
+  const theme = useTheme()
+  const form = useFormikContext<PoolMetadataInput>()
+  const { values } = form
+  const createLabel = (label: string) => `${label}${isTestEnv ? '' : '*'}`
+
+  return (
+    <Box>
+      <Box display="flex" justifyContent="space-between" alignItems="center">
+        <Text variant="heading2" fontWeight={700}>
+          Management setup
+        </Text>
+        <Button small style={{ width: 163 }}>
+          Disable
+        </Button>
+      </Box>
+
+      <Box mt={4} mb={3}>
+        <Text variant="heading2">Pool managers*</Text>
+        <Text variant="body2" color="textSecondary">
+          Pool managers can individually add/block investors and manage the liquidity reserve of the pool.
+        </Text>
+        <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={3}>
+          <Box>
+            <Text variant="body2">Security requirement</Text>
+            <CheckboxOption
+              height={44}
+              name="securityRequirement"
+              label="Single"
+              value="single"
+              icon={<IconHelpCircle size="iconSmall" color={theme.colors.textSecondary} />}
+            />
+            <CheckboxOption
+              height={44}
+              name="securityRequirement"
+              label="Multi-sig"
+              value="multi"
+              icon={<IconHelpCircle size="iconSmall" color={theme.colors.textSecondary} />}
+            />
+          </Box>
+          <Grid gap={2}>
+            <Text variant="body2">Wallet addresses</Text>
+            <Field name="walletAddress">
+              {({ field, form }: FieldProps) => <TextInput placeholder="Type here..." {...field} />}
+            </Field>
+            <Field name="walletAddress">
+              {({ field, form }: FieldProps) => <TextInput placeholder="Type here..." {...field} />}
+            </Field>
+          </Grid>
+        </StyledGrid>
+      </Box>
+      <Box mt={2} mb={2}>
+        <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={3}>
+          <Field name="subAssetClass">
+            {({ field, meta, form }: FieldProps) => (
+              <Select
+                name="subAssetClass"
+                label="Configuration change threshold (1 out of 2 managers)"
+                onChange={(event) => form.setFieldValue('subAssetClass', event.target.value)}
+                onBlur={field.onBlur}
+                errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                value={field.value}
+                options={[{ value: '1', label: 1 }]}
+                placeholder="Select..."
+              />
+            )}
+          </Field>
+          <Grid display="flex" gap={1}>
+            <IconInfo size="iconSmall" color={theme.colors.textSecondary} />
+            <Text color="textSecondary" variant="body2">
+              For added security, changes to the pool configuration (e.g., tranche structure or write-off policy) may
+              require multiple signers and confirmation from the above.
+            </Text>
+          </Grid>
+        </StyledGrid>
+      </Box>
+
+      <Box mt={4} mb={3}>
+        <Text variant="heading2">Pool delegates</Text>
+        <Text variant="body2" color="textSecondary">
+          Pool managers can authorize additional addresses to perform designated pool actions.
+        </Text>
+        <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={3}>
+          <Grid>
+            <Text color="textSecondary" variant="body3">
+              Add or remove addresses that can:
+            </Text>
+            <Field name="walletAddress">
+              {({ field, form }: FieldProps) => (
+                <TextInput label="Originate assets and invest in the pool*" placeholder="Type address..." {...field} />
+              )}
+            </Field>
+          </Grid>
+          <Box display="flex" alignItems="flex-end" justifyContent="flex-end">
+            <AddButton />
+          </Box>
+        </StyledGrid>
+      </Box>
+
+      <Box mt={4} mb={3}>
+        <Text variant="heading2">Fee setup</Text>
+        <StyledGrid mt={3} gap={1}>
+          <Text variant="heading3">Protocol fees</Text>
+          <Line />
+          <Grid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3}>
+            <Field
+              as={TextInput}
+              name={`poolFees.${1}.position`}
+              value="Top of waterfall"
+              disabled
+              label={<Tooltips type="feePosition" label={<Text variant="heading4">Fee position</Text>} />}
+            />
+            <Field
+              as={TextInput}
+              name={`poolFees.${1}.type`}
+              value="Fixed"
+              disabled
+              label={<Tooltips type="feeType" label={<Text variant="heading4">Fee type</Text>} />}
+            />
+            <Field
+              as={NumberInput}
+              label={<Text variant="heading4">Fees in % of NAV</Text>}
+              symbol="%"
+              name={`poolFees.${1}.percentOfNav`}
+              value="0.4"
+              disabled
+            />
+            <Field
+              as={TextInput}
+              name={`poolFees.${1}.walletAddress`}
+              value="Centrifuge treasury"
+              disabled
+              label={<Text variant="heading4">Wallet address</Text>}
+            />
+          </Grid>
+        </StyledGrid>
+      </Box>
+
+      {values.poolFees.map((s, index) => (
+        <Box mt={4} mb={3}>
+          <StyledGrid mt={3} gap={1}>
+            <Box display="flex" justifyContent="space-between" alignItems="center">
+              <Text variant="heading3">Pool fees {index + 1}</Text>
+              <IconButton>
+                <IconTrash color="textSecondary" />
+              </IconButton>
+            </Box>
+            <Line />
+            <Grid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3}>
+              <FieldWithErrorMessage
+                as={TextInput}
+                label="Name"
+                maxLength={30}
+                name={`poolFees.${index}.name`}
+                key={index}
+                placeholder="Type here..."
+              />
+              <Field name={`poolFees.${index}.category`}>
+                {({ field, form, meta }: FieldProps) => (
+                  <Select
+                    name="category"
+                    label="Category"
+                    onChange={(event) => form.setFieldValue(`poolFees.${index}.category`, event.target.value)}
+                    onBlur={field.onBlur}
+                    errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                    value={field.value}
+                    options={feeCategories.map((cat) => ({ label: cat, value: cat }))}
+                  />
+                )}
+              </Field>
+              <Field name={`poolFees.${index}.feePosition`}>
+                {({ field, meta }: FieldProps) => {
+                  return (
+                    <Select
+                      label="Fee position"
+                      name={`poolFees.${index}.feePosition`}
+                      onChange={(event) => {
+                        form.setFieldValue(`poolFees.${index}.feePosition`, event.target.value)
+                      }}
+                      onBlur={field.onBlur}
+                      errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                      value={field.value}
+                      options={FEE_POSISTIONS}
+                    />
+                  )
+                }}
+              </Field>
+
+              <Field name={`poolFees.${index}.feeType`}>
+                {({ field, meta }: FieldProps) => {
+                  return (
+                    <Select
+                      label="Fee type"
+                      name={`poolFees.${index}.feeType`}
+                      onChange={(event) => {
+                        form.setFieldValue(`poolFees.${index}.feeType`, event.target.value)
+                      }}
+                      onBlur={field.onBlur}
+                      errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                      value={field.value}
+                      options={FEE_TYPES}
+                    />
+                  )
+                }}
+              </Field>
+              <FieldWithErrorMessage
+                as={NumberInput}
+                label="Max fees in % of NAV"
+                symbol="%"
+                name={`poolFees.${index}.percentOfNav`}
+                placeholder="Type here..."
+              />
+              <FieldWithErrorMessage
+                as={TextInput}
+                label="Wallet address"
+                name={`poolFees.${index}.walletAddress`}
+                placeholder="Type here..."
+              />
+            </Grid>
+          </StyledGrid>
+        </Box>
+      ))}
+
+      <Box alignSelf="flex-end" mt={3} mb={3} display="flex" justifyContent="flex-end">
+        <AddButton />
+      </Box>
+
+      <Box mt={4} mb={3}>
+        <Text variant="heading2">Investor onboarding</Text>
+        <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={3}>
+          <Box>
+            <Text variant="heading4">Onboarding experience</Text>
+            <CheckboxOption
+              height={44}
+              name="centrifuge"
+              label="Centrifuge onboarding"
+              value="centrifuge"
+              icon={<IconHelpCircle size="iconSmall" color={theme.colors.textSecondary} />}
+            />
+            <CheckboxOption
+              height={44}
+              name="external"
+              label="External"
+              value="external"
+              icon={<IconHelpCircle size="iconSmall" color={theme.colors.textSecondary} />}
+            />
+            <CheckboxOption
+              height={44}
+              name="none"
+              label="None"
+              value="none"
+              icon={<IconHelpCircle size="iconSmall" color={theme.colors.textSecondary} />}
+            />
+          </Box>
+          <Box>
+            <Field name="subscriptionDocuments">
+              {({ field, meta, form }: FieldProps) => (
+                <FileUpload
+                  name="subscriptionDocuments"
+                  file={field.value}
+                  onFileChange={async (file) => {
+                    form.setFieldTouched('poolIcon', true, false)
+                    form.setFieldValue('poolIcon', file)
+                  }}
+                  label="Click to upload"
+                  errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                  accept="application/pdf"
+                  small
+                />
+              )}
+            </Field>
+            <Box mt={8}>
+              <Text variant="heading4">Tax document requirement</Text>
+              <Checkbox label="Require investors to upload tax documents before signing the subscription agreement." />
+            </Box>
+          </Box>
+        </StyledGrid>
+      </Box>
+    </Box>
+  )
+}
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx b/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx
index 73bb434a43..49a69ca121 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx
@@ -48,7 +48,7 @@ const ASSET_CLASSES = Object.keys(config.assetClasses).map((key) => ({
   value: key,
 }))
 
-const CheckboxOption = ({
+export const CheckboxOption = ({
   name,
   label,
   value,
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
index 6615b99884..9a3330802c 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
@@ -4,6 +4,7 @@ import { useRef, useState } from 'react'
 import styled, { useTheme } from 'styled-components'
 import { useIsAboveBreakpoint } from '../../../src/utils/useIsAboveBreakpoint'
 import { PoolDetailsSection } from './PoolDetailsSection'
+import { PoolSetupSection } from './PoolSetupSection'
 import { Line, PoolStructureSection } from './PoolStructureSection'
 import { initialValues } from './types'
 import { validateValues } from './validate'
@@ -15,15 +16,11 @@ const StyledBox = styled(Box)`
   }
 `
 
-const PoolSetup = () => {
-  return <div></div>
-}
-
 const IssuerCreatePoolPage = () => {
   const theme = useTheme()
   const formRef = useRef<HTMLFormElement>(null)
   const isSmall = useIsAboveBreakpoint('S')
-  const [step, setStep] = useState(2)
+  const [step, setStep] = useState(1)
 
   const form = useFormik({
     initialValues: initialValues,
@@ -65,7 +62,7 @@ const IssuerCreatePoolPage = () => {
           <StyledBox padding="48px 80px 0px 80px">
             {step === 1 && <PoolStructureSection />}
             {step === 2 && <PoolDetailsSection />}
-            {step === 3 && <PoolSetup />}
+            {step === 3 && <PoolSetupSection />}
             <Line />
             <Box display="flex" justifyContent="flex-end" mt={2} mb={4}>
               {step !== 1 && (
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/types.ts b/centrifuge-app/src/pages/IssuerCreatePool/types.ts
index 4501a18263..65212c90d1 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/types.ts
+++ b/centrifuge-app/src/pages/IssuerCreatePool/types.ts
@@ -24,6 +24,15 @@ export const createEmptyTranche = (trancheName: string): Tranche => ({
   apy: '90d',
 })
 
+export const createPoolFee = () => ({
+  name: '',
+  category: '',
+  feePosition: '',
+  feeType: '',
+  percentOfNav: '',
+  walletAddress: '',
+})
+
 export type CreatePoolValues = Omit<
   PoolMetadataInput,
   'poolIcon' | 'issuerLogo' | 'executiveSummary' | 'adminMultisig' | 'poolFees' | 'poolReport' | 'poolRatings'
@@ -105,6 +114,6 @@ export const initialValues: CreatePoolValues = {
     threshold: 1,
   },
   adminMultisigEnabled: false,
-  poolFees: [],
+  poolFees: [createPoolFee()],
   poolType: 'open',
 }
diff --git a/fabric/src/components/TextInput/index.tsx b/fabric/src/components/TextInput/index.tsx
index 51fc2598b6..926af407a1 100644
--- a/fabric/src/components/TextInput/index.tsx
+++ b/fabric/src/components/TextInput/index.tsx
@@ -52,10 +52,10 @@ export const StyledTextInput = styled.input`
     margin: 0;
   }
 `
-export const StyledInputBox = styled(Shelf)<{ hideBorder?: boolean }>`
+export const StyledInputBox = styled(Shelf)<{ hideBorder?: boolean; disabled?: boolean }>`
   width: 100%;
   position: relative;
-  background: ${({ theme }) => theme.colors.backgroundPage};
+  background: ${({ theme, disabled }) => (disabled ? 'transparent' : theme.colors.backgroundPage)};
   border: ${({ hideBorder, theme }) => (hideBorder ? 'none' : `1px solid ${theme.colors.borderPrimary}`)};
   border-radius: ${({ hideBorder, theme }) => (hideBorder ? 'none' : `${theme.radii.input}px`)};
 
@@ -121,7 +121,7 @@ export function TextInputBox(
 ) {
   const { error, disabled, action, symbol, inputRef, inputElement, row, ...inputProps } = props
   return (
-    <StyledInputBox hideBorder={!!row} alignItems="stretch" height="input">
+    <StyledInputBox hideBorder={!!row} alignItems="stretch" height="input" disabled={disabled}>
       {inputElement ?? <StyledTextInput disabled={disabled} {...inputProps} id={useContextId()} ref={inputRef} />}
       {symbol && (
         <Flex alignSelf="center" pr={1}>