Skip to content

Commit

Permalink
fix: no need for default, use prices when switching
Browse files Browse the repository at this point in the history
  • Loading branch information
IanKrieger committed Sep 26, 2023
1 parent 0367f4b commit e34cfb2
Show file tree
Hide file tree
Showing 9 changed files with 38 additions and 35 deletions.
3 changes: 0 additions & 3 deletions src/graphql/advertiser.generated.tsx

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion src/graphql/advertiser.graphql
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ fragment AdvertiserPrice on AdvertiserPrice {
price
billingType
format
isDefault
}

query advertiserImages($id: String!) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -20,7 +21,7 @@ export function CampaignSettings() {
<CampaignDateRange />
</CardContainer>

<FormatField />
<FormatField prices={props.prices} />

{isDraft && <LocationField />}
</>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>();
Expand Down Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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={{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export function EditCampaign() {
}}
validationSchema={CampaignSchema(data.prices)}
>
<BaseForm hasPaymentIntent={hasPaymentIntent} />
<BaseForm hasPaymentIntent={hasPaymentIntent} prices={data.prices} />
</Formik>
</Container>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export function NewCampaign() {
return (
<Container maxWidth="xl">
<Formik
enableReinitialize
initialValues={initial}
onSubmit={async (v: CampaignForm, { setSubmitting }) => {
setSubmitting(true);
Expand All @@ -84,7 +85,7 @@ export function NewCampaign() {
validationSchema={CampaignSchema(data.prices)}
>
<>
<BaseForm />
<BaseForm prices={data.prices} />
<PersistFormValues />
</>
</Formik>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
5 changes: 2 additions & 3 deletions src/validation/CampaignSchema.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -177,7 +176,7 @@ export const CampaignSchema = (prices: PriceFragment[]) =>
});

export function findPrice(
prices: PriceFragment[],
prices: AdvertiserPriceFragment[],
format: CampaignFormat,
billingType: BillingType,
defaultPrice: string,
Expand Down

0 comments on commit e34cfb2

Please sign in to comment.