@stigg/react-sdk 4.3.1 → 4.4.0-beta.1

package/src/components/utils/getPaidPriceText.ts

@@ -7,8 +7,7 @@ import {
 } from '@stigg/js-client-sdk';
 import { currencyPriceFormatter } from './currencyUtils';
 import { PlanPriceText } from './getPlanPrice';
-import { calculateTierPrice } from '../paywall/planPriceTier';
-import { PaywallLocalization } from '../paywall';
+import { calculateTierPrice, getPriceFeatureUnit } from './priceTierUtils';
 
 type GetPaidPriceTextParams = {
   planPrices: Price[];
@@ -17,7 +16,6 @@ type GetPaidPriceTextParams = {
   locale: string;
   shouldShowMonthlyPriceAmount: boolean;
   selectedTierByFeature: Record<string, PriceTierFragment>;
-  paywallLocale: PaywallLocalization;
 };
 
 export function getPaidPriceText({
@@ -27,7 +25,6 @@ export function getPaidPriceText({
   locale,
   shouldShowMonthlyPriceAmount,
   selectedTierByFeature,
-  paywallLocale,
 }: GetPaidPriceTextParams): PlanPriceText {
   const { amount, currency } = paywallCalculatedPrice || planPrices[0];
   const priceAmount = amount || 0;
@@ -38,10 +35,7 @@ export function getPaidPriceText({
 
   let tiers;
   let tierUnits;
-  const pricePeriod = paywallLocale.price.pricePeriod(
-    shouldShowMonthlyPriceAmount ? BillingPeriod.Monthly : BillingPeriod.Annually,
-  );
-  let unit = pricePeriod;
+  let unit = shouldShowMonthlyPriceAmount ? '/ month' : '/ year';
 
   for (const price of planPrices) {
     if (price.isTieredPrice) {
@@ -50,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);
@@ -62,7 +56,7 @@ export function getPaidPriceText({
     const featureUnit = price.feature?.units || '';
 
     if (price.pricingModel === BillingModel.PerUnit && !price.isTieredPrice) {
-      unit = shouldShowMonthlyPriceAmount ? `per ${featureUnit} ${pricePeriod}` : `per ${featureUnit} ${pricePeriod}`;
+      unit = shouldShowMonthlyPriceAmount ? `per ${featureUnit} / month` : `per ${featureUnit} / year`;
     } else if (price.pricingModel === BillingModel.UsageBased) {
       unit = `per ${featureUnit}`;
     }

package/src/components/utils/getPlanPrice.ts

@@ -50,7 +50,7 @@ export function getPlanPrice(
 
       return paywallLocale.price.paid
         ? paywallLocale.price.paid({ ...paidParams, plan })
-        : getPaidPriceText({ ...paidParams, locale, shouldShowMonthlyPriceAmount, paywallLocale });
+        : getPaidPriceText({ ...paidParams, locale, shouldShowMonthlyPriceAmount });
     }
     default:
       return {

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 });
+      }}
+      billingInformation={{ taxPercentage: 27 }}
+    />
+  </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

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

package/src/theme/Theme.tsx

@@ -1,15 +1,15 @@
+import { merge } from 'lodash';
 import React, { PropsWithChildren } from 'react';
+import { ThemeProvider as StyledThemeProvider } from 'styled-components';
 import { TypographyProps } from 'styled-typography';
 import { css, ThemeProvider } from '@emotion/react';
 import styled from '@emotion/styled/macro';
-import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles';
-import { ThemeProvider as StyledThemeProvider } from 'styled-components';
-import { merge } from 'lodash';
-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 { 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

@@ -14,10 +14,13 @@ export const flexLayoutMapper = (horizontalAlignment: HorizontalAlignment) => {
 export const getResolvedTheme = (customizedTheme?: CustomizedTheme): StiggTheme => {
   const primaryColor = Color(customizedTheme?.palette?.primary || '#327EEE');
   const textColor = Color(customizedTheme?.palette?.text?.primary || '#001E6C');
+  const successColor = Color('#4CAF50');
+  const errorColor = Color('#f44336');
 
   const baseTheme: StiggTheme = {
     palette: {
       primary: primaryColor.hex(),
+      primaryDark: primaryColor.darken(0.3).hex(),
       backgroundPaper: '#FFFFFF',
       backgroundHighlight: '#F5F6F9',
       backgroundSection: primaryColor.alpha(0.1).toString(),
@@ -29,7 +32,10 @@ export const getResolvedTheme = (customizedTheme?: CustomizedTheme): StiggTheme
       switchFill: primaryColor.lighten(0.5).hex(),
       switchHandle: primaryColor.hex(),
       warning: '#ed6c02',
-      error: '#f44336',
+      error: errorColor.hex(),
+      errorDark: errorColor.darken(0.3).hex(),
+      success: successColor.hex(),
+      successDark: successColor.darken(0.3).hex(),
       white: '#FFFFFF',
       text: {
         primary: textColor.hex(),

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;
@@ -20,7 +21,10 @@ export type StiggTheme = {
     switchHandle: string;
     warning: string;
     error: string;
+    errorDark: string;
     white: string;
+    success: string;
+    successDark: string;
     text: {
       primary: string;
       secondary: string;