feat(graphql): transition to specific campaign update mutation (#1284)

Now that we have specific update mutations for campaign, we should switch to them
brave · Aug 2, 2024 · 2eb52df · 2eb52df
1 parent b464fdd
commit 2eb52df
Show file tree

Hide file tree

Showing 18 changed files with 439 additions and 281 deletions.
diff --git a/src/components/Conversion/ConversionDisplay.tsx b/src/components/Conversion/ConversionDisplay.tsx
@@ -1,18 +1,17 @@
 import { Conversion } from "@/user/views/adsManager/types";
-import { FormikErrors } from "formik";
 import { ReviewField } from "@/user/views/adsManager/views/advanced/components/review/components/ReviewField";
-import _ from "lodash";
 import { msg } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
+import { FormikErrors } from "formik";
 
 interface Props {
-  conversions: Conversion[];
-  convErrors?: FormikErrors<Conversion>[] | string[] | string;
+  conversion?: Conversion;
+  convErrors?: FormikErrors<Conversion>;
 }
 
-export function ConversionDisplay({ conversions, convErrors }: Props) {
+export function ConversionDisplay({ conversion, convErrors }: Props) {
   const { _: lingui } = useLingui();
-  if (conversions.length === 0) {
+  if (!conversion) {
     return (
       <ReviewField
         caption={msg`Conversion`}
@@ -21,39 +20,18 @@ export function ConversionDisplay({ conversions, convErrors }: Props) {
     );
   }
 
-  function extractConversionError(
-    idx: number,
-    field: keyof Conversion,
-  ): string | undefined {
-    const errorObj = convErrors?.[idx];
-
-    if (!errorObj) {
-      return undefined;
-    }
-
-    if (_.isString(errorObj)) {
-      return errorObj;
-    }
-
-    return errorObj[field];
-  }
-
   return (
-    <>
-      {conversions.map((c, idx) => (
-        <div key={idx}>
-          <ReviewField
-            caption={msg`Conversion URL Pattern`}
-            value={c.urlPattern}
-            error={extractConversionError(idx, "urlPattern")}
-          />
-          <ReviewField
-            caption={msg`Conversion Observation Window`}
-            value={`${c.observationWindow} days`}
-            error={extractConversionError(idx, "observationWindow")}
-          />
-        </div>
-      ))}
-    </>
+    <div>
+      <ReviewField
+        caption={msg`Conversion URL Pattern`}
+        value={conversion.urlPattern}
+        error={convErrors?.urlPattern}
+      />
+      <ReviewField
+        caption={msg`Conversion Observation Window`}
+        value={`${conversion.observationWindow} days`}
+        error={convErrors?.observationWindow}
+      />
+    </div>
   );
 }
diff --git a/src/components/Location/LocationPicker.tsx b/src/components/Location/LocationPicker.tsx
@@ -7,20 +7,26 @@ import { ActiveGeocodesDocument, GeocodeInput } from "@/graphql-client/graphql";
 import { useLingui } from "@lingui/react";
 import { msg, Trans } from "@lingui/macro";
 import { useQuery } from "@apollo/client";
+import { useIsEdit } from "@/form/FormikHelpers";
 
 const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
 const checkedIcon = <CheckBoxIcon fontSize="small" />;
 
 export const LocationPicker = () => {
-  const { data } = useQuery(ActiveGeocodesDocument);
-  const sorted = _.sortBy(data?.geocodes ?? [], "code");
+  const { isDraft } = useIsEdit();
+  const { data } = useQuery(ActiveGeocodesDocument, { skip: !isDraft });
+  const sorted = _.sortBy(
+    (data?.geocodes ?? []).filter((c) => c.code !== "OTHER"),
+    "code",
+  );
   const [formProps, meta, helper] = useField<GeocodeInput[]>("geoTargets");
   const errorMessage = meta.error;
   const { _: lingui } = useLingui();
 
   return (
     <Autocomplete
       sx={{ mt: 2 }}
+      disabled={!isDraft}
       limitTags={20}
       getLimitTagsText={(count) => <Trans>+{count} more</Trans>}
       multiple

diff --git a/src/components/Segment/SegmentPicker.tsx b/src/components/Segment/SegmentPicker.tsx
@@ -20,10 +20,11 @@ interface Props {
 
 export const SegmentPicker = ({ idx }: Props) => {
   const { data } = useQuery(SegmentsDocument);
-  const activeSegments = [...(data?.segments?.data ?? [])].sort((a, b) => {
-    if (a.name === "Untargeted" || b.name === "Untargeted") return 1;
-    return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
-  });
+  const activeSegments = [...(data?.segments?.data ?? [])]
+    .filter((s) => s.code !== "Svp7l-zGN")
+    .sort((a, b) => {
+      return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+    });
   const { _: lingui } = useLingui();
 
   const [, targetMeta] = useField<boolean>(`adSets.${idx}.isNotTargeting`);
@@ -34,12 +35,9 @@ export const SegmentPicker = ({ idx }: Props) => {
 
   useEffect(() => {
     if (targetMeta.value) {
-      // eslint-disable-next-line lingui/no-unlocalized-strings
-      helper.setValue([{ code: "Svp7l-zGN", name: "Untargeted" }]);
+      helper.setValue([]);
     } else {
-      const onlyUntargeted =
-        meta.value.length === 1 && meta.value[0].code === "Svp7l-zGN";
-      helper.setValue(onlyUntargeted ? [] : meta.value);
+      helper.setValue(meta.value);
     }
   }, [targetMeta.value]);
 
@@ -61,10 +59,7 @@ export const SegmentPicker = ({ idx }: Props) => {
           disableCloseOnSelect
           autoHighlight
           groupBy={(option) => {
-            const name = option.name.split("-")[0];
-            // eslint-disable-next-line lingui/no-unlocalized-strings
-            if (name === "Untargeted") return "General";
-            return name;
+            return option.name.split("-")[0];
           }}
           getOptionLabel={(option) => segmentNameWithNoDash(option.name)}
           renderOption={(props, option, { selected }) => (

diff --git a/src/graphql-client/gql.ts b/src/graphql-client/gql.ts