@stigg/react-sdk 4.2.3 → 4.3.0-beta.1

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

@@ -1,8 +1,10 @@
 import {
   Alignment,
+  CheckoutConfiguration,
   CustomerPortalConfiguration,
   FontWeight as JSFontWeight,
   PaywallConfiguration,
+  TypographyConfiguration,
 } from '@stigg/js-client-sdk';
 import { CustomizedTheme } from '../../theme/Theme';
 import { HorizontalAlignment, FontWeight } from '../../theme/types';
@@ -29,10 +31,7 @@ function mapFontWeight(defaultValue: FontWeight, fontWeight?: JSFontWeight | nul
   }
 }
 
-function mapTypography(
-  configuration: CustomerPortalConfiguration | PaywallConfiguration,
-): CustomizedTheme['typography'] {
-  const { typography } = configuration;
+function mapTypography(typography?: TypographyConfiguration | null): CustomizedTheme['typography'] {
   return {
     fontFamilyUrl: typography?.fontFamily || undefined,
     h1: {
@@ -69,7 +68,7 @@ function mapAlignment(alignment?: Alignment | null): HorizontalAlignment | undef
 }
 
 export function mapCustomerPortalConfiguration(configuration: CustomerPortalConfiguration): CustomizedTheme {
-  const { palette } = configuration;
+  const { palette, typography } = configuration;
   return {
     palette: {
       primary: palette?.primary || undefined,
@@ -80,12 +79,12 @@ export function mapCustomerPortalConfiguration(configuration: CustomerPortalConf
         primary: palette?.textColor || undefined,
       },
     },
-    typography: mapTypography(configuration),
+    typography: mapTypography(typography),
   };
 }
 
 export function mapPaywallConfiguration(paywallConfiguration: PaywallConfiguration): CustomizedTheme {
-  const { palette, layout, customCss } = paywallConfiguration;
+  const { palette, layout, customCss, typography } = paywallConfiguration;
   return {
     customCss: customCss || undefined,
     palette: {
@@ -97,7 +96,7 @@ export function mapPaywallConfiguration(paywallConfiguration: PaywallConfigurati
         primary: palette?.textColor || undefined,
       },
     },
-    typography: mapTypography(paywallConfiguration),
+    typography: mapTypography(typography),
     layout: {
       ctaAlignment: mapAlignment(layout?.alignment),
       headerAlignment: mapAlignment(layout?.alignment),
@@ -109,3 +108,20 @@ export function mapPaywallConfiguration(paywallConfiguration: PaywallConfigurati
     },
   };
 }
+
+export function mapCheckoutConfiguration(configuration: CheckoutConfiguration): CustomizedTheme {
+  const { palette, typography } = configuration;
+  return {
+    palette: {
+      primary: palette?.primary || undefined,
+      backgroundPaper: palette?.backgroundColor || undefined,
+      outlinedBorder: palette?.borderColor || undefined,
+      text: {
+        primary: palette?.textColor || undefined,
+      },
+      backgroundHighlight: palette?.selectionColor || undefined,
+      backgroundSection: palette?.summaryBackgroundColor || undefined,
+    },
+    typography: mapTypography(typography),
+  };
+}

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/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

@@ -2,7 +2,7 @@ import { BillingPeriod, PaywallCalculatedPricePoint, Price } from '@stigg/js-cli
 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);

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, CheckoutTheme } 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,62 @@
+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 };
+      }}
+      onChangePlan={({ currentPlan }) => {
+        console.log('plan changed clicked!', { currentPlan });
+      }}
+    />
+  </Wrapper>
+);
+
+export const DefaultCheckout = Template.bind({});
+DefaultCheckout.args = {
+  ...defaultArgsWithCustomer,
+  planId: 'plan-revvenu-essentials',
+  baseUri: 'http://localhost:4000',
+  apiKey: 'client-72b058a6-0f22-4c86-adce-bf266d12e12e:9f356ceb-c94c-42a4-9572-10b12824da81',
+  // baseUri: 'https://api-staging.stigg.io',
+  // apiKey: 'client-79584f52-7ef9-4c58-b9ac-5080acf492e4:71f2274c-100a-4fa4-8a43-48fa3b16c627',
+};

package/src/stories/CustomerPortal.stories.tsx

@@ -39,7 +39,7 @@ export default {
       </StiggProvider>
     ),
   ],
-} as ComponentMeta<typeof Paywall>;
+} as ComponentMeta<typeof CustomerPortal>;
 
 const Wrapper = styled.div`
   width: 1000px;

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;