@stigg/react-sdk 4.2.2 → 4.2.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.2.2",
+  "version": "4.2.4",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -14,7 +14,7 @@
     "start": "tsdx watch",
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
+    "lint": "eslint src/**/*.{ts,tsx} --fix --max-warnings=0",
     "size": "size-limit",
     "analyze": "size-limit --why",
     "storybook": "start-storybook -p 6006",
@@ -28,7 +28,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "tsdx lint"
+      "pre-commit": "yarn lint"
     }
   },
   "name": "@stigg/react-sdk",
@@ -50,7 +50,6 @@
     "@commitlint/config-conventional": "^17.0.3",
     "@rollup/plugin-image": "^2.1.1",
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@stigg/eslint-config-stigg": "^0.0.7",
     "@storybook/addon-actions": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",
     "@storybook/addon-interactions": "^6.5.9",
@@ -79,7 +78,22 @@
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
     "typedoc": "^0.23.7",
-    "typescript": "^4.6.3"
+    "typescript": "^4.6.3",
+    "prettier": "^3.0.2",
+    "eslint": "^7.11.0",
+    "@stigg/eslint-config-stigg": "^0.0.7",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "eslint-config-airbnb": "^18.0.4",
+    "eslint-config-airbnb-typescript": "^16.1.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jest": "^25.3.2",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-unused-imports": "^2.0.0"
   },
   "dependencies": {
     "@emotion/react": "^11.10.5",

package/src/components/StiggProvider.tsx

@@ -76,7 +76,7 @@ export const StiggProvider: React.FC<PropsWithChildren<StiggProviderProps>> = ({
     isInitialized: false,
     theme,
     refreshData: async () => {
-      setContext(ctx => ({ ...ctx, customerPortalUpdatedAt: new Date() }));
+      setContext((ctx) => ({ ...ctx, customerPortalUpdatedAt: new Date() }));
       await ctx.stigg.refresh();
     },
   }));
@@ -90,10 +90,10 @@ export const StiggProvider: React.FC<PropsWithChildren<StiggProviderProps>> = ({
       }
     };
 
-    const onEntitlementsUpdated = () => safeSetContext(ctx => ({ ...ctx, updatedAt: new Date() }));
+    const onEntitlementsUpdated = () => safeSetContext((ctx) => ({ ...ctx, updatedAt: new Date() }));
 
     const setStiggInstance = (stigg: StiggJs.StiggClient) =>
-      safeSetContext(ctx => {
+      safeSetContext((ctx) => {
         if (ctx.stigg) {
           ctx.stigg.removeListener('entitlementsUpdated', onEntitlementsUpdated);
         }
@@ -115,7 +115,7 @@ export const StiggProvider: React.FC<PropsWithChildren<StiggProviderProps>> = ({
         stiggClient = Stigg.initialize({
           ...initializeParams,
         });
-        safeSetContext(ctx => ({ ...ctx, isInitialized: false, updatedAt: new Date() }));
+        safeSetContext((ctx) => ({ ...ctx, isInitialized: false, updatedAt: new Date() }));
       }
       await stiggClient.waitForInitialization();
       setStiggInstance(stiggClient);
@@ -128,6 +128,7 @@ export const StiggProvider: React.FC<PropsWithChildren<StiggProviderProps>> = ({
       ctx.stigg.removeListener('entitlementsUpdated', onEntitlementsUpdated);
       ctx.stigg.clearCustomer();
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [apiKey]);
 
   useEffect(() => {
@@ -137,10 +138,11 @@ export const StiggProvider: React.FC<PropsWithChildren<StiggProviderProps>> = ({
     } else {
       stiggClient.clearCustomer();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [customerId, customerToken, resourceId]);
 
   useEffect(() => {
-    setContext(ctx => ({ ...ctx, theme }));
+    setContext((ctx) => ({ ...ctx, theme }));
   }, [theme]);
 
   return (

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/utils/calculateDiscountRate.ts

@@ -1,4 +1,4 @@
-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';
 
@@ -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/stories/CustomerPortal.stories.tsx

@@ -11,7 +11,7 @@ import {
   Promotions,
   StiggProvider,
   SubscriptionsOverview,
-} from '../';
+} from '..';
 import { CustomizedTheme } from '../theme/Theme';
 import { Typography } from '../components/common/Typography';
 import { defaultArgsWithCustomer } from './baseArgs';
@@ -33,8 +33,7 @@ export default {
           }
         }
         baseUri={args.baseUri}
-        enableEdge={args.disableEdge}
-      >
+        enableEdge={args.disableEdge}>
         <Story />
       </StiggProvider>
     ),
@@ -57,7 +56,8 @@ const ModularWrapper = styled.div`
   }
 `;
 
-const Template: ComponentStory<any> = args => {
+const Template: ComponentStory<any> = (args) => {
+  const { customerPortalTheme, productId } = args;
   return (
     <Wrapper>
       <CustomerPortal
@@ -66,20 +66,20 @@ const Template: ComponentStory<any> = args => {
         onManageSubscription={undefined}
         paywallComponent={
           <Paywall
-            productId={args.productId}
+            productId={productId}
             onPlanSelected={(...args) => {
               console.log('onPlanSelected', args);
             }}
             highlightedPlanId="plan-revvenu-unity"
           />
         }
-        theme={args.customerPortalTheme}
+        theme={customerPortalTheme}
       />
     </Wrapper>
   );
 };
 
-const SubscriptionOverviewTemplate: ComponentStory<any> = args => {
+const SubscriptionOverviewTemplate: ComponentStory<any> = (args) => {
   return (
     <CustomerPortalProvider>
       <Wrapper>
@@ -94,7 +94,7 @@ const SubscriptionOverviewTemplate: ComponentStory<any> = args => {
   );
 };
 
-const ModularCustomerPortalTemplate: ComponentStory<any> = args => {
+const ModularCustomerPortalTemplate: ComponentStory<any> = (args) => {
   return (
     <CustomerPortalProvider>
       <ModularWrapper>
@@ -130,7 +130,7 @@ const ModularCustomerPortalTemplate: ComponentStory<any> = args => {
   );
 };
 
-const BillingInformationTemplate: ComponentStory<any> = args => {
+const BillingInformationTemplate: ComponentStory<any> = (args) => {
   return (
     <CustomerPortalProvider>
       <Wrapper>
@@ -140,7 +140,7 @@ const BillingInformationTemplate: ComponentStory<any> = args => {
   );
 };
 
-const CustomerUsageDataTemplate: ComponentStory<any> = args => {
+const CustomerUsageDataTemplate: ComponentStory<any> = (args) => {
   return (
     <CustomerPortalProvider>
       <Wrapper>
@@ -150,7 +150,7 @@ const CustomerUsageDataTemplate: ComponentStory<any> = args => {
   );
 };
 
-const SubscriptionAddonsTemplate: ComponentStory<any> = args => {
+const SubscriptionAddonsTemplate: ComponentStory<any> = (args) => {
   return (
     <CustomerPortalProvider>
       <Wrapper>

package/src/stories/Paywall.stories.tsx

@@ -2,8 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import styled from '@emotion/styled/macro';
 import React from 'react';
-import { Paywall } from '../components/paywall';
-import { PaywallPlan } from '../components/paywall';
+import { Paywall, PaywallPlan } from '../components/paywall';
 import { StiggProvider } from '../components/StiggProvider';
 import { CustomizedTheme } from '../theme/Theme';
 import { defaultArgs, defaultArgsWithCustomer } from './baseArgs';
@@ -22,8 +21,7 @@ export default {
           theme={args.theme}
           locale={args.locale}
           baseUri={args.baseUri}
-          enableEdge={!args.disableEdge}
-        >
+          enableEdge={!args.disableEdge}>
           <Story />
         </StiggProvider>
       </Wrapper>
@@ -31,7 +29,7 @@ export default {
   ],
 } as ComponentMeta<typeof Paywall>;
 
-const Template: ComponentStory<any> = args => (
+const Template: ComponentStory<any> = (args) => (
   <Paywall
     highlightedPlanId={args.highlightedPlanId}
     onPlanSelected={args.onPlanSelected ? args.onPlanSelected : action('onPlanSelected')}
@@ -112,7 +110,7 @@ CustomerAsyncCTA.args = {
   highlightedPlanId: 'plan-revvenu-essentials',
   showOnlyEligiblePlans: true,
   onPlanSelected: async () => {
-    await new Promise(resolve => setTimeout(resolve, 1000));
+    await new Promise((resolve) => setTimeout(resolve, 1000));
   },
 };
 

package/src/stories/baseArgs.ts

@@ -7,4 +7,4 @@ export const defaultArgs = {
 export const defaultArgsWithCustomer = {
   ...defaultArgs,
   customerId: process.env.CUSTOMER_ID || 'customer-demo-01',
-};
+};

package/src/theme/Fonts.tsx

@@ -6,7 +6,7 @@ export const Fonts = ({ externalFontUrl }: { externalFontUrl?: string }) => {
     <Global
       styles={css`
         ${externalFontUrl &&
-          `
+        `
           @font-face {
             font-family: 'custom-font';
             font-style: normal;

package/src/theme/Theme.tsx

@@ -1,15 +1,14 @@
 import React, { PropsWithChildren } from 'react';
 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 { merge } from 'lodash';
 import { Fonts } from './Fonts';
 import { DeepPartial } from '../types';
 import { StiggTheme } from './types';
 import { useStiggContext } from '../components/StiggProvider';
-import { merge } from 'lodash';
 import { getResolvedTheme } from './getResolvedTheme';
 
 export type CustomizedTheme = DeepPartial<StiggTheme>;
@@ -48,7 +47,7 @@ function createTypographyTheme(theme: StiggTheme): Partial<TypographyProps> {
   return {
     // Hack to fix theming issues
     // @ts-ignore
-    pxToRem: size => `${(size / htmlFontSize) * coef}rem`,
+    pxToRem: (size) => `${(size / htmlFontSize) * coef}rem`,
     bodyFontFamily: typography.fontFamily,
     headingFontFamily: typography.fontFamily,
     fontSizes: [