@stigg/react-sdk 4.3.0-beta.0 → 4.3.0-beta.1

package/dist/stories/CustomerPortal.stories.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("..").PaywallProps>;
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("..").CustomerPortalProps>;
 export default _default;
 export declare const DefaultCustomerPortal: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, any>;
 export declare const CustomerPortalTheming: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, any>;

package/package.json

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

package/src/components/checkout/CheckoutContainer.style.ts

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled/macro';
 import Box from '@mui/material/Box';
 
-export const CheckoutLayout = styled.div<{ $backgroundColor: string; $borderColor: string }>`
+export const CheckoutLayout = styled.div`
   margin: auto;
   width: 100%;
   max-width: 920px;
@@ -11,8 +11,8 @@ export const CheckoutLayout = styled.div<{ $backgroundColor: string; $borderColo
 
   padding: 16px 32px;
   border-radius: 10px;
-  background-color: ${({ $backgroundColor }) => $backgroundColor};
-  border: ${({ $borderColor }) => `1px solid ${$borderColor}`};
+  background-color: ${({ theme }) => theme.stigg.palette.backgroundPaper};
+  border: ${({ theme }) => `1px solid ${theme.stigg.palette.outlinedBorder}`};
 
   & * {
     box-sizing: border-box;

package/src/components/checkout/CheckoutContainer.tsx

@@ -10,7 +10,7 @@ import { PaymentStep } from './steps/payment';
 import { useStripeIntegration } from './steps/payment/stripe';
 import { CheckoutPlanStep } from './steps/plan';
 import { ApplySubscription, CheckoutStatePlan } from '@stigg/js-client-sdk';
-import { useStiggTheme } from '../../theme/Theme';
+import { useCheckoutContext } from './CheckoutProvider';
 
 // import { SurpriseStep } from './steps/surprise/SurpriseStep';
 
@@ -46,7 +46,7 @@ export type CheckoutContainerProps = {
 
 export function CheckoutContainer({ onCheckout, onCheckoutCompleted, onChangePlan }: CheckoutContainerProps) {
   const { stripePromise, setupIntentClientSecret } = useStripeIntegration();
-  const stiggTheme = useStiggTheme();
+  const [{ stiggTheme }] = useCheckoutContext();
   const { progressBarState } = useProgressBarModel();
   const { activeStep } = progressBarState;
 
@@ -73,11 +73,7 @@ export function CheckoutContainer({ onCheckout, onCheckoutCompleted, onChangePla
         },
       }}
     >
-      <CheckoutLayout
-        className="stigg-checkout-layout"
-        $backgroundColor={stiggTheme.palette.backgroundPaper}
-        $borderColor={stiggTheme.palette.outlinedBorder}
-      >
+      <CheckoutLayout className="stigg-checkout-layout">
         <CheckoutProgressBar />
         <CheckoutContent>
           <CheckoutPanel>

package/src/components/checkout/CheckoutProvider.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useContext, useMemo, useState } from 'react';
 
 import { BillableFeature, BillingPeriod, GetCheckoutStateResults } from '@stigg/js-client-sdk';
 
-import { SdkThemeProvider, useStiggTheme } from '../../theme/Theme';
+import { CustomizedTheme, SdkThemeProvider, useStiggTheme } from '../../theme/Theme';
 import { DeepPartial } from '../../types';
 import { mapCheckoutConfiguration } from '../common/mapExternalTheme';
 import {
@@ -20,10 +20,12 @@ import {
 } from './hooks';
 import { CheckoutLocalization, getResolvedCheckoutLocalize } from './textOverrides';
 import { CheckoutTheme, getResolvedCheckoutTheme } from './theme';
+import { StiggTheme } from '../../theme/types';
 
 export interface CheckoutContextState {
   checkout?: GetCheckoutStateResults | null;
   checkoutLocalization: CheckoutLocalization;
+  stiggTheme: StiggTheme;
   theme: CheckoutTheme;
   isLoading: boolean;
   resourceId?: string;
@@ -90,8 +92,10 @@ export function CheckoutProvider({
   children: React.ReactNode;
 } & CheckoutProviderProps) {
   const { checkout, isLoading } = useLoadCheckout({ resourceId, planId, billingCountryCode });
-  const configuration = checkout?.configuration ? mapCheckoutConfiguration(checkout.configuration) : undefined;
-  const globalTheme = useStiggTheme(configuration);
+  const configuration: CustomizedTheme | undefined = checkout?.configuration
+    ? mapCheckoutConfiguration(checkout.configuration)
+    : undefined;
+  const globalTheme: StiggTheme = useStiggTheme(configuration);
   const checkoutTheme = getResolvedCheckoutTheme(globalTheme, theme, checkout?.configuration);
   const checkoutLocalization = getResolvedCheckoutLocalize(textOverrides);
 
@@ -115,6 +119,7 @@ export function CheckoutProvider({
       checkout,
       isLoading,
       checkoutLocalization,
+      stiggTheme: globalTheme,
       theme: checkoutTheme,
       progressBar,
       planStep,
@@ -125,7 +130,7 @@ export function CheckoutProvider({
     };
 
     return initialState;
-  }, [billingCountryCode, preferredBillingPeriod, checkout]);
+  }, [theme, globalTheme, billingCountryCode, preferredBillingPeriod, checkout]);
 
   return (
     <SdkThemeProvider key={checkout?.plan.id} componentTheme={configuration}>

package/src/components/checkout/CheckoutSummary.tsx

@@ -22,7 +22,7 @@ import { getTierByQuantity } from '../utils/priceTierUtils';
 
 const SummaryCard = styled(Paper)`
   border-radius: 10px;
-  background: #f8f9fb;
+  background: ${({ theme }) => theme.stigg.palette.backgroundHighlight};
   padding: 16px;
 `;
 

package/src/components/checkout/components/InputField.tsx

@@ -3,6 +3,7 @@ import { OutlinedInputProps, TextField } from '@mui/material';
 
 export const InputField = styled(TextField)<OutlinedInputProps>(({ theme }) => ({
   '& .MuiOutlinedInput-root': {
+    height: '42px',
     borderRadius: theme.stigg.border.radius,
     fieldset: {
       borderColor: theme.stigg.palette.outlinedBorder,
@@ -17,7 +18,5 @@ export const InputField = styled(TextField)<OutlinedInputProps>(({ theme }) => (
     fontFamily: theme.stigg.typography.fontFamily,
     color: theme.stigg.palette.text.primary,
     ...theme.stigg.typography.body,
-
-    height: '42px',
   },
 }));

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

@@ -12,7 +12,7 @@ type useLoadCheckoutProps = {
 export function useLoadCheckout({ planId, resourceId, billingCountryCode }: useLoadCheckoutProps) {
   const { stigg } = useStiggContext();
   const [isLoading, setIsLoading] = useState(false);
-  const [checkout, setCheckout] = useState<(GetCheckoutStateResults & { configuration?: {} }) | null>();
+  const [checkout, setCheckout] = useState<GetCheckoutStateResults | null>();
 
   useEffect(() => {
     const loadCheckout = async () => {

package/src/components/checkout/index.ts

@@ -1,3 +1,3 @@
-export { CheckoutConfiguration } from './types';
+export { CheckoutTheme } from './theme';
 export { Checkout, CheckoutProps } from './Checkout';
 export { CheckoutLocalization } from './textOverrides';

package/src/components/checkout/steps/payment/stripe/StripePaymentForm.tsx

@@ -6,7 +6,7 @@ import { useCheckoutModel } from '../../../hooks';
 
 export function StripePaymentForm() {
   const { checkoutState, checkoutLocalization } = useCheckoutModel();
-  const { customer } = checkoutState || {};
+  const { customer, configuration } = checkoutState || {};
 
   return (
     <Grid flexDirection="column" container gap={3} padding="16px">
@@ -15,7 +15,7 @@ export function StripePaymentForm() {
         <AddressElement
           options={{
             mode: 'billing',
-            fields: { phone: 'always' },
+            fields: { phone: !!configuration?.content?.collectPhoneNumber ? 'always' : 'auto' },
             defaultValues: {
               ...(customer?.name && { name: customer.name }),
             },

package/src/components/checkout/steps/plan/BillingPeriodPicker.style.tsx

@@ -15,7 +15,7 @@ export const BillingPeriodButton = styled.button<{ $isActive?: boolean; $disable
   border-radius: 10px;
   border: ${({ theme, $isActive }) =>
     `1px solid ${$isActive ? theme.stigg.palette.outlinedRestingBorder : theme.stigg.palette.outlinedBorder}`};
-  background: ${({ $isActive }) => ($isActive ? '#e5f2ff' : '#fff')};
+  background: ${({ theme, $isActive }) => ($isActive ? theme.stigg.palette.backgroundSection : 'transparent')};
   text-transform: none;
   text-align: start;
 

package/src/components/checkout/theme.ts

@@ -1,26 +1,43 @@
+import { CheckoutConfiguration } from '@stigg/js-client-sdk';
 import { StiggTheme } from '../../theme/types';
 import { DeepPartial } from '../../types';
-import { CheckoutConfiguration } from './types';
 
 export type CheckoutTheme = {
-  // sectionTitleColor: string;
-  // planNameColor: string;
+  primary: string;
+  textColor: string;
   backgroundColor: string;
   borderColor: string;
-  // listItemBackgroundColor: string;
-  // tabMaxHeight: string;
-  // iconsColor: string;
+  selectionColor: string;
+  summaryBackgroundColor: string;
+};
+
+const defaultCheckoutTheme: CheckoutTheme = {
+  primary: 'rgb(50, 126, 238)',
+  textColor: 'rgb(0, 30, 108)',
+  backgroundColor: 'rgb(255, 255, 255)',
+  borderColor: 'rgb(235, 237, 243)',
+  selectionColor: 'rgb(229, 242, 255)',
+  summaryBackgroundColor: 'rgb(109, 121, 144)',
 };
 
 export function getResolvedCheckoutTheme(
-  _globalTheme: StiggTheme,
+  globalTheme: StiggTheme,
   themeOverride?: DeepPartial<CheckoutTheme>,
-  remoteConfiguration?: CheckoutConfiguration | null,
-) {
-  // todo: implement theme customization
-  const checkoutDefaultTheme: CheckoutTheme = {
-    backgroundColor: themeOverride?.backgroundColor || remoteConfiguration?.palette?.backgroundColor || 'white',
-    borderColor: themeOverride?.borderColor || remoteConfiguration?.palette?.borderColor || 'rgba(0, 30, 108, 0.15)',
+  _remoteConfiguration?: CheckoutConfiguration | null, // all the remote colors override theme colors, no need to use them here
+): CheckoutTheme {
+  const { palette: globalPalette } = globalTheme || {};
+
+  return {
+    primary: themeOverride?.primary || globalPalette?.primary || defaultCheckoutTheme.primary,
+    textColor: themeOverride?.textColor || globalPalette?.text.primary || defaultCheckoutTheme.textColor,
+    backgroundColor:
+      themeOverride?.backgroundColor || globalPalette?.backgroundPaper || defaultCheckoutTheme.backgroundColor,
+    borderColor: themeOverride?.borderColor || globalPalette?.outlinedBorder || defaultCheckoutTheme.borderColor,
+    selectionColor:
+      themeOverride?.selectionColor || globalPalette?.backgroundSection || defaultCheckoutTheme.selectionColor,
+    summaryBackgroundColor:
+      themeOverride?.summaryBackgroundColor ||
+      globalPalette?.backgroundHighlight ||
+      defaultCheckoutTheme.summaryBackgroundColor,
   };
-  return checkoutDefaultTheme;
 }

package/src/components/common/mapExternalTheme.ts

@@ -1,12 +1,13 @@
 import {
   Alignment,
+  CheckoutConfiguration,
   CustomerPortalConfiguration,
   FontWeight as JSFontWeight,
   PaywallConfiguration,
+  TypographyConfiguration,
 } from '@stigg/js-client-sdk';
 import { CustomizedTheme } from '../../theme/Theme';
 import { HorizontalAlignment, FontWeight } from '../../theme/types';
-import { CheckoutConfiguration } from '../checkout/types';
 
 function addCssUnits(value?: number | null, unit: string = 'px') {
   if (!value) {
@@ -30,10 +31,7 @@ function mapFontWeight(defaultValue: FontWeight, fontWeight?: JSFontWeight | nul
   }
 }
 
-function mapTypography(
-  configuration: CustomerPortalConfiguration | PaywallConfiguration,
-): CustomizedTheme['typography'] {
-  const { typography } = configuration;
+function mapTypography(typography?: TypographyConfiguration | null): CustomizedTheme['typography'] {
   return {
     fontFamilyUrl: typography?.fontFamily || undefined,
     h1: {
@@ -70,7 +68,7 @@ function mapAlignment(alignment?: Alignment | null): HorizontalAlignment | undef
 }
 
 export function mapCustomerPortalConfiguration(configuration: CustomerPortalConfiguration): CustomizedTheme {
-  const { palette } = configuration;
+  const { palette, typography } = configuration;
   return {
     palette: {
       primary: palette?.primary || undefined,
@@ -81,12 +79,12 @@ export function mapCustomerPortalConfiguration(configuration: CustomerPortalConf
         primary: palette?.textColor || undefined,
       },
     },
-    typography: mapTypography(configuration),
+    typography: mapTypography(typography),
   };
 }
 
 export function mapPaywallConfiguration(paywallConfiguration: PaywallConfiguration): CustomizedTheme {
-  const { palette, layout, customCss } = paywallConfiguration;
+  const { palette, layout, customCss, typography } = paywallConfiguration;
   return {
     customCss: customCss || undefined,
     palette: {
@@ -98,7 +96,7 @@ export function mapPaywallConfiguration(paywallConfiguration: PaywallConfigurati
         primary: palette?.textColor || undefined,
       },
     },
-    typography: mapTypography(paywallConfiguration),
+    typography: mapTypography(typography),
     layout: {
       ctaAlignment: mapAlignment(layout?.alignment),
       headerAlignment: mapAlignment(layout?.alignment),
@@ -111,7 +109,19 @@ export function mapPaywallConfiguration(paywallConfiguration: PaywallConfigurati
   };
 }
 
-export function mapCheckoutConfiguration(_configuration: CheckoutConfiguration): CustomizedTheme {
-  // TODO: configuration should be of type CustomerPortalConfiguration
-  return {};
+export function mapCheckoutConfiguration(configuration: CheckoutConfiguration): CustomizedTheme {
+  const { palette, typography } = configuration;
+  return {
+    palette: {
+      primary: palette?.primary || undefined,
+      backgroundPaper: palette?.backgroundColor || undefined,
+      outlinedBorder: palette?.borderColor || undefined,
+      text: {
+        primary: palette?.textColor || undefined,
+      },
+      backgroundHighlight: palette?.selectionColor || undefined,
+      backgroundSection: palette?.summaryBackgroundColor || undefined,
+    },
+    typography: mapTypography(typography),
+  };
 }

package/src/index.ts

@@ -29,7 +29,7 @@ export {
   StiggContextValue,
   StiggContext,
 } from './components/StiggProvider';
-export { Checkout, CheckoutProps, CheckoutConfiguration } from './components/checkout';
+export { Checkout, CheckoutProps, CheckoutTheme } from './components/checkout';
 export { useWaitForCheckoutCompleted, ProvisionStatus } from './components/hooks';
 export { HorizontalAlignment, TextAlignment } from './theme/types';
 export { CustomizedTheme as Theme } from './theme/Theme';

package/src/stories/Checkout.stories.tsx

@@ -44,7 +44,6 @@ const Template: ComponentStory<any> = args => (
         const { success, errorMessage } = await checkoutAction();
         return { success, errorMessage };
       }}
-      billableFeatures={[{ featureId: 'feature-seat', quantity: 30 }]}
       onChangePlan={({ currentPlan }) => {
         console.log('plan changed clicked!', { currentPlan });
       }}
@@ -56,4 +55,8 @@ export const DefaultCheckout = Template.bind({});
 DefaultCheckout.args = {
   ...defaultArgsWithCustomer,
   planId: 'plan-revvenu-essentials',
+  baseUri: 'http://localhost:4000',
+  apiKey: 'client-72b058a6-0f22-4c86-adce-bf266d12e12e:9f356ceb-c94c-42a4-9572-10b12824da81',
+  // baseUri: 'https://api-staging.stigg.io',
+  // apiKey: 'client-79584f52-7ef9-4c58-b9ac-5080acf492e4:71f2274c-100a-4fa4-8a43-48fa3b16c627',
 };

package/src/stories/CustomerPortal.stories.tsx

@@ -39,7 +39,7 @@ export default {
       </StiggProvider>
     ),
   ],
-} as ComponentMeta<typeof Paywall>;
+} as ComponentMeta<typeof CustomerPortal>;
 
 const Wrapper = styled.div`
   width: 1000px;

package/dist/components/checkout/types.d.ts

@@ -1,7 +0,0 @@
-/** placeholder types until we have backend support **/
-export declare type CheckoutConfiguration = {
-    palette?: {
-        backgroundColor: string;
-        borderColor: string;
-    };
-};

package/src/components/checkout/types.ts

@@ -1,7 +0,0 @@
-/** placeholder types until we have backend support **/
-export type CheckoutConfiguration = {
-  palette?: {
-    backgroundColor: string;
-    borderColor: string;
-  };
-};