GitHub education program into console

src/lib/constants.ts

@@ -469,6 +469,7 @@ export enum BillingPlan {
     FREE = 'tier-0',
     PRO = 'tier-1',
     SCALE = 'tier-2',
+    GITHUB_EDUCATION = 'auto-1',
     CUSTOM = 'cont-1'
 }
 

src/lib/images/github-education-program/index.ts

@@ -0,0 +1,6 @@
+import ArtworkDark from './artwork-dark.svg';
+import ArtworkDarkMobile from './artwork-dark-mobile.svg';
+import ArtworkLight from './artwork-light.svg';
+import ArtworkLightMobile from './artwork-light-mobile.svg';
+
+export { ArtworkDark, ArtworkDarkMobile, ArtworkLight, ArtworkLightMobile };

src/lib/sdk/billing.ts

@@ -708,6 +708,20 @@ export class Billing {
         );
     }
 
+    async setMembership(
+        programId: string
+    ): Promise<{ $createdAt: string } | { error: { code: number; message: string } }> {
+        const path = `/console/programs/${programId}/memberships`;
+        const uri = new URL(this.client.config.endpoint + path);
+        try {
+            return await this.client.call('POST', uri, {
+                'content-type': 'application/json'
+            });
+        } catch (e) {
+            return { error: { code: e.code, message: e.message } };
+        }
+    }
+
     async getCoupon(couponId: string): Promise<Coupon> {
         const path = `/console/coupons/${couponId}`;
         const params = {

src/lib/stores/billing.ts

@@ -34,7 +34,7 @@ import { user } from './user';
 import { browser } from '$app/environment';
 import { canSeeBilling } from './roles';
 
-export type Tier = 'tier-0' | 'tier-1' | 'tier-2' | 'cont-1';
+export type Tier = 'tier-0' | 'tier-1' | 'tier-2' | 'auto-1' | 'cont-1';
 
 export const roles = [
     {
@@ -77,6 +77,8 @@ export function tierToPlan(tier: Tier) {
             return tierPro;
         case BillingPlan.SCALE:
             return tierScale;
+        case BillingPlan.GITHUB_EDUCATION:
+            return tierGitHubEducation;
         case BillingPlan.CUSTOM:
             return tierCustom;
         default:
@@ -175,6 +177,11 @@ export const tierFree: TierData = {
     description: 'For personal hobby projects of small scale and students.'
 };
 
+export const tierGitHubEducation: TierData = {
+    name: 'GitHub Education',
+    description: 'For members of GitHub student developers program.'
+};
+
 export const tierPro: TierData = {
     name: 'Pro',
     description: 'For pro developers and production projects that need the ability to scale.'

src/lib/stores/organization.ts

@@ -41,5 +41,6 @@ export const organizationList = derived(
     page,
     ($page) => $page.data.organizations as Models.TeamList<Record<string, unknown>>
 );
+
 export const organization = derived(page, ($page) => $page.data?.organization as Organization);
 export const members = derived(page, ($page) => $page.data.members as Models.MembershipList);

src/routes/(console)/account/organizations/+page.svelte

@@ -17,7 +17,7 @@
     import { Pill } from '$lib/elements';
     import type { Models } from '@appwrite.io/console';
     import type { Organization } from '$lib/stores/organization';
-    import { daysLeftInTrial, plansInfo } from '$lib/stores/billing';
+    import { daysLeftInTrial, plansInfo, tierToPlan } from '$lib/stores/billing';
     import { tooltip } from '$lib/actions/tooltip';
     import { toLocaleDate } from '$lib/helpers/date';
     import { BillingPlan } from '$lib/constants';
@@ -71,14 +71,15 @@
                     </svelte:fragment>
                     <svelte:fragment slot="status">
                         {#if isCloudOrg(organization)}
-                            {#if organization?.billingPlan === BillingPlan.FREE}
+                            {#if organization?.billingPlan === BillingPlan.FREE || organization?.billingPlan === BillingPlan.GITHUB_EDUCATION}
                                 <div
                                     class="u-flex u-cross-center"
                                     use:tooltip={{
                                         content:
                                             'You are limited to 1 free organization per account'
                                     }}>
-                                    <Pill class="eyebrow-heading-3">FREE</Pill>
+                                    <Pill class="eyebrow-heading-3"
+                                        >{tierToPlan(organization?.billingPlan)?.name}</Pill>
                                 </div>
                             {/if}
                             {#if organization?.billingTrialStartDate && $daysLeftInTrial > 0 && organization.billingPlan !== BillingPlan.FREE && $plansInfo.get(organization.billingPlan)?.trialDays}

src/routes/(console)/organization-[organization]/billing/planSummary.svelte

@@ -64,14 +64,14 @@
                     <span class="body-text-2">
                         {tierToPlan($organization?.billingPlan)?.name} plan</span>
                     <div class="body-text-2 u-margin-inline-start-auto">
-                        {isTrial
+                        {isTrial || $organization?.billingPlan === BillingPlan.GITHUB_EDUCATION
                             ? formatCurrency(0)
                             : currentPlan
                               ? formatCurrency(currentPlan?.price)
                               : ''}
                     </div>
                 </CollapsibleItem>
-                {#if $organization?.billingPlan !== BillingPlan.FREE && extraUsage > 0}
+                {#if $organization?.billingPlan !== BillingPlan.FREE && $organization?.billingPlan !== BillingPlan.GITHUB_EDUCATION && extraUsage > 0}
                     <CollapsibleItem isInfo gap={8}>
                         <svelte:fragment slot="beforetitle">
                             <span class="body-text-2"><b>Add-ons</b></span><span class="inline-tag"
@@ -188,7 +188,8 @@
                             }}></span>
                     </span>
                     <div class="body-text-2 u-margin-inline-start-auto">
-                        {$organization?.billingPlan === BillingPlan.FREE
+                        {$organization?.billingPlan === BillingPlan.FREE ||
+                        $organization?.billingPlan === BillingPlan.GITHUB_EDUCATION
                             ? formatCurrency(0)
                             : formatCurrency(
                                   Math.max(
@@ -218,7 +219,7 @@
                         Upgrade
                     </Button>
                 </div>
-            {:else}
+            {:else if $organization?.billingPlan !== BillingPlan.GITHUB_EDUCATION}
                 <div class="u-flex u-gap-16 u-flex-wrap">
                     <Button
                         text

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

@@ -110,7 +110,10 @@
                             <span class="u-trim">
                                 {$organization.name}
                             </span>
-                            {#if isCloud && $organization?.billingPlan === BillingPlan.FREE}
+                            {#if isCloud && $organization?.billingPlan === BillingPlan.GITHUB_EDUCATION}
+                                <Pill class="eyebrow-heading-3"
+                                    ><span class="icon-github" aria-hidden="true" /> EDUCATION</Pill>
+                            {:else if isCloud && $organization?.billingPlan === BillingPlan.FREE}
                                 <Pill class="eyebrow-heading-3">FREE</Pill>
                             {/if}
                             {#if isCloud && $organization?.billingTrialStartDate && $daysLeftInTrial > 0 && $organization.billingPlan !== BillingPlan.FREE && $plansInfo.get($organization.billingPlan)?.trialDays}

src/routes/(public)/(guest)/education/+layout.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+    import {
+        ArtworkDark,
+        ArtworkDarkMobile,
+        ArtworkLightMobile,
+        ArtworkLight
+    } from '$lib/images/github-education-program';
+</script>
+
+<svelte:head>
+    <title>Sign up - Appwrite Education Program</title>
+</svelte:head>
+<section class="github-education-container">
+    <div class="artwork">
+        <div class="is-only-mobile">
+            <img src={ArtworkDarkMobile} alt="" class=" u-only-dark" />
+            <img src={ArtworkLightMobile} alt="" class="u-only-light" />
+        </div>
+        <div class="is-not-mobile">
+            <img src={ArtworkDark} alt="" class="u-only-dark" />
+            <img src={ArtworkLight} alt="" class="u-only-light" />
+        </div>
+        <div class="mobile-gradient" />
+    </div>
+    <div class="content-container">
+        <slot />
+    </div>
+</section>
+
+<style>
+    :global(.theme-dark) {
+        --gradient-start-color: #0c0c0d;
+        --heading-color: inherit;
+        --text-color: #e4e4e7a3;
+        --divider-background-color: rgba(255, 255, 255, 0.06);
+    }
+    :global(.theme-light) {
+        --gradient-start-color: #ededf0;
+        --heading-color: #19191c;
+        --text-color: #19191ca3;
+        --divider-background-color: rgba(25, 25, 28, 0.04);
+    }
+
+    .github-education-container {
+        display: flex;
+        flex-direction: column;
+
+        @media (min-width: 768px) {
+            flex-direction: row;
+        }
+    }
+
+    .artwork {
+        height: 16.5rem;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+
+        @media (min-width: 768px) {
+            width: 50%;
+            min-height: 100vh;
+            background: linear-gradient(
+                56deg,
+                rgba(253, 54, 110, 0.15) 0%,
+                var(--gradient-start-color) 48.38%
+            );
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+
+    .artwork .mobile-gradient {
+        @media (max-width: 768px) {
+            background: linear-gradient(
+                180deg,
+                rgba(25, 25, 28, 0) -4.43%,
+                hsl(var(--p-body-bg-color)) 100%
+            );
+            position: absolute;
+            width: 100%;
+            height: 16.5rem;
+        }
+    }
+
+    .artwork img {
+        width: 100%;
+
+        @media (min-width: 768px) {
+            max-width: 500px;
+            height: 100%;
+        }
+    }
+
+    .content-container {
+        background-color: hsl(var(--p-body-bg-color));
+        width: 100%;
+        padding: 1rem;
+
+        @media (min-width: 768px) {
+            width: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+</style>