Jetpack: render QR Code once the post is published (#23288)

Co-authored-by: Jeremy Herve <[email protected]>

projects/plugins/jetpack/changelog/update-rjetpack-render-qr-post-code-in-sidebar

@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Jetpack: render QR Code once the post is published

projects/plugins/jetpack/extensions/plugins/post-publish-qr-post-panel/index.js

@@ -3,7 +3,10 @@
  */
 import { PluginPostPublishPanel } from '@wordpress/edit-post';
 import { __ } from '@wordpress/i18n';
-import { SVG, Path } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { SVG, Path, Component } from '@wordpress/components';
+import { QRCode } from '@automattic/jetpack-components';
 
 /**
  * Internal dependencies
@@ -16,6 +19,30 @@ const QRIcon = () => (
 	</SVG>
 );
 
+/**
+ * React component that renders a QR code for the post,
+ * pulling the post data from the editor store.
+ *
+ * @param {object} props   - Component props.
+ * @returns {Component}   The react component.
+ */
+function QRPost( props ) {
+	const {
+		post: { title },
+		permalink,
+	} = useSelect(
+		select => ( {
+			post: select( editorStore ).getCurrentPost(),
+			permalink: select( editorStore ).getPermalink(),
+		} ),
+		[]
+	);
+
+	const codeContent = `${ title } ${ permalink }`;
+
+	return <QRCode value={ codeContent } size={ 248 } renderAs="canvas" { ...props } />;
+}
+
 export const name = 'post-publish-qr-post-panel';
 
 export const settings = {
@@ -28,7 +55,9 @@ export const settings = {
 				icon={ <QRIcon /> }
 				initialOpen={ true }
 			>
-				QR post code here...
+				<div className="post-publish-qr-post-panel__container">
+					<QRPost />
+				</div>
 			</PluginPostPublishPanel>
 		);
 	},