@stigg/react-sdk 3.0.1 → 4.0.0

package/dist/theme/getResolvedTheme.d.ts

@@ -6,6 +6,7 @@ export declare const getResolvedTheme: (customizedTheme?: {
         backgroundPaper?: string | undefined;
         backgroundHighlight?: string | undefined;
         backgroundSection?: string | undefined;
+        backgroundButton?: string | undefined;
         outlinedBorder?: string | undefined;
         outlinedRestingBorder?: string | undefined;
         outlinedHoverBackground?: string | undefined;

package/dist/theme/types.d.ts

@@ -11,6 +11,7 @@ export declare type StiggTheme = {
         backgroundPaper: string;
         backgroundHighlight: string;
         backgroundSection: string;
+        backgroundButton: string;
         outlinedBorder: string;
         outlinedRestingBorder: string;
         outlinedHoverBackground: string;

package/package.json

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

package/src/components/customerPortal/customerPortalTextOverrides.ts

@@ -33,7 +33,7 @@ export function getResolvedCustomerPortalLocalize(
     viewInvoiceHistory: 'View invoice history',
     editPaymentDetails: 'Edit',
     paywallSectionTitle: 'Plans',
-    cancelScheduledUpdatesButtonTitle: 'Cancel update',
+    cancelScheduledUpdatesButtonTitle: 'Cancel',
   };
   return merge(customerPortalDefaultLocalization, localizeOverride);
 }

package/src/components/paywall/PlanEntitlements.tsx

@@ -10,8 +10,6 @@ const PlanEntitlementsContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
-  margin-top: 33px;
-  margin-bottom: 60px;
 `;
 
 function getTitle(plan: PaywallPlan, paywallLocale: PaywallLocalization) {

package/src/components/paywall/PlanOffering.tsx

@@ -32,7 +32,7 @@ const PlanOfferingContainer = styled.div<{ $isHighlighted: boolean; $isCurrentPl
 `;
 
 const PlanHeader = styled(Typography)`
-  padding-bottom: 16px;
+  padding-bottom: 8px;
 `;
 
 const PlanPriceContainer = styled(Typography)`
@@ -45,35 +45,58 @@ const UnitSpan = styled(Typography)`
 
 const PriceSpan = styled(Typography)`
   white-space: normal;
+  min-height: 39px;
 `;
 
 function PlanPrice({
+  showStartingAt,
+  withStartingAtRow,
   plan,
   billingPeriod,
   paywallLocale,
   locale,
-  shouldShowMonthlyPriceAmount,
+  hasMonthlyPrice,
+  hasAnnuallyPrice,
 }: {
+  showStartingAt: boolean;
+  withStartingAtRow: boolean;
   plan: PaywallPlan;
   billingPeriod: BillingPeriod;
   paywallLocale: PaywallLocalization;
-  shouldShowMonthlyPriceAmount: boolean;
+  hasMonthlyPrice: boolean;
+  hasAnnuallyPrice: boolean;
   locale: string;
 }) {
-  const { price, unit } = getPlanPrice(plan, billingPeriod, paywallLocale, locale, shouldShowMonthlyPriceAmount);
+  const { price, unit } = getPlanPrice(plan, billingPeriod, paywallLocale, locale, hasMonthlyPrice);
 
   return (
     <PlanPriceContainer className="stigg-price-text">
       <>
-        <PriceSpan span variant="h1">
-          {price}
-        </PriceSpan>
+        {withStartingAtRow && (
+          <Typography
+            style={{ minHeight: '20px' }}
+            className="stigg-starting-at-text"
+            variant="body1"
+            color="secondary"
+          >
+            {showStartingAt ? paywallLocale.price.startingAtCaption : EMPTY_CHAR}
+          </Typography>
+        )}
+
+        <PriceSpan variant="h1">{price}</PriceSpan>
+
         {unit && (
-          <UnitSpan span variant="h6">
-            {' '}
+          <UnitSpan span variant="h6" color="secondary">
             {unit}
           </UnitSpan>
         )}
+
+        <PriceBillingPeriod
+          plan={plan}
+          billingPeriod={billingPeriod}
+          hasAnnuallyPrice={hasAnnuallyPrice}
+          hasMonthlyPrice={hasMonthlyPrice}
+        />
       </>
     </PlanPriceContainer>
   );
@@ -91,27 +114,26 @@ function PriceBillingPeriod({ plan, billingPeriod, hasMonthlyPrice, hasAnnuallyP
 
   let content = EMPTY_CHAR;
   if (hasPrice && hasMonthlyPrice && hasAnnuallyPrice) {
-    content = `billed ${billingPeriod.toLowerCase()}`;
+    content = `, billed ${billingPeriod.toLowerCase()}`;
   }
 
   return (
-    <Typography className="stigg-price-billing-period-text" variant="body1" color="disabled">
+    <Typography span className="stigg-price-billing-period-text" variant="h6" color="secondary">
       {content}
     </Typography>
   );
 }
 
-const Divider = styled.div<{ $withMargin: boolean }>`
-  margin-top: ${({ $withMargin }) => ($withMargin ? '30px' : '0')};
+const Divider = styled.div`
   height: 2px;
-  width: 50px;
-  background-color: ${({ theme }) => theme.stigg.palette.primary};
+  width: 100%;
+  background-color: ${({ theme }) => theme.stigg.palette.outlinedBorder};
+  margin-bottom: 40px;
 `;
 
 const PlanDescription = styled(Typography)`
   text-align: ${({ theme }) => theme.stigg.layout.descriptionAlignment};
   min-height: ${({ theme }) => theme.stigg.layout.descriptionMinHeight};
-  margin-top: 16px;
 `;
 
 const HighlightBadge = styled.div`
@@ -230,45 +252,38 @@ export function PlanOffering({
           {plan.displayName}
         </PlanHeader>
 
-        {withStartingAtRow && (
-          <Typography className="stigg-starting-at-text" variant="body1" color="secondary">
-            {showStartingAt ? paywallLocale.price.startingAtCaption : EMPTY_CHAR}
-          </Typography>
+        {shouldShowDescriptionSection && (
+          <PlanDescription className="stigg-plan-description" variant="h6" color="secondary">
+            {plan.description}
+          </PlanDescription>
         )}
 
         <PlanPrice
+          showStartingAt={showStartingAt}
+          withStartingAtRow={!!withStartingAtRow}
           plan={plan}
           billingPeriod={billingPeriod}
           paywallLocale={paywallLocale}
           locale={locale}
-          shouldShowMonthlyPriceAmount={hasMonthlyPrice}
+          hasAnnuallyPrice={hasAnnuallyPrice}
+          hasMonthlyPrice={hasMonthlyPrice}
         />
-        <PriceBillingPeriod
+
+        <PlanOfferingButton
+          isNextPlan={isNextPlan}
+          customer={customer}
           plan={plan}
+          currentSubscription={currentSubscription}
           billingPeriod={billingPeriod}
-          hasAnnuallyPrice={hasAnnuallyPrice}
-          hasMonthlyPrice={hasMonthlyPrice}
+          isCustomerOnTrial={isCustomerOnTrial}
+          onPlanSelected={onPlanSelected}
+          paywallLocale={paywallLocale}
         />
-        {shouldShowDescriptionSection && (
-          <PlanDescription className="stigg-plan-description" variant="h6" color="secondary">
-            {plan.description}
-          </PlanDescription>
-        )}
-        <Divider className="stigg-plan-header-divider" $withMargin={!shouldShowDescriptionSection} />
+
+        <Divider className="stigg-plan-header-divider" />
       </HeaderWrapper>
 
       <PlanEntitlements plan={plan} billingPeriod={billingPeriod} paywallLocale={paywallLocale} />
-
-      <PlanOfferingButton
-        isNextPlan={isNextPlan}
-        customer={customer}
-        plan={plan}
-        currentSubscription={currentSubscription}
-        billingPeriod={billingPeriod}
-        isCustomerOnTrial={isCustomerOnTrial}
-        onPlanSelected={onPlanSelected}
-        paywallLocale={paywallLocale}
-      />
     </PlanOfferingContainer>
   );
 }

package/src/components/paywall/PlanOfferingButton.tsx

@@ -1,14 +1,12 @@
-import React, { ReactNode, useState } from 'react';
+import React, { useState } from 'react';
 import { BillingPeriod, Customer, PricingType, Subscription } from '@stigg/js-client-sdk';
 import styled from '@emotion/styled/macro';
 import { css, Theme, useTheme } from '@emotion/react';
-import { ArrowRight } from 'react-feather';
 import { PaywallPlan, SubscribeIntentionType } from './types';
 import { PaywallLocalization } from './paywallTextOverrides';
 import { flexLayoutMapper } from '../../theme/getResolvedTheme';
 import ClipLoader from 'react-spinners/ClipLoader';
 import { Typography } from '../common/Typography';
-import Restore from '../../assets/restore.svg';
 import { getSubscriptionScheduleUpdateTexts } from '../utils/getSubscriptionScheduleUpdateTexts';
 import { isFunction } from 'lodash';
 
@@ -19,14 +17,13 @@ const LoadingIndicator = styled(ClipLoader)`
 const OfferingButton = styled.button<{ $disabled?: boolean }>`
   cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};
   padding: 8px 12px;
-  background-color: inherit;
+  background-color: ${({ theme }) => theme.stigg.palette.backgroundButton};
   border: ${({ theme }) => `1px solid ${theme.stigg.palette.outlinedRestingBorder}`};
-  border-radius: 4px;
+  border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: fit-content;
-  height: 43px;
+  min-height: 42px;
   min-width: 120px;
 
   ${({ $disabled }) =>
@@ -37,38 +34,41 @@ const OfferingButton = styled.button<{ $disabled?: boolean }>`
 
   &:hover {
     background-color: ${({ theme, $disabled }) =>
-      $disabled ? 'inherit' : theme.stigg.palette.outlinedHoverBackground};
+      $disabled ? theme.stigg.palette.backgroundButton : theme.stigg.palette.outlinedHoverBackground};
   }
 `;
 
-const StyledArrowRight = styled(ArrowRight)`
-  color: ${({ theme }) => theme.stigg.palette.primary};
-  margin-left: 6px;
+const ButtonText = styled(Typography)`
+  margin: 0;
+  font-size: 15px;
 `;
 
-const StyledRestoreIcon = styled(Restore)`
-  margin-left: 6px;
-  color: ${({ theme }) => theme.stigg.palette.primary};
-  path {
-    fill: ${({ theme }) => theme.stigg.palette.primary};
-  }
+const ScheduledUpdateText = styled(Typography)`
+  min-height: 87px;
 `;
 
-const ButtonText = styled(Typography)`
-  margin: 0;
-  font-size: 15px;
+const CancelScheduledUpdateButton = styled.button<{ $disabled?: boolean }>`
+  background: none;
+  border: none;
+  padding: 0;
+  color: ${({ theme }) => theme.stigg.palette.text.secondary};
+
+  text-decoration: underline;
+  cursor: pointer;
 `;
 
 const TrialDaysLeft = styled(Typography)`
-  margin: 0;
-  padding: 16px 0;
+  margin-top: 8px;
+  margin-bottom: 17px;
+  min-height: 20px;
 `;
 
 const ButtonLayout = styled.div`
   display: flex;
   flex-direction: column;
-  margin-top: auto;
+  margin-top: 40px;
   align-self: ${({ theme }) => flexLayoutMapper(theme.stigg.layout.ctaAlignment)};
+  width: 100%;
 `;
 
 type PlanOfferingButtonProps = {
@@ -109,12 +109,10 @@ export function PlanOfferingButton({
   const buttonProps: {
     title: string;
     disabled: boolean;
-    icon: ReactNode | null;
     intentionType: SubscribeIntentionType;
   } = {
     title: customer ? (plan.isLowerThanCurrentPlan ? resolvedDowngrade : resolvedUpgrade) : startNew,
     disabled: false,
-    icon: <StyledArrowRight />,
     intentionType: plan.isLowerThanCurrentPlan
       ? SubscribeIntentionType.DOWNGRADE_PLAN
       : isCustomerOnTrial
@@ -140,7 +138,6 @@ export function PlanOfferingButton({
     ) {
       buttonProps.title = currentPlan;
       buttonProps.disabled = true;
-      buttonProps.icon = null;
     } else {
       buttonProps.title = switchToBillingPeriod(billingPeriod);
       buttonProps.intentionType = SubscribeIntentionType.CHANGE_BILLING_PERIOD;
@@ -154,47 +151,52 @@ export function PlanOfferingButton({
     buttonProps.disabled = false;
     buttonProps.title = cancelScheduledUpdate;
     buttonProps.intentionType = SubscribeIntentionType.CANCEL_SCHEDULED_UPDATES;
-    buttonProps.icon = <StyledRestoreIcon />;
   }
 
   const isDisabled = isLoading || buttonProps.disabled;
   return (
     <>
-      {isNextPlan && scheduledUpdateText && (
-        <Typography
-          color="secondary"
-          variant="body1"
-          style={{ marginBottom: 24 }}
-          className="stigg-paywall-schedule-update-text"
-        >
-          {scheduledUpdateText}
-        </Typography>
-      )}
       <ButtonLayout className="stigg-paywall-plan-button-layout">
-        {plan.isCurrentCustomerPlan && plan.trialDaysLeft && (
-          <TrialDaysLeft className="stigg-trial-days-left-text" variant="h6" color="secondary">
-            <b>{plan.trialDaysLeft} days</b> left on your free trial
-          </TrialDaysLeft>
+        {isNextPlan && scheduledUpdateText ? (
+          <ScheduledUpdateText color="secondary" variant="body1" className="stigg-paywall-schedule-update-text">
+            {scheduledUpdateText}{' '}
+            <CancelScheduledUpdateButton
+              color="secondary"
+              onClick={() => {
+                setIsLoading(true);
+                Promise.resolve(onPlanSelected(buttonProps.intentionType)).finally(() => setIsLoading(false));
+              }}
+            >
+              {buttonProps.title}
+            </CancelScheduledUpdateButton>
+          </ScheduledUpdateText>
+        ) : (
+          <>
+            <OfferingButton
+              className="stigg-paywall-plan-button"
+              data-testid={`paywall-card-cta-${plan.displayName}`}
+              disabled={isDisabled}
+              $disabled={isDisabled}
+              onClick={() => {
+                setIsLoading(true);
+                Promise.resolve(onPlanSelected(buttonProps.intentionType)).finally(() => setIsLoading(false));
+              }}
+            >
+              <ButtonText className="stigg-paywall-plan-button-text" variant="h6" color="primary.main">
+                {buttonProps.title}
+              </ButtonText>
+              {isLoading && <LoadingIndicator color={theme.stigg.palette.text.disabled} loading size={16} />}
+            </OfferingButton>
+
+            <TrialDaysLeft className="stigg-trial-days-left-text" variant="h6" color="secondary">
+              {plan.isCurrentCustomerPlan && plan.trialDaysLeft && (
+                <>
+                  <b>{plan.trialDaysLeft} days</b> left on your free trial
+                </>
+              )}
+            </TrialDaysLeft>
+          </>
         )}
-        <OfferingButton
-          className="stigg-paywall-plan-button"
-          data-testid={`paywall-card-cta-${plan.displayName}`}
-          disabled={isDisabled}
-          $disabled={isDisabled}
-          onClick={() => {
-            setIsLoading(true);
-            Promise.resolve(onPlanSelected(buttonProps.intentionType)).finally(() => setIsLoading(false));
-          }}
-        >
-          <ButtonText className="stigg-paywall-plan-button-text" variant="h6" color="primary.main">
-            {buttonProps.title}
-          </ButtonText>
-          {isLoading ? (
-            <LoadingIndicator color={theme.stigg.palette.text.disabled} loading size={16} />
-          ) : (
-            buttonProps.icon
-          )}
-        </OfferingButton>
       </ButtonLayout>
     </>
   );

package/src/components/paywall/paywallTextOverrides.ts

@@ -41,8 +41,10 @@ export function getResolvedPaywallLocalize(localizeOverride?: DeepPartial<Paywal
       custom: 'Contact us',
       currentPlan: 'Current plan',
       startNew: 'Get started',
-      switchToBillingPeriod: billingPeriod => `Switch to ${billingPeriod.toLocaleLowerCase()}`,
-      cancelScheduledUpdate: 'Cancel update',
+      switchToBillingPeriod: billingPeriod => {
+        return billingPeriod === BillingPeriod.Monthly ? 'Switch to monthly billing' : 'Switch to annual billing';
+      },
+      cancelScheduledUpdate: 'Cancel',
     },
     price: {
       startingAtCaption: 'Starts at',

package/src/components/utils/getPaidPriceText.ts

@@ -35,7 +35,7 @@ export function getPaidPriceText({
       const featureUnit = price.feature?.units || '';
       return {
         price: priceString,
-        unit: `/ ${featureUnit}`,
+        unit: `per ${featureUnit}`,
       };
     }
   }

package/src/components/utils/getSubscriptionScheduleUpdateTexts.tsx

@@ -10,7 +10,7 @@ import { BillingPeriodChangeVariables, UnitAmountChangeVariables } from '../../t
 import { CustomerPortalSubscriptionPriceFragment } from '@stigg/api-client-js/src/generated/sdk';
 import { compact, map } from 'lodash';
 
-const formatDate = (date: string) => moment.utc(date).format('MMM Do, yyyy');
+const formatDate = (date: string) => moment.utc(date).format('MMMM Do, yyyy');
 
 type GetSubscriptionScheduleUpdateTextsProps = {
   scheduledUpdate: CustomerPortalSubscriptionScheduledUpdateDataFragment | undefined;
@@ -40,10 +40,10 @@ export function getSubscriptionScheduleUpdateTexts({
       const line1 = (
         <>
           Your subscription will be downgraded to the <b>{scheduledUpdate.targetPackage?.displayName} plan</b>{' '}
-          {shouldShowDate ? <>on {formatDate(scheduledUpdate.scheduledExecutionTime)}</> : postfix}
+          {shouldShowDate ? <>on {formatDate(scheduledUpdate.scheduledExecutionTime)}</> : postfix}.
         </>
       );
-      const line2 = `Until then you still have access to your current plan`;
+      const line2 = `Until then you still have access to your current plan.`;
 
       return { line1, line2 };
     }
@@ -53,7 +53,7 @@ export function getSubscriptionScheduleUpdateTexts({
       const line1 = (
         <>
           Your billing cycle will change to <b>{variables.billingPeriod?.toLocaleLowerCase()}</b>{' '}
-          {withDate ? <>on {formatDate(scheduledUpdate.scheduledExecutionTime)}</> : postfix}
+          {withDate ? <>on {formatDate(scheduledUpdate.scheduledExecutionTime)}</> : postfix}.
         </>
       );
 
@@ -69,11 +69,11 @@ export function getSubscriptionScheduleUpdateTexts({
       const line1 = (
         <>
           Your subscription will be updated to <b>{variables.newUnitAmount}</b> {unitsText}{' '}
-          {withDate ? <>on {formatDate(scheduledUpdate.scheduledExecutionTime)}</> : postfix}
+          {withDate ? <>on {formatDate(scheduledUpdate.scheduledExecutionTime)}</> : postfix}.
         </>
       );
 
-      const line2 = `Until then you still have access to your current ${featureUnits} count`;
+      const line2 = `Until then you still have access to your current ${featureUnits} count.`;
 
       return { line1, line2 };
     }

package/src/theme/getResolvedTheme.ts

@@ -21,6 +21,7 @@ export const getResolvedTheme = (customizedTheme?: CustomizedTheme): StiggTheme
       backgroundPaper: '#FFFFFF',
       backgroundHighlight: '#F5F6F9',
       backgroundSection: primaryColor.alpha(0.1).toString(),
+      backgroundButton: primaryColor.alpha(0.08).toString(),
       outlinedBorder: '#C4CBDD',
       outlinedRestingBorder: primaryColor.alpha(0.5).toString(),
       outlinedHoverBackground: primaryColor.lightness(95).hex(),
@@ -49,7 +50,8 @@ export const getResolvedTheme = (customizedTheme?: CustomizedTheme): StiggTheme
     },
     shadows: {
       light: '0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12)',
-      popover: '0px 4px 5px -2px rgba(0, 30, 108, 0.2), 0px 7px 10px 1px rgba(0, 30, 108, 0.14), 0px 2px 16px 1px rgba(0, 30, 108, 0.12)',
+      popover:
+        '0px 4px 5px -2px rgba(0, 30, 108, 0.2), 0px 7px 10px 1px rgba(0, 30, 108, 0.14), 0px 2px 16px 1px rgba(0, 30, 108, 0.12)',
     },
     border: {
       radius: '10px',

package/src/theme/types.ts

@@ -11,6 +11,7 @@ export type StiggTheme = {
     backgroundPaper: string;
     backgroundHighlight: string;
     backgroundSection: string;
+    backgroundButton: string;
     outlinedBorder: string;
     outlinedRestingBorder: string;
     outlinedHoverBackground: string;