@stigg/react-sdk 4.8.0 → 4.9.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.8.0",
+  "version": "4.9.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -18,6 +18,7 @@
     "lint-fix": "yarn run lint --fix",
     "size": "size-limit",
     "analyze": "size-limit --why",
+    "fix:prettier": "prettier \"src/**/*.ts\" --write",
     "storybook": "export NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "prepare": "husky install",
@@ -122,7 +123,7 @@
     "moment": "^2.29.4",
     "react-feather": "^2.0.10",
     "react-loading-skeleton": "^3.1.0",
-    "react-lottie": "^1.2.3",
+    "lottie-react": "^2.4.0",
     "react-spinners": "^0.13.3",
     "react-switch": "^7.0.0",
     "styled-components": "^5.3.6",

package/src/components/checkout/summary/CheckoutSuccess.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled/macro';
 import Box from '@mui/material/Box';
 import Color from 'color';
 import React from 'react';
-import Lottie from 'react-lottie';
+import Lottie from 'lottie-react';
 import animationData from '../../../assets/lottie/checkout-success.json';
 import { Typography } from '../../common/Typography';
 import { CheckoutLocalization } from '../configurations/textOverrides';
@@ -59,15 +59,20 @@ const CheckoutSuccessText = styled(Typography)`
   animation: fadeIn 5s ease-in forwards;
 `;
 
+const StyledLottie = styled(Lottie)`
+  display: flex;
+  justify-content: center;
+
+  svg {
+    width: 350px !important;
+    height: auto !important;
+  }
+`;
+
 export function CheckoutSuccess({ checkoutLocalization }: { checkoutLocalization: CheckoutLocalization }) {
   return (
     <CheckoutSuccessContainer className="stigg-checkout-success-container">
-      <Lottie
-        width={350}
-        height="auto"
-        isClickToPauseDisabled
-        options={{ loop: false, autoplay: true, animationData }}
-      />
+      <StyledLottie animationData={animationData} loop={false} autoplay />
       <CheckoutSuccessText variant="h1" color="primary.main">
         {checkoutLocalization.summary.checkoutSuccessText}
       </CheckoutSuccessText>

package/src/components/paywall/Paywall.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled/macro';
 import { PlanOffering } from './PlanOffering';
 import { BillingPeriodPicker } from './BillingPeriodPicker';
 import { calculatePaywallDiscountRate } from '../utils/calculateDiscountRate';
-import { OnPlanSelectedCallbackFn, PaywallPlan, SubscribeIntentionType } from './types';
+import { ShouldHidePlanFn, OnPlanSelectedCallbackFn, PaywallPlan, SubscribeIntentionType } from './types';
 import { PaywallLocalization } from './paywallTextOverrides';
 import { PoweredByStigg } from '../common/PoweredByStigg';
 import { useStiggContext } from '../..';
@@ -51,6 +51,7 @@ type PaywallProps = {
   onPlanSelected: OnPlanSelectedCallbackFn;
   paywallLocale: PaywallLocalization;
   locale: string;
+  shouldHidePlan?: ShouldHidePlanFn;
 };
 
 export const Paywall = ({
@@ -65,13 +66,14 @@ export const Paywall = ({
   onPlanSelected,
   paywallLocale,
   locale,
+  shouldHidePlan,
 }: PaywallProps) => {
   const { stigg } = useStiggContext();
   const discountRate = calculatePaywallDiscountRate(plans);
   const shouldShowDescriptionSection = plans.some((plan) => !!plan.description);
   const hasMonthlyPrice = hasPricePointsForPlans(plans, BillingPeriod.Monthly);
   const hasAnnuallyPrice = hasPricePointsForPlans(plans, BillingPeriod.Annually);
-  const plansToShow = getPlansToDisplay(plans, selectedBillingPeriod);
+  const plansToShow = getPlansToDisplay(plans, selectedBillingPeriod, shouldHidePlan);
 
   const handleOnSubscribe = useCallback(
     (plan: Plan, intentionType: SubscribeIntentionType, billableFeatures: BillableFeature[]) => {

package/src/components/paywall/PaywallContainer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { BillingPeriod } from '@stigg/js-client-sdk';
 import { Paywall } from './Paywall';
 import { useLoadPaywallData } from './hooks/useLoadPaywallData';
-import { OnPlanSelectedCallbackFn } from './types';
+import { ShouldHidePlanFn, OnPlanSelectedCallbackFn } from './types';
 import { getResolvedPaywallLocalize, PaywallLocalization } from './paywallTextOverrides';
 import { DeepPartial } from '../../types';
 import { PaywallLoader } from './PaywallLoader';
@@ -23,6 +23,7 @@ export type PaywallContainerProps = {
   onBillingPeriodChange?: (billingPeriod: BillingPeriod) => void;
   textOverrides?: DeepPartial<PaywallLocalization>;
   billingCountryCode?: string;
+  shouldHidePlan?: ShouldHidePlanFn;
 };
 
 export const PaywallContainer = ({
@@ -35,6 +36,7 @@ export const PaywallContainer = ({
   preferredBillingPeriod,
   onBillingPeriodChange,
   billingCountryCode,
+  shouldHidePlan,
 }: PaywallContainerProps) => {
   const hasCustomerPortalContext = useCheckContextExists(CustomerPortalContext);
   let isCustomerPortalLoading = false;
@@ -86,6 +88,7 @@ export const PaywallContainer = ({
         onPlanSelected={onPlanSelected}
         paywallLocale={paywallLocale}
         locale={locale}
+        shouldHidePlan={shouldHidePlan}
       />
     );
 

package/src/components/paywall/PlanOffering.tsx

@@ -185,7 +185,7 @@ export function PlanOffering({
 
   return (
     <PlanOfferingContainer
-      className={classNames('stigg-plan-offering-container', {
+      className={classNames(`stigg-${plan.id}`, 'stigg-plan-offering-container', {
         'stigg-current-plan': plan.isCurrentCustomerPlan,
       })}
       $isHighlighted={isHighlighted}

package/src/components/paywall/types.ts

@@ -61,3 +61,5 @@ export type OnPlanSelectedCallbackFn = ({
   selectedBillingPeriod: BillingPeriod;
   billableFeatures?: BillableFeature[];
 }) => void | Promise<void>;
+
+export type ShouldHidePlanFn = ({ plan }: { plan: PaywallPlan }) => boolean | Promise<boolean>;

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

@@ -1,7 +1,13 @@
 import { BillingPeriod, PricingType } from '@stigg/js-client-sdk';
-import { PaywallPlan } from '../types';
+import { ShouldHidePlanFn, PaywallPlan } from '../types';
 import { hasPricePoints } from './hasPricePoints';
 
-export function getPlansToDisplay(plans: PaywallPlan[], selectedBillingPeriod: BillingPeriod): PaywallPlan[] {
-    return plans.filter(plan => plan.pricingType !== PricingType.Paid || hasPricePoints(plan, selectedBillingPeriod));
-}
+export function getPlansToDisplay(
+  plans: PaywallPlan[],
+  selectedBillingPeriod: BillingPeriod,
+  shouldHidePlan?: ShouldHidePlanFn,
+): PaywallPlan[] {
+  return plans
+    .filter((plan) => plan.pricingType !== PricingType.Paid || hasPricePoints(plan, selectedBillingPeriod))
+    .filter((plan) => !shouldHidePlan || !shouldHidePlan({ plan }));
+}

package/src/stories/Paywall.stories.tsx

@@ -39,6 +39,7 @@ const Template: ComponentStory<any> = (args) => (
     resourceId={args.resourceId}
     billingCountryCode={args.billingCountryCode}
     preferredBillingPeriod={args.preferredBillingPeriod}
+    shouldHidePlan={args.shouldHidePlan}
   />
 );