@everymatrix/player-profile-info 0.0.225 → 0.0.230

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-profile-info",
-  "version": "0.0.225",
+  "version": "0.0.230",
   "main": "dist/player-profile-info.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f58cef61f569c3d9b496becafc3ab9e93cb5eca7"
+  "gitHead": "6450633dc3eac30c6bbb7963e606ee94b046d30d"
 }

package/src/PlayerProfileInfo.svelte

@@ -12,6 +12,7 @@
 
   export let endpoint:string = '';
   export let lang:string = 'en';
+  export let countrycode:string = 'IR';
 
   let isLoading:boolean = false;
   let userAgent:string = window.navigator.userAgent;
@@ -27,7 +28,7 @@
   let playerPrefix:string = '';
   let playerMobileNumber:string = '';
   let differencesExist:boolean = false;
-  let selectedCountry:Object = {};
+  let selectedCountry:Object = { Name: 'I.e Ireland'};
   let prefixesArray:Array<Object> = [];
   let countriesArray:Array<Object> = []
 
@@ -116,9 +117,6 @@
           birth = profileDetails.birth.day + '/' + profileDetails.birth.month + '/' + profileDetails.birth.year;
           currency = profileDetails.currency;
           userTitles = profileDetails.title;
-          country = profileDetails.country;
-          // match country code to country name
-          selectedCountry = countriesArray.find(country => country.Alpha2Code === profileDetails.country);
 
           // editable field values used for bindings
           giveConsentSMS = profileDetails.consents.acceptSMSOffers;
@@ -175,6 +173,7 @@
       .then((res:any) => res.json())
       .then(data => {
         countriesArray = data.countries;
+        selectedCountry = countriesArray.find(country => country.Alpha2Code === countrycode);
       });
   }
 
@@ -354,7 +353,7 @@
   });
 
   $: lang && setActiveLanguage();
-  $: endpoint && getCountriesList();
+  $: endpoint && countrycode && getCountriesList();
   $: endpoint && getPhoneCodes();
 </script>
 
@@ -365,7 +364,7 @@
 
   {#if isMobile}
     <div class="MenuReturnButton" on:click={() => toggleScreen()}>
-      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:#d0046c;}</style></defs><g transform="translate(-20 -158)">
+      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:var(--emfe-w-color-primary, #D0046C);}</style></defs><g transform="translate(-20 -158)">
         <g transform="translate(20 158)">
           <path class="aaa" d="M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z" transform="translate(15 15) rotate(180)"/>
         </g></g>
@@ -448,7 +447,7 @@
   <section class="PlayerLocationContent">
     <div class="PlayerInfoBox">
       <label>{$_('playerProfile.userCountry')}</label>
-      <input type="text" class="PlayerCountry FieldDisabled" placeholder={country} value={selectedCountry.Name} readonly />
+      <input type="text" class="PlayerCountry FieldDisabled" placeholder={countrycode} value={selectedCountry.Name} readonly />
     </div>
     <div class="PlayerInfoBox {invalidCity ? 'InvalidField' : ''}">
       <label>{$_('playerProfile.userCity')}</label>
@@ -532,13 +531,13 @@
 
   .MyAccountCategoryTitle {
     font-size: 26px;
-    color: #D0046C;
+    color: var(--emfe-w-color-primary, #D0046C);
     font-weight: 400;
   }
 
   .MyAccountCategoryTitleMobile {
     font-size: 16px;
-    color: #D0046C;
+    color: var(--emfe-w-color-primary, #D0046C);
   }
 
   .MyAccountCategoryTitleNone {
@@ -546,8 +545,8 @@
   }
 
   .PlayerInfoWrapper {
-    color: #07072A;
-    background: #F9F8F8;
+    color: var(--emfe-w-color-contrast, #07072A);
+    background: var(--emfe-w-color-gray-50, #F9F8F8);
     padding: 50px;
     max-width: 760px;
   }
@@ -555,7 +554,7 @@
   .PlayerNotificationsHeader, .PlayerDetailsHeader, .PlayerLocationHeader {
     h3 {
       font-size: 16px;
-      color: #D0046C;
+      color: var(--emfe-w-color-primary, #D0046C);
       text-transform: capitalize;
       font-weight: 400;
     }
@@ -571,7 +570,7 @@
   }
 
   .MenuReturnButton{
-    color: #58586B;
+    color: var(--emfe-w-color-gray-300, #58586B);
     display: inline-flex;
     align-items: center;
     column-gap: 10px;
@@ -589,30 +588,30 @@
     input {
       font-size: ttp(0.875);
       font-weight: 300;
-      color: #07072A;
+      color: var(--emfe-w-color-contrast, #07072A);
       padding: ttp(0.625);
       line-height: ttp(1);
-      background: #FFF;
-      border: 1px solid #D1D1D1;
+      background: var(--emfe-w-color-white, #FFFFFF);
+      border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
       border-radius: 5px;
       outline: none;
       transition-duration: 0.3s;
       &:focus, :focus-within, :focus-visible, :visited {
-        border: 1px solid #D0046C;
-        box-shadow: 0 0 0 1pt #D0046C;
+        border: 1px solid var(--emfe-w-color-primary, #D0046C);
+        box-shadow: 0 0 0 1pt var(--emfe-w-color-primary, #D0046C);
       }
     }
 
     &.InvalidField {
       input {
-        border: 1px solid #FD2839;
-        background: #FFF1F1;
-        color: #FD2839;
+        border: 1px solid var(--emfe-w-color-secondary, #FD2839);
+        background: var(--emfe-w-color-primary-50, #FBECF4);
+        color: var(--emfe-w-color-secondary, #FD2839);
       }
     }
 
     .InvalidInput {
-      color: #FD2839;
+      color: var(--emfe-w-color-secondary, #FD2839);
       font-size: 10px;
       line-height: 10px;
     }
@@ -631,19 +630,19 @@
       font-size: ttp(0.875);
       font-weight: 300;
       padding: ttp(0.625);
-      color: #07072A;
-      border: 1px solid #D1D1D1;
+      color: var(--emfe-w-color-contrast, #07072A);
+      border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
       border-radius: ttp(0.3125);
       outline: none;
       transition-duration: 0.3s;
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
-      background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat #FFF;
+      background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat var(--emfe-w-color-white, #FFFFFF);
       background-position: calc(100% - 0.75rem) center;
       &:focus, :focus-within, :focus-visible, :visited {
-        border: 1px solid #D0046C;
-        box-shadow: 0 0 0 1pt #D0046C;
+        border: 1px solid var(--emfe-w-color-primary, #D0046C);
+        box-shadow: 0 0 0 1pt var(--emfe-w-color-primary, #D0046C);
       }
     }
     /* Chrome, Safari, Edge, Opera */
@@ -690,12 +689,12 @@
         border-radius: ttp(3.125);
         outline: none;
         transition-duration: 0.3s;
-        background-color: #D1D1D1;
+        background-color: var(--emfe-w-color-gray-100, #E6E6E6);
         cursor: pointer;
         margin-right: ttp(0.625);
       }
       input:checked {
-        background-color: #D0046C;
+        background-color: var(--emfe-w-color-primary, #D0046C);
       }
       .Checkmark {
         left: ttp(0.6875);
@@ -729,17 +728,17 @@
       align-items: center;
       justify-content: center;
       font-size: ttp(1);
-      color: #07072A;
+      color: var(--emfe-w-color-contrast, #07072A);
       text-transform: uppercase;
       transition-duration: 0.3s;
       box-sizing: border-box;
     }
     .PlayerDetailsSaveButton {
-      background: #D0046C;
-      border: 1px solid #D0046C;
-      color: #fff;
+      background: var(--emfe-w-color-primary, #D0046C);
+      border: 1px solid var(--emfe-w-color-primary, #D0046C);
+      color: var(--emfe-w-color-white, #FFFFFF);
       &:active {
-        background: darken(#D0046C, 10);
+        background: var(--emfe-w-color-primary-600, #99034F);
       }
       &.PlayerButtonDisabled {
         opacity: 0.3;
@@ -749,13 +748,13 @@
 
     .PlayerDetailsCancelButton {
       background: transparent;
-      border: 1px solid #58586B;
+      border: 1px solid var(--emfe-w-color-gray-300, #58586B);
       &:active {
-        background: darken(#fff, 10);
+        background: var(--emfe-w-color-primary-600, #99034F);
       }
       &.PlayerButtonDisabled {
         background: transparent;
-        border: 1px solid #58586B;
+        border: 1px solid var(--emfe-w-color-gray-300, #58586B);
         cursor: not-allowed;
         opacity: 0.6;
       }
@@ -776,31 +775,31 @@
 
   .PlayerInfoWrapperMobile {
     padding: ttp(1.25) ttp(0.9375);
-    background: #F9F8F8;
+    background: var(--emfe-w-color-gray-50, #F9F8F8);
     max-width: unset;
     .PlayerDetailsContent {
       grid-template-columns: 1fr;
     }
     .PlayerNotificationsHeader, .PlayerDetailsHeader, .PlayerLocationHeader {
       h3 {
-        color: #D0046C;
+        color: var(--emfe-w-color-primary, #D0046C);
         font-size: ttp(0.875);
         font-weight: 400;
       }
     }
     .PlayerInfoBox {
       label {
-        color: #58586B;
+        color: var(--emfe-w-color-gray-300, #58586B);
         font-size: ttp(0.75);
         font-weight: 400;
       }
       input {
-        color: #58586B;
+        color: var(--emfe-w-color-gray-300, #58586B);
         font-size: ttp(0.75);
         font-weight: 300;
       }
       select {
-        color: #58586B;
+        color: var(--emfe-w-color-gray-300, #58586B);
       }
     }
     .PlayerLocationContent {
@@ -809,7 +808,7 @@
     .PlayerNotificationsCheckboxArea {
       .PlayerNotificationBox {
         label {
-            color: #07072A;
+            color: var(--emfe-w-color-contrast, #07072A);
             font-size: ttp(0.75);
             font-weight: 300;
         }
@@ -821,13 +820,13 @@
     .PlayerDetailsSaveButton, .PlayerDetailsCancelButton {
       font-size: ttp(0.75);
       height: ttp(2.5);
-      color: #fff;
+      color: var(--emfe-w-color-white, #FFFFFF);
       &.PlayerButtonDisabled {
-        color: #58586B;
+        color: var(--emfe-w-color-gray-300, #58586B);
       }
     }
     .PlayerDetailsCancelButton {
-      color: #58586B;
+      color: var(--emfe-w-color-gray-300, #58586B);
     }
   }
 
@@ -881,9 +880,9 @@
         height: ttp(3.5);
       }
       .PlayerDetailsSaveButton {
-        color: #fff;
+        color: var(--emfe-w-color-white, #FFFFFF);
         &.PlayerButtonDisabled {
-          color: #58586B;
+          color: var(--emfe-w-color-gray-300, #58586B);
         }
       }
     }
@@ -904,8 +903,8 @@
     }
   }
   .PlayerDetailsConfirmSave {
-    background: #0cdc13;
-    color: #fff;
+    background: var(--emfe-w-color-green, #48952a);
+    color: var(--emfe-w-color-white, #FFFFFF);
     padding: ttp(1);
     border-radius: 5px;
     margin-top: ttp(1);