@everymatrix/player-account-controller-nd 1.37.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,166 @@
1
+ # Player Account Controller widget Documentation
2
+ ## About the Player Account Controller widget
3
+ ### Intro to the Player Account Controller widget
4
+ The Player Account Controller widget is a collection of web components designed and developed to offer easy installation and access for the user to his account page - the page where he can customize his experience on your site by setting his preferences.
5
+
6
+ The widget is agnostic about the framework, library or programming language your current product is built on, while at the same time offering ease of integration for developers, and a sleek gateway to your site for your users.
7
+
8
+ ### A progressive widget
9
+ We like to call our Player Account Controller widget a "progressive" one since it grows with you. If you just want a simple implementation our architecture and documentation will be there to help you achieve it in mere minutes.
10
+
11
+ If you are looking for a bigger implementation into a much more mature product the casino widget gives you a set of robust tools for using player sessions, customizing actions, customizing the UI, enabling or disabling widget features on demand and more.
12
+
13
+ ### A scalable widget
14
+ The Player Account Controller widget scales with you. Although the scalability is mainly accomplished by your main product (the one you integrate this widget into) and by your architecture we took all the necessary steps and precautions to ensure the uninterrupted functionality of this product.
15
+
16
+ ### A stateless widget
17
+ In the development of this widget we considered that the widget should not care about any kind of state a container product (the product this widget is integrated into) might have nor that the widget itself should have any kind of state management.
18
+
19
+ We took this decision in order to ensure maximum integration compatibility as well as infinite scalability. By not sharing or having a state our widgets can be used as a main widget (like the casino lobby) or as singular components wherever you want to place them.
20
+
21
+ For example here is a list of the components used in order to display the Player Account Controller widget:
22
+
23
+ - Player Account Menu
24
+ - Player Account Notifications
25
+ - Player Profile Info
26
+ - Player Change Password
27
+ - Player Timeout
28
+ - Player Account Closure
29
+ - Player Gaming Limits
30
+ - Deposit
31
+ - Withdrawal
32
+ - Pending Withdrawals
33
+ - Transaction History
34
+
35
+ These components can also be used on their own, and they still can communicate to each other even if they are structurally placed in separate parts of your application (they still need to be on the same page).
36
+
37
+ ## Pre-requisites needed
38
+
39
+ For the Widget to be able to work, the parent website needs to integrated with the EM platform.
40
+
41
+ Supported integrations:
42
+ - NorWAy Integration
43
+ - CE Integration
44
+
45
+ For further information on how to proceed with your current integration please contact your assigned Integration Manager.
46
+
47
+ ## Setup the widget on your website.
48
+ To install the latest version released for the widget, which will be automatically updated once a new release is made, add the following script tag, in the root page of your application.
49
+
50
+ The script can be added either in the <head> or in the <body>. We recommend adding it in the footer of the page for better performance of the entire website.
51
+ ```javascript
52
+ <script src="https://unpkg.com/@everymatrix/player-account-controller/dist/player-account-controller.js"></script>
53
+ ```
54
+
55
+ For a specific version, the script tag looks like this:
56
+ ```javascript
57
+ <script src="https://unpkg.com/@everymatrix/player-account-controller@1.0.0/dist/player-account-controller.js"></script>
58
+ ```
59
+
60
+ ## Usage
61
+
62
+ For the `logged in` state, inside your page you need to add the webcomponent tag for the `Player Account Controller Widget`. The page will be available after an postMessage of the type `PlayerAccountMenuActive` is triggered.
63
+
64
+ ```html
65
+ <player-account-controller
66
+ endpoint="https://demo-api.stage.norway.everymatrix.com/v1"
67
+ lang="en"
68
+ cmsendpoint="https://wp-one-widgets.everymatrix.com/wp-json/wpone-rest/v1"
69
+ accountpath="/menu-locations/profile-menu"
70
+ notificationpath="/support_information"
71
+ playerid="3657535"
72
+ session="30154385-db0e-454f-8d00-44f83b67bf04"
73
+ customnotifications="#58586B,#2687F6,#D0046Cd"
74
+ ></player-account-controller>
75
+ ```
76
+
77
+ Full example below:
78
+
79
+ ```html
80
+ <!doctype html>
81
+ <html lang="en">
82
+ <head>
83
+ <meta charset="UTF-8">
84
+ <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
85
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
86
+ <title>EM Widgets | Player Account Controller Widget Demo</title>
87
+
88
+ <script src="https://unpkg.com/@everymatrix/player-account-controller/dist/player-account-controller.js"></script>
89
+
90
+ </head>
91
+ <body>
92
+ <div class="container">
93
+ <player-account-controller
94
+ endpoint="https://demo-api.stage.norway.everymatrix.com/v1"
95
+ lang="en"
96
+ cmsendpoint="https://wp-one-widgets.everymatrix.com/wp-json/wpone-rest/v1"
97
+ accountpath="/menu-locations/profile-menu"
98
+ notificationpath="/support_information"
99
+ playerid="3657535"
100
+ session="30154385-db0e-454f-8d00-44f83b67bf04"
101
+ customnotifications="#58586B,#2687F6,#D0046Cd"
102
+ ></player-account-controller>
103
+ </div>
104
+ </body>
105
+ </html>
106
+ ```
107
+
108
+ Both the `aaccountpath` and `notificationpath` are used together with the cmsendpoint, through concatenation, in order to obtain the necessary data for the player account menu and support information area.
109
+
110
+ The `customnotifications` is a string data that contains the background colors used for the support information boxes, making it easy for the client to customize them.
111
+
112
+ > **_PLEASE NOTE:_** The given example is a fully working HTML page and demo credentials are used for ```endpoint``` field. For development and productions purposes you will need to use your own provided credentials.
113
+
114
+ ## Communication between widgets
115
+ |Type|Message data|Comment|
116
+ |---------|---------|-----|
117
+ |PlayerAccountMenuActive|no extra data sent|triggers the displaying of the `Player Account Controller`|
118
+ |UpdatePlayerInfo|{}|sends an object with the updated field values from `Player Profile Info` to `Player Account Controller`|
119
+ |ChangePassword|userCurrentPassword, userNewPassword|toggles show/hide of the `Change Password Form`|
120
+ |SetPlayerAccountTimeout|cooloff|enable a cool-off/timeout with a `cooloff` taking the `period` value|
121
+ |AccountClosure|no extra data sent|triggers the automatic self exclusion of the user|
122
+ |ReturnToMenu|no extra data sent|for mobile use only: returns user to the `Player Account Menu`|
123
+ |PasswordChangedSuccessfully|no extra data sent|if user has successfully changed his password, switch to action feedback screen|
124
+ |AccountMenuDetails|accountMenuInfo|sends the account menu data from `Player Account Controller` to `Player Account Menu`|
125
+ |NotificationsDetails|notificationsInfo|sends the support information data from `Player Account Controller` to `Player Account Notifications`|
126
+ |ProfileDetailsData|profileDetails|sends the player form data from `Player Account Controller` to `Player Profile Info`|
127
+ |LogOut|no extra data sent|logs out user|
128
+ |ChangeAccountPage|page|changes the displayed content based on the `Player Account Menu` navigation|
129
+ |ConfirmProfileInfoSave|no extra data sent|triggers the confirmation message shown after the user successfully managed to alter his gaming limits|
130
+ |EditPlayerAccountGamingLimits|edit - limit data category to be edited, name - limit category name|manages the switch between limits grid view and opening the edit limits view, and also populates it|
131
+ |DeleteLimitsItem|removeData - limit data to be removed (single/multiple limit periods), removeName - limit category name from which the user removes limits|removes the limits data|
132
+ |ClosePlayerAccountGamingLimitsPopup|showPopup - boolean which shows/hides limits info popup|shows/hides limits info popup|
133
+ |PlayerAccountBackToLimitsView|no extra data sent|switches back to limits grid view from the edit limits view|
134
+ |PlayerAccountGamingLimitsUpdate|payload - contains the updated data, limitsCategory - the category name|send the updated category data|
135
+ |GamingLimitsConfirmChanges|no extra data sent|intermediary step towards updating the data in which the user's acknowledgement to edit the limit values is confirmed|
136
+ |CancelGamingLimitsChanges|no extra data sent|intermediary step towards updating the data in which the user cancels the changes he has made to his gaming limits|
137
+ |PlayerAccountGamingLimitDelete|limit - the limit data to be deleted|intermediary step towards deleting data in which the user's acknowledgement to delete limit values is confirmed|
138
+ |Deposit|currency - send the user currency, amount - send "o" as amount|send POST to get the deposit iframe url
139
+ |Withdrawal|currency - send the user currency, amount - send "o" as amount|send POST to get the withdraw iframe url
140
+ |Pending Withdrawal|no extra data sent|get pending withdrawals iframe url
141
+ |Transaction History|no extra data sent|get transaction history iframe url
142
+ |CancelGamingLimitsRemove|no extra data sent|intermediary step towards deleting limits data in which the user cancels the changes he has made to his gaming limits|
143
+ |ModalClosed|no extra data sent|closes current confirmation modal|
144
+ |EnableScroll|no extra data sent|enables scroll after the used closes the modal|
145
+ |DisableScroll|no extra data sent|disables scroll after the used opens the modal|
146
+
147
+
148
+
149
+ ## API Reference
150
+ |Parameter|Mandatory|Comment|
151
+ |---------|---------|-------|
152
+ |endpoint |yes|NorWAy endpoint|
153
+ |lang|yes|Language of the website|
154
+ |session|no|EM SessionID of the logged in user|
155
+ |opsession|no|Operator SessionID of the logged in user|
156
+ |playerid|no|EM UserID of the logged in user|
157
+ |cmsendpoit|yes|The CMS endpoint from which the data is configured|
158
+ |aaccountpath|yes|CMS path for obtaining the menu items for the Player Account Menu|
159
+ |notificationpath|yes|CMS path for obtaining the Support Information|
160
+ |customnotifications|no|Custom color codes used as backgrounds for the Support Information boxes|
161
+
162
+ ## Releases
163
+
164
+ |Release Version|Value |Scope|Status|Completed Date|
165
+ |---------------|----- |-----|------|--------------|
166
+ |`0.0.42` |Initial release| - |*DONE*|`04 Aug 2021` |
package/index.html ADDED
@@ -0,0 +1,49 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset='utf-8'>
5
+ <meta name='viewport' content='width=device-width,initial-scale=1'>
6
+
7
+ <title>
8
+ player-account-controller
9
+ </title>
10
+ <link rel="stylesheet" href="public/reset.css">
11
+ <script src='dist/player-account-controller-nd.js'></script>
12
+ </head>
13
+
14
+ <body>
15
+ <style>
16
+ html,body { margin: 0; padding: 0; height: 100%; font-family: "Helvetica Neue", "Helvetica", sans-serif; }
17
+ .header { display: flex; justify-content: center; align-items: center; padding: 10px 20px; margin-bottom: 20px; background: #42a3e2; box-shadow: 3px 4px 5px 0px rgba(0,0,0, .2); }
18
+ .header__logo svg { height: 50px; width: 50px; margin-right: 5px; }
19
+ .header__name { color: #fff; }
20
+ .header__name span { margin-right: 10px; font-weight: bold; }
21
+ /* .webcomponent { padding: 10px 20px; } */
22
+ </style>
23
+ <!-- <header class="header">
24
+ <div class="header__logo">
25
+ <svg xmlns="http://www.w3.org/2000/svg" width="161" height="132" viewBox="0 0 161 132"><defs><linearGradient x1="0%" y1="50%" y2="50%" id="a"><stop stop-color="#2A3B8F" offset="0%"/><stop stop-color="#29ABE2" offset="100%"/></linearGradient><linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="c"><stop stop-color="#B4D44E" offset="0%"/><stop stop-color="#E7F716" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path fill="#166DA5" d="M160.6 65.9l-17.4 29.3-24.4-29.7 24.4-28.9z"/><path fill="#8FDB69" d="M141.3 100.2l-26.5-31.7-15.9 26.6 24.7 36.1z"/><path fill="#166DA5" d="M141 31.4l-26.2 31.8-15.9-26.6L123.6.9z"/><path fill="url(#a)" opacity=".95" d="M61.1 31.4H141L123.4.7H78.7z M114.8 63.3H159l-15.9-26.8H98.8"/><path fill="url(#c)" opacity=".95" d="M141.3 100.3H61l17.6 30.5h45z M114.8 68.4H159l-15.9 26.8H98.8"/><path fill="#010101" d="M78.6 130.8L41 65.8 79.1.8H37.9L.4 65.8l37.5 65z"/></g></svg>
26
+ </div>
27
+ <h1 class="header__name">
28
+ <span>WEBCOMPONENT:</span> player-account-controller
29
+ </h1>
30
+ </header> -->
31
+
32
+
33
+ <div class="webcomponent">
34
+ <player-account-controller-nd playerid="5207890" session="7b62313b-8148-4051-a0fc-0378e27c77b1"
35
+ userroles="everyone,loggedIn,Documents in Progress,Medium risk,PEPno,PEPnohit,SANnegative,SANno,Waiting for KYC documents,WaitingforVV"
36
+ endpoint="https://arenacasino-api.stage.norway.everymatrix.com" env="stage"
37
+ cmsendpoint="https://wt1-stage.everymatrix.com/apijson" customnotifications="#58586B,#2687F6,#D0046C" lang="en"
38
+ hasdefaultamount="false" operator="Everymatrix" supportemail="support@everymatrix.com"
39
+ tablabels="Ograničenje Uplate , Ograničenje Gubitka , Ograničenje Igranja" historyenabled="true"
40
+ deletelimit="deposit,wager,loss" limitsamount="All(deposit):1-9999999 | All(wager):1-9999999 | All(loss):1-9999999"
41
+ limitsperiods="All(deposit): D-W-M | All(wager): D-W-M | All(loss): D-W-M" numberofentries="10" currency="EUR"
42
+ apiversion="gm16" clientstylingurl="http://localhost:4200/assets/clients/arenacasino/custom-styles/player-profile.css"
43
+ successurl="/home" cancelurl="/home" failurl="/home" sportsurl="/sport" casinourl="/casino"
44
+ contacturl="/page/contact-us " depositurl="/account/cashier-deposit" homeurl="/home" gmversion="gm16"
45
+ biometricsenabled=""
46
+ translationurl="http://localhost:4200/assets/clients/arenacasino/i18n/widgets/player-profile.json"
47
+ activepage="/limits" class="ng-star-inserted"></player-account-controller-nd>
48
+ </body>
49
+ </html>
package/index.js ADDED
@@ -0,0 +1 @@
1
+ import './dist/player-account-controller-nd.js';
package/package.json ADDED
@@ -0,0 +1,39 @@
1
+ {
2
+ "name": "@everymatrix/player-account-controller-nd",
3
+ "version": "1.37.5",
4
+ "main": "dist/player-account-controller-nd.js",
5
+ "svelte": "src/index.ts",
6
+ "scripts": {
7
+ "start": "sirv public",
8
+ "build": "cross-env NODE_ENV=production rollup -c",
9
+ "dev": "cross-env NODE_ENV=\"development\" rollup -c -w",
10
+ "validate": "svelte-check",
11
+ "test": "echo"
12
+ },
13
+ "devDependencies": {
14
+ "@rollup/plugin-babel": "^5.3.0",
15
+ "@rollup/plugin-commonjs": "^16.0.0",
16
+ "@rollup/plugin-node-resolve": "^10.0.0",
17
+ "@rollup/plugin-typescript": "^6.0.0",
18
+ "@tsconfig/svelte": "^1.0.0",
19
+ "rollup": "^2.3.4",
20
+ "rollup-plugin-dev-server": "^0.4.3",
21
+ "rollup-plugin-livereload": "^2.0.0",
22
+ "rollup-plugin-svelte": "^7.0.0",
23
+ "rollup-plugin-terser": "^7.0.0",
24
+ "rollup-plugin-uglify": "^6.0.4",
25
+ "svelte-check": "^1.0.0",
26
+ "svelte-preprocess": "^5.0.0",
27
+ "tslib": "^2.0.0",
28
+ "typescript": "^3.9.3"
29
+ },
30
+ "dependencies": {
31
+ "cross-env": "^7.0.3",
32
+ "sirv-cli": "^1.0.0",
33
+ "svelte": "^3.0.0"
34
+ },
35
+ "publishConfig": {
36
+ "access": "public"
37
+ },
38
+ "gitHead": "8617c4720af5eb376480fe868deae89a86f14ebd"
39
+ }
Binary file
@@ -0,0 +1,48 @@
1
+ /* http://meyerweb.com/eric/tools/css/reset/
2
+ v2.0 | 20110126
3
+ License: none (public domain)
4
+ */
5
+
6
+ html, body, div, span, applet, object, iframe,
7
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8
+ a, abbr, acronym, address, big, cite, code,
9
+ del, dfn, em, img, ins, kbd, q, s, samp,
10
+ small, strike, strong, sub, sup, tt, var,
11
+ b, u, i, center,
12
+ dl, dt, dd, ol, ul, li,
13
+ fieldset, form, label, legend,
14
+ table, caption, tbody, tfoot, thead, tr, th, td,
15
+ article, aside, canvas, details, embed,
16
+ figure, figcaption, footer, header, hgroup,
17
+ menu, nav, output, ruby, section, summary,
18
+ time, mark, audio, video {
19
+ margin: 0;
20
+ padding: 0;
21
+ border: 0;
22
+ font-size: 100%;
23
+ font: inherit;
24
+ vertical-align: baseline;
25
+ }
26
+ /* HTML5 display-role reset for older browsers */
27
+ article, aside, details, figcaption, figure,
28
+ footer, header, hgroup, menu, nav, section {
29
+ display: block;
30
+ }
31
+ body {
32
+ line-height: 1;
33
+ }
34
+ ol, ul {
35
+ list-style: none;
36
+ }
37
+ blockquote, q {
38
+ quotes: none;
39
+ }
40
+ blockquote:before, blockquote:after,
41
+ q:before, q:after {
42
+ content: '';
43
+ content: none;
44
+ }
45
+ table {
46
+ border-collapse: collapse;
47
+ border-spacing: 0;
48
+ }
@@ -0,0 +1,67 @@
1
+ import svelte from 'rollup-plugin-svelte';
2
+ import commonjs from '@rollup/plugin-commonjs';
3
+ import resolve from '@rollup/plugin-node-resolve';
4
+ import serve from 'rollup-plugin-dev-server';
5
+ import livereload from 'rollup-plugin-livereload';
6
+ import { terser } from 'rollup-plugin-terser';
7
+ import sveltePreprocess from 'svelte-preprocess';
8
+ import typescript from '@rollup/plugin-typescript';
9
+ import uglify from 'rollup-plugin-uglify';
10
+ import image from '@rollup/plugin-image';
11
+
12
+ const production = process.env.NODE_ENV == 'production';
13
+ const dev = process.env.NODE_ENV == 'development';
14
+
15
+ export default {
16
+ input: 'src/index.ts',
17
+ output: {
18
+ sourcemap: true,
19
+ format: 'umd',
20
+ name: 'app',
21
+ file: 'dist/player-account-controller-nd.js',
22
+ },
23
+ plugins: [
24
+ svelte({
25
+ preprocess: sveltePreprocess(),
26
+ compilerOptions: {
27
+ // @TODO check generate and hydratable
28
+ // generate: 'ssr',
29
+ // hydratable: true,
30
+ // enable run-time checks when not in production
31
+ customElement: true,
32
+ dev: !production
33
+ }
34
+ }),
35
+ image(),
36
+ commonjs(),
37
+ resolve({
38
+ browser: true,
39
+ dedupe: ['svelte']
40
+ }),
41
+ dev && serve({
42
+ open: true,
43
+ verbose: true,
44
+ allowCrossOrigin: true,
45
+ historyApiFallback: false,
46
+ host: 'localhost',
47
+ port: 5050,
48
+ }),
49
+ dev && livereload({ watch: ['', 'dist'] }),
50
+ typescript({
51
+ sourceMap: !production,
52
+ inlineSources: !production,
53
+ }),
54
+ // If we're building for production (npm run build
55
+ // instead of npm run dev), minify
56
+ production &&
57
+ terser({
58
+ output: {
59
+ comments: "all"
60
+ },
61
+ }),
62
+ production && uglify.uglify()
63
+ ],
64
+ watch: {
65
+ clearScreen: false
66
+ }
67
+ };