@everymatrix/cashier-receipt-page 1.44.0 → 1.45.2

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.
package/index.html DELETED
@@ -1,46 +0,0 @@
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
- cashier-receipt-page
9
- </title>
10
- <link rel="stylesheet" href="public/reset.css">
11
- <script src='dist/cashier-receipt-page.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> cashier-receipt-page
29
- </h1>
30
- </header>
31
-
32
- <div class="webcomponent">
33
- <cashier-receipt-page
34
- lang="en"
35
- local="en-US"
36
- transactionid="4aa1070f75bb11ef90d402000a0c4213002719"
37
- session="5a8f0747-0fc0-43a6-8de7-e7196a113559"
38
- endpoint="https://zirvebet-api.stage.norway.everymatrix.com"
39
- customerid="6490000"
40
-
41
- >
42
- </cashier-receipt-page>
43
- </div>
44
-
45
- </body>
46
- </html>
package/index.js DELETED
@@ -1 +0,0 @@
1
- import './dist/cashier-receipt-page.js';
Binary file
package/public/reset.css DELETED
@@ -1,48 +0,0 @@
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
- }
package/rollup.config.js DELETED
@@ -1,61 +0,0 @@
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 image from '@rollup/plugin-image';
10
- const production = process.env.NODE_ENV === 'production';
11
- const dev = process.env.NODE_ENV === 'development';
12
-
13
- export default {
14
- input: 'src/index.ts',
15
- output: {
16
- sourcemap: true,
17
- format: 'umd',
18
- name: 'app',
19
- file: 'dist/cashier-receipt-page.js'
20
- },
21
- plugins: [
22
- svelte({
23
- preprocess: sveltePreprocess(),
24
- compilerOptions: {
25
- // enable run-time checks when not in production
26
- customElement: true,
27
- dev: !production
28
- }
29
- }),
30
- commonjs(),
31
- resolve({
32
- browser: true,
33
- dedupe: ['svelte']
34
- }),
35
- dev && serve({
36
- open: true,
37
- verbose: true,
38
- allowCrossOrigin: true,
39
- historyApiFallback: false,
40
- host: 'localhost',
41
- port: 5050,
42
- }),
43
- dev && livereload({ watch: ['', 'dist'] }),
44
- typescript({
45
- sourceMap: !production,
46
- inlineSources: !production,
47
- }),
48
- image(),
49
- // If we're building for production (npm run build
50
- // instead of npm run dev), minify
51
- production &&
52
- terser({
53
- output: {
54
- comments: "all"
55
- },
56
- })
57
- ],
58
- watch: {
59
- clearScreen: false
60
- }
61
- };
@@ -1,441 +0,0 @@
1
- <svelte:options tag={null} />
2
- <script lang="ts">
3
- import '@everymatrix/cashier-error';
4
- import { _, addNewMessages, setupI18n, setLocale } from './i18n';
5
- import { TRANSLATIONS } from './translations';
6
- import { getStatusImage, getSubTitleKey, getTitleKey, getTextKey } from './statuses';
7
- import failedImg from './assets/txn-failed.png';
8
- import successImg from './assets/txn-success.png';
9
- import pendingImg from './assets/txn-pending.png';
10
- import maintenanceImg from './assets/maintenance.png';
11
- import dayjs from 'dayjs';
12
- import utc from 'dayjs/plugin/utc';
13
- dayjs.extend(utc);
14
-
15
- export let endpoint: string;
16
- export let session: string;
17
- export let lang: string = 'en';
18
- export let local: string = 'en-US';
19
- export let showerrors: string = 'true';
20
- export let showclosebutton: string = 'false';
21
- export let showcontactbutton: string = 'false';
22
- export let translationurl: string;
23
- export let assetsurl: string = '';
24
- export let customerid: string;
25
- export let transactionid: string;
26
-
27
- export let clientstyling: string = '';
28
- export let clientstylingurl: string = '';
29
-
30
- enum ResponseCode {
31
- Success = 'Success',
32
- Maintenance = 'Maintenance'
33
- }
34
-
35
- const defaultStatusImages = {
36
- Success: successImg,
37
- Voided: successImg,
38
- Rejected: failedImg,
39
- Failed: failedImg,
40
- Canceled: failedImg,
41
- PendingNotification: pendingImg,
42
- PendingConfirmation: pendingImg,
43
- PendingApprovalStage1: pendingImg,
44
- PendingApprovalStage2: pendingImg,
45
- PendingApprovalStage3: pendingImg,
46
- PendingOfflineNotification: pendingImg
47
- };
48
- const enum FieldTypes {
49
- Unknown ='Unknown',
50
- Text ='Text',
51
- Boolean ='Boolean',
52
- Number ='Number',
53
- Money ='Money',
54
- DateTime ='DateTime',
55
- Lookup ='Lookup',
56
- IpAddress ='IpAddress',
57
- Date ='Date',
58
- Time ='Time',
59
- LookupCollection = 'LookupCollection',
60
- Hidden = 'Hidden',
61
- Label = 'Label',
62
- Password = 'Password',
63
- Link = 'Link',
64
- Image = 'Image',
65
- Html = 'Html',
66
- QRCode = 'QR'
67
- }
68
- const mapReducer = (arr, [keys, val]) => [
69
- ...arr,
70
- ...(Array.isArray(keys) ? [...keys.map(key => [key, val])] : [[keys, val]]
71
- )
72
- ];
73
-
74
- const fieldTypeMap = new Map([
75
- [['Unknown', 0], FieldTypes.Unknown],
76
- [['Text', 1], FieldTypes.Text],
77
- [['Boolean', 2], FieldTypes.Boolean],
78
- [['Number', 3], FieldTypes.Number],
79
- [['Money', 4], FieldTypes.Money],
80
- [['DateTime', 5], FieldTypes.DateTime],
81
- [['Lookup', 6], FieldTypes.Lookup],
82
- [['IpAddress', 7], FieldTypes.IpAddress],
83
- [['Date', 8], FieldTypes.Date],
84
- [['Time', 9], FieldTypes.Time],
85
- [['LookupCollection', 10], FieldTypes.LookupCollection],
86
- [['Hidden', 11], FieldTypes.Hidden],
87
- [['Label', 12], FieldTypes.Label],
88
- [['Password', 13], FieldTypes.Password],
89
- [['Link', 14], FieldTypes.Link],
90
- [['Image', 15], FieldTypes.Image],
91
- [['Html', 19], FieldTypes.Html],
92
- [['QR', 20], FieldTypes.QRCode]
93
- ].reduce(mapReducer, []));
94
-
95
- let displayNone:boolean = false;
96
- let txnInfo: {
97
- type: string,
98
- referenceId: string,
99
- status: string,
100
- message: string,
101
- amount: number | string,
102
- currency: string
103
- };
104
- let receiptFields: {
105
- type: string;
106
- name: string;
107
- description?: string;
108
- defaultValue: string;
109
- useCopyButton?: boolean;
110
- usePrintButton?: boolean;
111
- }[] = [];
112
- let isTranslationLoaded: boolean;
113
- let subTitle: string;
114
- let title: string;
115
- let text: string;
116
- let statusImageUrl: string;
117
- let customStylingContainer:HTMLElement;
118
- let qrCodeContainer: HTMLElement[] = [];
119
- let qrCodeScriptSrc: string = 'https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js';
120
- let blankPageTarget: string = '_blank';
121
- let externalLink: string = '';
122
- let errorResponseCode: string;
123
- let showErrorOutsideReceiptPage: boolean;
124
- let formatter = new Intl.NumberFormat(local, {minimumFractionDigits: 2 });
125
-
126
- $: endpoint && session && customerid && transactionid && showerrors && getPaymentInfo()
127
- $: lang && setActiveLanguage();
128
- $: lang && translationurl && setTranslationUrl();
129
- $: clientstyling && customStylingContainer && setClientStyling();
130
- $: clientstylingurl && customStylingContainer && setClientStylingURL();
131
-
132
- const setActiveLanguage = ():void => {
133
- setLocale(lang);
134
- }
135
- const setTranslationUrl = () => {
136
- let url:string = translationurl;
137
- if (url) {
138
- return fetch(url).then((res:any) => res.json())
139
- .then((res) => {
140
- Object.keys(res).forEach((item:any):void => {
141
- addNewMessages(item, res[item]);
142
- isTranslationLoaded = true;
143
- });
144
- }).catch((err:any) => {
145
- isTranslationLoaded = true;
146
- });
147
- }
148
- }
149
-
150
- Object.keys(TRANSLATIONS).forEach((item:any):void => {
151
- addNewMessages(item, TRANSLATIONS[item]);
152
- });
153
- const setClientStyling = ():void => {
154
- let sheet = document.createElement('style');
155
- sheet.innerHTML = clientstyling;
156
- customStylingContainer.appendChild(sheet);
157
- }
158
-
159
- const setClientStylingURL = ():void => {
160
- displayNone = true;
161
-
162
- let url:URL = new URL(clientstylingurl);
163
- let cssFile:HTMLElement = document.createElement('style');
164
-
165
- fetch(url.href)
166
- .then((res:any) => res.text())
167
- .then((data:any) => {
168
- cssFile.innerHTML = data
169
-
170
- setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
171
- setTimeout(() => { displayNone = false; }, 500);
172
- });
173
- }
174
- const closeReceipt = () => {
175
- window.postMessage({type: 'CloseCashierReceiptPage'}, window.location.href)
176
- }
177
-
178
- const liveChat = () => {
179
- window.postMessage({type: 'LiveChatReceiptPage'}, window.location.href)
180
- }
181
-
182
- const emitErrorMsg = () => {
183
- window.postMessage({type: 'ErrorResponseCode', errorResponseCode, showErrorOutsideReceiptPage}, window.location.href)
184
- }
185
-
186
- const getPaymentInfo = () => {
187
- const url:URL = new URL(`${endpoint}/v1/player/${customerid}/payment/GetPaymentInfo`);
188
- const headers = new Headers();
189
- headers.append("accept", "application/json");
190
- headers.append("Content-Type", "application/json");
191
- headers.append("X-SessionId", `${session}`);
192
- headers.append("X-Client-Request-Timestamp", dayjs.utc().format("YYYY-MM-DD HH:mm:ss.SSS"));
193
- const requestParams:RequestInit = {
194
- method: "POST",
195
- headers: headers,
196
- body: JSON.stringify({
197
- "TransactionCode": transactionid,
198
- })
199
- }
200
- fetch(url, requestParams).then(res => res.json()).then(data => {
201
- if (data.ResponseCode !== ResponseCode.Success) {
202
- errorResponseCode = data.ResponseCode;
203
- showErrorOutsideReceiptPage = showerrors.toLowerCase() === 'false' || !showerrors;
204
- emitErrorMsg();
205
- return;
206
- }
207
- txnInfo = {
208
- type: data.Transaction.Type,
209
- referenceId: data.Transaction.Code,
210
- status: data.Transaction.Status?.Status,
211
- message: data.Transaction.Status?.Message,
212
- amount: data.Transaction.Amounts[0]?.Amount,
213
- currency: data.Transaction.Amounts[0]?.Currency,
214
- }
215
- receiptFields = data.ReceiptInfo && data.ReceiptInfo.ReceiptFields ? data.ReceiptInfo.ReceiptFields.map(field => ({
216
- type: fieldTypeMap.get(field.Type),
217
- name: field.Name,
218
- description: field.Description,
219
- defaultValue: field.DefaultValue,
220
- useCopyButton: field.UseCopyButton,
221
- usePrintButton: field.UsePrintButton,
222
- })) : [];
223
- title = $_(getTitleKey(txnInfo.status, txnInfo.type), {values: {
224
- amount: formatter.format(txnInfo.amount),
225
- currency: txnInfo.currency}
226
- });
227
- subTitle = $_(getSubTitleKey(txnInfo.status, txnInfo.type));
228
- text = $_(getTextKey(txnInfo.status, txnInfo.type), {values: {errorText: txnInfo.message}});
229
- if (!assetsurl) {
230
- statusImageUrl = defaultStatusImages[txnInfo.status]
231
- } else {
232
- statusImageUrl = getStatusImage(assetsurl, txnInfo.status);
233
- }
234
- window.postMessage({ type: 'StartSessionCountdown', xPaymentSessionToken: session }, window.location.href);
235
- })
236
- }
237
-
238
- const generateQr = () => {
239
- qrCodeContainer.forEach(elem => {
240
- if (elem && elem.innerText) {
241
- const url = elem.innerText
242
- elem.innerText = ''
243
- new QRCode(elem, {
244
- text: url,
245
- width: 250,
246
- height: 250,
247
- });
248
- }
249
- })
250
- }
251
-
252
- const openUrlInNewTab = (url) => {
253
- if (!url) {
254
- return
255
- }
256
- window.postMessage({ type: 'NavigateTo', path: url, target: blankPageTarget || null, externalLink: externalLink || false }, window.location.href);
257
- }
258
- </script>
259
- <svelte:head>
260
- <script src={qrCodeScriptSrc}></script>
261
- </svelte:head>
262
- <div class="CashierReceiptPageWidget" bind:this={customStylingContainer}>
263
- <div class="CashierReceiptPage">
264
- {#if txnInfo}
265
- <div class="HeaderButtonContainer">
266
- {#if showcontactbutton && showcontactbutton !== 'false'}
267
- <span on:click={liveChat}>
268
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
269
- <path fill-rule="evenodd" clip-rule="evenodd" d="M9.33279 0.00663425C7.89688 0.105453 6.49895 0.511564 5.2336 1.19749C3.96825 1.88341 2.86499 2.83313 1.9985 3.9824C0.985792 5.31809 0.356137 6.84155 0.0769857 8.63039C-0.0256619 9.28509 -0.0256619 10.7147 0.0769857 11.3694C0.505101 14.1158 1.83326 16.3704 3.9851 18.0027C5.31451 19.0117 6.84672 19.6451 8.63053 19.923C9.28522 20.0257 10.7148 20.0257 11.3695 19.923C13.803 19.5437 15.8709 18.4471 17.4232 16.7121C18.8001 15.1736 19.595 13.4737 19.923 11.3694C20.0257 10.7147 20.0257 9.28509 19.923 8.63039C19.6451 6.84655 19.0117 5.31433 18.0028 3.9849C17.1973 2.91304 16.1846 2.01398 15.0249 1.34112C13.8652 0.668249 12.5821 0.235297 11.2518 0.0679732C10.614 0.00852964 9.97311 -0.0119547 9.33279 0.00663425ZM11.3019 1.33481C14.7956 1.87685 17.641 4.45559 18.4885 7.848C18.69 8.65292 18.7288 9.00343 18.7288 9.99988C18.7288 10.6946 18.715 10.97 18.6675 11.2855C18.4018 13.0557 17.6016 14.7024 16.374 16.0052C15.1464 17.308 13.5501 18.2045 11.7988 18.5748C10.686 18.8127 9.31401 18.8127 8.20117 18.5748C4.93272 17.8788 2.33398 15.3927 1.52156 12.1868C1.31126 11.3556 1.2712 11.0101 1.2712 9.99988C1.2712 8.98966 1.31126 8.64416 1.52156 7.81295C1.91376 6.29839 2.70396 4.91631 3.81023 3.81003C4.9165 2.70374 6.29856 1.91353 7.81311 1.52133C8.0885 1.45123 8.49409 1.36986 8.7144 1.34107L9.21512 1.27347C9.46673 1.23967 10.9689 1.28349 11.3019 1.33481ZM9.5481 5.25925C8.67685 5.35439 7.88821 5.8138 7.33116 6.54987C7.12462 6.82277 7.042 7.06437 7.09332 7.25339C7.17594 7.56009 7.55398 7.71781 7.87945 7.58262C7.94079 7.55633 8.16236 7.36355 8.37016 7.15325C8.79201 6.72763 8.99981 6.59995 9.41541 6.51232C10.5533 6.27197 11.541 6.85532 11.596 7.79918C11.6086 8.02326 11.5998 8.08084 11.5259 8.24107C11.3632 8.59659 11.0177 8.88826 10.5095 9.09982C10.1439 9.24341 9.76155 9.33975 9.3716 9.38649L9.1275 9.40902L9.13876 10.5306L9.14878 11.6523L9.23265 11.8025C9.42542 12.1517 9.96745 12.2118 10.2378 11.9152C10.3793 11.7587 10.4056 11.6247 10.4256 10.9638L10.4431 10.3416L10.6635 10.2815C12.1518 9.88095 13.1433 8.66669 12.973 7.44993C12.8579 6.62248 12.3709 5.96027 11.586 5.56845C11.0778 5.31433 10.2278 5.18539 9.5481 5.25925ZM9.37285 13.0568C9.06365 13.2108 8.90092 13.4799 8.89967 13.8404C8.89717 14.6003 9.77342 15.0071 10.3405 14.5089C10.4789 14.3866 10.576 14.2244 10.6186 14.0447C10.6612 13.8649 10.6471 13.6764 10.5783 13.505C10.3755 13.0493 9.81098 12.839 9.37285 13.0568Z" fill="#111111"/>
270
- </svg>
271
- </span>
272
- {/if}
273
- {#if showclosebutton && showclosebutton !== 'false'}
274
- <span on:click={closeReceipt}>
275
- <svg xmlns="http://www.w3.org/2000/svg" width="13" height="20" viewBox="0 0 13 13" fill="none">
276
- <path d="M12.7711 0.229435C13.0582 0.517619 13.0755 0.973729 12.8215 1.28141L12.7711 1.33721L7.60685 6.50068L12.7711 11.6641C12.9128 11.8066 12.9944 11.998 12.999 12.1988C13.0035 12.3997 12.9308 12.5946 12.7957 12.7433C12.6606 12.892 12.4735 12.9832 12.2731 12.9979C12.0728 13.0126 11.8744 12.9497 11.7191 12.8223L11.6633 12.7719L6.49958 7.60791L1.3359 12.7719C1.19349 12.9136 1.00207 12.9952 0.801203 12.9998C0.60034 13.0044 0.405398 12.9316 0.256676 12.7965C0.107955 12.6614 0.0168256 12.4744 0.00212786 12.274C-0.0125699 12.0736 0.0502877 11.8753 0.177706 11.7199L0.228086 11.6641L5.3923 6.50068L0.228086 1.33721C0.0863637 1.1948 0.00478102 1.00338 0.000203544 0.802529C-0.00437393 0.601674 0.0684038 0.40674 0.203491 0.258024C0.338579 0.109308 0.525647 0.0181829 0.726024 0.00348576C0.9264 -0.0112114 1.12476 0.0516437 1.28011 0.179057L1.3359 0.229435L6.49958 5.39345L11.6633 0.229435C11.736 0.156695 11.8223 0.0989949 11.9174 0.0596283C12.0124 0.0202617 12.1143 0 12.2172 0C12.32 0 12.4219 0.0202617 12.5169 0.0596283C12.612 0.0989949 12.6983 0.156695 12.7711 0.229435Z" fill="#111111"/>
277
- </svg>
278
- </span>
279
- {/if}
280
- </div>
281
- <div class="ReceiptWrapper">
282
- <img src="{statusImageUrl}" class="StatusLogo">
283
- <div class="TitleWrapper">
284
- <h2 class="Title">{title}</h2>
285
- <div class="SubTitle">{subTitle}</div>
286
- </div>
287
- </div>
288
- <div class="Text">{text}</div>
289
- {#if txnInfo.referenceId}
290
- <div class="Reference">{$_('reference', {values: {code: txnInfo.referenceId}})}</div>
291
- {/if}
292
- {#if receiptFields.length}
293
- {#each receiptFields as field, index}
294
- <div class="ReceiptField">
295
- {#if field.type === FieldTypes.QRCode}
296
- <div class="QRCode" on:click={() => {openUrlInNewTab(field.description)}}>
297
- <div bind:this={qrCodeContainer[qrCodeContainer.length]}>{field.defaultValue}</div>
298
- </div>
299
- {:else if field.type === FieldTypes.Html}
300
- <span>{@html field.defaultValue}</span>
301
- {:else if field.type === FieldTypes.Image}
302
- <img src="{field.defaultValue}" title="{field.description}" alt="">
303
- {:else if field.type === FieldTypes.Link}
304
- <span>{field.description}
305
- <a href="{field.defaultValue}" target="_blank" rel="noopener noreferrer">
306
- {field.Name}
307
- </a>
308
- </span>
309
- {:else}
310
- <span class="Label">{field.defaultValue}</span>
311
- {/if}
312
- </div>
313
- {/each}
314
- {/if}
315
- <button class="PrimaryButton" on:click={closeReceipt}>
316
- {$_('close')}
317
- </button>
318
- {:else if errorResponseCode && !showErrorOutsideReceiptPage}
319
- <cashier-error
320
- {assetsurl}
321
- {translationurl}
322
- {clientstylingurl}
323
- {clientstyling}
324
- hidebuttons="true"
325
- errorcode={errorResponseCode}
326
- >
327
- {#if errorResponseCode === ResponseCode.Maintenance}
328
- <div slot="icon">
329
- {#if assetsurl}
330
- <img src="{`${assetsurl}/maintenance.png`}" width="300px" alt="error">
331
- {:else}
332
- <img src={maintenanceImg} width="300px" alt="error">
333
- {/if}
334
- </div>
335
- <span slot="title">{$_('receipt.maintenance.title')}</span>
336
- <span slot="text">{$_('receipt.maintenance.text')}</span>
337
- {/if}
338
- </cashier-error>
339
- {/if}
340
- </div>
341
- </div>
342
- <style lang="scss">
343
-
344
- .CashierReceiptPageWidget {
345
- height: 100%;
346
- }
347
- .CashierReceiptPage {
348
- border-radius: var(--mmw--border-radius-medium-plus, 6px);
349
- background: var(--emw--color-background, #fff);
350
- padding: 0 0 var(--emw--spacing-small-minus, 10px) 0;
351
- margin: 0 auto;
352
- position: relative;
353
- word-wrap: break-word;
354
- }
355
-
356
- .ReceiptWrapper {
357
- width: 100%;
358
- height: 200px;
359
- border-bottom: 1px solid var(--mmw--color-black-transparency-10, rgba(0,0,0,.1));
360
- display: flex;
361
- align-items: flex-end;
362
- flex-direction: row-reverse;
363
- position: relative;
364
- }
365
- .TitleWrapper {
366
- display: flex;
367
- position: absolute;
368
- left: 0;
369
- bottom: 11px;
370
- flex-direction: column;
371
- justify-content: flex-end;
372
- flex-shrink: 0;
373
- }
374
- .Title {
375
- color: var(--mmw--color-grey-10, #111);
376
- font-size: var(--emw--font-size-x-large-plus, 26px);
377
- font-weight: var(--emw--font-weight-semibold, 500);
378
- margin-bottom: 0;
379
- line-height: var(--emw--font-size-x-large-plus, 26px);
380
- }
381
- .SubTitle {
382
- font-weight: var(--emw--font-weight-normal, 400);
383
- font-size: var(--emw--font-size-small, 14px);
384
- color: var(--mmw--color-grey-290, #666);
385
- margin-top: var(--emw--spacing-small, 12px);
386
- }
387
- .Text {
388
- padding: var(--emw--spacing-small, 12px) 0;
389
- font-size: var(--emw--font-size-small, 14px);
390
- color: var(--mmw--color-grey-10, #111);
391
- }
392
- .Reference {
393
- color: var(--mmw--color-grey-290, #666);
394
- font-size: var(--emw--font-size-x-small, 12px);
395
- font-weight: var(--emw--font-weight-normal, 400);
396
- margin: 0;
397
- }
398
-
399
- .PrimaryButton {
400
- color: var(--emw--color-white, #FFF);
401
- border: none;
402
- background: var(--emw--color-primary, #7EC51E);
403
- cursor: pointer;
404
- display: flex;
405
- align-items: center;
406
- justify-content: center;
407
- gap: 5px;
408
- border-radius: var(--emw--border-radius-medium, 5px);
409
- height: 36px;
410
- font-size: var(--emw--font-size-x-small, 12px);
411
- font-family: inherit;
412
- margin: var(--emw--spacing-large, 20px) 0;
413
- width: 100%;
414
- &:hover {
415
- background: var(--emw--color-hover, #71B11B);
416
- }
417
- &:active {
418
- background: var(--emw--color-active, #5C950F);
419
- }
420
- }
421
- .HeaderButtonContainer {
422
- position: absolute;
423
- z-index: 1;
424
- right: 0;
425
- display: flex;
426
- align-items: baseline;
427
- gap: var(--emw--spacing-small, 12px);
428
- padding: var(--emw--spacing-small, 12px) 0;
429
- & > span {
430
- cursor: pointer;
431
- }
432
- }
433
- .ReceiptField {
434
- font-weight: var(--emw--font-weight-normal, 400);
435
- font-size: var(--emw--font-size-small, 14px);
436
- line-height: var(--emw--font-size-medium, 16px);
437
- color: var(--emw--color-gray-150, #666);
438
- margin: var(--emw--spacing-small, 12px);
439
- }
440
-
441
- </style>
Binary file
Binary file
Binary file
Binary file
package/src/i18n.js DELETED
@@ -1,32 +0,0 @@
1
- import {
2
- dictionary,
3
- locale,
4
- init,
5
- addMessages,
6
- _
7
- } from 'svelte-i18n';
8
-
9
- init({
10
- fallbackLocale: 'en'
11
- });
12
-
13
- function setupI18n({ withLocale: _locale, translations }) {
14
- locale.subscribe((data) => {
15
- if (data == null) {
16
- dictionary.set(translations);
17
- locale.set(_locale);
18
- }
19
- }); // maybe we will need this to make sure that the i18n is set up only once
20
- /*dictionary.set(translations);
21
- locale.set(_locale);*/
22
- }
23
-
24
- function addNewMessages(lang, dict) {
25
- addMessages(lang, dict);
26
- }
27
-
28
- function setLocale(_locale) {
29
- locale.set(_locale);
30
- }
31
-
32
- export { _, setupI18n, addNewMessages, setLocale };
package/src/index.ts DELETED
@@ -1,4 +0,0 @@
1
- import CashierReceiptPage from './CashierReceiptPage.svelte';
2
-
3
- !customElements.get('cashier-receipt-page') && customElements.define('cashier-receipt-page', CashierReceiptPage);
4
- export default CashierReceiptPage;