Disclaimer Manager

Introduction

This web app serves as a depository for legal disclaimers that accompany promotional offers.

When a disclaimer or disclaimers must be included on a website or landing page, an embed code can be generated that references the selected disclaimers. If a particular disclaimer is included on multiple sites/landing pages, and that disclaimer needs to be updated; it is only necessary to edit the disclaimer once in the Manager for all sites/landing pages to reflect the change.

The maximum number of disclaimers that can be included in any given embed code is ten. Each disclaimer will be assigned a reference symbol. The ten symbols in order of appearance are: asterisk (*), double asterisk (**), triple asterisk (***), dagger (†), double dagger (‡), silcrow (§), pilcrow (), mu (μ), tilde (~), and caret (^).

Pages

There are two pages: Disclaimer Manager, and Disclaimer Editor.

Disclaimer Manager UI

This page serves as the homepage for the app and displays all existing clients. The addition and deletion of client records is performed on this page.

Menu Bar

In the upper, right-hand corner is a menu with links to take the user back to their department's homepage, add a client record, and delete a client record (Figure 1).

Figure 1

If there are no existing client records, an "Add Your First Client" button will appear in the center of the page (Figure 2).

Figure 2

Adding a New Client Record

Upon clicking either the "Add Client" or "Add Your First Client" buttons, a form will appear (Figure 3). The only required field is "Client Name". If no image URL is provided, a default image will be included with the client record. Any of the client record details can be edited at any time.

Figure 3

When the "Save" is clicked, a new client record is created, the page will reload, and the client record will appear below the page header (Figure 4).

Figure 4

Editing a Client Record

Clicking the "Edit" button will open a form with the client's information prepopulated (Figure 5). Any changes made will be saved immediately by clicking the "Update" button.

Figure 5

Deleting a Client Record

If the client record was created in error, clicking the "Delete Client" button at the top of the page will open a form with a list of all existing client records (Figure 6). Select the client records you'd like to remove, and click "Delete".

image-20201207114308832

Disclaimer Editor UI

This page serves as the interface for client-specific disclaimer management. Navigating to the editor can only be done from the Disclaimer Manager homepage.

To navigate to the editor, click on a client's name.

The Editor is divided into three columns: Update History, Disclaimers, and Saved Groups / Selected Disclaimers. When a client record is first created, the Editor will look like Figure 7.

Figure 7

Update History

The first column presents a record of all interaction with either the client record or the disclaimers associated with the record. The History is itself broken in to three columns: User, Action, and Date (Figure 8).

Figure 8

USER

The User column will contain either the email address of the user initiating the action or their user name (depending upon how their user account was originally set up in the Lilikoi Dashboard).

ACTION

The second column presents a brief description of the action that was taken. The description's grammar and syntax follows Git comment specifications with a present tense verb followed by a simple description of the commit.

DATE

The third column contains the date of the action taken. The date is stored as UTC in the database, but converted to the device's system time zone upon page load.

Disclaimers

When the "New Disclaimer" button is clicked, a textarea with three buttons will be created (Figure 9).

Figure 9

Each disclaimer is represented by an ID number assigned by the database. Therefore, if there are multiple client records with multiple disclaimers, there will appear to be missing or skipped ID numbers when viewing a particular client's disclaimers.

At this point, enter the disclaimer's text

into the textarea and click "Save / Update". The page will reload, and the disclaimer is now stored in the database (Figure 10).

Figure 10

LINKS

If you would like to include a link within the body of the disclaimer; paste the URL into the textarea (Figure 11)...

image-20201210151722030

...highlight the text (Figure 12)...

Figure 12

...then, right click the highlighted text. The text will then be automatically reformatted with the appropriate HTML (Figure 13).

image-20201210152012610

After which you can change the text between the tags to whatever you'd prefer (Figure 14).

Figure 14

Don't forget to save your changes!

DELETE DISCLAIMER

Should you need to delete the disclaimer record, click the "DELETE" button. You'll be prompted to confirm deletion (Figure 15).

Figure 11

Selected Disclaimers

When you are ready to deploy the disclaimer, it must be added to the "SELECTED DISCLAIMERS" window. To do so, click the "Add" button. The button's text will then change to "Remove", and the disclaimer will appear in the "SELECTED DISCLAIMERS" window beside the appropriate reference symbol (Figure 16).

Figure 16

To remove a disclaimer from the "SELECTED DISCLAIMERS" window, click eight the "Remove" button or click the disclaimer itself in the "SELECTED DISCLAIMERS" window. The "Clear All" button below the "SELECTED DISCLAIMERS" window will remove all disclaimers currently listed in the window.

STYLING

When the cursor hovers over the "Font Size" (Figure 17) or "Font Color" (Figure 18) fields, a tooltip appears as a reference for the types of units and color definitions each field will accept.

Figure 13

Figure 14

When a font size (Figure 19) or font color (Figure 20) is added to the field, the window will immediately reflect the change (for the user's reference). NOTE: The color field will also accept any of the 140 named CSS colors.

Figure 19

Figure 20

EMBEDDING

When you are ready to embed your collection of disclaimers in a webpage, click the "Generate Code" button. This will bring up a modal with the embed code customized with your disclaimers and any styling you've included (Figure 21). Click the "Copy Code" button, and the embed code is automatically placed in your computer's clipboard and available for immediate pasting.

Figure 21

NOTE: Each time the "Generate Code" button is clicked, a new, unique ID number is created for the embed code. This is necessary for universal compatibility with landing page editors. Some landing page editors allow users to create both a desktop and mobile version of a given landing page. This usually requires embedding the disclaimer code once for each version. However, both desktop and mobile versions are sent to a browser when a potential customer navigates to the page. If two instances of the embed code are present on a webpage, JavaScript will only target the first instance -- unless they each have a unique identifier.

To embed two or more instances of the "Disclaimer Code" on one webpage (or embed different collections of disclaimers), embed the first code; then, re-generate the embed code for each instance, and embed each one.

Saved Groups

SAVING

If you have created a combination of disclaimers that you'd like store for later, click the "Save as Group" button, and a modal will appear asking you to name your group (Figure 22). The "Disclaimer IDs" area lists all the disclaimers that will be included in the group.

Figure 22

The new group will appear in the "SAVED GROUPS" area just above the "SELECTED DISCLAIMERS" window (Figure 23). Whenever a saved group button is clicked, all disclaimers included in that group will be added to or removed from the "SELECTED DISCLAIMERS" window.

Figure 23

DELETING

To delete a group, right click on the button (Figure 24). Click the "Delete: [...]" button, and the group will be removed.

Figure 24

 

Code Base

disclaimer-manager.js

When the page loads, the following function is called:

The seven, distinct event handlers are related to the modals and forms used to create, edit, and delete client records.

formatNewClientName()

When creating a new client record, this function prevents the inclusion of illegal characters in the client name. The client name is passed as a URL query parameter, and thus must conform to URL standards.

showHideAddClientModal()

As the name implies.

addNewClient()

This takes the information from the new client record form, encodes the strings, and sends it to the server. When a successful response is received, it clears the form for the next use.

updateClientInfo()

This takes the information from the update client record form, encodes the strings, and sends it to the server.

showHideEditModal()

A typical toggle method with a twist. Because this handler is applied to both the "Edit" button and the "Cancel" button on the "Update Client" modal, it needs to know when to populate the form fields with the selected client's information. Moreover, because there is only one "Cancel" button, it was easier to target that with a naught condition (line 3).

addClientToDeleteList()