@everymatrix/player-rglimits 1.44.0 → 1.45.2

package/src/PlayerRglimits.svelte

@@ -1,1260 +0,0 @@
-<svelte:options tag={null} />
-<script lang="ts">
-  import moment from 'moment';
-  import { _, addNewMessages, setLocale } from './i18n';
-  import { TRANSLATIONS } from './translations.js';
-  import { onMount } from 'svelte';
-  import type { MonetaryLimitType, LimitDefinition, DisplayedLimit, ScheduleType, FormattedSchedule } from '../types/types';
-
-  import archBgSvg from './images/arch-bg.svg';
-  import caretSelect from './images/caret-select.svg';
-  import caretRight from './images/fa-caret-right.svg';
-  import curencyIcon from './images/curency.svg';
-  import calendarIcon from './images/fa-calendar-times-o.svg';
-  import pencilIcon from './images/fa-pencil.svg';
-  import timesIcon from './images/fa-times.svg';
-  import plusIcon from './images/fa-plus-solid.svg';
-
-  import '@everymatrix/general-animation-loading'
-
-  export let session: string = '';
-  export let sessiontype: string = '';
-  export let userid: string = '';
-  export let endpoint: string = '';
-  export let transdetailsurl:string = '';
-  export let transactionspageurl:string = '';
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-  export let lang:string = 'en';
-  export let translationurl:string = '';
-  export let datetimeformat:string = '';
-  export let editlimitaction:string = '';
-  export let deletelimitaction:string = '';
-  export let cancelimitscheduleaction:string = '';
-  export let getutctime:string = '';
-
-  let displayNone:boolean = false;
-  let customStylingContainer: HTMLElement;
-
-  let isMounted:boolean = false;
-  let isLoggedIn:boolean = false;
-  let sessionID:string = '';
-  let playerID:string = '';
-  let isLoading:boolean = true;
-  let isGaugeLoading:boolean = true;
-  let noLimitToDisplay:boolean;
-  let showDropdown:boolean = false;
-
-  let displayedLimit:DisplayedLimit = {
-    id:'',
-    totalAmount: null,
-    spentAmount: '',
-    limitCurrency: 'EUR',
-    remainingAmount: '',
-    limitPeriod: '',
-    limitProducts: '',
-    from: '',
-    to: '',
-  };
-
-  let limitWalletTypeList: Array<string> = [];
-  let limitPeriodList: Array<string> = [];
-  let limitTypeList: Array<string> = [];
-  let selectedWalletType: string = '';
-  let selectedLimitPeriod: string = '';
-  let selectedLimitType: string = '';
-  let selectedProduct: string = '';
-  let limitDefinitionList: Array<MonetaryLimitType> = [];
-  let productList: Array<string> = [];
-
-  let gaugeValue:number = 0;
-
-  let errorMessage:string = '';
-
-  const timeMap = {
-    Daily: 0,
-    Weekly: 1,
-    Monthly: 2
-  };
-
-  const walletTypeMap = {
-    All: 'All',
-    RealCash: 'Real Money'
-  };
-
-  type TranslationKeys = keyof typeof TRANSLATIONS;
-  Object.keys(TRANSLATIONS).forEach((item: TranslationKeys): void => {
-    addNewMessages(item, TRANSLATIONS[item]);
-  });
-
-  /**
-   * Sets the isMounted flag after a short delay when the component is first rendered.
-   */
-  onMount(() => {
-    setTimeout(() => {
-      isMounted = true;
-    }, 50)
-
-     // Define the function to handle clicks outside the dropdown
-     const handleOutsideClick = (event: Event) => {
-      // Check if the click is outside the .ProductsDropdown
-      if (!(event.target as HTMLElement).closest('.ProductsDropdown')) {
-        // Close the dropdown
-        showDropdown = false;
-      }
-    };
-
-    // Add event listener to window for clicks
-    window.addEventListener('click', handleOutsideClick);
-    
-    // Cleanup function to remove event listener when component is unmounted
-    return () => {
-      window.removeEventListener('click', handleOutsideClick);
-    };
-  })
-
-  /**
-   * Sets the session information upon login.
-   */
-  const setSession = ():void => {
-    isLoggedIn = true;
-    sessionID = session;
-    playerID = userid;
-  }
-
-  /**
-   * Handles errors by updating the error message.
-   * 
-   * @param error - The error message to be handled.
-   */
-  const handleError = (error:string):void => {
-    errorMessage = error;
-  }
-  
-  /**
-   * Find the best matching limit based on selected options.
-   */
-  const findBestMatchingLimit = () => {
-    let filteredLimits = limitDefinitionList;
-
-    if (selectedLimitPeriod) {
-      filteredLimits = filteredLimits.filter(item => item.period === selectedLimitPeriod);
-    }
-
-    if (selectedWalletType) {
-      filteredLimits = filteredLimits.filter(item => item.walletTypes.includes(selectedWalletType));
-    }
-
-    if (selectedLimitType) {
-      filteredLimits = filteredLimits.filter(item => item.type === selectedLimitType);
-    }
-
-    if (selectedProduct) {
-      filteredLimits = filteredLimits.filter(item => item.products.includes(selectedProduct));
-    }
-
-    // Return the first matching limit or the first limit in the list if no matches are found
-    return filteredLimits[0] || limitDefinitionList[0];
-  }
-
-  /**
-   * Retrieves and sets the limit balance based on available limit definitions.
-   * If no limit definitions are found, sets appropriate flags.
-   */
-  const getLimitBalance = async (): Promise<void> => {
-    showDropdown = false;
-    try {
-      limitDefinitionList = await getLimitDefinitions();
-      
-      if (limitDefinitionList.length === 0) {
-        isLoading = false;
-        noLimitToDisplay = true;
-        return;
-      }
-      limitPeriodList = [...new Set(limitDefinitionList.map((limit) => limit.period))].sort((a, b) => timeMap[a] - timeMap[b]);
-
-      if (!selectedLimitPeriod || !limitPeriodList.includes(selectedLimitPeriod)) {
-        selectedLimitPeriod = limitPeriodList[0];
-      }
-      limitWalletTypeList = getWalletTypeList(selectedLimitPeriod);    
-
-      if (!selectedWalletType || !limitWalletTypeList.includes(selectedWalletType)) {
-        selectedWalletType = limitWalletTypeList[0];
-      }
-      productList = getProductList(selectedLimitPeriod, selectedWalletType);
-      
-      if (!productList.includes(selectedProduct)) {
-        selectedProduct = productList[0];
-      }
-      getLimitBalanceById(findBestMatchingLimit());
-
-    } catch ( err ) {
-      isLoading = false;
-      handleError($_('fetchLimitBalanceError'));
-      return;
-    }
-  }
-
-  /**
-   * Retrieves the limit definitions for a player.
-   * 
-   * @returns A promise that resolves to an array of limits.
-   */
-  const getLimitDefinitions = async (): Promise<MonetaryLimitType[]> => {
-    try {
-      const url = new URL(`${endpoint}/v1/player/${playerID}/limits/monetary/`);
-      const options = {
-        method: 'GET',
-        headers: {
-          'X-SessionId': sessionID,
-          'X-Session-Type': sessiontype,
-        },
-      };
-
-      const response = await fetch(url, options);
-
-      if (!response.ok) {
-        throw new Error($_('fetchLimitDefError'));
-      }
-
-      const res = await response.json();
-
-      const allowedLimitTypes = ['Deposit', 'Loss', 'Wagering'];
-      const limitTypes: string[] = res.limits.map((item: MonetaryLimitType) => item.type);
-      limitTypeList = Array.from(new Set(limitTypes)).filter((type) => allowedLimitTypes.includes(type));
-
-      if (!selectedLimitType) {
-        selectedLimitType = limitTypeList[0];
-      }
-
-      const filteredLimits = res.limits.filter((item: MonetaryLimitType) => item.type === selectedLimitType);
-      return filteredLimits.length > 0 ? filteredLimits : [];
-    } catch (err) {
-      const errorMessage = err instanceof TypeError ? $_('invalidUrl') : err.message;
-      handleError(errorMessage);
-    }
-  };
-
-  /**
-   * Updates product list based on selected period and walletType.
-   * 
-   * @param period - The selected period.
-   * @param walletType - The selected walletType.
-   */
-   const getProductList = (period: string, walletType: string): Array<string> => {
-    
-    const limits = limitDefinitionList.filter((limit) => limit.period === period && limit.walletTypes[0] === walletType);
-    const newProductList = [];
-
-    limits.forEach((currentLimit) => {
-      currentLimit.products.forEach( (product) => {
-        if(newProductList.indexOf(product) === -1) {
-          newProductList.push(product)
-        }
-      });
-    });
-
-    return newProductList.sort();
-  }
-
-
-  /**
-   * Updates wallet types list based on selected period.
-   * 
-   * @param period - The selected period.
-   */
-   const getWalletTypeList = (period: string): Array<string> => {
-
-    const limits = limitDefinitionList.filter((limit) => limit.period === period);
-    const newWalletTypeList = [];
-
-    limits.forEach((currentLimit) => {
-      currentLimit.walletTypes.forEach((walletType) => {
-        if (newWalletTypeList.indexOf(walletType) === -1) {
-          newWalletTypeList.push(walletType)
-        }
-      });
-    });
-
-    return newWalletTypeList.sort();
-  }
-
-  /**
-   * Retrieves the limit balance for a specific limit.
-   * 
-   * @param limit - The financial transaction representing the limit.
-   */
-  const getLimitBalanceById = async (limit: MonetaryLimitType): Promise<void>  => {
-    try {
-      isLoading = true;
-
-      const url = new URL(`${endpoint}/v1/player/${playerID}/limits/monetary/balance`);
-      url.searchParams.append('limitDefinitionId', limit.id);
-
-      const options = {
-        method: 'GET',
-        headers: {
-          'X-SessionId': sessionID,
-          'X-Session-Type': sessiontype,
-        }, 
-      };
-
-      const response = await fetch(url, options);
-      if (!response.ok) {
-        throw new Error($_('fetchLimitBalanceError'));
-      }
-
-      const responseData = await response.json();
-      setCurrentLimit(responseData.limitBalances[0], limit);
-    } catch (err) {
-      const errorMessage = err instanceof TypeError ? $_('invalidUrl') : err.message;
-      handleError(errorMessage);
-    } finally {
-      isLoading = false;
-    }
-  }
-
-  /**
-   * Sets the current limit based on the provided limit balance and financial transaction.
-   * 
-   * @param limitBalance - The limit balance information.
-   * @param limit - The financial transaction representing the limit.
-   */
-  const setCurrentLimit = (limitBalance: LimitDefinition, limit: MonetaryLimitType): void => {
-    selectedLimitPeriod = limitBalance.limitPeriod;
-    selectedProduct = limitBalance.limitProducts[0];
-    selectedWalletType = limitBalance.limitWalletTypes[0];
-
-    const limitSchedule = formatScheduleData(limit.id, limit.schedules);
-    displayedLimit = {
-      id: limit.id,
-      totalAmount: limitBalance.limitAmount,
-      spentAmount: limitBalance.spentBalance.amount.toFixed(2),
-      limitCurrency: limitBalance.limitCurrency,
-      remainingAmount: (limitBalance.limitAmount - limitBalance.spentBalance.amount).toFixed(2),
-      limitPeriod: limitBalance.limitPeriod,
-      limitProducts: selectedProduct,
-      from: limitBalance.from,
-      to: limitBalance.to,
-    };
-
-    if ( limitSchedule ) {
-      displayedLimit.formattedSchedule = limitSchedule;
-    }
-
-    setGauge(displayedLimit);
-  }
-
-  /**
-   * Formats schedule data for a specific limit definition.
-   * 
-   * @param limitDefinitionId - The ID of the limit definition.
-   * @param scheduleData - The schedule data to be formatted.
-   * @returns The formatted limit schedule.
-   */
-  const formatScheduleData = (
-    limitDefinitionId: string,
-    scheduleData: ScheduleType[]
-  ):FormattedSchedule => {
-    const limitSchedule = scheduleData.find(schedule  => schedule.playerLimitId === limitDefinitionId);
-    return limitSchedule
-      ? {
-        updateAmount: limitSchedule.updateAmount,
-        expires: limitSchedule.applyAt,
-        expiresString: dateToReadableString(limitSchedule.applyAt),
-        id: limitSchedule.id,
-        isRemoved: limitSchedule.updateAmount < 1,
-        isUpdated: limitSchedule.updateAmount > 0
-      }
-      : {
-        updateAmount: '',
-        expires: '',
-        expiresString: '',
-        id: '',
-        isRemoved: false,
-        isUpdated: false
-      }
-  }
-
-  /**
-   * Converts the date to a human-readable string.
-   * 
-   * @param date - Date to convert.
-   */
-  const dateToReadableString = (date:string):string => {
-    const getUtc = getutctime === 'true';
-    return moment(date).utc(getUtc).format(datetimeformat || `DD/MM/YYYY HH:mm:ss`);
-  }
-
-  /**
-   * Sets the gauge value based on the provided limit information.
-   * 
-   * @param limit - The limit information to calculate the gauge value.
-   */
-  const setGauge = (limit:DisplayedLimit):void => {
-    // Calculate newGaugeValue within [0, 180]
-    let newGaugeValue = (180 / limit.totalAmount) * parseFloat(limit.spentAmount);
-    newGaugeValue = Math.min(180, Math.max(0, newGaugeValue));
-
-    const step = 1.5; // Step size for increasing/decreasing gaugeValue
-    const interval = setInterval(() => {
-      gaugeValue += (gaugeValue < newGaugeValue) ? step : -step;
-
-      if (Math.abs(gaugeValue - newGaugeValue) <= step) {
-        gaugeValue = newGaugeValue;
-        clearInterval(interval);
-      }
-    });
-
-    isGaugeLoading = false;
-  }
-
-  /**
-   * Get the widget translated title.
-   * 
-   * @param type - The type of limit
-   */
-  const getWidgetTitle = (type: string) => {
-    switch ( type ) {
-      case 'Deposit':
-        return $_('depositLimitHeader');
-      case 'Loss':
-        return $_('lossLimitHeader');
-      case 'Wagering':
-        return $_('wageringLimitHeader');
-      default:
-        return '';
-    }
-  }
-
-  /**
-   * Handles the change in the selected period.
-   * 
-   * @param event - The event object containing the target value.
-   */
-  const handlePeriodChange = (event: Event):void => {
-    const element = event.currentTarget as HTMLInputElement
-
-    selectedLimitPeriod = element.value;
-
-    limitWalletTypeList = getWalletTypeList(selectedLimitPeriod);    
-    if (!selectedWalletType || !limitWalletTypeList.includes(selectedWalletType)) {
-      selectedWalletType = limitWalletTypeList[0];
-    }
-    productList = getProductList(selectedLimitPeriod, selectedWalletType);
-
-    showDropdown = false;
-    
-    if (!productList.includes(selectedProduct)) {
-      selectedProduct = productList[0];
-    }
-    
-    const selectedLimit = limitDefinitionList.find((limit) => {
-      return limit.period === selectedLimitPeriod && limit.walletTypes[0] === selectedWalletType && limit.products.includes(selectedProduct);
-    });
-
-    if (!selectedLimit) {
-      return;
-    }
-
-    getLimitBalanceById(selectedLimit);
-  }
-
-  /**
-   * Handles the change in the selected wallet type.
-   * 
-   * @param event - The event object containing the target value.
-   */
-   const handleWalletTypeChange = (event: Event):void => {
-    const element = event.currentTarget as HTMLInputElement
-
-    selectedWalletType = element.value;
-    productList = getProductList(selectedLimitPeriod, selectedWalletType);
-    showDropdown = false;
-    
-    if (!productList.includes(selectedProduct)) {
-      selectedProduct = productList[0];
-    }
-    
-    const selectedLimit = limitDefinitionList.find((limit) => {
-      return limit.period === selectedLimitPeriod && limit.walletTypes[0] === selectedWalletType && limit.products.includes(selectedProduct);
-    });
-
-    if (!selectedLimit) {
-      return;
-    }
-
-    getLimitBalanceById(selectedLimit);
-  }
-
-  /**
-   * Handles the click event on the product buttons.
-   * 
-   * @param product - The selected product.
-   */
-  const handleProductChange = (product:string) => {
-
-    const selectedLimit = limitDefinitionList.find((limit) => {
-      return limit.period === selectedLimitPeriod && limit.products.includes(product);
-    });
-
-    displayedLimit.limitProducts = product;
-    showDropdown = false;
-
-    if (selectedLimit) {
-      getLimitBalanceById(selectedLimit);
-    }
-  }
-
-  /**
-   * 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:URL = new URL(clientstylingurl);
-      let cssFile:HTMLElement = 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 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: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);
-      });
-  }
-
-  /**
-   * Toggle gropdown.
-   */
-  const toggleDropdown = () => {
-    showDropdown = !showDropdown;
-  }
-
-  /**
-   * Format a number with a separator.
-   * 
-   * @param nb - Number to format
-   */
-  const formatWithSeparator = (nb:string|number):string => {
-    const separator = ' ';
-    return nb.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, separator);
-  }
-
-  /**
-   * Get the transactions url.
-   */
-  const getTransactionsUrl = ():string => {
-    const transactionUrl = transactionspageurl;
-    const page = selectedLimitType === 'Deposit' ? 'payment-transactions' : 'gaming-transactions';
-    const subtractMap = {
-      'Daily': 1,
-      'Weekly': 7,
-      'Monthly': 30
-    };
-    const filterStartDate = subtractDays(new Date(displayedLimit.to), subtractMap[selectedLimitPeriod]);
-
-    try {
-      const url = new URL(`${transactionUrl}/gammatrix/gmwi/${page}`);
-      url.searchParams.append('transStatuses', '2');
-      url.searchParams.append('startTime', filterStartDate.toISOString());
-      url.searchParams.append('endTime', new Date().toISOString());
-      url.searchParams.append('dateOption', 'Select custom dates');
-      url.searchParams.append('userId', userid);
-      switch (selectedLimitType) {
-        case 'Deposit':
-          url.searchParams.append('transTypes', '1');
-          break;
-        case 'Wagering':
-          url.searchParams.append('transTypes', '12');
-          break;
-        case 'Loss':
-          url.searchParams.append('transTypes', '8');
-          break;
-        default:
-          break;
-      }
-
-      return url.toString();
-    } catch (err) {
-      const errorMessage = err instanceof TypeError ? $_('invalidUrl') : err.message;
-      handleError(errorMessage);
-    }
-  }
-
-  /**
-   * Starting from a specific date, substract a number of days.
-   * 
-   * @param from - Start date.
-   * @param days - Number of days to substract.
-   */
-  const subtractDays = (from: Date, days:number) => {
-    return new Date(from.getTime() - (days * 24 * 60 * 60 * 1000));
-  }
-
-  /**
-   * Sets the session information upon login.
-   */
-  const initListeners = ():void => {
-    window.addEventListener('message', (e) => {
-      if (e.data.type === 'RGW:RefreshLimits') {
-        getLimitBalance();
-      }
-    });
-  }
-
-
-  /**
-   * Sends DOM event for opening edit limit modal.
-   *
-   */
-  const editLimit = ():void => {
-    window.postMessage({
-      type: 'RGW:EditLimit',
-      payload: {
-        id: displayedLimit.id
-      }
-    }, window.location.href)
-  }
-
-  /**
-   * Sends DOM event to cancel the limit
-   *
-   */
-  const deleteLimit = ():void => {
-    window.postMessage({
-      type: 'RGW:DeleteLimit',
-      payload: {
-        id: displayedLimit.id
-      }
-    }, window.location.href)
-  }
-
-  /**
-   * Sends DOM event to cancel the limit schedule
-   *
-   */
-  const cancelSchedule = ():void => {
-    if (displayedLimit && displayedLimit.formattedSchedule) {
-      window.postMessage({
-        type: 'RGW:CancelLimitSchedule',
-        payload: {
-          limitId: displayedLimit.id,
-          scheduleId: displayedLimit.formattedSchedule.id
-        }
-      }, window.location.href)
-    }
-  }
-
-  /**
-   * Sends DOM event to open add limit modal
-   *
-   */
-  const addLimit = ():void => {
-    window.postMessage({
-      type: 'RGW:AddNewLimit'
-    }, window.location.href)
-  }
-
-  $: isMounted && session && userid && setSession();
-  $: isMounted && isLoggedIn && initListeners();
-  $: isMounted && isLoggedIn && getLimitBalance();
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-  $: lang && setActiveLanguage();
-  $: translationurl && setTranslationUrl();
-</script>
-
-<div class={displayNone ? 'DisplayNone' : ''}>
-  <div class="LimitsContainer" bind:this={customStylingContainer}>
-    {#if noLimitToDisplay}
-      <div class="ContainerCenter">
-        <p>{$_('noLimitToDisplay')}</p>
-        {#if editlimitaction === 'true'}
-          <button class="AddLimitControl" title="{$_('addLimitTitle')}" on:click|stopPropagation={() => addLimit()}>
-             <span class="ActionsSvg">{@html plusIcon}</span>
-            <span>{$_('addLimitText')}</span>
-          </button>
-        {/if}
-      </div>
-    {:else if errorMessage}
-      <div class="ContainerCenter">
-        <strong class="ErrorMessage">{errorMessage}</strong>
-      </div>
-    {:else}
-      <div class="ContentLeft">
-        <h2 class="LimitTypeHeader">{@html curencyIcon}{getWidgetTitle(selectedLimitType)}</h2>
-        {#if isLoading}
-          <general-animation-loading clientstyling={clientstyling} clientstylingurl={clientstylingurl} />
-        {:else}
-          <div class="ProductSelector">
-            <div class="DisplayContainer">
-              <span class="SelectedProduct">{selectedProduct === 'All' ? `${selectedProduct} ${$_('walletsLabel')}` : `${selectedProduct} ${$_('walletLabel')}`}</span>
-              <span class="TotalAmount" title={`${formatWithSeparator(displayedLimit.totalAmount)} ${displayedLimit.limitCurrency}`}>{formatWithSeparator(displayedLimit.totalAmount)} <span class="Currency">{displayedLimit.limitCurrency}</span></span>
-              {#if productList.length > 1}
-                <button class="DropdownToggle {showDropdown ? 'Active' : ''}" on:click|stopPropagation={() => toggleDropdown()}>
-                  {@html caretSelect}
-                </button>
-              {/if}
-            </div>
-            <div class="ProductsDropdown {showDropdown ? 'Show' : ''}">
-              {#each productList as product}
-                  <button on:click={() => handleProductChange(product)}>
-                    {product === 'All' ? `${product} ${$_('walletsLabel')}`: `${product} ${$_('walletLabel')}`}
-                  </button>
-                {/each}
-            </div>
-          </div>
-          <div class="DetailsContainer Entries">
-            <div class="Row">
-              <div class="Col">{$_('spentAmount')}</div>
-              <div class="Col">
-                <span class="CaretRight">{@html caretRight}</span> {formatWithSeparator(displayedLimit.spentAmount)} {displayedLimit.limitCurrency}
-              </div>
-            </div>
-            <div class="Row">
-              <div class="Col">{$_('remainingAmount')}</div>
-              <div class="Col">
-                <span class="CaretRight">{@html caretRight}</span> {formatWithSeparator(displayedLimit.remainingAmount)} {displayedLimit.limitCurrency}
-              </div>
-            </div>
-            {#if displayedLimit.formattedSchedule.isUpdated === true}
-              <div class="Row">
-                <div class="Col">{$_('futureAmount')}</div>
-                <div class="Col">
-                  <span class="CaretRight">{@html caretRight}</span> {formatWithSeparator(displayedLimit.formattedSchedule.updateAmount)} {displayedLimit.limitCurrency}
-                </div>
-              </div>
-            {/if}
-            <div class="Row">
-              <div class="Col">{$_('startLabel')}</div>
-              <div class="Col">
-                <span class="CaretRight">{@html caretRight}</span> {dateToReadableString(displayedLimit.from)}
-              </div>
-            </div>
-            <div class="Row">
-              <div class="Col">{$_('resetLabel')}</div>
-              <div class="Col">
-                <span class="CaretRight">{@html caretRight}</span> {dateToReadableString(displayedLimit.to)}
-              </div>
-            </div>
-          </div>
-          {#if displayedLimit.formattedSchedule.isRemoved === true || displayedLimit.formattedSchedule.isUpdated === true }
-            <div class="ExtraInfoContainer">
-              {#if displayedLimit.formattedSchedule.isRemoved === true}
-                <span>{$_('limitRemoved')}: {displayedLimit.formattedSchedule.expiresString}</span>
-              {/if}
-              {#if displayedLimit.formattedSchedule.isUpdated === true}
-                <span>{$_('limitUpdated')}: {displayedLimit.formattedSchedule.expiresString}</span>
-              {/if}
-            </div>
-          {/if}
-          {#if sessiontype === 'admin'}
-            <div class="UsefulLinksSection">
-              {#if transdetailsurl}
-                <a href="{transdetailsurl}" target="_blank">{$_('additionalLink1')}</a>
-              {:else if transactionspageurl}
-                <a href="{getTransactionsUrl()}" target="_blank">{$_('additionalLink2')}</a>
-              {/if}
-            </div>
-          {/if}
-        {/if}
-      </div>
-      <div class="ContentRight">
-        <div class="WidgetControls">
-          {#if limitWalletTypeList.length > 0}
-            <div class="ControlContainer">
-              <label for="LimitPeriod">{$_('limitWalletTypeLabel')}: </label>
-              <select bind:value={selectedWalletType} id="WalletType" on:change={handleWalletTypeChange}>
-                {#each limitWalletTypeList as value}
-                  <option {value}>
-                    {walletTypeMap[value]}
-                  </option>
-                {/each}
-              </select>
-            </div>
-          {/if}
-          {#if limitPeriodList.length > 0}
-            <div class="ControlContainer">
-              <label for="LimitPeriod">{$_('changeLimitLabel')}: </label>
-              <select bind:value={selectedLimitPeriod} id="LimitPeriod" on:change={handlePeriodChange}>
-                {#each limitPeriodList as value}
-                  <option {value}>
-                    {value}
-                  </option>
-                {/each}
-              </select>
-            </div>
-          {/if}
-          {#if limitTypeList.length > 0}
-            <div class="ControlContainer">
-              <label for="LimitType">{$_('limitTypeLabel')}: </label>
-              <select bind:value={selectedLimitType} id="LimitType" on:change={getLimitBalance}>
-                {#each limitTypeList as value}
-                  <option {value}>
-                    {value}
-                  </option>
-                {/each}
-              </select>
-            </div>
-          {/if}
-          {#if limitTypeList.length > 0 && sessiontype === 'admin' && displayedLimit}
-            <div class="ControlContainer">
-              {#if editlimitaction === 'true'}
-                <button class="ActionButton" title="{$_('addLimitTitle')}" on:click|stopPropagation={() => addLimit()}>
-                  <span class="ActionsSvg">{@html plusIcon}</span>
-                </button>
-              {/if}
-              {#if editlimitaction === 'true'}
-                <button class="ActionButton" title="{$_('editLimitTitle')}" on:click|stopPropagation={() => editLimit()}>
-                  <span class="ActionsSvg">{@html pencilIcon}</span>
-                </button>
-              {/if}
-              {#if deletelimitaction === 'true'}
-                <button class="ActionButton" title="{$_('deleteLimitTitle')}" on:click|stopPropagation={() => deleteLimit()}>
-                  <span class="ActionsSvg">{@html timesIcon}</span>
-                </button>
-              {/if}
-              {#if cancelimitscheduleaction === 'true' && (displayedLimit.formattedSchedule && (displayedLimit.formattedSchedule.isRemoved === true || displayedLimit.formattedSchedule.isUpdated === true))}
-                <button class="ActionButton" title="{$_('cancelScheduleTitle')}" on:click|stopPropagation={() => cancelSchedule()}>
-                  <span class="ActionsSvg">{@html calendarIcon}</span>
-                </button>
-              {/if}
-            </div>
-          {/if}
-        </div>
-        {#if isGaugeLoading}
-          <general-animation-loading clientstyling={clientstyling} clientstylingurl={clientstylingurl} />
-        {:else}
-          <div class="Gauge">
-            <div class="GaugeBody">
-              <div class="Archbg">{@html archBgSvg}</div>
-              <div class="GaugeFill" style="--p:{gaugeValue}deg"></div>
-              <div class="GaugeCover" title={`${formatWithSeparator(displayedLimit.spentAmount)} ${displayedLimit.limitCurrency}`}>{formatWithSeparator(displayedLimit.spentAmount)} {displayedLimit.limitCurrency}</div>
-              <div class="GaugeNeedleCover"></div>
-              <div class="GaugeNeedle" style="--transform-needle-value: rotate({gaugeValue - 90}deg)"></div>
-            </div>
-            <div class="MinMaxContainer">
-              <div class="Min"> <strong class="MinContent">0</strong> <span class="MinContentCurrency">{displayedLimit.limitCurrency}</span></div>
-              <div class="Max"> <strong class="MaxContent">{formatWithSeparator(displayedLimit.totalAmount)}</strong> <span class="MaxContentCurrency">{displayedLimit.limitCurrency}</span></div>
-            </div>
-          </div>
-        {/if}
-      </div>
-    {/if}
-  </div>
-</div>
-
-
-<style lang="scss">
-  $primary-text-color: var(--emw--color-gray-150, #76768B);
-  $primary-color: var(--emw--color-primary, #307fe2);
-  $primary-gauge-fill-color: var(--emw--gauge-fill-bg, $primary-color);
-  $primary-contrast-color: var(--emw--color-contrast, #07072A);
-
-  *,
-  *::before,
-  *::after {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    text-decoration: none;
-    outline: none;
-    box-sizing: border-box;
-  }
-
-  .DisplayNone {
-    display: none;
-  }
-
-  .ContainerCenter {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    min-height: 219px;
-    p { padding: 6px; }
-  }
-
-  .ErrorMessage {
-    margin: 0 15px;
-    font-size: var(--emw--font-size-x-small, 12px);
-    color: var(--emw--color-error, var(--emw--color-red, #ed0909));
-  }
-
-  .LimitsContainer {
-    display: flex;
-    width: 100%;
-    max-width: 700px;
-    min-height: 150px;
-    border: 1px solid $primary-color;
-    border-radius: var(--emw--border-radius-large, 20px);
-    overflow: hidden;
-    box-shadow: 14px 26px 19.7px 0px $primary-text-color;
-    gap:25px;
-    padding: 25px;
-  }
-
-  .ContentLeft {
-    line-height: 20px;
-    flex:1;
-  }
-  
-  .LimitTypeHeader {
-    display: flex;
-    align-items: center;
-    color: $primary-text-color;
-    margin-bottom: 20px;
-    gap: 5px;
-  }
-
-  .DetailsContainer {
-    margin-bottom: 15px;
-    display: inline;
-    span {
-      font-weight: var(--emw--font-weight-bold, 700);
-    }
-  }
-
-  .CaretRight {
-    color: $primary-color;
-  }
-
-  .ContentRight {
-    min-width: 300px;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-  }
-
-  .ExtraInfoContainer {
-    padding: 1rem 0;
-    color: var(--emfe-w-color-red, #ed0909);
-  }
-
-  .UsefulLinksSection {
-    padding-top: 5px;
-    a {
-      color: $primary-color;
-      text-decoration: underline;
-    }
-  }
-
-  .AddLimitControl {
-    border: 0.1rem solid $primary-color;
-    border-radius: var(--emw--border-radius-small, 0.3rem);
-    min-height: 1rem;
-    color: var(--emw--color-white, #FFFFFF);
-    background: $primary-color;
-    padding: 0.3rem;
-    cursor: pointer;
-    min-width: 10rem;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .WidgetControls {
-    display: flex;
-    width: 100%;
-    justify-content: end;
-    gap: 10px;
-  }
-
-  .ControlContainer {
-    label {
-      display: block;
-      width: 100%;
-      font-size: var(--emw--font-size-x-small, 12px);
-      font-weight: var(--emw--font-weight-bold, 700);
-      margin-bottom: 5px;
-    }
-    button {
-      padding: 5px;
-      border: 1px solid $primary-contrast-color;
-      border-radius: var(--emw--border-radius-small, 5px);
-      width: 25px;
-        cursor: pointer;
-      display: flex;
-      flex-direction: column;
-      margin-bottom: 4px;
-    }
-
-    select {
-      max-width: 100px;
-    }
-
-    .ActionsSvg  {
-      height: 1em;
-      width: 1em;
-      display: flex;
-      justify-content: center;
-      cursor: pointer;
-    }
-    }
-
-  .ControlContainer button {
-      padding: 5px;
-      border: 1px solid $primary-contrast-color;
-      border-radius: var(--emw--border-radius-small, 5px);
-      width: 25px;
-      cursor: pointer;
-      display: flex;
-      flex-direction: column;
-      margin-bottom: 4px;
-    }
-
-  .ControlContainer .ActionsSvg {
-      height: 1em;
-      width: 1em;
-      display: flex;
-      justify-content: center;
-      cursor: pointer;
-    }
-
-  .AddLimitControl .ActionsSvg {
-    height: 2em;
-    width: 2em;
-    display: flex;
-    justify-content: center;
-    cursor: pointer;
-    padding: 5px;
-    margin-right: 5px;
-    border: 1px solid $primary-contrast-color;
-    border-radius: var(--emw--border-radius-small, 4px);
-    background: var(--emw--color-white, #FFFFFF);
-  }
-
-  .Gauge {
-    width: 100%;
-    font-family: 'Roboto', sans-serif;
-    color: var(--emw--color-black, #000000);
-    margin: 1rem 0;
-    flex: 1;
-    align-content: center;
-  }
-
-  .GaugeBody {
-    width: 100%;
-    position: relative;
-    text-align: center;
-    padding: 23px;
-    padding-bottom: 0;
-  }
-
-  .Archbg {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-  }
-
-  .GaugeFill {
-    --p:0deg;
-    --b:26px;
-    border-radius:500px 500px 0 0;
-    background: $primary-gauge-fill-color;
-    mask: radial-gradient(farthest-side at bottom,transparent calc(100% - var(--b) - 1px),#fff calc(100% - var(--b))), linear-gradient(var(--p),#fff 50%,transparent 0) top/100% 200%;
-    -webkit-mask: radial-gradient(farthest-side at bottom,transparent calc(100% - var(--b) - 1px),#fff calc(100% - var(--b))), linear-gradient(var(--p),#fff 50%,transparent 0) top/100% 200%;
-    mask-composite:intersect;
-    -webkit-mask-composite:destination-in;
-  }
-  
-  .GaugeFill::before {
-    content:"";
-    display:block;
-    padding-top:50%;
-  }
-
-  .GaugeCover {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    top: 50%;
-    font-size: var(--emw--font-size-large, 18px);
-    white-space: nowrap;
-    width: 130px;
-    max-width: 200px;
-    overflow-x: auto;
-    overflow-y: hidden;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-
-  .GaugeNeedle {
-    width: 0.2rem;
-    height: 3.5rem;
-    background: linear-gradient(0deg, #000000 0, #000000 55%, #c5c5c5 55%, #c5c5c5 90%, #000000 90%, #000000 100%);
-    display: inline-block;
-    left: 49.5%;
-    position: absolute;
-    bottom: 0.1rem;
-    transform: var(--transform-needle-value);
-    transform-origin: bottom;
-  }
-
-  .GaugeNeedleCover {
-    width: 60px;
-    height: 30px;
-    border-radius: 150px 150px 0 0;
-    background: var(--emw--color-black, #000000);
-    background: radial-gradient(circle at 50% 100%, var(--emw--color-black, #000000) 0%, var(--emw--color-black, #000000) 25%, #fff 25%, #fff 40%, $primary-color 40%);
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    border: 4px solid var(--emw--color-white, #FFFFFF);
-    border-bottom: 0;
-    transform: translateX(-50%);
-  }
-
-  .MinMaxContainer {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 10px;
-  }
-
-  .ProductSelector {
-    position: relative;
-    margin-bottom: 20px;
-  }
-
-  .DisplayContainer {
-    border: 1px solid $primary-color;
-    background-color: var(--emw--color-gray-100, #f5f5f5);
-    border-radius: var(--emw--border-radius-medium, 12px);
-    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    padding: 9px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    color: $primary-contrast-color;
-    gap: 5px;
-    margin-top: 20px;
-  }
-
-  .SelectedProduct {
-    font-weight: var(--emw--font-weight-bold, 700);
-    text-align: center;
-    width: 70px;
-    color: $primary-text-color;
-  }
-
-  .TotalAmount {
-    font-size: var(--emw--font-size-2x-large, 36px);
-    align-items: baseline;
-    gap: 5px;
-    overflow-x: auto;
-    overflow-y: hidden;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-    line-height: normal;
-    justify-content: center;
-    white-space: nowrap;
-    max-width: 188px;
-    flex: 1;
-    text-align: center;
-    .Currency {
-      font-size: var(--emw--font-size-x-large, 24px);
-    }
-  }
-
-  .TotalAmount {
-    &::-webkit-scrollbar{
-      display: none;
-    }
-  }
-
-
-  .ProductsDropdown{
-    display: none;
-    position: absolute;
-    background-color: var(--emw--color-gray-100, #f5f5f5);
-    width: 100%;
-    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
-    z-index: 1;
-    border: 1px solid $primary-color;
-    &.Show {
-      display: block;
-      border-radius: var(--emw--border-radius-medium, 12px);
-    }
-
-    button {
-      background-color: transparent;
-      border: none;
-      outline: none;
-      cursor: pointer;
-      padding: 10px;
-      width: 100%;
-      text-align: left;
-      font-weight: var(--emw--font-weight-bold, 700);
-      &:hover{
-        border-radius: var(--emw--border-radius-medium, 10px);
-        background-color: $primary-color;
-        color: var(--emw--color-white, #FFFFFF);
-      }
-    }
-  }
-
-  .DropdownToggle{
-    width: 35px;
-    height: 35px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: $primary-color;
-    line-height: 0;
-    &.Active {
-      transform: rotate(90deg);
-    }
-  }
-
-  .Row {
-    display: flex;
-  }
-
-  .Col {
-    flex: 1;
-  }
-</style>