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

package/src/components/checkout/steps/payment/zuora/ZuoraPaymentForm.tsx

@@ -1,128 +0,0 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import styled from '@utils/style';
-import Box from '@mui/material/Box';
-import CircularProgress from '@mui/material/CircularProgress';
-import { Currency, ZuoraCheckoutCredentialsFragment } from '@stigg/js-client-sdk';
-import { useZuoraIntegration } from './useZuoraIntegration';
-import { createZuoraPaymentFormConfig, ZuoraPaymentResult } from './zuora.utils';
-import { useZuoraSubmit } from './useZuoraSubmit';
-import { useCheckoutModel, usePaymentStepModel, usePlanStepModel } from '../../../hooks';
-import { CheckoutContainerProps } from '../../../CheckoutContainer';
-
-const Container = styled(Box)`
-  position: relative;
-  max-width: 500px;
-`;
-
-const PaymentContainer = styled(Box)<{ $showLoading: boolean }>`
-  opacity: ${({ $showLoading }) => ($showLoading ? 0.6 : 1)};
-  pointer-events: ${({ $showLoading }) => ($showLoading ? 'none' : 'auto')};
-`;
-
-const LoadingOverlay = styled(Box)`
-  position: absolute;
-  top: 40px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(255, 255, 255, 0.8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  z-index: 10;
-`;
-
-const LoadingContent = styled(Box)`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-`;
-
-export function ZuoraPaymentForm({
-  onCheckout,
-  onCheckoutCompleted,
-}: Pick<CheckoutContainerProps, 'onCheckout' | 'onCheckoutCompleted'>) {
-  const { isZuoraIntegration, isInitialized, createPaymentSession } = useZuoraIntegration();
-  const { setErrorMessage } = usePaymentStepModel();
-  const { billingCountryCode } = usePlanStepModel();
-  const { checkoutState, widgetState } = useCheckoutModel();
-  const { handleZuoraSubmit } = useZuoraSubmit({ onCheckout, onCheckoutCompleted });
-  const hasRenderedRef = useRef(false);
-  const [paymentFormLoading, setPaymentFormLoading] = React.useState(false);
-
-  const currency = checkoutState?.plan?.pricePoints?.[0]?.currency || Currency.Usd;
-  const { publishableKey } = checkoutState?.billingIntegration.billingCredentials as ZuoraCheckoutCredentialsFragment;
-
-  const handleZuoraComplete = useCallback(
-    async (result: ZuoraPaymentResult) => {
-      if (!result.success || !result.paymentMethodId) {
-        const errorMessage = result.error?.message || 'Payment failed';
-        setErrorMessage(errorMessage);
-        await onCheckoutCompleted({ success: false, error: errorMessage });
-        return;
-      }
-
-      await handleZuoraSubmit(result.paymentMethodId);
-    },
-    [handleZuoraSubmit, setErrorMessage, onCheckoutCompleted],
-  );
-
-  useEffect(() => {
-    const renderZuoraForm = async () => {
-      if (!isInitialized || hasRenderedRef.current) {
-        return;
-      }
-
-      setPaymentFormLoading(true);
-      setErrorMessage(undefined);
-
-      try {
-        hasRenderedRef.current = true;
-
-        const zuora = window.Zuora(publishableKey);
-        const config = createZuoraPaymentFormConfig(
-          createPaymentSession,
-          handleZuoraComplete,
-          currency,
-          billingCountryCode,
-        );
-
-        const paymentForm = await zuora.createPaymentForm(config);
-        paymentForm.mount('#zuora_payment');
-      } catch (_err) {
-        hasRenderedRef.current = false;
-        setErrorMessage('Failed to render Zuora payment form');
-      } finally {
-        setPaymentFormLoading(false);
-      }
-    };
-
-    void renderZuoraForm();
-
-    return () => {
-      hasRenderedRef.current = false;
-    };
-    // Only depend on isInitialized to prevent multiple form renders
-    // createPaymentSession and handleZuoraComplete are intentionally omitted
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isInitialized]);
-
-  if (!isZuoraIntegration) {
-    return null;
-  }
-
-  return (
-    <Container>
-      <PaymentContainer id="zuora_payment" $showLoading={widgetState.readOnly || paymentFormLoading} />
-      {(widgetState.readOnly || paymentFormLoading) && (
-        <LoadingOverlay>
-          <LoadingContent>
-            <CircularProgress size={28} />
-          </LoadingContent>
-        </LoadingOverlay>
-      )}
-    </Container>
-  );
-}

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

@@ -1,9 +0,0 @@
-export { ZuoraPaymentForm } from './ZuoraPaymentForm';
-export { useZuoraIntegration } from './useZuoraIntegration';
-export { isZuoraLibraryAvailable, loadZuoraLibrary, createZuoraPaymentFormConfig } from './zuora.utils';
-export type {
-  ZuoraInstance,
-  ZuoraPaymentFormConfig,
-  ZuoraPaymentForm as ZuoraPaymentFormType,
-  ZuoraPaymentResult,
-} from './zuora.utils';

package/src/components/checkout/steps/payment/zuora/useZuoraIntegration.ts

@@ -1,56 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useCheckoutModel, usePaymentStepModel, usePlanStepModel } from '../../../hooks';
-import { isZuoraLibraryAvailable, loadZuoraLibrary } from './zuora.utils';
-import { BillingVendorIdentifier, useStiggContext } from '../../../../..';
-
-export function useZuoraIntegration() {
-  const { stigg } = useStiggContext();
-  const { setErrorMessage } = usePaymentStepModel();
-  const { billingCountryCode } = usePlanStepModel();
-  const [isInitialized, setIsInitialized] = useState(false);
-  const { checkoutState } = useCheckoutModel();
-  const { billingIntegration } = checkoutState || {};
-
-  const createPaymentSession = useCallback(async () => {
-    if (!checkoutState?.customer.id || !checkoutState?.plan.id) {
-      throw new Error('Customer and plan are required');
-    }
-
-    const { token } = await stigg.createPaymentSession({
-      planId: checkoutState.plan.id,
-      billingCountryCode,
-    });
-
-    return token;
-  }, [checkoutState, stigg, billingCountryCode]);
-
-  const initializeZuora = useCallback(() => {
-    try {
-      if (!isZuoraLibraryAvailable()) {
-        loadZuoraLibrary();
-      }
-
-      setIsInitialized(true);
-    } catch (_err) {
-      setErrorMessage('Failed to initialize Zuora');
-    }
-  }, [setIsInitialized, setErrorMessage]);
-
-  useEffect(() => {
-    if (billingIntegration) {
-      const { billingIdentifier } = billingIntegration;
-
-      if (billingIdentifier === BillingVendorIdentifier.Zuora) {
-        void initializeZuora();
-      }
-    }
-  }, [billingIntegration, initializeZuora]);
-
-  const isZuoraIntegration = billingIntegration?.billingIdentifier === BillingVendorIdentifier.Zuora;
-
-  return {
-    isZuoraIntegration,
-    isInitialized,
-    createPaymentSession,
-  };
-}

package/src/components/checkout/steps/payment/zuora/useZuoraSubmit.ts

@@ -1,125 +0,0 @@
-import { useCallback } from 'react';
-import { ApplySubscription } from '@stigg/js-client-sdk';
-import { useStiggContext } from '../../../../..';
-import { useSubscriptionState } from '../../../hooks/useSubscriptionState';
-import { useCheckoutModel, usePaymentStepModel } from '../../../hooks';
-import { CheckoutContainerProps } from '../../../CheckoutContainer';
-import { ANIMATION_DURATION } from '../../../summary/CheckoutSuccess';
-
-const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
-
-export type ZuoraSubmitResult = {
-  success: boolean;
-  errorMessage?: string;
-};
-
-export type UseZuoraSubmitProps = {
-  onSuccess?: () => void;
-} & Pick<CheckoutContainerProps, 'onCheckout' | 'onCheckoutCompleted' | 'disableSuccessAnimation'>;
-
-export function useZuoraSubmit({
-  onCheckout,
-  onCheckoutCompleted,
-  onSuccess,
-  disableSuccessAnimation,
-}: UseZuoraSubmitProps) {
-  const { stigg } = useStiggContext();
-  const subscriptionState = useSubscriptionState();
-  const { checkoutState, setWidgetReadOnly, setCheckoutSuccess } = useCheckoutModel();
-  const { setErrorMessage } = usePaymentStepModel();
-
-  const handleZuoraSubmit = useCallback(
-    async (paymentMethodId?: string): Promise<ZuoraSubmitResult> => {
-      setWidgetReadOnly(true);
-
-      let success = true;
-      let errorMessage: string | undefined;
-
-      const currentSubscriptionState = subscriptionState;
-      if (!currentSubscriptionState) {
-        success = false;
-        errorMessage = 'Unexpected error, please contact support.';
-      } else {
-        const checkoutParams: ApplySubscription = {
-          ...currentSubscriptionState,
-          paymentMethodId,
-        };
-
-        const checkoutAction = async (params: ApplySubscription) => {
-          try {
-            const applySubscriptionResults = await stigg.applySubscription(params);
-            return {
-              success: true,
-              results: applySubscriptionResults,
-            };
-          } catch (e) {
-            console.error(e);
-            return {
-              success: false,
-              errorMessage: (e as Error)?.message || 'Failed to apply subscription',
-            };
-          }
-        };
-
-        try {
-          if (onCheckout) {
-            const externalCheckoutResults = await onCheckout({
-              customerId: checkoutState!.customer.id,
-              checkoutParams,
-              checkoutAction,
-            });
-
-            if (externalCheckoutResults.errorMessage) {
-              errorMessage = externalCheckoutResults.errorMessage;
-            }
-
-            success = success && externalCheckoutResults.success && !errorMessage;
-          } else {
-            const checkoutActionResults = await checkoutAction(checkoutParams);
-            if (!checkoutActionResults.success && checkoutActionResults.errorMessage) {
-              errorMessage = checkoutActionResults.errorMessage;
-            }
-            success = checkoutActionResults.success && !errorMessage;
-          }
-        } catch (err) {
-          success = false;
-          errorMessage = (err as Error).message || 'Failed to process checkout';
-        }
-      }
-
-      if (success) {
-        setCheckoutSuccess(true);
-
-        if (onSuccess) {
-          onSuccess();
-
-          if (!disableSuccessAnimation) {
-            await delay(ANIMATION_DURATION);
-          }
-        }
-      } else {
-        setErrorMessage(errorMessage);
-      }
-
-      setWidgetReadOnly(false);
-
-      await onCheckoutCompleted({ success, error: errorMessage });
-
-      return { success, errorMessage };
-    },
-    [
-      stigg,
-      subscriptionState,
-      checkoutState,
-      onCheckout,
-      onCheckoutCompleted,
-      onSuccess,
-      disableSuccessAnimation,
-      setWidgetReadOnly,
-      setCheckoutSuccess,
-      setErrorMessage,
-    ],
-  );
-
-  return { handleZuoraSubmit };
-}

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

@@ -1,72 +0,0 @@
-import { Currency } from '@stigg/js-client-sdk';
-
-// Zuora Payment Form v3 API types
-declare global {
-  interface Window {
-    Zuora: (publishableKey: string) => ZuoraInstance;
-  }
-}
-
-export type ZuoraInstance = {
-  createPaymentForm: (config: ZuoraPaymentFormConfig) => Promise<ZuoraPaymentForm>;
-};
-
-export type ZuoraPaymentFormConfig = {
-  locale?: string;
-  region?: string;
-  currency?: string;
-  amount?: string;
-  profile?: string;
-  createPaymentSession: () => Promise<string>;
-  onComplete: (result: ZuoraPaymentResult) => Promise<void>;
-};
-
-export type ZuoraPaymentForm = {
-  mount: (containerId: string) => void;
-};
-
-export type ZuoraPaymentResult = {
-  success: boolean;
-  paymentMethodId?: string;
-  paymentId?: string;
-  error?: {
-    type: string;
-    code: string;
-    message: string;
-  };
-};
-
-export function isZuoraLibraryAvailable(): boolean {
-  return !!window.Zuora;
-}
-
-export function loadZuoraLibrary() {
-  const script = document.createElement('script');
-  script.type = 'text/javascript';
-  script.src = 'https://js.zuora.com/payment/v3/zuora.js';
-  script.async = true;
-
-  script.onerror = () => {
-    throw new Error('Failed to load Zuora library');
-  };
-
-  document.head.appendChild(script);
-}
-
-export function createZuoraPaymentFormConfig(
-  createPaymentSession: () => Promise<string>,
-  onComplete: (result: ZuoraPaymentResult) => Promise<void>,
-  currency: Currency,
-  billingCountryCode?: string,
-): ZuoraPaymentFormConfig {
-  const AUTH_AMOUNT = '1';
-
-  return {
-    locale: billingCountryCode || 'en',
-    region: billingCountryCode?.toUpperCase() || 'US',
-    currency,
-    amount: AUTH_AMOUNT,
-    createPaymentSession,
-    onComplete,
-  };
-}

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

@@ -1,69 +0,0 @@
-import styled from '@utils/style';
-import Box from '@mui/material/Box';
-import Chip from '@mui/material/Chip';
-import Color from 'color';
-
-export const BillingPeriodPickerContainer = styled(Box)`
-  margin: 16px 0;
-`;
-
-export const BillingPeriodButton = styled.button<{
-  $isActive?: boolean;
-  $disabled?: boolean;
-  $isOnlyBillingPeriod?: boolean;
-}>`
-  cursor: ${({ $disabled, $isOnlyBillingPeriod }) =>
-    $disabled ? 'default' : $isOnlyBillingPeriod ? 'default' : 'pointer'};
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 2px 8px;
-  border-radius: 10px;
-  border: ${({ theme, $isActive, $isOnlyBillingPeriod }) => {
-    let borderColor = theme.stigg.palette.outlinedBorder;
-    if ($isOnlyBillingPeriod) {
-      borderColor = 'transparent';
-    } else if ($isActive) {
-      borderColor = theme.stigg.palette.outlinedRestingBorder;
-    }
-    return `1px solid ${borderColor}`;
-  }};
-  background: ${({ theme, $isActive, $isOnlyBillingPeriod }) => {
-    if ($isOnlyBillingPeriod) {
-      return 'transparent';
-    }
-    if ($isActive) {
-      return Color(theme.stigg.palette.primary).alpha(0.15).toString();
-    }
-    return 'transparent';
-  }};
-  text-transform: none;
-  text-align: start;
-  height: 36px;
-
-  &.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

@@ -1,86 +0,0 @@
-import { partition } from 'lodash';
-
-import Box from '@mui/material/Box';
-import Radio from '@mui/material/Radio';
-import { BillingPeriod, Plan, Price } 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 '../../configurations/textOverrides';
-
-const BillingPeriodOption = ({
-  billingPeriod,
-  isOnlyBillingPeriod,
-}: {
-  billingPeriod: BillingPeriod;
-  isOnlyBillingPeriod: boolean;
-}) => {
-  const { billingPeriod: selectedBillingPeriod, setBillingPeriod } = usePlanStepModel();
-  const isActive = selectedBillingPeriod === billingPeriod;
-
-  return (
-    <BillingPeriodButton
-      onClick={() => setBillingPeriod(billingPeriod)}
-      $isActive={isActive}
-      $isOnlyBillingPeriod={isOnlyBillingPeriod}>
-      <Radio
-        checked={isActive}
-        onChange={() => setBillingPeriod(billingPeriod)}
-        value={billingPeriod}
-        disabled={isOnlyBillingPeriod}
-        inputProps={{ 'aria-label': formatBillingPeriod(billingPeriod) }}
-        sx={{ padding: 0, marginRight: '8px' }}
-      />
-
-      <Box>
-        <Typography variant="h3" color="primary">
-          {formatBillingPeriod(billingPeriod)}
-        </Typography>
-      </Box>
-    </BillingPeriodButton>
-  );
-};
-
-type BillingPeriodPickerProps = {
-  plan?: Plan;
-  checkoutLocalization: CheckoutLocalization;
-};
-
-export function BillingPeriodPicker({ plan, checkoutLocalization }: BillingPeriodPickerProps) {
-  const [monthlyPrices, annualPrices] = partition(
-    plan?.pricePoints,
-    (price: Price) => price.billingPeriod === BillingPeriod.Monthly,
-  );
-
-  const hasBothBillingPeriods = !!monthlyPrices?.length && !!annualPrices?.length;
-  if (!hasBothBillingPeriods) {
-    return null;
-  }
-
-  return (
-    <BillingPeriodPickerContainer>
-      <Typography variant="h6" color="primary">
-        {checkoutLocalization.billingPeriodsTitle}
-      </Typography>
-
-      <BillingPeriodOptions>
-        {!!monthlyPrices?.length && (
-          <BillingPeriodOption
-            key={BillingPeriod.Monthly}
-            billingPeriod={BillingPeriod.Monthly}
-            isOnlyBillingPeriod={!hasBothBillingPeriods}
-          />
-        )}
-        {!!annualPrices?.length && (
-          <BillingPeriodOption
-            key={BillingPeriod.Annually}
-            billingPeriod={BillingPeriod.Annually}
-            isOnlyBillingPeriod={!hasBothBillingPeriods}
-          />
-        )}
-      </BillingPeriodOptions>
-    </BillingPeriodPickerContainer>
-  );
-}