Update mobile app onboarding modal to focus on app installation (#40559)
This commit is contained in:
Corey McKrill
GitHub
commit
914a1dfd09
|
|
@ -0,0 +1,24 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { QRCodeSVG } from 'qrcode.react';
|
||||
|
||||
export const MobileAppInstallationInfo = () => {
|
||||
return (
|
||||
<div>
|
||||
<QRCodeSVG
|
||||
value={
|
||||
'https://woocommerce.com/mobile/?utm_source=wc_onboarding_mobile_task'
|
||||
}
|
||||
size={ 140 }
|
||||
/>
|
||||
<p>
|
||||
{ __(
|
||||
'Scan the code above to download the WooCommerce mobile app, or visit woocommerce.com/mobile from your mobile device.',
|
||||
'woocommerce'
|
||||
) }
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -25,11 +25,10 @@ import {
|
|||
} from './components';
|
||||
import {
|
||||
EmailSentPage,
|
||||
JetpackInstallStepperPage,
|
||||
MobileAppInstallPage,
|
||||
JetpackAlreadyInstalledPage,
|
||||
} from './pages';
|
||||
import './style.scss';
|
||||
import { WrongUserConnectedPage } from './pages/WrongUserConnectedPage';
|
||||
import { SETUP_TASK_HELP_ITEMS_FILTER } from '../../activity-panel/panels/help';
|
||||
|
||||
export const MobileAppModal = () => {
|
||||
|
|
@ -84,25 +83,6 @@ export const MobileAppModal = () => {
|
|||
} }
|
||||
/>
|
||||
);
|
||||
} else if ( state === JetpackPluginStates.NOT_OWNER_OF_CONNECTION ) {
|
||||
setPageContent( <WrongUserConnectedPage /> );
|
||||
} else if (
|
||||
state === JetpackPluginStates.NOT_INSTALLED ||
|
||||
state === JetpackPluginStates.NOT_ACTIVATED ||
|
||||
state === JetpackPluginStates.USERLESS_CONNECTION ||
|
||||
( state === JetpackPluginStates.FULL_CONNECTION &&
|
||||
isReturningFromWordpressConnection )
|
||||
) {
|
||||
setPageContent(
|
||||
<JetpackInstallStepperPage
|
||||
isReturningFromWordpressConnection={
|
||||
isReturningFromWordpressConnection
|
||||
}
|
||||
isRetryingMagicLinkSend={ isRetryingMagicLinkSend }
|
||||
sendMagicLinkHandler={ sendMagicLink }
|
||||
sendMagicLinkStatus={ magicLinkRequestStatus }
|
||||
/>
|
||||
);
|
||||
} else if (
|
||||
state === JetpackPluginStates.FULL_CONNECTION &&
|
||||
jetpackConnectionData?.currentUser?.wpcomUser?.email &&
|
||||
|
|
@ -120,6 +100,9 @@ export const MobileAppModal = () => {
|
|||
sendMagicLinkHandler={ sendMagicLink }
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
// Shows the installation page by default.
|
||||
setPageContent( <MobileAppInstallPage /> );
|
||||
}
|
||||
}, [
|
||||
sendMagicLink,
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import { OPTIONS_STORE_NAME } from '@woocommerce/data';
|
|||
import { ModalContentLayoutWithTitle } from '../layouts/ModalContentLayoutWithTitle';
|
||||
import { SendMagicLinkButton } from '../components';
|
||||
import { SendMagicLinkStates } from '../components/useSendMagicLink';
|
||||
import { MobileAppInstallationInfo } from '../components/MobileAppInstallationInfo';
|
||||
|
||||
interface JetpackAlreadyInstalledPageProps {
|
||||
wordpressAccountEmailAddress: string | undefined;
|
||||
|
|
@ -58,12 +59,13 @@ export const JetpackAlreadyInstalledPage: React.FC<
|
|||
return (
|
||||
<ModalContentLayoutWithTitle>
|
||||
<>
|
||||
<MobileAppInstallationInfo />
|
||||
<div className="modal-subheader jetpack-already-installed">
|
||||
<h3>
|
||||
{ sprintf(
|
||||
/* translators: %s: user's WordPress.com account email address */
|
||||
__(
|
||||
'We’ll send a magic link to %s. Open it on your smartphone or tablet to sign into your store instantly.',
|
||||
'After the app is installed, click below to send a magic link to %s. Open it on your smartphone or tablet to sign into your store instantly.',
|
||||
'woocommerce'
|
||||
),
|
||||
wordpressAccountEmailAddress
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { ModalContentLayoutWithTitle } from '../layouts/ModalContentLayoutWithTitle';
|
||||
import { MobileAppInstallationInfo } from '../components/MobileAppInstallationInfo';
|
||||
|
||||
export const MobileAppInstallPage = () => {
|
||||
return (
|
||||
<ModalContentLayoutWithTitle>
|
||||
<MobileAppInstallationInfo />
|
||||
</ModalContentLayoutWithTitle>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
export { EmailSentPage } from './EmailSentPage';
|
||||
export { JetpackAlreadyInstalledPage } from './JetpackAlreadyInstalledPage';
|
||||
export { JetpackInstallStepperPage } from './JetpackInstallStepperPage';
|
||||
export { MobileAppInstallPage } from './MobileAppInstallPage';
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@
|
|||
.components-guide.woocommerce__mobile-app-welcome-modal {
|
||||
max-width: 964px;
|
||||
min-width: 534px;
|
||||
height: 600px;
|
||||
// Overrides the default modal max-height.
|
||||
max-height: 663px;
|
||||
|
||||
.components-modal__header {
|
||||
height: 0;
|
||||
|
|
@ -51,7 +52,7 @@
|
|||
.modal-layout-body {
|
||||
flex-grow: 1;
|
||||
.modal-subheader {
|
||||
margin-top: -16px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 24px;
|
||||
h3 {
|
||||
font-weight: 400;
|
||||
|
|
@ -59,9 +60,6 @@
|
|||
line-height: 1.6rem;
|
||||
}
|
||||
}
|
||||
.modal-subheader.jetpack-already-installed {
|
||||
margin-bottom: 48px; // there's a bit of space so space it out
|
||||
}
|
||||
}
|
||||
|
||||
.modal-layout-footer {
|
||||
|
|
@ -165,6 +163,7 @@ button.components-button.send-magic-link-button {
|
|||
background: #007cba;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
margin-bottom: 1em;
|
||||
:hover {
|
||||
// the hover state makes the text invisible so we need to override it
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -95,6 +95,7 @@
|
|||
"history": "^5.3.0",
|
||||
"lodash": "^4.17.21",
|
||||
"memize": "^1.1.0",
|
||||
"qrcode.react": "^3.1.0",
|
||||
"qs": "^6.10.3",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: update
|
||||
|
||||
Updated the Woo mobile onboarding modal to focus on app installation.
|
||||
|
|
@ -3077,6 +3077,9 @@ importers:
|
|||
memize:
|
||||
specifier: ^1.1.0
|
||||
version: 1.1.0
|
||||
qrcode.react:
|
||||
specifier: ^3.1.0
|
||||
version: 3.1.0(react@17.0.2)
|
||||
qs:
|
||||
specifier: ^6.10.3
|
||||
version: 6.10.3
|
||||
|
|
@ -42377,6 +42380,14 @@ packages:
|
|||
- supports-color
|
||||
dev: true
|
||||
|
||||
/qrcode.react@3.1.0(react@17.0.2):
|
||||
resolution: {integrity: sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
dependencies:
|
||||
react: 17.0.2
|
||||
dev: false
|
||||
|
||||
/qs@6.10.3:
|
||||
resolution: {integrity: sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==}
|
||||
engines: {node: '>=0.6'}
|
||||
|
|
|
|||
Loading…
Reference in New Issue