feat(integrations-page): add the MyYoast connection card and OAuth client controls

packages/js/src/integrations-page.js

@@ -3,12 +3,15 @@ import domReady from "@wordpress/dom-ready";
 
 import { Root } from "@yoast/ui-library";
 import IntegrationsGrid from "./integrations-page/integrations-grid";
+import { registerMyyoastStore } from "./integrations-page/myyoast-connection/store";
 import { registerReactComponent, renderReactRoot } from "./helpers/reactRoot";
 
 window.YoastSEO = window.YoastSEO || {};
 window.YoastSEO._registerReactComponent = registerReactComponent;
 
 domReady( () => {
+	registerMyyoastStore();
+
 	const context = {
 		isRtl: Boolean( get( window, "wpseoScriptData.metabox.isRtl", false ) ),
 	};

packages/js/src/integrations-page/myyoast-connection/constants.js

@@ -0,0 +1,9 @@
+/**
+ * Keep constants centralized to avoid circular dependency problems.
+ */
+
+/**
+ * The Redux store name of the MyYoast connection.
+ * @type {string}
+ */
+export const MYYOAST_STORE_NAME = "yoast-seo/myyoast-connection";

packages/js/src/integrations-page/myyoast-connection/myyoast-disconnect-modal.js

@@ -0,0 +1,60 @@
+import ExclamationIcon from "@heroicons/react/outline/ExclamationIcon";
+import { __ } from "@wordpress/i18n";
+import { Button, Modal, useSvgAria } from "@yoast/ui-library";
+import { noop } from "lodash";
+import PropTypes from "prop-types";
+
+/**
+ * Confirm modal for disconnecting the site from MyYoast.
+ *
+ * @param {boolean}  isOpen    Whether the modal is open.
+ * @param {function} onClose   Cancel handler.
+ * @param {function} onConfirm Confirm handler.
+ * @returns {JSX.Element} The modal element.
+ */
+export const MyyoastConnectionDisconnectModal = ( {
+	isOpen,
+	onClose = noop,
+	onConfirm = noop,
+} ) => {
+	const svgAriaProps = useSvgAria();
+
+	return (
+		<Modal isOpen={ isOpen } onClose={ onClose }>
+			<Modal.Panel className="yst-max-w-lg">
+				<div className="yst-flex yst-flex-col yst-items-center sm:yst-flex-row sm:yst-items-start sm:yst-columns-2 yst-gap-4">
+					<div className="yst-mx-auto yst-flex-shrink-0 yst-flex yst-items-center yst-justify-center yst-h-12 yst-w-12 yst-rounded-full yst-bg-red-100 sm:yst-mx-0">
+						<ExclamationIcon className="yst-h-6 yst-w-6 yst-text-red-600" { ...svgAriaProps } />
+					</div>
+					<div className="yst-text-center sm:yst-text-left yst-flex-1">
+						<Modal.Title className="yst-text-lg yst-leading-6 yst-font-medium yst-text-slate-900 yst-mb-3">
+							{ __( "Disconnect this site from MyYoast?", "wordpress-seo" ) }
+						</Modal.Title>
+						<Modal.Description className="yst-text-sm yst-text-slate-500">
+							{ __( "All connected users will be signed out and the site stops working with MyYoast until you connect it again.", "wordpress-seo" ) }
+						</Modal.Description>
+					</div>
+				</div>
+				<div className="yst-flex yst-flex-col sm:yst-flex-row-reverse yst-gap-3 yst-mt-6">
+					<Button
+						type="button"
+						variant="error"
+						onClick={ onConfirm }
+						className="yst-w-full sm:yst-w-auto"
+					>
+						{ __( "Disconnect", "wordpress-seo" ) }
+					</Button>
+					<Button type="button" variant="secondary" onClick={ onClose } className="yst-w-full sm:yst-w-auto">
+						{ __( "Cancel", "wordpress-seo" ) }
+					</Button>
+				</div>
+			</Modal.Panel>
+		</Modal>
+	);
+};
+
+MyyoastConnectionDisconnectModal.propTypes = {
+	isOpen: PropTypes.bool.isRequired,
+	onClose: PropTypes.func,
+	onConfirm: PropTypes.func,
+};