Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #846 from appwrite/feat-messaging-need-a-hand

Browse Source 
Implement "Need a hand?" section
This commit is contained in:
Torsten Dittmann
2024-02-22 16:00:48 +01:00
committed by GitHub
parent 3d635124f0 89013cc9e6
commit 2add3dbd65
2 changed files with 94 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/console/project-[project]/messaging/providers/store.ts
+10
View File
@@ -22,6 +22,7 @@ type ProvidersMap = {
classIcon?: string;
title: string;
description: string;
needAHand?: string[];
configure: {
label: string;
name: string;
@@ -56,6 +57,11 @@ export const providers: ProvidersMap = {
imageIcon: 'firebase',
title: 'FCM',
description: 'Firebase Cloud Messaging',
needAHand: [
'Create a <b><a class="link" href="https://firebase.google.com" target="_blank" rel="noopener noreferrer">Firebase</a></b> project.',
'Head to <b>Firebase dashboard -> Settings -> Project settings -> Cloud Messaging.</b>',
"If FCM is disabled, click the three-dots menu and open the link. On the following page, click 'Enable' (it might take a few minutes for the action to complete)."
],
configure: [
{
label: 'Service account JSON (.json file)',
@@ -355,6 +361,10 @@ export const providers: ProvidersMap = {
imageIcon: 'twilio',
title: 'Twilio',
description: '',
needAHand: [
'Create an account in <b><a class="link" href="https://console.twilio.com/" target="_blank" rel="noopener noreferrer">Twilio</a></b>.',
'Head to <b>Twilio console -> Get a Twilio phone number.</b>'
],
configure: [
{
label: 'Account SID',
src/routes/console/project-[project]/messaging/providers/wizard/configure.svelte
+84 -20
View File
@@ -9,12 +9,19 @@
InputText,
InputPassword
} from '$lib/elements/forms';
import InputPhone from '$lib/elements/forms/inputPhone.svelte';
import { WizardStep } from '$lib/layout';
import { onMount } from 'svelte';
import { providers } from '../store';
import { providerType, provider, providerParams } from './store';
import { Table, TableBody, TableCell, TableRowButton, TableRowLink } from '$lib/elements/table';
import { newMemberModal } from '$lib/stores/organization';
import CreateMember from '$routes/console/organization-[organization]/createMember.svelte';
import Collapsible from '$lib/components/collapsible.svelte';
import CollapsibleItem from '$lib/components/collapsibleItem.svelte';
import Provider from '../../provider.svelte';
import { MessagingProviderType } from '@appwrite.io/console';
import ProviderTypeComponent from '$routes/console/project-[project]/messaging/providerType.svelte';
let files: Record<string, FileList> = {};
const inputs = providers[$providerType].providers[$provider].configure;
@@ -154,27 +161,84 @@
{/each}
</FormList>
<p class="body-text-2 u-bold u-margin-block-start-48">Need a hand?</p>
<div class="need-a-hand u-flex-vertical u-gap-8">
<p class="body-text-2 u-bold u-margin-block-start-48">Need a hand?</p>
<div
class="u-flex u-cross-center u-main-space-between u-padding-block-16"
style="border-block-end: solid .0625rem hsl(var(--color-border))">
<div class="u-flex u-cross-center u-gap-16">
<div class="avatar is-size-small">
<span class="icon-book-open" style:--p-text-size="1.25rem" aria-hidden="true" />
{#if providers[$providerType].providers[$provider].needAHand}
{@const needAHand = providers[$providerType].providers[$provider].needAHand}
<div class="box u-padding-inline-8 u-padding-0 u-border-width-0">
<Collapsible>
<CollapsibleItem withIndentation>
<svelte:fragment slot="beforetitle">
<div class="u-flex u-cross-center u-gap-16">
<div class="avatar is-size-small">
<span
class="icon-info"
style:--p-text-size="1.25rem"
aria-hidden="true" />
</div>
<span class="body-text-2 u-small u-bold"
>How to enable <Provider provider={$provider} noIcon />
{#if $providerType == MessagingProviderType.Push}notifications{:else}<ProviderTypeComponent
type={$providerType}
noIcon />{/if} service?</span>
</div>
</svelte:fragment>
<div class="u-flex-vertical u-gap-16">
{#each needAHand as p}
<p>
{@html p}
</p>
{/each}
</div>
</CollapsibleItem>
</Collapsible>
</div>
Read the full guide in the documentation
</div>
<span class="icon-arrow-right" aria-hidden="true" />
</div>
{/if}
<div class="u-flex u-cross-center u-main-space-between u-padding-block-16">
<div class="u-flex u-cross-center u-gap-16">
<div class="avatar is-size-small">
<span class="icon-user-group" style:--p-text-size="1.25rem" aria-hidden="true" />
</div>
Invite a team member to complete this step
</div>
<span class="icon-arrow-right" aria-hidden="true" />
<Table noMargin noStyles>
<TableBody>
<TableRowLink href={`https://appwrite.io/docs/messaging/${$provider}`}>
<TableCell>
<div class="u-flex u-cross-center u-main-space-between u-padding-8">
<div class="u-flex u-cross-center u-gap-16">
<div class="avatar is-size-small">
<span
class="icon-book-open"
style:--p-text-size="1.25rem"
aria-hidden="true" />
</div>
Read the full guide in the documentation
</div>
<span class="icon-arrow-right" aria-hidden="true" />
</div>
</TableCell>
</TableRowLink>
<TableRowButton on:click={() => ($newMemberModal = true)}>
<TableCell>
<div class="u-flex u-cross-center u-main-space-between u-padding-8">
<div class="u-flex u-cross-center u-gap-16">
<div class="avatar is-size-small">
<span
class="icon-user-group"
style:--p-text-size="1.25rem"
aria-hidden="true" />
</div>
Invite a team member to complete this step
</div>
<span class="icon-arrow-right" aria-hidden="true" />
</div>
</TableCell>
</TableRowButton>
</TableBody>
</Table>
</div>
</WizardStep>
<CreateMember bind:showCreate={$newMemberModal} />
<style lang="scss">
.need-a-hand :global(.table-row):last-child:last-child {
border-block-end: none;
}
</style>