@stigg/react-sdk 7.6.0 → 7.7.1-beta.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "7.6.0",
+  "version": "7.7.1-beta.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/react-sdk.cjs.js",
@@ -36,7 +36,8 @@
     "prepare": "husky install",
     "docs": "typedoc",
     "link-sdk": "yarn link && cd node_modules/react && yarn link && cd ../../node_modules/react-dom && yarn link && cd ../../",
-    "publish-storybook": "yarn build-storybook && npx chromatic --project-token=cbd1660d8132 --exit-once-uploaded"
+    "publish-storybook": "yarn build-storybook && npx chromatic --project-token=cbd1660d8132 --exit-once-uploaded",
+    "type-check": "tsc --noEmit --skipLibCheck"
   },
   "peerDependencies": {
     "react": ">=16"
@@ -56,16 +57,6 @@
   "author": {
     "name": "Stigg"
   },
-  "size-limit": [
-    {
-      "path": "dist/react-sdk.cjs.js",
-      "limit": "10 KB"
-    },
-    {
-      "path": "dist/react-sdk.esm.js",
-      "limit": "10 KB"
-    }
-  ],
   "devDependencies": {
     "@commitlint/cli": "^19.7.1",
     "@commitlint/config-conventional": "^19.7.1",
@@ -135,6 +126,5 @@
     "react-spinners": "^0.13.3",
     "react-switch": "^7.0.0"
   },
-  "readme": "ERROR: No README data found!",
-  "_id": "@stigg/react-sdk@5.23.0"
+  "readme": "ERROR: No README data found!"
 }

package/src/components/checkout/CheckoutContainer.tsx

@@ -4,7 +4,8 @@ import { PricingType } from '@stigg/js-client-sdk';
 import { CheckoutContent, CheckoutLayout, CheckoutPanel } from './CheckoutContainer.style';
 import { CheckoutProgressBar } from './progressBar/CheckoutProgressBar';
 import { CheckoutSummary, CheckoutSummarySkeleton } from './summary';
-import { CheckoutStep, CheckoutStepKey, useCheckoutModel, useProgressBarModel } from './hooks';
+import { CheckoutStep, useCheckoutModel, useProgressBarModel } from './hooks';
+import { CheckoutStepKey } from './types';
 import { CheckoutAddonsStep } from './steps/addons';
 import { PaymentStep } from './steps/payment';
 import { useStripeIntegration } from './steps/payment/stripe';
@@ -126,8 +127,8 @@ export function CheckoutContainer({
     <>
       {isFreeDowngrade ? (
         <DowngradeToFreePlan
-          freePlan={plan!}
-          activeSubscription={activeSubscription!}
+          freePlan={plan}
+          activeSubscription={activeSubscription}
           allowChangePlan
           checkoutLocalization={checkoutLocalization}
           onChangePlan={onChangePlan}

package/src/components/checkout/configurations/textOverrides.ts

@@ -21,7 +21,7 @@ export type CheckoutLocalization = {
   newPaymentMethodBillingAddressTitle: string;
   summary: {
     title: string;
-    planName: (params: { plan: Plan }) => string;
+    planName: (params: { plan: { displayName: string } }) => string;
     addCouponCodeText: string;
     couponCodeTitle: string;
     addonsSectionTitle: string;

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

@@ -22,7 +22,7 @@ export function useLoadCheckout({ planId, resourceId, billingCountryCode, onMock
         const checkout = await stigg.getCheckoutState({ planId, resourceId, billingCountryCode });
         setCheckout(checkout);
       } catch (err) {
-        logger.error(`Failed to load checkout ${(err as any)?.message}`, err as any);
+        logger.error(`Failed to load checkout ${(err as any)?.message}`, err as Error);
       } finally {
         setIsLoading(false);
       }

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

@@ -75,7 +75,7 @@ const previewSubscription = async ({
         : await stigg.previewSubscription(previewSubscriptionProps);
     }
   } catch (error) {
-    const [, errorMsg] = (error as any)?.message?.split('Error:') || [];
+    const [, errorMsg] = (error as Error)?.message?.split('Error:') || [];
 
     errorMessage = errorMsg?.trim();
   }

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

@@ -3,12 +3,7 @@ import { Addon, BillableFeature, BillingPeriod, CheckoutStatePlan } from '@stigg
 import { useCheckoutContext } from '../CheckoutProvider';
 import { CheckoutSteps } from '../configurations/steps';
 import { hasMultipleBillingPeriods } from '../../utils/planPrices';
-
-export enum CheckoutStepKey {
-  PLAN = 'PLAN',
-  ADDONS = 'ADDONS',
-  PAYMENT = 'PAYMENT',
-}
+import { CheckoutStepKey } from '../types';
 
 export type CheckoutStep = {
   key: CheckoutStepKey;

package/src/components/checkout/index.ts

@@ -1,12 +1,8 @@
 export { Checkout } from './Checkout';
 export * from './types';
 export type { CheckoutTheme } from './configurations/theme';
-export type {
-  OnCheckoutCompletedParams,
-  OnCheckoutParams,
-  CheckoutResult,
-  CheckoutContainerProps,
-} from './CheckoutContainer';
+export type { CheckoutContainerProps } from './CheckoutContainer';
 export type { CheckoutProviderProps } from './CheckoutProvider';
 export type { CheckoutLocalization } from './configurations/textOverrides';
 export type { CheckoutProps } from './Checkout';
+export type { CheckoutSteps } from './configurations/steps';

package/src/components/checkout/steps/addons/components/AddonInputContainer.tsx

@@ -23,9 +23,9 @@ type AddonInputContainerProps = {
   errorMessage?: string;
   isPriceForBillingPeriodAvailable: boolean;
   checkoutLocalization: CheckoutLocalization;
-  handleQuantityChange: (quantity?: number | null) => void;
-  handleUndo: () => void;
-  handleRemoveAddon: () => void;
+  handleQuantityChange: (quantity?: number | null) => Promise<void>;
+  handleUndo: () => Promise<void>;
+  handleRemoveAddon: () => Promise<void>;
 };
 
 export function AddonInputContainer({

package/src/components/checkout/steps/payment/stripe/useSubmit.ts

@@ -1,6 +1,6 @@
 import { ApplySubscription, ApplySubscriptionResults } from '@stigg/js-client-sdk';
 import { useElements, useStripe } from '@stripe/react-stripe-js';
-import { useStiggContext } from '../../../../..';
+import { useStiggContext } from '../../../../../hooks';
 import { useCheckoutModel } from '../../../hooks';
 import { usePaymentStepModel } from '../../../hooks/usePaymentStepModel';
 import { useSubscriptionState } from '../../../hooks/useSubscriptionState';
@@ -74,7 +74,7 @@ export function useSubmit({
         };
       } catch (e) {
         console.error(e);
-        errorMessage = (e as any)?.message;
+        errorMessage = (e as Error)?.message;
         return { success: false, errorMessage };
       }
     };

package/src/components/checkout/steps/payment/zuora/useZuoraIntegration.ts

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useCheckoutModel, usePaymentStepModel, usePlanStepModel } from '../../../hooks';
 import { isZuoraLibraryAvailable, loadZuoraLibrary } from './zuora.utils';
-import { BillingVendorIdentifier, useStiggContext } from '../../../../..';
+import { BillingVendorIdentifier } from '@stigg/js-client-sdk';
+import { useStiggContext } from '../../../../../hooks';
 
 export function useZuoraIntegration() {
   const { stigg } = useStiggContext();

package/src/components/checkout/steps/payment/zuora/useZuoraSubmit.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { ApplySubscription } from '@stigg/js-client-sdk';
-import { useStiggContext } from '../../../../..';
+import { useStiggContext } from '../../../../../hooks';
 import { useSubscriptionState } from '../../../hooks/useSubscriptionState';
 import { useCheckoutModel, usePaymentStepModel } from '../../../hooks';
 import { CheckoutContainerProps } from '../../../CheckoutContainer';
@@ -56,7 +56,7 @@ export function useZuoraSubmit({
             console.error(e);
             return {
               success: false,
-              errorMessage: (e as any)?.message || 'Failed to apply subscription',
+              errorMessage: (e as Error)?.message || 'Failed to apply subscription',
             };
           }
         };

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

@@ -222,7 +222,7 @@ export const CheckoutSummary = ({
           alignItems="center"
           marginY={2}>
           <Typography variant="h6" color="primary" style={{ paddingRight: '8px' }}>
-            {checkoutLocalization.summary.planName({ plan })}
+            {checkoutLocalization.summary.planName({ plan: plan! })}
           </Typography>
           <StyledDivider className="stigg-checkout-summary-divider" sx={{ flex: 1, margin: '0 !important' }} />
         </Grid>
@@ -307,7 +307,7 @@ export const CheckoutSummary = ({
           />
         )}
 
-        {showDiscountLine && (
+        {showDiscountLine && subscriptionPreview && (
           <DiscountLineItem
             subscriptionPreview={subscriptionPreview}
             isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}

package/src/components/checkout/types.ts

@@ -14,9 +14,12 @@ import {
 import { AddonsStepState } from './hooks';
 import { PaymentStepState } from './hooks/usePaymentStepModel';
 import { PlanStepState } from './hooks/usePlanStepModel';
-import { CheckoutStepKey } from './hooks/useProgressBarModel';
 
-export { CheckoutStepKey };
+export enum CheckoutStepKey {
+  PLAN = 'PLAN',
+  ADDONS = 'ADDONS',
+  PAYMENT = 'PAYMENT',
+}
 
 export type CheckoutState = {
   planStep: PlanStepState;

package/src/components/common/Icon.tsx

@@ -33,17 +33,19 @@ const IconWrapper = styled.div<{ $pathColor?: string; $rectColor?: string; $stro
     `}
 `;
 
+export type IconColorValue = IconColor | (string & {});
+
 export type IconProps = {
   icon: Icons;
   className?: string;
   style?: CSSProperties;
-  svgPathColor?: IconColor | string;
-  svgRectColor?: IconColor | string;
-  svgStrokeColor?: IconColor | string;
+  svgPathColor?: IconColorValue;
+  svgRectColor?: IconColorValue;
+  svgStrokeColor?: IconColorValue;
 };
 
 export function Icon({ icon, className, style, svgPathColor, svgRectColor, svgStrokeColor }: IconProps) {
-  const IconComponent = (customIcons as any)[icon];
+  const IconComponent = (customIcons as Record<Icons, React.FC>)[icon];
   const theme = useTheme();
 
   return (

package/src/components/common/StatusChip.tsx

@@ -12,8 +12,8 @@ const StyledChip = styled(Chip)<{ $variant: StatusChipVariant }>`
   height: 24px;
   border-radius: 4px;
   border: none;
-  background-color: ${({ theme, $variant }) => (theme as any)?.stigg?.palette?.statusChips?.[$variant]?.background};
-  color: ${({ theme, $variant }) => (theme as any)?.stigg?.palette?.statusChips?.[$variant]?.text};
+  background-color: ${({ theme, $variant }) => theme?.stigg?.palette?.statusChips?.[$variant]?.background};
+  color: ${({ theme, $variant }) => theme?.stigg?.palette?.statusChips?.[$variant]?.text};
 `;
 
 /**

package/src/components/common/chart/chartjs.tooltip.plugin.tsx

@@ -57,8 +57,8 @@ export function bottomBarTooltipPositioner(chart: Chart, tooltip: TooltipModel<'
   const segmentCenterY = tooltip.caretY + segmentHeight / 2;
 
   // Get the bar element to find its left edge
-  const bar = chart.getDatasetMeta(dataPoint.datasetIndex).data[dataPoint.dataIndex] as any;
-  const barLeftEdge = bar.x - bar.width / 2;
+  const bar = chart.getDatasetMeta(dataPoint.datasetIndex).data[dataPoint.dataIndex];
+  const barLeftEdge = bar.x - (bar as any).width / 2;
 
   const top = chart.canvas.offsetTop + segmentCenterY;
   const left = chart.canvas.offsetLeft + barLeftEdge;

package/src/components/common/iconColor.ts

@@ -1,8 +1,9 @@
 import { Theme } from '@emotion/react';
+import { IconColorValue } from './Icon';
 
 export type IconColor = 'primary' | 'secondary';
 
-export const getIconColor = (color: IconColor | string | undefined, theme: Theme) => {
+export const getIconColor = (color: IconColorValue | undefined, theme: Theme) => {
   switch (color) {
     case 'primary':
       return theme.stigg.palette.text.primary;

package/src/components/common/table/LoadingRows.tsx

@@ -12,7 +12,7 @@ interface LoadingRowsProps<T> {
 export function LoadingRows<T>({ skeletonRows, visibleHeadCells, hideLastRowBorder }: LoadingRowsProps<T>) {
   return (
     <>
-      {[...Array(skeletonRows)].map((_, index) => (
+      {Array.from({ length: skeletonRows }).map((_, index) => (
         <TableRow key={index}>
           {visibleHeadCells.map((headCell) => (
             <StyledTableCell

package/src/components/credits/creditUsageChart/CreditUsage.chartjs.ts

@@ -191,7 +191,7 @@ export function computeChartData(
 
       const dataMap = new Map<string, number>();
       series.points.forEach((point) => {
-        const dateKey = generateDateKeyForTimeRange(new Date(point.timestamp), timeRange);
+        const dateKey = generateDateKeyForTimeRange(new Date(point.timestamp as string), timeRange);
         // Accumulate values for the same date instead of overwriting
         const existingValue = dataMap.get(dateKey) || 0;
         dataMap.set(dateKey, existingValue + point.value);

package/src/components/credits/creditUsageChart/CreditUsageChart.tsx

@@ -33,8 +33,8 @@ const CreditUsageChartCard = styled.div`
   gap: 8px;
   padding: 16px;
   border-radius: 8px;
-  border: 1px solid ${({ theme }) => (theme as any)?.stigg?.palette?.outlinedBorder || '#e0e0e0'};
-  background-color: ${({ theme }) => (theme as any)?.stigg?.palette?.backgroundPaper || '#ffffff'};
+  border: 1px solid ${({ theme }) => theme?.stigg?.palette?.outlinedBorder || '#e0e0e0'};
+  background-color: ${({ theme }) => theme?.stigg?.palette?.backgroundPaper || '#ffffff'};
 `;
 
 const ChartSkeleton = styled(Skeleton)`

package/src/components/credits/grants/utils.ts

@@ -1,6 +1,6 @@
 import { StatusChipVariant } from '@/theme/types';
 import { CreditGrantStatus } from './types';
-import { CreditGrantType } from '../../..';
+import { CreditGrantType } from '@stigg/js-client-sdk';
 
 export const mapCreditGrantStatusToVariant = (status: CreditGrantStatus): StatusChipVariant => {
   switch (status) {

package/src/components/credits/utils/creditGrantUtils.ts

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import moment, { MomentInput } from 'moment';
 import { CreditGrant, CreditGrantStatus } from '../grants/types';
 import { formatValue } from './creditBalanceUtils';
 
@@ -7,8 +7,8 @@ The credit grant status is currently derived, but later will be provided by the
 */
 export function getCreditGrantStatus(grant: CreditGrant): CreditGrantStatus {
   const now = moment();
-  const effectiveAt = moment(grant.effectiveAt);
-  const expireAt = grant.expireAt ? moment(grant.expireAt) : null;
+  const effectiveAt = moment(grant.effectiveAt as MomentInput);
+  const expireAt = grant.expireAt ? moment(grant.expireAt as MomentInput) : null;
 
   if (effectiveAt.isAfter(now)) {
     return CreditGrantStatus.SCHEDULED;

package/src/components/customerPortal/hooks/useCustomerPortal.ts

@@ -21,7 +21,7 @@ export function useCustomerPortal({ resourceId, productId }: UseCustomerPortalPr
           const customerPortalData = await stigg.getCustomerPortal({ resourceId, productId });
           setCustomerPortal(customerPortalData);
         } catch (err) {
-          logger.error(`Failed to load customer portal ${(err as any)?.message}`, err as any);
+          logger.error(`Failed to load customer portal ${(err as any)?.message}`, err as Error);
         } finally {
           setIsLoading(false);
         }

package/src/components/customerPortal/subscriptionOverview/SubscriptionsOverview.tsx

@@ -84,7 +84,7 @@ export function SubscriptionsOverview({
             )}
 
             <SubscriptionTabs
-              customerPortal={customerPortal!}
+              customerPortal={customerPortal}
               hiddenSections={hiddenSections}
               textOverrides={textOverrides}
               theme={theme}

package/src/components/customerPortal/subscriptionOverview/tabs/Promotions.tsx

@@ -1,5 +1,5 @@
 import { CustomerPortalPromotionalEntitlement } from '@stigg/js-client-sdk';
-import moment from 'moment';
+import moment, { MomentInput } from 'moment';
 import styled from '@utils/style';
 import { Typography } from '../../../common/Typography';
 import { useCustomerPortalContext } from '../../CustomerPortalContext';
@@ -51,7 +51,7 @@ export function Promotions() {
             <Typography variant="body1">{getPromotionTitle(promotionalEntitlement)}</Typography>
             <Typography variant="body1" color="disabled">
               {promotionalEntitlement.endDate
-                ? moment.utc(promotionalEntitlement.endDate).format('MMM Do, YYYY')
+                ? moment.utc(promotionalEntitlement.endDate as MomentInput).format('MMM Do, YYYY')
                 : 'None'}
             </Typography>
           </Row>

package/src/components/customerPortal/subscriptionOverview/upcomingBilling/UpcomingBilling.tsx

@@ -57,7 +57,7 @@ export function UpcomingBilling({ subscription, theme, textOverrides, onContactS
       );
     } else {
       const billingPeriod = subscription.prices?.[0]?.billingPeriod;
-      const rangeEnd = subscription.billingPeriodRange?.end;
+      const rangeEnd = subscription.billingPeriodRange?.end as string;
       const total = subscription.totalPrice?.total;
 
       if (billingPeriod && rangeEnd && total) {

package/src/components/customerPortal/usage/featureUsage/FeatureUsage.helper.ts

@@ -1,5 +1,5 @@
-import { CustomerPortalEntitlement } from '@stigg/js-client-sdk';
-import moment from 'moment';
+import { CustomerPortalEntitlement, EntitlementResetPeriod } from '@stigg/js-client-sdk';
+import moment, { MomentInput } from 'moment';
 
 export const USAGE_PERCENTAGE_WARNING_THRESHOLD = 70;
 
@@ -27,17 +27,17 @@ export function getResetUsageText(entitlement: CustomerPortalEntitlement) {
   }
 
   const calculateResetDiff = (unit: 'days' | 'hours' | 'minutes') => {
-    return moment.utc(entitlement.usagePeriodEnd).diff(moment.utc(), unit);
+    return moment.utc(entitlement.usagePeriodEnd as MomentInput).diff(moment.utc(), unit);
   };
 
   switch (entitlement.resetPeriod) {
-    case 'MONTH':
+    case EntitlementResetPeriod.Month:
       return `Resets monthly - in ${calculateResetDiff('days')} days`;
-    case 'WEEK':
+    case EntitlementResetPeriod.Week:
       return `Resets weekly - in ${calculateResetDiff('days')} days`;
-    case 'DAY':
+    case EntitlementResetPeriod.Day:
       return `Resets daily - in ${calculateResetDiff('hours')} hours`;
-    case 'HOUR':
+    case EntitlementResetPeriod.Hour:
       return `Resets hourly - in ${calculateResetDiff('minutes')} minutes`;
     default:
       return null;

package/src/components/paywall/hooks/useLoadPaywallData.ts

@@ -50,7 +50,7 @@ export function useLoadPaywallData({
         setAvailableBillingPeriods(availableBillingPeriods);
         setSelectedBillingPeriod(defaultBillingPeriod);
       } catch (err) {
-        logger.error(`Failed to load paywall ${(err as any)?.message}`, err as any);
+        logger.error(`Failed to load paywall ${(err as any)?.message}`, err as Error);
       } finally {
         setIsLoading(false);
       }

package/src/components/utils/dateUtils.ts

@@ -1,11 +1,11 @@
-import moment from 'moment';
+import moment, { MomentInput } from 'moment';
 
 /**
  * Formats a date with time in the format "MMM D, YYYY h:mmA"
  * Example: "Aug 2, 2025 3:45PM"
  */
 export function formatDateTime(date: any): string {
-  return moment(date).format('MMM D, YYYY h:mmA');
+  return moment(date as MomentInput).format('MMM D, YYYY h:mmA');
 }
 
 /**
@@ -13,5 +13,5 @@ export function formatDateTime(date: any): string {
  * Example: "Aug 2, 2025"
  */
 export function formatDateOnly(date: any): string {
-  return moment(date).format('MMM D, YYYY');
+  return moment(date as MomentInput).format('MMM D, YYYY');
 }

package/src/components/utils/getSubscriptionScheduleUpdateTexts.tsx

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import moment, { MomentInput } from 'moment';
 import { isNil, compact } from 'lodash';
 import {
   CustomerPortalSubscription,
@@ -33,13 +33,16 @@ export function getSubscriptionScheduleUpdateTexts({
     case SubscriptionScheduleType.Downgrade: {
       let shouldShowDate = withDate;
       if (isNil(shouldShowDate) && billingPeriodRange?.end) {
-        shouldShowDate = !moment(scheduledUpdate.scheduledExecutionTime).isSame(billingPeriodRange?.end, 'day');
+        shouldShowDate = !moment(scheduledUpdate.scheduledExecutionTime as MomentInput).isSame(
+          billingPeriodRange?.end as MomentInput,
+          'day',
+        );
       }
 
       const line1 = (
         <>
           Your subscription will be downgraded to the <b>{scheduledUpdate.targetPackage?.displayName} plan</b>{' '}
-          {shouldShowDate ? <>on {formatDate(scheduledUpdate.scheduledExecutionTime)}</> : postfix}.
+          {shouldShowDate ? <>on {formatDate(scheduledUpdate.scheduledExecutionTime as string)}</> : postfix}.
         </>
       );
       const line2 = `Until then you still have access to your current plan.`;
@@ -52,7 +55,7 @@ export function getSubscriptionScheduleUpdateTexts({
       const line1 = (
         <>
           Your billing cycle will change to <b>{variables.billingPeriod?.toLocaleLowerCase()}</b>{' '}
-          {withDate ? <>on {formatDate(scheduledUpdate.scheduledExecutionTime)}</> : postfix}.
+          {withDate ? <>on {formatDate(scheduledUpdate.scheduledExecutionTime as string)}</> : postfix}.
         </>
       );
 
@@ -69,7 +72,7 @@ export function getSubscriptionScheduleUpdateTexts({
       const line1 = (
         <>
           Your subscription will be updated to <b>{variables.newUnitAmount}</b> {unitsText}{' '}
-          {withDate ? <>on {formatDate(scheduledUpdate.scheduledExecutionTime)}</> : postfix}.
+          {withDate ? <>on {formatDate(scheduledUpdate.scheduledExecutionTime as string)}</> : postfix}.
         </>
       );
 

package/src/index.ts

@@ -53,13 +53,13 @@ export type {
   MockCheckoutPreviewCallback,
   MockCheckoutStateCallback,
   BillingInformation,
+  CheckoutStepKey,
   TaxDetailsInput,
   OnBeforeStepChangeCallback,
   OnBillableFeatureChangeCallback,
   OnAddonChangeCallback,
   CheckoutState,
 } from './components/checkout';
-export { CheckoutStepKey } from './components/checkout';
 export { useWaitForCheckoutCompleted, ProvisionStatus } from './components/hooks';
 export {
   useBooleanEntitlement,

package/src/services/logger.ts

@@ -13,7 +13,7 @@ export class LoggerService implements Logger {
     console.log(message, object || {});
   }
 
-  debug(message: string, object?: Record<string, string> | undefined): void {
+  debug(message: string, object?: Record<string, string>): void {
     console.debug(message, object || {});
   }
 }

package/src/stories/Checkout.stories.tsx

@@ -1,8 +1,9 @@
 import styled from '@utils/style';
 import { BillingPeriod } from '@stigg/js-client-sdk';
 import { Meta, StoryFn } from '@storybook/react';
-import { Checkout, CheckoutProviderProps } from '../components/checkout';
+import { Checkout, CheckoutProviderProps, CheckoutSteps } from '../components/checkout';
 import { StiggProvider, StiggProviderProps } from '../components/StiggProvider';
+import { CustomizedTheme } from '../theme/Theme';
 import { defaultArgsWithCustomer } from './baseArgs';
 import { mockCheckoutState } from './mocks/checkout/mockCheckoutState';
 import { mockPreviewSubscription } from './mocks/checkout/mockCheckoutPreview';
@@ -19,12 +20,12 @@ const meta = {
   decorators: [
     (Story, { args }) => (
       <StiggProvider
-        apiKey={args.apiKey}
-        customerId={args.customerId}
-        theme={args.theme}
-        locale={args.locale}
-        baseUri={args.baseUri}
-        enableEdge={args.enableEdge}>
+        apiKey={args.apiKey as string}
+        customerId={args.customerId as string}
+        theme={args.theme as CustomizedTheme | undefined}
+        locale={args.locale as string | undefined}
+        baseUri={args.baseUri as string | undefined}
+        enableEdge={args.enableEdge as boolean | undefined}>
         <Story />
       </StiggProvider>
     ),
@@ -53,15 +54,23 @@ const meta = {
       ],
     },
   },
-} as Meta<StiggProviderProps & CheckoutProviderProps>;
+} as Meta<any>;
 
 export default meta;
 
-const Template: StoryFn<any> = (args) => (
+const Template: StoryFn<
+  StiggProviderProps &
+    CheckoutProviderProps & {
+      useMockData?: boolean;
+      skipSteps?: string[];
+      billingPeriod?: BillingPeriod | null;
+      disablePromotionCode?: boolean;
+    }
+> = (args) => (
   <Wrapper>
     <Checkout
       planId={args.planId}
-      preferredBillingPeriod={args.billingPeriod}
+      preferredBillingPeriod={args.billingPeriod ?? undefined}
       billingCountryCode={args.billingCountryCode}
       resourceId={args.resourceId}
       onCheckoutCompleted={(results) => {
@@ -78,11 +87,11 @@ const Template: StoryFn<any> = (args) => (
         const { success, errorMessage, results } = await checkoutAction(checkoutParams);
         return { success, errorMessage, results };
       }}
-      billableFeatures={args.billableFeatures || []}
+      billableFeatures={(args.billableFeatures as any[]) || []}
       onChangePlan={({ currentPlan }) => {
         console.log('plan changed clicked!', { currentPlan });
       }}
-      skipCheckoutSteps={args.skipSteps}
+      skipCheckoutSteps={(args.skipSteps ?? []) as CheckoutSteps[]}
       onMockCheckoutState={
         args.useMockData
           ? (params) => {