-
+
+ Dibujá los polígonos de tus zonas en el mapa. Cada zona tiene su costo de envío, días y rango horario.
+ El bot valida la dirección del cliente con la ubicación que comparta por WhatsApp.
-
-
- ${this.renderZonesList()}
+
+
+
+
+
+ ${this.renderZonesList()}
+
+
+ ${this.renderZoneForm()}
+
+ ${this.renderZonesSummary()}
+
+
+
-
- ${this.renderZonesSummary()}
@@ -518,70 +550,124 @@ class SettingsCrud extends HTMLElement {
// Reset button
this.shadowRoot.getElementById("resetBtn")?.addEventListener("click", () => this.load());
- // Zone search
- this.shadowRoot.getElementById("zoneSearch")?.addEventListener("input", (e) => {
- const query = e.target.value.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
- this.shadowRoot.querySelectorAll(".zone-row").forEach(row => {
- const barrio = row.dataset.barrio;
- const barrioName = CABA_BARRIOS.find(b => this.barrioToKey(b) === barrio) || "";
- const normalized = barrioName.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
- row.classList.toggle("hidden", query && !normalized.includes(query));
+ this.setupZoneEditor();
+ }
+
+ setupZoneEditor() {
+ const editor = this.shadowRoot.getElementById("zoneMapEditor");
+ if (!editor) return;
+ this._mapEditor = editor;
+
+ editor.zones = this.zones;
+ if (this.selectedZoneId) editor.selectedId = this.selectedZoneId;
+
+ editor.addEventListener("change", (e) => {
+ const next = e.detail.zones || [];
+ const merged = [];
+ for (const z of next) {
+ const existing = this.zones.find((x) => x.id === z.id);
+ if (existing) merged.push({ ...existing, polygon: z.polygon });
+ else merged.push(z);
+ }
+ this.zones = merged;
+ this.refreshZonesPanel();
+ });
+
+ editor.addEventListener("select", (e) => {
+ this.selectedZoneId = e.detail.id || null;
+ this.refreshZonesPanel();
+ });
+
+ this.shadowRoot.getElementById("zoneCreateBtn")?.addEventListener("click", () => {
+ this._mapEditor?.startDrawing();
+ });
+
+ this.attachZoneSideListeners();
+ }
+
+ attachZoneSideListeners() {
+ this.shadowRoot.querySelectorAll(".zone-row[data-zone-id]").forEach((row) => {
+ row.addEventListener("click", () => {
+ const id = row.dataset.zoneId;
+ this.selectedZoneId = id;
+ if (this._mapEditor) this._mapEditor.selectedId = id;
+ this.refreshZonesPanel();
});
});
- // Zone toggles
- this.shadowRoot.querySelectorAll(".zone-toggle").forEach(toggle => {
- toggle.addEventListener("click", () => {
- const barrio = toggle.dataset.barrio;
- const config = this.getZoneConfig(barrio);
-
- if (config?.enabled) {
- // Desactivar zona
- this.setZoneConfig(barrio, null);
- } else {
- // Activar zona con días default (lun-sab)
- this.setZoneConfig(barrio, {
- enabled: true,
- days: ["lun", "mar", "mie", "jue", "vie", "sab"],
- delivery_cost: 0
- });
- }
- this.render();
- });
+ const z = this.zones.find((x) => x.id === this.selectedZoneId);
+ if (!z) return;
+
+ const onChange = () => this.refreshZonesList();
+
+ const nameEl = this.shadowRoot.getElementById("zoneName");
+ nameEl?.addEventListener("input", () => { z.name = nameEl.value; onChange(); });
+
+ const costEl = this.shadowRoot.getElementById("zoneCost");
+ costEl?.addEventListener("change", () => { z.delivery_cost = Number(costEl.value) || 0; onChange(); });
+
+ const minEl = this.shadowRoot.getElementById("zoneMin");
+ minEl?.addEventListener("change", () => { z.min_order_amount = Number(minEl.value) || 0; });
+
+ const startEl = this.shadowRoot.getElementById("zoneStart");
+ startEl?.addEventListener("change", () => {
+ z.delivery_hours = { ...(z.delivery_hours || {}), start: startEl.value };
+ onChange();
+ });
+ const endEl = this.shadowRoot.getElementById("zoneEnd");
+ endEl?.addEventListener("change", () => {
+ z.delivery_hours = { ...(z.delivery_hours || {}), end: endEl.value };
+ onChange();
});
- // Zone day toggles
- this.shadowRoot.querySelectorAll(".zone-day").forEach(dayBtn => {
- dayBtn.addEventListener("click", () => {
- const barrio = dayBtn.dataset.barrio;
- const day = dayBtn.dataset.day;
- const config = this.getZoneConfig(barrio);
- if (!config) return;
-
- const days = config.days || [];
+ const enabledEl = this.shadowRoot.getElementById("zoneEnabled");
+ enabledEl?.addEventListener("change", () => {
+ z.enabled = enabledEl.value === "true";
+ onChange();
+ });
+
+ this.shadowRoot.querySelectorAll(".zone-day-pick").forEach((btn) => {
+ btn.addEventListener("click", () => {
+ const day = btn.dataset.day;
+ const days = z.delivery_days || [];
const idx = days.indexOf(day);
- if (idx >= 0) {
- days.splice(idx, 1);
- } else {
- days.push(day);
- }
- config.days = days;
- this.setZoneConfig(barrio, config);
-
- // Update UI without full re-render
- dayBtn.classList.toggle("active", days.includes(day));
+ if (idx >= 0) days.splice(idx, 1);
+ else days.push(day);
+ z.delivery_days = days;
+ btn.classList.toggle("active", days.includes(day));
+ onChange();
});
});
- // Zone cost inputs
- this.shadowRoot.querySelectorAll(".zone-cost-input").forEach(input => {
- input.addEventListener("change", () => {
- const barrio = input.dataset.barrio;
- const config = this.getZoneConfig(barrio);
- if (!config) return;
-
- config.delivery_cost = parseFloat(input.value) || 0;
- this.setZoneConfig(barrio, config);
+ this.shadowRoot.getElementById("zoneFitBtn")?.addEventListener("click", () => {
+ if (this._mapEditor) this._mapEditor.selectedId = z.id;
+ });
+
+ this.shadowRoot.getElementById("zoneDeleteBtn")?.addEventListener("click", () => {
+ if (this._mapEditor) this._mapEditor.removeZone(z.id);
+ this.zones = this.zones.filter((x) => x.id !== z.id);
+ if (this.selectedZoneId === z.id) this.selectedZoneId = this.zones[0]?.id || null;
+ this.refreshZonesPanel();
+ });
+ }
+
+ refreshZonesPanel() {
+ const list = this.shadowRoot.getElementById("zonesList");
+ const formSlot = this.shadowRoot.getElementById("zoneFormSlot");
+ if (list) list.innerHTML = this.renderZonesList();
+ if (formSlot) formSlot.innerHTML = this.renderZoneForm();
+ this.attachZoneSideListeners();
+ }
+
+ refreshZonesList() {
+ const list = this.shadowRoot.getElementById("zonesList");
+ if (list) list.innerHTML = this.renderZonesList();
+ this.shadowRoot.querySelectorAll(".zone-row[data-zone-id]").forEach((row) => {
+ row.addEventListener("click", () => {
+ const id = row.dataset.zoneId;
+ this.selectedZoneId = id;
+ if (this._mapEditor) this._mapEditor.selectedId = id;
+ this.refreshZonesPanel();
});
});
}
@@ -610,9 +696,31 @@ class SettingsCrud extends HTMLElement {
async save() {
// Collect schedule from inputs
const schedule = this.collectScheduleFromInputs();
-
- // Collect delivery zones (already in settings from event handlers)
- const delivery_zones = this.settings.delivery_zones || {};
+
+ // Antes de serializar, refrescar polígonos desde el editor por si el
+ // usuario editó vértices y no llegó a disparar otro evento change.
+ if (this._mapEditor) {
+ const live = this._mapEditor.zones;
+ this.zones = this.zones.map((z) => {
+ const fromMap = live.find((x) => x.id === z.id);
+ return fromMap ? { ...z, polygon: fromMap.polygon } : z;
+ });
+ }
+
+ const cleanZones = this.zones
+ .filter((z) => z.polygon && Array.isArray(z.polygon.coordinates))
+ .map((z) => ({
+ id: z.id,
+ name: z.name || z.id,
+ polygon: z.polygon,
+ delivery_cost: Number(z.delivery_cost) || 0,
+ delivery_days: Array.isArray(z.delivery_days) ? z.delivery_days : [],
+ delivery_hours: z.delivery_hours || { start: "10:00", end: "20:00" },
+ min_order_amount: Number(z.min_order_amount) || 0,
+ enabled: z.enabled !== false,
+ }));
+
+ const delivery_zones = { zones: cleanZones };
const data = {
store_name: this.shadowRoot.getElementById("storeName")?.value || "",
diff --git a/public/components/zone-map-editor.js b/public/components/zone-map-editor.js
new file mode 100644
index 0000000..8ef5385
--- /dev/null
+++ b/public/components/zone-map-editor.js
@@ -0,0 +1,363 @@
+/**
+ * — editor de zonas de delivery sobre un mapa.
+ *
+ * Light DOM (sin shadow) para que Leaflet (que asume un DOM normal con CSS
+ * global) funcione bien dentro de paneles que sí usan shadow DOM (settings-crud).
+ *
+ * Carga Leaflet 1.9 + leaflet-geoman desde CDN al montar. Las primeras
+ * instancias inyectan los