Optimised Offers title and description UI

ghost/portal/src/App.js

@@ -19,7 +19,7 @@ const DEV_MODE_DATA = {
     showPopup: true,
     site: Fixtures.site,
     member: Fixtures.member.free,
-    page: 'signup',
+    page: 'offer',
     pageData: Fixtures.offer
 };
 
@@ -219,48 +219,6 @@ export default class App extends React.Component {
         return {};
     }
 
-    /**Fetch state from Offer Preview mode query string*/
-    fetchOfferQueryStrData(qs = '') {
-        const qsParams = new URLSearchParams(qs);
-        const data = {};
-        // Handle the query params key/value pairs
-        for (let pair of qsParams.entries()) {
-            const key = pair[0];
-            const value = decodeURIComponent(pair[1]);
-            if (key === 'name') {
-                data.name = value || '';
-            } else if (key === 'code') {
-                data.code = value || '';
-            } else if (key === 'display_title') {
-                data.display_title = value || '';
-            } else if (key === 'display_description') {
-                data.display_description = value || '';
-            } else if (key === 'type') {
-                data.type = value || '';
-            } else if (key === 'cadence') {
-                data.cadence = value || '';
-            } else if (key === 'duration') {
-                data.duration = value || '';
-            } else if (key === 'duration_in_months' && !isNaN(Number(value))) {
-                data.duration_in_months = Number(value);
-            } else if (key === 'amount' && !isNaN(Number(value))) {
-                data.amount = Number(value);
-            } else if (key === 'currency') {
-                data.currency = value || '';
-            } else if (key === 'status') {
-                data.status = value || '';
-            } else if (key === 'tier_id') {
-                data.tier = {
-                    id: value || Fixtures.offer.tier.id
-                };
-            }
-        }
-        return {
-            page: 'offer',
-            pageData: data
-        };
-    }
-
     /** Fetch state from Preview mode Query String */
     fetchQueryStrData(qs = '') {
         const qsParams = new URLSearchParams(qs);
@@ -406,16 +364,9 @@ export default class App extends React.Component {
     fetchPreviewData() {
         const [, qs] = window.location.hash.substr(1).split('?');
         if (hasMode(['preview'])) {
-            let data = {};
-            if (hasMode(['offerPreview'])) {
-                data = this.fetchOfferQueryStrData(qs);
-            } else {
-                data = this.fetchQueryStrData(qs);
-            }
-            return {
-                ...data,
-                showPopup: true
-            };
+            const data = this.fetchQueryStrData(qs);
+            data.showPopup = true;
+            return data;
         }
         return {};
     }

ghost/portal/src/components/pages/OfferPage.js

@@ -42,7 +42,7 @@ export const OfferPageStyles = `
 
     .gh-portal-offer-bar {
         position: relative;
-        padding: 16px 16px 12px;
+        padding: 16px;
     }
 
     .gh-portal-offer-bar::before {
@@ -59,15 +59,20 @@ export const OfferPageStyles = `
         z-index: -1;
     }
 
-    .gh-portal-offer-bar h4 {
+    .gh-portal-offer-title {
+        display: flex;
+        justify-content: space-between;
+        margin-right: -16px;
+    }
+
+    .gh-portal-offer-title h4 {
         font-weight: 500;
         font-size: 1.7rem;
+        margin-bottom: 0;
+        line-height: 1.3em;
     }
 
     .gh-portal-offer-tag {
-        position: absolute;
-        top: 14px;
-        right: 0;
         background: var(--brandcolor);
         color: #fff;
         padding: 4px 8px 4px 12px;
@@ -76,6 +81,13 @@ export const OfferPageStyles = `
         text-transform: uppercase;
         letter-spacing: 0.5px;
         border-radius: 999px 0 0 999px;
+        max-height: 22px;
+        white-space: nowrap;
+    }
+
+    .gh-portal-offer-bar p {
+        margin: 12px 0 0;
+        padding-bottom: 0;
     }
 
     .gh-portal-offer-details .gh-portal-plan-name,
@@ -364,9 +376,11 @@ export default class OfferPage extends React.Component {
 
                     <div className="gh-portal-offer-container">
                         <div className="gh-portal-offer-bar">
-                            <h4>{offer.display_title}</h4>
-                            {this.renderOfferTag()}
-                            <p>{offer.display_description}</p>
+                            <div className="gh-portal-offer-title">
+                                <h4>{offer.display_title}</h4>
+                                {this.renderOfferTag()}
+                            </div>
+                            {(offer.display_description ? <p>{offer.display_description}</p> : '')}
                         </div>
                         <div className="gh-portal-plans-container offer">
                             <div className="gh-portal-offer-details">

ghost/portal/src/utils/fixtures.js

@@ -12,7 +12,7 @@ function objectId() {
 }
 
 export function getSiteData({
-    products = getProductsData({numOfProducts: 3}),
+    products = getProductsData({numOfProducts: 1}),
     portalProducts = products.map(p => p.id),
     portalPlans: portal_plans = ['free', 'monthly', 'yearly']
 } = {}) {
@@ -49,7 +49,7 @@ function getOfferData({
     name = 'Black Friday',
     code = 'black-friday',
     displayTitle = 'Black Friday Special',
-    displayDescription = 'Black Friday Sale!',
+    displayDescription = 'Black Friday Special deal only today!',
     type = 'percent',
     cadence = 'month',
     amount = 50,