Emails
1 month ago
EngagementChart
2 months ago
MediaHub
1 month ago
Onboarding
2 months ago
Popup
2 months ago
Skeletons
1 month ago
WhatsNew
2 months ago
charts
2 months ago
test
2 months ago
AdminMenuSync.js
2 months ago
ChartEmptyState.js
2 months ago
ChooseDate.js
2 months ago
ColorPicker.js
2 months ago
ExtendPlugins.js
2 months ago
Filters.js
2 months ago
Link.js
2 months ago
Navbar.js
1 month ago
NoFound.js
2 months ago
PageHeader.js
2 months ago
PluginRecommendations.js
2 months ago
PostScheduleField.js
2 months ago
PrestoPlayerIcon.js
2 months ago
ProGateOverlay.js
2 months ago
QuickAccess.js
2 months ago
RankedTable.js
2 months ago
StatCard.js
2 months ago
TopMedia.js
2 months ago
TopPerformingMedia.js
2 months ago
TopUsers.js
2 months ago
TruncatedTitle.js
2 months ago
UpgradeNotice.js
2 months ago
UpgradeToPro.js
2 months ago
VideoModal.js
2 months ago
WelcomeBanner.js
2 months ago
Navbar.js
258 lines
| 1 | const { __ } = wp.i18n; |
| 2 | const { sprintf } = wp.i18n; |
| 3 | import { |
| 4 | Button, |
| 5 | Topbar, |
| 6 | Badge, |
| 7 | Tabs, |
| 8 | Tooltip, |
| 9 | DropdownMenu, |
| 10 | } from "@bsf/force-ui"; |
| 11 | import { CircleHelp, Book, Ticket, Youtube, Info } from "lucide-react"; |
| 12 | import { useLocation } from "../router/router"; |
| 13 | import Link from "./Link"; |
| 14 | import PrestoPlayerIcon from "./PrestoPlayerIcon"; |
| 15 | import WhatsNewRSS from "./WhatsNew"; |
| 16 | import UpgradeNotice from "./UpgradeNotice"; |
| 17 | |
| 18 | const NAV_ITEMS_ALL = [ |
| 19 | { slug: "Dashboard", text: __("Dashboard", "presto-player") }, |
| 20 | { slug: "MediaHub", text: __("Media Hub", "presto-player") }, |
| 21 | { slug: "Analytics", text: __("Analytics", "presto-player") }, |
| 22 | { |
| 23 | slug: "Emails", |
| 24 | text: __("Emails", "presto-player"), |
| 25 | requireManageOptions: true, |
| 26 | }, |
| 27 | { slug: "Settings", text: __("Settings", "presto-player") }, |
| 28 | { slug: "Learn", text: __("Learn", "presto-player") }, |
| 29 | ]; |
| 30 | |
| 31 | const getNavItems = () => { |
| 32 | const canManageEmails = !!window?.prestoPlayer?.canManageEmailSubmissions; |
| 33 | return NAV_ITEMS_ALL.filter((item) => { |
| 34 | if (item.requireManageOptions && !canManageEmails) return false; |
| 35 | return true; |
| 36 | }); |
| 37 | }; |
| 38 | |
| 39 | const HeaderItem = ({ icon: Icon, onClick, markup, isActive = false }) => { |
| 40 | if (markup) { |
| 41 | return markup; |
| 42 | } |
| 43 | |
| 44 | return ( |
| 45 | <Button |
| 46 | className={`${ |
| 47 | isActive ? "text-brand-primary-600 bg-button-tertiary-hover" : "" |
| 48 | }`} |
| 49 | icon={<Icon aria-label="icon" role="img" />} |
| 50 | iconPosition="left" |
| 51 | size="sm" |
| 52 | tag="button" |
| 53 | type="button" |
| 54 | variant="ghost" |
| 55 | onClick={onClick} |
| 56 | ></Button> |
| 57 | ); |
| 58 | }; |
| 59 | |
| 60 | const Navbar = () => { |
| 61 | const location = useLocation(); |
| 62 | const currentTab = location.params?.tab || "Dashboard"; |
| 63 | |
| 64 | const VERSION = window?.prestoPlayer?.version |
| 65 | ? sprintf(__("v%s", "presto-player"), window.prestoPlayer.version) |
| 66 | : false; |
| 67 | |
| 68 | const PRO_VERSION = window?.prestoPlayer?.proVersion |
| 69 | ? sprintf(__("v%s", "presto-player"), window.prestoPlayer.proVersion) |
| 70 | : false; |
| 71 | |
| 72 | const premiumVersionName = __("Pro", "presto-player"); |
| 73 | |
| 74 | const topHeaderRightItems = [ |
| 75 | { |
| 76 | icon: CircleHelp, |
| 77 | label: "Circle", |
| 78 | markup: ( |
| 79 | <DropdownMenu placement="bottom-end"> |
| 80 | <DropdownMenu.Trigger> |
| 81 | <Button |
| 82 | icon={<CircleHelp aria-label="icon" role="img" />} |
| 83 | iconPosition="left" |
| 84 | size="sm" |
| 85 | tag="button" |
| 86 | type="button" |
| 87 | variant="ghost" |
| 88 | /> |
| 89 | </DropdownMenu.Trigger> |
| 90 | <DropdownMenu.ContentWrapper> |
| 91 | <DropdownMenu.Content className="w-60"> |
| 92 | <DropdownMenu.List> |
| 93 | <DropdownMenu.Item |
| 94 | onClick={() => window.open("https://prestoplayer.com/docs/")} |
| 95 | > |
| 96 | <Book aria-label="icon" role="img" /> |
| 97 | <span>{__("Knowledge base", "presto-player")}</span> |
| 98 | </DropdownMenu.Item> |
| 99 | <DropdownMenu.Item |
| 100 | onClick={() => |
| 101 | window.open("https://prestoplayer.com/support/") |
| 102 | } |
| 103 | > |
| 104 | <Ticket aria-label="icon" role="img" /> |
| 105 | <span>{__("Support ticket", "presto-player")}</span> |
| 106 | </DropdownMenu.Item> |
| 107 | <DropdownMenu.Item |
| 108 | onClick={() => |
| 109 | window.open( |
| 110 | "https://www.youtube.com/playlist?list=PLiEQfBIWdTTLiE6ch4DsqlsfRIrJ1emLV" |
| 111 | ) |
| 112 | } |
| 113 | > |
| 114 | <Youtube aria-label="icon" role="img" /> |
| 115 | <span>{__("Video tutorials", "presto-player")}</span> |
| 116 | </DropdownMenu.Item> |
| 117 | </DropdownMenu.List> |
| 118 | </DropdownMenu.Content> |
| 119 | </DropdownMenu.ContentWrapper> |
| 120 | </DropdownMenu> |
| 121 | ), |
| 122 | }, |
| 123 | ]; |
| 124 | |
| 125 | return ( |
| 126 | <> |
| 127 | <UpgradeNotice /> |
| 128 | <Topbar |
| 129 | className={`py-0 min-h-fit max-h-14 z-10 shadow-sm sticky top-[var(--presto-admin-bar-h)] bg-background-primary`} |
| 130 | > |
| 131 | <Topbar.Left> |
| 132 | <Topbar.Item> |
| 133 | <Link |
| 134 | params={{ |
| 135 | page: "presto-dashboard", |
| 136 | tab: "Dashboard", |
| 137 | }} |
| 138 | > |
| 139 | <PrestoPlayerIcon /> |
| 140 | </Link> |
| 141 | </Topbar.Item> |
| 142 | </Topbar.Left> |
| 143 | |
| 144 | <Topbar.Middle align="left"> |
| 145 | <Tabs.Group |
| 146 | activeItem={currentTab} |
| 147 | iconPosition="left" |
| 148 | orientation="horizontal" |
| 149 | size="sm" |
| 150 | variant="underline" |
| 151 | width="auto" |
| 152 | > |
| 153 | {getNavItems().map((item) => ( |
| 154 | <Link |
| 155 | key={item.slug} |
| 156 | params={{ |
| 157 | page: "presto-dashboard", |
| 158 | tab: item.slug, |
| 159 | }} |
| 160 | > |
| 161 | <Tabs.Tab |
| 162 | slug={item.slug} |
| 163 | text={item.text} |
| 164 | className="h-14 text-sm" |
| 165 | /> |
| 166 | </Link> |
| 167 | ))} |
| 168 | </Tabs.Group> |
| 169 | </Topbar.Middle> |
| 170 | |
| 171 | <Topbar.Right gap="xs"> |
| 172 | <Topbar.Item className="gap-2"> |
| 173 | <Tooltip |
| 174 | arrow |
| 175 | placement="bottom" |
| 176 | title={__("Core", "presto-player")} |
| 177 | triggers={["hover", "focus"]} |
| 178 | variant="dark" |
| 179 | > |
| 180 | <Badge |
| 181 | label={VERSION} |
| 182 | className="cursor-default" |
| 183 | size="sm" |
| 184 | variant="neutral" |
| 185 | closable={false} |
| 186 | /> |
| 187 | </Tooltip> |
| 188 | |
| 189 | {window?.prestoPlayer?.license_status === "licensed" && |
| 190 | PRO_VERSION && ( |
| 191 | <Tooltip |
| 192 | arrow |
| 193 | placement="bottom" |
| 194 | className="" |
| 195 | title={premiumVersionName} |
| 196 | triggers={["hover", "focus"]} |
| 197 | variant="dark" |
| 198 | > |
| 199 | <Badge |
| 200 | label={PRO_VERSION} |
| 201 | className="cursor-default !text-[#991ef7] !bg-[#991ef7]/10 !border-[#991ef7]/20" |
| 202 | size="sm" |
| 203 | variant="neutral" |
| 204 | closable={false} |
| 205 | /> |
| 206 | </Tooltip> |
| 207 | )} |
| 208 | |
| 209 | {window?.prestoPlayer?.license_status === "unlicensed" && ( |
| 210 | <Tooltip |
| 211 | arrow |
| 212 | placement="bottom" |
| 213 | className="" |
| 214 | title={__("Unlicensed", "presto-player")} |
| 215 | triggers={["hover", "focus"]} |
| 216 | variant="dark" |
| 217 | > |
| 218 | <Badge |
| 219 | label={__("Unlicensed", "presto-player")} |
| 220 | className="cursor-default" |
| 221 | size="sm" |
| 222 | variant="red" |
| 223 | closable={false} |
| 224 | icon={<Info />} |
| 225 | /> |
| 226 | </Tooltip> |
| 227 | )} |
| 228 | </Topbar.Item> |
| 229 | |
| 230 | <Topbar.Item className="gap-2"> |
| 231 | {topHeaderRightItems.map((item, index) => ( |
| 232 | <HeaderItem |
| 233 | key={`${item.label}-${index}`} |
| 234 | {...item} |
| 235 | isCollapsed={true} |
| 236 | /> |
| 237 | ))} |
| 238 | <Tooltip |
| 239 | arrow |
| 240 | placement="bottom" |
| 241 | className="" |
| 242 | title={__("What's New?", "presto-player")} |
| 243 | triggers={["hover", "focus"]} |
| 244 | variant="dark" |
| 245 | > |
| 246 | <div> |
| 247 | <WhatsNewRSS /> |
| 248 | </div> |
| 249 | </Tooltip> |
| 250 | </Topbar.Item> |
| 251 | </Topbar.Right> |
| 252 | </Topbar> |
| 253 | </> |
| 254 | ); |
| 255 | }; |
| 256 | |
| 257 | export default Navbar; |
| 258 |