Merge pull request #884 from brave/master

Production Release 2023-09-13

package.json

@@ -3,25 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@apollo/client": "3.8.1",
+    "@apollo/client": "3.8.3",
     "@date-io/moment": "2.17.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@fontsource/mulish": "5.0.8",
     "@fontsource/poppins": "5.0.8",
-    "@mui/icons-material": "5.14.6",
-    "@mui/lab": "5.0.0-alpha.141",
-    "@mui/material": "5.14.6",
+    "@mui/icons-material": "5.14.8",
+    "@mui/lab": "5.0.0-alpha.143",
+    "@mui/material": "5.14.8",
     "@mui/x-date-pickers": "5.0.20",
     "axios": "1.5.0",
     "base64url": "3.0.1",
     "bignumber.js": "9.1.2",
     "date-fns": "2.30.0",
     "date-fns-tz": "2.0.0",
-    "formik": "2.4.3",
+    "formik": "2.4.4",
     "graphql": "16.8.0",
     "highcharts": "11.1.0",
-    "highcharts-react-official": "3.2.0",
+    "highcharts-react-official": "3.2.1",
     "immer": "10.0.2",
     "jwt-decode": "3.1.2",
     "lodash": "4.17.21",
@@ -56,28 +56,28 @@
     "@graphql-codegen/typescript-operations": "2.5.13",
     "@graphql-codegen/typescript-react-apollo": "3.3.7",
     "@graphql-codegen/visitor-plugin-common": "2.13.8",
-    "@types/chart.js": "2.9.37",
+    "@types/chart.js": "2.9.38",
     "@types/classnames": "2.3.0",
     "@types/jest": "29.5.4",
     "@types/jwt-decode": "2.2.1",
-    "@types/lodash": "4.14.197",
+    "@types/lodash": "4.14.198",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "@types/react-router-dom": "5.3.3",
-    "@typescript-eslint/eslint-plugin": "6.4.1",
-    "@typescript-eslint/parser": "6.4.1",
+    "@typescript-eslint/eslint-plugin": "6.6.0",
+    "@typescript-eslint/parser": "6.6.0",
     "@vitejs/plugin-basic-ssl": "1.0.1",
     "@vitejs/plugin-react": "4.0.4",
     "eslint": "8.48.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-react": "7.33.2",
     "husky": "8.0.3",
-    "prettier": "3.0.2",
+    "prettier": "3.0.3",
     "typescript": "5.2.2",
     "vite": "4.4.9",
     "vite-plugin-checker": "0.6.2",
     "vite-tsconfig-paths": "4.2.0",
-    "vitest": "0.34.3"
+    "vitest": "0.34.4"
   },
   "overrides": {
     "semver": "7.5.4",

src/form/FormikHelpers.tsx

@@ -1,4 +1,9 @@
-import { HTMLInputTypeAttribute, PropsWithChildren, ReactNode } from "react";
+import {
+  ChangeEventHandler,
+  HTMLInputTypeAttribute,
+  PropsWithChildren,
+  ReactNode,
+} from "react";
 import {
   Box,
   Button,
@@ -97,15 +102,24 @@ export const FormikSwitch = (props: FormikSwitchProps) => {
 interface FormikRadioGroupProps {
   name: string;
   row?: boolean;
+  onChange?: ChangeEventHandler<any>;
 }
 
 export const FormikRadioGroup = (
   props: PropsWithChildren<FormikRadioGroupProps>,
 ) => {
-  const [field] = useField(props);
+  const [field, meta, helper] = useField(props);
   return (
     <>
-      <RadioGroup {...props} {...field} />
+      <RadioGroup
+        {...props}
+        {...field}
+        value={meta.value}
+        onChange={(e, nv) => {
+          helper.setValue(nv);
+          if (props.onChange) props.onChange(e);
+        }}
+      />
       <ErrorMessage name={field.name}>
         {(msg: string) => <FormHelperText error>{msg}</FormHelperText>}
       </ErrorMessage>
@@ -119,6 +133,7 @@ interface FormikRadioControlProps {
   label?: string;
   helperText?: ReactNode;
   disabled?: boolean;
+  onChange?: ChangeEventHandler<any>;
 }
 
 export const FormikRadioControl = (props: FormikRadioControlProps) => {
@@ -131,7 +146,7 @@ export const FormikRadioControl = (props: FormikRadioControlProps) => {
       <FormLabel component="legend" color="secondary">
         {props.label}
       </FormLabel>
-      <FormikRadioGroup row name={props.name}>
+      <FormikRadioGroup row name={props.name} onChange={props.onChange}>
         {props.options.map((opt) => (
           <FormControlLabel
             key={opt.value}

src/user/views/adsManager/views/advanced/components/campaign/fields/BudgetField.tsx

@@ -13,9 +13,18 @@ import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
 import _ from "lodash";
 import { CardContainer } from "components/Card/CardContainer";
 import { uiLabelsForBillingType } from "util/billingType";
+import { uiTextForCampaignFormat } from "user/library";
+import { CampaignFormat } from "graphql/types";
+
+type DefaultPrice = { cpm: number; cpc: number };
+const campaignDefaultPrices = new Map<CampaignFormat, DefaultPrice>([
+  [CampaignFormat.PushNotification, { cpm: 6, cpc: 0.1 }],
+  [CampaignFormat.NewsDisplayAd, { cpm: 10, cpc: 0.15 }],
+]);
 
 export function BudgetField() {
   const [, , dailyBudget] = useField<number>("dailyBudget");
+  const [, , price] = useField<number>("price");
   const { isDraft } = useIsEdit();
   const { advertiser } = useAdvertiser();
   const { values, errors } = useFormikContext<CampaignForm>();
@@ -69,7 +78,8 @@ export function BudgetField() {
 
         {!advertiser.selfServiceSetPrice ? (
           <Typography variant="body2">
-            Campaigns are priced at a flat rate of{" "}
+            {uiTextForCampaignFormat(values.format)} campaigns are priced at a
+            flat rate of{" "}
             <strong>
               ${values.price} {_.upperCase(values.billingType)}
             </strong>
@@ -92,6 +102,13 @@ export function BudgetField() {
 
             <FormikRadioControl
               name="billingType"
+              onChange={(e) => {
+                const defaultPrice = campaignDefaultPrices.get(values.format);
+                if (defaultPrice)
+                  price.setValue(
+                    defaultPrice[e.target.value as keyof DefaultPrice],
+                  );
+              }}
               options={[
                 {
                   value: "cpm",
@@ -102,7 +119,9 @@ export function BudgetField() {
                   label: uiLabelsForBillingType("cpc").longLabel,
                 },
               ]}
-              disabled={!isDraft}
+              disabled={
+                !isDraft || values.format === CampaignFormat.NewsDisplayAd
+              }
             />
           </Stack>
         )}

src/user/views/adsManager/views/advanced/components/campaign/fields/FormatField.tsx

@@ -11,6 +11,7 @@ import { CampaignFormat } from "graphql/types";
 import _ from "lodash";
 import HelpIcon from "@mui/icons-material/Help";
 import { useIsEdit } from "form/FormikHelpers";
+import { Billing } from "user/views/adsManager/types";
 
 export function FormatField() {
   return (
@@ -42,13 +43,23 @@ export function FormatField() {
 
 const FormatItemButton = (props: { format: CampaignFormat }) => {
   const { isEdit } = useIsEdit();
-  const [, meta, helper] = useField<CampaignFormat>("format");
+  const [, meta, format] = useField<CampaignFormat>("format");
+  const [, , price] = useField<number>("price");
+  const [, , billing] = useField<Billing>("billingType");
 
   return (
     <ListItemButton
       disabled={isEdit}
       selected={meta.value === props.format}
-      onClick={() => helper.setValue(props.format)}
+      onClick={() => {
+        format.setValue(props.format);
+        if (props.format === CampaignFormat.NewsDisplayAd) {
+          price.setValue(10);
+          billing.setValue("cpm");
+        } else {
+          price.setValue(6);
+        }
+      }}
       sx={{
         p: 2,
         borderRadius: "16px",

src/user/views/adsManager/views/advanced/components/form/components/PaymentButton.tsx

@@ -6,7 +6,6 @@ export function PaymentButton(props: { hasPaymentIntent: boolean }) {
   const { isEdit } = useIsEdit();
   const paymentText = "Make payment & submit for approval";
 
-  console.log();
   return (
     <FormikSubmitButton
       isCreate={!props.hasPaymentIntent || !isEdit}

src/validation/CampaignSchema.tsx

@@ -3,12 +3,17 @@ import { startOfDay } from "date-fns";
 import { twoDaysOut } from "form/DateFieldHelpers";
 import { TrailingAsteriskRegex } from "validation/regex";
 import { CreativeSchema } from "validation/CreativeSchema";
+import { CampaignFormat } from "graphql/types";
 
 export const MIN_PER_DAY = 33;
 export const MIN_PER_CAMPAIGN = 100;
 
 export const CampaignSchema = object().shape({
   name: string().label("Campaign Name").required(),
+  format: string()
+    .label("Campaign Format")
+    .oneOf([CampaignFormat.NewsDisplayAd, CampaignFormat.PushNotification])
+    .required(),
   budget: number()
     .label("Lifetime Budget")
     .required()
@@ -59,10 +64,16 @@ export const CampaignSchema = object().shape({
       then: (schema) =>
         schema.moreThan(0.09, "CPC price must be .10 or higher"),
     })
-    .when("billingType", {
-      is: (b: string) => b === "cpm",
+    .when(["billingType", "format"], {
+      is: (b: string, f: CampaignFormat) =>
+        b === "cpm" && f === CampaignFormat.PushNotification,
       then: (schema) => schema.moreThan(5, "CPM price must be 6 or higher"),
     })
+    .when(["billingType", "format"], {
+      is: (b: string, f: CampaignFormat) =>
+        b === "cpm" && f === CampaignFormat.NewsDisplayAd,
+      then: (schema) => schema.moreThan(9, "CPM price must be 10 or higher"),
+    })
     .required("Price is a required field"),
   billingType: string()
     .label("Pricing Type")