@everymatrix/player-rglimits 1.28.3 → 1.28.5

package/src/PlayerRglimits.svelte

@@ -4,9 +4,12 @@
   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 faCaretRightSvg from './images/fa-caret-right.svg';
   import faDollarCircleSvg from './images/usd-circle.svg';
+  import archBgSvg from './images/arch-bg.svg';
+
   import '@everymatrix/general-animation-loading'
 
   export let session: string = '';
@@ -32,21 +35,21 @@
   let isGaugeLoading: boolean = true;
   let noLimitToDisplay:boolean;
 
-  let multipleDepositLimits:boolean = false;
-  let displayedLimit:Object = {
+  let displayedLimit:DisplayedLimit = {
+    totalAmount: null,
     spentAmount: '',
     limitCurrency: 'EUR',
     remainingAmount: '',
-    limitType: '',
-    limitProducts: []
+    limitPeriod: '',
+    limitProducts: ''
   };
-  let limitPeriodList:Array<any> = [];
+  let limitPeriodList:Array<string> = [];
+  let limitTypeList:Array<string> = [];
   let selectedLimitPeriod:string = '';
-  let limitDefinitionList:Array<any> = [];
+  let selectedLimitType:string = '';
+  let limitDefinitionList:Array<MonetaryLimitType> = [];
 
   let gaugeValue:number = 0;
-  let gaugeNeedleValue:number = 0.750;
-  let totalSpentPerc:number = 0.00;
 
   let errorMessage:string = '';
 
@@ -54,175 +57,271 @@
     addNewMessages(item, TRANSLATIONS[item]);
   });
 
+  /**
+   * Sets the isMounted flag after a short delay when the component is first rendered.
+   */
+   onMount(() => {
+    setTimeout(() => {
+      isMounted = true;
+    }, 50)
+  })
+
+  /**
+   * Sets the session information upon login.
+   */
   const setSession = ():void => {
     isLoggedIn = true;
     sessionID = session;
     playerID = userid;
   }
 
-  const handleError = (error):void => {
+  /**
+   * Handles errors by updating the error message.
+   * @param error - The error message to be handled.
+   */
+  const handleError = (error:string):void => {
     errorMessage = error;
   }
 
-  const formatScheduleData = (limitDefinitionId:any, scheduleData:any):Object => {
-    const limitSchedule = scheduleData.find(x => x.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
+  /**
+   * 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) {
+      handleError(err.message);
+    } finally {
+      isLoading = false;
+    }
   }
 
-  const getLimitBalanceById = (limit:any):void => {
-    isLoading = true;
-    const queryParams:URLSearchParams = new URLSearchParams({limitDefinitionId: limit.id})
-    const url:URL = new URL(`${endpoint}/v1/player/${playerID}/limits/monetary/balance?${queryParams}`);
-    const options = {
-      method: 'GET',
-      headers: {
-        'X-SessionId': sessionID,
-        'X-Session-Type': sessiontype,
-      }
+  /**
+   * 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 '';
     }
-    fetch(url, options)
-      .then((res:any) => res.json())
-      .then((res) => {
-        if (res && res.error) {
-          throw new Error(res.error);
-        }
-        setCurrentLimit(res.limitBalances[0], limit);
-      })
-      .catch((err) => {
-        handleError(err)
-      }).finally(() => {
-        isLoading = false;
-      })
   }
 
-  const getLimitDefinitions = ():Promise<void> => {
-    return new Promise((resolve, reject) => {
-      const url:URL = new URL(`${endpoint}/v1/player/${playerID}/limits/monetary/`);
+  /**
+   * 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'));
       }
-      fetch(url, options)
-        .then((res:any) => res.json())
-        .then((res:any) => {
-          if (res && res.error) {
-            return reject(res.error);
-          }
-          return resolve(res.limits.length > 0 ? res.limits.filter((item:any) => item.type === 'Deposit') : []);
-        })
-        .catch((err) => {
-          return reject(err);
-        })
-    })
-  }
 
+      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) {
+      throw err;
+    }
+  };
+
+  /**
+   * Handles the change in the selected period.
+   */
   const handlePeriodChange = ():void => {
-    let selectedLimit = limitDefinitionList.find((limit) => `${limit.period} - ${limit.products[0]}` === selectedLimitPeriod)
+    let selectedLimit = limitDefinitionList.find((limit) => `${limit.period} - ${limit.products[0]}` === selectedLimitPeriod);
     getLimitBalanceById(selectedLimit);
   }
 
-  const getLimitBalance = ():void => {
-    getLimitDefinitions().then((depositLimitsDefinitionsData) => {
-      limitDefinitionList = depositLimitsDefinitionsData;
+  /**
+   * 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> => {
+    try {
+      limitDefinitionList = await getLimitDefinitions();
+      
       if (limitDefinitionList.length === 0) {
         isLoading = false;
         noLimitToDisplay = true;
         return;
       }
 
-      if (limitDefinitionList.length > 1) {
-        const timeMap = {
-          'Daily': 0,
-          'Weekly': 1,
-          'Monthly': 2
-        }
-
-        limitDefinitionList.forEach((limit) => {
-          if (limitPeriodList.indexOf(`${limit.period} - ${limit.products[0]}`) === -1) {
-            limitPeriodList.push(`${limit.period} - ${limit.products[0]}`)
-          }
-        })
+      limitPeriodList = [];
 
-        multipleDepositLimits = true;
-        limitPeriodList = limitPeriodList.sort((a, b) => {
-          return timeMap[a.split(' ')[0]] - timeMap[b.split(' ')[0]];
-        });
+      const timeMap = {
+        'Daily': 0,
+        'Weekly': 1,
+        'Monthly': 2
       }
 
+      limitDefinitionList.forEach((limit) => {
+        if (limitPeriodList.indexOf(`${limit.period} - ${limit.products[0]}`) === -1) {
+          limitPeriodList.push(`${limit.period} - ${limit.products[0]}`)
+        }
+      })
+
+      limitPeriodList = limitPeriodList.sort((a, b) => {
+        return timeMap[a.split(' ')[0]] - timeMap[b.split(' ')[0]];
+      });
+      
       getLimitBalanceById(limitDefinitionList[0]);
-    }, (err) => {
+    } catch ( err ) {
       isLoading = false;
-      handleError(err)
-    })
+      handleError(err.message);
+      return;
+    }
   }
 
+  /**
+   * Converts the date to a human-readable string
+   * @param date - Date to convert.
+   */
   const dateToReadableString = (date:string):string => {
     return moment(date).utc(true).format(datetimeformat || `DD/MM/YYYY HH:mm:ss`);
   }
 
-  const setCurrentLimit = (limitBalance:any, limit:any):void => {
+  /**
+   * 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} - ${limitBalance.limitProducts[0]}`;
+
     const limitSchedule = formatScheduleData(limit.id, limit.schedules);
 
-    displayedLimit = Object.assign({
-      totalAmount: limitBalance.limitAmount,
-      spentAmount: parseFloat(limitBalance.spentBalance.amount).toFixed(2),
-      limitCurrency: limitBalance.limitCurrency,
-      remainingAmount: parseFloat(limitBalance.limitAmount - limitBalance.spentBalance.amount).toFixed(2),
-      limitPeriod: limitBalance.limitPeriod,
-      limitProducts: limitBalance.limitProducts[0],
-      product: limitBalance.limitWalletTypes
-    }, limitSchedule)
+    displayedLimit = {
+        totalAmount: limitBalance.limitAmount,
+        spentAmount: limitBalance.spentBalance.amount.toFixed(2),
+        limitCurrency: limitBalance.limitCurrency,
+        remainingAmount: (limitBalance.limitAmount - limitBalance.spentBalance.amount).toFixed(2),
+        limitPeriod: limitBalance.limitPeriod,
+        limitProducts: limitBalance.limitProducts[0],
+    };
+
+    if ( limitSchedule ) {
+      displayedLimit.formattedSchedule = limitSchedule;
+    }
 
     setGauge(displayedLimit);
   }
 
-  const setGauge = (limit:any):void => {
-    let maxValueGauge = 0.50;
-    let maxValueNeedle = 1.250;
-    totalSpentPerc = 0.00;
-    totalSpentPerc = (limit.spentAmount * 100) / limit.totalAmount;
-    totalSpentPerc = parseFloat(totalSpentPerc).toFixed(2);
-    let spentAmountPerc = (limit.spentAmount * maxValueGauge) / limit.totalAmount;
-    gaugeValue = Number(parseFloat(spentAmountPerc).toFixed(3));
-    gaugeValue = gaugeValue > maxValueGauge ? maxValueGauge : gaugeValue;
-    gaugeNeedleValue = 0.750;
-    gaugeNeedleValue = Number(parseFloat(spentAmountPerc + gaugeNeedleValue).toFixed(3));
-    gaugeNeedleValue = gaugeNeedleValue > maxValueNeedle ? maxValueNeedle : gaugeNeedleValue;
+  /**
+   * 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 => {
+    const newGaugeValue = (180 / limit.totalAmount) * parseFloat(limit.spentAmount);
+    const step = 1.5; // Step size for increasing/decreasing gaugeValue
+    const interval = setInterval(() => {
+      if (Math.abs(gaugeValue - newGaugeValue) < step) {
+        gaugeValue = newGaugeValue;
+        clearInterval(interval);
+      } else {
+        gaugeValue += (gaugeValue < newGaugeValue) ? step : -step;
+      }
+
+      // Boundary checks to ensure gaugeValue stays within [0, 180]
+      gaugeValue = Math.min(180, Math.max(0, gaugeValue));
+      
+      if (gaugeValue === newGaugeValue) {
+        clearInterval(interval);
+      }
+    });
+
     isGaugeLoading = false;
   }
 
-  onMount(() => {
-    setTimeout(() => {
-      isMounted = true;
-    }, 50)
-  })
-
+  /**
+   * 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
+      }
+  }
+  
+  /**
+   * 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 => {
     displayNone = true;
 
@@ -239,10 +338,16 @@
       });
   }
 
+  /**
+   * 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);
 
@@ -264,96 +369,116 @@
   $: translationurl && setTranslationUrl();
 </script>
 
-
-<div class="LimitsContainer" bind:this={customStylingContainer}>
-  {#if noLimitToDisplay}
-    <p>{$_('noLimitToDisplay')}</p>
-  {:else if errorMessage}
-    <strong class="ErrorMessage">{errorMessage}</strong>
-  {:else}
-    <div class="ContentLeft">
-      <h2 class="LimitTypeHeader"><img class="HeaderIcon" alt="user" src="{faDollarCircleSvg}" /> Deposit limit</h2>
-      {#if isLoading}
-        <general-animation-loading clientstyling={clientstyling} clientstylingurl={clientstylingurl} />
-      {:else}
-        <div class="DetailsContainer Entries">
-          <span>{$_('spentAmount')}: </span>
-          <span>{$_('remainingAmount')}: </span>
-          {#if displayedLimit.isUpdated === true}
-            <span>{$_('futureAmount')}: </span>
-          {/if}
-          <span>{$_('limitPeriod')}: </span>
-          <span>{$_('displayedProduct')}: </span>
-        </div>
-        <div class="TextContainer">
-          <p><img class="TextIcon" alt="user" src="{faCaretRightSvg}" /> {displayedLimit.spentAmount} {displayedLimit.limitCurrency}</p>
-          <p><img class="TextIcon" alt="user" src="{faCaretRightSvg}" /> {displayedLimit.remainingAmount} {displayedLimit.limitCurrency}</p>
-          {#if displayedLimit.isUpdated === true}
-            <p><img class="TextIcon" alt="user" src="{faCaretRightSvg}" /> {displayedLimit.updateAmount} {displayedLimit.limitCurrency} </p>
-          {/if}
-          <p><img class="TextIcon" alt="user" src="{faCaretRightSvg}" /> {displayedLimit.limitPeriod}</p>
-          <p><img class="TextIcon" alt="user" src="{faCaretRightSvg}" /> {displayedLimit.limitProducts}</p>
-        </div>
-        {#if displayedLimit.isRemoved === true || displayedLimit.isUpdated === true }
-          <div class="ExtraInfoContainer">
-            {#if displayedLimit.isRemoved === true}
-              <span>{$_('limitRemoved')}: {displayedLimit.expiresString}</span>
-            {/if}
-            {#if displayedLimit.isUpdated === true}
-              <span>{$_('limitUpdated')}: {displayedLimit.expiresString}</span>
+<div class={displayNone ? 'DisplayNone' : ''}>
+  <div class="LimitsContainer" bind:this={customStylingContainer}>
+    {#if noLimitToDisplay}
+      <div class="ContainerCenter">
+        <p>{$_('noLimitToDisplay')}</p>
+      </div>
+    {:else if errorMessage}
+      <div class="ContainerCenter">
+        <strong class="ErrorMessage">{errorMessage}</strong>
+      </div>
+    {:else}
+      <div class="ContentLeft">
+        <h2 class="LimitTypeHeader"><img class="HeaderIcon" alt="user" src="{faDollarCircleSvg}" />{getWidgetTitle(selectedLimitType)}</h2>
+        {#if isLoading}
+          <general-animation-loading clientstyling={clientstyling} clientstylingurl={clientstylingurl} />
+        {:else}
+          <div class="DetailsContainer Entries">
+            <span>{$_('spentAmount')}: </span>
+            <span>{$_('remainingAmount')}: </span>
+            {#if displayedLimit.formattedSchedule.isUpdated === true}
+              <span>{$_('futureAmount')}: </span>
             {/if}
+            <span>{$_('limitPeriod')}: </span>
+            <span>{$_('displayedProduct')}: </span>
           </div>
-        {/if}
-        {#if sessiontype === 'admin'}
-          <div class="UsefulLinksSection">
-            {#if transdetailsurl}
-              <a href="{transdetailsurl}" target="_blank">{$_('additionalLink1')}</a>
-            {:else if transactionspageurl}
-              <a href="{transactionspageurl}" target="_blank">{$_('additionalLink2')}</a>
+          <div class="TextContainer">
+            <p><img class="TextIcon" alt="user" src="{faCaretRightSvg}" /> {displayedLimit.spentAmount} {displayedLimit.limitCurrency}</p>
+            <p><img class="TextIcon" alt="user" src="{faCaretRightSvg}" /> {displayedLimit.remainingAmount} {displayedLimit.limitCurrency}</p>
+            {#if displayedLimit.formattedSchedule.isUpdated === true}
+              <p><img class="TextIcon" alt="user" src="{faCaretRightSvg}" /> {displayedLimit.formattedSchedule.updateAmount} {displayedLimit.limitCurrency} </p>
             {/if}
+            <p><img class="TextIcon" alt="user" src="{faCaretRightSvg}" /> {displayedLimit.limitPeriod}</p>
+            <p><img class="TextIcon" alt="user" src="{faCaretRightSvg}" /> {displayedLimit.limitProducts}</p>
           </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="{transactionspageurl}" target="_blank">{$_('additionalLink2')}</a>
+              {/if}
+            </div>
+          {/if}
         {/if}
-      {/if}
-      {#if multipleDepositLimits}
-        <div class="MultipleSelectContainer">
-          <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 class="WidgetFooterControls">
+          {#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}
         </div>
-      {/if}
-    </div>
-    <div class="ContentRight">
-      {#if isGaugeLoading}
-        <general-animation-loading clientstyling={clientstyling} clientstylingurl={clientstylingurl} />
-      {:else}
-        <div class="AmountContainer">{displayedLimit.totalAmount} {displayedLimit.limitCurrency}</div>
-        <div class="Gauge">
-          <div class="GaugeBody">
-            <div class="GaugeFill" style="--transform-value: rotate({gaugeValue}turn)"></div>
-            <div class="GaugeCover">{displayedLimit.spentAmount} {displayedLimit.limitCurrency}</div>
-            <div class="GaugeCoverMin"></div>
-            <div class="GaugeNeedleCover"></div>
-            <div class="GaugeNeedle" style="--transform-needle-value: rotate({gaugeNeedleValue}turn)"></div>
+      </div>
+      <div class="ContentRight">
+        {#if isGaugeLoading}
+          <general-animation-loading clientstyling={clientstyling} clientstylingurl={clientstylingurl} />
+        {:else}
+          <div class="AmountContainer">{displayedLimit.totalAmount} {displayedLimit.limitCurrency}</div>
+          <div class="Gauge">
+            <div class="GaugeBody">
+              <img class="Archbg" src="{archBgSvg}" alt="arch"/>
+              <div class="GaugeFill" style="--p:{gaugeValue}deg"></div>
+              <div class="GaugeCover">{displayedLimit.spentAmount} {displayedLimit.limitCurrency}</div>
+              <div class="GaugeNeedleCover"></div>
+              <div class="GaugeNeedle" style="--transform-needle-value: rotate({gaugeValue - 90}deg)"></div>
+            </div>
           </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">{displayedLimit.totalAmount}</strong> <span class="MaxContentCurrency">{displayedLimit.limitCurrency}</span></div>
-        </div>
-      {/if}
-    </div>
-  {/if}
+          <div class="MinMaxContainer">
+            <div class="Min"> <strong class="MinContent">0</strong> <span class="MinContentCurrency">{displayedLimit.limitCurrency}</span></div>
+            <div class="Max"> <strong class="MaxContent">{displayedLimit.totalAmount}</strong> <span class="MaxContentCurrency">{displayedLimit.limitCurrency}</span></div>
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </div>
 </div>
 
 
 <style lang="scss">
   $primary-text-color: var(--emw--color-gray-150, #a9b6ce);
-  $primary-gauge-fill-color: var(--emw--color-primary, #D0046C);
+  $primary-color: var(--emw--color-primary, #D0046C);
+  $primary-gauge-fill-color: var(--emw--gauge-fill-bg, $primary-color);
   $secondary-gauge-background-color: var(--emw--color-gray-100, #E6E6E6);
   $primary-contrast-color: var(--emw--color-contrast, #07072A);
 
@@ -368,6 +493,18 @@
     box-sizing: border-box;
   }
 
+  .DisplayNone {
+    display: none;
+  }
+
+  .ContainerCenter {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 219px;
+  }
+
   .ErrorMessage {
     margin: 0 15px;
     font-size: 12px;
@@ -383,18 +520,47 @@
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0.6em 0.6em 0.4em $primary-text-color;
+  }
 
-    @container (max-width: 720px) {
-      max-width: 355px;
+  .ContentLeft {
+    padding: 1rem;
+    width: 318px;
+    line-height: 20px;
+  }
+  
+  .LimitTypeHeader {
+    display: flex;
+    align-items: center;
+    color: $primary-text-color;
+    margin-bottom: 20px;
+    gap: 5px;
+  }
+
+  .HeaderIcon {
+    height: 20px;
+    width: 20px;
+    color: $primary-text-color;
+  }
+
+  .DetailsContainer {
+    margin-bottom: 15px;
+    display: inline;
+    span {
+      float: left;
+      clear: both;
     }
   }
-  .ContentLeft { padding: 1rem; width: 318px; line-height: 20px; }
-  .LimitTypeHeader { color: $primary-text-color; margin-bottom: 20px; max-width: 225px; }
-  .HeaderIcon { height: 20px; width: 20px; color: $primary-text-color; }
-  .DetailsContainer { margin-bottom: 15px; display: inline;
-    span { float: left; clear: both; }
+
+  .ContentRight {
+    min-width: 300px;
+    padding: 1rem;
+    display: flex;
+    justify-content:
+    center;
+    flex-direction:
+    column;
   }
-  .ContentRight { min-width: 300px; padding: 1rem; display: flex; justify-content: center; flex-direction: column; }
+
   .AmountContainer {
     padding: 0.3rem;
     font-size: xx-large;
@@ -404,91 +570,91 @@
     box-shadow: 0.16em 0.16em 0.1em var(--emw--color-gray-150, #a9b6ce);
     background-color: #F5F5F5;
   }
-  .TextContainer { display: inline-block; padding-left: 5px;
-    p { width: 100%; display: block; clear: both; font-weight: bold; }
+
+  .TextContainer {
+    display: inline-block;
+    padding-left: 5px;
+    p { 
+      width: 100%;
+      display: block;
+      clear: both;
+      font-weight: bold;
+    }
+  }
+
+  .ExtraInfoContainer { 
+    padding: 1rem 0; 
+    color: var(--emfe-w-color-red, #ed0909);
+  }
+
+  .UsefulLinksSection { 
+    padding-top: 5px;
+    a { 
+      float: left; 
+      clear: both; 
+      color: $primary-contrast-color;
+    }
   }
-  .ExtraInfoContainer { padding: 1rem 0; color: var(--emfe-w-color-red, #ed0909); }
-  .UsefulLinksSection { padding-top: 5px;
-    a { float: left; clear: both; color: $primary-contrast-color; }
+  
+  .WidgetFooterControls {
+    display: flex;
   }
-  .MultipleSelectContainer { float: left; padding-top: 1rem; clear: both;
-    label { float: left; padding-right: 5px; }
-    select { float: right; background: $primary-text-color; border-radius: 5px; margin: 2px }
+
+  .ControlContainer {
+    label {
+      display: inline-block;
+      width: 100%;
+      font-size: 12px;
+      font-weight: bold;
+    }
   }
-  .TextIcon { color: $primary-gauge-fill-color; }
+  .TextIcon { color: $primary-color; }
 
   .Gauge {
     width: 100%;
     font-family: 'Roboto', sans-serif;
     font-size: 32px;
     color: black;
-    margin-top: 1rem;
+    margin: 1rem 0;
   }
 
   .GaugeBody {
     width: 100%;
-    height: 0;
-    padding-bottom: 50%;
-    background: $secondary-gauge-background-color;
     position: relative;
-    border-top-left-radius: 100% 200%;
-    border-top-right-radius: 100% 200%;
-    overflow: hidden;
-  }
-
-  .GaugeFill {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: inherit;
-    height: 100%;
-    background: $primary-gauge-fill-color;
-    transform-origin: center top;
-    transform: var(--transform-value);
-    transition: transform 0.2s ease-out;
+    text-align: center;
+    padding: 23px;
+    padding-bottom: 0;
   }
 
-  .GaugeCover {
-    width: 75%;
-    height: 150%;
-    background: var(--emw--color-white, #FFFFFF);
+  .Archbg {
     position: absolute;
-    border-radius: 50%;
-    top: 25%;
-    left: 50%;
-    transform: translateX(-50%);
-
-    //Text
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-bottom: 47%;
-    box-sizing: border-box;
-    font-size: 20px;
+    right: 0;
+    bottom: 0;
   }
 
-  .GaugeCoverMin {
-    width: 50px;
-    height: 50px;
+  .GaugeFill {
+    --p:0deg;
+    --b:25px;
+    border-radius:500px 500px 0 0;
     background: $primary-gauge-fill-color;
-    position: relative;
-    top: 6.7rem;
-    left: 50%;
-    border-radius: 50%;
-    transform: translateX(-50%);
+    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%;
   }
 
-  .GaugeNeedleCover {
-    width: 8%;
-    height: 16%;
-    background: var(--emw--color-black, #000000);
+  .GaugeCover {
     position: absolute;
-    top: 90%;
-    left: 50%;
-    border: 4px solid var(--emw--color-white, #FFFFFF);
-    border-radius: 50%;
-    transform: translateX(-50%);
-    transition: transform 0.2s ease-out;
+    left: 0;
+    right: 0;
+    top: 50%;
+    font-size: 20px;
   }
 
   .GaugeNeedle {
@@ -498,13 +664,27 @@
     display: inline-block;
     left: 49.5%;
     position: absolute;
-    bottom: 1%;
+    bottom: 0.1rem;
     transform: var(--transform-needle-value);
     transform-origin: bottom;
-    transition: transform 0.2s ease-out;
   }
 
-  .MinMaxContainer { }
-  .Min { width: 50%; float: left; }
-  .Max { width: 49%; float: right; text-align: right; }
+  .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;
+  }
 </style>