Updated visibility labels for email cards (#1397)

* Updated visibility labels for email cards REF https://linear.app/ghost/issue/PLG-257/visibility-status-message-consistency - Updated email content card and email CTA card visibility messages for consistency with the upcoming visibility changes * Updated test
TryGhost · Nov 19, 2024 · e31b04a · e31b04a
1 parent ced8c06
commit e31b04a
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 55 deletions.
diff --git a/packages/koenig-lexical/src/components/ui/cards/EmailCard.jsx b/packages/koenig-lexical/src/components/ui/cards/EmailCard.jsx
@@ -1,34 +1,28 @@
-import HelpIcon from '../../../assets/icons/kg-help.svg?react';
 import KoenigNestedEditor from '../../KoenigNestedEditor';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReplacementStringsPlugin from '../../../plugins/ReplacementStringsPlugin';
+import {CardVisibilityMessage} from '../CardVisibilityMessage.jsx';
 import {ReadOnlyOverlay} from '../ReadOnlyOverlay';
 
 export function EmailCard({htmlEditor, htmlEditorInitialState, isEditing}) {
     return (
-        <div className="w-full">
-            <KoenigNestedEditor
-                autoFocus={true}
-                initialEditor={htmlEditor}
-                initialEditorState={htmlEditorInitialState}
-                nodes='basic'
-                textClassName='kg-email-html whitespace-normal pb-1'
-            >
-                <ReplacementStringsPlugin />
-            </KoenigNestedEditor>
+        <>
+            <CardVisibilityMessage message="Hidden on website" />
+            <div className="w-full">
+                <KoenigNestedEditor
+                    autoFocus={true}
+                    initialEditor={htmlEditor}
+                    initialEditorState={htmlEditorInitialState}
+                    nodes='basic'
+                    textClassName='kg-email-html whitespace-normal pb-1'
+                >
+                    <ReplacementStringsPlugin />
+                </KoenigNestedEditor>
 
-            {isEditing &&
-                <div className="!-mx-3 !mt-3 flex items-center justify-center bg-grey-100 p-2 font-sans text-sm font-normal leading-none text-grey-600 dark:bg-grey-950 dark:text-grey-800">
-                    Only visible when delivered by email, this card will not be published on your site.
-                    <a href="https://ghost.org/help/cards/#email-content" rel="noopener noreferrer" target="_blank">
-                        <HelpIcon className="ml-1 mt-[1px] size-4 stroke-[1.2px] text-grey-600 dark:text-grey-800" />
-                    </a>
-                </div>
-            }
-
-            {!isEditing && <ReadOnlyOverlay />}
-        </div>
+                {!isEditing && <ReadOnlyOverlay />}
+            </div>
+        </>
     );
 }
 

diff --git a/packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.jsx b/packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.jsx
@@ -6,6 +6,7 @@ import React from 'react';
 import ReplacementStringsPlugin from '../../../plugins/ReplacementStringsPlugin';
 import {Button} from '../Button';
 import {ButtonGroupSetting, DropdownSetting, InputSetting, InputUrlSetting, SettingsPanel, ToggleSetting} from '../SettingsPanel';
+import {CardVisibilityMessage} from '../CardVisibilityMessage.jsx';
 import {ReadOnlyOverlay} from '../ReadOnlyOverlay';
 
 export function EmailCtaCard({
@@ -48,18 +49,27 @@ export function EmailCtaCard({
         name: 'status:-free'
     }];
 
-    const segmentName = dropdownOptions.find(option => option.name === segment)?.label ?? '';
+    const getVisibilityMessage = (segmentType) => {
+        switch (segmentType) {
+        case 'status:free':
+            return 'Hidden on website and paid newsletter';
+        case 'status:-free':
+            return 'Hidden on website and free newsletter';
+        default:
+            return '';
+        }
+    };
+
+    const visibilityMessage = getVisibilityMessage(segment);
 
     return (
         <>
             <div className="w-full pb-6">
                 {/* Segment */}
-                <div className="pb-7 pt-[.6rem] font-sans text-2xs font-semibold uppercase leading-8 tracking-normal text-grey dark:text-grey-800">
-                    {segmentName}
-                </div>
+                <CardVisibilityMessage message={visibilityMessage} />
 
                 {/* Top divider */}
-                {showDividers && <hr className="not-kg-prose -mt-4 mb-12 block border-t-grey-300 dark:border-t-grey-900" data-testid="top-divider" />}
+                {showDividers && <hr className="not-kg-prose mb-12 block border-t-grey-300 dark:border-t-grey-900" data-testid="top-divider" />}
 
                 {/* HTML content */}
                 <KoenigNestedEditor

diff --git a/packages/koenig-lexical/src/nodes/HtmlNodeComponent.jsx b/packages/koenig-lexical/src/nodes/HtmlNodeComponent.jsx
@@ -50,7 +50,7 @@ export function HtmlNodeComponent({nodeKey, html}) {
             <ToggleSetting
                 dataTestId="visibility-show-on-email"
                 isChecked={emailVisibility}
-                label="Show in email"
+                label="Show in email newsletter"
                 onChange={handleSettingChange(toggleEmail)}
             />
             {emailVisibility && dropdownOptions && (

diff --git a/packages/koenig-lexical/test/e2e/cards/email-card.test.js b/packages/koenig-lexical/test/e2e/cards/email-card.test.js
@@ -45,6 +45,7 @@ test.describe('Email card', async () => {
         <div data-lexical-decorator="true" contenteditable="false">
             <div><svg></svg></div>
             <div data-kg-card-editing="false" data-kg-card-selected="false" data-kg-card="email">
+                <div>Hidden on website</div>
                 <div>
                     <div>
                         <div data-kg="editor">
@@ -70,6 +71,7 @@ test.describe('Email card', async () => {
         <div data-lexical-decorator="true" contenteditable="false">
             <div><svg></svg></div>
             <div data-kg-card-editing="true" data-kg-card-selected="true" data-kg-card="email">
+                <div>Hidden on website</div>
                 <div>
                     <div>
                         <div data-kg="editor">
@@ -84,12 +86,6 @@ test.describe('Email card', async () => {
                             </div>
                         </div>
                     </div>
-                    <div>
-                        Only visible when delivered by email, this card will not be published on your site.
-                        <a href="https://ghost.org/help/cards/#email-content" rel="noopener noreferrer" target="_blank">
-                            <svg></svg>
-                        </a>
-                    </div>
                 </div>
             </div>
         </div>
@@ -198,6 +194,7 @@ test.describe('Email card', async () => {
             <div data-lexical-decorator="true" contenteditable="false">
                 <div><svg></svg></div>
                 <div data-kg-card-editing="true" data-kg-card-selected="true" data-kg-card="email">
+                    <div>Hidden on website</div>
                     <div>
                         <div>
                             <div data-kg="editor">
@@ -219,12 +216,6 @@ test.describe('Email card', async () => {
                                 </div>
                             </div>
                         </div>
-                        <div>
-                            Only visible when delivered by email, this card will not be published on your site.
-                            <a href="https://ghost.org/help/cards/#email-content" rel="noopener noreferrer" target="_blank">
-                                <svg></svg>
-                            </a>
-                        </div>
                     </div>
                 </div>
             </div>
@@ -239,6 +230,7 @@ test.describe('Email card', async () => {
             <div data-lexical-decorator="true" contenteditable="false">
                 <div><svg></svg></div>
                 <div data-kg-card-editing="true" data-kg-card-selected="true" data-kg-card="email">
+                    <div>Hidden on website</div>
                     <div>
                         <div>
                             <div data-kg="editor">
@@ -256,12 +248,6 @@ test.describe('Email card', async () => {
                                 </div>
                             </div>
                         </div>
-                        <div>
-                            Only visible when delivered by email, this card will not be published on your site.
-                            <a href="https://ghost.org/help/cards/#email-content" rel="noopener noreferrer" target="_blank">
-                                <svg></svg>
-                            </a>
-                        </div>
                     </div>
                 </div>
             </div>

diff --git a/packages/koenig-lexical/test/e2e/cards/email-cta-card.test.js b/packages/koenig-lexical/test/e2e/cards/email-cta-card.test.js
@@ -51,7 +51,7 @@ test.describe('Email card', async () => {
                 <div><svg></svg></div>
                 <div data-kg-card-editing="false" data-kg-card-selected="false" data-kg-card="email-cta">
                     <div>
-                        <div>Free members</div>
+                        <div>Hidden on website and paid newsletter</div>
                         <div>
                             <div data-kg="editor">
                                 <div contenteditable="false" role="textbox" spellcheck="true" data-lexical-editor="true" aria-autocomplete="none" aria-readonly="true">
@@ -95,7 +95,7 @@ test.describe('Email card', async () => {
                 <div><svg></svg></div>
                 <div data-kg-card-editing="false" data-kg-card-selected="false" data-kg-card="email-cta">
                     <div>
-                        <div>Free members</div>
+                        <div>Hidden on website and paid newsletter</div>
                         <hr />
                         <div>
                             <div data-kg="editor">
@@ -142,7 +142,7 @@ test.describe('Email card', async () => {
                 <div class="relative border-transparent caret-grey-800 z-10 hover:shadow-[0_0_0_1px] hover:shadow-green hover:-mx-3 hover:px-3"
                     data-kg-card-editing="false" data-kg-card-selected="false" data-kg-card="email-cta">
                     <div class="w-full pb-6">
-                        <div class="pb-7 pt-[.6rem] font-sans text-2xs font-semibold uppercase leading-8 tracking-normal text-grey dark:text-grey-800">Free members</div>
+                        <div class="py-[.6rem] font-sans text-2xs font-semibold uppercase leading-8 tracking-normal text-grey dark:text-grey-800">Hidden on website and paid newsletter</div>
                         <div
                             class="koenig-lexical kg-inherit-styles w-full bg-transparent whitespace-normal font-serif text-xl text-grey-900 dark:text-grey-200 text-center mx-auto [&amp;:has(.placeholder)]:w-fit [&amp;:has(.placeholder)]:text-left">
                             <div data-kg="editor">
@@ -189,7 +189,7 @@ test.describe('Email card', async () => {
                 <div><svg></svg></div>
                 <div data-kg-card-editing="false" data-kg-card-selected="false" data-kg-card="email-cta">
                     <div>
-                        <div>Free members</div>
+                        <div>Hidden on website and paid newsletter</div>
                         <div>
                             <div data-kg="editor">
                                 <div contenteditable="false" role="textbox" spellcheck="true" data-lexical-editor="true" aria-autocomplete="none" aria-readonly="true">
@@ -302,7 +302,7 @@ test.describe('Email card', async () => {
             <div><svg></svg></div>
             <div data-kg-card-editing="true" data-kg-card-selected="true" data-kg-card="email-cta">
                 <div>
-                    <div>Free members</div>
+                    <div>Hidden on website and paid newsletter</div>
                     <hr />
                     <div>
                         <div data-kg="editor">
@@ -482,7 +482,7 @@ test.describe('Email card', async () => {
                 <div><svg></svg></div>
                 <div data-kg-card-editing="false" data-kg-card-selected="false" data-kg-card="email-cta">
                     <div>
-                        <div>Free members</div>
+                        <div>Hidden on website and paid newsletter</div>
                         <hr />
                         <div>
                             <div data-kg="editor">
@@ -513,7 +513,7 @@ test.describe('Email card', async () => {
                 <div><svg></svg></div>
                 <div data-kg-card-editing="false" data-kg-card-selected="true" data-kg-card="email-cta">
                     <div>
-                        <div>Free members</div>
+                        <div>Hidden on website and paid newsletter</div>
                         <hr />
                         <div>
                             <div data-kg="editor">
@@ -548,7 +548,7 @@ test.describe('Email card', async () => {
                 <div><svg></svg></div>
                 <div data-kg-card-editing="false" data-kg-card-selected="true" data-kg-card="email-cta">
                     <div>
-                        <div>Free members</div>
+                        <div>Hidden on website and paid newsletter</div>
                         <hr />
                         <div>
                             <div data-kg="editor">

diff --git a/packages/koenig-lexical/test/e2e/paste-behaviour.test.js b/packages/koenig-lexical/test/e2e/paste-behaviour.test.js
@@ -567,7 +567,7 @@ test.describe('Paste behaviour', async () => {
                                         </div>
                                     </label>
                                     <label>
-                                        <div><div>Show in email</div></div>
+                                        <div><div>Show in email newsletter</div></div>
                                         <div>
                                             <label id="visibility-show-on-email">
                                                 <input type="checkbox" checked="" />