feat(search): preview of creatives for large target advertisers

package.json

@@ -36,6 +36,7 @@
  "react-router-dom": "5.3.4",
  "react-virtualized-auto-sizer": "1.0.24",
  "react-window": "1.8.10",
+ "swr": "2.2.5",
  "tweetnacl": "1.0.3",
  "yup": "1.4.0"
  },

src/App.tsx

@@ -20,6 +20,7 @@ import { BraveAdsContactFrame } from "@/auth/registration/BraveAdsContactFrame";
 import { useMatomo } from "@jonkoops/matomo-tracker-react";
 import { SearchLandingPage } from "@/search/SearchLandingPage";
 import { BasicAttentionTokenLandingPage } from "@/basic-attention-token/BasicAttentionTokenLandingPage";
+import { SearchPreviewPage } from "./search/preview/SearchPreviewPage";
 
 export function App() {
  const { enableLinkTracking } = useMatomo();
@@ -46,6 +47,7 @@ export function App() {
  <Route path="/register" component={Register} />
  <Route path="/contact" component={BraveAdsContactFrame} />
  <Route path="/bat" component={BasicAttentionTokenLandingPage} />
+ <Route path="/search/preview/:slug" component={SearchPreviewPage} />
  <Route path="/search" component={SearchLandingPage} />
  <Route path="/user/main" component={User} />
  <Route path="/" exact={true} component={LandingPage} />

src/components/Creatives/SearchPreview.tsx

@@ -166,13 +166,15 @@ export function SearchPreview({ title, body, targetUrl, favicon }: Props) {
  sx={{
  alignItems: "center",
  color: "var(--color-serp-breadcrumbs)",
- display: "flex",
+ display: "block",
  fontSize: "var(--text-sm)",
  fontStyle: "normal",
  lineHeight: "22px",
  marginTop: searchRemToPx(-0.15),
  maxWidth: "90%",
- overflow: "visible",
+ overflow: "hidden",
+ whiteSpace: "nowrap",
+ textOverflow: "ellipsis",
  }}
  >
  <SearchUrlDisplay url={url} />

src/components/Navigation/AccountMenu.tsx

@@ -31,6 +31,13 @@ export function AccountMenu() {
  const nonCurrentAdvertisers = advertisers.filter(
  (a) => a.id !== advertiser.id,
  );
+
+ // the navbar can be used for non-logged in users, so just don't display
+ // a profile if the user is not logged in
+ if (!user.userId) {
+ return null;
+ }
+
  return (
  <>
  <Tooltip title={<Trans>Account</Trans>} placement="bottom-start">

src/search/preview/CallToAction.tsx

@@ -0,0 +1,56 @@
+/* eslint-disable lingui/no-unlocalized-strings */
+import { Box, Button, Link, Typography } from "@mui/material";
+
+interface Props {
+ domain: string;
+}
+
+export function CallToAction({ domain }: Props) {
+ return (
+ <Box
+ marginBottom={1}
+ padding={2}
+ display="flex"
+ gap={1}
+ alignItems="center"
+ bgcolor="#F7F9FF"
+ borderRadius="12px"
+ >
+ <Box flex={1}>
+ <Typography variant="h2" marginBottom={2}>
+ Brave Search Ads Preview
+ </Typography>
+ <Typography variant="body2" marginBottom={2}>
+ This preview has been created for{" "}
+ <Link
+ href={`https://${domain}/`}
+ target="_blank"
+ rel="noreferrer"
+ underline="hover"
+ >
+ {domain}
+ </Link>{" "}
+ by analyzing existing Google campaigns and matching them with keyword
+ volumes from Brave Search.
+ </Typography>
+ <Typography variant="body2" marginBottom={2}>
+ To view and manage all available ads and get started with Search Ads
+ from Brave, please book a meeting with an account manager.
+ </Typography>
+ </Box>
+
+ <Box minWidth="100px">
+ <Button
+ variant="contained"
+ color="primary"
+ component="a"
+ href="https://calendar.google.com/calendar/u/0/appointments/AcZssZ2sEAG3kPSlTKpGd48pYAa2zTd-QpI2L2ewxao="
+ target="_blank"
+ rel="noreferrer"
+ >
+ Book a Meeting
+ </Button>
+ </Box>
+ </Box>
+ );
+}

src/search/preview/LandingPageDetail.tsx

@@ -0,0 +1,106 @@
+/* eslint-disable lingui/no-unlocalized-strings */
+import SearchIcon from "@mui/icons-material/Search";
+import { Box, Chip, IconButton, Popover, Typography } from "@mui/material";
+import { useState } from "react";
+import { LandingPageInfo, useKeywordData } from "./data";
+import dayjs from "dayjs";
+import { SkeletonQueryList } from "@/user/views/user/search/LandingPageDetail";
+
+function QueryList({ queries }: { queries: string[] }) {
+ const [visibleQueryCount, setVisibleQueryCount] = useState(20);
+
+ const numQueries = queries.length;
+ const hasMore = numQueries > visibleQueryCount;
+
+ const queriesToShow = queries.slice(0, visibleQueryCount);
+
+ return (
+ <>
+ {queriesToShow.map((q) => (
+ <Chip key={q} label={q} size="small" />
+ ))}
+
+ {hasMore && (
+ <Chip
+ size="small"
+ variant="outlined"
+ color="primary"
+ label={`more`}
+ onClick={() => setVisibleQueryCount((c) => c + 50)}
+ />
+ )}
+ </>
+ );
+}
+
+interface Props {
+ landingPage: LandingPageInfo;
+}
+
+export function LandingPageDetail({ landingPage }: Props) {
+ const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+ const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ const open = Boolean(anchorEl);
+
+ return (
+ <div>
+ <IconButton edge="end" aria-label="details" onClick={handleClick}>
+ <SearchIcon />
+ </IconButton>
+ <Popover
+ open={open}
+ anchorEl={anchorEl}
+ onClose={handleClose}
+ anchorOrigin={{
+ vertical: "bottom",
+ horizontal: "right",
+ }}
+ sx={{
+ minHeight: 200,
+ }}
+ >
+ <LandingPageDetailContent landingPage={landingPage} />
+ </Popover>
+ </div>
+ );
+}
+
+function LandingPageDetailContent({
+ landingPage,
+}: {
+ landingPage: LandingPageInfo;
+}) {
+ const { data: queries } = useKeywordData(landingPage.slug, landingPage.url);
+
+ return (
+ <Box sx={{ padding: 2, width: 600, height: 300 }}>
+ <Typography variant="h2" gutterBottom>
+ Full Landing Page URL
+ </Typography>
+
+ <Typography gutterBottom fontFamily="monospace" fontSize="small">
+ {landingPage.url}
+ </Typography>
+
+ <Typography variant="caption" gutterBottom>
+ Last seen {dayjs(landingPage.lastSeen).fromNow()}
+ </Typography>
+
+ <Typography variant="h2" marginTop={2} marginBottom={1}>
+ Sample Queries
+ </Typography>
+
+ <Box display="flex" flexWrap="wrap" gap={1} marginBottom={2}>
+ {queries ? <QueryList queries={queries} /> : <SkeletonQueryList />}
+ </Box>
+ </Box>
+ );
+}

src/search/preview/LandingPageList.tsx

@@ -0,0 +1,55 @@
+import { LandingPageListEntry } from "./LandingPageListEntry";
+
+import { FixedSizeList } from "react-window";
+import AutoSizer from "react-virtualized-auto-sizer";
+import { Basket } from "@/user/views/user/search/basket";
+import { LandingPageInfo } from "./data";
+
+interface Props {
+ basket: Basket;
+ landingPages: LandingPageInfo[];
+ allowSelection?: boolean;
+}
+
+export function LandingPageList({
+ landingPages,
+ basket,
+ allowSelection = true,
+}: Props) {
+ return (
+ <AutoSizer>
+ {({ height, width }) => (
+ <FixedSizeList
+ height={height}
+ width={width}
+ itemSize={200}
+ itemCount={landingPages.length}
+ style={{ overflowX: "scroll" }}
+ >
+ {({ index, style }) => {
+ const landingPage = landingPages[index];
+
+ return (
+ <LandingPageListEntry
+ key={index}
+ style={style}
+ landingPage={landingPage}
+ allowSelection={allowSelection}
+ hasMultipleCreatives={landingPage.creatives.length > 1}
+ creativeIndex={basket.creativeIndexForLandingPage(
+ landingPage.url,
+ )}
+ nextCreative={() =>
+ basket.nextCreativeForLandingPage(
+ landingPage.url,
+ landingPage.creatives.length,
+ )
+ }
+ />
+ );
+ }}
+ </FixedSizeList>
+ )}
+ </AutoSizer>
+ );
+}