0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00

Refined member subscription detail box design

refs https://github.com/TryGhost/Team/issues/1904
This commit is contained in:
Rishabh 2022-09-23 20:19:51 +05:30 committed by Rishabh Garg
parent 50100a7c8d
commit ec5f09edeb
2 changed files with 13 additions and 4 deletions

View file

@ -184,10 +184,10 @@
<span class="gh-cp-membertier-renewal">Renews {{sub.validUntil}}</span>
{{/if}}
</div>
<div class="flex flex-row gh-cp-membertier-details">
<div class="flex flex-row gh-cp-membertier-details" {{on "click" (fn this.toggleSubscriptionExpanded sub.id)}}>
Details {{svg-jar "arrow-right-stroke"}}
</div>
<div class="gh-membertier-advanced" data-test-subscription={{index}}>
<div class="gh-membertier-advanced {{if (not sub.showDetails) "hide"}}" data-test-subscription={{index}}>
<div class="gh-membertier-details-container">
{{#if sub.cancellationReason}}
<div class="mb4">
@ -395,7 +395,7 @@
{{/if}}
{{/if}}
<div class="gh-membertier-details">
<span class="gh-membertier-created">Created on {{sub.startDate}}</span>
<span class="gh-membertier-created">Created on {{sub.startDate}}</span>
{{#if (and sub.attribution sub.attribution.url sub.attribution.title) }}
<span class="gh-membertier-separator">·</span>
<span class="gh-membertier-started">Subscribed on <a href="{{sub.attribution.url}}" target="_blank" rel="noopener noreferrer">{{ sub.attribution.title }}</a></span>

View file

@ -23,6 +23,7 @@ export default class extends Component {
@tracked showMemberTierModal = false;
@tracked tiersList;
@tracked newslettersList;
@tracked isSubscriptionExpanded = {};
get isAddComplimentaryAllowed() {
if (!this.membersUtils.paidMembersEnabled) {
@ -98,7 +99,7 @@ export default class extends Component {
if (!sub.id && this.feature.get('compExpiring') && sub.tier?.expiry_at) {
data.compExpiry = moment(sub.tier.expiry_at).format('D MMM YYYY');
}
data.showDetails = !!this.isSubscriptionExpanded[sub.id];
return data;
});
return tiers.map((tier) => {
@ -135,6 +136,14 @@ export default class extends Component {
}
}
@action
toggleSubscriptionExpanded(subId) {
this.isSubscriptionExpanded = {
...this.isSubscriptionExpanded,
[subId]: !this.isSubscriptionExpanded[subId]
};
}
@action
setup() {
this.fetchTiers.perform();