[SHEP-2] UI Created to Split a Single Campaign into Multiple Campaigns

ad-ops-dashboard/src/components/Dialogs/FormDialog.tsx

@@ -19,6 +19,7 @@ interface FormDialogProps {
   children: ReactNode;
   open: boolean;
   handleClose: () => void;
+  maxWidth?: "sm" | "md" | "lg" | "xl";
 }
 
 const Container = styled(Box)`
@@ -33,6 +34,7 @@ export default function FormDialog({
   children,
   open,
   handleClose,
+  maxWidth,
 }: FormDialogProps) {
   return (
     <Dialog
@@ -43,6 +45,7 @@ export default function FormDialog({
       aria-labelledby="alert-dialog-title"
       aria-describedby="alert-dialog-description"
       aria-modal
+      maxWidth={maxWidth}
     >
       <DialogTitle>
         <Container>

ad-ops-dashboard/src/components/Forms/CampaignForm.tsx

@@ -34,8 +34,8 @@ export default function CampaignForm({
     useForm<CampaignFormSchema>({
       resolver: zodResolver(campaignFormSchema),
       defaultValues: {
-        notes: formData.notes,
-        ad_ops_person: formData.ad_ops_person,
+        notes: formData.notes ?? "",
+        ad_ops_person: formData.ad_ops_person ?? "",
         kevel_flight_id: formData.kevel_flight_id,
         impressions_sold: formData.impressions_sold,
         net_spend: formData.net_spend,
@@ -63,7 +63,7 @@ export default function CampaignForm({
       selectedDeal = formData.deal === watchDeal ? formData.deal : watchDeal;
     }
 
-    if (selectedDeal) {
+    if (Array.isArray(campaigns) && selectedDeal) {
       const filtered = campaigns
         .filter((item) => item.deal === selectedDeal)
         .filter((item) => !isUpdate || item.id !== formData.id);
@@ -111,10 +111,12 @@ export default function CampaignForm({
     }
   };
 
-  const deals = boostrDeals?.map((deal: BoostrDeal) => ({
-    label: deal.name,
-    value: deal.id,
-  }));
+  const deals = Array.isArray(boostrDeals)
+    ? boostrDeals.map((deal: BoostrDeal) => ({
+        label: deal.name,
+        value: deal.id,
+      }))
+    : [];
 
   return (
     <Box>
@@ -124,6 +126,7 @@ export default function CampaignForm({
             name="ad_ops_person"
             label="Ad Ops Person"
             control={control}
+            fullWidth
           />
         </Box>
         <Box mt={2}>
@@ -132,6 +135,7 @@ export default function CampaignForm({
             label="Kevel Flight Id"
             control={control}
             type="number"
+            fullWidth
           />
         </Box>
         <Box mt={2}>
@@ -140,6 +144,7 @@ export default function CampaignForm({
             label="Impressions Sold"
             control={control}
             type="number"
+            fullWidth
           />
         </Box>
         <Box mt={2}>
@@ -148,10 +153,11 @@ export default function CampaignForm({
             label="Net Spend"
             control={control}
             type="number"
+            fullWidth
           />
         </Box>
         <Box mt={2}>
-          <TextInput name="seller" label="Seller" control={control} />
+          <TextInput name="seller" label="Seller" control={control} fullWidth />
         </Box>
         <Box mt={2}>
           <DateInput
@@ -176,6 +182,7 @@ export default function CampaignForm({
             control={control}
             rows={3}
             multiline
+            fullWidth
           />
         </Box>
         <Box mt={2}>

ad-ops-dashboard/src/components/Forms/SplitCampaignForm.tsx

@@ -0,0 +1,201 @@
+import React from "react";
+import { Box, Button, Grid2 } from "@mui/material";
+import { Add, Remove } from "@mui/icons-material";
+import { useFieldArray, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { styled } from "@mui/system";
+import {
+  CampaignFormSchema,
+  SplitFormSchema,
+  splitFormSchema,
+} from "../../utils/schemas/campaignFormSchema";
+import TextInput from "../Inputs/TextInput";
+import DateInput from "../Inputs/DateInput";
+import { useSplitCampaignMutation } from "../../data/campaigns";
+import Tooltip from "@mui/material/Tooltip";
+
+interface SplitCampaignProps {
+  handleClose: () => void;
+  formData: CampaignFormSchema;
+}
+
+const StyledBox = styled(Box)(() => ({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+}));
+
+const StyledButton = styled(Button)(() => ({
+  marginRight: "3.8rem",
+}));
+
+export default function SplitCampaignForm({
+  formData,
+  handleClose,
+}: SplitCampaignProps) {
+  const splitMutation = useSplitCampaignMutation();
+
+  const { control, handleSubmit, reset } = useForm<SplitFormSchema>({
+    resolver: zodResolver(splitFormSchema),
+    defaultValues: {
+      campaigns: [
+        {
+          id: formData.id,
+          impressions_sold: formData.impressions_sold || "",
+          net_spend: formData.net_spend || "",
+          kevel_flight_id: formData.kevel_flight_id || "",
+          ad_ops_person: formData.ad_ops_person || "",
+          seller: formData.seller || "",
+          start_date: formData.start_date || "",
+          end_date: formData.end_date || "",
+          notes: formData.notes || "",
+          deal: formData.deal || undefined,
+        },
+      ],
+    },
+  });
+
+  const onSubmitHandler = (data: SplitFormSchema) => {
+    const updatedData = {
+      ...data,
+      deal: formData.deal,
+    };
+
+    splitMutation.mutate(updatedData, {
+      onSuccess: () => {
+        reset();
+        handleClose();
+      },
+    });
+  };
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "campaigns",
+  });
+
+  return (
+    <Box mt="2rem">
+      <Box component="form" onSubmit={handleSubmit(onSubmitHandler)}>
+        <Grid2 container spacing={2}>
+          {fields.map((field, index) => (
+            <React.Fragment key={field.id}>
+              <Grid2 size={2}>
+                <TextInput
+                  name={`campaigns.${index}.ad_ops_person`}
+                  label="Ad Ops Person"
+                  control={control}
+                  fullWidth
+                />
+              </Grid2>
+              <Grid2 size={1}>
+                <TextInput
+                  name={`campaigns.${index}.kevel_flight_id`}
+                  label="Kevel Flight Id"
+                  type="number"
+                  control={control}
+                  fullWidth
+                />
+              </Grid2>
+              <Grid2 size={1}>
+                <TextInput
+                  name={`campaigns.${index}.impressions_sold`}
+                  label="Impressions Sold"
+                  type="number"
+                  control={control}
+                  fullWidth
+                />
+              </Grid2>
+              <Grid2 size={1}>
+                <TextInput
+                  name={`campaigns.${index}.net_spend`}
+                  label="Net spend"
+                  type="number"
+                  control={control}
+                  fullWidth
+                />
+              </Grid2>
+              <Grid2 size={2}>
+                <TextInput
+                  name={`campaigns.${index}.seller`}
+                  label="Seller"
+                  control={control}
+                  fullWidth
+                />
+              </Grid2>
+              <Grid2 size={3}>
+                <StyledBox>
+                  <Box>
+                    <DateInput
+                      control={control}
+                      label="Start Date"
+                      name={`campaigns.${index}.start_date`}
+                    />
+                  </Box>
+                  <Box sx={{ marginLeft: "1rem" }}>
+                    <DateInput
+                      control={control}
+                      label="End Date"
+                      name={`campaigns.${index}.end_date`}
+                    />
+                  </Box>
+                </StyledBox>
+              </Grid2>
+              <Grid2 size={2}>
+                <StyledBox>
+                  <Box>
+                    <TextInput
+                      name={`campaigns.${index}.notes`}
+                      label="Notes"
+                      control={control}
+                    />
+                  </Box>
+                  <Box
+                    sx={{
+                      display: "flex",
+                      justifyContent: "center",
+                      alignItems: "center",
+                    }}
+                  >
+                    {index == 0 ? (
+                      <Tooltip title="Split Campaign" placement="top" arrow>
+                        <Button
+                          onClick={() =>
+                            append({
+                              impressions_sold: "",
+                              net_spend: "",
+                              kevel_flight_id: "",
+                              ad_ops_person: "",
+                              seller: "",
+                              start_date: "",
+                              end_date: "",
+                              notes: "",
+                              deal: formData.deal,
+                            })
+                          }
+                        >
+                          <Add fontSize="large" />
+                        </Button>
+                      </Tooltip>
+                    ) : (
+                      <Tooltip title="Remove Campaign" placement="top" arrow>
+                        <Button onClick={() => remove(index)}>
+                          <Remove fontSize="large" color="error" />
+                        </Button>
+                      </Tooltip>
+                    )}
+                  </Box>
+                </StyledBox>
+              </Grid2>
+            </React.Fragment>
+          ))}
+        </Grid2>
+        <Box mt="2rem" display="flex" justifyContent="flex-end" width="100%">
+          <StyledButton variant="contained" type="submit">
+            Save
+          </StyledButton>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

ad-ops-dashboard/src/components/Inputs/TextInput.tsx

@@ -17,22 +17,13 @@ export default function TextInput({
     <Controller
       name={name}
       control={control}
-      render={({
-        field: { onChange, onBlur, value, ref },
-        fieldState: { error },
-      }) => (
+      render={({ field, fieldState: { error } }) => (
         <TextField
-          onChange={(e) =>
-            { onChange(props.type === "number" ? +e.target.value : e.target.value); }
-          }
-          onBlur={onBlur}
-          value={value}
-          inputRef={ref}
-          fullWidth
-          label={label}
+          {...field}
           {...props}
           error={!!error}
           helperText={error?.message}
+          label={label}
         />
       )}
     />

ad-ops-dashboard/src/config/routes.config.ts

@@ -2,8 +2,8 @@ const BASE_URL = import.meta.env.VITE_API_BASE_URL;
 
 export const apiRoutes = {
   campaigns: `${BASE_URL}/campaigns/`,
-  campaign: (id: number | undefined) =>
-    `${BASE_URL}/campaigns/${id}/`,
+  campaign: (id: number | undefined) => `${BASE_URL}/campaigns/${id}/`,
+  splitCampaigns: `${BASE_URL}/campaigns/split/`,
   boostrDeals: `${BASE_URL}/deals/`,
   products: `${BASE_URL}/products/`,
 };

ad-ops-dashboard/src/data/campaigns.ts

@@ -2,7 +2,11 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
 import { toast } from "react-toastify";
 import { apiRoutes } from "../config/routes.config";
-import { CampaignFormSchema } from "../utils/schemas/campaignFormSchema";
+import {
+  CampaignFormSchema,
+  SplitFormSchema,
+} from "../utils/schemas/campaignFormSchema";
+
 export const useGetCampaignsQuery = () => {
   const getCampaigns = useQuery({
     queryKey: ["campaigns"],
@@ -14,6 +18,30 @@ export const useGetCampaignsQuery = () => {
 
   return getCampaigns;
 };
+
+export const useSplitCampaignMutation = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: SplitFormSchema) => {
+      return axios.post(apiRoutes.splitCampaigns, data);
+    },
+    onError: (error: any) => {
+      if (error.response?.data) {
+        const errorMessage =
+          error.response.data.non_field_errors?.[0] || "An error occurred";
+        toast.error(errorMessage);
+      } else {
+        toast.error("An unexpected error occurred");
+      }
+    },
+    onSuccess: () => {
+      toast.success("Campaign splitted successfully.");
+      queryClient.invalidateQueries({ queryKey: ["campaigns"] });
+    },
+  });
+};
+
 export const useCreateCampaignMutation = () => {
   const queryClient = useQueryClient();