[6.x] Redesign trial mode banner (#12239)

* wip

* refactor licensing messaging, add global header badge

* wip ...

- Move to a vue component instead of having logic in the root App.vue
- Closing the modal or navigating to the licenses page will trigger a snooze
- License manager alert only cares about when licenses are invalid
- License request failues are handled on the pro badge by turning it yellow and putting the error in a tooltip.
- Tooltip component becomes "disabled" and just renders the slot if there's no text.

* Snooze is 5 minutes on production, a full day in dev.

* No longer need hasLicenseBanner. The component won't be rendered at all if it doesnt need to be.

* Make modal non-dismissible. It was so easy to accidentally close the modal by clicking outside of it and now you wont see it again for a whole day.

* If on production, the pro badge says "Unlicensed" in red instead of "Trial Mode" in green.

* Improve badge-as-link dark hover colors

---------

Co-authored-by: Jason Varga <jason@pixelfear.com>

Author: jackmcdade

resources/js/bootstrap/App.vue

@@ -34,6 +34,7 @@ import SitesEditForm from '../components/sites/EditForm.vue';
 import CommandPalette from '../components/command-palette/CommandPalette.vue';
 import ItemActions from '../components/actions/ItemActions.vue';
 import BulkActions from '../components/actions/BulkActions.vue';
+import LicensingAlert from '../components/LicensingAlert.vue';
 
 import { defineAsyncComponent } from 'vue';
 import { ConfigProvider } from 'reka-ui';
@@ -77,14 +78,13 @@ export default {
         ConfigProvider,
         ItemActions,
         BulkActions,
+        LicensingAlert,
     },
 
     data() {
         return {
             navOpen: false,
-            showBanner: true,
             appendedComponents: Statamic.$components.components,
-            isLicensingBannerSnoozed: localStorage.getItem(`statamic.snooze_license_banner`) > new Date().valueOf(),
             copyToClipboardModalUrl: null,
         };
     },
@@ -113,8 +113,6 @@ export default {
 
         this.fixAutofocus();
 
-        this.showBanner = !this.isLicensingBannerSnoozed && Statamic.$config.get('hasLicenseBanner');
-
         this.$toast.registerInterceptor(this.$axios);
         this.$toast.displayInitialToasts();
     },
@@ -147,13 +145,6 @@ export default {
             localStorage.setItem('statamic.nav', this.navOpen ? 'open' : 'closed');
         },
 
-
-
-        hideBanner() {
-            this.showBanner = false;
-            localStorage.setItem(`statamic.snooze_license_banner`, new Date(Date.now() + 5 * 60 * 1000).valueOf());
-        },
-
         fixAutofocus() {
             // Fix autofocus issues in Safari and Firefox
             setTimeout(() => {

resources/js/components/LicensingAlert.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { Modal, Description, Button } from '@/components/ui';
+import { computed, ref } from 'vue';
+
+const props = defineProps({
+    message: String,
+    testing: Boolean,
+    manageUrl: String,
+});
+
+const key = 'statamic.snooze_license_banner';
+const open = ref(localStorage.getItem(key) < new Date().valueOf());
+const snoozeMinutes = computed(() => props.testing ? (24 * 60) : 5);
+const snoozeMilliseconds = computed(() => snoozeMinutes.value * 60 * 1000);
+
+function snooze() {
+    open.value = false;
+    localStorage.setItem(key, new Date(Date.now() + snoozeMilliseconds.value).valueOf());
+}
+
+function manageLicenses() {
+    snooze();
+    window.location = props.manageUrl;
+}
+</script>
+
+<template>
+    <Modal
+        :title="__('Licensing Alert')"
+        :open="open"
+        @update:open="snooze"
+        icon="alert-alarm-bell"
+        class="[&_[data-ui-heading]]:text-red-700! [&_svg]:text-red-700! dark:[&_[data-ui-heading]]:text-red-400! dark:[&_svg]:text-red-400!'"
+        :dismissible="false"
+    >
+        <div class="flex items-center justify-between">
+            <Description :text="message" />
+        </div>
+        <template #footer>
+            <div class="flex items-center justify-end space-x-3 pt-3 pb-1">
+                <Button @click="snooze" :text="__('Snooze')" variant="ghost" tabindex="-1" />
+                <Button v-if="manageUrl" @click="manageLicenses" :text="__('Manage Licenses')" />
+            </div>
+        </template>
+    </Modal>
+</template>

resources/js/components/ui/Badge.vue

@@ -36,25 +36,22 @@ const badgeClasses = computed(() => {
                 black: 'bg-gray-900 border-black text-white dark:bg-gray-300/6 dark:text-gray-300 [a]:hover:bg-black/90 [button]:hover:bg-black/90',
                 blue: 'bg-blue-100/80 border-blue-300 text-blue-700 dark:bg-blue-300/6 dark:text-blue-300 [a]:hover:bg-blue-200/60 [button]:hover:bg-blue-200/60',
                 cyan: 'bg-cyan-100/80 border-cyan-400 text-cyan-700 dark:bg-cyan-300/6 dark:text-cyan-300 [a]:hover:bg-cyan-200/60 [button]:hover:bg-cyan-200/60',
-                default:
-                    'bg-gray-100/80 border-gray-300 dark:bg-gray-800 dark:text-gray-100 text-gray-700 [a]:hover:bg-gray-200/50 dark:[a]:hover:bg-gray-700/50 [button]:hover:bg-gray-200/50',
-                emerald:
-                    'bg-emerald-100/80 border-emerald-400 text-emerald-700 dark:bg-emerald-300/6 dark:text-emerald-300 [a]:hover:bg-emerald-200/60 [button]:hover:bg-emerald-200/60',
-                fuchsia:
-                    'bg-fuchsia-100/80 border-fuchsia-300 text-fuchsia-700 dark:bg-fuschia-300/6 dark:text-fuschia-300 [a]:hover:bg-fuchsia-200/60 [button]:hover:bg-fuchsia-200/60',
-                green: 'bg-green-100/80 border-green-400 text-green-700 dark:bg-green-300/6 dark:text-green-300 [a]:hover:bg-green-200/60 [button]:hover:bg-green-200/60',
-                indigo: 'bg-indigo-100/80 border-indigo-300 text-indigo-700 dark:bg-indigo-300/6 dark:text-indigo-300 [a]:hover:bg-indigo-200/60 [button]:hover:bg-indigo-200/60',
-                lime: 'bg-lime-100 border-lime-400 text-lime-700 dark:bg-lime-300/6 dark:text-lime-300 [a]:hover:bg-lime-200/80 [button]:hover:bg-lime-200/80',
-                orange: 'bg-orange-100 border-orange-400 text-orange-700 dark:bg-orange-300/6 dark:text-orange-300 [a]:hover:bg-orange-200/60 [button]:hover:bg-orange-200/60',
-                pink: 'bg-pink-100/80 border-pink-300 text-pink-800 dark:bg-pink-300/6 dark:text-pink-300 [a]:hover:bg-pink-200/60 [button]:hover:bg-pink-200/60',
-                purple: 'bg-purple-100/80 border-purple-300 text-purple-800 dark:bg-purple-300/6 dark:text-purple-300 [a]:hover:bg-purple-200/60 [button]:hover:bg-purple-200/60',
-                red: 'bg-red-100/80 border-red-400/80 text-red-700 dark:bg-red-300/6 dark:text-red-300 [a]:hover:bg-red-200/60 [button]:hover:bg-red-200/60',
-                rose: 'bg-rose-100/80 border-rose-300 text-rose-800 dark:bg-rose-300/6 dark:text-rose-300 [a]:hover:bg-rose-200/60 [button]:hover:bg-rose-200/60',
-                sky: 'bg-sky-100/80 border-sky-300 text-sky-700 dark:bg-sky-300/6 dark:text-sky-300 [a]:hover:bg-sky-200/60 [button]:hover:bg-sky-200/60',
-                teal: 'bg-teal-100 border-teal-400 text-teal-700 dark:bg-teal-300/6 dark:text-teal-300 [a]:hover:bg-teal-200/70 [button]:hover:bg-teal-200/70',
-                violet: 'bg-violet-100/80 border-violet-300 text-violet-700 dark:bg-violet-300/6 dark:text-violet-300 [a]:hover:bg-violet-200/60 [button]:hover:bg-violet-200/60',
-                white: 'bg-white border-gray-300 text-gray-700 dark:bg-gray-300/6 dark:text-gray-300 [a]:hover:bg-gray-200/30 [button]:hover:bg-gray-200/30',
-                yellow: 'bg-yellow-100 border-yellow-400 text-yellow-700 dark:bg-yellow-300/6 dark:text-yellow-300 [a]:hover:bg-yellow-200/80 [button]:hover:bg-yellow-200/80',
+                default: 'bg-gray-100/80 border-gray-300 dark:bg-gray-800 dark:text-gray-100 text-gray-700 [a]:hover:bg-gray-200/50 dark:[a]:hover:bg-gray-700/50 [button]:hover:bg-gray-200/50',
+                emerald: 'bg-emerald-100/80 border-emerald-400 text-emerald-700 dark:bg-emerald-300/6 dark:text-emerald-300 [a]:hover:bg-emerald-200/60 [button]:hover:bg-emerald-200/60',
+                fuchsia: 'bg-fuchsia-100/80 border-fuchsia-300 text-fuchsia-700 dark:bg-fuschia-300/6 dark:text-fuschia-300 [a]:hover:bg-fuchsia-200/60 [button]:hover:bg-fuchsia-200/60 dark:[a]:hover:bg-fuchsia-300/15',
+                green: 'bg-green-100/80 border-green-400 text-green-700 dark:bg-green-300/6 dark:text-green-300 [a]:hover:bg-green-200/60 [button]:hover:bg-green-200/60 dark:[a]:hover:bg-green-300/15',
+                indigo: 'bg-indigo-100/80 border-indigo-300 text-indigo-700 dark:bg-indigo-300/6 dark:text-indigo-300 [a]:hover:bg-indigo-200/60 [button]:hover:bg-indigo-200/60 dark:[a]:hover:bg-indigo-300/15',
+                lime: 'bg-lime-100 border-lime-400 text-lime-700 dark:bg-lime-300/6 dark:text-lime-300 [a]:hover:bg-lime-200/80 [button]:hover:bg-lime-200/80 dark:[a]:hover:bg-lime-300/15',
+                orange: 'bg-orange-100 border-orange-400 text-orange-700 dark:bg-orange-300/6 dark:text-orange-300 [a]:hover:bg-orange-200/60 [button]:hover:bg-orange-200/60 dark:[a]:hover:bg-orange-300/15',
+                pink: 'bg-pink-100/80 border-pink-300 text-pink-800 dark:bg-pink-300/6 dark:text-pink-300 [a]:hover:bg-pink-200/60 [button]:hover:bg-pink-200/60 dark:[a]:hover:bg-pink-300/15',
+                purple: 'bg-purple-100/80 border-purple-300 text-purple-800 dark:bg-purple-300/6 dark:text-purple-300 [a]:hover:bg-purple-200/60 [button]:hover:bg-purple-200/60 dark:[a]:hover:bg-purple-300/15',
+                red: 'bg-red-100/80 border-red-400/80 text-red-700 dark:bg-red-300/6 dark:text-red-300 [a]:hover:bg-red-200/60 [button]:hover:bg-red-200/60 dark:[a]:hover:bg-red-300/15',
+                rose: 'bg-rose-100/80 border-rose-300 text-rose-800 dark:bg-rose-300/6 dark:text-rose-300 [a]:hover:bg-rose-200/60 [button]:hover:bg-rose-200/60 dark:[a]:hover:bg-rose-300/15',
+                sky: 'bg-sky-100/80 border-sky-300 text-sky-700 dark:bg-sky-300/6 dark:text-sky-300 [a]:hover:bg-sky-200/60 [button]:hover:bg-sky-200/60 dark:[a]:hover:bg-sky-300/15',
+                teal: 'bg-teal-100 border-teal-400 text-teal-700 dark:bg-teal-300/6 dark:text-teal-300 [a]:hover:bg-teal-200/70 [button]:hover:bg-teal-200/70 dark:[a]:hover:bg-teal-300/15',
+                violet: 'bg-violet-100/80 border-violet-300 text-violet-700 dark:bg-violet-300/6 dark:text-violet-300 [a]:hover:bg-violet-200/60 [button]:hover:bg-violet-200/60 dark:[a]:hover:bg-violet-300/15',
+                white: 'bg-white border-gray-300 text-gray-700 dark:bg-gray-300/6 dark:text-gray-300 [a]:hover:bg-gray-200/30 [button]:hover:bg-gray-200/30 dark:[a]:hover:bg-gray-300/15',
+                yellow: 'bg-yellow-100 border-yellow-400 text-yellow-700 dark:bg-yellow-300/6 dark:text-yellow-300 [a]:hover:bg-yellow-200/80 [button]:hover:bg-yellow-200/80 dark:[a]:hover:bg-yellow-300/15',
             },
             variant: {
                 default: 'border dark:border-none shadow-ui-sm',

resources/js/components/ui/Modal/Modal.vue

@@ -3,11 +3,13 @@ import { cva } from 'cva';
 import { hasComponent } from '@/composables/has-component.js';
 import { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger } from 'reka-ui';
 import { computed, getCurrentInstance, ref, watch } from 'vue';
+import { Icon } from '@/components/ui';
 
 const emit = defineEmits(['update:open']);
 
 const props = defineProps({
     title: { type: String, default: '' },
+    icon: { type: [String, null], default: null },
     open: { type: Boolean, default: false },
     dismissible: { type: Boolean, default: true },
 });
@@ -70,8 +72,9 @@ function preventIfNotDismissible(event) {
                 @escape-key-down="preventIfNotDismissible"
             >
                 <div class="relative space-y-3 rounded-xl border border-gray-400/60 bg-white p-4 shadow-[0_1px_16px_-2px_rgba(63,63,71,0.2)] dark:border-none dark:bg-gray-800 dark:shadow-[0_10px_15px_rgba(0,0,0,.5)] dark:inset-shadow-2xs dark:inset-shadow-white/15" >
-                    <DialogTitle v-if="!hasModalTitleComponent" data-ui-modal-title class="font-medium">
-                        {{ title }}
+                    <DialogTitle v-if="!hasModalTitleComponent" data-ui-modal-title class="flex items-center gap-2">
+                        <Icon :name="icon" v-if="icon" class="size-4" />
+                        <ui-heading :text="title" size="lg" class="font-medium" />
                     </DialogTitle>
                     <slot />
                 </div>

resources/js/components/ui/Tooltip.vue

@@ -19,7 +19,7 @@ const triggerAttrs = computed(() => ({
 </script>
 
 <template>
-    <TooltipProvider :ariaLabel="tooltipText" :delay-duration="delay">
+    <TooltipProvider v-if="tooltipText" :ariaLabel="tooltipText" :delay-duration="delay">
         <TooltipRoot>
             <TooltipTrigger v-bind="triggerAttrs">
                 <slot />
@@ -46,4 +46,5 @@ const triggerAttrs = computed(() => ({
             </TooltipPortal>
         </TooltipRoot>
     </TooltipProvider>
+    <slot v-else />
 </template>

resources/lang/en/messages.php

@@ -173,14 +173,14 @@
     'licensing_error_unlicensed' => 'Unlicensed',
     'licensing_incorrect_key_format_body' => 'Your site key format is incorrect. Site keys are 16-character alphanumeric strings. Get your current key from your account at <a href="https://statamic.com" class="underline">statamic.com</a>. Do not use legacy UUID license keys.',
     'licensing_incorrect_key_format_heading' => 'Incorrect site key format',
-    'licensing_production_alert' => 'This site is using Statamic Pro and commercial addons. Please purchase appropriate licenses.',
-    'licensing_production_alert_addons' => 'This site is using commercial addons. Please purchase appropriate licenses.',
-    'licensing_production_alert_renew_statamic' => 'Using this version of Statamic Pro requires a license renewal.',
-    'licensing_production_alert_statamic' => 'This site is using Statamic Pro. Please purchase a license.',
-    'licensing_sync_instructions' => 'Data from statamic.com is synced once per hour. Force a sync to see any changes you\'ve made.',
-    'licensing_trial_mode_alert' => 'This site is using Statamic Pro and commercial addons. Valid licenses are required before launch.',
-    'licensing_trial_mode_alert_addons' => 'This site is using commercial addons. Valid licenses are required before launch.',
-    'licensing_trial_mode_alert_statamic' => 'This site is using Statamic Pro. A valid license is required before launch.',
+    'licensing_production_alert' => 'This site is running Statamic Pro and commercial addons on a production domain. To continue using these features, please ensure you have valid licenses.',
+    'licensing_production_alert_addons' => 'This site is using commercial addons on a production domain. To continue using these features, please ensure you have valid licenses.',
+    'licensing_production_alert_renew_statamic' => 'Your Statamic Pro license needs to be renewed to use this version. Please update your license or downgrade your Statamic version to continue.',
+    'licensing_production_alert_statamic' => 'This site is running Statamic Pro on a production domain. To continue using Pro features, please ensure you have a valid license.',
+    'licensing_sync_instructions' => 'License data syncs from statamic.com hourly. Use the sync button to check for any recent changes you\'ve made.',
+    'licensing_trial_mode_alert' => 'This site is using Statamic Pro and commercial addons in trial mode. Valid licenses will be required when you\'re ready to launch.',
+    'licensing_trial_mode_alert_addons' => 'This site is using commercial addons in trial mode. Valid licenses will be required when you\'re ready to launch.',
+    'licensing_trial_mode_alert_statamic' => 'Thanks for trying Statamic Pro! This site is currently in trial mode — please enter a license before your site goes live.',
     'licensing_utility_description' => 'View and resolve licensing details.',
     'max_depth_instructions' => 'Set the max page nesting level.',
     'max_items_instructions' => 'Set a maximum number of selectable items.',

resources/views/layout.blade.php

@@ -22,7 +22,6 @@ class="@yield('content-class') pt-14"
                     :class="{
                         'nav-closed': ! navOpen,
                         'nav-open': navOpen,
-                        'showing-license-banner': showBanner
                     }"
                 >
                     <main id="main" class="flex bg-body-bg dark:bg-dark-body-bg dark:border-t rounded-t-2xl dark:border-dark-body-border fixed top-14 inset-x-0 bottom-0 min-h-[calc(100vh-3.5rem)]">

resources/views/partials/global-header.blade.php

@@ -2,6 +2,8 @@
     use function Statamic\trans as __;
 @endphp
 
+@inject('licenses', 'Statamic\Licensing\LicenseManager')
+
 <header class="h-14 bg-global-header-bg dark:bg-dark-global-header-bg flex justify-between space-x-2 items-center text-white px-4 fixed overflow-x-auto top-0 inset-x-0 z-[3]">
     <a class="c-skip-link z-(--z-index-header) px-4 py-2 bg-blue-800 text-sm top-2.5 left-2.25 fixed opacity-0 -translate-y-24 focus:translate-y-0 focus:opacity-100 rounded-md" href="#main">
         {{ __('Skip to sidebar') }}
@@ -30,7 +32,24 @@
                 {{ $customLogoText ?? config('app.name') }}
             </a>
             @if (Statamic::pro())
-                <ui-badge size="sm" variant="flat" text="Pro" class="hidden sm:block select-none dark:bg-black/20!" />
+                @if ($licenses->valid())
+                    <ui-badge size="sm" variant="flat" text="{{ __('Pro') }}" class="hidden sm:block select-none dark:bg-black/20!" />
+                @else
+                    <ui-tooltip :text="{{ $licenses->requestFailed() ? "'".$licenses->requestFailureMessage()."'" : 'null' }}">
+                        <ui-badge
+                            @if ($licenses->requestFailed())
+                                color="yellow"
+                                icon="alert-warning-exclamation-mark"
+                            @elseif ($licenses->isOnPublicDomain())
+                                color="red"
+                            @else
+                                color="green"
+                            @endif
+                            href="{{ cp_route('utilities.licensing') }}"
+                            text="{{ __('Pro') }} – {{ $licenses->isOnPublicDomain() ? __('statamic::messages.licensing_error_unlicensed') : __('Trial Mode') }}"
+                        ></ui-badge>
+                    </ui-tooltip>
+                @endif
             @endif
         </div>
         @endif