Merge pull request #1 from vtex-apps/feat/account-status-check

Wrike 469738388: Check account status on account create page
vtex-apps · Jun 18, 2020 · 6213db7 · 6213db7
2 parents d2a04ce + f7a85b6
commit 6213db7
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Changed
+
+- AccountCreatePage will check shopper's account status and forbid account signup if status is "approved", "rejected", or "under-review".
+
 ## [0.0.11] - 2020-06-02
 
 ### Fixed

diff --git a/docs/README.md b/docs/README.md
@@ -99,6 +99,7 @@ In order to apply CSS customizations in this and other blocks, follow the instru
 | `introPageRightIconTitle`          |
 | `introPageRightIconText`           |
 | `introPageButtonContainer`         |
+| `introPageAccountErrorContainer`   |
 | `personalInfoPageContainer`        |
 | `personalInfoInstructions`         |
 | `personalInfoSection`              |

diff --git a/messages/context.json b/messages/context.json
@@ -7,6 +7,9 @@
   "store/flowFinance.accountCreate.introPage.rightIconText": "store/flowFinance.accountCreate.introPage.rightIconText",
   "store/flowFinance.accountCreate.introPage.continue": "store/flowFinance.accountCreate.introPage.continue",
   "store/flowFinance.accountCreate.introPage.poweredBy": "store/flowFinance.accountCreate.introPage.poweredBy",
+  "store/flowFinance.accountCreate.introPage.accountErrors.underReview": "store/flowFinance.accountCreate.introPage.accountErrors.underReview",
+  "store/flowFinance.accountCreate.introPage.accountErrors.approved": "store/flowFinance.accountCreate.introPage.accountErrors.approved",
+  "store/flowFinance.accountCreate.introPage.accountErrors.rejected": "store/flowFinance.accountCreate.introPage.accountErrors.rejected",
   "store/flowFinance.accountCreate.cnpjLabel": "store/flowFinance.accountCreate.cnpjLabel",
   "store/flowFinance.accountCreate.cnpjError": "store/flowFinance.accountCreate.cnpjError",
   "store/flowFinance.accountCreate.preQualify.notQualifiedMessage": "store/flowFinance.accountCreate.preQualify.notQualifiedMessage",

diff --git a/messages/en.json b/messages/en.json
@@ -7,6 +7,9 @@
   "store/flowFinance.accountCreate.introPage.rightIconText": "Uma vez liberado, seu crédito aparecerá como uma opção de pagamento no {storePaymentName}",
   "store/flowFinance.accountCreate.introPage.continue": "Peça seu crédito",
   "store/flowFinance.accountCreate.introPage.poweredBy": "Powered by",
+  "store/flowFinance.accountCreate.introPage.accountErrors.underReview": "Sua análise de crédito já está em andamento e em breve você vai receber uma mensagem com o resultado.",
+  "store/flowFinance.accountCreate.introPage.accountErrors.approved": "Seu crédito já está aprovado e está disponível na página do checkout como Financiamento Gympass Plus.",
+  "store/flowFinance.accountCreate.introPage.accountErrors.rejected": "Você tem um pedido de crédito rejeitado e não é possível pedir uma nova linha de crédito no momento.",
   "store/flowFinance.accountCreate.cnpjLabel": "CNPJ",
   "store/flowFinance.accountCreate.cnpjError": "Por favor insira um CNPJ válido.",
   "store/flowFinance.accountCreate.preQualify.notQualifiedMessage": "Infelizmente você não é elegível para pedir uma linha de crédito {storePaymentName}.{lineBreak}{lineBreak}Mas você ainda pode fazer compras no nosso site, basta selecionar outra forma de pagamento no checkout.",

diff --git a/messages/pt.json b/messages/pt.json
@@ -7,6 +7,9 @@
   "store/flowFinance.accountCreate.introPage.rightIconText": "Uma vez liberado, seu crédito aparecerá como uma opção de pagamento no {storePaymentName}",
   "store/flowFinance.accountCreate.introPage.continue": "Peça seu crédito",
   "store/flowFinance.accountCreate.introPage.poweredBy": "Powered by",
+  "store/flowFinance.accountCreate.introPage.accountErrors.underReview": "Sua análise de crédito já está em andamento e em breve você vai receber uma mensagem com o resultado.",
+  "store/flowFinance.accountCreate.introPage.accountErrors.approved": "Seu crédito já está aprovado e está disponível na página do checkout como Financiamento Gympass Plus.",
+  "store/flowFinance.accountCreate.introPage.accountErrors.rejected": "Você tem um pedido de crédito rejeitado e não é possível pedir uma nova linha de crédito no momento.",
   "store/flowFinance.accountCreate.cnpjLabel": "CNPJ",
   "store/flowFinance.accountCreate.cnpjError": "Por favor insira um CNPJ válido.",
   "store/flowFinance.accountCreate.preQualify.notQualifiedMessage": "Infelizmente você não é elegível para pedir uma linha de crédito {storePaymentName}.{lineBreak}{lineBreak}Mas você ainda pode fazer compras no nosso site, basta selecionar outra forma de pagamento no checkout.",

diff --git a/react/components/AccountCreate.tsx b/react/components/AccountCreate.tsx
@@ -8,14 +8,16 @@ import {
 import AccountCreatePageController from './AccountCreatePageController'
 import './AccountCreatePages/styles/global.css'
 
-interface ExitProps {
+interface Props {
   handleExit(): Promise<void>
+  checkAccount?: boolean
 }
 
 const CSS_HANDLES = ['accountCreateContainer'] as const
 
-const AccountCreate: StorefrontFunctionComponent<ExitProps> = ({
+const AccountCreate: StorefrontFunctionComponent<Props> = ({
   handleExit,
+  checkAccount = false,
 }) => {
   const handles = useCssHandles(CSS_HANDLES)
   return (
@@ -34,7 +36,10 @@ const AccountCreate: StorefrontFunctionComponent<ExitProps> = ({
       documentsComplete={initialAccountCreateState.documentsValid}
     >
       <div className={handles.accountCreateContainer}>
-        <AccountCreatePageController handleExit={handleExit} />
+        <AccountCreatePageController
+          handleExit={handleExit}
+          checkAccount={checkAccount}
+        />
       </div>
     </AccountCreateContextProvider>
   )

diff --git a/react/components/AccountCreatePage.tsx b/react/components/AccountCreatePage.tsx
@@ -25,7 +25,7 @@ const AccountCreatePage: StorefrontFunctionComponent = () => {
         style={{ maxWidth: 800, margin: '0 auto' }}
       >
         <PageBlock variation="full">
-          <AccountCreate handleExit={handleExit} />
+          <AccountCreate handleExit={handleExit} checkAccount />
         </PageBlock>
       </div>
     </div>

diff --git a/react/components/AccountCreatePageController.tsx b/react/components/AccountCreatePageController.tsx
@@ -13,8 +13,9 @@ import DocumentsPage from './AccountCreatePages/DocumentsPage'
 import SuccessPage from './AccountCreatePages/SuccessPage'
 import AppSettings from '../graphql/AppSettings.graphql'
 
-interface ExitProps {
+interface Props {
   handleExit: () => void
+  checkAccount: boolean
 }
 
 interface Settings {
@@ -23,8 +24,9 @@ interface Settings {
   tosPdfPath: string
 }
 
-const AccountCreatePageController: StorefrontFunctionComponent<ExitProps> = ({
+const AccountCreatePageController: StorefrontFunctionComponent<Props> = ({
   handleExit,
+  checkAccount,
 }) => {
   const { currentPage } = useAccountCreateState()
   const { data } = useQuery(AppSettings, { ssr: false })
@@ -35,7 +37,9 @@ const AccountCreatePageController: StorefrontFunctionComponent<ExitProps> = ({
 
   return (
     <AddressRules country="BRA" shouldUseIOFetching useGeolocation={false}>
-      {currentPage === 1 && <IntroPage settings={settings} />}
+      {currentPage === 1 && (
+        <IntroPage settings={settings} checkAccount={checkAccount} />
+      )}
       {currentPage === 2 && (
         <PreQualifyPage settings={settings} handleExit={handleExit} />
       )}

diff --git a/react/components/AccountCreatePages/IntroPage.tsx b/react/components/AccountCreatePages/IntroPage.tsx
@@ -1,5 +1,6 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
+import { useQuery } from 'react-apollo'
 import { useCssHandles } from 'vtex.css-handles'
 import { Button, Divider } from 'vtex.styleguide'
 
@@ -10,9 +11,11 @@ import {
 import IconMouse from '../../images/mouse.svg'
 import IconCart from '../../images/cart.svg'
 import FlowFinanceLogo from '../../images/flow-finance-logo.png'
+import Profile from '../../graphql/Profile.graphql'
 
-interface SettingsProps {
+interface Props {
   settings: Settings
+  checkAccount: boolean
 }
 
 interface Settings {
@@ -34,15 +37,50 @@ const CSS_HANDLES = [
   'introPageRightIconTitle',
   'introPageRightIconText',
   `introPageButtonContainer`,
+  'introPageAccountErrorContainer',
   `poweredByContainer`,
 ] as const
 
-const IntroPage: StorefrontFunctionComponent<SettingsProps> = ({
+const IntroPage: StorefrontFunctionComponent<Props> = ({
   settings,
+  checkAccount,
 }) => {
   const { currentPage } = useAccountCreateState()
   const dispatch = useAccountCreateDispatch()
+  const [accountStatus, setAccountStatus] = useState('none')
   const handles = useCssHandles(CSS_HANDLES)
+  const { data } = useQuery(Profile, { skip: !checkAccount })
+
+  async function postData(url = '', dataToPost = {}) {
+    const response = await fetch(url, {
+      method: 'POST',
+      mode: 'cors',
+      cache: 'no-cache',
+      credentials: 'same-origin',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      redirect: 'follow',
+      referrerPolicy: 'no-referrer',
+      body: JSON.stringify(dataToPost),
+    })
+    if (!response.ok) {
+      console.error(response)
+      return response
+    }
+    return response.json()
+  }
+
+  useEffect(() => {
+    if (data?.profile) {
+      postData(`/_v/api/connectors/flow-finance/get-loan-options`, {
+        email: data.profile.email,
+        total: 1000,
+      }).then(response => {
+        setAccountStatus(response.accountStatus)
+      })
+    }
+  }, [data])
 
   return (
     <div className={handles.introPageContainer}>
@@ -96,25 +134,45 @@ const IntroPage: StorefrontFunctionComponent<SettingsProps> = ({
       <div
         className={`${handles.introPageButtonContainer} mt6 flex flex-row justify-between`}
       >
-        <Button
-          variation="primary"
-          onClick={() => {
-            dispatch({
-              type: 'SET_CURRENT_PAGE',
-              args: {
-                page: currentPage + 1,
-              },
-            })
-            window.scrollTo(0, 0)
-          }}
-        >
-          <FormattedMessage id="store/flowFinance.accountCreate.introPage.continue" />
-        </Button>
+        <div>
+          <Button
+            variation="primary"
+            onClick={() => {
+              dispatch({
+                type: 'SET_CURRENT_PAGE',
+                args: {
+                  page: currentPage + 1,
+                },
+              })
+              window.scrollTo(0, 0)
+            }}
+            disabled={accountStatus !== 'none' && accountStatus !== 'pending'}
+          >
+            <FormattedMessage id="store/flowFinance.accountCreate.introPage.continue" />
+          </Button>
+          <div
+            className={`${handles.introPageAccountErrorContainer} mt2 red mw6`}
+          >
+            {accountStatus === 'under-review' && (
+              <FormattedMessage id="store/flowFinance.accountCreate.introPage.accountErrors.underReview" />
+            )}
+            {accountStatus === 'approved' && (
+              <FormattedMessage id="store/flowFinance.accountCreate.introPage.accountErrors.approved" />
+            )}
+            {accountStatus === 'rejected' && (
+              <FormattedMessage id="store/flowFinance.accountCreate.introPage.accountErrors.rejected" />
+            )}
+          </div>
+        </div>
         <div className={`${handles.poweredByContainer} flex flex-row`}>
           <div className="flex flex-column justify-center">
             <FormattedMessage id="store/flowFinance.accountCreate.introPage.poweredBy" />
           </div>
-          <img src={FlowFinanceLogo} alt="Flow Finance" />
+          <img
+            src={FlowFinanceLogo}
+            alt="Flow Finance"
+            className="self-center"
+          />
         </div>
       </div>
     </div>