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
UpgradeNotice.js
125 lines
| 1 | import { useState } from "react"; |
| 2 | import { Button, Container } from "@bsf/force-ui"; |
| 3 | import { X as XIcon } from "lucide-react"; |
| 4 | import { useHistory } from "../router/router"; |
| 5 | import useUpgradeCTA from "../hooks/useUpgradeCTA"; |
| 6 | |
| 7 | const { __ } = wp.i18n; |
| 8 | |
| 9 | const COOKIE_NAME = "presto_player_upgrade_notice_seen"; |
| 10 | const COOKIE_DAYS = 10; |
| 11 | |
| 12 | const getCookie = (name) => { |
| 13 | const match = document.cookie.match( |
| 14 | new RegExp( |
| 15 | "(?:^|; )" + name.replace(/([.$?*|{}()[\]\\/+^])/g, "\\$1") + "=([^;]*)" |
| 16 | ) |
| 17 | ); |
| 18 | if (!match) { |
| 19 | return null; |
| 20 | } |
| 21 | try { |
| 22 | return decodeURIComponent(match[1]); |
| 23 | } catch { |
| 24 | return null; |
| 25 | } |
| 26 | }; |
| 27 | |
| 28 | const setCookie = (name, value, days) => { |
| 29 | const expires = new Date(); |
| 30 | expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000); |
| 31 | const secure = window.location.protocol === "https:" ? "; Secure" : ""; |
| 32 | document.cookie = `${name}=${encodeURIComponent( |
| 33 | value |
| 34 | )}; expires=${expires.toUTCString()}; path=/; SameSite=Lax${secure}`; |
| 35 | }; |
| 36 | |
| 37 | const UpgradeNotice = () => { |
| 38 | const [showNotice, setShowNotice] = useState(() => !getCookie(COOKIE_NAME)); |
| 39 | const history = useHistory(); |
| 40 | const { |
| 41 | label, |
| 42 | onClick, |
| 43 | isProUnlicensed, |
| 44 | isLicenseInvalid, |
| 45 | isPremium, |
| 46 | renewLink, |
| 47 | } = useUpgradeCTA(history); |
| 48 | |
| 49 | if (isPremium) { |
| 50 | return null; |
| 51 | } |
| 52 | |
| 53 | if (!showNotice) { |
| 54 | return null; |
| 55 | } |
| 56 | |
| 57 | const handleClose = () => { |
| 58 | setShowNotice(false); |
| 59 | setCookie(COOKIE_NAME, "true", COOKIE_DAYS); |
| 60 | }; |
| 61 | |
| 62 | let lead; |
| 63 | if (isLicenseInvalid) { |
| 64 | lead = __( |
| 65 | "Your Presto Player Pro license has expired. Please renew to restore Pro Features, Premium Support & Automatic Plugin Updates.", |
| 66 | "presto-player" |
| 67 | ); |
| 68 | } else if (isProUnlicensed) { |
| 69 | lead = __("Your Pro license isn't activated yet.", "presto-player"); |
| 70 | } else { |
| 71 | lead = __("Ready to go beyond free plan?", "presto-player"); |
| 72 | } |
| 73 | |
| 74 | // The shared hook's defaults send unlicensed users to the in-app license tab. |
| 75 | // For an *invalid* key we instead want the primary CTA to renew (external) |
| 76 | // and surface a secondary "Buy Subscription" link as an alternative path. |
| 77 | const primaryLabel = isLicenseInvalid |
| 78 | ? __("Renew Now", "presto-player") |
| 79 | : label; |
| 80 | const primaryOnClick = isLicenseInvalid |
| 81 | ? (e) => { |
| 82 | e?.preventDefault?.(); |
| 83 | window.open(renewLink, "_blank", "noopener noreferrer"); |
| 84 | } |
| 85 | : onClick; |
| 86 | |
| 87 | return ( |
| 88 | <Container |
| 89 | className="relative bg-brand-background-hover-100 p-2 text-xs text-center gap-1" |
| 90 | align="center" |
| 91 | > |
| 92 | <p className="text-text-primary w-full lg:mx-0 m-0 p-0"> |
| 93 | <span className="font-semibold text-xs">{lead}</span>{" "} |
| 94 | <Button |
| 95 | variant="link" |
| 96 | className="p-0 [&>span]:p-0 underline underline-offset-2 font-normal" |
| 97 | size="xs" |
| 98 | onClick={primaryOnClick} |
| 99 | > |
| 100 | {primaryLabel} |
| 101 | </Button> |
| 102 | {!isProUnlicensed && ( |
| 103 | <span className="font-normal text-xs"> |
| 104 | {" " + |
| 105 | __("and unlock the full power of", "presto-player") + |
| 106 | " Presto Player!"} |
| 107 | </span> |
| 108 | )} |
| 109 | </p> |
| 110 | <Container.Item className="absolute right-2 inset-y-0 inline-flex items-center"> |
| 111 | <Button |
| 112 | variant="ghost" |
| 113 | size="xs" |
| 114 | className="p-1 hover:bg-transparent" |
| 115 | icon={<XIcon className="size-4" />} |
| 116 | onClick={handleClose} |
| 117 | aria-label={__("Dismiss upgrade notice", "presto-player")} |
| 118 | /> |
| 119 | </Container.Item> |
| 120 | </Container> |
| 121 | ); |
| 122 | }; |
| 123 | |
| 124 | export default UpgradeNotice; |
| 125 |