Merge pull request #9709 from neinteractiveliterature/always-regenera…

…te-payment-intent Manually refresh Stripe payment intent whenever order details change
neinteractiveliterature · Oct 26, 2024 · 9e933a9 · 9e933a9
2 parents 8a6eaa6 + 26d8116
commit 9e933a9
Showing 1 changed file with 29 additions and 7 deletions.
diff --git a/app/javascript/Store/OrderPaymentModal.tsx b/app/javascript/Store/OrderPaymentModal.tsx
@@ -1,6 +1,6 @@
-import { useState, useCallback, useMemo, useContext } from 'react';
+import { useState, useCallback, useMemo, useContext, useEffect } from 'react';
 import { Modal } from 'react-bootstrap4-modal';
-import { ApolloError, useSuspenseQuery } from '@apollo/client';
+import { ApolloError, useApolloClient } from '@apollo/client';
 import { LinkAuthenticationElement, PaymentElement } from '@stripe/react-stripe-js';
 import { ErrorDisplay, MultipleChoiceInput } from '@neinteractiveliterature/litform';
 
@@ -125,18 +125,40 @@ export type OrderPaymentModalProps = Omit<OrderPaymentModalContentsProps, 'order
 };
 
 function OrderPaymentModal({ visible, onCancel, onComplete, order }: OrderPaymentModalProps): JSX.Element {
-  const { data, error } = useSuspenseQuery(CurrentPendingOrderPaymentIntentClientSecretQueryDocument);
+  const [paymentIntentClientSecret, setPaymentIntentClientSecret] = useState<string>();
+  const [error, setError] = useState<ApolloError>();
+  const client = useApolloClient();
+
+  useEffect(() => {
+    const refreshPaymentIntentClientSecret = async () => {
+      try {
+        const result = await client.query({
+          query: CurrentPendingOrderPaymentIntentClientSecretQueryDocument,
+          fetchPolicy: 'no-cache',
+        });
+        setPaymentIntentClientSecret(
+          result.data.convention.my_profile?.current_pending_order?.payment_intent_client_secret,
+        );
+      } catch (error) {
+        setError(error);
+      }
+    };
+
+    setPaymentIntentClientSecret(undefined);
+
+    if (order != null && order.total_price.fractional > 0) {
+      refreshPaymentIntentClientSecret();
+    }
+  }, [order, order?.total_price, order?.order_entries, client]);
 
   if (error) {
     return <ErrorDisplay graphQLError={error} />;
   }
 
   return (
     <Modal visible={visible && order != null} dialogClassName="modal-lg">
-      {visible && order != null && (
-        <LazyStripeElementsContainer
-          options={{ clientSecret: data.convention.my_profile?.current_pending_order?.payment_intent_client_secret }}
-        >
+      {visible && paymentIntentClientSecret && order != null && (
+        <LazyStripeElementsContainer options={{ clientSecret: paymentIntentClientSecret }}>
           <OrderPaymentModalContents onCancel={onCancel} onComplete={onComplete} order={order} />
         </LazyStripeElementsContainer>
       )}