@stigg/react-sdk 4.8.1 → 4.9.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.8.1",
+  "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",

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/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}
   />
 );