feat: add a dismissible conversion change warning (#1249)

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">

src/components/Conversion/ConversionDisplay.tsx

@@ -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>
       ))}
     </>

src/components/Conversion/ConversionFields.tsx

@@ -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;
@@ -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`}
@@ -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>
     </>