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

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

@@ -0,0 +1,109 @@
+import { ApplySubscriptionResults, PaymentCollection } from '@stigg/js-client-sdk';
+import { Stripe, StripeElements } from '@stripe/stripe-js';
+
+type StripeElementsProps = {
+  stripe: Stripe | null;
+  elements: StripeElements | null;
+};
+
+export async function handleStripeFormValidations({ elements }: Pick<StripeElementsProps, 'elements'>) {
+  if (!elements) {
+    console.error('Stripe elements not initialized');
+    return { success: false };
+  }
+
+  const { error: elementsError } = await elements.submit();
+
+  if (elementsError) {
+    console.log(elementsError.message);
+    return { success: false };
+  }
+
+  return { success: true };
+}
+
+export async function handleNewPaymentMethod({
+  stripe,
+  elements,
+  setupIntentClientSecret,
+}: {
+  stripe: Stripe | null;
+  elements: StripeElements | null;
+  setupIntentClientSecret?: string;
+}) {
+  if (!stripe || !elements || !setupIntentClientSecret) {
+    return { success: false };
+  }
+
+  const { newPaymentMethodId, setupErrorMessage } = await handleStripeSetup({
+    stripe,
+    elements,
+    clientSecret: setupIntentClientSecret,
+  });
+
+  return { success: !!newPaymentMethodId, paymentMethodId: newPaymentMethodId, errorMessage: setupErrorMessage };
+}
+
+export async function handleStripeNextAction({
+  applySubscriptionResults,
+  stripe,
+}: {
+  applySubscriptionResults: ApplySubscriptionResults;
+  stripe: Stripe | null;
+}) {
+  const paymentIntentClientSecret = applySubscriptionResults?.subscription?.latestInvoice?.paymentSecret;
+  if (
+    stripe &&
+    paymentIntentClientSecret &&
+    applySubscriptionResults?.subscription?.paymentCollection === PaymentCollection.ActionRequired
+  ) {
+    const { error: NextActionError } = await stripe.handleNextAction({ clientSecret: paymentIntentClientSecret });
+    if (NextActionError) {
+      return { errorMessage: NextActionError.message || '' };
+    }
+  }
+
+  return { subscription: applySubscriptionResults?.subscription };
+}
+
+async function handleStripeSetup({
+  stripe,
+  elements,
+  clientSecret,
+}: {
+  stripe: Stripe;
+  elements: StripeElements;
+  clientSecret: string;
+}) {
+  let newPaymentMethodId: string | undefined;
+  let setupErrorMessage: string | undefined;
+
+  const { error: setupError } = await stripe.confirmSetup({
+    elements,
+    confirmParams: { return_url: window.location.href },
+    redirect: 'if_required',
+  });
+
+  if (setupError) {
+    if (setupError.type === 'card_error' || setupError.type === 'validation_error') {
+      if (setupError.type === 'card_error') {
+        // Set some error message
+        setupErrorMessage = setupError.message || '';
+      }
+    } else {
+      setupErrorMessage = 'An unexpected error occurred.';
+    }
+  } else {
+    try {
+      const { setupIntent } = await stripe.retrieveSetupIntent(clientSecret);
+      if (setupIntent?.payment_method) {
+        newPaymentMethodId = setupIntent.payment_method as string;
+      }
+    } catch (e) {
+      setupErrorMessage = 'An unexpected error occurred.';
+      console.error(e);
+    }
+  }
+
+  return { newPaymentMethodId, setupErrorMessage };
+}

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

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+
+import { BillingVendorIdentifier } from '@stigg/js-client-sdk';
+import { loadStripe, Stripe } from '@stripe/stripe-js';
+
+import { useCheckoutModel } from '../../../hooks';
+
+export function useStripeIntegration() {
+  const [stripePromise, setStripePromise] = useState<Promise<Stripe | null> | null>(null);
+  const { checkoutState } = useCheckoutModel();
+  const { billingIntegration, setupSecret } = checkoutState || {};
+
+  useEffect(() => {
+    if (billingIntegration) {
+      const { billingIdentifier, credentials } = billingIntegration;
+      if (billingIdentifier !== BillingVendorIdentifier.Stripe) {
+        console.error('Currently only stripe integration is supported');
+        return;
+      }
+
+      const { accountId, publicKey } = credentials;
+      setStripePromise(loadStripe(publicKey, { stripeAccount: accountId }));
+    }
+  }, [billingIntegration]);
+
+  return { stripePromise, setupIntentClientSecret: setupSecret };
+}

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

@@ -0,0 +1,104 @@
+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';
+import { ANIMATION_DURATION } from '../../../summary/CheckoutSuccess';
+
+const delay = (ms: number) => new Promise(res => setTimeout(res, ms));
+
+export type HandleSubmitResult = { results?: ApplySubscriptionResults; errorMessage?: string } | undefined;
+
+export type UseSubmitProps = {
+  onSuccess?: () => void;
+} & Pick<CheckoutContainerProps, 'onCheckout' | 'onCheckoutCompleted'>;
+
+export function useSubmit({ onCheckout, onCheckoutCompleted, onSuccess }: UseSubmitProps) {
+  const { stigg } = useStiggContext();
+  const { useNewPaymentMethod } = usePaymentStepModel();
+  const subscriptionState = useSubscriptionState();
+  const { checkoutState, widgetState, setWidgetReadOnly } = 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;
+
+    setWidgetReadOnly(true);
+
+    if (useNewPaymentMethod) {
+      const { success } = await handleStripeFormValidations({ elements });
+      if (!success) {
+        setWidgetReadOnly(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();
+      }
+    }
+
+    setWidgetReadOnly(false);
+
+    const success = !errorMessage && !!checkoutResults?.subscription;
+    if (success && onSuccess) {
+      onSuccess();
+    }
+
+    await delay(ANIMATION_DURATION); // Wait for animation to finish
+    await onCheckoutCompleted({ success, error: errorMessage });
+
+    return { results: checkoutResults, errorMessage };
+  };
+
+  return { handleSubmit, isLoading: !!widgetState?.readOnly };
+}

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)`
+  margin: 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;
+  padding: 8px 8px 8px 4px;
+  border-radius: 10px;
+  border: ${({ theme, $isActive }) =>
+    `1px solid ${$isActive ? theme.stigg.palette.outlinedRestingBorder : theme.stigg.palette.outlinedBorder}`};
+  background: ${({ theme, $isActive }) => ($isActive ? theme.stigg.palette.backgroundSection : 'transparent')};
+  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,20 @@
+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';
+
+export const CheckoutPlanStep = () => {
+  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/summary/CheckoutSuccess.tsx

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled/macro';
+import { Box } from '@mui/material';
+import Color from 'color';
+import React from 'react';
+import Lottie from 'react-lottie';
+import animationData from '../../../assets/lottie/checkout-success.json';
+
+export const ANIMATION_DURATION = 5000;
+
+const BACKGROUND_COLOR = Color('#0b2f7a')
+  .alpha(0.3)
+  .toString();
+
+const CheckoutSuccessContainer = styled(Box)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: ${BACKGROUND_COLOR};
+  * rect {
+    fill: transparent;
+  }
+`;
+
+export function CheckoutSuccess() {
+  return (
+    <CheckoutSuccessContainer>
+      <Lottie options={{ loop: false, autoplay: true, animationData }} />
+    </CheckoutSuccessContainer>
+  );
+}