diff --git a/ghost/admin/app/components/modals/offers/link.hbs b/ghost/admin/app/components/modals/offers/link.hbs new file mode 100644 index 0000000000..8385358321 --- /dev/null +++ b/ghost/admin/app/components/modals/offers/link.hbs @@ -0,0 +1,26 @@ +
+
+

Offer link

+
+ + +
+

+ You can share this link with your members via email or social media. This discount will be applied at checkout when members use this link. +

+
+ + + +
+
+
\ No newline at end of file diff --git a/ghost/admin/app/components/modals/offers/link.js b/ghost/admin/app/components/modals/offers/link.js new file mode 100644 index 0000000000..7f2936cf46 --- /dev/null +++ b/ghost/admin/app/components/modals/offers/link.js @@ -0,0 +1,7 @@ +import Component from '@glimmer/component'; + +export default class ModalsOffersLinkComponent extends Component { + constructor() { + super(...arguments); + } +} \ No newline at end of file diff --git a/ghost/admin/app/controllers/offer.js b/ghost/admin/app/controllers/offer.js index 54984ad992..15a8660ca0 100644 --- a/ghost/admin/app/controllers/offer.js +++ b/ghost/admin/app/controllers/offer.js @@ -250,6 +250,7 @@ export default class OffersController extends Controller { updateDuration(duration) { this._saveOfferProperty('duration', duration); // this.offer.duration = duration; + this.selectedDuration = duration; } // Private ----------------------------------------------------------------- diff --git a/ghost/admin/app/router.js b/ghost/admin/app/router.js index 821abdc4a4..8fbbafca0d 100644 --- a/ghost/admin/app/router.js +++ b/ghost/admin/app/router.js @@ -87,7 +87,9 @@ Router.map(function () { this.route('member.new', {path: '/members/new'}); this.route('member', {path: '/members/:member_id'}); - this.route('offers'); + this.route('offers', function () { + this.route('link'); + }); this.route('offer.new', {path: '/offers/new'}); this.route('offer', {path: '/offers/:offer_id'}); diff --git a/ghost/admin/app/routes/offers/link.js b/ghost/admin/app/routes/offers/link.js new file mode 100644 index 0000000000..78da81f5be --- /dev/null +++ b/ghost/admin/app/routes/offers/link.js @@ -0,0 +1,35 @@ +import AuthenticatedRoute from 'ghost-admin/routes/authenticated'; +import {action} from '@ember/object'; +import {bind} from '@ember/runloop'; +import {inject as service} from '@ember/service'; + +export default class SettingsOffersLinkRoute extends AuthenticatedRoute { + @service modals; + + activate() { + this.advancedModal = this.modals.open('modals/offers/link', {}, { + className: 'fullscreen-modal-action fullscreen-modal-wide', + beforeClose: bind(this, this.beforeModalClose) + }); + } + + @action + willTransition() { + this.isTransitioning = true; + return true; + } + + deactivate() { + this.advancedModal?.close(); + this.advancedModal = null; + this.isTransitioning = false; + } + + beforeModalClose() { + if (this.isTransitioning) { + return; + } + + this.transitionTo('offers'); + } +} diff --git a/ghost/admin/app/styles/layouts/offers.css b/ghost/admin/app/styles/layouts/offers.css index 2c7ca8d465..c7879b496a 100644 --- a/ghost/admin/app/styles/layouts/offers.css +++ b/ghost/admin/app/styles/layouts/offers.css @@ -6,7 +6,8 @@ display: flex; flex-direction: column; justify-content: space-between; - min-height: calc(100vh - 95px); + padding-bottom: 0; + min-height: calc(100vh - 195px); } .gh-offers-list-cta { @@ -52,6 +53,23 @@ padding: 0; } +.gh-offers-list .offer-value { + display: flex; + align-items: center; + white-space: nowrap; + color: var(--green); +} + +.gh-offers-list .offer-value svg { + width: 11px; + height: 11px; + margin-right: 6px; +} + +.gh-offers-list .offer-value svg path { + stroke-width: 2px; +} + .gh-offers-list-footer { display: flex; align-items: center; @@ -63,8 +81,31 @@ stroke-width: 1.5px; } -.gh-offer-modal-content .form-group:last-of-type { - margin-bottom: 0; +.gh-offer-link-button { + opacity: 0; +} + +.gh-offers .gh-list-row:hover .gh-offer-link-button { + opacity: 1; +} + +.gh-offer-link-button, +.gh-offer-link-button:hover { + margin-right: 16px; +} + +.gh-offer-link-button svg { + width: 18px; + height: 18px; +} + +.gh-offer-link-button svg path { + stroke: var(--darkgrey); + stroke-width: 1.4px; +} + +.gh-offer-link-button:hover svg path { + stroke: var(--black); } .gh-offer-type { @@ -181,6 +222,7 @@ .gh-offers-help { margin-top: 5vmin; + margin-bottom: 0; } .gh-offers-help .gh-main-section-content { @@ -201,6 +243,7 @@ color: var(--midgrey); font-size: 1.4rem; padding: 32px; + transition: all 0.3s ease-in-out; } .gh-offers-help-card .thumbnail { @@ -212,4 +255,14 @@ .gh-offers-help-card .gh-btn { width: 100%; +} + +.gh-offers-help-card:hover { + box-shadow: + 0px 54px 80px rgba(0, 0, 0, 0.07), + 0px 19.7109px 29.2013px rgba(0, 0, 0, 0.0482987), + 0px 9.56927px 14.1767px rgba(0, 0, 0, 0.0389404), + 0px 4.69103px 6.94968px rgba(0, 0, 0, 0.0310596), + 0px 1.85484px 2.74791px rgba(0, 0, 0, 0.0217013); + transition: all 0.3s ease-in-out; } \ No newline at end of file diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css index cb794956e5..ee4f2c5f60 100644 --- a/ghost/admin/app/styles/patterns/forms.css +++ b/ghost/admin/app/styles/patterns/forms.css @@ -772,8 +772,8 @@ textarea { } .gh-input-group .gh-btn span { - height: 36px; - line-height: 36px; + height: 38px; + line-height: 38px; border-top-left-radius: 0; border-bottom-left-radius: 0; } diff --git a/ghost/admin/app/templates/offer.hbs b/ghost/admin/app/templates/offer.hbs index 746fa22472..1d5deeeae8 100644 --- a/ghost/admin/app/templates/offer.hbs +++ b/ghost/admin/app/templates/offer.hbs @@ -205,7 +205,7 @@ type="button" class="gh-btn gh-btn-red gh-btn-icon" > - Delete offer + Archive offer diff --git a/ghost/admin/app/templates/offers.hbs b/ghost/admin/app/templates/offers.hbs index ad3badd3d4..c145c9eb17 100644 --- a/ghost/admin/app/templates/offers.hbs +++ b/ghost/admin/app/templates/offers.hbs @@ -9,7 +9,7 @@
{{#if this.offersExist}} - +
@@ -26,19 +26,25 @@ {{offer.tier.name}}- {{offer.cadenceInterval}} - {{#if (eq offer.type 'percent')}} - {{offer.amount}}% OFF - {{/if}} - {{#if (eq offer.type 'fixed')}} - 20% OFF - {{/if}} - – {{offer.duration}} + + {{svg-jar "offer"}} + {{#if (eq offer.type 'percent')}} + {{offer.amount}}% OFF + {{/if}} + {{#if (eq offer.type 'fixed')}} + 20% OFF + {{/if}} + – {{offer.duration}} + - - +
+ + {{svg-jar "link"}} + {{svg-jar "arrow-right" class="w6 h6 fill-midgrey pa1"}}
@@ -46,7 +52,7 @@ {{/each}}
{{this.offersList.length}} offers Tier
{{else}} -
+
{{svg-jar "discount-bubble" class="discount-bubble"}}

Provide special offers to new signups

@@ -59,35 +65,35 @@ {{/if}}

+

Get the most out of offers

- -
+

Discounts right on the beat

Setting up the right timing for your offers is as critical as finding the right amount.

- Read more -
+
Read more
+ -
+

How The Browser grow their audience with special offers

Learn about how The Browser work with offers

- Read more -
+
Read more
+ -
+

Read more about offers

Check out the Ghost blog for more tips about how offers can boost your subscriptions.

- Read more -
+
Read more
+
diff --git a/ghost/admin/public/assets/icons/offer.svg b/ghost/admin/public/assets/icons/offer.svg new file mode 100644 index 0000000000..44c280b2ad --- /dev/null +++ b/ghost/admin/public/assets/icons/offer.svg @@ -0,0 +1,4 @@ + + + +