@stigg/react-sdk 4.2.2 → 4.3.0-beta.0

package/src/components/common/customIcons.ts

@@ -1,28 +1,17 @@
-import { ReactElement, SVGProps } from 'react';
-import RenewSubscription from '../../assets/subscription-renews-icon.svg';
-import BillingInfoCustomer from '../../assets/billing-info-customer.svg';
-import CreditCard from '../../assets/credit-card.svg';
-import ScheduleBox from '../../assets/schedule-box.svg';
-import ScheduleClock from '../../assets/schedule.svg';
-import Restore from '../../assets/restore.svg';
-import MiniSchedule from '../../assets/mini-schedule.svg';
-import DollarCoin from '../../assets/dollar-coin.svg';
-import Promotions from '../../assets/promotions.svg';
-import Addons from '../../assets/addons.svg';
-import ContactSupport from '../../assets/contact-support.svg';
-
-export const ICON_COMPONENTS: {[name: string]: ((props: SVGProps<SVGElement>) => ReactElement)} = {
-  RenewSubscription,
-  BillingInfoCustomer,
-  CreditCard,
-  ScheduleBox,
-  ScheduleClock,
-  Restore,
-  MiniSchedule,
-  DollarCoin,
-  Promotions,
-  Addons,
-  ContactSupport,
-};
-
-export type Icons = keyof typeof ICON_COMPONENTS;
+export { default as Addons } from '../../assets/addons.svg';
+export { default as BillingInfoCustomer } from '../../assets/billing-info-customer.svg';
+export { default as ContactSupport } from '../../assets/contact-support.svg';
+export { default as CreditCard } from '../../assets/credit-card.svg';
+export { default as DollarCoin } from '../../assets/dollar-coin.svg';
+export { default as MiniSchedule } from '../../assets/mini-schedule.svg';
+export { default as Promotions } from '../../assets/promotions.svg';
+export { default as Restore } from '../../assets/restore.svg';
+export { default as ScheduleBox } from '../../assets/schedule-box.svg';
+export { default as ScheduleClock } from '../../assets/schedule.svg';
+export { default as RenewSubscription } from '../../assets/subscription-renews-icon.svg';
+export { default as Trash } from '../../assets/trash.svg';
+export { default as PaymentMethod } from '../../assets/payment-method.svg';
+export { default as OutlinedCircle } from '../../assets/outlined-circle.svg';
+export { default as OutlinedCheckedCircle } from '../../assets/outlined-checked-circle.svg';
+export { default as ArrowForward } from '../../assets/arrow-forward.svg';
+export { default as Close } from '../../assets/close.svg';

package/src/components/common/mapExternalTheme.ts

@@ -6,6 +6,7 @@ import {
 } from '@stigg/js-client-sdk';
 import { CustomizedTheme } from '../../theme/Theme';
 import { HorizontalAlignment, FontWeight } from '../../theme/types';
+import { CheckoutConfiguration } from '../checkout/types';
 
 function addCssUnits(value?: number | null, unit: string = 'px') {
   if (!value) {
@@ -109,3 +110,8 @@ export function mapPaywallConfiguration(paywallConfiguration: PaywallConfigurati
     },
   };
 }
+
+export function mapCheckoutConfiguration(_configuration: CheckoutConfiguration): CustomizedTheme {
+  // TODO: configuration should be of type CustomerPortalConfiguration
+  return {};
+}

package/src/components/customerPortal/subscriptionOverview/tabs/SubscriptionTabs.tsx

@@ -10,8 +10,7 @@ import { CustomerPortalSection } from '../../CustomerPortal';
 import { CustomerPortalLocalization } from '../../customerPortalTextOverrides';
 import { StyledTabs, TabContent, TabsLayout } from './SubscriptionTabs.style';
 import { CustomerPortalTheme } from '../../customerPortalTheme';
-import { Icon } from '../../../common/Icon';
-import { Icons } from '../../../common/customIcons';
+import { Icon, Icons } from '../../../common/Icon';
 import { FontWeight } from 'styled-typography';
 
 type TabPanelProps = {
@@ -41,21 +40,16 @@ export type SubscriptionTabsProps = {
 function TabTitle({ isSelected, label, icon }: { isSelected: boolean; label: string; icon: Icons }) {
   const color = isSelected ? 'primary' : 'secondary';
   return (
-    <div style={{display: 'flex', gap: 8, alignItems: 'center' }}>
+    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
       <Icon icon={icon} svgStrokeColor={color} />
-      <Typography variant="h6" bold={isSelected} fontWeight={FontWeight.Medium}  color={color}>
+      <Typography variant="h6" bold={isSelected} fontWeight={FontWeight.Medium} color={color}>
         {label}
       </Typography>
     </div>
   );
 }
 
-export function SubscriptionTabs({
-  customerPortal,
-  hiddenSections,
-  textOverrides,
-  theme,
-}: SubscriptionTabsProps) {
+export function SubscriptionTabs({ customerPortal, hiddenSections, textOverrides, theme }: SubscriptionTabsProps) {
   const allAddons = flatMap(customerPortal.subscriptions, subscription => subscription.addons);
   const isSectionHidden = (sectionName: CustomerPortalSection) =>
     hiddenSections?.some(section => section === sectionName);
@@ -81,14 +75,14 @@ export function SubscriptionTabs({
             <Tab
               sx={{ textTransform: 'none' }}
               value={1}
-              label={<TabTitle isSelected={value === 1} label={textOverrides.addonsTabTitle} icon='Addons' />}
+              label={<TabTitle isSelected={value === 1} label={textOverrides.addonsTabTitle} icon="Addons" />}
             />
           ) : null}
           {showPromotions ? (
             <Tab
               sx={{ textTransform: 'none' }}
               value={2}
-              label={<TabTitle isSelected={value === 2} label={textOverrides.promotionsTabTitle} icon='Promotions' />}
+              label={<TabTitle isSelected={value === 2} label={textOverrides.promotionsTabTitle} icon="Promotions" />}
             />
           ) : null}
         </StyledTabs>

package/src/components/hooks/useChargeSort.ts

@@ -0,0 +1,17 @@
+import sortBy from 'lodash/sortBy';
+import { useMemo } from 'react';
+
+import { BillingModel, Price } from '@stigg/js-client-sdk';
+
+const CHARGES_BILLING_MODEL_ORDER = [BillingModel.FlatFee, BillingModel.PerUnit, BillingModel.UsageBased];
+
+export const sortCharges = (charges: Price[]) => {
+  return sortBy(charges, [
+    charge => CHARGES_BILLING_MODEL_ORDER.indexOf(charge.pricingModel),
+    charge => charge.feature?.displayName,
+  ]);
+};
+
+export const useChargesSort = (charges: Price[]) => {
+  return useMemo(() => sortCharges(charges), [charges]);
+};

package/src/components/paywall/BillingPeriodPicker.tsx

@@ -87,7 +87,7 @@ export function BillingPeriodPicker({
       >
         Annual
       </PeriodText>
-      <DiscountRate discount={discountRate} disabled={isMonthlyBillingPeriod} />
+      {discountRate !== 0 && <DiscountRate discount={discountRate} disabled={isMonthlyBillingPeriod} />}
     </PickerContainer>
   );
 }

package/src/components/paywall/Paywall.tsx

@@ -11,7 +11,7 @@ import { useStiggContext } from '../..';
 import { hasPricePointsForPlans } from './utils/hasPricePoints';
 import { getPlansToDisplay } from './utils/getPlansToDisplay';
 import { getPlanPrice } from '../utils/getPlanPrice';
-import { getSelectedTier } from './planPriceTier';
+import { getSelectedTier } from '../utils/priceTierUtils';
 
 const PaywallPlansContainer = styled.div`
   color: ${({ theme }) => theme.stigg.palette.text.primary};

package/src/components/paywall/PlanOffering.tsx

@@ -11,7 +11,7 @@ import classNames from 'classnames';
 import { Grid } from '@mui/material';
 import MiniSchedule from '../../assets/mini-schedule.svg';
 import { PlanPrice } from './PlanPrice';
-import { getSelectedTier } from './planPriceTier';
+import { getSelectedTier } from '../utils/priceTierUtils';
 
 const PlanOfferingContainer = styled.div<{ $isHighlighted: boolean; $isCurrentPlan: boolean }>`
   position: relative;

package/src/components/paywall/PlanOfferingButton.tsx

@@ -9,7 +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';
+import { compareSelectedTierToCurrentTier, PriceTierComparison } from '../utils/priceTierUtils';
 
 const LoadingIndicator = styled(ClipLoader)`
   margin-left: 10px;

package/src/components/paywall/PlanPrice.tsx

@@ -5,7 +5,7 @@ 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';
+import { TiersSelectContainer } from '../common/TiersSelectContainer';
 
 const EMPTY_CHAR = '‎';
 
@@ -138,8 +138,8 @@ export const PlanPrice = ({
         )}
 
         {withTiersRow && (
-          <TiersLayout
-            plan={plan}
+          <TiersSelectContainer
+            componentId={`${plan.id}_${featureId}_tier`}
             tiers={tiers}
             tierUnits={tierUnits}
             selectedTier={selectedTier}

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

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

package/src/components/utils/calculateDiscountRate.ts

@@ -1,8 +1,8 @@
-import { BillingPeriod } from '@stigg/js-client-sdk';
+import { BillingPeriod, PaywallCalculatedPricePoint, Price } from '@stigg/js-client-sdk';
 import isNil from 'lodash/isNil';
 import { PaywallPlan } from '../paywall';
 
-function calculateDiscountRate(monthlyPrice?: number | null, annuallyPrice?: number | null) {
+export function calculateDiscountRate(monthlyPrice?: number | null, annuallyPrice?: number | null) {
   if (!isNil(monthlyPrice) && !isNil(annuallyPrice)) {
     const annuallyPerMonthPrice = annuallyPrice / 12;
     return Math.round(((monthlyPrice - annuallyPerMonthPrice) / monthlyPrice) * 100);
@@ -11,20 +11,32 @@ function calculateDiscountRate(monthlyPrice?: number | null, annuallyPrice?: num
   return null;
 }
 
+function getPlanBillingPeriodAmount(plan: PaywallPlan, billingPeriod: BillingPeriod) {
+  let pricePoint: PaywallCalculatedPricePoint | Price | undefined;
+
+  pricePoint = plan.paywallCalculatedPricePoints?.find(price => price.billingPeriod === billingPeriod);
+
+  if (!pricePoint) {
+    pricePoint = plan.pricePoints.find(price => price.billingPeriod === billingPeriod);
+  }
+
+  if (!pricePoint?.amount) {
+    const tieredPrice = plan.pricePoints.find(price => {
+      return price.isTieredPrice && price.billingPeriod === billingPeriod;
+    });
+
+    if (tieredPrice) {
+      return tieredPrice.tiers![0].unitPrice.amount;
+    }
+  }
+
+  return pricePoint?.amount;
+}
+
 export function calculatePaywallDiscountRate(plans: PaywallPlan[]) {
   return plans.reduce((maxDiscount, plan) => {
-    let monthlyAmount;
-    let annuallyAmount;
-
-    if (plan.paywallCalculatedPricePoints?.length) {
-      monthlyAmount = plan.paywallCalculatedPricePoints?.find(price => price.billingPeriod === BillingPeriod.Monthly)
-        ?.amount;
-      annuallyAmount = plan.paywallCalculatedPricePoints?.find(price => price.billingPeriod === BillingPeriod.Annually)
-        ?.amount;
-    } else {
-      monthlyAmount = plan.pricePoints.find(price => price.billingPeriod === BillingPeriod.Monthly)?.amount;
-      annuallyAmount = plan.pricePoints.find(price => price.billingPeriod === BillingPeriod.Annually)?.amount;
-    }
+    const monthlyAmount = getPlanBillingPeriodAmount(plan, BillingPeriod.Monthly);
+    const annuallyAmount = getPlanBillingPeriodAmount(plan, BillingPeriod.Annually);
 
     const discountRate = calculateDiscountRate(monthlyAmount, annuallyAmount);
     if (discountRate) {

package/src/components/utils/currencyUtils.ts

@@ -8,7 +8,7 @@ export const currencyPriceFormatter = ({
   maximumFractionDigits = 5,
 }: {
   amount: number;
-  currency?: Currency;
+  currency?: Currency | string;
   locale?: string;
   maximumFractionDigits?: number;
 }) => {

package/src/components/utils/getPaidPriceText.ts

@@ -7,7 +7,7 @@ import {
 } from '@stigg/js-client-sdk';
 import { currencyPriceFormatter } from './currencyUtils';
 import { PlanPriceText } from './getPlanPrice';
-import { calculateTierPrice } from '../paywall/planPriceTier';
+import { calculateTierPrice, getPriceFeatureUnit } from './priceTierUtils';
 
 type GetPaidPriceTextParams = {
   planPrices: Price[];
@@ -44,7 +44,7 @@ export function getPaidPriceText({
         currentTier = selectedTierByFeature[price.feature!.featureId] || currentTier;
 
         tiers = price.tiers;
-        tierUnits = price.feature!.unitsPlural || '';
+        tierUnits = getPriceFeatureUnit(price);
       }
 
       priceNumber += calculateTierPrice(price, currentTier, selectedBillingPeriod, shouldShowMonthlyPriceAmount);

package/src/components/{paywall/planPriceTier.ts → utils/priceTierUtils.ts}

@@ -1,7 +1,30 @@
-import { PaywallPlan } from './types';
+import { PaywallPlan } from '../paywall/types';
 
 import { BillingModel, TiersMode, BillingPeriod, Price, PriceTierFragment, Subscription } from '@stigg/js-client-sdk';
 
+export function getPriceFeatureUnit(price: Price) {
+  if (!price.feature) {
+    return '';
+  }
+
+  return (price.feature!.unitQuantity != 1 ? price.feature!.unitsPlural : price.feature!.units) || '';
+}
+
+export function getTierByQuantity(tiers: PriceTierFragment[], quantity: number) {
+  if (!tiers) return;
+
+  const ascendingTiers = [...tiers];
+  ascendingTiers.sort((a, b) => a.upTo - b.upTo);
+
+  for (const tier of ascendingTiers) {
+    if (quantity <= tier.upTo) {
+      return tier;
+    }
+  }
+
+  return ascendingTiers[ascendingTiers.length - 1];
+}
+
 export function calculateTierPrice(
   price: Price,
   currentTier: PriceTierFragment,
@@ -46,8 +69,7 @@ export function getSelectedTier(
       );
 
       if (tieredPrice) {
-        const customerTier = price.tiers!.find(tier => tier.upTo === tieredPrice.feature!.unitQuantity);
-        currentTier = customerTier || price.tiers![0];
+        currentTier = getTierByQuantity(price.tiers!, tieredPrice.feature!.unitQuantity || 1)!;
       }
     }
 

package/src/components/utils/priceUtils.ts

@@ -0,0 +1,10 @@
+import { Price } from '@stigg/js-client-sdk';
+
+export const getValidPriceQuantity = (price: Price, quantity: number) => {
+  if (price.minUnitQuantity && quantity < price.minUnitQuantity) {
+    return price.minUnitQuantity;
+  } else if (price.maxUnitQuantity && quantity > price.maxUnitQuantity) {
+    return price.maxUnitQuantity;
+  }
+  return quantity;
+};

package/src/index.ts

@@ -29,6 +29,7 @@ export {
   StiggContextValue,
   StiggContext,
 } from './components/StiggProvider';
+export { Checkout, CheckoutProps, CheckoutConfiguration } from './components/checkout';
 export { useWaitForCheckoutCompleted, ProvisionStatus } from './components/hooks';
 export { HorizontalAlignment, TextAlignment } from './theme/types';
 export { CustomizedTheme as Theme } from './theme/Theme';

package/src/stories/Checkout.stories.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from '@emotion/styled/macro';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Checkout } from '../components/checkout';
+import { StiggProvider } from '../components/StiggProvider';
+import { defaultArgsWithCustomer } from './baseArgs';
+
+export default {
+  title: 'Stigg React SDK/Checkout',
+  component: Checkout,
+  decorators: [
+    (Story, { args }) => (
+      <StiggProvider
+        apiKey={args.apiKey}
+        customerId={args.customerId}
+        theme={args.theme}
+        locale={args.locale}
+        baseUri={args.baseUri}
+        enableEdge={args.disableEdge}
+      >
+        <Story />
+      </StiggProvider>
+    ),
+  ],
+} as ComponentMeta<typeof Checkout>;
+
+const Wrapper = styled.div`
+  width: 1000px;
+`;
+
+const Template: ComponentStory<any> = args => (
+  <Wrapper>
+    <Checkout
+      planId={args.planId}
+      preferredBillingPeriod={args.preferredBillingPeriod}
+      billingCountryCode={args.billingCountryCode}
+      resourceId={args.resourceId}
+      onCheckoutCompleted={results => {
+        console.log('checkout finished!', results);
+        return Promise.resolve();
+      }}
+      onCheckout={async ({ checkoutParams, checkoutAction }) => {
+        console.log('checkout started!', checkoutParams);
+        const { success, errorMessage } = await checkoutAction();
+        return { success, errorMessage };
+      }}
+      billableFeatures={[{ featureId: 'feature-seat', quantity: 30 }]}
+      onChangePlan={({ currentPlan }) => {
+        console.log('plan changed clicked!', { currentPlan });
+      }}
+    />
+  </Wrapper>
+);
+
+export const DefaultCheckout = Template.bind({});
+DefaultCheckout.args = {
+  ...defaultArgsWithCustomer,
+  planId: 'plan-revvenu-essentials',
+};

package/src/theme/Theme.tsx

@@ -1,16 +1,17 @@
+import { merge } from 'lodash';
 import React, { PropsWithChildren } from 'react';
+import { ThemeProvider as StyledThemeProvider } from 'styled-components';
 import { TypographyProps } from 'styled-typography';
-import { css } from '@emotion/react';
+
+import { css, ThemeProvider } from '@emotion/react';
 import styled from '@emotion/styled/macro';
-import { ThemeProvider } from '@emotion/react';
-import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles';
-import { ThemeProvider as StyledThemeProvider } from 'styled-components';
-import { Fonts } from './Fonts';
-import { DeepPartial } from '../types';
-import { StiggTheme } from './types';
+import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+
 import { useStiggContext } from '../components/StiggProvider';
-import { merge } from 'lodash';
+import { DeepPartial } from '../types';
+import { Fonts } from './Fonts';
 import { getResolvedTheme } from './getResolvedTheme';
+import { StiggTheme } from './types';
 
 export type CustomizedTheme = DeepPartial<StiggTheme>;
 

package/src/theme/getResolvedTheme.ts

@@ -18,6 +18,7 @@ export const getResolvedTheme = (customizedTheme?: CustomizedTheme): StiggTheme
   const baseTheme: StiggTheme = {
     palette: {
       primary: primaryColor.hex(),
+      primaryDark: primaryColor.darken(0.3).hex(),
       backgroundPaper: '#FFFFFF',
       backgroundHighlight: '#F5F6F9',
       backgroundSection: primaryColor.alpha(0.1).toString(),

package/src/theme/types.ts

@@ -8,6 +8,7 @@ export type FontVariant = {
 export type StiggTheme = {
   palette: {
     primary: string;
+    primaryDark: string;
     backgroundPaper: string;
     backgroundHighlight: string;
     backgroundSection: string;