@flarehr/apollo-super-campaign 0.1.1069 → 0.1.1070
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/dist/apollo-super-campaign.js +4 -4
- package/dist/index.html +170 -0
- package/package.json +1 -1
package/dist/index.html
ADDED
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
<!-- This index is for local development -->
|
|
2
|
+
<!doctype html>
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<title>Apollo Super Campaign</title>
|
|
6
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
8
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
9
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
10
|
+
<link
|
|
11
|
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
|
12
|
+
rel="stylesheet"
|
|
13
|
+
/>
|
|
14
|
+
<script type="module" crossorigin src="./apollo-super-campaign.js"></script>
|
|
15
|
+
</head>
|
|
16
|
+
<style>
|
|
17
|
+
:root {
|
|
18
|
+
--fl-color-primary: #1890ff;
|
|
19
|
+
--fl-color-primary-light: #74c0ff;
|
|
20
|
+
--fl-color-primary-dark: #006bce;
|
|
21
|
+
--fl-color-primary-disabled: #f5f5f5;
|
|
22
|
+
--fl-color-primary-hover: #40a9ff;
|
|
23
|
+
--fl-color-primary-focus: #40a9ff;
|
|
24
|
+
--fl-color-primary-text: white;
|
|
25
|
+
--fl-color-secondary: #d3d3d3;
|
|
26
|
+
--fl-color-secondary-light: #e1e1e1;
|
|
27
|
+
--fl-color-secondary-dark: #cecece;
|
|
28
|
+
--fl-color-secondary-disabled: #f5f5f5;
|
|
29
|
+
--fl-color-secondary-hover: #ebebeb;
|
|
30
|
+
--fl-color-secondary-focus: #ebebeb;
|
|
31
|
+
--fl-color-secondary-text: #262626;
|
|
32
|
+
}
|
|
33
|
+
</style>
|
|
34
|
+
<body>
|
|
35
|
+
<fieldset>
|
|
36
|
+
<legend>Settings</legend>
|
|
37
|
+
<div>
|
|
38
|
+
<input type="radio" id="campaign-radio" name="app" value="campaign" checked />
|
|
39
|
+
<label for="campaign-radio">apollo-super-campaign</label>
|
|
40
|
+
<input type="radio" data-testid="byof-radio" id="byof-radio" name="app" value="byof" />
|
|
41
|
+
<label for="byof-radio">apollo-super-byof-engagement</label>
|
|
42
|
+
</div>
|
|
43
|
+
<div style="padding-top: 1rem;">
|
|
44
|
+
<label for="fund-usi-dropdown">Choose a Fund USI (for byof-engagement only):</label>
|
|
45
|
+
<select id="fund-usi-dropdown" name="fundUsis">
|
|
46
|
+
<option value="53226460365001">Aware Super</option>
|
|
47
|
+
<option value="MTA0100AU">Spirit Super</option>
|
|
48
|
+
<option value="STA0100AU">Australian Super</option>
|
|
49
|
+
<option value="HST0100AU">Hesta</option>
|
|
50
|
+
<option value="someUsi">Random Unsupported fund</option>
|
|
51
|
+
</select>
|
|
52
|
+
</div>
|
|
53
|
+
</fieldset>
|
|
54
|
+
|
|
55
|
+
<div style="padding-top: 3rem;">
|
|
56
|
+
<button id="campaignReturnButton" style="display: none">Return</button>
|
|
57
|
+
<div id="super-campaign">
|
|
58
|
+
<apollo-super-campaign
|
|
59
|
+
backend-url="%VITE_BACKEND_URL%"
|
|
60
|
+
access-token="%VITE_ACCESS_TOKEN%"
|
|
61
|
+
/>
|
|
62
|
+
</div>
|
|
63
|
+
<div id="super-byof-engagement" style="display: none">
|
|
64
|
+
<button id="byofReturnButton" style="display: none">Return</button>
|
|
65
|
+
<apollo-super-byof-engagement
|
|
66
|
+
id="super-byof-engagement-element"
|
|
67
|
+
backend-url="%VITE_BACKEND_URL%"
|
|
68
|
+
access-token="%VITE_ACCESS_TOKEN%"
|
|
69
|
+
fund-usi="53226460365001"
|
|
70
|
+
/>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
<script>
|
|
75
|
+
// Wait till DOM loaded before attempting to hook up listeners
|
|
76
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
77
|
+
// Handle the picking of apps
|
|
78
|
+
const campaignOption = document.getElementById('campaign-radio');
|
|
79
|
+
const byofOption = document.getElementById('byof-radio');
|
|
80
|
+
const campaignDiv = document.getElementById('super-campaign');
|
|
81
|
+
const byofDiv = document.getElementById('super-byof-engagement');
|
|
82
|
+
|
|
83
|
+
const handleDisplay = () => {
|
|
84
|
+
if (campaignOption.checked) {
|
|
85
|
+
campaignDiv.style.display = 'block';
|
|
86
|
+
byofDiv.style.display = 'none';
|
|
87
|
+
} else {
|
|
88
|
+
campaignDiv.style.display = 'none';
|
|
89
|
+
byofDiv.style.display = 'block';
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
campaignOption.addEventListener('change', handleDisplay);
|
|
94
|
+
byofOption.addEventListener('change', handleDisplay);
|
|
95
|
+
|
|
96
|
+
// Handle the fund USI dropdown for byof-engagement
|
|
97
|
+
const byofEl = document.getElementById('super-byof-engagement-element');
|
|
98
|
+
const fundUsiDropdown = document.getElementById('fund-usi-dropdown');
|
|
99
|
+
|
|
100
|
+
const handleUsiDropdown = () => {
|
|
101
|
+
const fundUsi = fundUsiDropdown.value;
|
|
102
|
+
|
|
103
|
+
byofEl.setAttribute('fund-usi', fundUsi);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
fundUsiDropdown.addEventListener('change', handleUsiDropdown);
|
|
107
|
+
});
|
|
108
|
+
</script>
|
|
109
|
+
<script>
|
|
110
|
+
// Setup button to recreate apollo-super-campaign
|
|
111
|
+
const campaignReturnButton = document.getElementById('campaignReturnButton');
|
|
112
|
+
campaignReturnButton.onclick = () => {
|
|
113
|
+
const el = document.createElement('apollo-super-campaign');
|
|
114
|
+
el.setAttribute('backend-url', '%VITE_BACKEND_URL%');
|
|
115
|
+
el.setAttribute('access-token', '%VITE_ACCESS_TOKEN%');
|
|
116
|
+
document.body.appendChild(el);
|
|
117
|
+
campaignReturnButton.style.display = 'none';
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
// Setup button to recreate apollo-super-byof-engagement
|
|
121
|
+
const byofReturnButton = document.getElementById('byofReturnButton');
|
|
122
|
+
byofReturnButton.onclick = () => {
|
|
123
|
+
const el = document.createElement('apollo-super-byof-engagement');
|
|
124
|
+
el.setAttribute('backend-url', '%VITE_BACKEND_URL%');
|
|
125
|
+
el.setAttribute('access-token', '%VITE_ACCESS_TOKEN%');
|
|
126
|
+
el.setAttribute('fund-usi', document.getElementById('fund-usi-dropdown').value);
|
|
127
|
+
document.body.appendChild(el);
|
|
128
|
+
byofReturnButton.style.display = 'none';
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
// Listen to events meant for apollo
|
|
132
|
+
const events = [
|
|
133
|
+
'choose-another-fund-requested',
|
|
134
|
+
'fund-panel-shown',
|
|
135
|
+
'fund-tile-clicked',
|
|
136
|
+
'disclaimer-viewed',
|
|
137
|
+
'disclaimer-accepted',
|
|
138
|
+
'fund-pds-viewed',
|
|
139
|
+
'promoted-fund-joined',
|
|
140
|
+
'super-campaign-loaded',
|
|
141
|
+
'super-campaign-load-failed',
|
|
142
|
+
'super-campaign-failed',
|
|
143
|
+
'continue'
|
|
144
|
+
];
|
|
145
|
+
for (const event of events) {
|
|
146
|
+
document.addEventListener(event, (e) => {
|
|
147
|
+
console.log('apollo received', e, e.detail);
|
|
148
|
+
|
|
149
|
+
// Simulate navigating away in apollo by destroying the element
|
|
150
|
+
if (
|
|
151
|
+
e.type === 'choose-another-fund-requested' ||
|
|
152
|
+
e.type === 'promoted-fund-joined'
|
|
153
|
+
) {
|
|
154
|
+
document.getElementsByTagName('apollo-super-campaign')[0].remove();
|
|
155
|
+
campaignReturnButton.style.display = 'block';
|
|
156
|
+
} else if (e.type === 'continue') {
|
|
157
|
+
document.getElementsByTagName('apollo-super-byof-engagement')[0].remove();
|
|
158
|
+
byofReturnButton.style.display = 'block';
|
|
159
|
+
}
|
|
160
|
+
});
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
// Listen for iFrame events for debugging
|
|
164
|
+
const handleMessage = async (e) => {
|
|
165
|
+
//console.log('received iframe event', e.data);
|
|
166
|
+
};
|
|
167
|
+
window.addEventListener('message', handleMessage);
|
|
168
|
+
</script>
|
|
169
|
+
</body>
|
|
170
|
+
</html>
|