CoT Terms

Renders terms of use content on page load when the user has not yet agreed to it, or nothing when they already agreed.

`onAgreed` option gets triggered after agreeing to the terms or if the user has previously agreed.

Package JSON Configuration

Update your project's package.json, set `includeTerms` to `true`.

package.json

{
  ..
  "coreConfig": {
    ...
    "includeTerms": true,
  }
}

Usage

script.js

var disagreeText = '';
disagreeText += '<div class="alert alert-danger role="alert">';
disagreeText += '<p><strong>Unable to Proceed.</strong></p>';
disagreeText += '<p>Users must agree to the terms and conditions.</p>';
disagreeText += '</div>';

var termsText = '';
termsText += '<div class="terms__scroll">';
termsText += '<p>';
termsText += 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur nisl mi, tempor consequat ligula sollicitudin in.';
termsText += 'Nulla lorem magna, aliquet non mollis at, porta eget leo. Etiam quis efficitur nibh, in ultricies nunc. Sed volutpat ut odio ut congue.';
termsText += 'Sed dapibus odio in mi ultrices, non cursus leo volutpat. Duis vitae leo nec urna interdum tempus at hendrerit lacus.';
termsText += '</p>';
termsText += '</div>';

var agreeText = '';
agreeText += 'I have read and agree to the terms and conditions above and to the City\'s terms of use and <a href="https://www.toronto.ca/home/privacy/">Privacy Statement</a>.';

var AppClass = window.cot_app || window.CotApp; // Allows the following code to work on standalone or embedded app.
AppClass.showTerms({
    agreedCookieName: 'termsofuse_agreedcookiename',
    agreementTitle: 'User Agreement - Terms and Conditions of Use',
    containerSelector: '#termsOfUseContainer',
    disagreedText: disagreeText,
    onAgreed: () => {
        // Navigation code.
    },
    termsText: termsText,
    agreeText: agreeText,
});


var maxHeight = $(window).height() - 500;
if (maxHeight > $('.terms__scroll').height()) {
    $('.terms__scroll').css('max-height', maxHeight + 'px');
}

Options

The `showTerms` function accepts an object type `option` argument.

Option	Type	Description
termsText	string	The body text of the terms and conditions. Defaults to "Content missing: terms text".
disagreedText	string	The body text to show when someone disagrees with the terms and conditions. Defaults to "You need to agree to the terms to proceed".
agreedCookieName	string	The name of the cookie to store the user's agreement in. Defaults to random numbers prefixed with "terms_cookie".
containerSelector	string \| JQuery Object \| HTML Element	Required. A CSS selector for an element on screen where the terms and conditions will be shown.
onAgreed(termsWereShown)	function	A function called after the user selects the agree check box. termsWereShown argument returns true if the terms were shown before agreement, false if the user had previously agreed and the cookie was still there, bypassing the terms. Defaults to a NOOP function.
onDisagreed()	function	A function called after the user unselects the agree button. Defaults to a NOOP function.
agreementTitle	string	The title to show at the top. Defaults to "Terms of Use Agreement".
agreeText	string	Defaults to "I HAVE READ AND AGREE TO THE TERMS AND CONDITIONS ABOVE AND TO THE CITY OF TORONTO'S TERMS OF USE AND PRIVACY POLICY."
agreeButton	string	Proceed button label. Defaults to "Proceed".

Scrollable Region

Additional code is added on the usage to add a scrollable region around the terms content.

This consist of a wrapper element (`<div class="terms__scroll">`) and code to add a `max-height` style.