fix(payment): allow switching between payment methods (#1327)

The way campaigns were updated has changed, we need to make sure if a person wants to change their payment method they can
brave · Aug 21, 2024 · 7365a93 · 7365a93
1 parent c7b636f
commit 7365a93
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 39 deletions.
diff --git a/src/checkout/hooks/useCreatePaymentSession.ts b/src/checkout/hooks/useCreatePaymentSession.ts
@@ -3,24 +3,28 @@ import { useCallback, useState } from "react";
 import { useAdvertiser } from "@/auth/hooks/queries/useAdvertiser";
 import { useHistory } from "react-router-dom";
 import { t } from "@lingui/macro";
+import { PaymentType } from "@/graphql-client/graphql";
 
 export function useCreatePaymentSession() {
   const [loading, setLoading] = useState(false);
   const history = useHistory();
 
   const { advertiser } = useAdvertiser();
-  const replaceSession = useCallback(async (campaignId: string) => {
-    setLoading(true);
-    await createPaymentSession(advertiser.id, campaignId ?? "")
-      .then((url) => {
-        window.location.replace(url);
-      })
-      .catch(() => {
-        alert(t`Unable to create payment session. Please try again.`);
-        setLoading(false);
-        history.push(`/user/main/adsmanager/advanced/${campaignId}/review`);
-      });
-  }, []);
+  const replaceSession = useCallback(
+    async (campaignId: string, paymentMethod?: PaymentType) => {
+      setLoading(true);
+      await createPaymentSession(advertiser.id, campaignId ?? "", paymentMethod)
+        .then((url) => {
+          window.location.replace(url);
+        })
+        .catch(() => {
+          alert(t`Unable to create payment session. Please try again.`);
+          setLoading(false);
+          history.push(`/user/main/adsmanager/advanced/${campaignId}/review`);
+        });
+    },
+    [],
+  );
 
   return { createPaymentSession: replaceSession, loading };
 }
diff --git a/src/checkout/lib/index.ts b/src/checkout/lib/index.ts
@@ -1,9 +1,11 @@
 import { buildAdServerEndpoint } from "@/util/environment";
 import { t } from "@lingui/macro";
+import { PaymentType } from "@/graphql-client/graphql";
 
 export async function createPaymentSession(
   advertiserId: string,
   campaignId: string,
+  paymentMethod?: PaymentType,
 ): Promise<string> {
   const res = await fetch(buildAdServerEndpoint("/payments/checkout-session"), {
     method: "POST",
@@ -12,7 +14,11 @@ export async function createPaymentSession(
     headers: {
       "Content-Type": "application/json",
     },
-    body: JSON.stringify({ advertiserId, campaignId }),
+    body: JSON.stringify({
+      advertiserId,
+      campaignId,
+      paymentMethod,
+    }),
   });
 
   if (res.status !== 200) {

diff --git a/src/user/views/adsManager/views/advanced/components/form/EditCampaign.tsx b/src/user/views/adsManager/views/advanced/components/form/EditCampaign.tsx
@@ -14,8 +14,10 @@ import { useTrackWithMatomo } from "@/hooks/useTrackWithMatomo";
 import { msg } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
 import {
+  AdsManagerUpdateCampaignInput,
   AdvertiserCampaignsDocument,
   LoadCampaignDocument,
+  PaymentType,
 } from "@/graphql-client/graphql";
 import { useMutation, useQuery } from "@apollo/client";
 import { graphql } from "@/graphql-client/index";
@@ -57,31 +59,7 @@ export function EditCampaign() {
   });
 
   const hasPaymentIntent = initialData?.campaign?.hasPaymentIntent;
-  const [mutation] = useMutation(UpdateCampaign, {
-    onCompleted(data) {
-      trackMatomoEvent("campaign", "update-success");
-      if (hasPaymentIntent) {
-        history.push(
-          `/user/main/complete/edit?referenceId=${data.adsManagerUpdateCampaign.id}`,
-        );
-      } else {
-        void createPaymentSession(data.adsManagerUpdateCampaign.id);
-      }
-    },
-    onError() {
-      trackMatomoEvent("campaign", "update-failed");
-      alert(_(msg`Unable to Update Campaign.`));
-    },
-    refetchQueries: [
-      {
-        query: AdvertiserCampaignsDocument,
-        variables: {
-          id: data.id,
-          filter: { from: fromDate?.toISOString() },
-        },
-      },
-    ],
-  });
+  const [mutation] = useMutation(UpdateCampaign);
 
   if (error || priceError) {
     return (
@@ -102,6 +80,38 @@ export function EditCampaign() {
     return <LinearProgress />;
   }
 
+  const doSubmitEdit = async (
+    input: AdsManagerUpdateCampaignInput,
+    payment: PaymentType,
+  ) => {
+    return await mutation({
+      variables: { input },
+      onCompleted(data) {
+        trackMatomoEvent("campaign", "update-success");
+        if (hasPaymentIntent) {
+          history.push(
+            `/user/main/complete/edit?referenceId=${data.adsManagerUpdateCampaign.id}`,
+          );
+        } else {
+          void createPaymentSession(data.adsManagerUpdateCampaign.id, payment);
+        }
+      },
+      onError() {
+        trackMatomoEvent("campaign", "update-failed");
+        alert(_(msg`Unable to Update Campaign.`));
+      },
+      refetchQueries: [
+        {
+          query: AdvertiserCampaignsDocument,
+          variables: {
+            id: data.id,
+            filter: { from: fromDate?.toISOString() },
+          },
+        },
+      ],
+    });
+  };
+
   const initialValues = editCampaignValues(initialData.campaign, data.id);
   return (
     <Container maxWidth="xl">
@@ -110,7 +120,7 @@ export function EditCampaign() {
         onSubmit={async (v: CampaignForm, { setSubmitting }) => {
           setSubmitting(true);
           const input = transformEditForm(v, initialValues, params.campaignId);
-          await mutation({ variables: { input } });
+          await doSubmitEdit(input, v.paymentType);
           setSubmitting(false);
         }}
         validationSchema={CampaignSchema(data.prices)}