@everymatrix/cashier-methods-list 1.28.3 → 1.28.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/cashier-methods-list",
-  "version": "1.28.3",
+  "version": "1.28.4",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c8de42d76db2aad5e40a16effced6d1f80df0354"
+  "gitHead": "1bfc13085b6829695a52b1569af671db1c024e41"
 }

package/src/CashierMethodItem.types.ts

@@ -1,3 +1,9 @@
+export interface Currency {
+    Name: string;
+    MinAmountLimit: number;
+    MaxAmountLimit: number;
+}
+
 export interface PaymentMethod {
   Name: string;
   Label: string;
@@ -5,4 +11,5 @@ export interface PaymentMethod {
   MaxLimit: number;
   Currency: string;
   LogoUrl: string;
+  DisplayCurrency: Currency
 }

package/src/CashierMethodsList.svelte

@@ -175,6 +175,8 @@
 </div>
 {/if}
 <style lang="scss">
+  $color-black-transparency-10: var(--mmw--color-black-transparency-10, rgba(0, 0, 0, .1));
+  $border-radius-medium-plus: var(--mmw--border-radius-medium-plus, 6px);
 
   *,
   *::before,
@@ -189,10 +191,10 @@
   .CashierMethodList {
     display: flex;
     flex-direction: column;
-    background: var(--emw--color-background, #FFF);
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.10);
+    background: var(--emw--color-background, #fff);
+    box-shadow: 0 0 4px $color-black-transparency-10;
     width: 100%;
-    border-radius: var(--emw--border-radius-large, 6px);
+    border-radius: $border-radius-medium-plus;
     .SelectorWrapper {
       display: flex;
       flex-direction: row;
@@ -202,25 +204,25 @@
       position: relative;
       height: 52px;
       box-sizing: border-box;
-      border-bottom: 1px solid var(--emw--color-gray-100, #E8E9EB);
-      padding: 0 12px;
+      border-bottom: 1px solid var(--mmw--color-grey-105, #E8E9EB);
+      padding: 0 var(--emw--spacing-small, 12px);
       &:first-child {
-        border-radius: var(--emw--border-radius-large, 6px) var(--emw--border-radius-large, 6px) 0 0;
+        border-radius: $border-radius-medium-plus $border-radius-medium-plus 0 0;
       }
       &:last-child {
-        border-radius: 0 0 var(--emw--border-radius-large, 6px) var(--emw--border-radius-large, 6px);
+        border-radius: 0 0 $border-radius-medium-plus $border-radius-medium-plus;
       }
       &.checked {
-        background: var(--emw--color-background-secondary, #F9F9F9);
+        background: var(--emw--color-background-secondary, #F9F8F8);
       }
     }
     .MethodLogo {
-      margin-right: 7px;
+      margin-right: var(--mmw--spacing-x-small-minus, 7px);
       width: 56px;
       height: 32px;
       background: var(--emw--color-background, #FFF);
-      border: 1px solid var(--emw--color-gray-100, #E8E9EB);
-      border-radius: var(--emw--border-radius-large, 6px);
+      border: 1px solid var(--mmw--color-grey-105, #E8E9EB);
+      border-radius: $border-radius-medium-plus;
       overflow: hidden;
       img {
         width: inherit;
@@ -228,7 +230,7 @@
       }
     }
     .MethodTitle {
-      color: var(--emw--color-black, #111);
+      color: var(--mmw--color-grey-10, #111);
       font-size: var(--emw--font-size-small, 14px);
       word-break: break-all;
       font-feature-settings: 'numr' on;
@@ -241,9 +243,9 @@
       .Limits {
         max-width: 100%;
         white-space: nowrap;
-        font-size: var(--emw--font-size-2x-small, 11px);
+        font-size: var(--emw--font-size-2x-small-plus, 11px);
         line-height: var(--emw--size-small, 14px);
-        color: var(--emw--color-gray-300, #666);
+        color: var(--mmw--color-grey-290, #666);
         font-weight: var(--emw--font-weight-normal, 400);
         font-style: normal;
       }
@@ -251,23 +253,23 @@
   }
   .ShowAllButton {
     cursor: pointer;
-    color: var(--emw--color-gray-300, #666);
+    color: var(--mmw--color-grey-290, #666);
     text-align: center;
     font-size: var(--emw--font-size-x-small, 12px);
     font-style: normal;
     font-weight: var(--emw--font-weight-semibold, 500);
-    background: var(--emw--color-gray-150, #F7F8FA);
+    background: var(--emw--color-gray-50, #F7F8FA);
     line-height: normal;
-    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);
-    margin: 12px auto;
+    margin: var(--emw--spacing-small, 12px) auto;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 80%;
     &:hover {
-      background: var(--emw--color-background, #FFF);
+      background: var(--emw--color-background, #fff);
     }
   }