Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

CYS - Update the intro pages for different type of themes (#49910) 

* CYS - Revert the button copy customize the TT4 theme

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

* CYS - Add banner for block themes

* Add banner for block themes

* Fix tests

* Fix tests

* Fix intro banners

* Add modal to the use store designer

* Fix tests

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

* Fix lint errors

* use sendEvent instead of redirect

* fix lint error

* fix logic on ai flow

* fix build

* improve check

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
This commit is contained in:
Alba Rincón 2024-07-24 18:09:12 +02:00 committed by GitHub
parent df8d5b751e
commit 3fab8e7519
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 103 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
plugins/woocommerce-admin/client/customize-store/intro/index.tsx
View File

@ -25,6 +25,7 @@ import {
DesignChangeWarningModal,
StartNewDesignWarningModal,
StartOverWarningModal,
ThemeSwitchWarningModal,
} from './warning-modals';
import { useNetworkStatus } from '~/utils/react-hooks/use-network-status';
import './intro.scss';
@ -38,6 +39,7 @@ import {
NoAIBanner,
ExistingNoAiThemeBanner,
ClassicThemeBanner,
NonDefaultBlockThemeBanner,
} from './intro-banners';
import welcomeTourImg from '../assets/images/design-your-own.svg';
import professionalThemeImg from '../assets/images/professional-theme.svg';
@ -45,6 +47,7 @@ import { navigateOrParent } from '~/customize-store/utils';
import { RecommendThemesAPIResponse } from '~/customize-store/types';
import { customizeStoreStateMachineEvents } from '~/customize-store';
import { trackEvent } from '~/customize-store/tracking';
import { isNoAIFlow as isNoAiFlowGuard } from '../guards';
export type events =
| { type: 'DESIGN_WITH_AI' }
@ -69,6 +72,7 @@ const BANNER_COMPONENTS = {
[ FlowType.noAI ]: NoAIBanner,
'existing-no-ai-theme': ExistingNoAiThemeBanner,
'classic-theme': ClassicThemeBanner,
'non-default-block-theme': NonDefaultBlockThemeBanner,
default: DefaultBanner,
};
@ -145,11 +149,17 @@ const ThemeCards = ( {
const CustomizedThemeBanners = ( {
isBlockTheme,
isDefaultTheme,
isNoAiFlow,
sendEvent,
}: {
isBlockTheme: boolean | undefined;
isDefaultTheme: boolean | undefined;
isNoAiFlow: boolean;
sendEvent: Sender< customizeStoreStateMachineEvents >;
} ) => {
const [ isModalOpen, setIsModalOpen ] = useState( false );
return (
<>
<p className="select-theme-text">
@ -179,7 +189,7 @@ const CustomizedThemeBanners = ( {
: 'classic',
}
);
if ( isBlockTheme ) {
if ( isDefaultTheme && isNoAiFlow ) {
navigateOrParent(
window,
getNewPath(
@ -189,10 +199,7 @@ const CustomizedThemeBanners = ( {
)
);
} else {
navigateOrParent(
window,
'customize.php?return=/wp-admin/themes.php'
);
setIsModalOpen( true );
}
} }
>
@ -234,6 +241,19 @@ const CustomizedThemeBanners = ( {
</div>
</div>
</div>
{ isModalOpen && (
<ThemeSwitchWarningModal
setIsModalOpen={ setIsModalOpen }
isNoAiFlow={ isNoAiFlow }
redirectToCYSFlow={ () =>
sendEvent( {
type: isNoAiFlow
? 'DESIGN_WITHOUT_AI'
: 'DESIGN_WITH_AI',
} )
}
/>
) }
</>
);
};
@ -283,17 +303,16 @@ export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => {
case isJetpackOffline as boolean:
bannerStatus = 'jetpack-offline';
break;
case ! isBlockTheme:
case context.flowType === FlowType.noAI && ! isBlockTheme:
bannerStatus = 'classic-theme';
break;
case context.flowType === FlowType.noAI &&
! customizeStoreTaskCompleted:
bannerStatus = FlowType.noAI;
break;
case context.flowType === FlowType.noAI &&
customizeStoreTaskCompleted &&
isBlockTheme &&
! isDefaultTheme:
bannerStatus = 'non-default-block-theme';
break;
case context.flowType === FlowType.noAI &&
! customizeStoreTaskCompleted:
bannerStatus = FlowType.noAI;
break;
case context.flowType === FlowType.noAI && customizeStoreTaskCompleted:
@ -412,17 +431,18 @@ export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => {
sendEvent={ sendEvent }
/>
{ customizeStoreTaskCompleted &&
( isDefaultTheme || ! isBlockTheme ) ? (
<CustomizedThemeBanners
isBlockTheme={ isBlockTheme }
sendEvent={ sendEvent }
/>
) : (
{ isDefaultTheme && ! customizeStoreTaskCompleted ? (
<ThemeCards
sendEvent={ sendEvent }
themeData={ themeData }
/>
) : (
<CustomizedThemeBanners
isBlockTheme={ isBlockTheme }
isDefaultTheme={ isDefaultTheme }
sendEvent={ sendEvent }
isNoAiFlow={ isNoAiFlowGuard( context.flowType ) }
/>
) }
</div>
</div>

56
plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx
View File

@ -7,8 +7,6 @@ import { Button } from '@wordpress/components';
import { getNewPath } from '@woocommerce/navigation';
import interpolateComponents from '@automattic/interpolate-components';
import { Link } from '@woocommerce/components';
import { useState } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
/**
* Internal dependencies
@ -17,7 +15,6 @@ import { Intro } from '.';
import { IntroSiteIframe } from './intro-site-iframe';
import { getAdminSetting } from '~/utils/admin-settings';
import { navigateOrParent } from '../utils';
import { ThemeSwitchWarningModal } from '~/customize-store/intro/warning-modals';
import { trackEvent } from '../tracking';
export const BaseIntroBanner = ( {
@ -223,20 +220,6 @@ export const NoAIBanner = ( {
}: {
redirectToCYSFlow: () => void;
} ) => {
const [ isModalOpen, setIsModalOpen ] = useState( false );
interface Theme {
is_block_theme?: boolean;
stylesheet?: string;
}
const currentTheme = useSelect( ( select ) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
return select( 'core' ).getCurrentTheme() as Theme;
}, [] );
const isDefaultTheme = currentTheme?.stylesheet === 'twentytwentyfour';
return (
<>
<BaseIntroBanner
@ -248,20 +231,10 @@ export const NoAIBanner = ( {
bannerClass="no-ai-banner"
bannerButtonText={ __( 'Start designing', 'woocommerce' ) }
bannerButtonOnClick={ () => {
if ( ! isDefaultTheme ) {
setIsModalOpen( true );
} else {
redirectToCYSFlow();
}
redirectToCYSFlow();
} }
showAIDisclaimer={ false }
/>
{ isModalOpen && (
<ThemeSwitchWarningModal
setIsModalOpen={ setIsModalOpen }
redirectToCYSFlow={ redirectToCYSFlow }
/>
) }
</>
);
};
@ -345,7 +318,7 @@ export const ExistingNoAiThemeBanner = () => {
)
);
} }
bannerButtonText={ __( 'Go to the Editor', 'woocommerce' ) }
bannerButtonText={ __( 'Customize your store', 'woocommerce' ) }
showAIDisclaimer={ false }
previewBanner={ <IntroSiteIframe siteUrl={ siteUrl } /> }
></BaseIntroBanner>
@ -379,3 +352,28 @@ export const ClassicThemeBanner = () => {
></BaseIntroBanner>
);
};
export const NonDefaultBlockThemeBanner = () => {
const siteUrl = getAdminSetting( 'siteUrl' ) + '?cys-hide-admin-bar=1';
return (
<BaseIntroBanner
bannerTitle={ __( 'Customize your theme', 'woocommerce' ) }
bannerText={ __(
'Customize everything from the color palette and the fonts to the page layouts, making sure every detail aligns with your brand.',
'woocommerce'
) }
bannerClass="existing-no-ai-theme-banner"
buttonIsLink={ false }
bannerButtonOnClick={ () => {
trackEvent( 'customize_your_store_intro_customize_click', {
theme_type: 'block',
} );
navigateOrParent( window, 'site-editor.php' );
} }
bannerButtonText={ __( 'Go to the Editor', 'woocommerce' ) }
showAIDisclaimer={ false }
previewBanner={ <IntroSiteIframe siteUrl={ siteUrl } /> }
></BaseIntroBanner>
);
};

31
plugins/woocommerce-admin/client/customize-store/intro/warning-modals.tsx
View File

@ -196,9 +196,11 @@ export const StartOverWarningModal = ( {
};
export const ThemeSwitchWarningModal = ( {
isNoAiFlow = true,
setIsModalOpen,
redirectToCYSFlow,
}: {
isNoAiFlow?: boolean;
setIsModalOpen: ( arg0: boolean ) => void;
redirectToCYSFlow: () => void;
} ) => {
@ -215,10 +217,31 @@ export const ThemeSwitchWarningModal = ( {
shouldCloseOnClickOutside={ false }
>
<p>
{ __(
'Your active theme will be changed and you could lose any changes you’ve made to it.',
'woocommerce'
) }
{ isNoAiFlow
? __(
'Your active theme will be changed and you could lose any changes you’ve made to it.',
'woocommerce'
)
: createInterpolateElement(
__(
"The Store Designer will create a new store design for you, and you'll lose any changes you've made to your active theme. If you'd prefer to continue editing your theme, you can do so via the <EditorLink>Editor</EditorLink>.",
'woocommerce'
),
{
EditorLink: (
<Link
onClick={ () => {
window.open(
`${ ADMIN_URL }site-editor.php`,
'_blank'
);
return false;
} }
href=""
/>
),
}
) }
</p>
<div className="woocommerce-customize-store__theme-switch-warning-modal-footer">
<Button

4
plugins/woocommerce/changelog/49910-fix-cys-button-copy Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
CYS - Update the intro pages for different type of themes.

44
plugins/woocommerce/tests/e2e-pw/tests/customize-store/intro.spec.js
View File

@ -111,26 +111,22 @@ test.describe(
'Customize your theme'
);
await expect(
page.getByRole( 'button', { name: 'Go to the Editor' } )
page.getByRole( 'button', { name: 'Customize your store' } )
).toBeVisible();
} );
test( 'Clicking on "Go to the Editor" with a block theme should go to the assembler', async ( {
test( 'it shows the "non default block theme" banner when the theme is a block theme different than TT4', async ( {
page,
assemblerPageObject,
} ) => {
await page.goto( CUSTOMIZE_STORE_URL );
await page.click( 'text=Start designing' );
await assemblerPageObject.waitForLoadingScreenFinish();
await activateTheme( 'twentytwentythree' );
await page.goto( CUSTOMIZE_STORE_URL );
await page
.getByRole( 'button', { name: 'Go to the Editor' } )
.click();
const assembler = await assemblerPageObject.getAssembler();
await expect( page.locator( 'h1' ) ).toHaveText(
'Customize your theme'
);
await expect(
assembler.locator( "text=Let's get creative" )
page.getByRole( 'button', { name: 'Go to the Editor' } )
).toBeVisible();
} );
@ -148,31 +144,5 @@ test.describe(
await page.waitForNavigation();
await expect( page.url() ).toContain( 'customize.php' );
} );
test( 'clicking on "Go to the Customizer" with a classic theme should go to the customizer when customize your step is completed', async ( {
page,
baseURL,
} ) => {
await activateTheme( 'twentytwenty' );
try {
await setOption(
request,
baseURL,
'woocommerce_admin_customize_store_completed',
'yes'
);
} catch ( error ) {
console.log( 'Store completed option not updated' );
}
await page.goto( CUSTOMIZE_STORE_URL );
await page
.getByRole( 'button', { name: 'Go to the Customizer' } )
.click();
await page.waitForNavigation();
await expect( page.url() ).toContain( 'customize.php' );
} );
}
);