Merge pull request #1007 from appwrite/feat-email-signature-card

feat: email signature card

src/lib/components/card.svelte

@@ -28,7 +28,7 @@
     export let href: string = null;
     let classes = '';
     export { classes as class };
-    export let style: string = '';
+    export let style = '';
 
     function getElement() {
         switch (true) {

src/lib/components/emptyCardImageCloud.svelte

@@ -0,0 +1,42 @@
+<script>
+    import { trackEvent } from '$lib/actions/analytics';
+    import { Button } from '$lib/elements/forms';
+    import { getNextTier, tierToPlan, upgradeURL } from '$lib/stores/billing';
+    import { organization } from '$lib/stores/organization';
+    import Card from './card.svelte';
+
+    export let source = 'empty_state_card';
+    export let noAspectRatio = false;
+</script>
+
+<Card style="--card-padding:1.5rem; --card-padding-mobile: 2rem">
+    <div class="u-flex u-gap-24 u-flex-vertical-mobile">
+        {#if $$slots?.image}
+            <div class="u-stretch">
+                <div
+                    style:--p-file-preview-border-color="transparent"
+                    class="file-preview is-full-cover-image u-width-full-line u-height-100-percent"
+                    style={noAspectRatio ? 'aspect-ratio: auto' : ''}>
+                    <slot name="image" />
+                </div>
+            </div>
+        {/if}
+        <div class="u-stretch u-flex-vertical">
+            <h3 class="body-text-2 u-bold"><slot name="title" /></h3>
+            <p class="u-margin-block-start-8">
+                <slot nextTier={tierToPlan(getNextTier($organization.billingPlan)).name} />
+            </p>
+            <Button
+                class="u-margin-block-start-32"
+                secondary
+                fullWidth
+                href={$upgradeURL}
+                on:click={() => {
+                    trackEvent('click_organization_upgrade', {
+                        from: 'button',
+                        source
+                    });
+                }}>Upgrade plan</Button>
+        </div>
+    </div>
+</Card>

src/lib/components/index.ts

@@ -72,5 +72,6 @@ export { default as FakeModal } from './fakeModal.svelte';
 export { default as RadioBoxes } from './radioBoxes.svelte';
 export { default as ModalWrapper } from './modalWrapper.svelte';
 export { default as ModalSideCol } from './modalSideCol.svelte';
+export { default as EmptyCardImageCloud } from './emptyCardImageCloud.svelte';
 export { default as ImagePreview } from './imagePreview.svelte';
 export { default as MfaChallengeFormList } from './mfaChallengeFormList.svelte';

src/lib/stores/billing.ts

@@ -51,6 +51,28 @@ export function tierToPlan(tier: Tier) {
     }
 }
 
+export function getNextTier(tier: Tier) {
+    switch (tier) {
+        case BillingPlan.FREE:
+            return BillingPlan.PRO;
+        case BillingPlan.PRO:
+            return BillingPlan.SCALE;
+        default:
+            return BillingPlan.PRO;
+    }
+}
+
+export function getPreviousTier(tier: Tier) {
+    switch (tier) {
+        case BillingPlan.PRO:
+            return BillingPlan.FREE;
+        case BillingPlan.SCALE:
+            return BillingPlan.PRO;
+        default:
+            return BillingPlan.FREE;
+    }
+}
+
 export type PlanServices =
     | 'bandwidth'
     | 'bandwidthAddon'

src/routes/console/project-[project]/auth/templates/+page.svelte

@@ -51,6 +51,8 @@
     import { Button } from '$lib/elements/forms';
     import { organization } from '$lib/stores/organization';
     import { BillingPlan } from '$lib/constants';
+    import EmailSignature from './emailSignature.svelte';
+    import { isCloud } from '$lib/system';
     import type {
         SmsTemplateLocale,
         SmsTemplateType,
@@ -58,7 +60,6 @@
         EmailTemplateLocale
     } from '@appwrite.io/console';
     import Email2FaTemplate from './email2FATemplate.svelte';
-    import { tierToPlan } from '$lib/stores/billing';
 
     const projectId = $page.params.project;
 
@@ -132,18 +133,6 @@
         </p>
 
         <svelte:fragment slot="aside">
-            {#if $organization.billingPlan === BillingPlan.FREE}
-                <Alert
-                    buttons={[
-                        {
-                            slot: 'Upgrade plan',
-                            href: `${base}/console/organization-${$organization.$id}/billing`
-                        }
-                    ]}>
-                    All emails sent using the {tierToPlan(BillingPlan.FREE).name} plan will include attribution
-                    to Appwrite in the signature. To send attribution-free emails, upgrade your plan.
-                </Alert>
-            {/if}
             <Collapsible>
                 <CollapsibleItem
                     bind:open={emailVerificationOpen}
@@ -257,4 +246,7 @@
             </Collapsible>
         </svelte:fragment>
     </CardGrid>-->
+    {#if isCloud && $organization?.billingPlan === BillingPlan.FREE}
+        <EmailSignature />
+    {/if}
 </Container>

src/routes/console/project-[project]/auth/templates/emailSignature.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import { CardGrid, EmptyCardImageCloud, Heading } from '$lib/components';
+    import { app } from '$lib/stores/app';
+    import EmailDark from './email-footer-dark.png';
+    import EmailLight from './email-footer-light.png';
+    import EmailMobileDark from './email-footer-mobile-dark.png';
+    import EmailMobileLight from './email-footer-mobile-light.png';
+</script>
+
+<CardGrid>
+    <Heading size="7" tag="h3">Email signature</Heading>
+    <p class="text">Enable or disable Appwrite branding in your email template signature.</p>
+
+    <svelte:fragment slot="aside">
+        <EmptyCardImageCloud source="email_signature_card" let:nextTier noAspectRatio>
+            <svelte:fragment slot="image">
+                <div class=" is-only-mobile u-width-full-line u-height-100-percent">
+                    {#if $app.themeInUse === 'dark'}
+                        <img
+                            src={EmailMobileDark}
+                            class="u-image-object-fit-cover u-only-dark u-width-full-line u-height-100-percent"
+                            alt="Email Signature Example" />
+                    {:else}
+                        <img
+                            src={EmailMobileLight}
+                            class="u-image-object-fit-cover u-only-light u-width-full-line u-height-100-percent"
+                            alt="Email Signature Example" />
+                    {/if}
+                </div>
+                <div class="is-not-mobile u-width-full-line u-height-100-percent">
+                    {#if $app.themeInUse === 'dark'}
+                        <img
+                            src={EmailDark}
+                            width="266"
+                            height="171"
+                            class="u-image-object-fit-contain u-block u-only-dark u-width-full-line u-height-100-percent"
+                            style:object-position="top"
+                            alt="Email Signature Example" />
+                    {:else}
+                        <img
+                            src={EmailLight}
+                            width="266"
+                            height="171"
+                            class="u-image-object-fit-contain u-only-light u-width-full-line u-height-100-percent"
+                            style:object-position="top"
+                            alt="Email Signature Example" />
+                    {/if}
+                </div>
+            </svelte:fragment>
+            <svelte:fragment slot="title">Upgrade to edit email signature</svelte:fragment>
+            Upgrade to a {nextTier} plan to enable or disable Appwrite branding in your emails.
+        </EmptyCardImageCloud>
+    </svelte:fragment>
+</CardGrid>