Skip to content

Commit

Permalink
WIP GSK integration card
Browse files Browse the repository at this point in the history
  • Loading branch information
@vraja-pro
vraja-pro committed Jan 8, 2025
1 parent 4c3bbdd commit 5a78940
Show file tree
Hide file tree
Showing 7 changed files with 199 additions and 152 deletions.
232 changes: 149 additions & 83 deletions packages/js/src/integrations-page/google-site-kit-integration.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { __, sprintf } from "@wordpress/i18n";
import { CheckIcon, XIcon } from "@heroicons/react/solid";
import { Fragment, createInterpolateElement, useMemo, useCallback } from "@wordpress/element";
import { createInterpolateElement, useCallback } from "@wordpress/element";
import PropTypes from "prop-types";
import { SimpleIntegration } from "./simple-integration";
import { ReactComponent as SiteKitLogo } from "../../images/site-kit-logo.svg";
import { get } from "lodash";
import { useToggleState } from "@yoast/ui-library";
import { SiteKitConsentModal } from "../shared-admin/components";

Expand All @@ -30,110 +30,176 @@ const integration = {
logo: SiteKitLogo,
};

const buttonLabels = {
install: sprintf(
const buttonProps = {
install: {
children: sprintf(
/* translators: 1: Site Kit by Google */
__( "Install %1$s", "wordpress-seo" ),
"Site Kit by Google"
),
activate: sprintf(
__( "Install %1$s", "wordpress-seo" ),
"Site Kit by Google"
),
as: "a",
href: "/wp-admin/plugin-install.php?s=google%2520site%2520kit&tab=search&type=term",
},
activate: {
children: sprintf(
/* translators: 1: Site Kit by Google */
__( "Activate %1$s", "wordpress-seo" ),
"Site Kit by Google"
),
setup: sprintf(
__( "Activate %1$s", "wordpress-seo" ),
"Site Kit by Google"
),
as: "a",
href: "/wp-admin/plugins.php",
},
setup: {
children: sprintf(
/* translators: 1: Site Kit by Google */
__( "Set up %1$s", "wordpress-seo" ),
"Site Kit by Google"
),
connect: sprintf(
__( "Set up %1$s", "wordpress-seo" ),
"Site Kit by Google"
),
as: "a",
href: "/wp-admin/admin.php?page=googlesitekit-splash",
},
connect: {
children: sprintf(
/* translators: 1: Site Kit by Google */
__( "Connect %1$s", "wordpress-seo" ),
"Site Kit by Google"
),
disconnect: __( "Disconnect", "wordpress-seo" ),
__( "Connect %1$s", "wordpress-seo" ),
"Site Kit by Google"
),
as: "button",
},
disconnect: {
children: __( "Disconnect", "wordpress-seo" ),
as: "button",
variant: "secondary",
},
};

/**
* The NotConnected component.
*
* @param {boolean} isConnected Whether the integration is connected.
* @param {boolean} afterSetup Whether the integration has been set up.
* @param {boolean} isActive Whether the integration is active.
*
* @returns {JSX.Element} The NotConnected component.
*/
const NotConnected = ( { isConnected, afterSetup, isActive } ) => {
return ( ! isConnected || ! afterSetup ) && isActive && <>
<span className="yst-text-slate-700 yst-font-medium">
{ __( "Not connected", "wordpress-seo" ) }
</span>
<XIcon
className="yst-h-5 yst-w-5 yst-text-red-500 yst-flex-shrink-0"
/>
</>;
};

NotConnected.propTypes = {
isConnected: PropTypes.bool.isRequired,
afterSetup: PropTypes.bool.isRequired,
isActive: PropTypes.bool.isRequired,
};

/**
* Plugin not detected.
*
* @param {boolean} isActive Whether the integration is active.
* @param {boolean} isInstalled Whether the integration is installed.
*
* @returns {JSX.Element} The PluginNotDetected component.
*/
const PluginNotDetected = ( { isActive, isInstalled } ) => {
return ( ! isActive || ! isInstalled ) && <>
<span className="yst-text-slate-700 yst-font-medium">
{ __( "Plugin not detected", "wordpress-seo" ) }
</span>
<XIcon
className="yst-h-5 yst-w-5 yst-text-red-500 yst-flex-shrink-0"
/>
</>;
};

PluginNotDetected.propTypes = {
isActive: PropTypes.bool.isRequired,
isInstalled: PropTypes.bool.isRequired,
};

/**
* The successfully Connected component.
*
* @param {boolean} isActive Whether the integration is active.
* @param {boolean} afterSetup Whether the integration has been set up.
* @param {boolean} isConnected Whether the integration is connected.
*
* @returns {JSX.Element} The SuccessfullyConnected component.
*/
const SuccessfullyConnected = ( { isActive, afterSetup, isConnected } ) => {
return isActive && afterSetup && isConnected && <>
<span className="yst-text-slate-700 yst-font-medium">
{ __( "Successfully connected", "wordpress-seo" ) }
</span>
<CheckIcon
className="yst-h-5 yst-w-5 yst-text-green-400 yst-flex-shrink-0"
/>
</>;
};

SuccessfullyConnected.propTypes = {
isActive: PropTypes.bool.isRequired,
afterSetup: PropTypes.bool.isRequired,
isConnected: PropTypes.bool.isRequired,
};

/**
* The Site Kit integration component.
*
* @param {boolean} isActive Whether the integration is active.
* @param {boolean} afterSetup Whether the integration has been set up.
* @param {boolean} isInstalled Whether the integration is installed.
* @param {boolean} isConnected Whether the integration is connected.
*
* @returns {WPElement} The Site Kit integration component.
*/
export const GoogleSiteKitIntegration = () => {
const { isActive, afterSetup, isInstalled, isConnected } = get( window, "wpseoIntegrationsData.googleSiteKit", { isActive: false, afterSetup: false, isInstalled: false, isConnected: false } );
export const GoogleSiteKitIntegration = ( { isActive, afterSetup, isInstalled, isConnected } ) => {
const [ isModalOpen, toggleModal ] = useToggleState( false );

const getButtonConfig = useCallback( () => {
const button = {
className: "yst-mt-6 yst-w-full",
as: "a",
id: "google-site-kit-button",
};

if ( ! isInstalled ) {
button.children = buttonLabels.install;
button.href = "/wp-admin/plugin-install.php?s=google%2520site%2520kit&tab=search&type=term";
} else if ( ! isActive ) {
button.children = buttonLabels.activate;
button.href = "/wp-admin/plugins.php";
} else if ( ! afterSetup ) {
button.children = buttonLabels.setup;
button.href = "/wp-admin/admin.php?page=googlesitekit-splash";
} else if ( ! isConnected ) {
button.children = buttonLabels.connect;
button.onClick = toggleModal;
button.as = "button";
} else if ( isConnected ) {
button.children = buttonLabels.disconnect;
button.as = "button";
button.variant = "secondary";
const getButtonProps = useCallback( () => {
switch ( true ) {
case ( ! isInstalled ):
return buttonProps.install;
case ( ! isActive ):
return buttonProps.activate;
case ( ! afterSetup ):
return buttonProps.setup;
case ( ! isConnected ):
return { ...buttonProps.connect, onClick: toggleModal };
case ( isConnected ):
return buttonProps.disconnect;
}

return button;
}, [ isInstalled, isActive, afterSetup, isConnected ] );

const notConnected = useMemo( () => ! isConnected || ! afterSetup, [ isConnected, afterSetup ] );
const pluginNotDetected = useMemo( () => ! isActive || ! isInstalled, [ isActive, isInstalled ] );
const successfullyConnected = useMemo( () => isActive && afterSetup && isConnected, [ isActive, afterSetup, isConnected ] );

return (
<>
<SimpleIntegration
integration={ integration }
isActive={ isInstalled && isActive }
button={ getButtonConfig( isInstalled, isActive, afterSetup, isConnected ) }
isActive={ isInstalled && isActive }
button={ {
className: "yst-mt-6 yst-w-full",
id: "google-site-kit-button",
...getButtonProps( isInstalled, isActive, afterSetup, isConnected ),
} }
>

{ successfullyConnected && <Fragment>
<span className="yst-text-slate-700 yst-font-medium">{ __( "Successfully connected", "wordpress-seo" ) }</span>
<CheckIcon
className="yst-h-5 yst-w-5 yst-text-green-400 yst-flex-shrink-0"
/>
</Fragment> }

{ notConnected && isActive && <Fragment>
<span className="yst-text-slate-700 yst-font-medium">
{
__( "Not connected", "wordpress-seo" )
}
</span>
<XIcon
className="yst-h-5 yst-w-5 yst-text-red-500 yst-flex-shrink-0"
/>
</Fragment> }

{ pluginNotDetected && <Fragment>
<span className="yst-text-slate-700 yst-font-medium">
{
__( "Plugin not detected", "wordpress-seo" )
}
</span>
<XIcon
className="yst-h-5 yst-w-5 yst-text-red-500 yst-flex-shrink-0"
/>
</Fragment> }
<SuccessfullyConnected isActive={ isActive } afterSetup={ afterSetup } isConnected={ isConnected } />
<NotConnected isConnected={ isConnected } afterSetup={ afterSetup } isActive={ isActive } />
<PluginNotDetected isActive={ isActive } isInstalled={ isInstalled } />
</SimpleIntegration>
<SiteKitConsentModal isOpen={ isModalOpen } onClose={ toggleModal } />
</>
);
};

GoogleSiteKitIntegration.propTypes = {
isActive: PropTypes.bool.isRequired,
afterSetup: PropTypes.bool.isRequired,
isInstalled: PropTypes.bool.isRequired,
isConnected: PropTypes.bool.isRequired,
};
10 changes: 8 additions & 2 deletions packages/js/src/integrations-page/recommended-integrations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const integrations = [
},
];

const isGoogleSiteKitFeatureEnabled = get( window, "wpseoIntegrationsData.googleSiteKit.featureEnabled", false );
const isGoogleSiteKitFeatureEnabled = get( window, "wpseoIntegrationsData.google_site_kit_feature", false );

const RecommendedIntegrations = [
integrations.map( ( integration, index ) => {
Expand All @@ -81,9 +81,15 @@ const RecommendedIntegrations = [
} ),
];

const googleSiteKitProps = {
isInstalled: get( window, "wpseoIntegrationsData.google_site_kit_installed", false ) === "1",
isActive: get( window, "wpseoIntegrationsData.google_site_kit_active", false ) === "1",
afterSetup: get( window, "wpseoIntegrationsData.google_site_kit_setup", false ) === "1",
isConnected: get( window, "wpseoIntegrationsData.google_site_kit_connect", false ) === "1",
};

if ( isGoogleSiteKitFeatureEnabled ) {
RecommendedIntegrations.push( <GoogleSiteKitIntegration key={ integrations.length } /> );
RecommendedIntegrations.push( <GoogleSiteKitIntegration key={ integrations.length } { ...googleSiteKitProps } /> );
}

export { RecommendedIntegrations };
2 changes: 1 addition & 1 deletion packages/js/src/integrations-page/simple-integration.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { getIsFreeIntegrationOrPremiumAvailable } from "./helper";
* @param {object} integration The integration.
* @param {boolean} isActive The integration state.
* @param {wp.Element} children The child components.
* @param {wp.Element} button The button component.
* @param {object} button The button component props.
*
* @returns {WPElement} A card representing an integration.
*/
Expand Down
4 changes: 2 additions & 2 deletions packages/js/src/shared-admin/components/site-kit-consent-modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { PropTypes } from "prop-types";
* @param {boolean} isOpen Whether the modal is open.
* @param {Function} onClose Callback to close the modal.
*
* @returns {WPElement} The Site Kit consent modal component.
* @returns {JSX.Element} The Site Kit consent modal component.
*/
export const SiteKitConsentModal = ( { isOpen, onClose } ) => {
return (
Expand All @@ -19,7 +19,7 @@ export const SiteKitConsentModal = ( { isOpen, onClose } ) => {
<Modal.Panel>
<Modal.Title>{ __( "Connect Site Kit by Google", "wordpress-seo" ) }</Modal.Title>
<Modal.Description>
<p>{ __( "Connect your Google account to view traffic and search rankings on your dashboard.", "wordpress-seo" ) }</p>
{ __( "Connect your Google account to view traffic and search rankings on your dashboard.", "wordpress-seo" ) }
</Modal.Description>
</Modal.Panel>
</Modal>
Expand Down
Loading

0 comments on commit 5a78940

Please sign in to comment.