Merge pull request #1071 from brave/master

Production Release 2024-02-06

src/auth/components/AdvertiserDetailsForm.tsx

@@ -15,6 +15,7 @@ import { PaymentType } from "graphql/types";
 import { AdvertiserAgreed } from "auth/components/AdvertiserAgreed";
 import { FormikSubmitButton } from "form/FormikButton";
 import { AdvertiserSchema } from "validation/AdvertiserSchema";
+import { useState } from "react";
 
 export function AdvertiserDetailsForm() {
   const history = useHistory();
@@ -23,6 +24,9 @@ export function AdvertiserDetailsForm() {
   const requiresPaymentAgree =
     advertiser.selfServiceManageCampaign &&
     advertiser.selfServicePaymentType !== PaymentType.Netsuite;
+  const [initial, setInitial] = useState<AdvertiserForm>(
+    initialAdvertiserForm(!requiresPaymentAgree),
+  );
 
   const [mutation] = useUpdateAdvertiserMutation({
     async onCompleted() {
@@ -34,25 +38,24 @@ export function AdvertiserDetailsForm() {
 
   const { data, loading } = useAdvertiserBillingAddressQuery({
     variables: { id: advertiser.id },
+    onCompleted: (data) => {
+      setInitial(initialAdvertiserForm(!requiresPaymentAgree, data.advertiser));
+    },
   });
 
-  const initial = initialAdvertiserForm(
-    !requiresPaymentAgree,
-    data?.advertiser,
-  );
-
   return (
     <Container maxWidth="lg" sx={{ mt: 5 }}>
       <Formik
         initialValues={initial}
+        enableReinitialize
         onSubmit={async (v: AdvertiserForm, { setSubmitting }) => {
           setSubmitting(true);
           await mutation({
             variables: {
               updateAdvertiserInput: {
                 id: advertiser.id,
                 agreed: v.terms && v.tracking && v.payment,
-                billingAddress: v.address,
+                billingAddress: v.address.id ? undefined : v.address,
               },
             },
           });

src/auth/components/types.ts

@@ -5,6 +5,7 @@ export type AdvertiserForm = {
   payment: boolean;
   terms: boolean;
   address: {
+    id?: string | null;
     street1: string;
     street2?: string | null;
     city: string;
@@ -18,17 +19,18 @@ type MaybeAddress = AdvertiserBillingAddressFragment;
 export const initialAdvertiserForm = (
   paymentAgree: boolean,
   maybeAddress?: MaybeAddress | null,
-): AdvertiserForm => ({
-  tracking: false,
-  payment: paymentAgree,
-  terms: false,
-  address: maybeAddress?.billingAddress
-    ? { ...maybeAddress.billingAddress }
-    : {
-        street1: "",
-        city: "",
-        state: "",
-        country: "",
-        zipcode: "",
-      },
-});
+): AdvertiserForm => {
+  return {
+    tracking: false,
+    payment: paymentAgree,
+    terms: false,
+    address: {
+      id: maybeAddress?.billingAddress?.id ?? null,
+      street1: maybeAddress?.billingAddress?.street1 ?? "",
+      city: maybeAddress?.billingAddress?.city ?? "",
+      state: maybeAddress?.billingAddress?.state ?? "",
+      country: maybeAddress?.billingAddress?.country ?? "",
+      zipcode: maybeAddress?.billingAddress?.zipcode ?? "",
+    },
+  };
+};

src/graphql/advertiser.graphql

@@ -11,6 +11,7 @@ fragment AdvertiserSummary on Advertiser {
 
 fragment AdvertiserBillingAddress on Advertiser {
   billingAddress {
+    id
     street1
     street2
     city

src/validation/AdvertiserSchema.tsx

@@ -11,6 +11,7 @@ export const AdvertiserSchema = object().shape({
     .default(false)
     .isTrue("Terms & Conditions acknowledgement is required"),
   address: object().shape({
+    id: string().nullable(),
     street1: string().label("Street address").required(),
     street2: string().label("Street address line 2").nullable(),
     city: string().label("City").required(),