Allows for removing locales

apps/platform/src/render/TemplateController.ts

@@ -4,7 +4,7 @@ import { JSONSchemaType, validate } from '../core/validate'
 import { searchParamsSchema } from '../core/searchParams'
 import { extractQueryParams } from '../utilities'
 import Template, { TemplateParams, TemplateUpdateParams } from './Template'
-import { createTemplate, getTemplate, pagedTemplates, sendProof, updateTemplate } from './TemplateService'
+import { createTemplate, deleteTemplate, getTemplate, pagedTemplates, sendProof, updateTemplate } from './TemplateService'
 import { Variables } from '.'
 import { User } from '../users/User'
 import { UserEvent } from '../users/UserEvent'
@@ -201,6 +201,11 @@ router.patch('/:templateId', async ctx => {
     ctx.body = await updateTemplate(ctx.state.template!.id, payload)
 })
 
+router.delete('/:templateId', async ctx => {
+    const template = ctx.state.template!
+    ctx.body = await deleteTemplate(template.id, template.project_id)
+})
+
 router.post('/:templateId/preview', async ctx => {
     const payload = ctx.request.body as Variables
     const template = ctx.state.template!.map()

apps/platform/src/render/TemplateService.ts

@@ -43,6 +43,10 @@ export const updateTemplate = async (templateId: number, params: TemplateUpdateP
     return await Template.updateAndFetch(templateId, prune(params))
 }
 
+export const deleteTemplate = async (id: number, projectId: number) => {
+    return await Template.delete(qb => qb.where('id', id).where('project_id', projectId))
+}
+
 export const duplicateTemplate = async (template: Template, campaignId: number) => {
     const params: Partial<Template> = pick(template, ['project_id', 'locale', 'type', 'data'])
     params.campaign_id = campaignId

apps/ui/src/views/campaign/CreateLocaleModal.tsx

@@ -5,7 +5,7 @@ import Modal from '../../ui/Modal'
 import { languageName } from '../../utils'
 import { UseFormReturn } from 'react-hook-form'
 import { createLocale } from './CampaignDetail'
-import { useMemo } from 'react'
+import { useState } from 'react'
 
 interface CreateLocaleParams {
     open: boolean
@@ -15,20 +15,21 @@ interface CreateLocaleParams {
 }
 
 const LocaleTextField = ({ form }: { form: UseFormReturn<{ locale: string }> }) => {
-    const watch = form.watch(['locale'])
-    const { locale } = form.getValues()
-    const language = useMemo(() => {
+
+    const [language, setLanguage] = useState<string | undefined>(undefined)
+    const handlePreviewLanguage = (locale: string) => {
         try {
-            return languageName(locale)
+            return setLanguage(languageName(locale))
         } catch {
-            return undefined
+            return setLanguage(undefined)
         }
-    }, [watch])
+    }
 
     return <>
         <TextField form={form}
             name="locale"
             label="Locale"
+            onChange={handlePreviewLanguage}
             required />
         <p>{language}</p>
     </>

apps/ui/src/views/campaign/EditLocalesModal.tsx

@@ -0,0 +1,65 @@
+import { Campaign } from '../../types'
+import Modal from '../../ui/Modal'
+import { DataTable } from '../../ui/DataTable'
+import Button from '../../ui/Button'
+import { locales } from './CampaignDetail'
+import CreateLocaleModal from './CreateLocaleModal'
+import { useState } from 'react'
+import api from '../../api'
+
+interface EditLocalesParams {
+    open: boolean
+    setIsOpen: (state: boolean) => void
+    campaign: Campaign
+    setCampaign: (campaign: Campaign) => void
+}
+
+export default function EditLocalesModal({ open, setIsOpen, campaign, setCampaign }: EditLocalesParams) {
+
+    const allLocales = locales(campaign.templates)
+    const [showAddLocale, setShowAddLocale] = useState(false)
+
+    async function handleRemoveLocale(locale: string) {
+        if (!confirm('Are you sure you want to delete this locale? The template cannot be recovered.')) return
+        const { id } = campaign.templates.find(template => template.locale === locale)!
+        await api.templates.delete(campaign.project_id, id)
+
+        const templates = campaign.templates.filter(template => template.id !== id)
+        const newCampaign = { ...campaign, templates }
+        setCampaign(newCampaign)
+        setIsOpen(false)
+    }
+
+    return (
+        <Modal title="Locales"
+            open={open}
+            onClose={() => setIsOpen(false)}>
+            <DataTable
+                items={allLocales}
+                itemKey={({ item }) => item.key}
+                columns={[
+                    { key: 'label', title: 'Language' },
+                    { key: 'key', title: 'Locale' },
+                    {
+                        key: 'options',
+                        cell: ({ item }) => (
+                            <Button
+                                size="small"
+                                variant="destructive"
+                                onClick={async () => await handleRemoveLocale(item.key)}>
+                                Delete
+                            </Button>
+                        ),
+                    },
+                ]} />
+            <div className="modal-footer">
+                <Button size="small" onClick={() => setShowAddLocale(true)}>Add Locale</Button>
+            </div>
+            <CreateLocaleModal
+                open={showAddLocale}
+                setIsOpen={setShowAddLocale}
+                campaign={campaign}
+                setCampaign={setCampaign} />
+        </Modal>
+    )
+}

apps/ui/src/views/campaign/EmailEditor.css

@@ -109,11 +109,11 @@
 }
 
 .source-editor .ui-tabs .tab {
-    color: var(--color-on-primary);
+    color: var(--color-white);
 }
 
 .source-editor .ui-tabs .tab.selected {
-    border-color: var(--color-on-primary);
+    border-color: var(--color-white);
 }
 
 .source-editor .ui-tabs-panels .panel {

apps/ui/src/views/campaign/EmailEditor.tsx

@@ -16,6 +16,7 @@ import CreateLocaleModal from './CreateLocaleModal'
 import ImageGalleryModal from './ImageGalleryModal'
 import Modal from '../../ui/Modal'
 import { ImageIcon } from '../../ui/icons'
+import EditLocalesModal from './EditLocalesModal'
 
 const HtmlEditor = ({ template, setTemplate }: { template: Template, setTemplate: (template: Template) => void }) => {
 
@@ -179,17 +180,22 @@ export default function EmailEditor() {
                                 variant="secondary"
                                 onClick={() => setIsAddLocaleOpen(true)}
                             >
-                                {'Add Locale'}
+                                {'Edit Locales'}
                             </Button>
                         }
                     />
                 </section>
             </Modal>
-            <CreateLocaleModal
+            <EditLocalesModal
                 open={isAddLocaleOpen}
                 setIsOpen={() => setIsAddLocaleOpen(false)}
                 campaign={campaign}
                 setCampaign={setCampaign} />
+            <CreateLocaleModal
+                open={false}
+                setIsOpen={() => setIsAddLocaleOpen(false)}
+                campaign={campaign}
+                setCampaign={setCampaign} />
         </>
     )
 }