From 4c087706dc867f31a0f83a826b0add602ffbcd60 Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Thu, 28 Nov 2024 16:39:39 +0100
Subject: [PATCH] Add onboarding functionality and UI fixes

---
 .../src/components/Menu/IssuerMenu.tsx        |   4 +-
 centrifuge-app/src/components/Menu/Toggle.tsx |   2 +-
 centrifuge-app/src/components/Menu/index.tsx  |   4 +
 .../IssuerCreatePool/PoolSetupSection.tsx     | 100 ++++++++++++------
 .../src/pages/IssuerCreatePool/index.tsx      |  13 ++-
 fabric/src/icon-svg/icon-chevron-down.svg     |   2 +-
 6 files changed, 88 insertions(+), 37 deletions(-)

diff --git a/centrifuge-app/src/components/Menu/IssuerMenu.tsx b/centrifuge-app/src/components/Menu/IssuerMenu.tsx
index 24ad7b9a81..1e2385649a 100644
--- a/centrifuge-app/src/components/Menu/IssuerMenu.tsx
+++ b/centrifuge-app/src/components/Menu/IssuerMenu.tsx
@@ -62,9 +62,9 @@ export function IssuerMenu({ defaultOpen = false, children }: IssuerMenuProps) {
         Issuer
         {isLarge &&
           (open ? (
-            <IconChevronDown size={['iconMedium', 'iconMedium', 'iconSmall']} />
+            <IconChevronDown size={['iconMedium', 'iconMedium', 'iconSmall']} color="white" />
           ) : (
-            <IconChevronRight size={['iconMedium', 'iconMedium', 'iconSmall']} />
+            <IconChevronRight size={['iconMedium', 'iconMedium', 'iconSmall']} color="white" />
           ))}
       </Toggle>
 
diff --git a/centrifuge-app/src/components/Menu/Toggle.tsx b/centrifuge-app/src/components/Menu/Toggle.tsx
index 8737377fe0..08838a5cfa 100644
--- a/centrifuge-app/src/components/Menu/Toggle.tsx
+++ b/centrifuge-app/src/components/Menu/Toggle.tsx
@@ -10,7 +10,7 @@ export const Toggle = styled(Text)<{ isActive?: boolean; stacked?: boolean }>`
   width: 100%;
   grid-template-columns: ${({ stacked, theme }) =>
     stacked ? '1fr' : `${theme.sizes.iconSmall}px 1fr ${theme.sizes.iconSmall}px`};
-  color: ${({ isActive, theme }) => (isActive ? theme.colors.textGold : theme.colors.textInverted)};
+  color: ${({ theme }) => theme.colors.textInverted};
   border-radius: 4px;
   background-color: ${({ isActive }) => (isActive ? LIGHT_BACKGROUND : 'transparent')};
 
diff --git a/centrifuge-app/src/components/Menu/index.tsx b/centrifuge-app/src/components/Menu/index.tsx
index 1c3e321919..5fe10a79d2 100644
--- a/centrifuge-app/src/components/Menu/index.tsx
+++ b/centrifuge-app/src/components/Menu/index.tsx
@@ -40,6 +40,10 @@ const StyledRouterLinkButton = styled(RouterLinkButton)`
       background-color: ${COLOR};
       color: white;
     }
+
+    &:active {
+      border-color: transparent;
+    }
   }
 `
 
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx b/centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx
index 27678a12c3..1968843ea6 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx
@@ -28,6 +28,27 @@ const FEE_TYPES = [
 
 const FEE_POSISTIONS = [{ label: 'Top of waterfall', value: 'Top of waterfall' }]
 
+const TaxDocument = () => {
+  const form = useFormikContext<PoolMetadataInput>()
+
+  return (
+    <Box mt={2}>
+      <Text variant="heading4">Tax document requirement</Text>
+
+      <Field name="onboarding">
+        {({ field }: FieldProps) => (
+          <Checkbox
+            {...field}
+            label="Require investors to upload tax documents before signing the subscription agreement."
+            variant="square"
+            onChange={(val) => form.setFieldValue('onboarding.taxInfoRequired', val.target.checked ? true : false)}
+          />
+        )}
+      </Field>
+    </Box>
+  )
+}
+
 export const PoolSetupSection = () => {
   const theme = useTheme()
   const form = useFormikContext<PoolMetadataInput>()
@@ -327,39 +348,54 @@ export const PoolSetupSection = () => {
           </Box>
           {values.onboardingExperience === 'centrifuge' && (
             <Box>
-              <FieldArray name="tranches">
-                {({ form }) => (
-                  <Box>
-                    {values.tranches.map((tranche, index) => (
-                      <Field key={index} name={`subscriptionDocuments[${index}]`}>
-                        {({ field, meta }: FieldProps) => (
-                          <Box mb={4}>
-                            <FileUpload
-                              name={`subscriptionDocuments[${index}]`}
-                              file={field.value}
-                              onFileChange={async (file) => {
-                                form.setFieldTouched(`subscriptionDocuments[${index}]`, true, false)
-                                form.setFieldValue(`subscriptionDocuments[${index}]`, file)
-                              }}
-                              label={`Subscription document for ${tranche.tokenName}`}
-                              errorMessage={meta.touched && meta.error ? meta.error : undefined}
-                              accept="application/pdf"
-                              small
-                            />
-                          </Box>
-                        )}
-                      </Field>
-                    ))}
-                  </Box>
-                )}
-              </FieldArray>
-              <Box mt={8}>
-                <Text variant="heading4">Tax document requirement</Text>
-                <Checkbox
-                  label="Require investors to upload tax documents before signing the subscription agreement."
-                  variant="square"
-                />
+              <Box>
+                {values.tranches.map((tranche, index) => (
+                  <Field key={index} name={`onboarding.tranches.${tranche.tokenName}`}>
+                    {({ field, meta }: FieldProps) => (
+                      <Box mb={4}>
+                        <FileUpload
+                          name={`onboarding.${tranche.tokenName}`}
+                          file={field.value}
+                          onFileChange={async (file) => {
+                            form.setFieldTouched(`onboarding.tranches.${tranche.tokenName}`, true, false)
+                            form.setFieldValue(`onboarding.tranches.${tranche.tokenName}`, file)
+                          }}
+                          label={`Subscription document for ${tranche.tokenName}`}
+                          errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                          accept="application/pdf"
+                          small
+                        />
+                      </Box>
+                    )}
+                  </Field>
+                ))}
               </Box>
+              <TaxDocument />
+            </Box>
+          )}
+          {values.onboardingExperience === 'external' && (
+            <Box>
+              {values.tranches.map((tranche, index) => (
+                <Field key={index} name={`onboarding.tranches.${tranche.tokenName}`}>
+                  {({ field, meta }: FieldProps) => (
+                    <Box mb={4}>
+                      <FieldWithErrorMessage
+                        {...field}
+                        as={TextInput}
+                        name={`onboarding.tranches.${tranche.tokenName}`}
+                        value={field.value}
+                        label={<Text variant="heading4">Onboarding URL {tranche.tokenName}</Text>}
+                        isUrl
+                        placeholder="www.example.com"
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                          form.setFieldValue(`onboarding.tranches.${tranche.tokenName}`, e.target.value)
+                        }
+                      />
+                    </Box>
+                  )}
+                </Field>
+              ))}
+              <TaxDocument />
             </Box>
           )}
         </StyledGrid>
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
index a375e0813a..c8539b8460 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
@@ -267,7 +267,8 @@ const IssuerCreatePoolPage = () => {
         return {
           trancheType,
           metadata: {
-            tokenName: tranche.tokenName,
+            tokenName:
+              metadataValues.tranches.length > 1 ? `${metadataValues.poolName} ${tranche.tokenName}` : 'Junior',
             tokenSymbol: tranche.symbolName,
           },
         }
@@ -313,6 +314,16 @@ const IssuerCreatePoolPage = () => {
         addMultisig(metadataValues.adminMultisig)
       }
 
+      // Onboarding
+      if (metadataValues.onboardingExperience === 'none') {
+        metadataValues.onboarding = {
+          taxInfoRequired: metadataValues.onboarding?.taxInfoRequired,
+          tranches: {},
+        }
+      }
+
+      console.log(metadataValues)
+
       // createProxies([
       //   (aoProxy, adminProxy) => {
       //     createPoolTx(
diff --git a/fabric/src/icon-svg/icon-chevron-down.svg b/fabric/src/icon-svg/icon-chevron-down.svg
index e70d2ea0d0..493072f007 100644
--- a/fabric/src/icon-svg/icon-chevron-down.svg
+++ b/fabric/src/icon-svg/icon-chevron-down.svg
@@ -1,3 +1,3 @@
 <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 8L10 13L15 8" stroke="#252B34" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 8L10 13L15 8" stroke="black" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>