Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Stats: Remove legacy purchase page forced redirection #95436

Open
wants to merge 2 commits into
base: trunk
Choose a base branch
from
+9 −119
Open

Stats: Remove legacy purchase page forced redirection #95436

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
388b625
Remove legacy paywall redirection
dognose24 Oct 16, 2024
b88958c
Remove notice id focus_jetpack_purchase for force redirection
dognose24 Oct 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion client/my-sites/stats/hooks/use-notice-visibility-query.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ const DEFAULT_SERVER_NOTICES_VISIBILITY = {
traffic_page_settings: false,
do_you_love_jetpack_stats: false,
commercial_site_upgrade: false,
focus_jetpack_purchase: false,
// TODO: Check if the site needs to be upgraded to a higher tier on the back end.
tier_upgrade: true,
gdpr_cookie_consent: false,
Expand Down
37 changes: 7 additions & 30 deletions client/my-sites/stats/stats-purchase/stats-purchase-personal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import { useTranslate } from 'i18n-calypso';
import React, { useState } from 'react';
import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
import { useJetpackConnectionStatus } from 'calypso/my-sites/stats/hooks/use-jetpack-connection-status';
import useNoticeVisibilityMutation from 'calypso/my-sites/stats/hooks/use-notice-visibility-mutation';
import { useNoticeVisibilityQuery } from 'calypso/my-sites/stats/hooks/use-notice-visibility-query';
import useStatsPurchases from 'calypso/my-sites/stats/hooks/use-stats-purchases';
import { useSelector } from 'calypso/state';
import getIsSiteWPCOM from 'calypso/state/selectors/is-site-wpcom';
Expand Down Expand Up @@ -49,7 +47,6 @@ const PersonalPurchase = ( {
const [ isSellingChecked, setSellingChecked ] = useState( false );
const [ isBusinessChecked, setBusinessChecked ] = useState( false );
const [ isDonationChecked, setDonationChecked ] = useState( false );
const [ isPostponeBusy, setPostponeBusy ] = useState( false );
const isOdysseyStats = config.isEnabled( 'is_running_in_jetpack_site' );
const { hasAnyStatsPlan } = useStatsPurchases( siteId );
const isWPCOMSite = useSelector( ( state ) => siteId && getIsSiteWPCOM( state, siteId ) );
Expand All @@ -59,13 +56,6 @@ const PersonalPurchase = ( {
const ButtonComponent = isWPCOMSite ? CalypsoButton : Button;

const continueButtonText = translate( 'Contribute now and continue' );
const { refetch: refetchNotices } = useNoticeVisibilityQuery( siteId, 'focus_jetpack_purchase' );
const { mutateAsync: mutateNoticeVisbilityAsync } = useNoticeVisibilityMutation(
siteId,
'focus_jetpack_purchase',
'postponed',
4 * 7 * 24 * 3600 // four weeks
);

const handleClick = ( e: React.MouseEvent< HTMLAnchorElement, MouseEvent > ) =>
handlePlanSwap( e );
Expand All @@ -92,21 +82,13 @@ const PersonalPurchase = ( {
};

const handleCheckoutPostponed = () => {
setPostponeBusy( true );

mutateNoticeVisbilityAsync()
.then( refetchNotices )
.finally( () => {
// publish event
const event_from = isOdysseyStats ? 'jetpack_odyssey' : 'calypso';
recordTracksEvent( `${ event_from }_stats_purchase_flow_skip_button_clicked` );
const event_from = isOdysseyStats ? 'jetpack_odyssey' : 'calypso';
recordTracksEvent( `${ event_from }_stats_purchase_flow_skip_button_clicked` );

// redirect to the Traffic page
setTimeout( () => {
setPostponeBusy( false );
page( `/stats/day/${ siteSlug }` );
}, 250 );
} );
// redirect to the Traffic page
setTimeout( () => {
page( `/stats/day/${ siteSlug }` );
}, 250 );
};

return (
Expand Down Expand Up @@ -222,12 +204,7 @@ const PersonalPurchase = ( {
{ continueButtonText }
</ButtonComponent>

<ButtonComponent
variant="secondary"
isBusy={ isWPCOMSite ? undefined : isPostponeBusy } // for <Button />
busy={ isWPCOMSite ? isPostponeBusy : undefined } // for <CalypsoButton />
onClick={ handleCheckoutPostponed }
>
<ButtonComponent variant="secondary" onClick={ handleCheckoutPostponed }>
{ translate( 'I will do it later' ) }
</ButtonComponent>
</div>
Expand Down
90 changes: 2 additions & 88 deletions client/my-sites/stats/stats-redirect/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,14 @@
import config from '@automattic/calypso-config';
import page from '@automattic/calypso-router';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It feels the whole stats-redirect module could be removed, couldn't it?

import { ReactNode, useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
import { useNoticeVisibilityQuery } from 'calypso/my-sites/stats/hooks/use-notice-visibility-query';
import { ReactNode } from 'react';
import { useSelector } from 'calypso/state';
import { canCurrentUser } from 'calypso/state/selectors/can-current-user';
import { isJetpackSite, getSiteSlug } from 'calypso/state/sites/selectors';
import {
receiveStatNoticeSettings,
requestStatNoticeSettings,
} from 'calypso/state/stats/notices/actions';
import { getSelectedSiteId } from 'calypso/state/ui/selectors';
import useSiteCompulsoryPlanSelectionQualifiedCheck from '../hooks/use-site-compulsory-plan-selection-qualified-check';
import useStatsPurchases from '../hooks/use-stats-purchases';
import StatsLoader from './stats-loader';

interface StatsRedirectFlowProps {
children: ReactNode;
}

const StatsRedirectFlow: React.FC< StatsRedirectFlowProps > = ( { children } ) => {
const siteId = useSelector( getSelectedSiteId );
const siteSlug = useSelector( ( state ) => getSiteSlug( state, siteId ) );
const isOdysseyStats = config.isEnabled( 'is_running_in_jetpack_site' );

const { hasLoadedSitePurchases, hasAnyPlan } = useStatsPurchases( siteId );

const isSiteJetpackNotAtomic = useSelector( ( state ) =>
isJetpackSite( state, siteId, { treatAtomicAsJetpackSite: false } )
);

// TODO: Consolidate permissions checks.
// This same code is in LoadStatsPage (which calls this component) so
Expand All @@ -41,75 +20,10 @@ const StatsRedirectFlow: React.FC< StatsRedirectFlowProps > = ( { children } ) =
canCurrentUser( state, siteId, 'view_stats' )
);

const { isLoading: isLoadingNotices, data: purchaseNotPostponed } = useNoticeVisibilityQuery(
siteId,
'focus_jetpack_purchase',
canUserManageOptions
);

const isLoading = ! hasLoadedSitePurchases || isLoadingNotices;
const { isNewSite, shouldShowPaywall } = useSiteCompulsoryPlanSelectionQualifiedCheck( siteId );
// to redirect the user can't have a plan purached and can't have the flag true, if either is true the user either has a plan or is postponing
const redirectToPurchase =
isSiteJetpackNotAtomic && ! hasAnyPlan && purchaseNotPostponed && shouldShowPaywall;

// TODO: If notices are not used by class components, we don't have any reasons to launch any of those actions anymore. If we do need them, we should consider refactoring them to another component.
const dispatch = useDispatch();
useEffect( () => {
if ( isLoadingNotices ) {
// when react-query is fetching data
dispatch( requestStatNoticeSettings( siteId ) );
} else {
dispatch(
receiveStatNoticeSettings( siteId, {
focus_jetpack_purchase: purchaseNotPostponed,
} )
);
}
}, [ dispatch, siteId, isLoadingNotices, purchaseNotPostponed ] );

// Render conditions (for readability).
// TODO: Determine the paywall redirection for specific routes.
const shouldRenderPaywall =
false && ! isLoading && redirectToPurchase && siteSlug && canUserManageOptions;
const shouldRenderContent = ! isLoading && ( canUserViewStats || canUserManageOptions );

// Handle possible render conditions.
// Based on render conditions, loading state takes priority.
if ( isLoading ) {
return <StatsLoader />;
}

// Paywall is dependant on site age, type, & plan as well as user permissions.
if ( shouldRenderPaywall ) {
// We need to ensure we pass the irclick id for impact affiliate tracking if its set.
const currentParams = new URLSearchParams( window.location.search );
const queryParams = new URLSearchParams();

queryParams.set( 'productType', 'commercial' );
// `cmp-red` means `compulsory redirection` here.
queryParams.set( 'from', `cmp-red${ isNewSite ? '-new-site' : '' }` );
if ( currentParams.has( 'irclickid' ) ) {
queryParams.set( 'irclickid', currentParams.get( 'irclickid' ) || '' );
}

// publish an event
const event_from = isOdysseyStats ? 'jetpack_odyssey' : 'calypso';
recordTracksEvent( `${ event_from }_stats_purchase_flow_redirected` );

// redirect to the Purchase page
setTimeout(
() => page.redirect( `/stats/purchase/${ siteSlug }?${ queryParams.toString() }` ),
250
);

return null;
}

// Default is to show the user some stats.
// There are permissions considerations though, in which case we fall
// through and show nothing. Feels broken.
if ( shouldRenderContent ) {
if ( canUserViewStats || canUserManageOptions ) {
return <>{ children }</>;
}

Expand Down
Loading