/**
* Dashboard Overview page.
*
* A welcome card — greeting, the ways to start and the intro video — above
* the "Testimonial Placements" table.
*/
import { useEffect, useState } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { useSelect } from "@wordpress/data";
import { getFirstName, getGreeting } from "../../utils/greeting";
import { STORE_NAME } from "../../store";
import { ToolbarIcon as BuildWithAIIcon } from "../../../ai-builder/icons";
import Placements from "./Placements";
import { getSalutation, getWelcomeCopy } from "./welcomeCopy";
import "./getting-started.scss";
const WELCOME_VIDEO_ID = "-eSIbpv8Hik";
/**
* Dashboard Overview page.
*
* @return {JSX.Element} Page.
*/
const GettingStarted = () => {
const {
userName = "",
userFirstName = "",
hasPlacements = null,
homeUrl = "",
pluginUrl = "",
} = useSelect((select) => select(STORE_NAME).getDashboardInfo(), []);
const modules = useSelect((select) => select(STORE_NAME).getSettings()?.modules, []);
const isModuleActive = (key) => (modules?.[key] ? modules[key].is_active : true);
// Every entry point opens a new page in the block editor — where a
// testimonial section actually gets built. "Create from Scratch" lands
// with the inserter open on the plugin's category, in the same tab so the
// dashboard is still behind it on the way back.
const createUrl = `${homeUrl}wp-admin/post-new.php?post_type=page&rtpblock_inserter=true`;
const newPageUrl = `${homeUrl}wp-admin/post-new.php?post_type=page`;
// The sibling deep link, with the Ready Patterns library already open
// rather than sending the author off to the website. Hidden when the
// module is off, since the library host is not registered at all in
// that case.
const readyPatternsUrl =
homeUrl && isModuleActive("pattern_library")
? `${homeUrl}wp-admin/post-new.php?post_type=page&realpatterns=true`
: "";
// Same idea for the AI builder: a new page with the builder already open.
// Offered only when the editor will register it, so the button never
// lands on an empty page.
const aiBuilderUrl =
homeUrl && isModuleActive("ai_block_builder")
? `${homeUrl}wp-admin/post-new.php?post_type=page&rtp_ai_builder=true`
: "";
// The three ways to start, in order; the first one shown is the primary.
const startActions = [
readyPatternsUrl && {
key: "patterns",
href: readyPatternsUrl,
label: __("Use a Pattern", "testimonial-free"),
icon: "dashicons-screenoptions",
},
aiBuilderUrl && {
key: "ai",
href: aiBuilderUrl,
label: __("Build with AI", "testimonial-free"),
// The AI builder's own mark, as the editor header launcher draws it.
iconNode: ,
},
createUrl && {
key: "scratch",
href: createUrl,
label: __("Start Blank", "testimonial-free"),
icon: "dashicons-plus-alt2",
},
].filter(Boolean);
const [videoOpen, setVideoOpen] = useState(false);
// First visit or returning: known on load from the stored placements
// report, and kept current by the report itself — its first scan when
// nothing was stored, and every Sync after that.
const [placementsExist, setPlacementsExist] = useState(true === hasPlacements);
// The dashboard info arrives over REST after mount, so take the stored
// answer once it lands; the placements report then keeps it current.
useEffect(() => {
if (null !== hasPlacements) {
setPlacementsExist(true === hasPlacements);
}
}, [hasPlacements]);
useEffect(() => {
if (!videoOpen) {
return undefined;
}
const onKeyDown = (event) => {
if (event.key === "Escape") {
setVideoOpen(false);
}
};
document.addEventListener("keydown", onKeyDown);
return () => document.removeEventListener("keydown", onKeyDown);
}, [videoOpen]);
const salutation = getSalutation(getGreeting(new Date().getHours()), getFirstName(userFirstName, userName));
const welcome = getWelcomeCopy({
hasPlacements: placementsExist,
patterns: !!readyPatternsUrl,
ai: !!aiBuilderUrl,
});
return (