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

package/src/components/paywall/PlanOfferingButton.tsx

@@ -1,232 +0,0 @@
-import { useState } from 'react';
-import { BillingPeriod, Customer, PricingType, Subscription } from '@stigg/js-client-sdk';
-import { isFunction } from 'lodash';
-import ClipLoader from 'react-spinners/ClipLoader';
-import styled from '@utils/style';
-import { css, useTheme } from '@emotion/react';
-import { CurrentSubscriptionOverride, PaywallPlan, SubscribeIntentionType } from './types';
-import { PaywallLocalization } from './paywallTextOverrides';
-import { flexLayoutMapper } from '../../theme/getResolvedTheme';
-import { Typography } from '../common/Typography';
-import { getSubscriptionScheduleUpdateTexts } from '../utils/getSubscriptionScheduleUpdateTexts';
-import { compareSelectedTierToCurrentTier, PriceTierComparison } from '../utils/priceTierUtils';
-
-const LoadingIndicator = styled(ClipLoader)`
-  margin-left: 10px;
-`;
-
-const OfferingButton = styled.button<{ $disabled?: boolean }>`
-  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};
-  padding: 8px 12px;
-  background-color: ${({ theme }) => theme.stigg.palette.backgroundButton};
-  border: ${({ theme }) => `1px solid ${theme.stigg.palette.outlinedRestingBorder}`};
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 42px;
-  min-width: 120px;
-
-  ${({ $disabled }) =>
-    $disabled &&
-    css`
-      opacity: 0.5;
-    `}
-
-  &:hover {
-    background-color: ${({ theme, $disabled }) =>
-      $disabled ? theme.stigg.palette.backgroundButton : theme.stigg.palette.outlinedHoverBackground};
-  }
-`;
-
-const ButtonText = styled(Typography)`
-  margin: 0;
-  font-size: 15px;
-`;
-
-const ScheduledUpdateText = styled(Typography)`
-  min-height: 87px;
-`;
-
-const CancelScheduledUpdateButton = styled.button<{ $disabled?: boolean }>`
-  background: none;
-  border: none;
-  padding: 0;
-  color: ${({ theme }) => theme.stigg.palette.text.secondary};
-
-  text-decoration: underline;
-  cursor: pointer;
-`;
-
-const TrialDaysLeft = styled(Typography)`
-  margin-top: 8px;
-  margin-bottom: 17px;
-  min-height: 20px;
-`;
-
-const ButtonLayout = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-top: 4px;
-  align-self: ${({ theme }) => flexLayoutMapper(theme.stigg.layout.ctaAlignment)};
-  width: 100%;
-`;
-
-type PlanOfferingButtonProps = {
-  isNextPlan?: boolean;
-  customer: Customer | null;
-  plan: PaywallPlan;
-  currentSubscription: Subscription | null;
-  currentSubscriptionOverride?: CurrentSubscriptionOverride | null;
-  billingPeriod: BillingPeriod;
-  isCustomerOnTrial: boolean;
-  paywallLocale: PaywallLocalization;
-  onPlanSelected: (intentionType: SubscribeIntentionType) => void | Promise<void>;
-  withTrialLeftRow: boolean;
-  perUnitQuantityByFeature: Record<string, number>;
-};
-
-export function PlanOfferingButton({
-  isNextPlan,
-  customer,
-  plan,
-  billingPeriod,
-  isCustomerOnTrial,
-  onPlanSelected,
-  paywallLocale,
-  withTrialLeftRow,
-  currentSubscription,
-  currentSubscriptionOverride,
-  perUnitQuantityByFeature,
-}: PlanOfferingButtonProps) {
-  const theme = useTheme();
-  const [isLoading, setIsLoading] = useState(false);
-  const {
-    currentPlan,
-    custom,
-    downgrade,
-    startTrial,
-    upgrade,
-    startNew,
-    switchToBillingPeriod,
-    cancelScheduledUpdate,
-  } = paywallLocale.planCTAButton;
-  const resolvedDowngrade = isFunction(downgrade) ? downgrade(plan) : downgrade;
-  const resolvedUpgrade = isFunction(upgrade) ? upgrade(plan) : upgrade;
-
-  const buttonProps: {
-    title: string;
-    disabled: boolean;
-    intentionType: SubscribeIntentionType;
-  } = {
-    title: customer ? (plan.isLowerThanCurrentPlan ? resolvedDowngrade : resolvedUpgrade) : startNew,
-    disabled: false,
-    intentionType: plan.isLowerThanCurrentPlan
-      ? SubscribeIntentionType.DOWNGRADE_PLAN
-      : isCustomerOnTrial
-      ? SubscribeIntentionType.UPGRADE_TRIAL_TO_PAID
-      : SubscribeIntentionType.UPGRADE_PLAN,
-  };
-  const isCustomPrice = plan.pricingType === PricingType.Custom;
-
-  const { line1: scheduledUpdateText } = getSubscriptionScheduleUpdateTexts({
-    scheduledUpdate: plan.scheduledUpdate,
-    options: { withDate: true },
-  });
-
-  if (plan.isTriable && !plan.isCurrentCustomerPlan && !isCustomerOnTrial) {
-    buttonProps.title = startTrial(plan);
-    buttonProps.intentionType = SubscribeIntentionType.START_TRIAL;
-  } else if (plan.isCurrentCustomerPlan && !isCustomerOnTrial) {
-    const isSameBillingPeriod = billingPeriod === plan.currentCustomerPlanBillingPeriod;
-
-    if (
-      isSameBillingPeriod ||
-      (plan.pricingType && [PricingType.Free, PricingType.Custom].includes(plan.pricingType))
-    ) {
-      const planComparison = compareSelectedTierToCurrentTier({
-        perUnitQuantityByFeature,
-        plan,
-        currentSubscription,
-        currentSubscriptionOverride,
-      });
-      switch (planComparison) {
-        case PriceTierComparison.Lower:
-          buttonProps.intentionType = SubscribeIntentionType.CHANGE_UNIT_QUANTITY;
-          buttonProps.title = resolvedDowngrade;
-          break;
-        case PriceTierComparison.Higher:
-          buttonProps.intentionType = SubscribeIntentionType.CHANGE_UNIT_QUANTITY;
-          buttonProps.title = resolvedUpgrade;
-          break;
-
-        default:
-          buttonProps.title = currentPlan;
-          buttonProps.disabled = true;
-          break;
-      }
-    } else {
-      buttonProps.title = switchToBillingPeriod(billingPeriod);
-      buttonProps.intentionType = SubscribeIntentionType.CHANGE_BILLING_PERIOD;
-    }
-  } else if (isCustomPrice) {
-    buttonProps.title = typeof custom === 'function' ? custom({ plan, selectedBillingPeriod: billingPeriod }) : custom;
-    buttonProps.intentionType = SubscribeIntentionType.REQUEST_CUSTOM_PLAN_ACCESS;
-  }
-
-  if (isNextPlan && plan.scheduledUpdate) {
-    buttonProps.disabled = false;
-    buttonProps.title = cancelScheduledUpdate;
-    buttonProps.intentionType = SubscribeIntentionType.CANCEL_SCHEDULED_UPDATES;
-  }
-
-  const isDisabled = isLoading || buttonProps.disabled;
-  return (
-    <>
-      <ButtonLayout className="stigg-paywall-plan-button-layout">
-        {isNextPlan && scheduledUpdateText ? (
-          <ScheduledUpdateText color="secondary" variant="body1" className="stigg-paywall-schedule-update-text">
-            {scheduledUpdateText}{' '}
-            <CancelScheduledUpdateButton
-              color="secondary"
-              onClick={() => {
-                setIsLoading(true);
-                Promise.resolve(onPlanSelected(buttonProps.intentionType)).finally(() => setIsLoading(false));
-              }}>
-              {buttonProps.title}
-            </CancelScheduledUpdateButton>
-          </ScheduledUpdateText>
-        ) : (
-          <>
-            <OfferingButton
-              className="stigg-paywall-plan-button"
-              data-testid={`paywall-card-cta-${plan.displayName}`}
-              disabled={isDisabled}
-              $disabled={isDisabled}
-              onClick={() => {
-                setIsLoading(true);
-                Promise.resolve(onPlanSelected(buttonProps.intentionType)).finally(() => setIsLoading(false));
-              }}>
-              <ButtonText className="stigg-paywall-plan-button-text" variant="h6" color="primary.main">
-                {buttonProps.title}
-              </ButtonText>
-              {isLoading && <LoadingIndicator color={theme.stigg.palette.text.disabled} loading size={16} />}
-            </OfferingButton>
-
-            {!withTrialLeftRow ? (
-              <div style={{ height: '20px' }} />
-            ) : (
-              <TrialDaysLeft className="stigg-trial-days-left-text" variant="h6" color="secondary">
-                {plan.isCurrentCustomerPlan && plan.trialDaysLeft && (
-                  <>
-                    <b>{plan.trialDaysLeft} days</b> left on your free trial
-                  </>
-                )}
-              </TrialDaysLeft>
-            )}
-          </>
-        )}
-      </ButtonLayout>
-    </>
-  );
-}

package/src/components/paywall/PlanPrice.tsx

@@ -1,154 +0,0 @@
-import styled from '@utils/style';
-import { BillingPeriod } from '@stigg/js-client-sdk';
-import { PaywallPlan } from './types';
-import { PaywallLocalization } from './paywallTextOverrides';
-import { getPlanPrice } from '../utils/getPlanPrice';
-import { Typography } from '../common/Typography';
-import { TiersSelectContainer } from '../common/TiersSelectContainer';
-
-const EMPTY_CHAR = '‎';
-
-const PlanPriceContainer = styled(Typography)`
-  word-break: break-word;
-  width: 100%;
-`;
-
-const UnitSpan = styled(Typography)`
-  white-space: nowrap;
-`;
-
-const PriceSpan = styled(Typography)`
-  white-space: normal;
-  min-height: 39px;
-`;
-
-type PriceBillingPeriodProps = {
-  plan: PaywallPlan;
-  billingPeriod: BillingPeriod;
-  hasMonthlyPrice: boolean;
-  hasAnnuallyPrice: boolean;
-  paywallLocale: PaywallLocalization;
-};
-
-function PriceBillingPeriod({
-  plan,
-  billingPeriod,
-  hasMonthlyPrice,
-  hasAnnuallyPrice,
-  paywallLocale,
-}: PriceBillingPeriodProps) {
-  const hasPrice = plan.pricePoints.find((pricePoint) => pricePoint.billingPeriod === billingPeriod);
-
-  let content = EMPTY_CHAR;
-  if (hasPrice && hasMonthlyPrice && hasAnnuallyPrice) {
-    content = paywallLocale.price.billingPeriod?.(billingPeriod) || `, billed ${billingPeriod.toLowerCase()}`;
-  }
-
-  return (
-    <Typography as="span" className="stigg-price-billing-period-text" variant="h6" color="secondary">
-      {content}
-    </Typography>
-  );
-}
-
-export const PlanPrice = ({
-  showStartingAt,
-  withUnitPriceRow,
-  withStartingAtRow,
-  withTiersRow,
-  plan,
-  billingPeriod,
-  paywallLocale,
-  locale,
-  hasMonthlyPrice,
-  hasAnnuallyPrice,
-  perUnitQuantityByFeature,
-  setPerUnitQuantityByFeature,
-}: {
-  showStartingAt: boolean;
-  withUnitPriceRow: boolean;
-  withStartingAtRow: boolean;
-  withTiersRow: boolean;
-  perUnitQuantityByFeature: Record<string, number>;
-  setPerUnitQuantityByFeature: React.Dispatch<React.SetStateAction<Record<string, number>>>;
-  plan: PaywallPlan;
-  billingPeriod: BillingPeriod;
-  paywallLocale: PaywallLocalization;
-  hasMonthlyPrice: boolean;
-  hasAnnuallyPrice: boolean;
-  locale: string;
-}) => {
-  const { price, unit, tiers, tierUnits } = getPlanPrice(
-    plan,
-    billingPeriod,
-    paywallLocale,
-    locale,
-    hasMonthlyPrice,
-    perUnitQuantityByFeature,
-  );
-
-  // We currently only support prices with one tier - so we select the first one
-  const tieredPrice = plan.pricePoints.find((planPrice) => {
-    return planPrice.billingPeriod === billingPeriod && planPrice.isTieredPrice;
-  });
-  const featureId = tieredPrice ? tieredPrice.feature!.featureId : undefined;
-  const perUnitQuantity = perUnitQuantityByFeature[featureId || ''] ?? 1;
-
-  const handlePerUnitQuantityChange = (quantity: number) => {
-    if (!featureId) {
-      return;
-    }
-
-    setPerUnitQuantityByFeature((prevState) => ({
-      ...prevState,
-      [featureId]: quantity,
-    }));
-  };
-
-  return (
-    <PlanPriceContainer as="div" className="stigg-price-text">
-      <>
-        {withStartingAtRow && (
-          <Typography
-            style={{ minHeight: '20px' }}
-            className="stigg-starting-at-text"
-            variant="body1"
-            color="secondary">
-            {showStartingAt ? paywallLocale.price.startingAtCaption : EMPTY_CHAR}
-          </Typography>
-        )}
-
-        <PriceSpan className="stigg-price-point" variant="h1">
-          {price}
-        </PriceSpan>
-
-        {withUnitPriceRow && (
-          <Typography as="div" className="stigg-price-unit-and-billing-period-text" style={{ minHeight: '48px' }}>
-            <UnitSpan className="stigg-price-unit-text" as="span" variant="h6" color="secondary">
-              {unit}
-            </UnitSpan>
-
-            <PriceBillingPeriod
-              plan={plan}
-              billingPeriod={billingPeriod}
-              hasAnnuallyPrice={hasAnnuallyPrice}
-              hasMonthlyPrice={hasMonthlyPrice}
-              paywallLocale={paywallLocale}
-            />
-          </Typography>
-        )}
-
-        {withTiersRow ? (
-          <TiersSelectContainer
-            componentId={`${plan.id}_${featureId}_tier`}
-            tiers={tiers}
-            tierUnits={tierUnits}
-            tiersMode={tieredPrice?.tiersMode}
-            handleChange={handlePerUnitQuantityChange}
-            value={perUnitQuantity}
-          />
-        ) : null}
-      </>
-    </PlanPriceContainer>
-  );
-};

package/src/components/paywall/hooks/useLoadPaywallData.ts

@@ -1,75 +0,0 @@
-import { BillingPeriod, Paywall } from '@stigg/js-client-sdk';
-import { useEffect, useState } from 'react';
-import logger from '../../../services/logger';
-import { CurrentSubscriptionOverrideFn, PaywallData } from '../types';
-import { computeBillingPeriods } from '../utils/computeDefaultBillingPeriod';
-import { mapPaywallData } from '../utils/mapPaywallData';
-import { useStiggContext } from '../../../hooks/useStiggContext';
-
-type UseLoadPaywallDataProps = {
-  productId?: string;
-  resourceId?: string;
-  showOnlyEligiblePlans?: boolean;
-  billingCountryCode?: string;
-  preferredBillingPeriod?: BillingPeriod;
-  currentSubscriptionOverrideFn?: CurrentSubscriptionOverrideFn;
-};
-
-export function useLoadPaywallData({
-  productId,
-  resourceId,
-  showOnlyEligiblePlans,
-  billingCountryCode,
-  preferredBillingPeriod,
-  currentSubscriptionOverrideFn,
-}: UseLoadPaywallDataProps): PaywallData {
-  const { stigg, locale } = useStiggContext();
-  const [selectedBillingPeriod, setSelectedBillingPeriod] = useState(BillingPeriod.Annually);
-  const [availableBillingPeriods, setAvailableBillingPeriods] = useState<BillingPeriod[]>([]);
-  const [paywall, setPaywall] = useState<Paywall | null>(null);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-
-  useEffect(() => {
-    const loadPaywall = async () => {
-      try {
-        setIsLoading(true);
-
-        await stigg.waitForInitialization();
-        const paywallResult = await stigg.getPaywall({
-          productId,
-          resourceId,
-          billingCountryCode,
-        });
-        const { availableBillingPeriods, defaultBillingPeriod } = computeBillingPeriods(
-          paywallResult.plans,
-          paywallResult.activeSubscriptions,
-          preferredBillingPeriod,
-        );
-
-        setPaywall(paywallResult);
-        setAvailableBillingPeriods(availableBillingPeriods);
-        setSelectedBillingPeriod(defaultBillingPeriod);
-      } catch (err) {
-        logger.error(`Failed to load paywall ${(err as any)?.message}`, err as Error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    void loadPaywall();
-  }, [stigg, productId, stigg.isCustomerLoaded, billingCountryCode, resourceId, preferredBillingPeriod]);
-
-  const paywallData = mapPaywallData(paywall, showOnlyEligiblePlans, currentSubscriptionOverrideFn);
-
-  return {
-    customer: paywall?.customer || null,
-    isLoading,
-    selectedBillingPeriod,
-    setSelectedBillingPeriod,
-    availableBillingPeriods,
-    locale,
-    configuration: paywallData.paywallConfiguration,
-    showWatermark: stigg.getShowWatermark(),
-    ...paywallData,
-  };
-}

package/src/components/paywall/index.ts

@@ -1,5 +0,0 @@
-export { PaywallContainer as Paywall } from './PaywallContainer';
-export type { PaywallContainerProps as PaywallProps } from './PaywallContainer';
-export * from './types';
-export type { PlanPriceText, PaywallLocalization, CurrentPlanParams } from './paywallTextOverrides';
-export { PlanCompatibleAddons } from './PlanCompatibleAddons';

package/src/components/paywall/paywallTextOverrides.ts

@@ -1,79 +0,0 @@
-import {
-  BillingPeriod,
-  PaywallCalculatedPricePoint,
-  PaywallCurrency,
-  Plan,
-  Price,
-  PriceTierFragment,
-} from '@stigg/js-client-sdk';
-import merge from 'lodash/merge';
-import { DeepPartial } from '../../types';
-import { PlanPriceText } from '../utils/getPlanPrice';
-import { PaywallPlan } from './types';
-
-export type { PlanPriceText } from '../utils/getPlanPrice';
-
-export type CurrentPlanParams = {
-  plan: Plan;
-  selectedBillingPeriod: BillingPeriod;
-};
-
-export type PaywallLocalization = {
-  highlightChip: string;
-  entitlementsTitle?: (plan: PaywallPlan) => string;
-  addonsTitle?: string;
-  planCTAButton: {
-    upgrade: string | ((plan: PaywallPlan) => string);
-    downgrade: string | ((plan: PaywallPlan) => string);
-    startTrial: (plan: PaywallPlan) => string;
-    custom: ((data: CurrentPlanParams) => string) | string;
-    currentPlan: string;
-    startNew: string;
-    switchToBillingPeriod: (billingPeriod: BillingPeriod) => string;
-    cancelScheduledUpdate: string;
-  };
-  price: {
-    startingAtCaption: string;
-    billingPeriod?: (billingPeriod: BillingPeriod) => string;
-    pricePeriod: (billingPeriod: BillingPeriod) => string;
-    custom: ((data: CurrentPlanParams) => string) | string;
-    priceNotSet: string;
-    free: PlanPriceText | ((currency?: PaywallCurrency) => PlanPriceText);
-    paid?: (priceData: {
-      planPrices: Price[];
-      paywallCalculatedPrice?: PaywallCalculatedPricePoint;
-      plan: Plan;
-      selectedBillingPeriod: BillingPeriod;
-      selectedTier?: PriceTierFragment;
-    }) => PlanPriceText;
-  };
-};
-
-export function getResolvedPaywallLocalize(localizeOverride?: DeepPartial<PaywallLocalization>) {
-  const paywallDefaultLocalization: PaywallLocalization = {
-    highlightChip: 'Recommended',
-    addonsTitle: 'Available add-ons:',
-    planCTAButton: {
-      upgrade: 'Upgrade',
-      downgrade: 'Downgrade',
-      startTrial: (plan: PaywallPlan) => `Start ${plan.defaultTrialConfig?.duration} day trial`,
-      custom: 'Contact us',
-      currentPlan: 'Current plan',
-      startNew: 'Get started',
-      switchToBillingPeriod: (billingPeriod) => {
-        return billingPeriod === BillingPeriod.Monthly ? 'Switch to monthly billing' : 'Switch to annual billing';
-      },
-      cancelScheduledUpdate: 'Cancel',
-    },
-    price: {
-      startingAtCaption: 'Starts at',
-      pricePeriod: (billingPeriod: BillingPeriod) => (billingPeriod === BillingPeriod.Monthly ? '/ month' : '/ year'),
-      free: (currency) => ({
-        price: `${currency?.symbol}0`,
-      }),
-      custom: 'Custom',
-      priceNotSet: 'Price not set',
-    },
-  };
-  return merge(paywallDefaultLocalization, localizeOverride);
-}

package/src/components/paywall/types.ts

@@ -1,80 +0,0 @@
-import {
-  BillingPeriod,
-  Customer,
-  Plan,
-  Subscription,
-  CustomerPortalSubscriptionScheduledUpdateDataFragment,
-  PaywallCurrency,
-  PaywallCalculatedPricePoint,
-  BillableFeature,
-} from '@stigg/js-client-sdk';
-import { CustomizedTheme } from '../../theme/Theme';
-
-export type PaywallData = {
-  plans: PaywallPlan[] | null;
-  customer: Customer | null;
-  currentSubscription: Subscription | null;
-  currentSubscriptionOverride?: CurrentSubscriptionOverride | null;
-  isCustomerOnTrial: boolean;
-  isLoading: boolean;
-  selectedBillingPeriod: BillingPeriod;
-  setSelectedBillingPeriod: (billingPeriod: BillingPeriod) => void;
-  availableBillingPeriods: BillingPeriod[];
-  locale: string;
-  configuration?: CustomizedTheme;
-  showWatermark: boolean;
-};
-
-export type CurrentSubscriptionOverride = {
-  planId: string;
-  billableFeatures: BillableFeature[];
-};
-
-export enum SubscribeIntentionType {
-  START_TRIAL = 'START_TRIAL',
-  UPGRADE_TRIAL_TO_PAID = 'UPGRADE_TRIAL_TO_PAID',
-  REQUEST_CUSTOM_PLAN_ACCESS = 'REQUEST_CUSTOM_PLAN_ACCESS',
-  CHANGE_BILLING_PERIOD = 'CHANGE_BILLING_PERIOD',
-  CHANGE_UNIT_QUANTITY = 'CHANGE_UNIT_QUANTITY',
-  UPGRADE_PLAN = 'UPGRADE_PLAN',
-  DOWNGRADE_PLAN = 'DOWNGRADE_PLAN',
-  CANCEL_SCHEDULED_UPDATES = 'CANCEL_SCHEDULED_UPDATES',
-}
-
-export type PaywallPlan = Plan & {
-  isLowerThanCurrentPlan?: boolean;
-  isTriable: boolean;
-  isCurrentCustomerPlan: boolean;
-  currentCustomerPlanBillingPeriod?: BillingPeriod;
-  trialDaysLeft?: number;
-  isNextPlan?: (billingPeriod: BillingPeriod) => boolean;
-  scheduledUpdate?: CustomerPortalSubscriptionScheduledUpdateDataFragment;
-  paywallCurrency?: PaywallCurrency;
-  paywallCalculatedPricePoints?: PaywallCalculatedPricePoint[];
-};
-
-export type OnPlanSelectedCallbackFn = ({
-  plan,
-  customer,
-  subscription,
-  intentionType,
-  selectedBillingPeriod,
-  billableFeatures,
-}: {
-  plan: Plan;
-  customer: Customer | null;
-  subscription: Subscription | null;
-  intentionType: SubscribeIntentionType;
-  selectedBillingPeriod: BillingPeriod;
-  billableFeatures?: BillableFeature[];
-}) => void | Promise<void>;
-
-export type ShouldHidePlanFn = ({ plan }: { plan: PaywallPlan }) => boolean | Promise<boolean>;
-
-export type CurrentSubscriptionOverrideFn = ({
-  currentSubscription,
-}: {
-  currentSubscription: Subscription | null;
-}) => CurrentSubscriptionOverride | null | undefined;
-
-export type SelectDefaultTierIndexFn = ({ plan }: { plan: PaywallPlan }) => number;

package/src/components/paywall/utils/calculateTrialDaysLeft.ts

@@ -1,5 +0,0 @@
-import moment from 'moment';
-
-export function calculateTrialDaysLeft(trialEndDate: Date) {
-  return moment.utc(trialEndDate).diff(moment.utc(), 'days', false) + 1;
-}

package/src/components/paywall/utils/calculateUnitQuantityText.ts

@@ -1,23 +0,0 @@
-export function calculateUnitQuantityText(
-  minUnitQuantity?: number | null,
-  maxUnitQuantity?: number | null,
-  unitsPlural?: string | null,
-) {
-  const unitsText = unitsPlural ? ` ${unitsPlural}` : '';
-
-  // copy for only maxunit
-  if ((!minUnitQuantity || minUnitQuantity === 1) && maxUnitQuantity) {
-    return `Up to ${maxUnitQuantity}${unitsText}`;
-  }
-
-  // both limits
-  if (minUnitQuantity && minUnitQuantity > 1 && maxUnitQuantity) {
-    return `${minUnitQuantity}-${maxUnitQuantity}${unitsText}`;
-  }
-
-  if (minUnitQuantity && minUnitQuantity > 1) {
-    return `Minimum ${minUnitQuantity}${unitsText}`;
-  }
-
-  return '';
-}

package/src/components/paywall/utils/computeDefaultBillingPeriod.ts

@@ -1,36 +0,0 @@
-import { BillingPeriod, Plan, Subscription, SubscriptionStatus } from '@stigg/js-client-sdk';
-import { countBy, uniq } from 'lodash';
-
-export function computeBillingPeriods(
-  plans: Plan[],
-  activeSubscriptions?: Subscription[] | null,
-  preferredBillingPeriod?: BillingPeriod,
-): { defaultBillingPeriod: BillingPeriod; availableBillingPeriods: BillingPeriod[] } {
-  const billingPeriods: BillingPeriod[] = plans
-    .flatMap((plan) => plan.pricePoints)
-    .map((pricePoint) => pricePoint.billingPeriod);
-
-  const counts = countBy(billingPeriods);
-
-  const availableBillingPeriods = uniq<BillingPeriod>(billingPeriods);
-  let defaultBillingPeriod: BillingPeriod | undefined;
-
-  if (preferredBillingPeriod && availableBillingPeriods.includes(preferredBillingPeriod)) {
-    defaultBillingPeriod = preferredBillingPeriod;
-  } else if (activeSubscriptions) {
-    const activeSubscription = activeSubscriptions.find((x) => x.status === SubscriptionStatus.Active);
-
-    if (activeSubscription && activeSubscription.prices.length > 0) {
-      defaultBillingPeriod = activeSubscription?.prices[0].billingPeriod;
-    }
-  }
-
-  if (!defaultBillingPeriod) {
-    defaultBillingPeriod =
-      (counts[BillingPeriod.Monthly] || 0) > (counts[BillingPeriod.Annually] || 0)
-        ? BillingPeriod.Monthly
-        : BillingPeriod.Annually;
-  }
-
-  return { defaultBillingPeriod, availableBillingPeriods };
-}