@stigg/react-sdk 4.2.3 → 4.3.0-beta.0

package/src/components/checkout/steps/payment/stripe/useSubmit.ts

@@ -0,0 +1,100 @@
+import { ApplySubscription, ApplySubscriptionResults } from '@stigg/js-client-sdk';
+import { useElements, useStripe } from '@stripe/react-stripe-js';
+
+import { useStiggContext } from '../../../../..';
+import { useCheckoutModel } from '../../../hooks';
+import { usePaymentStepModel } from '../../../hooks/usePaymentStepModel';
+import { useSubscriptionState } from '../../../hooks/useSubscriptionState';
+import { CheckoutContainerProps, CheckoutResult } from '../../../CheckoutContainer';
+import { handleNewPaymentMethod, handleStripeFormValidations, handleStripeNextAction } from './stripe.utils';
+
+export type HandleSubmitResult = { results?: ApplySubscriptionResults; errorMessage?: string } | undefined;
+
+export function useSubmit({
+  onCheckout,
+  onCheckoutCompleted,
+}: Pick<CheckoutContainerProps, 'onCheckout' | 'onCheckoutCompleted'>) {
+  const { stigg } = useStiggContext();
+  const { useNewPaymentMethod } = usePaymentStepModel();
+  const subscriptionState = useSubscriptionState();
+  const { checkoutState, widgetState, setWidgetLoading } = useCheckoutModel();
+  const { setupSecret: setupIntentClientSecret } = checkoutState || {};
+  const stripe = useStripe();
+  const elements = useElements();
+
+  const handleSubmit = async (e: any): Promise<HandleSubmitResult> => {
+    e.preventDefault();
+
+    if (!subscriptionState) {
+      return;
+    }
+
+    let checkoutResults: ApplySubscriptionResults | undefined;
+    let errorMessage: string | undefined;
+    let paymentMethodId: string | undefined;
+
+    setWidgetLoading(true);
+
+    if (useNewPaymentMethod) {
+      const { success } = await handleStripeFormValidations({ elements });
+      if (!success) {
+        setWidgetLoading(false);
+        return;
+      }
+
+      const paymentMethodResults = await handleNewPaymentMethod({ elements, stripe, setupIntentClientSecret });
+      if (!paymentMethodResults.success) {
+        errorMessage = paymentMethodResults.errorMessage;
+      }
+
+      paymentMethodId = paymentMethodResults.paymentMethodId;
+    }
+
+    if (!errorMessage) {
+      const checkoutParams: ApplySubscription = { ...subscriptionState, paymentMethodId };
+
+      const checkoutAction = async (): Promise<CheckoutResult> => {
+        try {
+          const applySubscriptionResults = await stigg.applySubscription(checkoutParams);
+          const nextActionResults = await handleStripeNextAction({
+            applySubscriptionResults,
+            stripe,
+          });
+
+          checkoutResults = nextActionResults;
+          if (nextActionResults.errorMessage) {
+            errorMessage = nextActionResults.errorMessage;
+          }
+
+          return { success: !nextActionResults.errorMessage, errorMessage: nextActionResults.errorMessage };
+        } catch (e) {
+          console.error(e);
+          errorMessage = (e as any)?.message;
+          return { success: false, errorMessage };
+        }
+      };
+
+      if (onCheckout) {
+        const externalCheckoutResults = await onCheckout({ checkoutParams, checkoutAction });
+        if (!externalCheckoutResults.success && externalCheckoutResults.errorMessage) {
+          errorMessage = externalCheckoutResults.errorMessage;
+        }
+      } else {
+        await checkoutAction();
+      }
+    }
+
+    setWidgetLoading(false);
+
+    if (onCheckoutCompleted) {
+      await onCheckoutCompleted({
+        success: !errorMessage && !!checkoutResults?.subscription,
+        error: errorMessage,
+      });
+    }
+
+    return { results: checkoutResults, errorMessage };
+  };
+
+  return { handleSubmit, isLoading: !!widgetState?.isLoading };
+}

package/src/components/checkout/steps/plan/BillingPeriodPicker.style.tsx

@@ -0,0 +1,46 @@
+import styled from '@emotion/styled/macro';
+import { Box, Chip } from '@mui/material';
+
+export const BillingPeriodPickerContainer = styled(Box)`
+  padding: 16px 0;
+`;
+
+export const BillingPeriodButton = styled.button<{ $isActive?: boolean; $disabled?: boolean }>`
+  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 80px;
+  border-radius: 10px;
+  border: ${({ theme, $isActive }) =>
+    `1px solid ${$isActive ? theme.stigg.palette.outlinedRestingBorder : theme.stigg.palette.outlinedBorder}`};
+  background: ${({ $isActive }) => ($isActive ? '#e5f2ff' : '#fff')};
+  text-transform: none;
+  text-align: start;
+
+  &.MuiButton-root {
+    padding: 0 16px 0 8px;
+    &:hover {
+      background: none;
+    }
+  }
+`;
+
+export const BillingPeriodOptions = styled(Box)`
+  display: flex;
+  gap: 16px;
+  margin-top: 16px;
+`;
+
+export const BillingPeriodPrice = styled.div`
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+`;
+
+export const DiscountChip = styled(Chip)`
+  & .MuiChip-label {
+    font-size: 12px;
+  }
+`;

package/src/components/checkout/steps/plan/BillingPeriodPicker.tsx

@@ -0,0 +1,63 @@
+import { partition } from 'lodash';
+import React from 'react';
+import { FontWeight } from 'styled-typography';
+
+import { Box, Radio } from '@mui/material';
+import { BillingPeriod, Plan } from '@stigg/js-client-sdk';
+
+import { Typography } from '../../../common/Typography';
+import { formatBillingPeriod } from '../../formatting';
+import { usePlanStepModel } from '../../hooks/usePlanStepModel';
+import { BillingPeriodButton, BillingPeriodOptions, BillingPeriodPickerContainer } from './BillingPeriodPicker.style';
+import { CheckoutLocalization } from '../../textOverrides';
+
+const BillingPeriodOption = ({ billingPeriod }: { billingPeriod: BillingPeriod }) => {
+  const { billingPeriod: selectedBillingPeriod, setBillingPeriod } = usePlanStepModel();
+  const isActive = selectedBillingPeriod === billingPeriod;
+
+  return (
+    <BillingPeriodButton onClick={() => setBillingPeriod(billingPeriod)} $isActive={isActive}>
+      <Radio
+        checked={isActive}
+        onChange={() => setBillingPeriod(billingPeriod)}
+        value={billingPeriod}
+        inputProps={{ 'aria-label': formatBillingPeriod(billingPeriod) }}
+      />
+
+      <Box>
+        <Typography variant="h6" color="primary" fontWeight={FontWeight.Medium}>
+          {formatBillingPeriod(billingPeriod)}
+        </Typography>
+      </Box>
+    </BillingPeriodButton>
+  );
+};
+
+type BillingPeriodPickerProps = {
+  plan?: Plan;
+  checkoutLocalization: CheckoutLocalization;
+};
+
+export const BillingPeriodPicker = ({ plan, checkoutLocalization }: BillingPeriodPickerProps) => {
+  const [monthlyPrices, annualPrices] = partition(
+    plan?.pricePoints,
+    (price) => price.billingPeriod === BillingPeriod.Monthly,
+  );
+
+  return (
+    <BillingPeriodPickerContainer>
+      <Typography variant="h6" color="primary" fontWeight={FontWeight.Medium}>
+        {checkoutLocalization.billingPeriodsTitle}
+      </Typography>
+
+      <BillingPeriodOptions>
+        {!!monthlyPrices?.length && (
+          <BillingPeriodOption key={BillingPeriod.Monthly} billingPeriod={BillingPeriod.Monthly} />
+        )}
+        {!!annualPrices?.length && (
+          <BillingPeriodOption key={BillingPeriod.Annually} billingPeriod={BillingPeriod.Annually} />
+        )}
+      </BillingPeriodOptions>
+    </BillingPeriodPickerContainer>
+  );
+};

package/src/components/checkout/steps/plan/CheckoutChargeList.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+
+import styled from '@emotion/styled';
+import { Box } from '@mui/material';
+import { BillableFeatureInput } from '@stigg/api-client-js/src/generated/sdk';
+import { BillingModel, BillingPeriod, Plan, Price, PriceTierFragment } from '@stigg/js-client-sdk';
+
+import { Typography } from '../../../common/Typography';
+import { useChargesSort } from '../../../hooks/useChargeSort';
+import { calculateUnitQuantityText } from '../../../paywall/utils/calculateUnitQuantityText';
+import { currencyPriceFormatter } from '../../../utils/currencyUtils';
+import { InputField } from '../../components';
+import { usePlanStepModel } from '../../hooks';
+import { TiersSelectContainer } from '../../../common/TiersSelectContainer';
+import { getPriceFeatureUnit, getTierByQuantity } from '../../../utils/priceTierUtils';
+import { getValidPriceQuantity } from '../../../utils/priceUtils';
+
+export type UsePlanStepModel = ReturnType<typeof usePlanStepModel>;
+
+type CheckoutChargeListProps = {
+  plan?: Plan;
+  billingPeriod: BillingPeriod;
+};
+
+const StyledPlanCharge = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 60px;
+  margin-top: 16px;
+`;
+
+export function PlanCharge({
+  charge,
+  setBillableFeature,
+  billableFeature,
+}: {
+  charge: Price;
+  billableFeature?: BillableFeatureInput;
+  setBillableFeature: UsePlanStepModel['setBillableFeature'];
+}) {
+  const featureId = charge.feature?.featureId;
+  const isBaseCharge = !featureId;
+  const isPayAsYouGo = charge.pricingModel === BillingModel.UsageBased;
+  const displayName = isBaseCharge ? 'Base charge' : charge.feature?.displayName;
+  const hasQuantityRestrictions = !!(charge?.minUnitQuantity || charge?.maxUnitQuantity);
+
+  const handleQuantityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (isBaseCharge || !featureId) return;
+
+    const value = event?.target?.value ? Number(event?.target?.value) : charge.minUnitQuantity || 1;
+    const quantity = getValidPriceQuantity(charge, value || 1);
+
+    setBillableFeature(featureId, quantity);
+  };
+
+  let chargeRow;
+
+  if (isBaseCharge || isPayAsYouGo) {
+    const formattedAmount = currencyPriceFormatter({
+      amount: charge.amount!,
+      currency: charge.currency,
+      locale: 'en-us',
+    });
+
+    chargeRow = `${formattedAmount}`;
+    if (isPayAsYouGo) {
+      chargeRow += ' / unit';
+    }
+  } else if (charge.isTieredPrice) {
+    const tier = getTierByQuantity(charge.tiers!, billableFeature!.quantity || 1);
+    chargeRow = (
+      <TiersSelectContainer
+        componentId={`${featureId}-tiers`}
+        tiers={charge.tiers}
+        tierUnits={getPriceFeatureUnit(charge)}
+        selectedTier={tier}
+        handleTierChange={(tier: PriceTierFragment) => {
+          setBillableFeature(featureId!, tier!.upTo);
+        }}
+      />
+    );
+  } else {
+    chargeRow = (
+      <InputField
+        sx={{ width: 120 }}
+        id={`${featureId}-input`}
+        type="number"
+        InputProps={
+          hasQuantityRestrictions ? { inputProps: { min: charge.minUnitQuantity, max: charge.maxUnitQuantity } } : {}
+        }
+        value={billableFeature?.quantity || charge.minUnitQuantity || 1}
+        onChange={handleQuantityChange}
+      />
+    );
+  }
+
+  return (
+    <StyledPlanCharge>
+      <Box display="flex" flexDirection="column">
+        <Typography variant="h6" color="primary" lineHeight="24px">
+          {displayName}
+        </Typography>
+        {hasQuantityRestrictions && (
+          <Typography variant="body1" color="secondary" lineHeight="20px">
+            {calculateUnitQuantityText(charge.minUnitQuantity, charge.maxUnitQuantity, charge.feature?.unitsPlural)}
+          </Typography>
+        )}
+      </Box>
+
+      <Typography variant="h6" color="primary">
+        {chargeRow}
+      </Typography>
+    </StyledPlanCharge>
+  );
+}
+
+export function CheckoutChargeList({ plan, billingPeriod }: CheckoutChargeListProps) {
+  const { billableFeatures, setBillableFeature } = usePlanStepModel();
+  const planCharges = useChargesSort(plan?.pricePoints?.filter(p => p.billingPeriod === billingPeriod) || []);
+
+  return (
+    <div>
+      {planCharges?.map(charge => {
+        const billableFeature = billableFeatures.find(x => x.featureId === charge.feature?.featureId);
+        return (
+          <PlanCharge
+            key={charge.feature?.featureId || 'base-charge'}
+            charge={charge}
+            setBillableFeature={setBillableFeature}
+            billableFeature={billableFeature}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/src/components/checkout/steps/plan/CheckoutPlanStep.style.tsx

@@ -0,0 +1,6 @@
+import styled from '@emotion/styled/macro';
+import { Box } from '@mui/material';
+
+export const CheckoutPlanContainer = styled(Box)`
+  width: 100%;
+`;

package/src/components/checkout/steps/plan/CheckoutPlanStep.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { useCheckoutModel } from '../../hooks/useCheckoutModel';
+import { usePlanStepModel } from '../../hooks/usePlanStepModel';
+import { BillingPeriodPicker } from './BillingPeriodPicker';
+import { CheckoutChargeList } from './CheckoutChargeList';
+import { CheckoutPlanContainer } from './CheckoutPlanStep.style';
+
+type CheckoutPlanStepProps = {};
+
+export const CheckoutPlanStep = ({}: CheckoutPlanStepProps) => {
+  const { checkoutState, checkoutLocalization } = useCheckoutModel();
+  const { plan } = checkoutState || {};
+  const { billingPeriod } = usePlanStepModel();
+
+  return (
+    <CheckoutPlanContainer>
+      <BillingPeriodPicker plan={plan} checkoutLocalization={checkoutLocalization} />
+      <CheckoutChargeList plan={plan} billingPeriod={billingPeriod} />
+    </CheckoutPlanContainer>
+  );
+};

package/src/components/checkout/steps/plan/index.ts

@@ -0,0 +1 @@
+export * from './CheckoutPlanStep';

package/src/components/checkout/steps/surprise/SurpriseStep.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import NyanCat from '../../../../assets/nyancat.svg';
+import styled from '@emotion/styled/macro';
+
+const StyledNyanCat = styled(NyanCat)`
+  background: #000;
+  width: 100%;
+  max-width: 920px;
+  height: 548px;
+`;
+
+const SurpriseContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+  min-height: 430px;
+  width: 100%;
+`;
+
+export const SurpriseStep = () => {
+  return (
+    <SurpriseContainer>
+      <StyledNyanCat />
+    </SurpriseContainer>
+  );
+};

package/src/components/checkout/textOverrides.ts

@@ -0,0 +1,58 @@
+import { BillingPeriod } from '@stigg/js-client-sdk';
+import moment from 'moment';
+import merge from 'lodash/merge';
+import { DeepPartial } from '../../types';
+import { formatBillingPeriod } from './formatting';
+
+export type CheckoutLocalization = {
+  changePlan: string;
+  billingPeriodsTitle: string;
+  addAddonText: string;
+  newPaymentMethodText: string;
+  newPaymentMethodCardTitle: string;
+  newPaymentMethodBillingAddressTitle: string;
+  baseChargeText: string | ((params: { billingPeriod: BillingPeriod }) => string);
+  totalText: string;
+  subTotalText: string;
+  addCouponCodeText: string;
+  couponCodeTitle: string;
+  addonsSectionTitle: string;
+  changesWillApplyAtEndOfBillingPeriod: string | ((params: { billingPeriodEnd: Date }) => string);
+  checkoutButton: {
+    nextText: string;
+    downgradeText: string;
+    upgradeText: string;
+    purchaseText: string;
+  };
+};
+
+export function getResolvedCheckoutLocalize(
+  localizeOverride?: DeepPartial<CheckoutLocalization>,
+): CheckoutLocalization {
+  const checkoutDefaultLocalization: CheckoutLocalization = {
+    changePlan: 'Change plan',
+    billingPeriodsTitle: 'Billing cycle',
+    addAddonText: 'Add',
+    newPaymentMethodText: 'New payment method',
+    newPaymentMethodBillingAddressTitle: 'Billing address',
+    newPaymentMethodCardTitle: 'Payment method',
+    baseChargeText: ({ billingPeriod }) => `${formatBillingPeriod(billingPeriod)} charge`,
+    totalText: 'Total due today',
+    subTotalText: 'Subtotal',
+    addCouponCodeText: 'Add coupon code',
+    couponCodeTitle: 'Coupon code',
+    addonsSectionTitle: 'Add-ons',
+    changesWillApplyAtEndOfBillingPeriod: ({ billingPeriodEnd }) =>
+      `Your changes will apply on the end of your current billing cycle on ${moment(billingPeriodEnd).format(
+        'MMM D, YYYY',
+      )}.`,
+    checkoutButton: {
+      nextText: 'Next',
+      downgradeText: 'Downgrade',
+      upgradeText: 'Upgrade',
+      purchaseText: 'Purchase',
+    },
+  };
+
+  return merge(checkoutDefaultLocalization, localizeOverride);
+}

package/src/components/checkout/theme.ts

@@ -0,0 +1,26 @@
+import { StiggTheme } from '../../theme/types';
+import { DeepPartial } from '../../types';
+import { CheckoutConfiguration } from './types';
+
+export type CheckoutTheme = {
+  // sectionTitleColor: string;
+  // planNameColor: string;
+  backgroundColor: string;
+  borderColor: string;
+  // listItemBackgroundColor: string;
+  // tabMaxHeight: string;
+  // iconsColor: string;
+};
+
+export function getResolvedCheckoutTheme(
+  _globalTheme: StiggTheme,
+  themeOverride?: DeepPartial<CheckoutTheme>,
+  remoteConfiguration?: CheckoutConfiguration | null,
+) {
+  // todo: implement theme customization
+  const checkoutDefaultTheme: CheckoutTheme = {
+    backgroundColor: themeOverride?.backgroundColor || remoteConfiguration?.palette?.backgroundColor || 'white',
+    borderColor: themeOverride?.borderColor || remoteConfiguration?.palette?.borderColor || 'rgba(0, 30, 108, 0.15)',
+  };
+  return checkoutDefaultTheme;
+}

package/src/components/checkout/types.ts

@@ -0,0 +1,7 @@
+/** placeholder types until we have backend support **/
+export type CheckoutConfiguration = {
+  palette?: {
+    backgroundColor: string;
+    borderColor: string;
+  };
+};

package/src/components/common/Icon.tsx

@@ -2,12 +2,14 @@ import React from 'react';
 import styled from '@emotion/styled/macro';
 import { CSSProperties } from 'react';
 import { css, Theme, useTheme } from '@emotion/react';
-import { ICON_COMPONENTS, Icons } from './customIcons';
 import { getIconColor, IconColor } from './iconColor';
+import * as customIcons from './customIcons';
 
-const IconWrapper = styled.div<{ $pathColor?: string, $rectColor?: string; $strokeColor?: string }>`
+export type Icons = keyof typeof customIcons;
+
+const IconWrapper = styled.div<{ $pathColor?: string; $rectColor?: string; $strokeColor?: string }>`
   ${({ $pathColor }) =>
-          $pathColor &&
+    $pathColor &&
     css`
       path {
         fill: ${$pathColor};
@@ -15,20 +17,20 @@ const IconWrapper = styled.div<{ $pathColor?: string, $rectColor?: string; $stro
     `}
 
   ${({ $rectColor }) =>
-          $rectColor &&
-          css`
-            svg rect {
-              fill: ${$rectColor};
-            }
+    $rectColor &&
+    css`
+      svg rect {
+        fill: ${$rectColor};
+      }
     `}
 
 
   ${({ $strokeColor }) =>
-          $strokeColor &&
-          css`
-            g {
-              stroke: ${$strokeColor};
-            }
+    $strokeColor &&
+    css`
+      g {
+        stroke: ${$strokeColor};
+      }
     `}
 `;
 
@@ -41,15 +43,8 @@ export type IconProps = {
   svgStrokeColor?: IconColor | string;
 };
 
-export function Icon({
-  icon,
-  className,
-  style,
-  svgPathColor,
-  svgRectColor,
-  svgStrokeColor,
-}: IconProps) {
-  const IconComponent = ICON_COMPONENTS[icon];
+export function Icon({ icon, className, style, svgPathColor, svgRectColor, svgStrokeColor }: IconProps) {
+  const IconComponent = (customIcons as any)[icon];
   const theme = useTheme() as Theme;
 
   return (

package/src/components/common/PoweredByStigg.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled/macro';
 
 export const STIGG_WATERMARK_CLASSNAME = 'stigg-watermark';
 
-export type PoweredByStiggSources = 'paywall' | 'customer_portal';
+export type PoweredByStiggSources = 'paywall' | 'customer_portal' | 'checkout';
 
 const PoweredByStiggThemedSvg = styled(PoweredByStiggSvg)`
   * {

package/src/components/{paywall/TiersLayout.tsx → common/TiersSelectContainer.tsx}

@@ -1,10 +1,10 @@
-import { PaywallPlan } from './types';
 import { PriceTierFragment } from '@stigg/js-client-sdk';
 import { MenuItem, OutlinedInput, Select, SelectChangeEvent } from '@mui/material';
 import { Typography } from '../common/Typography';
 import { map } from 'lodash';
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled/macro';
+import { getTierByQuantity } from '../utils/priceTierUtils';
 
 const TierSelect = styled(Select)`
   border-radius: 10px;
@@ -24,32 +24,33 @@ const TierInput = styled(OutlinedInput)`
   }
 `;
 
-export function TiersLayout({
-  plan,
+export function TiersSelectContainer({
+  componentId,
   tiers,
   tierUnits,
   selectedTier,
   handleTierChange,
 }: {
-  plan: PaywallPlan;
+  componentId: string;
   tiers?: PriceTierFragment[] | null;
   tierUnits?: string;
   selectedTier?: PriceTierFragment;
   handleTierChange: (tier: PriceTierFragment) => void;
 }) {
   const handleChange = (event: SelectChangeEvent<unknown>, _: ReactNode) => {
-    handleTierChange(tiers!.find(tier => tier.upTo.toString() === event.target.value)!);
+    if (!tiers) return;
+
+    handleTierChange(getTierByQuantity(tiers, event.target.value as number)!);
   };
 
   return (
     <Typography className="stigg-price-tier-select" style={{ minHeight: '46px' }}>
       {tiers ? (
         <TierSelect
-          labelId="demo-simple-select-label"
-          id={`select_${plan.id}`}
           value={selectedTier ? selectedTier.upTo.toString() : tiers[0].upTo.toString()}
           fullWidth
           onChange={handleChange}
+          id={componentId}
           input={<TierInput />}
           MenuProps={{
             MenuListProps: { disablePadding: true },

package/src/components/common/Typography.tsx

@@ -86,7 +86,17 @@ function getFontWeight(theme: Theme, variant: TypographyProps['variant']) {
 }
 
 export const Typography = forwardRef((props: TypographyProps, ref) => {
-  const { children, span, style, fontWeight, variant = 'body1', color = 'primary', overrideColor, bold, ...rest } = props;
+  const {
+    children,
+    span,
+    style,
+    fontWeight,
+    variant = 'body1',
+    color = 'primary',
+    overrideColor,
+    bold,
+    ...rest
+  } = props;
   const theme = useTheme() as Theme;
   const level = getLevel(variant);
   const levelClassName = `typography-level-${level}`;