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

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

@@ -0,0 +1,82 @@
+import React, { useEffect, useRef } from 'react';
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import StepIcon from '@mui/material/StepIcon';
+import { useCheckoutModel, useProgressBarModel } from '../hooks';
+import { Typography } from '../../common/Typography';
+import { StyledIcon, StyledProgress, StyledStepButton } from './CheckoutProgressBar.style';
+import { Icons } from '../../common/Icon';
+import { Skeleton } from '../components/Skeletons.style';
+import { useIsScreenWiderThan } from '../../hooks/useIsScreenWiderThan';
+
+export const CheckoutProgressBar = () => {
+  const { progressBarState, setActiveStep, currentStep } = useProgressBarModel();
+  const { widgetState } = useCheckoutModel();
+  const isScreenWiderThanMd = useIsScreenWiderThan('md');
+  const containerRef = useRef<HTMLElement>();
+  const { readOnly, isLoadingCheckoutData } = widgetState;
+  const { activeStep, completedSteps, steps } = progressBarState || {};
+  const progress = ((activeStep + 1) * 100) / steps.length;
+
+  const [previousStep, setPreviousStep] = React.useState(currentStep);
+  useEffect(() => {
+    if (!isScreenWiderThanMd) {
+      if (containerRef.current && currentStep !== previousStep) {
+        containerRef.current.scrollIntoView({ behavior: 'smooth' });
+      }
+    }
+    setPreviousStep(currentStep);
+  }, [currentStep, isScreenWiderThanMd, previousStep, setPreviousStep]);
+
+  if (progressBarState.steps.length === 1) {
+    return null;
+  }
+
+  return (
+    <Box className="stigg-checkout-progress-container" sx={{ width: '100%', mb: 3 }} ref={containerRef}>
+      <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)) ||
+            (activeStep !== index && progressBarState.isDisabled);
+          const checkedIcon: Icons = isDisabled ? 'OutlinedCheckedCircleDisabled' : 'OutlinedCheckedCircle';
+
+          return (
+            <Grid
+              key={key}
+              item
+              display="flex"
+              flexDirection="row"
+              flex={isScreenWiderThanMd ? 1 : 'auto'}
+              justifyContent="flex-start">
+              {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={
+                        <StyledIcon
+                          icon={isCompleted ? checkedIcon : 'OutlinedCircle'}
+                          $disabled={isDisabled}
+                          $shouldFill={isCompleted}
+                        />
+                      }
+                    />
+
+                    <Typography variant="h6" color={isDisabled ? 'primary.main.light' : 'primary.main'}>
+                      {label}
+                    </Typography>
+                  </Grid>
+                </StyledStepButton>
+              )}
+            </Grid>
+          );
+        })}
+      </Grid>
+    </Box>
+  );
+};

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

@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+
+import styled from '@utils/style';
+import CircularProgress from '@mui/material/CircularProgress';
+import Grid from '@mui/material/Grid';
+
+import { Icon } from '../../common/Icon';
+import { Typography } from '../../common/Typography';
+import { Button, InputField } from '../components';
+import { usePreviewSubscriptionAction } from '../hooks';
+import { usePromotionCodeModel } from '../hooks/useCouponModel';
+import { AddPromotionCodeButton } from './AddPromotionCodeButton';
+import { PromotionCodeSectionProps } from './PromotionCodeSection';
+
+const CouponCodeAddButton = styled(Button)`
+  padding: 4px 10px;
+  min-width: unset;
+  border-radius: ${({ theme }) => theme.stigg.border.radius};
+  display: flex;
+  align-items: center;
+`;
+
+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({ onMockCheckoutPreview });
+
+  const handlePromotionCode = async () => {
+    setIsLoading(true);
+    setErrorMessage('');
+
+    const { subscriptionPreview, errorMessage } = await previewSubscriptionAction({ promotionCode });
+
+    if (!errorMessage && subscriptionPreview?.immediateInvoice?.discountDetails) {
+      persistPromotionCode(promotionCode.toUpperCase());
+      setShowInput(false);
+    } else if (errorMessage) {
+      setErrorMessage(errorMessage);
+    }
+    setIsLoading(false);
+  };
+
+  if (!showInput) {
+    return (
+      <AddPromotionCodeButton
+        disabled={disabled}
+        onAddClick={() => setShowInput(true)}
+        checkoutLocalization={checkoutLocalization}
+      />
+    );
+  }
+
+  return (
+    <Grid>
+      <Typography variant="body1" color={errorMessage ? 'error' : disabled ? 'disabled' : 'primary.main'}>
+        {checkoutLocalization.summary.couponCodeTitle}
+      </Typography>
+
+      <InputField
+        disabled={disabled}
+        autoFocus
+        variant="outlined"
+        fullWidth
+        error={!!errorMessage}
+        value={promotionCode}
+        onChange={(e) => {
+          setPromotionCode(e.target.value);
+        }}
+        inputProps={{ maxLength: 20 }}
+        onKeyDown={(e: any) => {
+          if (e.key === 'Enter') {
+            void handlePromotionCode();
+            e.preventDefault();
+          }
+        }}
+        InputProps={{
+          endAdornment: (
+            <CouponCodeAddButton
+              variant="contained"
+              disabled={disabled}
+              onClick={() => {
+                void handlePromotionCode();
+              }}>
+              {isLoading ? (
+                <CircularProgress size={18} sx={{ color: 'white' }} />
+              ) : (
+                <Icon style={{ display: 'flex' }} icon="ArrowForward" />
+              )}
+            </CouponCodeAddButton>
+          ),
+        }}
+      />
+      {!!errorMessage && (
+        <Typography variant="body1" color="error">
+          {errorMessage}
+        </Typography>
+      )}
+    </Grid>
+  );
+};

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

@@ -0,0 +1,43 @@
+import styled from '@utils/style';
+
+import PlusIcon from '../../../assets/plus-icon.svg';
+import { Typography } from '../../common/Typography';
+import { Button } from '../components';
+import { CheckoutLocalization } from '../configurations/textOverrides';
+
+const StyledPlusIcon = styled(PlusIcon, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{ $disabled: boolean }>`
+  margin-right: 8px;
+  path {
+    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, disabled }: AddPromotionCodeButtonProps) => (
+  <Button
+    disabled={disabled}
+    fullWidth
+    className="stigg-checkout-summary-add-coupon-code-button"
+    sx={{
+      textTransform: 'none',
+      justifyContent: 'flex-start',
+      color: disabled ? 'text.disabled' : 'primary.main',
+    }}
+    variant="text"
+    size="medium"
+    onClick={onAddClick}>
+    <StyledPlusIcon $disabled={disabled} className="stigg-checkout-summary-add-coupon-code-button-icon" />
+    <Typography
+      className="stigg-checkout-change-plan-button-text"
+      color={disabled ? 'disabled' : 'primary.main'}
+      style={{ lineHeight: '24px' }}
+      variant="h3">
+      {checkoutLocalization.summary.addCouponCodeText}
+    </Typography>
+  </Button>
+);

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

@@ -0,0 +1,49 @@
+import styled from '@utils/style';
+import Grid from '@mui/material/Grid';
+import { Icon } from '../../common/Icon';
+import { Typography } from '../../common/Typography';
+import { Button } from '../components';
+
+const AppliedCouponContainer = styled(Grid)`
+  width: auto;
+  display: inline-flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: ${({ theme }) => theme.stigg.border.radius};
+  border: 1px solid ${({ theme }) => theme.stigg.palette.primary};
+`;
+
+export const StyledIcon = styled(Icon, { shouldForwardProp: (prop) => prop !== 'style' })<{ $shouldFill?: boolean }>`
+  display: flex;
+
+  g {
+    stroke: ${({ theme }) => theme.stigg.palette.primary};
+  }
+
+  path {
+    fill: ${({ theme, $shouldFill }) => ($shouldFill ? theme.stigg.palette.primary : undefined)};
+  }
+`;
+
+export type AppliedPromotionCodeProps = {
+  promotionCode: string;
+  onClearPromotionCode: () => void;
+};
+
+export const AppliedPromotionCode = ({ promotionCode, onClearPromotionCode }: AppliedPromotionCodeProps) => (
+  <AppliedCouponContainer container>
+    <Grid item display="flex" gap={1} alignItems="center">
+      <StyledIcon icon="Coupon" />
+      <Typography variant="body1" color="primary.main" lineHeight="auto">
+        {promotionCode}
+      </Typography>
+    </Grid>
+    <Grid item>
+      <Button variant="text" sx={{ minWidth: 'unset', padding: 0 }} onClick={onClearPromotionCode}>
+        <StyledIcon icon="Close" $shouldFill />
+      </Button>
+    </Grid>
+  </AppliedCouponContainer>
+);

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

@@ -0,0 +1,40 @@
+import styled from '@utils/style';
+import { usePromotionCodeModel } from '../hooks/useCouponModel';
+import { AddPromotionCode } from './AddPromotionCode';
+import { AppliedPromotionCode } from './AppliedPromotionCode';
+import { CheckoutLocalization } from '../configurations/textOverrides';
+import { MockCheckoutPreviewCallback } from '../types';
+
+const PromotionCodeSectionContainer = styled.div`
+  margin: 16px 0;
+`;
+
+export type PromotionCodeSectionProps = {
+  disabled: boolean;
+  checkoutLocalization: CheckoutLocalization;
+  onMockCheckoutPreview?: MockCheckoutPreviewCallback;
+};
+
+export const PromotionCodeSection = ({
+  disabled,
+  checkoutLocalization,
+  onMockCheckoutPreview,
+}: PromotionCodeSectionProps) => {
+  const { promotionCode, setPromotionCode } = usePromotionCodeModel();
+
+  const onClearPromotionCode = () => {
+    setPromotionCode('');
+  };
+
+  const content = promotionCode ? (
+    <AppliedPromotionCode promotionCode={promotionCode} onClearPromotionCode={onClearPromotionCode} />
+  ) : (
+    <AddPromotionCode
+      disabled={disabled}
+      checkoutLocalization={checkoutLocalization}
+      onMockCheckoutPreview={onMockCheckoutPreview}
+    />
+  );
+
+  return <PromotionCodeSectionContainer>{content}</PromotionCodeSectionContainer>;
+};

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

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

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

@@ -0,0 +1,34 @@
+import styled from '@utils/style';
+import Grid from '@mui/material/Grid';
+
+import { Button } from '../../components';
+import { mq } from '../../../common/mediaQuery';
+
+export const CheckoutAddonsContainer = styled(Grid)`
+  width: 100%;
+  gap: 8px;
+`;
+
+export const AddonListItemContainer = styled(Grid)`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+
+  ${mq.md} {
+    gap: 0;
+    flex-direction: row;
+    justify-content: space-between;
+    min-height: 80px;
+    align-items: flex-start;
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
+`;
+
+export const TrashButton = styled(Button)`
+  min-width: unset;
+  width: 41px;
+  height: 41px;
+  padding: 0;
+`;

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

@@ -0,0 +1,144 @@
+import { useEffect, useState } from 'react';
+
+import { Addon, BillingPeriod, SubscriptionAddon } from '@stigg/js-client-sdk';
+
+import { CheckoutLocalization } from '../../configurations/textOverrides';
+import { useCheckoutModel, useProgressBarModel } from '../../hooks';
+import { useAddonsStepModel } from '../../hooks/useAddonsStepModel';
+import { usePlanStepModel } from '../../hooks/usePlanStepModel';
+import { AddonListItemContainer, CheckoutAddonsContainer } from './CheckoutAddonsStep.style';
+import { AddonInputContainer } from './components/AddonInputContainer';
+import { AddonTextContainer } from './components/AddonTextContainer';
+import { OnAddonChangeCallback } from '../../types';
+
+type UseAddonsStepModel = ReturnType<typeof useAddonsStepModel>;
+
+type AddonListItemProps = {
+  addon: Addon;
+  addonState?: SubscriptionAddon;
+  initialAddonState?: SubscriptionAddon;
+  billingPeriod: BillingPeriod;
+  setAddon: UseAddonsStepModel['setAddon'];
+  removeAddon: UseAddonsStepModel['removeAddon'];
+  checkoutLocalization: CheckoutLocalization;
+  onAddonsValidationChange: (params: { addonId: string; isValid: boolean }) => void;
+  onAddonChange?: OnAddonChangeCallback;
+};
+
+function AddonListItem({
+  addon,
+  billingPeriod,
+  addonState,
+  initialAddonState,
+  setAddon,
+  removeAddon,
+  checkoutLocalization,
+  onAddonsValidationChange,
+  onAddonChange,
+}: AddonListItemProps & {
+  onAddonChange?: OnAddonChangeCallback;
+}) {
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
+  const hasChanges =
+    (!!addonState && !!initialAddonState && addonState.quantity !== initialAddonState.quantity) ||
+    (!!initialAddonState && !addonState);
+  const isPriceForBillingPeriodAvailable = addon.pricePoints.some(
+    (pricePoint) => pricePoint.billingPeriod === billingPeriod,
+  );
+  const handleQuantityChange = async (quantity?: number | null) => {
+    if (!quantity || quantity <= 0) {
+      onAddonsValidationChange({ addonId: addon.id, isValid: false });
+      setErrorMessage('Minimum 1');
+      // Reset the input value to null
+      // @ts-ignore
+      setAddon(addon, quantity ?? null);
+      return;
+    }
+
+    const result = await onAddonChange?.({ addon, quantity });
+    setErrorMessage(result?.errorMessage);
+    onAddonsValidationChange({ addonId: addon.id, isValid: !result?.disableNextStep });
+    setAddon(addon, quantity);
+  };
+
+  const handleRemoveAddon = async () => {
+    await onAddonChange?.({ addon, quantity: 0 });
+
+    removeAddon(addon.id);
+    onAddonsValidationChange({ addonId: addon.id, isValid: true });
+  };
+
+  const handleUndo = async () => {
+    if (initialAddonState) {
+      const result = await onAddonChange?.({ addon, quantity: initialAddonState.quantity });
+      onAddonsValidationChange({ addonId: addon.id, isValid: !result?.disableNextStep });
+      setAddon(addon, initialAddonState.quantity);
+    } else {
+      await handleRemoveAddon();
+    }
+
+    onAddonsValidationChange({ addonId: addon.id, isValid: true });
+  };
+
+  return (
+    <AddonListItemContainer>
+      <AddonTextContainer addon={addon} billingPeriod={billingPeriod} checkoutLocalization={checkoutLocalization} />
+      <AddonInputContainer
+        addon={addon}
+        addonState={addonState}
+        hasChanges={hasChanges}
+        handleUndo={handleUndo}
+        errorMessage={errorMessage}
+        handleQuantityChange={handleQuantityChange}
+        isPriceForBillingPeriodAvailable={isPriceForBillingPeriodAvailable}
+        checkoutLocalization={checkoutLocalization}
+        handleRemoveAddon={handleRemoveAddon}
+      />
+    </AddonListItemContainer>
+  );
+}
+
+export function CheckoutAddonsStep({ onAddonChange }: { onAddonChange?: OnAddonChangeCallback }) {
+  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);
+
+        return (
+          <AddonListItem
+            key={addon.id}
+            addon={addon}
+            billingPeriod={billingPeriod}
+            addonState={addonState}
+            initialAddonState={initialAddonState}
+            setAddon={setAddon}
+            removeAddon={removeAddon}
+            checkoutLocalization={checkoutLocalization}
+            onAddonsValidationChange={({ addonId, isValid }: { addonId: string; isValid: boolean }) =>
+              setAddonsValidation({ ...addonsValidation, [addonId]: isValid })
+            }
+            onAddonChange={onAddonChange}
+          />
+        );
+      })}
+    </CheckoutAddonsContainer>
+  );
+}

package/src/components/checkout/steps/addons/addon.utils.ts

@@ -0,0 +1,67 @@
+import { Addon, BillingPeriod, Currency, SubscriptionAddon, WidgetType } from '@stigg/js-client-sdk';
+import sortBy from 'lodash/sortBy';
+
+type FilterAddonsBaseProps = {
+  billingPeriod?: BillingPeriod;
+  currency: Currency;
+  billingCountryCode?: string;
+};
+
+export const sortAddons = (addons: Addon[]): Addon[] => {
+  return sortBy<Addon>(addons, 'displayName');
+};
+
+export const sortSubscriptionAddons = (addons: SubscriptionAddon[]): SubscriptionAddon[] => {
+  return sortBy<SubscriptionAddon>(addons, 'addon.displayName');
+};
+
+function filterAddonPricePointsByBillingPeriod(addon: Addon, billingPeriod: BillingPeriod) {
+  return addon.pricePoints.some((pricePoint) => pricePoint.billingPeriod === billingPeriod);
+}
+
+function mapAddonPricePointsByBillingCountryCode({
+  addon,
+  currency,
+  billingCountryCode,
+}: {
+  addon: Addon;
+  currency: Currency;
+  billingCountryCode?: string;
+}) {
+  return {
+    ...addon,
+    pricePoints: addon.pricePoints.filter(
+      (pricePoint) =>
+        pricePoint.currency === currency &&
+        (billingCountryCode ? pricePoint.billingCountryCode === billingCountryCode : true),
+    ),
+  };
+}
+
+export function filterAddons({
+  addons,
+  billingCountryCode,
+  currency,
+}: { addons?: Addon[] } & FilterAddonsBaseProps): Addon[] {
+  return (
+    addons
+      ?.filter((addon) => !addon.hiddenFromWidgets?.includes(WidgetType.Checkout))
+      ?.map((addon) => mapAddonPricePointsByBillingCountryCode({ addon, currency, billingCountryCode })) || []
+  );
+}
+
+export function filterSubscriptionAddons({
+  addons,
+  billingPeriod,
+  billingCountryCode,
+  currency,
+}: { addons?: SubscriptionAddon[] } & FilterAddonsBaseProps): SubscriptionAddon[] {
+  return (
+    addons
+      ?.filter((addon) => filterAddonPricePointsByBillingPeriod(addon.addon, billingPeriod!))
+      ?.map((addon) => ({
+        ...addon,
+        addon: mapAddonPricePointsByBillingCountryCode({ addon: addon.addon, currency, billingCountryCode }),
+      })) || []
+  );
+}

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

@@ -0,0 +1,84 @@
+import { Button, InputField } from '@/components/checkout/components';
+import { CheckoutLocalization } from '@/components/checkout/configurations/textOverrides';
+import { Icon } from '@/components/common/Icon';
+import { Typography } from '@/components/common/Typography';
+import { ON_WHEEL_BLUR } from '@/components/utils/onWheelBlur';
+import { Grid, styled } from '@mui/material';
+import { Addon, SubscriptionAddon } from '@stigg/js-client-sdk';
+import { TrashButton } from '../CheckoutAddonsStep.style';
+import { useIsScreenWiderThan } from '@/components/hooks/useIsScreenWiderThan';
+
+const StyledAddonInput = styled(Grid)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  justify-content: flex-end;
+`;
+
+type AddonInputContainerProps = {
+  addon: Addon;
+  addonState?: SubscriptionAddon;
+  hasChanges: boolean;
+  errorMessage?: string;
+  isPriceForBillingPeriodAvailable: boolean;
+  checkoutLocalization: CheckoutLocalization;
+  handleQuantityChange: (quantity?: number | null) => Promise<void>;
+  handleUndo: () => Promise<void>;
+  handleRemoveAddon: () => Promise<void>;
+};
+
+export function AddonInputContainer({
+  addon,
+  addonState,
+  hasChanges,
+  errorMessage,
+  isPriceForBillingPeriodAvailable,
+  checkoutLocalization,
+  handleQuantityChange,
+  handleUndo,
+  handleRemoveAddon,
+}: AddonInputContainerProps) {
+  const isScreenWiderThanLg = useIsScreenWiderThan('lg');
+  const isAdded = !!addonState;
+
+  return (
+    <StyledAddonInput item sx={{ gap: '16px' }} container={!isScreenWiderThanLg}>
+      {hasChanges && (
+        <Button variant="text" size="small" sx={{ padding: '8px', minWidth: 'unset' }} onClick={handleUndo}>
+          <Typography color="primary.main" variant="body1">
+            Undo
+          </Typography>
+        </Button>
+      )}
+      {isAdded && (
+        <Grid sx={{ display: 'flex', width: '100%' }}>
+          <InputField
+            id={`${addon.id}-input`}
+            type="number"
+            onWheel={ON_WHEEL_BLUR}
+            sx={isScreenWiderThanLg ? { marginX: 2, width: '100%' } : { flex: 1 }}
+            value={addonState?.quantity ?? ''}
+            error={!!errorMessage}
+            helperText={errorMessage}
+            FormHelperTextProps={{ sx: { margin: '4px' } }}
+            onChange={(event) => handleQuantityChange(event?.target?.value ? Number(event?.target?.value) : null)}
+          />
+          <TrashButton color="error" onClick={handleRemoveAddon}>
+            <Icon icon="Trash" style={{ display: 'flex', padding: '8px' }} />
+          </TrashButton>
+        </Grid>
+      )}
+      {!isAdded && (
+        <Button
+          sx={{ paddingX: '22px', paddingY: '8px' }}
+          onClick={() => handleQuantityChange(1)}
+          disabled={!isPriceForBillingPeriodAvailable}>
+          <Typography color={!isPriceForBillingPeriodAvailable ? 'disabled' : 'primary.main'} variant="body1">
+            {checkoutLocalization.addAddonText}
+          </Typography>
+        </Button>
+      )}
+    </StyledAddonInput>
+  );
+}