Skip to content

Commit

Permalink
Marketplace: Rename Marketplace Installation component to work with m…
Browse files Browse the repository at this point in the history 
…ultiple products (Automattic#75626)

* Rename the Marketplace Product Installation folder

* Update variable names to better match the generic or specific cases (plugin/theme)

* Rename productSlug to pluginSlug
  • Loading branch information
@WBerredo
WBerredo authored Apr 18, 2023
1 parent b72aada commit 6755acc
Show file tree
Hide file tree
Showing 6 changed files with 40 additions and 40 deletions.
2 changes: 1 addition & 1 deletion client/my-sites/checkout/checkout-thank-you/marketplace/use-thank-you-steps.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useTranslate } from 'i18n-calypso';
import { useMemo } from 'react';
import { useSelector } from 'react-redux';
import { ThankYouSteps } from 'calypso/components/thank-you/types';
import useMarketplaceAdditionalSteps from 'calypso/my-sites/marketplace/pages/marketplace-plugin-install/use-marketplace-additional-steps';
import useMarketplaceAdditionalSteps from 'calypso/my-sites/marketplace/pages/marketplace-product-install/use-marketplace-additional-steps';
import { isJetpackSite } from 'calypso/state/sites/selectors';
import { getSelectedSiteId } from 'calypso/state/ui/selectors';
import { hasMultipleProductTypes } from './utils';
Expand Down
6 changes: 3 additions & 3 deletions client/my-sites/marketplace/controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import page from 'page';
import { getSiteFragment } from 'calypso/lib/route';
import MarketplaceThankYou from 'calypso/my-sites/checkout/checkout-thank-you/marketplace/marketplace-thank-you';
import MarketplaceDomainUpsell from 'calypso/my-sites/marketplace/pages/marketplace-domain-upsell';
import MarketplacePluginInstall from 'calypso/my-sites/marketplace/pages/marketplace-plugin-install';
import MarketplaceProductInstall from 'calypso/my-sites/marketplace/pages/marketplace-product-install';
import MarketplaceTest from 'calypso/my-sites/marketplace/pages/marketplace-test';
import SignupSuccess from 'calypso/my-sites/marketplace/pages/submission-success/signup-success';

Expand All @@ -13,13 +13,13 @@ export function renderDomainsPage( context, next ) {

export function renderPluginsInstallPage( context, next ) {
const { productSlug } = context.params;
context.primary = <MarketplacePluginInstall productSlug={ productSlug } />;
context.primary = <MarketplaceProductInstall pluginSlug={ productSlug } />;
next();
}

export function renderThemesInstallPage( context, next ) {
const { themeSlug } = context.params;
context.primary = <MarketplacePluginInstall themeSlug={ themeSlug } />;
context.primary = <MarketplaceProductInstall themeSlug={ themeSlug } />;
next();
}

Expand Down
70 changes: 35 additions & 35 deletions ...ages/marketplace-plugin-install/index.tsx → ...ges/marketplace-product-install/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
import { useInterval } from 'calypso/lib/interval';
import { getProductSlugByPeriodVariation } from 'calypso/lib/plugins/utils';
import MarketplaceProgressBar from 'calypso/my-sites/marketplace/components/progressbar';
import useMarketplaceAdditionalSteps from 'calypso/my-sites/marketplace/pages/marketplace-plugin-install/use-marketplace-additional-steps';
import useMarketplaceAdditionalSteps from 'calypso/my-sites/marketplace/pages/marketplace-product-install/use-marketplace-additional-steps';
import theme from 'calypso/my-sites/marketplace/theme';
import { waitFor } from 'calypso/my-sites/marketplace/util';
import { initiateAtomicTransfer } from 'calypso/state/atomic/transfers/actions';
Expand Down Expand Up @@ -61,11 +61,11 @@ interface InstalledPlugin {
id?: number;
}

const MarketplacePluginInstall = ( {
productSlug = '',
const MarketplaceProductInstall = ( {
pluginSlug = '',
themeSlug = '',
}: MarketplacePluginInstallProps ) => {
const isUploadFlow = ! productSlug && ! themeSlug;
const isPluginUploadFlow = ! pluginSlug && ! themeSlug;
const [ currentStep, setCurrentStep ] = useState( 0 );
const [ initializeInstallFlow, setInitializeInstallFlow ] = useState( false );
const [ atomicFlow, setAtomicFlow ] = useState( false );
Expand All @@ -82,45 +82,45 @@ const MarketplacePluginInstall = ( {
const pluginExists = pluginUploadError?.error === 'folder_exists';
const pluginMalicious = pluginUploadError?.error === 'plugin_malicious';
const pluginTooBig = pluginUploadError?.statusCode === 413;
const wporgPlugin = useSelector( ( state ) => getPlugin( state, productSlug ) );
const isWporgPluginFetched = useSelector( ( state ) => isFetched( state, productSlug ) );
const wporgPlugin = useSelector( ( state ) => getPlugin( state, pluginSlug ) );
const isWporgPluginFetched = useSelector( ( state ) => isFetched( state, pluginSlug ) );
const uploadedPluginSlug = useSelector( ( state ) =>
getUploadedPluginId( state, siteId )
) as string;
const pluginUploadComplete = useSelector( ( state ) => isPluginUploadComplete( state, siteId ) );
const installedPlugin = useSelector( ( state: DefaultRootState ): InstalledPlugin | undefined =>
getPluginOnSite( state, siteId, isUploadFlow ? uploadedPluginSlug : productSlug )
getPluginOnSite( state, siteId, isPluginUploadFlow ? uploadedPluginSlug : pluginSlug )
);
const pluginActive = useSelector( ( state ) =>
isPluginActive( state, siteId, isUploadFlow ? uploadedPluginSlug : productSlug )
isPluginActive( state, siteId, isPluginUploadFlow ? uploadedPluginSlug : pluginSlug )
);
const automatedTransferStatus = useSelector( ( state ) =>
getAutomatedTransferStatus( state, siteId )
);

const pluginInstallStatus = useSelector( ( state ) =>
getStatusForPlugin( state, siteId, productSlug )
getStatusForPlugin( state, siteId, pluginSlug )
);

const productsList = useSelector( ( state ) => getProductsList( state ) );
const isProductListFetched = Object.values( productsList ).length > 0;
const isMarketplaceProduct = useSelector( ( state ) =>
isMarketplaceProductSelector( state, productSlug )
isMarketplaceProductSelector( state, pluginSlug )
);

const wpOrgTheme = useSelector( ( state ) => getTheme( state, 'wporg', themeSlug ) );
const isThemeActive = useSelector( ( state ) => getThemeActive( state, themeSlug, siteId ) );
useQueryTheme( 'wporg', themeSlug );

const { data: wpComPluginData } = useWPCOMPlugin( productSlug, {
const { data: wpComPluginData } = useWPCOMPlugin( pluginSlug, {
enabled: isProductListFetched && isMarketplaceProduct,
} );

const marketplaceInstallationInProgress = useSelector( ( state ) => {
const { pluginInstallationStatus, productSlugInstalled, primaryDomain } = getPurchaseFlowState(
state as IAppState
);
if ( isUploadFlow ) {
if ( isPluginUploadFlow ) {
return (
pluginInstallationStatus !== MARKETPLACE_ASYNC_PROCESS_STATUS.COMPLETED &&
primaryDomain === selectedSiteSlug
Expand All @@ -129,7 +129,7 @@ const MarketplacePluginInstall = ( {
return (
pluginInstallationStatus !== MARKETPLACE_ASYNC_PROCESS_STATUS.COMPLETED &&
productSlugInstalled &&
[ productSlug, themeSlug ].includes( productSlugInstalled ) &&
[ pluginSlug, themeSlug ].includes( productSlugInstalled ) &&
primaryDomain === selectedSiteSlug
);
} );
Expand All @@ -151,9 +151,9 @@ const MarketplacePluginInstall = ( {
// retrieve plugin data if not available
useEffect( () => {
if ( ! isWporgPluginFetched ) {
dispatch( wporgFetchPluginData( productSlug ) );
dispatch( wporgFetchPluginData( pluginSlug ) );
}
}, [ isWporgPluginFetched, productSlug, dispatch ] );
}, [ isWporgPluginFetched, pluginSlug, dispatch ] );

// Check if the user plan is enough for installation or it is a self-hosted jetpack site
// if not, check again in 2s and show an error message
Expand Down Expand Up @@ -190,7 +190,7 @@ const MarketplacePluginInstall = ( {
useEffect( () => {
if (
( marketplaceInstallationInProgress || directInstallationAllowed ) &&
! isUploadFlow &&
! isPluginUploadFlow &&
! initializeInstallFlow &&
( wporgPlugin || wpOrgTheme ) &&
selectedSite
Expand All @@ -216,7 +216,7 @@ const MarketplacePluginInstall = ( {
dispatch( initiateAtomicTransfer( siteId, { themeSlug } ) );
} else {
setAtomicFlow( true );
dispatch( initiateTransfer( siteId, null, productSlug ) );
dispatch( initiateTransfer( siteId, null, pluginSlug ) );
}

triggerInstallFlow();
Expand All @@ -225,13 +225,13 @@ const MarketplacePluginInstall = ( {
}, [
marketplaceInstallationInProgress,
directInstallationAllowed,
isUploadFlow,
isPluginUploadFlow,
initializeInstallFlow,
selectedSite,
siteId,
wporgPlugin,
wpOrgTheme,
productSlug,
pluginSlug,
themeSlug,
dispatch,
hasAtomicFeature,
Expand All @@ -249,7 +249,7 @@ const MarketplacePluginInstall = ( {
if (
installedPlugin &&
currentStep === 1 &&
( ! isUploadFlow || ( isUploadFlow && pluginUploadComplete ) )
( ! isPluginUploadFlow || ( isPluginUploadFlow && pluginUploadComplete ) )
) {
dispatch(
activatePlugin( siteId, {
Expand All @@ -271,20 +271,20 @@ const MarketplacePluginInstall = ( {
( atomicFlow && transferStates.COMPLETE === automatedTransferStatus ) ||
// Transfer to atomic uploading a zip plugin
( uploadedPluginSlug &&
isUploadFlow &&
isPluginUploadFlow &&
! isAtomic &&
transferStates.COMPLETE === automatedTransferStatus )
) {
waitFor( 1 ).then( () =>
page.redirect(
`/marketplace/thank-you/${ selectedSiteSlug }?hide-progress-bar&plugins=${
installedPlugin?.slug || productSlug || uploadedPluginSlug
installedPlugin?.slug || pluginSlug || uploadedPluginSlug
}`
)
);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [ pluginActive, automatedTransferStatus, atomicFlow, isUploadFlow, isAtomic ] ); // We need to trigger this hook also when `automatedTransferStatus` changes cause the plugin install is done on the background in that case.
}, [ pluginActive, automatedTransferStatus, atomicFlow, isPluginUploadFlow, isAtomic ] ); // We need to trigger this hook also when `automatedTransferStatus` changes cause the plugin install is done on the background in that case.

// Validate theme is already active
useEffect( () => {
Expand All @@ -311,13 +311,13 @@ const MarketplacePluginInstall = ( {
}

return [
isUploadFlow
isPluginUploadFlow
? translate( 'Uploading plugin' )
: translate( 'Setting up plugin installation' ),
translate( 'Installing plugin' ),
translate( 'Activating plugin' ),
];
}, [ themeSlug, isUploadFlow, translate ] );
}, [ themeSlug, isPluginUploadFlow, translate ] );
const additionalSteps = useMarketplaceAdditionalSteps();

const installPluginQuestionText = translate( 'Do you want to install the plugin %(plugin)s?', {
Expand All @@ -337,11 +337,11 @@ const MarketplacePluginInstall = ( {

const productName = themeSlug
? wpOrgTheme?.name || themeSlug
: wporgPlugin?.name || wpComPluginData?.name || productSlug;
: wporgPlugin?.name || wpComPluginData?.name || pluginSlug;

const productPage = themeSlug
? `/themes/${ themeSlug }/${ selectedSite?.slug }`
: `/plugins/${ productSlug }/${ selectedSite?.slug }`;
: `/plugins/${ pluginSlug }/${ selectedSite?.slug }`;
const goToPluginPageText = translate( 'Go to the plugin page' );
const goToThemePageText = translate( 'Go to the theme page' );
const goToText = themeSlug ? goToThemePageText : goToPluginPageText;
Expand All @@ -361,11 +361,11 @@ const MarketplacePluginInstall = ( {
"Your current plan doesn't allow plugin installation. Please upgrade to Business plan first."
) }
action={ translate( 'Upgrade to Business Plan' ) }
actionURL={ `/checkout/${ selectedSite?.slug }/business?redirect_to=/marketplace/plugin/${ productSlug }/install/${ selectedSite?.slug }#step2` }
actionURL={ `/checkout/${ selectedSite?.slug }/business?redirect_to=/marketplace/plugin/${ pluginSlug }/install/${ selectedSite?.slug }#step2` }
/>
);
}
if ( isUploadFlow && noDirectAccessError && ! directInstallationAllowed ) {
if ( isPluginUploadFlow && noDirectAccessError && ! directInstallationAllowed ) {
return (
<EmptyContent
illustration="/calypso/images/illustrations/error.svg"
Expand Down Expand Up @@ -471,9 +471,9 @@ const MarketplacePluginInstall = ( {
line={ translate( 'An error occurred while installing the plugin.' ) }
action={ translate( 'Back' ) }
actionURL={
isUploadFlow
isPluginUploadFlow
? `/plugins/upload/${ selectedSiteSlug }`
: `/plugins/${ productSlug }/${ selectedSiteSlug }`
: `/plugins/${ pluginSlug }/${ selectedSiteSlug }`
}
/>
);
Expand All @@ -483,14 +483,14 @@ const MarketplacePluginInstall = ( {
return (
<ThemeProvider theme={ theme }>
<PageViewTracker
path="/marketplace/:productSlug?/install/:site?"
title="Plugins > Installing"
path="/marketplace/(plugin/theme)/:productSlug?/install/:site?"
title="Marketplace Product > Installing"
/>
<QueryActiveTheme siteId={ siteId } />
{ siteId && <QueryJetpackPlugins siteIds={ [ siteId ] } /> }
<Masterbar className="marketplace-plugin-install__masterbar">
<WordPressWordmark className="marketplace-plugin-install__wpcom-wordmark" />
<Item>{ translate( 'Plugin installation' ) }</Item>
<Item>{ translate( 'Marketplace installation' ) }</Item>
</Masterbar>
<div className="marketplace-plugin-install__root">
{ renderError() || (
Expand All @@ -505,4 +505,4 @@ const MarketplacePluginInstall = ( {
);
};

export default MarketplacePluginInstall;
export default MarketplaceProductInstall;
0 ...ges/marketplace-plugin-install/style.scss → ...es/marketplace-product-install/style.scss
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion ...pages/marketplace-plugin-install/types.ts → ...ages/marketplace-product-install/types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export type MarketplacePluginInstallProps = {
productSlug?: string;
pluginSlug?: string;
themeSlug?: string;
};
0 ...tall/use-marketplace-additional-steps.tsx → ...tall/use-marketplace-additional-steps.tsx
View file
File renamed without changes.

0 comments on commit 6755acc

Please sign in to comment.