@withpotter/components 0.13.0-next.101

package/dist/features/product-form.js

@@ -0,0 +1,802 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useCallback } from "react";
+import {
+  PointerSensor,
+  KeyboardSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import { arrayMove, sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { useCurrentTemplate } from "@withpotter/lib/template-context";
+import { getCurrencySymbol } from "@withpotter/components/dynamic-form";
+import { contentApi } from "@withpotter/lib/api/content";
+import { inventoryApi } from "@withpotter/lib/api/inventory";
+import { merchantSubscriptionsApi } from "@withpotter/lib/api/merchant-subscriptions";
+import { resourceCategoriesApi } from "@withpotter/lib/api/resource-categories";
+import {
+  ProductType,
+  generateSlug,
+  isBehaviorEnabled
+} from "@withpotter/lib/product-types";
+import {
+  FormStepperPanel
+} from "@withpotter/ui-kit/form-stepper-panel";
+import { createBasicsStep } from "./product-form/basics-step";
+import {
+  createBehaviorConfigPanels,
+  createBehaviorsStep
+} from "./product-form/behaviors-step";
+import { createDetailsStep } from "./product-form/details-step";
+import { createOrganizeStep } from "./product-form/organize-step";
+const PLATFORM_FIELDS = /* @__PURE__ */ new Set([
+  "title",
+  "slug",
+  "description",
+  "featured",
+  "isActive",
+  "image",
+  "gallery",
+  "price",
+  "compareAtPrice",
+  "currency",
+  "trackInventory",
+  "quantity",
+  "lowStockThreshold",
+  "type"
+]);
+function normalizeMediaItem(input) {
+  if (!input) return null;
+  if (typeof input === "string") {
+    return { url: input, type: "image" };
+  }
+  if (typeof input !== "object") return null;
+  const item = input;
+  if (typeof item.url !== "string" || item.url.trim().length === 0) return null;
+  return {
+    url: item.url,
+    type: item.type === "video" ? "video" : "image",
+    alt: typeof item.alt === "string" ? item.alt : void 0,
+    width: typeof item.width === "number" ? item.width : void 0,
+    height: typeof item.height === "number" ? item.height : void 0,
+    thumbnail: typeof item.thumbnail === "string" ? item.thumbnail : void 0,
+    duration: typeof item.duration === "number" ? item.duration : void 0
+  };
+}
+function normalizeMediaList(input) {
+  if (!Array.isArray(input)) return [];
+  return input.map((item) => normalizeMediaItem(item)).filter((item) => item !== null);
+}
+function createGalleryItemId(url) {
+  return `${url}-${Math.random().toString(36).slice(2, 10)}`;
+}
+function toGalleryItems(media) {
+  return media.map((item) => ({
+    ...item,
+    id: createGalleryItemId(item.url)
+  }));
+}
+function stripGalleryItemIds(items) {
+  return items.map(({ id, ...rest }) => rest);
+}
+function ProductForm({ product, onSaved, onClose }) {
+  const { tenant } = useAuth();
+  const { template } = useCurrentTemplate(tenant?.templateId);
+  const sellableContentType = null;
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const [slugManuallyEdited, setSlugManuallyEdited] = useState(false);
+  const [productType, setProductType] = useState(
+    product?.type || ProductType.PHYSICAL
+  );
+  const [title, setTitle] = useState(product?.title || "");
+  const [slug, setSlug] = useState(product?.slug || "");
+  const [description, setDescription] = useState(product?.description || "");
+  const [price, setPrice] = useState(
+    product?.price != null ? Number(product.price) : void 0
+  );
+  const [compareAtPrice, setCompareAtPrice] = useState(
+    product?.compareAtPrice != null ? Number(product.compareAtPrice) : void 0
+  );
+  const [trackInventory, setTrackInventory] = useState(
+    product?.trackInventory ?? true
+  );
+  const [quantity, setQuantity] = useState(product?.quantity ?? 0);
+  const [lowStockThreshold, setLowStockThreshold] = useState(
+    product?.lowStockThreshold ?? 5
+  );
+  const [featured, setFeatured] = useState(product?.featured ?? false);
+  const [isActive, setIsActive] = useState(product?.isActive ?? true);
+  const [heroImage, setHeroImage] = useState(
+    normalizeMediaItem(product?.image) || null
+  );
+  const [galleryItems, setGalleryItems] = useState(
+    () => toGalleryItems(normalizeMediaList(product?.gallery))
+  );
+  const [showHeroImageModal, setShowHeroImageModal] = useState(false);
+  const [showGalleryMediaModal, setShowGalleryMediaModal] = useState(false);
+  const [editingGalleryIndex, setEditingGalleryIndex] = useState(
+    null
+  );
+  const gallerySensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 4 }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const handleGalleryDragEnd = useCallback(
+    (event) => {
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+      const oldIndex = galleryItems.findIndex(
+        (item) => item.id === String(active.id)
+      );
+      const newIndex = galleryItems.findIndex(
+        (item) => item.id === String(over.id)
+      );
+      if (oldIndex < 0 || newIndex < 0) return;
+      setGalleryItems((prev) => arrayMove(prev, oldIndex, newIndex));
+    },
+    [galleryItems]
+  );
+  const [allCollections, setAllCollections] = useState([]);
+  const [selectedCollectionIds, setSelectedCollectionIds] = useState(/* @__PURE__ */ new Set());
+  const [collectionsLoading, setCollectionsLoading] = useState(false);
+  const [resourceCategories, setResourceCategories] = useState([]);
+  const [resourceRequirements, setResourceRequirements] = useState([]);
+  const [activePlans, setActivePlans] = useState([]);
+  const [templateValues, setTemplateValues] = useState(
+    product?.data || {}
+  );
+  const isEditing = !!product;
+  const tenantCurrency = useMemo(() => {
+    const settings = tenant?.settings;
+    return settings?.currency || "NGN";
+  }, [tenant?.settings]);
+  const tenantCategories = useMemo(() => {
+    const saved = tenant?.settings?.categories || {};
+    if (Object.keys(saved).length > 0) return saved;
+    if (!template?.siteSettings) return saved;
+    const defaults = {};
+    for (const [, section] of Object.entries(template.siteSettings)) {
+      const s = section;
+      if (s?.type === "categoryManager" && s.contentTypeKey && s.defaults) {
+        defaults[s.contentTypeKey] = [...s.defaults];
+      }
+    }
+    return Object.keys(defaults).length > 0 ? defaults : saved;
+  }, [tenant?.settings, template?.siteSettings]);
+  const currencySymbol = useMemo(
+    () => getCurrencySymbol(tenantCurrency),
+    [tenantCurrency]
+  );
+  const mergedFields = useMemo(() => {
+    if (!sellableContentType) return [];
+    return sellableContentType.fields;
+  }, [sellableContentType]);
+  const templateOnlyFields = useMemo(() => {
+    return mergedFields.filter((f) => !PLATFORM_FIELDS.has(f.name));
+  }, [mergedFields]);
+  const detailSections = useMemo(() => {
+    const groups = sellableContentType?.fieldGroups || [];
+    const groupedFieldNames = new Set(groups.flatMap((g) => g.fields));
+    const ungrouped = templateOnlyFields.filter(
+      (f) => !groupedFieldNames.has(f.name)
+    );
+    const sections = [];
+    for (const g of groups) {
+      const hasFields = g.fields.some(
+        (fn) => templateOnlyFields.some((f) => f.name === fn)
+      );
+      if (hasFields) {
+        sections.push({
+          key: `group:${g.label}`,
+          label: g.label,
+          description: g.description,
+          fieldNames: g.fields
+        });
+      }
+    }
+    for (const f of ungrouped) {
+      sections.push({
+        key: `field:${f.name}`,
+        label: f.label || f.name,
+        fieldNames: [f.name]
+      });
+    }
+    return sections;
+  }, [templateOnlyFields, sellableContentType?.fieldGroups]);
+  const [enabledDetailSections, setEnabledDetailSections] = useState(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    if (!isEditing || !product?.data || detailSections.length === 0) return;
+    const data = product.data;
+    const enabled = /* @__PURE__ */ new Set();
+    for (const section of detailSections) {
+      const hasData = section.fieldNames.some((fn) => {
+        const val = data[fn];
+        if (val === void 0 || val === null || val === "") return false;
+        if (Array.isArray(val) && val.length === 0) return false;
+        return true;
+      });
+      if (hasData) enabled.add(section.key);
+    }
+    if (enabled.size > 0) setEnabledDetailSections(enabled);
+  }, [isEditing, product?.data, detailSections]);
+  const toggleDetailSection = useCallback((key) => {
+    setEnabledDetailSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
+  const activeTemplateFields = useMemo(() => {
+    const enabledFieldNames = /* @__PURE__ */ new Set();
+    for (const section of detailSections) {
+      if (enabledDetailSections.has(section.key)) {
+        for (const fn of section.fieldNames) enabledFieldNames.add(fn);
+      }
+    }
+    return templateOnlyFields.filter((f) => enabledFieldNames.has(f.name));
+  }, [templateOnlyFields, detailSections, enabledDetailSections]);
+  const activeFieldGroups = useMemo(() => {
+    if (!sellableContentType?.fieldGroups) return void 0;
+    return sellableContentType.fieldGroups.filter(
+      (g) => enabledDetailSections.has(`group:${g.label}`)
+    );
+  }, [sellableContentType?.fieldGroups, enabledDetailSections]);
+  useEffect(() => {
+    if (!isEditing && !slugManuallyEdited && title) {
+      setSlug(generateSlug(title));
+    }
+  }, [title, isEditing, slugManuallyEdited]);
+  useEffect(() => {
+    setTemplateValues(product?.data || {});
+    setHeroImage(normalizeMediaItem(product?.image) || null);
+    setGalleryItems(toGalleryItems(normalizeMediaList(product?.gallery)));
+  }, [product?.data, product?.image, product?.gallery]);
+  useEffect(() => {
+    if (!tenant?.slug) return;
+    let cancelled = false;
+    const fetchCollections = async () => {
+      setCollectionsLoading(true);
+      try {
+        const result = await contentApi.list(tenant.slug, "collections", {
+          limit: 200
+        });
+        if (cancelled) return;
+        const items = result.data || [];
+        setAllCollections(items);
+        if (product?.id) {
+          const matched = /* @__PURE__ */ new Set();
+          for (const c of items) {
+            const ids = c.data?.productIds;
+            if (Array.isArray(ids) && ids.includes(product.id)) {
+              matched.add(c.id);
+            }
+          }
+          setSelectedCollectionIds(matched);
+        }
+      } catch {
+      } finally {
+        if (!cancelled) setCollectionsLoading(false);
+      }
+    };
+    fetchCollections();
+    return () => {
+      cancelled = true;
+    };
+  }, [tenant?.slug, product?.id]);
+  useEffect(() => {
+    if (!tenant?.slug) return;
+    let cancelled = false;
+    const fetchCategories = async () => {
+      try {
+        const cats = await resourceCategoriesApi.list(tenant.slug);
+        if (cancelled) return;
+        setResourceCategories(
+          (cats || []).map((c) => ({
+            id: c.id,
+            label: c.label || c.name || "",
+            labelPlural: c.labelPlural || "",
+            kind: c.kind || "person"
+          }))
+        );
+      } catch {
+      }
+    };
+    fetchCategories();
+    return () => {
+      cancelled = true;
+    };
+  }, [tenant?.slug]);
+  useEffect(() => {
+    if (!tenant?.slug) return;
+    merchantSubscriptionsApi.getActivePlans(tenant.slug).then((plans) => setActivePlans(plans || [])).catch(() => {
+    });
+  }, [tenant?.slug]);
+  useEffect(() => {
+    if (!tenant?.slug || !product?.id) return;
+    let cancelled = false;
+    const fetchRequirements = async () => {
+      try {
+        const reqs = await resourceCategoriesApi.getContentRequirements(
+          tenant.slug,
+          product.id
+        );
+        if (cancelled) return;
+        setResourceRequirements(
+          (reqs || []).map((r) => ({
+            categoryId: r.categoryId,
+            isRequired: r.isRequired ?? true,
+            assignmentStrategy: r.assignmentStrategy,
+            requiredSkills: r.requiredSkills || [],
+            eligibleResourceIds: r.eligibleResourceIds || null
+          }))
+        );
+      } catch {
+      }
+    };
+    fetchRequirements();
+    return () => {
+      cancelled = true;
+    };
+  }, [tenant?.slug, product?.id]);
+  const [behaviorConfigs, setBehaviorConfigs] = useState(
+    () => {
+      if (product?.behaviors) {
+        return product.behaviors;
+      }
+      if (sellableContentType?.behaviors) {
+        const b = {};
+        for (const behavior of sellableContentType.behaviors) {
+          b[behavior] = { enabled: true };
+        }
+        return b;
+      }
+      return { sellable: { enabled: true } };
+    }
+  );
+  useEffect(() => {
+    if (!isEditing && sellableContentType?.behaviors) {
+      setBehaviorConfigs((prev) => {
+        const updated = { ...prev };
+        for (const behavior of sellableContentType.behaviors) {
+          if (updated[behavior] === void 0) {
+            updated[behavior] = { enabled: true };
+          }
+        }
+        return updated;
+      });
+    }
+  }, [sellableContentType, isEditing]);
+  const [gatedBy, setGatedBy] = useState(() => {
+    if (product?.behaviors?.gatedBy && Array.isArray(product.behaviors.gatedBy)) {
+      return product.behaviors.gatedBy;
+    }
+    return [];
+  });
+  const [gatedByPlanIds, setGatedByPlanIds] = useState(() => {
+    if (product?.behaviors?.gatedByPlanIds && Array.isArray(product.behaviors.gatedByPlanIds)) {
+      return product.behaviors.gatedByPlanIds;
+    }
+    return [];
+  });
+  const linkedPlanId = useMemo(() => {
+    const config = getBehaviorConfig(
+      behaviorConfigs.subscribable
+    );
+    return config?.linkedPlanId;
+  }, [behaviorConfigs.subscribable]);
+  const linkedPlanName = useMemo(() => {
+    if (!linkedPlanId || !activePlans) return void 0;
+    return activePlans.find((p) => p.id === linkedPlanId)?.name;
+  }, [linkedPlanId, activePlans]);
+  const availableBehaviors = useMemo(() => {
+    const tenantSettings = tenant?.settings;
+    const tenantBehaviors = tenantSettings?.enabledBehaviors;
+    if (Array.isArray(tenantBehaviors) && tenantBehaviors.length > 0) {
+      return tenantBehaviors.filter(
+        (b) => b !== "giftable" && b !== "leadCapture"
+      );
+    }
+    if (sellableContentType?.behaviors && sellableContentType.behaviors.length > 0) {
+      const filtered = sellableContentType.behaviors.filter(
+        (b) => b !== "giftable" && b !== "leadCapture"
+      );
+      if (filtered.length > 0) return filtered;
+    }
+    return [
+      "sellable",
+      "bookable",
+      "shippable",
+      "subscribable",
+      "downloadable",
+      "rentable",
+      "ticketed"
+    ];
+  }, [tenant?.settings, sellableContentType]);
+  const behaviorLabelOverrides = useMemo(() => {
+    const ct = sellableContentType;
+    return ct?.behaviorLabels;
+  }, [sellableContentType]);
+  const behaviors = useMemo(() => {
+    const b = {};
+    for (const [key, value] of Object.entries(behaviorConfigs)) {
+      if (key === "gatedBy" || key === "gatedByPlanIds" || key === "reservable")
+        continue;
+      b[key] = isBehaviorEnabled(value);
+    }
+    return b;
+  }, [behaviorConfigs]);
+  const updateBookableConfig = useCallback((config) => {
+    setBehaviorConfigs((prev) => ({ ...prev, bookable: config }));
+  }, []);
+  const updateShippableConfig = useCallback((config) => {
+    setBehaviorConfigs((prev) => ({ ...prev, shippable: config }));
+  }, []);
+  const updateSubscribableConfig = useCallback((config) => {
+    setBehaviorConfigs((prev) => ({ ...prev, subscribable: config }));
+  }, []);
+  const updateDownloadableConfig = useCallback((config) => {
+    setBehaviorConfigs((prev) => ({ ...prev, downloadable: config }));
+  }, []);
+  const updateRentableConfig = useCallback((config) => {
+    setBehaviorConfigs((prev) => ({ ...prev, rentable: config }));
+  }, []);
+  const updateTicketedConfig = useCallback((config) => {
+    setBehaviorConfigs((prev) => ({ ...prev, ticketed: config }));
+  }, []);
+  const behaviorConfigPanels = useMemo(
+    () => createBehaviorConfigPanels({
+      behaviorConfigs,
+      updateBookableConfig,
+      updateShippableConfig,
+      updateSubscribableConfig,
+      updateDownloadableConfig,
+      updateRentableConfig,
+      updateTicketedConfig,
+      behaviorLabelOverrides,
+      currencySymbol,
+      resourceCategories,
+      resourceRequirements,
+      setResourceRequirements,
+      activePlans
+    }),
+    [
+      behaviorConfigs,
+      updateBookableConfig,
+      updateShippableConfig,
+      updateSubscribableConfig,
+      updateDownloadableConfig,
+      updateRentableConfig,
+      updateTicketedConfig,
+      behaviorLabelOverrides,
+      currencySymbol,
+      resourceCategories,
+      resourceRequirements
+    ]
+  );
+  const handleSave = useCallback(async () => {
+    if (!tenant?.slug) return;
+    if (!title.trim()) {
+      setError("Title is required");
+      return;
+    }
+    if (!slug.trim()) {
+      setError("Slug is required");
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      const payload = {
+        type: productType,
+        title: title.trim(),
+        slug: slug.trim(),
+        description: description || void 0,
+        price: price !== void 0 ? Number(price) || 0 : void 0,
+        compareAtPrice: compareAtPrice !== void 0 ? Number(compareAtPrice) || 0 : void 0,
+        currency: tenantCurrency,
+        trackInventory,
+        quantity: typeof quantity === "number" ? quantity : 0,
+        lowStockThreshold: typeof lowStockThreshold === "number" ? lowStockThreshold : 5,
+        featured,
+        isActive,
+        image: heroImage ? {
+          ...heroImage,
+          type: "image"
+        } : void 0,
+        // An empty list on an edit is sent as [], not left out: the API reads
+        // an omitted gallery as "unchanged", so removing the last item would
+        // save successfully and bring it straight back.
+        gallery: galleryItems.length > 0 ? stripGalleryItemIds(galleryItems) : isEditing ? [] : void 0,
+        behaviors: {
+          ...behaviorConfigs,
+          ...gatedBy.length > 0 && { gatedBy },
+          ...gatedByPlanIds.length > 0 && { gatedByPlanIds }
+        },
+        data: templateValues
+      };
+      let productId;
+      if (isEditing && product) {
+        const { type, ...updatePayload } = payload;
+        await inventoryApi.update(
+          tenant.slug,
+          product.id,
+          updatePayload
+        );
+        productId = product.id;
+      } else {
+        const created = await inventoryApi.create(
+          tenant.slug,
+          payload
+        );
+        productId = created.id;
+      }
+      if (productId && allCollections.length > 0) {
+        const updates = [];
+        for (const collection of allCollections) {
+          const currentIds = Array.isArray(
+            collection.data?.productIds
+          ) ? collection.data.productIds : [];
+          const hasProduct = currentIds.includes(productId);
+          const shouldHave = selectedCollectionIds.has(collection.id);
+          if (shouldHave && !hasProduct) {
+            updates.push(
+              contentApi.update(tenant.slug, "collections", collection.id, {
+                data: {
+                  ...collection.data,
+                  productIds: [...currentIds, productId]
+                }
+              })
+            );
+          } else if (!shouldHave && hasProduct) {
+            updates.push(
+              contentApi.update(tenant.slug, "collections", collection.id, {
+                data: {
+                  ...collection.data,
+                  productIds: currentIds.filter((id) => id !== productId)
+                }
+              })
+            );
+          }
+        }
+        if (updates.length > 0) {
+          await Promise.all(updates);
+        }
+      }
+      if (productId && isBehaviorEnabled(behaviorConfigs.bookable) && resourceRequirements.length > 0) {
+        try {
+          await resourceCategoriesApi.setContentRequirements(
+            tenant.slug,
+            productId,
+            { requirements: resourceRequirements }
+          );
+        } catch {
+          console.warn("Failed to save resource requirements");
+        }
+      }
+      onSaved();
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : "Failed to save product";
+      setError(msg);
+    } finally {
+      setSaving(false);
+    }
+  }, [
+    tenant?.slug,
+    productType,
+    title,
+    slug,
+    description,
+    price,
+    compareAtPrice,
+    tenantCurrency,
+    trackInventory,
+    quantity,
+    lowStockThreshold,
+    featured,
+    isActive,
+    heroImage,
+    galleryItems,
+    behaviorConfigs,
+    gatedBy,
+    gatedByPlanIds,
+    templateValues,
+    isEditing,
+    product,
+    onSaved,
+    allCollections,
+    selectedCollectionIds,
+    resourceRequirements
+  ]);
+  const formatCurrency = (num) => {
+    if (num === void 0 || num === null || isNaN(num)) return "";
+    return new Intl.NumberFormat("en-US", {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }).format(num);
+  };
+  const parseCurrency = (str) => {
+    const cleaned = str.replace(/[^0-9.]/g, "");
+    if (!cleaned) return void 0;
+    const num = parseFloat(cleaned);
+    return isNaN(num) ? void 0 : num;
+  };
+  const [priceDisplay, setPriceDisplay] = useState(
+    () => formatCurrency(product?.price != null ? Number(product.price) : void 0)
+  );
+  const [priceFocused, setPriceFocused] = useState(false);
+  const [compareDisplay, setCompareDisplay] = useState(
+    () => formatCurrency(
+      product?.compareAtPrice != null ? Number(product.compareAtPrice) : void 0
+    )
+  );
+  const [compareFocused, setCompareFocused] = useState(false);
+  const steps = useMemo(() => {
+    const result = [];
+    result.push(
+      createBasicsStep({
+        title,
+        setTitle,
+        heroImage,
+        setHeroImage,
+        showHeroImageModal,
+        setShowHeroImageModal,
+        galleryItems,
+        setGalleryItems,
+        gallerySensors,
+        handleGalleryDragEnd,
+        showGalleryMediaModal,
+        setShowGalleryMediaModal,
+        editingGalleryIndex,
+        setEditingGalleryIndex,
+        description,
+        setDescription,
+        currencySymbol,
+        priceFocused,
+        setPriceFocused,
+        priceDisplay,
+        setPriceDisplay,
+        price,
+        setPrice,
+        compareFocused,
+        setCompareFocused,
+        compareDisplay,
+        setCompareDisplay,
+        compareAtPrice,
+        setCompareAtPrice,
+        formatCurrency,
+        parseCurrency
+      })
+    );
+    result.push(
+      createBehaviorsStep({
+        behaviorConfigs,
+        setBehaviorConfigs,
+        behaviorLabelOverrides,
+        availableBehaviors,
+        behaviorConfigPanels,
+        gatedBy,
+        setGatedBy,
+        gatedByPlanIds,
+        setGatedByPlanIds,
+        activePlans,
+        linkedPlanName
+      })
+    );
+    result.push(
+      createDetailsStep({
+        behaviorConfigs,
+        detailSections,
+        enabledDetailSections,
+        toggleDetailSection,
+        activeTemplateFields,
+        activeFieldGroups,
+        templateValues,
+        setTemplateValues,
+        tenantCurrency,
+        tenantCategories,
+        tenantSlug: tenant?.slug,
+        trackInventory,
+        setTrackInventory,
+        quantity,
+        setQuantity,
+        lowStockThreshold,
+        setLowStockThreshold
+      })
+    );
+    result.push(
+      createOrganizeStep({
+        collectionsLoading,
+        allCollections,
+        selectedCollectionIds,
+        setSelectedCollectionIds,
+        isActive,
+        setIsActive,
+        isEditing,
+        productType,
+        setProductType,
+        slug,
+        setSlug,
+        setSlugManuallyEdited,
+        product,
+        featured,
+        setFeatured
+      })
+    );
+    return result;
+  }, [
+    title,
+    heroImage,
+    galleryItems,
+    showHeroImageModal,
+    showGalleryMediaModal,
+    editingGalleryIndex,
+    gallerySensors,
+    handleGalleryDragEnd,
+    description,
+    currencySymbol,
+    priceFocused,
+    priceDisplay,
+    price,
+    compareFocused,
+    compareDisplay,
+    compareAtPrice,
+    templateOnlyFields,
+    sellableContentType,
+    templateValues,
+    tenantCurrency,
+    tenantCategories,
+    tenant?.slug,
+    trackInventory,
+    quantity,
+    lowStockThreshold,
+    collectionsLoading,
+    allCollections,
+    selectedCollectionIds,
+    isEditing,
+    productType,
+    slug,
+    product?.slug,
+    isActive,
+    featured,
+    behaviorConfigs,
+    behaviorLabelOverrides,
+    availableBehaviors,
+    behaviorConfigPanels,
+    detailSections,
+    enabledDetailSections,
+    toggleDetailSection,
+    activeTemplateFields,
+    activeFieldGroups,
+    gatedBy,
+    gatedByPlanIds,
+    linkedPlanId,
+    linkedPlanName
+  ]);
+  return /* @__PURE__ */ jsx(
+    FormStepperPanel,
+    {
+      title: isEditing ? "Edit Product" : "Add Product",
+      steps,
+      onSave: handleSave,
+      onClose,
+      saving,
+      saveLabel: isEditing ? "Update Product" : "Create Product",
+      error,
+      onClearError: () => setError(null)
+    }
+  );
+}
+export {
+  ProductForm
+};
+//# sourceMappingURL=product-form.js.map