Sample JS file for case and creating case pages

sample_for_case_and_create_case_pages.js

$(function() {
    
    /**
     * Your website, to use it as an example
     */
    var URL = 'http://example.com';

    /**
     * Some variables available in the global visibility of Deskie:
     * CurrentCaseId
     * CurrentUserId
     * CurrentStaffId
     * CurrentClientId
     *
     * The data in these variables can already be used to get a more detailed result using the Deskie API.
     * https://deskie.io/api/introduction/intro
     */

    var CASE_ID = CurrentCaseId;
    var CASE_URL = document.location.href;

    /**
     * Some selectors to use as examples
     */
    var HORIZONTAL_MENU_SELECTOR = '.header-container';
    var HORIZONTAL_MENU_BUTTONS_SELECTOR = '.global-actions > .global-actions-list:last-child';
    var HORIZONTAL_MENU_ELEMENTS_SELECTOR = '.primary-nav';

    var INTEGRATION_PANEL_SELECTOR = '#integrations_info_panel';
    var INFORMATION_PANEL_SELECTOR = '#info_user_info_panel';

    
    /** HELPERS */

    /**
     * Checking for undefined
     */
    var checkNotUndefined = function(data) {
        return (typeof data === 'undefined') ? false : true;
    }

    /**
     * Inserting in the end or beginning of the element
     */
    var addCode = function(selector, htmlCode, after) {
        var element = $(selector);

        if(checkNotUndefined(after) === true && after === true) {
            element.append(htmlCode);
        } else {
            element.prepend(htmlCode);
        }
    };

    
    /** EXAMPLES */

    /**
     * Adding custom info in the user's block
     *
     * Header goes first
     */
    addCode(
        INFORMATION_PANEL_SELECTOR,
        `<div class="info_header clearfix">
            <p>External Data</p>
        </div>`,
        true
    );

    /**
     * Then goes the information
     *
     * Let's imagine we've requested the information from the outside
     * $.get(URL + '/api/users/' + CurrentUserId, data, callback);
     *
     * and we got such an object in the callback:
     */
    var UserInfromation = {
        id: 24391119023,
        name: 'John Doe',
        tariff_name: 'Pro',
        support_type: 'Real-time',
    };

    /**
     * Displaying this info
     * Code result in Deskie: https://deskie.io/img/js_files/01_sample_for_case_and_create_case_pages.png
     */
    addCode(
        INFORMATION_PANEL_SELECTOR,
        `<div class="info_fields">
            <h6>Login</h6>
            <p style="word-wrap: break-word;">${UserInfromation.name}</p>

            <h6>Profile link</h6>
            <p style="word-wrap: break-word;"><a href="${URL}/id/${UserInfromation.id}">${UserInfromation.name}</a></p>

            <h6>Tariff</h6>
            <p style="word-wrap: break-word;">${UserInfromation.tariff_name}</p>

            <h6>Support type</h6>
            <p style="word-wrap: break-word;">${UserInfromation.support_type}</p>
        </div>`,
        true
    );

    /**
     * Example of adding an item to the menu
     * Code result in Deskie: https://deskie.io/img/js_files/02_sample_for_case_and_create_case_pages.png
     */
    addCode(
        HORIZONTAL_MENU_ELEMENTS_SELECTOR,
        `<li class="nav-item nav-item-example inlb">
            <a class="nav-item-url " href="#example">Example</a>
        </li>`,
        true
    );

    /**
     * Example of adding a button to the right block of the header
     * Code result in Deskie: https://deskie.io/img/js_files/03_sample_for_case_and_create_case_pages.png
     */
    addCode(
        HORIZONTAL_MENU_BUTTONS_SELECTOR,
        `<li class="global-action-item inlb force-login" title="Example">
            <a class="nav-item-url" href="#example">
                <i class="icon fi-star"></i>
            </a>
        </li>`,
        false
    );

    /**
     * Adding your company colors to the horizontal menu
     * Code result in Deskie: https://deskie.io/img/js_files/04_sample_for_case_and_create_case_pages.png
     */
    $(document).find(HORIZONTAL_MENU_SELECTOR).css({
        'border-bottom': 'solid 2px red',
    });

    /**
     * Connecting your CSS in Deskie code. There are additional icons in CSS
     */
    $(document)
        .find('body')
        .append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">');

    /**
     * Adding the form and sending its data to the external website
     */
    var form = '';

    form = '<form action="' + URL + '" method="POST" id="example-form">';
        form += '<input type="text" value="" name="example-name" placeholder="Example Data">';
        form += '<button>Send</button>';
    form += '</form>';

    addCode(INTEGRATION_PANEL_SELECTOR, form, true);

    $(document).on('submit', '#example-form', function(event) {
        event.preventDefault();
        var formEl = $(this);

        // $.post(formEl.attr('action'), {
        //     //Form data
        //     exampleData: formEl.find('[name="example-name"]').val(),
        //     //ID of the case
        //     case_id: CASE_ID,
        //     //Url to the case in Deskie
        //     case_url: CASE_URL,
        // }, function(response) {
        //     formEl.append('<span style="color: green>Success!</span>');
        // });
    })

    /**
     * Adding falling snow if your agents are going to work on New Year's Eve :)
     */
    $.get('https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js', {

    }, function(jsLibCode) {
        $("body").append($("<script />", {
            html: jsLibCode + ' $(document).snowfall({flakeColor : "yellow", shadow: true});',
        }));
    });

    /**
     * That was a brief explanation about how you can change or add any buttons, forms and code to the case page.
     */
});