@stigg/react-sdk 7.7.1-beta.1 → 7.8.0

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

@@ -0,0 +1,184 @@
+import keyBy from 'lodash/keyBy';
+import compact from 'lodash/compact';
+import { BillableFeatureInput, BillingPeriod } from '@stigg/api-client-js/src/generated/sdk';
+import { BillableFeature, BillingModel, Plan, Price, Subscription } from '@stigg/js-client-sdk';
+import { useCheckoutContext } from '../CheckoutProvider';
+import { getTierByQuantity, hasTierWithUnitPrice } from '../../utils/priceTierUtils';
+import { getValidPriceQuantity } from '../../utils/priceUtils';
+import { hasAnnualPrices, hasMonthlyPrices } from '../../utils/planPrices';
+
+export type PlanStepState = {
+  billingPeriod: BillingPeriod;
+  billableFeatures: BillableFeatureInput[];
+  billingCountryCode?: string;
+};
+
+type GetPlanStepInitialStateProps = {
+  preferredBillingPeriod?: BillingPeriod;
+  plan?: Plan;
+  activeSubscription?: Subscription | null;
+  billingCountryCode?: string;
+  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;
+};
+
+function getBillableFeatures(
+  preconfiguredBillableFeatures: BillableFeature[],
+  planPrices?: Price[],
+  activeSubscription?: Subscription | null,
+): BillableFeature[] {
+  if (!planPrices) return [];
+
+  const preconfBillableFeaturesByFeatureId = keyBy(preconfiguredBillableFeatures, 'featureId');
+
+  const quantityByFeatureId = keyBy(
+    compact(
+      activeSubscription?.prices?.map((charge) => {
+        const { feature } = charge;
+        if (!feature || !isInAdvanceCommitmentCharge(charge)) {
+          return null;
+        }
+
+        return {
+          featureId: feature.featureId,
+          quantity: feature.unitQuantity || null,
+        };
+      }),
+    ),
+    'featureId',
+  );
+
+  return compact(
+    planPrices?.map((price) => {
+      const featureId = price.feature?.featureId;
+      if (!featureId || !isInAdvanceCommitmentCharge(price)) {
+        return null;
+      }
+
+      let quantity;
+      const preconfiguredQuantity =
+        preconfBillableFeaturesByFeatureId[featureId]?.quantity || quantityByFeatureId[featureId]?.quantity;
+
+      quantity = getValidPriceQuantity(price, preconfiguredQuantity || 1);
+
+      if (price.isTieredPrice && !hasTierWithUnitPrice(price.tiers)) {
+        const tier = getTierByQuantity(price.tiers!, quantity);
+        quantity = tier.upTo!;
+      }
+
+      return {
+        featureId,
+        quantity,
+      };
+    }),
+  );
+}
+
+function resolveBillingPeriod({
+  plan,
+  activeSubscription,
+  preferredBillingPeriod,
+}: {
+  plan?: Plan;
+  activeSubscription?: Subscription | null;
+  preferredBillingPeriod?: BillingPeriod;
+}) {
+  const hasMonthlyPlan = hasMonthlyPrices(plan);
+  const hasAnnualPlan = hasAnnualPrices(plan);
+
+  if (preferredBillingPeriod) {
+    const billingPeriod = getBillingPeriod(preferredBillingPeriod, hasMonthlyPlan, hasAnnualPlan);
+    if (billingPeriod) {
+      return billingPeriod;
+    }
+  }
+
+  const isUpdate = activeSubscription?.plan?.id === plan?.id;
+  if (isUpdate) {
+    return activeSubscription?.price?.billingPeriod || BillingPeriod.Monthly;
+  }
+
+  if (activeSubscription?.prices && activeSubscription?.prices.length > 0) {
+    const billingPeriod = getBillingPeriod(activeSubscription?.prices[0].billingPeriod, hasMonthlyPlan, hasAnnualPlan);
+    if (billingPeriod) {
+      return billingPeriod;
+    }
+  }
+
+  return hasAnnualPlan ? BillingPeriod.Annually : BillingPeriod.Monthly;
+}
+
+export function getPlanStepInitialState({
+  preferredBillingPeriod,
+  plan,
+  activeSubscription,
+  billingCountryCode,
+  preconfiguredBillableFeatures,
+}: GetPlanStepInitialStateProps): PlanStepState {
+  const billingPeriod = resolveBillingPeriod({ plan, activeSubscription, preferredBillingPeriod });
+  const planPrices = plan?.pricePoints.filter((pricePoint) => pricePoint.billingPeriod === billingPeriod);
+  const billableFeatures = getBillableFeatures(preconfiguredBillableFeatures, planPrices, activeSubscription);
+
+  return {
+    billingPeriod,
+    billableFeatures,
+    billingCountryCode,
+  };
+}
+
+function usePlanState() {
+  const [{ planStep }] = useCheckoutContext();
+  return planStep;
+}
+
+function useSetBillableFeature() {
+  const [, setState] = useCheckoutContext();
+
+  return (featureId: string, quantity: number) =>
+    setState((draft) => {
+      const billableFeature = draft.planStep.billableFeatures.find(
+        (billableFeature) => billableFeature.featureId === featureId,
+      );
+
+      if (billableFeature) {
+        billableFeature.quantity = quantity;
+      } else {
+        draft.planStep.billableFeatures.push({ featureId, quantity });
+      }
+    });
+}
+
+function useSetBillingPeriod() {
+  const [, setState] = useCheckoutContext();
+
+  return (billingPeriod: BillingPeriod) =>
+    setState((draft) => {
+      draft.planStep.billingPeriod = billingPeriod;
+      draft.addonsStep.addons = draft.addonsStep.addons.filter((addon) =>
+        addon.addon.pricePoints.some((pricePoint) => pricePoint.billingPeriod === billingPeriod),
+      );
+    });
+}
+
+export function usePlanStepModel() {
+  const state = usePlanState();
+
+  return {
+    ...state,
+    setBillingPeriod: useSetBillingPeriod(),
+    setBillableFeature: useSetBillableFeature(),
+  };
+}

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

@@ -0,0 +1,165 @@
+import { useCallback, useEffect, useState } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { BillingAddress, PreviewSubscription, StiggClient, SubscriptionPreviewV2 } from '@stigg/js-client-sdk';
+import { useCheckoutContext } from '../CheckoutProvider';
+import { useCheckoutModel } from './useCheckoutModel';
+import { SubscriptionState, useSubscriptionModel } from './useSubscriptionModel';
+import { MockCheckoutPreviewCallback } from '../types';
+import { useStiggContext } from '../../../hooks/useStiggContext';
+
+function mapBillingInformation({
+  billingAddress,
+  taxPercentage,
+}: {
+  billingAddress?: BillingAddress;
+  taxPercentage?: number;
+}): Pick<PreviewSubscription, 'billingInformation'> {
+  if (!billingAddress && !taxPercentage) {
+    return {};
+  }
+
+  return {
+    billingInformation: {
+      ...(billingAddress ? { billingAddress } : {}),
+      ...(taxPercentage ? { taxPercentage } : {}),
+    },
+  };
+}
+
+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 Error)?.message?.split('Error:') || [];
+
+    errorMessage = errorMsg?.trim();
+  }
+
+  return { subscriptionPreview, errorMessage };
+};
+
+export const usePreviewSubscriptionAction = ({ onMockCheckoutPreview }: UsePreviewSubscriptionProps = {}) => {
+  const { stigg } = useStiggContext();
+  const subscription = useSubscriptionModel();
+  const [{ resourceId }] = useCheckoutContext();
+  const { checkoutState, widgetState } = useCheckoutModel();
+  const { plan, customer } = checkoutState || {};
+
+  const previewSubscriptionAction = useCallback(
+    async ({ promotionCode }: { promotionCode?: string | null } = {}) => {
+      if (!widgetState.isValid) {
+        return { subscriptionPreview: null, errorMessage: null };
+      }
+
+      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,
+      });
+    },
+    [
+      stigg,
+      customer?.id,
+      plan?.id,
+      resourceId,
+      subscription.addons,
+      subscription.billableFeatures,
+      subscription.billingCountryCode,
+      subscription.billingPeriod,
+      subscription.billingAddress,
+      subscription.taxPercentage,
+      subscription.promotionCode,
+      widgetState.isValid,
+      onMockCheckoutPreview,
+    ],
+  );
+
+  return { previewSubscriptionAction };
+};
+
+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({ onMockCheckoutPreview });
+
+  useEffect(() => {
+    const estimateSubscription = async () => {
+      const { subscriptionPreview } = await previewSubscriptionAction();
+      if (subscriptionPreview) {
+        setSubscriptionPreview(subscriptionPreview);
+      }
+
+      setIsFetchingSubscriptionPreview(false);
+    };
+
+    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

@@ -0,0 +1,211 @@
+import { BillableFeatureInput } from '@stigg/api-client-js/src/generated/sdk';
+import { Addon, BillableFeature, BillingPeriod, CheckoutStatePlan } from '@stigg/js-client-sdk';
+import { useCheckoutContext } from '../CheckoutProvider';
+import { CheckoutSteps } from '../configurations/steps';
+import { hasMultipleBillingPeriods } from '../../utils/planPrices';
+import { CheckoutStepKey } from '../types';
+
+export type CheckoutStep = {
+  key: CheckoutStepKey;
+  label: string;
+};
+
+const CHECKOUT_STEPS: CheckoutStep[] = [
+  { key: CheckoutStepKey.PLAN, label: 'Plan' },
+  { key: CheckoutStepKey.ADDONS, label: 'Add-ons' },
+  { key: CheckoutStepKey.PAYMENT, label: 'Payment details' },
+];
+
+export type ProgressBarState = {
+  activeStep: number;
+  completedSteps: number[];
+  steps: CheckoutStep[];
+  isDisabled: boolean;
+};
+
+const INITIAL_STATE: ProgressBarState = {
+  activeStep: 0,
+  completedSteps: [],
+  steps: CHECKOUT_STEPS,
+  isDisabled: false,
+};
+
+type GetProgressBarInitialStateProps = {
+  isLoading: boolean;
+  skipCheckoutSteps: CheckoutSteps[];
+  plan?: CheckoutStatePlan;
+  availableAddons?: Addon[];
+  availableCharges: BillableFeatureInput[];
+  preferredBillingPeriod?: BillingPeriod;
+  preconfiguredBillableFeatures: BillableFeature[];
+};
+
+const canSkipPlanStep = (
+  plan: CheckoutStatePlan,
+  availableCharges: BillableFeatureInput[],
+  preconfiguredBillableFeatures: BillableFeature[],
+  preferredBillingPeriod?: BillingPeriod,
+) => {
+  // if multiple billing periods are available, a preferred billing period must be selected
+  if (hasMultipleBillingPeriods(plan) && !preferredBillingPeriod) {
+    return false;
+  }
+
+  const availableChargesIds = availableCharges.map((charge) => charge.featureId);
+  const preconfiguredChargesIds = preconfiguredBillableFeatures.map((charge) => charge.featureId);
+
+  // if there are available charges, they must be preconfigured
+  if (
+    availableChargesIds.length !== preconfiguredChargesIds.length ||
+    !availableChargesIds.every((charge) => preconfiguredChargesIds.includes(charge))
+  ) {
+    return false;
+  }
+
+  return true;
+};
+
+export function getProgressBarInitialState({
+  isLoading,
+  skipCheckoutSteps,
+  plan,
+  availableAddons,
+  availableCharges,
+  preferredBillingPeriod,
+  preconfiguredBillableFeatures,
+}: GetProgressBarInitialStateProps) {
+  if (isLoading || !plan) {
+    return INITIAL_STATE;
+  }
+
+  const stepsToFilter: CheckoutStepKey[] = [];
+
+  if (
+    skipCheckoutSteps.includes('PLAN') &&
+    canSkipPlanStep(plan, availableCharges, preconfiguredBillableFeatures, preferredBillingPeriod)
+  ) {
+    stepsToFilter.push(CheckoutStepKey.PLAN);
+  }
+
+  if (availableAddons?.length === 0 || skipCheckoutSteps.includes('ADDONS')) {
+    stepsToFilter.push(CheckoutStepKey.ADDONS);
+  }
+
+  return { ...INITIAL_STATE, steps: CHECKOUT_STEPS.filter((step) => !stepsToFilter.includes(step.key)) };
+}
+
+function useProgressBarState() {
+  const [{ progressBar }] = useCheckoutContext();
+  return progressBar;
+}
+
+function useSetActiveStep() {
+  const [state, setState] = useCheckoutContext();
+  return async (stepNumber: number) => {
+    const { progressBar, planStep, addonsStep, paymentStep, onBeforeStepChange } = state;
+
+    if (stepNumber !== progressBar.activeStep && onBeforeStepChange) {
+      const currentStep = progressBar.steps[progressBar.activeStep];
+      const targetStep = progressBar.steps[stepNumber];
+
+      if (currentStep && targetStep) {
+        const currentState = {
+          planStep,
+          addonsStep,
+          paymentStep,
+        };
+
+        const canProceed = await onBeforeStepChange({
+          from: currentStep.key,
+          to: targetStep.key,
+          state: currentState,
+        });
+
+        if (!canProceed) {
+          return;
+        }
+      }
+    }
+
+    setState(({ progressBar }) => {
+      progressBar.activeStep = stepNumber;
+    });
+  };
+}
+function useMarkStepAsCompleted() {
+  const [, setState] = useCheckoutContext();
+  return (stepNumber: number) =>
+    setState(({ progressBar }) => {
+      progressBar.completedSteps.push(stepNumber);
+    });
+}
+
+function isCheckoutComplete(progressBar: ProgressBarState) {
+  return progressBar.completedSteps.length >= progressBar.steps.length - 1;
+}
+
+function useGoNext() {
+  const [state, setState] = useCheckoutContext();
+  return async () => {
+    const { progressBar, planStep, addonsStep, paymentStep, onBeforeStepChange } = state;
+
+    if (progressBar.isDisabled) {
+      return;
+    }
+
+    const currentStep = progressBar.steps[progressBar.activeStep];
+    const nextStep = progressBar.steps[progressBar.activeStep + 1];
+
+    if (nextStep && onBeforeStepChange) {
+      const currentState = {
+        planStep,
+        addonsStep,
+        paymentStep,
+      };
+
+      const canProceed = await onBeforeStepChange({
+        from: currentStep.key,
+        to: nextStep.key,
+        state: currentState,
+      });
+
+      if (!canProceed) {
+        return;
+      }
+    }
+
+    setState(({ progressBar }) => {
+      if (!progressBar.completedSteps.includes(progressBar.activeStep)) {
+        progressBar.completedSteps.push(progressBar.activeStep);
+      }
+
+      if (progressBar.activeStep < progressBar.steps.length - 1) {
+        progressBar.activeStep += 1;
+      }
+    });
+  };
+}
+
+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

@@ -0,0 +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'> &
+  Pick<PaymentStepState, 'billingAddress' | 'taxPercentage'>;
+
+export function useSubscriptionModel(): SubscriptionState {
+  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

@@ -0,0 +1,26 @@
+import { ApplySubscription, PreviewSubscription } from '@stigg/js-client-sdk';
+import { useCheckoutContext } from '../CheckoutProvider';
+import { useCheckoutModel } from './useCheckoutModel';
+import { useSubscriptionModel } from './useSubscriptionModel';
+
+export function useSubscriptionState(): ApplySubscription | PreviewSubscription | undefined {
+  const subscription = useSubscriptionModel();
+  const [{ resourceId }] = useCheckoutContext();
+  const { checkoutState } = useCheckoutModel();
+  const { plan } = checkoutState || {};
+  const addons = subscription.addons.map(({ addon, quantity }) => ({ addonId: addon.id, quantity }));
+
+  if (!plan?.id) {
+    return undefined;
+  }
+
+  return {
+    resourceId,
+    planId: plan.id,
+    billingPeriod: subscription.billingPeriod,
+    billableFeatures: subscription.billableFeatures,
+    addons,
+    promotionCode: subscription.promotionCode,
+    billingCountryCode: subscription.billingCountryCode,
+  };
+}

package/src/components/checkout/index.ts

@@ -0,0 +1,8 @@
+export { Checkout } from './Checkout';
+export * from './types';
+export type { CheckoutTheme } from './configurations/theme';
+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/planHeader/PlanHeader.tsx

@@ -0,0 +1,41 @@
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
+
+import { Typography } from '../../common/Typography';
+import { useCheckoutModel } from '../hooks/useCheckoutModel';
+import { CheckoutContainerProps } from '../CheckoutContainer';
+import { ChangePlanButton } from '../components/ChangePlanButton';
+
+type PlanHeaderProps = {
+  allowChangePlan?: boolean;
+} & Pick<CheckoutContainerProps, 'onChangePlan'>;
+
+export function PlanHeader({ allowChangePlan = false, onChangePlan }: PlanHeaderProps) {
+  const { checkoutState, checkoutLocalization } = useCheckoutModel();
+  const { plan } = checkoutState || {};
+
+  return (
+    <>
+      <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="h1">{plan?.displayName}</Typography>
+
+          {allowChangePlan && onChangePlan && (
+            <ChangePlanButton
+              onClick={() => {
+                onChangePlan({ currentPlan: plan });
+              }}
+              checkoutLocalization={checkoutLocalization}
+              size="medium"
+            />
+          )}
+        </Box>
+      </Box>
+      <Divider className="stigg-checkout-plan-header-divider" />
+    </>
+  );
+}

package/src/components/checkout/planHeader/index.ts

@@ -0,0 +1 @@
+export * from './PlanHeader';

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

@@ -0,0 +1,35 @@
+import styled from '@utils/style';
+import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
+import Button, { buttonClasses } from '@mui/material/Button';
+import { Icon } from '../../common/Icon';
+
+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,
+  },
+  [`& .${linearProgressClasses.bar}`]: {
+    backgroundColor: $disabled ? theme.stigg.palette.primaryLight : theme.stigg.palette.primary,
+  },
+}));
+
+export const StyledStepButton = styled(Button)(() => ({
+  [`&.${buttonClasses.root}`]: {
+    textTransform: 'none',
+    lineHeight: 'inherit',
+    justifyContent: 'flex-start',
+    padding: '8px 4px',
+  },
+}));
+
+export const StyledIcon = styled(Icon, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{
+  $disabled?: boolean;
+  $shouldFill?: boolean;
+}>(({ theme, $disabled, $shouldFill }) => ({
+  circle: {
+    stroke: $disabled ? theme.stigg.palette.primaryLight : theme.stigg.palette.primary,
+    fill: $shouldFill ? ($disabled ? theme.stigg.palette.primaryLight : theme.stigg.palette.primary) : undefined,
+  },
+}));