From 45db2a94dfabd39f80c617ae184d714c61c5de5e Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Thu, 21 Nov 2024 10:49:49 +0100
Subject: [PATCH] FIXUP

---
 .../src/components/FieldWithErrorMessage.tsx  |  30 +-
 centrifuge-app/src/components/LoanList.tsx    |   1 +
 .../IssuerCreatePool/IssuerCategories.tsx     |  76 +++++
 .../IssuerCreatePool/PoolDetailsSection.tsx   | 280 ++++++------------
 .../pages/IssuerCreatePool/PoolRatings.tsx    |  80 +++++
 .../IssuerCreatePool/PoolStructureSection.tsx |   4 +-
 .../src/pages/IssuerCreatePool/index.tsx      |  48 ++-
 .../src/pages/IssuerCreatePool/types.ts       |  27 +-
 centrifuge-js/src/modules/pools.ts            |  32 +-
 fabric/src/components/Checkbox/index.tsx      |  86 +++---
 fabric/src/components/Stepper/index.tsx       |  10 +-
 fabric/src/components/TextInput/index.tsx     |  51 +++-
 12 files changed, 444 insertions(+), 281 deletions(-)
 create mode 100644 centrifuge-app/src/pages/IssuerCreatePool/IssuerCategories.tsx
 create mode 100644 centrifuge-app/src/pages/IssuerCreatePool/PoolRatings.tsx

diff --git a/centrifuge-app/src/components/FieldWithErrorMessage.tsx b/centrifuge-app/src/components/FieldWithErrorMessage.tsx
index eef59b73ef..6490da9328 100644
--- a/centrifuge-app/src/components/FieldWithErrorMessage.tsx
+++ b/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} />
+  )
 }
diff --git a/centrifuge-app/src/components/LoanList.tsx b/centrifuge-app/src/components/LoanList.tsx
index 711103b6d4..76795dd699 100644
--- a/centrifuge-app/src/components/LoanList.tsx
+++ b/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
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/IssuerCategories.tsx b/centrifuge-app/src/pages/IssuerCreatePool/IssuerCategories.tsx
new file mode 100644
index 0000000000..09b981e850
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx b/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx
index bb9655b0e6..7975d4fa94 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx
@@ -15,32 +15,24 @@ import { useTheme } from 'styled-components'
 import { FieldWithErrorMessage } from '../../../src/components/FieldWithErrorMessage'
 import { Tooltips } from '../../../src/components/Tooltips'
 import { isTestEnv } from '../../../src/config'
+import { IssuerCategoriesSection } from './IssuerCategories'
+import { PoolRatingsSection } from './PoolRatings'
 import { StyledGrid } from './PoolStructureSection'
 import { validate } from './validate'
 
-export const AddButton = () => (
-  <Button variant="secondary" small style={{ width: 163, height: 36 }}>
+export const AddButton = ({ onClick }: { onClick: () => void }) => (
+  <Button variant="secondary" small style={{ width: 163, height: 36 }} onClick={onClick}>
     Add another
   </Button>
 )
 
-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' },
-]
-
 export const PoolDetailsSection = () => {
   const theme = useTheme()
   const form = useFormikContext<PoolMetadataInput>()
   const createLabel = (label: string) => `${label}${isTestEnv ? '' : '*'}`
 
+  console.log(form.values)
+
   return (
     <Box>
       <Text variant="heading2" fontWeight={700}>
@@ -48,17 +40,15 @@ export const PoolDetailsSection = () => {
       </Text>
       <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={2}>
         <Grid gap={2}>
-          <Field name="poolName" validate={validate.poolName}>
-            {({ field, meta, form }: FieldProps) => (
-              <FieldWithErrorMessage
-                name="poolName"
-                as={TextInput}
-                label="Pool name*"
-                placeholder="Type here..."
-                maxLength={100}
-              />
-            )}
-          </Field>
+          <FieldWithErrorMessage
+            name="poolName"
+            as={TextInput}
+            label="Pool name*"
+            placeholder="Type here..."
+            maxLength={100}
+            validate={validate.poolName}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => form.setFieldValue('poolName', e.target.value)}
+          />
           <Field name="poolIcon" validate={validate.poolIcon}>
             {({ field, meta, form }: FieldProps) => (
               <FileUpload
@@ -90,6 +80,7 @@ export const PoolDetailsSection = () => {
                 value={field.value}
                 as={TextInput}
                 placeholder="Type here..."
+                maxLength={30}
               />
             )}
           </Field>
@@ -146,14 +137,11 @@ export const PoolDetailsSection = () => {
                 />
               )}
             </Field>
-            <Field name="issuerLogo" validate={validate.issuerLogo}>
+            <Field name="issuerLogo">
               {({ field, meta, form }: FieldProps) => (
                 <FileUpload
                   file={field.value}
-                  onFileChange={(file) => {
-                    form.setFieldTouched('issuerLogo', true, false)
-                    form.setFieldValue('issuerLogo', file)
-                  }}
+                  onFileChange={(file) => form.setFieldValue('issuerLogo', file)}
                   accept="image/*"
                   fileTypeText="SVG, PNG, or JPG (max. 1MB; 480x480px)"
                   label="Issuer logo"
@@ -162,7 +150,7 @@ export const PoolDetailsSection = () => {
             </Field>
           </Grid>
           <Grid gap={2}>
-            <Field name="issuerRepName" validate={validate.issuerName}>
+            <Field name="issuerRepName">
               {({ field, meta, form }: FieldProps) => (
                 <FieldWithErrorMessage
                   name="issuerRepName"
@@ -173,8 +161,6 @@ export const PoolDetailsSection = () => {
                     />
                   }
                   onChange={(event: any) => form.setFieldValue('issuerRepName', event.target.value)}
-                  onBlur={field.onBlur}
-                  errorMessage={meta.touched && meta.error ? meta.error : undefined}
                   value={field.value}
                   as={TextInput}
                   placeholder="Type here..."
@@ -199,7 +185,7 @@ export const PoolDetailsSection = () => {
             </Field>
           </Grid>
           <Box gridColumn="span 2">
-            <Field name="issuerShortDescription" validate={!isTestEnv && validate.issuerDescription}>
+            <Field name="issuerDescription" validate={!isTestEnv && validate.issuerDescription}>
               {({ field, meta, form }: FieldProps) => (
                 <FieldWithErrorMessage
                   validate={!isTestEnv && validate.issuerDescription}
@@ -215,37 +201,27 @@ export const PoolDetailsSection = () => {
             </Field>
           </Box>
           <Grid gap={2}>
-            <Field name="website" validate={!isTestEnv && validate.website}>
-              {({ field, meta, form }: FieldProps) => (
-                <FieldWithErrorMessage
-                  name="website"
-                  as={TextInput}
-                  label="Website URL"
-                  placeholder="https://www.example.com"
-                />
-              )}
-            </Field>
-            <Field name="forum" validate={validate.forum}>
-              {({ field, meta, form }: FieldProps) => (
-                <FieldWithErrorMessage
-                  name="forum"
-                  as={TextInput}
-                  label="Governance forum"
-                  placeholder="https://www.example.com"
-                />
-              )}
-            </Field>
-            <Field name="email" validate={!isTestEnv && validate.email}>
-              {({ field, meta, form }: FieldProps) => (
-                <FieldWithErrorMessage
-                  name="email"
-                  as={TextInput}
-                  label={createLabel('Email')}
-                  placeholder="Type here..."
-                />
-              )}
-            </Field>
-            <Field name="executiveSummary" validate={!isTestEnv && validate.executiveSummary}>
+            <FieldWithErrorMessage
+              name="website"
+              as={TextInput}
+              label="Website URL"
+              placeholder="www.example.com"
+              isUrl
+            />
+            <FieldWithErrorMessage
+              name="forum"
+              as={TextInput}
+              label="Governance forum"
+              placeholder="www.example.com"
+              isUrl
+            />
+            <FieldWithErrorMessage
+              name="email"
+              as={TextInput}
+              label={createLabel('Email')}
+              placeholder="Type here..."
+            />
+            <Field name="executiveSummary">
               {({ field, meta, form }: FieldProps) => (
                 <FileUpload
                   file={field.value}
@@ -262,140 +238,68 @@ export const PoolDetailsSection = () => {
             </Field>
           </Grid>
           <Grid gap={2}>
-            <Field name="additionalInformation">
-              {({ field, meta, form }: FieldProps) => (
-                <FieldWithErrorMessage
-                  name="additionalInformation"
-                  as={TextInput}
-                  label="Additional information"
-                  placeholder="Title"
-                />
-              )}
-            </Field>
-            <Field name="issuerShortDescription">
-              {({ field, meta, form }: FieldProps) => (
-                <Box display="flex" flexDirection="column">
-                  <FieldWithErrorMessage
-                    name="issuerDescription"
-                    as={TextAreaInput}
-                    placeholder="Description"
-                    maxLength={3000}
-                    style={{ height: '220px' }}
-                  />
-                  <Text variant="body3" style={{ marginTop: 4 }}>
-                    (Max 3000 characters)
-                  </Text>
-                </Box>
-              )}
-            </Field>
-          </Grid>
-        </StyledGrid>
-      </Box>
-      <Box mt={4} mb={3}>
-        <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) => (
-              <Select
-                name="assetClass"
-                label="Type"
-                onChange={(event) => {
-                  form.setFieldValue('assetClass', event.target.value)
-                  form.setFieldValue('subAssetClass', '', false)
-                }}
-                onBlur={field.onBlur}
-                errorMessage={meta.touched && meta.error ? meta.error : undefined}
-                value={field.value}
-                options={PROVIDERS}
-                placeholder="Please select..."
-              />
-            )}
-          </Field>
-          <Field name="poolName" validate={validate.poolName}>
-            {({ field, meta, form }: FieldProps) => (
+            <FieldWithErrorMessage
+              name="details.title"
+              as={TextInput}
+              label="Additional information"
+              placeholder="Title"
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                form.setFieldValue('details', {
+                  ...form.values.details,
+                  title: e.target.value,
+                })
+              }
+            />
+            <Box display="flex" flexDirection="column">
               <FieldWithErrorMessage
-                name="poolName"
-                as={TextInput}
-                label="Name of provider"
-                placeholder="Type here..."
-                maxLength={100}
-              />
-            )}
-          </Field>
-          <AddButton />
-        </StyledGrid>
-      </Box>
-      <Box mt={4} mb={3}>
-        <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) => (
-              <FieldWithErrorMessage name="poolName" as={TextInput} label="Rating agency" placeholder="Type here..." />
-            )}
-          </Field>
-          <Field name="poolName" validate={validate.poolName}>
-            {({ field, meta, form }: FieldProps) => (
-              <FieldWithErrorMessage name="poolName" as={TextInput} label="Rating value" placeholder="Type here..." />
-            )}
-          </Field>
-          <Field name="poolName" validate={validate.poolName}>
-            {({ field, meta, form }: FieldProps) => (
-              <FieldWithErrorMessage
-                name="poolName"
-                as={TextInput}
-                label="Rating report URL"
-                placeholder="Type here..."
-              />
-            )}
-          </Field>
-          <Field name="executiveSummary" validate={!isTestEnv && validate.executiveSummary}>
-            {({ field, meta, form }: FieldProps) => (
-              <FileUpload
-                file={field.value}
-                onFileChange={(file) => {
-                  form.setFieldTouched('executiveSummary', true, false)
-                  form.setFieldValue('executiveSummary', file)
-                }}
-                accept="application/pdf"
-                label={createLabel('Executive summary PDF')}
-                placeholder="Choose file"
-                small
+                name="details.body"
+                as={TextAreaInput}
+                placeholder="Description"
+                maxLength={3000}
+                style={{ height: '220px' }}
+                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                  form.setFieldValue('details', {
+                    ...form.values.details,
+                    body: e.target.value,
+                  })
+                }
               />
-            )}
-          </Field>
-          <AddButton />
+              <Text variant="body3" style={{ marginTop: 4 }}>
+                (Max 3000 characters)
+              </Text>
+            </Box>
+          </Grid>
         </StyledGrid>
       </Box>
+      {/* service providers section */}
+      <IssuerCategoriesSection />
+
+      {/* pool ratings section */}
+      <PoolRatingsSection />
+
       <Box mt={4} mb={3}>
         <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) => (
-              <FieldWithErrorMessage name="poolName" as={TextInput} label="Report URL" placeholder="Type here..." />
-            )}
-          </Field>
-          <Field name="poolName" validate={validate.poolName}>
-            {({ field, meta, form }: FieldProps) => (
-              <FieldWithErrorMessage name="poolName" as={TextInput} label="Rewiewer name" placeholder="Type here..." />
-            )}
-          </Field>
-          <Field name="poolName" validate={validate.poolName}>
-            {({ field, meta, form }: FieldProps) => (
-              <FieldWithErrorMessage
-                name="poolName"
-                as={TextInput}
-                label="Rewiewer job title"
-                placeholder="Type here..."
-              />
-            )}
-          </Field>
-          <Field name="executiveSummary" validate={!isTestEnv && validate.executiveSummary}>
+          <FieldWithErrorMessage name="reportUrl" as={TextInput} label="Report URL" placeholder="Type here..." isUrl />
+          <FieldWithErrorMessage
+            name="reportAuthorName"
+            as={TextInput}
+            label="Rewiewer name"
+            placeholder="Type here..."
+          />
+          <FieldWithErrorMessage
+            name="reportAuthorTitle"
+            as={TextInput}
+            label="Rewiewer job title"
+            placeholder="Type here..."
+          />
+
+          <Field name="reportAuthorAvatar">
             {({ field, meta, form }: FieldProps) => (
               <FileUpload
                 file={field.value}
                 onFileChange={(file) => {
-                  form.setFieldTouched('executiveSummary', true, false)
-                  form.setFieldValue('executiveSummary', file)
+                  form.setFieldValue('reportAuthorAvatar', file)
                 }}
                 accept="application/pdf"
                 label="Reviewer avatar"
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/PoolRatings.tsx b/centrifuge-app/src/pages/IssuerCreatePool/PoolRatings.tsx
new file mode 100644
index 0000000000..f43b7a7a3b
--- /dev/null
+++ b/centrifuge-app/src/pages/IssuerCreatePool/PoolRatings.tsx
@@ -0,0 +1,80 @@
+import { PoolMetadataInput } from '@centrifuge/centrifuge-js'
+import { Box, FileUpload, 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'
+
+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 }) => (
+            <>
+              {form.values.poolRatings.map((_, index) => (
+                <>
+                  <Field name={`poolRatings.${index}.agency`}>
+                    {({ field, meta }: FieldProps) => (
+                      <FieldWithErrorMessage
+                        {...field}
+                        as={TextInput}
+                        label="Rating agency"
+                        placeholder="Type here..."
+                      />
+                    )}
+                  </Field>
+
+                  <Field name={`poolRatings.${index}.value`}>
+                    {({ field, meta }: FieldProps) => (
+                      <FieldWithErrorMessage
+                        {...field}
+                        as={TextInput}
+                        label="Rating value"
+                        placeholder="Type here..."
+                      />
+                    )}
+                  </Field>
+
+                  <Field name={`poolRatings.${index}.reportUrl`}>
+                    {({ field, meta }: FieldProps) => (
+                      <FieldWithErrorMessage
+                        {...field}
+                        as={TextInput}
+                        label="Rating report URL"
+                        placeholder="Type here..."
+                        isUrl
+                      />
+                    )}
+                  </Field>
+
+                  <Field name={`poolRatings.${index}.reportFile`}>
+                    {({ field, form }: FieldProps) => (
+                      <FileUpload
+                        file={field.value}
+                        onFileChange={(file) => {
+                          form.setFieldTouched(`poolRatings.${index}.reportFile`, true, false)
+                          form.setFieldValue(`poolRatings.${index}.reportFile`, file)
+                        }}
+                        accept="application/pdf"
+                        label="Executive summary PDF"
+                        placeholder="Choose file"
+                        small
+                      />
+                    )}
+                  </Field>
+                </>
+              ))}
+
+              <Box gridColumn="span 2">
+                <AddButton onClick={() => push({ agency: '', value: '', reportUrl: '' })} />
+              </Box>
+            </>
+          )}
+        </FieldArray>
+      </StyledGrid>
+    </Box>
+  )
+}
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx b/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx
index 49a69ca121..8342f2ae20 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx
@@ -82,7 +82,7 @@ export const CheckboxOption = ({
       height={height || 70}
       alignItems={icon ? 'center' : 'flex-start'}
     >
-      <Field name={name} validate={validate[name]}>
+      <Field name={name} validate={validate[name as keyof typeof validate]}>
         {({ field, form, meta }: FieldProps) => (
           <Checkbox
             {...field}
@@ -317,7 +317,7 @@ export const PoolStructureSection = () => {
                         {({ field, meta, form }: FieldProps) => (
                           <Select
                             label={<Tooltips type="apy" label={<Text variant="heading4">APY</Text>} />}
-                            onChange={(event) => form.setFieldValue('apy', event.target.value)}
+                            onChange={(event) => form.setFieldValue(field.name, event.target.value)}
                             onBlur={field.onBlur}
                             errorMessage={meta.touched && meta.error ? meta.error : undefined}
                             value={field.value}
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
index 9a3330802c..c59e87d611 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
@@ -1,6 +1,6 @@
 import { Box, Button, Step, Stepper, Text } from '@centrifuge/fabric'
 import { Form, FormikProvider, useFormik } from 'formik'
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import styled, { useTheme } from 'styled-components'
 import { useIsAboveBreakpoint } from '../../../src/utils/useIsAboveBreakpoint'
 import { PoolDetailsSection } from './PoolDetailsSection'
@@ -16,11 +16,27 @@ const StyledBox = styled(Box)`
   }
 `
 
+const stepFields: { [key: number]: string[] } = {
+  1: ['assetClass', 'assetDenomination', 'subAssetClass'],
+  2: [
+    'poolName',
+    'poolIcon',
+    'investorType',
+    'maxReserve',
+    'poolType',
+    'issuerName',
+    'issuerShortDescription',
+    'issuerDescription',
+  ],
+  3: ['investmentDetails', 'liquidityDetails'],
+}
+
 const IssuerCreatePoolPage = () => {
   const theme = useTheme()
   const formRef = useRef<HTMLFormElement>(null)
   const isSmall = useIsAboveBreakpoint('S')
   const [step, setStep] = useState(1)
+  const [stepCompleted, setStepCompleted] = useState({ 1: false, 2: false, 3: false })
 
   const form = useFormik({
     initialValues: initialValues,
@@ -29,17 +45,29 @@ const IssuerCreatePoolPage = () => {
     onSubmit: () => console.log('a'),
   })
 
-  const { validateForm, errors } = form
+  const { values, errors } = form
 
-  const handleNextStep = async () => {
-    const currentErrors = await validateForm()
+  const checkStepCompletion = (stepNumber: number) => {
+    const fields = stepFields[stepNumber]
+    return fields.every(
+      (field) =>
+        values[field as keyof typeof values] !== null &&
+        values[field as keyof typeof values] !== '' &&
+        !errors[field as keyof typeof errors]
+    )
+  }
 
-    // Ensure the form is valid before proceeding to the next step
-    if (Object.keys(currentErrors).length === 0) {
-      setStep((prevStep) => prevStep + 1)
-    }
+  const handleNextStep = () => {
+    setStep((prevStep) => prevStep + 1)
   }
 
+  useEffect(() => {
+    setStepCompleted((prev) => ({
+      ...prev,
+      [step]: checkStepCompletion(step),
+    }))
+  }, [values, step])
+
   return (
     <>
       <FormikProvider value={form}>
@@ -54,8 +82,8 @@ const IssuerCreatePoolPage = () => {
             borderBottom={`1px solid ${theme.colors.borderPrimary}`}
           >
             <Stepper activeStep={step} setActiveStep={setStep} direction="row">
-              <Step label="Pool structure" />
-              <Step label="Pool details" />
+              <Step label="Pool structure" isStepCompleted={stepCompleted[1]} />
+              <Step label="Pool details" isStepCompleted={stepCompleted[2]} />
               <Step label="Pool setup" />
             </Stepper>
           </Box>
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/types.ts b/centrifuge-app/src/pages/IssuerCreatePool/types.ts
index 65212c90d1..4cbb8e55cd 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/types.ts
+++ b/centrifuge-app/src/pages/IssuerCreatePool/types.ts
@@ -37,13 +37,14 @@ export type CreatePoolValues = Omit<
   PoolMetadataInput,
   'poolIcon' | 'issuerLogo' | 'executiveSummary' | 'adminMultisig' | 'poolFees' | 'poolReport' | 'poolRatings'
 > & {
-  trancheStructure: 1 | 2 | 3
-  poolStructure: string
+  // pool structure
   assetDenomination: string
+  trancheStructure: 1 | 2 | 3
+
+  // pool details
+  poolType: 'open' | 'closed'
+  issuerCategories: { type: string; value: string }[]
 
-  poolIcon: File | null
-  issuerLogo: File | null
-  executiveSummary: File | null
   reportAuthorName: string
   reportAuthorTitle: string
   reportAuthorAvatar: File | null
@@ -59,10 +60,6 @@ export type CreatePoolValues = Omit<
     feePosition: 'Top of waterfall'
     category: string
   }[]
-  poolType: 'open' | 'closed'
-  investorType: string
-  issuerShortDescription: string
-  issuerCategories: { type: string; value: string }[]
   poolRatings: {
     agency?: string
     value?: string
@@ -82,21 +79,19 @@ export const initialValues: CreatePoolValues = {
   // pool structure -> tranches
   tranches: [createEmptyTranche('')],
 
-  poolIcon: null,
+  // pool details section
   poolName: '',
+  poolIcon: null,
   currency: isTestEnv ? 'USDC' : 'Native USDC',
   maxReserve: 1000000,
-  epochHours: 23, // in hours
-  epochMinutes: 50, // in minutes
-  listed: !import.meta.env.REACT_APP_DEFAULT_UNLIST_POOLS,
   investorType: '',
   issuerName: '',
   issuerRepName: '',
   issuerLogo: null,
   issuerDescription: '',
   issuerShortDescription: '',
-  issuerCategories: [],
-
+  issuerCategories: [{ type: '', value: '' }],
+  poolRatings: [{ agency: '', value: '', reportUrl: '', reportFile: null }],
   executiveSummary: null,
   website: '',
   forum: '',
@@ -107,8 +102,6 @@ export const initialValues: CreatePoolValues = {
   reportAuthorAvatar: null,
   reportUrl: '',
 
-  poolRatings: [],
-
   adminMultisig: {
     signers: [],
     threshold: 1,
diff --git a/centrifuge-js/src/modules/pools.ts b/centrifuge-js/src/modules/pools.ts
index 0b02e2b997..149218fbde 100644
--- a/centrifuge-js/src/modules/pools.ts
+++ b/centrifuge-js/src/modules/pools.ts
@@ -667,31 +667,33 @@ interface TrancheFormValues {
 export interface PoolMetadataInput {
   // pool structure
   poolStructure: string
-  trancheStructure: number
   assetClass: 'Public credit' | 'Private credit'
-  assetDenomination: string
   subAssetClass: string
 
   // pool structure -> tranches
   tranches: TrancheFormValues[]
 
   // details
+  assetDenomination: string
+  investorType: string
   poolIcon: FileType | null
-  poolName: string
-  currency: string
   maxReserve: number | ''
-  epochHours: number | ''
-  epochMinutes: number | ''
-  listed?: boolean
-  investorType: string
-
-  // issuer
   issuerName: string
-  issuerRepName: string
   issuerLogo?: FileType | null
-  issuerDescription: string
+  issuerRepName: string
   issuerShortDescription: string
+  issuerDescription: string
   issuerCategories: { type: string; value: string; customType?: string }[]
+  website: string
+  forum: string
+  email: string
+  executiveSummary: FileType | null
+  details?: IssuerDetail[]
+
+  currency: string
+  epochHours: number | ''
+  epochMinutes: number | ''
+  listed?: boolean
 
   poolReport?: {
     authorName: string
@@ -706,12 +708,6 @@ export interface PoolMetadataInput {
     reportFile?: FileType | null
   }[]
 
-  executiveSummary: FileType | null
-  website: string
-  forum: string
-  email: string
-  details?: IssuerDetail[]
-
   adminMultisig?: {
     signers: string[]
     threshold: number
diff --git a/fabric/src/components/Checkbox/index.tsx b/fabric/src/components/Checkbox/index.tsx
index 093d8ea788..1553241be2 100644
--- a/fabric/src/components/Checkbox/index.tsx
+++ b/fabric/src/components/Checkbox/index.tsx
@@ -10,15 +10,22 @@ type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
   label?: string | React.ReactElement
   errorMessage?: string
   extendedClickArea?: boolean
+  variant?: 'square' | 'round'
 }
 
-export function Checkbox({ label, errorMessage, extendedClickArea, ...checkboxProps }: CheckboxProps) {
+export function Checkbox({
+  label,
+  errorMessage,
+  extendedClickArea,
+  variant = 'round',
+  ...checkboxProps
+}: CheckboxProps) {
   return (
     <Box position="relative">
       <StyledLabel $extendedClickArea={!!extendedClickArea}>
         <Shelf as={Text} gap={1} alignItems="center" position="relative">
           <StyledWrapper minWidth="18px" height="18px" flex="0 0 18px" $hasLabel={!!label}>
-            <StyledCheckbox type="checkbox" {...checkboxProps} />
+            <StyledCheckbox type="checkbox" $variant={variant} {...checkboxProps} />
             <StyledOutline />
           </StyledWrapper>
           {label && (
@@ -88,52 +95,55 @@ const StyledWrapper = styled(Flex)<{ $hasLabel: boolean }>`
   }
 `
 
-const StyledCheckbox = styled.input`
+const StyledCheckbox = styled.input<{ $variant: 'square' | 'round' }>`
   width: 18px;
   height: 18px;
   appearance: none;
-  border-radius: 50%;
+  border-radius: ${({ $variant }) => ($variant === 'square' ? '2px' : '50%')};
   border: 1px solid ${({ theme }) => theme.colors.borderPrimary};
   position: relative;
   cursor: pointer;
-  appearance: none;
-  border: 2px solid ${({ theme }) => theme.colors.borderPrimary};
-  border-radius: 4px;
-  background-color: ${({ theme }) => theme.colors.backgroundPrimary};
-  transition: background-color 0.2s ease, border-color 0.2s ease;
+  transition: background-color 0.2s, border-color 0.2s;
 
-  &:checked {
-    background-color: ${({ theme }) => theme.colors.textGold};
-    border-color: ${({ theme }) => theme.colors.textGold};
-  }
+  ${({ $variant, theme }) =>
+    $variant === 'round' &&
+    `
+      &:checked {
+        border-color: ${theme.colors.textPrimary};
+      }
 
-  &:checked::after {
-    content: '';
-    display: block;
-    width: 6px;
-    height: 10px;
-    border: solid ${({ theme }) => theme.colors.backgroundPrimary};
-    border-width: 0 2px 2px 0;
-    transform: rotate(45deg);
-    position: absolute;
-    top: 3px;
-    left: 6px;
-  }
+      &:checked::after {
+        content: '';
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: ${theme.colors.textPrimary};
+      }
+    `}
 
-  &:checked {
-    border-color: ${({ theme }) => theme.colors.textPrimary};
-  }
+  ${({ $variant, theme }) =>
+    $variant === 'square' &&
+    `
+      &:checked {
+        border-color: ${theme.colors.borderSecondary};
+        background-color: ${theme.colors.textGold};
+      }
 
-  &:checked::after {
-    content: '';
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background-color: ${({ theme }) => theme.colors.textPrimary};
-  }
+      &:checked::after {
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 5px;
+        width: 6px;
+        height: 10px;
+        border: solid white;
+        border-width: 0 2px 2px 0;
+        transform: rotate(45deg);
+      }
+    `}
 
   &:focus-visible {
     outline: none;
diff --git a/fabric/src/components/Stepper/index.tsx b/fabric/src/components/Stepper/index.tsx
index 2042b3d46a..044872b63c 100644
--- a/fabric/src/components/Stepper/index.tsx
+++ b/fabric/src/components/Stepper/index.tsx
@@ -48,9 +48,13 @@ const Hitearea = styled.button<{ direction?: string }>`
 
 const Number = styled(Text)<{ isActive?: boolean; done: boolean }>`
   background-color: ${({ theme, isActive, done }) =>
-    isActive && !done ? theme.colors.textGold : done ? 'red' : 'transparent'};
-  border: ${({ theme, isActive }) =>
-    isActive ? `1px solid ${theme.colors.textGold}` : `1.73px solid ${theme.colors.backgroundButtonPrimaryDisabled}`};
+    isActive && !done ? theme.colors.textGold : done ? theme.colors.statusOkBg : 'transparent'};
+  border: ${({ theme, isActive, done }) =>
+    isActive && !done
+      ? `1px solid ${theme.colors.textGold}`
+      : done
+      ? `1px solid ${theme.colors.statusOk}`
+      : `1.73px solid ${theme.colors.backgroundButtonPrimaryDisabled}`};
   border-radius: 100%;
   width: 32px;
   height: 32px;
diff --git a/fabric/src/components/TextInput/index.tsx b/fabric/src/components/TextInput/index.tsx
index 926af407a1..06ba0bf03e 100644
--- a/fabric/src/components/TextInput/index.tsx
+++ b/fabric/src/components/TextInput/index.tsx
@@ -2,7 +2,7 @@ import { isAddress as isSubstrateAddress } from '@polkadot/util-crypto'
 import { isAddress as isEvmAddress } from 'ethers'
 import * as React from 'react'
 import styled, { keyframes } from 'styled-components'
-import { Flex, IconCentrifuge, IconEthereum, IconLoader, IconSearch } from '../..'
+import { Box, Flex, IconCentrifuge, IconEthereum, IconLoader, IconSearch } from '../..'
 import { InputUnit, InputUnitProps, useContextId } from '../InputUnit'
 import { Shelf } from '../Shelf'
 import { Text } from '../Text'
@@ -19,6 +19,10 @@ export type TextAreaInputProps = React.InputHTMLAttributes<HTMLTextAreaElement>
     symbol?: React.ReactNode
   }
 
+export type URLInputProps = TextInputProps & {
+  prefix?: string
+}
+
 export const StyledTextInput = styled.input`
   width: 100%;
   flex: 1;
@@ -33,7 +37,7 @@ export const StyledTextInput = styled.input`
   -moz-appearance: textfield;
 
   ::placeholder {
-    color: ${({ theme }) => theme.colors.textDisabled};
+    color: ${({ theme }) => theme.colors.textSecondary};
     font-weight: 400;
     line-height: 24px;
   }
@@ -102,6 +106,49 @@ export const StyledInputAction = styled.button`
     opacity: 0.4;
   }
 `
+
+const StyledURLInputWrapper = styled(StyledInputBox)`
+  display: flex;
+  align-items: center;
+`
+const Prefix = styled(Box)`
+  padding: 0.5rem;
+  color: ${({ theme }) => theme.colors.textSecondary};
+  background-color: transparent;
+  font-size: 16px;
+  pointer-events: none;
+  border-right: 1px solid ${({ theme }) => theme.colors.borderPrimary};
+`
+
+export function URLInput({
+  label,
+  secondaryLabel,
+  prefix = 'https://',
+  disabled,
+  errorMessage,
+  id,
+  ...inputProps
+}: URLInputProps) {
+  const defaultId = React.useId()
+  id ??= defaultId
+
+  return (
+    <InputUnit
+      id={id}
+      label={label}
+      secondaryLabel={secondaryLabel}
+      disabled={disabled}
+      errorMessage={errorMessage}
+      inputElement={
+        <StyledURLInputWrapper hideBorder={!!inputProps.row} alignItems="stretch" height="input" disabled={disabled}>
+          <Prefix>{prefix}</Prefix>
+          <StyledTextInput {...inputProps} id={id} disabled={disabled} placeholder={inputProps.placeholder} />
+        </StyledURLInputWrapper>
+      }
+    />
+  )
+}
+
 export function InputAction({ children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
   return (
     <StyledInputAction type="button" {...props}>