@stigg/react-sdk 4.4.0-beta.4 → 4.4.0-beta.6

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.4.0-beta.4",
+  "version": "4.4.0-beta.6",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

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

@@ -4,6 +4,7 @@ import Box from '@mui/material/Box';
 export const CheckoutLayout = styled.div`
   margin: auto;
   width: 100%;
+  min-height: 760px;
   max-width: 920px;
   display: flex;
   position: relative;

package/src/components/checkout/CheckoutContainer.tsx

@@ -79,6 +79,8 @@ export function CheckoutContainer({
           checkoutLocalization={checkoutLocalization}
           freePlan={plan!}
           activeSubscription={activeSubscription!}
+          allowChangePlan={allowChangePlan}
+          onChangePlan={onChangePlan}
         />
       ) : (
         <>

package/src/components/checkout/components/Button.tsx

@@ -3,24 +3,13 @@ import React from 'react';
 import styled from '@emotion/styled/macro';
 import { Button as MuiButton, ButtonProps, css } from '@mui/material';
 
-export type StyledButtonProps = { $isLoading?: boolean; $success?: boolean; $error?: boolean };
+export type StyledButtonProps = { $success?: boolean; $error?: boolean };
 
-const StyledButton = styled(MuiButton)<StyledButtonProps>`
+const StyledButton = styled(MuiButton, { shouldForwardProp: (prop) => !prop.startsWith('$') })<StyledButtonProps>`
   border-radius: 10px;
   text-transform: none;
 
-  ${({ theme, $isLoading, $success, $error }) => {
-    if ($isLoading) {
-      return css`
-        background-color: ${theme.stigg.palette.primaryDark};
-        cursor: no-drop;
-
-        &:hover {
-          background-color: ${theme.stigg.palette.primaryDark};
-        }
-      `;
-    }
-
+  ${({ theme, $success, $error }) => {
     if ($success) {
       return css`
         background-color: ${theme.stigg.palette.success};

package/src/components/checkout/components/ChangePlanButton.tsx

@@ -0,0 +1,32 @@
+import { Button } from '@mui/material';
+import { Typography } from '../../common/Typography';
+import React from 'react';
+import { CheckoutLocalization } from '../textOverrides';
+import { ButtonProps } from '@mui/material/Button';
+
+export const ChangePlanButton = ({
+  onClick,
+  checkoutLocalization,
+  size,
+}: {
+  onClick: () => void;
+  checkoutLocalization: CheckoutLocalization;
+  size: ButtonProps['size'];
+}) => {
+  return (
+    <Button
+      className="stigg-checkout-change-plan-button"
+      sx={{ textTransform: 'none' }}
+      variant="text"
+      size={size}
+      onClick={onClick}>
+      <Typography
+        className="stigg-checkout-change-plan-button-text"
+        color="primary.main"
+        variant="body1"
+        style={{ lineHeight: '24px' }}>
+        {checkoutLocalization.changePlan}
+      </Typography>
+    </Button>
+  );
+};

package/src/components/checkout/components/DowngradeToFreeContainer.tsx

@@ -7,6 +7,8 @@ import { CheckoutStatePlan, Subscription } from '@stigg/js-client-sdk';
 import { Currency, BillingPeriod } from '@stigg/js-client-sdk';
 import { currencyPriceFormatter } from '../../utils/currencyUtils';
 import { CheckoutLocalization } from '../textOverrides';
+import { CheckoutContainerProps } from '../CheckoutContainer';
+import { ChangePlanButton } from './ChangePlanButton';
 
 const DowngradeToFreePlansContainer = styled(Box)`
   display: flex;
@@ -62,19 +64,37 @@ export const DowngradeToFreeContent = ({
   );
 };
 
+type DowngradeToFreePlanProps = {
+  checkoutLocalization: CheckoutLocalization;
+  activeSubscription: Subscription;
+  freePlan: CheckoutStatePlan;
+  allowChangePlan?: boolean;
+} & Pick<CheckoutContainerProps, 'onChangePlan'>;
+
 export const DowngradeToFreePlan = ({
   checkoutLocalization,
   activeSubscription,
   freePlan,
-}: {
-  checkoutLocalization: CheckoutLocalization;
-  activeSubscription: Subscription;
-  freePlan: CheckoutStatePlan;
-}) => {
+  allowChangePlan = false,
+  onChangePlan,
+}: DowngradeToFreePlanProps) => {
+  let alertAction;
+  if (allowChangePlan && onChangePlan) {
+    alertAction = (
+      <ChangePlanButton
+        onClick={() => {
+          onChangePlan({ currentPlan: freePlan });
+        }}
+        checkoutLocalization={checkoutLocalization}
+        size="small"
+      />
+    );
+  }
+
   return (
     <>
-      <DowngradeToFreeAlert className="stigg-checkout-downgrade-to-free-alert" severity="info">
-        <Typography color="secondary">
+      <DowngradeToFreeAlert action={alertAction} className="stigg-checkout-downgrade-to-free-alert" severity="info">
+        <Typography span color="secondary">
           {checkoutLocalization.downgradeToFreeAlertText({ plan: activeSubscription.plan })}
         </Typography>
       </DowngradeToFreeAlert>

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

@@ -2,7 +2,10 @@ import styled from '@emotion/styled/macro';
 import { Grid } from '@mui/material';
 import ReactSkeleton from 'react-loading-skeleton';
 
-export const SkeletonsContainer = styled(Grid)<{ $gap: number; $flexDirection?: 'row' | 'column' }>`
+export const SkeletonsContainer = styled(Grid, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{
+  $gap: number;
+  $flexDirection?: 'row' | 'column';
+}>`
   display: flex;
   flex-direction: ${({ $flexDirection }) => $flexDirection || 'row'};
   gap: ${({ $gap }) => $gap}px;

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

@@ -37,6 +37,12 @@ export const usePreviewSubscriptionAction = () => {
       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 = {
@@ -92,7 +98,9 @@ export const usePreviewSubscription = () => {
       setIsFetchingSubscriptionPreview(true);
 
       const { subscriptionPreview } = await previewSubscriptionAction();
-      setSubscriptionPreview(subscriptionPreview);
+      if (subscriptionPreview) {
+        setSubscriptionPreview(subscriptionPreview);
+      }
 
       setIsFetchingSubscriptionPreview(false);
     };

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

@@ -19,5 +19,5 @@ export const PlanHeaderContainer = styled(Box)`
   display: flex;
   align-content: center;
   justify-content: space-between;
-  margin-bottom: 32px;
+  margin-bottom: 16px;
 `;

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

@@ -1,11 +1,12 @@
 import React from 'react';
 
-import { Button, Divider } from '@mui/material';
+import { 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';
 
 type PlanHeaderProps = {
   allowChangePlan?: boolean;
@@ -35,22 +36,13 @@ export function PlanHeader({ allowChangePlan = false, onChangePlan }: PlanHeader
         </PlanPathContainer>
 
         {allowChangePlan && onChangePlan && (
-          <Button
-            className="stigg-checkout-change-plan-button"
-            sx={{ textTransform: 'none' }}
-            variant="text"
-            size="medium"
+          <ChangePlanButton
             onClick={() => {
               onChangePlan({ currentPlan: plan });
-            }}>
-            <Typography
-              className="stigg-checkout-change-plan-button-text"
-              color="primary.main"
-              style={{ lineHeight: '24px' }}
-              variant="body1">
-              {checkoutLocalization.changePlan}
-            </Typography>
-          </Button>
+            }}
+            checkoutLocalization={checkoutLocalization}
+            size="medium"
+          />
         )}
       </PlanHeaderContainer>
       <Divider className="stigg-checkout-plan-header-divider" />

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

@@ -4,7 +4,9 @@ import Color from 'color';
 
 import { Icon } from '../../common/Icon';
 
-export const StyledProgress = styled(LinearProgress)<{ $disabled?: boolean }>(({ theme, $disabled }) => ({
+export const StyledProgress = styled(LinearProgress, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{
+  $disabled?: boolean;
+}>(({ theme, $disabled }) => ({
   [`&.${linearProgressClasses.root}`]: {
     borderRadius: theme.stigg.border.radius,
     backgroundColor: theme.stigg.palette.outlinedBorder,

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

@@ -14,12 +14,15 @@ export const CheckoutProgressBar = () => {
   const progress = ((activeStep + 1) * 100) / steps.length;
 
   return (
-    <Box sx={{ width: '100%', my: 3 }}>
+    <Box sx={{ width: '100%', mb: 3 }}>
       <StyledProgress variant="determinate" value={progress} $disabled={readOnly} />
       <Grid container display="flex">
         {steps.map(({ key, label }, index) => {
           const isCompleted = completedSteps.includes(index);
-          const isDisabled = readOnly || (index > activeStep && !isCompleted && !completedSteps.includes(index - 1));
+          const isDisabled =
+            readOnly ||
+            (index > activeStep && !isCompleted && !completedSteps.includes(index - 1)) ||
+            (activeStep !== index && progressBarState.isDisabled);
           const checkedIcon: Icons = isDisabled ? 'OutlinedCheckedCircleDisabled' : 'OutlinedCheckedCircle';
 
           return (

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

@@ -64,13 +64,12 @@ export const AddPromotionCode = ({ checkoutLocalization }: { checkoutLocalizatio
         inputProps={{ maxLength: 20 }}
         InputProps={{
           endAdornment: (
-            <CouponCodeAddButton
-              variant="contained"
-              disableRipple={isLoading}
-              $isLoading={isLoading}
-              onClick={handlePromotionCode}
-            >
-              {isLoading ? <CircularProgress size={18} /> : <Icon style={{ display: 'flex' }} icon="ArrowForward" />}
+            <CouponCodeAddButton variant="contained" disabled={isLoading} onClick={handlePromotionCode}>
+              {isLoading ? (
+                <CircularProgress size={18} sx={{ color: 'white' }} />
+              ) : (
+                <Icon style={{ display: 'flex' }} icon="ArrowForward" />
+              )}
             </CouponCodeAddButton>
           ),
         }}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { Grid } from '@mui/material';
 import { Addon, BillingPeriod, SubscriptionAddon } from '@stigg/js-client-sdk';
@@ -11,7 +11,7 @@ import { useAddonsStepModel } from '../../hooks/useAddonsStepModel';
 import { usePlanStepModel } from '../../hooks/usePlanStepModel';
 import { AddonListItemContainer, CheckoutAddonsContainer, TrashButton } from './CheckoutAddonsStep.style';
 import { CheckoutLocalization } from '../../textOverrides';
-import { useCheckoutModel } from '../../hooks';
+import { useCheckoutModel, useProgressBarModel } from '../../hooks';
 
 type UseAddonsStepModel = ReturnType<typeof useAddonsStepModel>;
 
@@ -23,6 +23,8 @@ type AddonListItemProps = {
   setAddon: UseAddonsStepModel['setAddon'];
   removeAddon: UseAddonsStepModel['removeAddon'];
   checkoutLocalization: CheckoutLocalization;
+  onAddonsValidationChange: (params: { addonId: string; isValid: boolean }) => void;
+  isValid: boolean;
 };
 
 function AddonListItem({
@@ -33,6 +35,8 @@ function AddonListItem({
   setAddon,
   removeAddon,
   checkoutLocalization,
+  onAddonsValidationChange,
+  isValid,
 }: AddonListItemProps) {
   const addonPrice = addon.pricePoints.find((pricePoint) => pricePoint.billingPeriod === billingPeriod);
   const isAdded = !!addonState;
@@ -41,12 +45,26 @@ function AddonListItem({
     (!initialAddonState && !!addonState) ||
     (!!initialAddonState && !addonState);
 
-  const handleQuantityChange = (quantity?: number) => {
-    setAddon(addon, quantity || 1);
+  const handleQuantityChange = (quantity: number | null) => {
+    if (!quantity || quantity <= 0) {
+      onAddonsValidationChange({ addonId: addon.id, isValid: false });
+      // Reset the input value to null
+      // @ts-ignore
+      setAddon(addon, quantity ?? null);
+      return;
+    }
+
+    onAddonsValidationChange({ addonId: addon.id, isValid: true });
+    setAddon(addon, quantity);
   };
 
   const handleUndo = () => {
-    initialAddonState ? setAddon(addon, initialAddonState.quantity) : removeAddon(addon.id);
+    if (initialAddonState) {
+      setAddon(addon, initialAddonState.quantity);
+    } else {
+      removeAddon(addon.id);
+      onAddonsValidationChange({ addonId: addon.id, isValid: true });
+    }
   };
 
   return (
@@ -78,8 +96,11 @@ function AddonListItem({
               id={`${addon.id}-input`}
               type="number"
               sx={{ width: 120, marginX: 2 }}
-              value={addonState?.quantity || 1}
-              onChange={(event) => handleQuantityChange(event?.target?.value ? Number(event?.target?.value) : 1)}
+              value={addonState?.quantity ?? ''}
+              error={!isValid}
+              helperText={!isValid ? 'Minimum 1' : undefined}
+              FormHelperTextProps={{ sx: { margin: '4px' } }}
+              onChange={(event) => handleQuantityChange(event?.target?.value ? Number(event?.target?.value) : null)}
             />
             <TrashButton color="error" onClick={() => removeAddon(addon.id)}>
               <Icon icon="Trash" style={{ display: 'flex' }} />
@@ -87,7 +108,7 @@ function AddonListItem({
           </>
         )}
         {!isAdded && (
-          <Button sx={{ paddingX: '22px', paddingY: '8px' }} onClick={() => handleQuantityChange()}>
+          <Button sx={{ paddingX: '22px', paddingY: '8px' }} onClick={() => handleQuantityChange(1)}>
             {checkoutLocalization.addAddonText}
           </Button>
         )}
@@ -99,13 +120,27 @@ function AddonListItem({
 export function CheckoutAddonsStep() {
   const { checkoutLocalization } = useCheckoutModel();
   const { billingPeriod } = usePlanStepModel();
+  const { setIsDisabled } = useProgressBarModel();
   const { initialAddons, addons, availableAddons, setAddon, removeAddon } = useAddonsStepModel();
+  const [addonsValidation, setAddonsValidation] = useState(
+    availableAddons?.reduce<Record<string, boolean>>((acc, curr) => {
+      const addonState = addons.find((x) => x.addon.id === curr.id);
+      acc[curr.id] = !!addonState && addonState.quantity > 0;
+      return acc;
+    }, {}) || {},
+  );
+
+  useEffect(() => {
+    const isDisabled = Object.values(addonsValidation).some((x) => !x);
+    setIsDisabled(isDisabled);
+  }, [addonsValidation, setIsDisabled]);
 
   return (
     <CheckoutAddonsContainer container>
       {availableAddons?.map((addon) => {
         const addonState = addons.find((x) => x.addon.id === addon.id);
         const initialAddonState = initialAddons?.find((x) => x.addon.id === addon.id);
+        const isValid = addonsValidation[addon.id];
 
         return (
           <AddonListItem
@@ -117,6 +152,10 @@ export function CheckoutAddonsStep() {
             setAddon={setAddon}
             removeAddon={removeAddon}
             checkoutLocalization={checkoutLocalization}
+            onAddonsValidationChange={({ addonId, isValid }: { addonId: string; isValid: boolean }) =>
+              setAddonsValidation({ ...addonsValidation, [addonId]: isValid })
+            }
+            isValid={isValid}
           />
         );
       })}

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

@@ -5,19 +5,39 @@ export const BillingPeriodPickerContainer = styled(Box)`
   margin: 16px 0;
 `;
 
-export const BillingPeriodButton = styled.button<{ $isActive?: boolean; $disabled?: boolean }>`
-  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};
+export const BillingPeriodButton = styled.button<{
+  $isActive?: boolean;
+  $disabled?: boolean;
+  $isOnlyBillingPeriod?: boolean;
+}>`
+  cursor: ${({ $disabled, $isOnlyBillingPeriod }) =>
+    $disabled ? 'default' : $isOnlyBillingPeriod ? 'default' : 'pointer'};
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  padding: 8px 8px 8px 4px;
+  padding: 2px 8px;
   border-radius: 10px;
-  border: ${({ theme, $isActive }) =>
-    `1px solid ${$isActive ? theme.stigg.palette.outlinedRestingBorder : theme.stigg.palette.outlinedBorder}`};
-  background: ${({ theme, $isActive }) => ($isActive ? theme.stigg.palette.backgroundSection : 'transparent')};
+  border: ${({ theme, $isActive, $isOnlyBillingPeriod }) => {
+    let borderColor = theme.stigg.palette.outlinedBorder;
+    if ($isOnlyBillingPeriod) {
+      borderColor = 'transparent';
+    } else if ($isActive) {
+      borderColor = theme.stigg.palette.outlinedRestingBorder;
+    }
+    return `1px solid ${borderColor}`;
+  }};
+  background: ${({ theme, $isActive, $isOnlyBillingPeriod }) => {
+    if ($isOnlyBillingPeriod) {
+      return 'transparent';
+    } else if ($isActive) {
+      return theme.stigg.palette.backgroundSection;
+    }
+    return 'transparent';
+  }};
   text-transform: none;
   text-align: start;
+  height: 36px;
 
   &.MuiButton-root {
     padding: 0 16px 0 8px;

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

@@ -11,21 +11,32 @@ import { usePlanStepModel } from '../../hooks/usePlanStepModel';
 import { BillingPeriodButton, BillingPeriodOptions, BillingPeriodPickerContainer } from './BillingPeriodPicker.style';
 import { CheckoutLocalization } from '../../textOverrides';
 
-const BillingPeriodOption = ({ billingPeriod }: { billingPeriod: BillingPeriod }) => {
+const BillingPeriodOption = ({
+  billingPeriod,
+  isOnlyBillingPeriod,
+}: {
+  billingPeriod: BillingPeriod;
+  isOnlyBillingPeriod: boolean;
+}) => {
   const { billingPeriod: selectedBillingPeriod, setBillingPeriod } = usePlanStepModel();
   const isActive = selectedBillingPeriod === billingPeriod;
 
   return (
-    <BillingPeriodButton onClick={() => setBillingPeriod(billingPeriod)} $isActive={isActive}>
+    <BillingPeriodButton
+      onClick={() => setBillingPeriod(billingPeriod)}
+      $isActive={isActive}
+      $isOnlyBillingPeriod={isOnlyBillingPeriod}>
       <Radio
         checked={isActive}
         onChange={() => setBillingPeriod(billingPeriod)}
         value={billingPeriod}
+        disabled={isOnlyBillingPeriod}
         inputProps={{ 'aria-label': formatBillingPeriod(billingPeriod) }}
+        sx={{ padding: 0, marginRight: '8px' }}
       />
 
       <Box>
-        <Typography variant="h6" color="primary" fontWeight={FontWeight.Medium}>
+        <Typography variant="body1" color="primary">
           {formatBillingPeriod(billingPeriod)}
         </Typography>
       </Box>
@@ -44,6 +55,8 @@ export const BillingPeriodPicker = ({ plan, checkoutLocalization }: BillingPerio
     (price) => price.billingPeriod === BillingPeriod.Monthly,
   );
 
+  const hasBothBillingPeriods = !!monthlyPrices?.length && !!annualPrices?.length;
+
   return (
     <BillingPeriodPickerContainer>
       <Typography variant="h6" color="primary" fontWeight={FontWeight.Medium}>
@@ -51,11 +64,19 @@ export const BillingPeriodPicker = ({ plan, checkoutLocalization }: BillingPerio
       </Typography>
 
       <BillingPeriodOptions>
-        {!!monthlyPrices?.length && (
-          <BillingPeriodOption key={BillingPeriod.Monthly} billingPeriod={BillingPeriod.Monthly} />
-        )}
         {!!annualPrices?.length && (
-          <BillingPeriodOption key={BillingPeriod.Annually} billingPeriod={BillingPeriod.Annually} />
+          <BillingPeriodOption
+            key={BillingPeriod.Annually}
+            billingPeriod={BillingPeriod.Annually}
+            isOnlyBillingPeriod={!hasBothBillingPeriods}
+          />
+        )}
+        {!!monthlyPrices?.length && (
+          <BillingPeriodOption
+            key={BillingPeriod.Monthly}
+            billingPeriod={BillingPeriod.Monthly}
+            isOnlyBillingPeriod={!hasBothBillingPeriods}
+          />
         )}
       </BillingPeriodOptions>
     </BillingPeriodPickerContainer>

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

@@ -33,43 +33,36 @@ const StyledPlanCharge = styled.div`
 
 export function PlanCharge({
   charge,
+  isValid,
   setBillableFeature,
   billableFeature,
   onValidationChange,
 }: {
   charge: Price;
+  isValid: boolean;
   billableFeature?: BillableFeatureInput;
   setBillableFeature: UsePlanStepModel['setBillableFeature'];
   onValidationChange: ({ featureId, isValid }: { featureId: string; isValid: boolean }) => void;
 }) {
-  const [isValid, setIsValid] = React.useState(true);
   const featureId = charge.feature?.featureId;
   const isBaseCharge = !featureId;
   const isPayAsYouGo = charge.pricingModel === BillingModel.UsageBased;
   const displayName = isBaseCharge ? 'Base charge' : charge.feature?.displayName;
   const hasQuantityRestrictions = !!(charge?.minUnitQuantity || charge?.maxUnitQuantity);
 
-  useEffect(() => {
-    if (!featureId) {
-      return;
-    }
-
-    onValidationChange({ featureId, isValid });
-  }, [featureId, isValid, onValidationChange]);
-
   const handleQuantityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (isBaseCharge || !featureId) return;
 
     const value = event?.target?.value ? Number(event?.target?.value) : charge.minUnitQuantity;
     if (!value || value <= 0) {
-      setIsValid(false);
+      onValidationChange({ featureId, isValid: false });
       // Reset the input value to null
       // @ts-ignore
-      setBillableFeature(featureId, null);
+      setBillableFeature(featureId, value ?? null);
       return;
     }
 
-    setIsValid(true);
+    onValidationChange({ featureId, isValid: true });
     const quantity = getValidPriceQuantity(charge, value);
     setBillableFeature(featureId, quantity);
   };
@@ -103,17 +96,18 @@ export function PlanCharge({
   } else {
     chargeRow = (
       <InputField
-        sx={{ width: 145 }}
+        sx={{ width: 120 }}
         id={`${featureId}-input`}
         type="number"
         InputProps={
           hasQuantityRestrictions ? { inputProps: { min: charge.minUnitQuantity, max: charge.maxUnitQuantity } } : {}
         }
         error={!isValid}
-        helperText={!isValid ? 'Not a valid value' : ''}
+        helperText={!isValid ? 'Minimum 1' : undefined}
         FormHelperTextProps={{ sx: { margin: '4px' } }}
-        value={billableFeature?.quantity || charge.minUnitQuantity}
+        value={billableFeature?.quantity ?? charge.minUnitQuantity ?? ''}
         onChange={handleQuantityChange}
+        onWheel={(e: React.WheelEvent<HTMLInputElement>) => (e.target as HTMLElement).blur()}
       />
     );
   }
@@ -142,7 +136,12 @@ export function CheckoutChargeList({ plan, billingPeriod }: CheckoutChargeListPr
   const { billableFeatures, setBillableFeature } = usePlanStepModel();
   const { setIsDisabled } = useProgressBarModel();
   const planCharges = useChargesSort(plan?.pricePoints?.filter((p) => p.billingPeriod === billingPeriod) || []);
-  const [chargesValidation, setChargesValidation] = useState({});
+  const [chargesValidation, setChargesValidation] = useState(
+    planCharges?.reduce<Record<string, boolean>>((acc, curr) => {
+      acc[curr.feature?.featureId || 'base-charge'] = true;
+      return acc;
+    }, {}),
+  );
 
   useEffect(() => {
     const isDisabled = Object.values(chargesValidation).some((x) => !x);
@@ -159,6 +158,7 @@ export function CheckoutChargeList({ plan, billingPeriod }: CheckoutChargeListPr
             charge={charge}
             setBillableFeature={setBillableFeature}
             billableFeature={billableFeature}
+            isValid={chargesValidation[charge.feature?.featureId || 'base-charge']}
             onValidationChange={({ featureId, isValid }: { featureId: string; isValid: boolean }) =>
               setChargesValidation((prev) => ({ ...prev, [featureId]: isValid }))
             }

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

@@ -190,11 +190,13 @@ export const CheckoutSummary = ({
 
               if (!addonPrice) return null;
 
+              const addonQuantity = addon.quantity && addon.quantity > 0 ? addon.quantity : 1;
+
               return (
                 <BilledPriceLineItem
                   key={addon?.addon?.id}
                   label={addon.addon.displayName}
-                  quantity={addon.quantity}
+                  quantity={addonQuantity}
                   price={addonPrice}
                 />
               );
@@ -213,7 +215,7 @@ export const CheckoutSummary = ({
 
         <StyledDivider className="stigg-checkout-summary-divider" />
 
-        {!disablePromotionCode && (
+        {!disablePromotionCode && !isFreeDowngrade && (
           <>
             <PromotionCodeSection checkoutLocalization={checkoutLocalization} />
 
@@ -258,13 +260,11 @@ export const CheckoutSummary = ({
         />
 
         <Button
-          disableRipple={isLoading || progressBar.progressBarState.isDisabled}
-          $isLoading={isLoading || progressBar.progressBarState.isDisabled}
           $success={isCheckoutCompletedSuccessfully}
-          $error={isLastStep && subscriptionPreview?.isPlanDowngrade}
-          disabled={isLoading || isFetchingSubscriptionPreview}
+          $error={isLastStep && !!subscriptionPreview?.isPlanDowngrade}
+          disabled={isLoading || isFetchingSubscriptionPreview || progressBar.progressBarState.isDisabled}
           className="stigg-checkout-summary-cta-button"
-          sx={{ textTransform: 'none', borderRadius: '10px', marginTop: '24px' }}
+          sx={{ textTransform: 'none', borderRadius: '10px', marginTop: '24px', height: '36px' }}
           variant="contained"
           size="medium"
           onClick={(e: any) => {