Merge pull request #6360 from blockchain/ach

fix(warn): add message to confirm deposit
blockchain · Apr 18, 2024 · e3a2497 · e3a2497
2 parents b47b75d + fad5bff
commit e3a2497
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 15 deletions.
diff --git a/...ockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Deposit/Confirm/DepositConfirm.tsx b/...ockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Deposit/Confirm/DepositConfirm.tsx
@@ -26,6 +26,8 @@ import {
   DepositTerms
 } from 'data/types'
 import { useShowConversionAlert } from 'hooks'
+import { Padding } from '@blockchain-com/constellation'
+import { MoreInfoContainer } from './MoreInfoContainer'
 
 // Auto margin top so it gets pushed to the bottom
 const FiatNoticeWrapper = styled.div`
@@ -82,22 +84,22 @@ const Success = ({ defaultMethod, depositTerms, formValues }: Props) => {
 
   const amount = formValues?.amount ?? 0
 
+  const formattedAmount = fiatToString({
+    unit: defaultMethod?.currency ?? ('USD' as FiatType),
+    value: amount
+  })
+
+  const bankAccount = getBankFormatted(defaultMethod)
+
   return (
     <FlyoutContainer>
       <FlyoutHeader data-e2e='confirmDepositBackButton' mode='back' onClick={backButtonClick}>
         <FormattedMessage id='modals.brokerage.confirm_deposit' defaultMessage='Confirm Deposit' />
       </FlyoutHeader>
-      <FlyoutSubHeader
-        data-e2e='depositConfirmAmount'
-        title={fiatToString({
-          unit: defaultMethod?.currency as FiatType,
-          value: amount
-        })}
-        subTitle=''
-      />
+      <FlyoutSubHeader data-e2e='depositConfirmAmount' title={formattedAmount} subTitle='' />
       <FlyoutContent mode='top'>
         <CheckoutRow
-          text={getBankFormatted(defaultMethod)}
+          text={bankAccount}
           title={<FormattedMessage id='copy.from' defaultMessage='From' />}
         />
         <CheckoutRow
@@ -116,15 +118,39 @@ const Success = ({ defaultMethod, depositTerms, formValues }: Props) => {
           />
         )}
         <CheckoutRow
-          text={fiatToString({
-            digits: 0,
-            unit: defaultMethod?.currency || ('USD' as FiatType),
-            value: amount
-          })}
+          text={formattedAmount}
           title={<FormattedMessage id='copy.total' defaultMessage='Total' />}
         />
         {availableToTradeWithdraw && <AvailabilityRows depositTerms={depositTerms} />}
 
+        <MoreInfoContainer
+          teaser={
+            <FormattedMessage
+              id='modals.deposit.confirm.by_placing_this_order'
+              defaultMessage='By placing this order, you authorize Blockchain.com, Inc. to debit {totalAmount} from your bank account.'
+              values={{ totalAmount: formattedAmount }}
+            />
+          }
+          text={
+            <>
+              <Padding bottom={1}>
+                <FormattedMessage
+                  id='modals.deposit.confirm.you_authorize_blockchain'
+                  defaultMessage='You authorize Blockchain.com, Inc. to debit your {paymentAccount} account for up to {totalAmount} via Bank Transfer (ACH) and, if necessary, to initiate credit entries/adjustments for any debits made in error to your account at the financial institution where you hold your account. You acknowledge that the origination of ACH transactions to your account complies with the provisions of U.S. law. You agree that this authorization cannot be revoked. The debit will post to your bank account within 1-2 business days of you authorizing this transfer.'
+                  values={{ paymentAccount: bankAccount, totalAmount: formattedAmount }}
+                />
+              </Padding>
+              <Padding bottom={1}>
+                <FormattedMessage
+                  id='modals.deposit.confirm.your_deposit_will_be_credited'
+                  defaultMessage='Your deposit will be credited to your Blockchain.com account within 2-4 business days at the rate shown at the time of your purchase. You can withdraw these funds from your Blockchain.com account {withdrawalLockDays} days after Blockchain.com receives funds from your financial institution.'
+                  values={{ withdrawalLockDays: 3 }}
+                />
+              </Padding>
+            </>
+          }
+        />
+
         {showConversionDisclaimer && (
           <FiatNoticeWrapper>
             <Text weight={600} size='14px' lineHeight='21px' style={{ marginBottom: '8px' }}>

diff --git a/...chain-wallet-v4-frontend/src/modals/Brokerage/Banks/Deposit/Confirm/MoreInfoContainer.tsx b/...chain-wallet-v4-frontend/src/modals/Brokerage/Banks/Deposit/Confirm/MoreInfoContainer.tsx
@@ -0,0 +1,48 @@
+import { Padding, Button, Text } from '@blockchain-com/constellation'
+import { FlyoutWrapper } from 'components/Flyout'
+import React, { FC, ReactNode, useState } from 'react'
+import styled from 'styled-components'
+
+const Container = styled(FlyoutWrapper)`
+  display: flex;
+  flex-direction: column;
+  padding-top: 30px;
+  height: 100%;
+  border-top: 1px solid ${(props) => props.theme.grey000};
+`
+
+export const MoreInfoContainer: FC<{ teaser: ReactNode; text: ReactNode }> = ({ teaser, text }) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const handleClick = (e) => {
+    e.preventDefault()
+    if (isOpen) {
+      setIsOpen(false)
+    } else {
+      setIsOpen(true)
+    }
+  }
+  return (
+    <Container>
+      <Padding bottom={1}>
+        <Text as='p' variant='caption1'>
+          {teaser}
+        </Text>
+      </Padding>
+      {isOpen && (
+        <Text as='p' variant='caption1'>
+          {text}
+        </Text>
+      )}
+      <Button
+        as='button'
+        onClick={handleClick}
+        size='small'
+        state='initial'
+        text={isOpen ? 'Read Less' : 'Read More'}
+        type='button'
+        variant='minimal'
+        width='auto'
+      />
+    </Container>
+  )
+}
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/model.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/model.tsx
@@ -289,7 +289,7 @@ export const getLockRuleMessaging = ({
               <Padding bottom={1}>
                 <FormattedMessage
                   id='modals.simplebuy.confirm.you_authorize_blockchain'
-                  defaultMessage='You authorize Blockchain.com, Inc. to debit your {paymentAccount} account for up to {totalAmount} via Bank Transfer (ACH) and, if necessary, to initiate credit entries/adjustments for any debits made in error to your account at the financial institution where you hold your account. You acknowledge that the origination of ACH transactions to your account complies with the provisions of U.S. law. You agree that this authorization cannot be revoked.'
+                  defaultMessage='You authorize Blockchain.com, Inc. to debit your {paymentAccount} account for up to {totalAmount} via Bank Transfer (ACH) and, if necessary, to initiate credit entries/adjustments for any debits made in error to your account at the financial institution where you hold your account. You acknowledge that the origination of ACH transactions to your account complies with the provisions of U.S. law. You agree that this authorization cannot be revoked. The debit will post to your bank account within 1-2 business days of you authorizing this transfer.'
                   values={{ paymentAccount, totalAmount }}
                 />
               </Padding>