Merge pull request #6355 from blockchain/feat/BCPAY-882-prove-url

feat(prove): added bcpay prove dedicated link
blockchain · Apr 16, 2024 · aa76819 · aa76819
2 parents 7a4d21a + 757cf6e
commit aa76819
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 15 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Prove/constants.ts b/packages/blockchain-wallet-v4-frontend/src/scenes/Prove/constants.ts
@@ -3,22 +3,25 @@ export const LINK_BACK_TO_APP =
 
 export const VFP_STORE_URL = '/nabu-gateway/onboarding/prove/possession/instant-link/vfp-store'
 
-export const TEXT_ELEMENTS = {
+export const TEXT_ELEMENTS = (isBcPay: boolean) => ({
   error: {
-    description:
-      'Return to the Blockchain.com App to get a new one and continue with the verification process.',
+    description: isBcPay
+      ? 'Close this tab, and return to Blockchain.com Pay to get a new link and continue with the verification process.'
+      : 'Return to the Blockchain.com App to get a new one and continue with the verification process.',
     iconProps: {
       color: 'error',
       name: 'close-circle'
     },
     title: 'Your link has expired'
   },
   verified: {
-    description: 'Return to the Blockchain.com App to continue with the verification process.',
+    description: isBcPay
+      ? 'Close this tab, and return to Blockchain.com Pay to continue with the verification process.'
+      : 'Return to the Blockchain.com App to continue with the verification process.',
     iconProps: {
       color: 'success',
       name: 'checkmark-circle-filled'
     },
     title: 'Your device is verified!'
   }
-}
+})
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Prove/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Prove/index.tsx
@@ -21,6 +21,7 @@ const ContentWrapper = styled.div`
 
 const Prove: React.FC<ProveProps> = ({ location: { pathname, search } }) => {
   const isExpired = pathname.includes('/expired')
+  const isBCPay = pathname.includes('/bcpay')
 
   const [proveStatus, setProveStatus] = useState<ProveStates>(isExpired ? 'error' : 'loading')
 
@@ -47,7 +48,7 @@ const Prove: React.FC<ProveProps> = ({ location: { pathname, search } }) => {
 
   if (proveStatus === 'loading') return <SpinningLoader />
 
-  const { description, iconProps, title } = TEXT_ELEMENTS[proveStatus]
+  const { description, iconProps, title } = TEXT_ELEMENTS(isBCPay)[proveStatus]
 
   return (
     <Wrapper>
@@ -69,14 +70,16 @@ const Prove: React.FC<ProveProps> = ({ location: { pathname, search } }) => {
           />
         </Text>
       </ContentWrapper>
-      <Link href={LINK_BACK_TO_APP}>
-        <Button data-e2e='back-to-app' fullwidth style={{ marginTop: '1rem' }}>
-          <FormattedMessage
-            id='scenes.prove.back'
-            defaultMessage='Go back to the Blockchain.com App'
-          />
-        </Button>
-      </Link>
+      {!isBCPay && (
+        <Link href={LINK_BACK_TO_APP}>
+          <Button data-e2e='back-to-app' fullwidth style={{ marginTop: '1rem' }}>
+            <FormattedMessage
+              id='scenes.prove.back'
+              defaultMessage='Go back to the Blockchain.com App'
+            />
+          </Button>
+        </Link>
+      )}
     </Wrapper>
   )
 }

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/app.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/app.tsx
@@ -295,6 +295,13 @@ const App = ({
                                   pageTitle={`${BLOCKCHAIN_TITLE} | Verify Device`}
                                 />
                               )}
+                              {isProveEnabled && (
+                                <AuthLayout
+                                  path='/prove/bcpay/instant-link/callback'
+                                  component={Prove}
+                                  pageTitle={`${BLOCKCHAIN_TITLE} | Verify Device`}
+                                />
+                              )}
                               {/* DEX routes */}
                               {isDexEnabled && (
                                 <DexLayout

diff --git a/packages/blockchain-wallet-v4/src/redux/walletOptions/selectors.ts b/packages/blockchain-wallet-v4/src/redux/walletOptions/selectors.ts
@@ -231,7 +231,7 @@ export const getImportedAddressSweep = (state: RootState) =>
 // prove
 export const getProveEnabled = (state: RootState) =>
   getWebOptions(state).map(path(['featureFlags', 'proveEnabled']))
-  
+
 export const getFiatEntityRemediationAlert = (state: RootState) =>
   getWebOptions(state).map(path(['featureFlags', 'showFiatEntityRemediationAlert']))
 // sofi