Jamie Danjoint

Using ChatGPT, I finally figured this out after a ton of troubleshooting to narrow things down. I specifically used a GPT called Zen Co-Pilot, which I highly recommend! 

Hope this makes sense and helps someone! 

THEME & API VERSIONS: I'm using the Copenhagen Theme version 4.2.5 with Templating API v4.

END GOAL: Hide a ticket form for any user that is NOT associated with our internal organization. Meaning, the form is only available to our internal employees.

The internal end user (your internal employees) MUST log into the Help Center in order to see the form.

External end users DO NOT have to be logged into your Help Center. Meaning, the form will be hidden:

• If an end user logs into your Help Center and is NOT associated with your internal organization 
  OR 
• If an end user DOES NOT sign into your Help Center (if you allow this). 

STEP 1: Add the jquery library to the document_head.hbs file:

STEP 2: Add the below code at the end of the script.js file:

// Hide internal ticket form from external end users
$(document).ready(function () {

 // Retrieve user organizations
 const userOrgs = window.HelpCenter.user ? window.HelpCenter.user.organizations : [];
 const userOrgNames = userOrgs.map(org => org.name);

 // Replace "Zendesk" with your internal organization name
 if (!userOrgNames.includes("Zendesk")) {
   const formNameToHide = "JAMIE-Test form"; // Replace with your actual form name

   // Function to hide the undesired option
   const hideFormOption = () => {
     const comboboxOptions = document.querySelectorAll('[data-garden-id="dropdowns.combobox.option"]');
     comboboxOptions.forEach(option => {
       if (option.textContent.trim() === formNameToHide) {
         option.style.display = "none";
         option.setAttribute("aria-hidden", "true");
         console.log(`Re-hidden form: ${formNameToHide}`);
       }
     });
   };

   // MutationObserver to monitor changes to the dropdown
   const observer = new MutationObserver(() => {
     hideFormOption();
   });

   // Initialize the observer for dropdown container
   const comboboxContainer = document.querySelector('[data-garden-id="dropdowns.combobox"]');
   if (comboboxContainer) {
     observer.observe(comboboxContainer, { childList: true, subtree: true });
   } else {
     console.warn("Combobox container not found, retrying...");
     setTimeout(() => {
       const retryContainer = document.querySelector('[data-garden-id="dropdowns.combobox"]');
       if (retryContainer) {
         observer.observe(retryContainer, { childList: true, subtree: true });
         hideFormOption();
       }
     }, 500);
   }

   // Initial call to hide the form option
   hideFormOption();
 }

 // Debugger in console
 console.log("User Organizations:", userOrgNames);
 console.log("Is form hidden? ", !userOrgNames.includes("Zendesk"));  // Replace "Zendesk" with your internal organization name

});

STEP 3: Save changes and test!