Add pool structure checkboxes

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

@@ -0,0 +1,121 @@
+import { Box, Checkbox, Grid, IconHelpCircle, Text } from '@centrifuge/fabric'
+import { Field, FieldProps } from 'formik'
+import { useTheme } from 'styled-components'
+import { validate } from './validate'
+
+const CheckboxOption = ({
+  name,
+  label,
+  value,
+  disabled = false,
+  icon,
+  sublabel,
+}: {
+  name: string
+  label: string
+  sublabel?: string
+  value: string | number
+  disabled?: boolean
+  icon?: React.ReactNode
+}) => {
+  const theme = useTheme()
+  return (
+    <Box
+      backgroundColor="white"
+      px={2}
+      py="6px"
+      borderRadius={8}
+      mt={2}
+      border={`1px solid ${theme.colors.borderPrimary}`}
+      display="flex"
+      flexDirection={icon ? 'row' : 'column'}
+      justifyContent={icon ? 'space-between' : 'flex-start'}
+      height={icon ? 63 : null}
+      alignItems={icon ? 'center' : 'flex-start'}
+    >
+      <Field name={name} validate={validate[name]}>
+        {({ field, form, meta }: FieldProps) => (
+          <Checkbox
+            {...field}
+            errorMessage={meta.touched && meta.error ? meta.error : undefined}
+            label={label}
+            value={value}
+            disabled={disabled}
+            onChange={(val) => form.setFieldValue(name, val.target.checked ? value : '')}
+          />
+        )}
+      </Field>
+      {icon && <Box ml={3}>{icon}</Box>}
+      {sublabel && (
+        <Text variant="body2" color="textSecondary" style={{ marginLeft: 26, lineHeight: 'normal' }}>
+          {sublabel}
+        </Text>
+      )}
+    </Box>
+  )
+}
+
+export const PoolStructureSection = () => {
+  const theme = useTheme()
+
+  return (
+    <div>
+      <Text variant="heading2" fontWeight={700}>
+        Pool Structure
+      </Text>
+      <Grid
+        backgroundColor={theme.colors.backgroundSecondary}
+        padding={4}
+        border={`1px solid ${theme.colors.borderPrimary}`}
+        mt={24}
+        borderRadius={8}
+        gridTemplateColumns={['1fr', '1fr 1fr']}
+        gap={3}
+      >
+        <Box>
+          <Text variant="body2">Pool type *</Text>
+
+          <CheckboxOption
+            name="poolStructure"
+            label="Revolving pool"
+            value="revolving"
+            sublabel="Dynamic and flexible pools that allow continuous inflows and outflows of assets. Investors can add or withdraw funds at any time, and the pool remains active indefinitely."
+          />
+
+          <CheckboxOption
+            name="poolStructure"
+            label="Static pool (coming soon)"
+            value="static"
+            disabled
+            sublabel="Fixed pool of assets where funds remain locked. There are no continuous inflows or outflows during the investment period, and the pool has a defined maturity date."
+          />
+        </Box>
+
+        <Box>
+          <Text variant="body2">Define tranche structure *</Text>
+
+          <CheckboxOption
+            name="trancheStructure"
+            label="Single tranche"
+            value={1}
+            icon={<IconHelpCircle size="iconSmall" color={theme.colors.textSecondary} />}
+          />
+
+          <CheckboxOption
+            name="trancheStructure"
+            label="Two tranches"
+            value={2}
+            icon={<IconHelpCircle size="iconSmall" color={theme.colors.textSecondary} />}
+          />
+
+          <CheckboxOption
+            name="trancheStructure"
+            label="Three tranches"
+            value={3}
+            icon={<IconHelpCircle size="iconSmall" color={theme.colors.textSecondary} />}
+          />
+        </Box>
+      </Grid>
+    </div>
+  )
+}

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

@@ -12,10 +12,10 @@ import {
 } from '@centrifuge/fabric'
 import { Field, FieldArray, FieldProps, useFormikContext } from 'formik'
 import * as React from 'react'
-import { createEmptyTranche } from '.'
 import { FieldWithErrorMessage } from '../../components/FieldWithErrorMessage'
 import { PageSection } from '../../components/PageSection'
 import { Tooltips } from '../../components/Tooltips'
+import { createEmptyTranche } from './types'
 import { validate } from './validate'
 
 const MAX_TRANCHES = 3