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

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

@@ -1,45 +0,0 @@
-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

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

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

@@ -1,36 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

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

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

@@ -1,79 +0,0 @@
-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

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

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

@@ -1,122 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,135 +0,0 @@
-import { ApplySubscription, ApplySubscriptionResults } from '@stigg/js-client-sdk';
-import { useElements, useStripe } from '@stripe/react-stripe-js';
-import { useStiggContext } from '../../../../../hooks';
-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 };
-}