Updated visibility label copy for clarity (#1370)

* Updated visibility label copy for clarity REF PLG-179 * Updated tests REF PLG-179
TryGhost · Aug 21, 2024 · 37e0152 · 37e0152
1 parent 2823b60
commit 37e0152
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/packages/koenig-lexical/src/hooks/useVisibilityToggle.js b/packages/koenig-lexical/src/hooks/useVisibilityToggle.js
@@ -46,13 +46,13 @@ export const useVisibilityToggle = (editor, nodeKey, cardConfig) => {
         if (!showOnWeb && !showOnEmail) {
             message = 'Hidden from both email and web';
         } else if (showOnWeb && !showOnEmail) {
-            message = 'Shown on web only';
+            message = 'Only shown on web';
         } else if (showOnWeb && showOnEmail && segmentLabel) {
-            message = `Shown on web and email to ${segmentLabel}`;
+            message = `Shown on web, and to ${segmentLabel} only in email`;
         } else if (!showOnWeb && showOnEmail && !segmentLabel) {
-            message = 'Shown in email only';
+            message = 'Only shown in email';
         } else if (!showOnWeb && showOnEmail && segmentLabel) {
-            message = `Shown in email to ${segmentLabel}`;
+            message = `Only shown to ${segmentLabel} in email`;
         }
     }
 

diff --git a/packages/koenig-lexical/test/e2e/content-visibility.test.js b/packages/koenig-lexical/test/e2e/content-visibility.test.js
@@ -81,7 +81,7 @@ test.describe('Content Visibility', async () => {
 
             await card.getByTestId('visibility-show-on-web-Toggle').click();
 
-            await expect(card.getByTestId('visibility-message')).toContainText('Shown in email only');
+            await expect(card.getByTestId('visibility-message')).toContainText('Only shown in email');
         });
 
         test('can toggle visibility settings - show on email is off', async function () {
@@ -91,7 +91,7 @@ test.describe('Content Visibility', async () => {
 
             await card.getByTestId('visibility-show-on-email-Toggle').click();
 
-            await expect(card.getByTestId('visibility-message')).toContainText('Shown on web only');
+            await expect(card.getByTestId('visibility-message')).toContainText('Only shown on web');
         });
 
         test('can toggle visibility settings - show on email and web and all subscribers', async function () {
@@ -111,7 +111,7 @@ test.describe('Content Visibility', async () => {
 
             await card.locator('[data-test-value="status:free"]').click();
 
-            await expect(card.getByTestId('visibility-message')).toContainText('Shown on web and email to free subscribers');
+            await expect(card.getByTestId('visibility-message')).toContainText('Shown on web, and to free subscribers only in email');
         });
 
         test('can toggle visibility settings segments - paid subscribers', async function () {
@@ -122,7 +122,7 @@ test.describe('Content Visibility', async () => {
             await card.getByTestId('visibility-dropdown-segment').click();
             await card.locator('[data-test-value="status:-free"]').click();
 
-            await expect(card.getByTestId('visibility-message')).toContainText('Shown on web and email to paid subscribers');
+            await expect(card.getByTestId('visibility-message')).toContainText('Shown on web, and to paid subscribers only in email');
         });
 
         test('can toggle visibility settings segments - all subscribers', async function () {

diff --git a/packages/koenig-lexical/test/unit/hooks/useVisibilityToggle.test.js b/packages/koenig-lexical/test/unit/hooks/useVisibilityToggle.test.js
@@ -77,7 +77,7 @@ describe('useVisibilityToggle', () => {
 
         expect(result.current[4]).toBe(false); // emailVisibility
         expect(node.visibility.showOnEmail).toBe(false);
-        expect(result.current[7]).toBe('Shown on web only'); // message
+        expect(result.current[7]).toBe('Only shown on web'); // message
     });
 
     it('should toggleWeb and be able to update the node', () => {
@@ -91,7 +91,7 @@ describe('useVisibilityToggle', () => {
 
         expect(result.current[5]).toBe(false); // webVisibility
         expect(node.visibility.showOnWeb).toBe(false);
-        expect(result.current[7]).toBe('Shown in email only'); // message
+        expect(result.current[7]).toBe('Only shown in email'); // message
     });
 
     it('should toggleSegment and be able to update the node', () => {
@@ -105,7 +105,7 @@ describe('useVisibilityToggle', () => {
 
         expect(result.current[3]).toBe('status:free'); // segment
         expect(node.visibility.segment).toBe('status:free');
-        expect(result.current[7]).toBe('Shown on web and email to free subscribers'); // message
+        expect(result.current[7]).toBe('Shown on web, and to free subscribers only in email'); // message
     });
 
     it('should update the message correctly when both toggles are off', () => {