Email: Sending allowed even with missing button URL

[richardolsson]

Description

In production, one email was sent while the buttons had no links. This should not be possible. If a user creates a button but does not add a URL there will be a small yellow warning triangle next to the button in the outline. But there should also be an error message in the "delivery" popper, which I guess in some (or all?) cases doesn't work since someone managed to get past it.

Steps to reproduce

1. Go to https://app.dev.zetkin.org/organize/1/projects
2. Go to any project (or create a new one)
3. Create a new email
4. Define any target group
5. Lock the targets
6. Go to "Compose"
7. Under "settings", add a subject line
8. Add a button with some text, but do not define a URL
9. Click "Delivery"

Expected Behaviour

Because the button is not fully defined (it has no URL) delivery should be prevented. There should be an error message in the delivery box saying that the email can't be scheduled or sen yet.

Actual Behaviour

The normal delivery popper shows up with a scheduling UI. There's nothing preventing the user from sending the email even though the buttons have no URLs.

Screenshots (if you have any)

[richardolsson]

@ziggabyte: I thought we built something for this, but maybe in the end we didn't? Do you have any idea if this is an existing feature that is malfunctioning, or the lack of a feature that should be added?

[a-jaxell]

I think I have discovered the cause for this bug.
There seems to be a mixup between what enum to use in the blockProblems() function.

I've started attempting to solve this but If someone could explain what their individual purpose is could understand and get to a possible solution quicker :)

<src/features/emails/types.ts>

export enum BLOCK_TYPES {
  BUTTON = 'button',
  HEADER = 'header',
  LIBRARY_IMAGE = 'libraryImage',
  PARAGRAPH = 'paragraph',
}

export enum BlockKind {
  BUTTON = 'button',
  HEADER = 'header',
  IMAGE = 'image',
  PARAGRAPH = 'paragraph',
}

[richardolsson]

I've started attempting to solve this but If someone could explain what their individual purpose is could understand and get to a possible solution quicker :)

Great question! Judging by how it's used in the code linked below, it looks like BLOCK_TYPES contains the types that can be used inside Editor.js (the library we use for the editor), while BlockKind contains the types that are used in the data that is submitted to the Zetkin API.

app.zetkin.org/src/features/emails/utils/editorjsBlocksToZetkinBlocks.ts

Lines 12 to 21 in 112995d

	if (editorjsBlock.type === BLOCK_TYPES.BUTTON) {
	zetkinBlocks.push({
	data: {
	href: editorjsBlock.data.url,
	tag: editorjsBlock.data.tag,
	text: editorjsBlock.data.buttonText,
	},
	kind: BlockKind.BUTTON,
	});
	} else if (editorjsBlock.type === BLOCK_TYPES.HEADER) {

I would be surprised if this problem is because of an enum mixup. That doesn't mean you're wrong (I could be wrong about this!) but because the bug has to do with buttons, and both enums have the same value for BUTTON (the string 'button') a comparison like BLOCK_TYPES.BUTTON == BlockKind.BUTTON should be true, unless I'm mistaken. I'm pretty sure Typescript complain if the values were incompatible.

I think you're looking in the right part of the code (blockProblems and deliveryBlockProblems), but I just want to point out if it wasn't clear in the issue that the warning triangle is showing, so that should mean that blockProblems() is working as it should.

Again, don't take my word for it because I might be wrong in one or several of my assumptions. I just want to add some more information as you continue to look for the issue.