feat: purchase-plans page global update

2026-03-04 08:29:11 +03:00
parent ef903f1b23
commit 6a7b4dedcd
8 changed files with 690 additions and 223 deletions
--- a/components/cost-format-selector.tsx
+++ b/components/cost-format-selector.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import { Pencil, Check, Banknote, Eye } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { CostType } from "@/lib/types/api";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+
+interface CostFormatSelectorProps {
+  value: CostType;
+  isEditing: boolean;
+  canEdit: boolean;
+  onEdit: () => void;
+  onChange: (value: CostType) => void;
+  onCloseEdit: () => void;
+}
+
+const COST_FORMATS: { value: CostType; label: string; icon: typeof Banknote }[] = [
+  { value: "fixed", label: "Фикс", icon: Banknote },
+  { value: "cpm", label: "CPM", icon: Eye },
+];
+
+export function CostFormatSelector({
+  value,
+  isEditing,
+  canEdit,
+  onEdit,
+  onChange,
+  onCloseEdit,
+}: CostFormatSelectorProps) {
+  const currentFormat = COST_FORMATS.find((f) => f.value === value) || COST_FORMATS[0];
+  const Icon = currentFormat.icon;
+
+  if (isEditing) {
+    return (
+      <Popover open={isEditing} onOpenChange={(open) => !open && onCloseEdit()}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            className="h-7 w-full justify-between px-2 text-xs font-medium border shadow-sm"
+          >
+            <div className="flex items-center gap-1.5">
+              <Icon className="h-3.5 w-3.5" />
+              <span>{currentFormat.label}</span>
+            </div>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-40 p-1" align="start">
+          <div className="flex flex-col gap-0.5">
+            {COST_FORMATS.map((format) => {
+              const FormatIcon = format.icon;
+              const isSelected = format.value === value;
+              return (
+                <button
+                  key={format.value}
+                  type="button"
+                  className={cn(
+                    "flex items-center gap-2 px-2 py-1.5 text-xs rounded-md transition-colors",
+                    isSelected
+                      ? "bg-muted font-medium"
+                      : "hover:bg-muted/50"
+                  )}
+                  onClick={() => {
+                    onChange(format.value);
+                    onCloseEdit();
+                  }}
+                >
+                  <FormatIcon className="h-3.5 w-3.5" />
+                  <span className="flex-1 text-left">{format.label}</span>
+                  {isSelected && <Check className="h-3 w-3" />}
+                </button>
+              );
+            })}
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      disabled={!canEdit}
+      className={cn(
+        "group h-7 w-full rounded-md border px-2 text-xs font-medium shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default flex items-center justify-between gap-2"
+      )}
+      onClick={onEdit}
+    >
+      <div className="flex items-center gap-1.5">
+        <Icon className="h-3.5 w-3.5" />
+        <span>{currentFormat.label}</span>
+      </div>
+      {canEdit && <Pencil className="h-3 w-3 opacity-0 group-hover:opacity-70 transition-opacity" />}
+    </button>
+  );
+}