From dc2797f46b06d72c46491607a6299d944af64b48 Mon Sep 17 00:00:00 2001 From: Daniel Post Date: Tue, 28 Mar 2023 09:48:32 +0200 Subject: [PATCH] Jetpack Social: Add toggle to Social admin page to enable or disable SIG and pick a default template (#29722) * [not verified] Add SIG toggle with template picker to admin page * [not verified] changelog * [not verified] Only show toggle when SIG is available * [not verified] Actually use default template * [not verified] changelog * [not verified] Do not load SIG when it is not enabled * [not verified] changelog * Fix PHP tests * Fix JS tests --- pnpm-lock.yaml | 3 + ...social-add-sig-settings-to-publicize-store | 4 + .../js-packages/publicize-components/index.js | 1 + .../publicize-components/package.json | 1 + ...social-add-sig-settings-to-publicize-store | 4 + .../publicize/src/class-publicize-base.php | 2 +- .../social-image-generator/class-setup.php | 4 + .../test-setup.php | 19 ++++- ...social-add-sig-settings-to-publicize-store | 4 + .../jetpack/class.jetpack-gutenberg.php | 2 +- ...social-add-sig-settings-to-publicize-store | 4 + projects/plugins/social/jest.config.js | 4 + .../social/src/class-jetpack-social.php | 13 +++- .../src/js/components/admin-page/index.jsx | 29 ++++--- .../social-image-generator-toggle/index.tsx | 78 +++++++++++++++++++ .../styles.module.scss | 21 +++++ .../social/src/js/components/types/types.ts | 17 +++- .../social/src/js/store/actions/index.js | 2 + .../social-image-generator-settings.js | 62 +++++++++++++++ .../plugins/social/src/js/store/controls.js | 36 +++++++++ .../social/src/js/store/reducer/index.js | 2 + .../social-image-generator-settings.js | 14 ++++ .../plugins/social/src/js/store/resolvers.js | 23 +++++- .../social/src/js/store/selectors/index.js | 2 + .../social-image-generator-settings.js | 10 +++ projects/plugins/social/tests/styles-mock.js | 1 + 26 files changed, 340 insertions(+), 22 deletions(-) create mode 100644 projects/js-packages/publicize-components/changelog/add-jetpack-social-add-sig-settings-to-publicize-store create mode 100644 projects/packages/publicize/changelog/add-jetpack-social-add-sig-settings-to-publicize-store create mode 100644 projects/plugins/jetpack/changelog/add-jetpack-social-add-sig-settings-to-publicize-store create mode 100644 projects/plugins/social/changelog/add-jetpack-social-add-sig-settings-to-publicize-store create mode 100644 projects/plugins/social/src/js/components/social-image-generator-toggle/index.tsx create mode 100644 projects/plugins/social/src/js/components/social-image-generator-toggle/styles.module.scss create mode 100644 projects/plugins/social/src/js/store/actions/social-image-generator-settings.js create mode 100644 projects/plugins/social/src/js/store/reducer/social-image-generator-settings.js create mode 100644 projects/plugins/social/src/js/store/selectors/social-image-generator-settings.js create mode 100644 projects/plugins/social/tests/styles-mock.js diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 55e8393355c68..9de725aaf4b9c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -693,6 +693,9 @@ importers: '@wordpress/icons': specifier: 9.19.0 version: 9.19.0 + '@wordpress/notices': + specifier: 3.28.0 + version: 3.28.0(react@18.2.0) classnames: specifier: 2.3.1 version: 2.3.1 diff --git a/projects/js-packages/publicize-components/changelog/add-jetpack-social-add-sig-settings-to-publicize-store b/projects/js-packages/publicize-components/changelog/add-jetpack-social-add-sig-settings-to-publicize-store new file mode 100644 index 0000000000000..73d681cdba4e2 --- /dev/null +++ b/projects/js-packages/publicize-components/changelog/add-jetpack-social-add-sig-settings-to-publicize-store @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Added toggle to Social admin page to enable or disable Social Image Generator as well as an option to pick a default template diff --git a/projects/js-packages/publicize-components/index.js b/projects/js-packages/publicize-components/index.js index e31eda456c960..d8be6d1ffc7cc 100644 --- a/projects/js-packages/publicize-components/index.js +++ b/projects/js-packages/publicize-components/index.js @@ -11,6 +11,7 @@ export { default as TwitterOptions } from './src/components/twitter/options'; export { default as SocialPreviewsModal } from './src/components/social-previews/modal'; export { default as SocialPreviewsPanel } from './src/components/social-previews/panel'; export { default as SocialImageGeneratorPanel } from './src/components/social-image-generator/panel'; +export { default as SocialImageGeneratorTemplatePicker } from './src/components/social-image-generator/template-picker'; export { default as PublicizePanel } from './src/components/panel'; export { default as ReviewPrompt } from './src/components/review-prompt'; diff --git a/projects/js-packages/publicize-components/package.json b/projects/js-packages/publicize-components/package.json index 972d6c60f06d9..88e17a98fcc10 100644 --- a/projects/js-packages/publicize-components/package.json +++ b/projects/js-packages/publicize-components/package.json @@ -35,6 +35,7 @@ "@wordpress/hooks": "3.28.0", "@wordpress/i18n": "4.28.0", "@wordpress/icons": "9.19.0", + "@wordpress/notices": "3.28.0", "classnames": "2.3.1", "lodash": "4.17.21", "prop-types": "15.8.1", diff --git a/projects/packages/publicize/changelog/add-jetpack-social-add-sig-settings-to-publicize-store b/projects/packages/publicize/changelog/add-jetpack-social-add-sig-settings-to-publicize-store new file mode 100644 index 0000000000000..460b818f115c4 --- /dev/null +++ b/projects/packages/publicize/changelog/add-jetpack-social-add-sig-settings-to-publicize-store @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Use picked default template for Social Image Generator diff --git a/projects/packages/publicize/src/class-publicize-base.php b/projects/packages/publicize/src/class-publicize-base.php index b16dcc47e440e..a69868cfadb08 100644 --- a/projects/packages/publicize/src/class-publicize-base.php +++ b/projects/packages/publicize/src/class-publicize-base.php @@ -1063,7 +1063,7 @@ public function register_post_meta() { 'single' => true, 'default' => array( 'image_generator_settings' => array( - 'template' => Social_Image_Generator\Templates::DEFAULT_TEMPLATE, + 'template' => ( new Social_Image_Generator\Settings() )->get_default_template(), ), ), 'show_in_rest' => array( diff --git a/projects/packages/publicize/src/social-image-generator/class-setup.php b/projects/packages/publicize/src/social-image-generator/class-setup.php index 59dcc9e19ed44..84149161d684e 100644 --- a/projects/packages/publicize/src/social-image-generator/class-setup.php +++ b/projects/packages/publicize/src/social-image-generator/class-setup.php @@ -53,6 +53,10 @@ public function generate_token( $post_id ) { * @param \WP_Post $post Post that's being updated. */ public function set_meta( $post_id, $post ) { + if ( ! ( new Settings() )->is_enabled() ) { + return; + } + global $publicize; if ( ! $publicize->has_social_image_generator_feature() ) { diff --git a/projects/packages/publicize/tests/php/test-social-image-generator/test-setup.php b/projects/packages/publicize/tests/php/test-social-image-generator/test-setup.php index 328e0975fe117..41bbc1b91ff91 100644 --- a/projects/packages/publicize/tests/php/test-social-image-generator/test-setup.php +++ b/projects/packages/publicize/tests/php/test-social-image-generator/test-setup.php @@ -30,6 +30,8 @@ class Setup_Test extends BaseTestCase { * Setting up the test. */ public function set_up() { + // Enable the feature + ( new Social_Image_Generator\Settings() )->set_enabled( true ); $this->sig = new Social_Image_Generator\Setup(); $this->sig->init(); $plan = Current_Plan::PLAN_DATA['free']; @@ -99,9 +101,22 @@ public function create_post( $image_generator_settings = array() ) { } /** - * Test that SIG gets enabled by default. + * Test that SIG does not get enabled by default if the feature is not active. */ - public function test_sig_gets_enabled_by_default_when_a_post_gets_saved() { + public function test_sig_does_not_get_enabled_by_default_when_a_post_gets_saved() { + ( new Social_Image_Generator\Settings() )->set_enabled( false ); + add_filter( 'pre_http_request', array( $this, 'mock_success_response' ) ); + $post_id = $this->create_post(); + remove_filter( 'pre_http_request', array( $this, 'mock_success_response' ) ); + + $settings = new Social_Image_Generator\Post_Settings( $post_id ); + $this->assertFalse( $settings->is_enabled() ); + } + + /** + * Test that SIG gets enabled by default when the feature is active. + */ + public function test_sig_gets_enabled_by_default_when_a_post_gets_saved_and_the_feature_is_active() { add_filter( 'pre_http_request', array( $this, 'mock_success_response' ) ); $post_id = $this->create_post(); remove_filter( 'pre_http_request', array( $this, 'mock_success_response' ) ); diff --git a/projects/plugins/jetpack/changelog/add-jetpack-social-add-sig-settings-to-publicize-store b/projects/plugins/jetpack/changelog/add-jetpack-social-add-sig-settings-to-publicize-store new file mode 100644 index 0000000000000..8cdf68a04e693 --- /dev/null +++ b/projects/plugins/jetpack/changelog/add-jetpack-social-add-sig-settings-to-publicize-store @@ -0,0 +1,4 @@ +Significance: minor +Type: enhancement + +Prevent SIG from running when it is disabled diff --git a/projects/plugins/jetpack/class.jetpack-gutenberg.php b/projects/plugins/jetpack/class.jetpack-gutenberg.php index 5ace2303b4871..4df9376a1a0c2 100644 --- a/projects/plugins/jetpack/class.jetpack-gutenberg.php +++ b/projects/plugins/jetpack/class.jetpack-gutenberg.php @@ -747,7 +747,7 @@ public static function enqueue_block_editor_assets() { 'sharesData' => $publicize->get_publicize_shares_info( $blog_id ), 'hasPaidPlan' => $publicize->has_paid_plan(), 'isEnhancedPublishingEnabled' => $publicize->is_enhanced_publishing_enabled( $blog_id ), - 'isSocialImageGeneratorEnabled' => $publicize->has_social_image_generator_feature(), + 'isSocialImageGeneratorEnabled' => $publicize->has_social_image_generator_feature() && ( new Automattic\Jetpack\Publicize\Social_Image_Generator\Settings() )->is_enabled(), ); } diff --git a/projects/plugins/social/changelog/add-jetpack-social-add-sig-settings-to-publicize-store b/projects/plugins/social/changelog/add-jetpack-social-add-sig-settings-to-publicize-store new file mode 100644 index 0000000000000..73d681cdba4e2 --- /dev/null +++ b/projects/plugins/social/changelog/add-jetpack-social-add-sig-settings-to-publicize-store @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Added toggle to Social admin page to enable or disable Social Image Generator as well as an option to pick a default template diff --git a/projects/plugins/social/jest.config.js b/projects/plugins/social/jest.config.js index 301b7a0523957..612ad45217e67 100644 --- a/projects/plugins/social/jest.config.js +++ b/projects/plugins/social/jest.config.js @@ -5,4 +5,8 @@ module.exports = { roots: [ '/src' ], moduleDirectories: [ 'node_modules', '/src' ], setupFilesAfterEnv: [ ...baseConfig.setupFilesAfterEnv, '/jest.setup.js' ], + moduleNameMapper: { + ...baseConfig.moduleNameMapper, + '\\.(css|less|sass|scss)$': '/tests/styles-mock.js', + }, }; diff --git a/projects/plugins/social/src/class-jetpack-social.php b/projects/plugins/social/src/class-jetpack-social.php index f5194109af6e1..da5283c6b6f20 100644 --- a/projects/plugins/social/src/class-jetpack-social.php +++ b/projects/plugins/social/src/class-jetpack-social.php @@ -231,16 +231,21 @@ public function initial_state() { $state = array_merge( $state, array( - 'jetpackSettings' => array( + 'jetpackSettings' => array( 'publicize_active' => self::is_publicize_active(), 'show_pricing_page' => self::should_show_pricing_page(), 'showNudge' => ! $publicize->has_paid_plan( true ), ), - 'connectionData' => array( + 'connectionData' => array( 'connections' => $publicize->get_all_connections_for_user(), // TODO: Sanitize the array 'adminUrl' => esc_url_raw( $publicize->publicize_connections_url( 'jetpack-social-connections-admin-page' ) ), ), - 'sharesData' => $publicize->get_publicize_shares_info( Jetpack_Options::get_option( 'id' ) ), + 'sharesData' => $publicize->get_publicize_shares_info( Jetpack_Options::get_option( 'id' ) ), + 'socialImageGeneratorSettings' => array( + 'available' => $publicize->has_social_image_generator_feature(), + 'enabled' => ( new Automattic\Jetpack\Publicize\Social_Image_Generator\Settings() )->is_enabled(), + 'defaultTemplate' => ( new Automattic\Jetpack\Publicize\Social_Image_Generator\Settings() )->get_default_template(), + ), ) ); } @@ -318,7 +323,7 @@ class_exists( 'Jetpack' ) || ), 'hasPaidPlan' => $publicize->has_paid_plan(), 'isEnhancedPublishingEnabled' => $publicize->is_enhanced_publishing_enabled( Jetpack_Options::get_option( 'id' ) ), - 'isSocialImageGeneratorEnabled' => $publicize->has_social_image_generator_feature(), + 'isSocialImageGeneratorEnabled' => $publicize->has_social_image_generator_feature() && ( new Automattic\Jetpack\Publicize\Social_Image_Generator\Settings() )->is_enabled(), ), ) ); diff --git a/projects/plugins/social/src/js/components/admin-page/index.jsx b/projects/plugins/social/src/js/components/admin-page/index.jsx index ecf2b12847e5f..8999f751dd19d 100644 --- a/projects/plugins/social/src/js/components/admin-page/index.jsx +++ b/projects/plugins/social/src/js/components/admin-page/index.jsx @@ -10,6 +10,7 @@ import { useSelect } from '@wordpress/data'; import React from 'react'; import { STORE_ID } from '../../store'; import PricingPage from '../pricing-page'; +import SocialImageGeneratorToggle from '../social-image-generator-toggle'; import SocialModuleToggle from '../social-module-toggle'; import SupportSection from '../support-section'; import ConnectionScreen from './../connection-screen'; @@ -22,17 +23,22 @@ const Admin = () => { const { isUserConnected, isRegistered } = useConnection(); const showConnectionCard = ! isRegistered || ! isUserConnected; - const { showPricingPage, hasPaidPlan, isShareLimitEnabled, pluginVersion } = useSelect( - select => { - const store = select( STORE_ID ); - return { - showPricingPage: store.showPricingPage(), - hasPaidPlan: store.hasPaidPlan(), - isShareLimitEnabled: store.isShareLimitEnabled(), - pluginVersion: store.getPluginVersion(), - }; - } - ); + const { + showPricingPage, + hasPaidPlan, + isShareLimitEnabled, + pluginVersion, + isSocialImageGeneratorAvailable, + } = useSelect( select => { + const store = select( STORE_ID ); + return { + showPricingPage: store.showPricingPage(), + hasPaidPlan: store.hasPaidPlan(), + isShareLimitEnabled: store.isShareLimitEnabled(), + pluginVersion: store.getPluginVersion(), + isSocialImageGeneratorAvailable: store.isSocialImageGeneratorAvailable(), + }; + } ); const moduleName = `Jetpack Social ${ pluginVersion }`; @@ -65,6 +71,7 @@ const Admin = () => { + { isSocialImageGeneratorAvailable && } diff --git a/projects/plugins/social/src/js/components/social-image-generator-toggle/index.tsx b/projects/plugins/social/src/js/components/social-image-generator-toggle/index.tsx new file mode 100644 index 0000000000000..f03aa3651b766 --- /dev/null +++ b/projects/plugins/social/src/js/components/social-image-generator-toggle/index.tsx @@ -0,0 +1,78 @@ +import { Button, Text, useBreakpointMatch } from '@automattic/jetpack-components'; +import { SocialImageGeneratorTemplatePicker as TemplatePicker } from '@automattic/jetpack-publicize-components'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { useState, useCallback, useEffect } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import React from 'react'; +import { STORE_ID } from '../../store'; +import ToggleSection from '../toggle-section'; +import { SocialStoreSelectors } from '../types/types'; +import styles from './styles.module.scss'; + +const SocialImageGeneratorToggle: React.FC = () => { + const [ currentTemplate, setCurrentTemplate ] = useState( null ); + const { isEnabled, isUpdating, defaultTemplate } = useSelect( select => { + const store = select( STORE_ID ) as SocialStoreSelectors; + return { + isEnabled: store.isSocialImageGeneratorEnabled(), + isUpdating: store.isUpdatingSocialImageGeneratorSettings(), + defaultTemplate: store.getSocialImageGeneratorDefaultTemplate(), + }; + }, [] ); + + const updateOptions = useDispatch( STORE_ID ).updateSocialImageGeneratorSettings; + + const toggleStatus = useCallback( () => { + const newOption = { + enabled: ! isEnabled, + }; + updateOptions( newOption ); + }, [ isEnabled, updateOptions ] ); + + useEffect( () => { + if ( currentTemplate ) { + const newOption = { defaults: { template: currentTemplate } }; + updateOptions( newOption ); + } + }, [ currentTemplate, updateOptions ] ); + + const [ isSmall ] = useBreakpointMatch( 'sm' ); + + const renderTemplatePicker = useCallback( + ( { open } ) => ( + + ), + [ isEnabled, isSmall, isUpdating ] + ); + + return ( + + + { __( + 'When enabled, Social Image Generator will automatically generate social images for your posts. You can use the button below to choose a default template for new posts.', + 'jetpack-social' + ) } + + + + ); +}; + +export default SocialImageGeneratorToggle; diff --git a/projects/plugins/social/src/js/components/social-image-generator-toggle/styles.module.scss b/projects/plugins/social/src/js/components/social-image-generator-toggle/styles.module.scss new file mode 100644 index 0000000000000..ce1811a0a15f4 --- /dev/null +++ b/projects/plugins/social/src/js/components/social-image-generator-toggle/styles.module.scss @@ -0,0 +1,21 @@ +.text { + grid-column: span 2; + + a { + color: inherit; + } + + @media ( min-width: 600px ) { + grid-column: 2; + } +} + +.button { + margin-top: calc( var( --spacing-base ) * 2 ); + grid-column: span 2; + justify-self: flex-start; + + @media ( min-width: 600px ) { + grid-column: 2; + } +} diff --git a/projects/plugins/social/src/js/components/types/types.ts b/projects/plugins/social/src/js/components/types/types.ts index 5040578b5195f..db1ee37e42a79 100644 --- a/projects/plugins/social/src/js/components/types/types.ts +++ b/projects/plugins/social/src/js/components/types/types.ts @@ -28,6 +28,20 @@ type SiteDataSelectors = { getSiteTitle: () => string; }; +type SocialImageGeneratorSettingsSelectors = { + getSocialImageGeneratorSettings: () => { + available: boolean; + enabled: boolean; + defaults: () => { + template: string; + }; + }; + isSocialImageGeneratorAvailable: () => boolean; + isSocialImageGeneratorEnabled: () => boolean; + isUpdatingSocialImageGeneratorSettings: () => boolean; + getSocialImageGeneratorDefaultTemplate: () => string; +}; + /** * Types of the Social Store selectors. * @@ -36,4 +50,5 @@ type SiteDataSelectors = { export type SocialStoreSelectors = JetpackSettingsSelectors & ConnectionDataSelectors & SharesDataSelectors & - SiteDataSelectors; + SiteDataSelectors & + SocialImageGeneratorSettingsSelectors; diff --git a/projects/plugins/social/src/js/store/actions/index.js b/projects/plugins/social/src/js/store/actions/index.js index fc97f159dfc9e..24b993098f085 100644 --- a/projects/plugins/social/src/js/store/actions/index.js +++ b/projects/plugins/social/src/js/store/actions/index.js @@ -1,7 +1,9 @@ import siteSettingActions from './jetpack-settings'; +import socialImageGeneratorSettingActions from './social-image-generator-settings'; const actions = { ...siteSettingActions, + ...socialImageGeneratorSettingActions, }; export default actions; diff --git a/projects/plugins/social/src/js/store/actions/social-image-generator-settings.js b/projects/plugins/social/src/js/store/actions/social-image-generator-settings.js new file mode 100644 index 0000000000000..c17fa7801c2f5 --- /dev/null +++ b/projects/plugins/social/src/js/store/actions/social-image-generator-settings.js @@ -0,0 +1,62 @@ +import { select } from '@wordpress/data'; +import { STORE_ID } from '../../store'; +import { + fetchSocialImageGeneratorSettings, + updateSocialImageGeneratorSettings as updateSocialImageGeneratorSettingsControl, +} from '../controls'; + +export const SET_SOCIAL_IMAGE_GENERATOR_SETTINGS = 'SET_SOCIAL_IMAGE_GENERATOR_SETTINGS'; + +/** + * Yield actions to update settings + * + * @param {object} settings - settings to apply. + * @yields {object} - an action object. + * @returns {object} - an action object. + */ +export function* updateSocialImageGeneratorSettings( settings ) { + try { + yield setUpdatingSocialImageGeneratorSettings(); + yield setSocialImageGeneratorSettings( settings ); + yield updateSocialImageGeneratorSettingsControl( settings ); + const updatedSettings = yield fetchSocialImageGeneratorSettings(); + yield setSocialImageGeneratorSettings( updatedSettings ); + return true; + } catch ( e ) { + const oldSettings = select( STORE_ID ).getSocialImageGeneratorSettings(); + yield setSocialImageGeneratorSettings( oldSettings ); + return false; + } finally { + yield setUpdatingSocialImageGeneratorSettingsDone(); + } +} + +/** + * Set state updating action + * + * @returns {object} - an action object. + */ +export function setUpdatingSocialImageGeneratorSettings() { + return setSocialImageGeneratorSettings( { isUpdating: true } ); +} + +/** + * Set state updating finished + * + * @returns {object} - an action object. + */ +export function setUpdatingSocialImageGeneratorSettingsDone() { + return setSocialImageGeneratorSettings( { isUpdating: false } ); +} + +/** + * Set Social Image Generator settings action + * + * @param {object} options - Social Image Generator settings. + * @returns {object} - an action object. + */ +export function setSocialImageGeneratorSettings( options ) { + return { type: SET_SOCIAL_IMAGE_GENERATOR_SETTINGS, options }; +} + +export default { updateSocialImageGeneratorSettings, setSocialImageGeneratorSettings }; diff --git a/projects/plugins/social/src/js/store/controls.js b/projects/plugins/social/src/js/store/controls.js index 82919a7e9a007..9beee1778b692 100644 --- a/projects/plugins/social/src/js/store/controls.js +++ b/projects/plugins/social/src/js/store/controls.js @@ -2,6 +2,8 @@ import apiFetch from '@wordpress/api-fetch'; export const FETCH_JETPACK_SETTINGS = 'FETCH_JETPACK_SETTINGS'; export const UPDATE_JETPACK_SETTINGS = 'UPDATE_JETPACK_SETTINGS'; +export const FETCH_SOCIAL_IMAGE_GENERATOR_SETTINGS = 'FETCH_SOCIAL_IMAGE_GENERATOR_SETTINGS'; +export const UPDATE_SOCIAL_IMAGE_GENERATOR_SETTINGS = 'UPDATE_SOCIAL_IMAGE_GENERATOR_SETTINGS'; /** * fetchJetpackSettings action @@ -27,6 +29,30 @@ export const updateJetpackSettings = settings => { }; }; +/** + * fetchSocialImageGeneratorSettings action + * + * @returns {object} - an action object. + */ +export const fetchSocialImageGeneratorSettings = () => { + return { + type: FETCH_SOCIAL_IMAGE_GENERATOR_SETTINGS, + }; +}; + +/** + * updateSocialImageGeneratorSettings action + * + * @param {*} settings - Social Image Generator settings object. + * @returns {object} - an action object. + */ +export const updateSocialImageGeneratorSettings = settings => { + return { + type: UPDATE_SOCIAL_IMAGE_GENERATOR_SETTINGS, + settings, + }; +}; + export default { [ FETCH_JETPACK_SETTINGS ]: function () { return apiFetch( { path: '/jetpack/v4/social/settings' } ); @@ -38,4 +64,14 @@ export default { data: action.settings, } ); }, + [ FETCH_SOCIAL_IMAGE_GENERATOR_SETTINGS ]: function () { + return apiFetch( { path: '/jetpack/v4/social-image-generator/settings' } ); + }, + [ UPDATE_SOCIAL_IMAGE_GENERATOR_SETTINGS ]: function ( action ) { + return apiFetch( { + path: '/jetpack/v4/social-image-generator/settings', + method: 'POST', + data: action.settings, + } ); + }, }; diff --git a/projects/plugins/social/src/js/store/reducer/index.js b/projects/plugins/social/src/js/store/reducer/index.js index 0033e25bc6431..d6f0e729841df 100644 --- a/projects/plugins/social/src/js/store/reducer/index.js +++ b/projects/plugins/social/src/js/store/reducer/index.js @@ -3,12 +3,14 @@ import connectionData from './connection-data'; import jetpackSettings from './jetpack-settings'; import sharesData from './shares-data'; import siteData from './site-data'; +import socialImageGeneratorSettings from './social-image-generator-settings'; const reducer = combineReducers( { sharesData, siteData, connectionData, jetpackSettings, + socialImageGeneratorSettings, } ); export default reducer; diff --git a/projects/plugins/social/src/js/store/reducer/social-image-generator-settings.js b/projects/plugins/social/src/js/store/reducer/social-image-generator-settings.js new file mode 100644 index 0000000000000..de58aae5f7481 --- /dev/null +++ b/projects/plugins/social/src/js/store/reducer/social-image-generator-settings.js @@ -0,0 +1,14 @@ +import { SET_SOCIAL_IMAGE_GENERATOR_SETTINGS } from '../actions/social-image-generator-settings'; + +const socialImageGeneratorSettings = ( state = {}, action ) => { + switch ( action.type ) { + case SET_SOCIAL_IMAGE_GENERATOR_SETTINGS: + return { + ...state, + ...action.options, + }; + } + return state; +}; + +export default socialImageGeneratorSettings; diff --git a/projects/plugins/social/src/js/store/resolvers.js b/projects/plugins/social/src/js/store/resolvers.js index 98c5e954aaee5..615ad6b7add9b 100644 --- a/projects/plugins/social/src/js/store/resolvers.js +++ b/projects/plugins/social/src/js/store/resolvers.js @@ -1,5 +1,6 @@ import { setJetpackSettings } from './actions/jetpack-settings'; -import { fetchJetpackSettings } from './controls'; +import { setSocialImageGeneratorSettings } from './actions/social-image-generator-settings'; +import { fetchJetpackSettings, fetchSocialImageGeneratorSettings } from './controls'; /** * Yield actions to get the Jetpack settings. @@ -19,4 +20,22 @@ export function* getJetpackSettings() { } } -export default { getJetpackSettings }; +/** + * Yield actions to get the Social Image Generator settings. + * + * @yields {object} - an action object. + * @returns {object} - an action object. + */ +export function* getSocialImageGeneratorSettings() { + try { + const settings = yield fetchSocialImageGeneratorSettings(); + if ( settings ) { + return setSocialImageGeneratorSettings( settings ); + } + } catch ( e ) { + // TODO: Add proper error handling here + console.log( e ); // eslint-disable-line no-console + } +} + +export default { getJetpackSettings, getSocialImageGeneratorSettings }; diff --git a/projects/plugins/social/src/js/store/selectors/index.js b/projects/plugins/social/src/js/store/selectors/index.js index df7ea686f80fd..b37e55add242e 100644 --- a/projects/plugins/social/src/js/store/selectors/index.js +++ b/projects/plugins/social/src/js/store/selectors/index.js @@ -2,12 +2,14 @@ import connectionDataSelectors from './connection-data'; import jetpackSettingSelectors from './jetpack-settings'; import sharesDataSelectors from './shares-data'; import siteDataSelectors from './site-data'; +import socialImageGeneratorSettingsSelectors from './social-image-generator-settings'; const selectors = { ...siteDataSelectors, ...connectionDataSelectors, ...jetpackSettingSelectors, ...sharesDataSelectors, + ...socialImageGeneratorSettingsSelectors, }; export default selectors; diff --git a/projects/plugins/social/src/js/store/selectors/social-image-generator-settings.js b/projects/plugins/social/src/js/store/selectors/social-image-generator-settings.js new file mode 100644 index 0000000000000..e7dc3d44e4c52 --- /dev/null +++ b/projects/plugins/social/src/js/store/selectors/social-image-generator-settings.js @@ -0,0 +1,10 @@ +const socialImageGeneratorSettingsSelectors = { + getSocialImageGeneratorSettings: state => state.socialImageGeneratorSettings, + isSocialImageGeneratorAvailable: state => state.socialImageGeneratorSettings.available, + isSocialImageGeneratorEnabled: state => state.socialImageGeneratorSettings.enabled, + isUpdatingSocialImageGeneratorSettings: state => state.socialImageGeneratorSettings.isUpdating, + getSocialImageGeneratorDefaultTemplate: state => + state.socialImageGeneratorSettings.defaultTemplate, +}; + +export default socialImageGeneratorSettingsSelectors; diff --git a/projects/plugins/social/tests/styles-mock.js b/projects/plugins/social/tests/styles-mock.js new file mode 100644 index 0000000000000..f053ebf7976e3 --- /dev/null +++ b/projects/plugins/social/tests/styles-mock.js @@ -0,0 +1 @@ +module.exports = {};