Production Release 2023-09-12

src/auth/registration/NameField.tsx

@@ -7,7 +7,7 @@ export function NameField() {
     <Box flexGrow={1}>
       <Typography variant="subtitle1" gutterBottom>
         Thank you for choosing Brave&rsquo;s Ads Platform! Let&rsquo;s get you
-        setup with your account. First, we&rsquo;ll need your info.
+        set up with your account. First, we&rsquo;ll need your info.
       </Typography>
 
       <MarginedDivider />

src/components/Assets/AdvertiserAssets.tsx

@@ -0,0 +1,71 @@
+import {
+  AdvertiserImageFragment,
+  useAdvertiserImagesQuery,
+} from "graphql/advertiser.generated";
+import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
+import { ErrorDetail } from "components/Error/ErrorDetail";
+import { CardContainer } from "components/Card/CardContainer";
+import { Grid, LinearProgress, Typography } from "@mui/material";
+import MiniSideBar from "components/Drawer/MiniSideBar";
+import { ImagePreview } from "components/Assets/ImagePreview";
+import { CampaignFormat } from "graphql/types";
+import moment from "moment/moment";
+
+export function AdvertiserAssets() {
+  const { advertiser } = useAdvertiser();
+  const { data, loading, error } = useAdvertiserImagesQuery({
+    variables: { id: advertiser.id },
+  });
+
+  if (loading) {
+    return (
+      <MiniSideBar>
+        <LinearProgress sx={{ mt: 1, flexGrow: 1 }} />
+      </MiniSideBar>
+    );
+  }
+
+  return (
+    <MiniSideBar>
+      {error && (
+        <ErrorDetail
+          error={error}
+          additionalDetails="Unable to retrieve images"
+        />
+      )}
+      {!loading && !error && (
+        <Grid container spacing={2}>
+          {[...(data?.advertiser?.images ?? [])]
+            .sort(
+              (a, b) => moment(b.createdAt).date() - moment(a.createdAt).date(),
+            )
+            .map((i, idx) => (
+              <Grid item xs="auto" key={idx}>
+                <GalleryItem image={i} />
+              </Grid>
+            ))}
+        </Grid>
+      )}
+    </MiniSideBar>
+  );
+}
+
+const GalleryItem = (props: { image: AdvertiserImageFragment }) => {
+  const { name, imageUrl, createdAt, format } = props.image;
+  const height = format === CampaignFormat.NewsDisplayAd ? 400 : undefined;
+  const width = format === CampaignFormat.NewsDisplayAd ? 500 : undefined;
+
+  return (
+    <CardContainer header={name}>
+      <ImagePreview url={imageUrl} height={height} width={width} />
+      <Typography
+        variant="caption"
+        color="text.primary"
+        textAlign="right"
+        fontWeight={500}
+      >
+        created {moment(createdAt).fromNow()}
+      </Typography>
+    </CardContainer>
+  );
+};

src/components/Assets/ImageAutocomplete.tsx

@@ -0,0 +1,72 @@
+import { useAdvertiserImagesQuery } from "graphql/advertiser.generated";
+import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
+import { Autocomplete, createFilterOptions, TextField } from "@mui/material";
+import { useEffect, useState } from "react";
+import { useField } from "formik";
+import { UploadImage } from "components/Assets/UploadImage";
+
+type ImageOption = { label: string; image?: string };
+
+const filter = createFilterOptions<ImageOption>();
+
+export function ImageAutocomplete() {
+  const [createImage, setCreateImage] = useState(false);
+  const [, meta, imageUrl] = useField<string | undefined>(
+    `newCreative.payloadInlineContent.imageUrl`,
+  );
+  const hasError = Boolean(meta.error);
+  const showError = hasError && meta.touched;
+  const { advertiser } = useAdvertiser();
+  const [options, setOptions] = useState<ImageOption[]>();
+  const { data, loading } = useAdvertiserImagesQuery({
+    variables: { id: advertiser.id },
+  });
+
+  useEffect(() => {
+    const images = data?.advertiser?.images ?? [];
+    const options = images.map((i) => ({
+      label: i.name,
+      image: i.imageUrl,
+    }));
+
+    setOptions(options);
+  }, [data?.advertiser?.images]);
+
+  return (
+    <>
+      <Autocomplete
+        disablePortal
+        loading={!options || loading}
+        options={options ?? []}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            label="Image"
+            helperText={showError ? meta.error : undefined}
+            error={showError}
+            margin="normal"
+          />
+        )}
+        value={{
+          label: options?.find((o) => o.image === meta.value)?.label ?? "",
+          image: meta.value,
+        }}
+        getOptionLabel={(o) => o.label}
+        filterOptions={(options, params) => {
+          const filtered = filter(options, params);
+          return [...filtered, { image: undefined, label: `Upload new image` }];
+        }}
+        onChange={(e, nv) => {
+          imageUrl.setValue(nv ? nv.image : undefined);
+          setCreateImage(nv != null && nv.image === undefined);
+        }}
+      />
+
+      <UploadImage
+        useInlineCreation={createImage}
+        onClose={() => setCreateImage(false)}
+        onComplete={(url) => imageUrl.setValue(url)}
+      />
+    </>
+  );
+}

src/components/Assets/ImagePreview.tsx

@@ -0,0 +1,59 @@
+import { Box, Link, Skeleton } from "@mui/material";
+import { useGetImagePreviewUrl } from "components/Assets/hooks/useGetImagePreviewUrl";
+import { ErrorDetail } from "components/Error/ErrorDetail";
+
+interface Props {
+  url: string;
+  height?: number;
+  width?: number;
+  selected?: boolean;
+}
+
+export const ImagePreview = ({
+  url,
+  height = 300,
+  width = 360,
+  selected,
+}: Props) => {
+  const { data, loading, error } = useGetImagePreviewUrl({ url });
+
+  if (!data || loading) {
+    return <Skeleton variant="rectangular" height={height} width={width} />;
+  }
+
+  if (error) {
+    return <ErrorDetail error={error} />;
+  }
+
+  return (
+    <Box
+      sx={{
+        height,
+        width,
+        bgcolor: "#AEB1C2",
+      }}
+    >
+      {url?.endsWith(".pad") ? (
+        <img
+          height={height}
+          width={width}
+          src={data}
+          alt="preview"
+          style={{
+            opacity: selected === false ? 0.3 : 1,
+            filter: selected === false ? "grayscale(20%)" : "none",
+          }}
+        />
+      ) : (
+        <Link underline="none" href={url} target="_blank" rel="noreferrer">
+          <img
+            height={height}
+            width={width}
+            src={data}
+            alt="Image failed to load"
+          />
+        </Link>
+      )}
+    </Box>
+  );
+};

src/components/Assets/UploadImage.tsx

@@ -0,0 +1,134 @@
+import { useEffect, useState } from "react";
+import {
+  Alert,
+  Box,
+  Button,
+  Chip,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  LinearProgress,
+  Step,
+  StepLabel,
+  Stepper,
+} from "@mui/material";
+import { CampaignFormat } from "graphql/types";
+import { useUploadFile } from "components/Assets/hooks/useUploadFile";
+import { NewImageButton } from "components/Navigation/NewImageButton";
+
+export interface UploadConfig {
+  targetHost: () => string;
+  requiresPublishStep: boolean;
+  endpoint: string;
+}
+
+interface Props {
+  useInlineCreation?: boolean;
+  onComplete?: (url: string) => void;
+  onClose?: () => void;
+}
+
+export function UploadImage({ useInlineCreation, onClose, onComplete }: Props) {
+  const [open, setOpen] = useState(false);
+  const [file, setFile] = useState<File>();
+  const [{ upload, reset }, { step, error, loading, state }] = useUploadFile({
+    onComplete(data) {
+      if (useInlineCreation && onComplete) {
+        onComplete(data);
+      }
+    },
+  });
+
+  useEffect(() => {
+    if (useInlineCreation) {
+      setOpen(true);
+    }
+  }, [useInlineCreation]);
+
+  return (
+    <>
+      {useInlineCreation === undefined && (
+        <NewImageButton onClick={() => setOpen(true)} />
+      )}
+      <Dialog open={open} onClose={() => setOpen(false)}>
+        <DialogTitle>Upload Image</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Uploaded images can be shared across different Ad Sets within a
+            Campaign. For best quality, upload images at 900x750px resolution.
+            Images will be automatically scaled to this size.
+          </DialogContentText>
+
+          <Stepper activeStep={step} sx={{ mt: 3 }}>
+            <Step>
+              <StepLabel>Choose</StepLabel>
+            </Step>
+            <Step>
+              <StepLabel>Upload</StepLabel>
+            </Step>
+            <Step>
+              <StepLabel>Complete</StepLabel>
+            </Step>
+          </Stepper>
+
+          <Box mt={3}>
+            {step === 0 && file === undefined && (
+              <Button
+                variant="contained"
+                component="label"
+                sx={{ marginBottom: 1 }}
+              >
+                Choose File
+                <input
+                  type="file"
+                  hidden
+                  accept=".jpg, .jpeg, .png, .gif"
+                  onChange={(e) => setFile(e.target?.files?.[0])}
+                />
+              </Button>
+            )}
+            {step === 0 && !!file && (
+              <Chip
+                onDelete={() => setFile(undefined)}
+                label={file.name}
+                sx={{ marginBottom: 1 }}
+              />
+            )}
+
+            {!error && state && (
+              <Alert severity={step !== 2 ? "info" : "success"}>{state}</Alert>
+            )}
+            {error !== undefined && <Alert severity="error">{error}</Alert>}
+            {loading && <LinearProgress sx={{ mt: 1 }} />}
+          </Box>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            onClick={() => {
+              setOpen(false);
+              setFile(undefined);
+              reset!();
+              if (onClose) onClose();
+            }}
+            variant="outlined"
+          >
+            {step === 2 ? "Close" : "Cancel"}
+          </Button>
+          {step !== 2 && (
+            <Button
+              disabled={file === undefined || step !== 0}
+              onClick={() => {
+                upload!(file!, CampaignFormat.NewsDisplayAd);
+              }}
+              variant="contained"
+            >
+              Upload
+            </Button>
+          )}
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}