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

[CYS on Core] Conditionally change the default fonts available based on user consent (#44532) 

* Add upgrade notice for the fonts feature whenever WP is outdateed or the user did not grant us consent.

* Add styles for the woocommerce-customize-store_sidebar-typography-upgrade-notice class.

* Update the upgrade conditionals.

* Introduce the new modal for the user to opt in to usage tracking.

* Add the CSS for the woocommerce-customize-store__opt-in-usage-tracking-modal

* Implement the sendEvent to OptInDataSharing

* Fix typo.

* Make sure the opt in button is disabled if the opt in checkbox is unchecked.

* Update the styles for the woocommerce-customize-store__opt-in-usage-tracking-modal

* Update the styles to allow changes to the link

* Set Cardo + System Sans-serif as the default fonts if the usage tracking wasn't allowed.

* Set Cardo + System Sans-serif as the default fonts if the Font Library is unavailable.

* Add the Jost + Instrument Sans font pairing.

* Update copy for the upgrade notice to remove mentions to Gutenberg.

* Replace the Link component with the Button component.

* Ensure the woocommerce_allow_tracking option is properly updated whenever the user opts in.

* Add the new Inter + Cardo font pairing.

* Redirect user to the loading screen so all relevant fonts can be installed for them.

* Render the FontPairing component only if the isFontLibraryAvailable. Update the link to download the latest version of the core of WordPress.

* update the fontPairings constant.

* Update styles for buttons and links.

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

* Make sure the dispatch for updating the option is async so the page redirect is not triggered before the option is saved to the database.

* Fix lint error

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Alba Rincón <alba.rincon@automattic.com>
This commit is contained in:
Patricia Hillebrandt 2024-02-26 16:01:43 +01:00 committed by GitHub
parent ce33c84222
commit fe0b918058
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 335 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts
View File

@ -463,6 +463,114 @@ export const FONT_PAIRINGS_WHEN_AI_IS_OFFLINE = [
},
];
export const FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING = [
{
title: 'Cardo Font + System Sans-serif',
version: 2,
lookAndFeel: [] as Look[],
settings: {
typography: {
fontFamilies: {
theme: [
{
fontFamily: 'Cardo',
slug: 'cardo',
},
{
fontFamily: 'System Sans-serif',
slug: 'system-sans-serif',
},
],
},
},
},
styles: {
elements: {
heading: {
typography: {
fontFamily: 'var(--wp--preset--font-family--cardo)',
fontStyle: 'normal',
fontWeight: '300',
},
},
},
typography: {
fontFamily: 'var(--wp--preset--font-family--system-sans-serif)',
},
},
},
{
title: 'Jost + Instrument Sans',
version: 2,
lookAndFeel: [] as Look[],
settings: {
typography: {
fontFamilies: {
theme: [
{
fontFamily: 'Jost',
slug: 'jost',
},
{
fontFamily: 'Instrument Sans',
slug: 'instrument-sans',
},
],
},
},
},
styles: {
elements: {
heading: {
typography: {
fontFamily: 'var(--wp--preset--font-family--jost)',
fontStyle: 'normal',
fontWeight: '100 900',
},
},
},
typography: {
fontFamily: 'var(--wp--preset--font-family--instrument-sans)',
},
},
},
{
title: 'Inter + Cardo Font',
version: 2,
lookAndFeel: [] as Look[],
settings: {
typography: {
fontFamilies: {
theme: [
{
fontFamily: 'Inter',
slug: 'inter',
},
{
fontFamily: 'Cardo',
slug: 'cardo',
},
],
},
},
},
styles: {
elements: {
heading: {
typography: {
fontFamily: 'var(--wp--preset--font-family--inter)',
fontStyle: 'normal',
fontWeight: '300',
},
},
},
typography: {
fontFamily: 'var(--wp--preset--font-family--cardo)',
},
},
},
];
export const FONT_PAIRINGS = [
{
title: 'Commissioner + Crimson Pro',
@ -921,4 +1029,5 @@ export const FONT_PAIRINGS = [
},
},
...FONT_PAIRINGS_WHEN_AI_IS_OFFLINE,
...FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING,
];

26
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/index.tsx
View File

@ -18,7 +18,11 @@ import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
/**
* Internal dependencies
*/
import { FONT_PAIRINGS, FONT_PAIRINGS_WHEN_AI_IS_OFFLINE } from './constants';
import {
FONT_PAIRINGS,
FONT_PAIRINGS_WHEN_AI_IS_OFFLINE,
FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING,
} from './constants';
import { VariationContainer } from '../variation-container';
import { FontPairingVariationPreview } from './preview';
import { Look } from '~/customize-store/design-with-ai/types';
@ -49,6 +53,13 @@ export const FontPairing = () => {
const { context } = useContext( CustomizeStoreContext );
const aiOnline = context.flowType === FlowType.AIOnline;
const isFontLibraryAvailable = context.isFontLibraryAvailable;
const trackingAllowed = useSelect(
( select ) =>
select( OPTIONS_STORE_NAME ).getOption(
'woocommerce_allow_tracking'
) === 'yes'
);
const fontPairings = useMemo( () => {
if ( isAIFlow( context.flowType ) ) {
@ -59,6 +70,10 @@ export const FontPairing = () => {
: FONT_PAIRINGS_WHEN_AI_IS_OFFLINE;
}
if ( ! trackingAllowed || ! isFontLibraryAvailable ) {
return FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING;
}
return FONT_PAIRINGS_WHEN_AI_IS_OFFLINE.map( ( pair ) => {
const fontFamilies = pair.settings.typography.fontFamilies;
const fonts = custom.filter( ( customFont ) =>
@ -78,7 +93,14 @@ export const FontPairing = () => {
},
};
}, [] );
}, [ aiOnline, aiSuggestions?.lookAndFeel, context.flowType, custom ] );
}, [
aiOnline,
aiSuggestions?.lookAndFeel,
context.flowType,
custom,
isFontLibraryAvailable,
trackingAllowed,
] );
if ( isLoading ) {
return (

152
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-typography.tsx
View File

@ -4,9 +4,17 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { createInterpolateElement, useContext } from '@wordpress/element';
import {
createInterpolateElement,
useContext,
useState,
} from '@wordpress/element';
import { dispatch, useSelect } from '@wordpress/data';
import { Link } from '@woocommerce/components';
import { OPTIONS_STORE_NAME } from '@woocommerce/data';
import { recordEvent } from '@woocommerce/tracks';
import { Button, Modal, CheckboxControl } from '@wordpress/components';
import interpolateComponents from '@automattic/interpolate-components';
/**
* Internal dependencies
@ -16,10 +24,10 @@ import { ADMIN_URL } from '~/utils/admin-settings';
import { FontPairing } from './global-styles';
import { CustomizeStoreContext } from '..';
import { FlowType } from '~/customize-store/types';
export const SidebarNavigationScreenTypography = () => {
const { context } = useContext( CustomizeStoreContext );
const aiOnline = context.flowType === FlowType.AIOnline;
const isFontLibraryAvailable = context.isFontLibraryAvailable;
const title = aiOnline
? __( 'Change your font', 'woocommerce' )
@ -34,6 +42,51 @@ export const SidebarNavigationScreenTypography = () => {
'woocommerce'
);
const trackingAllowed = useSelect( ( select ) =>
select( OPTIONS_STORE_NAME ).getOption( 'woocommerce_allow_tracking' )
);
const isTrackingDisallowed = trackingAllowed === 'no' || ! trackingAllowed;
let upgradeNotice;
if ( isTrackingDisallowed && ! isFontLibraryAvailable ) {
upgradeNotice = __(
'Upgrade to the <WordPressLink>latest version of WordPress</WordPressLink> and <OptInModal>opt in to usage tracking</OptInModal> to get access to more fonts.',
'woocommerce'
);
} else if ( isTrackingDisallowed && isFontLibraryAvailable ) {
upgradeNotice = __(
'Opt in to <OptInModal>usage tracking</OptInModal> to get access to more fonts.',
'woocommerce'
);
} else if ( trackingAllowed && ! isFontLibraryAvailable ) {
upgradeNotice = __(
'Upgrade to the <WordPressLink>latest version of WordPress</WordPressLink> to get access to more fonts.',
'woocommerce'
);
} else {
upgradeNotice = '';
}
const OptIn = () => {
recordEvent(
'customize_your_store_assembler_hub_opt_in_usage_tracking'
);
};
const skipOptIn = () => {
recordEvent(
'customize_your_store_assembler_hub_skip_opt_in_usage_tracking'
);
};
const [ isModalOpen, setIsModalOpen ] = useState( false );
const openModal = () => setIsModalOpen( true );
const closeModal = () => setIsModalOpen( false );
const [ OptInDataSharing, setIsOptInDataSharing ] =
useState< boolean >( true );
return (
<SidebarNavigationScreen
title={ title }
@ -77,7 +130,100 @@ export const SidebarNavigationScreenTypography = () => {
} ) }
content={
<div className="woocommerce-customize-store_sidebar-typography-content">
<FontPairing />
{ isFontLibraryAvailable && <FontPairing /> }
{ upgradeNotice && (
<div className="woocommerce-customize-store_sidebar-typography-upgrade-notice">
<h4>
{ __(
'Want more font pairings?',
'woocommerce'
) }
</h4>
<p>
{ createInterpolateElement( upgradeNotice, {
WordPressLink: (
<Button
href={ `${ ADMIN_URL }update-core.php` }
variant="link"
/>
),
OptInModal: (
<Button
onClick={ () => {
openModal();
} }
variant="link"
/>
),
} ) }
</p>
{ isModalOpen && (
<Modal
className={
'woocommerce-customize-store__opt-in-usage-tracking-modal'
}
title={ __(
'Opt in to usage tracking',
'woocommerce'
) }
onRequestClose={ closeModal }
shouldCloseOnClickOutside={ false }
>
<CheckboxControl
className="core-profiler__checkbox"
label={ interpolateComponents( {
mixedString: __(
'I agree to share my data to tailor my store setup experience, get more relevant content, and help make WooCommerce better for everyone. You can opt out at any time in WooCommerce settings. {{link}}Learn more about usage tracking{{/link}}.',
'woocommerce'
),
components: {
link: (
<Link
href="https://woo.com/usage-tracking?utm_medium=product"
target="_blank"
type="external"
/>
),
},
} ) }
checked={ OptInDataSharing }
onChange={ setIsOptInDataSharing }
/>
<div className="woocommerce-customize-store__design-change-warning-modal-footer">
<Button
onClick={ () => {
skipOptIn();
closeModal();
} }
variant="link"
>
{ __( 'Cancel', 'woocommerce' ) }
</Button>
<Button
onClick={ async () => {
await dispatch(
OPTIONS_STORE_NAME
).updateOptions( {
woocommerce_allow_tracking:
OptInDataSharing
? 'yes'
: 'no',
} );
OptIn();
closeModal();
window.location.href = `${ ADMIN_URL }admin.php?page=wc-admin&path=%2Fcustomize-store%2Fassembler-hub`;
} }
variant="primary"
disabled={ ! OptInDataSharing }
>
{ __( 'Opt in', 'woocommerce' ) }
</Button>
</div>
</Modal>
) }
</div>
) }
</div>
}
/>

18
plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss
View File

@ -476,6 +476,24 @@
}
}
.woocommerce-customize-store_sidebar-typography-upgrade-notice {
margin-top: 48px;
color: #1e1e1e;
padding: 0;
h4 {
text-transform: uppercase;
margin-bottom: 4px;
}
p {
margin: 0;
}
a,
button {
text-decoration: none;
}
}
/* Layout sidebar */
.block-editor-block-patterns-list__item {
.auto-block-preview__container,

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

@ -13,7 +13,6 @@ import { recordEvent } from '@woocommerce/tracks';
*/
import { customizeStoreStateMachineEvents } from '..';
import { ADMIN_URL } from '~/utils/admin-settings';
export const DesignChangeWarningModal = ( {
setOpenDesignChangeWarningModal,
sendEvent,

31
plugins/woocommerce-admin/client/customize-store/style.scss
View File

@ -222,6 +222,37 @@ body.woocommerce-customize-store.js.is-fullscreen-mode {
}
}
.woocommerce-customize-store__opt-in-usage-tracking-modal {
width: 480px;
max-width: 480px;
a {
text-decoration: underline;
color: inherit;
}
.components-modal__header {
padding: 32px 32px 16px 32px;
}
.components-modal__content {
padding: 0;
}
.core-profiler__checkbox {
padding: 16px 32px 16px 32px;
}
.woocommerce-customize-store__design-change-warning-modal-footer {
border-top: 1px solid #ddd;
padding: 24px 32px 32px 32px;
width: 100%;
display: flex;
gap: 12px;
justify-content: flex-end;
}
}
.woocommerce-onboarding-loader {
min-height: 100vh;
display: flex;

4
plugins/woocommerce/changelog/44532-44187-cys-on-core-conditionally-change-the-default-fonts-available-based-on-user-consent Normal file
View File

@ -0,0 +1,4 @@
Significance: major
Type: add
Customize Your Store: Introduce the feature for conditionally changing the default font pairings available based on user consent and the WordPress version.