Skip to content

Commit

Permalink
Refactor the bundle installation to be generic (#84886)
Browse files Browse the repository at this point in the history 
* Refactor check for plugins to be generic

* Update bundle settings hook to allow getting settings by theme software

* Move array of plugins to check to the bundle settings

* Update feature flag to a generic name

* Rename woo confirm to bundle confirm

* Add new hook to get site bundle settings

* Add TODO comment to review later

* Rename woo transfer to bundle transfer

* Make bundle transfer step generic

* Rename woo install plugins to bundle install plugins

* Make install plugins generic

* Translate message that was not translated

* Get software name dynamically from bundle settings

* Remove a not necessary hook

* Refactor hooks to be named exports, following the standards of the existing ones

* Use hook to get plugin slug

* Remove Woo Verify Email not used feature

* Reorganize bundle steps array

* Add comments to make the steps more clear

* Move custom back to settings

* Move flow settings to bundleStepsSettings

* Move steps to settings

So only one object from this file needs to be customized for bundles.

* Make end of flow generic

* Make custom functions optional

* Add comments to the custom functions

* Rename the variable to follow the same standard of the other file

* Force type to be a string

* Add steps as argument to the useStepNavigation

* Make the navigation to the next step generic for the submit

* Refactor submit

* Update log and event name

* Update import to the new function

* Remove unused code

This logic is part of plugin-bundle-flow.

* Move the styles to the file

Following the approach applied in other files

* Remove comment

Keeping it as a customization inside the step, as exception.

* Update logic to upgrade site when installing free theme with bundle

* Make `ThemeUpgradeModal` Calypso-State-free

Update to match changes from conflicting PR. See #85013 and #84886 (comment).

Co-authored-by: okmttdhr <okmttdhr@users.noreply.github.com>

* Add event for all the cases, and keep the current one for backward compatibility

* Fix case when endFlow is not set

* Fix logic to display activate or upgrade button

---------

Co-authored-by: okmttdhr <okmttdhr@users.noreply.github.com>
  • Loading branch information
@renatho @okmttdhr
renatho and okmttdhr authored Dec 21, 2023
1 parent f7e7eeb commit 973a2b5
Show file tree
Hide file tree
Showing 28 changed files with 408 additions and 736 deletions.
6 changes: 5 additions & 1 deletion client/landing/stepper/declarative-flow/internals/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,11 @@ export const FlowRenderer: React.FC< { flow: Flow } > = ( { flow } ) => {
setPreviousProgress( stepProgress?.progress ?? 0 );
};

const stepNavigation = flow.useStepNavigation( currentStepRoute, _navigate );
const stepNavigation = flow.useStepNavigation(
currentStepRoute,
_navigate,
flowSteps.map( ( step ) => step.slug )
);

// Retrieve any extra step data from the stepper-internal store. This will be passed as a prop to the current step.
const stepData = useSelect(
Expand Down
60 changes: 47 additions & 13 deletions ...ls/steps-repository/woo-confirm/index.tsx → ...steps-repository/bundle-confirm/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ProductsList } from '@automattic/data-stores';
import { StepContainer } from '@automattic/onboarding';
import { StepContainer, NextButton } from '@automattic/onboarding';
import styled from '@emotion/styled';
import { useSelect, useDispatch } from '@wordpress/data';
import { useI18n } from '@wordpress/react-i18n';
Expand All @@ -11,21 +11,41 @@ import FormattedHeader from 'calypso/components/formatted-header';
import { LoadingEllipsis } from 'calypso/components/loading-ellipsis';
import WarningCard from 'calypso/components/warning-card';
import { useSite } from 'calypso/landing/stepper/hooks/use-site';
import { useSitePluginSlug } from 'calypso/landing/stepper/hooks/use-site-plugin-slug';
import {
AUTOMATED_ELIGIBILITY_STORE,
SITE_STORE,
ONBOARD_STORE,
} from 'calypso/landing/stepper/stores';
import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
import { addQueryArgs } from 'calypso/lib/url';
import { ActionSection, StyledNextButton } from 'calypso/signup/steps/woocommerce-install';
import { eligibilityHolds as eligibilityHoldsConstants } from 'calypso/state/automated-transfer/constants';
import SupportCard from '../store-address/support-card';
import type { Step } from '../../types';
import type { OnboardSelect, SiteSelect } from '@automattic/data-stores';
import type { TransferEligibilityError } from '@automattic/data-stores/src/automated-transfer-eligibility/types';
import './style.scss';

const ActionSection = styled.div`
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
margin-top: 40px;
gap: 4%;
@media ( max-width: 320px ) {
align-items: center;
}
`;

const StyledNextButton = styled( NextButton )`
@media ( max-width: 320px ) {
width: 100%;
margin-bottom: 20px;
}
`;

const Divider = styled.hr`
border-top: 1px solid #eee;
background: none;
Expand All @@ -41,11 +61,12 @@ const TRANSFERRING_NOT_BLOCKERS = [
eligibilityHoldsConstants.TRANSFER_ALREADY_EXISTS, // Already Atomic sites are handled in the install flow.
];

const WooConfirm: Step = function WooCommerceConfirm( { navigation } ) {
const BundleConfirm: Step = function BundleConfirm( { navigation } ) {
const { goBack, submit } = navigation;
const { __ } = useI18n();
const site = useSite();
const siteId = site && site?.ID;
const pluginSlug = useSitePluginSlug();
const isAtomicSite = useSelect(
( select ) => siteId && ( select( SITE_STORE ) as SiteSelect ).isSiteAtomic( siteId ),
[ siteId ]
Expand Down Expand Up @@ -179,8 +200,8 @@ const WooConfirm: Step = function WooCommerceConfirm( { navigation } ) {
required: requiresUpgrade,
checkoutUrl: addQueryArgs(
{
redirect_to: addQueryArgs( queryArgs, '/setup/plugin-bundle/wooTransfer' ),
cancel_to: addQueryArgs( queryArgs, '/setup/plugin-bundle/wooConfirm' ),
redirect_to: addQueryArgs( queryArgs, '/setup/plugin-bundle/bundleTransfer' ),
cancel_to: addQueryArgs( queryArgs, '/setup/plugin-bundle/bundleConfirm' ),
},
`/checkout/${ wpcomDomain }/${ upgradingPlan?.product_slug ?? '' }`
),
Expand All @@ -206,7 +227,7 @@ const WooConfirm: Step = function WooCommerceConfirm( { navigation } ) {
}

return (
<div className="woo-confirm__upgrade-required">
<div className="bundle-confirm__upgrade-required">
<PlanWarning title={ __( 'Plan upgrade required' ) }>
{ siteUpgrading.description }
</PlanWarning>
Expand Down Expand Up @@ -242,8 +263,8 @@ const WooConfirm: Step = function WooCommerceConfirm( { navigation } ) {
function getContent() {
return (
<>
<div className="woo-confirm__info-section" />
<div className="woo-confirm__instructions-container">
<div className="bundle-confirm__info-section" />
<div className="bundle-confirm__instructions-container">
{ getWPComSubdomainWarningContent() }
{ getCheckoutContent() }
{ getWarningsOrHoldsSection() }
Expand All @@ -252,11 +273,24 @@ const WooConfirm: Step = function WooCommerceConfirm( { navigation } ) {
<StyledNextButton
disabled={ isTransferringBlocked || ! isDataReady }
onClick={ () => {
recordTracksEvent( 'calypso_woocommerce_dashboard_confirm_submit', {
const eventProperties = {
site: wpcomDomain,
upgrade_required: siteUpgrading.required,
};

recordTracksEvent( 'calypso_bundle_dashboard_confirm_submit', {
...eventProperties,
software_set: pluginSlug,
} );

// For backward compatibility with existing event. When it's not used anymore, it can be removed.
if ( 'woo-on-plans' === pluginSlug ) {
recordTracksEvent(
'calypso_woocommerce_dashboard_confirm_submit',
eventProperties
);
}

const providedDependencies = {
checkoutUrl: siteUpgrading.checkoutUrl,
};
Expand All @@ -276,7 +310,7 @@ const WooConfirm: Step = function WooCommerceConfirm( { navigation } ) {

if ( site === null || ! site.ID || ! isDataReady || isReadyToStart ) {
return (
<div className="woo-confirm__loading-container">
<div className="bundle-confirm__loading-container">
<LoadingEllipsis />
</div>
);
Expand All @@ -289,13 +323,13 @@ const WooConfirm: Step = function WooCommerceConfirm( { navigation } ) {

return (
<StepContainer
stepName="woo-confirm"
stepName="bundle-confirm"
goBack={ goBack }
hideSkip
isHorizontalLayout={ true }
formattedHeader={
<FormattedHeader
id="woo-confirm-title-header"
id="bundle-confirm-title-header"
headerText={ headerText }
subHeaderText={ subHeaderText }
align="left"
Expand All @@ -308,4 +342,4 @@ const WooConfirm: Step = function WooCommerceConfirm( { navigation } ) {
);
};

export default WooConfirm;
export default BundleConfirm;
14 changes: 7 additions & 7 deletions ...s/steps-repository/woo-confirm/style.scss → ...teps-repository/bundle-confirm/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

body.is-section-stepper {
// Two column layout.
.step-container.woo-confirm {
.step-container.bundle-confirm {
@media ( min-width: 660px ) {
display: flex;
}
Expand Down Expand Up @@ -48,7 +48,7 @@ body.is-section-stepper {
margin: 0 24px;
}

.woo-confirm__instructions-container {
.bundle-confirm__instructions-container {
font-size: 0.875rem;
letter-spacing: -0.16px;
color: var(--studio-gray-60);
Expand All @@ -63,7 +63,7 @@ body.is-section-stepper {
margin-top: 16px;
}

.woo-confirm__upgrade-required {
.bundle-confirm__upgrade-required {
margin-top: 1rem;
}

Expand Down Expand Up @@ -113,14 +113,14 @@ body.is-section-stepper {
}
}

.site-setup.woo-confirm {
.woo-confirm__loading-container,
.woo-confirm__info-section {
.site-setup.bundle-confirm {
.bundle-confirm__loading-container,
.bundle-confirm__info-section {
display: flex;
justify-content: center;
}

.woo-confirm__loading-container {
.bundle-confirm__loading-container {
margin-top: 25vh;

@include break-small {
Expand Down
53 changes: 44 additions & 9 deletions ...-repository/woo-install-plugins/index.tsx → ...pository/bundle-install-plugins/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
/* eslint-disable no-console */
import config from '@automattic/calypso-config';
import { useDispatch, useSelect } from '@wordpress/data';
import { useTranslate } from 'i18n-calypso';
import { useEffect } from 'react';
import { useSite } from 'calypso/landing/stepper/hooks/use-site';
import { useSitePluginSlug } from 'calypso/landing/stepper/hooks/use-site-plugin-slug';
import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
import { logToLogstash } from 'calypso/lib/logstash';
import { useBundleSettings } from 'calypso/my-sites/theme/hooks/use-bundle-settings';
import { ONBOARD_STORE, SITE_STORE } from '../../../../stores';
import type { Step } from '../../types';
import type { AtomicSoftwareStatus, OnboardSelect, SiteSelect } from '@automattic/data-stores';
Expand All @@ -17,38 +20,63 @@ export interface FailureInfo {
error: string;
}

const WooInstallPlugins: Step = function WooInstallPlugins( { navigation } ) {
const BundleInstallPlugins: Step = function BundleInstallPlugins( { navigation } ) {
const { submit } = navigation;
const { setPendingAction, setProgressTitle, setProgress } = useDispatch( ONBOARD_STORE );
const { initiateSoftwareInstall, requestAtomicSoftwareStatus } = useDispatch( SITE_STORE );
const { getAtomicSoftwareInstallError, getAtomicSoftwareStatus, getAtomicSoftwareError } =
useSelect( ( select ) => select( SITE_STORE ) as SiteSelect, [] );
const site = useSite();
const softwareSet = 'woo-on-plans';
const softwareSet = useSitePluginSlug();
const bundleSettings = useBundleSettings( softwareSet );
const translate = useTranslate();
const { getIntent } = useSelect( ( select ) => select( ONBOARD_STORE ) as OnboardSelect, [] );

const handleTransferFailure = ( failureInfo: FailureInfo ) => {
recordTracksEvent( 'calypso_woocommerce_dashboard_snag_error', {
const eventProperties = {
action: failureInfo.type,
site: site?.URL,
code: failureInfo.code,
error: failureInfo.error,
intent: getIntent(),
} );
};

logToLogstash( {
feature: 'calypso_client',
const logstashProperties = {
feature: 'calypso_client' as 'calypso_client' | 'calypso_ssr',
message: failureInfo.error,
severity: config( 'env_id' ) === 'production' ? 'error' : 'debug',
blog_id: site?.ID,
properties: {
env: config( 'env_id' ),
type: 'calypso_woocommerce_dashboard_snag_error',
type: 'calypso_bundle_dashboard_snag_error',
action: failureInfo.type,
site: site?.URL,
code: failureInfo.code,
},
};

recordTracksEvent( 'calypso_bundle_dashboard_snag_error', {
...eventProperties,
software_set: softwareSet,
} );

logToLogstash( {
...logstashProperties,
properties: { ...logstashProperties.properties, software_set: softwareSet },
} );

// For backward compatibility with existing event. When it's not used anymore, it can be removed.
if ( 'woo-on-plans' === softwareSet ) {
recordTracksEvent( 'calypso_woocommerce_dashboard_snag_error', eventProperties );

logToLogstash( {
...logstashProperties,
properties: {
...logstashProperties.properties,
type: 'calypso_woocommerce_dashboard_snag_error',
},
} );
}
};

useEffect( () => {
Expand All @@ -57,7 +85,14 @@ const WooInstallPlugins: Step = function WooInstallPlugins( { navigation } ) {
}

setPendingAction( async () => {
setProgressTitle( 'Installing WooCommerce' );
// translators: %(softwareName)s is the software name that is being installed.
const title = translate( 'Installing %(softwareName)s', {
args: {
softwareName: bundleSettings?.softwareName || '',
},
} );

setProgressTitle( title );
setProgress( 0 );
initiateSoftwareInstall( site.ID, softwareSet );

Expand Down Expand Up @@ -111,4 +146,4 @@ const WooInstallPlugins: Step = function WooInstallPlugins( { navigation } ) {
return null;
};

export default WooInstallPlugins;
export default BundleInstallPlugins;
Loading

0 comments on commit 973a2b5

Please sign in to comment.