Skip to content

Commit

Permalink
Merge branch 'develop' into add/6924-migrate-test-drive-capabilities
Browse files Browse the repository at this point in the history
  • Loading branch information
dpaun1985 authored Dec 12, 2024
2 parents 8e2e624 + 5e54069 commit 8fb6586
Show file tree
Hide file tree
Showing 6 changed files with 106 additions and 45 deletions.
4 changes: 4 additions & 0 deletions changelog/update-9916-go-live-modal-and-notice
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: update

Adjust the go-live modal to match the latest design.
10 changes: 8 additions & 2 deletions client/components/sandbox-mode-switch-to-live-notice/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { recordEvent } from 'wcpay/tracks';
import { ClickTooltip } from 'wcpay/components/tooltip';
import ErrorBoundary from 'wcpay/components/error-boundary';
import SetupLivePaymentsModal from './modal';
import './style.scss';

interface Props {
from: string;
Expand All @@ -41,18 +42,23 @@ const SandboxModeSwitchToLiveNotice: React.FC< Props > = ( {

return (
<>
<BannerNotice status="warning" isDismissible={ false }>
<BannerNotice
status="warning"
className="sandbox-mode-notice"
isDismissible={ false }
>
{ interpolateComponents( {
mixedString: sprintf(
/* translators: %1$s: WooPayments */
__(
// eslint-disable-next-line max-len
'{{strong}}%1$s is in sandbox mode.{{/strong}} To accept real transactions, {{switchToLiveLink}}set up a live %1$s account.{{/switchToLiveLink}} {{learnMoreIcon/}}',
"{{div}}{{strong}}You're using a test account.{{/strong}} To accept payments from shoppers, {{switchToLiveLink}}activate your %1$s account.{{/switchToLiveLink}}{{/div}}{{learnMoreIcon/}}",
'woocommerce-payments'
),
'WooPayments'
),
components: {
div: <div />,
strong: <strong />,
learnMoreIcon: (
<ClickTooltip
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import React, { useState } from 'react';
import { __ } from '@wordpress/i18n';
import { __, sprintf } from '@wordpress/i18n';
import { addQueryArgs } from '@wordpress/url';
import { Button, Modal } from '@wordpress/components';
import { Icon, currencyDollar } from '@wordpress/icons';
Expand Down Expand Up @@ -56,47 +56,68 @@ const SetupLivePaymentsModal: React.FC< Props > = ( {
return (
<Modal
title={ __(
'Set up live payments on your store',
'Activate payments on your store',
'woocommerce-payments'
) }
className="wcpay-setup-real-payments-modal"
isDismissible={ true }
onRequestClose={ trackAndClose }
>
<p className="wcpay-setup-real-payments-modal__headline">
{ __(
'Before proceeding, please take note of the following information:',
'woocommerce-payments'
) }
</p>
<div className="wcpay-setup-real-payments-modal__content">
<Icon icon={ BlockEmbedIcon } />
{ __(
'Your test account will be deactivated and your transaction records will be preserved for future reference.',
'woocommerce-payments'
) }
<Icon icon={ BlockPostAuthorIcon } />
{ __(
'The owner, business and contact information will be required.',
'woocommerce-payments'
) }
<Icon icon={ currencyDollar } />
{ __(
'We will need your banking details in order to process any payouts to you.',
'woocommerce-payments'
) }
<div className="wcpay-setup-real-payments-modal__content__item">
<p>
{ __(
"Before continuing, please make sure that you're aware of the following:",
'woocommerce-payments'
) }
</p>
</div>
<div className="wcpay-setup-real-payments-modal__content__item-flex">
<div>
<Icon icon={ BlockEmbedIcon } />
</div>
<p className="wcpay-setup-real-payments-modal__content__item-flex__description">
{ __(
'Your test account will be deactivated, but your transactions can be found in your order history.',
'woocommerce-payments'
) }
</p>
</div>
<div className="wcpay-setup-real-payments-modal__content__item-flex">
<div>
<Icon icon={ BlockPostAuthorIcon } />
</div>
<p className="wcpay-setup-real-payments-modal__content__item-flex__description">
{ sprintf(
/* translators: %s: WooPayments */
__(
'To use %s, you will need to verify your business details.',
'woocommerce-payments'
),
'WooPayments'
) }
</p>
</div>
<div className="wcpay-setup-real-payments-modal__content__item-flex">
<div>
<Icon icon={ currencyDollar } />
</div>
<p className="wcpay-setup-real-payments-modal__content__item-flex__description">
{ __(
'In order to receive payouts, you will need to provide your bank details.',
'woocommerce-payments'
) }
</p>
</div>
</div>
<div className="wcpay-setup-real-payments-modal__footer">
<Button variant="tertiary" onClick={ trackAndClose }>
{ __( 'Cancel', 'woocommerce-payments' ) }
</Button>
<Button
variant="primary"
isBusy={ isSubmitted }
disabled={ isSubmitted }
onClick={ handleSetup }
>
{ __( 'Continue setup', 'woocommerce-payments' ) }
{ __( 'Activate payments', 'woocommerce-payments' ) }
</Button>
</div>
</Modal>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,21 +1,30 @@
.wcpay-setup-real-payments-modal {
color: $gray-900;
fill: $studio-woocommerce-purple-50;
&.components-modal__frame {
width: 512px;

@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: 600px;
margin: auto;
margin: 0;
padding: $gap-smaller $gap-larger $gap-larger;
}

.components-modal__header {
position: initial;
padding: 0;
padding: 24px 0 16px 0;
height: auto;
border: 0;

h1 {
@include wp-title-small;
font-weight: 300;
margin-bottom: $gap-smaller;
}
}
Expand All @@ -24,20 +33,36 @@
@include wp-title-small;
}

&__headline {
font-weight: 600;
}

&__content {
display: grid;
grid-template-columns: auto 1fr;
gap: $gap;
padding: $gap-smallest;
align-items: center;
margin-bottom: $gap-large;
display: flex;
gap: $gap-large;
flex-direction: column;
padding: $gap-small 0 $gap 0;

&__item {
p {
line-height: 20px;
margin: 0;
}
}

&__item-flex {
display: flex;
gap: $gap;
padding-right: $gap-large;

&__description {
color: $gray-700;
}
p {
line-height: 20px;
margin: 0;
}
}
}

&__footer {
@include modal-footer-buttons;
padding-top: $gap-large;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ describe( 'Setup Live Payments Modal', () => {

expect(
screen.queryByText(
'Before proceeding, please take note of the following information:'
"Before continuing, please make sure that you're aware of the following:"
)
).toBeInTheDocument();
} );
Expand All @@ -58,7 +58,7 @@ describe( 'Setup Live Payments Modal', () => {

user.click(
screen.getByRole( 'button', {
name: 'Continue setup',
name: 'Activate payments',
} )
);

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.sandbox-mode-notice {
.wcpay-banner-notice__content {
display: flex;
}
}

0 comments on commit 8fb6586

Please sign in to comment.