Add newsletter setting for footer Share button (#26868)

ref
https://linear.app/ghost/issue/FEA-480/native-share-buttons-with-link-based-referral-param-for-attribution

Adds a newsletter setting to show/hide the footer Share action and
updates the settings preview footer actions UI to match the email
layout.

---------

Co-authored-by: Troy Ciesco <tmciesco@gmail.com>

Author: peterzimon

apps/admin-x-framework/src/api/newsletters.ts

@@ -30,6 +30,7 @@ export type Newsletter = {
     show_header_name: boolean;
     show_post_title_section: boolean;
     show_comment_cta: boolean;
+    show_share_button: boolean;
     show_subscription_details: boolean;
     show_latest_posts: boolean;
     background_color: string;

apps/admin-x-framework/src/test/responses/newsletters.json

@@ -28,6 +28,7 @@
             "show_header_name": true,
             "show_post_title_section": true,
             "show_comment_cta": true,
+            "show_share_button": false,
             "show_subscription_details": false,
             "show_latest_posts": false,
             "background_color": "light",
@@ -76,6 +77,7 @@
             "show_header_name": true,
             "show_post_title_section": true,
             "show_comment_cta": true,
+            "show_share_button": false,
             "show_subscription_details": false,
             "show_latest_posts": false,
             "background_color": "light",

apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-detail-modal.tsx

@@ -372,6 +372,12 @@ const Sidebar: React.FC<{
                             label='Add a link to your comments'
                             onChange={e => updateNewsletter({show_comment_cta: e.target.checked})}
                         />}
+                        <Toggle
+                            checked={newsletter.show_share_button}
+                            direction="rtl"
+                            label='Show share button'
+                            onChange={e => updateNewsletter({show_share_button: e.target.checked})}
+                        />
                         <Toggle
                             checked={newsletter.show_latest_posts}
                             direction="rtl"

apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-preview-content.tsx

@@ -26,6 +26,7 @@ const NewsletterPreviewContent: React.FC<{
     showCommentCta: boolean;
     showFeatureImage: boolean;
     showFeedback: boolean;
+    showShareButton: boolean;
     showLatestPosts: boolean;
     showSubscriptionDetails: boolean;
 
@@ -70,6 +71,7 @@ const NewsletterPreviewContent: React.FC<{
     showCommentCta,
     showFeatureImage,
     showFeedback,
+    showShareButton,
     showLatestPosts,
     showSubscriptionDetails,
 
@@ -266,32 +268,40 @@ const NewsletterPreviewContent: React.FC<{
                             </div>
 
                             {/* Feedback */}
-                            {(showFeedback || showCommentCta) && (
+                            {(showFeedback || showCommentCta || showShareButton) && (
                                 <div className={clsx('grid gap-5 border-b border-grey-200 px-6 py-5', dividerStyle === 'dashed' && 'border-dashed', dividerStyle === 'dotted' && 'border-b-2 border-dotted')} style={{borderColor: dividerColor}}>
-                                    <div className="flex justify-center gap-3">
+                                    <div className="grid auto-cols-fr grid-flow-col gap-4">
                                         {showFeedback && (
                                             <>
-                                                <button className="pointer-events-none cursor-default rounded-[2.2rem] bg-transparent font-semibold whitespace-nowrap" type="button">
-                                                    <span className="inline-flex items-center gap-2 px-[18px] py-[7px]" style={{color: textColor}}>
+                                                <div className="pointer-events-none flex min-w-[120px] cursor-default flex-col items-center gap-[11px] text-center">
+                                                    <span className="inline-flex size-[54px] items-center justify-center rounded-full border" style={{borderColor: dividerColor, color: textColor}}>
                                                         <Icon colorClass='' name="thumbs-up" size="md" />
-                                                        <span>More like this</span>
                                                     </span>
-                                                </button>
-                                                <button className="pointer-events-none cursor-default rounded-[2.2rem] bg-transparent font-semibold whitespace-nowrap" type="button">
-                                                    <span className="inline-flex items-center gap-2 px-[18px] py-[7px]" style={{color: textColor}}>
-                                                        <Icon colorClass='' name="thumbs-down" />
-                                                        <span>Less like this</span>
+                                                    <span className="font-sans text-[1.3rem] leading-[1.4] font-medium" style={{color: textColor}}>More like this</span>
+                                                </div>
+                                                <div className="pointer-events-none flex min-w-[120px] cursor-default flex-col items-center gap-[11px] text-center">
+                                                    <span className="inline-flex size-[54px] items-center justify-center rounded-full border" style={{borderColor: dividerColor, color: textColor}}>
+                                                        <Icon colorClass='' name="thumbs-down" size="md" />
                                                     </span>
-                                                </button>
+                                                    <span className="font-sans text-[1.3rem] leading-[1.4] font-medium" style={{color: textColor}}>Less like this</span>
+                                                </div>
                                             </>
                                         )}
                                         {showCommentCta && (
-                                            <button className="pointer-events-none cursor-default rounded-[2.2rem] bg-transparent font-semibold whitespace-nowrap" type="button">
-                                                <span className="inline-flex items-center gap-2 px-[18px] py-[7px]" style={{color: textColor}}>
-                                                    <Icon colorClass='' name="comment" />
-                                                    <span>Comment</span>
+                                            <div className="pointer-events-none flex min-w-[120px] cursor-default flex-col items-center gap-[11px] text-center">
+                                                <span className="inline-flex size-[54px] items-center justify-center rounded-full border" style={{borderColor: dividerColor, color: textColor}}>
+                                                    <Icon colorClass='' name="comment" size="md" />
                                                 </span>
-                                            </button>
+                                                <span className="font-sans text-[1.3rem] leading-[1.4] font-medium" style={{color: textColor}}>Comment</span>
+                                            </div>
+                                        )}
+                                        {showShareButton && (
+                                            <div className="pointer-events-none flex min-w-[120px] cursor-default flex-col items-center gap-[11px] text-center">
+                                                <span className="inline-flex size-[54px] items-center justify-center rounded-full border" style={{borderColor: dividerColor, color: textColor}}>
+                                                    <Icon colorClass='' name="share" size="md" />
+                                                </span>
+                                                <span className="font-sans text-[1.3rem] leading-[1.4] font-medium" style={{color: textColor}}>Share</span>
+                                            </div>
                                         )}
                                     </div>
                                 </div>

apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-preview.tsx

@@ -21,6 +21,7 @@ const NewsletterPreview: React.FC<{newsletter: Newsletter}> = ({newsletter}) =>
 
     const showCommentCta = newsletter.show_comment_cta && commentsEnabled !== 'off';
     const showFeedback = newsletter.feedback_enabled;
+    const showShareButton = newsletter.show_share_button;
 
     const backgroundColor = () => {
         const value = newsletter.background_color;
@@ -207,6 +208,7 @@ const NewsletterPreview: React.FC<{newsletter: Newsletter}> = ({newsletter}) =>
         showFeedback={showFeedback}
         showLatestPosts={newsletter.show_latest_posts}
         showPostTitleSection={newsletter.show_post_title_section}
+        showShareButton={showShareButton}
         showSubscriptionDetails={newsletter.show_subscription_details}
         siteTitle={title}
         titleAlignment={newsletter.title_alignment}

ghost/core/core/server/services/email-service/email-renderer.js

@@ -1032,6 +1032,7 @@ class EmailRenderer {
 
         const postUrl = this.#getPostUrl(post);
         const isPublicPost = post.get('visibility') === 'public';
+        const showShareButton = isPublicPost && newsletter.get('show_share_button');
         const shareUrl = new URL(postUrl);
         shareUrl.hash = '/share';
 
@@ -1059,7 +1060,7 @@ class EmailRenderer {
         const hasEmailOnlyFlag = post.related('posts_meta')?.get('email_only') ?? false;
         const hasFeedbackButtons = newsletter.get('feedback_enabled');
         const showCommentCta = newsletter.get('show_comment_cta') && this.#settingsCache.get('comments_enabled') !== 'off' && !hasEmailOnlyFlag;
-        const feedbackButtonCount = (hasFeedbackButtons ? 2 : 0) + (showCommentCta ? 1 : 0) + (isPublicPost ? 1 : 0);
+        const feedbackButtonCount = (hasFeedbackButtons ? 2 : 0) + (showCommentCta ? 1 : 0) + (showShareButton ? 1 : 0);
         const feedbackButtonCellWidth = feedbackButtonCount > 0
             ? `${(100 / feedbackButtonCount).toFixed(2).replace(/\.00$/, '')}%`
             : null;
@@ -1123,7 +1124,7 @@ class EmailRenderer {
             post: {
                 title: post.get('title'),
                 url: postUrl,
-                shareUrl: isPublicPost ? shareUrl.href : null,
+                shareUrl: showShareButton ? shareUrl.href : null,
                 commentUrl: commentUrl.href,
                 authors,
                 publishedAt,