Skip to content

Commit a121422

Browse files
ItzNotABugItzNotABug
committed
add: enterprise trial banner.
1 parent f65942b commit a121422

File tree

5 files changed

+167
-38
lines changed

5 files changed

+167
-38
lines changed

‎src/lib/components/billing/gradientBanner.svelte

Lines changed: 48 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
<script lang="ts">
22
import { base } from '$app/paths';
3-
import { isTabletViewport } from '$lib/stores/viewport';
4-
import { createEventDispatcher, onMount, onDestroy } from 'svelte';
53
import { Button } from '$lib/elements/forms';
64
import { Icon } from '@appwrite.io/pink-svelte';
75
import { IconX } from '@appwrite.io/pink-icons-svelte';
6+
import { isTabletViewport } from '$lib/stores/viewport';
7+
import PinkBackground from '$lib/images/pink-background.svg';
8+
import { createEventDispatcher, onMount, onDestroy } from 'svelte';
9+
10+
export let variant: 'gradient' | 'image' = 'gradient';
811
912
let container: HTMLElement;
1013
const dispatch = createEventDispatcher();
@@ -35,23 +38,32 @@
3538

3639
<svelte:window on:resize={setNavigationHeight} />
3740

38-
<div bind:this={container} class="top-banner alert is-action is-action-and-top-sticky">
39-
<div class="top-banner-bg">
40-
<div class="top-banner-bg-1">
41-
<img
42-
src={`${base}/images/top-banner/bg-pink-desktop.svg`}
43-
width="1283"
44-
height="1278"
45-
alt="" />
41+
<div
42+
bind:this={container}
43+
class:darker={variant === 'image'}
44+
class="top-banner alert is-action is-action-and-top-sticky">
45+
{#if variant === 'gradient'}
46+
<div class="top-banner-bg">
47+
<div class="top-banner-bg-1">
48+
<img
49+
src={`${base}/images/top-banner/bg-pink-desktop.svg`}
50+
width="1283"
51+
height="1278"
52+
alt="" />
53+
</div>
54+
<div class="top-banner-bg-2">
55+
<img
56+
src={`${base}/images/top-banner/bg-mint-desktop.svg`}
57+
width="1051"
58+
height="1271"
59+
alt="" />
60+
</div>
4661
</div>
47-
<div class="top-banner-bg-2">
48-
<img
49-
src={`${base}/images/top-banner/bg-mint-desktop.svg`}
50-
width="1051"
51-
height="1271"
52-
alt="" />
62+
{:else}
63+
<div class="centered-image-only">
64+
<img src={PinkBackground} width="1283" height="1278" alt="" />
5365
</div>
54-
</div>
66+
{/if}
5567

5668
<div class="top-banner-content u-color-text-primary">
5769
<slot />
@@ -62,12 +74,30 @@
6274
</Button>
6375
</div>
6476

65-
<style>
77+
<style lang="scss">
6678
.alert {
6779
top: 0;
6880
width: 100%;
6981
z-index: 100;
7082
position: fixed;
83+
84+
&.darker {
85+
background: var(--bgcolor-neutral-default);
86+
}
87+
}
88+
89+
.centered-image-only {
90+
top: 0;
91+
width: 100%;
92+
height: 100%;
93+
padding-left: 30vw;
94+
position: absolute;
95+
96+
@media (max-width: 768px) {
97+
& img {
98+
max-width: 100vw;
99+
}
100+
}
71101
}
72102
73103
@media (max-width: 768px) {

‎src/lib/images/pink-background.svg

Lines changed: 76 additions & 0 deletions
Loading

‎src/lib/stores/billing.ts

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import PaymentAuthRequired from '$lib/components/billing/alerts/paymentAuthRequi
1111
import PaymentMandate from '$lib/components/billing/alerts/paymentMandate.svelte';
1212
import { BillingPlan, NEW_DEV_PRO_UPGRADE_COUPON } from '$lib/constants';
1313
import { cachedStore } from '$lib/helpers/cache';
14-
import { sizeToBytes, type Size } from '$lib/helpers/sizeConvertion';
14+
import { type Size, sizeToBytes } from '$lib/helpers/sizeConvertion';
1515
import type {
1616
AddressesList,
1717
Aggregation,
@@ -275,8 +275,6 @@ export function isServiceLimited(serviceId: PlanServices, plan: Tier, total: num
275275
}
276276

277277
export function checkForEnterpriseTrial(org: Organization) {
278-
const remaining = calculateEnterpriseTrial(org);
279-
console.log('remaining', remaining);
280278
if (calculateEnterpriseTrial(org) > 0) {
281279
headerAlert.add({
282280
id: 'teamEnterpriseTrial',
@@ -294,11 +292,9 @@ export function calculateEnterpriseTrial(org: Organization) {
294292

295293
let diffCycle = endDate.getTime() - startDate.getTime();
296294
diffCycle = Math.ceil(diffCycle / (1000 * 60 * 60 * 24)) + 1;
297-
console.log('diffCycle', diffCycle);
298295
if (diffCycle === 15) {
299296
const remaining = endDate.getTime() - today.getTime();
300-
const days = Math.ceil(remaining / (1000 * 60 * 60 * 24)) + 1;
301-
return days;
297+
return Math.ceil(remaining / (1000 * 60 * 60 * 24)) + 1;
302298
}
303299
return 0;
304300
}

‎src/routes/(console)/+layout.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -305,7 +305,7 @@
305305
if (currentOrganizationId === org.$id) return;
306306
if (isCloud) {
307307
currentOrganizationId = org.$id;
308-
await checkForEnterpriseTrial(org);
308+
checkForEnterpriseTrial(org);
309309
await checkForUsageLimit(org);
310310
checkForMarkedForDeletion(org);
311311
await checkForNewDevUpgradePro(org);

‎src/routes/(console)/organization-[organization]/enterpriseTrial.svelte

Lines changed: 40 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,55 @@
44
import { organization } from '$lib/stores/organization';
55
import { calculateEnterpriseTrial, hideBillingHeaderRoutes } from '$lib/stores/billing';
66
import { base } from '$app/paths';
7-
import { isTabletViewport } from '$lib/stores/viewport';
87
import GradientBanner from '$lib/components/billing/gradientBanner.svelte';
9-
import { Layout, Typography } from '@appwrite.io/pink-svelte';
8+
import { Badge, Typography } from '@appwrite.io/pink-svelte';
109
1110
$: upgradeUrl = `${base}/organization-${$organization?.$id}/change-plan`;
1211
$: remainingDays = calculateEnterpriseTrial($organization);
1312
</script>
1413

1514
{#if $organization?.$id && remainingDays > 0 && !hideBillingHeaderRoutes.includes(page.url.pathname)}
16-
<GradientBanner>
17-
<Layout.Stack
18-
gap="m"
19-
alignItems="center"
20-
alignContent="space-between"
21-
direction={$isTabletViewport ? 'column' : 'row'}>
15+
<GradientBanner variant="image">
16+
<div class="banner-fullwidth-grid">
2217
<Typography.Text>
23-
Your enterprise trial expires in {remainingDays} days.
18+
Your enterprise trial expires in <Badge
19+
variant="secondary"
20+
content={remainingDays.toString()} /> days.
2421
</Typography.Text>
2522

26-
<Button secondary fullWidthMobile class="u-line-height-1 u-gap-16" href={upgradeUrl}>
27-
Upgrade
28-
</Button>
29-
</Layout.Stack>
23+
<Button secondary fullWidthMobile href={upgradeUrl}>Upgrade</Button>
24+
</div>
3025
</GradientBanner>
3126
{/if}
27+
28+
<style lang="scss">
29+
.banner-fullwidth-grid {
30+
width: 100vw;
31+
display: grid;
32+
padding: 0 3rem;
33+
align-items: center;
34+
grid-template-columns: 1fr auto 1fr;
35+
36+
> :global(:first-child) {
37+
grid-column: 2;
38+
justify-self: center;
39+
40+
@media (max-width: 768px) {
41+
grid-column: unset;
42+
}
43+
}
44+
45+
> :global(:last-child) {
46+
grid-column: 3;
47+
justify-self: end;
48+
}
49+
50+
@media (max-width: 768px) {
51+
gap: 12px;
52+
width: 100%;
53+
display: flex;
54+
padding: unset;
55+
flex-direction: column;
56+
}
57+
}
58+
</style>

0 commit comments

Comments
 (0)