Freshdesk: Move Contact Details

freshdesk-move-contact-details.js

// ==UserScript==
// @name         Freshdesk: Move Contact Details
// @namespace    https://indisandbox.freshdesk.com/
// @version      0.1
// @description  Move a div with the id="requester-info" to the class="ticket-sidebar-sticky" on Freshdesk
// @match        https://*.freshdesk.com/a/tickets/*
// @exclude      https://*.freshdesk.com/a/tickets/filters/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=freshdesk.com
// @downloadURL  https://gist.githubusercontent.com/itris/a76d90535dadd661b774c8ec758df892/raw/freshdesk-move-contact-details.js
// @updateURL    https://gist.githubusercontent.com/itris/a76d90535dadd661b774c8ec758df892/raw/freshdesk-move-contact-details.js
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    console.log('--- Tampermonkey script loaded. Freshdesk: Move Contact details ---');

    // Function to move the 'Contact Details' section
    function moveContactDetails(observer) {
        const contactDetails = document.getElementById('requester-info');
        const statusCardsContainer = document.querySelector('.status-cards-container');

        if (contactDetails) {
            console.log('--- Contact Details found. ---');
        } else {
            console.log('--- Contact Details not found (yet). ---');
            return; // Exit if Contact Details are not found
        }

        if (statusCardsContainer) {
            console.log('--- Status Cards Container found. ---');
        } else {
            console.log('--- Status Cards Container not found (yet). ---');
            return; // Exit if Status Cards Container is not found
        }

        // If both elements exist, append 'Contact Details' to the new container
        if (contactDetails && statusCardsContainer) {
            // Disconnect the observer to prevent infinite loop
            observer.disconnect();
            console.log('--- Observer disconnected. ---');

            // Create a new div and set its class
            const wrapperDiv = document.createElement('div');
            wrapperDiv.className = '__app-components__widget-sidebar__widget ember-view';

            // Insert the new div into the DOM before the statusCardsContainer
            statusCardsContainer.parentNode.insertBefore(wrapperDiv, statusCardsContainer);

            // Move the statusCardsContainer inside the new div
            wrapperDiv.appendChild(statusCardsContainer);

            statusCardsContainer.appendChild(contactDetails);
            console.log('--- Contact Details moved and wrapped successfully. ---');

            // Reconnect the observer
            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
            console.log('--- Observer reconnected. ---');
        }
    }

    // Create an observer instance linked to the callback function
    const observer = new MutationObserver(mutations => {
        console.log('--- Detected change in DOM, attempting to move Contact Details. ---');
        moveContactDetails(observer);
    });

    // Start observing the body for DOM changes
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    console.log('--- MutationObserver set up to monitor DOM changes. ---');

    var css = `
        .__app-components__widget-sidebar__widget .sidebar__title {
            padding: 5px;
        }
        .__module-tickets__ticket-details__widgets__requester-info .widget-requestor-info {
            display: block !important;
            width: 100% !important;
        }
        .__module-tickets__ticket-details__widgets__requester-info .widget-requestor-info {
            white-space: unset;
            overflow: unset;
        }
        .__app-components__widget-sidebar__widget .accordion-image {
            position: unset;
        }
        .__app-components__widget-sidebar__widget .accordion-arrow {
        position: unset;
        }
    `;

    var head = document.head || document.getElementsByTagName('head')[0];
    var style = document.createElement('style');

    head.appendChild(style);
    style.type = 'text/css';
    if (style.styleSheet){
        // This is required for IE8 and below.
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }

    console.log('--- Custom Freshdesk sidebar styles applied. ---');
})();