updated

2025-06-23 09:37:53 +05:30
parent 2fbdf8ab61
commit 54b02541c1
278 changed files with 10134 additions and 7904 deletions
--- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
@@ -20,6 +20,7 @@ import {
 import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment";
 import * as CONSTANTS from "../../../../types/world/worldConstants";
 import { useParams } from "react-router-dom";
+import { getUserData } from "../../../../functions/getUserData";
 const GlobalProperties: React.FC = () => {
    const { toggleView, setToggleView } = useToggleView();
    const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
@@ -38,14 +39,13 @@ const GlobalProperties: React.FC = () => {
    const [limitGridDistance, setLimitGridDistance] = useState(false);
    const [gridDistance, setGridDistance] = useState<number>(3);
    const { projectId } = useParams();
+    const { email, userId, organization } = getUserData();

    const optimizeScene = async (value: any) => {
-        const email = localStorage.getItem("email");
-        const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg";

        setEnvironment(
            organization,
-            localStorage.getItem("userId")!,
+            userId,
            wallVisibility,
            roofVisibility,
            shadows,
@@ -58,13 +58,11 @@ const GlobalProperties: React.FC = () => {
    };

    const limitRenderDistance = async () => {
-        const email = localStorage.getItem("email");
-        const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg";

        if (limitDistance) {
            setEnvironment(
                organization,
-                localStorage.getItem("userId")!,
+                userId,
                wallVisibility,
                roofVisibility,
                shadows,
@@ -76,7 +74,7 @@ const GlobalProperties: React.FC = () => {
        } else {
            setEnvironment(
                organization,
-                localStorage.getItem("userId")!,
+                userId,
                wallVisibility,
                roofVisibility,
                shadows,
@@ -104,13 +102,11 @@ const GlobalProperties: React.FC = () => {
    }

    const updatedDist = async (value: number) => {
-        const email = localStorage.getItem("email");
-        const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg";
        setRenderDistance(value);
        // setDistance(value);
        const data = await setEnvironment(
            organization,
-            localStorage.getItem("userId")!,
+            userId,
            wallVisibility,
            roofVisibility,
            shadows,
@@ -122,13 +118,11 @@ const GlobalProperties: React.FC = () => {

    // Function to toggle roof visibility
    const changeRoofVisibility = async () => {
-        const email = localStorage.getItem("email");
-        const organization = email!.split("@")[1].split(".")[0];

        //using REST
        const data = await setEnvironment(
            organization,
-            localStorage.getItem("userId")!,
+            userId,
            wallVisibility,
            !roofVisibility,
            shadows,
@@ -153,12 +147,10 @@ const GlobalProperties: React.FC = () => {
    };
    // Function to toggle wall visibility
    const changeWallVisibility = async () => {
-        const email = localStorage.getItem("email");
-        const organization = email!.split("@")[1].split(".")[0];
        //using REST
        const data = await setEnvironment(
            organization,
-            localStorage.getItem("userId")!,
+            userId,
            !wallVisibility,
            roofVisibility,
            shadows,
@@ -182,12 +174,10 @@ const GlobalProperties: React.FC = () => {
    };

    const shadowVisibility = async () => {
-        const email = localStorage.getItem("email");
-        const organization = email!.split("@")[1].split(".")[0];
        //using REST
        const data = await setEnvironment(
            organization,
-            localStorage.getItem("userId")!,
+            userId,
            wallVisibility,
            roofVisibility,
            !shadows,
--- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
@@ -10,6 +10,7 @@ import {
 } from "../../../../store/builder/store";
 import { zoneCameraUpdate } from "../../../../services/visulization/zone/zoneCameraUpdation";
 import { useParams } from "react-router-dom";
+import { getUserData } from "../../../../functions/getUserData";

 const ZoneProperties: React.FC = () => {
  const { Edit, setEdit } = useEditPosition();
@@ -17,7 +18,8 @@ const ZoneProperties: React.FC = () => {
  const { zonePosition, setZonePosition } = usezonePosition();
  const { zoneTarget, setZoneTarget } = usezoneTarget();
  const { zones, setZones } = useZones();
-  const { projectId } = useParams()
+  const { projectId } = useParams();
+  const { userName, userId, organization, email } = getUserData();

  useEffect(() => {
    setZonePosition(selectedZone.zoneViewPortPosition);
@@ -26,8 +28,6 @@ const ZoneProperties: React.FC = () => {

  async function handleSetView() {
    try {
-      const email = localStorage.getItem("email") || "";
-      const organization = email?.split("@")[1]?.split(".")[0];

      let zonesdata = {
        zoneUuid: selectedZone.zoneUuid,
@@ -36,7 +36,7 @@ const ZoneProperties: React.FC = () => {
      };

      let response = await zoneCameraUpdate(zonesdata, organization, projectId);
-      console.log('response: ', response);
+      // console.log('response: ', response);
      if (response.message === "zone updated") {
        setEdit(false);
      } else {
@@ -52,8 +52,6 @@ const ZoneProperties: React.FC = () => {
  }

  async function handleZoneNameChange(newName: string) {
-    const email = localStorage.getItem("email") || "";
-    const organization = email?.split("@")[1]?.split(".")[0];
    const zonesdata = {
      zoneUuid: selectedZone.zoneUuid,
      zoneName: newName,
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
@@ -3,7 +3,6 @@ import {
  useSelectedEventData,
  useSelectedEventSphere,
 } from "../../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../../store/simulation/useProductStore";
 import ConveyorMechanics from "./mechanics/conveyorMechanics";
 import VehicleMechanics from "./mechanics/vehicleMechanics";
 import RoboticArmMechanics from "./mechanics/roboticArmMechanics";
@@ -11,21 +10,22 @@ import MachineMechanics from "./mechanics/machineMechanics";
 import StorageMechanics from "./mechanics/storageMechanics";
 import { AddIcon } from "../../../../icons/ExportCommonIcons";
 import { handleAddEventToProduct } from "../../../../../modules/simulation/events/points/functions/handleAddEventToProduct";
-import { useEventsStore } from "../../../../../store/simulation/useEventsStore";
 import { useProductContext } from "../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
+import { useVersionContext } from "../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../modules/scene/sceneContext";

 const EventProperties: React.FC = () => {
  const { selectedEventData } = useSelectedEventData();
-  const { getEventByModelUuid } = useProductStore();
  const { selectedProductStore } = useProductContext();
+  const { eventStore, productStore } = useSceneContext();
  const { selectedProduct } = selectedProductStore();
-  const [currentEventData, setCurrentEventData] = useState<EventsSchema | null>(
-    null
-  );
+  const [currentEventData, setCurrentEventData] = useState<EventsSchema | null>(null);
  const [assetType, setAssetType] = useState<string | null>(null);
-  const { products, addEvent } = useProductStore();
+  const { products, addEvent, getEventByModelUuid } = productStore();
  const { selectedEventSphere } = useSelectedEventSphere();
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
  const { projectId } = useParams();

  useEffect(() => {
@@ -102,14 +102,15 @@ const EventProperties: React.FC = () => {
                  onClick={() => {
                    if (selectedEventData) {
                      handleAddEventToProduct({
-                        event: useEventsStore
+                        event: eventStore
                          .getState()
                          .getEventByModelUuid(
                            selectedEventData?.data.modelUuid
                          ),
                        addEvent,
                        selectedProduct,
-                        projectId: projectId || ''
+                        projectId: projectId || '',
+                        versionId: selectedVersion?.versionId || '',
                      });
                    }
                  }}
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/WallProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/WallProperties.tsx
@@ -13,23 +13,26 @@ type Material = {
  textureName: string;
 };

-// Initial and default material
-const initialMaterial: Material = {
-  texture: wallTexture1,
-  textureName: "Grunge Concrete Wall",
-};
-
+// Default and initial materials
 const defaultMaterial: Material = {
  texture: defaultTexture,
  textureName: "Default Material",
 };

+const initialMaterial: Material = {
+  texture: wallTexture1,
+  textureName: "Grunge Concrete Wall",
+};
+
 const WallProperties = () => {
  const { wallHeight, wallThickness, setWallHeight, setWallThickness } = useBuilderStore();

  const [activeSide, setActiveSide] = useState<"side1" | "side2">("side1");

-  const [materials, setMaterials] = useState<Material[]>([initialMaterial]);
+  const [materials, setMaterials] = useState<Material[]>([
+    defaultMaterial,
+    initialMaterial,
+  ]);

  const [selectedMaterials, setSelectedMaterials] = useState<{
    side1: Material | null;
@@ -39,11 +42,11 @@ const WallProperties = () => {
    side2: null,
  });

-  // Select initial material for both sides on mount
+  // Set default material initially for both sides
  useEffect(() => {
    setSelectedMaterials({
-      side1: initialMaterial,
-      side2: initialMaterial,
+      side1: defaultMaterial,
+      side2: defaultMaterial,
    });
  }, []);

@@ -71,21 +74,16 @@ const WallProperties = () => {
  };

  const handleRemoveMaterial = (index: number) => {
-    const updatedMaterials = materials.filter((_, i) => i !== index);
+    const removedTexture = materials[index].texture;

-    // Ensure there's always at least one material
-    const newMaterials =
-      updatedMaterials.length === 0 ? [defaultMaterial] : updatedMaterials;
+    const updatedMaterials = materials.filter((_, i) => i !== index);
+    const newMaterials = updatedMaterials.length === 0 ? [defaultMaterial] : updatedMaterials;
    setMaterials(newMaterials);

-    // Deselect the material if it's the one removed
    setSelectedMaterials((prev) => {
      const updated = { ...prev };
      ["side1", "side2"].forEach((side) => {
-        if (
-          updated[side as "side1" | "side2"]?.texture ===
-          materials[index].texture
-        ) {
+        if (updated[side as "side1" | "side2"]?.texture === removedTexture) {
          updated[side as "side1" | "side2"] = defaultMaterial;
        }
      });
@@ -119,42 +117,43 @@ const WallProperties = () => {

        <div className="material-preview">
          <div className="sides-wrapper">
-            <div
-              className={`side-wrapper ${activeSide === "side1" ? "active" : ""
-                }`}
+            <button
+              className={`side-wrapper ${activeSide === "side1" ? "active" : ""}`}
              onClick={() => setActiveSide("side1")}
            >
              <div className="label">Side 1</div>
              <div className="texture-image">
                {selectedMaterials.side1 && (
                  <img
+                    draggable={false}
                    src={selectedMaterials.side1.texture}
                    alt={selectedMaterials.side1.textureName}
                  />
                )}
              </div>
-            </div>
+            </button>

-            <div
-              className={`side-wrapper ${activeSide === "side2" ? "active" : ""
-                }`}
+            <button
+              className={`side-wrapper ${activeSide === "side2" ? "active" : ""}`}
              onClick={() => setActiveSide("side2")}
            >
              <div className="label">Side 2</div>
              <div className="texture-image">
                {selectedMaterials.side2 && (
                  <img
+                    draggable={false}
                    src={selectedMaterials.side2.texture}
                    alt={selectedMaterials.side2.textureName}
                  />
                )}
              </div>
-            </div>
+            </button>
          </div>

          <div className="preview">
            {selectedMaterials[activeSide] && (
              <img
+                draggable={false}
                src={selectedMaterials[activeSide]!.texture}
                alt={selectedMaterials[activeSide]!.textureName}
              />
@@ -167,29 +166,37 @@ const WallProperties = () => {
            <div className="no-materials">No materials added yet.</div>
          ) : (
            <div className="material-container">
-              {materials.map((material, index) => (
-                <div
-                  className="material-wrapper"
-                  key={`${material.textureName}_${index}`}
-                  onClick={() => handleSelectMaterial(material)}
-                >
-                  <div className="material-property">
-                    <div className="material-image">
-                      <img src={material.texture} alt={material.textureName} />
-                    </div>
-                    <div className="material-name">{material.textureName}</div>
-                  </div>
-                  <div
-                    className="delete-material"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleRemoveMaterial(index);
-                    }}
+              {materials.map((material, index) => {
+                const isSelected = selectedMaterials[activeSide]?.texture === material.texture;
+
+                return (
+                  <button
+                    className={`material-wrapper ${isSelected ? "selectedMaterial" : ""}`}
+                    key={`${material.textureName}_${index}`}
+                    onClick={() => handleSelectMaterial(material)}
                  >
-                    <RemoveIcon />
-                  </div>
-                </div>
-              ))}
+                    <div className="material-property">
+                      <div className="material-image">
+                        <img
+                          draggable={false}
+                          src={material.texture}
+                          alt={material.textureName}
+                        />
+                      </div>
+                      <div className="material-name">{material.textureName}</div>
+                    </div>
+                    <button
+                      className="delete-material"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleRemoveMaterial(index);
+                      }}
+                    >
+                      <RemoveIcon />
+                    </button>
+                  </button>
+                );
+              })}
            </div>
          )}
        </div>
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/components/ActionsList.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/components/ActionsList.tsx
@@ -9,10 +9,11 @@ import { handleResize } from "../../../../../../functions/handleResizePannel";
 import {
  useSelectedAction,
 } from "../../../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
+import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";

 interface ActionsListProps {
  selectedPointData: any;
@@ -30,10 +31,14 @@ const ActionsList: React.FC<ActionsListProps> = ({
  const actionsContainerRef = useRef<HTMLDivElement>(null);

  // store
-  const { renameAction } = useProductStore();
+
+  const { productStore } = useSceneContext();
+  const { renameAction } = productStore();
  const { selectedProductStore } = useProductContext();
  const { selectedProduct } = selectedProductStore();
  const { selectedAction, setSelectedAction } = useSelectedAction();
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
  const { projectId } = useParams();

  const handleRenameAction = (newName: string) => {
@@ -50,6 +55,7 @@ const ActionsList: React.FC<ActionsListProps> = ({
        productUuid: selectedProduct.productUuid,
        projectId,
        eventDatas: event,
+        versionId: selectedVersion?.versionId || '',
      });
    }
  };
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
@@ -9,21 +9,25 @@ import SpawnAction from "../actions/SpawnAction";
 import DefaultAction from "../actions/DefaultAction";
 import Trigger from "../trigger/Trigger";
 import { useSelectedAction, useSelectedEventData } from "../../../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import ActionsList from "../components/ActionsList";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
+import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";

 function ConveyorMechanics() {
    const [activeOption, setActiveOption] = useState<"default" | "spawn" | "swap" | "delay" | "despawn">("default");
    const [selectedPointData, setSelectedPointData] = useState<ConveyorPointSchema | undefined>();
    const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = productStore();
    const { selectedProductStore } = useProductContext();
    const { selectedProduct } = selectedProductStore();
    const { setSelectedAction, clearSelectedAction } = useSelectedAction();
    const { projectId } = useParams();
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();

    useEffect(() => {
        if (selectedEventData) {
@@ -52,7 +56,8 @@ function ConveyorMechanics() {
            productName: productName,
            productUuid: productUuid,
            projectId: projectId,
-            eventDatas: eventData
+            eventDatas: eventData,
+            versionId: selectedVersion?.versionId || '',
        })
    }

@@ -66,7 +71,7 @@ function ConveyorMechanics() {
            updateBackend(
                selectedProduct.productName,
                selectedProduct.productUuid,
-                projectId ||'',
+                projectId || '',
                event
            );
        }
@@ -85,7 +90,7 @@ function ConveyorMechanics() {
            updateBackend(
                selectedProduct.productName,
                selectedProduct.productUuid,
-                projectId ||'',
+                projectId || '',
                event
            );
        }
@@ -99,7 +104,7 @@ function ConveyorMechanics() {
            updateBackend(
                selectedProduct.productName,
                selectedProduct.productUuid,
-                projectId ||'',
+                projectId || '',
                event
            );
        }
@@ -115,7 +120,7 @@ function ConveyorMechanics() {
            updateBackend(
                selectedProduct.productName,
                selectedProduct.productUuid,
-                projectId ||'',
+                projectId || '',
                event
            );
        }
@@ -131,7 +136,7 @@ function ConveyorMechanics() {
            updateBackend(
                selectedProduct.productName,
                selectedProduct.productUuid,
-                projectId ||'',
+                projectId || '',
                event
            );
        }
@@ -145,7 +150,7 @@ function ConveyorMechanics() {
            updateBackend(
                selectedProduct.productName,
                selectedProduct.productUuid,
-                projectId ||'',
+                projectId || '',
                event
            );
        }
@@ -161,7 +166,7 @@ function ConveyorMechanics() {
            updateBackend(
                selectedProduct.productName,
                selectedProduct.productUuid,
-                projectId ||'',
+                projectId || '',
                event
            );
        }
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
@@ -3,22 +3,25 @@ import RenameInput from "../../../../../ui/inputs/RenameInput";
 import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
 import Trigger from "../trigger/Trigger";
 import { useSelectedAction, useSelectedEventData } from "../../../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import ProcessAction from "../actions/ProcessAction";
 import ActionsList from "../components/ActionsList";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
+import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";

 function MachineMechanics() {
    const [activeOption, setActiveOption] = useState<"default" | "process">("default");
    const [selectedPointData, setSelectedPointData] = useState<MachinePointSchema | undefined>();
    const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, updateAction } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { getPointByUuid, updateAction } = productStore();
    const { selectedProductStore } = useProductContext();
    const { selectedProduct } = selectedProductStore();
    const { setSelectedAction, clearSelectedAction } = useSelectedAction();
-
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
    const { projectId } = useParams();

    useEffect(() => {
@@ -48,7 +51,8 @@ function MachineMechanics() {
            productName: productName,
            productUuid: productUuid,
            projectId: projectId,
-            eventDatas: eventData
+            eventDatas: eventData,
+            versionId: selectedVersion?.versionId || '',
        })
    }

--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
@@ -5,22 +5,25 @@ import RenameInput from "../../../../../ui/inputs/RenameInput";
 import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
 import Trigger from "../trigger/Trigger";
 import { useSelectedEventData, useSelectedAction } from "../../../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import PickAndPlaceAction from "../actions/PickAndPlaceAction";
 import ActionsList from "../components/ActionsList";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
+import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";

 function RoboticArmMechanics() {
    const [activeOption, setActiveOption] = useState<"default" | "pickAndPlace">("default");
    const [selectedPointData, setSelectedPointData] = useState<RoboticArmPointSchema | undefined>();
    const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction, addAction, removeAction, } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction, addAction, removeAction, } = productStore();
    const { selectedProductStore } = useProductContext();
    const { selectedProduct } = selectedProductStore();
    const { selectedAction, setSelectedAction, clearSelectedAction } = useSelectedAction();
-
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
    const { projectId } = useParams();

    useEffect(() => {
@@ -58,6 +61,7 @@ function RoboticArmMechanics() {
            productUuid: productUuid,
            projectId: projectId,
            eventDatas: eventData,
+            versionId: selectedVersion?.versionId || '',
        });
    };

--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
@@ -5,21 +5,24 @@ import Trigger from "../trigger/Trigger";
 import StorageAction from "../actions/StorageAction";
 import ActionsList from "../components/ActionsList";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
-import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import { useSelectedAction, useSelectedEventData } from "../../../../../../store/simulation/useSimulationStore";
 import * as THREE from 'three';
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
+import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";

 function StorageMechanics() {
    const [activeOption, setActiveOption] = useState<"default" | "store" | "spawn">("default");
    const [selectedPointData, setSelectedPointData] = useState<StoragePointSchema | undefined>();
    const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, updateAction } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { getPointByUuid, updateAction } = productStore();
    const { selectedProductStore } = useProductContext();
    const { selectedProduct } = selectedProductStore();
    const { setSelectedAction, clearSelectedAction } = useSelectedAction();
-
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
    const { projectId } = useParams();

    const updateSelectedPointData = () => {
@@ -66,7 +69,8 @@ function StorageMechanics() {
            productName: productName,
            productUuid: productUuid,
            projectId: projectId,
-            eventDatas: eventData
+            eventDatas: eventData,
+            versionId: selectedVersion?.versionId || '',
        })
    }

--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
@@ -7,22 +7,25 @@ import {
    useSelectedAction,
    useSelectedEventData,
 } from "../../../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import TravelAction from "../actions/TravelAction";
 import ActionsList from "../components/ActionsList";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
+import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";

 function VehicleMechanics() {
    const [activeOption, setActiveOption] = useState<"default" | "travel">("default");
    const [selectedPointData, setSelectedPointData] = useState<VehiclePointSchema | undefined>();
    const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = productStore();
    const { selectedProductStore } = useProductContext();
    const { selectedProduct } = selectedProductStore();
    const { setSelectedAction, clearSelectedAction } = useSelectedAction();
-
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
    const { projectId } = useParams();

    useEffect(() => {
@@ -54,6 +57,7 @@ function VehicleMechanics() {
            productUuid: productUuid,
            projectId: projectId,
            eventDatas: eventData,
+            versionId: selectedVersion?.versionId || '',
        });
    };

--- a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
@@ -4,11 +4,12 @@ import { AddIcon, RemoveIcon, ResizeHeightIcon } from "../../../../../icons/Expo
 import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
 import RenameInput from "../../../../../ui/inputs/RenameInput";
 import { handleResize } from "../../../../../../functions/handleResizePannel";
-import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import { useSelectedAction } from "../../../../../../store/simulation/useSimulationStore";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
+import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";

 type TriggerProps = {
    selectedPointData?: PointsScheme | undefined;
@@ -19,13 +20,15 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {
    const [currentAction, setCurrentAction] = useState<string | undefined>();
    const { selectedProductStore } = useProductContext();
    const { selectedProduct } = selectedProductStore();
-    const { getActionByUuid, getEventByModelUuid, getPointByUuid, getTriggerByUuid, addTrigger, removeTrigger, updateTrigger, renameTrigger, getProductById, } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { getActionByUuid, getEventByModelUuid, getPointByUuid, getTriggerByUuid, addTrigger, removeTrigger, updateTrigger, renameTrigger, getProductById, } = productStore();
    const [triggers, setTriggers] = useState<TriggerSchema[]>([]);
    const [selectedTrigger, setSelectedTrigger] = useState<TriggerSchema | undefined>();
    const [activeOption, setActiveOption] = useState<"onComplete" | "onStart" | "onStop" | "delay" | "onError">("onComplete");
    const triggersContainerRef = useRef<HTMLDivElement>(null);
    const { selectedAction } = useSelectedAction();
-
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
    const { projectId } = useParams();

    useEffect(() => {
@@ -53,6 +56,7 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {
            productUuid: productUuid,
            projectId: projectId,
            eventDatas: eventData,
+            versionId: selectedVersion?.versionId || '',
        });
    };