Skip to content

Implement "Need a hand?" section #846

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 22, 2024
Merged

Implement "Need a hand?" section #846

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d3d7ad1
feat(messaging): fix need a hand section of provider wizard
stnguyen90 Feb 21, 2024
89013cc
feat(messaging): add details on how to setup a provider
stnguyen90 Feb 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions src/routes/console/project-[project]/messaging/providers/store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ type ProvidersMap = {
classIcon?: string;
title: string;
description: string;
needAHand?: string[];
configure: {
label: string;
name: string;
Expand Down Expand Up @@ -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)',
Expand Down Expand Up @@ -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',
Expand Down
104 changes: 84 additions & 20 deletions src/routes/console/project-[project]/messaging/providers/wizard/configure.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>