/
index.html
165 lines (133 loc) · 6.33 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ubio application bundle</title>
<link href="/src/css/index.css" rel="stylesheet">
<script type="module">
import { createEndUserSdk } from '/web_modules/@ubio/client-library.js';
import { createApp } from '/src/main.js';
import modal from './builtin-templates/modal.js';
// TODO: move somewhere (cut-n-paste from main.js)
// this code being moved from sdk core because it depends on modal()
// which should be part of generated codebase, due "tooltip" part
// of requirements of sdk-97
// (https://ubio-automation.atlassian.net/jira/software/projects/SDK/boards/16?selectedIssue=SDK-97)
let tdsTimeout;
async function handle3dsEvent(event) {
if (event === 'tdsStart') {
clearTimeout(tdsTimeout);
let res;
try {
res = await sdk.getActiveTds();
} catch (err) {
console.warn(err);
return;
}
const iframe = document.createElement('iframe');
iframe.src = res.url;
const iframeContent = modal(iframe, { isLocked: true });
iframeContent.show({ hidden: true });
tdsTimeout = setTimeout(() => iframeContent.show(), 5000);
}
if (event === 'tdsFinish') {
clearTimeout(tdsTimeout);
modal().close();
}
}
// ENDTODO: move somewhere
// TODO: also this file is a copy of ./application-template/public/index.html
// which tends to divert from it
// it might be a good idea to make development process similar to production
// i.e. start it by running npx command and then somehow wire with live codebase of sdk core (npm link or smth)
// rather than copying a duplicate of a file dangling in the root, but not serving any purpose other than
// development
async function getExisting() {
const existingJob = localStorage.getItem(`job-session`);
if (!existingJob) {
return null;
}
try {
const { token, jobId, serviceId, local, domain } = JSON.parse(existingJob);
const sdk = createEndUserSdk({ token, jobId, serviceId });
const job = await sdk.getJob();
sdk.trackJob(async (eventName, jobEvent) => {
switch (eventName) {
case 'tdsStart':
case 'tdsFinish':
return handle3dsEvent(eventName);
case 'close':
return modal().close();
}
});
if (job.status === 'success' || job.status === 'fail') {
console.log(`Stored session job status was: ${job.status}`);
return null;
}
return { sdk, local, domain };
} catch (error) {
console.error(error);
return null;
}
}
async function createJob(domain) {
const res = await fetch('https://ubio-application-bundle-test-server.glitch.me/create-job', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ domain })
});
if (!res.ok) {
throw new Error(`Unexpected response from glitch: ${res.status}`);
}
const { token, jobId, serviceId, local, input } = await res.json();
localStorage.setItem(`job-session`, JSON.stringify({ token, jobId, serviceId, local, domain }));
const sdk = createEndUserSdk({ token, jobId, serviceId });
return { sdk, local, input };
}
async function init() {
const domain = new URLSearchParams(window.location.search).get('domain') || 'hotel-booking';
const hash = window.location.hash;
let existing = await getExisting();
let shouldClear = false;
if (!existing) {
shouldClear = true;
console.log('No existing session found.');
} else if (hash === '') {
shouldClear = true;
console.log('Hash is \'\'.');
} else if (existing.domain !== domain) {
shouldClear = true;
console.log(`Mismatching domains: ${existing.domain} !== ${domain}`);
}
let job;
try {
job = await existing.sdk.getJob();
} catch (e) {}
if (job && job.finishedAt) {
console.log('Existing session found for job in end state.');
shouldClear = true;
}
if (shouldClear) {
if (job && !job.finishedAt) {
console.log('Cancelling job.');
await existing.sdk.cancelJob();
}
console.log('Clearing storage.');
existing = null;
localStorage.clear();
}
if (hash !== '' && !existing) {
window.location.hash = '';
}
const { pages, cache, layout, notFound, error } = (await import(`/templates/${domain}.config.js`)).default;
const { sdk, local, input } = existing || await createJob(domain);
const mountPoint = document.querySelector('#app');
const app = createApp({ mountPoint, pages, cache, layout, sdk, notFound, error, local, input });
}
init();
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>