@stigg/react-sdk 4.4.0-beta.0 → 4.4.0-beta.10

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

@@ -20,6 +20,16 @@ type GetPlanStepInitialStateProps = {
   preconfiguredBillableFeatures: BillableFeature[];
 };
 
+const getBillingPeriod = (billingPeriod: BillingPeriod, hasMonthlyPrices?: boolean, hasAnnualPrices?: boolean) => {
+  if (billingPeriod === BillingPeriod.Monthly && hasMonthlyPrices) {
+    return billingPeriod;
+  }
+  if (billingPeriod === BillingPeriod.Annually && hasAnnualPrices) {
+    return billingPeriod;
+  }
+  return null;
+};
+
 const isInAdvanceCommitmentCharge = ({ pricingModel }: Price) => {
   return pricingModel === BillingModel.PerUnit;
 };
@@ -88,22 +98,27 @@ function resolveBillingPeriod({
   const hasMonthlyPrices = plan?.pricePoints.some((pricePoint) => pricePoint.billingPeriod === BillingPeriod.Monthly);
   const hasAnnualPrices = plan?.pricePoints.some((pricePoint) => pricePoint.billingPeriod === BillingPeriod.Annually);
 
+  if (preferredBillingPeriod) {
+    const billingPeriod = getBillingPeriod(preferredBillingPeriod, hasMonthlyPrices, hasAnnualPrices);
+    if (billingPeriod) {
+      return billingPeriod;
+    }
+  }
+
   const isUpdate = activeSubscription?.plan?.id === plan?.id;
   if (isUpdate) {
     return activeSubscription?.price?.billingPeriod || BillingPeriod.Monthly;
   }
 
-  if (preferredBillingPeriod) {
-    if (preferredBillingPeriod === BillingPeriod.Monthly && hasMonthlyPrices) {
-      return BillingPeriod.Monthly;
+  if (activeSubscription?.prices && activeSubscription?.prices.length > 0) {
+    const billingPeriod = getBillingPeriod(
+      activeSubscription?.prices[0].billingPeriod,
+      hasMonthlyPrices,
+      hasAnnualPrices,
+    );
+    if (billingPeriod) {
+      return billingPeriod;
     }
-    if (preferredBillingPeriod === BillingPeriod.Annually && hasAnnualPrices) {
-      return BillingPeriod.Annually;
-    }
-  }
-
-  if (activeSubscription?.price?.billingPeriod) {
-    return activeSubscription?.price?.billingPeriod;
   }
 
   return hasAnnualPrices ? BillingPeriod.Annually : BillingPeriod.Monthly;

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

@@ -1,64 +1,127 @@
 import { useCallback, useEffect, useState } from 'react';
-import { PreviewSubscription, SubscriptionPreview } from '@stigg/js-client-sdk';
+import isEmpty from 'lodash/isEmpty';
+import { BillingAddress, PreviewSubscription, StiggClient, SubscriptionPreview } 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';
+
+function mapBillingInformation({
+  billingAddress,
+  taxPercentage,
+}: {
+  billingAddress?: BillingAddress;
+  taxPercentage?: number;
+}): Pick<PreviewSubscription, 'billingInformation'> {
+  if (!billingAddress && !taxPercentage) {
+    return {};
+  }
+
+  return {
+    billingInformation: {
+      ...(billingAddress ? { billingAddress } : {}),
+      ...(taxPercentage ? { taxPercentage } : {}),
+    },
+  };
+}
+
+export type PreviewSubscriptionProps = {
+  customerId?: string;
+  planId?: string;
+  resourceId?: string;
+  stigg: StiggClient;
+} & SubscriptionState;
+
+const previewSubscription = async ({
+  stigg,
+  customerId,
+  planId,
+  resourceId,
+  promotionCode,
+  addons,
+  billableFeatures,
+  billingCountryCode,
+  billingPeriod,
+  billingAddress,
+  taxPercentage,
+}: PreviewSubscriptionProps) => {
+  const estimateAddons = addons.map(({ addon, quantity }) => ({ addonId: addon.id, quantity }));
+  let subscriptionPreview: SubscriptionPreview | 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 = await stigg.previewSubscription(previewSubscriptionProps);
+    }
+  } catch (error) {
+    const [, errorMsg] = (error as any)?.message?.split('Error:') || [];
+
+    errorMessage = errorMsg?.trim();
+  }
+
+  return { subscriptionPreview, errorMessage };
+};
 
 export const usePreviewSubscriptionAction = () => {
   const { stigg } = useStiggContext();
   const subscription = useSubscriptionModel();
-  const [{ resourceId, planStep }] = useCheckoutContext();
-  const { checkoutState } = useCheckoutModel();
-  const { plan, activeSubscription, customer } = checkoutState || {};
+  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;
-
-      try {
-        if (customer?.id && plan?.id) {
-          const previewSubscriptionProps: PreviewSubscription = {
-            customerId: customer.id,
-            planId: plan?.id,
-            billableFeatures: subscription.billableFeatures,
-            addons: estimateAddons,
-            billingPeriod: subscription.billingPeriod,
-            promotionCode: promotionCode ?? subscription.promotionCode,
-            resourceId,
-            billingCountryCode: planStep.billingCountryCode,
-            // TODO: Add billing information
-            // billingInformation, // TaxId / Tax percentage
-          };
-          subscriptionPreview = await stigg.previewSubscription(previewSubscriptionProps);
-        }
-      } catch (error) {
-        const [, errorMsg] = (error as any)?.message?.split('Error:') || [];
-
-        errorMessage = errorMsg?.trim();
+      if (!widgetState.isValid) {
+        return { subscriptionPreview: 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,
+      });
     },
     [
-      activeSubscription,
-      customer,
-      plan,
-      resourceId,
       stigg,
+      customer?.id,
+      plan?.id,
+      resourceId,
       subscription.addons,
-      subscription.billingPeriod,
       subscription.billableFeatures,
+      subscription.billingCountryCode,
+      subscription.billingPeriod,
+      subscription.billingAddress,
+      subscription.taxPercentage,
       subscription.promotionCode,
-      planStep.billingCountryCode,
+      widgetState.isValid,
     ],
   );
 
   return { previewSubscriptionAction };
 };
 
+const SUBSCRIPTION_PREVIEW_DEBOUNCE_TIME = 500;
+
 export const usePreviewSubscription = () => {
   const [subscriptionPreview, setSubscriptionPreview] = useState<SubscriptionPreview | null>(null);
   const [isFetchingSubscriptionPreview, setIsFetchingSubscriptionPreview] = useState(false);
@@ -67,15 +130,24 @@ export const usePreviewSubscription = () => {
 
   useEffect(() => {
     const estimateSubscription = async () => {
-      setIsFetchingSubscriptionPreview(true);
-
       const { subscriptionPreview } = await previewSubscriptionAction();
-      setSubscriptionPreview(subscriptionPreview);
+      if (subscriptionPreview) {
+        setSubscriptionPreview(subscriptionPreview);
+      }
 
       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/hooks/useProgressBarModel.ts

@@ -22,12 +22,14 @@ export type ProgressBarState = {
   activeStep: number;
   completedSteps: number[];
   steps: CheckoutStep[];
+  isDisabled: boolean;
 };
 
 const INITIAL_STATE: ProgressBarState = {
   activeStep: 0,
   completedSteps: [],
   steps: CHECKOUT_STEPS,
+  isDisabled: false,
 };
 
 export function getProgressBarInitialState({ availableAddons }: { availableAddons?: Addon[] }) {
@@ -66,6 +68,10 @@ function useGoNext() {
   const [, setState] = useCheckoutContext();
   return () =>
     setState(({ progressBar }) => {
+      if (progressBar.isDisabled) {
+        return;
+      }
+
       if (!progressBar.completedSteps.includes(progressBar.activeStep)) {
         progressBar.completedSteps.push(progressBar.activeStep);
       }
@@ -76,14 +82,26 @@ function useGoNext() {
     });
 }
 
+function useSetIsDisabled() {
+  const [, setState] = useCheckoutContext();
+  return (isDisabled?: boolean) =>
+    setState(({ progressBar }) => {
+      progressBar.isDisabled = !!isDisabled;
+    });
+}
+
 export function useProgressBarModel() {
   const progressBarState = useProgressBarState();
+  const currentStep = progressBarState.steps[progressBarState.activeStep];
+
   return {
+    currentStep,
     progressBarState,
     isLastStep: progressBarState.activeStep === progressBarState.steps.length - 1,
     isCheckoutComplete: isCheckoutComplete(progressBarState),
     setActiveStep: useSetActiveStep(),
     markStepAsCompleted: useMarkStepAsCompleted(),
     goNext: useGoNext(),
+    setIsDisabled: useSetIsDisabled(),
   };
 }

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

@@ -1,16 +1,22 @@
 import { useCheckoutContext } from '../CheckoutProvider';
 import { AddonsStepState } from './useAddonsStepModel';
 import { PromotionCodeState } from './useCouponModel';
+import { PaymentStepState } from './usePaymentStepModel';
 import { PlanStepState } from './usePlanStepModel';
 
-export type SubscriptionState = PlanStepState & PromotionCodeState & Pick<AddonsStepState, 'addons'>;
+export type SubscriptionState = PlanStepState &
+  PromotionCodeState &
+  Pick<AddonsStepState, 'addons'> &
+  Pick<PaymentStepState, 'billingAddress' | 'taxPercentage'>;
 
 export function useSubscriptionModel(): SubscriptionState {
-  const [{ planStep, addonsStep, promotionCode }] = useCheckoutContext();
+  const [{ planStep, addonsStep, promotionCode, paymentStep }] = useCheckoutContext();
 
   return {
     ...planStep,
     addons: addonsStep.addons,
     promotionCode,
+    billingAddress: paymentStep.billingAddress,
+    taxPercentage: paymentStep.taxPercentage,
   };
 }

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

@@ -11,7 +11,7 @@ export function useSubscriptionState(): ApplySubscription | undefined {
   const addons = subscription.addons.map(({ addon, quantity }) => ({ addonId: addon.id, quantity }));
 
   if (!plan?.id) {
-    return;
+    return undefined;
   }
 
   return {
@@ -22,5 +22,6 @@ export function useSubscriptionState(): ApplySubscription | undefined {
     addons,
     promotionCode: subscription.promotionCode,
     billingCountryCode: subscription.billingCountryCode,
+    ...(subscription.taxPercentage ? { billingInformation: { taxPercentage: subscription.taxPercentage } } : {}),
   };
 }

package/src/components/checkout/index.ts

@@ -1,3 +1,5 @@
 export { CheckoutTheme } from './theme';
 export { Checkout, CheckoutProps } from './Checkout';
+export { OnCheckoutCompletedParams, OnCheckoutParams, CheckoutResult } from './CheckoutContainer';
 export { CheckoutLocalization } from './textOverrides';
+export * from './types';

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,
@@ -25,10 +27,11 @@ export const StyledStepButton = styled(Button)(() => ({
   },
 }));
 
-export const StyledIcon = styled(Icon)<{ $disabled?: boolean; $shouldStroke?: boolean }>(
-  ({ theme, $disabled, $shouldStroke = true }) => ({
+export const StyledIcon = styled(Icon)<{ $disabled?: boolean; $shouldStroke?: boolean; $shouldFill?: boolean }>(
+  ({ theme, $disabled, $shouldStroke = true, $shouldFill }) => ({
     circle: {
       stroke: $shouldStroke ? ($disabled ? theme.stigg.palette.text.disabled : theme.stigg.palette.primary) : undefined,
+      fill: $shouldFill ? theme.stigg.palette.primary : undefined,
     },
   }),
 );

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

@@ -14,27 +14,31 @@ 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 (
             <Grid key={key} item display="flex" flexDirection="row" flex={1} justifyContent="flex-start">
-              {isLoadingCheckoutData && <Skeleton width={120} height={20} style={{ marginTop: 8 }} />}
-              {!isLoadingCheckoutData && (
+              {isLoadingCheckoutData ? (
+                <Skeleton width={120} height={20} style={{ marginTop: 8 }} />
+              ) : (
                 <StyledStepButton onClick={() => setActiveStep(index)} fullWidth disabled={isDisabled}>
                   <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}
+                          $shouldFill={isCompleted}
+                        />
                       }
                     />
 

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,27 @@ 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,17 +97,27 @@ 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)}>
+            <TrashButton
+              color="error"
+              onClick={() => {
+                removeAddon(addon.id);
+                onAddonsValidationChange({ addonId: addon.id, isValid: true });
+              }}>
               <Icon icon="Trash" style={{ display: 'flex' }} />
             </TrashButton>
           </>
         )}
         {!isAdded && (
-          <Button sx={{ paddingX: '22px', paddingY: '8px' }} onClick={() => handleQuantityChange()}>
-            {checkoutLocalization.addAddonText}
+          <Button sx={{ paddingX: '22px', paddingY: '8px' }} onClick={() => handleQuantityChange(1)}>
+            <Typography color="primary.main" variant="body1">
+              {checkoutLocalization.addAddonText}
+            </Typography>
           </Button>
         )}
       </Grid>
@@ -97,15 +126,29 @@ 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();
+  const [addonsValidation, setAddonsValidation] = useState(
+    availableAddons?.reduce<Record<string, boolean>>((acc, curr) => {
+      acc[curr.id] = true;
+      return acc;
+    }, {}) || {},
+  );
+
+  useEffect(() => {
+    const isDisabled = Object.values(addonsValidation).some((x) => !x);
+    setIsDisabled(isDisabled);
+    setIsValid(!isDisabled);
+  }, [addonsValidation, setIsDisabled, setIsValid]);
 
   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 +160,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/payment/PaymentMethods.style.ts

@@ -6,6 +6,7 @@ export const PaymentMethodContainer = styled(Grid)<{ $disabled?: boolean }>`
   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)`