@everymatrix/cashier-method-details 1.35.0 → 1.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/cashier-method-details",
-  "version": "1.35.0",
+  "version": "1.36.0",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cad27ef6706d0e17f1eda3810fee31f1ec373fa9"
+  "gitHead": "09be81de9c66446d0062303022d5f036d874d153"
 }

package/src/CashierMethodDetails.svelte

@@ -252,7 +252,7 @@
   let isDisabled: boolean;
   let showErrorModal = false;
   let transactionId = '';
-
+  let showSpinner: boolean = true;
   $: endpoint && session && selectedpaymentmethodname && currency && reinitMethod();
   $: clientstyling && customStylingContainer && setClientStyling();
   $: clientstylingurl && customStylingContainer && setClientStylingURL();
@@ -273,6 +273,7 @@
       })
     }
     showReceiptPage = false;
+    showRetryNotification = false;
     flatpickrEl = [];
     fields = [];
     prepareFields = {};
@@ -282,6 +283,7 @@
     selectedPaymentMethod = null;
     errorResponseCode = '';
     showErrorModal = false;
+    showSpinner = true;
     setErrorResponseCode();
     getPaymentDetails();
   }
@@ -419,7 +421,7 @@
       setConfirmModalInfo();
       setErrorResponseCode();
       hideMethodsList();
-    })
+    }).finally(() => showSpinner = false)
   }
 
   const setClientStyling = ():void => {
@@ -445,13 +447,16 @@
   }
 
   const messageHandler = (e:any) => {
-    if (e.data.type == 'ErrorResponseCode') {
+    if (e.data.type === 'ErrorResponseCode') {
       errorResponseCode = e.data.errorResponseCode;
       showReceiptPage = e.data.showErrorOutsideReceiptPage;
     }
-    if (e.data.type == 'ReceiptLoaded') {
+    if (e.data.type === 'ReceiptLoaded') {
       closeIframe()
     }
+    if (e.data.type === 'BackCashier') {
+      backToMethodList()
+    }
   }
 
   onMount(() => {
@@ -828,8 +833,14 @@
   <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">
+    <div class="MethodsDetails" class:DisabledPage={showRetryNotification}>
       {#if !showReceiptPage && !errorResponseCode || (errorResponseCode && showErrorModal)}
         <form on:submit|preventDefault={prepareTxn} novalidate>
           <div class="FieldWrapper">
@@ -979,6 +990,8 @@
           {/if}
           {#if showRetryNotification}
             <cashier-notifications
+                    {clientstylingurl}
+                    {clientstyling}
                     text="{$_('retryText')}"
                     button="{$_('retryButton')}"
             >
@@ -1003,6 +1016,8 @@
                   {endpoint}
                   {customerid}
                   {assetsurl}
+                  {clientstylingurl}
+                  {clientstyling}
                   showerrors="false"
                   showclosebutton="true"
                   showcontactbutton="true"
@@ -1069,7 +1084,11 @@
   }
   .CashierMethodDetails {
     width: 100%;
-    height: inherit;
+    height: 100%;
+    overflow-y: auto;
+    box-sizing: border-box;
+    scrollbar-gutter: stable both-edges;
+    padding: var(--emw--spacing-large, 20px) var(--emw--spacing-x-small, 10px) var(--emw--spacing-small, 12px) var(--emw--spacing-x-small, 10px);
     container-name: method-details;
     container-type: inline-size;
   }
@@ -1084,10 +1103,21 @@
     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;

package/src/translations.js

@@ -31,6 +31,40 @@ export const TRANSLATIONS = {
       "confirmText": "You're going to withdraw from your account",
       "confirmTextWithAmount": "You're going to withdraw {amount} {currency} from your account",
       "confirmButton": "Ok"
+    },
+  },
+  "tr": {
+    "loading": "Yükleniyor...",
+    "amountLabel": "Miktar",
+    "redirectTitle": "Ödeme sağlayıcısı sayfasına yönlendirilirsiniz",
+    "redirectMessage": "Lütfen ödeme sağlayıcısı sayfasında işleminizi tamamlayın.",
+    "backToPayment": "KAPALI",
+    "retryText": "Açılır pencere engelleyicinizin ödeme penceresinin görünmesini engelleyebileceğini lütfen unutmayın",
+    "retryButton": "Yeniden Dene",
+    "processingButton": "İŞLEME...",
+    "generalMin": "Min:",
+    "generalMax": "Maks:",
+    "amountPlaceholder": "0",
+    "change": "Değiştir",
+    "errorEmptyField": "Lütfen verileri girin",
+    "minAmountError": "Tutar {amount} {currency}'den küçük olamaz",
+    "maxAmountError": "Tutar {amount} {currency}'den büyük olamaz",
+    "amountMultiplierError": "Tutar {multiplier}'nin katı olmalıdır",
+    "amountIntError": "Tutar tam sayı olmalıdır",
+    "amountDecimalError": "Tutarın ondalık noktadan sonra 2 veya daha az hanesi olmalıdır",
+    "invalidFieldError": "{field} geçersiz",
+    "backToMethodList": "ÖDEME YÖNTEMLERİNE GERİ DÖN",
+    "deposit": {
+      "makeTxnButton": "YATIR",
+      "confirmText": "Hesabınıza yatırıyorsunuz",
+      "confirmTextWithAmount": "Hesabınıza {amount} {currency} yatırıyorsunuz",
+      "confirmButton": "Tamam"
+    },
+    "withdraw": {
+      "makeTxnButton": "ÇEK",
+      "confirmText": "Hesabınızdan çekiyorsunuz",
+      "confirmTextWithAmount": "Hesabınıza {amount} {currency} yatırıyorsunuz",
+      "confirmButton": "Tamam"
     }
   }
-}
+}