Back

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { __ } from '@wordpress/i18n';
import {
	getRegistrationErrorCode,
	getRegistrationErrorDescription,
} from '../../../helpers/get-connect-screen-error-message';
import useConnection from '../../use-connection';
import ConnectScreenVisual from './visual';
import type { ReactNode } from 'react';
 
export type Props = {
	// API root
	apiRoot: string;
	// API nonce
	apiNonce: string;
	// Registration nonce
	registrationNonce: string;
	// The redirect admin UR
	redirectUri: string;
	// Additional page elements to show before the call to action
	children?: ReactNode;
	// The Title
	title?: string;
	// The Connect Button label
	buttonLabel?: string;
	// The text read by screen readers when connecting
	loadingLabel?: string;
	// Where the connection request is coming from
	from?: string;
	// Whether to initiate the connection process automatically upon rendering the component
	autoTrigger?: boolean;
	// Images to display on the right side
	images?: string[];
	// The assets base URL
	assetBaseUrl?: string;
	// Whether to not require a user connection and just redirect after site connection
	skipUserConnection?: boolean;
	// Whether to skip the pricing page after the connection screen
	skipPricingPage?: boolean;
	// Additional page elements to show after the call to action
	footer?: ReactNode;
	// The logo to display at the top of the component
	logo?: ReactNode;
};
 
/**
 * The Connection Screen component.
 *
 * @param {Props} props - The properties.
 * @return {import('react').ReactNode} The Connection Screen component.
 */
function ConnectScreen( {
	title,
	buttonLabel,
	loadingLabel,
	apiRoot,
	apiNonce,
	registrationNonce,
	from,
	redirectUri,
	images,
	children,
	assetBaseUrl,
	autoTrigger,
	footer,
	skipUserConnection,
	skipPricingPage,
	logo,
}: Props ) {
	const {
		handleRegisterSite,
		siteIsRegistering,
		userIsConnecting,
		registrationError,
		isOfflineMode,
	} = useConnection( {
		registrationNonce,
		redirectUri,
		apiRoot,
		apiNonce,
		autoTrigger,
		from,
		skipUserConnection,
		skipPricingPage,
	} );
 
	const displayButtonError = Boolean( registrationError );
	const buttonIsLoading = siteIsRegistering || userIsConnecting;
	const errorCode = getRegistrationErrorCode( registrationError );
	const errorDescription = getRegistrationErrorDescription( registrationError );
 
	return (
		<ConnectScreenVisual
			title={
				title ||
				__( 'Over 5 million WordPress sites are faster and more secure', 'jetpack-connection-js' )
			}
			images={ images || [] }
			assetBaseUrl={ assetBaseUrl }
			buttonLabel={ buttonLabel || __( 'Set up Jetpack', 'jetpack-connection-js' ) }
			loadingLabel={ loadingLabel }
			handleButtonClick={ handleRegisterSite }
			displayButtonError={ displayButtonError }
			errorCode={ errorCode }
			errorDescription={ errorDescription }
			buttonIsLoading={ buttonIsLoading }
			footer={ footer }
			isOfflineMode={ isOfflineMode }
			logo={ logo }
		>
			{ children }
		</ConnectScreenVisual>
	);
}
 
export default ConnectScreen;