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

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

@@ -1,82 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

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

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

@@ -1,34 +0,0 @@
-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

@@ -1,144 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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>
-  );
-}