From d443befd16d18810c55f01e18b2895bcf1679160 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Mon, 18 Sep 2023 11:43:21 +0100
Subject: [PATCH] Added recommendation URL to "Edit recommendation" modal

refs https://github.com/TryGhost/Product/issues/3857
---
 .../AddRecommendationModalConfirm.tsx         |  2 +-
 .../EditRecommendationModal.tsx               |  2 +-
 .../RecommendationReasonForm.tsx              | 20 ++++++++++++++++---
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/site/recommendations/AddRecommendationModalConfirm.tsx b/apps/admin-x-settings/src/components/settings/site/recommendations/AddRecommendationModalConfirm.tsx
index f139e0c36d..0253223c38 100644
--- a/apps/admin-x-settings/src/components/settings/site/recommendations/AddRecommendationModalConfirm.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/recommendations/AddRecommendationModalConfirm.tsx
@@ -111,7 +111,7 @@ const AddRecommendationModalConfirm: React.FC<AddRecommendationModalProps> = ({r
             }
         }}
     >
-        <RecommendationReasonForm errors={errors} formState={formState} updateForm={updateForm}/>
+        <RecommendationReasonForm errors={errors} formState={formState} showURL={false} updateForm={updateForm}/>
     </Modal>;
 };
 
diff --git a/apps/admin-x-settings/src/components/settings/site/recommendations/EditRecommendationModal.tsx b/apps/admin-x-settings/src/components/settings/site/recommendations/EditRecommendationModal.tsx
index 109d06d77a..7624e9e6d3 100644
--- a/apps/admin-x-settings/src/components/settings/site/recommendations/EditRecommendationModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/recommendations/EditRecommendationModal.tsx
@@ -75,7 +75,7 @@ const EditRecommendationModalConfirm: React.FC<AddRecommendationModalProps> = ({
             }
         }}
     >
-        <RecommendationReasonForm errors={errors} formState={formState} updateForm={updateForm as any}/>
+        <RecommendationReasonForm errors={errors} formState={formState} showURL={true} updateForm={updateForm as any}/>
     </Modal>;
 };
 
diff --git a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx
index dbb7b66815..0b0a1da96a 100644
--- a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx
@@ -5,28 +5,42 @@ import React from 'react';
 import RecommendationIcon from './RecommendationIcon';
 import TextArea from '../../../../admin-x-ds/global/form/TextArea';
 import TextField from '../../../../admin-x-ds/global/form/TextField';
+import URLTextField from '../../../../admin-x-ds/global/form/URLTextField';
 import {EditOrAddRecommendation, Recommendation} from '../../../../api/recommendations';
 import {ErrorMessages} from '../../../../hooks/useForm';
 
 interface Props<T extends EditOrAddRecommendation> {
+    showURL?: boolean,
     formState: T,
     errors: ErrorMessages,
     updateForm: (fn: (state: T) => T) => void
 }
 
-const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recommendation>> = ({formState, updateForm, errors}) => {
+const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recommendation>> = ({showURL, formState, updateForm, errors}) => {
     return <Form
         marginBottom={false}
         marginTop
     >
+        {showURL && <URLTextField
+            disabled={true}
+            title='URL'
+            value={formState.url}
+            onChange={u => updateForm((state) => {
+                return {
+                    ...state,
+                    url: u
+                };
+            })}
+        />}
+
         <div>
             <Heading className='mb-2 block text-2xs font-semibold uppercase tracking-wider' grey={true} level={6}>Preview</Heading>
             <a className='flex flex-col rounded-sm border border-grey-300 p-3' href={formState.url} rel="noopener noreferrer" target="_blank">
                 <div className="mb-1 flex items-center gap-2">
                     <RecommendationIcon {...formState} />
-                    <span className='line-clamp-1 font-medium'>{formState.title}</span>
+                    <span className='text-[1.6rem] font-semibold text-grey-900'>{formState.title}</span>
                 </div>
-                <span className='line-clamp-1 text-xs leading-snug text-grey-700'>{formState.url}</span>
+                <span className='text-md font-medium leading-snug text-grey-700'>{formState.reason}</span>
             </a>
             {formState.one_click_subscribe && <Hint>This is a Ghost site, so your readers can subscribe with just one click</Hint>}
         </div>