@stigg/react-sdk 4.4.0-beta.9 → 4.4.0

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

@@ -1,10 +1,11 @@
 import { useCallback, useEffect, useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
-import { BillingAddress, PreviewSubscription, SubscriptionPreview } from '@stigg/js-client-sdk';
+import { BillingAddress, PreviewSubscription, StiggClient, SubscriptionPreviewV2 } from '@stigg/js-client-sdk';
 import { useStiggContext } from '../../StiggProvider';
 import { useCheckoutContext } from '../CheckoutProvider';
 import { useCheckoutModel } from './useCheckoutModel';
-import { useSubscriptionModel } from './useSubscriptionModel';
+import { SubscriptionState, useSubscriptionModel } from './useSubscriptionModel';
+import { MockCheckoutPreviewCallback } from '../types';
 
 function mapBillingInformation({
   billingAddress,
@@ -25,79 +26,121 @@ function mapBillingInformation({
   };
 }
 
-export const usePreviewSubscriptionAction = () => {
+type UsePreviewSubscriptionProps = {
+  onMockCheckoutPreview?: MockCheckoutPreviewCallback;
+};
+
+export type PreviewSubscriptionProps = {
+  customerId?: string;
+  planId?: string;
+  resourceId?: string;
+  stigg: StiggClient;
+} & SubscriptionState &
+  UsePreviewSubscriptionProps;
+
+const previewSubscription = async ({
+  stigg,
+  customerId,
+  planId,
+  resourceId,
+  promotionCode,
+  addons,
+  billableFeatures,
+  billingCountryCode,
+  billingPeriod,
+  billingAddress,
+  taxPercentage,
+  onMockCheckoutPreview,
+}: PreviewSubscriptionProps) => {
+  const estimateAddons = addons.map(({ addon, quantity }) => ({ addonId: addon.id, quantity }));
+  let subscriptionPreview: SubscriptionPreviewV2 | null = null;
+  let errorMessage: string | null = null;
+
+  try {
+    if (customerId && planId) {
+      const previewSubscriptionProps: PreviewSubscription = {
+        customerId,
+        planId,
+        resourceId,
+        billingCountryCode,
+        addons: estimateAddons,
+        billingPeriod,
+        promotionCode,
+        billableFeatures: isEmpty(billableFeatures) ? undefined : billableFeatures,
+        ...mapBillingInformation({ billingAddress, taxPercentage }),
+      };
+
+      subscriptionPreview = onMockCheckoutPreview
+        ? onMockCheckoutPreview(previewSubscriptionProps)
+        : await stigg.previewSubscription(previewSubscriptionProps);
+    }
+  } catch (error) {
+    const [, errorMsg] = (error as any)?.message?.split('Error:') || [];
+
+    errorMessage = errorMsg?.trim();
+  }
+
+  return { subscriptionPreview, errorMessage };
+};
+
+export const usePreviewSubscriptionAction = ({ onMockCheckoutPreview }: UsePreviewSubscriptionProps = {}) => {
   const { stigg } = useStiggContext();
   const subscription = useSubscriptionModel();
-  const [{ resourceId, planStep }] = useCheckoutContext();
-  const { checkoutState } = useCheckoutModel();
+  const [{ resourceId }] = useCheckoutContext();
+  const { checkoutState, widgetState } = useCheckoutModel();
   const { plan, customer } = checkoutState || {};
 
   const previewSubscriptionAction = useCallback(
     async ({ promotionCode }: { promotionCode?: string | null } = {}) => {
-      const estimateAddons = subscription.addons.map(({ addon, quantity }) => ({ addonId: addon.id, quantity }));
-      let subscriptionPreview: SubscriptionPreview | null = null;
-      let errorMessage: string | null = null;
-
-      let isValid = !subscription.billableFeatures.some(({ quantity }) => quantity === null || quantity <= 0);
-      isValid = isValid && !estimateAddons.some(({ quantity }) => quantity === null || quantity <= 0);
-      if (!isValid) {
-        return { subscriptionPreview };
-      }
-
-      try {
-        if (customer?.id && plan?.id) {
-          const previewSubscriptionProps: PreviewSubscription = {
-            customerId: customer.id,
-            planId: plan?.id,
-            billableFeatures: isEmpty(subscription.billableFeatures) ? undefined : subscription.billableFeatures,
-            addons: estimateAddons,
-            billingPeriod: subscription.billingPeriod,
-            promotionCode: promotionCode ?? subscription.promotionCode,
-            resourceId,
-            billingCountryCode: planStep.billingCountryCode,
-            ...mapBillingInformation({
-              billingAddress: subscription.billingAddress,
-              taxPercentage: subscription.taxPercentage,
-            }),
-          };
-          subscriptionPreview = await stigg.previewSubscription(previewSubscriptionProps);
-        }
-      } catch (error) {
-        const [, errorMsg] = (error as any)?.message?.split('Error:') || [];
-
-        errorMessage = errorMsg?.trim();
+      if (!widgetState.isValid) {
+        return { subscriptionPreview: null, errorMessage: null };
       }
 
-      return { subscriptionPreview, errorMessage };
+      return previewSubscription({
+        stigg,
+        customerId: customer?.id,
+        planId: plan?.id,
+        resourceId,
+        addons: subscription.addons,
+        billableFeatures: subscription.billableFeatures,
+        billingCountryCode: subscription.billingCountryCode,
+        billingPeriod: subscription.billingPeriod,
+        billingAddress: subscription.billingAddress,
+        taxPercentage: subscription.taxPercentage,
+        promotionCode: promotionCode ?? subscription.promotionCode,
+        onMockCheckoutPreview,
+      });
     },
     [
-      customer,
-      plan,
-      resourceId,
       stigg,
+      customer?.id,
+      plan?.id,
+      resourceId,
       subscription.addons,
-      subscription.billingPeriod,
       subscription.billableFeatures,
-      subscription.promotionCode,
+      subscription.billingCountryCode,
+      subscription.billingPeriod,
       subscription.billingAddress,
       subscription.taxPercentage,
-      planStep.billingCountryCode,
+      subscription.promotionCode,
+      widgetState.isValid,
+      onMockCheckoutPreview,
     ],
   );
 
   return { previewSubscriptionAction };
 };
 
-export const usePreviewSubscription = () => {
-  const [subscriptionPreview, setSubscriptionPreview] = useState<SubscriptionPreview | null>(null);
+const SUBSCRIPTION_PREVIEW_DEBOUNCE_TIME = 500;
+
+export const usePreviewSubscription = ({ onMockCheckoutPreview }: UsePreviewSubscriptionProps = {}) => {
+  const [subscriptionPreview, setSubscriptionPreview] = useState<SubscriptionPreviewV2 | null>(null);
   const [isFetchingSubscriptionPreview, setIsFetchingSubscriptionPreview] = useState(false);
 
-  const { previewSubscriptionAction } = usePreviewSubscriptionAction();
+  const { previewSubscriptionAction } = usePreviewSubscriptionAction({ onMockCheckoutPreview });
 
   useEffect(() => {
     const estimateSubscription = async () => {
-      setIsFetchingSubscriptionPreview(true);
-
       const { subscriptionPreview } = await previewSubscriptionAction();
       if (subscriptionPreview) {
         setSubscriptionPreview(subscriptionPreview);
@@ -106,7 +149,16 @@ export const usePreviewSubscription = () => {
       setIsFetchingSubscriptionPreview(false);
     };
 
-    void estimateSubscription();
+    setIsFetchingSubscriptionPreview(true);
+
+    const timer = setTimeout(() => {
+      setIsFetchingSubscriptionPreview(true);
+      void estimateSubscription();
+    }, SUBSCRIPTION_PREVIEW_DEBOUNCE_TIME);
+
+    return () => {
+      clearTimeout(timer);
+    };
   }, [previewSubscriptionAction]);
 
   return { subscriptionPreview, isFetchingSubscriptionPreview };

package/src/components/checkout/planHeader/PlanHeader.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 
-import { Divider } from '@mui/material';
+import { Box, Divider } from '@mui/material';
 
 import { Typography } from '../../common/Typography';
 import { useCheckoutModel } from '../hooks/useCheckoutModel';
-import { PlanHeaderContainer, PlanPathContainer, StyledArrowRightIcon } from './PlanHeader.style';
 import { CheckoutContainerProps } from '../CheckoutContainer';
 import { ChangePlanButton } from '../components/ChangePlanButton';
 
@@ -14,37 +13,31 @@ type PlanHeaderProps = {
 
 export function PlanHeader({ allowChangePlan = false, onChangePlan }: PlanHeaderProps) {
   const { checkoutState, checkoutLocalization } = useCheckoutModel();
-  const { plan, activeSubscription } = checkoutState || {};
-  const isPlanChanged = plan?.id !== activeSubscription?.plan.id;
+  const { plan } = checkoutState || {};
 
   return (
     <>
-      <PlanHeaderContainer>
-        <PlanPathContainer>
-          {activeSubscription && isPlanChanged && (
-            <>
-              <Typography variant="h6" color="secondary">
-                {activeSubscription.plan.displayName}
-              </Typography>
-              <StyledArrowRightIcon />
-            </>
-          )}
+      <Box sx={{ marginBottom: '16px' }}>
+        <Typography variant="body1" color="disabled" style={{ opacity: 0.6, marginBottom: '8px' }}>
+          Selected plan
+        </Typography>
 
+        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
           <Typography variant="h3" bold>
             {plan?.displayName}
           </Typography>
-        </PlanPathContainer>
 
-        {allowChangePlan && onChangePlan && (
-          <ChangePlanButton
-            onClick={() => {
-              onChangePlan({ currentPlan: plan });
-            }}
-            checkoutLocalization={checkoutLocalization}
-            size="medium"
-          />
-        )}
-      </PlanHeaderContainer>
+          {allowChangePlan && onChangePlan && (
+            <ChangePlanButton
+              onClick={() => {
+                onChangePlan({ currentPlan: plan });
+              }}
+              checkoutLocalization={checkoutLocalization}
+              size="medium"
+            />
+          )}
+        </Box>
+      </Box>
       <Divider className="stigg-checkout-plan-header-divider" />
     </>
   );

package/src/components/checkout/progressBar/CheckoutProgressBar.style.ts

@@ -1,7 +1,5 @@
 import styled from '@emotion/styled/macro';
 import { Button, buttonClasses, LinearProgress, linearProgressClasses } from '@mui/material';
-import Color from 'color';
-
 import { Icon } from '../../common/Icon';
 
 export const StyledProgress = styled(LinearProgress, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{
@@ -12,9 +10,7 @@ export const StyledProgress = styled(LinearProgress, { shouldForwardProp: (prop)
     backgroundColor: theme.stigg.palette.outlinedBorder,
   },
   [`& .${linearProgressClasses.bar}`]: {
-    backgroundColor: $disabled
-      ? Color(theme.stigg.palette.outlinedBorder).darken(0.2).hex()
-      : theme.stigg.palette.primary,
+    backgroundColor: $disabled ? theme.stigg.palette.primaryLight : theme.stigg.palette.primary,
   },
 }));
 
@@ -27,10 +23,13 @@ export const StyledStepButton = styled(Button)(() => ({
   },
 }));
 
-export const StyledIcon = styled(Icon)<{ $disabled?: boolean; $shouldStroke?: boolean }>(
-  ({ theme, $disabled, $shouldStroke = true }) => ({
-    circle: {
-      stroke: $shouldStroke ? ($disabled ? theme.stigg.palette.text.disabled : theme.stigg.palette.primary) : undefined,
-    },
-  }),
-);
+export const StyledIcon = styled(Icon, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{
+  $disabled?: boolean;
+  $shouldStroke?: boolean;
+  $shouldFill?: boolean;
+}>(({ theme, $disabled, $shouldStroke = true, $shouldFill }) => ({
+  circle: {
+    stroke: $shouldStroke ? ($disabled ? theme.stigg.palette.primaryLight : theme.stigg.palette.primary) : undefined,
+    fill: $shouldFill ? ($disabled ? theme.stigg.palette.primaryLight : theme.stigg.palette.primary) : undefined,
+  },
+}));

package/src/components/checkout/progressBar/CheckoutProgressBar.tsx

@@ -34,15 +34,16 @@ export const CheckoutProgressBar = () => {
                   <Grid item display="flex" flexDirection="row" alignItems="center" gap={1}>
                     <StepIcon
                       icon={
-                        isCompleted ? (
-                          <StyledIcon icon={checkedIcon} $shouldStroke={!isDisabled} />
-                        ) : (
-                          <StyledIcon icon="OutlinedCircle" $disabled={isDisabled} />
-                        )
+                        <StyledIcon
+                          icon={isCompleted ? checkedIcon : 'OutlinedCircle'}
+                          $disabled={isDisabled}
+                          $shouldStroke={(isCompleted && !isDisabled) || isDisabled}
+                          $shouldFill={isCompleted}
+                        />
                       }
                     />
 
-                    <Typography variant="h6" color={isDisabled ? 'disabled' : 'primary.main'}>
+                    <Typography variant="h6" color={isDisabled ? 'primary.main.light' : 'primary.main'}>
                       {label}
                     </Typography>
                   </Grid>

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

@@ -9,7 +9,7 @@ import { Button, InputField } from '../components';
 import { usePreviewSubscriptionAction } from '../hooks';
 import { usePromotionCodeModel } from '../hooks/useCouponModel';
 import { AddPromotionCodeButton } from './AddPromotionCodeButton';
-import { CheckoutLocalization } from '../textOverrides';
+import { PromotionCodeSectionProps } from './PromotionCodeSection';
 
 const CouponCodeAddButton = styled(Button)`
   padding: 4px 10px;
@@ -19,13 +19,17 @@ const CouponCodeAddButton = styled(Button)`
   align-items: center;
 `;
 
-export const AddPromotionCode = ({ checkoutLocalization }: { checkoutLocalization: CheckoutLocalization }) => {
+export const AddPromotionCode = ({
+  disabled,
+  checkoutLocalization,
+  onMockCheckoutPreview,
+}: PromotionCodeSectionProps) => {
   const { setPromotionCode: persistPromotionCode } = usePromotionCodeModel();
   const [showInput, setShowInput] = useState(false);
   const [promotionCode, setPromotionCode] = React.useState('');
   const [isLoading, setIsLoading] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState('');
-  const { previewSubscriptionAction } = usePreviewSubscriptionAction();
+  const { previewSubscriptionAction } = usePreviewSubscriptionAction({ onMockCheckoutPreview });
 
   const handlePromotionCode = async () => {
     setIsLoading(true);
@@ -33,26 +37,33 @@ export const AddPromotionCode = ({ checkoutLocalization }: { checkoutLocalizatio
 
     const { subscriptionPreview, errorMessage } = await previewSubscriptionAction({ promotionCode });
 
-    if (!errorMessage && subscriptionPreview?.discount) {
+    if (!errorMessage && subscriptionPreview?.discountDetails) {
       persistPromotionCode(promotionCode.toUpperCase());
       setShowInput(false);
-    } else if (!!errorMessage) {
+    } else if (errorMessage) {
       setErrorMessage(errorMessage);
     }
     setIsLoading(false);
   };
 
   if (!showInput) {
-    return <AddPromotionCodeButton onAddClick={() => setShowInput(true)} checkoutLocalization={checkoutLocalization} />;
+    return (
+      <AddPromotionCodeButton
+        disabled={disabled}
+        onAddClick={() => setShowInput(true)}
+        checkoutLocalization={checkoutLocalization}
+      />
+    );
   }
 
   return (
     <Grid>
-      <Typography variant="body1" color={errorMessage ? 'error' : 'primary.main'}>
-        {checkoutLocalization.couponCodeTitle}
+      <Typography variant="body1" color={errorMessage ? 'error' : disabled ? 'disabled' : 'primary.main'}>
+        {checkoutLocalization.summary.couponCodeTitle}
       </Typography>
 
       <InputField
+        disabled={disabled}
         autoFocus
         variant="outlined"
         fullWidth
@@ -62,9 +73,21 @@ export const AddPromotionCode = ({ checkoutLocalization }: { checkoutLocalizatio
           setPromotionCode(e.target.value);
         }}
         inputProps={{ maxLength: 20 }}
+        onKeyDown={(e: any) => {
+          if (e.key === 'Enter') {
+            void handlePromotionCode();
+            e.preventDefault();
+          }
+        }}
+        // eslint-disable-next-line react/jsx-no-duplicate-props
         InputProps={{
           endAdornment: (
-            <CouponCodeAddButton variant="contained" disabled={isLoading} onClick={handlePromotionCode}>
+            <CouponCodeAddButton
+              variant="contained"
+              disabled={disabled}
+              onClick={() => {
+                void handlePromotionCode();
+              }}>
               {isLoading ? (
                 <CircularProgress size={18} sx={{ color: 'white' }} />
               ) : (

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

@@ -6,34 +6,38 @@ import { Typography } from '../../common/Typography';
 import { Button } from '../components';
 import { CheckoutLocalization } from '../textOverrides';
 
-const StyledPlusIcon = styled(PlusIcon)`
+const StyledPlusIcon = styled(PlusIcon, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{ $disabled: boolean }>`
   path {
-    stroke: ${({ theme }) => theme.stigg.palette.primary};
+    stroke: ${({ theme, $disabled }) => ($disabled ? theme.stigg.palette.text.disabled : theme.stigg.palette.primary)};
   }
 `;
 
 export type AddPromotionCodeButtonProps = {
   onAddClick: () => void;
   checkoutLocalization: CheckoutLocalization;
+  disabled: boolean;
 };
 
-export const AddPromotionCodeButton = ({ onAddClick, checkoutLocalization }: AddPromotionCodeButtonProps) => (
+export const AddPromotionCodeButton = ({ onAddClick, checkoutLocalization, disabled }: AddPromotionCodeButtonProps) => (
   <Button
+    disabled={disabled}
     fullWidth
     className="stigg-checkout-summary-add-coupon-code-button"
-    sx={{ textTransform: 'none', justifyContent: 'flex-start' }}
+    sx={{
+      textTransform: 'none',
+      justifyContent: 'flex-start',
+      color: disabled ? 'text.disabled' : 'primary.main',
+    }}
     variant="text"
     size="medium"
-    onClick={onAddClick}
-  >
-    <StyledPlusIcon className="stigg-checkout-summary-add-coupon-code-button-icon" />
+    onClick={onAddClick}>
+    <StyledPlusIcon $disabled={disabled} className="stigg-checkout-summary-add-coupon-code-button-icon" />
     <Typography
       className="stigg-checkout-change-plan-button-text"
-      color="primary.main"
+      color={disabled ? 'disabled' : 'primary.main'}
       style={{ lineHeight: '24px' }}
-      variant="body1"
-    >
-      {checkoutLocalization.addCouponCodeText}
+      variant="body1">
+      {checkoutLocalization.summary.addCouponCodeText}
     </Typography>
   </Button>
 );

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

@@ -11,7 +11,7 @@ const AppliedCouponContainer = styled(Grid)`
   align-items: center;
   flex-direction: row;
   gap: 8px;
-  padding: 6px 16px;
+  padding: 6px 8px;
   border-radius: ${({ theme }) => theme.stigg.border.radius};
   border: 1px solid ${({ theme }) => theme.stigg.palette.primary};
 `;
@@ -23,8 +23,9 @@ export type AppliedPromotionCodeProps = {
 
 export const AppliedPromotionCode = ({ promotionCode, onClearPromotionCode }: AppliedPromotionCodeProps) => (
   <AppliedCouponContainer container>
-    <Grid item>
-      <Typography variant="body1" color="primary.main">
+    <Grid item display="flex" gap={1} alignItems="center">
+      <Icon icon="Coupon" style={{ display: 'flex' }} />
+      <Typography variant="body1" color="primary.main" lineHeight="auto">
         {promotionCode}
       </Typography>
     </Grid>

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

@@ -4,24 +4,38 @@ import { usePromotionCodeModel } from '../hooks/useCouponModel';
 import { AddPromotionCode } from './AddPromotionCode';
 import { AppliedPromotionCode } from './AppliedPromotionCode';
 import { CheckoutLocalization } from '../textOverrides';
+import { MockCheckoutPreviewCallback } from '../types';
 
 const PromotionCodeSectionContainer = styled.div`
   margin: 16px 0;
 `;
 
-export const PromotionCodeSection = ({ checkoutLocalization }: { checkoutLocalization: CheckoutLocalization }) => {
+export type PromotionCodeSectionProps = {
+  disabled: boolean;
+  checkoutLocalization: CheckoutLocalization;
+  onMockCheckoutPreview?: MockCheckoutPreviewCallback;
+};
+
+export const PromotionCodeSection = ({
+  disabled,
+  checkoutLocalization,
+  onMockCheckoutPreview,
+}: PromotionCodeSectionProps) => {
   const { promotionCode, setPromotionCode } = usePromotionCodeModel();
 
   const onClearPromotionCode = () => {
     setPromotionCode('');
   };
 
-  let content: React.ReactNode = null;
-  if (promotionCode) {
-    content = <AppliedPromotionCode promotionCode={promotionCode} onClearPromotionCode={onClearPromotionCode} />;
-  } else {
-    content = <AddPromotionCode checkoutLocalization={checkoutLocalization} />;
-  }
+  const content = promotionCode ? (
+    <AppliedPromotionCode promotionCode={promotionCode} onClearPromotionCode={onClearPromotionCode} />
+  ) : (
+    <AddPromotionCode
+      disabled={disabled}
+      checkoutLocalization={checkoutLocalization}
+      onMockCheckoutPreview={onMockCheckoutPreview}
+    />
+  );
 
   return <PromotionCodeSectionContainer>{content}</PromotionCodeSectionContainer>;
 };

package/src/components/checkout/steps/addons/CheckoutAddonsStep.style.tsx

@@ -5,7 +5,6 @@ import { Button } from '../../components';
 
 export const CheckoutAddonsContainer = styled(Grid)`
   width: 100%;
-  margin-top: 32px;
   gap: 8px;
 `;
 

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

@@ -42,7 +42,6 @@ function AddonListItem({
   const isAdded = !!addonState;
   const hasChanges =
     (!!addonState && !!initialAddonState && addonState.quantity !== initialAddonState.quantity) ||
-    (!initialAddonState && !!addonState) ||
     (!!initialAddonState && !addonState);
 
   const handleQuantityChange = (quantity: number | null) => {
@@ -79,6 +78,7 @@ function AddonListItem({
             {`${currencyPriceFormatter({
               amount: addonPrice.amount!,
               currency: addonPrice.currency,
+              minimumFractionDigits: 2,
             })}/${billingPeriod === BillingPeriod.Annually ? 'year' : 'month'}`}
           </Typography>
         )}
@@ -126,7 +126,7 @@ function AddonListItem({
 }
 
 export function CheckoutAddonsStep() {
-  const { checkoutLocalization } = useCheckoutModel();
+  const { checkoutLocalization, setIsValid } = useCheckoutModel();
   const { billingPeriod } = usePlanStepModel();
   const { setIsDisabled } = useProgressBarModel();
   const { initialAddons, addons, availableAddons, setAddon, removeAddon } = useAddonsStepModel();
@@ -140,7 +140,8 @@ export function CheckoutAddonsStep() {
   useEffect(() => {
     const isDisabled = Object.values(addonsValidation).some((x) => !x);
     setIsDisabled(isDisabled);
-  }, [addonsValidation, setIsDisabled]);
+    setIsValid(!isDisabled);
+  }, [addonsValidation, setIsDisabled, setIsValid]);
 
   return (
     <CheckoutAddonsContainer container>

package/src/components/checkout/steps/payment/PaymentMethods.style.ts

@@ -1,11 +1,14 @@
 import styled from '@emotion/styled';
 import { Grid } from '@mui/material';
 
-export const PaymentMethodContainer = styled(Grid)<{ $disabled?: boolean }>`
+export const PaymentMethodContainer = styled(Grid, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{
+  $disabled?: boolean;
+}>`
   padding: 8px;
   border-radius: 10px;
   border: 1px solid ${({ theme }) => theme.stigg.palette.outlinedBorder};
   cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ $disabled }) => ($disabled ? 0.6 : 1)};
 `;
 
 export const NewPaymentMethodContainer = styled(PaymentMethodContainer)`

package/src/components/checkout/steps/payment/PaymentStep.tsx

@@ -10,7 +10,6 @@ const PaymentContainer = styled(Grid)`
   display: flex;
   flex-direction: column;
   gap: 24px;
-  margin: 32px 0;
 `;
 
 export function PaymentStep({ onBillingAddressChange }: Pick<CheckoutContainerProps, 'onBillingAddressChange'>) {

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

@@ -30,8 +30,9 @@ export const BillingPeriodButton = styled.button<{
   background: ${({ theme, $isActive, $isOnlyBillingPeriod }) => {
     if ($isOnlyBillingPeriod) {
       return 'transparent';
-    } else if ($isActive) {
-      return theme.stigg.palette.backgroundSection;
+    }
+    if ($isActive) {
+      return theme.stigg.palette.primaryLight;
     }
     return 'transparent';
   }};

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

@@ -49,13 +49,16 @@ type BillingPeriodPickerProps = {
   checkoutLocalization: CheckoutLocalization;
 };
 
-export const BillingPeriodPicker = ({ plan, checkoutLocalization }: BillingPeriodPickerProps) => {
+export function BillingPeriodPicker({ plan, checkoutLocalization }: BillingPeriodPickerProps) {
   const [monthlyPrices, annualPrices] = partition(
     plan?.pricePoints,
     (price) => price.billingPeriod === BillingPeriod.Monthly,
   );
 
   const hasBothBillingPeriods = !!monthlyPrices?.length && !!annualPrices?.length;
+  if (!hasBothBillingPeriods) {
+    return null;
+  }
 
   return (
     <BillingPeriodPickerContainer>
@@ -81,4 +84,4 @@ export const BillingPeriodPicker = ({ plan, checkoutLocalization }: BillingPerio
       </BillingPeriodOptions>
     </BillingPeriodPickerContainer>
   );
-};
+}