chore: generalize how ads are created

src/components/Box/BoxContainer.tsx

@@ -2,16 +2,23 @@ import { PropsWithChildren, ReactNode } from "react";
 import { Box, Typography } from "@mui/material";
 
 export function BoxContainer(
-  props: { header?: ReactNode } & PropsWithChildren,
+  props: { useTypography?: boolean; header?: ReactNode } & PropsWithChildren,
 ) {
+  let header;
+  if (props.header) {
+    header = props.useTypography ? (
+      <Typography variant="h2" marginBottom={1}>
+        {props.header}
+      </Typography>
+    ) : (
+      props.header
+    );
+  }
+
   return (
     <Box mr={2}>
-      {props.header && (
-        <Typography variant="h2" marginBottom={1}>
-          {props.header}
-        </Typography>
-      )}
-      <Box mb={2} display="flex">
+      {header}
+      <Box mb={2} display="flex" flexDirection="column">
         {props.children}
       </Box>
     </Box>

src/components/Campaigns/Status.tsx

@@ -7,11 +7,11 @@ interface Props {
   state: string;
   start?: string;
   end?: string;
+  opaque?: boolean;
 }
 
-export const Status = ({ state, start, end }: Props) => {
+export const Status = ({ state, start, end, opaque }: Props) => {
   let color = calcColorForState(state);
-
   let label = _.startCase(state);
 
   if (start) {
@@ -36,6 +36,7 @@ export const Status = ({ state, start, end }: Props) => {
         sx={{
           backgroundColor: color,
           fontSize: "0.7rem",
+          opacity: opaque === false ? "0.3" : 1,
         }}
       />
     </Tooltip>

src/components/Creatives/CreateCreativeButton.tsx

@@ -0,0 +1,67 @@
+import SaveIcon from "@mui/icons-material/Save";
+import {
+  CampaignForm,
+  Creative,
+  initialCreative,
+} from "user/views/adsManager/types";
+import _ from "lodash";
+import {
+  refetchAdvertiserCreativesQuery,
+  useCreateCreativeMutation,
+} from "graphql/creative.generated";
+import { useField, useFormikContext } from "formik";
+import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
+import { LoadingButton } from "@mui/lab";
+import { validCreativeFields } from "user/library";
+
+export function CreateCreativeButton() {
+  const { values, setFieldValue } = useFormikContext<CampaignForm>();
+  const [, , isCreating] = useField<boolean>("isCreating");
+  const [, newMeta, newHelper] = useField<Creative>("newCreative");
+  const { advertiser } = useAdvertiser();
+
+  const [create, { loading }] = useCreateCreativeMutation({
+    async onCompleted(data) {
+      newHelper.setValue(initialCreative);
+      newHelper.setTouched(false);
+      values.adSets.forEach((adSet, idx) => {
+        void setFieldValue(`adSets.${idx}.creatives`, [
+          ...adSet.creatives,
+          validCreativeFields(data.createCreative, advertiser.id),
+        ]);
+      });
+      isCreating.setValue(false);
+    },
+    refetchQueries: [
+      {
+        ...refetchAdvertiserCreativesQuery({ advertiserId: advertiser.id }),
+      },
+    ],
+  });
+
+  return (
+    <LoadingButton
+      variant="contained"
+      startIcon={<SaveIcon />}
+      onClick={(e) => {
+        e.preventDefault();
+        create({
+          variables: {
+            input: {
+              ..._.omit(newMeta.value, "included"),
+              advertiserId: advertiser.id,
+            },
+          },
+        });
+      }}
+      disabled={
+        newMeta.value?.targetUrlValid !== undefined ||
+        !_.isEmpty(newMeta.error) ||
+        loading
+      }
+      loading={loading}
+    >
+      Add
+    </LoadingButton>
+  );
+}

src/components/Creatives/CreativeSpecificFields.tsx

@@ -0,0 +1,13 @@
+import { useFormikContext } from "formik";
+import { CampaignForm } from "user/views/adsManager/types";
+import { CampaignFormat } from "graphql/types";
+import { NotificationAd } from "user/ads/NotificationAd";
+
+export const CreativeSpecificFields = () => {
+  const { values } = useFormikContext<CampaignForm>();
+
+  if (values.format === CampaignFormat.PushNotification)
+    return <NotificationAd />;
+
+  return null;
+};

src/components/Creatives/CreativeSpecificPreview.tsx

@@ -0,0 +1,65 @@
+import { CampaignFormat } from "graphql/types";
+import { BoxContainer } from "components/Box/BoxContainer";
+import { NotificationPreview } from "components/Creatives/NotificationPreview";
+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");
+
+  let component;
+  if (format.value === CampaignFormat.PushNotification) {
+    component = options.map((c, idx) => (
+      <BoxContainer header={c.name} key={idx} useTypography>
+        <NotificationPreview
+          title={c.payloadNotification?.title}
+          body={c.payloadNotification?.body}
+        />
+      </BoxContainer>
+    ));
+  }
+
+  if (error) {
+    return (
+      <>
+        <Typography variant="overline" component="span" paddingRight={1}>
+          Ads
+        </Typography>
+        <DisplayError error={error} />
+      </>
+    );
+  }
+
+  return (
+    <>
+      {useSimpleHeader && (
+        <Typography variant="overline" component="span" paddingRight={1}>
+          Ads
+        </Typography>
+      )}
+      <Stack
+        direction="row"
+        justifyContent="left"
+        alignItems="center"
+        flexWrap="wrap"
+      >
+        {component}
+        {children}
+      </Stack>
+    </>
+  );
+}

src/user/ads/NotificationPreview.tsx → src/components/Creatives/NotificationPreview.tsx

@@ -1,10 +1,14 @@
-import { useField } from "formik";
-import { Creative } from "user/views/adsManager/types";
 import { Box, Paper, Stack, Typography } from "@mui/material";
 import logo from "../../../brave_logo_icon.png";
+import { useField } from "formik";
+import { CreativeInput } from "graphql/types";
 
-export function NotificationPreview(props: { title?: string; body?: string }) {
-  const [, meta] = useField<Creative>("newCreative");
+export function NotificationPreview(props: {
+  title?: string;
+  body?: string;
+  selected?: boolean;
+}) {
+  const [, meta, ,] = useField<CreativeInput>("newCreative");
 
   return (
     <Box display="flex" justifyContent="center">
@@ -18,6 +22,7 @@ export function NotificationPreview(props: { title?: string; body?: string }) {
           display: "flex",
           justifyContent: "left",
           flexDirection: "row",
+          opacity: props.selected === false ? 0.5 : 1,
         }}
       >
         <Box display="flex" flexDirection="row" justifyContent="center">
@@ -27,10 +32,14 @@ export function NotificationPreview(props: { title?: string; body?: string }) {
           />
           <Stack direction="column" justifyContent="center">
             <Typography sx={{ fontWeight: 600 }} variant="body2">
-              {props.title || meta.value.title || "Title Preview"}
+              {props.title ||
+                meta.value?.payloadNotification?.title ||
+                "Title Preview"}
             </Typography>
             <Typography variant="body2">
-              {props.body || meta.value.body || "Body Preview"}
+              {props.body ||
+                meta.value?.payloadNotification?.body ||
+                "Body Preview"}
             </Typography>
           </Stack>
         </Box>

src/components/Creatives/NotificationSelect.tsx

@@ -0,0 +1,111 @@
+import { Box, Button, Stack, Typography } from "@mui/material";
+import { BoxContainer } from "components/Box/BoxContainer";
+import { NotificationPreview } from "components/Creatives/NotificationPreview";
+import moment from "moment";
+import { SelectCreativeHeader } from "components/Creatives/SelectCreativeHeader";
+import { CampaignForm, Creative } from "user/views/adsManager/types";
+import _ from "lodash";
+import { useContext, useState } from "react";
+import { FormContext } from "state/context";
+import { useFormikContext } from "formik";
+
+export function NotificationSelect(props: {
+  options: Creative[];
+  useSelectedAdStyle?: boolean;
+  showState?: boolean;
+  index?: number;
+  hideCreated?: boolean;
+}) {
+  const index = props.index;
+  const { values, setFieldValue } = useFormikContext<CampaignForm>();
+  const { setIsShowingAds } = useContext(FormContext);
+  const [curr, setCurr] = useState<Creative[]>([]);
+
+  const onSelectCreative = (c: Creative, selected: boolean) => {
+    let value;
+    if (selected) {
+      value = [...curr, c];
+    } else {
+      value = _.filter(curr, (n) => n.id !== c.id);
+    }
+
+    if (index !== undefined) {
+      const foundIndex = values.adSets[index].creatives.findIndex(
+        (co) => c.id === co.id,
+      );
+      if (foundIndex !== undefined) {
+        void setFieldValue(
+          `adSets.${index}.creatives.${foundIndex}.included`,
+          selected,
+        );
+      }
+    }
+
+    setCurr(_.uniqBy(value, "id"));
+  };
+
+  const isSelected = (co: Creative) =>
+    props.useSelectedAdStyle === false || co.included;
+
+  return (
+    <Box display="flex" flexDirection="column">
+      <Stack
+        direction="row"
+        justifyContent={"left"}
+        alignItems="center"
+        flexWrap="wrap"
+        maxHeight={420}
+        sx={{ overflowY: props.options.length > 3 ? "scroll" : "hidden" }}
+      >
+        {props.options.map((co, idx) => (
+          <BoxContainer
+            header={
+              <SelectCreativeHeader
+                creative={co}
+                onSelectCreative={onSelectCreative}
+                showState={props.showState}
+              />
+            }
+            key={idx}
+          >
+            <NotificationPreview
+              title={co.payloadNotification?.title}
+              body={co.payloadNotification?.body}
+              selected={isSelected(co)}
+            />
+            {!(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>
+      {props.index === undefined && (
+        <Button
+          variant="outlined"
+          sx={{ maxWidth: "200px", alignSelf: "end", marginTop: 2 }}
+          onClick={(e) => {
+            e.preventDefault();
+
+            values.adSets.forEach((adSet, idx) => {
+              void setFieldValue(
+                `adSets.${idx}.creatives`,
+                _.uniqBy([...adSet.creatives, ...curr], "id"),
+              );
+            });
+
+            setIsShowingAds(false);
+          }}
+        >
+          Complete selection
+        </Button>
+      )}
+    </Box>
+  );
+}