diff --git a/services/web/frontend/stories/editor-left-menu/help-menu.stories.tsx b/services/web/frontend/stories/editor-left-menu/help-menu.stories.tsx
new file mode 100644
index 0000000000..9c8cfda98d
--- /dev/null
+++ b/services/web/frontend/stories/editor-left-menu/help-menu.stories.tsx
@@ -0,0 +1,33 @@
+import HelpMenu from '../../js/features/editor-left-menu/components/help-menu'
+import { ScopeDecorator } from '../decorators/scope'
+
+export default {
+ title: 'Editor / Left Menu / Help Menu',
+ component: HelpMenu,
+ decorators: [ScopeDecorator],
+}
+
+export const ShowSupport = () => {
+ window.metaAttributesCache.set('ol-showSupport', true)
+ window.metaAttributesCache.set('ol-user', {
+ email: 'sherlock@holmes.co.uk',
+ first_name: 'Sherlock',
+ last_name: 'Holmes',
+ })
+
+ return (
+
+ )
+}
+
+export const HideSupport = () => {
+ window.metaAttributesCache.set('ol-showSupport', false)
+
+ return (
+
+ )
+}
diff --git a/services/web/test/frontend/features/editor-left-menu/components/help-contact-us.test.js b/services/web/test/frontend/features/editor-left-menu/components/help-contact-us.test.js
new file mode 100644
index 0000000000..67a7c0508e
--- /dev/null
+++ b/services/web/test/frontend/features/editor-left-menu/components/help-contact-us.test.js
@@ -0,0 +1,31 @@
+import { expect } from 'chai'
+import { screen, fireEvent, within } from '@testing-library/react'
+import HelpContactUs from '../../../../../frontend/js/features/editor-left-menu/components/help-contact-us'
+import { renderWithEditorContext } from '../../../helpers/render-with-context'
+import fetchMock from 'fetch-mock'
+
+describe('', function () {
+ beforeEach(function () {
+ window.metaAttributesCache = new Map()
+ window.metaAttributesCache.set('ol-user', {
+ email: 'sherlock@holmes.co.uk',
+ first_name: 'Sherlock',
+ last_name: 'Holmes',
+ })
+ })
+
+ afterEach(function () {
+ window.metaAttributesCache = new Map()
+ fetchMock.reset()
+ })
+
+ it('open contact us modal when clicked', function () {
+ renderWithEditorContext()
+
+ expect(screen.queryByRole('dialog')).to.equal(null)
+ fireEvent.click(screen.getByRole('button', { name: 'Contact Us' }))
+ const modal = screen.getAllByRole('dialog')[0]
+ within(modal).getAllByText('Contact Us')
+ within(modal).getByText('Subject')
+ })
+})
diff --git a/services/web/test/frontend/features/editor-left-menu/components/help-documentation.test.js b/services/web/test/frontend/features/editor-left-menu/components/help-documentation.test.js
new file mode 100644
index 0000000000..c423c47a49
--- /dev/null
+++ b/services/web/test/frontend/features/editor-left-menu/components/help-documentation.test.js
@@ -0,0 +1,12 @@
+import { expect } from 'chai'
+import { screen, render } from '@testing-library/react'
+import HelpDocumentation from '../../../../../frontend/js/features/editor-left-menu/components/help-documentation'
+
+describe('', function () {
+ it('has correct href attribute', function () {
+ render()
+
+ const link = screen.getByRole('link', { name: 'Documentation' })
+ expect(link.getAttribute('href')).to.equal('/learn')
+ })
+})
diff --git a/services/web/test/frontend/features/editor-left-menu/components/help-menu.test.js b/services/web/test/frontend/features/editor-left-menu/components/help-menu.test.js
new file mode 100644
index 0000000000..810068837c
--- /dev/null
+++ b/services/web/test/frontend/features/editor-left-menu/components/help-menu.test.js
@@ -0,0 +1,41 @@
+import { screen } from '@testing-library/dom'
+import { expect } from 'chai'
+import fetchMock from 'fetch-mock'
+import HelpMenu from '../../../../../frontend/js/features/editor-left-menu/components/help-menu'
+import { renderWithEditorContext } from '../../../helpers/render-with-context'
+
+describe('', function () {
+ beforeEach(function () {
+ window.metaAttributesCache = new Map()
+ window.metaAttributesCache.set('ol-user', {
+ email: 'sherlock@holmes.co.uk',
+ first_name: 'Sherlock',
+ last_name: 'Holmes',
+ })
+ })
+
+ afterEach(function () {
+ window.metaAttributesCache = new Map()
+ fetchMock.reset()
+ })
+
+ it('shows correct menu if `showSupport` is `true`', function () {
+ window.metaAttributesCache.set('ol-showSupport', true)
+
+ renderWithEditorContext()
+
+ screen.getByRole('button', { name: 'Show Hotkeys' })
+ screen.getByRole('button', { name: 'Contact Us' })
+ screen.getByRole('link', { name: 'Documentation' })
+ })
+
+ it('shows correct menu if `showSupport` is `false`', function () {
+ window.metaAttributesCache.set('ol-showSupport', false)
+
+ renderWithEditorContext()
+
+ screen.getByRole('button', { name: 'Show Hotkeys' })
+ expect(screen.queryByRole('button', { name: 'Contact Us' })).to.equal(null)
+ expect(screen.queryByRole('link', { name: 'Documentation' })).to.equal(null)
+ })
+})
diff --git a/services/web/test/frontend/features/editor-left-menu/components/help-show-hotkeys.test.js b/services/web/test/frontend/features/editor-left-menu/components/help-show-hotkeys.test.js
new file mode 100644
index 0000000000..12dd4bcfb7
--- /dev/null
+++ b/services/web/test/frontend/features/editor-left-menu/components/help-show-hotkeys.test.js
@@ -0,0 +1,21 @@
+import { expect } from 'chai'
+import { screen, fireEvent, within } from '@testing-library/react'
+import HelpShowHotkeys from '../../../../../frontend/js/features/editor-left-menu/components/help-show-hotkeys'
+import { renderWithEditorContext } from '../../../helpers/render-with-context'
+import fetchMock from 'fetch-mock'
+
+describe('', function () {
+ afterEach(function () {
+ fetchMock.reset()
+ })
+
+ it('open hotkeys modal when clicked', function () {
+ renderWithEditorContext()
+
+ expect(screen.queryByRole('dialog')).to.equal(null)
+ fireEvent.click(screen.getByRole('button', { name: 'Show Hotkeys' }))
+ const modal = screen.getAllByRole('dialog')[0]
+ within(modal).getByText('Hotkeys')
+ within(modal).getByText('Common')
+ })
+})