Unconnected subscription improvements (#41468)
* Don't show a My Subscriptions group if it's empty * Hide expiry if installed but has no subscription * Show subscription status labels in a column * Add changefile(s) from automation for the following project(s): woocommerce * Show only one badge * Show installed header if no installed items * Remove test code * Show entire installed section --------- Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
parent
53b8933e7c
commit
ab400a4128
|
@ -106,10 +106,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.woocommerce-marketplace__my-subscriptions__product-statuses {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.woocommerce-marketplace__my-subscriptions__product-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
@ -101,24 +101,25 @@ export default function MySubscriptions(): JSX.Element {
|
|||
} ) }
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="woocommerce-marketplace__my-subscriptions-section woocommerce-marketplace__my-subscriptions__available">
|
||||
<h2 className="woocommerce-marketplace__my-subscriptions__heading">
|
||||
{ __( 'Available to use', 'woocommerce' ) }
|
||||
</h2>
|
||||
<p className="woocommerce-marketplace__my-subscriptions__table-description">
|
||||
{ __(
|
||||
"Woo.com subscriptions you haven't used yet.",
|
||||
'woocommerce'
|
||||
) }
|
||||
</p>
|
||||
<AvailableSubscriptionsTable
|
||||
isLoading={ isLoading }
|
||||
rows={ subscriptionsAvailable.map( ( item ) => {
|
||||
return availableSubscriptionRow( item );
|
||||
} ) }
|
||||
/>
|
||||
</section>
|
||||
{ subscriptionsAvailable.length > 0 && (
|
||||
<section className="woocommerce-marketplace__my-subscriptions-section woocommerce-marketplace__my-subscriptions__available">
|
||||
<h2 className="woocommerce-marketplace__my-subscriptions__heading">
|
||||
{ __( 'Available to use', 'woocommerce' ) }
|
||||
</h2>
|
||||
<p className="woocommerce-marketplace__my-subscriptions__table-description">
|
||||
{ __(
|
||||
"Woo.com subscriptions you haven't used yet.",
|
||||
'woocommerce'
|
||||
) }
|
||||
</p>
|
||||
<AvailableSubscriptionsTable
|
||||
isLoading={ isLoading }
|
||||
rows={ subscriptionsAvailable.map( ( item ) => {
|
||||
return availableSubscriptionRow( item );
|
||||
} ) }
|
||||
/>
|
||||
</section>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -28,22 +28,12 @@ type StatusBadge = {
|
|||
explanation?: string | JSX.Element;
|
||||
};
|
||||
|
||||
function getStatusBadges( subscription: Subscription ): StatusBadge[] {
|
||||
const badges: StatusBadge[] = [];
|
||||
|
||||
if ( subscription.local.installed && ! subscription.active ) {
|
||||
badges.push( {
|
||||
text: __( 'Not connected', 'woocommerce' ),
|
||||
level: StatusLevel.Warning,
|
||||
explanation: __(
|
||||
'To receive updates and support, please connect your subscription to this store.',
|
||||
'woocommerce'
|
||||
),
|
||||
} );
|
||||
}
|
||||
|
||||
function getStatusBadge( subscription: Subscription ): StatusBadge | false {
|
||||
if ( subscription.product_key === '' ) {
|
||||
badges.push( {
|
||||
/**
|
||||
* If there is no subscription, we don't need to check for the expiry.
|
||||
*/
|
||||
return {
|
||||
text: __( 'No subscription', 'woocommerce' ),
|
||||
level: StatusLevel.Error,
|
||||
explanation: createInterpolateElement(
|
||||
|
@ -78,16 +68,20 @@ function getStatusBadges( subscription: Subscription ): StatusBadge[] {
|
|||
),
|
||||
}
|
||||
),
|
||||
} );
|
||||
|
||||
/**
|
||||
* If there is no subscription, we don't need to check for the expiry.
|
||||
*/
|
||||
return badges;
|
||||
};
|
||||
}
|
||||
if ( subscription.local.installed && ! subscription.active ) {
|
||||
return {
|
||||
text: __( 'Not connected', 'woocommerce' ),
|
||||
level: StatusLevel.Warning,
|
||||
explanation: __(
|
||||
'To receive updates and support, please connect your subscription to this store.',
|
||||
'woocommerce'
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
if ( subscription.expired ) {
|
||||
badges.push( {
|
||||
return {
|
||||
text: __( 'Expired', 'woocommerce' ),
|
||||
level: StatusLevel.Error,
|
||||
explanation: createInterpolateElement(
|
||||
|
@ -122,10 +116,9 @@ function getStatusBadges( subscription: Subscription ): StatusBadge[] {
|
|||
),
|
||||
}
|
||||
),
|
||||
} );
|
||||
};
|
||||
}
|
||||
|
||||
return badges;
|
||||
return false;
|
||||
}
|
||||
|
||||
function getVersion( subscription: Subscription ): string | JSX.Element {
|
||||
|
@ -166,18 +159,7 @@ export function nameAndStatus( subscription: Subscription ): TableRow {
|
|||
);
|
||||
}
|
||||
|
||||
const statusBadges = getStatusBadges( subscription );
|
||||
|
||||
const statusElement = statusBadges.map( ( badge, index ) => {
|
||||
return (
|
||||
<StatusPopover
|
||||
key={ index }
|
||||
text={ badge.text }
|
||||
level={ badge.level }
|
||||
explanation={ badge.explanation ?? '' }
|
||||
/>
|
||||
);
|
||||
} );
|
||||
const statusBadge = getStatusBadge( subscription );
|
||||
|
||||
const displayElement = (
|
||||
<div className="woocommerce-marketplace__my-subscriptions__product">
|
||||
|
@ -188,7 +170,13 @@ export function nameAndStatus( subscription: Subscription ): TableRow {
|
|||
{ subscription.product_name }
|
||||
</span>
|
||||
<span className="woocommerce-marketplace__my-subscriptions__product-statuses">
|
||||
{ statusElement }
|
||||
{ statusBadge && (
|
||||
<StatusPopover
|
||||
text={ statusBadge.text }
|
||||
level={ statusBadge.level }
|
||||
explanation={ statusBadge.explanation ?? '' }
|
||||
/>
|
||||
) }
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
@ -202,6 +190,16 @@ export function nameAndStatus( subscription: Subscription ): TableRow {
|
|||
export function expiry( subscription: Subscription ): TableRow {
|
||||
const expiryDate = subscription.expires;
|
||||
|
||||
if (
|
||||
subscription.local.installed === true &&
|
||||
subscription.product_key === ''
|
||||
) {
|
||||
return {
|
||||
display: '',
|
||||
value: '',
|
||||
};
|
||||
}
|
||||
|
||||
let expiryDateElement = __( 'Never expires', 'woocommerce' );
|
||||
|
||||
if ( expiryDate ) {
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: update
|
||||
Comment: Unconnected subscriptions screen improvements.
|
||||
|
Loading…
Reference in New Issue