Enable widget v2 and turn on for wpcalypso so we can test (#77193)

Co-authored-by: Ben Zhu <ben.zhu@a8c.com>

client/components/blazepress-widget/index.tsx

@@ -1,3 +1,4 @@
+import config from '@automattic/calypso-config';
 import { getUrlParts } from '@automattic/calypso-url';
 import { Dialog } from '@automattic/components';
 import { useLocale, useLocalizeUrl } from '@automattic/i18n-utils';
@@ -104,7 +105,8 @@ const BlazePressWidget = ( props: BlazePressPromotionProps ) => {
 					widgetContainer.current,
 					handleShowCancel,
 					handleShowTopBar,
-					localeSlug
+					localeSlug,
+					config.isEnabled( 'promote-post/redesign-i2' )
 				);
 				setIsLoading( false );
 			} )();

client/lib/promote-post/index.ts

@@ -14,6 +14,7 @@ declare global {
 		BlazePress?: {
 			render: ( params: {
 				siteSlug: string | null;
+				siteId?: number | string;
 				domNode?: HTMLElement | null;
 				domNodeId?: string;
 				stripeKey: string;
@@ -34,6 +35,7 @@ declare global {
 				showGetStartedMessage?: boolean;
 				onGetStartedMessageClose?: ( dontShowAgain: boolean ) => void;
 				source?: string;
+				isV2?: boolean;
 			} ) => void;
 			strings: any;
 		};
@@ -65,13 +67,15 @@ export async function showDSP(
 	domNodeOrId?: HTMLElement | string | null,
 	setShowCancelButton?: ( show: boolean ) => void,
 	setShowTopBar?: ( show: boolean ) => void,
-	locale?: string
+	locale?: string,
+	isV2?: boolean
 ) {
 	await loadDSPWidgetJS();
 	return new Promise( ( resolve, reject ) => {
 		if ( window.BlazePress ) {
 			window.BlazePress.render( {
 				siteSlug: siteSlug,
+				siteId: siteId,
 				domNode: typeof domNodeOrId !== 'string' ? domNodeOrId : undefined,
 				domNodeId: typeof domNodeOrId === 'string' ? domNodeOrId : undefined,
 				stripeKey: config( 'dsp_stripe_pub_key' ),
@@ -85,12 +89,13 @@ export async function showDSP(
 				translateFn: translateFn,
 				localizeUrlFn: localizeUrlFn,
 				locale,
-				urn: `urn:wpcom:post:${ siteId }:${ postId || 0 }`,
+				urn: postId && postId !== '0' ? `urn:wpcom:post:${ siteId }:${ postId || 0 }` : '',
 				setShowCancelButton: setShowCancelButton,
 				setShowTopBar: setShowTopBar,
 				uploadImageLabel: isWpMobileApp() ? __( 'Tap to add image' ) : undefined,
 				showGetStartedMessage: ! isWpMobileApp(), // Don't show the GetStartedMessage in the mobile app.
 				source: source,
+				isV2,
 			} );
 		} else {
 			reject( false );

client/my-sites/promote-post-i2/components/posts-list-banner/style.scss

@@ -28,6 +28,7 @@
 
 	.posts-list-banner__learn-more {
 		margin-top: 0;
+		margin-right: 8px;
 	}
 
 	.posts-list-banner__container {

client/my-sites/promote-post-i2/main.tsx

@@ -5,7 +5,7 @@ import { useTranslate } from 'i18n-calypso';
 import { debounce } from 'lodash';
 import moment from 'moment';
 import { useEffect, useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import DocumentHead from 'calypso/components/data/document-head';
 import QueryPosts from 'calypso/components/data/query-posts';
 import QuerySiteStats from 'calypso/components/data/query-site-stats';
@@ -19,6 +19,8 @@ import useCampaignsStatsQuery from 'calypso/data/promote-post/use-promote-post-c
 import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
 import memoizeLast from 'calypso/lib/memoize-last';
 import { isWpMobileApp } from 'calypso/lib/mobile-app';
+import { recordDSPEntryPoint } from 'calypso/lib/promote-post';
+import { useRouteModal } from 'calypso/lib/route-modal';
 import CampaignsList from 'calypso/my-sites/promote-post-i2/components/campaigns-list';
 import PostsList from 'calypso/my-sites/promote-post-i2/components/posts-list';
 import PostsListBanner from 'calypso/my-sites/promote-post-i2/components/posts-list-banner';
@@ -92,6 +94,9 @@ export default function PromotedPosts( { tab }: Props ) {
 	const [ expandedCampaigns, setExpandedCampaigns ] = useState< number[] >( [] );
 	const [ alreadyScrolled, setAlreadyScrolled ] = useState< boolean >( false );
 	const selectedSiteId = selectedSite?.ID || 0;
+	const dispatch = useDispatch();
+	const keyValue = 'post-0'; // post 0 means to open post selector in widget
+	const { openModal } = useRouteModal( 'blazepress-widget', keyValue );
 
 	const products = useSelector( ( state ) => {
 		const products = getPostsForQuery( state, selectedSiteId, queryProducts );
@@ -276,6 +281,11 @@ export default function PromotedPosts( { tab }: Props ) {
 		</div>
 	);
 
+	const onClickPromote = async () => {
+		openModal();
+		dispatch( recordDSPEntryPoint( 'promoted_posts-header' ) );
+	};
+
 	return (
 		<Main wideLayout className="promote-post-i2">
 			<DocumentHead title={ translate( 'Advertising - Redesign page!' ) } />
@@ -296,6 +306,9 @@ export default function PromotedPosts( { tab }: Props ) {
 					<Button compact className="posts-list-banner__learn-more">
 						<InlineSupportLink supportContext="advertising" showIcon={ false } />
 					</Button>
+					<Button primary onClick={ onClickPromote }>
+						{ translate( 'Promote' ) }
+					</Button>
 				</div>
 			</div>
 

config/wpcalypso.json

@@ -11,7 +11,7 @@
 	"facebook_api_key": "249643311490",
 	"discover_logged_out_redirect_url": "https://discover.wordpress.com",
 	"dsp_stripe_pub_key": "pk_live_51LYYzQF53KN4RFN0oHFYHpzmHGpuUAXZ6ygDAFxM4XkRArRsET0orrofmsynkd9DhFaOGEsDZ3RC4f8mgI0zhEyN000X8i0Mqx",
-	"dsp_widget_js_src": "https://widgets.wp.com/promote/widget.js",
+	"dsp_widget_js_src": "https://widgets.wp.com/promote/widget-v2.js",
 	"zendesk_presales_chat_key": "216bf91d-f10f-4f66-bf65-a0cba220cd38",
 	"zendesk_presales_chat_key_akismet": "7ce13115-7b34-4069-9d64-228d90f148d1",
 	"zendesk_presales_chat_key_jp_checkout": "7c42153f-f579-49ba-a33e-246b2d27fb93",
@@ -128,7 +128,7 @@
 		"post-editor/checkout-overlay": true,
 		"post-list/qr-code-link": true,
 		"press-this": true,
-		"promote-post/redesign-i2": false,
+		"promote-post/redesign-i2": true,
 		"pre-cancellation-modal": false,
 		"publicize-preview": true,
 		"purchases/new-payment-methods": true,