Merge pull request #15 from Spinoco/feature/blacklist-domains

Introduced configuration rule concept and implemented way of disablin…

Author: mraulim

readme/configuration.md

@@ -257,6 +257,32 @@ key: `features`
 | sendBoxInputBorder | boolean |         | 1px solid border around input box with `borderColor`                             |
 | embedded           | boolean |         | Allows the webchat plugin to be embedded directly into a webview. Embeded plugin does not have header and may not be opened/closed.|
 
+### Rules that allow to customize behaviour of the plugin based on certain criteria.
+
+key `rules`
+
+This is defined as array of the following objects. First rule matching applies others are ignored
+
+
+| Property   | Type                    | Default | Description                                                                                                                                                                                                                                                                                                                |
+|------------|-------------------------|---------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| **domain** | string, Array of string |         | Required. Defines url of the domain this rule applies to. It is defined as string. If the string starts with "/" character, it is applied only to url path without hostName, otherwise it applies to hostname and path. Url is tested to start with given string, case ignored. multiple urls can be specified with array. |
+| disable    | boolean                 | false   | Disables webchat functionality, webchat will not initialize/render.                                                                                                                                                                                                                                                        |
+                                                                                                                                                                                                                                                                                                         |
+Example of the rules configuration :
+
+```json
+{
+  "rules": [
+    {
+      "domain": "https://www.example.com",
+      "disable": true
+    }  
+  ]
+}
+
+```
+
 ## Configuration example
 
 ### Minimal

src/models/interfaces/configuration/configuration-interface.ts

@@ -10,6 +10,7 @@ import { AvatarInterface } from "./avatar-interface";
 import { DirectLineInterface } from "./direct-line-interface";
 import { LoaderInterface } from "./loader-interface";
 import { PopoverInterface } from "./popover/popover-interface";
+import { RuleInterface } from "./rule-interface";
 
 export interface ConfigurationInterface {
     directLine: DirectLineInterface;
@@ -35,4 +36,5 @@ export interface ConfigurationInterface {
     timestampColor?: string;
     primaryFont?: string;
     variables?: Record<string, string | number>;
+    rules?: [RuleInterface];
 }

src/models/interfaces/configuration/rule-interface.ts

@@ -0,0 +1,11 @@
+export interface RuleInterface {
+    /** Domain for which this rule applies. Id the value starts with "/" it matched path in url only.
+     * otherwise it matches host and path.
+     * If the value is an array, the rule will apply to all domains in the array.
+     * Comparions is case insensitive.
+     * */
+    domain: string | [string];
+
+    /** If true, disables chat functionality, chat plugin will not render */
+    disable?: boolean;
+}

src/models/services/rule-service.ts

@@ -0,0 +1,49 @@
+import { RuleInterface } from "../interfaces/configuration/rule-interface";
+import { ConfigurationInterface } from "../interfaces/configuration/configuration-interface";
+
+export class RuleService {
+    private rule?: RuleInterface;
+
+    constructor(config: ConfigurationInterface) {
+        this.rule = this.findRuleForCurrentDomain(config.rules ? config.rules : []);
+    }
+
+    /**
+     * Yields to true, if the chat may be displayed on the current domain.
+     * If false, this means that the chat may not be displayed on the current domain.
+     */
+    public mayDisplayForCurrentDomain(): boolean {
+        return this.rule == null || this.rule.disable !== true;
+    }
+
+    /**
+     * Returns the rule for the current domain.
+     */
+    private findRuleForCurrentDomain(rules: RuleInterface[]): RuleInterface | undefined {
+
+        return rules.find((rule) => {
+            const domains = rule.domain instanceof Array ? rule.domain : [rule.domain];
+            return domains.find(this.acceptDomain(window.location));
+        });
+    }
+
+    /**
+     * Returns a function that checks if the domain matches the current domain.
+     * @param currentPathName   Path name where the chat is displayed.
+     * @param currentHost       Host where the chat is displayed.
+     * @param currentPort       Port where the chat is displayed.
+     * @param currentProtocol   Protocol where the chat is displayed.
+     * @private
+     */
+    private acceptDomain(
+        location: Location
+    ): (domain: string) => boolean {
+        return (domain: string) => {
+            if (domain.startsWith("/")) {
+                return location.pathname.toLowerCase().startsWith(domain.toLowerCase());
+            } else {
+                return location.href.toLowerCase().startsWith(domain.toLowerCase());
+            }
+        };
+    }
+}

src/spinoco-webchat-plugin.tsx

@@ -12,6 +12,7 @@ import { config } from "./config/config";
 import { GlobalEventService } from "./models/services/global-event-service/global-event-service";
 import "./styles/app.scss";
 import { UrlNavigationService } from "./models/services/dom/url-navigation-service";
+import { RuleService } from "./models/services/rule-service";
 
 declare global {
     interface Window {
@@ -30,29 +31,34 @@ const createWithConfigUrl = (url: string) => {
     fetch(`${url}`)
         .then((response) => response.json())
         .then((configuration: ConfigurationInterface) => {
-            const directLineSecret = configuration.directLine.secret;
-            if (!directLineSecret) {
-                configuration.directLine.useMockbot = true;
-            }
-            const chatStorage = ChatStorage.getInstance();
-            const conversationService = new ConversationService(chatStorage, configuration.directLine);
+            const ruleSrevice = new RuleService(configuration);
+            if (ruleSrevice.mayDisplayForCurrentDomain()) {
+                const directLineSecret = configuration.directLine.secret;
+                if (!directLineSecret) {
+                    configuration.directLine.useMockbot = true;
+                }
+                const chatStorage = ChatStorage.getInstance();
+                const conversationService = new ConversationService(chatStorage, configuration.directLine);
 
-            ReactDOM.createRoot(chatDomService.wrapperElement).render(
-                <React.StrictMode>
-                    <App
-                        chatStorage={chatStorage}
-                        storeService={storeService}
-                        localeService={localeService}
-                        conversationService={conversationService}
-                        customer={chatDomService.getCustomerDto()}
-                        bot={chatDomService.getBotDto()}
-                        popover={chatDomService.getPopoverDto()}
-                        configuration={configuration}
-                        globalEventService={globalEventService}
-                        urlNavigationService={urlNavigationService}
-                    />
-                </React.StrictMode>,
-            );
+                ReactDOM.createRoot(chatDomService.wrapperElement).render(
+                    <React.StrictMode>
+                        <App
+                            chatStorage={chatStorage}
+                            storeService={storeService}
+                            localeService={localeService}
+                            conversationService={conversationService}
+                            customer={chatDomService.getCustomerDto()}
+                            bot={chatDomService.getBotDto()}
+                            popover={chatDomService.getPopoverDto()}
+                            configuration={configuration}
+                            globalEventService={globalEventService}
+                            urlNavigationService={urlNavigationService}
+                        />
+                    </React.StrictMode>,
+                );
+            } else {
+                console.warn("Chat is disabled for this domain.");
+            }
         })
         .catch((e) => {
             throw new FailedToLoadConfigurationError(e.message);