fix: edit values

brave · Aug 25, 2023 · 4460f72 · 4460f72
1 parent 4da05b3
commit 4460f72
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 26 deletions.
diff --git a/src/components/Creatives/CreateCreativeButton.tsx b/src/components/Creatives/CreateCreativeButton.tsx
@@ -47,7 +47,10 @@ export function CreateCreativeButton() {
         e.preventDefault();
         create({
           variables: {
-            input: { ...newMeta.value, advertiserId: advertiser.id },
+            input: {
+              ..._.omit(newMeta.value, "included"),
+              advertiserId: advertiser.id,
+            },
           },
         });
       }}

diff --git a/src/components/Creatives/CreativeSpecificPreview.tsx b/src/components/Creatives/CreativeSpecificPreview.tsx
@@ -5,15 +5,18 @@ import { Stack, Typography } from "@mui/material";
 import { PropsWithChildren } from "react";
 import { useField } from "formik";
 import { Creative } from "user/views/adsManager/types";
+import { DisplayError } from "user/views/adsManager/views/advanced/components/review/components/ReviewField";
 
 interface Props extends PropsWithChildren {
   options: Creative[];
   useSimpleHeader?: boolean;
+  error?: string;
 }
 
 export function CreativeSpecificPreview({
   options,
   useSimpleHeader,
+  error,
   children,
 }: Props) {
   const [, format] = useField<CampaignFormat>("format");
@@ -30,6 +33,17 @@ export function CreativeSpecificPreview({
     ));
   }
 
+  if (error) {
+    return (
+      <>
+        <Typography variant="overline" component="span" paddingRight={1}>
+          Ads
+        </Typography>
+        <DisplayError error={error} />
+      </>
+    );
+  }
+
   return (
     <>
       {useSimpleHeader && (

diff --git a/src/components/Creatives/NotificationSelect.tsx b/src/components/Creatives/NotificationSelect.tsx
@@ -14,6 +14,7 @@ export function NotificationSelect(props: {
   useSelectedAdStyle?: boolean;
   showState?: boolean;
   index?: number;
+  hideCreated?: boolean;
 }) {
   const index = props.index;
   const { values, setFieldValue } = useFormikContext<CampaignForm>();
@@ -32,7 +33,7 @@ export function NotificationSelect(props: {
       const foundIndex = values.adSets[index].creatives.findIndex(
         (co) => c.id === co.id,
       );
-      if (foundIndex >= 0) {
+      if (foundIndex !== undefined) {
         void setFieldValue(
           `adSets.${index}.creatives.${foundIndex}.included`,
           selected,
@@ -72,14 +73,16 @@ export function NotificationSelect(props: {
               body={co.payloadNotification?.body}
               selected={isSelected(co)}
             />
-            <Typography
-              variant="caption"
-              marginLeft={1}
-              color={isSelected(co) ? "text.primary" : "rgba(0, 0, 0, 0.3)"}
-              textAlign="right"
-            >
-              created {moment(co.createdAt).fromNow()}
-            </Typography>
+            {!(props.hideCreated ?? false) && (
+              <Typography
+                variant="caption"
+                marginLeft={1}
+                color={isSelected(co) ? "text.primary" : "rgba(0, 0, 0, 0.3)"}
+                textAlign="right"
+              >
+                created {moment(co.createdAt).fromNow()}
+              </Typography>
+            )}
           </BoxContainer>
         ))}
       </Stack>

diff --git a/src/user/library/index.ts b/src/user/library/index.ts
@@ -137,7 +137,7 @@ export function editCampaignValues(
         })),
         isNotTargeting: seg.length === 1 && seg[0].code === "Svp7l-zGN",
         name: adSet.name || adSet.id.split("-")[0],
-        creatives: creativeList(advertiserId, adSet.ads),
+        creatives: creativeList(advertiserId, adSet.ads, ads),
       } as AdSetForm;
     }),
     isCreating: false,
@@ -165,19 +165,24 @@ export function editCampaignValues(
 
 function creativeList(
   advertiserId: string,
-  ads?: AdFragment[] | null,
+  adSetAds?: AdFragment[] | null,
+  allAds?: AdFragment[] | null,
   includeId?: boolean,
 ): Creative[] {
-  return _.uniqBy(
-    (ads ?? [])
+  const filterAds = (a?: AdFragment[] | null, included?: boolean) => {
+    return (a ?? [])
       .filter((ad) => ad.creative !== null && ad.state !== "deleted")
       .map((ad) => {
         const c = ad.creative;
         return {
-          ...validCreativeFields(c, advertiserId, true),
+          ...validCreativeFields(c, advertiserId, included),
           creativeInstanceId: includeId !== false ? ad.id : undefined,
         };
-      }),
+      });
+  };
+
+  return _.uniqBy(
+    [...filterAds(adSetAds, true), ...filterAds(allAds, false)],
     "id",
   );
 }

diff --git a/src/user/views/adsManager/views/advanced/components/adSet/NewAdSet.tsx b/src/user/views/adsManager/views/advanced/components/adSet/NewAdSet.tsx
@@ -13,15 +13,22 @@ import { CampaignForm, initialAdSet } from "user/views/adsManager/types";
 import { useRef } from "react";
 import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
 import { useIsEdit } from "form/FormikHelpers";
+import { useAdvertiserCreatives } from "user/hooks/useAdvertiserCreatives";
 
 export function NewAdSet() {
+  const { creatives } = useAdvertiserCreatives();
   const { isEdit } = useIsEdit();
   const history = useHistory();
   const { values } = useFormikContext<CampaignForm>();
   const params = new URLSearchParams(history.location.search);
   const selected = useRef(0);
   selected.current = Number(params.get("current") ?? 0);
 
+  const initial = {
+    ...initialAdSet,
+    creatives,
+  };
+
   return (
     <>
       <FieldArray name="adSets">
@@ -77,7 +84,7 @@ export function NewAdSet() {
                 pb={0}
                 pt={0}
                 component={Button}
-                onClick={() => helper.push(initialAdSet)}
+                onClick={() => helper.push(initial)}
                 border="1px solid #ededed"
               >
                 <Typography variant="overline" color="primary">

diff --git a/src/user/views/adsManager/views/advanced/components/review/components/AdSetReview.tsx b/src/user/views/adsManager/views/advanced/components/review/components/AdSetReview.tsx
@@ -51,15 +51,11 @@ export function AdSetReview({ adSet, idx, errors }: Props) {
         conversions={adSet.conversions}
         convErrors={adSetError?.conversions}
       />
-      {hasErrors ? (
-        <ReviewField
-          caption="Ads"
-          value={mapToString(included)}
-          error={hasErrors ? (adSetError?.creatives as string) : ""}
-        />
-      ) : (
-        <CreativeSpecificPreview options={included} useSimpleHeader />
-      )}
+      <CreativeSpecificPreview
+        options={included}
+        useSimpleHeader
+        error={hasErrors ? (adSetError?.creatives as string) : ""}
+      />
     </ReviewContainer>
   );
 }