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

package/src/components/checkout/steps/addons/components/AddonTextContainer.tsx

@@ -0,0 +1,45 @@
+import { CheckoutLocalization } from '@/components/checkout/configurations/textOverrides';
+import { Typography } from '@/components/common/Typography';
+import { Grid } from '@mui/material';
+import { currencyPriceFormatter } from '@/components/utils/currencyUtils';
+import { Addon, BillingPeriod } from '@stigg/js-client-sdk';
+import styled from '@utils/style';
+
+const StyledAddonLabelItem = styled(Grid)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  height: 42px;
+`;
+
+type AddonTextContainerProps = {
+  addon: Addon;
+  billingPeriod: BillingPeriod;
+  checkoutLocalization: CheckoutLocalization;
+};
+
+export function AddonTextContainer({ addon, billingPeriod, checkoutLocalization }: AddonTextContainerProps) {
+  const addonBillingPeriodPrice = addon.pricePoints.find((pricePoint) => pricePoint.billingPeriod === billingPeriod);
+
+  return (
+    <StyledAddonLabelItem item>
+      <Typography variant="h6" lineHeight="24px">
+        {addon.displayName}
+      </Typography>
+      {addonBillingPeriodPrice ? (
+        <Typography variant="body1" lineHeight="20px" color="secondary">
+          {`${currencyPriceFormatter({
+            amount: addonBillingPeriodPrice.amount!,
+            currency: addonBillingPeriodPrice.currency,
+            minimumFractionDigits: 2,
+          })}/${billingPeriod === BillingPeriod.Annually ? 'year' : 'month'}`}
+        </Typography>
+      ) : (
+        <Typography variant="body1" lineHeight="20px" color="secondary">
+          {checkoutLocalization.addonBillingPeriodNotAvailableText({ planBillingPeriod: billingPeriod })}
+        </Typography>
+      )}
+    </StyledAddonLabelItem>
+  );
+}

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

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

package/src/components/checkout/steps/payment/PaymentMethods.style.ts

@@ -0,0 +1,36 @@
+import { css } from '@emotion/react';
+import styled from '@utils/style';
+import Grid from '@mui/material/Grid';
+
+export const PaymentMethodContainer = styled(Grid, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{
+  $disabled?: boolean;
+}>`
+  padding: 8px;
+  border-radius: 10px;
+  border: 1px solid ${({ theme }) => theme.stigg.palette.outlinedBorder};
+  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ $disabled }) => ($disabled ? 0.6 : 1)};
+`;
+
+export const NewPaymentMethodContainer = styled(PaymentMethodContainer)<{ $hideBorders?: boolean }>`
+  flex-direction: column;
+  align-items: unset;
+  ${({ $hideBorders }) =>
+    $hideBorders &&
+    css`
+      border: none;
+      padding: 0;
+    `}
+`;
+
+export const PaymentMethodLayoutContainer = styled(Grid)`
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: 12px;
+`;
+
+export const PaymentMethodTextContainer = styled(Grid)`
+  display: flex;
+  flex-direction: column;
+`;

package/src/components/checkout/steps/payment/PaymentMethods.tsx

@@ -0,0 +1,106 @@
+import Collapse from '@mui/material/Collapse';
+import Grid from '@mui/material/Grid';
+import Radio from '@mui/material/Radio';
+import { Customer } from '@stigg/js-client-sdk';
+
+import { Typography } from '../../../common/Typography';
+import {
+  NewPaymentMethodContainer,
+  PaymentMethodContainer,
+  PaymentMethodLayoutContainer,
+  PaymentMethodTextContainer,
+} from './PaymentMethods.style';
+import { StripePaymentForm } from './stripe';
+import { ZuoraPaymentForm } from './zuora/ZuoraPaymentForm';
+import { useZuoraIntegration } from './zuora/useZuoraIntegration';
+import { CheckoutLocalization } from '../../configurations/textOverrides';
+import { CheckoutContainerProps } from '../../CheckoutContainer';
+
+export type PaymentMethodLayoutProps = {
+  checked: boolean;
+  text: React.ReactNode;
+  subtitle?: React.ReactNode;
+  readOnly?: boolean;
+};
+
+export type PaymentMethodProps = Pick<Customer, 'paymentMethodDetails'> &
+  Pick<PaymentMethodLayoutProps, 'checked' | 'readOnly'> & { onSelect: () => void };
+
+export type NewPaymentMethodProps = Pick<PaymentMethodLayoutProps, 'checked' | 'readOnly'> & {
+  onSelect: () => void;
+  checkoutLocalization: CheckoutLocalization;
+  hasExistingPaymentMethod: boolean;
+} & Pick<
+    CheckoutContainerProps,
+    'onBillingAddressChange' | 'collectPhoneNumber' | 'onCheckout' | 'onCheckoutCompleted'
+  >;
+
+function PaymentMethodLayout({ checked, text, subtitle, readOnly }: PaymentMethodLayoutProps) {
+  return (
+    <PaymentMethodLayoutContainer>
+      <Radio checked={checked} disabled={readOnly} />
+      <PaymentMethodTextContainer container>
+        <Grid item>{text}</Grid>
+        {subtitle && <Grid item>{subtitle}</Grid>}
+      </PaymentMethodTextContainer>
+    </PaymentMethodLayoutContainer>
+  );
+}
+
+export function ExistingPaymentMethod({ checked, paymentMethodDetails, readOnly, onSelect }: PaymentMethodProps) {
+  if (!paymentMethodDetails) {
+    return null;
+  }
+  const { last4Digits, expirationMonth, expirationYear } = paymentMethodDetails;
+
+  return (
+    <PaymentMethodContainer item onClick={onSelect} $disabled={readOnly}>
+      <PaymentMethodLayout
+        checked={checked}
+        readOnly={readOnly}
+        text={<Typography variant="h6">{`Card ending in ${last4Digits}`}</Typography>}
+        subtitle={
+          !!expirationMonth &&
+          !!expirationYear && (
+            <Typography variant="body1">{`Expires ${expirationMonth
+              .toString()
+              .padStart(2, '0')}/${expirationYear}`}</Typography>
+          )
+        }
+      />
+    </PaymentMethodContainer>
+  );
+}
+
+export function NewPaymentMethod({
+  hasExistingPaymentMethod,
+  checked,
+  onSelect,
+  readOnly,
+  checkoutLocalization,
+  onBillingAddressChange,
+  collectPhoneNumber,
+  onCheckout,
+  onCheckoutCompleted,
+}: NewPaymentMethodProps) {
+  const { isZuoraIntegration } = useZuoraIntegration();
+
+  return (
+    <NewPaymentMethodContainer item $hideBorders={!hasExistingPaymentMethod} onClick={onSelect} $disabled={readOnly}>
+      {hasExistingPaymentMethod && (
+        <PaymentMethodLayout
+          checked={checked}
+          readOnly={readOnly}
+          text={<Typography variant="h6">{checkoutLocalization.newPaymentMethodText}</Typography>}
+        />
+      )}
+      <Collapse in={checked}>
+        {isZuoraIntegration ? (
+          <ZuoraPaymentForm onCheckout={onCheckout} onCheckoutCompleted={onCheckoutCompleted} />
+        ) : (
+          <StripePaymentForm onBillingAddressChange={onBillingAddressChange} collectPhoneNumber={collectPhoneNumber} />
+        )}
+      </Collapse>
+    </NewPaymentMethodContainer>
+  );
+}

package/src/components/checkout/steps/payment/PaymentStep.tsx

@@ -0,0 +1,63 @@
+import styled from '@utils/style';
+import Alert from '@mui/material/Alert';
+import Grid from '@mui/material/Grid';
+import { useCheckoutModel, usePaymentStepModel } from '../../hooks';
+import { ExistingPaymentMethod, NewPaymentMethod } from './PaymentMethods';
+import { Typography } from '../../../common/Typography';
+import { CheckoutContainerProps } from '../../CheckoutContainer';
+
+const PaymentContainer = styled(Grid)`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+`;
+
+export function PaymentStep({
+  onBillingAddressChange,
+  collectPhoneNumber,
+  onCheckout,
+  onCheckoutCompleted,
+}: Pick<
+  CheckoutContainerProps,
+  'onBillingAddressChange' | 'collectPhoneNumber' | 'onCheckout' | 'onCheckoutCompleted'
+>) {
+  const { checkoutState, checkoutLocalization, widgetState } = useCheckoutModel();
+  const { customer } = checkoutState || {};
+  const { errorMessage, useNewPaymentMethod, setUseNewPaymentMethod } = usePaymentStepModel();
+  const { readOnly } = widgetState;
+
+  const handleOnSelect = (openNewPaymentMethod: boolean) => {
+    if (readOnly) {
+      return;
+    }
+
+    setUseNewPaymentMethod(openNewPaymentMethod);
+  };
+
+  return (
+    <PaymentContainer container>
+      {!!errorMessage && (
+        <Alert severity="error" sx={{ alignItems: 'center' }}>
+          <Typography overrideColor="inherit">{errorMessage}</Typography>
+        </Alert>
+      )}
+      <ExistingPaymentMethod
+        readOnly={readOnly}
+        checked={!useNewPaymentMethod}
+        paymentMethodDetails={customer?.paymentMethodDetails}
+        onSelect={() => handleOnSelect(false)}
+      />
+      <NewPaymentMethod
+        hasExistingPaymentMethod={!!customer?.paymentMethodDetails}
+        readOnly={readOnly}
+        checked={useNewPaymentMethod}
+        checkoutLocalization={checkoutLocalization}
+        onSelect={() => handleOnSelect(true)}
+        onBillingAddressChange={onBillingAddressChange}
+        collectPhoneNumber={collectPhoneNumber}
+        onCheckout={onCheckout}
+        onCheckoutCompleted={onCheckoutCompleted}
+      />
+    </PaymentContainer>
+  );
+}

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

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

package/src/components/checkout/steps/payment/stripe/StripePaymentForm.tsx

@@ -0,0 +1,79 @@
+import { StripeAddressElementChangeEvent } from '@stripe/stripe-js';
+import Grid from '@mui/material/Grid';
+import { BillingAddress } from '@stigg/js-client-sdk';
+import { AddressElement, PaymentElement } from '@stripe/react-stripe-js';
+import { Typography } from '../../../../common/Typography';
+import { useCheckoutModel, usePaymentStepModel } from '../../../hooks';
+import { CheckoutContainerProps } from '../../../CheckoutContainer';
+
+export function StripePaymentForm({
+  onBillingAddressChange,
+  collectPhoneNumber,
+}: Pick<CheckoutContainerProps, 'onBillingAddressChange' | 'collectPhoneNumber'>) {
+  const { checkoutState, checkoutLocalization, widgetState, setWidgetReadOnly } = useCheckoutModel();
+  const { setBillingAddress } = usePaymentStepModel();
+  const { customer, configuration } = checkoutState || {};
+  const { readOnly } = widgetState;
+  const shouldCollectPhoneNumber = !!(collectPhoneNumber ?? configuration?.content?.collectPhoneNumber);
+
+  const handleAddressChange = (args: StripeAddressElementChangeEvent) => {
+    if (!args.complete) {
+      return;
+    }
+
+    const { postal_code: postalCode, ...addressFields } = args.value.address;
+    const billingAddress: BillingAddress = {
+      postalCode,
+      ...addressFields,
+    };
+
+    setWidgetReadOnly(true);
+    setBillingAddress(billingAddress);
+
+    if (onBillingAddressChange) {
+      const callExternalBillingAddressChanged = async () => {
+        await onBillingAddressChange({ billingAddress });
+        setWidgetReadOnly(false);
+      };
+
+      void callExternalBillingAddressChanged();
+    } else {
+      setWidgetReadOnly(false);
+    }
+  };
+
+  return (
+    <Grid flexDirection="column" container gap={3} padding="16px" sx={{ pointerEvents: readOnly ? 'none' : undefined }}>
+      <Grid flexDirection="column" container gap={2}>
+        <Typography variant="h6">{checkoutLocalization.newPaymentMethodBillingAddressTitle}</Typography>
+        <AddressElement
+          onChange={handleAddressChange}
+          options={{
+            mode: 'billing',
+            fields: { phone: shouldCollectPhoneNumber ? 'always' : 'auto' },
+            defaultValues: {
+              ...(customer?.name && { name: customer.name }),
+            },
+          }}
+        />
+      </Grid>
+      <Grid flexDirection="column" container gap={2}>
+        <Typography variant="h6">{checkoutLocalization.newPaymentMethodCardTitle}</Typography>
+        <PaymentElement
+          onChange={() => {}}
+          onReady={() => {}}
+          options={{
+            readOnly,
+            terms: { card: 'never' },
+            defaultValues: {
+              billingDetails: {
+                ...(customer?.name && { name: customer.name }),
+                ...(customer?.email && { email: customer.email }),
+              },
+            },
+          }}
+        />
+      </Grid>
+    </Grid>
+  );
+}

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

@@ -0,0 +1,3 @@
+export * from './StripePaymentForm';
+export * from './useStripeIntegration';
+export * from './useSubmit';

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

@@ -0,0 +1,122 @@
+import { ApplySubscriptionResults, PaymentCollection } from '@stigg/js-client-sdk';
+import { Stripe, StripeElements } from '@stripe/stripe-js';
+
+type StripeElementsProps = {
+  stripe: Stripe | null;
+  elements: StripeElements | null;
+};
+
+const FAILED_PAYMENT_COLLECTION_STATUSES = [PaymentCollection.Failed, PaymentCollection.Processing];
+
+export async function handleStripeFormValidations({ elements }: Pick<StripeElementsProps, 'elements'>) {
+  if (!elements) {
+    const errorMessage = 'Stripe elements not initialized';
+    console.error(errorMessage);
+    return { success: false, errorMessage };
+  }
+
+  const { error: elementsError } = await elements.submit();
+
+  if (elementsError) {
+    console.log(elementsError.message);
+    return { success: false, errorMessage: elementsError.message || '' };
+  }
+
+  return { success: true };
+}
+
+export async function handleStripeNextAction({
+  applySubscriptionResults,
+  stripe,
+}: {
+  applySubscriptionResults: ApplySubscriptionResults;
+  stripe: Stripe | null;
+}) {
+  const subscription = applySubscriptionResults?.subscription;
+  const paymentIntentClientSecret = subscription?.latestInvoice?.paymentSecret;
+  const paymentCollection = subscription?.paymentCollection;
+
+  if (stripe && paymentIntentClientSecret && paymentCollection === PaymentCollection.ActionRequired) {
+    const { error: NextActionError } = await stripe.handleNextAction({ clientSecret: paymentIntentClientSecret });
+    if (NextActionError) {
+      return { errorMessage: NextActionError.message || '' };
+    }
+  } else if (paymentCollection && FAILED_PAYMENT_COLLECTION_STATUSES.includes(paymentCollection)) {
+    return { errorMessage: subscription?.latestInvoice?.errorMessage || 'An error occurred - try again later' };
+  }
+
+  return { 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 };
+}
+
+export async function handleNewPaymentMethod({
+  stripe,
+  elements,
+  setupIntentClientSecret,
+}: {
+  stripe: Stripe | null;
+  elements: StripeElements | null;
+  setupIntentClientSecret?: string;
+}): Promise<{ success: boolean; errorMessage?: string; paymentMethodId?: string }> {
+  if (!stripe || !elements || !setupIntentClientSecret) {
+    return { success: false };
+  }
+
+  const stripeFormValidationsResults = await handleStripeFormValidations({ elements });
+  if (!stripeFormValidationsResults.success) {
+    return { success: false, errorMessage: stripeFormValidationsResults.errorMessage };
+  }
+
+  const { newPaymentMethodId, setupErrorMessage } = await handleStripeSetup({
+    stripe,
+    elements,
+    clientSecret: setupIntentClientSecret,
+  });
+
+  if (setupErrorMessage || !newPaymentMethodId) {
+    return { success: false, errorMessage: setupErrorMessage };
+  }
+
+  return { success: true, paymentMethodId: newPaymentMethodId };
+}

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

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+
+import { BillingVendorIdentifier } from '@stigg/js-client-sdk';
+import type { 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) {
+        return;
+      }
+
+      const { accountId, publicKey } = credentials;
+      if (!accountId || !publicKey) {
+        console.error('Stripe account ID or public key is missing');
+        return;
+      }
+
+      import('@stripe/stripe-js').then(({ loadStripe }) => {
+        setStripePromise(loadStripe(publicKey, { stripeAccount: accountId }));
+      });
+    }
+  }, [billingIntegration]);
+
+  return { stripePromise, setupIntentClientSecret: setupSecret };
+}

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

@@ -0,0 +1,135 @@
+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 } from '../../../CheckoutContainer';
+import { handleNewPaymentMethod, handleStripeNextAction } from './stripe.utils';
+import { ANIMATION_DURATION } from '../../../summary/CheckoutSuccess';
+import { CheckoutResult } from '../../../../../components/checkout/types';
+
+const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
+
+export type HandleSubmitResult = { results?: ApplySubscriptionResults; success: boolean; errorMessage?: string };
+
+export type UseSubmitProps = {
+  onSuccess?: () => void;
+  isMocked?: boolean;
+} & Pick<CheckoutContainerProps, 'onCheckout' | 'onCheckoutCompleted' | 'disableSuccessAnimation'>;
+
+export function useSubmit({
+  isMocked = false,
+  onCheckout,
+  onCheckoutCompleted,
+  onSuccess,
+  disableSuccessAnimation,
+}: UseSubmitProps) {
+  const { stigg } = useStiggContext();
+  const { useNewPaymentMethod } = usePaymentStepModel();
+  const subscriptionState = useSubscriptionState();
+  const { checkoutState, widgetState, setWidgetReadOnly } = useCheckoutModel();
+  const { setupSecret: setupIntentClientSecret, customer } = checkoutState || {};
+  const stripe = useStripe();
+  const elements = useElements();
+
+  const handleSubmit = async (e: any): Promise<HandleSubmitResult> => {
+    e.preventDefault();
+
+    if (!subscriptionState) {
+      return { success: false, errorMessage: 'Unexpected error, please contact support.' };
+    }
+
+    let success = true;
+    let errorMessage: string | undefined;
+    let usedStiggCheckoutAction = false;
+    let paymentMethodId: string | undefined;
+
+    setWidgetReadOnly(true);
+
+    if (!isMocked && useNewPaymentMethod) {
+      const paymentMethodResults = await handleNewPaymentMethod({ elements, stripe, setupIntentClientSecret });
+      if (!paymentMethodResults.success) {
+        errorMessage = paymentMethodResults.errorMessage;
+        success = false;
+      } else {
+        paymentMethodId = paymentMethodResults.paymentMethodId;
+      }
+    }
+
+    const checkoutParams: ApplySubscription = { ...subscriptionState, paymentMethodId };
+
+    const checkoutAction = async (params: ApplySubscription): Promise<CheckoutResult> => {
+      usedStiggCheckoutAction = true;
+
+      try {
+        const applySubscriptionResults = await stigg.applySubscription(params);
+
+        const nextActionResults = await handleStripeNextAction({ applySubscriptionResults, stripe });
+
+        return {
+          success: !nextActionResults.errorMessage,
+          errorMessage: nextActionResults.errorMessage,
+          results: applySubscriptionResults,
+        };
+      } catch (e) {
+        console.error(e);
+        errorMessage = (e as Error)?.message;
+        return { success: false, errorMessage };
+      }
+    };
+
+    let checkoutResults: ApplySubscriptionResults | undefined;
+
+    if (success) {
+      if (onCheckout) {
+        const externalCheckoutResults = await onCheckout({
+          customerId: customer!.id,
+          checkoutParams,
+          checkoutAction,
+        });
+        if (externalCheckoutResults.errorMessage) {
+          errorMessage = externalCheckoutResults.errorMessage;
+        }
+
+        if (!usedStiggCheckoutAction && externalCheckoutResults.results && externalCheckoutResults.success) {
+          const nextActionResults = await handleStripeNextAction({
+            applySubscriptionResults: externalCheckoutResults.results,
+            stripe,
+          });
+
+          if (nextActionResults.errorMessage) {
+            errorMessage = nextActionResults.errorMessage;
+            success = false;
+          }
+        }
+
+        success = success && externalCheckoutResults.success && !errorMessage;
+        checkoutResults = externalCheckoutResults.results;
+      } else {
+        const checkoutActionResults = await checkoutAction(checkoutParams);
+        if (!checkoutActionResults.success && checkoutActionResults.errorMessage) {
+          errorMessage = checkoutActionResults.errorMessage;
+        }
+        success = checkoutActionResults.success && !errorMessage;
+        checkoutResults = checkoutActionResults.results;
+      }
+    }
+
+    setWidgetReadOnly(false);
+
+    if (success && onSuccess) {
+      onSuccess();
+
+      if (!disableSuccessAnimation) {
+        await delay(ANIMATION_DURATION); // Wait for animation to finish
+      }
+    }
+
+    await onCheckoutCompleted({ success, error: errorMessage });
+
+    return { results: checkoutResults, success: !errorMessage, errorMessage };
+  };
+
+  return { handleSubmit, isLoading: !!widgetState?.readOnly };
+}