From e359d2cb323b107e020af32c3d9a3a603d43c5e4 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Wed, 17 Aug 2022 12:55:24 +0200
Subject: [PATCH] Updated new/edit offer form design

refs https://github.com/TryGhost/Team/issues/1811
---
 ghost/admin/app/styles/layouts/main.css   |  24 +++
 ghost/admin/app/styles/layouts/offers.css | 146 +++++++++++++++-
 ghost/admin/app/templates/offer.hbs       | 199 +++++++++++++---------
 3 files changed, 282 insertions(+), 87 deletions(-)

diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css
index cb5e7997ff..3988057d38 100644
--- a/ghost/admin/app/styles/layouts/main.css
+++ b/ghost/admin/app/styles/layouts/main.css
@@ -1256,6 +1256,30 @@
     grid-column: 1 / 4;
 }
 
+.gh-main-section-header-with-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: -2px;
+}
+
+.gh-main-section-header-info {
+    display: flex;
+    align-items: center;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: 0;
+    font-size: 1.25rem;
+    font-weight: 400;
+}
+
+.gh-main-section-header-info svg {
+    height: 16px;
+    width: 16px;
+    margin-left: 8px;
+}
+
+
 .gh-main-section-block {
     padding: 0;
 }
diff --git a/ghost/admin/app/styles/layouts/offers.css b/ghost/admin/app/styles/layouts/offers.css
index e248b5a4d9..20d132f8e2 100644
--- a/ghost/admin/app/styles/layouts/offers.css
+++ b/ghost/admin/app/styles/layouts/offers.css
@@ -142,6 +142,11 @@
     max-width: unset;
 }
 
+.gh-offer-discount {
+    width: 100%;
+    margin-left: 24px;
+}
+
 .gh-offer-duration {
     display: flex;
 }
@@ -165,6 +170,11 @@
     letter-spacing: 0;
 }
 
+.gh-offer-trial-duration {
+    width: 100%;
+    margin-left: 24px;
+}
+
 .gh-offer-trial-duration .trial-duration::before {
     position: absolute;
     content: "days";
@@ -175,14 +185,63 @@
     letter-spacing: 0;
 }
 
-
-
 .gh-offer-url .gh-input {
     background: var(--main-color-content-greybg);
     border-color: var(--lightgrey-l1);
     color: var(--midgrey);
 }
 
+.gh-offer-type-container {
+    display: flex;
+    width: 100%;
+    border: 1px solid #dddedf;
+    background: #fff;
+    color: #394047;
+    border-radius: 3px;
+}
+
+.gh-offer-tier-and-trial {
+    display: flex;
+}
+
+.gh-select-product-cadence select {
+    text-overflow: ellipsis;
+    padding-right: 32px;
+}
+
+.gh-offer-type-container .gh-radio {
+    width: 100%;
+    padding: 16px;
+    margin: 0;
+    align-items: center;
+}
+
+.gh-offer-type-container .gh-radio:not(:first-child) {
+    border-left: 1px solid #F6F6F6;
+}
+
+.gh-offer-type-container .gh-radio-button {
+    width: 18px;
+    height: 18px;
+}
+
+.gh-offer-type-container .gh-radio.active .gh-radio-button:before {
+    content: "";
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    width: 9px;
+    height: 5px;
+    border: 2px solid #fff;
+    border-top: none;
+    border-right: none;
+    border-radius: 0px;
+    background: transparent;
+    opacity: 1;
+    transition: opacity .15s ease-in-out;
+    transform: rotate(-45deg);
+}
+
 /* Offers – Portal preview */
 .gh-offer-portal-preview {
     display: flex;
@@ -290,6 +349,35 @@
     fill: var(--midgrey);
 }
 
+@media (max-width: 1440px) {
+    .gh-offer-tier-and-trial, .gh-offer-duration {
+        flex-direction: column;
+    }
+
+    .gh-offer-discount, .gh-offer-trial-duration, .gh-offer-duration .form-group:not(:first-of-type) {
+        margin-left: 0;
+    }
+
+    .gh-offer-type-container {
+        flex-direction: column;
+    }
+
+    .gh-offer-type-container .gh-radio:not(:first-child) {
+        border-left: none;
+        border-top: 1px solid #f6f6f6;
+    }
+
+    .gh-offer-title-and-code {
+        grid-template-rows: 1fr 1fr;
+        grid-template-columns: none;
+        grid-column-gap: 0px;
+    }
+
+    .gh-offer-duration .form-group {
+        margin-bottom: 1.6em;
+    }
+}
+
 @media (max-width: 1280px) {
     .gh-offer-portal-preview {
         display: none;
@@ -320,6 +408,33 @@
     .gh-offers-help-card p {
         font-size: 1.3rem;
     }
+
+    .gh-offer-tier-and-trial, .gh-offer-duration {
+        flex-direction: row;
+    }
+
+    .gh-offer-discount, .gh-offer-trial-duration, .gh-offer-duration .form-group:not(:first-of-type) {
+        margin-left: 24px;
+    }
+
+    .gh-offer-type-container {
+        flex-direction: row;
+    }
+
+    .gh-offer-type-container .gh-radio:not(:first-child) {
+        border-top: none;
+        border-left: 1px solid #f6f6f6;
+    }
+
+    .gh-offer-title-and-code {
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: none;
+        grid-column-gap: 24px;
+    }
+
+    .gh-offer-duration .form-group {
+        margin-bottom: 0;
+    }
 }
 
 @media (max-width: 1080px) {
@@ -357,6 +472,33 @@
         min-width: 200px;
         height: 120px;
     }
+
+    .gh-offer-tier-and-trial, .gh-offer-duration {
+        flex-direction: column;
+    }
+
+    .gh-offer-discount, .gh-offer-trial-duration, .gh-offer-duration .form-group:not(:first-of-type) {
+        margin-left: 0px;
+    }
+
+    .gh-offer-type-container {
+        flex-direction: column;
+    }
+
+    .gh-offer-type-container .gh-radio:not(:first-child) {
+        border-left: none;
+        border-top: 1px solid #f6f6f6;
+    }
+
+    .gh-offer-title-and-code {
+        grid-template-rows: 1fr 1fr;
+        grid-template-columns: none;
+        grid-column-gap: 0px;
+    }
+
+    .gh-offer-duration .form-group {
+        margin-bottom: 1.6em;
+    }
 }
 
 @media (max-width: 1000px) {
diff --git a/ghost/admin/app/templates/offer.hbs b/ghost/admin/app/templates/offer.hbs
index f05ad0a894..e3548158fc 100644
--- a/ghost/admin/app/templates/offer.hbs
+++ b/ghost/admin/app/templates/offer.hbs
@@ -41,113 +41,142 @@
                             </GhFormGroup>
                         </div>
 
-                        <h4 class="gh-main-section-header small bn">
-                            Discount information <span class="midgrey"> – Once saved, this cannot be changed.</span>
+                        <h4 class="gh-main-section-header gh-main-section-header-with-info small bn">
+                            <span>Discount information</span>
+                            <div class="midgrey gh-main-section-header-info"><span>Once saved, this cannot be changed.</span><span>{{svg-jar "info"}}</span></div>
                         </h4>
                         <div class="gh-main-section-content grey">
                             {{#if (feature 'freeTrial')}}
                             <GhFormGroup>
                                 <div>
                                     <label class="fw6">Offer type</label>
-                                    <div class="gh-btn-group flex">
-                                        <button class="gh-btn flex-grow-1 {{if this.isDiscountOffer "gh-btn-group-selected"}}" type="button" {{on "click" (fn this.changeType "discount")}} disabled={{this.isDiscountSectionDisabled}}>
-                                            <span>Discount</span>
-                                        </button>
-                                        <button class="gh-btn flex-grow-1 {{if this.isTrialOffer "gh-btn-group-selected"}}"
+                                    <div class="gh-offer-type-container">
+                                        <div class="gh-radio flex-grow-1 {{if this.isDiscountOffer "active"}}" type="button" {{on "click" (fn this.changeType "discount")}} disabled={{this.isDiscountSectionDisabled}}>
+                                            <div class="gh-radio-button"></div>
+                                            <div class="gh-radio-content">
+                                                <div class="gh-radio-label">Discount</div>
+                                                <div class="gh-radio-desc">Offer a special reduced price.</div>
+                                            </div>
+                                        </div>
+                                        <div class="gh-radio flex-grow-1 {{if this.isTrialOffer "active"}}"
                                         type="button" {{on "click" (fn this.changeType "trial")}} disabled={{this.isDiscountSectionDisabled}}>
-                                            <span>Free trial</span>
-                                        </button>
+                                            <div class="gh-radio-button"></div>
+                                            <div class="gh-radio-content">
+                                                <div class="gh-radio-label">Free trial</div>
+                                                <div class="gh-radio-desc">Give free access for a limited time.</div>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                             </GhFormGroup>
                             {{/if}}
-                            <GhFormGroup @errors={{this.errors}} @property="product-cadence">
-                                <label for="product-cadence" class="fw6">Tier – cadence</label>
-                                <span class="gh-select">
-                                    <OneWaySelect
-                                        @value={{this.cadence}}
-                                        @options={{this.cadences}}
-                                        @optionValuePath="name"
-                                        @optionLabelPath="label"
-                                        @optionTargetPath="name"
-                                        @disabled={{this.isDiscountSectionDisabled}}
-                                        @update={{this.updateCadence}}
-                                    />
-                                    {{svg-jar "arrow-down-small"}}
-                                </span>
-                                <GhErrorMessage @errors={{this.errors}} @property="product-cadence" />
-                            </GhFormGroup>
                             {{#if this.isTrialOffer}}
-                            <div class="gh-offer-trial-duration">
-                                <GhFormGroup @errors={{this.offer.errors}} @property="trialDuration">
-                                    <label for="trial-duration" class="fw6">Trial duration</label>
-                                    <div class="trial-duration">
-                                        <GhTextInput
-                                            @name="trial-duration"
-                                            @type="number"
-                                            @placeholder=""
+                            <div class="gh-offer-tier-and-trial">
+                                <GhFormGroup @errors={{this.errors}} @property="product-cadence">
+                                    <label for="product-cadence" class="fw6">Tier – cadence</label>
+                                    <span class="gh-select gh-select-product-cadence">
+                                        <OneWaySelect
+                                            @value={{this.cadence}}
+                                            @options={{this.cadences}}
+                                            @optionValuePath="name"
+                                            @optionLabelPath="label"
+                                            @optionTargetPath="name"
                                             @disabled={{this.isDiscountSectionDisabled}}
-                                            @value={{readonly this.offer.amount}}
-                                            {{on "input" this.setTrialDuration}}
-                                            @id="trial-duration"
-                                            @class="gh-input"
+                                            @update={{this.updateCadence}}
                                         />
-                                    </div>
-                                    <span class="error">
-                                        <GhErrorMessage @errors={{this.offer.errors}} @property="amount" />
+                                        {{svg-jar "arrow-down-small"}}
                                     </span>
+                                    <GhErrorMessage @errors={{this.errors}} @property="product-cadence" />
                                 </GhFormGroup>
-                            </div>
-                            {{else}}
-                            <div class="gh-offer-discount">
-                                <label for="amount" class="fw6 mb1">Amount off</label>
-                                <div class="flex items-start">
-                                    <GhFormGroup @errors={{this.offer.errors}} @property="amount" @hasValidated={{this.offer.hasValidated}}>
-                                        <div class="gh-offer-value percentage">
-                                            {{#if (eq this.offer.type 'fixed')}}
-                                                <GhTextInput
-                                                    @name="amount"
-                                                    @type="number"
-                                                    @placeholder=""
-                                                    @disabled={{this.isDiscountSectionDisabled}}
-                                                    @value={{readonly (gh-price-amount this.offer.amount)}}
-                                                    @input={{this.setDiscountAmount}}
-                                                    @id="amount"
-                                                    @class="gh-input"
-                                                />
-                                            {{else}}
-                                                <GhTextInput
-                                                    @name="amount"
-                                                    @type="number"
-                                                    @placeholder=""
-                                                    @disabled={{this.isDiscountSectionDisabled}}
-                                                    @value={{readonly this.offer.amount}}
-                                                    @input={{this.setDiscountAmount}}
-                                                    @id="amount"
-                                                    @class="gh-input"
-                                                />
-                                            {{/if}}
+                                <div class="gh-offer-trial-duration">
+                                    <GhFormGroup @errors={{this.offer.errors}} @property="trialDuration">
+                                        <label for="trial-duration" class="fw6">Trial duration</label>
+                                        <div class="trial-duration">
+                                            <GhTextInput
+                                                @name="trial-duration"
+                                                @type="number"
+                                                @placeholder=""
+                                                @disabled={{this.isDiscountSectionDisabled}}
+                                                @value={{readonly this.offer.amount}}
+                                                {{on "input" this.setTrialDuration}}
+                                                @id="trial-duration"
+                                                @class="gh-input"
+                                            />
                                         </div>
                                         <span class="error">
                                             <GhErrorMessage @errors={{this.offer.errors}} @property="amount" />
                                         </span>
                                     </GhFormGroup>
-                                    <div class="gh-offer-type">
-                                        <GhFormGroup @errors={{this.offer.errors}} @property="type" @hasValidated={{this.offer.hasValidated}} class="no-margin">
-                                            <span class="gh-select">
-                                                <OneWaySelect
-                                                    @value={{this.offer.type}}
-                                                    @options={{this.offertypes}}
-                                                    @optionValuePath="offertype"
-                                                    @disabled={{this.isDiscountSectionDisabled}}
-                                                    @optionLabelPath="label"
-                                                    @optionTargetPath="offertype"
-                                                    @update = {{this.setDiscountType}}
-                                                />
-                                                {{svg-jar "arrow-down-small"}}
+                                </div>
+                            </div>
+                            {{else}}
+                            <div class="gh-offer-tier-and-trial">
+                                <GhFormGroup @errors={{this.errors}} @property="product-cadence">
+                                    <label for="product-cadence" class="fw6">Tier – cadence</label>
+                                    <span class="gh-select gh-select-product-cadence">
+                                        <OneWaySelect
+                                            @value={{this.cadence}}
+                                            @options={{this.cadences}}
+                                            @optionValuePath="name"
+                                            @optionLabelPath="label"
+                                            @optionTargetPath="name"
+                                            @disabled={{this.isDiscountSectionDisabled}}
+                                            @update={{this.updateCadence}}
+                                        />
+                                        {{svg-jar "arrow-down-small"}}
+                                    </span>
+                                    <GhErrorMessage @errors={{this.errors}} @property="product-cadence" />
+                                </GhFormGroup>
+                                <div class="gh-offer-discount">
+                                    <label for="amount" class="fw6 mb1">Amount off</label>
+                                    <div class="flex items-start">
+                                        <GhFormGroup @errors={{this.offer.errors}} @property="amount" @hasValidated={{this.offer.hasValidated}}>
+                                            <div class="gh-offer-value percentage">
+                                                {{#if (eq this.offer.type 'fixed')}}
+                                                    <GhTextInput
+                                                        @name="amount"
+                                                        @type="number"
+                                                        @placeholder=""
+                                                        @disabled={{this.isDiscountSectionDisabled}}
+                                                        @value={{readonly (gh-price-amount this.offer.amount)}}
+                                                        @input={{this.setDiscountAmount}}
+                                                        @id="amount"
+                                                        @class="gh-input"
+                                                    />
+                                                {{else}}
+                                                    <GhTextInput
+                                                        @name="amount"
+                                                        @type="number"
+                                                        @placeholder=""
+                                                        @disabled={{this.isDiscountSectionDisabled}}
+                                                        @value={{readonly this.offer.amount}}
+                                                        @input={{this.setDiscountAmount}}
+                                                        @id="amount"
+                                                        @class="gh-input"
+                                                    />
+                                                {{/if}}
+                                            </div>
+                                            <span class="error">
+                                                <GhErrorMessage @errors={{this.offer.errors}} @property="amount" />
                                             </span>
-                                            <GhErrorMessage @errors={{this.offer.errors}} @property="type" />
                                         </GhFormGroup>
+                                        <div class="gh-offer-type">
+                                            <GhFormGroup @errors={{this.offer.errors}} @property="type" @hasValidated={{this.offer.hasValidated}} class="no-margin">
+                                                <span class="gh-select">
+                                                    <OneWaySelect
+                                                        @value={{this.offer.type}}
+                                                        @options={{this.offertypes}}
+                                                        @optionValuePath="offertype"
+                                                        @disabled={{this.isDiscountSectionDisabled}}
+                                                        @optionLabelPath="label"
+                                                        @optionTargetPath="offertype"
+                                                        @update = {{this.setDiscountType}}
+                                                    />
+                                                    {{svg-jar "arrow-down-small"}}
+                                                </span>
+                                                <GhErrorMessage @errors={{this.offer.errors}} @property="type" />
+                                            </GhFormGroup>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -193,7 +222,7 @@
 
                         <h4 class="gh-main-section-header small bn">Portal settings</h4>
                         <div class="gh-main-section-content grey">
-                            <div class="form-col2">
+                            <div class="form-col2 gh-offer-title-and-code">
                                 <GhFormGroup @errors={{this.offer.errors}} @property="displayTitle" @hasValidated={{this.offer.hasValidated}}>
                                     <label for="display-title" class="fw6">Display title</label>
                                     <GhTextInput