Adds UI for creating webhook type campaigns (#130)

* Adds UI for creating webhook type campaigns

More fixes to dropdowns
Improves locale creation

* Fixes linter

apps/platform/src/projects/ProjectService.ts

@@ -39,6 +39,7 @@ export const createProject = async (adminId: number, params: ProjectParams) => {
     await createSubscription(project.id, { name: 'Default Email', channel: 'email' })
     await createSubscription(project.id, { name: 'Default SMS', channel: 'text' })
     await createSubscription(project.id, { name: 'Default Push', channel: 'push' })
+    await createSubscription(project.id, { name: 'Default Webhook', channel: 'webhook' })
 
     return project
 }

apps/platform/src/providers/webhook/LocalWebhookProvider.ts

@@ -20,11 +20,23 @@ export default class LocalWebhookProvider extends WebhookProvider {
         const { method, endpoint, headers, body } = options
         const response = await fetch(endpoint, {
             method,
-            headers,
+            headers: {
+                'Content-Type': 'application/json',
+                Accept: 'application/json',
+                ...headers,
+            },
             body: JSON.stringify(body),
         })
 
-        const responseBody = await response.json()
+        let responseBody: any | undefined
+        try {
+            responseBody = await response.json()
+        } catch {
+            try {
+                responseBody = await response.text()
+            } catch {}
+        }
+
         if (response.ok) {
             return {
                 message: options,

apps/platform/src/render/TemplateController.ts

@@ -92,6 +92,26 @@ const templateDataPushParams = {
     nullable: true,
 }
 
+const templateDataWebhookParams = {
+    type: 'object',
+    required: ['method', 'endpoint'],
+    properties: {
+        method: { type: 'string' },
+        endpoint: { type: 'string' },
+        body: {
+            type: 'object',
+            nullable: true,
+            additionalProperties: true,
+        },
+        headers: {
+            type: 'object',
+            nullable: true,
+            additionalProperties: true,
+        },
+    },
+    nullable: true,
+}
+
 const templateCreateParams: JSONSchemaType<TemplateParams> = {
     $id: 'templateCreateParams',
     oneOf: [{
@@ -147,6 +167,24 @@ const templateCreateParams: JSONSchemaType<TemplateParams> = {
             data: templateDataPushParams as any,
         },
         additionalProperties: false,
+    },
+    {
+        type: 'object',
+        required: ['type', 'campaign_id', 'locale'],
+        properties: {
+            type: {
+                type: 'string',
+                enum: ['webhook'],
+            },
+            campaign_id: {
+                type: 'integer',
+            },
+            locale: {
+                type: 'string',
+            },
+            data: templateDataWebhookParams as any,
+        },
+        additionalProperties: false,
     }],
 }
 router.post('/', async ctx => {
@@ -204,9 +242,22 @@ const templateUpdateParams: JSONSchemaType<TemplateUpdateParams> = {
             data: templateDataPushParams as any,
         },
         additionalProperties: false,
+    },
+    {
+        type: 'object',
+        required: ['type', 'data'],
+        properties: {
+            type: {
+                type: 'string',
+                enum: ['webhook'],
+            },
+            data: templateDataWebhookParams as any,
+        },
+        additionalProperties: false,
     }],
 }
 router.patch('/:templateId', async ctx => {
+    console.log(ctx.request.body)
     const payload = validate(templateUpdateParams, ctx.request.body)
     ctx.body = await updateTemplate(ctx.state.template!.id, payload)
 })

apps/platform/src/render/TemplateService.ts

@@ -11,6 +11,7 @@ import { RequestError } from '../core/errors'
 import CampaignError from '../campaigns/CampaignError'
 import { loadPushChannel } from '../providers/push'
 import { getUserFromEmail, getUserFromPhone } from '../users/UserRepository'
+import { loadWebhookChannel } from '../providers/webhook'
 
 export const pagedTemplates = async (params: SearchParams, projectId: number) => {
     return await Template.searchParams(
@@ -95,6 +96,13 @@ export const sendProof = async (template: TemplateType, variables: Variables, re
             event,
             context,
         })
+    } else if (template.type === 'webhook') {
+        const channel = await loadWebhookChannel(campaign.provider_id, projectId)
+        await channel?.send(template, {
+            user: User.fromJson({ ...variables.user, data: variables.user }),
+            event,
+            context,
+        })
     } else {
         throw new RequestError('Sending template proofs is only supported for email and text message types as this time.')
     }

apps/ui/src/contexts.ts

@@ -1,6 +1,5 @@
 import { createContext, Dispatch, SetStateAction } from 'react'
-import { Admin, Campaign, Journey, List, Project, Template, User, UseStateContext } from './types'
-import { FieldOption } from './ui/form/Field'
+import { Admin, Campaign, Journey, List, LocaleOption, Project, Template, User, UseStateContext } from './types'
 
 export const AdminContext = createContext<null | Admin>(null)
 
@@ -15,8 +14,8 @@ export const JourneyContext = createContext<UseStateContext<Journey>>([
 ])
 
 export interface LocaleSelection {
-    currentLocale?: FieldOption
-    allLocales: FieldOption[]
+    currentLocale?: LocaleOption
+    allLocales: LocaleOption[]
 }
 export const LocaleContext = createContext<UseStateContext<LocaleSelection>>([
     { allLocales: [] },

apps/ui/src/types.ts

@@ -452,3 +452,8 @@ export interface Metric {
     date: string | Date
     count: number
 }
+
+export interface LocaleOption {
+    key: string
+    label: string
+}

apps/ui/src/ui/Preview.css

@@ -142,4 +142,8 @@
 
 .push-notification .notification-body {
     grid-area: body;
+}
+
+.webhook-frame {
+    padding: 20px 10px;
 }

apps/ui/src/ui/Preview.tsx

@@ -1,3 +1,4 @@
+import { JsonViewer } from '@textea/json-viewer'
 import { format } from 'date-fns'
 import { Template } from '../types'
 import Iframe from './Iframe'
@@ -39,14 +40,20 @@ export default function Preview({ template }: PreviewProps) {
         </div>
     </div>
 
+    const WebhookFrame = () => (
+        <div className="webhook-frame">
+            <JsonViewer value={data} rootName={false} />
+        </div>
+    )
+
     return (
         <section className="preview">
             {
                 {
                     email: <EmailFrame />,
                     text: <TextFrame />,
                     push: <PushFrame />,
-                    webhook: <></>,
+                    webhook: <WebhookFrame />,
                 }[type]
             }
         </section>

apps/ui/src/ui/form/EntityIdPicker.tsx

@@ -1,5 +1,5 @@
-import { Combobox, Transition } from '@headlessui/react'
-import { useCallback, useState, Fragment, RefCallback, ReactNode } from 'react'
+import { Combobox } from '@headlessui/react'
+import { useCallback, useState, RefCallback, ReactNode } from 'react'
 import { useResolver } from '../../hooks'
 import { ControlledInputProps, SearchResult } from '../../types'
 import clsx from 'clsx'
@@ -132,45 +132,33 @@ export function EntityIdPicker<T extends { id: number }>({
                     )
                 }
             </div>
-            <div className="select-options-wrapper"
+            <Combobox.Options className="select-options"
                 ref={setPopperElement}
                 style={styles.popper}
                 {...attributes.popper}>
-                <Transition
-                    as={Fragment}
-                    leave="transition-leave"
-                    leaveFrom="transition-leave-from"
-                    leaveTo="transition-leave-to"
-                    enter="transition-enter"
-                    enterFrom="transition-enter-from"
-                    enterTo="transition-enter-to"
-                >
-                    <Combobox.Options className="select-options">
-                        {
-                            result?.results.map((option) => (
-                                <Combobox.Option
-                                    key={option.id}
-                                    value={option}
-                                    className={({ active, disabled, selected }) => clsx(
-                                        'select-option',
-                                        active && 'active',
-                                        disabled && 'disabled',
-                                        selected && 'selected',
-                                    )}
-                                    disabled={!optionEnabled(option)}
-                                >
-                                    <span>
-                                        {displayValue(option)}
-                                    </span>
-                                    <span className="option-icon">
-                                        <CheckIcon aria-hidden="true" />
-                                    </span>
-                                </Combobox.Option>
-                            ))
-                        }
-                    </Combobox.Options>
-                </Transition>
-            </div>
+                {
+                    result?.results.map((option) => (
+                        <Combobox.Option
+                            key={option.id}
+                            value={option}
+                            className={({ active, disabled, selected }) => clsx(
+                                'select-option',
+                                active && 'active',
+                                disabled && 'disabled',
+                                selected && 'selected',
+                            )}
+                            disabled={!optionEnabled(option)}
+                        >
+                            <span>
+                                {displayValue(option)}
+                            </span>
+                            <span className="option-icon">
+                                <CheckIcon aria-hidden="true" />
+                            </span>
+                        </Combobox.Option>
+                    ))
+                }
+            </Combobox.Options>
         </Combobox>
     )
 }

apps/ui/src/ui/form/FormWrapper.tsx

@@ -28,6 +28,7 @@ export default function FormWrapper<T extends FieldValues>({
     const handleSubmit = form.handleSubmit(async data => {
         setIsLoading(true)
         onSubmit(data, navigate).finally(() => {
+            console.log('saved!', data)
             setIsLoading(false)
         })
     })
@@ -36,6 +37,8 @@ export default function FormWrapper<T extends FieldValues>({
         const keys = Object.keys(errors)
         if (keys.length === 0) return undefined
 
+        console.log('error 1')
+
         const key = keys[0]
         const error = errors[key]
         if (error) {

apps/ui/src/ui/form/JsonField.tsx

@@ -0,0 +1,35 @@
+import TextInput, { TextInputProps } from './TextInput'
+import { FieldProps } from '../../types'
+import { FieldPath, FieldValues, useController } from 'react-hook-form'
+import { useState } from 'react'
+
+export default function JsonField<X extends FieldValues, P extends FieldPath<X>>({
+    form,
+    name,
+    required,
+    ...rest
+}: Omit<TextInputProps<P>, 'onChange' | 'onBlur' | 'value'> & FieldProps<X, P>) {
+    const { field: { ref, value, ...field }, fieldState } = useController({
+        control: form.control,
+        name,
+        rules: {
+            required,
+        },
+    })
+    const [jsonValue, setJsonValue] = useState(JSON.stringify(value))
+
+    return (
+        <TextInput
+            {...rest}
+            {...field}
+            value={jsonValue}
+            inputRef={ref}
+            onChange={async (value) => {
+                setJsonValue(value)
+                await field.onChange?.(JSON.parse(value))
+            }}
+            required={required}
+            error={fieldState.error?.message}
+        />
+    )
+}

apps/ui/src/ui/form/MultiSelect.tsx

@@ -1,4 +1,4 @@
-import { Listbox, Transition } from '@headlessui/react'
+import { Listbox } from '@headlessui/react'
 import { Fragment, ReactNode } from 'react'
 import { CheckIcon, ChevronUpDownIcon } from '../icons'
 import { FieldPath, FieldValues, useController } from 'react-hook-form'
@@ -131,43 +131,31 @@ export function MultiSelect<T, U = T>({
                     </span>
                 )
             }
-            <div className="select-options-wrapper"
+            <Listbox.Options className="select-options"
                 ref={setPopperElement}
                 style={styles.popper}
                 {...attributes.popper}>
-                <Transition
-                    as={Fragment}
-                    leave="transition-leave"
-                    leaveFrom="transition-leave-from"
-                    leaveTo="transition-leave-to"
-                    enter="transition-enter"
-                    enterFrom="transition-enter-from"
-                    enterTo="transition-enter-to"
-                >
-                    <Listbox.Options className="select-options">
-                        {options.map((option) => {
-                            const value = toValue(option)
-                            return (
-                                <Listbox.Option
-                                    key={getValueKey(value)}
-                                    value={value}
-                                    className={({ active, selected }) => clsx(
-                                        'select-option',
-                                        active && 'active',
-                                        selected && 'selected',
-                                    )}
-                                >
-                                    <span>{getOptionDisplay(option)}</span>
-                                    <span className="option-icon">
-                                        <CheckIcon aria-hidden="true" />
-                                    </span>
-                                </Listbox.Option>
-                            )
-                        })}
-                        {optionsFooter}
-                    </Listbox.Options>
-                </Transition>
-            </div>
+                {options.map((option) => {
+                    const value = toValue(option)
+                    return (
+                        <Listbox.Option
+                            key={getValueKey(value)}
+                            value={value}
+                            className={({ active, selected }) => clsx(
+                                'select-option',
+                                active && 'active',
+                                selected && 'selected',
+                            )}
+                        >
+                            <span>{getOptionDisplay(option)}</span>
+                            <span className="option-icon">
+                                <CheckIcon aria-hidden="true" />
+                            </span>
+                        </Listbox.Option>
+                    )
+                })}
+                {optionsFooter}
+            </Listbox.Options>
         </Listbox>
     )
 }