@stigg/react-sdk 4.4.2 → 4.4.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.4.2",
+  "version": "4.4.4",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/checkout/CheckoutContainer.tsx

@@ -111,6 +111,7 @@ export function CheckoutContainer({
 
   return (
     <Elements
+      key={setupIntentClientSecret}
       stripe={stripePromise}
       options={{
         ...stripeElementsMode,

package/src/components/checkout/promotionCode/AppliedPromotionCode.tsx

@@ -16,6 +16,18 @@ const AppliedCouponContainer = styled(Grid)`
   border: 1px solid ${({ theme }) => theme.stigg.palette.primary};
 `;
 
+export const StyledIcon = styled(Icon, { shouldForwardProp: (prop) => prop !== 'style' })<{ $shouldFill?: boolean }>`
+  display: flex;
+
+  g {
+    stroke: ${({ theme }) => theme.stigg.palette.primary};
+  }
+
+  path {
+    fill: ${({ theme, $shouldFill }) => ($shouldFill ? theme.stigg.palette.primary : undefined)};
+  }
+`;
+
 export type AppliedPromotionCodeProps = {
   promotionCode: string;
   onClearPromotionCode: () => void;
@@ -24,14 +36,14 @@ export type AppliedPromotionCodeProps = {
 export const AppliedPromotionCode = ({ promotionCode, onClearPromotionCode }: AppliedPromotionCodeProps) => (
   <AppliedCouponContainer container>
     <Grid item display="flex" gap={1} alignItems="center">
-      <Icon icon="Coupon" style={{ display: 'flex' }} />
+      <StyledIcon icon="Coupon" />
       <Typography variant="body1" color="primary.main" lineHeight="auto">
         {promotionCode}
       </Typography>
     </Grid>
     <Grid item>
       <Button variant="text" sx={{ minWidth: 'unset', padding: 0 }} onClick={onClearPromotionCode}>
-        <Icon icon="Close" style={{ display: 'flex' }} />
+        <StyledIcon icon="Close" $shouldFill />
       </Button>
     </Grid>
   </AppliedCouponContainer>

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

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled/macro';
 import { Box, Chip } from '@mui/material';
+import Color from 'color';
 
 export const BillingPeriodPickerContainer = styled(Box)`
   margin: 16px 0;
@@ -32,7 +33,7 @@ export const BillingPeriodButton = styled.button<{
       return 'transparent';
     }
     if ($isActive) {
-      return theme.stigg.palette.primaryLight;
+      return Color(theme.stigg.palette.primary).alpha(0.15).toString();
     }
     return 'transparent';
   }};

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

@@ -34,6 +34,11 @@ import { CheckoutLocalization } from '../textOverrides';
 import { CheckoutSuccess } from './CheckoutSuccess';
 import { getFeatureDisplayNameText } from '../../utils/getFeatureName';
 
+export const SummaryContainer = styled(Box)`
+  max-width: 470px;
+  flex: 1.5;
+`;
+
 export const SummaryCard = styled(Paper)`
   border-radius: 10px;
   background: ${({ theme }) => theme.stigg.palette.backgroundHighlight};
@@ -169,7 +174,7 @@ export const CheckoutSummary = ({
       : checkoutLocalization.summary.baseChargeText;
 
   return (
-    <Box flex={1}>
+    <SummaryContainer>
       <SummaryCard>
         <SummaryTitle variant="h6">{checkoutLocalization.summary.title}</SummaryTitle>
 
@@ -395,6 +400,6 @@ export const CheckoutSummary = ({
       {!disableSuccessAnimation && isCheckoutCompletedSuccessfully && (
         <CheckoutSuccess checkoutLocalization={checkoutLocalization} />
       )}
-    </Box>
+    </SummaryContainer>
   );
 };

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

@@ -1,12 +1,11 @@
 import React from 'react';
-import { Box } from '@mui/material';
 import { PoweredByStigg } from '../../common/PoweredByStigg';
-import { SummaryCard } from './CheckoutSummary';
+import { SummaryCard, SummaryContainer } from './CheckoutSummary';
 import { FlexedSkeleton, Skeleton, SkeletonsContainer } from '../components/Skeletons.style';
 
 export const CheckoutSummarySkeleton = () => {
   return (
-    <Box flex={1}>
+    <SummaryContainer>
       <SummaryCard>
         <SkeletonsContainer $flexDirection="column" $gap={24}>
           <Skeleton width={120} height={20} />
@@ -35,6 +34,6 @@ export const CheckoutSummarySkeleton = () => {
         showWatermark
         style={{ marginTop: 8, display: 'flex', justifyContent: 'center' }}
       />
-    </Box>
+    </SummaryContainer>
   );
 };

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

@@ -74,7 +74,7 @@ const NextBillingCaption = ({
   isFetchingSubscriptionPreview,
   billingPeriod,
 }: CheckoutCaptionProps) => {
-  if (!subscriptionPreview?.recurringSubscription?.total) {
+  if (!subscriptionPreview?.recurringSubscription?.total.amount) {
     return null;
   }
 

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

@@ -72,7 +72,7 @@ export const BilledPriceLineItem = ({
 
   return (
     <LineItemContainer>
-      <LineItemRow style={{ alignItems: 'flex-end' }}>
+      <LineItemRow style={{ alignItems: 'flex-start' }}>
         <Grid item>
           <Typography variant="body1" color="secondary">
             {label}

package/src/components/paywall/BillingPeriodPicker.tsx

@@ -63,8 +63,7 @@ export function BillingPeriodPicker({
       <PeriodText
         variant="h6"
         className="stigg-monthly-period-text"
-        color={isMonthlyBillingPeriod ? 'primary' : 'disabled'}
-      >
+        color={isMonthlyBillingPeriod ? 'primary' : 'disabled'}>
         Monthly
       </PeriodText>
       <StyledSwitch
@@ -73,7 +72,7 @@ export function BillingPeriodPicker({
         checkedIcon={false}
         height={16}
         width={33}
-        onChange={isAnnuallySelected =>
+        onChange={(isAnnuallySelected) =>
           onBillingPeriodChanged(isAnnuallySelected ? BillingPeriod.Annually : BillingPeriod.Monthly)
         }
         checked={!isMonthlyBillingPeriod}
@@ -83,8 +82,7 @@ export function BillingPeriodPicker({
       <PeriodText
         variant="h6"
         className="stigg-annual-period-text"
-        color={!isMonthlyBillingPeriod ? 'primary' : 'disabled'}
-      >
+        color={!isMonthlyBillingPeriod ? 'primary' : 'disabled'}>
         Annual
       </PeriodText>
       {discountRate !== 0 && <DiscountRate discount={discountRate} disabled={isMonthlyBillingPeriod} />}

package/src/index.ts

@@ -1,4 +1,5 @@
 import './styles.css';
+
 export * from '@stigg/js-client-sdk';
 export {
   Paywall,
@@ -29,7 +30,22 @@ export {
   StiggContextValue,
   StiggContext,
 } from './components/StiggProvider';
-export { Checkout, CheckoutProps, CheckoutTheme } from './components/checkout';
+export {
+  Checkout,
+  CheckoutProps,
+  CheckoutProviderProps,
+  CheckoutContainerProps,
+  CheckoutLocalization,
+  CheckoutResult,
+  OnCheckoutCompletedParams,
+  OnCheckoutParams,
+  CheckoutTheme,
+  CheckoutMockProps,
+  MockCheckoutPreviewCallback,
+  MockCheckoutStateCallback,
+  BillingInformation,
+  TaxDetailsInput,
+} from './components/checkout';
 export { useWaitForCheckoutCompleted, ProvisionStatus } from './components/hooks';
 export { HorizontalAlignment, TextAlignment } from './theme/types';
 export { CustomizedTheme as Theme } from './theme/Theme';

package/src/theme/getResolvedTheme.ts

@@ -21,7 +21,7 @@ export const getResolvedTheme = (customizedTheme?: CustomizedTheme): StiggTheme
     palette: {
       primary: primaryColor.hex(),
       primaryDark: primaryColor.darken(0.3).hex(),
-      primaryLight: primaryColor.lighten(0.6).hex(),
+      primaryLight: primaryColor.alpha(0.5).toString(),
       backgroundPaper: '#FFFFFF',
       backgroundHighlight: '#F5F6F9',
       backgroundSection: primaryColor.alpha(0.1).toString(),