@stigg/react-sdk 6.9.0 → 6.10.0

package/src/components/checkout/summary/CheckoutSummary.tsx

@@ -21,6 +21,8 @@ import {
 } from '../hooks';
 import { PromotionCodeSection } from '../promotionCode';
 import { useSubmit } from '../steps/payment/stripe';
+import { useZuoraIntegration } from '../steps/payment/zuora/useZuoraIntegration';
+import { useZuoraSubmit } from '../steps/payment/zuora/useZuoraSubmit';
 import { CheckoutContainerProps } from '../CheckoutContainer';
 import { CheckoutCaptions } from './components/CheckoutCaptions';
 import {
@@ -113,10 +115,10 @@ export const CheckoutSummary = ({
   isWidgetWatermarkEnabled,
 }: CheckoutContainerProps & { isFreeDowngrade: boolean; isWidgetWatermarkEnabled: boolean }) => {
   const [isCheckoutCompletedSuccessfully, setIsCheckoutCompletedSuccessfully] = useState(false);
-  const { setErrorMessage } = usePaymentStepModel();
+  const { setErrorMessage, useNewPaymentMethod } = usePaymentStepModel();
   const progressBar = useProgressBarModel();
   const subscription = useSubscriptionModel();
-  const { checkoutState, checkoutLocalization } = useCheckoutModel();
+  const { checkoutState, checkoutLocalization, checkoutSuccess, widgetState } = useCheckoutModel();
   const { plan, activeSubscription } = checkoutState || {};
   const planPrices = useChargesSort(
     plan?.pricePoints?.filter((price) => price.billingPeriod === subscription.billingPeriod) || [],
@@ -124,10 +126,13 @@ export const CheckoutSummary = ({
   const [baseCharges, usageCharges] = partition(planPrices, (price) => price.pricingModel === BillingModel.FlatFee);
   const [baseCharge] = baseCharges || [];
   const isLastStep = isFreeDowngrade || (progressBar.isCheckoutComplete && progressBar.isLastStep);
+  const { isZuoraIntegration } = useZuoraIntegration();
+
+  const isCheckoutCompleted = isCheckoutCompletedSuccessfully || checkoutSuccess;
 
   const { subscriptionPreview, isFetchingSubscriptionPreview } = usePreviewSubscription({ onMockCheckoutPreview });
 
-  const { handleSubmit, isLoading } = useSubmit({
+  const { handleSubmit: handleStripeSubmit, isLoading: isStripeLoading } = useSubmit({
     isMocked: !!onMockCheckoutPreview, // This is a hack to make the submit button work with mocked data
     disableSuccessAnimation,
     onCheckout,
@@ -138,12 +143,29 @@ export const CheckoutSummary = ({
     },
   });
 
+  const { handleZuoraSubmit } = useZuoraSubmit({
+    onCheckout,
+    onCheckoutCompleted,
+    disableSuccessAnimation,
+    onSuccess: () => {
+      progressBar.markStepAsCompleted(progressBar.progressBarState.activeStep);
+    },
+  });
+
   const handleCheckout = async (e: any) => {
-    if (isCheckoutCompletedSuccessfully) {
+    if (isCheckoutCompleted) {
       return;
     }
 
-    const { errorMessage } = (await handleSubmit(e)) || {};
+    let result;
+
+    if (isZuoraIntegration && !useNewPaymentMethod) {
+      result = await handleZuoraSubmit();
+    } else {
+      result = await handleStripeSubmit(e);
+    }
+
+    const { errorMessage } = result || {};
     if (errorMessage) {
       setErrorMessage(errorMessage);
       setIsCheckoutCompletedSuccessfully(false);
@@ -152,6 +174,9 @@ export const CheckoutSummary = ({
     }
   };
 
+  // This is sad
+  const isLoading = isZuoraIntegration && !useNewPaymentMethod ? widgetState.readOnly : isStripeLoading;
+
   const onCheckoutClick = async (e: any): Promise<void> => {
     if (isLoading) {
       return;
@@ -167,7 +192,7 @@ export const CheckoutSummary = ({
   const { immediateInvoice, recurringInvoice } = subscriptionPreview || {};
   const checkoutHasChanges =
     !!subscriptionPreview && (!!immediateInvoice?.proration || !!subscriptionPreview.hasScheduledUpdates);
-  const showPromotionCodeLine = !disablePromotionCode && !isFreeDowngrade;
+  const showPromotionCodeLine = !disablePromotionCode && !isFreeDowngrade && !isZuoraIntegration;
   const showDiscountLine = !!recurringInvoice?.discountDetails && !isFreeDowngrade;
   const hasDiscounts = showPromotionCodeLine || showDiscountLine;
 
@@ -376,50 +401,52 @@ export const CheckoutSummary = ({
           billingPeriod={subscription.billingPeriod}
         />
 
-        <Button
-          $success={isCheckoutCompletedSuccessfully}
-          $error={isLastStep && isFreeDowngrade}
-          disabled={
-            isLoading ||
-            isFetchingSubscriptionPreview ||
-            progressBar.progressBarState.isDisabled ||
-            (isLastStep && !checkoutHasChanges)
-          }
-          className="stigg-checkout-summary-cta-button"
-          sx={{ textTransform: 'none', borderRadius: '10px', marginTop: '24px', height: '36px' }}
-          variant="contained"
-          size="medium"
-          onClick={(e: any) => {
-            void onCheckoutClick(e);
-          }}
-          fullWidth>
-          <Typography
-            className="stigg-checkout-summary-cta-button-text"
-            variant="h3"
-            color="white"
-            style={{ display: 'flex' }}>
-            {isCheckoutCompletedSuccessfully ? (
-              <Icon icon="Check" style={{ display: 'contents' }} />
-            ) : isLoading || isFetchingSubscriptionPreview ? (
-              <CircularProgress size={20} sx={{ color: 'white' }} />
-            ) : (
-              resolveCheckoutButtonText({
-                isLastStep,
-                checkoutHasChanges,
-                isFreeDowngrade,
-                checkoutLocalization,
-                isPlanUpdate: !!activeSubscription && activeSubscription?.plan.id === plan?.id,
-              })
-            )}
-          </Typography>
-        </Button>
+        {(!isLastStep || !isZuoraIntegration || (isZuoraIntegration && !useNewPaymentMethod)) && (
+          <Button
+            $success={isCheckoutCompleted}
+            $error={isLastStep && isFreeDowngrade}
+            disabled={
+              isLoading ||
+              isFetchingSubscriptionPreview ||
+              progressBar.progressBarState.isDisabled ||
+              (isLastStep && !checkoutHasChanges)
+            }
+            className="stigg-checkout-summary-cta-button"
+            sx={{ textTransform: 'none', borderRadius: '10px', marginTop: '24px', height: '36px' }}
+            variant="contained"
+            size="medium"
+            onClick={(e: any) => {
+              void onCheckoutClick(e);
+            }}
+            fullWidth>
+            <Typography
+              className="stigg-checkout-summary-cta-button-text"
+              variant="h3"
+              color="white"
+              style={{ display: 'flex' }}>
+              {isCheckoutCompleted ? (
+                <Icon icon="Check" style={{ display: 'contents' }} />
+              ) : isLoading || isFetchingSubscriptionPreview ? (
+                <CircularProgress size={20} sx={{ color: 'white' }} />
+              ) : (
+                resolveCheckoutButtonText({
+                  isLastStep,
+                  checkoutHasChanges,
+                  isFreeDowngrade,
+                  checkoutLocalization,
+                  isPlanUpdate: !!activeSubscription && activeSubscription?.plan.id === plan?.id,
+                })
+              )}
+            </Typography>
+          </Button>
+        )}
       </SummaryCard>
       <PoweredByStigg
         source="checkout"
         showWatermark={isWidgetWatermarkEnabled}
         style={{ marginTop: 8, display: 'flex', justifyContent: 'center' }}
       />
-      {!disableSuccessAnimation && isCheckoutCompletedSuccessfully && (
+      {!disableSuccessAnimation && isCheckoutCompleted && (
         <CheckoutSuccess checkoutLocalization={checkoutLocalization} />
       )}
     </SummaryContainer>