Adding the new CapitalFinancingPromotion component (#209)

Adding the new CapitalFinancingPromotion component Switch the old CapitalOverview embedded component to the new CapitalFinancingPromotion embedded component. This new embedded component will display details of a financing offer for the account if there is one.
stripe · Jan 7, 2025 · 0e96d6d · 0e96d6d
1 parent da62221
commit 0e96d6d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/app/(dashboard)/finances/page.tsx b/app/(dashboard)/finances/page.tsx
@@ -2,7 +2,10 @@
 
 import React, {useState, useEffect} from 'react';
 import {
+  ConnectCapitalFinancing,
+  ConnectCapitalFinancingPromotion,
   ConnectCapitalOverview,
+  ConnectComponentsProvider,
   ConnectFinancialAccount,
   ConnectFinancialAccountTransactions,
 } from '@stripe/react-connect-js';
@@ -11,8 +14,23 @@ import EmbeddedComponentContainer from '@/app/components/EmbeddedComponentContai
 import {LandmarkIcon, LoaderCircle} from 'lucide-react';
 import {Button} from '@/components/ui/button';
 import {useFinancialAccount} from '@/app/hooks/useFinancialAccount';
+import {FinancingProductType} from '@stripe/connect-js';
 
 export default function Finances() {
+  // Only show the financing offer if there is one to show
+  const [showFinancingOffer, setShowFinancingOffer] = React.useState(false);
+  const handleFinancingOfferLoaded = ({productType}: FinancingProductType) => {
+    switch (productType) {
+      case 'none':
+        setShowFinancingOffer(false);
+        break;
+      case 'standard':
+      case 'refill':
+        setShowFinancingOffer(true);
+        break;
+    }
+  };
+
   const {
     financialAccount,
     error: useFinancialAccountError,
@@ -69,9 +87,11 @@ export default function Finances() {
     <>
       {displayFinancialAccount ? (
         <>
-          <Container>
-            <EmbeddedComponentContainer componentName="CapitalOverview">
-              <ConnectCapitalOverview />
+          <Container className={showFinancingOffer ? '' : 'hidden'}>
+            <EmbeddedComponentContainer componentName="CapitalFinancingPromotion">
+              <ConnectCapitalFinancingPromotion
+                onEligibleFinancingOfferLoaded={handleFinancingOfferLoaded}
+              />
             </EmbeddedComponentContainer>
           </Container>
           <Container>

diff --git a/app/api/account_session/route.ts b/app/api/account_session/route.ts
@@ -140,7 +140,7 @@ export async function POST(req: NextRequest) {
             disable_stripe_user_authentication: isCustom,
           },
         },
-        capital_overview: {
+        capital_financing_promotion: {
           enabled: true,
         },
         ...(hasIssuingAndTreasury ? issuingAndTreasuryComponents : {}),

diff --git a/app/components/EmbeddedComponentContainer.tsx b/app/components/EmbeddedComponentContainer.tsx
@@ -20,8 +20,8 @@ const EmbeddedComponentContainer = ({
         'https://docs.stripe.com/connect/supported-embedded-components/account-onboarding',
       Balances:
         'https://docs.stripe.com/connect/supported-embedded-components/balances',
-      CapitalOverview:
-        'https://docs.stripe.com/connect/supported-embedded-components/capital-overview',
+      CapitalFinancingPromotion:
+        'https://docs.stripe.com/connect/supported-embedded-components/capital-financing-promotion',
       Documents:
         'https://docs.stripe.com/connect/supported-embedded-components/documents',
       FinancialAccount: