@everymatrix/player-account-self-exclusion 0.0.367 → 0.0.368

package/src/PlayerAccountSelfExclusion.svelte

@@ -1,321 +1,321 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { getDevice } from 'rvhelper';
-  import moment from 'moment';
-  import { _, addNewMessages, setLocale } from './i18n';
-  import { PlayerSelfExclusionTranslations } from './translations';
-
-  import '@vaadin/vaadin-date-picker/vaadin-date-picker.js';
-
-  export let lang:string = 'en';
-  export let operator:string = 'Everymatrix';
-
-  let userAgent:string = window.navigator.userAgent;
-  let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
-  let calendar:HTMLElement;
-
-  let permanentSelfExclusion:boolean = false;
-
-  let selfExclusionPeriod:string = '';
-  let selfExclusionExpiryDate:string = '';
-  let currentDate:Date = new Date();
-  let minDate:string;
-  let maxDate:string;
-
-  Object.keys(PlayerSelfExclusionTranslations).forEach((item:any) => {
-    addNewMessages(item, PlayerSelfExclusionTranslations[item]);
-  });
-
-  minDate = moment(currentDate.setDate(currentDate.getDate())).add(6, 'M').format('YYYY-MM-DD');
-  maxDate = moment(currentDate.setDate(currentDate.getDate())).add(5, 'y').format('YYYY-MM-DD');
-  selfExclusionExpiryDate = minDate;
-
-  // Toggle permanent self exclusion
-  const togglePermanentSelfExclusion = () => {
-    if (permanentSelfExclusion == false) {
-      permanentSelfExclusion = true;
-    } else {
-      permanentSelfExclusion = false;
-    }
-  }
-
-  // Set self exclusion period
-  const setSelfExclusionPeriod = (date?:string) => {
-    if (permanentSelfExclusion == true) {
-      selfExclusionPeriod = 'SelfExclusionPermanent';
-    } else {
-      selfExclusionPeriod = 'SelfExclusionUntilSelectedDate';
-
-      if (date && date.length > 0) {
-        selfExclusionExpiryDate = date;
-      }
-    }
-  }
-
-  // Send self exclusion period and date
-  const saveSelfExclusion = (e):void => {
-    e.preventDefault();
-    setSelfExclusionPeriod();
-
-    window.postMessage({
-      type: 'SetSelfExclusion',
-      selfExclusionPeriod,
-      selfExclusionExpiryDate
-    }, window.location.href);
-  }
-
-  // Mobile back button
-  const toggleScreen = () => {
-    window.postMessage({type: 'PlayerAccountMenuActive', isMobile}, window.location.href);
-  }
-
-  const calendarHandler = (e:any) => {
-    setSelfExclusionPeriod(e.target.value);
-  }
-
-  const setCalendarEventListener = () => {
-    calendar.addEventListener('change', calendarHandler, false);
-  }
-
-  onMount(() => {
-    return () => {
-      calendar.removeEventListener('change', calendarHandler);
-    }
-  });
-
-  const initialLoad = () => {
-    setLocale(lang);
-  }
-
-  $: calendar && setCalendarEventListener();
-  $: lang && initialLoad();
-</script>
-
-<form class="SelfExclusionWrapper {isMobile ? 'SelfExclusionWrapperMobile' : ''}" part="SelfExclusionWrapper {isMobile ? 'SelfExclusionWrapperMobile' : ''}">
-  {#if isMobile}
-    <div class="MenuReturnButton" part="MenuReturnButton" on:click={() => toggleScreen()}>
-      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:var(--emfe-w-color-primary, #D0046C);}</style></defs><g transform="translate(-20 -158)">
-        <g transform="translate(20 158)">
-          <path class="aaa" d="M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z" transform="translate(15 15) rotate(180)"/>
-        </g></g>
-      </svg>
-      <h2 class="PlayerSelfExclusionTitleMobile" part="PlayerSelfExclusionTitleMobile">{$_('selfExclusion.title')}</h2>
-    </div>
-  {/if}
-  <h2 class="PlayerSelfExclusionTitle {isMobile ? 'PlayerSelfExclusionTitleNone' : ''}" part="PlayerSelfExclusionTitle {isMobile ? 'PlayerSelfExclusionTitleNone' : ''}">{$_('selfExclusion.title')}</h2>
-
-
-  <div class="SelfExclusionDescription {isMobile ? 'SelfExclusionDescriptionMobile' : ''}" part="SelfExclusionDescription {isMobile ? 'SelfExclusionDescriptionMobile' : ''}">
-    <p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText">{$_('selfExclusion.selfExclusionText1', { values: { operatorname: operator}})}</p>
-    <p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText">{$_('selfExclusion.selfExclusionText2')}</p>
-    <p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText">{$_('selfExclusion.selfExclusionText3')} support@everymatrix.com</p>
-    <p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText">{$_('selfExclusion.selfExclusionText4')} <a href="mailto:support@everymatrix.com">support@everymatrix.com</a></p>
-  </div>
-  <div class="SelfExclusionDateWrapper {isMobile ? 'SelfExclusionDateWrapperMobile' : ''}" part="SelfExclusionDateWrapper {isMobile ? 'SelfExclusionDateWrapperMobile' : ''}">
-    <label for="SelfExclusionDate">{$_('selfExclusion.duration')}</label>
-    <vaadin-date-picker bind:this={calendar} min={minDate} max={maxDate} value={minDate}></vaadin-date-picker>
-  </div>
-  <div class="SelfExclusionRadioWrapper {isMobile ? 'SelfExclusionRadioWrapperMobile' : ''}" part="SelfExclusionRadioWrapper {isMobile ? 'SelfExclusionRadioWrapperMobile' : ''}">
-    <label class="SelfExclusionRadio" part="SelfExclusionRadio">{$_('selfExclusion.forever')}
-      <input type="Checkbox" on:click={() => togglePermanentSelfExclusion()}>
-      <span class="Checkmark" part="Checkmark"></span>
-    </label>
-  </div>
-  <div class="SelfExclusionDescription {isMobile ? 'SelfExclusionDescriptionMobile' : ''}" part="SelfExclusionDescription {isMobile ? 'SelfExclusionDescriptionMobile' : ''}">
-    {#if permanentSelfExclusion}
-      <p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText"><strong>{$_('selfExclusion.permanentSelfExclusion')}</strong></p>
-    {:else}
-      <p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText"><strong>{$_('selfExclusion.temporarySelfExclusion', { values: { date: selfExclusionExpiryDate}})}</strong></p>
-    {/if}
-  </div>
-  <div class="SelfExclusionActionButtons {isMobile ? 'SelfExclusionActionButtonsMobile' : ''}" part="SelfExclusionActionButtons {isMobile ? 'SelfExclusionActionButtonsMobile' : ''}">
-    <button class="SelfExclusionSave" part="SelfExclusionSave" on:click={(e) => saveSelfExclusion(e)}>{$_('selfExclusion.save')}</button>
-  </div>
-</form>
-
-<style lang="scss">
-
-  :host {
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-
-  .PlayerSelfExclusionTitle {
-    font-size: 26px;
-    color: var(--emfe-w-color-primary, #D0046C);
-    font-weight: 400;
-  }
-
-  .PlayerSelfExclusionTitleMobile {
-    font-size: 16px;
-    color: var(--emfe-w-color-primary, #D0046C);
-  }
-
-  .PlayerSelfExclusionTitleNone {
-    display: none;
-  }
-
-  .SelfExclusionWrapper {
-    color: var(--emfe-w-color-contrast, #07072A);
-    padding: 50px;
-    max-width: 760px;
-    &.SelfExclusionWrapperMobile {
-      padding: 20px 15px;
-      background: var(--emfe-w-color-white, #FFFFFF);
-      max-width: unset;
-    }
-  }
-
-  .MenuReturnButton{
-    color: var(--emfe-w-color-gray-300, #58586B);
-    display: inline-flex;
-    align-items: center;
-    column-gap: 10px;
-    margin-bottom: 10px;
-  }
-
-
-  .SelfExclusionTitle {
-    font-size: 26px;
-    color: var(--emfe-w-color-primary, #D0046C);
-    font-weight: 400;
-    &.SelfExclusionTitleMobile {
-      font-size: 14px;
-    }
-  }
-
-  .SelfExclusionDescription {
-    color: var(--emfe-w-color-gray-300, #58586B);
-    line-height: 24px;
-    &.SelfExclusionDescriptionMobile {
-      font-size: 12px;
-      line-height: 19px;
-    }
-    .SelfExclusionDescriptionText a {
-      color: var(--emfe-w-color-primary, #D0046C);
-    }
-  }
-
-  .SelfExclusionDateWrapper {
-    color: var(--emfe-w-color-gray-300, #58586B);
-    display: flex;
-    flex-direction: column;
-    padding-bottom: 16px;
-    position: relative;
-    width: 50%;
-
-    label {
-      font-size: 14px;
-      font-weight: 300;
-      padding-bottom: 5px;
-    }
-
-    input {
-      width: 100%;
-      height: 44px;
-      border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
-      border-radius: 5px;
-      box-sizing: border-box;
-      padding: 5px 15px;
-      font-size: 16px;
-      line-height: 18px;
-    }
-
-    &.SelfExclusionDateWrapperMobile {
-      width: 100%;
-    }
-  }
-
-  .SelfExclusionRadioWrapper {
-    display: block;
-    position: relative;
-    padding: 4px 0 0 0;
-    margin-bottom: 16px;
-    font-size: 16px;
-    user-select: none;
-    line-height: 18px;
-
-    label {
-      font-size: 16px;
-      cursor: pointer;
-      padding-left: 35px;
-    }
-
-    input {
-      position: absolute;
-      opacity: 0;
-      cursor: pointer;
-      height: 0;
-      width: 0;
-    }
-
-    .Checkmark {
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 25px;
-      width: 25px;
-      background-color: var(--emfe-w-color-gray-100, #E6E6E6);
-      border-radius: 50%;
-    }
-
-    input:checked ~ .Checkmark {
-      background-color: var(--emfe-w-color-primary, #D0046C);
-    }
-
-    .Checkmark:after {
-      content: "";
-      position: absolute;
-      display: none;
-      left: 9px;
-      top: 5px;
-      width: 5px;
-      height: 10px;
-      border: solid white;
-      border-width: 0 2px 2px 0;
-      transform: rotate(45deg);
-    }
-
-    input:checked ~ .Checkmark:after {
-      display: block;
-    }
-
-    &.SelfExclusionRadioWrapperMobile {
-      label {
-        font-size: 12px;
-      }
-    }
-  }
-
-  .SelfExclusionActionButtons {
-    margin-top: 40px;
-    width: 50%;
-
-    .SelfExclusionSave {
-      cursor: pointer;
-      border-radius: 5px;
-      width: 100%;
-      height: 50px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 16px;
-      text-transform: uppercase;
-      transition-duration: 0.3s;
-      box-sizing: border-box;
-      background: var(--emfe-w-color-primary, #D0046C);
-      border: 1px solid var(--emfe-w-color-primary, #D0046C);
-      color: var(--emfe-w-color-white, #FFFFFF);
-    }
-
-    &.SelfExclusionActionButtonsMobile {
-      width: 100%;
-      grid-template-columns: 1fr 1fr;
-      .SelfExclusionSave {
-        height: 40px;
-        font-size: 12px;
-      }
-    }
-  }
-</style>
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { getDevice } from 'rvhelper';
+  import moment from 'moment';
+  import { _, addNewMessages, setLocale } from './i18n';
+  import { PlayerSelfExclusionTranslations } from './translations';
+
+  import '@vaadin/vaadin-date-picker/vaadin-date-picker.js';
+
+  export let lang:string = 'en';
+  export let operator:string = 'Everymatrix';
+
+  let userAgent:string = window.navigator.userAgent;
+  let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
+  let calendar:HTMLElement;
+
+  let permanentSelfExclusion:boolean = false;
+
+  let selfExclusionPeriod:string = '';
+  let selfExclusionExpiryDate:string = '';
+  let currentDate:Date = new Date();
+  let minDate:string;
+  let maxDate:string;
+
+  Object.keys(PlayerSelfExclusionTranslations).forEach((item:any) => {
+    addNewMessages(item, PlayerSelfExclusionTranslations[item]);
+  });
+
+  minDate = moment(currentDate.setDate(currentDate.getDate())).add(6, 'M').format('YYYY-MM-DD');
+  maxDate = moment(currentDate.setDate(currentDate.getDate())).add(5, 'y').format('YYYY-MM-DD');
+  selfExclusionExpiryDate = minDate;
+
+  // Toggle permanent self exclusion
+  const togglePermanentSelfExclusion = () => {
+    if (permanentSelfExclusion == false) {
+      permanentSelfExclusion = true;
+    } else {
+      permanentSelfExclusion = false;
+    }
+  }
+
+  // Set self exclusion period
+  const setSelfExclusionPeriod = (date?:string) => {
+    if (permanentSelfExclusion == true) {
+      selfExclusionPeriod = 'SelfExclusionPermanent';
+    } else {
+      selfExclusionPeriod = 'SelfExclusionUntilSelectedDate';
+
+      if (date && date.length > 0) {
+        selfExclusionExpiryDate = date;
+      }
+    }
+  }
+
+  // Send self exclusion period and date
+  const saveSelfExclusion = (e):void => {
+    e.preventDefault();
+    setSelfExclusionPeriod();
+
+    window.postMessage({
+      type: 'SetSelfExclusion',
+      selfExclusionPeriod,
+      selfExclusionExpiryDate
+    }, window.location.href);
+  }
+
+  // Mobile back button
+  const toggleScreen = () => {
+    window.postMessage({type: 'PlayerAccountMenuActive', isMobile}, window.location.href);
+  }
+
+  const calendarHandler = (e:any) => {
+    setSelfExclusionPeriod(e.target.value);
+  }
+
+  const setCalendarEventListener = () => {
+    calendar.addEventListener('change', calendarHandler, false);
+  }
+
+  onMount(() => {
+    return () => {
+      calendar.removeEventListener('change', calendarHandler);
+    }
+  });
+
+  const initialLoad = () => {
+    setLocale(lang);
+  }
+
+  $: calendar && setCalendarEventListener();
+  $: lang && initialLoad();
+</script>
+
+<form class="SelfExclusionWrapper {isMobile ? 'SelfExclusionWrapperMobile' : ''}" part="SelfExclusionWrapper {isMobile ? 'SelfExclusionWrapperMobile' : ''}">
+  {#if isMobile}
+    <div class="MenuReturnButton" part="MenuReturnButton" on:click={() => toggleScreen()}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:var(--emfe-w-color-primary, #D0046C);}</style></defs><g transform="translate(-20 -158)">
+        <g transform="translate(20 158)">
+          <path class="aaa" d="M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z" transform="translate(15 15) rotate(180)"/>
+        </g></g>
+      </svg>
+      <h2 class="PlayerSelfExclusionTitleMobile" part="PlayerSelfExclusionTitleMobile">{$_('selfExclusion.title')}</h2>
+    </div>
+  {/if}
+  <h2 class="PlayerSelfExclusionTitle {isMobile ? 'PlayerSelfExclusionTitleNone' : ''}" part="PlayerSelfExclusionTitle {isMobile ? 'PlayerSelfExclusionTitleNone' : ''}">{$_('selfExclusion.title')}</h2>
+
+
+  <div class="SelfExclusionDescription {isMobile ? 'SelfExclusionDescriptionMobile' : ''}" part="SelfExclusionDescription {isMobile ? 'SelfExclusionDescriptionMobile' : ''}">
+    <p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText">{$_('selfExclusion.selfExclusionText1', { values: { operatorname: operator}})}</p>
+    <p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText">{$_('selfExclusion.selfExclusionText2')}</p>
+    <p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText">{$_('selfExclusion.selfExclusionText3')} support@everymatrix.com</p>
+    <p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText">{$_('selfExclusion.selfExclusionText4')} <a href="mailto:support@everymatrix.com">support@everymatrix.com</a></p>
+  </div>
+  <div class="SelfExclusionDateWrapper {isMobile ? 'SelfExclusionDateWrapperMobile' : ''}" part="SelfExclusionDateWrapper {isMobile ? 'SelfExclusionDateWrapperMobile' : ''}">
+    <label for="SelfExclusionDate">{$_('selfExclusion.duration')}</label>
+    <vaadin-date-picker bind:this={calendar} min={minDate} max={maxDate} value={minDate}></vaadin-date-picker>
+  </div>
+  <div class="SelfExclusionRadioWrapper {isMobile ? 'SelfExclusionRadioWrapperMobile' : ''}" part="SelfExclusionRadioWrapper {isMobile ? 'SelfExclusionRadioWrapperMobile' : ''}">
+    <label class="SelfExclusionRadio" part="SelfExclusionRadio">{$_('selfExclusion.forever')}
+      <input type="Checkbox" on:click={() => togglePermanentSelfExclusion()}>
+      <span class="Checkmark" part="Checkmark"></span>
+    </label>
+  </div>
+  <div class="SelfExclusionDescription {isMobile ? 'SelfExclusionDescriptionMobile' : ''}" part="SelfExclusionDescription {isMobile ? 'SelfExclusionDescriptionMobile' : ''}">
+    {#if permanentSelfExclusion}
+      <p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText"><strong>{$_('selfExclusion.permanentSelfExclusion')}</strong></p>
+    {:else}
+      <p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText"><strong>{$_('selfExclusion.temporarySelfExclusion', { values: { date: selfExclusionExpiryDate}})}</strong></p>
+    {/if}
+  </div>
+  <div class="SelfExclusionActionButtons {isMobile ? 'SelfExclusionActionButtonsMobile' : ''}" part="SelfExclusionActionButtons {isMobile ? 'SelfExclusionActionButtonsMobile' : ''}">
+    <button class="SelfExclusionSave" part="SelfExclusionSave" on:click={(e) => saveSelfExclusion(e)}>{$_('selfExclusion.save')}</button>
+  </div>
+</form>
+
+<style lang="scss">
+
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
+  .PlayerSelfExclusionTitle {
+    font-size: 26px;
+    color: var(--emfe-w-color-primary, #D0046C);
+    font-weight: 400;
+  }
+
+  .PlayerSelfExclusionTitleMobile {
+    font-size: 16px;
+    color: var(--emfe-w-color-primary, #D0046C);
+  }
+
+  .PlayerSelfExclusionTitleNone {
+    display: none;
+  }
+
+  .SelfExclusionWrapper {
+    color: var(--emfe-w-color-contrast, #07072A);
+    padding: 50px;
+    max-width: 760px;
+    &.SelfExclusionWrapperMobile {
+      padding: 20px 15px;
+      background: var(--emfe-w-color-white, #FFFFFF);
+      max-width: unset;
+    }
+  }
+
+  .MenuReturnButton{
+    color: var(--emfe-w-color-gray-300, #58586B);
+    display: inline-flex;
+    align-items: center;
+    column-gap: 10px;
+    margin-bottom: 10px;
+  }
+
+
+  .SelfExclusionTitle {
+    font-size: 26px;
+    color: var(--emfe-w-color-primary, #D0046C);
+    font-weight: 400;
+    &.SelfExclusionTitleMobile {
+      font-size: 14px;
+    }
+  }
+
+  .SelfExclusionDescription {
+    color: var(--emfe-w-color-gray-300, #58586B);
+    line-height: 24px;
+    &.SelfExclusionDescriptionMobile {
+      font-size: 12px;
+      line-height: 19px;
+    }
+    .SelfExclusionDescriptionText a {
+      color: var(--emfe-w-color-primary, #D0046C);
+    }
+  }
+
+  .SelfExclusionDateWrapper {
+    color: var(--emfe-w-color-gray-300, #58586B);
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 16px;
+    position: relative;
+    width: 50%;
+
+    label {
+      font-size: 14px;
+      font-weight: 300;
+      padding-bottom: 5px;
+    }
+
+    input {
+      width: 100%;
+      height: 44px;
+      border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
+      border-radius: 5px;
+      box-sizing: border-box;
+      padding: 5px 15px;
+      font-size: 16px;
+      line-height: 18px;
+    }
+
+    &.SelfExclusionDateWrapperMobile {
+      width: 100%;
+    }
+  }
+
+  .SelfExclusionRadioWrapper {
+    display: block;
+    position: relative;
+    padding: 4px 0 0 0;
+    margin-bottom: 16px;
+    font-size: 16px;
+    user-select: none;
+    line-height: 18px;
+
+    label {
+      font-size: 16px;
+      cursor: pointer;
+      padding-left: 35px;
+    }
+
+    input {
+      position: absolute;
+      opacity: 0;
+      cursor: pointer;
+      height: 0;
+      width: 0;
+    }
+
+    .Checkmark {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 25px;
+      width: 25px;
+      background-color: var(--emfe-w-color-gray-100, #E6E6E6);
+      border-radius: 50%;
+    }
+
+    input:checked ~ .Checkmark {
+      background-color: var(--emfe-w-color-primary, #D0046C);
+    }
+
+    .Checkmark:after {
+      content: "";
+      position: absolute;
+      display: none;
+      left: 9px;
+      top: 5px;
+      width: 5px;
+      height: 10px;
+      border: solid white;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+
+    input:checked ~ .Checkmark:after {
+      display: block;
+    }
+
+    &.SelfExclusionRadioWrapperMobile {
+      label {
+        font-size: 12px;
+      }
+    }
+  }
+
+  .SelfExclusionActionButtons {
+    margin-top: 40px;
+    width: 50%;
+
+    .SelfExclusionSave {
+      cursor: pointer;
+      border-radius: 5px;
+      width: 100%;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      text-transform: uppercase;
+      transition-duration: 0.3s;
+      box-sizing: border-box;
+      background: var(--emfe-w-color-primary, #D0046C);
+      border: 1px solid var(--emfe-w-color-primary, #D0046C);
+      color: var(--emfe-w-color-white, #FFFFFF);
+    }
+
+    &.SelfExclusionActionButtonsMobile {
+      width: 100%;
+      grid-template-columns: 1fr 1fr;
+      .SelfExclusionSave {
+        height: 40px;
+        font-size: 12px;
+      }
+    }
+  }
+</style>