@stigg/react-sdk 4.1.2 → 4.2.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.1.2",
+  "version": "4.2.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -85,7 +85,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.10.13",
-    "@stigg/js-client-sdk": "2.15.0",
+    "@stigg/js-client-sdk": "2.18.1",
     "@types/styled-components": "^5.1.26",
     "classnames": "^2.3.2",
     "color": "^4.2.3",

package/src/components/paywall/Paywall.tsx

@@ -1,4 +1,4 @@
-import { BillingPeriod, Customer, Plan, Subscription } from '@stigg/js-client-sdk';
+import { BillableFeature, BillingPeriod, Customer, Plan, Subscription } from '@stigg/js-client-sdk';
 import React, { useCallback } from 'react';
 import styled from '@emotion/styled/macro';
 import { PlanOffering } from './PlanOffering';
@@ -11,6 +11,7 @@ import { useStiggContext } from '../..';
 import { hasPricePointsForPlans } from './utils/hasPricePoints';
 import { getPlansToDisplay } from './utils/getPlansToDisplay';
 import { getPlanPrice } from '../utils/getPlanPrice';
+import { getSelectedTier } from './planPriceTier';
 
 const PaywallPlansContainer = styled.div`
   color: ${({ theme }) => theme.stigg.palette.text.primary};
@@ -74,13 +75,14 @@ export const Paywall = ({
   const plansToShow = getPlansToDisplay(plans, selectedBillingPeriod);
 
   const handleOnSubscribe = useCallback(
-    (plan: Plan, intentionType: SubscribeIntentionType) => {
+    (plan: Plan, intentionType: SubscribeIntentionType, billableFeatures: BillableFeature[]) => {
       return onPlanSelected({
         plan,
         customer,
         subscription: currentSubscription,
         intentionType,
         selectedBillingPeriod,
+        billableFeatures,
       });
     },
     [customer, selectedBillingPeriod],
@@ -98,6 +100,14 @@ export const Paywall = ({
     return !!getPlanPrice(plan, selectedBillingPeriod, paywallLocale, locale, hasMonthlyPrice).unit;
   });
 
+  const withTiersRow = plansToShow.some(plan => {
+    return !!getSelectedTier(plan, selectedBillingPeriod, currentSubscription, {});
+  });
+
+  const withTrialLeftRow = plansToShow.some(plan => {
+    return plan.isCurrentCustomerPlan && plan.trialDaysLeft;
+  });
+
   return (
     <PaywallContainer className="stigg-paywall-container">
       <PaywallLayout className="stigg-paywall-layout">
@@ -112,6 +122,8 @@ export const Paywall = ({
           {plansToShow.map(plan => (
             <PlanOffering
               withUnitPriceRow={withUnitPriceRow}
+              withTiersRow={withTiersRow}
+              withTrialLeftRow={withTrialLeftRow}
               key={plan.id}
               shouldShowDescriptionSection={shouldShowDescriptionSection}
               hasMonthlyPrice={hasMonthlyPrice}
@@ -122,7 +134,9 @@ export const Paywall = ({
               billingPeriod={selectedBillingPeriod}
               isHighlighted={plan.id === highlightedPlanId}
               isCustomerOnTrial={isCustomerOnTrial}
-              onPlanSelected={(intentionType: SubscribeIntentionType) => handleOnSubscribe(plan, intentionType)}
+              onPlanSelected={(intentionType: SubscribeIntentionType, billableFeatures: BillableFeature[]) =>
+                handleOnSubscribe(plan, intentionType, billableFeatures)
+              }
               paywallLocale={paywallLocale}
               locale={locale}
               customer={customer}

package/src/components/paywall/PlanOffering.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import { BillingPeriod, Customer, Subscription } from '@stigg/js-client-sdk';
+import React, { useEffect } from 'react';
+import { BillableFeature, BillingPeriod, Customer, PriceTierFragment, Subscription } from '@stigg/js-client-sdk';
 import styled from '@emotion/styled/macro';
-import { getPlanPrice } from '../utils/getPlanPrice';
 import { PlanEntitlements } from './PlanEntitlements';
 import { PlanOfferingButton } from './PlanOfferingButton';
 import { PaywallPlan, SubscribeIntentionType } from './types';
@@ -11,8 +10,8 @@ import { Typography } from '../common/Typography';
 import classNames from 'classnames';
 import { Grid } from '@mui/material';
 import MiniSchedule from '../../assets/mini-schedule.svg';
-
-const EMPTY_CHAR = '‎';
+import { PlanPrice } from './PlanPrice';
+import { getSelectedTier } from './planPriceTier';
 
 const PlanOfferingContainer = styled.div<{ $isHighlighted: boolean; $isCurrentPlan: boolean }>`
   position: relative;
@@ -35,99 +34,6 @@ const PlanHeader = styled(Typography)`
   padding-bottom: 8px;
 `;
 
-const PlanPriceContainer = styled(Typography)`
-  word-break: break-word;
-`;
-
-const UnitSpan = styled(Typography)`
-  white-space: nowrap;
-`;
-
-const PriceSpan = styled(Typography)`
-  white-space: normal;
-  min-height: 39px;
-`;
-
-function PlanPrice({
-  showStartingAt,
-  withUnitPriceRow,
-  withStartingAtRow,
-  plan,
-  billingPeriod,
-  paywallLocale,
-  locale,
-  hasMonthlyPrice,
-  hasAnnuallyPrice,
-}: {
-  showStartingAt: boolean;
-  withUnitPriceRow: boolean;
-  withStartingAtRow: boolean;
-  plan: PaywallPlan;
-  billingPeriod: BillingPeriod;
-  paywallLocale: PaywallLocalization;
-  hasMonthlyPrice: boolean;
-  hasAnnuallyPrice: boolean;
-  locale: string;
-}) {
-  const { price, unit } = getPlanPrice(plan, billingPeriod, paywallLocale, locale, hasMonthlyPrice);
-
-  return (
-    <PlanPriceContainer 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 variant="h1">{price}</PriceSpan>
-
-        {withUnitPriceRow && (
-          <Typography className="stigg-price-unit-and-billing-period-text" style={{ minHeight: '48px' }}>
-            <UnitSpan span variant="h6" color="secondary">
-              {unit}
-            </UnitSpan>
-
-            <PriceBillingPeriod
-              plan={plan}
-              billingPeriod={billingPeriod}
-              hasAnnuallyPrice={hasAnnuallyPrice}
-              hasMonthlyPrice={hasMonthlyPrice}
-            />
-          </Typography>
-        )}
-      </>
-    </PlanPriceContainer>
-  );
-}
-
-type PriceBillingPeriodProps = {
-  plan: PaywallPlan;
-  billingPeriod: BillingPeriod;
-  hasMonthlyPrice: boolean;
-  hasAnnuallyPrice: boolean;
-};
-
-function PriceBillingPeriod({ plan, billingPeriod, hasMonthlyPrice, hasAnnuallyPrice }: PriceBillingPeriodProps) {
-  const hasPrice = plan.pricePoints.find(pricePoint => pricePoint.billingPeriod === billingPeriod);
-
-  let content = EMPTY_CHAR;
-  if (hasPrice && hasMonthlyPrice && hasAnnuallyPrice) {
-    content = `, billed ${billingPeriod.toLowerCase()}`;
-  }
-
-  return (
-    <Typography span className="stigg-price-billing-period-text" variant="h6" color="secondary">
-      {content}
-    </Typography>
-  );
-}
-
 const Divider = styled.div`
   height: 2px;
   width: 100%;
@@ -161,6 +67,8 @@ const HeaderWrapper = styled.div`
 
 type PlanOfferingProps = {
   withUnitPriceRow: boolean;
+  withTiersRow: boolean;
+  withTrialLeftRow: boolean;
   customer: Customer | null;
   plan: PaywallPlan;
   billingPeriod: BillingPeriod;
@@ -170,10 +78,10 @@ type PlanOfferingProps = {
   hasAnnuallyPrice: boolean;
   hasMonthlyPrice: boolean;
   isCustomerOnTrial: boolean;
-  onPlanSelected: (intentionType: SubscribeIntentionType) => void | Promise<void>;
+  onPlanSelected: (intentionType: SubscribeIntentionType, billableFeatures: BillableFeature[]) => void | Promise<void>;
   paywallLocale: PaywallLocalization;
   locale: string;
-  withStartingAtRow?: boolean;
+  withStartingAtRow: boolean;
 };
 
 const NextPlanTagContainer = styled.div`
@@ -187,7 +95,7 @@ const NextPlanTagContainer = styled.div`
 const StyledMiniSchedule = styled(MiniSchedule)<{ $iconsColor?: string }>`
   display: flex;
   height: 100%;
-  margin-right: 4;
+  margin-right: 4px;
 
   path {
     fill: ${({ theme }) => theme.stigg.palette.text.primary};
@@ -209,6 +117,8 @@ function UpcomingChangeTag({ text = 'Next', iconsColor }: { text?: string; icons
 
 export function PlanOffering({
   withUnitPriceRow,
+  withTiersRow,
+  withTrialLeftRow,
   customer,
   plan,
   billingPeriod,
@@ -243,6 +153,23 @@ export function PlanOffering({
     );
   }
 
+  const [selectedTierByFeature, setSelectedTierByFeature] = React.useState<Record<string, PriceTierFragment>>(
+    getSelectedTier(plan, billingPeriod, currentSubscription, {}),
+  );
+
+  useEffect(() => {
+    setSelectedTierByFeature(getSelectedTier(plan, billingPeriod, currentSubscription, selectedTierByFeature));
+  }, [billingPeriod]);
+
+  const onPlanButtonClick = (intentionType: SubscribeIntentionType) => {
+    const billableFeatures: BillableFeature[] = Object.keys(selectedTierByFeature).map(featureId => ({
+      featureId,
+      quantity: selectedTierByFeature[featureId].upTo,
+    }));
+
+    return onPlanSelected(intentionType, billableFeatures);
+  };
+
   return (
     <PlanOfferingContainer
       className={classNames('stigg-plan-offering-container', {
@@ -266,8 +193,11 @@ export function PlanOffering({
 
         <PlanPrice
           showStartingAt={showStartingAt}
-          withUnitPriceRow={!!withUnitPriceRow}
-          withStartingAtRow={!!withStartingAtRow}
+          withUnitPriceRow={withUnitPriceRow}
+          withStartingAtRow={withStartingAtRow}
+          withTiersRow={withTiersRow}
+          selectedTierByFeature={selectedTierByFeature}
+          setSelectedTierByFeature={setSelectedTierByFeature}
           plan={plan}
           billingPeriod={billingPeriod}
           paywallLocale={paywallLocale}
@@ -283,8 +213,11 @@ export function PlanOffering({
           currentSubscription={currentSubscription}
           billingPeriod={billingPeriod}
           isCustomerOnTrial={isCustomerOnTrial}
-          onPlanSelected={onPlanSelected}
+          onPlanSelected={onPlanButtonClick}
           paywallLocale={paywallLocale}
+          hasTiersRow={withTiersRow}
+          withTrialLeftRow={withTrialLeftRow}
+          selectedTierByFeature={selectedTierByFeature}
         />
 
         <Divider className="stigg-plan-header-divider" />

package/src/components/paywall/PlanOfferingButton.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { BillingPeriod, Customer, PricingType, Subscription } from '@stigg/js-client-sdk';
+import { BillingPeriod, Customer, PriceTierFragment, PricingType, Subscription } from '@stigg/js-client-sdk';
 import styled from '@emotion/styled/macro';
 import { css, Theme, useTheme } from '@emotion/react';
 import { PaywallPlan, SubscribeIntentionType } from './types';
@@ -9,6 +9,7 @@ import ClipLoader from 'react-spinners/ClipLoader';
 import { Typography } from '../common/Typography';
 import { getSubscriptionScheduleUpdateTexts } from '../utils/getSubscriptionScheduleUpdateTexts';
 import { isFunction } from 'lodash';
+import { compareSelectedTierToCurrentTier, PriceTierComparison } from './planPriceTier';
 
 const LoadingIndicator = styled(ClipLoader)`
   margin-left: 10px;
@@ -66,7 +67,7 @@ const TrialDaysLeft = styled(Typography)`
 const ButtonLayout = styled.div`
   display: flex;
   flex-direction: column;
-  margin-top: 40px;
+  margin-top: 4px;
   align-self: ${({ theme }) => flexLayoutMapper(theme.stigg.layout.ctaAlignment)};
   width: 100%;
 `;
@@ -80,6 +81,9 @@ type PlanOfferingButtonProps = {
   isCustomerOnTrial: boolean;
   paywallLocale: PaywallLocalization;
   onPlanSelected: (intentionType: SubscribeIntentionType) => void | Promise<void>;
+  hasTiersRow: boolean;
+  withTrialLeftRow: boolean;
+  selectedTierByFeature: Record<string, PriceTierFragment>;
 };
 
 export function PlanOfferingButton({
@@ -90,6 +94,10 @@ export function PlanOfferingButton({
   isCustomerOnTrial,
   onPlanSelected,
   paywallLocale,
+  hasTiersRow,
+  withTrialLeftRow,
+  currentSubscription,
+  selectedTierByFeature,
 }: PlanOfferingButtonProps) {
   const theme = useTheme() as Theme;
   const [isLoading, setIsLoading] = useState(false);
@@ -136,8 +144,22 @@ export function PlanOfferingButton({
       isSameBillingPeriod ||
       (plan.pricingType && [PricingType.Free, PricingType.Custom].includes(plan.pricingType))
     ) {
-      buttonProps.title = currentPlan;
-      buttonProps.disabled = true;
+      const planComparison = compareSelectedTierToCurrentTier(selectedTierByFeature, currentSubscription);
+      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;
@@ -188,13 +210,17 @@ export function PlanOfferingButton({
               {isLoading && <LoadingIndicator color={theme.stigg.palette.text.disabled} loading size={16} />}
             </OfferingButton>
 
-            <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>
+            {hasTiersRow && !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

@@ -0,0 +1,152 @@
+import { PaywallPlan } from './types';
+import { PaywallLocalization } from './paywallTextOverrides';
+import { getPlanPrice } from '../utils/getPlanPrice';
+import { Typography } from '../common/Typography';
+import React, { useEffect, useState } from 'react';
+import styled from '@emotion/styled/macro';
+import { BillingPeriod, PriceTierFragment } from '@stigg/js-client-sdk';
+import { TiersLayout } from './TiersLayout';
+
+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;
+};
+
+function PriceBillingPeriod({ plan, billingPeriod, hasMonthlyPrice, hasAnnuallyPrice }: PriceBillingPeriodProps) {
+  const hasPrice = plan.pricePoints.find(pricePoint => pricePoint.billingPeriod === billingPeriod);
+
+  let content = EMPTY_CHAR;
+  if (hasPrice && hasMonthlyPrice && hasAnnuallyPrice) {
+    content = `, billed ${billingPeriod.toLowerCase()}`;
+  }
+
+  return (
+    <Typography span className="stigg-price-billing-period-text" variant="h6" color="secondary">
+      {content}
+    </Typography>
+  );
+}
+
+export const PlanPrice = ({
+  showStartingAt,
+  withUnitPriceRow,
+  withStartingAtRow,
+  withTiersRow,
+  selectedTierByFeature,
+  setSelectedTierByFeature,
+  plan,
+  billingPeriod,
+  paywallLocale,
+  locale,
+  hasMonthlyPrice,
+  hasAnnuallyPrice,
+}: {
+  showStartingAt: boolean;
+  withUnitPriceRow: boolean;
+  withStartingAtRow: boolean;
+  withTiersRow: boolean;
+  selectedTierByFeature: Record<string, PriceTierFragment>;
+  setSelectedTierByFeature: (selectedTierByFeature: Record<string, PriceTierFragment>) => void;
+  plan: PaywallPlan;
+  billingPeriod: BillingPeriod;
+  paywallLocale: PaywallLocalization;
+  hasMonthlyPrice: boolean;
+  hasAnnuallyPrice: boolean;
+  locale: string;
+}) => {
+  const { price, unit, tiers, tierUnits } = getPlanPrice(
+    plan,
+    billingPeriod,
+    paywallLocale,
+    locale,
+    hasMonthlyPrice,
+    selectedTierByFeature,
+  );
+
+  const [selectedTier, setSelectedTier] = useState<PriceTierFragment>();
+
+  useEffect(() => {
+    setSelectedTier(selectedTierByFeature[featureId!]);
+  }, [selectedTierByFeature]);
+
+  // 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 handleTierChange = (tier: PriceTierFragment) => {
+    const updatedTierByFeature: Record<string, PriceTierFragment> = {};
+    updatedTierByFeature[featureId!] = tier;
+
+    setSelectedTierByFeature(updatedTierByFeature);
+  };
+
+  useEffect(() => {
+    if (tiers) {
+      handleTierChange(selectedTierByFeature[featureId!]);
+    }
+  }, []);
+
+  return (
+    <PlanPriceContainer 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 variant="h1">{price}</PriceSpan>
+
+        {withUnitPriceRow && (
+          <Typography className="stigg-price-unit-and-billing-period-text" style={{ minHeight: '48px' }}>
+            <UnitSpan span variant="h6" color="secondary">
+              {unit}
+            </UnitSpan>
+
+            <PriceBillingPeriod
+              plan={plan}
+              billingPeriod={billingPeriod}
+              hasAnnuallyPrice={hasAnnuallyPrice}
+              hasMonthlyPrice={hasMonthlyPrice}
+            />
+          </Typography>
+        )}
+
+        {withTiersRow && (
+          <TiersLayout
+            plan={plan}
+            tiers={tiers}
+            tierUnits={tierUnits}
+            selectedTier={selectedTier}
+            handleTierChange={handleTierChange}
+          />
+        )}
+      </>
+    </PlanPriceContainer>
+  );
+};

package/src/components/paywall/TiersLayout.tsx

@@ -0,0 +1,74 @@
+import { PaywallPlan } from './types';
+import { PriceTierFragment } from '@stigg/js-client-sdk';
+import { MenuItem, OutlinedInput, Select, SelectChangeEvent } from '@mui/material';
+import { Typography } from '../common/Typography';
+import { map } from 'lodash';
+import React, { ReactNode } from 'react';
+import styled from '@emotion/styled/macro';
+
+const TierSelect = styled(Select)`
+  border-radius: 10px;
+
+  &:hover .MuiOutlinedInput-notchedOutline {
+    border-color: ${({ theme }) => theme.stigg.palette.outlinedBorder};
+  }
+`;
+
+const TierInput = styled(OutlinedInput)`
+  & .MuiInputBase-input {
+    padding: 7px 12px;
+  }
+
+  &.Mui-focused .MuiOutlinedInput-notchedOutline {
+    border-color: ${({ theme }) => theme.stigg.palette.primary} !important;
+  }
+`;
+
+export function TiersLayout({
+  plan,
+  tiers,
+  tierUnits,
+  selectedTier,
+  handleTierChange,
+}: {
+  plan: PaywallPlan;
+  tiers?: PriceTierFragment[] | null;
+  tierUnits?: string;
+  selectedTier?: PriceTierFragment;
+  handleTierChange: (tier: PriceTierFragment) => void;
+}) {
+  const handleChange = (event: SelectChangeEvent<unknown>, _: ReactNode) => {
+    handleTierChange(tiers!.find(tier => tier.upTo.toString() === event.target.value)!);
+  };
+
+  return (
+    <Typography className="stigg-price-tier-select" style={{ minHeight: '46px' }}>
+      {tiers ? (
+        <TierSelect
+          labelId="demo-simple-select-label"
+          id={`select_${plan.id}`}
+          value={selectedTier ? selectedTier.upTo.toString() : tiers[0].upTo.toString()}
+          fullWidth
+          onChange={handleChange}
+          input={<TierInput />}
+          MenuProps={{
+            MenuListProps: { disablePadding: true },
+            PaperProps: {
+              sx: { marginTop: '4px', borderRadius: '10px' },
+            },
+          }}
+        >
+          {map(tiers, (tier: PriceTierFragment) => (
+            <MenuItem className="stigg-price-tier-menu-item-text" key={tier.upTo} value={tier.upTo.toString()}>
+              <Typography variant="body1" color="primary">
+                {tier.upTo} {tierUnits}
+              </Typography>
+            </MenuItem>
+          ))}
+        </TierSelect>
+      ) : (
+        <div />
+      )}
+    </Typography>
+  );
+}

package/src/components/paywall/paywallTextOverrides.ts

@@ -1,4 +1,11 @@
-import { BillingPeriod, PaywallCalculatedPricePoint, PaywallCurrency, Plan, Price } from '@stigg/js-client-sdk';
+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';
@@ -27,6 +34,7 @@ export type PaywallLocalization = {
       paywallCalculatedPrice?: PaywallCalculatedPricePoint;
       plan: Plan;
       selectedBillingPeriod: BillingPeriod;
+      selectedTier?: PriceTierFragment;
     }) => PlanPriceText;
   };
 };