Merge pull request #1258 from brave/master

Production Release 2024-07-18

.github/workflows/codeql-analysis.yml

@@ -42,7 +42,7 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@b611370bb5703a7efb587f9d136a52ea24c5c38c # v3.25.11
+        uses: github/codeql-action/init@4fa2a7953630fd2f3fb380f21be14ede0169dd4f # v3.25.12
         with:
           languages: ${{ matrix.language }}
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -53,7 +53,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@b611370bb5703a7efb587f9d136a52ea24c5c38c # v3.25.11
+        uses: github/codeql-action/autobuild@4fa2a7953630fd2f3fb380f21be14ede0169dd4f # v3.25.12
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -67,4 +67,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@b611370bb5703a7efb587f9d136a52ea24c5c38c # v3.25.11
+        uses: github/codeql-action/analyze@4fa2a7953630fd2f3fb380f21be14ede0169dd4f # v3.25.12

package.json

@@ -17,11 +17,11 @@
     "@lingui/detect-locale": "4.11.2",
     "@lingui/macro": "4.11.2",
     "@lingui/react": "4.11.2",
-    "@mui/icons-material": "5.16.0",
-    "@mui/lab": "5.0.0-alpha.171",
-    "@mui/material": "5.16.0",
-    "@mui/x-data-grid": "7.9.0",
-    "@mui/x-date-pickers": "7.9.0",
+    "@mui/icons-material": "5.16.1",
+    "@mui/lab": "5.0.0-alpha.172",
+    "@mui/material": "5.16.1",
+    "@mui/x-data-grid": "7.10.0",
+    "@mui/x-date-pickers": "7.10.0",
     "bignumber.js": "9.1.2",
     "dayjs": "1.11.11",
     "formik": "2.4.6",
@@ -79,19 +79,19 @@
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-lingui": "0.3.0",
-    "eslint-plugin-react": "7.34.3",
+    "eslint-plugin-react": "7.34.4",
     "eslint-plugin-react-hooks": "4.6.2",
     "husky": "9.0.11",
-    "knip": "5.24.2",
+    "knip": "5.26.0",
     "lint-staged": "15.2.7",
     "npm-run-all2": "6.2.2",
-    "prettier": "3.3.2",
+    "prettier": "3.3.3",
     "typescript": "5.5.3",
-    "typescript-eslint": "7.15.0",
+    "typescript-eslint": "7.16.0",
     "vite": "5.3.3",
     "vite-plugin-checker": "0.7.1",
     "vite-tsconfig-paths": "4.3.2",
-    "vitest": "1.6.0"
+    "vitest": "2.0.2"
   },
   "engines": {
     "node": ">=20",

src/components/Country/CountryPicker.tsx

@@ -30,7 +30,7 @@ export const CountryPicker = ({ name, filter, label }: Props) => {
         <Box>
           <TextField
             {...params}
-            label={isError ? errorMessage : label ?? _(msg`Country`)}
+            label={isError ? errorMessage : (label ?? _(msg`Country`))}
             error={isError}
             autoComplete="country"
             margin="dense"

src/search/preview/SearchPreviewResults.tsx

@@ -1,4 +1,4 @@
-import { Box, Container } from "@mui/material";
+import { Box } from "@mui/material";
 import { SearchData } from "./data";
 import { CardContainer } from "@/components/Card/CardContainer";
 import { useBasket } from "@/user/views/user/search/basket";
@@ -16,10 +16,7 @@ export function SearchPreviewResults({ data }: Props) {
   // we don't actually use the basket
   const basket = useBasket();
   return (
-    <Container
-      maxWidth={false}
-      sx={{ marginLeft: "auto", marginRight: "auto", maxWidth: "1240px" }}
-    >
+    <Box sx={{ marginLeft: "auto", marginRight: "auto", maxWidth: "1005px" }}>
       <Box display="flex" gap={2}>
         <CardContainer
           childSx={{
@@ -37,12 +34,9 @@ export function SearchPreviewResults({ data }: Props) {
         </CardContainer>
 
         <Box display="flex" flexDirection="column" gap={2}>
-          <SummaryPanel
-            domain={data.countryDomain}
-            countryName={data.fullCountryName}
-          />
+          <SummaryPanel searchData={data} />
         </Box>
       </Box>
-    </Container>
+    </Box>
   );
 }

src/search/preview/SummaryPanel.tsx

@@ -4,7 +4,12 @@ import { Box, Typography } from "@mui/material";
 import { ReactNode } from "react";
 import PublicIcon from "@mui/icons-material/Public";
 import DomainIcon from "@mui/icons-material/Domain";
-import { CountryDomain } from "@/user/views/user/search/types";
+import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
+import PanToolAltOutlinedIcon from "@mui/icons-material/PanToolAltOutlined";
+import MonetizationOnOutlinedIcon from "@mui/icons-material/MonetizationOnOutlined";
+import PercentIcon from "@mui/icons-material/Percent";
+import { SearchData } from "./data";
+import { formatUsd, formatWholeNumber } from "@/user/library/format";
 
 function SummaryEntry({
   title,
@@ -18,11 +23,17 @@ function SummaryEntry({
   return (
     <Box display="flex" alignItems="center" gap={2} marginY={1}>
       {icon}
+
       <Box>
-        <Typography variant="body2" color="text.secondary">
+        <Typography
+          component="div"
+          variant="body2"
+          color="text.secondary"
+          marginBottom="-1px"
+        >
           {title}
         </Typography>
-        <Typography variant="body2" gutterBottom>
+        <Typography component="div" variant="body2">
           {value}
         </Typography>
       </Box>
@@ -31,22 +42,77 @@ function SummaryEntry({
 }
 
 interface Props {
-  domain: CountryDomain;
-  countryName: string;
+  searchData: SearchData;
 }
 
-export function SummaryPanel({ domain, countryName }: Props) {
+export function SummaryPanel({ searchData }: Props) {
   return (
     <CardContainer sx={{ width: 250 }}>
-      <Typography variant="h2" marginBottom={2}>
-        Campaign Summary
+      <Typography variant="h2" marginBottom={1}>
+        Campaign summary
       </Typography>
-      <SummaryEntry title="Country" value={countryName} icon={<PublicIcon />} />
+      <SummaryEntry
+        title="Country"
+        value={searchData.fullCountryName}
+        icon={<PublicIcon sx={{ color: "text.secondary" }} />}
+      />
       <SummaryEntry
         title="Domain"
-        value={domain.domain}
-        icon={<DomainIcon />}
+        value={searchData.countryDomain.domain}
+        icon={<DomainIcon sx={{ color: "text.secondary" }} />}
+      />
+      <Typography variant="h2" marginTop={3} marginBottom={1}>
+        Estimated weekly results
+      </Typography>
+      <SummaryEntry
+        title="Impressions"
+        value={formatWholeNumber(searchData.estimates.qpw.max)}
+        icon={<VisibilityOutlinedIcon sx={{ color: "text.secondary" }} />}
+      />
+      <SummaryEntry
+        title="Clicks"
+        value={formatWholeNumber(searchData.estimates.cpw.max)}
+        icon={<PanToolAltOutlinedIcon sx={{ color: "text.secondary" }} />}
       />
+      <SummaryEntry
+        title="Click-through rate"
+        value="10%"
+        icon={<PercentIcon sx={{ color: "text.secondary" }} />}
+      />
+
+      <SummaryEntry
+        title="Cost"
+        icon={<MonetizationOnOutlinedIcon sx={{ color: "text.secondary" }} />}
+        value={
+          <Box display="flex" gap={1} alignItems="center">
+            <Box component="span" sx={{ textDecoration: "line-through" }}>
+              {formatUsd(searchData.estimates.trialBudget, {
+                dollarsOnly: true,
+              })}
+            </Box>
+            <Box
+              color="primary.contrastText"
+              bgcolor="primary.main"
+              padding={"2px 4px"}
+              borderRadius={1}
+              textTransform="uppercase"
+              whiteSpace="nowrap"
+              fontSize={"0.6rem"}
+            >
+              Trial Available
+            </Box>
+          </Box>
+        }
+      />
+
+      <Typography
+        variant="caption"
+        color="text.secondary"
+        marginTop={2}
+        fontSize="0.6rem"
+      >
+        Estimates only. Actual volume may vary.
+      </Typography>
     </CardContainer>
   );
 }

src/search/preview/data.ts

@@ -8,6 +8,17 @@ interface ServerSearchData {
   countryDomain: CountryDomain;
   fullCountryName: string;
   landingPages: ServerLandingPageInfo[];
+  estimates: {
+    qpw: {
+      min: number;
+      max: number;
+    };
+    cpw: {
+      min: number;
+      max: number;
+    };
+    trialBudget: number;
+  };
 }
 
 interface ServerLandingPageInfo {
@@ -35,7 +46,7 @@ interface UseSearchDataReturn<T> {
 }
 
 const fetcher = (suffix: string) =>
-  fetch(`${buildAdServerEndpoint("")}/search/preview/${suffix}`).then((r) => {
+  fetch(`${buildAdServerEndpoint("/search/preview/")}${suffix}`).then((r) => {
     if (!r.ok) {
       throw new Error(`Error fetching search data: ${r.status}`);
     }

src/user/library/format.test.ts

@@ -41,3 +41,13 @@ it("should format USD values correctly", () => {
   expect(formatUsd(BigNumber(123.456))).toBe("$123.46");
   expect(formatUsd(BigNumber(123.556))).toBe("$123.56");
 });
+
+it("should format USD values correctly (dollars only)", () => {
+  expect(formatUsd(0.123456, { dollarsOnly: true })).toBe("$0");
+  expect(formatUsd(123.456, { dollarsOnly: true })).toBe("$123");
+  expect(formatUsd(123456, { dollarsOnly: true })).toBe("$123,456");
+  expect(formatUsd(-123456, { dollarsOnly: true })).toBe("-$123,456");
+  expect(formatUsd(BigNumber(0.123456), { dollarsOnly: true })).toBe("$0");
+  expect(formatUsd(BigNumber(123.456), { dollarsOnly: true })).toBe("$123");
+  expect(formatUsd(BigNumber(123.556), { dollarsOnly: true })).toBe("$124");
+});

src/user/library/format.ts

@@ -15,6 +15,13 @@ const usdFormatter = new Intl.NumberFormat(undefined, {
   currencyDisplay: "narrowSymbol",
 });
 
+const usdDollarsOnlyFormatter = new Intl.NumberFormat(undefined, {
+  style: "currency",
+  currency: "USD",
+  currencyDisplay: "narrowSymbol",
+  maximumFractionDigits: 0,
+});
+
 // use this function when you have a rate (such as 0.12) that you want to format as
 // a percentage (12%)
 export function formatRateAsPercent(value: BigNumber | number): string {
@@ -31,8 +38,14 @@ export function formatWholeNumber(value: BigNumber | number): string {
   return numberFormatter.format(BigNumber(value).toNumber());
 }
 
-export function formatUsd(value: BigNumber | number): string {
-  return usdFormatter.format(BigNumber(value).toNumber());
+export function formatUsd(
+  value: BigNumber | number,
+  options: { dollarsOnly?: boolean } = { dollarsOnly: false },
+): string {
+  const formatter = options.dollarsOnly
+    ? usdDollarsOnlyFormatter
+    : usdFormatter;
+  return formatter.format(BigNumber(value).toNumber());
 }
 
 export function format(