@everymatrix/player-consents 1.38.0

package/src/PlayerConsents.svelte

@@ -0,0 +1,617 @@
+<svelte:options tag={null} />
+<script lang="ts">
+  import { _, addNewMessages, setLocale } from './i18n';
+  import { TRANSLATIONS } from './translations.js';
+  import { onMount } from 'svelte';
+  import type { Consent, ConsentCategory, PlayerConsent } from '../types/types';
+
+  import '@everymatrix/general-animation-loading';
+  import './images/fa-circle-exclamation.svg.svelte';
+
+  export let session: string = '';
+  export let userid: string = '';
+  export let endpoint: string = '';
+  export let clientstyling: string = '';
+  export let clientstylingurl:string = '';
+  export let lang: string = 'en';
+  export let displayconsentdescription: string = '';
+  export let translationurl:string = '';
+
+  let displayNone: boolean = false;
+  let customStylingContainer: HTMLElement;
+  let isMounted: boolean = false;
+  let isLoggedIn: boolean = false;
+  let sessionID: string = '';
+  let playerID: string = '';
+  let errorMessage: string = '';
+  let fatalError: string = '';
+  let consentsCategories: Array<ConsentCategory> = [];
+  let consentsList: Array<Consent> = [];
+  let playerConsents: Array<PlayerConsent> = [];
+  let isLoading: boolean = true;
+  let canSaveData: boolean = true;
+
+  let categoryToggle: { [key: string]: boolean } = {};
+  let prevCategoryToggleState: { [key: string]: boolean } = {};
+  let initialConsentsState: { [key: string]: boolean } = {};
+  let consentsState: { [key: string]: boolean } = {};
+  
+  type TranslationKeys = keyof typeof TRANSLATIONS;
+  Object.keys(TRANSLATIONS).forEach((item: TranslationKeys): void => {
+    addNewMessages(item, TRANSLATIONS[item]);
+  });
+
+  /**
+   * Sets the active language by updating the locale.
+   */
+  const setActiveLanguage = (): void => {
+    setLocale(lang);
+  };
+
+  /**
+   * Sets translation URL by fetching translation data and updating messages.
+   */
+  const setTranslationUrl = ():void => {
+    let url = new URL(translationurl);
+
+    fetch(url.href).then((res:any) => res.json())
+      .then((res) => {
+        Object.keys(res).forEach((item:any):void => {
+          addNewMessages(item, res[item]);
+        });
+      }).catch((err:any) => {
+        console.log(err);
+      });
+  }
+
+  /**
+   * Sets client styling by appending a style element to the custom styling container.
+   */
+  const setClientStyling = (): void => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  };
+
+  /**
+   * Sets client styling URL by fetching the CSS file and appending a style element to the custom styling container.
+   */
+  const setClientStylingURL = ():void => {
+    try {
+      displayNone = true;
+
+      let url = new URL(clientstylingurl);
+      let cssFile = document.createElement('style');
+
+      fetch(url.href)
+        .then((res:any) => res.text())
+        .then((data:any) => {
+          cssFile.innerHTML = data;
+
+          setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
+          setTimeout(() => { displayNone = false; }, 500);
+        });
+    } catch ( err ) {
+      const errorMessage = err instanceof TypeError ? $_('invalidUrl') : err.message;
+      handleError(errorMessage);
+    }
+  }
+
+  /**
+   * Sets the session information upon login.
+   */
+  const setSession = (): void => {
+    if( session ){
+      sessionID = session;
+      isLoggedIn = true;
+    }
+    if( userid ){
+      playerID = userid;
+    }
+  };
+
+  /**
+   * Handles errors by updating the error message.
+   *
+   * @param error - The error message to be handled.
+   * @param isFatal - A flag to indicate if the error is fatal.
+   */
+  const handleError = (error: string, isFatal: boolean = false): void => {
+    if (isFatal) {
+      fatalError = error;
+    } else {
+      cancelChanges();
+      errorMessage = error;
+    }
+  };
+
+  /**
+   * Fetches data from a given URL and returns the JSON response.
+   *
+   * @param url - The URL to fetch data from.
+   * @param errorMsg - The error message to be used if the request fails.
+   * @param options - The options for the fetch request.
+   * @returns The JSON response from the fetch request.
+   */
+  const fetchData = async (url: string, errorMsg: string, options: RequestInit, isFatal:boolean = false): Promise<any> => {
+    try {
+      const response = await fetch(url, options);
+
+      if (!response.ok) {
+        throw new Error($_(errorMsg));
+      }
+
+      // return await response.json();
+      const data = await response.json();
+      if (isLoggedIn) {
+        return data;
+      }
+      
+      // If user is not logged in, filter the consents by ShowOnRegister flag
+      return data.filter((consent: Consent) => consent.showOnRegister === true);
+    } catch (error) {
+      handleError(error instanceof TypeError ? $_(errorMsg) : error.message, isFatal);
+      throw error;
+    }
+  }
+
+  /**
+   * Retrieves consents data including consents, consent categories, and player consents.
+   * If any request fails, an error is thrown.
+   */
+  const getConsentsData = async (): Promise<void> => {
+    try {
+
+      let consents: Consent[] = []; 
+      let playerConsentsData: PlayerConsent[] = [];
+
+      // Consider the case where the widget is used in a non-logged in state
+      if (!isLoggedIn) {
+        consents = await fetchAllConsentsData();
+      } else {
+        [consents, playerConsentsData] = await fetchAllConsentsData();
+      }
+
+      isLoading = false;
+      consentsList = [ ...consents ];
+      consentsCategories = getCategoriesFromConsents(consentsList).sort((a, b) => a.categoryTagCode.localeCompare(b.categoryTagCode));
+      categoryToggle = getCategoryToggle(consentsCategories);
+      prevCategoryToggleState = { ...categoryToggle };
+      playerConsents = [ ...playerConsentsData ];
+      initializeConsentStates();
+    } catch (err) {
+      isLoading = false;
+      handleError(err instanceof TypeError ? $_('invalidUrl') : err.message, true);
+      throw err;
+    }
+  };
+
+  /**
+   * Fetches all consents data in parallel.
+   */
+  const fetchAllConsentsData = async () => {
+    const consentsUrl = new URL(`${endpoint}/api/v1/gm/consents`);
+    consentsUrl.searchParams.append('Status', 'Active');
+
+    // The widget can be used at register where the session id does not exists. If session is not set, fetch only the active consents
+    if (!isLoggedIn) {
+      return await fetchData(consentsUrl.href, 'fetchConsentsError', {
+        method: 'GET',
+      }, true);
+    }
+    
+    // Get all data if the session id exists
+    const playerConsentsUrl = new URL(`${endpoint}/api/v1/gm/user-consents/${playerID}`);
+
+    return await Promise.all([
+      fetchData(consentsUrl.href, 'fetchConsentsError', {
+        method: 'GET',
+      }, true),
+      fetchData(playerConsentsUrl.href, 'fetchPlayerConsentsError', {
+        method: 'GET',
+        headers: {
+          'X-SessionId': sessionID,
+          'Content-Type': 'application/json'
+        },
+      }), 
+    ]);
+  };
+
+  /**
+   * Get consents categories from playerConsentsData
+   * 
+   * @param playerConsentsData - Data from player consents
+   */
+  const getCategoriesFromConsents = (playerConsentsData: Array<any>) => {
+    const categoriesMap = new Map<string, ConsentCategory>();
+
+    playerConsentsData.forEach(consent => {
+      if (!categoriesMap.has(consent.category.categoryTagCode)) {
+        categoriesMap.set(consent.category.categoryTagCode, consent.category);
+      }
+    });
+
+    return Array.from(categoriesMap.values());
+  };
+
+  /**
+   * Initializes the category toggle state.
+   */
+  const getCategoryToggle = (categories: Array<ConsentCategory>) => {
+    const categoryToggleValueCached = localStorage.getItem('categoryToggle' + playerID);
+    if (categoryToggleValueCached === null) {
+      const newCategoryToggle = categories.reduce((acc: { [x: string]: boolean; }, category: ConsentCategory) => {
+        acc[category.categoryTagCode] = false;
+        return acc;
+      }, {});
+      localStorage.setItem('categoryToggle' + playerID, JSON.stringify(newCategoryToggle));
+      return newCategoryToggle;
+    } else {
+      return JSON.parse(categoryToggleValueCached);
+    }
+  };
+
+  /**
+   * Initializes consent states for the current user.
+   */
+  const initializeConsentStates = () => {
+    consentsList.forEach(consent => {
+      const playerConsent = playerConsents.find(pc => pc.tagCode === consent.tagCode);
+      initialConsentsState[consent.tagCode] = playerConsent && playerConsent.status === 'Accepted';
+    });
+
+    consentsState = { ...initialConsentsState };
+  };
+
+  /**
+   * Event handler to revert changes and cancel editing.
+   */
+  const cancelChanges = () => {
+    consentsState = { ...initialConsentsState };
+    categoryToggle = { ...prevCategoryToggleState };
+  };
+
+  /**
+   * Event handler to save current state and log it.
+   */
+  const saveChanges = async () => {
+    if ( !canSaveData ) {
+      return;
+    }
+    canSaveData = false;
+    const updateConsents: Array<{ tagCode: string, status: string }> = [];
+    const newConsentsList: Array<{ tagCode: string, status: string }> = [];
+
+    // Check if there are any consents in consentsState that have MustAccept parameter set to true and are set to false
+    const mustAcceptConsents = consentsList.filter(consent => consent.mustAccept === true && (!consentsState[consent.tagCode] || consentsState[consent.tagCode] === false));
+    window.postMessage({ type: 'HasMandatoryConsents', data: mustAcceptConsents.length > 0 });
+
+    Object.keys(consentsState).forEach(tagCode => {
+      const consent = playerConsents.find(c => c.tagCode === tagCode);
+      if (consentsState[tagCode] !== initialConsentsState[tagCode]) {
+        if (consent) {
+          updateConsents.push({ tagCode, status: consentsState[tagCode] ? 'Accepted' : 'Denied' });
+        } else {
+          newConsentsList.push({ tagCode, status: consentsState[tagCode] ? 'Accepted' : 'Denied' });
+        }
+      }
+    });
+
+    // If the user is not logged in, just emit an event with the new consents and return
+    if (!isLoggedIn) {
+      localStorage.setItem('categoryToggle' + playerID, JSON.stringify(categoryToggle) )
+      prevCategoryToggleState = { ...categoryToggle };
+      window.postMessage({ type: 'NewPlayerConsentData', data: JSON.stringify(newConsentsList) }, window.location.href);
+      canSaveData = true;
+      return;
+    }
+
+    const consentsApiUrl = new URL(`${endpoint}/api/v1/gm/user-consents/${playerID}`);
+
+    try {
+      const results = await Promise.allSettled([
+        newConsentsList.length > 0 && fetchData(consentsApiUrl.href, 'updateConsentsError', {
+          method: 'POST',
+          headers: {
+            'X-SessionId': sessionID,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({ userConsents: newConsentsList }),
+        }),
+        updateConsents.length > 0 && fetchData(consentsApiUrl.href, 'updateConsentsError', {
+          method: 'PATCH',
+          headers: {
+            'X-SessionId': sessionID,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({ userConsents: updateConsents }),
+        })
+      ]);
+
+      results.forEach((result, index) => {
+        if (result.status === 'rejected' || result.value.ok === false) {
+          const consent = index < newConsentsList.length ? newConsentsList[index] : updateConsents[index - newConsentsList.length];
+          consentsState[consent.tagCode] = initialConsentsState[consent.tagCode];
+        }
+      });
+
+      if (results.every(result => result.status === 'fulfilled')) {
+        localStorage.setItem('categoryToggle' + playerID, JSON.stringify(categoryToggle) )
+        prevCategoryToggleState = { ...categoryToggle };
+        window.postMessage({ type: 'PlayerConsentUpdated', success: true }, window.location.href);
+        initialConsentsState = { ...consentsState };
+      }
+    } catch (err) {
+      handleError(err instanceof TypeError ? $_('saveChangesError') : err.message);
+      window.postMessage({ type: 'PlayerConsentUpdated', success: false }, window.location.href);
+    } finally {
+      canSaveData = true;
+    };
+  };
+
+  /**
+   * Toggles all consents in a category.
+   * 
+   * @param categoryTagCode - The category tag code to identify the category.
+   */
+  const toggleCategoryConsents = (categoryTagCode: string) => {
+    consentsList
+      .filter(consent => consent.category.categoryTagCode === categoryTagCode)
+      .forEach(consent => {
+        if (consent.mustAccept && initialConsentsState[consent.tagCode] === true) {
+          return;
+        }
+        consentsState[consent.tagCode] = categoryToggle[categoryTagCode] || false;
+      });
+    saveChanges();
+  };
+
+  /**
+   * Toggles a consent.
+   * 
+   * @param consentCategory - The category of the category.
+   */
+  const toggleConsent = (consentCategory: ConsentCategory) => {
+    categoryToggle[consentCategory.categoryTagCode] = false; 
+    saveChanges();
+  }
+
+  /**
+   * Sets the isMounted flag after a short delay when the component is first rendered.
+   */
+  onMount(() => {
+    setTimeout(() => {
+      isMounted = true;
+    }, 50);
+  });
+
+  // Reactive statements
+  $: if (isMounted) {
+      setSession();
+      getConsentsData();
+  }
+  $: if (customStylingContainer) {
+      if (clientstyling) setClientStyling();
+      if (clientstylingurl) setClientStylingURL();
+  }
+  $: if (lang) setActiveLanguage();
+  $: if (translationurl) setTranslationUrl();
+</script>
+
+<div class={displayNone ? 'DisplayNone' : ''}>
+  <div class="ConsentsContainer" bind:this={customStylingContainer}>
+    
+    {#if isLoading}
+          <general-animation-loading clientstyling={clientstyling} clientstylingurl={clientstylingurl} />
+    {:else if fatalError}
+      <div class="ContainerCenter">
+        <strong class="ErrorMessage">{fatalError}</strong>
+      </div>
+    {:else}
+      {#if TRANSLATIONS[lang]['title'] || TRANSLATIONS[lang]['description']}
+        <div class="PlayerConsentsHeader">
+          {#if TRANSLATIONS[lang]['title']}
+            <h2 class="PlayerConsentsTitle">{TRANSLATIONS[lang]['title']}</h2>
+          {/if}
+          {#if TRANSLATIONS[lang]['description']}
+            <p class="PlayerConsentsDescription">{TRANSLATIONS[lang]['description']}</p>
+          {/if}
+        </div>
+      {/if}
+      {#each consentsCategories as category}
+      <div class="AccordionItem">
+        <div class="AccordionHeader">
+          <h3>{category.friendlyName}</h3>
+          <label class="ToggleSwitch Big">
+            <input type="checkbox" bind:checked={categoryToggle[category.categoryTagCode]} on:change={() => toggleCategoryConsents(category.categoryTagCode)} />
+            <span class="Slider Round"></span>
+          </label>
+        </div>
+        <div class="AccordionContent">
+          {#each consentsList.filter(consent => consent.category.categoryTagCode === category.categoryTagCode) as consent}
+            <div class="ConsentItem">
+              <div class="ConsentContent">
+                <h4 class="ConsentName">
+                  {consent.friendlyName}
+                  {#if consent.mustAccept === true}
+                    <sup class="ConsentRequired">*</sup>
+                  {/if}
+                </h4>
+                {#if displayconsentdescription === 'true'}
+                  <p class="ConsentDescription">{consent.description}</p>
+                {/if}
+              </div>
+              <label class="ToggleSwitch">
+                <input type="checkbox" bind:checked={consentsState[consent.tagCode]} disabled={ consent.mustAccept === true && initialConsentsState[consent.tagCode] === true} on:change={() => toggleConsent(consent.category)} />
+                <span class="Slider Round"></span>
+              </label>
+            </div>
+          {/each}
+        </div>
+      </div>
+      {/each}
+      { #if errorMessage }
+        <div class="ConsentErrorContainer">
+          <circle-exclamation-icon/>
+          <strong class="ErrorMessage">{errorMessage}</strong>
+        </div>
+      {/if}
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  $primary-color: var(--emw--color-primary, #307fe2);
+  $danger-color: var(--emw--color-error, #ed0909);
+  $category-border-color: var(--emw--color-gray-50, #cccccc);
+  $toggle-bg-color: var(--emw--color-gray-150, #a1a1a1);
+  $toggle-button-bg: var(--emw--color-white, #fff);
+
+  .DisplayNone {
+    display: none;
+  }
+
+  .ContainerCenter {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 219px;
+  }
+
+  .ErrorMessage {
+    font-size: 12px;
+    color: $danger-color;
+  }
+
+  .PlayerConsentsHeader {
+    margin-bottom: 30px;
+  }
+
+  .AccordionHeader {
+    font-weight: bold;
+    cursor: pointer;
+    border-bottom: 1px solid $category-border-color;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .AccordionItem {
+    margin-bottom: 10px;
+  }
+
+  .AccordionContent {
+    display: block;
+    padding: 10px 0;
+    &:last-of-type {
+      padding-bottom: 0;
+    }
+  }
+
+  .ConsentItem {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+    .ConsentName {
+      margin: 0;
+    }
+    .ConsentDescription {
+      font-size: 0.8rem;
+    }
+  }
+
+  .ToggleSwitch {
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    height: 24px;
+
+    &.Big{
+      width: 53px;
+      height: 30px;
+      .Slider:before {
+        width: 22px;
+        height: 22px;
+      }
+
+      input:checked + .Slider:before {
+        -webkit-transform: translateX(22px);
+        -ms-transform: translateX(22px);
+        transform: translateX(22px);
+      }
+    }
+    
+    input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+      &:checked + .Slider {
+        background-color: $primary-color;
+      }
+      &:disabled + .Slider{
+        opacity: 0.1;
+      }
+      &:checked + .Slider:before {
+        -webkit-transform: translateX(16px);
+        -ms-transform: translateX(16px);
+        transform: translateX(16px);
+      }
+      &:focus + .Slider {
+        box-shadow: 0 0 1px $primary-color;
+      }
+
+    }
+    .Slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: $toggle-bg-color;
+      -webkit-transition: .4s;
+      transition: .4s;
+      &:before {
+        position: absolute;
+        content: "";
+        height: 16px;
+        width: 16px;
+        left: 4px;
+        bottom: 4px;
+        background-color: $toggle-button-bg;
+        -webkit-transition: .4s;
+        transition: .4s;
+      }
+      &.Round {
+        border-radius: 34px;
+        &:before {
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+
+  .ConsentErrorContainer {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    border: 1px dashed $danger-color;
+    padding: 10px;
+    margin-bottom: 10px;
+    circle-exclamation-icon {
+      width: 15px;
+      fill: $danger-color;
+    }
+  }
+
+  .ConsentRequired {
+    color: $danger-color;
+  }
+</style>

package/src/i18n.js

@@ -0,0 +1,28 @@
+import {
+    dictionary,
+    locale,
+    addMessages,
+    _
+  } from 'svelte-i18n';
+  
+  function setupI18n({ withLocale: _locale, translations }) {
+    locale.subscribe((data) => {
+      if (data == null) {
+        dictionary.set(translations);
+        locale.set(_locale);
+      }
+    }); // maybe we will need this to make sure that the i18n is set up only once
+    /*dictionary.set(translations);
+    locale.set(_locale);*/
+  }
+  
+  function addNewMessages(lang, dict) {
+    addMessages(lang, dict);
+  }
+  
+  function setLocale(_locale) {
+    locale.set(_locale);
+  }
+  
+  export { _, setupI18n, addNewMessages, setLocale };
+  

package/src/images/fa-circle-exclamation.svg.svelte

@@ -0,0 +1,2 @@
+<svelte:options tag={'circle-exclamation-icon'} />
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>

package/src/index.ts

@@ -0,0 +1,4 @@
+import PlayerConsents from './PlayerConsents.svelte';
+
+!customElements.get('player-consents') && customElements.define('player-consents', PlayerConsents);
+export default PlayerConsents;