Production Release 2023-08-23

src/user/adSet/AdSetList.tsx

@@ -9,6 +9,7 @@ import { StatsMetric } from "user/analytics/analyticsOverview/types";
 import { AdSetFragment } from "graphql/ad-set.generated";
 import { AdDetailTable } from "user/views/user/AdDetailTable";
 import { displayFromCampaignState } from "util/displayState";
+import { uiLabelsForBillingType } from "util/billingType";
 
 interface Props {
   loading: boolean;
@@ -98,8 +99,7 @@ export function AdSetList({ campaign, loading, engagements }: Props) {
     },
     {
       title: "Type",
-      value: (c) =>
-        c.billingType === "cpm" ? "Impressions (CPM)" : "Clicks (CPC)",
+      value: (c) => uiLabelsForBillingType(c.billingType).longLabel,
     },
     {
       title: "Platforms",

src/user/library/index.test.ts

@@ -185,4 +185,14 @@ describe("pricing logic (write)", () => {
     expect(inputObject.price).toEqual("9");
     expect(inputObject.priceType).toEqual(ConfirmationType.Click);
   });
+
+  it("should not convert CPV to per-impression values when populating a CPV creative", () => {
+    const inputObject = transformCreative(creative, {
+      billingType: "cpv",
+      price: 9,
+    });
+
+    expect(inputObject.price).toEqual("9");
+    expect(inputObject.priceType).toEqual(ConfirmationType.Landed);
+  });
 });

src/user/library/index.ts

@@ -88,6 +88,9 @@ export function transformCreative(
   if (campaign.billingType === "cpm") {
     price = BigNumber(campaign.price).dividedBy(1000);
     priceType = ConfirmationType.View;
+  } else if (campaign.billingType === "cpv") {
+    price = BigNumber(campaign.price);
+    priceType = ConfirmationType.Landed;
   } else {
     price = BigNumber(campaign.price);
     priceType = ConfirmationType.Click;

src/user/views/adsManager/types/index.ts

@@ -7,7 +7,7 @@ import { defaultEndDate, defaultStartDate } from "form/DateFieldHelpers";
 import { MIN_PER_CAMPAIGN } from "validation/CampaignSchema";
 import { IAdvertiser } from "auth/context/auth.interface";
 
-export type Billing = "cpm" | "cpc";
+export type Billing = "cpm" | "cpc" | "cpv";
 
 export type CampaignForm = {
   draftId?: string;

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

@@ -8,6 +8,7 @@ import { MIN_PER_CAMPAIGN, MIN_PER_DAY } from "validation/CampaignSchema";
 import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
 import _ from "lodash";
 import { CardContainer } from "components/Card/CardContainer";
+import { uiLabelsForBillingType } from "util/billingType";
 
 interface Props {
   isEdit: boolean;
@@ -94,8 +95,14 @@ export function BudgetField({ isEdit }: Props) {
             <FormikRadioControl
               name="billingType"
               options={[
-                { value: "cpm", label: "CPM (Impressions)" },
-                { value: "cpc", label: "CPC (Clicks)" },
+                {
+                  value: "cpm",
+                  label: uiLabelsForBillingType("cpm").longLabel,
+                },
+                {
+                  value: "cpc",
+                  label: uiLabelsForBillingType("cpc").longLabel,
+                },
               ]}
               disabled={isEdit && values.state !== "draft"}
             />

src/user/views/adsManager/views/advanced/components/review/components/CampaignReview.tsx

@@ -2,6 +2,7 @@ import { CampaignForm } from "../../../../../types";
 import { FormikErrors } from "formik";
 import { ReviewField } from "./ReviewField";
 import { ReviewContainer } from "user/views/adsManager/views/advanced/components/review/components/ReviewContainer";
+import { uiLabelsForBillingType } from "util/billingType";
 
 interface Props {
   values: CampaignForm;
@@ -21,10 +22,6 @@ export function CampaignReview({ values, errors }: Props) {
     return new Date(date).toLocaleDateString("en-US", options);
   };
 
-  const billing = (v: string) => {
-    return v === "cpm" ? "Impressions (CPM)" : "Clicks (CPC)";
-  };
-
   return (
     <ReviewContainer name="Campaign" path="settings">
       <ReviewField caption="Name" value={values.name} error={errors.name} />
@@ -46,7 +43,7 @@ export function CampaignReview({ values, errors }: Props) {
       />
       <ReviewField
         caption="Pricing Type"
-        value={billing(values.billingType)}
+        value={uiLabelsForBillingType(values.billingType).longLabel}
         error={errors.billingType}
       />
       <ReviewField

src/util/billingType.ts

@@ -0,0 +1,26 @@
+interface BillingTypeLabels {
+  value: string;
+  shortLabel: string;
+  longLabel: string;
+}
+
+const BILLING_TYPES = [
+  { value: "cpm", shortLabel: "CPM", longLabel: "CPM (Views)" },
+  { value: "cpc", shortLabel: "CPC", longLabel: "CPC (Clicks)" },
+  { value: "cpv", shortLabel: "CPV", longLabel: "CPV (Visits)" },
+];
+export function uiLabelsForBillingType(
+  billingType: string | undefined | null,
+): BillingTypeLabels {
+  if (!billingType) {
+    return { value: "N/A", shortLabel: "N/A", longLabel: "Unknown" };
+  }
+  const entry = BILLING_TYPES.find((bt) => bt.value === billingType);
+  return (
+    entry ?? {
+      value: billingType,
+      shortLabel: billingType.toUpperCase(),
+      longLabel: billingType.toUpperCase(),
+    }
+  );
+}