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
QuickAccess.js
101 lines
| 1 | import React from "react"; |
| 2 | const { __ } = wp.i18n; |
| 3 | import { Container, Label, Text } from "@bsf/force-ui"; |
| 4 | import { HelpCircle, Star, Headphones, Crown, Sparkles } from "lucide-react"; |
| 5 | import useUpgradeCTA from "../hooks/useUpgradeCTA"; |
| 6 | import { useHistory } from "../router/router"; |
| 7 | |
| 8 | const QuickAccess = () => { |
| 9 | // Plugin status data from WordPress |
| 10 | const prestoPlayerData = window.prestoPlayer || {}; |
| 11 | const history = useHistory(); |
| 12 | const upgrade = useUpgradeCTA(history); |
| 13 | |
| 14 | const quickAccessItems = [ |
| 15 | { |
| 16 | id: "1", |
| 17 | icon: <Sparkles className="w-4 h-4" />, |
| 18 | label: __("Guided Onboarding", "presto-player"), |
| 19 | link: prestoPlayerData?.onboardingUrl || "#", |
| 20 | internal: true, |
| 21 | }, |
| 22 | { |
| 23 | id: "2", |
| 24 | icon: <HelpCircle className="w-4 h-4" />, |
| 25 | label: __("Help Center", "presto-player"), |
| 26 | link: "https://prestoplayer.com/docs/", |
| 27 | }, |
| 28 | { |
| 29 | id: "3", |
| 30 | icon: <Headphones className="w-4 h-4" />, |
| 31 | label: __("Open Support Ticket", "presto-player"), |
| 32 | link: "https://prestoplayer.com/contact/", |
| 33 | }, |
| 34 | { |
| 35 | id: "4", |
| 36 | icon: <Star className="w-4 h-4" />, |
| 37 | label: __("Leave Us a Review", "presto-player"), |
| 38 | link: "https://wordpress.org/support/plugin/presto-player/reviews/#new-post", |
| 39 | }, |
| 40 | { |
| 41 | id: "5", |
| 42 | icon: <Crown className="w-4 h-4" />, |
| 43 | label: upgrade.label, |
| 44 | link: upgrade.href, |
| 45 | internal: upgrade.isProUnlicensed, |
| 46 | onClick: upgrade.onClick, |
| 47 | condition: !upgrade.isPremium, |
| 48 | }, |
| 49 | ]; |
| 50 | |
| 51 | return ( |
| 52 | <Container |
| 53 | containerType="flex" |
| 54 | direction="column" |
| 55 | className="p-3 border-0.5 border-solid rounded-xl shadow-sm bg-background-primary border-border-subtle" |
| 56 | gap="xs" |
| 57 | > |
| 58 | <Container.Item className="p-1 md:w-full lg:w-full"> |
| 59 | <Label className="font-semibold"> |
| 60 | {__("Quick Access", "presto-player")} |
| 61 | </Label> |
| 62 | </Container.Item> |
| 63 | <Container.Item className="flex flex-col gap-1 p-1 rounded-lg md:w-full lg:w-full bg-field-primary-background"> |
| 64 | {quickAccessItems.map( |
| 65 | (button) => |
| 66 | button?.condition !== false && ( |
| 67 | <Text |
| 68 | key={button.id} |
| 69 | as="a" |
| 70 | href={button.link} |
| 71 | target={button.internal ? "_self" : "_blank"} |
| 72 | rel={button.internal ? undefined : "noreferrer"} |
| 73 | onClick={button.onClick} |
| 74 | aria-label={button.label} |
| 75 | className="flex items-center gap-1 p-2 rounded-md bg-background-primary shadow-soft-shadow-inner no-underline hover:no-underline cursor-pointer" |
| 76 | > |
| 77 | <Container |
| 78 | containerType="flex" |
| 79 | direction="row" |
| 80 | className="items-center gap-1 p-1" |
| 81 | align="center" |
| 82 | > |
| 83 | <Container.Item className="flex items-center justify-center text-text-primary"> |
| 84 | {button.icon} |
| 85 | </Container.Item> |
| 86 | <Container.Item className="flex items-center"> |
| 87 | <Text className="px-1 py-0 text-sm font-medium text-text-primary"> |
| 88 | {button.label} |
| 89 | </Text> |
| 90 | </Container.Item> |
| 91 | </Container> |
| 92 | </Text> |
| 93 | ) |
| 94 | )} |
| 95 | </Container.Item> |
| 96 | </Container> |
| 97 | ); |
| 98 | }; |
| 99 | |
| 100 | export default QuickAccess; |
| 101 |