@stigg/react-sdk 7.7.1-beta.1 → 7.8.0

package/src/components/customerPortal/hooks/useCustomerPortal.ts

@@ -0,0 +1,39 @@
+import { CustomerPortal } from '@stigg/js-client-sdk';
+import { useEffect, useState } from 'react';
+import logger from '../../../services/logger';
+import { useStiggContext } from '../../../hooks/useStiggContext';
+
+type UseCustomerPortalProps = {
+  resourceId?: string;
+  productId?: string;
+};
+
+export function useCustomerPortal({ resourceId, productId }: UseCustomerPortalProps) {
+  const { stigg, customerPortalUpdatedAt } = useStiggContext();
+  const [isLoading, setIsLoading] = useState(false);
+  const [customerPortal, setCustomerPortal] = useState<CustomerPortal | null>();
+
+  useEffect(() => {
+    const loadCustomerPortal = async () => {
+      if (stigg.isCustomerLoaded) {
+        try {
+          setIsLoading(true);
+          const customerPortalData = await stigg.getCustomerPortal({ resourceId, productId });
+          setCustomerPortal(customerPortalData);
+        } catch (err) {
+          logger.error(`Failed to load customer portal ${(err as any)?.message}`, err as Error);
+        } finally {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    void loadCustomerPortal();
+  }, [stigg, stigg.isCustomerLoaded, customerPortalUpdatedAt, resourceId, productId]);
+
+  return {
+    customerPortal,
+    showWatermark: stigg.getShowWatermark(),
+    isLoading,
+  };
+}

package/src/components/customerPortal/index.ts

@@ -0,0 +1,16 @@
+export { CustomerPortal } from './CustomerPortal';
+export type { CustomerPortalProps, CustomerPortalSection } from './CustomerPortal';
+export { SubscriptionsOverview } from './subscriptionOverview/SubscriptionsOverview';
+export type { SubscriptionsOverviewProps } from './subscriptionOverview/SubscriptionsOverview';
+export { PaymentDetailsSection } from './billing/PaymentDetailsSection';
+export { InvoicesSection } from './billing/InvoicesSection';
+export { CustomerUsageData } from './usage/CustomerUsageData';
+export type { CustomerUsageDataProps } from './usage/CustomerUsageData';
+export { AddonsList } from './subscriptionOverview/tabs/AddonsList';
+export { Promotions } from './subscriptionOverview/tabs/Promotions';
+export { CustomerPortalProvider } from './CustomerPortalProvider';
+export { useCustomerPortalContext, CustomerPortalContext, useCheckContextExists } from './CustomerPortalContext';
+export type { CustomerPortalContextValue } from './CustomerPortalContext';
+export type { CustomerPortalLocalization } from './customerPortalTextOverrides';
+export type { CustomerPortalTheme } from './customerPortalTheme';
+export * from './types';

package/src/components/customerPortal/paywall/CustomerPortalPaywall.style.ts

@@ -0,0 +1,33 @@
+import styled from '@utils/style';
+import { STIGG_WATERMARK_CLASSNAME } from '../../common/PoweredByStigg';
+import { SectionContainer } from '../common/SectionContainer';
+
+export const CustomerPortalPaywallLayout = styled(SectionContainer)<{
+  $backgroundColor: string;
+  $borderColor: string;
+}>`
+  position: relative;
+
+  .stigg-paywall-layout {
+    width: 100%;
+  }
+
+  .stigg-paywall-plans-layout {
+    flex-wrap: nowrap;
+    width: 100%;
+    overflow-x: auto;
+    justify-content: unset;
+    padding: 10px 0px 0px 0px;
+  }
+
+  .stigg-paywall-plans-layout .stigg-plan-offering-container:first-of-type {
+    margin-left: auto;
+  }
+  .stigg-paywall-plans-layout .stigg-plan-offering-container:last-child {
+    margin-right: auto;
+  }
+
+  .${STIGG_WATERMARK_CLASSNAME} {
+    display: none;
+  }
+`;

package/src/components/customerPortal/paywall/CustomerPortalPaywall.tsx

@@ -0,0 +1,36 @@
+import { forwardRef, ReactNode } from 'react';
+import { CustomerPortalTheme } from '../customerPortalTheme';
+import { CustomerPortalPaywallLayout } from './CustomerPortalPaywall.style';
+import { SectionTitle } from '../common/SectionTitle';
+import { SectionHeader } from '../common/SectionHeader';
+
+type CustomerPortalPaywallProps = {
+  paywallComponent?: ReactNode;
+  theme: CustomerPortalTheme;
+  title: string;
+  isLoading: boolean;
+};
+
+export const CustomerPortalPaywall = forwardRef<HTMLDivElement, CustomerPortalPaywallProps>(
+  ({ paywallComponent, theme, title, isLoading }, ref) => {
+    if (!paywallComponent) {
+      return null;
+    }
+
+    return (
+      <CustomerPortalPaywallLayout
+        className="stigg-customer-portal-paywall-section"
+        ref={ref}
+        $backgroundColor={theme.backgroundColor}
+        $borderColor={theme.borderColor}>
+        <SectionHeader className="stigg-customer-portal-paywall-header">
+          <SectionTitle isLoading={isLoading} className="stigg-customer-portal-paywall-section-title" title={title} />
+        </SectionHeader>
+
+        {paywallComponent}
+      </CustomerPortalPaywallLayout>
+    );
+  },
+);
+
+CustomerPortalPaywall.displayName = 'CustomerPortalPaywall';

package/src/components/customerPortal/subscriptionOverview/ContactCustomerSupport.tsx

@@ -0,0 +1,50 @@
+import styled from '@utils/style';
+import Button from '@mui/material/Button';
+import { Typography } from '../../common/Typography';
+
+const ContactCustomerSupportLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  gap: 8px;
+`;
+
+const ContactSupportButton = styled(Button)`
+  width: fit-content;
+  &.MuiButton-root {
+    padding: 0;
+    &:hover {
+      background: none;
+    }
+  }
+`;
+
+type ContactCustomerSupportProps = {
+  onContactSupport?: () => void;
+  label: string;
+  linkLabel: string;
+};
+
+export function ContactCustomerSupport({ onContactSupport, label, linkLabel }: ContactCustomerSupportProps) {
+  const contactSupportText = (
+    <Typography color={onContactSupport ? 'primary.main' : 'secondary'}>{linkLabel}</Typography>
+  );
+  return (
+    <ContactCustomerSupportLayout className="stigg-contact-support-layout">
+      <Typography className="stigg-contact-support-label" color="secondary">
+        {label}
+      </Typography>
+      {onContactSupport ? (
+        <ContactSupportButton
+          className="stigg-contact-support-button"
+          style={{ textTransform: 'none' }}
+          variant="text"
+          onClick={onContactSupport}>
+          {contactSupportText}
+        </ContactSupportButton>
+      ) : (
+        contactSupportText
+      )}
+    </ContactCustomerSupportLayout>
+  );
+}

package/src/components/customerPortal/subscriptionOverview/SubscriptionOverviewLoader.tsx

@@ -0,0 +1,28 @@
+import styled from '@utils/style';
+import Skeleton from 'react-loading-skeleton';
+import { useIsScreenWiderThan } from '../../hooks/useIsScreenWiderThan';
+
+const SkeletonLayout = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+`;
+
+const SkeletonLayoutLeft = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+`;
+
+export function SubscriptionOverviewLoader() {
+  const isScreenWiderThanMd = useIsScreenWiderThan('md');
+  return (
+    <SkeletonLayout className="stigg-subscription-overview-skeleton-layout">
+      <SkeletonLayoutLeft>
+        <Skeleton width={120} />
+        <Skeleton width={120} />
+      </SkeletonLayoutLeft>
+      <Skeleton width={isScreenWiderThanMd ? 295 : 260} height={193} />
+    </SkeletonLayout>
+  );
+}

package/src/components/customerPortal/subscriptionOverview/SubscriptionsOverview.tsx

@@ -0,0 +1,106 @@
+import { CustomerPortalSubscription, PricingType, SubscriptionStatus } from '@stigg/js-client-sdk';
+import { SubscriptionsOverviewHeader } from './SubscriptionsOverviewHeader';
+import { SubscriptionTabs } from './tabs/SubscriptionTabs';
+import { useCustomerPortalContext } from '../CustomerPortalContext';
+import { SubscriptionOverviewLoader } from './SubscriptionOverviewLoader';
+import { CustomerPortalSection } from '../CustomerPortal';
+import { SubscriptionScheduledUpdatesAlert } from './subscriptionScheduledUpdates/SubscriptionScheduledUpdatesAlert';
+import { SectionContainer } from '../common/SectionContainer';
+import { UpcomingBilling } from './upcomingBilling/UpcomingBilling';
+import { SubscriptionView } from './subscriptionView/SubscriptionView';
+import { ChargeList } from './charges/ChargeList';
+import { OnBuyMoreCallbackFn } from '../types';
+import { OnManageClick } from '../CustomerPortalContainer';
+
+export type SubscriptionsOverviewProps = {
+  onManageSubscription: OnManageClick;
+  onBuyMore?: OnBuyMoreCallbackFn;
+  onCancelScheduledUpdates?: (subscription: CustomerPortalSubscription) => void;
+  onContactSupport?: () => void;
+  hiddenSections?: CustomerPortalSection[];
+  cancelScheduledUpdatesButtonTitle: string;
+};
+
+export function SubscriptionsOverview({
+  onManageSubscription,
+  onBuyMore,
+  onCancelScheduledUpdates,
+  onContactSupport,
+  hiddenSections,
+  cancelScheduledUpdatesButtonTitle,
+}: SubscriptionsOverviewProps) {
+  const { customerPortal, isLoading, textOverrides, theme } = useCustomerPortalContext();
+  const isLoadingData = isLoading || !customerPortal;
+  const { subscriptions, entitlements, canUpgradeSubscription } = customerPortal || {};
+
+  const activeSubscription = subscriptions?.find(({ status }) => status === SubscriptionStatus.Active);
+  const trialSubscription = subscriptions?.find(({ status }) => status === SubscriptionStatus.InTrial);
+  const hasCustomSubscription = activeSubscription?.pricingType === PricingType.Custom;
+  const mainSubscription = activeSubscription || trialSubscription;
+
+  return (
+    <SectionContainer
+      className="stigg-customer-portal-subscriptions-overview"
+      $backgroundColor={theme.backgroundColor}
+      $borderColor={theme.borderColor}>
+      {!isLoadingData && activeSubscription && activeSubscription.scheduledUpdates && (
+        <SubscriptionScheduledUpdatesAlert
+          theme={theme}
+          subscription={activeSubscription}
+          onCancelScheduledUpdates={onCancelScheduledUpdates}
+          cancelScheduledUpdatesButtonTitle={cancelScheduledUpdatesButtonTitle}
+        />
+      )}
+
+      {isLoadingData || !mainSubscription ? (
+        <SubscriptionOverviewLoader />
+      ) : (
+        <div
+          className="stigg-overview-layout"
+          style={{ display: 'flex', alignItems: 'flex-start', gap: 64, flexWrap: 'wrap' }}>
+          <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+            <SubscriptionsOverviewHeader
+              onManageSubscription={onManageSubscription}
+              hideManageButton={hasCustomSubscription}
+              textOverrides={textOverrides}
+            />
+
+            <SubscriptionView
+              mainSubscription={mainSubscription}
+              trialSubscription={trialSubscription}
+              theme={theme}
+              onManageSubscription={onManageSubscription}
+            />
+
+            {activeSubscription && entitlements && (
+              <ChargeList
+                subscription={activeSubscription}
+                entitlements={entitlements}
+                onBuyMore={onBuyMore}
+                onManageSubscription={onManageSubscription}
+                canUpgradeSubscription={!!canUpgradeSubscription}
+                hasCustomSubscription={hasCustomSubscription}
+              />
+            )}
+
+            <SubscriptionTabs
+              customerPortal={customerPortal}
+              hiddenSections={hiddenSections}
+              textOverrides={textOverrides}
+              theme={theme}
+            />
+          </div>
+
+          <div style={{ display: 'flex', flexDirection: 'column', width: 319, gap: 24 }}>
+            <UpcomingBilling
+              subscription={mainSubscription}
+              theme={theme}
+              onContactSupport={onContactSupport}
+              textOverrides={textOverrides}
+            />
+          </div>
+        </div>
+      )}
+    </SectionContainer>
+  );
+}

package/src/components/customerPortal/subscriptionOverview/SubscriptionsOverviewHeader.tsx

@@ -0,0 +1,48 @@
+import styled from '@utils/style';
+import { StyledButton } from '../common/StyledButton';
+import { Typography } from '../../common/Typography';
+import EditIcon from '../../../assets/edit-icon.svg';
+import { CustomerPortalLocalization } from '../customerPortalTextOverrides';
+import { SectionHeader } from '../common/SectionHeader';
+import { SectionTitle } from '../common/SectionTitle';
+import { OnManageClick } from '../CustomerPortalContainer';
+import { CustomerPortalIntentionType } from '../types';
+
+type SubscriptionsOverviewHeaderProps = {
+  onManageSubscription: OnManageClick;
+  hideManageButton: boolean;
+  textOverrides: CustomerPortalLocalization;
+};
+
+const StyledEditIcon = styled(EditIcon)`
+  path {
+    stroke: ${({ theme }) => theme.stigg.palette.primary};
+  }
+`;
+
+export function SubscriptionsOverviewHeader({
+  onManageSubscription,
+  hideManageButton,
+  textOverrides,
+}: SubscriptionsOverviewHeaderProps) {
+  return (
+    <SectionHeader className="stigg-customer-portal-overview-header" $disableMargin>
+      <SectionTitle title="Subscription" className="stigg-overview-title" />
+      {!hideManageButton && (
+        <StyledButton
+          className="stigg-manage-subscription-button"
+          variant="outlined"
+          onClick={() => onManageSubscription({ intentionType: CustomerPortalIntentionType.MANAGE_SUBSCRIPTION })}>
+          <StyledEditIcon className="stigg-manage-subscription-button-image" />
+          <Typography
+            className="stigg-manage-subscription-button-text"
+            color="primary.main"
+            style={{ marginLeft: '8px' }}
+            variant="body1">
+            {textOverrides?.manageSubscription}
+          </Typography>
+        </StyledButton>
+      )}
+    </SectionHeader>
+  );
+}

package/src/components/customerPortal/subscriptionOverview/charges/ChargeItem.tsx

@@ -0,0 +1,74 @@
+import { Currency, CustomerPortalEntitlement } from '@stigg/js-client-sdk';
+import { FeatureFragment } from '@stigg/api-client-js/src/generated/sdk';
+import { Typography } from '../../../common/Typography';
+import { currencyPriceFormatter } from '../../../utils/currencyUtils';
+import { FeatureUsageProgressBar } from '../../usage/featureUsage/FeatureUsageProgressBar';
+import { LongText } from '../../../common/LongText';
+import { EntitlementCtaButton } from '../../usage/featureUsage/EntitlementCTAButton';
+import { OnBuyMoreCallbackFn } from '../../types';
+import { OnManageClick } from '../../CustomerPortalContainer';
+
+export type UsageBasedChargeProps = {
+  entitlement: Exclude<CustomerPortalEntitlement, 'feature'>;
+  feature: FeatureFragment;
+  amount: number;
+  blockSize?: number | null;
+  currency: Currency;
+  onBuyMore?: OnBuyMoreCallbackFn;
+  onManageSubscription: OnManageClick;
+  canUpgradeSubscription: boolean;
+  hasCustomSubscription: boolean;
+  hideChargePrice?: boolean;
+};
+
+export function ChargeItem({
+  amount,
+  currency,
+  blockSize,
+  entitlement,
+  feature,
+  hideChargePrice,
+  onBuyMore,
+  onManageSubscription,
+  canUpgradeSubscription,
+  hasCustomSubscription,
+}: UsageBasedChargeProps) {
+  return (
+    <div
+      className={`stigg-charge-list-item stigg-charge-list-item-${entitlement.feature!.refId}`}
+      style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
+        <div style={{ display: 'flex', gap: 12 }}>
+          <LongText variant="body1" color="primary">
+            {feature.displayName}
+          </LongText>
+          {!hideChargePrice && (
+            <LongText variant="body1" color="secondary">
+              {currencyPriceFormatter({ amount, currency })} per {blockSize ? `${blockSize} ` : ''}
+              {blockSize ? feature.featureUnitsPlural : feature.featureUnits}
+            </LongText>
+          )}
+        </div>
+
+        <div style={{ display: 'flex', gap: 12 }}>
+          <EntitlementCtaButton
+            entitlement={entitlement}
+            feature={feature}
+            canBuyMore
+            onBuyMore={onBuyMore}
+            onManageSubscription={onManageSubscription}
+            canUpgradeSubscription={canUpgradeSubscription}
+            hasCustomSubscription={hasCustomSubscription}
+          />
+          <Typography variant="body1" color="primary" style={{ whiteSpace: 'nowrap' }}>
+            {entitlement.hasUnlimitedUsage
+              ? entitlement.currentUsage?.toLocaleString()
+              : `${entitlement.currentUsage?.toLocaleString()} of ${entitlement.usageLimit?.toLocaleString()}`}
+          </Typography>
+        </div>
+      </div>
+
+      <FeatureUsageProgressBar entitlement={entitlement} />
+    </div>
+  );
+}

package/src/components/customerPortal/subscriptionOverview/charges/ChargeList.tsx

@@ -0,0 +1,65 @@
+import { BillingModel, CustomerPortalEntitlement, CustomerPortalSubscription } from '@stigg/js-client-sdk';
+import { keyBy } from 'lodash';
+import { ChargeItem } from './ChargeItem';
+import { OnBuyMoreCallbackFn } from '../../types';
+import { OnManageClick } from '../../CustomerPortalContainer';
+
+export type ChargesProps = {
+  subscription: CustomerPortalSubscription;
+  entitlements: CustomerPortalEntitlement[];
+  onBuyMore?: OnBuyMoreCallbackFn;
+  onManageSubscription: OnManageClick;
+  canUpgradeSubscription: boolean;
+  hasCustomSubscription: boolean;
+};
+
+export function ChargeList({
+  subscription,
+  entitlements,
+  onBuyMore,
+  onManageSubscription,
+  hasCustomSubscription,
+  canUpgradeSubscription,
+}: ChargesProps) {
+  const entitlementByFeature = keyBy(entitlements, 'feature.refId');
+
+  const filteredSubscriptionPrices = subscription.prices.filter(
+    ({ feature, price }) => !!feature && entitlementByFeature[feature.refId] && !!price,
+  );
+
+  if (!filteredSubscriptionPrices.length) {
+    return null;
+  }
+
+  return (
+    <div className="stigg-charge-list" style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 32 }}>
+      {filteredSubscriptionPrices.map(({ feature, price, blockSize, billingModel }) => {
+        if (!feature || !price) {
+          return null;
+        }
+
+        const entitlement = entitlementByFeature[feature.refId];
+
+        if (!entitlement || !entitlement.feature) {
+          return null;
+        }
+
+        return (
+          <ChargeItem
+            key={feature.refId}
+            entitlement={entitlement}
+            feature={entitlement.feature}
+            amount={price.amount}
+            blockSize={blockSize}
+            currency={price.currency}
+            hideChargePrice={billingModel === BillingModel.PerUnit}
+            onBuyMore={onBuyMore}
+            onManageSubscription={onManageSubscription}
+            canUpgradeSubscription={canUpgradeSubscription}
+            hasCustomSubscription={hasCustomSubscription}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/src/components/customerPortal/subscriptionOverview/subscriptionScheduledUpdates/SubscriptionScheduledUpdateRow.tsx

@@ -0,0 +1,110 @@
+import { ArrowDown } from 'react-feather';
+import Grid from '@mui/material/Grid';
+import {
+  CustomerPortalSubscription,
+  CustomerPortalSubscriptionScheduledUpdateDataFragment,
+  SubscriptionScheduleType,
+  BillingPeriod,
+} from '@stigg/js-client-sdk';
+import { compact } from 'lodash';
+import { Typography } from '../../../common/Typography';
+import { BillingPeriodChangeVariables, UnitAmountChangeVariables } from '../../../../types';
+import { FeatureType } from '../types/customerPortal.types';
+
+export type SubscriptionScheduledUpdateRowProps = {
+  scheduleUpdate: CustomerPortalSubscriptionScheduledUpdateDataFragment;
+};
+
+function SubscriptionScheduledUpdateDowngradeRow({ scheduleUpdate }: SubscriptionScheduledUpdateRowProps) {
+  const { targetPackage } = scheduleUpdate;
+  return (
+    <Grid container alignItems="center">
+      <Grid>
+        <ArrowDown color="#D94052" height={20} className="stigg-scheduled-updates-arrow-down" />
+      </Grid>
+      <Grid item>
+        <Typography className="stigg-scheduled-updates-description" variant="body1">
+          Downgrade to the <b>{targetPackage?.displayName}</b> plan
+        </Typography>
+      </Grid>
+    </Grid>
+  );
+}
+
+function SubscriptionScheduledUpdateBillingPeriodChangeRow({ scheduleUpdate }: SubscriptionScheduledUpdateRowProps) {
+  const { scheduleVariables } = scheduleUpdate;
+  const { billingPeriod } = scheduleVariables as BillingPeriodChangeVariables;
+  const currentBillingPeriod = billingPeriod === BillingPeriod.Monthly ? 'annually' : 'monthly';
+  const nextBillingPeriod = billingPeriod === BillingPeriod.Monthly ? 'monthly' : 'annually';
+
+  return (
+    <Grid container alignItems="center">
+      <Grid>
+        <ArrowDown color="#D94052" height={20} className="stigg-scheduled-updates-arrow-down" />
+      </Grid>
+      <Grid item>
+        <Typography className="stigg-scheduled-updates-description" variant="body1">
+          Change from an {currentBillingPeriod} to a <b>{nextBillingPeriod}</b> billing cycle
+        </Typography>
+      </Grid>
+    </Grid>
+  );
+}
+
+function SubscriptionScheduledUpdateUnitQuantityChangeRow({
+  subscription,
+  scheduleUpdate,
+}: SubscriptionScheduledUpdateRowProps & { subscription: CustomerPortalSubscription }) {
+  const { scheduleVariables } = scheduleUpdate;
+  const { newUnitAmount, featureId } = scheduleVariables as UnitAmountChangeVariables;
+  const features: FeatureType[] = compact(subscription.prices.map(({ feature }) => feature));
+  const feature = features.find((f) => f.id === featureId);
+
+  if (!feature) {
+    return null;
+  }
+
+  const { featureUnits, featureUnitsPlural } = feature;
+  const newQuantityUnits = newUnitAmount === 1 ? featureUnits : featureUnitsPlural;
+
+  return (
+    <Grid container alignItems="flex-start" flexWrap="nowrap">
+      <Grid>
+        <ArrowDown color="#D94052" height={20} className="stigg-scheduled-updates-arrow-down" />
+      </Grid>
+      <Grid item>
+        <Typography className="stigg-scheduled-updates-description" variant="body1">
+          Reduce the <b>{featureUnits}</b> quantity to {newUnitAmount} {newQuantityUnits}
+        </Typography>
+      </Grid>
+    </Grid>
+  );
+}
+
+export function SubscriptionScheduledUpdateRow({
+  scheduleUpdate,
+  subscription,
+}: {
+  scheduleUpdate: CustomerPortalSubscriptionScheduledUpdateDataFragment;
+  subscription: CustomerPortalSubscription;
+}) {
+  switch (scheduleUpdate.subscriptionScheduleType) {
+    case SubscriptionScheduleType.Downgrade: {
+      return <SubscriptionScheduledUpdateDowngradeRow scheduleUpdate={scheduleUpdate} />;
+    }
+
+    case SubscriptionScheduleType.BillingPeriod: {
+      return <SubscriptionScheduledUpdateBillingPeriodChangeRow scheduleUpdate={scheduleUpdate} />;
+    }
+
+    case SubscriptionScheduleType.UnitAmount: {
+      return (
+        <SubscriptionScheduledUpdateUnitQuantityChangeRow scheduleUpdate={scheduleUpdate} subscription={subscription} />
+      );
+    }
+
+    default: {
+      return null;
+    }
+  }
+}