feat: allow for price-per-advertiser

src/graphql/advertiser.graphql

@@ -65,6 +65,12 @@ fragment AdvertiserImage on AdvertiserImage {
   createdAt
 }
 
+fragment AdvertiserPrice on AdvertiserPrice {
+  price
+  billingType
+  format
+}
+
 query advertiserImages($id: String!) {
   advertiser(id: $id) {
     images {
@@ -73,6 +79,14 @@ query advertiserImages($id: String!) {
   }
 }
 
+query advertiserPrices($id: String!) {
+  advertiser(id: $id) {
+    prices {
+      ...AdvertiserPrice
+    }
+  }
+}
+
 mutation uploadAdvertiserImage($input: CreateAdvertiserImageInput!) {
   createAdvertiserImage(createImageInput: $input) {
     name

src/user/hooks/useAdvertiserWithPrices.tsx

@@ -0,0 +1,41 @@
+import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
+import {
+  AdvertiserPriceFragment,
+  useAdvertiserPricesQuery,
+} from "graphql/advertiser.generated";
+import { useState } from "react";
+import { IAdvertiser } from "auth/context/auth.interface";
+import _ from "lodash";
+
+export type AdvertiserWithPrices = IAdvertiser & {
+  prices: AdvertiserPriceFragment[];
+};
+export function useAdvertiserWithPrices() {
+  const { advertiser } = useAdvertiser();
+  const [data, setData] = useState<AdvertiserWithPrices>({
+    ...advertiser,
+    prices: [],
+  });
+  const [error, setError] = useState<string>();
+
+  const { loading } = useAdvertiserPricesQuery({
+    variables: { id: advertiser.id },
+    onCompleted(data) {
+      const prices = data.advertiser?.prices ?? [];
+      if (_.isEmpty(prices)) {
+        setError("Unable to create a new campaign");
+        return;
+      }
+
+      setData({
+        ...advertiser,
+        prices,
+      });
+    },
+    onError(error) {
+      setError(error.message);
+    },
+  });
+
+  return { data, loading, error };
+}

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

@@ -1,7 +1,7 @@
 import { CampaignFormat, CreativeInput, PaymentType } from "graphql/types";
 import { defaultEndDate, defaultStartDate } from "form/DateFieldHelpers";
 import { MIN_PER_CAMPAIGN } from "validation/CampaignSchema";
-import { IAdvertiser } from "auth/context/auth.interface";
+import { AdvertiserWithPrices } from "user/hooks/useAdvertiserWithPrices";
 
 export type Billing = "cpm" | "cpc" | "cpv";
 
@@ -24,7 +24,7 @@ export type CampaignForm = {
   state: string;
   type: "paid";
   // this is per click for CPC campaigns, but per thousand views for CPM campaigns
-  price: number;
+  price: string;
   billingType: Billing;
   paymentType: PaymentType;
 };
@@ -105,7 +105,14 @@ export const initialAdSet: AdSetForm = {
   creatives: [],
 };
 
-export const initialCampaign = (advertiser: IAdvertiser): CampaignForm => {
+export const initialCampaign = (
+  advertiser: AdvertiserWithPrices,
+): CampaignForm => {
+  const format = CampaignFormat.PushNotification;
+  const billingType = "cpm";
+  const price = advertiser.prices.find(
+    (p) => p.billingType === billingType.toUpperCase() && p.format === format,
+  );
   return {
     isCreating: false,
     advertiserId: advertiser.id,
@@ -116,15 +123,15 @@ export const initialCampaign = (advertiser: IAdvertiser): CampaignForm => {
     dailyBudget: MIN_PER_CAMPAIGN,
     geoTargets: [],
     newCreative: initialCreative,
-    billingType: "cpm",
+    billingType,
     currency: "USD",
-    price: 6,
+    price: price?.price ?? "6",
     adSets: [
       {
         ...initialAdSet,
       },
     ],
-    format: CampaignFormat.PushNotification,
+    format,
     name: "",
     state: "draft",
     type: "paid",

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

@@ -9,23 +9,27 @@ import {
 } from "graphql/campaign.generated";
 import { useHistory, useParams } from "react-router-dom";
 import { BaseForm } from "./components/BaseForm";
-import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
 import { useCreatePaymentSession } from "checkout/hooks/useCreatePaymentSession";
 import { ErrorDetail } from "components/Error/ErrorDetail";
 import { refetchAdvertiserCampaignsQuery } from "graphql/advertiser.generated";
 import { useContext } from "react";
 import { FilterContext } from "state/context";
+import { useAdvertiserWithPrices } from "user/hooks/useAdvertiserWithPrices";
 
 interface Params {
   campaignId: string;
 }
 
 export function EditCampaign() {
   const { fromDate } = useContext(FilterContext);
-  const { advertiser } = useAdvertiser();
   const history = useHistory();
   const params = useParams<Params>();
   const { createPaymentSession, loading } = useCreatePaymentSession();
+  const {
+    data,
+    loading: priceLoading,
+    error: priceError,
+  } = useAdvertiserWithPrices();
 
   const {
     data: initialData,
@@ -53,27 +57,33 @@ export function EditCampaign() {
     refetchQueries: [
       {
         ...refetchAdvertiserCampaignsQuery({
-          id: advertiser.id,
+          id: data.id,
           filter: { from: fromDate },
         }),
       },
     ],
   });
 
-  if (error) {
+  if (error || priceError) {
     return (
       <ErrorDetail
-        error={error}
+        error={error ?? priceError}
         additionalDetails="Campaign does not exist, or cannot be edited. Please try again later."
       />
     );
   }
 
-  if (!initialData || !initialData.campaign || qLoading || loading) {
+  if (
+    !initialData ||
+    !initialData.campaign ||
+    qLoading ||
+    loading ||
+    priceLoading
+  ) {
     return <LinearProgress />;
   }
 
-  const initialValues = editCampaignValues(initialData.campaign, advertiser.id);
+  const initialValues = editCampaignValues(initialData.campaign, data.id);
   return (
     <Container maxWidth="xl">
       <Formik
@@ -84,7 +94,7 @@ export function EditCampaign() {
           await mutation({ variables: { input } });
           setSubmitting(false);
         }}
-        validationSchema={CampaignSchema}
+        validationSchema={CampaignSchema(data.prices)}
       >
         <BaseForm hasPaymentIntent={hasPaymentIntent} />
       </Formik>