Skip to content

Commit

Permalink
feat: add a dismissible conversion change warning (#1249)
Browse files Browse the repository at this point in the history
Lets the end user know conversions have stricter enforcement:


<img width="1624" alt="Screen Shot 2024-07-03 at 1 44 18 PM"
src="https://github.com/brave/ads-ui/assets/48930920/242a948a-9c2a-4b3d-af0f-60a04909a1d3">

---

<img width="1179" alt="Screen Shot 2024-07-03 at 2 02 00 PM"
src="https://github.com/brave/ads-ui/assets/48930920/6dddd5d3-513c-4f0d-b25d-6a23200c7078">
  • Loading branch information
IanKrieger authored Jul 8, 2024
1 parent 07cd04a commit 5f951ca
Show file tree
Hide file tree
Showing 10 changed files with 379 additions and 206 deletions.
13 changes: 4 additions & 9 deletions src/components/Conversion/ConversionDisplay.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,20 +43,15 @@ export function ConversionDisplay({ conversions, convErrors }: Props) {
{conversions.map((c, idx) => (
<div key={idx}>
<ReviewField
caption={msg`Conversion Type`}
value={c.type}
error={extractConversionError(idx, "type")}
caption={msg`Conversion URL Pattern`}
value={c.urlPattern}
error={extractConversionError(idx, "urlPattern")}
/>
<ReviewField
caption={msg`Observation Window`}
caption={msg`Conversion Observation Window`}
value={`${c.observationWindow} days`}
error={extractConversionError(idx, "observationWindow")}
/>
<ReviewField
caption={msg`Conversion URL Pattern`}
value={c.urlPattern}
error={extractConversionError(idx, "urlPattern")}
/>
</div>
))}
</>
Expand Down
33 changes: 11 additions & 22 deletions src/components/Conversion/ConversionFields.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { Box } from "@mui/material";
import { Box, Typography } from "@mui/material";
import { FormikRadioControl, FormikTextField } from "@/form/FormikHelpers";
import { msg, Trans } from "@lingui/macro";
import { useLingui } from "@lingui/react";
import { LearnMoreButton } from "@/components/Button/LearnMoreButton";

interface Props {
name: string;
Expand All @@ -12,26 +13,6 @@ export const ConversionFields = ({ name }: Props) => {

return (
<>
<FormikRadioControl
name={`${name}.type`}
label={_(msg`Type`)}
options={[
{ value: "postview", label: _(msg`Post-View`) },
{ value: "postclick", label: _(msg`Post-Click`) },
]}
helperText={
<>
<Trans>
Post-View: Viewed ad and converted by visiting site on their own.
</Trans>
<br />
<Trans>
Post-Click: Viewed ad and converted by clicking its link
</Trans>
</>
}
/>

<Box>
<FormikTextField
name={`${name}.urlPattern`}
Expand All @@ -51,7 +32,15 @@ export const ConversionFields = ({ name }: Props) => {
{ value: 7, label: _(msg`7 Days`) },
{ value: 30, label: _(msg`30 Days`) },
]}
helperText={_(msg`Count conversions within X days of an impression`)}
helperText={
<Typography variant="body2" sx={{ mb: 2 }}>
<Trans>
Define the number of days Brave will observe conversions and
attribute them to the campaign.
</Trans>{" "}
<LearnMoreButton helpSection="campaign-performance/reporting/#advanced-controls-for-attribution" />
</Typography>
}
/>
</Box>
</>
Expand Down
105 changes: 70 additions & 35 deletions src/locales/en.po

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 5f951ca

Please sign in to comment.