@heycater/qualification-funnel 1.2.2 → 1.3.0
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/artifacts/icons/catering_category/breakfast.svg +1 -0
- package/dist/artifacts/icons/catering_category/buffet.svg +1 -0
- package/dist/artifacts/icons/catering_category/business_lunch.svg +1 -0
- package/dist/artifacts/icons/catering_category/cakes_and_sweets.svg +1 -0
- package/dist/artifacts/icons/catering_category/drinks.svg +1 -0
- package/dist/artifacts/icons/catering_category/fine_dining.svg +1 -0
- package/dist/artifacts/icons/catering_category/fingerfood.svg +1 -0
- package/dist/artifacts/icons/catering_category/street_food.svg +1 -0
- package/dist/artifacts/images/survey/dietary_restrictions/meat.svg +1 -0
- package/dist/artifacts/images/survey/dietary_restrictions/vegan.svg +1 -0
- package/dist/artifacts/images/survey/dietary_restrictions/vegetarian.svg +1 -0
- package/dist/artifacts/locales/de/qualification.json +7 -1
- package/dist/artifacts/locales/en/qualification.json +7 -1
- package/dist/demo/README.md +65 -0
- package/dist/demo/iife-auto.html +53 -0
- package/dist/demo/iife-fullscreen.html +49 -0
- package/dist/demo/iife.html +134 -0
- package/dist/heycater-funnel.css +1 -0
- package/dist/heycater-funnel.iife.js +1655 -0
- package/dist/index.cjs.js +457 -286
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +5 -1
- package/dist/index.esm.js +1416 -1644
- package/dist/index.esm.js.map +1 -1
- package/dist/stats.html +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
# Qualification Funnel Demos
|
|
2
|
+
|
|
3
|
+
## IIFE Examples (Script Tag)
|
|
4
|
+
|
|
5
|
+
For non-React applications or simple integrations using script tags.
|
|
6
|
+
|
|
7
|
+
### Auto-init (iife-auto.html)
|
|
8
|
+
```html
|
|
9
|
+
<script>
|
|
10
|
+
window.__HEYCATER_CONFIG__ = {
|
|
11
|
+
graphqlEndpoint: 'https://api.heycater.com/graphql',
|
|
12
|
+
googleMapsApiKey: 'YOUR_KEY',
|
|
13
|
+
locale: 'de',
|
|
14
|
+
};
|
|
15
|
+
</script>
|
|
16
|
+
<link rel="stylesheet" href="path/to/heycater-funnel.css" />
|
|
17
|
+
<script src="path/to/heycater-funnel.iife.js"></script>
|
|
18
|
+
|
|
19
|
+
<!-- Widget auto-initializes on elements with this attribute -->
|
|
20
|
+
<div data-heycater-funnel></div>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### Manual mount (iife.html)
|
|
24
|
+
```html
|
|
25
|
+
<script>
|
|
26
|
+
window.__HEYCATER_CONFIG__ = { /* ... */ };
|
|
27
|
+
</script>
|
|
28
|
+
<link rel="stylesheet" href="path/to/heycater-funnel.css" />
|
|
29
|
+
<script src="path/to/heycater-funnel.iife.js"></script>
|
|
30
|
+
|
|
31
|
+
<div id="my-funnel"></div>
|
|
32
|
+
<script>
|
|
33
|
+
HeycaterFunnel.mount('#my-funnel');
|
|
34
|
+
</script>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## React Example
|
|
38
|
+
|
|
39
|
+
For React applications using the ESM build.
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
cd react-example
|
|
43
|
+
npm install
|
|
44
|
+
npm run dev
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Then open http://localhost:3001
|
|
48
|
+
|
|
49
|
+
### Usage in React
|
|
50
|
+
```tsx
|
|
51
|
+
import { QualificationFunnel } from '@heycater/qualification-funnel';
|
|
52
|
+
import '@heycater/qualification-funnel/style.css';
|
|
53
|
+
|
|
54
|
+
function App() {
|
|
55
|
+
return (
|
|
56
|
+
<QualificationFunnel
|
|
57
|
+
apiEndpoint="https://api.heycater.com/graphql"
|
|
58
|
+
googleMapsApiKey="YOUR_KEY"
|
|
59
|
+
locale="de"
|
|
60
|
+
onBackground="light"
|
|
61
|
+
highlightColor="primary"
|
|
62
|
+
/>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
```
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="de">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Heycater Funnel - Auto-init Demo</title>
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 20px;
|
|
11
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
12
|
+
background-color: #f5f5f5;
|
|
13
|
+
}
|
|
14
|
+
.info {
|
|
15
|
+
max-width: 800px;
|
|
16
|
+
margin: 0 auto 20px;
|
|
17
|
+
padding: 15px;
|
|
18
|
+
background: #e7f3ff;
|
|
19
|
+
border-radius: 8px;
|
|
20
|
+
font-size: 14px;
|
|
21
|
+
}
|
|
22
|
+
.funnel-container {
|
|
23
|
+
width: 100%;
|
|
24
|
+
margin: 0 auto;
|
|
25
|
+
background: #fff;
|
|
26
|
+
border-radius: 8px;
|
|
27
|
+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
28
|
+
min-height: 500px;
|
|
29
|
+
}
|
|
30
|
+
</style>
|
|
31
|
+
</head>
|
|
32
|
+
<body>
|
|
33
|
+
<div class="info">
|
|
34
|
+
<strong>Auto-init mode:</strong> Using <code>data-heycater-funnel</code> attribute.
|
|
35
|
+
No JavaScript needed - widget initializes automatically.
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<div class="funnel-container">
|
|
39
|
+
<!-- Widget auto-initializes on elements with this attribute -->
|
|
40
|
+
<div data-heycater-funnel></div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<script>
|
|
44
|
+
window.__HEYCATER_CONFIG__ = {
|
|
45
|
+
graphqlEndpoint: 'https://api.heycater.com/graphql',
|
|
46
|
+
googleMapsApiKey: 'AIzaSyCrunI86W7p8zk5yoGX9i1s0SzIJ7GTRDU',
|
|
47
|
+
locale: 'de',
|
|
48
|
+
};
|
|
49
|
+
</script>
|
|
50
|
+
<link rel="stylesheet" href="../heycater-funnel.css" />
|
|
51
|
+
<script src="../heycater-funnel.iife.js"></script>
|
|
52
|
+
</body>
|
|
53
|
+
</html>
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="de">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Heycater Funnel - Fullscreen Mode</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
9
|
+
html, body { height: 100%; }
|
|
10
|
+
.lang-switcher {
|
|
11
|
+
position: fixed;
|
|
12
|
+
top: 10px;
|
|
13
|
+
right: 10px;
|
|
14
|
+
z-index: 100;
|
|
15
|
+
display: flex;
|
|
16
|
+
gap: 8px;
|
|
17
|
+
}
|
|
18
|
+
.lang-switcher button {
|
|
19
|
+
padding: 6px 14px;
|
|
20
|
+
border: 1px solid #ccc;
|
|
21
|
+
border-radius: 4px;
|
|
22
|
+
background: #fff;
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
font-size: 14px;
|
|
25
|
+
}
|
|
26
|
+
.lang-switcher button:hover { background: #f0f0f0; }
|
|
27
|
+
</style>
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
<div class="lang-switcher">
|
|
31
|
+
<button onclick="HeycaterFunnel.setLocale('de')">DE</button>
|
|
32
|
+
<button onclick="HeycaterFunnel.setLocale('en')">EN</button>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<div data-heycater-funnel style="min-height: 100vh;"></div>
|
|
36
|
+
|
|
37
|
+
<script>
|
|
38
|
+
window.__HEYCATER_CONFIG__ = {
|
|
39
|
+
graphqlEndpoint: 'https://api.heycater.com/graphql',
|
|
40
|
+
googleMapsApiKey: 'AIzaSyCrunI86W7p8zk5yoGX9i1s0SzIJ7GTRDU',
|
|
41
|
+
locale: 'de',
|
|
42
|
+
mode: 'fullscreen',
|
|
43
|
+
};
|
|
44
|
+
</script>
|
|
45
|
+
|
|
46
|
+
<link rel="stylesheet" href="../heycater-funnel.css" />
|
|
47
|
+
<script src="../heycater-funnel.iife.js"></script>
|
|
48
|
+
</body>
|
|
49
|
+
</html>
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="de">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Heycater Funnel Widget - Demo</title>
|
|
7
|
+
<style>
|
|
8
|
+
* {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
}
|
|
11
|
+
body {
|
|
12
|
+
margin: 0;
|
|
13
|
+
padding: 20px;
|
|
14
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
15
|
+
background-color: #f5f5f5;
|
|
16
|
+
}
|
|
17
|
+
.header {
|
|
18
|
+
max-width: 800px;
|
|
19
|
+
margin: 0 auto 20px;
|
|
20
|
+
padding: 20px;
|
|
21
|
+
background: #fff;
|
|
22
|
+
border-radius: 8px;
|
|
23
|
+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
24
|
+
}
|
|
25
|
+
.header h1 {
|
|
26
|
+
margin: 0 0 10px;
|
|
27
|
+
color: #333;
|
|
28
|
+
}
|
|
29
|
+
.header p {
|
|
30
|
+
margin: 0;
|
|
31
|
+
color: #666;
|
|
32
|
+
}
|
|
33
|
+
.status {
|
|
34
|
+
margin-top: 15px;
|
|
35
|
+
padding: 10px;
|
|
36
|
+
border-radius: 4px;
|
|
37
|
+
font-size: 14px;
|
|
38
|
+
}
|
|
39
|
+
.status.success {
|
|
40
|
+
background: #d4edda;
|
|
41
|
+
color: #155724;
|
|
42
|
+
}
|
|
43
|
+
.status.error {
|
|
44
|
+
background: #f8d7da;
|
|
45
|
+
color: #721c24;
|
|
46
|
+
}
|
|
47
|
+
.status.info {
|
|
48
|
+
background: #cce5ff;
|
|
49
|
+
color: #004085;
|
|
50
|
+
}
|
|
51
|
+
.config-info {
|
|
52
|
+
margin-top: 15px;
|
|
53
|
+
padding: 10px;
|
|
54
|
+
background: #f8f9fa;
|
|
55
|
+
border-radius: 4px;
|
|
56
|
+
font-family: monospace;
|
|
57
|
+
font-size: 12px;
|
|
58
|
+
}
|
|
59
|
+
.funnel-container {
|
|
60
|
+
width: 100%;
|
|
61
|
+
margin: 0 auto;
|
|
62
|
+
background: #fff;
|
|
63
|
+
border-radius: 8px;
|
|
64
|
+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
65
|
+
min-height: 500px;
|
|
66
|
+
}
|
|
67
|
+
</style>
|
|
68
|
+
</head>
|
|
69
|
+
<body>
|
|
70
|
+
<div class="header">
|
|
71
|
+
<h1>Heycater Qualification Funnel</h1>
|
|
72
|
+
<p>Production build demo - testing IIFE widget bundle</p>
|
|
73
|
+
|
|
74
|
+
<div id="status" class="status info">Loading widget...</div>
|
|
75
|
+
|
|
76
|
+
<div class="config-info">
|
|
77
|
+
<strong>Configuration:</strong><br>
|
|
78
|
+
<span id="config-display"></span>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<div class="funnel-container">
|
|
83
|
+
<div id="heycater-funnel"></div>
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<script>
|
|
87
|
+
// Configuration - simulating what parent app would provide
|
|
88
|
+
window.__HEYCATER_CONFIG__ = {
|
|
89
|
+
graphqlEndpoint: 'https://api.heycater.com/graphql',
|
|
90
|
+
googleMapsApiKey: 'AIzaSyCrunI86W7p8zk5yoGX9i1s0SzIJ7GTRDU',
|
|
91
|
+
locale: 'de',
|
|
92
|
+
isProduction: false,
|
|
93
|
+
// bugsnagApiKey: 'your-key-here', // Uncomment to enable Bugsnag
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
// Display config
|
|
97
|
+
document.getElementById('config-display').innerHTML =
|
|
98
|
+
'API: ' + window.__HEYCATER_CONFIG__.graphqlEndpoint + '<br>' +
|
|
99
|
+
'Google Maps: ' + (window.__HEYCATER_CONFIG__.googleMapsApiKey ? 'Configured' : 'Not set') + '<br>' +
|
|
100
|
+
'Bugsnag: ' + (window.__HEYCATER_CONFIG__.bugsnagApiKey ? 'Enabled' : 'Disabled') + '<br>' +
|
|
101
|
+
'Locale: ' + window.__HEYCATER_CONFIG__.locale;
|
|
102
|
+
</script>
|
|
103
|
+
|
|
104
|
+
<!-- Load the built widget CSS and JS -->
|
|
105
|
+
<link rel="stylesheet" href="../heycater-funnel.css" />
|
|
106
|
+
<script src="../heycater-funnel.iife.js"></script>
|
|
107
|
+
|
|
108
|
+
<script>
|
|
109
|
+
// Check if widget loaded successfully
|
|
110
|
+
window.addEventListener('load', function() {
|
|
111
|
+
var statusEl = document.getElementById('status');
|
|
112
|
+
|
|
113
|
+
if (window.HeycaterFunnel && typeof window.HeycaterFunnel.mount === 'function') {
|
|
114
|
+
statusEl.className = 'status success';
|
|
115
|
+
statusEl.innerHTML = '✓ Widget loaded successfully! HeycaterFunnel.mount() is available.';
|
|
116
|
+
|
|
117
|
+
// Mount the widget
|
|
118
|
+
window.HeycaterFunnel.mount('#heycater-funnel');
|
|
119
|
+
} else {
|
|
120
|
+
statusEl.className = 'status error';
|
|
121
|
+
statusEl.innerHTML = '✗ Widget failed to load. Check console for errors.';
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
// Log any errors
|
|
126
|
+
window.addEventListener('error', function(e) {
|
|
127
|
+
console.error('Widget error:', e);
|
|
128
|
+
var statusEl = document.getElementById('status');
|
|
129
|
+
statusEl.className = 'status error';
|
|
130
|
+
statusEl.innerHTML = '✗ Error: ' + e.message;
|
|
131
|
+
});
|
|
132
|
+
</script>
|
|
133
|
+
</body>
|
|
134
|
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.rdp{--rdp-cell-size: 40px;--rdp-caption-font-size: 18px;--rdp-accent-color: #0000ff;--rdp-background-color: #e7edff;--rdp-accent-color-dark: #3003e1;--rdp-background-color-dark: #180270;--rdp-outline: 2px solid var(--rdp-accent-color);--rdp-outline-selected: 3px solid var(--rdp-accent-color);--rdp-selected-color: #fff;margin:1em}.rdp-vhidden{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute!important;top:0;width:1px!important;height:1px!important;padding:0!important;overflow:hidden!important;clip:rect(1px,1px,1px,1px)!important;border:0!important}.rdp-button_reset{appearance:none;position:relative;margin:0;padding:0;cursor:default;color:inherit;background:none;font:inherit;-moz-appearance:none;-webkit-appearance:none}.rdp-button_reset:focus-visible{outline:none}.rdp-button{border:2px solid transparent}.rdp-button[disabled]:not(.rdp-day_selected){opacity:.25}.rdp-button:not([disabled]){cursor:pointer}.rdp-button:focus-visible:not([disabled]){color:inherit;background-color:var(--rdp-background-color);border:var(--rdp-outline)}.rdp-button:hover:not([disabled]):not(.rdp-day_selected){background-color:var(--rdp-background-color)}.rdp-months{display:flex}.rdp-month{margin:0 1em}.rdp-month:first-child{margin-left:0}.rdp-month:last-child{margin-right:0}.rdp-table{margin:0;max-width:calc(var(--rdp-cell-size) * 7);border-collapse:collapse}.rdp-with_weeknumber .rdp-table{max-width:calc(var(--rdp-cell-size) * 8);border-collapse:collapse}.rdp-caption{display:flex;align-items:center;justify-content:space-between;padding:0;text-align:left}.rdp-multiple_months .rdp-caption{position:relative;display:block;text-align:center}.rdp-caption_dropdowns{position:relative;display:inline-flex}.rdp-caption_label{position:relative;z-index:1;display:inline-flex;align-items:center;margin:0;padding:0 .25em;white-space:nowrap;color:currentColor;border:0;border:2px solid transparent;font-family:inherit;font-size:var(--rdp-caption-font-size);font-weight:700}.rdp-nav{white-space:nowrap}.rdp-multiple_months .rdp-caption_start .rdp-nav{position:absolute;top:50%;left:0;transform:translateY(-50%)}.rdp-multiple_months .rdp-caption_end .rdp-nav{position:absolute;top:50%;right:0;transform:translateY(-50%)}.rdp-nav_button{display:inline-flex;align-items:center;justify-content:center;width:var(--rdp-cell-size);height:var(--rdp-cell-size);padding:.25em;border-radius:100%}.rdp-dropdown_year,.rdp-dropdown_month{position:relative;display:inline-flex;align-items:center}.rdp-dropdown{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;z-index:2;top:0;bottom:0;left:0;width:100%;margin:0;padding:0;cursor:inherit;opacity:0;border:none;background-color:transparent;font-family:inherit;font-size:inherit;line-height:inherit}.rdp-dropdown[disabled]{opacity:unset;color:unset}.rdp-dropdown:focus-visible:not([disabled])+.rdp-caption_label{background-color:var(--rdp-background-color);border:var(--rdp-outline);border-radius:6px}.rdp-dropdown_icon{margin:0 0 0 5px}.rdp-head{border:0}.rdp-head_row,.rdp-row{height:100%}.rdp-head_cell{vertical-align:middle;font-size:.75em;font-weight:700;text-align:center;height:100%;height:var(--rdp-cell-size);padding:0;text-transform:uppercase}.rdp-tbody{border:0}.rdp-tfoot{margin:.5em}.rdp-cell{width:var(--rdp-cell-size);height:100%;height:var(--rdp-cell-size);padding:0;text-align:center}.rdp-weeknumber{font-size:.75em}.rdp-weeknumber,.rdp-day{display:flex;overflow:hidden;align-items:center;justify-content:center;box-sizing:border-box;width:var(--rdp-cell-size);max-width:var(--rdp-cell-size);height:var(--rdp-cell-size);margin:0;border:2px solid transparent;border-radius:100%}.rdp-day_today:not(.rdp-day_outside){font-weight:700}.rdp-day_selected,.rdp-day_selected:focus-visible,.rdp-day_selected:hover{color:var(--rdp-selected-color);opacity:1;background-color:var(--rdp-accent-color)}.rdp-day_outside{opacity:.5}.rdp-day_selected:focus-visible{outline:var(--rdp-outline);outline-offset:2px;z-index:1}.rdp:not([dir=rtl]) .rdp-day_range_start:not(.rdp-day_range_end){border-top-right-radius:0;border-bottom-right-radius:0}.rdp:not([dir=rtl]) .rdp-day_range_end:not(.rdp-day_range_start){border-top-left-radius:0;border-bottom-left-radius:0}.rdp[dir=rtl] .rdp-day_range_start:not(.rdp-day_range_end){border-top-left-radius:0;border-bottom-left-radius:0}.rdp[dir=rtl] .rdp-day_range_end:not(.rdp-day_range_start){border-top-right-radius:0;border-bottom-right-radius:0}.rdp-day_range_end.rdp-day_range_start{border-radius:100%}.rdp-day_range_middle{border-radius:0}@font-face{font-family:Poppins;src:url(/fonts/subsetted/Poppins-Regular-subset.woff2) format("woff2"),url(/fonts/Poppins-Regular.woff) format("woff"),url(/fonts/Poppins-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Poppins;src:url(/fonts/subsetted/Poppins-Medium-subset.woff2) format("woff2"),url(/fonts/Poppins-Medium.woff) format("woff"),url(/fonts/Poppins-Medium.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Poppins;src:url(/fonts/subsetted/Poppins-SemiBold-subset.woff2) format("woff2"),url(/fonts/Poppins-SemiBold.woff) format("woff"),url(/fonts/Poppins-SemiBold.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Poppins;src:url(/fonts/subsetted/Poppins-Bold-subset.woff2) format("woff2"),url(/fonts/Poppins-Bold.woff) format("woff"),url(/fonts/Poppins-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}
|