adserver-dashboard 1.0.0

package/client/src/pages/buyer-form.tsx

@@ -0,0 +1,339 @@
+import { useState, useEffect } from "react";
+import { useLocation, useRoute } from "wouter";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useTranslation } from "@/lib/i18n";
+import { Button, cn } from "@moving-walls/design-system";
+import { FormLabel } from "@moving-walls/design-system";
+import { Input } from "@moving-walls/design-system";
+import { Card, CardContent } from "@moving-walls/design-system";
+import {
+  SelectRoot,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@moving-walls/design-system";
+import { ArrowLeft, Users } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+import { usePageTitle } from "@/hooks/use-page-title";
+import { useQuery } from "@tanstack/react-query";
+import { getDspBuyer, createDspBuyer, updateDspBuyer, getDspDropdownList, type DspBuyer } from "@/lib/dsp-buyer-api";
+
+const COUNTRIES = [
+  { value: "Malaysia", label: "Malaysia" },
+  { value: "Singapore", label: "Singapore" },
+  { value: "Japan", label: "Japan" },
+  { value: "Indonesia", label: "Indonesia" },
+  { value: "Thailand", label: "Thailand" },
+  { value: "Philippines", label: "Philippines" },
+  { value: "Australia", label: "Australia" },
+  { value: "United States", label: "United States" },
+  { value: "United Kingdom", label: "United Kingdom" },
+  { value: "Germany", label: "Germany" },
+  { value: "France", label: "France" },
+  { value: "India", label: "India" },
+];
+
+const formSchema = z.object({
+  name: z.string().min(1, "DSP is required"),
+  dspId: z.string().optional().nullable(),
+  seatId: z.string().min(1, "Seat ID is required"),
+  seatName: z.string().min(1, "Seat Name is required"),
+  buyerAccountId: z.string().min(1, "Buyer Account ID is required"),
+  emailAddress: z.string().email("Please enter a valid email"),
+  country: z.string().min(1, "Country is required"),
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+const buyerErrorMessageMap: Record<string, string> = {
+  "DSP is required": "form.validation.dspRequired",
+  "Seat ID is required": "form.validation.seatIdRequired",
+  "Seat Name is required": "form.validation.seatNameRequired",
+  "Buyer Account ID is required": "form.validation.buyerAccountIdRequired",
+  "Please enter a valid email": "form.validation.emailInvalid",
+  "Country is required": "form.validation.countryRequired",
+};
+
+const getErrorTranslation = (t: any, message: string | undefined): string => {
+  if (!message) return "";
+  const key = buyerErrorMessageMap[message];
+  return key ? t(`buyer:${key}`) : message;
+};
+
+const SectionIcon = ({
+  icon: Icon,
+  bgColor,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  bgColor: string;
+}) => (
+  <div className={cn("w-10 h-10 rounded-lg flex items-center justify-center", bgColor)}>
+    <Icon className="h-5 w-5 text-white" />
+  </div>
+);
+
+export default function BuyerFormPage() {
+  const { t } = useTranslation(["buyer", "common"]);
+  const [, setLocation] = useLocation();
+  const [matchEdit, paramsEdit] = useRoute("/buyers/edit/:buyerId");
+  const buyerId = matchEdit ? paramsEdit?.buyerId : null;
+  const isEditMode = !!buyerId;
+  usePageTitle(isEditMode ? t("buyer:form.editTitle") : t("buyer:form.addTitle"));
+
+  const { toast } = useToast();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { errors },
+    reset,
+  } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: "",
+      dspId: "",
+      seatId: "",
+      seatName: "",
+      buyerAccountId: "",
+      emailAddress: "",
+      country: "",
+    },
+  });
+
+  const { data: dspDropdownList = [], isLoading: isDspDropdownLoading } = useQuery({
+    queryKey: ["dsp-dropdown"],
+    queryFn: getDspDropdownList,
+  });
+
+  const { data: existingBuyerData, isLoading: isFetchingBuyer } = useQuery<DspBuyer>({
+    queryKey: ["dsp-buyer", buyerId],
+    queryFn: () => getDspBuyer(buyerId!),
+    enabled: isEditMode && !!buyerId,
+  });
+
+  useEffect(() => {
+    if (existingBuyerData) {
+      reset({
+        name: existingBuyerData.name || "",
+        dspId: existingBuyerData.dspId || "",
+        seatId: existingBuyerData.seatId || "",
+        seatName: existingBuyerData.seatName || "",
+        buyerAccountId: existingBuyerData.buyerAccountId || "",
+        emailAddress: existingBuyerData.emailAddress || "",
+        country: existingBuyerData.country || "",
+      });
+    }
+  }, [existingBuyerData, reset]);
+
+  const handleCancel = () => {
+    setLocation("/buyers");
+  };
+
+  const onSubmit = async (data: FormData) => {
+    setIsSubmitting(true);
+    try {
+      if (isEditMode && buyerId && existingBuyerData) {
+        const updatedBuyer: DspBuyer = {
+          ...existingBuyerData,
+          name: data.name,
+          dspId: data.dspId || existingBuyerData.dspId,
+          seatId: data.seatId,
+          seatName: data.seatName,
+          buyerAccountId: data.buyerAccountId,
+          emailAddress: data.emailAddress,
+          country: data.country,
+        };
+        await updateDspBuyer(buyerId, updatedBuyer);
+      } else {
+        await createDspBuyer({
+          name: data.name,
+          dspId: data.dspId || null,
+          seatId: data.seatId,
+          seatName: data.seatName,
+          buyerAccountId: data.buyerAccountId,
+          emailAddress: data.emailAddress,
+          country: data.country,
+        });
+      }
+      toast({
+        title: t("common:success"),
+        description: t("buyer:form.saveSuccess"),
+        variant: "success",
+      });
+      setLocation("/buyers");
+    } catch (error: any) {
+      toast({
+        title: t("common:error") || "Error",
+        description: error.message || "Failed to save buyer",
+        variant: "destructive",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (isEditMode && isFetchingBuyer) {
+    return (
+      <div className="flex flex-col h-full items-center justify-center">
+        <p className="text-mw-neutral-500">Loading...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex-shrink-0 px-6 py-4 border-b border-mw-neutral-100 bg-white">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Button
+              variant="ghost"
+              size="sm"
+              isIconOnly
+              onClick={handleCancel}
+            >
+              <ArrowLeft className="h-5 w-5" />
+            </Button>
+            <div className="h-10 w-10 rounded-lg bg-blue-50 flex items-center justify-center flex-shrink-0">
+              <Users className="h-5 w-5 text-blue-500" />
+            </div>
+            <div>
+              <h1 className="text-lg font-semibold text-mw-neutral-900">
+                {isEditMode ? t("buyer:form.editTitle") : t("buyer:form.addTitle")}
+              </h1>
+              <p className="text-sm text-mw-neutral-500">
+                {t("buyer:form.subtitle")}
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <Button variant="outline" onClick={handleCancel}>
+              {t("buyer:form.cancel")}
+            </Button>
+            <Button onClick={handleSubmit(onSubmit)} disabled={isSubmitting}>
+              {t("buyer:form.saveBuyer")}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 p-6 overflow-auto">
+        <div className="max-w-2xl mx-auto space-y-6">
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3 mb-6">
+                <SectionIcon icon={Users} bgColor="bg-blue-500" />
+                <h2 className="text-lg font-semibold text-mw-neutral-900">{t("buyer:form.addTitle")}</h2>
+              </div>
+              <div className="grid grid-cols-1 gap-6">
+                <div className="space-y-2">
+                  <FormLabel>{t("buyer:form.fields.dsp")}</FormLabel>
+                  <SelectRoot
+                    value={watch("dspId") || ""}
+                    onValueChange={(value) => {
+                      const dspOption = dspDropdownList.find((o) => o.id === value);
+                      if (dspOption) {
+                        setValue("name", dspOption.name);
+                        setValue("dspId", dspOption.id);
+                      }
+                    }}
+                  >
+                    <SelectTrigger className={errors.name ? "border-red-500" : ""}>
+                      <SelectValue placeholder={isDspDropdownLoading ? "Loading..." : t("buyer:form.fields.selectDsp")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {dspDropdownList.map((item) => (
+                        <SelectItem key={item.id} value={item.id}>
+                          {item.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </SelectRoot>
+                  {errors.name && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.name.message)}</p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <FormLabel>{t("buyer:form.fields.seatId")}</FormLabel>
+                  <Input
+                    placeholder={t("buyer:form.fields.enterSeatId")}
+                    {...register("seatId")}
+                    className={errors.seatId ? "border-red-500" : ""}
+                  />
+                  {errors.seatId && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.seatId.message)}</p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <FormLabel>{t("buyer:form.fields.seatName")}</FormLabel>
+                  <Input
+                    placeholder={t("buyer:form.fields.enterSeatName")}
+                    {...register("seatName")}
+                    className={errors.seatName ? "border-red-500" : ""}
+                  />
+                  {errors.seatName && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.seatName.message)}</p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <FormLabel>{t("buyer:form.fields.buyerAccountId")}</FormLabel>
+                  <Input
+                    placeholder={t("buyer:form.fields.enterBuyerAccountId")}
+                    {...register("buyerAccountId")}
+                    className={errors.buyerAccountId ? "border-red-500" : ""}
+                  />
+                  {errors.buyerAccountId && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.buyerAccountId.message)}</p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <FormLabel>{t("buyer:form.fields.emailId")}</FormLabel>
+                  <Input
+                    placeholder={t("buyer:form.fields.enterEmailId")}
+                    type="email"
+                    {...register("emailAddress")}
+                    className={errors.emailAddress ? "border-red-500" : ""}
+                  />
+                  {errors.emailAddress && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.emailAddress.message)}</p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <FormLabel>{t("buyer:form.fields.country") || "Country"}</FormLabel>
+                  <SelectRoot
+                    value={watch("country")}
+                    onValueChange={(value) => setValue("country", value)}
+                  >
+                    <SelectTrigger className={errors.country ? "border-red-500" : ""}>
+                      <SelectValue placeholder={t("buyer:form.fields.selectCountry") || "Select Country"} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {COUNTRIES.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </SelectRoot>
+                  {errors.country && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.country.message)}</p>
+                  )}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}