@everymatrix/cashier-method-details 1.28.3 → 1.28.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/cashier-method-details",
-  "version": "1.28.3",
+  "version": "1.28.5",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c8de42d76db2aad5e40a16effced6d1f80df0354"
+  "gitHead": "a79b46ea6029e0c4cfe17ebfabd15cec443fc85f"
 }

package/src/CashierMethodDetails.svelte

@@ -21,7 +21,7 @@
     name: string;
     label: string;
     description: string;
-    type: string;
+    type: FieldTypes;
     defaultValue: any;
     format: string;
     placeholder: string;
@@ -49,7 +49,7 @@
       this.name = element.Name || null;
       this.label = element.Label || null;
       this.description = element.Description || null;
-      this.type = element.Type || null;
+      this.type = fieldTypeMap.get(element.Type) || null;
       this.defaultValue = this.calcDefaultValue(element);
       this.format = element.Format || null;
       this.placeholder = element.Placeholder || null;
@@ -88,7 +88,11 @@
       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'
@@ -101,6 +105,11 @@
     RedirectWithRetry = 'Redirect'
   }
 
+  const redirectModeMap = new Map([
+    [['Default', 0], RedirectionModeStringEnum.Default],
+    [['Redirect', 1], RedirectionModeStringEnum.RedirectWithRetry]
+  ].reduce(mapReducer, []));
+
   enum FieldTypes {
     Unknown ='Unknown',
     Text ='Text',
@@ -121,6 +130,27 @@
     Html = 'Html',
     QRCode = 'QR'
   }
+
+  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 lang: string = 'en';
@@ -175,6 +205,7 @@
   let maxLookupHeight: number;
   let editedAmount: number;
   let errorResponseCode: string;
+  let isDisabled: boolean;
 
   $: endpoint && session && selectedpaymentmethodname && currency && reinitMethod();
   $: clientstyling && customStylingContainer && setClientStyling();
@@ -196,6 +227,7 @@
         flatpickr(el, {dateFormat: dateformat}).destroy();
       })
     }
+    showReceiptPage = false;
     flatpickrEl = [];
     fields = [];
     prepareFields = {};
@@ -220,6 +252,7 @@
       }
     })
   }
+
   const createDatePicker = () => {
     const dateOptions = {
       [FieldTypes.Time]: {
@@ -246,9 +279,9 @@
       if(!el) {
         return;
       }
-      flatpickr(flatpickrEl, dateOptions[el.dataset.type])
+        flatpickr(flatpickrEl, {...dateOptions[el.dataset.type], maxDate: el.dataset.maxvalue, minDate: el.dataset.minvalue})
     });
-  }  
+  }
   const setActiveLanguage = ():void => {
     setLocale(lang);
   }
@@ -360,7 +393,7 @@
       showError[openedLookup] = true;
       validateField(fields.find(field => field.name === openedLookup));
     }
-    if(!e.composedPath().includes(clickedElem)){
+    if (!e.composedPath().includes(clickedElem)) {
       openedLookup = null;
     }
   }
@@ -374,20 +407,28 @@
     }
     event.stopPropagation();
     clickedElem = event.composedPath()[0]
-    const clickY =  clickedElem.getBoundingClientRect().y;
+    const innerContainer = clickedElem.getBoundingClientRect();
+    const outerContainer = customStylingContainer.getBoundingClientRect()
+    const clickY =  innerContainer.y;
     const minLookupHeight = 200;
-    const lookupMargin = 55;
     openLookupTop = (window.innerHeight - clickY) < minLookupHeight;
-    maxLookupHeight = openLookupTop ? clickY - minLookupHeight : window.innerHeight - clickY - lookupMargin;
+    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");
+    toggleDisableActionOnPage();
     const requestParams:RequestInit = {
       method: "POST",
       mode: "cors",
@@ -417,6 +458,7 @@
       xPaymentSessionToken = data.XPaymentSessionToken;
       isProcessingTxn = false;
       showConfirmModal = true;
+      toggleDisableActionOnPage();
     })
   }
 
@@ -437,6 +479,10 @@
     hidePaymentDetails()
   }
 
+  const toggleDisableActionOnPage = () => {
+    window.postMessage({type: 'ToggleDisableActionOnPage', disable: isProcessingTxn})
+  }
+
   const hidePaymentDetails = () => {
     dispatchEvent(new CustomEvent('hidePaymentDetails', {
       detail: { hideMethodDetails: mobileView },
@@ -467,6 +513,7 @@
     const headers = new Headers();
     headers.append("accept", "application/json");
     headers.append("Content-Type", "application/json");
+    toggleDisableActionOnPage();
     const requestParams:RequestInit = {
       method: "POST",
       mode: "cors",
@@ -484,12 +531,13 @@
       }
       xPaymentSessionToken = data.XPaymentSessionToken;
       redirectUrl = data.RedirectUrl;
-      redirectMode = data.RedirectionMode;
+      redirectMode = redirectModeMap.get(data.RedirectionMode);
       isProcessingTxn = false;
+      toggleDisableActionOnPage();
       if (!redirectUrl) {
         showReceiptPage = true;
       }
-      if (data.RedirectionMode === RedirectionModeStringEnum.RedirectWithRetry) {
+      if (redirectMode === RedirectionModeStringEnum.RedirectWithRetry) {
         windowRedirect = window.open(data.RedirectUrl, '_blank');
         showRedirectNotification = !!windowRedirect;
         if (!windowRedirect) {
@@ -516,7 +564,12 @@
 
   const onLookUpChanged = (field, value) => {
     prepareFields[field.name] = value;
-    validateField(field);
+    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) => {
@@ -608,11 +661,12 @@
 
   const validateField = (field) => {
     const value = prepareFields[field.name]
-    fieldValidation[field.name] = emptyFieldError(field, value) || patternMatchesError(field, value);
+    fieldValidation[field.name] = showField(field) ? (emptyFieldError(field, value) || patternMatchesError(field, value)) : '';    
   }
 
   const isSubmitDisabled = (amountError, fieldValidation) => {
-    return !!amountError || Object.values(fieldValidation).some(error => !!error)
+    isDisabled = !!amountError || Object.values(fieldValidation).some(error => !!error);
+    return isDisabled;
   }
 
 </script>
@@ -691,6 +745,8 @@
                     {:else if field.type === FieldTypes.Time || field.type === FieldTypes.Date || field.type === FieldTypes.DateTime}
                       <input type="text" bind:value={ prepareFields[field.name] } pattern={field.format}
                              data-type={field.type}
+                             data-maxvalue={field.maxValue}
+                             data-minvalue={field.minValue}
                              placeholder={field.placeholder}
                              on:input={() => { validateField(field) }}
                              on:change={() => { showError[field.name] = true; validateField(field) }}
@@ -711,14 +767,14 @@
 
                     {:else if field.type === FieldTypes.Lookup}
                       <div class="CustomSelect">
-                        <div class="Selected" id="{index}" on:click="{(e) => showLookup(e, field.name)}">{prepareFields[field.name] || ''}</div>
+                        <div class="Selected" id="{index}" on:click="{(e) => showLookup(e, field.name)}"> {getValueByFieldName(field.values, prepareFields[field.name])}</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="{() => {prepareFields[field.name] = value.Name; fields = fields}}">
+                            <div on:click="{() => {onLookUpChanged(field, value.Name); fields = fields}}">
                               <span>{value.Value}</span>
                             </div>
                           {/each}
@@ -859,10 +915,10 @@
     background: transparent;
   }
   ::-webkit-scrollbar-thumb {
-    background: var(--emw--color-gray-100, #E8E9EB);
+    background: var(--mmw--color-grey-105, #E8E9EB);
   }
   ::-webkit-scrollbar-thumb:hover {
-    background: var(--emw--color-gray-300, #666);
+    background: var(--mmw--color-grey-290, #666);
   }
 
   input::-webkit-outer-spin-button,
@@ -876,19 +932,20 @@
   }
   .CashierMethodDetails {
     width: 100%;
+    height: 100%;
   }
   .ReceiptPage {
     background-color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
-    border-radius: 6px;
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
-    padding: 0 15px 15px;
-    margin-bottom: 10px;
+    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;
-    gap: 5px;
+    gap:  var(--mmw--spacing-2x-small-plus, 5px);
     &:has(.RedirectionNotification) form {
       visibility: hidden;
     }
@@ -897,12 +954,12 @@
     align-items: center;
     display: flex;
     height: 50px;
-    border-bottom: 1px solid var(--emw--color-gray-100, #E8E9EB);
+    border-bottom: 1px solid var(--mmw--color-grey-105, #E8E9EB);
 
     .SelectedLogoDescription {
-      color: var(--emw--color-black, #111);
+      color: var(--mmw--color-grey-10, #111);
       font-size: var(--emw--font-size-small, 14px);
-      margin: 7px 5px 7px 7px;
+      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;
     }
 
@@ -910,9 +967,9 @@
       width: 56px;
       height: 32px;
       flex-shrink: 0;
-      background: var(--emw--color-background, #FFF);
-      border: 1px solid var(--emw--color-gray-100, #E8E9EB);
-      border-radius: var(--emw--border-radius-large, 6px);
+      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;
@@ -922,15 +979,15 @@
     .ChangePaymeth {
       margin-left: auto;
       cursor: pointer;
-      color: var(--emw--color-black, #111);
+      color: var(--mmw--color-grey-10, #111);
       font-size: var(--emw--font-size-small, 14px);
       text-decoration-line: underline;
     }
   }
   .SelectedMethodDescription {
-    color: var(--emw--color-gray-300, #666);
+    color: var(--mmw--color-grey-290, #666);
     font-size: var(--emw--font-size-x-small, 12px);
-    margin: 10px 0 5px;
+    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;
   }
@@ -942,7 +999,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 20px;
+    gap: var(--emw--spacing-large, 20px);
     .RedirectionClose {
       display: flex;
       width: 234px;
@@ -955,21 +1012,21 @@
       text-align: center;
       font-size: var(--emw--font-size-x-small, 12px);
       font-style: normal;
-      font-weight: 500;
+      font-weight: var(--emw--font-weight-semibold, 500);
       line-height: normal;
       text-transform: uppercase;
-      border-radius: 4px;
+      border-radius: var(--emw--border-radius-medium, 4px);
       background: var(--emw--color-primary, #7EC51E);
     }
     .RedirectionTitle {
-      color: var(--emw--color-black, #111);
+      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(--emw--font-weight-bold, 600);
+      font-weight: var(--mmw--font-weight-semibold-plus, 600);
     }
     .RedirectionMessage {
-      color: var(--emw--color-gray-300, #666);
+      color: var(--mmw--color-grey-290, #666);
       font-size: var(--emw--font-size-x-small, 12px);
       font-style: normal;
       text-transform: none;
@@ -997,10 +1054,10 @@
   }
   .FieldWrapper {
     background-color: var(--emw--color-gray-transparency-100, rgba(255, 255, 255, 1));
-    border-radius: 6px;
+    border-radius: var(--mmw--border-radius-medium-plus, 6px);
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
-    padding: 0 15px 15px;
-    margin-bottom: 10px;
+    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;
@@ -1032,22 +1089,22 @@
   .Alert {
     color: var(--emw--color-error, #FE0101);
     font-size: var(--emw--font-size-x-small, 12px);
-    margin: 5px 0 0 2px;
+    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(--emw--color-gray-300, #666);
+    color: var(--mmw--color-grey-290, #666);
     font-size: var(--emw--font-size-x-small, 12px);
-    margin: 5px 0 0 2px;
+    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(--emw--color-gray-100, #E8E9EB);
+    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(--emw--color-black, #111);
-    padding: 0 15px;
+    color: var(--mmw--color-grey-10, #111);
+    padding: 0 var(--emw--spacing-medium, 15px);
     font-style: inherit;
     font-family: inherit;
     &:focus {
@@ -1056,20 +1113,20 @@
   }
 
   label {
-    color: var(--emw--color-black, #111);
+    color: var(--mmw--color-grey-10, #111);
     font-size: var(--emw--size-small, 14px);
-    margin-top: 7px;
+    margin-top: var(--mmw--spacing-x-small-minus, 7px);
     line-height: 27px;
     span.Required:before {
       content: '*';
       display: inline-block;
-      margin-right: 2px;
+      margin-right: var(--emw--spacing-3x-small, 2px);
     }
   }
   .Description {
-    color: var(--emw--color-gray-300, #666);
+    color: var(--mmw--color-grey-290, #666);
     font-size: var(--emw--font-size-x-small, 12px);
-    margin: 0 0 5px 2px;
+    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 {
@@ -1077,37 +1134,37 @@
     text-align: center;
     font-size: var(--emw--font-size-x-small, 12px);
     font-style: normal;
-    font-weight: 400;
+    font-weight: var(--emw--font-weight-normal, 400);
     height: 46px;
     border-radius: 50px;
     line-height: normal;
     border: none;
     background: var(--emw--color-primary, #7EC51E);
     width: 100%;
-    margin: 12px 0;
+    margin: var(--emw--spacing-small, 12px) 0;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 5px;
+    gap: var(--mmw--spacing-2x-small-plus, 5px);
     &:has(.ButtonSpinner),
     &:has(.ButtonSpinner):hover,
     &:active {
-      background: var(--emw--color-active, #5C950F);
+      background: var(--mmw--color-main-button-active, #5C950F);
     }
     .ButtonAmount {
-      font-weight: 600;
+      font-weight: var(--mmw--font-weight-semibold-plus, 600);
     }
     .ButtonSpinner {
       animation: loading-spinner 1s linear infinite;
     }
     &[disabled] {
-      background: var(--emw--color-disabled, #99999980);
+      background: var(--mmw--color-disabled, #99999980);
       cursor: auto;
       pointer-events: none;
     }
     &:hover {
-      background: var(--emw--color-hover, #71B11B);
+      background: var(--mmw--color-main-button-hover, #71B11B);
     }
   }
   .QRCode {
@@ -1117,10 +1174,10 @@
   .Checkbox {
     display: flex;
     position: relative;
-    margin-top: 12px;
+    margin-top: var(--emw--spacing-small, 12px);
 
     .Description {
-      margin: 0 0 0 20px;
+      margin: 0 0 0 var(--emw--spacing-large, 20px);
       cursor: pointer;
       line-height:  var( --emw--font-size-medium, 16px);
     }
@@ -1131,7 +1188,7 @@
       left: 0;
       height: 12px;
       width: 12px;
-      border: 1px solid var(--emw--color-gray-100, #E8E9EB);
+      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;
@@ -1187,7 +1244,7 @@
       width: 0;
       height: 0;
       border: 6px solid transparent;
-      border-color: rgb(168 169 170) transparent transparent transparent;
+      border-color: var(--mmw--color-border, rgb(168 169 170)) transparent transparent transparent;
     }
   }
   .OptionList {
@@ -1196,23 +1253,23 @@
     left: 0;
     right: 0;
     z-index: 99;
-    background-color: white;
-    border: 1px solid var(--emw--color-gray-100, #E8E9EB);
+    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: 5px;
+    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: 8px 16px;
+      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-background-secondary, #F9F9F9)
+         background-color: var(--emw--color-gray-50, #F9F9F9);
       }
     }
     &.Opened {