@everymatrix/cashier-method-details 1.44.0 → 1.45.0

package/src/CashierMethodDetails.svelte

@@ -1,1539 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { isMobile } from 'rvhelper';
-  import { _, addNewMessages, setupI18n, setLocale } from './i18n';
-  import { TRANSLATIONS } from './translations';
-
-  import '@everymatrix/cashier-iframe-redirect';
-  import '@everymatrix/cashier-receipt-page';
-  import '@everymatrix/cashier-confirm-modal';
-  import '@everymatrix/cashier-notifications';
-  import '@everymatrix/cashier-error';
-  import '@everymatrix/cashier-modal';
-  import flatpickr from "flatpickr";
-  import "flatpickr/dist/flatpickr.min.css";
-  import FlatpickrLanguages from "flatpickr/dist/l10n";
-  import dayjs from 'dayjs';
-  import utc from 'dayjs/plugin/utc';
-  dayjs.extend(utc);
-  import customParseFormat from 'dayjs/plugin/customParseFormat';
-  import type {DateTimeFormat, PaymentMethod} from "./CashierMethodDetails.types";
-  export class PaymentMethodDetails {
-    name: string;
-    label: string;
-    description: string;
-    type: FieldTypes;
-    defaultValue: any;
-    format: string;
-    placeholder: string;
-    displayPlaceholder?: string;
-    isReadonly: boolean;
-    isRequired: boolean;
-    isPrimaryField: boolean;
-    demandUserInput: boolean;
-    autoTrim: boolean;
-    maxValue: string;
-    minValue: string;
-    autoUppercase: boolean;
-    correlationFieldName: string;
-    correlationFieldValue: string[];
-    notEqualToFieldName: string;
-    values: any[];
-    selected: Object;
-    useCopyButton: boolean;
-    inputMask: string[];
-    tags: string;
-    constructor(element: any) {
-      this.correlationFieldName = element.CorrelationFieldName || null;
-      this.correlationFieldValue = element.CorrelationFieldValue && element.CorrelationFieldValue.length > 0 ?
-              element.CorrelationFieldValue.split(',') : [];
-      this.name = element.Name || null;
-      this.label = element.Label || null;
-      this.description = element.Description || null;
-      this.type = fieldTypeMap.get(element.Type) || null;
-      this.defaultValue = this.calcDefaultValue(element);
-      this.format = this.setPlaceholderOrFormat(element, FieldParams.Format);
-      this.placeholder = this.setPlaceholderOrFormat(element, FieldParams.Placeholder);
-      this.isReadonly = element.IsReadonly || false;
-      this.isRequired = element.IsRequired || false;
-      this.maxValue = this.setValue(element, FieldParams.MaxValue);
-      this.minValue = this.setValue(element, FieldParams.MinValue);
-      this.isPrimaryField = element.IsPrimaryField || false;
-      this.demandUserInput = element.DemandUserInput || false;
-      this.autoTrim = element.AutoTrim || false;
-      this.autoUppercase = element.AutoUppercase || false;
-      this.notEqualToFieldName = element.NotEqualToFieldName || null;
-      this.values = element.Values;
-      this.useCopyButton = element.UseCopyButton || false;
-      this.inputMask = element.InputMask;
-      this.tags = element.Tags || null;
-    }
-
-    calcDefaultValue(element) {
-      if (this.type === FieldTypes.Boolean) {
-        return element.DefaultValue === 'True';
-      } else if (defaultDateTimeFormatMap.has(element.Type)){
-        return this.setValue(element, FieldParams.DefaultValue)
-      } else {
-        return element.DefaultValue || null;
-      }
-    }
-    setPlaceholderOrFormat(element, paramsType) {
-      if (defaultDateTimeFormatMap.has(element.Type) && !dateTimeFormatsMap.get(element.Placeholder)) {
-        return defaultDateTimeFormatMap.get(element.Type)[paramsType];
-      } else {
-        return element[paramsType] || null;
-      }
-    }
-    setValue(element, paramsType: string): string | null {
-      if (defaultDateTimeFormatMap.has(element.Type) && !dateTimeFormatsMap.get(element.Placeholder)) {
-        return dayjs(element[paramsType], element.Placeholder).format(defaultDateTimeFormatMap.get(element.Type).Placeholder)
-      } else {
-        return element[paramsType] || null;
-      }
-    }
-    get descriptionWithLink(): string {
-      if ((FieldTypes[this.type] === 'Boolean' && this.placeholder) || (FieldTypes[this.type] === 'Link')) {
-        const regex = /{link}/i;
-        const link = this.placeholder || this.defaultValue;
-        const html = `<a href="${link}" target="_blank" rel="noopener noreferrer">${this.label}</a>`;
-        if (this.description.match(regex)) {
-          return this.description.replace(regex, html);
-        }
-        return `${this.description} ${html}`;
-      }
-      return this.description
-    }
-  }
-  const mapReducer = (arr, [keys, val]) => [
-    ...arr,
-    ...(Array.isArray(keys) ? [...keys.map(key => [key, val])] : [[keys, val]]
-    )
-  ];
-  enum TxnType {
-    Deposit='Deposit',
-    Withdraw='Withdraw'
-  }
-
-  enum ResponseCode {
-    PlayerSessionIsNotValid = 'PlayerSessionIsNotValid',
-    Success = 'Success',
-    JwtTokenError = 'JwtTokenError',
-    Maintenance = 'Maintenance'
-  }
-
-  const VISIBLE_FIELD_TYPES: string[] = 'Text,Number,Money,Boolean,Lookup,Date,Time,DateTime,Password,Label,Link,QRCode'.split(',');
-
-  enum RedirectionModeStringEnum {
-    Default = 'Default',
-    RedirectWithRetry = 'Redirect'
-  }
-
-  const redirectModeMap = new Map([
-    [['Default', 0], RedirectionModeStringEnum.Default],
-    [['Redirect', 1], RedirectionModeStringEnum.RedirectWithRetry]
-  ].reduce(mapReducer, []));
-
-  enum FieldTypes {
-    Unknown ='Unknown',
-    Text ='Text',
-    Boolean ='Boolean',
-    Number ='Number',
-    Money ='Money',
-    DateTime ='DateTime',
-    Lookup ='Lookup',
-    IpAddress ='IpAddress',
-    Date ='Date',
-    Time ='Time',
-    LookupCollection = 'LookupCollection',
-    Hidden = 'Hidden',
-    Label = 'Label',
-    Password = 'Password',
-    Link = 'Link',
-    Image = 'Image',
-    Html = 'Html',
-    QRCode = 'QR'
-  }
-
-  enum FieldParams {
-    MaxValue = 'MaxValue',
-    MinValue = 'MinValue',
-    DefaultValue = 'DefaultValue',
-    Placeholder = 'Placeholder',
-    Format = 'Format'
-  }
-
-  const defaultDateTimeFormatMap = new Map<FieldTypes, DateTimeFormat>([
-    [FieldTypes.Date, {Placeholder: 'MM/DD/YYYY', Format: '^\\d{2}\/\\d{2}\/\\d{4}$' }],
-    [FieldTypes.Time, { Placeholder: 'HH:mm', Format: '^\\d{2}:\\d{2}$' }],
-    [FieldTypes.DateTime, {Placeholder: 'MM/DD/YYYY HH:mm', Format: '^\\d{2}\/\\d{2}\/\\d{4} \\d{2}:\\d{2}$'}]
-  ]);
-  const dateTimeFormatsMap = new Map<string, string>([
-    ['MM/DD/YYYY HH:mm', 'm/d/Y H:i'],
-    ['DD.MM.YYYY HH:mm', 'd.m.Y H:i'],
-    ['YYYY-MM-DD',  'Y-m-d'],
-    ['MM/DD/YYYY',  'm/d/Y'],
-    ['DD/MM/YYYY',  'd/m/Y'],
-    ['YYYY.MM.DD',  'Y.m.d'],
-    ['HH:mm',  'H:i']
-  ]);
-  const fieldTypeMap = new Map([
-    [['Unknown', 0], FieldTypes.Unknown],
-    [['Text', 1], FieldTypes.Text],
-    [['Boolean', 2], FieldTypes.Boolean],
-    [['Number', 3], FieldTypes.Number],
-    [['Money', 4], FieldTypes.Money],
-    [['DateTime', 5], FieldTypes.DateTime],
-    [['Lookup', 6], FieldTypes.Lookup],
-    [['IpAddress', 7], FieldTypes.IpAddress],
-    [['Date', 8], FieldTypes.Date],
-    [['Time', 9], FieldTypes.Time],
-    [['LookupCollection', 10], FieldTypes.LookupCollection],
-    [['Hidden', 11], FieldTypes.Hidden],
-    [['Label', 12], FieldTypes.Label],
-    [['Password', 13], FieldTypes.Password],
-    [['Link', 14], FieldTypes.Link],
-    [['Image', 15], FieldTypes.Image],
-    [['Html', 19], FieldTypes.Html],
-    [['QR', 20], FieldTypes.QRCode]
-  ].reduce(mapReducer, []))
-  export let endpoint: string;
-  export let session: string;
-  export let playersession: string;
-  export let lang: string = 'en';
-  export let local: string = 'en-US';
-  export let translationurl: string;
-  export let customerid: string;
-  export let currency: string;
-  export let amount: string;
-  export let assetsurl: string;
-  export let type: string = TxnType.Deposit;
-  export let selectedpaymentmethodname: string;
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = ''
-  export let ismobileview:string
-
-  let xPaymentSessionToken: string;
-  let selectedPaymentMethod: PaymentMethod = {} as PaymentMethod;
-  let fields: PaymentMethodDetails[] = [];
-  let prepareFields = {};
-  let displayNone: boolean = false;
-  let customStylingContainer: HTMLElement;
-  let prepareRequest;
-  let showConfirmModal: boolean = false;
-  let showReceiptPage: boolean = false;
-  let redirectUrl: string;
-  let windowRedirect: Window;
-  let showRedirectNotification: boolean;
-  let redirectMode: RedirectionModeStringEnum;
-  let showRetryNotification: boolean;
-  let isProcessingTxn: boolean;
-  let isTranslationLoaded: boolean;
-  let openedLookup: string | null;
-  let clickedElem: HTMLElement;
-  let qrCodeContainer: HTMLElement[] = [];
-  let flatpickrEl: HTMLElement[] = [];
-  let qrCodeScriptSrc: string = 'https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js';
-  let blankPageTarget: string = '_blank';
-  let externalLink: string = '';
-  let mobileView: boolean = false;
-  let innerWidth: number;
-  let formatter = new Intl.NumberFormat(local, {minimumFractionDigits: 2 });
-  let amountError = '';
-  let showError = {};
-  let fieldValidation = {};
-  let openLookupTop = false;
-  let maxLookupHeight: number;
-  let editedAmount: number;
-  let errorResponseCode: string;
-  let isDisabled: boolean;
-  let showErrorModal = false;
-  let transactionId = '';
-  let showSpinner: boolean = false;
-  let abortController = new AbortController();
-
-  $: endpoint && session && selectedpaymentmethodname && currency && initMethod();
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-  $: lang && setActiveLanguage();
-  $: lang && translationurl && setTranslationUrl();
-  $: ismobileview && setDevice()
-  $: fields.length && qrCodeContainer.length && generateQr();
-  $: fields.length && flatpickrEl.length && createDatePicker();
-
-  const initMethod = () => {
-    if (flatpickrEl.length) {
-      flatpickrEl.forEach(el => {
-        if (!el) {
-          return;
-        }
-        flatpickr(el).destroy();
-      })
-    }
-    showReceiptPage = false;
-    showRetryNotification = false;
-    flatpickrEl = [];
-    fields = [];
-    prepareFields = {};
-    showError = {};
-    fieldValidation = {};
-    qrCodeContainer = [];
-    selectedPaymentMethod = null;
-    errorResponseCode = '';
-    showErrorModal = false;
-    showSpinner = true;
-    setErrorResponseCode();
-    getPaymentDetails();
-  }
-
-  const setDevice = () => {
-    mobileView = ismobileview === 'true';
-  }
-
-  const generateQr = () => {
-    qrCodeContainer.forEach(elem => {
-      if (elem && elem.innerText) {
-        const url = elem.innerText
-        elem.innerText = ''
-        new QRCode(elem,  {
-          text: url,
-          width: 250,
-          height: 250,
-        });
-      }
-    })
-  }
-
-  const reinitMethod = (e) => {
-    if (abortController?.signal?.aborted && selectedpaymentmethodname === e.detail.Name) {
-      initMethod()
-    }
-  }
-
-  const createDatePicker = () => {
-    const dateOptions = {
-      [FieldTypes.Time]: {
-        noCalendar: true,
-        enableTime: true,
-        allowInput: true
-      },
-      [FieldTypes.Date]: {
-        allowInput: true,
-        locale: {...FlatpickrLanguages[lang]}
-      },
-      [FieldTypes.DateTime]: {
-        allowInput: true,
-        enableTime: true,
-        locale: {...FlatpickrLanguages[lang]}
-      }
-    }
-    flatpickrEl.forEach((el) => {
-      if(!el) {
-        return;
-      }
-      const field = JSON.parse(el.dataset.field);
-      const dateFormat = dateTimeFormatsMap.get(field.placeholder);
-      const timeformat = field.type === FieldTypes.DateTime ? dateTimeFormatsMap.get(field.placeholder.split(' ')[1]) : dateFormat;
-      flatpickr(el, {...dateOptions[field.type], dateFormat: dateFormat, time_24hr: timeformat === 'H:i', maxDate: field.maxValue, minDate: field.minValue, defaultDate: field.defaultValue,
-        onReady: (selectedDates, dateStr) => {
-            prepareFields[field.name] = dateStr;
-            dateTimeValidation(field);
-        },
-        onClose: (selectedDates, dateStr, instance) => {
-          if(!fieldValidation[field.name]) {
-            prepareFields[field.name] = dateStr;
-          } else {
-            prepareFields[field.name] = '';
-          }
-        }
-      })
-    });
-  }
-
-  const setActiveLanguage = ():void => {
-    setLocale(lang);
-  }
-
-  const setTranslationUrl = () => {
-    let url:string = translationurl;
-    if (url) {
-      return  fetch(url).then((res:any) => res.json())
-              .then((res) => {
-                Object.keys(res).forEach((item:any):void => {
-                  addNewMessages(item, res[item]);
-                  isTranslationLoaded = true;
-                });
-              }).catch((err:any) => {
-                isTranslationLoaded = true;
-              });
-    }
-  }
-
-  Object.keys(TRANSLATIONS).forEach((item:any):void => {
-    addNewMessages(item, TRANSLATIONS[item]);
-  });
-
-  const getPaymentDetails = () => {
-    abortPaymentFetch();
-    abortController = new AbortController();
-    const signal = abortController.signal;
-    showSpinner = true;
-    const url:URL = new URL(`${endpoint}/v1/player/${customerid}/payment/GetPaymentMethod`);
-    const headers = new Headers();
-    headers.append("accept", "application/json");
-    headers.append("Content-Type", "application/json");
-    headers.append("X-Client-Request-Timestamp", dayjs.utc().format("YYYY-MM-DD HH:mm:ss.SSS"));
-    const requestParams:RequestInit = {
-      method: "POST",
-      mode: "cors",
-      headers: headers,
-      body: JSON.stringify({
-        "PaymentMethodName": selectedpaymentmethodname,
-        "Currency": currency,
-        "XPaymentSessionToken": session
-      })
-    }
-    fetch(url, requestParams).then(res => res.json()).then(data => {
-      if (!signal.aborted) {
-        if (data.error) {
-          window.postMessage({type: 'ShowSessionError', error: data.error}, window.location.href)
-          return;
-        }
-        if (data.ResponseCode === ResponseCode.PlayerSessionIsNotValid
-          || data.ResponseCode === ResponseCode.Maintenance
-          || data.ResponseCode === ResponseCode.JwtTokenError) {
-          errorResponseCode = data.ResponseCode;
-          setErrorResponseCode();
-          return;
-        }
-        if (data.ResponseCode !== ResponseCode.Success) {
-          errorResponseCode = data.ResponseCode;
-          return;
-        }
-        xPaymentSessionToken = data.XPaymentSessionToken;
-        selectedPaymentMethod = data.PaymentMethod;
-        editedAmount = Number(amount);
-        if (!selectedPaymentMethod.HideAmountField) {
-          validateAmount();
-        } else {
-          amountError = '';
-        }
-        fields = selectedPaymentMethod.Fields && selectedPaymentMethod.Fields.map(field => new PaymentMethodDetails(field));
-        fields.forEach(field => {
-          if (field?.defaultValue) {
-            prepareFields[field.name] = field.defaultValue;
-          }
-          validateField(field);
-        })
-        setConfirmModalInfo();
-        setErrorResponseCode();
-        hideMethodsList();
-        window.postMessage({
-          type: 'StartSessionCountdown',
-          xPaymentSessionToken,
-          selectedPaymentMethodName: selectedpaymentmethodname
-        }, window.location.href);
-      }
-    }).finally(() => { showSpinner = signal.aborted })
-  }
-
-  const abortPaymentFetch = ():void => {
-    if (abortController) {
-      abortController.abort();
-    }
-  }
-
-  const setClientStyling = ():void => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    customStylingContainer.appendChild(sheet);
-  }
-
-  const setClientStylingURL = ():void => {
-    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);
-            });
-  }
-
-  const messageHandler = (e:any) => {
-    if (e.data.type === 'ErrorResponseCode') {
-      errorResponseCode = e.data.errorResponseCode;
-      showReceiptPage = e.data.showErrorOutsideReceiptPage;
-    }
-    if (e.data.type === 'ReceiptLoaded') {
-      closeIframe()
-    }
-    if (e.data.type === 'BackCashier') {
-      backToMethodList()
-    }
-    if (e.data.type === 'CloseCashierReceiptPage') {
-      closeReceiptPage()
-    }
-  }
-
-  onMount(() => {
-    window.addEventListener('closeModal', closeModal, false);
-    window.addEventListener('confirmModal', confirmTxn, false);
-    window.addEventListener('closeIframe', closeIframe, false);
-    window.addEventListener('notificationButtonClick', retryRedirect, false);
-    window.addEventListener('selectPayMeth', reinitMethod, false)
-    document.addEventListener('click',closeAllLookups);
-    window.addEventListener('message', messageHandler, false);
-    dayjs.extend(customParseFormat);
-
-    return () => {
-      window.removeEventListener('closeModal', closeModal);
-      window.removeEventListener('confirmModal', confirmTxn);
-      window.removeEventListener('closeIframe', closeIframe);
-      window.removeEventListener('notificationButtonClick', retryRedirect);
-      window.removeEventListener('selectPayMeth', reinitMethod, false)
-      window.removeEventListener('message', messageHandler);
-    }
-  });
-
-  const closeAllLookups = (e) => {
-    if (openedLookup) {
-      showError[openedLookup] = true;
-      validateField(fields.find(field => field.name === openedLookup));
-    }
-    if (!e.composedPath().includes(clickedElem)) {
-      openedLookup = null;
-    }
-  }
-
-  const showLookup = (event, name) => {
-    if (name === openedLookup) {
-      showError[openedLookup] = true;
-      validateField(fields.find(field => field.name === openedLookup));
-      openedLookup = null
-      return;
-    }
-    event.stopPropagation();
-    clickedElem = event.composedPath()[0]
-    const innerContainer = clickedElem.getBoundingClientRect();
-    const outerContainer = customStylingContainer.getBoundingClientRect()
-    const clickY =  innerContainer.y;
-    const minLookupHeight = 200;
-    openLookupTop = (window.innerHeight - clickY) < minLookupHeight;
-    const topSpace = innerContainer.top - outerContainer.top - innerContainer.height;
-    const bottomSpace = outerContainer.bottom - innerContainer.bottom - innerContainer.height;
-    const dropdownSizeBottom = !openLookupTop && bottomSpace < 70 ? minLookupHeight - 50 : bottomSpace;
-    maxLookupHeight = openLookupTop ? topSpace : dropdownSizeBottom;
-    openedLookup = name
-  }
-
-  const prepareTxn = () => {
-    if (isDisabled) {
-      return;
-    }
-    isProcessingTxn = true;
-    const url:URL = new URL(`${endpoint}/v1/player/${customerid}/payment/GetPaymentPrepare`);
-    const headers = new Headers();
-    headers.append("accept", "application/json");
-    headers.append("Content-Type", "application/json");
-    headers.append("X-Client-Request-Timestamp", dayjs.utc().format("YYYY-MM-DD HH:mm:ss.SSS"));
-    toggleDisableActionOnPage();
-    const requestParams:RequestInit = {
-      method: "POST",
-      mode: "cors",
-      headers: headers,
-      body: JSON.stringify({
-        "XPaymentSessionToken": xPaymentSessionToken,
-        "Transaction": {
-          "PaymentMethod": selectedPaymentMethod.Name,
-          "Amount": editedAmount,
-          "Currency": currency,
-          "CustomFields": prepareFields
-        },
-        "Account": {}
-      })
-    }
-    fetch(url, requestParams).then((res) => res.json()).then(data => {
-      if (data.error) {
-        postMessage({type: 'ShowSessionError', error: data.error}, window.location.href)
-        return;
-      }
-      if (data.ResponseCode !== ResponseCode.Success) {
-        errorResponseCode = data.ResponseCode
-        isProcessingTxn = false;
-        toggleDisableActionOnPage();
-        if (data.ResponseCode === ResponseCode.PlayerSessionIsNotValid
-          || data.ResponseCode === ResponseCode.Maintenance
-          || data.ResponseCode === ResponseCode.JwtTokenError) {
-          setErrorResponseCode();
-        } else {
-          showModal()
-        }
-        return;
-      }
-      xPaymentSessionToken = data.XPaymentSessionToken;
-      isProcessingTxn = false;
-      showConfirmModal = true;
-      setConfirmModalInfo();
-      toggleDisableActionOnPage();
-      window.postMessage({ type: 'StartSessionCountdown', xPaymentSessionToken, selectedPaymentMethodName: selectedPaymentMethod.Name }, window.location.href);
-    })
-  }
-
-  const  setErrorResponseCode = () => {
-    window.postMessage({type: 'ErrorResponseCode', errorResponseCode}, window.location.href);
-  }
-
-  const setConfirmModalInfo = () => {
-    window.postMessage({type:'ShowConfirmModal', showConfirmModal, editedAmount, hideAmountField: selectedPaymentMethod.HideAmountField}, window.location.href);
-  }
-
-  const setRedirectInfo = () => {
-    window.postMessage({type: 'RedirectInfo', redirectMode, redirectUrl}, window.location.href);
-  }
-
-  const showModal = () => {
-    showErrorModal = true;
-    window.postMessage({ type: 'ShowCashierModal', modalErrorMessage: errorResponseCode}, window.location.href)
-  }
-
-  const backToMethodList = () => {
-    dispatchEvent(new CustomEvent('backToMethodList', {
-      bubbles: true,
-      cancelable: true,
-      composed: true
-    }));
-    hidePaymentDetails()
-  }
-
-  const toggleDisableActionOnPage = () => {
-    window.postMessage({type: 'ToggleDisableActionOnPage', disable: isProcessingTxn}, window.location.href)
-  }
-
-  const hidePaymentDetails = () => {
-    if (showSpinner) {
-      abortPaymentFetch()
-    }
-    dispatchEvent(new CustomEvent('hidePaymentDetails', {
-      detail: { hideMethodDetails: mobileView },
-      bubbles: true,
-      cancelable: true,
-      composed: true
-    }));
-  }
-
-  const hideMethodsList = () => {
-    dispatchEvent(new CustomEvent('hideMethodsList', {
-      detail: { hideMethodsList: mobileView },
-      bubbles: true,
-      cancelable: true,
-      composed: true
-    }));
-  }
-
-  const closeIframe = () => {
-    redirectUrl = null;
-    showReceiptPage = true;
-    setRedirectInfo();
-  }
-
-  const closeModal = () => {
-    showConfirmModal = false;
-  }
-
-  const confirmTxn = () => {
-    isProcessingTxn = true;
-    const url:URL = new URL(`${endpoint}/v1/player/${customerid}/payment/GetPaymentConfirm`);
-    const headers = new Headers();
-    headers.append("accept", "application/json");
-    headers.append("Content-Type", "application/json");
-    headers.append("X-Client-Request-Timestamp", dayjs.utc().format("YYYY-MM-DD HH:mm:ss.SSS"));
-    toggleDisableActionOnPage();
-    const requestParams:RequestInit = {
-      method: "POST",
-      mode: "cors",
-      headers: headers,
-      body: JSON.stringify({
-        "XPaymentSessionToken": xPaymentSessionToken,
-      })
-    }
-    fetch(url, requestParams).then((res) => res.json()).then(data => {
-      if (data.ResponseCode !== ResponseCode.Success) {
-        errorResponseCode = data.ResponseCode
-        isProcessingTxn = false;
-        toggleDisableActionOnPage();
-        if (data.ResponseCode === ResponseCode.PlayerSessionIsNotValid
-          || data.ResponseCode === ResponseCode.Maintenance
-          || data.ResponseCode === ResponseCode.JwtTokenError) {
-          setErrorResponseCode();
-        } else {
-          showModal()
-        }
-        return;
-      }
-      xPaymentSessionToken = data.XPaymentSessionToken;
-      transactionId = data.Transaction.Code;
-      redirectUrl = data.RedirectUrl;
-      redirectMode = redirectModeMap.get(data.RedirectionMode) || redirectModeMap.get('Default');
-      isProcessingTxn = false;
-      toggleDisableActionOnPage();
-      setRedirectInfo();
-      window.postMessage({ type: 'StartSessionCountdown', xPaymentSessionToken,  selectedpaymentmethodname: selectedpaymentmethodname }, window.location.href);
-      if (!redirectUrl) {
-        showReceiptPage = true;
-      }
-      if (redirectMode === RedirectionModeStringEnum.RedirectWithRetry) {
-        windowRedirect = window.open(data.RedirectUrl, '_blank');
-        showRedirectNotification = !!windowRedirect;
-        if (!windowRedirect) {
-          showRetryNotification = true;
-        }
-      }
-    })
-  }
-  const retryRedirect = () => {
-    windowRedirect = window.open(redirectUrl, '_blank');
-    showRedirectNotification = true;
-    showRetryNotification = false;
-    setRedirectInfo();
-  }
-
-  const closeReceiptPage = () => {
-    showReceiptPage = false
-  }
-  const openUrlInNewTab = (url) => {
-    if (!url) {
-      return
-    }
-    window.postMessage({ type: 'NavigateTo', path: url, target: blankPageTarget || null, externalLink: externalLink || false }, window.location.href);
-  }
-
-  const onLookUpChanged = (field, value) => {
-    prepareFields[field.name] = value;
-    fields.filter(el => el.correlationFieldName).forEach(el => validateField(el));
-  }
-
-  const getValueByFieldName = (values:any[], name:string):string => {
-    const fieldValue = name ? values.find(el => el.Name === name).Value : '';
-    return fieldValue;
-  }
-
-  const showField = (field) => {
-    if (!field.correlationFieldName) {
-      return true;
-    }
-    const isCorrelatedFieldVisible = field.correlationFieldValue.includes(prepareFields[field.correlationFieldName])
-    if (!isCorrelatedFieldVisible && prepareFields[field.name]) {
-      delete prepareFields[field.name]
-    }
-    return isCorrelatedFieldVisible
-  }
-
-  const emptyAmountError = ():string => {
-    if (!editedAmount) {
-      return $_('errorEmptyField')
-    }
-    return ''
-  }
-
-  const minAmountError = () => {
-    if (selectedPaymentMethod.DisplayCurrency.MinAmountLimit > editedAmount) {
-      return $_('minAmountError', {
-        values: {
-          amount: formatter.format(selectedPaymentMethod.DisplayCurrency.MinAmountLimit),
-          currency: selectedPaymentMethod.DisplayCurrency.Name
-        }
-      })
-    }
-    return ''
-  }
-
-  const maxAmountError = () => {
-    if (selectedPaymentMethod.DisplayCurrency.MaxAmountLimit < editedAmount) {
-      return $_('maxAmountError', {
-        values: {
-          amount: formatter.format(selectedPaymentMethod.DisplayCurrency.MaxAmountLimit),
-          currency: selectedPaymentMethod.DisplayCurrency.Name
-        }
-      })
-    }
-    return ''
-  }
-
-  const amountMultiplierError = () => {
-    if (selectedPaymentMethod.AmountMultiplier && (editedAmount % selectedPaymentMethod.AmountMultiplier !== 0)) {
-      return $_('amountMultiplierError', {
-        values: {
-          multiplier: selectedPaymentMethod.AmountMultiplier
-        }
-      })
-    }
-    return ''
-  }
-
-  const amountIntError = ():string => {
-    if (selectedPaymentMethod.IsIntegerAmount && !Number.isInteger(editedAmount)) {
-      return $_('amountIntError')
-    }
-    return ''
-  }
-
-  const amountDecimalError = ():string => {
-    if (Number(editedAmount).toFixed(2) != +editedAmount) {
-      return $_('amountDecimalError')
-    }
-    return ''
-  }
-
-  const patternValidator = (pattern, value) => {
-    if (!pattern) return true;
-    let regex;
-    let regexStr;
-    if (typeof pattern === 'string') {
-      regexStr = '';
-      if (pattern.charAt(0) !== '^') regexStr += '^';
-      regexStr += pattern;
-      if (pattern.charAt(pattern.length - 1) !== '$') regexStr += '$';
-      regex = new RegExp(regexStr);
-    }
-    else {
-      regexStr = pattern.toString();
-      regex = pattern;
-    }
-    return regex.test(value);
-  }
-
-  const patternMatchesError = (field, value):string => {
-    if (field.format && value && !patternValidator(field.format, value)) {
-      return $_('invalidFieldError',{ values: { field: field.label }})
-    }
-    return ''
-  }
-
-  const emptyFieldError = (field, value):string => {
-    if (typeof value !== 'boolean' && field.isRequired && (!value || !value.toString().trim())) {
-      return $_('errorEmptyField')
-    }
-    return ''
-  }
-
-  const keydownHandler = (event: KeyboardEvent) => {
-    const invalidKeys = ['+','-','e','E'];
-    if (invalidKeys.includes(event.key)) {
-      event.preventDefault();
-    }
-  }
-  const validateAmount = () => {
-    amountError = emptyAmountError() || minAmountError() ||
-            maxAmountError() || amountMultiplierError() ||
-            amountIntError() || amountDecimalError();
-  }
-
-  const dateTimeValidation = (field) => {
-    const value = prepareFields[field.name];
-    const format = field.placeholder;
-    const inputValue = dayjs(value, format);
-    const maxValue = dayjs(field.maxValue, format);
-    const minValue = dayjs(field.minValue, format);
-    if (inputValue.isBefore(minValue) || inputValue.isAfter(maxValue)) {
-      fieldValidation[field.name] = $_('invalidFieldError',{ values: { field: field.label }})
-      return;
-    }
-    fieldValidation[field.name] = showField(field) ? (emptyFieldError(field, value) || patternMatchesError(field, value)) : '';
-  }
-
-  const validateField = (field) => {
-    const value = prepareFields[field.name]
-    fieldValidation[field.name] = showField(field) ? (emptyFieldError(field, value) || patternMatchesError(field, value)) : '';
-  }
-
-  const isSubmitDisabled = (amountError, fieldValidation) => {
-    isDisabled = !!amountError || Object.values(fieldValidation).some(error => !!error);
-    return isDisabled;
-  }
-
-</script>
-<svelte:window bind:innerWidth={innerWidth} />
-<svelte:head>
-  <script src={qrCodeScriptSrc}></script>
-</svelte:head>
-<div class="CashierMethodDetails" bind:this={customStylingContainer}>
-  {#if showSpinner}
-    <cashier-spinner
-            {clientstylingurl}
-            {clientstyling}
-    ></cashier-spinner>
-  {/if}
-  {#if selectedPaymentMethod?.Name}
-    <div class="MethodsDetails" class:DisabledPage={showRetryNotification}>
-      {#if !showReceiptPage && !errorResponseCode || (errorResponseCode && showErrorModal)}
-        <form on:submit|preventDefault={prepareTxn} novalidate>
-          <div class="FieldWrapper">
-            <div class="FormLogo">
-              <div class="SelectedLogoWrapper">
-                <img src={selectedPaymentMethod.Logos[0] && selectedPaymentMethod.Logos[0].LogoUrl} alt={selectedPaymentMethod.Label} />
-              </div>
-              <div class="SelectedLogoDescription">
-                {selectedPaymentMethod.Label || selectedPaymentMethod.Name}
-              </div>
-              {#if mobileView}
-                <div on:click={() => backToMethodList()} class="ChangePaymeth">{$_('change')}</div>
-              {/if}
-            </div>
-            {#if selectedPaymentMethod.Description}
-              <div class="SelectedMethodDescription">
-                {selectedPaymentMethod.Description}
-              </div>
-            {/if}
-            {#if !selectedPaymentMethod.HideAmountField}
-            <div class="Amount" class:Invalid={amountError && showError['amount']}>
-              <label>
-                <span class="Required">
-                  {$_('amountLabel')}
-                </span>
-                {#if selectedPaymentMethod.IsAmountConfigurable}
-                  <input type="number"
-                         bind:value={editedAmount}
-                         on:input={() => validateAmount()}
-                         on:keydown={(event) => keydownHandler(event)}
-                         on:blur={() => {showError['amount'] = true; validateAmount()}}
-                         placeholder="{$_('amountPlaceholder')}"
-                  >
-                  <span class="Alert">{amountError}</span>
-                  {#if selectedPaymentMethod.DisplayCurrency}
-                    <span class="AmountLimits">
-                      {selectedPaymentMethod.DisplayCurrency.MinAmountLimit ? `${$_('generalMin')} ${formatter.format(selectedPaymentMethod.DisplayCurrency.MinAmountLimit)} ${currency}` : ''}
-                      {selectedPaymentMethod.DisplayCurrency.MaxAmountLimit ? `/ ${$_('generalMax')} ${formatter.format(selectedPaymentMethod.DisplayCurrency.MaxAmountLimit)} ${currency}` : ''}
-                    </span>
-                  {/if}
-                {:else}
-                  <span class="NonConfigurableAmount">
-                    {formatter.format(amount)} {currency}
-                  </span>
-                {/if}
-              </label>
-            </div>
-            {/if}
-          </div>
-            {#each fields as field, index}
-              {#if showField(field)}
-                <div class="FieldWrapper"
-                     class:Hidden={field.type === FieldTypes.Hidden}
-                     class:Invalid={showError[field.name] && fieldValidation[field.name]}>
-                  <label>
-                    {#if field.label && field.type !== FieldTypes.Link && field.type !== FieldTypes.Boolean}
-                      <span class:Required={field.isRequired}>{field.label}</span>
-                    {/if}
-                    {#if field.description && field.description !== field.label && field.type !== FieldTypes.QRCode && field.type !== FieldTypes.Boolean  && field.type !== FieldTypes.Link}
-                      <span class="Description">{field.description}</span>
-                    {/if}
-                    {#if field.type === FieldTypes.Text}
-                      <input type="text" bind:value={prepareFields[field.name]}
-                             placeholder="{field.placeholder}"
-                             on:input="{() => { validateField(field) }}"
-                             on:blur="{() => { showError[field.name] = true; validateField(field) }}">
-                    {:else if field.type === FieldTypes.Time || field.type === FieldTypes.Date || field.type === FieldTypes.DateTime}
-                    <div class="DateInput">
-                      <input class="DateTimePicker" type="text" bind:value={ prepareFields[field.name] } pattern={field.format}
-                             data-field={JSON.stringify(field)}
-                             placeholder={field.placeholder}
-                             on:input={() => { showError[field.name] = true; dateTimeValidation(field) }}
-                             on:change={() => { showError[field.name] = true; dateTimeValidation(field) }}
-                             on:blur={() => { showError[field.name] = true; dateTimeValidation(field) }}
-                             bind:this={flatpickrEl[flatpickrEl.length]}
-                      >
-                      <div class="MobileDateInput">{prepareFields[field.name] || field.placeholder}</div>
-                    </div>
-                    {:else if field.type === FieldTypes.Number || field.type === FieldTypes.Money}
-                      <input type="number" placeholder="{field.placeholder}" bind:value={prepareFields[field.name]}
-                             on:input="{() => { validateField(field) }}"
-                             on:blur="{() => { showError[field.name] = true; validateField(field) }}"
-                      >
-                    {:else if field.type === FieldTypes.Password}
-                      <input type="password" bind:value={prepareFields[field.name]} placeholder="{field.placeholder}"
-                             on:input="{() => { validateField(field) }}"
-                             on:blur="{() => { showError[field.name] = true; validateField(field) }}"
-                      >
-                    {:else if field.type === FieldTypes.Hidden}
-                      <input type="hidden" bind:value={prepareFields[field.name]} placeholder="{field.placeholder}">
-
-                    {:else if field.type === FieldTypes.Lookup}
-                      <div class="CustomSelect">
-                        <div class="Selected" id="{index}" on:click="{(e) => showLookup(e, field.name)}"> <span class="SelectedValue">{getValueByFieldName(field.values, prepareFields[field.name])}</span></div>
-                        <div class="OptionList"
-                             class:Opened={openedLookup === field.name}
-                             class:Top={openLookupTop}
-                             style="max-height: {`${maxLookupHeight}px`};"
-                        >
-                          {#each field.values as value}
-                            <div on:click="{() => {onLookUpChanged(field, value.Name); fields = fields}}">
-                              <span>{value.Value}</span>
-                            </div>
-                          {/each}
-                        </div>
-                      </div>
-                    {:else if field.type === FieldTypes.Boolean}
-                      <div class="Checkbox">
-                        <input type="checkbox" bind:checked={prepareFields[field.name]} placeholder="{field.placeholder}"
-                               on:change="{() => { showError[field.name] = true; validateField(field) }}"
-                        >
-                        <span class="Checkmark"></span>
-                        <span class="Description" class:Required={field.isRequired}>{@html field.descriptionWithLink}</span>
-                      </div>
-                    {:else if field.type === FieldTypes.QRCode}
-                      <div class="QRCode" on:click={() => {openUrlInNewTab(field.description)}}>
-                        <div bind:this={qrCodeContainer[qrCodeContainer.length]}>{field.defaultValue}</div>
-                      </div>
-                    {:else if field.type === FieldTypes.Link}
-                      <span>{@html field.descriptionWithLink}</span>
-                    {:else if field.type === FieldTypes.Label}
-                      <span class="Label"></span>
-                    {:else}
-                      <input type="text" bind:value={prepareFields[field.name]} placeholder="{field.placeholder}">
-                    {/if}
-                  </label>
-                  <span class="Alert">{ fieldValidation[field.name] || '' }</span>
-                </div>
-              {/if}
-            {/each}
-          {#if !isProcessingTxn}
-            <button class="PrimaryButton" type="submit" disabled="{isSubmitDisabled(amountError, fieldValidation)}">
-              <svg class="ButtonLock"  xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M7.51564 0.574496C6.49714 0.733152 5.5928 1.46162 5.21164 2.43037C5.01714 2.92471 4.98674 3.24368 4.98671 4.78987L4.98668 5.99306L4.55336 6.00671C4.20693 6.01762 4.08258 6.03221 3.93336 6.07946C3.43136 6.23846 3.00318 6.58293 2.73943 7.04C2.70133 7.106 2.63639 7.256 2.59508 7.37334L2.52002 7.58665V13.9067L2.59268 14.12C2.6993 14.4331 2.83849 14.6518 3.09336 14.9067C3.34821 15.1615 3.56693 15.3007 3.88002 15.4073L4.09336 15.48H11.9067L12.12 15.4073C12.4331 15.3007 12.6518 15.1615 12.9067 14.9067C13.1616 14.6518 13.3007 14.4331 13.4074 14.12L13.48 13.9067V7.58665L13.405 7.37334C13.1846 6.74712 12.6999 6.27875 12.0667 6.08C11.9191 6.03371 11.7891 6.0184 11.4467 6.00696L11.0134 5.99253L11.0133 4.78959C11.0133 4.128 11.0008 3.45465 10.9855 3.29334C10.9257 2.66268 10.7188 2.13556 10.3497 1.67368C9.66549 0.817589 8.6023 0.405214 7.51564 0.574496ZM8.46436 1.58665C9.01596 1.7035 9.52999 2.11659 9.79758 2.65809C9.98521 3.03771 9.98202 3.00646 9.99305 4.58L10.003 6H5.99702L6.00699 4.58C6.01802 3.00646 6.01483 3.03771 6.20246 2.65809C6.31793 2.42446 6.43799 2.26065 6.61818 2.09103C6.89043 1.83468 7.21371 1.65496 7.52352 1.58775C7.74977 1.53865 8.23518 1.53809 8.46436 1.58665ZM11.9201 7.0955C12.0975 7.17871 12.2992 7.37412 12.3874 7.54806C12.4231 7.61846 12.465 7.75796 12.4805 7.85803C12.4993 7.97978 12.5061 8.97962 12.501 10.88L12.4934 13.72L12.4082 13.8997C12.26 14.2127 12.0016 14.419 11.6821 14.4796C11.4864 14.5167 4.51364 14.5167 4.31793 14.4796C3.99843 14.419 3.74008 14.2127 3.59183 13.8997L3.50668 13.72L3.49905 10.88C3.49393 8.97728 3.50074 7.97987 3.51964 7.85778C3.57627 7.49218 3.79218 7.21543 4.12918 7.0765L4.28002 7.01431L8.02668 7.0205L11.7734 7.02665L11.9201 7.0955Z" fill="white"/>
-              </svg>
-              {$_(`${type.toLowerCase()}.makeTxnButton`)}
-              {#if !selectedPaymentMethod.HideAmountField}
-                <span class="ButtonAmount">{formatter.format(editedAmount || 0)} {currency}</span>
-              {/if}
-            </button>
-          {:else}
-            <button class="PrimaryButton">
-              <svg class="ButtonSpinner" xmlns="http://www.w3.org/2000/svg" width="15" height="14" viewBox="0 0 15 14" fill="none">
-                <path d="M14.0282 6.58425C13.9037 4.05374 12.3688 1.68916 10.0872 0.61058C7.59818 -0.509483 4.56986 -0.0531603 2.49567 1.68916C0.504443 3.34851 -0.408201 6.04496 0.172573 8.57547C0.711862 11.0645 2.6616 13.0972 5.10915 13.7609C8.0545 14.5906 10.7509 13.1802 12.4103 10.7741C10.9169 12.7653 8.63527 14.0928 6.10476 13.6365C3.57424 13.1802 1.50005 11.2719 0.919281 8.78289C0.297024 6.12793 1.54154 3.34851 3.90612 1.97955C6.35366 0.569097 9.79682 1.10839 11.4147 3.51445C11.8295 4.09522 12.1199 4.80045 12.2444 5.50567C12.3688 6.08644 12.3273 6.7087 12.4103 7.28947C12.4933 7.82876 12.9496 8.53399 13.5718 8.16063C14.1111 7.82876 14.0696 7.12354 14.0282 6.58425C14.0696 6.87464 14.0282 6.41831 14.0282 6.58425Z" fill="white"/>
-              </svg>
-              {$_('processingButton')}
-            </button>
-          {/if}
-          {#if showRetryNotification}
-            <cashier-notifications
-                    {clientstylingurl}
-                    {clientstyling}
-                    text="{$_('retryText')}"
-                    button="{$_('retryButton')}"
-            >
-            </cashier-notifications>
-          {/if}
-        </form>
-      {/if}
-      {#if showRedirectNotification}
-        <div class="RedirectionNotification">
-          <img src="//static.everymatrix.com/mmstage/cashier/assets/redirect.png" alt="">
-          <span class="RedirectionTitle">{$_('redirectTitle')}</span>
-          <span class="RedirectionMessage">{$_('redirectMessage')}</span>
-          <div class="RedirectionClose" on:click={() => {showRedirectNotification = false}}>{$_('backToPayment')}</div>
-        </div>
-      {/if}
-      {#if showReceiptPage}
-        <div class="ReceiptPage">
-          <cashier-receipt-page
-                  {lang}
-                  {translationurl}
-                  {local}
-                  {endpoint}
-                  {customerid}
-                  {assetsurl}
-                  {clientstylingurl}
-                  {clientstyling}
-                  showerrors="false"
-                  showclosebutton="true"
-                  showcontactbutton="true"
-                  transactionid="{transactionId}"
-                  session="{playersession}"
-          >
-          </cashier-receipt-page>
-        </div>
-      {/if}
-    </div>
-  {/if}
-  {#if errorResponseCode && !showErrorModal}
-    <cashier-error
-            {assetsurl}
-            {translationurl}
-            {clientstylingurl}
-            {clientstyling}
-            {lang}
-            hidebuttons="{`${!mobileView}`}"
-            errorcode={errorResponseCode}
-    >
-      <button slot="button" class="CashierErrorButton" on:click={backToMethodList}>{$_('backToMethodList')}</button>
-    </cashier-error>
-  {/if}
-</div>
-
-
-<style lang="scss">
-
-  $input-height: 40px;
-
-  @keyframes loading-spinner {
-    from {
-      transform: rotate(0deg)
-    }
-    to {
-      transform: rotate(360deg)
-    }
-  }
-  ::-webkit-scrollbar {
-    width: 4px;
-  }
-  ::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  ::-webkit-scrollbar-thumb {
-    background: var(--mmw--color-grey-105, #E8E9EB);
-  }
-  ::-webkit-scrollbar-thumb:hover {
-    background: var(--mmw--color-grey-290, #666);
-  }
-
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  input::-webkit-date-and-time-value {
-    visibility: hidden;
-  }
-
-  input[type=number] {
-    -moz-appearance: textfield;
-  }
-  .CashierMethodDetails {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    container-name: method-details;
-    container-type: inline-size;
-    padding: 1px;
-    min-height: 200px;
-  }
-  .ReceiptPage {
-    background-color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
-    border-radius: var(--mmw--border-radius-medium-plus, 6px);
-    box-shadow: 0 2px 6px 0 var(--mmw--color-black-transparency-10, rgba(0, 0, 0, .1));
-    padding: 0 var(--emw--spacing-small, 12px);
-    margin-bottom: var(--emw--spacing-small-minus, 10px);
-  }
-  .MethodsDetails {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    gap:  var(--mmw--spacing-2x-small-plus, 5px);
-    &:has(.RedirectionNotification) form {
-      visibility: hidden;
-    }
-    &.DisabledPage:after {
-      content: '';
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      z-index: 1;
-      top: 0;
-      left: 0;
-      background-color: var(--emw--color-background, rgba(255, 255, 255, 0.5));
-    }
-  }
-  .FormLogo {
-    align-items: center;
-    display: flex;
-    height: 50px;
-    border-bottom: 1px solid var(--mmw--color-grey-105, #E8E9EB);
-  }
-
-  .SelectedLogoDescription {
-    color: var(--mmw--color-grey-10, #111);
-    font-size: var(--emw--font-size-small, 14px);
-    margin: var(--mmw--spacing-x-small-minus, 7px) var(--mmw--spacing-2x-small-plus, 5px) var(--mmw--spacing-x-small-minus, 7px) var(--mmw--spacing-x-small-minus, 7px);
-    word-break: break-word;
-  }
-  .SelectedLogoWrapper {
-    width: 56px;
-    height: 32px;
-    flex-shrink: 0;
-    background: var(--emw--color-background, #fff);
-    border: 1px solid var(--mmw--color-grey-105, #E8E9EB);
-    border-radius: var(--mmw--border-radius-medium-plus, 6px);
-
-    img {
-      max-height: 32px;
-      max-width: 56px;
-    }
-  }
-
-  .ChangePaymeth {
-    margin-left: auto;
-    cursor: pointer;
-    color: var(--mmw--color-grey-10, #111);
-    font-size: var(--emw--font-size-small, 14px);
-    text-decoration-line: underline;
-  }
-
-  .SelectedMethodDescription {
-    color: var(--mmw--color-grey-290, #666);
-    font-size: var(--emw--font-size-x-small, 12px);
-    margin: var(--emw--spacing-small-minus, 10px) 0 var(--mmw--spacing-2x-small-plus, 5px);
-    line-height: var(--emw--font-size-x-small, 12px);
-    white-space: pre-line;
-  }
-  .RedirectionNotification {
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: var(--emw--spacing-large, 20px);
-  }
-
-  .RedirectionClose {
-    display: flex;
-    width: 234px;
-    height: 36px;
-    flex-direction: column;
-    justify-content: center;
-    flex-shrink: 0;
-    color: var(--emw--color-white, #FFF);
-    cursor: pointer;
-    text-align: center;
-    font-size: var(--emw--font-size-x-small, 12px);
-    font-style: normal;
-    font-weight: var(--emw--font-weight-semibold, 500);
-    line-height: normal;
-    text-transform: uppercase;
-    border-radius: var(--emw--border-radius-medium, 4px);
-    background: var(--emw--color-primary, #7EC51E);
-  }
-
-  .RedirectionTitle {
-    color: var(--mmw--color-grey-10, #111);
-    font-size: var(--emw--font-size-x-small, 12px);
-    font-style: normal;
-    text-transform: none;
-    font-weight: var(--mmw--font-weight-semibold-plus, 600);
-  }
-  .RedirectionMessage {
-    color: var(--mmw--color-grey-290, #666);
-    font-size: var(--emw--font-size-x-small, 12px);
-    font-style: normal;
-    text-transform: none;
-  }
-  .FieldWrapper, label{
-    display: flex;
-    flex-direction: column ;
-  }
-  .FieldWrapper {
-    background-color: var(--emw--color-gray-transparency-100, rgba(255, 255, 255, 1));
-    border-radius: var(--mmw--border-radius-medium-plus, 6px);
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
-    padding: 0 var(--emw--spacing-medium, 15px) var(--emw--spacing-medium, 15px);
-    margin-bottom: var(--emw--spacing-small-minus, 10px);
-    &:has(.QRCode, .Label) {
-      box-shadow: none;
-      background: transparent;
-    }
-    &.Hidden {
-      height: 0;
-      visibility: hidden;
-      margin: 0;
-      padding: 0;
-    }
-    &.Invalid:has(.Checkbox) {
-      border: 1px solid var(--emw--color-error, #FE0101);
-    }
-  }
-  .Alert {
-    display: none;
-  }
-  .Invalid {
-    input, .Selected {
-      border-color: var(--emw--color-error, #FE0101);
-    }
-    .Alert {
-      display: inline-block;
-    }
-    .AmountLimits {
-      display: none;
-    }
-  }
-  .Alert {
-    color: var(--emw--color-error, #FE0101);
-    font-size: var(--emw--font-size-x-small, 12px);
-    margin: var(--mmw--spacing-2x-small-plus, 5px) 0 0 var(--emw--spacing-3x-small, 2px);
-    line-height: var(--emw--font-size-x-small, 12px);
-  }
-  .AmountLimits {
-    color: var(--mmw--color-grey-290, #666);
-    font-size: var(--emw--font-size-x-small, 12px);
-    margin: var(--mmw--spacing-2x-small-plus, 5px) 0 0 var(--emw--spacing-3x-small, 2px);
-    line-height: var(--emw--font-size-x-small, 12px);
-  }
-  input, .Selected {
-    border: 1px solid var(--mmw--color-grey-105, #E8E9EB);
-    border-radius: var(--emw--border-radius-medium, 4px);
-    height: $input-height;
-    line-height: var(--emw--size-small, 14px);
-    color: var(--mmw--color-grey-10, #111);
-    padding: 0 var(--emw--spacing-medium, 15px);
-    font-style: inherit;
-    font-family: inherit;
-    &:focus {
-      outline: none;
-    }
-  }
-
-  label {
-    color: var(--mmw--color-grey-10, #111);
-    font-size: var(--emw--size-small, 14px);
-    margin-top: var(--mmw--spacing-x-small-minus, 7px);
-    line-height: 27px;
-    span.Required:before {
-      content: '*';
-      display: inline-block;
-      margin-right: var(--emw--spacing-3x-small, 2px);
-    }
-  }
-  .Description {
-    color: var(--mmw--color-grey-290, #666);
-    font-size: var(--emw--font-size-x-small, 12px);
-    margin: 0 0 var(--mmw--spacing-2x-small-plus, 5px) var(--emw--spacing-3x-small, 2px);
-    line-height:  var(--emw--font-size-x-small, 12px);
-  }
-  .PrimaryButton {
-    color: var(--emw--color-white, #FFF);
-    text-align: center;
-    font-size: var(--emw--font-size-x-small, 12px);
-    font-style: normal;
-    font-weight: var(--emw--font-weight-normal, 400);
-    font-family: inherit;
-    height: 46px;
-    border-radius: 50px;
-    line-height: normal;
-    border: none;
-    background: var(--emw--color-primary, #7EC51E);
-    width: 100%;
-    margin: var(--emw--spacing-small, 12px) 0;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--mmw--spacing-2x-small-plus, 5px);
-    &:has(.ButtonSpinner),
-    &:has(.ButtonSpinner):hover,
-    &:active {
-      background: var(--mmw--color-main-button-active, #5C950F);
-    }
-    .ButtonAmount {
-      font-weight: var(--mmw--font-weight-semibold-plus, 600);
-    }
-    .ButtonSpinner {
-      animation: loading-spinner 1s linear infinite;
-    }
-    &[disabled] {
-      background: var(--mmw--color-disabled, #99999980);
-      cursor: auto;
-      pointer-events: none;
-    }
-    &:hover {
-      background: var(--mmw--color-main-button-hover, #71B11B);
-    }
-  }
-  .CashierErrorButton {
-    width: 100%;
-    height: 36px;
-    color: var(--emw--color-white, #FFF);
-    text-align: center;
-    cursor: pointer;
-    font-size: var(--emw--font-size-x-small, 12px);
-    font-style: normal;
-    font-weight: var(--emw--font-weight-semibold, 500);
-    font-family: inherit;
-    line-height: 36px;
-    border: none;
-    border-radius: var(--emw--border-radius-medium, 4px);
-    background: var(--emw--color-primary, #7EC51E);
-    &:hover {
-      background: var(--mmw--color-main-button-hover, #71B11B);
-    }
-    &:active {
-      background: var(--mmw--color-main-button-active, #5C950F);
-    }
-  }
-  .QRCode {
-    width: 250px;
-    margin: auto;
-  }
-  .Checkbox {
-    display: flex;
-    position: relative;
-    margin-top: var(--emw--spacing-small, 12px);
-
-    .Description {
-      margin: 0 0 0 var(--emw--spacing-large, 20px);
-      cursor: pointer;
-      line-height:  var( --emw--font-size-medium, 16px);
-    }
-
-    .Checkmark {
-      position: absolute;
-      top: 2px;
-      left: 0;
-      height: 12px;
-      width: 12px;
-      border: 1px solid var(--mmw--color-grey-105, #E8E9EB);
-      border-radius: var(--emw--border-radius-medium, 4px);
-      background-color: var(--emw--color-white, #FFF);
-      cursor: pointer;
-
-      &:after {
-        content: "";
-        position: absolute;
-        display: none;
-      }
-
-      &:after {
-        left: 4px;
-        top: 0;
-        width: 2px;
-        height: 8px;
-        border: solid var(--emw--color-white, #FFF);
-        border-width: 0 2px 2px 0;
-        -webkit-transform: rotate(45deg);
-        -ms-transform: rotate(45deg);
-        transform: rotate(45deg);
-      }
-    }
-    input {
-      position: absolute;
-      opacity: 0;
-      cursor: pointer;
-      height: 0;
-      width: 0;
-
-      &:checked ~ .Checkmark {
-        background-color: var(--emw--color-primary, #7EC51E);
-        border-color: var(--emw--color-primary, #7EC51E);
-      }
-
-      &:checked ~ .Checkmark:after {
-        display: block;
-      }
-    }
-  }
-  .DateInput {
-    position: relative;
-    .MobileDateInput {
-      display: none;
-    }
-    &:has(.flatpickr-mobile) {
-      .DateTimePicker {
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        background: none;
-        width: -webkit-fill-available;
-        font-size: 0;
-        width: -moz-available;
-      }
-      .MobileDateInput {
-        display: block;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        left: 15px;
-      }
-    }
-  }
-
-  .DateTimePicker {
-    width: -webkit-fill-available;
-    width: -moz-available;
-  }
-  .CustomSelect {
-    width: 100%;
-    position: relative;
-  }
-  .Selected {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    .SelectedValue {
-      max-width: 95%;
-    }
-    &:after {
-      position: absolute;
-      content: "";
-      top: 19px;
-      right: 10px;
-      width: 0;
-      height: 0;
-      border: 6px solid transparent;
-      border-color: var(--mmw--color-border, rgb(168 169 170)) transparent transparent transparent;
-    }
-  }
-  .OptionList {
-    display: none;
-    position: absolute;
-    left: 0;
-    right: 0;
-    z-index: 3;
-    background-color: var(--emw--color-white, #fff);
-    border: 1px solid var(--mmw--color-grey-105, #E8E9EB);
-    border-radius: var(--emw--border-radius-medium, 4px);
-    margin-top: var(--mmw--spacing-2x-small-plus, 5px);
-    overflow: auto;
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
-    &.Top {
-      transform: translate(0, calc(-1 * (100% + $input-height + 10px)));
-    }
-    div {
-      padding: var(--emw--spacing-x-small, 8px) var(--emw--spacing-medium, 16px);
-      cursor: pointer;
-      user-select: none;
-      line-height: calc(var(--emw--size-small, 14px) + 3px);
-      font-size: var(--emw--size-small, 14px);
-      &:hover {
-         background-color: var(--emw--color-gray-50, #F9F9F9);
-      }
-    }
-    &.Opened {
-      display: block;
-    }
-  }
-  @container method-details (width < 450px) {
-    .FormLogo .SelectedLogoDescription {
-      font-size: var(--emw--font-size-x-small, 12px);
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    label, input, .Description, .FormLogo .ChangePaymeth, .OptionList div {
-      font-size: var(--emw--font-size-x-small, 12px);
-    }
-    .SelectedMethodDescription, .AmountLimits {
-      font-size: var(--emw--font-size-2x-small, 10px);
-    }
-
-}
-</style>