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