mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-25 09:03:12 +03:00
Refined complimentary for multiple products (alpha)
This commit is contained in:
Peter Zimon
parent
9b228659da
commit
821c087871
@ -135,71 +135,119 @@
|
||||
{{/unless}}
|
||||
|
||||
{{#each this.products as |product|}}
|
||||
<div class="gh-main-section-content bordered">
|
||||
<div class="gh-cp-memberproduct {{if (not (eq product.subscriptions.length 1)) "multiple-subs" ""}}">
|
||||
<div class="gh-member-product-container">
|
||||
<div class="gh-cp-memberproduct {{if (gt product.subscriptions.length 1) "multiple-subs" ""}}">
|
||||
<h3 class="gh-memberproduct-name">
|
||||
{{product.name}}
|
||||
{{#unless (eq product.subscriptions.length 1)}}
|
||||
{{#if (gt product.subscriptions.length 1)}}
|
||||
<span class="gh-memberproduct-subcount">{{product.subscriptions.length}} subscriptions</span>
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
</h3>
|
||||
|
||||
{{#each product.subscriptions as |sub|}}
|
||||
<div class="gh-memberproduct-subscription">
|
||||
<div>
|
||||
<span class="gh-cp-memberproduct-pricelabel">{{sub.price.nickname}}</span>
|
||||
–
|
||||
<span class="gh-cp-memberproduct-price">{{sub.price.currencySymbol}}{{sub.price.nonDecimalAmount}}/{{sub.price.interval}}</span>
|
||||
–
|
||||
{{#if sub.cancel_at_period_end}}
|
||||
<span class="gh-cp-memberproduct-renewal">Has access until {{sub.validUntil}}</span>
|
||||
<span class="gh-badge archived">Cancelled</span>
|
||||
{{else}}
|
||||
<span class="gh-cp-memberproduct-renewal">Renews {{sub.validUntil}}</span>
|
||||
<span class="gh-badge active">Active</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#if sub.cancellationReason}}
|
||||
<div class="gh-memberproduct-cancelreason"><span class="fw6">Cancellation reason:</span> {{sub.cancellationReason}}</div>
|
||||
{{/if}}
|
||||
<div class="gh-memberproduct-created">Created on {{sub.startDate}}</div>
|
||||
|
||||
<span class="action-menu">
|
||||
<GhDropdownButton @dropdownName="subscription-menu-{{sub.id}}" @classNames="gh-btn gh-btn-outline gh-btn-icon gh-btn-subscription-action only-has-icon" @title="User Actions">
|
||||
<span>
|
||||
{{svg-jar "dotdotdot"}}
|
||||
<span class="hidden">Subscription menu</span>
|
||||
</span>
|
||||
</GhDropdownButton>
|
||||
<GhDropdown @name="subscription-menu-{{sub.id}}" @tagName="ul" @classNames="product-actions-menu dropdown-menu dropdown-align-right">
|
||||
<li>
|
||||
<a href="https://dashboard.stripe.com/customers/{{sub.customer.id}}" target="_blank" rel="noopener">
|
||||
View Stripe customer
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a href="https://dashboard.stripe.com/subscriptions/{{sub.id}}" target="_blank" rel="noopener">
|
||||
View Stripe subscription
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<span class="gh-cp-memberproduct-pricelabel">{{sub.price.nickname}}</span>
|
||||
–
|
||||
{{#if sub.cancel_at_period_end}}
|
||||
<button {{action "continueSubscription" sub.id}}>
|
||||
<span>Continue subscription</span>
|
||||
</button>
|
||||
<span class="gh-cp-memberproduct-renewal">Has access until {{sub.validUntil}}</span>
|
||||
<span class="gh-badge archived">Cancelled</span>
|
||||
{{else}}
|
||||
<button {{action "cancelSubscription" sub.id}}>
|
||||
<span class="red">Cancel subscription</span>
|
||||
</button>
|
||||
<span class="gh-cp-memberproduct-renewal">Renews {{sub.validUntil}}</span>
|
||||
<span class="gh-badge active">Active</span>
|
||||
{{/if}}
|
||||
</li>
|
||||
</GhDropdown>
|
||||
</span>
|
||||
</div>
|
||||
{{#if sub.cancellationReason}}
|
||||
<div class="gh-memberproduct-cancelreason"><span class="fw6">Cancellation reason:</span> {{sub.cancellationReason}}</div>
|
||||
{{/if}}
|
||||
<div class="gh-memberproduct-created">Created on {{sub.startDate}}</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<div class="gh-product-card-price">
|
||||
<div class="flex items-start">
|
||||
<span class="currency-symbol">{{sub.price.currencySymbol}}</span>
|
||||
<span class="amount">{{sub.price.nonDecimalAmount}}</span>
|
||||
</div>
|
||||
<div class="period">{{if (eq sub.price.interval "year") "yearly" "monthly"}}</div>
|
||||
</div>
|
||||
|
||||
<span class="action-menu">
|
||||
<GhDropdownButton @dropdownName="subscription-menu-{{sub.id}}" @classNames="gh-btn gh-btn-outline gh-btn-icon gh-btn-subscription-action only-has-icon" @title="Actions">
|
||||
<span>
|
||||
{{svg-jar "dotdotdot"}}
|
||||
<span class="hidden">Subscription menu</span>
|
||||
</span>
|
||||
</GhDropdownButton>
|
||||
<GhDropdown @name="subscription-menu-{{sub.id}}" @tagName="ul" @classNames="product-actions-menu dropdown-menu dropdown-align-right">
|
||||
<li>
|
||||
<a href="https://dashboard.stripe.com/customers/{{sub.customer.id}}" target="_blank" rel="noopener">
|
||||
View Stripe customer
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a href="https://dashboard.stripe.com/subscriptions/{{sub.id}}" target="_blank" rel="noopener">
|
||||
View Stripe subscription
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
{{#if sub.cancel_at_period_end}}
|
||||
<button {{action "continueSubscription" sub.id}}>
|
||||
<span>Continue subscription</span>
|
||||
</button>
|
||||
{{else}}
|
||||
<button {{action "cancelSubscription" sub.id}}>
|
||||
<span class="red">Cancel subscription</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
</li>
|
||||
</GhDropdown>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
{{#if (and (feature "multipleProducts") (eq product.subscriptions.length 0))}}
|
||||
<div class="gh-memberproduct-subscription">
|
||||
<div>
|
||||
<div>
|
||||
<span class="gh-cp-memberproduct-pricelabel">Complimentary</span>
|
||||
<span class="gh-badge active">Active</span>
|
||||
</div>
|
||||
<div class="gh-memberproduct-created">Created on</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="gh-product-card-price">
|
||||
<div class="flex items-start">
|
||||
<span class="currency-symbol">$</span>
|
||||
<span class="amount">0</span>
|
||||
</div>
|
||||
<div class="period">yearly</div>
|
||||
</div>
|
||||
<span class="action-menu">
|
||||
<GhDropdownButton @dropdownName="subscription-menu-complimentary" @classNames="gh-btn gh-btn-outline gh-btn-icon gh-btn-subscription-action only-has-icon" @title="Actions">
|
||||
<span>
|
||||
{{svg-jar "dotdotdot"}}
|
||||
<span class="hidden">Subscription menu</span>
|
||||
</span>
|
||||
</GhDropdownButton>
|
||||
<GhDropdown @name="subscription-menu-complimentary" @tagName="ul" @classNames="product-actions-menu dropdown-menu dropdown-align-right">
|
||||
<li>
|
||||
<button>
|
||||
<span class="red">Remove complimentary subscription</span>
|
||||
</button>
|
||||
</li>
|
||||
</GhDropdown>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if (not (feature "multipleProducts"))}}
|
||||
{{#if this.isAddComplimentaryAllowed}}
|
||||
<div class="gh-memberproduct-list-footer {{if this.isCreatingComplimentary "min-height" ""}}">
|
||||
<div class="gh-memberproduct-list-footer bt b--whitegrey pt2 {{if this.isCreatingComplimentary "min-height" ""}}">
|
||||
{{#if this.isCreatingComplimentary}}
|
||||
<GhLoadingSpinner />
|
||||
{{else}}
|
||||
|
||||
@ -1634,12 +1634,19 @@ p.gh-members-import-errordetail:first-of-type {
|
||||
}
|
||||
|
||||
/* Member's product list */
|
||||
.gh-member-product-container {
|
||||
border: 1px solid var(--whitegrey);
|
||||
border-radius: 3px;
|
||||
margin-bottom: 20px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.gh-memberproduct-name {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 1.65rem !important;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px !important;
|
||||
margin-bottom: 2px !important;
|
||||
}
|
||||
|
||||
.gh-cp-memberproduct.multiple-subs .gh-memberproduct-name {
|
||||
@ -1673,7 +1680,6 @@ p.gh-members-import-errordetail:first-of-type {
|
||||
}
|
||||
|
||||
.gh-memberproduct-created {
|
||||
margin-top: 1px;
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
@ -1685,8 +1691,6 @@ p.gh-members-import-errordetail:first-of-type {
|
||||
position:relative;
|
||||
margin-top: 12px;
|
||||
margin-bottom: -8px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--whitegrey);
|
||||
}
|
||||
|
||||
.gh-memberproduct-list-footer.min-height {
|
||||
@ -1755,25 +1759,46 @@ p.gh-members-import-errordetail:first-of-type {
|
||||
|
||||
.gh-memberproduct-subscription {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.gh-memberproduct-subscription .action-menu {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: 0;
|
||||
.gh-cp-memberproduct .gh-product-card-price {
|
||||
padding: 10px 18px;
|
||||
}
|
||||
|
||||
.gh-memberproduct-subscription .action-menu .gh-btn-subscription-action {
|
||||
opacity: 0;
|
||||
.gh-cp-memberproduct:not(.multiple-subs) .gh-product-card-price {
|
||||
margin-top: -19px;
|
||||
padding: 15px 18px;
|
||||
}
|
||||
|
||||
.product-actions-menu {
|
||||
top: calc(100% - 16px);
|
||||
right: 0px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.gh-cp-memberproduct.multiple-subs .product-actions-menu {
|
||||
top: calc(100% + 6px);
|
||||
}
|
||||
|
||||
.gh-cp-memberproduct .gh-memberproduct-subscription .action-menu {
|
||||
margin-left: 3vw;
|
||||
}
|
||||
|
||||
.gh-cp-memberproduct:not(.multiple-subs) .gh-memberproduct-subscription .action-menu {
|
||||
margin-top: -28px;
|
||||
}
|
||||
|
||||
.gh-memberproduct-subscription .action-menu .gh-btn-subscription-action:not(:hover) {
|
||||
border-color: var(--main-bg-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.gh-memberproduct-subscription:hover .action-menu .gh-btn-subscription-action,
|
||||
.gh-memberproduct-subscription .action-menu .gh-btn-subscription-action.open {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.gh-cp-memberproduct.multiple-subs .gh-memberproduct-subscription .action-menu {
|
||||
top: 20px;
|
||||
border: 1px solid var(--lightgrey-l1);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.gh-memberproduct-subscription .action-menu > .gh-btn span {
|
||||
|
||||
@ -115,12 +115,17 @@
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
.gh-product-card-price .currency-symbol,
|
||||
.gh-product-card-price .amount,
|
||||
.gh-product-card-price .currency {
|
||||
font-weight: 600;
|
||||
color: var(--darkgrey);
|
||||
}
|
||||
|
||||
.gh-product-card-price .currency-symbol {
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.gh-product-card-price .amount {
|
||||
font-size: 2.1rem;
|
||||
letter-spacing: -0.2px;
|
||||
@ -346,12 +351,6 @@
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
.product-actions-menu {
|
||||
top: calc(100% + 6px);
|
||||
right: 10px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.gh-btn-archive-toggle {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
@ -792,10 +792,8 @@ textarea {
|
||||
}
|
||||
|
||||
.form-rich-radio .gh-radio-label {
|
||||
padding: 12px 12px 12px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
padding: 12px 40px 12px 14px;
|
||||
}
|
||||
|
||||
.form-rich-radio .gh-radio-label .description h4 {
|
||||
@ -815,6 +813,9 @@ textarea {
|
||||
}
|
||||
|
||||
.form-rich-radio .check {
|
||||
position: absolute;
|
||||
top: calc(50% - 7px);
|
||||
right: 12px;
|
||||
color: var(--darkgrey);
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
||||
@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>circle{fill:currentColor;}</style></defs><title>navigation-menu-horizontal</title><circle cx="3.25" cy="12" r="3.25"/><circle cx="12" cy="12" r="3.25"/><circle cx="20.75" cy="12" r="3.25"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>circle{fill:currentColor;}</style></defs><title>navigation-menu-horizontal</title><circle cx="3.25" cy="12" r="2.6"/><circle cx="12" cy="12" r="2.6"/><circle cx="20.75" cy="12" r="2.6"/></svg>
|
||||
|
Before Width: | Height: | Size: 268 B After Width: | Height: | Size: 265 B |
Loading…
Reference in New Issue
Block a user