Opens modal even though I am not triggering showModal

[yashviKhant]

I have a react application at two placeholders: ticket_top_navigation and ticket_conversation_editor. From top_navigation I want to trigger showModal and its working fine but from ticket_conversation_editor I just want to update text in reply editor but this app also opens modal on click with initial child state. I have same template for both apps currently but I tried changing keeping different templates that also didn’t solve. Below is my code of App.js-

app.initialized().then(async (client) => {
      client.instance.context().then(async function (data) {
        let location = data.location;
        let InstanceData = data.data
        let ModalID = '';

        if (InstanceData && InstanceData.hasOwnProperty('modalID')){
          ModalID = InstanceData.modalID
        }
        if(location === 'ticket_top_navigation') {
          client.events.on("app.activated", async () => {
            await client.interface.trigger("showModal", {
              title: "AI-Powered Assistance",
              template: 'index.html',
              data: {modalID: 'ModalOne'},
            });
          })
        } 
        if (location === 'ticket_conversation_editor') {
 
                  await client.interface.trigger("setValue", {
                    id: "editor",
                    text: marked(res.data.identified_resolution) || "Default Reply Text",
                    replace: true
                  });
              }). catch((err) => {
              })
        });
        }
        if (location === "modal" && ModalID === 'ModalOne') {
          setChild(<ModalOne client={client} />);
        }
      });
    })

Manifest.json -

{
  "platform-version": "2.3",
  "product": {
    "freshdesk": {
      "location": {
        "ticket_top_navigation": {
          "url": "index.html",
          "icon": "icon.svg"
        },
        "ticket_conversation_editor": {
          "url": "editor.html",
          "icon": "icon.svg"
        }
      }
    }
  },
  "engines": {
    "node": "18.20.4",
    "fdk": "9.2.0"
  }
}

If I am supposed to change script in my html… what should it be? I don’t understand why is it opening modal

[Kithiyon (Arokiya Kithiyon A)]

Hi @yashviKhant

Welcome to the developer community…

Can you log the location to find the value when tocket_conversation_editor opens?

[yashviKhant]

Thank you @Kithiyon for quick response
Logged the location and it gives ticket_conversation_editor

useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://static.freshdev.io/fdk/2.0/assets/fresh_client.js';
    script.addEventListener('load', () => setLoaded(true));
    script.defer = true;
    document.head.appendChild(script);
  }, []);

  useEffect(() => {
    if (!loaded) return
    app.initialized().then(async (client) => {
      client.instance.context().then(async function (data) {
        let location = data.location;
        let InstanceData = data.data
        let ModalID = '';

        if (InstanceData && InstanceData.hasOwnProperty('modalID')){
          ModalID = InstanceData.modalID
        }
        if(location === 'ticket_top_navigation') {
          client.events.on("app.activated", async () => {
            await client.interface.trigger("showModal", {
              title: "AI-Powered Assistance",
              template: 'index.html',
              data: {modalID: 'ModalOne'},
            });
          })
        } 
        if (location === 'ticket_conversation_editor') {
          console.log("App Location ::", location)
  
                  await client.interface.trigger("setValue", {
                    id: "editor",
                    text: marked(res.data.identified_resolution) || "Default Reply Text",
                    replace: true
                  });
        });
        }
        if (location === "modal" && ModalID === 'ModalOne') {
          setChild(<ModalOne client={client} />);
        }

[Kithiyon (Arokiya Kithiyon A)]

Hi @yashviKhant

Can you try this:

        if (location === 'ticket_conversation_editor') {
                 console.log("App Location ::", location)
                  await client.interface.trigger("setValue", {
                    id: "editor",
                    text: marked(res.data.identified_resolution) || "Default Reply Text",
                    replace: true
                    data:{modalID:"ModalTwo"}
                  });
     
        }`
       if (location === "modal" && ModalID === 'ModalOne') {
          setChild(<ModalOne client={client} />);
           } 
       else if (location === "modal" && ModalID === 'ModalTwo') {
          setChild(<ModalTwo client={client} />);
           } 

By changing it as shown above, you can render the components based on the data passed to the modal.