@stigg/react-sdk 5.36.0 → 6.0.0

package/dist/stories/Paywall.stories.d.ts

@@ -6,3 +6,4 @@ export declare const CustomerPaywall: import("@storybook/csf").AnnotatedStoryFn<
 export declare const CustomerUpgradePaywall: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, any>;
 export declare const CustomerAsyncCTA: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, any>;
 export declare const CustomerResourcePaywall: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, any>;
+export declare const PaywallWithAddons: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, any>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.36.0",
+  "version": "6.0.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/assets/add.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 3V21.0001M3 11.9446H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/check.svg

@@ -2,4 +2,4 @@
 <g id="check">
 <path id="Shape" d="M20 7L9 18L4 13" stroke="#F5F6F9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
-</svg>
+</svg>

package/src/assets/entitlement-check.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 11.1429L9.71572 17.8586C9.79383 17.9367 9.92046 17.9367 9.99856 17.8586L21.8571 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg> 

package/src/assets/remove.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/common/customIcons.ts

@@ -19,3 +19,6 @@ export { default as Close } from '../../assets/close.svg';
 export { default as Check } from '../../assets/check.svg';
 export { default as PayAsYouGoCharge } from '../../assets/pay-as-you-go-charge.svg';
 export { default as Coupon } from '../../assets/coupon.svg';
+export { default as Add } from '../../assets/add.svg';
+export { default as Remove } from '../../assets/remove.svg';
+export { default as EntitlementCheck } from '../../assets/entitlement-check.svg';

package/src/components/paywall/EntitlementRow.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import styled from '@emotion/styled/macro';
 import { EntitlementResetPeriod } from '@stigg/js-client-sdk';
-import CheckUrl from '../../assets/check-stigg.svg';
 import { calculateUnitQuantityText } from './utils/calculateUnitQuantityText';
 import { formatNumber } from '../utils/formatNumber';
 import { Typography } from '../common/Typography';
+import { Icon } from '../common/Icon';
 
 const EntitlementName = styled(Typography)`
   margin: 0;
@@ -12,22 +12,20 @@ const EntitlementName = styled(Typography)`
 
 const EntitlementRowContainer = styled.div`
   display: flex;
-  align-items: baseline;
+  align-items: center;
+  gap: 16px;
 `;
 
 const EntitlementIconContainer = styled.div`
   display: flex;
   align-items: center;
-  margin-right: 16px;
-  height: ${({ theme }) => theme.stigg.typography.h3.fontSize};
   flex-shrink: 0;
 `;
 
-const EntitlementCheckIcon = styled(CheckUrl)`
-  flex-shrink: 0;
-  * {
-    fill: ${({ theme }) => theme.stigg.palette.text.disabled};
-  }
+const EntitlementIcon = styled(Icon)`
+  width: 24px;
+  height: 24px;
+  color: ${({ theme }) => theme.stigg.palette.primary};
 `;
 
 type EntitlementRowProps = {
@@ -113,7 +111,7 @@ export function EntitlementRow(props: EntitlementRowProps) {
   return (
     <EntitlementRowContainer className={`stigg-entitlement-row-container stigg-entitlement-${restProps.feature?.id}`}>
       <EntitlementIconContainer>
-        <EntitlementCheckIcon className="stigg-entitlement-row-icon" />
+        <EntitlementIcon icon="EntitlementCheck" className="stigg-entitlement-row-icon" />
       </EntitlementIconContainer>
       <EntitlementName className="stigg-entitlement-name" variant="h6" color="secondary">
         {displayNameOverride || displayName}

package/src/components/paywall/Paywall.tsx

@@ -61,6 +61,7 @@ type PaywallProps = {
   locale: string;
   shouldHidePlan?: ShouldHidePlanFn;
   selectDefaultTierIndex?: SelectDefaultTierIndexFn;
+  hideCompatibleAddons?: boolean;
 };
 
 export const Paywall = ({
@@ -78,6 +79,7 @@ export const Paywall = ({
   shouldHidePlan,
   selectDefaultTierIndex,
   currentSubscriptionOverride,
+  hideCompatibleAddons,
 }: PaywallProps) => {
   const { stigg } = useStiggContext();
   const discountRate = calculatePaywallDiscountRate(plans);
@@ -176,6 +178,7 @@ export const Paywall = ({
               customer={customer}
               isCustomerInCustomPlan={isCustomerInCustomPlan}
               selectDefaultTierIndex={selectDefaultTierIndex}
+              hideCompatibleAddons={hideCompatibleAddons}
             />
           ))}
         </PaywallPlansContainer>

package/src/components/paywall/PaywallContainer.tsx

@@ -30,6 +30,7 @@ export type PaywallContainerProps = {
   billingCountryCode?: string;
   shouldHidePlan?: ShouldHidePlanFn;
   selectDefaultTierIndex?: SelectDefaultTierIndexFn;
+  hideCompatibleAddons?: boolean;
   // This is used to override the current subscription in case a many to one plan mapping is needed
   // Many plans mapped to one (fictive) plan
   currentSubscriptionOverride?: CurrentSubscriptionOverrideFn;
@@ -48,6 +49,7 @@ export const PaywallContainer = ({
   shouldHidePlan,
   selectDefaultTierIndex,
   currentSubscriptionOverride: currentSubscriptionOverrideFn,
+  hideCompatibleAddons,
 }: PaywallContainerProps) => {
   const hasCustomerPortalContext = useCheckContextExists(CustomerPortalContext);
   let isCustomerPortalLoading = false;
@@ -104,6 +106,7 @@ export const PaywallContainer = ({
         locale={locale}
         shouldHidePlan={shouldHidePlan}
         selectDefaultTierIndex={selectDefaultTierIndex}
+        hideCompatibleAddons={hideCompatibleAddons}
       />
     );
 

package/src/components/paywall/PlanCompatibleAddons.tsx

@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import { Addon, WidgetType } from '@stigg/js-client-sdk';
+import MuiButton from '@mui/material/Button';
+import styled from '@emotion/styled/macro';
+import classNames from 'classnames';
+import { Typography } from '../common/Typography';
+import { PaywallLocalization } from './paywallTextOverrides';
+import { Icon } from '../common/Icon';
+
+export const StyledButton = styled(MuiButton)`
+  padding: 0px;
+  text-transform: none;
+  margin-left: 0px;
+`;
+
+const ButtonText = styled(Typography)`
+  font-size: 14px;
+  font-weight: 500;
+`;
+
+const AddonsBox = styled.div`
+  width: 100%;
+  gap: 10px;
+`;
+
+const AddonsList = styled.div`
+  margin-top: 10px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+`;
+
+const AddonRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 0px;
+  max-height: 44px;
+  gap: 16px;
+`;
+
+const AddonName = styled(Typography)`
+  overflow: hidden;
+  font-feature-settings: 'liga' off, 'clig' off;
+  text-overflow: ellipsis;
+  font-family: 'DM Sans';
+  letter-spacing: 0.15px;
+  white-space: nowrap;
+  min-width: 0;
+  flex-shrink: 1;
+`;
+
+const AddonIcon = styled(Icon)`
+  width: 24px;
+  height: 24px;
+  color: ${({ theme }) => theme.stigg.palette.primary};
+`;
+
+const AddonContent = styled.div`
+  flex: 1;
+  min-width: 0;
+`;
+
+const Footer = styled.div`
+  margin-top: 16px;
+  display: flex;
+`;
+
+const MAX_ADDONS = 4;
+
+type PlanCompatibleAddonsProps = {
+  addons: Addon[];
+  paywallLocale: PaywallLocalization;
+};
+
+export function PlanCompatibleAddons({ addons, paywallLocale }: PlanCompatibleAddonsProps) {
+  const [showAllAddons, setShowAllAddons] = useState(false);
+
+  if (!addons || addons.length === 0) return null;
+
+  const visibleAddons = addons.filter((addon) => !addon.hiddenFromWidgets?.includes(WidgetType.Paywall));
+
+  const toggleShowAllAddons = () => {
+    setShowAllAddons(!showAllAddons);
+  };
+
+  const displayedAddons = showAllAddons ? visibleAddons : visibleAddons.slice(0, MAX_ADDONS);
+
+  return (
+    <AddonsBox className="stigg-compatible-addons-container">
+      <Typography className="stigg-compatible-addons-header" color="secondary" variant="body1" bold>
+        {paywallLocale.addonsTitle}
+      </Typography>
+      <AddonsList className="stigg-compatible-addons-list">
+        {displayedAddons.map((addon) => {
+          return (
+            <AddonRow
+              key={addon.id}
+              className={classNames(`stigg-compatible-addon--${addon.id}`, 'stigg-compatible-addon-item')}>
+              <AddonIcon icon="Add" className="stigg-compatible-addon-icon" />
+              <AddonContent className="stigg-compatible-addon-content">
+                <AddonName variant="body1" color="primary" className="stigg-compatible-addon-name">
+                  {addon.displayName}
+                </AddonName>
+              </AddonContent>
+            </AddonRow>
+          );
+        })}
+      </AddonsList>
+      {visibleAddons.length > MAX_ADDONS && (
+        <Footer>
+          <StyledButton variant="text" onClick={toggleShowAllAddons}>
+            <ButtonText color="primary.main">
+              {showAllAddons ? 'Show less' : `Show ${visibleAddons.length - MAX_ADDONS} more`}
+            </ButtonText>
+          </StyledButton>
+        </Footer>
+      )}
+    </AddonsBox>
+  );
+}

package/src/components/paywall/PlanEntitlements.tsx

@@ -16,7 +16,7 @@ function getTitle(plan: PaywallPlan, paywallLocale: PaywallLocalization, hasFeat
   if (paywallLocale.entitlementsTitle) {
     return paywallLocale.entitlementsTitle(plan);
   }
-  let title = hasFeatures ? `${plan.displayName} includes` : '';
+  let title = hasFeatures ? `Includes:` : '';
   if (plan.basePlan) {
     title = `Everything in ${plan.basePlan.displayName}${hasFeatures ? ', plus:' : ''}`;
   }

package/src/components/paywall/PlanOffering.tsx

@@ -12,6 +12,7 @@ import { Typography } from '../common/Typography';
 import MiniSchedule from '../../assets/mini-schedule.svg';
 import { PlanPrice } from './PlanPrice';
 import { getTiersPerUnitQuantities } from '../utils/priceTierUtils';
+import { PlanCompatibleAddons } from './PlanCompatibleAddons';
 
 const PlanOfferingButtonHeight = '66px';
 
@@ -32,6 +33,10 @@ const PlanOfferingContainer = styled.div<{ $isHighlighted: boolean; $isCurrentPl
   position: relative;
 `;
 
+const AddonsContainer = styled.div<{ $planHasEntitlements: boolean }>`
+  margin-top: ${({ $planHasEntitlements }) => ($planHasEntitlements ? '32px' : '0px')};
+`;
+
 const PlanHeader = styled(Typography)`
   padding-bottom: 8px;
 `;
@@ -87,6 +92,7 @@ type PlanOfferingProps = {
   withStartingAtRow: boolean;
   isCustomerInCustomPlan: boolean;
   selectDefaultTierIndex?: SelectDefaultTierIndexFn;
+  hideCompatibleAddons?: boolean;
 };
 
 const NextPlanTagContainer = styled.div`
@@ -140,6 +146,7 @@ export function PlanOffering({
   withStartingAtRow,
   isCustomerInCustomPlan,
   selectDefaultTierIndex,
+  hideCompatibleAddons,
 }: PlanOfferingProps) {
   const isNextPlan = plan.isNextPlan && plan.isNextPlan(billingPeriod);
   const planPrices = plan.pricePoints.filter((pricePoint) => pricePoint.billingPeriod === billingPeriod);
@@ -238,6 +245,12 @@ export function PlanOffering({
       </HeaderWrapper>
 
       <PlanEntitlements plan={plan} billingPeriod={billingPeriod} paywallLocale={paywallLocale} />
+
+      <AddonsContainer $planHasEntitlements={plan.entitlements.length > 0} className="stigg-addons-container">
+        {!hideCompatibleAddons && plan.compatibleAddons && plan.compatibleAddons.length > 0 && (
+          <PlanCompatibleAddons addons={plan.compatibleAddons} paywallLocale={paywallLocale} />
+        )}
+      </AddonsContainer>
     </PlanOfferingContainer>
   );
 }

package/src/components/paywall/index.ts

@@ -1,3 +1,4 @@
 export { PaywallContainer as Paywall, PaywallContainerProps as PaywallProps } from './PaywallContainer';
 export * from './types';
 export { PaywallLocalization, PlanPriceText, CurrentPlanParams } from './paywallTextOverrides';
+export { PlanCompatibleAddons } from './PlanCompatibleAddons';

package/src/components/paywall/paywallTextOverrides.ts

@@ -21,6 +21,7 @@ export type CurrentPlanParams = {
 export type PaywallLocalization = {
   highlightChip: string;
   entitlementsTitle?: (plan: PaywallPlan) => string;
+  addonsTitle?: string;
   planCTAButton: {
     upgrade: string | ((plan: PaywallPlan) => string);
     downgrade: string | ((plan: PaywallPlan) => string);
@@ -51,6 +52,7 @@ export type PaywallLocalization = {
 export function getResolvedPaywallLocalize(localizeOverride?: DeepPartial<PaywallLocalization>) {
   const paywallDefaultLocalization: PaywallLocalization = {
     highlightChip: 'Recommended',
+    addonsTitle: 'Available add-ons:',
     planCTAButton: {
       upgrade: 'Upgrade',
       downgrade: 'Downgrade',

package/src/stories/Paywall.stories.tsx

@@ -40,6 +40,7 @@ const Template: ComponentStory<any> = (args) => (
     billingCountryCode={args.billingCountryCode}
     preferredBillingPeriod={args.preferredBillingPeriod}
     shouldHidePlan={args.shouldHidePlan}
+    hideCompatibleAddons={args.hideCompatibleAddons}
   />
 );
 
@@ -121,3 +122,18 @@ CustomerResourcePaywall.args = {
   productId: 'product-site',
   resourceId: 'example.com',
 };
+
+export const PaywallWithAddons = Template.bind({});
+PaywallWithAddons.args = {
+  ...defaultArgs,
+  highlightedPlanId: 'plan-revvenu-essentials',
+  hideCompatibleAddons: false,
+  textOverrides: {
+    highlightChip: 'Best value',
+    planCTAButton: {
+      startTrial: () => 'Start trial',
+      upgrade: 'Start now',
+      custom: 'Contact us',
+    },
+  },
+};