From 04ef848b159afd12a5db69846a46328a08eab73e Mon Sep 17 00:00:00 2001
From: Sag <guptazy@gmail.com>
Date: Thu, 21 Sep 2023 21:09:47 +0200
Subject: [PATCH] Fixed copy when there is only 1 click / new member (#18280)

no issue
---
 .../site/recommendations/RecommendationIcon.tsx      | 10 +++++-----
 .../site/recommendations/RecommendationList.tsx      | 12 +++++++-----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationIcon.tsx b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationIcon.tsx
index 8345cf4e68..7839c2b275 100644
--- a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationIcon.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationIcon.tsx
@@ -5,11 +5,11 @@ import React, {useState} from 'react';
 interface Props {
     title: string,
     favicon?: string | null,
-    showSubscribes?: number | boolean,
-    featured_image?: string | null
+    featured_image?: string | null,
+    isGhostSite?: boolean,
 }
 
-const RecommendationIcon: React.FC<Props> = ({title, favicon, showSubscribes, featured_image}) => {
+const RecommendationIcon: React.FC<Props> = ({title, favicon, featured_image, isGhostSite}) => {
     const [icon, setIcon] = useState(favicon || featured_image || null);
 
     const clearIcon = () => {
@@ -20,12 +20,12 @@ const RecommendationIcon: React.FC<Props> = ({title, favicon, showSubscribes, fe
         return null;
     }
 
-    const hint = showSubscribes ? 'This is a Ghost site that supports one-click subscribe' : '';
+    const hint = isGhostSite ? 'This is a Ghost site that supports one-click subscribe' : '';
 
     return (
         <div className="relative h-6 w-6" title={hint}>
             <img alt={title} className="h-6 w-6 rounded-sm" src={icon} onError={clearIcon} />
-            {showSubscribes && <img alt='Ghost Logo' className='absolute bottom-[-3px] right-[-3px] h-[14px] w-[14px]' src={GhostLogo} />}
+            {isGhostSite && <img alt='Ghost Logo' className='absolute bottom-[-3px] right-[-3px] h-[14px] w-[14px]' src={GhostLogo} />}
         </div>
     );
 };
diff --git a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationList.tsx b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationList.tsx
index e2bd7eb5f7..248bf595b7 100644
--- a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationList.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationList.tsx
@@ -31,8 +31,10 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme
         });
     };
 
-    const showSubscribes = recommendation.one_click_subscribe;
-    const count = (showSubscribes ? recommendation.count?.subscribers : recommendation.count?.clicks) || 0;
+    const isGhostSite = recommendation.one_click_subscribe;
+    const count = (isGhostSite ? recommendation.count?.subscribers : recommendation.count?.clicks) || 0;
+    const newMembers = count === 1 ? 'new member' : 'new members';
+    const clicks = count === 1 ? 'click' : 'clicks';
 
     return (
         <TableRow>
@@ -40,7 +42,7 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme
                 <div className='group flex items-center gap-3 hover:cursor-pointer'>
                     <div className={`flex grow flex-col`}>
                         <div className="mb-0.5 flex items-center gap-3">
-                            <RecommendationIcon showSubscribes={showSubscribes} {...recommendation} />
+                            <RecommendationIcon isGhostSite={isGhostSite} {...recommendation} />
                             <span className='line-clamp-1 font-medium'>{recommendation.title}</span>
                         </div>
                         {/* <span className='line-clamp-1 text-xs leading-snug text-grey-700'>{recommendation.url || 'No reason added'}</span> */}
@@ -50,11 +52,11 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme
             <TableCell className='hidden w-8 align-middle md:!visible md:!table-cell' onClick={showDetails}>
                 {/* {(count === 0) ? (<span className="text-grey-500">-</span>) : (<div className='flex grow flex-col'>
                     <span>{count}</span>
-                    <span className='whitespace-nowrap text-xs text-grey-700'>{showSubscribes ? ('New members') : ('Clicks')}</span>
+                    <span className='whitespace-nowrap text-xs text-grey-700'>{isGhostSite ? newMembers : clicks}</span>
                 </div>)} */}
                 {(count === 0) ? (<span className="text-grey-500">-</span>) : (<div className='-mt-px flex grow items-end gap-1'>
                     <span>{count}</span>
-                    <span className='-mb-px whitespace-nowrap text-sm lowercase text-grey-700'>{showSubscribes ? ('New members') : ('Clicks')}</span>
+                    <span className='-mb-px whitespace-nowrap text-sm lowercase text-grey-700'>{isGhostSite ? newMembers : clicks}</span>
                 </div>)}
 
             </TableCell>