[CYS on Core] Ensure the "Didn’t find a theme you like" text is displayed exclusively at the bottom of the themes card (#45706)

* Ensure the 'Didn’t find a theme you like' text is displayed exclusively at the bottom of the themes card

* Limit the display of the CYS design banner to the Themes screen.

* Add changefile(s) from automation for the following project(s): woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Patricia Hillebrandt 2024-03-19 17:57:24 +01:00 committed by GitHub
parent 2fc83cbe85
commit 61236dab0d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 55 additions and 48 deletions

View File

@ -1,14 +1,8 @@
/**
* External dependencies
*/
import {
createInterpolateElement,
Fragment,
useEffect,
useState,
} from '@wordpress/element';
import { Fragment, useEffect, useState } from '@wordpress/element';
import classnames from 'classnames';
import { __ } from '@wordpress/i18n';
import { addQueryArgs } from '@wordpress/url';
/**
@ -120,49 +114,26 @@ export default function ProductListContent( props: {
} ),
} }
/>
{ index === bannerPosition && (
<NoAIBanner
redirectToCYSFlow={ () => {
const customizeStoreDesignUrl =
addQueryArgs(
`${ ADMIN_URL }admin.php`,
{
page: 'wc-admin',
path: '/customize-store/design',
}
);
window.location.href =
customizeStoreDesignUrl;
} }
/>
) }
{ index === bannerPosition &&
props.type === 'theme' && (
<NoAIBanner
redirectToCYSFlow={ () => {
const customizeStoreDesignUrl =
addQueryArgs(
`${ ADMIN_URL }admin.php`,
{
page: 'wc-admin',
path: '/customize-store/design',
}
);
window.location.href =
customizeStoreDesignUrl;
} }
/>
) }
</Fragment>
) ) }
</div>
<div
className={
'woocommerce-marketplace__browse-wp-theme-directory'
}
>
<b>{ __( 'Didnt find a theme you like?', 'woocommerce' ) }</b>
{ createInterpolateElement(
__(
' Browse the <a>WordPress.org theme directory</a> to discover more.',
'woocommerce'
),
{
a: (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
href={
ADMIN_URL +
'theme-install.php?search=e-commerce'
}
/>
),
}
) }
</div>
</>
);
}

View File

@ -2,7 +2,11 @@
* External dependencies
*/
import { __, _n, sprintf } from '@wordpress/i18n';
import { useContext, useState } from '@wordpress/element';
import {
createInterpolateElement,
useContext,
useState,
} from '@wordpress/element';
import { getNewPath, navigateTo, useQuery } from '@woocommerce/navigation';
import { Button } from '@wordpress/components';
import classnames from 'classnames';
@ -173,6 +177,34 @@ export default function Products( props: ProductsProps ) {
searchTerm={ props.searchTerm }
category={ category }
/>
{ props.type === 'theme' && (
<div
className={
'woocommerce-marketplace__browse-wp-theme-directory'
}
>
<b>
{ __( 'Didnt find a theme you like?', 'woocommerce' ) }
</b>
{ createInterpolateElement(
__(
' Browse the <a>WordPress.org theme directory</a> to discover more.',
'woocommerce'
),
{
a: (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
href={
ADMIN_URL +
'theme-install.php?search=e-commerce'
}
/>
),
}
) }
</div>
) }
{ showAllButton && (
<Button
className={ viewAllButonClassName }

View File

@ -0,0 +1,4 @@
Significance: minor
Type: fix
Ensure the "Didnt find a theme you like" text and the "Design your own" banner are displayed exclusively at the bottom of the themes tab on WooCommerce > Extensions.