Update Capital Financing Promotion params (#113)

* add capital financing html params * Update to exported FinancingPromotionLayoutType * bump connect-js dependency --------- Co-authored-by: bv-stripe <53542182+bv-stripe@users.noreply.github.com>
stripe · Sep 16, 2024 · ad271b2 · ad271b2
1 parent 2e49e20
commit ad271b2
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 45 deletions.
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "@babel/preset-react": "7.18.6",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-replace": "^2.3.1",
-    "@stripe/connect-js": "3.3.16-beta-1",
+    "@stripe/connect-js": "3.3.17-beta-1",
     "@types/jest": "^24.0.25",
     "@types/react": "^16.8.0",
     "@types/react-dom": "^16.8.0",
@@ -84,7 +84,7 @@
     "zx": "^4.2.0"
   },
   "peerDependencies": {
-    "@stripe/connect-js": ">=3.3.16-beta-1",
+    "@stripe/connect-js": ">=3.3.17-beta-1",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   }

diff --git a/src/Components.tsx b/src/Components.tsx
@@ -1,6 +1,11 @@
 import {useCreateComponent} from './useCreateComponent';
 import {useUpdateWithSetter} from './utils/useUpdateWithSetter';
-import {CollectionOptions, FetchEphemeralKeyFunction} from './types';
+import {
+  CollectionOptions,
+  FetchEphemeralKeyFunction,
+  FinancingProductType,
+  FinancingPromotionLayoutType,
+} from './types';
 import {
   LoadError,
   LoaderStart,
@@ -446,38 +451,28 @@ export const ConnectCapitalFinancing = ({
   supportUrl?: string;
   onFinancingsLoaded?: ({total}: {total: number}) => void;
 } & CommonComponentProps): JSX.Element => {
-  const {wrapper, component: capitalFinancing} = 
+  const {wrapper, component: capitalFinancing} =
     useCreateComponent('capital-financing');
 
-  useUpdateWithSetter(
-    capitalFinancing,
-    defaultFinancingOffer,
-    (comp, val) => comp.setDefaultFinancingOffer(val)
+  useUpdateWithSetter(capitalFinancing, defaultFinancingOffer, (comp, val) =>
+    comp.setDefaultFinancingOffer(val)
   );
 
-  useUpdateWithSetter(
-    capitalFinancing,
-    showFinancingSelector,
-    (comp, val) => comp.setShowFinancingSelector(val)
-  )
+  useUpdateWithSetter(capitalFinancing, showFinancingSelector, (comp, val) =>
+    comp.setShowFinancingSelector(val)
+  );
 
-  useUpdateWithSetter(
-    capitalFinancing,
-    faqUrl,
-    (comp, val) => comp.setFaqUrl(val)
-  )
+  useUpdateWithSetter(capitalFinancing, faqUrl, (comp, val) =>
+    comp.setFaqUrl(val)
+  );
 
-  useUpdateWithSetter(
-    capitalFinancing,
-    supportUrl,
-    (comp, val) => comp.setSupportUrl(val)
-  )
+  useUpdateWithSetter(capitalFinancing, supportUrl, (comp, val) =>
+    comp.setSupportUrl(val)
+  );
 
-  useUpdateWithSetter(
-    capitalFinancing,
-    onFinancingsLoaded,
-    (comp, val) => comp.setOnFinancingsLoaded(val)
-  )
+  useUpdateWithSetter(capitalFinancing, onFinancingsLoaded, (comp, val) =>
+    comp.setOnFinancingsLoaded(val)
+  );
 
   useUpdateWithSetter(capitalFinancing, onLoaderStart, (comp, val) => {
     comp.setOnLoaderStart(val);
@@ -496,18 +491,23 @@ export const ConnectCapitalFinancingApplication = ({
 }: {
   onApplicationSubmitted: () => void;
 } & CommonComponentProps): JSX.Element => {
-  const {wrapper, component: capitalFinancingApplication} =
-    useCreateComponent('capital-financing-application');
+  const {wrapper, component: capitalFinancingApplication} = useCreateComponent(
+    'capital-financing-application'
+  );
 
   useUpdateWithSetter(
     capitalFinancingApplication,
     onApplicationSubmitted,
     (comp, val) => comp.setOnApplicationSubmitted(val)
-  )
+  );
 
-  useUpdateWithSetter(capitalFinancingApplication, onLoaderStart, (comp, val) => {
-    comp.setOnLoaderStart(val);
-  });
+  useUpdateWithSetter(
+    capitalFinancingApplication,
+    onLoaderStart,
+    (comp, val) => {
+      comp.setOnLoaderStart(val);
+    }
+  );
   useUpdateWithSetter(capitalFinancingApplication, onLoadError, (comp, val) => {
     comp.setOnLoadError(val);
   });
@@ -516,20 +516,35 @@ export const ConnectCapitalFinancingApplication = ({
 };
 
 export const ConnectCapitalFinancingPromotion = ({
+  layout,
   onApplicationSubmitted,
+  onEligibleFinancingOfferLoaded,
   onLoadError,
   onLoaderStart,
 }: {
+  layout?: FinancingPromotionLayoutType;
+  onEligibleFinancingOfferLoaded?: ({
+    productType,
+  }: FinancingProductType) => void;
   onApplicationSubmitted?: () => void;
 } & CommonComponentProps): JSX.Element => {
-  const {wrapper, component: capitalPromotion} =
-    useCreateComponent('capital-financing-promotion');
-
+  const {wrapper, component: capitalPromotion} = useCreateComponent(
+    'capital-financing-promotion'
+  );
+
+  useUpdateWithSetter(capitalPromotion, layout, (comp, val) =>
+    comp.setLayout(val)
+  );
+
+  useUpdateWithSetter(capitalPromotion, onApplicationSubmitted, (comp, val) =>
+    comp.setOnApplicationSubmitted(val)
+  );
+
   useUpdateWithSetter(
     capitalPromotion,
-    onApplicationSubmitted,
-    (comp, val) => comp.setOnApplicationSubmitted(val)
-  )
+    onEligibleFinancingOfferLoaded,
+    (comp, val) => comp.setOnEligibleFinancingOfferLoaded(val)
+  );
 
   useUpdateWithSetter(capitalPromotion, onLoaderStart, (comp, val) => {
     comp.setOnLoaderStart(val);

diff --git a/src/types.ts b/src/types.ts
@@ -11,3 +11,9 @@ export type FetchEphemeralKeyFunction = (fetchParams: {
   nonce: string;
   ephemeralKeySecret: string;
 }>;
+
+export type FinancingProductType = {
+  productType: 'standard' | 'refill' | 'none';
+};
+
+export type FinancingPromotionLayoutType = 'full' | 'banner';
diff --git a/src/utils/useUpdateWithSetter.ts b/src/utils/useUpdateWithSetter.ts
@@ -1,5 +1,9 @@
 import React from 'react';
-import {CollectionOptions, FetchEphemeralKeyFunction} from '../types';
+import {
+  CollectionOptions,
+  FetchEphemeralKeyFunction,
+  FinancingProductType,
+} from '../types';
 import {
   LoadError,
   LoaderStart,
@@ -20,6 +24,7 @@ export const useUpdateWithSetter = <
     | ((loaderStart: LoaderStart) => void)
     | ((loaderError: LoadError) => void)
     | ((installState: InstallState) => void)
+    | ((productType: FinancingProductType) => void)
     | undefined
 >(
   component: T | null,

diff --git a/yarn.lock b/yarn.lock
@@ -1454,10 +1454,10 @@
   dependencies:
     "@sinonjs/commons" "^3.0.0"
 
-"@stripe/connect-js@3.3.16-beta-1":
-  version "3.3.16-beta-1"
-  resolved "https://registry.yarnpkg.com/@stripe/connect-js/-/connect-js-3.3.16-beta-1.tgz#b529366fb85694d9d972d98e23fac6e1c2036809"
-  integrity sha512-SI3lx7W5GRVOZQbk3Lmy7MW6gkeAFV4YmIp2T3DtmHy/uzy8S6PdYqMdEazI+/EE08hLctrGEEsWAx03R5LF3g==
+"@stripe/connect-js@3.3.17-beta-1":
+  version "3.3.17-beta-1"
+  resolved "https://registry.yarnpkg.com/@stripe/connect-js/-/connect-js-3.3.17-beta-1.tgz#95e33d3c63dae4d751a89f5f2a499d32c54bfdae"
+  integrity sha512-cPaSbuov4wO2KlEk3q37Wv6EQIMaqZ0hKiAo6jN4NeGid2oWKkR0NNAbQRcW7Nsyjk2ZcxSRXyvhUJUoTUXWvg==
 
 "@tootallnate/once@2":
   version "2.0.0"