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:
berislav grgičak 2023-11-21 08:33:06 +01:00 committed by GitHub
parent 53b8933e7c
commit ab400a4128
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 60 additions and 61 deletions

View File

@ -106,10 +106,6 @@
}
}
.woocommerce-marketplace__my-subscriptions__product-statuses {
display: flex;
}
.woocommerce-marketplace__my-subscriptions__product-status {
display: flex;
align-items: center;

View File

@ -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>
);
}

View File

@ -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 ) {

View File

@ -0,0 +1,4 @@
Significance: patch
Type: update
Comment: Unconnected subscriptions screen improvements.