402 implement site kit setup flow #21978
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| import { Button, Paper, Stepper, Title, DropdownMenu } from "@yoast/ui-library"; | ||
| import { ReactComponent as YoastConnectSiteKit } from "../../../images/yoast-connect-google-site-kit.svg"; | ||
| import { __ } from "@wordpress/i18n"; | ||
| import { CheckCircleIcon } from "@heroicons/react/solid"; | ||
| import { ArrowRightIcon, XIcon, TrashIcon } from "@heroicons/react/outline"; | ||
|
|
||
| /** | ||
| * Get the button and stepper props based on the current state. | ||
| * | ||
| * @param {boolean} isInstalled Whether the plugin is isInstalled. | ||
| * @param {boolean} isActive Whether the feature is active. | ||
| * @param {boolean} isSetupCompleted Whether the setup is complete. | ||
| * @param {boolean} isConnected Whether the connection is active. | ||
| * @param {string} installUrl The URL to install Site Kit. | ||
| * @param {string} activateUrl The URL to activate Site Kit. | ||
| * @param {string} setupUrl The URL to setup Site Kit. | ||
| * | ||
| * @returns {Object} The button and stepper props. | ||
| */ | ||
| const getButtonAndStepperProps = ( isInstalled, isActive, isSetupCompleted, isConnected, installUrl, activateUrl, setupUrl ) => { | ||
|
There was a problem hiding this comment. I'll point to my unanswered previous comment: #21978 (comment) |
||
| let buttonProps; | ||
| let currentStep; | ||
| let isComplete = false; | ||
|
|
||
| switch ( true ) { | ||
| case ( ! isInstalled ): | ||
| currentStep = 1; | ||
| buttonProps = { | ||
| children: __( "Install Site Kit by Google", "wordpress-seo" ), | ||
| as: "a", | ||
| href: installUrl, | ||
| }; | ||
| break; | ||
| case ( ! isActive ): | ||
| currentStep = 2; | ||
| buttonProps = { | ||
| children: __( "Activate Site Kit by Google", "wordpress-seo" ), | ||
| as: "a", | ||
| href: activateUrl, | ||
| }; | ||
| break; | ||
| case ( ! isSetupCompleted ): | ||
| currentStep = 3; | ||
| buttonProps = { | ||
| children: __( "Set up Site Kit by Google", "wordpress-seo" ), | ||
| as: "a", | ||
| href: setupUrl, | ||
| }; | ||
| break; | ||
| case ( ! isConnected ): | ||
| currentStep = 4; | ||
| buttonProps = { children: __( "Connect Site Kit by Google", "wordpress-seo" ) }; | ||
| break; | ||
| case isConnected: | ||
| isComplete = true; | ||
| currentStep = 4; | ||
| buttonProps = { children: "Take a quick tour" }; | ||
| break; | ||
| } | ||
| return { buttonProps, currentStep, isComplete }; | ||
| }; | ||
|
|
||
| const steps = [ | ||
| __( "INSTALL", "wordpress-seo" ), | ||
| __( "ACTIVATE", "wordpress-seo" ), | ||
| __( "SET UP", "wordpress-seo" ), | ||
| __( "CONNECT", "wordpress-seo" ), | ||
| ]; | ||
|
|
||
| /** | ||
| * The google site kit connection guide widget. | ||
| * | ||
| * @param {boolean} isInstalled Whether the plugin is installed. | ||
| * @param {boolean} isActive Whether the feature is active. | ||
| * @param {boolean} isSetupCompleted Whether the setup is complete. | ||
| * @param {boolean} isConnected Whether the connection is active. | ||
| * @param {string} installUrl The URL to install Site Kit. | ||
| * @param {string} activateUrl The URL to activate Site Kit. | ||
| * @param {string} setupUrl The URL to setup Site Kit. | ||
| * @param {function} onRemove The function to call when the widget is removed. | ||
| * @param {function} onRemovePermanently The function to call when the widget is removed permanently. | ||
| * @param {string} learnMorelink The URL to learn more about the feature. | ||
| * | ||
| * @returns {JSX.Element} The widget. | ||
| */ | ||
| export const SiteKitSetupWidget = ( { | ||
| installUrl, | ||
| activateUrl, | ||
| setupUrl, | ||
| isConnected, | ||
| isActive, | ||
| isSetupCompleted, | ||
| isInstalled, | ||
| onRemove, | ||
| onRemovePermanently, | ||
| learnMorelink, | ||
| } ) => { | ||
| const { buttonProps, currentStep, isComplete } = getButtonAndStepperProps( | ||
| isInstalled, isActive, isSetupCompleted, isConnected, installUrl, activateUrl, setupUrl ); | ||
| return <Paper className="yst-@container yst-grow yst-max-w-screen-sm yst-p-8 yst-shadow-md yst-relative"> | ||
| <DropdownMenu className="yst-absolute yst-top-4 yst-end-4"> | ||
vraja-pro marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <DropdownMenu.IconTrigger screenReaderTriggerLabel={ __( "Open menu", "wordpress-seo" ) } className="yst-absolute yst-top-0 yst-end-0" /> | ||
vraja-pro marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <DropdownMenu.List className="yst-absolute yst-top-5 yst-end-0"> | ||
vraja-pro marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <DropdownMenu.ButtonItem className="yst-text-slate-600" onClick={ onRemove }> | ||
| <XIcon className="yst-w-4 yst-text-slate-400" /> | ||
| { __( "Remove until next visit", "wordpress-seo" ) } | ||
| </DropdownMenu.ButtonItem> | ||
| <DropdownMenu.ButtonItem className="yst-text-red-500" onClick={ onRemovePermanently }> | ||
| <TrashIcon className="yst-w-4" /> | ||
| { __( "Remove permanently", "wordpress-seo" ) } | ||
| </DropdownMenu.ButtonItem> | ||
| </DropdownMenu.List> | ||
| </DropdownMenu> | ||
|
|
||
| <div className="yst-flex yst-justify-center yst-mb-6 yst-mt-4"><YoastConnectSiteKit /></div> | ||
| <Stepper steps={ steps } currentStep={ currentStep } numberOfSteps={ steps.length }> | ||
| { steps.map( ( label, index ) => ( <Stepper.Step | ||
| key={ label } | ||
| label={ label } | ||
| isActive={ currentStep === index + 1 } | ||
| isComplete={ isComplete } | ||
| isStepComplete={ currentStep > index + 1 || isComplete } | ||
| /> ) ) } | ||
| </Stepper> | ||
| <hr className="yst-bg-slate-200 yst-my-6" /> | ||
| <Title size="2">{ __( "Expand your dashboard with insights from Google!", "wordpress-seo" ) }</Title> | ||
| <p className="yst-my-4">{ __( "Bring together powerful tools like Google Analytics and Search Console for a complete overview of your website's performance, all in one seamless dashboard.", "wordpress-seo" ) }</p> | ||
|
|
||
| <span className="yst-text-slate-800 yst-font-medium">{ __( "What you'll get:", "wordpress-seo" ) }</span> | ||
| <ul> | ||
| <li className="yst-gap-2 yst-flex yst-mt-2"><CheckCircleIcon className="yst-w-5 yst-text-green-400" /> | ||
| { __( "Actionable insights into traffic, SEO, and user behavior to grow your audience.", "wordpress-seo" ) }</li> | ||
| <li className="yst-gap-2 yst-flex yst-mt-2"><CheckCircleIcon className="yst-w-5 yst-text-green-400" /> | ||
| { __( "Key performance metrics to fine-tune your website and optimize like a pro.", "wordpress-seo" ) }</li> | ||
vraja-pro marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| </ul> | ||
| <div className="yst-flex yst-gap-0.5 yst-mt-6 yst-items-center"> | ||
vraja-pro marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <Button { ...buttonProps } /> | ||
|
|
||
| { isConnected ? <Button>{ __( "Dismiss", "wordpress-seo" ) }</Button> | ||
| : <Button as="a" variant="tertiary" href={ learnMorelink }>{ __( "Learn more", "wordpress-seo" ) } | ||
| <ArrowRightIcon className="yst-w-3 yst-ml-2 yst-text-primary-500" /> | ||
vraja-pro marked this conversation as resolved.
Show resolved
Hide resolved
vraja-pro marked this conversation as resolved.
Show resolved
Hide resolved
vraja-pro marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| </Button> | ||
| } | ||
| </div> | ||
| </Paper>; | ||
| }; | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import { render, screen, fireEvent } from "@testing-library/react"; | ||
| import { SiteKitSetupWidget } from "../../../src/dashboard/components/site-kit-setup-widget"; | ||
|
|
||
| describe( "SiteKitSetupWidget", () => { | ||
| const defaultProps = { | ||
| installUrl: "https://example.com/install", | ||
| activateUrl: "https://example.com/activate", | ||
| setupUrl: "https://example.com/isSetup", | ||
| isConnected: false, | ||
| isActive: false, | ||
| isSetupCompleted: false, | ||
| isInstalled: false, | ||
| onRemove: jest.fn(), | ||
| onRemovePermanently: jest.fn(), | ||
| learnMoreLink: "https://example.com/learn-more", | ||
| }; | ||
|
|
||
| it( "renders the widget with install button", () => { | ||
| render( <SiteKitSetupWidget { ...defaultProps } /> ); | ||
| expect( screen.getByText( "Install Site Kit by Google" ) ).toBeInTheDocument(); | ||
vraja-pro marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } ); | ||
|
|
||
| it( "renders the widget with activate button", () => { | ||
| render( <SiteKitSetupWidget { ...defaultProps } isInstalled={ true } /> ); | ||
| expect( screen.getByText( "Activate Site Kit by Google" ) ).toBeInTheDocument(); | ||
| } ); | ||
|
|
||
| it( "renders the widget with setup button", () => { | ||
| render( <SiteKitSetupWidget { ...defaultProps } isInstalled={ true } isActive={ true } /> ); | ||
| expect( screen.getByText( "Set up Site Kit by Google" ) ).toBeInTheDocument(); | ||
| } ); | ||
|
|
||
| it( "renders the widget with connect button", () => { | ||
| render( <SiteKitSetupWidget { ...defaultProps } isInstalled={ true } isActive={ true } isSetupCompleted={ true } /> ); | ||
| expect( screen.getByText( "Connect Site Kit by Google" ) ).toBeInTheDocument(); | ||
| } ); | ||
|
|
||
| it( "renders the widget with dismiss button when connected", () => { | ||
| render( <SiteKitSetupWidget { ...defaultProps } isInstalled={ true } isActive={ true } isSetupCompleted={ true } isConnected={ true } /> ); | ||
| expect( screen.getByText( "Dismiss" ) ).toBeInTheDocument(); | ||
| } ); | ||
|
|
||
| it( "opens the menu and calls onRemove when 'Remove until next visit' is clicked", () => { | ||
| render( <SiteKitSetupWidget { ...defaultProps } /> ); | ||
| fireEvent.click( screen.getByRole( "button", { name: /open menu/i } ) ); | ||
| fireEvent.click( screen.getByText( "Remove until next visit" ) ); | ||
| expect( defaultProps.onRemove ).toHaveBeenCalled(); | ||
| } ); | ||
|
|
||
| it( "opens the menu and calls onRemovePermanently when 'Remove permanently' is clicked", () => { | ||
| render( <SiteKitSetupWidget { ...defaultProps } /> ); | ||
| fireEvent.click( screen.getByRole( "button", { name: /open menu/i } ) ); | ||
| fireEvent.click( screen.getByText( "Remove permanently" ) ); | ||
vraja-pro marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| expect( defaultProps.onRemovePermanently ).toHaveBeenCalled(); | ||
| } ); | ||
| } ); | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please answer: #21978 (comment)