From 8169b61ceebf4c9e218fddd8cd5f7b798d3c1be5 Mon Sep 17 00:00:00 2001
From: Ian Krieger <48930920+IanKrieger@users.noreply.github.com>
Date: Tue, 12 Sep 2023 14:18:35 -0400
Subject: [PATCH] fix: different news CPM (#883)

---
 src/form/FormikHelpers.tsx                    | 23 +++++++++++++++----
 .../campaign/fields/BudgetField.tsx           | 23 +++++++++++++++++--
 .../campaign/fields/FormatField.tsx           | 15 ++++++++++--
 .../form/components/PaymentButton.tsx         |  1 -
 src/validation/CampaignSchema.tsx             | 15 ++++++++++--
 5 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/src/form/FormikHelpers.tsx b/src/form/FormikHelpers.tsx
index a3ea8a28..12bc4226 100644
--- a/src/form/FormikHelpers.tsx
+++ b/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}
diff --git a/src/user/views/adsManager/views/advanced/components/campaign/fields/BudgetField.tsx b/src/user/views/adsManager/views/advanced/components/campaign/fields/BudgetField.tsx
index f5b22b1e..037d1a2e 100644
--- a/src/user/views/adsManager/views/advanced/components/campaign/fields/BudgetField.tsx
+++ b/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>
         )}
diff --git a/src/user/views/adsManager/views/advanced/components/campaign/fields/FormatField.tsx b/src/user/views/adsManager/views/advanced/components/campaign/fields/FormatField.tsx
index e3e1419c..fb2208a3 100644
--- a/src/user/views/adsManager/views/advanced/components/campaign/fields/FormatField.tsx
+++ b/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",
diff --git a/src/user/views/adsManager/views/advanced/components/form/components/PaymentButton.tsx b/src/user/views/adsManager/views/advanced/components/form/components/PaymentButton.tsx
index 950e86f9..e67f5e57 100644
--- a/src/user/views/adsManager/views/advanced/components/form/components/PaymentButton.tsx
+++ b/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}
diff --git a/src/validation/CampaignSchema.tsx b/src/validation/CampaignSchema.tsx
index a1b9efa8..1e64cd03 100644
--- a/src/validation/CampaignSchema.tsx
+++ b/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")