Introduction

Freeman.GDPR.CombinedConsents is a lightweight jQuery plugin, to display a modal where users can choose to consent to application specific cookies, PII fields and Terms of Use.

Getting Started

1.Installation process
    NPM:
        npm install freeman.gdpr.combinedconsents --save-dev

2.Software dependencies
    jQuery 3.x:
        Via NPM:   npm install jQuery@latest --save-dev

                    OR

        Via CDN -  Uncompressed: <script
                        src="https://code.jquery.com/jquery-3.3.1.js"
                        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
                        crossorigin="anonymous"></script>
                    OR

        Via CDN -  Minified: <script
                    src="https://code.jquery.com/jquery-3.3.1.min.js"
                    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
                    crossorigin="anonymous"></script>

    Bootstrap 4.x :
        Via NPM -  npm install bootstrap@latest --save-dev

                    OR

        Via CDN -  <script
                src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
                integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
                crossorigin="anonymous"></script>

    popper.js 1.x:
        Via NPM -  npm install [email protected] --save-dev

                    OR

        Via CDN -  <script
                src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
                integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
                crossorigin="anonymous"></script>

3.Latest releases
    Current Release: 1.5.5

How to use this plugin:

Step 1: Go to https://freemanco.visualstudio.com/Freeman/_packaging?feed=Freeman.GDPR.Packages&package=freeman.gdpr.piicookieconsent&version=1.3.9&protocolType=Npm&_a=package
Step 2: Click on Connect to feed. A pop-up is displayed.
Step 3: Choose npm from the list (on the left). Scroll down and click on Generate npm credentials.
Step 4: Copy and paste the token in .npmrc (Windows - C://Users//<username>) on your local machine. Generate 1 token per team
Step 5: Install the plugin and the necessary software dependencies in your application
Step 6: In the entry component,
    import '~/node_modules/freeman.gdpr.combinedconsents/js/jquery.piiCookieConsent.js';
    declare let $: any;  //If using TypeScript; else use 'var' instead of 'let'

    In the OnInit() method (before any cookies are set and any PII fields are used),

        // ALL FIELDS ARE REQUIRED. PASS EMPTY STRING TO email IF NO VALID EMAIL AVAILABLE
        let appData = {
            appName: "nexus",
            userName: "[email protected]",
            email: "",  // Send email address of the User if they want to receive System Communication else send empty string
            environment: <environment> ('dev', 'test', 'uat', 'prod'),
            apiKey: "" // Will be provided by us
            appKey: "" // Will be provided by us
        };
        $('selectorName').addCombinedModal(appData, function(action) {
            let returnValue = action;
            // 'action' is the consentObject returned by the plugin. This consentObject has the user consent information for each application cookie and PII fields.
        });
                    OR
        $('selectorName').addCombinedModal(appData, returnValue => {
            // Use returnaValue
        });

    Return Values:
        1. If user has not consented to Cookies,
            {
                Application: "<applicationName>",
                Token: "<ReturnToken>",
                UserCookies: [], // List of all cookies with User consents
                Username: "<username>"
            }

        2. If user has already consented,
            {
                Application: "<applicationName>",
                ApplicationId: <Id>,
                Email: "",
                IsShow: false,
                Token: "<ReturnToken>",
                UserCookies: [], // List of all cookies with User consents
                UserId: <userId>,
                Username: "<username>"
            }

Default CSS Classes:
    .consentCheckbox {
        transform: scale(1.0);
    }
    .overflowStyle {
        overflow-x: hidden;
        overflow-y: auto;
    }
    .policyText {
        font-weight: bold;
    }
    .categoryText {
        font-size: 13px;
        font-style: italic;
    }
    .consentAnchor {
        color: orange;
        cursor: pointer;
    }
    .consentAnchor {
        height: 250px;
        overflow: auto;
    }

    // DO NOT CHANGE THE FOLLOWING STYLES
    .switch { 
        position: relative; 
        display: inline-block;
        width: 54px; 
        height: 28px;
    }
    .switch input { 
        display: none; 
    }
    .slider { 
        position: absolute; 
        cursor: pointer; 
        top: 0; 
        left: 0; 
        right: 0; 
        bottom: 0; 
        background-color: #ccc; 
        -webkit-transition: .4s; 
        transition: .4s; 
        -webkit-transition: .4s; 
        transition: .4s;
    }
    .slider::before { 
        position: absolute; 
        content: ''; 
        height: 20px; 
        width: 20px; 
        left: 4px; 
        bottom: 4px; 
        background-color: white; 
        -webkit-transition: .4s; 
        transition: .4s;
    }
    input[type=checkbox]:checked + .slider { 
        background-color: #2196F3; 
    }
    input:focus + .slider { 
        box-shadow: 0 0 1px #2196f3; 
    }
    input[type=checkbox]:checked + .slider:before { 
        -webkit-transform: translateX(26px); 
        -ms-transform: translateX(26px); 
        transform: translateX(26px); 
    }
    .slider.round { 
        border-radius: 34px 
    }
    .slider.round::before { 
        border-radius: 50%; 
    }

 To change the default styles: Go to the global stylesheet in the application and reference the element using class names or Id.
    For example: 
        a .consentAnchor {
            color: red
        }
        Will change the color of the link with class consentAnchor, to red.

Purpose of combinedConsents Plugin:

This plugin should be used for an existing user, who has already completed registration and was not provided with the PIIConsent Modal at the time of registration. 
When a user logs into an application on page load, before any application cookies are set or PII fields are used, a modal will pop up which contains 3 tabs for Cookie Consent, PII Consent and Terms of Use. 
The Cookie Consent tab will have the cookie policy and a list of all the cookies the application uses. Cookies can either be required (essential to the application) or optional (application can be accessed without these cookies). Required cookies will always to turned on and cannot be turned off. Users can either turn on (give consent) or turn off(revoke consent) to only the optional cookies.
The PIIConsent tab will have the privacy policy and a list of all the PII data the application uses. PII data can either be required (essential to the application) or optional (application can be accessed without this data). Required fields will always to turned on and cannot be turned off. Users can either turn on (give consent) or turn off(revoke consent) to only the optional fields.
Once the user makes a decision and clicks 'Continue', the consent is stored and returned to the application. The application must make the necessary changes to the cookies and PII data based on the consent given by the user.