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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { __ } from '@wordpress/i18n';
import { useState } from 'react';
import { useSiteLaunchGatingVariant } from '../../common/hooks';
import PreLaunchSiteModal from '../../common/pre-launch-site-modal';
import { shouldShowPreLaunchModal } from '../../common/should-show-pre-launch-modal';
import { wpcomTrackEvent } from '../../common/tracks';

const icon = (
	<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path
			fillRule="evenodd"
			clipRule="evenodd"
			d="M10.6242 9.74354L7.62419 12.1261V13.2995C7.62419 13.4418 7.77653 13.5322 7.90147 13.4641L10.5265 12.0322C10.5867 11.9994 10.6242 11.9363 10.6242 11.8676V9.74354ZM6.49919 12.0875L3.91203 9.50037H2.7001C1.70383 9.50037 1.07079 8.43399 1.54786 7.55937L2.97968 4.93437C3.20967 4.51272 3.65161 4.25036 4.13191 4.25036H7.17569C9.1325 2.16798 11.3176 0.754637 14.1427 0.531305C14.9004 0.471402 15.5282 1.09911 15.4682 1.85687C15.2449 4.68199 13.8316 6.86706 11.7492 8.82386V11.8676C11.7492 12.3479 11.4868 12.7899 11.0652 13.0199L8.44018 14.4517C7.56557 14.9288 6.49919 14.2957 6.49919 13.2995V12.0875ZM6.25602 5.37536H4.13191C4.0633 5.37536 4.00017 5.41284 3.96731 5.47308L2.53549 8.09808C2.46734 8.22303 2.55777 8.37536 2.7001 8.37536H3.87344L6.25602 5.37536Z"
		/>
		<path d="M0.498047 13.3962C0.498047 12.2341 1.44011 11.2921 2.60221 11.2921C3.76431 11.2921 4.70638 12.2341 4.70638 13.3962C4.70638 14.5583 3.76431 15.5004 2.60221 15.5004H1.06055C0.749887 15.5004 0.498047 15.2486 0.498047 14.9379V13.3962Z" />
	</svg>
);

const launchButtonData = typeof window === 'object' ? window.JETPACK_LAUNCH_BUTTON_DATA : {};

const Content = () => {
	// Separate __() calls: terser folds `cond ? __( a ) : __( b )` into `__( cond ? a : b )`,
	// which i18n-check-webpack-plugin rejects.
	const launchLabel = __( 'Launch site', 'jetpack-mu-wpcom' );
	const publishLabel = __( 'Publish site', 'jetpack-mu-wpcom' );

	return (
		<>
			<span className="ab-icon">{ icon }</span>
			<span className="ab-label">
				{ launchButtonData.usePublishCopy ? publishLabel : launchLabel }
			</span>
		</>
	);
};

/**
 * The LaunchButton component.
 * @param {object} props           - Component props.
 * @param {string} props.launchUrl - The admin bar node's launch-flow URL, `back_to` set to this page.
 * @return {React.ReactNode} The LaunchButton component.
 */
export function LaunchButton( { launchUrl } ) {
	const [ , variant ] = useSiteLaunchGatingVariant();
	const [ showPreLaunchModal, setShowPreLaunchModal ] = useState( false );

	const qualifiesForPreLaunch = shouldShowPreLaunchModal( {
		sitePlan: launchButtonData.sitePlan,
		hasCustomDomain: launchButtonData.hasCustomDomain,
		isTrial: launchButtonData.isTrial,
	} );

	// Site launch gating: 'semi_gated_site_launch' is the shipped default. The other
	// branches are scaffolding for future experiments; see useSiteLaunchGatingVariant.
	switch ( variant ) {
		case 'semi_gated_site_launch':
		case null:
		default: {
			return (
				<>
					<a
						className="ab-item"
						role="menuitem"
						href={ launchUrl }
						onClick={ event => {
							wpcomTrackEvent( 'wpcom_adminbar_launch_site' );
							// Qualifying sites confirm via the pre-launch modal; everyone
							// else follows the link, preserving today's behavior.
							if ( qualifiesForPreLaunch ) {
								event.preventDefault();
								wpcomTrackEvent( 'wpcom_launch_site_pre_launch_modal_shown' );
								setShowPreLaunchModal( true );
							}
						} }
					>
						<Content />
					</a>
					{ showPreLaunchModal && (
						<PreLaunchSiteModal
							siteName={ launchButtonData.siteName }
							siteDomain={ launchButtonData.siteDomain }
							homeUrl={ launchButtonData.siteUrl }
							planName={
								launchButtonData.sitePlan?.product_name || __( 'Paid plan', 'jetpack-mu-wpcom' )
							}
							launchUrl={ launchUrl }
							onClose={ () => setShowPreLaunchModal( false ) }
						/>
					) }
				</>
			);
		}
	}
}