Skip to content

Commit

Permalink
Store|Woo: Automatically redirect new users to the Core UI (#48763)
Browse files Browse the repository at this point in the history 
* Add back dashboard page to handle WooCommerce installation after store removal

* Add detect for WooCommerce installation status, redirect after install WooCommerce

* Moved redirection logic to a more relevant function

* Update test

* Refactored showAllSidebarItems to a helper function
  • Loading branch information
@ilyasfoo
ilyasfoo authored Jan 14, 2021
1 parent 190a6d0 commit 3fa3030
Show file tree
Hide file tree
Showing 5 changed files with 117 additions and 36 deletions.
48 changes: 44 additions & 4 deletions client/extensions/woocommerce/app/dashboard/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ import QuerySettingsGeneral from 'woocommerce/components/query-settings-general'
import warn from 'calypso/lib/warn';
import StoreMoveNoticeView from './store-move-notice-view';
import config from 'calypso/config';
import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';

class Dashboard extends Component {
static propTypes = {
Expand Down Expand Up @@ -168,6 +169,8 @@ class Dashboard extends Component {
settingsGeneralLoading,
setupChoicesLoading,
storeLocation,
shouldRedirectAfterInstall,
isCalypsoStoreDeprecatedOrRemoved,
} = this.props;

const adminURL = get( selectedSite, 'options.admin_url', '' );
Expand All @@ -185,6 +188,16 @@ class Dashboard extends Component {
return <RequiredPluginsInstallView site={ selectedSite } />;
}

if (
finishedInstallOfRequiredPlugins &&
isCalypsoStoreDeprecatedOrRemoved &&
shouldRedirectAfterInstall
) {
// Redirect to Core UI setup after finish installation.
this.redirectToWoocommerceSetup( selectedSite );
return <RequiredPluginsInstallView site={ selectedSite } />;
}

if ( ! finishedPageSetup && ! hasProducts ) {
return <RequiredPagesSetupView site={ selectedSite } />;
}
Expand Down Expand Up @@ -241,16 +254,36 @@ class Dashboard extends Component {
return <div>{ manageView }</div>;
};

redirectToWoocommerceSetup = ( site ) => {
window.location = site.options.admin_url + 'admin.php?page=wc-admin&path=%2Fsetup-wizard';
};

render() {
const { className, finishedInstallOfRequiredPlugins, isSetupComplete, siteId } = this.props;
const {
className,
isSetupComplete,
siteId,
finishedInstallOfRequiredPlugins,
shouldRedirectAfterInstall,
isCalypsoStoreDeprecatedOrRemoved,
} = this.props;
const useWideLayout = isSetupComplete ? true : false;
const shouldShowStoreNotice = isCalypsoStoreDeprecatedOrRemoved && ! shouldRedirectAfterInstall;
const shouldRenderDashboardContents =
! config.isEnabled( 'woocommerce/store-removed' ) ||
! finishedInstallOfRequiredPlugins ||
shouldRedirectAfterInstall;

return (
<Main className={ classNames( 'dashboard', className ) } wideLayout={ useWideLayout }>
<ActionHeader breadcrumbs={ this.getBreadcrumb() } />
{ config.isEnabled( 'woocommerce/store-deprecated' ) && <StoreMoveNoticeView /> }
{ isSetupComplete ? this.renderDashboardContent() : this.renderDashboardSetupContent() }
{ finishedInstallOfRequiredPlugins && <QuerySettingsGeneral siteId={ siteId } /> }
{ shouldShowStoreNotice && <StoreMoveNoticeView /> }
{ shouldRenderDashboardContents && (
<>
{ isSetupComplete ? this.renderDashboardContent() : this.renderDashboardSetupContent() }
{ finishedInstallOfRequiredPlugins && <QuerySettingsGeneral siteId={ siteId } /> }
</>
) }
</Main>
);
}
Expand Down Expand Up @@ -278,6 +311,11 @@ function mapStateToProps( state ) {
const hasProducts = getCountProducts( state ) > 0;

const loading = setupChoicesLoading || ! hasCounts || settingsGeneralLoading;
const shouldRedirectAfterInstall =
'' === get( getCurrentQueryArguments( state ), 'redirect_after_install' );
const isCalypsoStoreDeprecatedOrRemoved =
config.isEnabled( 'woocommerce/store-deprecated' ) ||
config.isEnabled( 'woocommerce/store-removed' );

return {
finishedInitialSetup,
Expand All @@ -294,6 +332,8 @@ function mapStateToProps( state ) {
setupChoicesLoading,
siteId,
storeLocation,
shouldRedirectAfterInstall,
isCalypsoStoreDeprecatedOrRemoved,
};
}

Expand Down
3 changes: 1 addition & 2 deletions client/extensions/woocommerce/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { translate } from 'i18n-calypso';
*/
import App from './app';
import Dashboard from './app/dashboard';
import StoreMoveNoticeView from './app/dashboard/store-move-notice-view';
import EmptyContent from 'calypso/components/empty-content';
import { navigation, siteSelection, sites } from 'calypso/my-sites/controller';
import installActionHandlers from './state/data-layer';
Expand Down Expand Up @@ -48,7 +47,7 @@ import './style.scss';
const getStorePages = () => {
const pages = [
{
container: config.isEnabled( 'woocommerce/store-removed' ) ? StoreMoveNoticeView : Dashboard,
container: Dashboard,
configKey: 'woocommerce/extension-dashboard',
path: '/store/:site',
},
Expand Down
68 changes: 41 additions & 27 deletions client/extensions/woocommerce/store-sidebar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import { getSelectedSiteWithFallback } from 'woocommerce/state/sites/selectors';
import { getSetStoreAddressDuringInitialSetup } from 'woocommerce/state/sites/setup-choices/selectors';
import { isLoaded as arePluginsLoaded } from 'calypso/state/plugins/installed/selectors';
import { isStoreManagementSupportedInCalypsoForCountry } from 'woocommerce/lib/countries';
import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
import Sidebar from 'calypso/layout/sidebar';
import SidebarItem from 'calypso/layout/sidebar/item';
import SidebarMenu from 'calypso/layout/sidebar/menu';
Expand Down Expand Up @@ -86,6 +87,41 @@ class StoreSidebar extends Component {
}, this );
};

shouldShowAllSidebarItems = () => {
const {
finishedAddressSetup,
hasProducts,
path,
settingsGeneralLoaded,
siteSuffix,
storeLocation,
isStoreRemoved,
shouldRedirectAfterInstall,
} = this.props;

// Show all items if: we're not on the dashboard, we have finished setup, or we have products.
const notOnDashboard = 0 !== path.indexOf( '/store' + siteSuffix );
let showAllSidebarItems = notOnDashboard || finishedAddressSetup || hasProducts;

// Don't show all the sidebar items if we don't know what country the store is in
if ( showAllSidebarItems ) {
if ( ! settingsGeneralLoaded ) {
showAllSidebarItems = false;
} else {
const storeCountry = get( storeLocation, 'country' );
showAllSidebarItems = isStoreManagementSupportedInCalypsoForCountry( storeCountry );
}

// Don't show sidebar items if store's removed & user is going to redirect
// to WooCommerce after installation
if ( isStoreRemoved && shouldRedirectAfterInstall ) {
showAllSidebarItems = false;
}
}

return showAllSidebarItems;
};

dashboard = () => {
const { site, siteSuffix, translate } = this.props;
const link = '/store' + siteSuffix;
Expand Down Expand Up @@ -261,33 +297,8 @@ class StoreSidebar extends Component {
};

render = () => {
const {
allRequiredPluginsActive,
finishedAddressSetup,
hasProducts,
path,
pluginsLoaded,
settingsGeneralLoaded,
site,
siteId,
siteSuffix,
storeLocation,
} = this.props;

// Show all items if: we're not on the dashboard, we have finished setup, or we have products.
const notOnDashboard = 0 !== path.indexOf( '/store' + siteSuffix );
let showAllSidebarItems = notOnDashboard || finishedAddressSetup || hasProducts;

// Don't show all the sidebar items if we don't know what country the store is in
if ( showAllSidebarItems ) {
if ( ! settingsGeneralLoaded ) {
showAllSidebarItems = false;
} else {
const storeCountry = get( storeLocation, 'country' );
showAllSidebarItems = isStoreManagementSupportedInCalypsoForCountry( storeCountry );
}
}

const { allRequiredPluginsActive, pluginsLoaded, site, siteId } = this.props;
const showAllSidebarItems = this.shouldShowAllSidebarItems();
const shouldLoadSettings = pluginsLoaded && allRequiredPluginsActive;

return (
Expand Down Expand Up @@ -321,6 +332,8 @@ function mapStateToProps( state ) {
const pluginsLoaded = arePluginsLoaded( state, siteId );
const allRequiredPluginsActive = areAllRequiredPluginsActive( state, siteId );
const isStoreRemoved = config.isEnabled( 'woocommerce/store-removed' );
const shouldRedirectAfterInstall =
'' === get( getCurrentQueryArguments( state ), 'redirect_after_install' );

return {
allRequiredPluginsActive,
Expand All @@ -336,6 +349,7 @@ function mapStateToProps( state ) {
siteSuffix: site ? '/' + site.slug : '',
storeLocation,
isStoreRemoved,
shouldRedirectAfterInstall,
};
}

Expand Down
10 changes: 8 additions & 2 deletions client/my-sites/sidebar/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ import {
isJetpackSite,
canCurrentUserUseEarn,
canCurrentUserUseStore,
getSiteOption,
} from 'calypso/state/sites/selectors';
import getSiteChecklist from 'calypso/state/selectors/get-site-checklist';
import getSiteTaskList from 'calypso/state/selectors/get-site-task-list';
Expand Down Expand Up @@ -716,7 +717,7 @@ export class MySitesSidebar extends Component {
};

woocommerce() {
const { site, canUserUseStore } = this.props;
const { site, canUserUseStore, siteSuffix, isSiteWpcomStore } = this.props;

const isCalypsoStoreDeprecatedOrRemoved =
isEnabled( 'woocommerce/store-deprecated' ) || isEnabled( 'woocommerce/store-removed' );
Expand All @@ -731,7 +732,11 @@ export class MySitesSidebar extends Component {
return null;
}

const storeLink = site.options.admin_url + 'admin.php?page=wc-admin&from-calypso';
let storeLink = site.options.admin_url + 'admin.php?page=wc-admin&from-calypso';
if ( ! isSiteWpcomStore ) {
// Navigate to Store UI for installation.
storeLink = '/store' + siteSuffix + '?redirect_after_install';
}

return (
<SidebarItem
Expand Down Expand Up @@ -1151,6 +1156,7 @@ function mapStateToProps( state ) {
isWpMobile: isWpMobileApp(), // This doesn't rely on state, but we inject it here for future testability
sitePlanSlug: getSitePlanSlug( state, siteId ),
onboardingUrl: getOnboardingUrl( state ),
isSiteWpcomStore: getSiteOption( state, siteId, 'is_wpcom_store' ), // 'is_automated_transfer' && 'woocommerce_is_active'
};
}

Expand Down
24 changes: 23 additions & 1 deletion client/my-sites/sidebar/test/sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ describe( 'MySitesSidebar', () => {
expect( wrapper.html() ).toEqual( null );
} );

test( 'Should return WooCommerce menu item if site has Business plan and user can use store', () => {
test( 'Should return WooCommerce menu item redirecting to WooCommerce if site has Business plan and user can use store', () => {
const Sidebar = new MySitesSidebar( {
canUserUseStore: true,
...defaultProps,
Expand All @@ -217,6 +217,7 @@ describe( 'MySitesSidebar', () => {
product_slug: 'business-bundle',
},
},
isSiteWpcomStore: true,
} );
const WooCommerce = () => Sidebar.woocommerce();

Expand All @@ -226,6 +227,27 @@ describe( 'MySitesSidebar', () => {
'http://test.com/wp-admin/admin.php?page=wc-admin&from-calypso'
);
} );

test( 'Should return WooCommerce menu item linking to Store UI dashboard if site has Business plan, WooCommerce plugin not installed yet, and user can use store', () => {
const Sidebar = new MySitesSidebar( {
canUserUseStore: true,
...defaultProps,
site: {
options: {
admin_url: 'http://test.com/wp-admin/',
},
plan: {
product_slug: 'business-bundle',
},
},
isSiteWpcomStore: false,
} );
const WooCommerce = () => Sidebar.woocommerce();

const wrapper = shallow( <WooCommerce /> );
expect( wrapper.html() ).not.toEqual( null );
expect( wrapper.props().link ).toEqual( '/store/mysite.com?redirect_after_install' );
} );
} );

describe( 'MySitesSidebar.earn()', () => {
Expand Down

0 comments on commit 3fa3030

Please sign in to comment.