| 1 |
import { __ } from "@wordpress/i18n"; |
| 2 |
import { useBuilderContext } from "quickbuilder"; |
| 3 |
import React, { useCallback } from "react"; |
| 4 |
import { apiFetch } from "../../utils"; |
| 5 |
import toastAlert from "../../utils/toastAlert"; |
| 6 |
import { getLayoutPicks, hasLayoutPicks } from "./layoutStore"; |
| 7 |
|
| 8 |
/** |
| 9 |
* Finalize step content: the in-content "Finish setup" call to action. |
| 10 |
* |
| 11 |
* Nothing in the wizard is persisted until this runs — it saves |
| 12 |
* `betterdocs_settings`, the chosen Customize layouts, and (optionally) the |
| 13 |
* sample docs, then redirects to the dashboard. This mirrors the legacy footer |
| 14 |
* Launch button so the primary action lives with the content, not at the bottom. |
| 15 |
*/ |
| 16 |
const FinishPanel = (props) => { |
| 17 |
const context = useBuilderContext(); |
| 18 |
const isSubmitting = context?.isSubmitting; |
| 19 |
|
| 20 |
const handleFinish = useCallback(() => { |
| 21 |
if (context?.isSubmitting) { |
| 22 |
return; |
| 23 |
} |
| 24 |
|
| 25 |
context.setSubmitting(true); |
| 26 |
|
| 27 |
if (context?.values?.enable_sample_data) { |
| 28 |
apiFetch.post("create-sample-docs", { action: "create-dummy-data" }); |
| 29 |
} |
| 30 |
|
| 31 |
// Persist the chosen Customize-step layouts as theme_mods (only if the |
| 32 |
// user visited that step), alongside the rest of the wizard's save. |
| 33 |
if (hasLayoutPicks()) { |
| 34 |
apiFetch.post("customize/layouts", { layouts: getLayoutPicks() }); |
| 35 |
} |
| 36 |
|
| 37 |
// Dark mode is a client cookie (utils/darkMode), never a saved setting — |
| 38 |
// do NOT persist it here, or the theme would diverge from that cookie. |
| 39 |
apiFetch |
| 40 |
.post("settings", { ...context.values }) |
| 41 |
.then((res) => { |
| 42 |
if (res?.success) { |
| 43 |
document.cookie = |
| 44 |
"betterdocs_insights_allowed=; expires=Thu, 01 Jan 2000 00:00:00 UTC; path=/;"; |
| 45 |
// Setup complete — clear the persisted sample-docs preview. |
| 46 |
try { |
| 47 |
localStorage.removeItem("betterdocs_setup_generated_docs"); |
| 48 |
} catch (e) {} |
| 49 |
toastAlert( |
| 50 |
"success", |
| 51 |
__("Changes Saved Successfully.", "betterdocs") |
| 52 |
).then(() => { |
| 53 |
const url = new URL(window.location.href); |
| 54 |
url.search = ""; |
| 55 |
url.searchParams.set("page", "betterdocs-admin"); |
| 56 |
window.location.replace(url.href); |
| 57 |
}); |
| 58 |
} else { |
| 59 |
toastAlert( |
| 60 |
res?.code === "nothing_changed" ? "info" : "error", |
| 61 |
__(res?.message ?? "Something went wrong.", "betterdocs") |
| 62 |
); |
| 63 |
} |
| 64 |
}) |
| 65 |
.catch(() => { |
| 66 |
toastAlert("error", __("Something went wrong.", "betterdocs")); |
| 67 |
}) |
| 68 |
.finally(() => { |
| 69 |
context.setSubmitting(false); |
| 70 |
if (context?.config?.save_locally) { |
| 71 |
localStorage.removeItem("quickbuilder_active_tab"); |
| 72 |
} |
| 73 |
}); |
| 74 |
}, [context]); |
| 75 |
|
| 76 |
return ( |
| 77 |
<div className="betterdocs-finish"> |
| 78 |
<div className="betterdocs-finish-icon"> |
| 79 |
<svg |
| 80 |
viewBox="0 0 24 24" |
| 81 |
fill="none" |
| 82 |
stroke="currentColor" |
| 83 |
strokeWidth="1.7" |
| 84 |
strokeLinecap="round" |
| 85 |
strokeLinejoin="round" |
| 86 |
> |
| 87 |
<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" /> |
| 88 |
<path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" /> |
| 89 |
<path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" /> |
| 90 |
<path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" /> |
| 91 |
</svg> |
| 92 |
</div> |
| 93 |
|
| 94 |
<h3 className="betterdocs-finish-title"> |
| 95 |
{__("Save & apply your setup", "betterdocs")} |
| 96 |
</h3> |
| 97 |
<p className="betterdocs-finish-text"> |
| 98 |
{__( |
| 99 |
"Nothing is saved until you finish. Click below to store your settings, apply your configuration, and head to your BetterDocs dashboard.", |
| 100 |
"betterdocs" |
| 101 |
)} |
| 102 |
</p> |
| 103 |
|
| 104 |
<button |
| 105 |
type="button" |
| 106 |
className="betterdocs-finish-btn" |
| 107 |
onClick={handleFinish} |
| 108 |
disabled={isSubmitting} |
| 109 |
> |
| 110 |
{isSubmitting |
| 111 |
? __("Finishing…", "betterdocs") |
| 112 |
: __("Finish setup", "betterdocs")} |
| 113 |
</button> |
| 114 |
|
| 115 |
<p className="betterdocs-finish-hint"> |
| 116 |
{__( |
| 117 |
"You can revisit any step above before finishing.", |
| 118 |
"betterdocs" |
| 119 |
)} |
| 120 |
</p> |
| 121 |
</div> |
| 122 |
); |
| 123 |
}; |
| 124 |
|
| 125 |
export default FinishPanel; |
| 126 |
|
