Update the create message wizard to support topics

Author: stnguyen90

src/routes/console/project-[project]/messaging/wizard/step2.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import { Card } from '$lib/components';
-    import UserTargetsModal, { type Target } from '../userTargetsModal.svelte';
     import { Button } from '$lib/elements/forms';
     import {
         Table,
@@ -12,11 +11,26 @@
     } from '$lib/elements/table';
     import { WizardStep } from '$lib/layout';
     import { messageParams, providerType, targetsById } from './store';
+    import Actions from '../actions.svelte';
+    import { topicsById, type Target, type Topic } from '../store';
 
     let showDropdown = false;
+    let showTopics = false;
+    let showUserTargets = false;
     let targetIdsLength = 0;
+    let topicIdsLength = 0;
 
-    function update(event: CustomEvent<Record<string, Target>>) {
+    function addTopics(event: CustomEvent<Record<string, Topic>>) {
+        $topicsById = event.detail;
+        showDropdown = false;
+    }
+
+    function removeTopic(topicId: string) {
+        const { [topicId]: _, ...rest } = $topicsById;
+        $topicsById = rest;
+    }
+
+    function addTargets(event: CustomEvent<Record<string, Target>>) {
         $targetsById = event.detail;
         showDropdown = false;
     }
@@ -28,24 +42,33 @@
 
     async function beforeSubmit() {
         $messageParams[$providerType].targets = Object.keys($targetsById);
+        $messageParams[$providerType].topics = Object.keys($topicsById);
         console.log($messageParams[$providerType]);
     }
 
+    $: topicIdsLength = Object.keys($topicsById).length;
     $: targetIdsLength = Object.keys($targetsById).length;
-    $: console.log(targetIdsLength);
 </script>
 
 <WizardStep {beforeSubmit}>
     <svelte:fragment slot="title">Targets</svelte:fragment>
     <!-- TODO: add support for topics -->
     <svelte:fragment slot="subtitle"
         >Select users to whom this message should be directed.</svelte:fragment>
-    {#if targetIdsLength == 0}
+    {#if targetIdsLength === 0 && topicIdsLength === 0}
         <Card>
             <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
-                <Button secondary round on:click={() => (showDropdown = !showDropdown)}>
-                    <i class="icon-plus" />
-                </Button>
+                <Actions
+                    providerType={$providerType}
+                    bind:showDropdown
+                    bind:showUserTargets
+                    bind:showTopics
+                    on:addTargets={addTargets}
+                    on:addTopics={addTopics}>
+                    <Button secondary round on:click={() => (showDropdown = !showDropdown)}>
+                        <i class="icon-plus" />
+                    </Button>
+                </Actions>
                 <div class="common-section">
                     <span class="text"> Select recipients to get started</span>
                 </div>
@@ -59,6 +82,32 @@
                     <TableCellHead width={32} />
                 </TableHeader>
                 <TableBody>
+                    {#each Object.entries($topicsById) as [topicId, topic] (topicId)}
+                        <TableRow>
+                            <TableCell title="Target">
+                                <div class="u-flex u-cross-center">
+                                    <span class="title"
+                                        ><span class="u-line-height-1-5">
+                                            <span class="body-text-2 u-bold" data-private>
+                                                {topic.name}
+                                            </span><span class="collapsible-button-optional"
+                                                >({topic.total} subscribers)</span>
+                                        </span></span>
+                                </div>
+                            </TableCell>
+                            <TableCell title="Remove" width={40}>
+                                <div class="u-flex u-main-end">
+                                    <button
+                                        class="button is-text is-only-icon"
+                                        type="button"
+                                        aria-label="delete"
+                                        on:click={() => removeTopic(topicId)}>
+                                        <span class="icon-x" aria-hidden="true" />
+                                    </button>
+                                </div>
+                            </TableCell>
+                        </TableRow>
+                    {/each}
                     {#each Object.entries($targetsById) as [targetId, target] (targetId)}
                         <TableRow>
                             <TableCell title="Target">
@@ -84,15 +133,17 @@
                 </TableBody>
             </Table>
         </div>
-        <Button text noMargin on:click={() => (showDropdown = !showDropdown)}>
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Add target</span>
-        </Button>
+        <Actions
+            providerType={$providerType}
+            bind:showDropdown
+            bind:showUserTargets
+            bind:showTopics
+            on:addTargets={addTargets}
+            on:addTopics={addTopics}>
+            <Button text noMargin on:click={() => (showDropdown = !showDropdown)}>
+                <span class="icon-plus" aria-hidden="true" />
+                <span class="text">Add</span>
+            </Button>
+        </Actions>
     {/if}
 </WizardStep>
-
-<UserTargetsModal
-    providerType={$providerType}
-    bind:show={showDropdown}
-    bind:targetsById={$targetsById}
-    on:update={update} />

src/routes/console/project-[project]/messaging/wizard/store.ts

@@ -1,6 +1,6 @@
 import { ProviderTypes } from '../providerType.svelte';
-import type { Target } from '../userTargetsModal.svelte';
 import { writable } from 'svelte/store';
+import type { Target } from '../store';
 
 export enum MessageStatuses {
     DRAFT = 'draft',