added support for links in listing text content

Author: lindblomdavid

apps/internal-portal/frontend/src/pages/ListingTextContent/ListingTextContentForm.tsx

@@ -85,18 +85,44 @@ const ListingTextContentForm = () => {
       return
     }
 
-    // Check for empty content
-    const hasEmptyContent = blocks.some((block) => !block.content.trim())
-    if (hasEmptyContent) {
-      toast.error('Alla block måste ha innehåll')
+    // Validate blocks
+    const hasInvalidBlock = blocks.some((block) => {
+      if (block.type === 'link') {
+        // Link blocks need both name and valid URL
+        if (!block.name?.trim() || !block.url?.trim()) return true
+        try {
+          new URL(block.url)
+          return false
+        } catch {
+          return true
+        }
+      } else {
+        // Text blocks need content
+        return !block.content?.trim()
+      }
+    })
+
+    if (hasInvalidBlock) {
+      toast.error('Kontrollera att alla block har giltigt innehåll')
       return
     }
 
     try {
-      const contentBlocks = blocks.map(({ type, content }) => ({
-        type,
-        content,
-      }))
+      // Format blocks for API - remove the id field and ensure correct structure
+      const contentBlocks = blocks.map((block) => {
+        if (block.type === 'link') {
+          return {
+            type: block.type,
+            name: block.name || '',
+            url: block.url || '',
+          }
+        } else {
+          return {
+            type: block.type,
+            content: block.content || '',
+          }
+        }
+      })
 
       if (isEditMode && rentalObjectCode) {
         await updateMutation.mutateAsync({

apps/internal-portal/frontend/src/pages/ListingTextContent/components/ContentBlockEditor.tsx

@@ -15,19 +15,28 @@ import { z } from 'zod'
 
 type ContentBlockType = z.infer<typeof leasing.v1.ContentBlockTypeSchema>
 
+// ContentBlock can be either a text block or a link block
 export interface ContentBlock {
   id: string
   type: ContentBlockType
-  content: string
+  // Text block fields
+  content?: string
+  // Link block fields
+  name?: string
+  url?: string
 }
 
 interface ContentBlockEditorProps {
   block: ContentBlock
   index: number
-  onUpdate: (id: string, field: 'type' | 'content', value: string) => void
+  onUpdate: (
+    id: string,
+    field: 'type' | 'content' | 'name' | 'url',
+    value: string
+  ) => void
   onDelete: (id: string) => void
   isDragging?: boolean
-  dragListeners?: Record<string, any>
+  dragListeners?: Record<string, unknown>
 }
 
 const blockTypeLabels: Record<ContentBlockType, string> = {
@@ -36,6 +45,17 @@ const blockTypeLabels: Record<ContentBlockType, string> = {
   subtitle: 'Underrubrik',
   text: 'Text',
   bullet_list: 'Punktlista',
+  link: 'Länk',
+}
+
+const isValidUrl = (url: string): boolean => {
+  if (!url.trim()) return true
+  try {
+    new URL(url)
+    return true
+  } catch {
+    return false
+  }
 }
 
 export const ContentBlockEditor = ({
@@ -46,6 +66,9 @@ export const ContentBlockEditor = ({
   isDragging = false,
   dragListeners,
 }: ContentBlockEditorProps) => {
+  const isLinkBlock = block.type === 'link'
+  const urlValid = isLinkBlock ? isValidUrl(block.url || '') : true
+
   return (
     <Paper
       elevation={isDragging ? 8 : 2}
@@ -108,28 +131,76 @@ export const ContentBlockEditor = ({
               <MenuItem value="bullet_list">
                 {blockTypeLabels.bullet_list}
               </MenuItem>
+              <MenuItem value="link">{blockTypeLabels.link}</MenuItem>
             </Select>
           </FormControl>
 
-          <TextField
-            fullWidth
-            multiline
-            rows={
-              block.type === 'headline' || block.type === 'subtitle' ? 2 : 4
-            }
-            value={block.content}
-            onChange={(e) => onUpdate(block.id, 'content', e.target.value)}
-            placeholder={
-              block.type === 'bullet_list'
-                ? 'Skriv en punkt per rad...'
-                : 'Skriv innehåll...'
-            }
-            helperText={
-              block.type === 'bullet_list'
-                ? 'Skriv varje punkt på en ny rad'
-                : ''
-            }
-          />
+          {isLinkBlock ? (
+            // Link block: show name and URL fields
+            <Box display="flex" gap={2}>
+              <Box flex={1}>
+                <Typography
+                  variant="caption"
+                  color="text.secondary"
+                  gutterBottom
+                >
+                  Namn
+                </Typography>
+                <TextField
+                  fullWidth
+                  size="small"
+                  value={block.name || ''}
+                  onChange={(e) => onUpdate(block.id, 'name', e.target.value)}
+                  placeholder="T.ex. Virtuell visning"
+                  error={!!block.url?.trim() && !block.name?.trim()}
+                  helperText={
+                    !!block.url?.trim() && !block.name?.trim()
+                      ? 'Namn krävs'
+                      : ''
+                  }
+                />
+              </Box>
+              <Box flex={2}>
+                <Typography
+                  variant="caption"
+                  color="text.secondary"
+                  gutterBottom
+                >
+                  URL
+                </Typography>
+                <TextField
+                  fullWidth
+                  size="small"
+                  value={block.url || ''}
+                  onChange={(e) => onUpdate(block.id, 'url', e.target.value)}
+                  placeholder="https://example.com"
+                  error={!urlValid}
+                  helperText={!urlValid ? 'Ogiltig URL-format' : ''}
+                />
+              </Box>
+            </Box>
+          ) : (
+            // Text block: show content textarea
+            <TextField
+              fullWidth
+              multiline
+              rows={
+                block.type === 'headline' || block.type === 'subtitle' ? 2 : 4
+              }
+              value={block.content || ''}
+              onChange={(e) => onUpdate(block.id, 'content', e.target.value)}
+              placeholder={
+                block.type === 'bullet_list'
+                  ? 'Skriv en punkt per rad...'
+                  : 'Skriv innehåll...'
+              }
+              helperText={
+                block.type === 'bullet_list'
+                  ? 'Skriv varje punkt på en ny rad'
+                  : ''
+              }
+            />
+          )}
         </Box>
 
         {/* Delete Button */}

apps/internal-portal/frontend/src/pages/ListingTextContent/components/ContentBlocksList.tsx

@@ -67,12 +67,38 @@ export const ContentBlocksList = ({
 
   const handleUpdateBlock = (
     id: string,
-    field: 'type' | 'content',
+    field: 'type' | 'content' | 'name' | 'url',
     value: string
   ) => {
-    const updatedBlocks = blocks.map((block) =>
-      block.id === id ? { ...block, [field]: value } : block
-    )
+    const updatedBlocks = blocks.map((block) => {
+      if (block.id !== id) return block
+
+      // When changing type, reset the appropriate fields
+      if (field === 'type') {
+        if (value === 'link') {
+          // Switching to link type - clear content, set name/url
+          return {
+            ...block,
+            type: value as ContentBlock['type'],
+            content: undefined,
+            name: '',
+            url: '',
+          }
+        } else {
+          // Switching to text type - clear name/url, set content
+          return {
+            ...block,
+            type: value as ContentBlock['type'],
+            content: '',
+            name: undefined,
+            url: undefined,
+          }
+        }
+      }
+
+      // Regular field update
+      return { ...block, [field]: value }
+    })
     onBlocksChange(updatedBlocks)
   }
 
@@ -91,7 +117,7 @@ export const ContentBlocksList = ({
         alignItems="center"
         marginBottom={2}
       >
-        <Typography variant="h6">Textelement ({blocks.length})</Typography>
+        <Typography variant="h6">Innehållsblock ({blocks.length})</Typography>
         <Button
           variant="contained"
           startIcon={<AddIcon />}
@@ -114,15 +140,15 @@ export const ContentBlocksList = ({
           }}
         >
           <Typography color="text.secondary" gutterBottom>
-            Inga textelement ännu
+            Inga innehållsblock ännu
           </Typography>
           <Button
             variant="outlined"
             startIcon={<AddIcon />}
             onClick={handleAddBlock}
             size="small"
           >
-            Lägg till din första text
+            Lägg till ditt första block
           </Button>
         </Box>
       ) : (
@@ -164,8 +190,9 @@ export const ContentBlocksList = ({
 
       <Box marginTop={2}>
         <Typography variant="caption" color="text.secondary">
-          Tips: Dra i handtaget (⋮⋮) för att ändra ordning på texterna.
-          Ordningen påverkar hur annonsen visas.
+          Tips: Dra i handtaget (⋮⋮) för att ändra ordning på blocken. Ordningen
+          påverkar hur annonsen visas. Använd blocktypen "Länk" för att lägga
+          till klickbara länkar.
         </Typography>
       </Box>
     </Box>

apps/internal-portal/frontend/src/pages/ListingTextContent/components/ListingPreview.tsx

@@ -1,12 +1,16 @@
-import { Box, Paper, Typography } from '@mui/material'
+import { Box, Paper, Typography, Link } from '@mui/material'
 import { leasing } from '@onecore/types'
 import { z } from 'zod'
 
 type ContentBlockType = z.infer<typeof leasing.v1.ContentBlockTypeSchema>
 
 interface ContentBlockBase {
   type: ContentBlockType
-  content: string
+  // Text block fields
+  content?: string
+  // Link block fields
+  name?: string
+  url?: string
 }
 
 interface ListingPreviewProps {
@@ -51,7 +55,7 @@ export const ListingPreview = ({
         return (
           <Box key={index} sx={{ marginBottom: 1 }}>
             {renderParagraphs(
-              block.content,
+              block.content || '',
               {
                 width: '100%',
                 fontSize: '1rem',
@@ -109,7 +113,7 @@ export const ListingPreview = ({
         return (
           <Box key={index} sx={{ marginBottom: 1 }}>
             {renderParagraphs(
-              block.content,
+              block.content || '',
               {
                 width: '100%',
                 fontSize: '1rem',
@@ -122,7 +126,7 @@ export const ListingPreview = ({
         )
 
       case 'bullet_list':
-        const items = block.content
+        const items = (block.content || '')
           .split('\n')
           .filter((line: string) => line.trim() !== '')
 
@@ -181,6 +185,42 @@ export const ListingPreview = ({
           </Box>
         )
 
+      case 'link':
+        const hasValidLink = block.name?.trim() && block.url?.trim()
+        return (
+          <Box key={index} sx={{ marginBottom: 1 }}>
+            {hasValidLink ? (
+              <Link
+                href={block.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                sx={{
+                  color: '#951b81',
+                  textDecoration: 'underline',
+                  fontSize: '1rem',
+                  fontFamily: 'graphikRegular',
+                  '&:hover': {
+                    color: '#7a1669',
+                  },
+                }}
+              >
+                {block.name}
+              </Link>
+            ) : (
+              <Typography
+                color="text.secondary"
+                sx={{
+                  fontSize: '1rem',
+                  fontFamily: 'graphikRegular',
+                  textDecoration: 'underline',
+                }}
+              >
+                Länk...
+              </Typography>
+            )}
+          </Box>
+        )
+
       default:
         return null
     }

apps/internal-portal/frontend/src/pages/ListingTextContent/index.tsx

@@ -121,7 +121,7 @@ const ListingTextContent = () => {
 
                 <Box>
                   <Typography variant="body2" color="text.secondary">
-                    Antal textelement:{' '}
+                    Antal innehållsblock:{' '}
                     <strong>{data.contentBlocks.length}</strong>
                   </Typography>
                 </Box>