import { formatNumber } from "@//lib/utils";
import ProConfirmDialog from "@/components/shared/ProConfirmDialog";
import { Badge } from "@/components/ui/badge";
import { Button, buttonVariants } from "@/components/ui/button";
import { Toggle } from "@/components/ui/toggle";
import { useActivate, useTNavigation } from "@/hooks/app.hooks";
import { cn } from "@/lib/utils";
import { useState } from "react";
import {
TooltipProvider,
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import V4ImportDialog from "@/components/shared/V4ImportDialog";
import {
ATOMIC_IMPORT_AVAILABLE,
fetchAtomicImportStatus,
isV4Template,
LOCALIZE_IMAGES_PARAM,
} from "@/lib/atomicImport";
import { __ } from "@wordpress/i18n";
const TemplateShow = ({ allTemplate, metaData, setMetaData }) => {
const [open, setOpen] = useState(false);
const { setTabKey } = useTNavigation();
const { activated } = useActivate();
// The V4 dialog holds the navigation it interrupted until the user answers.
const [v4Pending, setV4Pending] = useState(null);
// "Copy images into my media library" -- the dialog's one choice on a
// template import. Rides the URL as v4images, off unless ticked.
const [v4Images, setV4Images] = useState(false);
const navigate = (value, slug, id, images = false) => {
const url = new URL(window.location.href);
const pageQuery = url.searchParams.get("page");
url.search = "";
url.hash = "";
url.search = `page=${pageQuery}`;
url.searchParams.set("tab", value);
url.searchParams.set("template", slug);
url.searchParams.set("templateid", id);
if (images) url.searchParams.set(LOCALIZE_IMAGES_PARAM, "1");
window.history.replaceState({}, "", url);
setTabKey(value);
};
const changeRoute = async (value, template) => {
const { slug, id, is_pro } = template || {};
// The licence gate comes first, exactly as before: a Pro template on an
// unlicensed site opens the upgrade dialog and goes nowhere.
if (is_pro && activated?.product_status?.item_id !== 13) {
setOpen(value);
return;
}
// A V4 template landing on a site that already holds V4 content is the
// one case worth a word before the import starts. Asked fresh, never from
// the payload -- see lib/atomicImport.js. A failed request proceeds
// silently: the importer picks the same mode server-side from the same
// signal, so the dialog is information, not a gate.
// Every V4 import stops at the dialog now: it carries the image choice,
// which applies to a first import as much as a second. The "already
// uses V4" explanation inside it is still gated on the fresh signal.
if (isV4Template(template)) {
const status = await fetchAtomicImportStatus();
setV4Images(false);
setV4Pending({
value,
slug,
id,
title: template?.title,
inUse: !!status?.in_use,
});
return;
}
navigate(value, slug, id);
};
const saveWishlist = async (data) => {
try {
await fetch(WCF_ADDONS_ADMIN.ajaxurl, {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
Accept: "application/json",
},
body: new URLSearchParams({
action: "aaeaddon_wishlist_option",
wishlist: JSON.stringify(data),
nonce: WCF_ADDONS_ADMIN.nonce,
settings: "wcf_save_widgets",
}),
})
.then((response) => {
return response.json();
})
.then((return_content) => {
if (return_content.success) {
setMetaData((pre) => ({
...pre,
wishlist: return_content.data,
pageNum: 1,
}));
WCF_ADDONS_ADMIN.addons_config.wishlist = return_content.data;
}
});
} catch (error) {}
};
return (
<>
{allTemplate?.templates?.length ? (
{allTemplate?.templates?.map((template, i) => (
{template?.is_pro ? "Pro" : "Free"}
{/* Only V4 is badged. V3 is what every template has been
until now, and a "V3" mark on 960 cards would say nothing. */}
{isV4Template(template) && (
V4
)}
{" "}
Preview
{/* A V4 template on a site whose Elementor cannot render
atomic elements would import and show nothing, so the
button is withheld and the tooltip says why. */}
{isV4Template(template) && !ATOMIC_IMPORT_AVAILABLE && (