feat: news preview

src/components/Assets/ImageAutocomplete.tsx

@@ -1,17 +1,21 @@
 import { useAdvertiserImagesQuery } from "graphql/advertiser.generated";
 import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
-import { Autocomplete, TextField } from "@mui/material";
+import { Autocomplete, createFilterOptions, TextField } from "@mui/material";
 import { useState } from "react";
 import { useField } from "formik";
 
+type ImageOption = { label: string; image?: string };
+
+const filter = createFilterOptions<ImageOption>();
+
 export function ImageAutocomplete() {
-  const [, meta, imageUrl] = useField(
+  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<{ label: string; image: string }[]>();
+  const [options, setOptions] = useState<ImageOption[]>();
   const { loading } = useAdvertiserImagesQuery({
     variables: { id: advertiser.id },
     onCompleted(data) {
@@ -39,8 +43,17 @@ export function ImageAutocomplete() {
           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!.image);
+        imageUrl.setValue(nv ? nv.image : undefined);
       }}
     />
   );

src/components/Assets/ImagePreview.tsx

@@ -1,4 +1,4 @@
-import { Box, LinearProgress, Link } from "@mui/material";
+import { Box, Link, Skeleton } from "@mui/material";
 import { useGetImagePreviewUrl } from "components/Assets/hooks/useGetImagePreviewUrl";
 import { ErrorDetail } from "components/Error/ErrorDetail";
 
@@ -12,7 +12,7 @@ export const ImagePreview = ({ url, height = 300, width = 360 }: Props) => {
   const { data, loading, error } = useGetImagePreviewUrl({ url });
 
   if (!data || loading) {
-    return <LinearProgress />;
+    return <Skeleton variant="rectangular" height={height} />;
   }
 
   if (error) {

src/components/Creatives/NewsPreview.tsx

@@ -0,0 +1,63 @@
+import { Box, Card, Skeleton, Typography } from "@mui/material";
+import { ImagePreview } from "components/Assets/ImagePreview";
+import { useField } from "formik";
+import { Creative } from "user/views/adsManager/types";
+import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
+
+export function NewsPreview() {
+  const { advertiser } = useAdvertiser();
+  const [, creative] = useField<Creative>("newCreative");
+
+  const value = creative.value.payloadInlineContent;
+  return (
+    <Card
+      sx={{
+        bgcolor: "rgba(53, 53, 53, 0.47)",
+        display: "flex",
+        flexDirection: "column",
+        maxHeight: "900px",
+        maxWidth: "750px",
+      }}
+    >
+      <Box display="flex" justifyContent="center">
+        {value?.imageUrl ? (
+          <ImagePreview url={value.imageUrl} height={500} width={600} />
+        ) : (
+          <Box width={600}>
+            <Skeleton
+              variant="rectangular"
+              height={500}
+              sx={{ bgcolor: "grey.400" }}
+            />
+          </Box>
+        )}
+      </Box>
+      <Box padding="25px 35px" bgcolor="rgba(53, 53, 53, 0.47)">
+        <Box display="flex" flexDirection="row" mb={1} gap={2}>
+          <Typography color="#ffff" fontSize="22px" fontWeight={500}>
+            {value?.title ??
+              "This is a news display Ad, it wll look like part of the news feed."}
+          </Typography>
+          <Box
+            width="200px"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Box
+              color="#ffff"
+              border="1px solid #ffff"
+              padding="10px 15px"
+              borderRadius="100px"
+            >
+              {value?.ctaText ?? "Click Here!"}
+            </Box>
+          </Box>
+        </Box>
+        <Typography color="#ffff" fontSize="14px" fontWeight={500}>
+          {value?.description ?? advertiser.name}
+        </Typography>
+      </Box>
+    </Card>
+  );
+}

src/user/ads/InlineContentAd.tsx

@@ -2,47 +2,55 @@ import { FormikTextField } from "form/FormikHelpers";
 import { UrlResolver } from "components/Url/UrlResolver";
 import { useField } from "formik";
 import { useEffect } from "react";
-import { Stack } from "@mui/material";
+import { Box, Stack } from "@mui/material";
 import { CreateCreativeButton } from "components/Creatives/CreateCreativeButton";
 import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
 import { CardContainer } from "components/Card/CardContainer";
 import { ImageAutocomplete } from "components/Assets/ImageAutocomplete";
+import { NewsPreview } from "components/Creatives/NewsPreview";
+
 export function InlineContentAd() {
   const { advertiser } = useAdvertiser();
   const [, , code] = useField<string>("newCreative.type.code");
   const [, , description] = useField<string>(
     "newCreative.payloadInlineContent.description",
   );
-
   useEffect(() => {
     code.setValue("inline_content_all_v1");
     description.setValue(advertiser.name);
   }, []);
 
   return (
-    <CardContainer header="Create News Ad">
-      <FormikTextField
-        name="newCreative.payloadInlineContent.title"
-        label="Title"
-        maxLengthInstantFeedback={90}
-      />
-      <UrlResolver
-        validator="newCreative.targetUrlValid"
-        name="newCreative.payloadInlineContent.targetUrl"
-        label="Target URL"
-      />
-      <FormikTextField
-        name="newCreative.payloadInlineContent.ctaText"
-        label="Call to Action text"
-        maxLengthInstantFeedback={15}
-      />
+    <Box display="flex" flexDirection="column" gap={2}>
+      <CardContainer header="Create News Ad" sx={{ flexGrow: 1 }}>
+        <FormikTextField name="newCreative.name" label="Ad Name" />
+
+        <FormikTextField
+          name="newCreative.payloadInlineContent.title"
+          label="Title"
+          maxLengthInstantFeedback={90}
+        />
+
+        <FormikTextField
+          name="newCreative.payloadInlineContent.ctaText"
+          label="Call to Action text"
+          maxLengthInstantFeedback={15}
+        />
+
+        <ImageAutocomplete />
 
-      <ImageAutocomplete />
+        <UrlResolver
+          validator="newCreative.targetUrlValid"
+          name="newCreative.payloadInlineContent.targetUrl"
+          label="Target URL"
+        />
 
-      <Stack direction="row" justifyContent="space-between" mt={1}>
-        <div />
-        <CreateCreativeButton />
-      </Stack>
-    </CardContainer>
+        <Stack direction="row" justifyContent="space-between" mt={1}>
+          <div />
+          <CreateCreativeButton />
+        </Stack>
+      </CardContainer>
+      <NewsPreview />
+    </Box>
   );
 }