Production Release 2024-08-06

src/auth/registration/Register.tsx

@@ -1,15 +1,14 @@
 import { AdvertiserRegistered } from "@/auth/registration/AdvertiserRegistered";
 import { Redirect, Route, Switch } from "react-router-dom";
 import { BrowserRegister } from "@/auth/registration/BrowserRegister";
-import { SearchRegister } from "./SearchRegister";
 
 export function Register() {
   return (
     <Switch>
-      <Route path="/register/search" component={SearchRegister} />
       <Route path="/register/browser" component={BrowserRegister} />
       <Route path="/register/complete" component={AdvertiserRegistered} />
       <Redirect exact={true} from="" to="/register/browser" />
+      <Redirect to="/search" from="/register/search" exact={true} />
     </Switch>
   );
 }

src/auth/registration/SearchForm.tsx

@@ -10,7 +10,7 @@ export function SearchForm() {
   const { _ } = useLingui();
 
   return (
-    <Box width={{ xs: 350, sm: 500 }}>
+    <Box width={375}>
       <FormikTextField
         name="user.fullName"
         label={_(msg`Full name`)}

src/auth/registration/SearchRegister.tsx

@@ -2,12 +2,13 @@ import { Form, Formik } from "formik";
 import { initialValues, RegistrationForm } from "@/auth/registration/types";
 import { FormikSubmitButton } from "@/form/FormikButton";
 import { useRegister } from "@/auth/hooks/mutations/useRegister";
-import { Box } from "@mui/material";
+import { Box, Card, Typography } from "@mui/material";
 import { useTrackMatomoPageView } from "@/hooks/useTrackWithMatomo";
-import { msg } from "@lingui/macro";
-import { RegistrationContainer } from "@/auth/registration/RegistrationContainer";
+import { msg, Trans } from "@lingui/macro";
 import { RegistrationSchema } from "@/validation/RegistrationSchema";
 import { SearchForm } from "@/auth/registration/SearchForm";
+import logo from "@/assets/images/brave-icon-release-color.svg";
+import { PrivacyPolicy } from "@/basic-attention-token/PrivacyPolicy";
 
 export function SearchRegister() {
   useTrackMatomoPageView({
@@ -17,7 +18,19 @@ export function SearchRegister() {
   const { register } = useRegister();
 
   return (
-    <RegistrationContainer isSearch>
+    <Card
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "column",
+        p: 3,
+      }}
+    >
+      <img src={logo} height={50} />
+      <Typography variant="h5" mt={3} mb={2}>
+        <Trans>Check your brand's eligibility</Trans>
+      </Typography>
       <Formik
         initialValues={initialValues}
         onSubmit={async (v: RegistrationForm, { setSubmitting }) => {
@@ -38,7 +51,7 @@ export function SearchRegister() {
           <Box display="flex" justifyContent="center" m={3}>
             <FormikSubmitButton
               isCreate={true}
-              label={msg`Submit`}
+              label={msg`Check eligibility`}
               sx={{
                 padding: "12px 30px 12px 30px",
                 borderRadius: "12px",
@@ -47,6 +60,7 @@ export function SearchRegister() {
           </Box>
         </Form>
       </Formik>
-    </RegistrationContainer>
+      <PrivacyPolicy isSearch={true} />
+    </Card>
   );
 }

src/basic-attention-token/PrivacyPolicy.tsx

@@ -17,7 +17,7 @@ export function PrivacyPolicy(props: { isSearch?: boolean }) {
   );
 
   return (
-    <Typography variant="body2">
+    <Typography variant={props.isSearch ? "caption" : "body2"} flexWrap="wrap">
       <Trans>
         Please see our{" "}
         <PolicyLink to="https://brave.com/advertiser-privacy/">

src/components/Campaigns/CampaignDateRange.tsx

@@ -1,22 +1,38 @@
-import { Box, Stack } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 
 import { useField } from "formik";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { getDefaultTimezone, TimeZonePicker } from "../TimeZonePicker";
 import { TimezoneAwareDatePicker } from "../TimeZonePicker/TimezoneAwareDatePicker";
 import { useIsEdit } from "@/form/FormikHelpers";
 import { useLingui } from "@lingui/react";
-import { msg } from "@lingui/macro";
+import { msg, Trans } from "@lingui/macro";
 import dayjs from "dayjs";
+import { useAdvertiser } from "@/auth/hooks/queries/useAdvertiser";
+import { isFuzzyCalculatedDailyBudgetOk } from "@/util/campaign";
 
 export const CampaignDateRange = () => {
-  const { isDraft } = useIsEdit();
+  const { advertiser } = useAdvertiser();
+  const { isDraft, isEdit } = useIsEdit();
   const [tz, setTz] = useState<string>(getDefaultTimezone());
   const [, startMeta, startHelper] = useField("startAt");
   const [, endMeta, endHelper] = useField("endAt");
+  const [, budget] = useField("budget");
+  const [willNotReachEndDate, setWillNotReachEndDate] = useState(false);
   const { _ } = useLingui();
 
+  useEffect(() => {
+    if (!isEdit) return;
+    if (advertiser.selfServiceSetPrice) return;
+
+    const { ok } = isFuzzyCalculatedDailyBudgetOk(
+      startMeta.value,
+      endMeta.value,
+    );
+    setWillNotReachEndDate(!ok(budget.value));
+  }, [endMeta.value, isEdit, budget.value, startMeta.value]);
+
   return (
     <Box>
       <Stack direction="row" spacing={2} alignItems="center" mt={1} mb={1}>
@@ -53,6 +69,14 @@ export const CampaignDateRange = () => {
           sx={{ flexGrow: 1 }}
         />
       </Stack>
+      {willNotReachEndDate && (
+        <Typography color="error" variant="caption">
+          <Trans>
+            The campaign will likely stop running before the end date provided
+            due to budget constraints.
+          </Trans>
+        </Typography>
+      )}
     </Box>
   );
 };