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

Congrats: Update design for ecommerce plan #79525

Closed
wants to merge 4 commits into from
+157 −48
Closed

Congrats: Update design for ecommerce plan #79525

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9baaccf
Congrats: Update design for ecommerce plan
candy02058912 Jul 18, 2023
a810eb8
Fix/add tests
candy02058912 Jul 19, 2023
187d8ba
Add tracks and admin url for ecommerce
candy02058912 Jul 19, 2023
cd60be5
Update import
candy02058912 Jul 20, 2023
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
79 changes: 34 additions & 45 deletions client/my-sites/checkout/checkout-thank-you/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,22 +24,19 @@ import {
isTitanMail,
shouldFetchSitePlans,
} from '@automattic/calypso-products';
import { Card, ConfettiAnimation } from '@automattic/components';
import classNames from 'classnames';
import { localize } from 'i18n-calypso';
import page from 'page';
import { Component } from 'react';
import { connect } from 'react-redux';
import PlanThankYouCard from 'calypso/blocks/plan-thank-you-card';
import QuerySitePurchases from 'calypso/components/data/query-site-purchases';
import HappinessSupport from 'calypso/components/happiness-support';
import Main from 'calypso/components/main';
import Notice from 'calypso/components/notice';
import PurchaseDetail from 'calypso/components/purchase-detail';
import WordPressLogo from 'calypso/components/wordpress-logo';
import WpAdminAutoLogin from 'calypso/components/wpadmin-auto-login';
import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
import { isWcMobileApp } from 'calypso/lib/mobile-app';
import { getFeatureByKey } from 'calypso/lib/plans/features-list';
import { isExternal } from 'calypso/lib/url';
import DIFMLiteThankYou from 'calypso/my-sites/checkout/checkout-thank-you/difm/difm-lite-thank-you';
Expand Down Expand Up @@ -93,9 +90,9 @@ import PersonalPlanDetails from './personal-plan-details';
import PremiumPlanDetails from './premium-plan-details';
import ProPlanDetails from './pro-plan-details';
import isRedesignV2 from './redesign-v2/is-redesign-v2';
import MasterbarStyled from './redesign-v2/masterbar-styled';
import Footer from './redesign-v2/sections/Footer';
import SiteRedirectDetails from './site-redirect-details';
import StandardCheckoutThankYou from './standard-checkout-thank-you';
import StarterPlanDetails from './starter-plan-details';
import TransferPending from './transfer-pending';
import './style.scss';
Expand Down Expand Up @@ -542,17 +539,31 @@ export class CheckoutThankYou extends Component<
);
}

// Keep the AtomicStoreThankYouCard for the Woo Mobile App
if ( isWcMobileApp() ) {
Copy link
Contributor

@lsl lsl Jul 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

This doesn't look safe to me, AtomicStoreThankYouCard is doing email verification and sets the CTA url to siteWooCommerceWizardUrl, can we wrap StandardCheckoutThankYou inside AtomicStoreThankYouCard and keep the same behavior?

We're also losing the "Create your store!" CTA text. "Lets work on the site" doesn't sound right for the ecommerce plan.

Copy link
Contributor Author

@candy02058912 candy02058912 Jul 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

This PR also sets the CTA to the same URL as siteWooCommerceWizardUrl.

As for email verification, I tested, and with the current flow, the user will get redirected to another email verification page when clicking on the CTA siteWooCommerceWizardUrl

jetpack

Once they verify their email and click on connect jetpack, they will go to the store setup page
setup page

Summarizing the flow for unverified emails:

How this PR currently changes the flow:

  1. Thank You page
  2. Click on CTA
  3. Verify Email
  4. Connect Jetpack (this might be the confusing step)
  5. Start setting up the store

The current production flow:

  1. Thank You card
  2. Verify Email
  3. Click on CTA
  4. Start setting up the store

ecommerce

Any ideas on how we could incorporate the old flow into the new design
cc: @JanaMW27

Copy link
Contributor

Choose a reason for hiding this comment

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

How this PR currently changes the flow:

Thank You page
Click on CTA
Verify Email
Connect Jetpack (this might be the confusing step)
Start setting up the store

The current production flow:

Thank You card
Verify Email
Click on CTA
Start setting up the store

How did we add the Jetpack connection step?

Any ideas on how we could incorporate the old flow into the new design

I'd need to dig in to really judge this but I think the new design needs to support the old design's functionality other wise the only option is to revert to the "new" thank you component approach and let them control the flow and we just control the basic design outline.

I guess you could change something higher up to but I don't know how that would work.

What are you thinking?

Copy link
Contributor

Choose a reason for hiding this comment

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

Oh, also this option looked ok if I'm remembering it correctly:

can we wrap StandardCheckoutThankYou inside AtomicStoreThankYouCard and keep the same behavior?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

How did we add the Jetpack connection step?

I didn't add anything in particular. It was... just there 😅 when I tested the flow with the PR.
Maybe it would be helpful if we have more people to test the flow within this PR to confirm.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

What are you thinking?

I was only taking account of how things "look" right now. For example, I'm not sure where would be the sweet spot to add the resend email button or add the copy. Asked for more input here: p9Jlb4-7Hx-p2#comment-8670

I agree that code-wise it's not going to be too far from:

wrap StandardCheckoutThankYou inside AtomicStoreThankYouCard and keep the same behavior?

Even if we create a new component, it's going to copy that behavior.

return (
<Main className="checkout-thank-you">
{ this.props.transferComplete && this.props.isEmailVerified && (
<WpAdminAutoLogin
site={ { URL: `https://${ this.props.site?.wpcom_url }` } }
delay={ 0 }
/>
) }
<PageViewTracker { ...this.getAnalyticsProperties() } title="Checkout Thank You" />
<AtomicStoreThankYouCard siteId={ this.props.selectedSite?.ID ?? 0 } />
</Main>
);
}

return (
<Main className="checkout-thank-you">
{ this.props.transferComplete && this.props.isEmailVerified && (
<WpAdminAutoLogin
site={ { URL: `https://${ this.props.site?.wpcom_url }` } }
delay={ 0 }
/>
) }
<PageViewTracker { ...this.getAnalyticsProperties() } title="Checkout Thank You" />
<AtomicStoreThankYouCard siteId={ this.props.selectedSite?.ID ?? 0 } />
</Main>
<StandardCheckoutThankYou
productRelatedMessages={ this.productRelatedMessages }
isDataLoaded={ this.isDataLoaded }
getAnalyticsProperties={ this.getAnalyticsProperties }
showHappinessSupport={ showHappinessSupport }
wasJetpackPlanPurchased={ wasJetpackPlanPurchased }
{ ...this.props }
/>
);
} else if ( delayedTransferPurchase ) {
const planProps = {
Expand Down Expand Up @@ -624,36 +635,14 @@ export class CheckoutThankYou extends Component<

// standard thanks page
return (
<Main
className={ classNames( 'checkout-thank-you', {
'is-redesign-v2': isRedesignV2( this.props ),
} ) }
>
<PageViewTracker { ...this.getAnalyticsProperties() } title="Checkout Thank You" />
{ this.isDataLoaded() && isRedesignV2( this.props ) && (
<ConfettiAnimation delay={ 1000 } />
) }
{ isRedesignV2( this.props ) && this.props.selectedSite?.ID && (
<>
<QuerySitePurchases siteId={ this.props.selectedSite.ID } />
<MasterbarStyled
onClick={ () => page( `/home/${ this.props.selectedSiteSlug ?? '' }` ) }
backText={ translate( 'Back to dashboard' ) }
canGoBack={ true }
showContact={ true }
/>
</>
) }
<Card className="checkout-thank-you__content">{ this.productRelatedMessages() }</Card>
{ showHappinessSupport && (
<Card className="checkout-thank-you__footer">
<HappinessSupport
isJetpack={ wasJetpackPlanPurchased }
contactButtonEventName="calypso_plans_autoconfig_chat_initiated"
/>
</Card>
) }
</Main>
<StandardCheckoutThankYou
productRelatedMessages={ this.productRelatedMessages }
isDataLoaded={ this.isDataLoaded }
getAnalyticsProperties={ this.getAnalyticsProperties }
showHappinessSupport={ showHappinessSupport }
wasJetpackPlanPurchased={ wasJetpackPlanPurchased }
{ ...this.props }
/>
);
}

Expand Down
22 changes: 20 additions & 2 deletions client/my-sites/checkout/checkout-thank-you/redesign-v2/sections/product/ProductPlan.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { isEcommercePlan } from '@automattic/calypso-products';
import { Button, Spinner } from '@automattic/components';
import { translate } from 'i18n-calypso';
import moment from 'moment';
import { useEffect, useMemo, useState } from 'react';
import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
import { getPurchaseByProductSlug } from 'calypso/lib/purchases/utils';
import { useSelector } from 'calypso/state';
import {
Expand All @@ -10,6 +12,7 @@ import {
isFetchingSitePurchases,
} from 'calypso/state/purchases/selectors';
import { ReceiptPurchase } from 'calypso/state/receipts/types';
import { getSiteWooCommerceUrl } from 'calypso/state/sites/selectors';

type ProductPlanProps = {
siteSlug: string;
Expand All @@ -27,6 +30,12 @@ const ProductPlan = ( { siteSlug, primaryPurchase, siteID }: ProductPlanProps )
() => getPurchaseByProductSlug( purchases, primaryPurchase.productSlug ),
[ primaryPurchase.productSlug, purchases ]
);
// TODO: Move data logic out of the component.
const siteHomeUrl = useSelector( ( state ) =>
isEcommercePlan( primaryPurchase.productSlug )
? getSiteWooCommerceUrl( state, siteID ) ?? `/home/${ siteSlug }`
: `/home/${ siteSlug }`
);

useEffect( () => {
if ( ! isLoadingPurchases && productPurchase ) {
Expand Down Expand Up @@ -59,10 +68,19 @@ const ProductPlan = ( { siteSlug, primaryPurchase, siteID }: ProductPlanProps )
) }
</div>
<div className="checkout-thank-you__header-details-buttons">
<Button primary href={ `/home/${ siteSlug }` }>
<Button
primary
href={ siteHomeUrl }
onClick={ () => recordTracksEvent( 'calypso_plan_thank_you_home_cta_click' ) }
>
{ translate( 'Let’s work on the site' ) }
</Button>
<Button href={ `/plans/my-plan/${ siteSlug }` }>{ translate( 'Manage plan' ) }</Button>
<Button
href={ `/plans/my-plan/${ siteSlug }` }
onClick={ () => recordTracksEvent( 'calypso_plan_thank_you_plan_click' ) }
>
{ translate( 'Manage plan' ) }
</Button>
</div>
</div>
);
Expand Down
70 changes: 70 additions & 0 deletions client/my-sites/checkout/checkout-thank-you/standard-checkout-thank-you.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import classNames from 'classnames';
import { translate } from 'i18n-calypso';
import { Card, ConfettiAnimation } from 'calypso/../packages/components/src';
sirbrillig marked this conversation as resolved.
Show resolved Hide resolved
import QuerySitePurchases from 'calypso/components/data/query-site-purchases';
import HappinessSupport from 'calypso/components/happiness-support';
import Main from 'calypso/components/main';
import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
import isRedesignV2 from './redesign-v2/is-redesign-v2';
import MasterbarStyled from './redesign-v2/masterbar-styled';
import { CheckoutThankYouCombinedProps } from '.';

type AnalyticsProperties = {
delay?: number;
path: string;
recorder?: () => void;
hasSelectedSiteLoaded?: boolean;
selectedSiteId?: number;
properties?: Record< string, unknown >;
options?: Record< string, unknown >;
};

type StandardCheckoutThankYouProps = {
productRelatedMessages: () => JSX.Element;
isDataLoaded: () => boolean;
getAnalyticsProperties: () => AnalyticsProperties;
showHappinessSupport: boolean;
wasJetpackPlanPurchased: boolean;
} & CheckoutThankYouCombinedProps;

const StandardCheckoutThankYou = ( {
productRelatedMessages,
isDataLoaded,
getAnalyticsProperties,
showHappinessSupport,
wasJetpackPlanPurchased,
...props
}: StandardCheckoutThankYouProps ) => {
return (
<Main
className={ classNames( 'checkout-thank-you', {
'is-redesign-v2': isRedesignV2( props ),
} ) }
>
<PageViewTracker { ...getAnalyticsProperties() } title="Checkout Thank You" />
{ isDataLoaded() && isRedesignV2( props ) && <ConfettiAnimation delay={ 1000 } /> }
{ isRedesignV2( props ) && props.selectedSite?.ID && (
<>
<QuerySitePurchases siteId={ props.selectedSite.ID } />
<MasterbarStyled
onClick={ () => page( `/home/${ props.selectedSiteSlug ?? '' }` ) }
backText={ translate( 'Back to dashboard' ) }
canGoBack={ true }
showContact={ true }
/>
</>
) }
<Card className="checkout-thank-you__content">{ productRelatedMessages() }</Card>
{ showHappinessSupport && (
<Card className="checkout-thank-you__footer">
<HappinessSupport
isJetpack={ wasJetpackPlanPurchased }
contactButtonEventName="calypso_plans_autoconfig_chat_initiated"
/>
</Card>
) }
</Main>
);
};

export default StandardCheckoutThankYou;
34 changes: 33 additions & 1 deletion client/my-sites/checkout/checkout-thank-you/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
import { render, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import * as mobileApp from 'calypso/lib/mobile-app';
import CheckoutThankYouHeader from '../header';
import { CheckoutThankYou } from '../index';

Expand Down Expand Up @@ -199,7 +200,8 @@ describe( 'CheckoutThankYou', () => {
isDotComPlan.mockImplementation( () => false );
} );

test( 'Should be there for AT', () => {
test( 'Should be there for AT (Woo mobile)', () => {
const isWcMobileAppSpy = jest.spyOn( mobileApp, 'isWcMobileApp' ).mockReturnValue( true );
render(
<Provider store={ store }>
<CheckoutThankYou
Expand All @@ -210,6 +212,7 @@ describe( 'CheckoutThankYou', () => {
</Provider>
);
expect( screen.queryByTestId( 'atomic-store-thank-you-card' ) ).toBeVisible();
isWcMobileAppSpy.mockRestore();
} );

test( 'Should not be there for AT', () => {
Expand Down Expand Up @@ -370,4 +373,33 @@ describe( 'CheckoutThankYou', () => {

expect( await screen.findByText( 'component--redesign-v2-footer' ) ).toBeInTheDocument();
} );

it( 'renders the redesignV2 footer content for ecommerce plan that has completed AT transfer', async () => {
const props = {
...defaultProps,
receiptId: 12,
selectedSite: {
ID: 12,
},
sitePlans: {
hasLoadedFromServer: true,
},
receipt: {
hasLoadedFromServer: true,
data: {
purchases: [ { productSlug: PLAN_ECOMMERCE } ],
},
},
refreshSitePlans: ( selectedSite ) => selectedSite,
planSlug: PLAN_ECOMMERCE,
};

render(
<Provider store={ store }>
<CheckoutThankYou { ...props } transferComplete={ true } isWooCommerceInstalled={ true } />
</Provider>
);

expect( await screen.findByText( 'component--redesign-v2-footer' ) ).toBeInTheDocument();
} );
} );