From f04978fc19acdf89bf84651465685063914e3fa7 Mon Sep 17 00:00:00 2001
From: Sophia <littlejohn.sophia@gmail.com>
Date: Fri, 26 May 2023 15:15:12 -0400
Subject: [PATCH] Onboarding: Accredited investor check (#1419)

* Send document download to new tab

* Add dialog to confirm accreditation

* Add copy for entity accreditation

* Improve wording btw entity and individual
---
 .../src/pages/Onboarding/Accreditation.tsx    | 120 +++++++++++++++---
 .../Onboarding/SignSubscriptionAgreement.tsx  |   2 +
 2 files changed, 105 insertions(+), 17 deletions(-)

diff --git a/centrifuge-app/src/pages/Onboarding/Accreditation.tsx b/centrifuge-app/src/pages/Onboarding/Accreditation.tsx
index e6ea27219b..cd4e785a07 100644
--- a/centrifuge-app/src/pages/Onboarding/Accreditation.tsx
+++ b/centrifuge-app/src/pages/Onboarding/Accreditation.tsx
@@ -1,6 +1,7 @@
-import { Button, Checkbox, Stack, Text } from '@centrifuge/fabric'
+import { Button, Checkbox, Dialog, Shelf, Stack, Text } from '@centrifuge/fabric'
 import { useFormik } from 'formik'
 import * as React from 'react'
+import { useTheme } from 'styled-components'
 import { boolean, object } from 'yup'
 import { ActionBar, Content, ContentHeader } from '../../components/Onboarding'
 import { useOnboarding } from '../../components/OnboardingProvider'
@@ -11,10 +12,43 @@ const validationSchema = object({
   isAccredited: boolean().oneOf([true], 'You must confirm that you are an accredited investor'),
 })
 
+export const ConfirmAccreditationDialog = ({
+  open,
+  onClose,
+  confirm,
+  isEntity,
+}: {
+  open: boolean
+  onClose: () => void
+  confirm: () => void
+  isEntity: boolean
+}) => {
+  return (
+    <Dialog isOpen={open} onClose={onClose} width="30%" title="Accredited investor">
+      <Stack gap={3}>
+        {isEntity ? (
+          <Text> I confirm that the entity is an accredited investor</Text>
+        ) : (
+          <Text>I confirm that I am an accredited investor</Text>
+        )}
+        <Shelf gap={2}>
+          <Button onClick={confirm}>Confirm</Button>
+          <Button variant="secondary" onClick={onClose}>
+            Cancel
+          </Button>
+        </Shelf>
+      </Stack>
+    </Dialog>
+  )
+}
+
 export const Accreditation = () => {
+  const [isDialogOpen, setIsDialogOpen] = React.useState(false)
   const { onboardingUser, previousStep, nextStep } = useOnboarding<NonNullable<OnboardingUser>>()
+  const theme = useTheme()
 
   const isCompleted = !!onboardingUser.globalSteps.verifyAccreditation?.completed
+  const isEntity = onboardingUser.investorType === 'entity'
 
   const { mutate: verifyAccreditation, isLoading } = useVerifyAccreditation()
 
@@ -30,32 +64,84 @@ export const Accreditation = () => {
 
   return (
     <>
+      <ConfirmAccreditationDialog
+        open={isDialogOpen}
+        onClose={() => setIsDialogOpen(false)}
+        confirm={formik.handleSubmit}
+        isEntity={isEntity}
+      />
       <Content>
         <ContentHeader
           title="Accredited investor assessment"
-          body="Following is the criteria for being an accredited investor, as per the SEC publications:"
+          body={
+            isEntity ? (
+              <Text>
+                Following is a partial list of the criteria for your entity to be an Accredited Investor. The full list
+                can be found{' '}
+                <a
+                  style={{
+                    color: theme.colors.textInteractive,
+                  }}
+                  href="https://www.sec.gov/education/capitalraising/building-blocks/accredited-investor"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  here
+                </a>
+                .
+              </Text>
+            ) : (
+              'Following is the criteria for being an accredited investor, as per the SEC publications:'
+            )
+          }
         />
 
         <Stack as="ul" gap={2} style={{ listStyle: 'disc' }}>
-          <Text as="li" variant="body1">
-            An annual income of $200,000 or greater ($300,000 in case of joint partners with a spouse) and proof of
-            maintaining the same yearly
-          </Text>
-          <Text as="li" variant="body1">
-            Net worth greater than $1 million either as a sole owner or with a joint partner, excluding residence
-          </Text>
-          <Text as="li" variant="body1">
-            In the case of a trust, a total of $5 million in assets is required
-          </Text>
-          <Text as="li" variant="body1">
-            An organization with all shareholders being accredited investors
-          </Text>
+          {isEntity ? (
+            <>
+              <Text as="li" variant="body1">
+                Your entity owns in excess of $5 million in investments
+              </Text>
+              <Text as="li" variant="body1">
+                Your entity is a corporation and has assets in excess of $5 million
+              </Text>
+              <Text as="li" variant="body1">
+                All the owners of your entity are Accredited Investors
+              </Text>
+              <Text as="li" variant="body1">
+                Your entity is a regulated financial entity such as a bank, insurance company or SEC-regulated
+                investment advisor or broker-dealer
+              </Text>
+            </>
+          ) : (
+            <>
+              <Text as="li" variant="body1">
+                An annual income of $200,000 or greater ($300,000 in case of joint partners with a spouse) and proof of
+                maintaining the same yearly
+              </Text>
+              <Text as="li" variant="body1">
+                Net worth greater than $1 million either as a sole owner or with a joint partner, excluding residence
+              </Text>
+              <Text as="li" variant="body1">
+                In the case of a trust, a total of $5 million in assets is required
+              </Text>
+              <Text as="li" variant="body1">
+                An organization with all shareholders being accredited investors
+              </Text>
+            </>
+          )}
         </Stack>
 
         <Checkbox
           {...formik.getFieldProps('isAccredited')}
           label={
-            <Text style={{ cursor: 'pointer', paddingLeft: '12px' }}>I confirm that I am an accredited investor</Text>
+            isEntity ? (
+              <Text style={{ cursor: 'pointer', paddingLeft: '12px' }}>
+                I confirm that the entity is an accredited investor
+              </Text>
+            ) : (
+              <Text style={{ cursor: 'pointer', paddingLeft: '12px' }}>I confirm that I am an accredited investor</Text>
+            )
           }
           disabled={isCompleted || isLoading}
           errorMessage={formik.errors.isAccredited}
@@ -69,7 +155,7 @@ export const Accreditation = () => {
         </Button>
         <Button
           onClick={() => {
-            isCompleted ? nextStep() : formik.handleSubmit()
+            isCompleted ? nextStep() : setIsDialogOpen(true)
           }}
           disabled={isLoading}
           loading={isLoading}
diff --git a/centrifuge-app/src/pages/Onboarding/SignSubscriptionAgreement.tsx b/centrifuge-app/src/pages/Onboarding/SignSubscriptionAgreement.tsx
index 66d9740c11..32cea9ebc5 100644
--- a/centrifuge-app/src/pages/Onboarding/SignSubscriptionAgreement.tsx
+++ b/centrifuge-app/src/pages/Onboarding/SignSubscriptionAgreement.tsx
@@ -106,6 +106,7 @@ export const SignSubscriptionAgreement = ({ signedAgreementUrl, isSignedAgreemen
             variant="tertiary"
             icon={IconDownload}
             small
+            target="_blank"
           >
             Download agreement
           </AnchorButton>
@@ -118,6 +119,7 @@ export const SignSubscriptionAgreement = ({ signedAgreementUrl, isSignedAgreemen
             variant="tertiary"
             icon={IconDownload}
             small
+            target="_blank"
           >
             Executive summary attachment
           </AnchorButton>