Skip to content

Commit

Permalink
Update confirmation modal after progressive onboarding (#9915)
Browse files Browse the repository at this point in the history
  • Loading branch information
@elazzabi
elazzabi authored Dec 10, 2024
1 parent 0ea8272 commit adbac29
Show file tree
Hide file tree
Showing 6 changed files with 116 additions and 82 deletions.
4 changes: 4 additions & 0 deletions changelog/update-confirmation-modal-nox
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: update

Update confirmation modal after onbarding
98 changes: 49 additions & 49 deletions client/overview/modal/progressive-onboarding-eligibility/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ import React, { useEffect, useState } from 'react';
import { __, sprintf } from '@wordpress/i18n';
import { addQueryArgs } from '@wordpress/url';
import { Button, Modal } from '@wordpress/components';
import { Icon, store, widget, tool } from '@wordpress/icons';
import { Icon, store, currencyDollar } from '@wordpress/icons';
import { useDispatch } from '@wordpress/data';
import interpolateComponents from '@automattic/interpolate-components';

/**
* Internal dependencies
Expand Down Expand Up @@ -59,75 +60,74 @@ const ProgressiveOnboardingEligibilityModal: React.FC = () => {
setModalVisible( false );
};

// Workaround to remove Modal header from the modal until `hideHeader` prop can be used.
useEffect( () => {
document
.querySelector(
'.wcpay-progressive-onboarding-eligibility-modal .components-modal__header-heading-container'
)
?.remove();
}, [] );

if ( ! modalVisible || modalDismissed ) return null;

return (
<Modal
title={ '' }
title={ __(
"You're ready to accept payments!",
'woocommerce-payments'
) }
className="wcpay-progressive-onboarding-eligibility-modal"
onRequestClose={ handleDismiss }
>
<ConfettiAnimation />
<h1 className="wcpay-progressive-onboarding-eligibility-modal__heading">
{ __( 'You’re ready to sell.', 'woocommerce-payments' ) }
</h1>
<h2 className="wcpay-progressive-onboarding-eligibility-modal__subheading">
{ __(
'Start selling now and fast track the setup process, or continue the process to set up payouts with WooPayments.',
'woocommerce-payments'
) }
{ interpolateComponents( {
mixedString: sprintf(
__(
'Great news — your %s account has been activated. You can now start accepting payments on your store, subject to {{restrictionsLink}}certain restrictions{{/restrictionsLink}}.',
'woocommerce-payments'
),
'WooPayments'
),
components: {
restrictionsLink: (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
rel="external noopener noreferrer"
target="_blank"
href="https://woocommerce.com/document/woopayments/startup-guide/gradual-signup/"
/>
),
},
} ) }
</h2>
<div className="wcpay-progressive-onboarding-eligibility-modal__benefits">
<div>
<Icon icon={ store } size={ 32 } />
<h3 className="wcpay-progressive-onboarding-eligibility-modal__benefits__subtitle">
<Icon icon={ store } width={ 24 } height={ 24 } />
<div>
<h3 className="wcpay-progressive-onboarding-eligibility-modal__benefits__subtitle">
{ __(
'Start selling instantly',
'woocommerce-payments'
) }
</h3>
{ __(
'Start selling instantly',
'You have 30 days from your first transaction or until you reach $5,000 in sales to verify your information and set up payouts.',
'woocommerce-payments'
) }
</h3>
{ sprintf(
/* translators: %s: WooPayments */
__(
'%s enables you to start processing credit card payments right away.',
'woocommerce-payments'
),
'WooPayments'
) }
</div>
<div>
<Icon icon={ widget } size={ 32 } />
<h3 className="wcpay-progressive-onboarding-eligibility-modal__benefits__subtitle">
{ __( 'Quick and easy setup', 'woocommerce-payments' ) }
</h3>
{ __(
'The setup process is super simple and ensures your store is ready to accept card payments.',
'woocommerce-payments'
) }
</div>
</div>
<div>
<Icon icon={ tool } size={ 32 } />
<h3 className="wcpay-progressive-onboarding-eligibility-modal__benefits__subtitle">
{ __( 'Flexible process', 'woocommerce-payments' ) }
</h3>
{ __(
'You have a $5,000 balance limit or 30 days from your first transaction to verify and set up payouts in your account.',
'woocommerce-payments'
) }
<Icon icon={ currencyDollar } width={ 24 } height={ 24 } />
<div>
<h3 className="wcpay-progressive-onboarding-eligibility-modal__benefits__subtitle">
{ __(
'Start receiving payouts',
'woocommerce-payments'
) }
</h3>
{ __(
'Provide some additional details about your business so you can continue accepting payments and begin receiving payouts without restrictions.',
'woocommerce-payments'
) }
</div>
</div>
</div>
<div className="wcpay-progressive-onboarding-eligibility-modal__footer">
<Button variant="secondary" onClick={ handleSetup }>
{ __( 'Start receiving payouts', 'woocommerce-payments' ) }
{ __( 'Set up payouts', 'woocommerce-payments' ) }
</Button>
<Button variant="primary" onClick={ handlePaymentsOnly }>
{ __( 'Start selling', 'woocommerce-payments' ) }
Expand Down
85 changes: 59 additions & 26 deletions client/overview/modal/progressive-onboarding-eligibility/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,33 @@
&.components-modal__frame {
border-radius: 2px !important;
overflow: visible;

@media screen and ( max-width: $break-small ) {
height: fit-content;
margin: auto auto;
max-width: 90vw;
}
}

.components-modal__content {
box-sizing: border-box;
max-width: 700px;
margin: 0;
max-width: 516px;
margin: 72px 0 0;
padding: $gap-larger;
display: flex;
flex-direction: column;
align-items: center;
padding: $gap $gap-larger $gap-larger $gap-larger;
flex: 1;
overflow: auto;
}

.components-modal__header {
height: 0;
.components-modal__header-heading {
font-weight: 300;
text-wrap: auto;
}

.components-button {
position: absolute;
left: initial;
top: $gap-smaller;
right: $gap-smaller;

svg {
width: 32px;
height: 32px;
Expand All @@ -31,50 +37,72 @@
}

&__heading {
font-size: 40px;
font-size: 20px;
font-weight: 400;
line-height: 60px;
line-height: 28px;
margin-bottom: $gap-smallest;
}

&__subheading {
@include wc-body-large;
text-align: center;
font-weight: normal;
color: $gray-60;
max-width: 480px;
font-weight: 400;
color: $gray-700;
font-size: 13px;
line-height: 20px;
margin: 0 0 $gap-large 0;
text-wrap: wrap !important;
}

&__benefits {
display: grid;
grid-template-columns: repeat( 3, 1fr );
column-gap: $gap-largest;
padding: 0 $gap;
fill: $studio-woocommerce-purple-50;
font-size: 14px;
fill: $gray-900;
font-size: 13px;
line-height: 20px;
color: $gray-60;
color: $gray-700;

> div {
display: grid;
grid-template-columns: auto 1fr;
gap: $gap;
color: $gray-700;
font-weight: 400;
font-size: 13px;
line-height: 20px;
}

> div:not( :last-child ) {
margin-bottom: $gap;
}

svg {
display: block;
margin: $gap-smaller auto;
margin: $gap-smallest 0;
color: $gray-900;
}

&__subtitle {
@include wp-subtitle;
margin: $gap-large 0 $gap-smallest;
margin: $gap-smallest 0;
font-weight: 600;
color: $gray-900;
line-height: 20px;
font-size: 13px;
}

@media screen and ( max-width: $break-small ) {
grid-template-columns: 1fr;
row-gap: $gap-large;

svg {
width: 24px;
height: 24px;
}
}
}

&__footer {
text-align: center;
margin: $gap-large 0;
text-align: right;
margin: $gap-large 0 0 0;
width: 100%;

& :first-child {
margin-right: $gap;
Expand All @@ -87,6 +115,11 @@
line-height: 20px;
height: 40px;
}

@media screen and ( max-width: $break-small ) {
text-wrap: nowrap;
text-align: center;
}
}

&__confetti {
Expand Down
4 changes: 2 additions & 2 deletions client/overview/modal/progressive-onboarding-eligibility/test/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ describe( 'Progressive Onboarding Eligibility Modal', () => {

const queryHeading = () =>
screen.queryByRole( 'heading', {
name: 'You’re ready to sell.',
name: "You're ready to accept payments!",
} );

expect( queryHeading() ).toBeInTheDocument();
Expand Down Expand Up @@ -83,7 +83,7 @@ describe( 'Progressive Onboarding Eligibility Modal', () => {

user.click(
screen.getByRole( 'button', {
name: 'Start receiving payouts',
name: 'Set up payouts',
} )
);

Expand Down
5 changes: 1 addition & 4 deletions client/overview/task-list/strings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -423,10 +423,7 @@ export default {
),
},
go_live: {
title: __(
'Set up real payments on your store',
'woocommerce-payments'
),
title: __( 'Set up live payments', 'woocommerce-payments' ),
time: __( '10 minutes', 'woocommerce-payments' ),
},
},
Expand Down
2 changes: 1 addition & 1 deletion client/overview/test/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -326,7 +326,7 @@ describe( 'Overview page', () => {
render( <OverviewPage /> );

expect(
screen.getByText( 'You’re ready to sell.' )
screen.getByText( "You're ready to accept payments!" )
).toBeInTheDocument();
} );

Expand Down

0 comments on commit adbac29

Please sign in to comment.