Merge pull request #1300 from brave/master

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>
  );
 };