@stigg/react-sdk 4.4.0-beta.0 → 4.4.0-beta.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.4.0-beta.0",
+  "version": "4.4.0-beta.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -101,7 +101,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.10.13",
-    "@stigg/js-client-sdk": "2.19.1",
+    "@stigg/js-client-sdk": "2.21.0",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.1",
     "@types/styled-components": "^5.1.26",

package/src/components/checkout/Checkout.tsx

@@ -22,8 +22,7 @@ export const Checkout = ({
       planId={planId}
       preferredBillingPeriod={preferredBillingPeriod}
       billingCountryCode={billingCountryCode}
-      billableFeatures={billableFeatures}
-    >
+      billableFeatures={billableFeatures}>
       <CheckoutContainer {...containerProps} />
     </CheckoutProvider>
   );

package/src/components/checkout/CheckoutProvider.tsx

@@ -1,5 +1,5 @@
 import { produce } from 'immer';
-import React, { useCallback, useContext, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
 import { BillableFeature, BillingPeriod, GetCheckoutStateResults } from '@stigg/js-client-sdk';
 
@@ -58,12 +58,16 @@ const CheckoutContextProvider: React.FC<{ children: React.ReactNode; initialStat
 }) => {
   const [state, innerSetState] = useState(initialState);
 
+  useEffect(() => {
+    innerSetState(initialState);
+  }, [initialState]);
+
   const setState = useCallback(
     (updater: (state: CheckoutContextState) => void) => innerSetState((old) => produce(old, (draft) => updater(draft))),
     [innerSetState],
   );
 
-  const [contextValue, setContextValue] = useMemo(() => [state, setState], [state]);
+  const [contextValue, setContextValue] = useMemo(() => [state, setState], [setState, state]);
 
   return <CheckoutContext.Provider value={[contextValue, setContextValue]}>{children}</CheckoutContext.Provider>;
 };
@@ -82,11 +86,11 @@ export function CheckoutProvider({
   children,
   textOverrides,
   theme,
+  preferredBillingPeriod,
+  billableFeatures,
   resourceId,
   planId,
-  preferredBillingPeriod,
   billingCountryCode,
-  billableFeatures,
 }: {
   children: React.ReactNode;
 } & CheckoutProviderProps) {
@@ -130,16 +134,8 @@ export function CheckoutProvider({
     };
 
     return initialState;
-  }, [
-    theme,
-    textOverrides,
-    preferredBillingPeriod,
-    billingCountryCode,
-    billableFeatures,
-    globalTheme,
-    checkout,
-    isLoading,
-  ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [preferredBillingPeriod, billingCountryCode, checkout, isLoading]);
 
   return (
     <SdkThemeProvider key={checkout?.plan.id} componentTheme={configuration}>

package/src/components/checkout/hooks/usePreviewSubscription.ts

@@ -10,7 +10,7 @@ export const usePreviewSubscriptionAction = () => {
   const subscription = useSubscriptionModel();
   const [{ resourceId, planStep }] = useCheckoutContext();
   const { checkoutState } = useCheckoutModel();
-  const { plan, activeSubscription, customer } = checkoutState || {};
+  const { plan, customer } = checkoutState || {};
 
   const previewSubscriptionAction = useCallback(
     async ({ promotionCode }: { promotionCode?: string | null } = {}) => {
@@ -43,7 +43,6 @@ export const usePreviewSubscriptionAction = () => {
       return { subscriptionPreview, errorMessage };
     },
     [
-      activeSubscription,
       customer,
       plan,
       resourceId,

package/src/components/checkout/index.ts

@@ -1,3 +1,4 @@
 export { CheckoutTheme } from './theme';
 export { Checkout, CheckoutProps } from './Checkout';
+export { OnCheckoutCompletedParams, OnCheckoutParams, CheckoutResult } from './CheckoutContainer';
 export { CheckoutLocalization } from './textOverrides';

package/src/components/checkout/summary/CheckoutSuccess.tsx

@@ -7,9 +7,7 @@ import animationData from '../../../assets/lottie/checkout-success.json';
 
 export const ANIMATION_DURATION = 5000;
 
-const BACKGROUND_COLOR = Color('#0b2f7a')
-  .alpha(0.3)
-  .toString();
+const BACKGROUND_COLOR = Color('#0b2f7a').alpha(0.3).toString();
 
 const CheckoutSuccessContainer = styled(Box)`
   position: absolute;
@@ -26,7 +24,7 @@ const CheckoutSuccessContainer = styled(Box)`
 export function CheckoutSuccess() {
   return (
     <CheckoutSuccessContainer>
-      <Lottie options={{ loop: false, autoplay: true, animationData }} />
+      <Lottie width={350} options={{ loop: false, autoplay: true, animationData }} />
     </CheckoutSuccessContainer>
   );
 }

package/src/stories/Checkout.stories.tsx

@@ -46,6 +46,7 @@ const Template: ComponentStory<any> = (args) => (
       onChangePlan={({ currentPlan }) => {
         console.log('plan changed clicked!', { currentPlan });
       }}
+      // billingInformation={{ taxPercentage: 27 }}
     />
   </Wrapper>
 );
@@ -56,6 +57,7 @@ DefaultCheckout.args = {
   planId: 'plan-revvenu-essentials',
   // baseUri: 'http://localhost:4000',
   // apiKey: 'client-72b058a6-0f22-4c86-adce-bf266d12e12e:9f356ceb-c94c-42a4-9572-10b12824da81',
+  // disableEdge: false,
   baseUri: 'https://api-staging.stigg.io',
   apiKey: 'client-79584f52-7ef9-4c58-b9ac-5080acf492e4:71f2274c-100a-4fa4-8a43-48fa3b16c627',
 };