|
3 | 3 | import { hideNotification, shouldShowNotification } from '$lib/helpers/notifications'; |
4 | 4 | import { app } from '$lib/stores/app'; |
5 | 5 | import { |
6 | | - type BottomModalAlertAction, |
7 | 6 | type BottomModalAlertItem, |
8 | 7 | bottomModalAlertsConfig, |
9 | 8 | dismissBottomModalAlert, |
|
20 | 19 | import { goto } from '$app/navigation'; |
21 | 20 | import { Typography } from '@appwrite.io/pink-svelte'; |
22 | 21 |
|
23 | | - let currentIndex = 0; |
24 | | - let openModalOnMobile = false; |
| 22 | + let currentIndex = $state(0); |
| 23 | + let openModalOnMobile = $state(false); |
25 | 24 |
|
26 | | - function getPageScope(pathname: string) { |
27 | | - const isProjectPage = pathname.includes('project-[region]-[project]'); |
28 | | - const isOrganizationPage = pathname.includes('organization-[organization]'); |
| 25 | + function getPageScope(route: string) { |
| 26 | + const isProjectPage = route.includes('project-[region]-[project]'); |
| 27 | + const isOrganizationPage = route.includes('organization-[organization]'); |
29 | 28 |
|
30 | 29 | return { isProjectPage, isOrganizationPage }; |
31 | 30 | } |
32 | 31 |
|
33 | | - function filterModalAlerts(alerts: BottomModalAlertItem[], pathname: string) { |
34 | | - const { isProjectPage, isOrganizationPage } = getPageScope(pathname); |
| 32 | + function filterModalAlerts(alerts: BottomModalAlertItem[], route: string) { |
| 33 | + const { isProjectPage, isOrganizationPage } = getPageScope(route); |
35 | 34 |
|
36 | 35 | return alerts |
37 | 36 | .sort((a, b) => b.importance - a.importance) |
|
51 | 50 | }); |
52 | 51 | } |
53 | 52 |
|
54 | | - $: filteredModalAlerts = filterModalAlerts($bottomModalAlertsConfig.alerts, page.route.id); |
| 53 | + const bottomModalAlerts = $derived($bottomModalAlertsConfig.alerts); |
55 | 54 |
|
56 | | - $: currentModalAlert = filteredModalAlerts[currentIndex] as BottomModalAlertItem; |
| 55 | + const filteredModalAlerts = $derived(filterModalAlerts(bottomModalAlerts, page.route.id)); |
57 | 56 |
|
58 | | - $: hasOnlyPrimaryCta = typeof currentModalAlert?.learnMore === 'undefined'; |
| 57 | + const currentModalAlert = $derived(filteredModalAlerts[currentIndex] as BottomModalAlertItem); |
59 | 58 |
|
60 | | - function handleClose() { |
61 | | - filteredModalAlerts.forEach((alert) => { |
| 59 | + const hasOnlyPrimaryCta = $derived(typeof currentModalAlert?.learnMore === 'undefined'); |
| 60 | +
|
| 61 | + const isOnOnboarding = $derived(page.route.id.includes('(console)/onboarding')); |
| 62 | +
|
| 63 | + function handleClose(id: string | null = null) { |
| 64 | + const alerts = !id |
| 65 | + ? filteredModalAlerts |
| 66 | + : filteredModalAlerts.filter((alert) => alert.id === id); |
| 67 | +
|
| 68 | + alerts.forEach((alert) => { |
62 | 69 | const modalAlert = alert; |
63 | 70 | dismissBottomModalAlert(modalAlert.id); |
64 | 71 | hideNotification(modalAlert.id, { coolOffPeriod: 24 * 365 }); |
65 | 72 | if (modalAlert.closed) modalAlert.closed(); |
66 | 73 | }); |
| 74 | +
|
| 75 | + // reset `currentIndex` if we removed the last item |
| 76 | + if (currentIndex >= filteredModalAlerts.length - 1) { |
| 77 | + currentIndex = Math.max(0, filteredModalAlerts.length - 2); |
| 78 | + } |
67 | 79 | } |
68 | 80 |
|
69 | 81 | function showNext() { |
|
114 | 126 | } |
115 | 127 |
|
116 | 128 | // the button component cannot have both href and on:click! |
117 | | - function triggerWindowLink(alertAction: BottomModalAlertAction, event?: string) { |
| 129 | + function triggerWindowLink(alert: BottomModalAlertItem, event?: string) { |
| 130 | + const alertAction = alert.cta; |
118 | 131 | const shouldShowUpgrade = showUpgrade(); |
| 132 | +
|
| 133 | + // for correct event tracking after removal |
| 134 | + const currentModalId = currentModalAlert.id; |
| 135 | +
|
119 | 136 | const url = shouldShowUpgrade |
120 | 137 | ? $upgradeURL |
121 | 138 | : alertAction.link({ |
|
130 | 147 | } |
131 | 148 |
|
132 | 149 | if (alertAction?.hideOnClick === true) { |
133 | | - // be careful of this one. |
134 | | - // once clicked, its gone! |
135 | | - handleClose(); |
| 150 | + handleClose(alert.id); // gone! |
136 | 151 | } |
137 | 152 |
|
138 | 153 | trackEvent(Click.PromoClick, { |
139 | | - promo: currentModalAlert.id, |
140 | | - type: shouldShowUpgrade ? 'upgrade' : (event ?? `cta_click_${currentModalAlert.id}`) |
| 154 | + promo: currentModalId, |
| 155 | + type: shouldShowUpgrade ? 'upgrade' : (event ?? `cta_click_${currentModalId}`) |
141 | 156 | }); |
142 | 157 | } |
143 | 158 |
|
|
156 | 171 | } |
157 | 172 | } |
158 | 173 |
|
159 | | - onMount(() => { |
160 | | - addBottomModalAlerts(); |
161 | | - }); |
| 174 | + onMount(addBottomModalAlerts); |
162 | 175 | </script> |
163 | 176 |
|
164 | | -{#if filteredModalAlerts.length > 0 && currentModalAlert && !page.url.pathname.includes('console/onboarding')} |
| 177 | +{#if !isOnOnboarding && filteredModalAlerts.length > 0 && currentModalAlert} |
165 | 178 | {@const shouldShowUpgrade = showUpgrade()} |
166 | 179 | <div class="main-alert-wrapper is-not-mobile"> |
167 | 180 | <div class="alert-container"> |
|
170 | 183 | <button |
171 | 184 | aria-label="Close modal" |
172 | 185 | class="icon-inline-tag" |
173 | | - on:click={() => handleClose()}> |
| 186 | + onclick={() => handleClose()}> |
174 | 187 | <svg |
175 | 188 | xmlns="http://www.w3.org/2000/svg" |
176 | 189 | width="20" |
|
208 | 221 | <button |
209 | 222 | aria-label="Previous" |
210 | 223 | class="icon-cheveron-left" |
211 | | - on:click={showPrevious} |
| 224 | + style:cursor={currentIndex !== 0 ? 'pointer' : undefined} |
| 225 | + onclick={showPrevious} |
212 | 226 | disabled={currentIndex === 0} |
213 | 227 | class:active={currentIndex > 0}></button> |
214 | 228 |
|
215 | 229 | <button |
216 | 230 | aria-label="Next" |
217 | 231 | class="icon-cheveron-right" |
218 | | - on:click={showNext} |
| 232 | + onclick={showNext} |
| 233 | + style:cursor={currentIndex !== |
| 234 | + filteredModalAlerts.length - 1 |
| 235 | + ? 'pointer' |
| 236 | + : undefined} |
219 | 237 | disabled={currentIndex === filteredModalAlerts.length - 1} |
220 | 238 | class:active={currentIndex !== |
221 | 239 | filteredModalAlerts.length - 1}></button> |
|
243 | 261 | fullWidthMobile |
244 | 262 | secondary={!hasOnlyPrimaryCta} |
245 | 263 | class={`${hasOnlyPrimaryCta ? 'only-primary-cta' : ''}`} |
246 | | - on:click={() => triggerWindowLink(currentModalAlert.cta)}> |
| 264 | + on:click={() => triggerWindowLink(currentModalAlert)}> |
247 | 265 | {currentModalAlert.cta.text} |
248 | 266 | </Button> |
249 | 267 |
|
|
276 | 294 | <button |
277 | 295 | aria-label="Close modal" |
278 | 296 | class="icon-inline-tag" |
279 | | - on:click={() => handleClose()}> |
| 297 | + onclick={() => handleClose()}> |
280 | 298 | <svg |
281 | 299 | xmlns="http://www.w3.org/2000/svg" |
282 | 300 | width="20" |
|
314 | 332 | <button |
315 | 333 | aria-label="Previous" |
316 | 334 | class="icon-cheveron-left" |
317 | | - on:click={showPrevious} |
| 335 | + style:cursor={currentIndex !== 0 |
| 336 | + ? 'pointer' |
| 337 | + : undefined} |
| 338 | + onclick={showPrevious} |
318 | 339 | disabled={currentIndex === 0} |
319 | 340 | class:active={currentIndex > 0}></button> |
320 | 341 |
|
321 | 342 | <button |
322 | 343 | aria-label="Next" |
323 | 344 | class="icon-cheveron-right" |
324 | | - on:click={showNext} |
| 345 | + onclick={showNext} |
| 346 | + style:cursor={currentIndex !== |
| 347 | + filteredModalAlerts.length - 1 |
| 348 | + ? 'pointer' |
| 349 | + : undefined} |
325 | 350 | disabled={currentIndex === |
326 | 351 | filteredModalAlerts.length - 1} |
327 | 352 | class:active={currentIndex !== |
|
352 | 377 | fullWidthMobile |
353 | 378 | on:click={() => { |
354 | 379 | openModalOnMobile = false; |
355 | | - triggerWindowLink(currentModalAlert.cta); |
| 380 | + triggerWindowLink(currentModalAlert); |
356 | 381 | }}> |
357 | 382 | {shouldShowUpgrade |
358 | 383 | ? 'Upgrade plan' |
|
382 | 407 | {:else} |
383 | 408 | {@const mobileConfig = getMobileWindowConfig()} |
384 | 409 | <!-- we don't need keydown because we show this only on mobile --> |
385 | | - <!-- svelte-ignore a11y-click-events-have-key-events --> |
| 410 | + <!-- svelte-ignore a11y_click_events_have_key_events --> |
386 | 411 | <div |
387 | 412 | tabindex="0" |
388 | 413 | role="button" |
389 | 414 | class:showing={!openModalOnMobile} |
390 | 415 | class="card notification-card u-width-full-line" |
391 | | - on:click={() => { |
| 416 | + onclick={() => { |
392 | 417 | if (mobileConfig.cta) { |
393 | 418 | // navigate manually! |
394 | 419 | triggerMobileWindowLink(); |
|
401 | 426 | <Typography.Text variant="m-500" color="--fgcolor-neutral-primary"> |
402 | 427 | {currentModalAlert.title} |
403 | 428 | </Typography.Text> |
404 | | - <button on:click={hideAllModalAlerts} aria-label="Close"> |
| 429 | + <button onclick={hideAllModalAlerts} aria-label="Close"> |
405 | 430 | <span class="icon-x"></span> |
406 | 431 | </button> |
407 | 432 | </div> |
|
0 commit comments