fix: no need for default, use prices when switching

brave · Sep 26, 2023 · e34cfb2 · e34cfb2
1 parent 0367f4b
commit e34cfb2
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 35 deletions.
diff --git a/src/graphql/advertiser.generated.tsx b/src/graphql/advertiser.generated.tsx
diff --git a/src/graphql/advertiser.graphql b/src/graphql/advertiser.graphql
@@ -69,7 +69,6 @@ fragment AdvertiserPrice on AdvertiserPrice {
   price
   billingType
   format
-  isDefault
 }
 
 query advertiserImages($id: String!) {

diff --git a/src/user/views/adsManager/views/advanced/components/campaign/CampaignSettings.tsx b/src/user/views/adsManager/views/advanced/components/campaign/CampaignSettings.tsx
@@ -4,8 +4,9 @@ import { CampaignDateRange } from "components/Campaigns/CampaignDateRange";
 import { LocationField } from "user/views/adsManager/views/advanced/components/campaign/fields/LocationField";
 import { Typography } from "@mui/material";
 import { FormatField } from "user/views/adsManager/views/advanced/components/campaign/fields/FormatField";
+import { AdvertiserPriceFragment } from "graphql/advertiser.generated";
 
-export function CampaignSettings() {
+export function CampaignSettings(props: { prices: AdvertiserPriceFragment[] }) {
   const { isDraft } = useIsEdit();
 
   return (
@@ -20,7 +21,7 @@ export function CampaignSettings() {
         <CampaignDateRange />
       </CardContainer>
 
-      <FormatField />
+      <FormatField prices={props.prices} />
 
       {isDraft && <LocationField />}
     </>

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
@@ -16,15 +16,8 @@ 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>();
@@ -102,13 +95,6 @@ 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",

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
@@ -12,8 +12,13 @@ import _ from "lodash";
 import HelpIcon from "@mui/icons-material/Help";
 import { useIsEdit } from "form/FormikHelpers";
 import { Billing } from "user/views/adsManager/types";
+import { AdvertiserPriceFragment } from "graphql/advertiser.generated";
 
-export function FormatField() {
+interface PriceProps {
+  prices: AdvertiserPriceFragment[];
+}
+
+export function FormatField({ prices }: PriceProps) {
   return (
     <CardContainer header="Format">
       <Stack direction="row" spacing={0.5} alignItems="center">
@@ -34,30 +39,43 @@ export function FormatField() {
         </IconButton>
       </Stack>
       <List sx={{ display: "flex", flexDirection: "row", gap: "20px" }}>
-        <FormatItemButton format={CampaignFormat.PushNotification} />
-        <FormatItemButton format={CampaignFormat.NewsDisplayAd} />
+        <FormatItemButton
+          format={CampaignFormat.PushNotification}
+          prices={prices}
+        />
+        <FormatItemButton
+          format={CampaignFormat.NewsDisplayAd}
+          prices={prices}
+        />
       </List>
     </CardContainer>
   );
 }
 
-const FormatItemButton = (props: { format: CampaignFormat }) => {
+const FormatItemButton = (props: { format: CampaignFormat } & PriceProps) => {
   const { isEdit } = useIsEdit();
   const [, meta, format] = useField<CampaignFormat>("format");
-  const [, , price] = useField<number>("price");
-  const [, , billing] = useField<Billing>("billingType");
+  const [, , price] = useField<string>("price");
+  const [, bMeta, billing] = useField<Billing>("billingType");
 
   return (
     <ListItemButton
       disabled={isEdit}
       selected={meta.value === props.format}
       onClick={() => {
         format.setValue(props.format);
+        const found = props.prices.find((p) => {
+          return (
+            p.format === props.format &&
+            p.billingType === bMeta.value.toUpperCase()
+          );
+        });
+        console.log(found);
         if (props.format === CampaignFormat.NewsDisplayAd) {
-          price.setValue(10);
+          price.setValue(found?.price ?? "10");
           billing.setValue("cpm");
         } else {
-          price.setValue(6);
+          price.setValue(found?.price ?? "6");
         }
       }}
       sx={{

diff --git a/src/user/views/adsManager/views/advanced/components/form/EditCampaign.tsx b/src/user/views/adsManager/views/advanced/components/form/EditCampaign.tsx
@@ -96,7 +96,7 @@ export function EditCampaign() {
         }}
         validationSchema={CampaignSchema(data.prices)}
       >
-        <BaseForm hasPaymentIntent={hasPaymentIntent} />
+        <BaseForm hasPaymentIntent={hasPaymentIntent} prices={data.prices} />
       </Formik>
     </Container>
   );

diff --git a/src/user/views/adsManager/views/advanced/components/form/NewCampaign.tsx b/src/user/views/adsManager/views/advanced/components/form/NewCampaign.tsx
@@ -74,6 +74,7 @@ export function NewCampaign() {
   return (
     <Container maxWidth="xl">
       <Formik
+        enableReinitialize
         initialValues={initial}
         onSubmit={async (v: CampaignForm, { setSubmitting }) => {
           setSubmitting(true);
@@ -84,7 +85,7 @@ export function NewCampaign() {
         validationSchema={CampaignSchema(data.prices)}
       >
         <>
-          <BaseForm />
+          <BaseForm prices={data.prices} />
           <PersistFormValues />
         </>
       </Formik>

diff --git a/src/user/views/adsManager/views/advanced/components/form/components/BaseForm.tsx b/src/user/views/adsManager/views/advanced/components/form/components/BaseForm.tsx
@@ -10,20 +10,22 @@ import { Route, Switch, useRouteMatch } from "react-router-dom";
 import { BudgetSettings } from "user/views/adsManager/views/advanced/components/campaign/BudgetSettings";
 import { FormContext } from "state/context";
 import { useState } from "react";
+import { AdvertiserPriceFragment } from "graphql/advertiser.generated";
 
 interface Props {
   hasPaymentIntent?: boolean | null;
+  prices: AdvertiserPriceFragment[];
 }
 
-export function BaseForm({ hasPaymentIntent }: Props) {
+export function BaseForm({ hasPaymentIntent, prices }: Props) {
   const { url } = useRouteMatch();
   const [isShowingAds, setIsShowingAds] = useState(false);
 
   const steps = [
     {
       label: "Campaign Settings",
       path: `${url}/settings`,
-      component: <CampaignSettings />,
+      component: <CampaignSettings prices={prices} />,
     },
     {
       label: "Budget",

diff --git a/src/validation/CampaignSchema.tsx b/src/validation/CampaignSchema.tsx
@@ -19,9 +19,8 @@ import BigNumber from "bignumber.js";
 
 export const MIN_PER_DAY = 33;
 export const MIN_PER_CAMPAIGN = 100;
-export type PriceFragment = Omit<AdvertiserPriceFragment, "isDefault">;
 
-export const CampaignSchema = (prices: PriceFragment[]) =>
+export const CampaignSchema = (prices: AdvertiserPriceFragment[]) =>
   object().shape({
     name: string().label("Campaign Name").required(),
     format: string()
@@ -177,7 +176,7 @@ export const CampaignSchema = (prices: PriceFragment[]) =>
   });
 
 export function findPrice(
-  prices: PriceFragment[],
+  prices: AdvertiserPriceFragment[],
   format: CampaignFormat,
   billingType: BillingType,
   defaultPrice: string,