create-nextblock 0.2.78 → 0.8.1

package/templates/nextblock-template/app/cms/settings/packages/package-card.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { PackageDef } from '@nextblock-cms/utils';
+import { Button } from '@nextblock-cms/ui';
+import { deactivatePackage } from '../../../actions/package-actions';
+import { toast } from 'sonner';
+import { useState } from 'react';
+import { Loader2, CheckCircle, ExternalLink, FlaskConical, X } from 'lucide-react';
+
+const isSandbox = process.env.NEXT_PUBLIC_IS_SANDBOX === 'true';
+
+interface PackageCardProps {
+    pkg: PackageDef;
+    isActive: boolean;
+    licenseKey?: string;
+}
+
+export function PackageCard({ pkg, isActive, licenseKey }: PackageCardProps) {
+    const [loading, setLoading] = useState(false);
+    const [showSandboxModal, setShowSandboxModal] = useState(false);
+
+    const handleDeactivate = async () => {
+        if (!confirm('Are you sure you want to deactivate this package? functionality will be locked instantly.')) return;
+        setLoading(true);
+        try {
+            const res = await deactivatePackage(pkg.id);
+            if (res?.error) {
+                toast.error(res.error);
+            } else {
+                toast.success('Package deactivated.');
+            }
+        } catch {
+            toast.error('Deactivation failed');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <>
+            {/* Sandbox Mock Checkout Modal */}
+            {showSandboxModal && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={() => setShowSandboxModal(false)}>
+                    <div className="relative bg-background border rounded-xl shadow-2xl p-8 max-w-md mx-4" onClick={e => e.stopPropagation()}>
+                        <button
+                            onClick={() => setShowSandboxModal(false)}
+                            className="absolute top-4 right-4 text-muted-foreground hover:text-foreground transition-colors"
+                        >
+                            <X className="w-5 h-5" />
+                        </button>
+                        <div className="flex items-center gap-3 mb-4">
+                            <div className="p-2 rounded-full bg-amber-100 dark:bg-amber-900/20">
+                                <FlaskConical className="h-6 w-6 text-amber-600 dark:text-amber-400" />
+                            </div>
+                            <h2 className="text-xl font-semibold">Checkout Successful</h2>
+                        </div>
+                        <p className="text-muted-foreground mb-2">
+                            🎉 This is a <strong>Sandbox environment</strong>. The Freemius checkout is
+                            skipped here for demo purposes.
+                        </p>
+                        <p className="text-muted-foreground mb-6">
+                            To purchase a real license for your self-hosted NextBlock™ instance, visit:
+                        </p>
+                        <a
+                            href="https://nextblock.ca"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="block w-full text-center py-3 px-4 rounded-lg bg-primary text-primary-foreground font-semibold hover:opacity-90 transition-opacity"
+                        >
+                            Purchase at nextblock.ca
+                        </a>
+                    </div>
+                </div>
+            )}
+
+            <div className="border rounded-lg p-6 flex flex-col justify-between h-full bg-card shadow-sm">
+                <div>
+                    <div className="flex justify-between items-start mb-4">
+                        <div>
+                            <h3 className="text-xl font-semibold">{pkg.name}</h3>
+                            {isActive ? (
+                                <span className="inline-flex items-center text-xs font-medium px-2.5 py-0.5 rounded-full bg-green-100 text-green-800 mt-1">
+                                    <CheckCircle className="w-3 h-3 mr-1" />
+                                    Active
+                                </span>
+                            ) : (
+                                <span className="inline-flex items-center text-xs font-medium px-2.5 py-0.5 rounded-full bg-gray-100 text-gray-800 mt-1">
+                                    Inactive
+                                </span>
+                            )}
+                        </div>
+                    </div>
+                    <p className="text-muted-foreground mb-6">{pkg.description}</p>
+                </div>
+
+                <div className="pt-4 border-t">
+                    {isActive ? (
+                        <div className="flex flex-col gap-3">
+                            <div className="text-xs text-muted-foreground">
+                                License: <span className="font-mono bg-muted px-1 rounded">{licenseKey ? `•••• ${licenseKey.slice(-4)}` : '••••'}</span>
+                            </div>
+                            <Button variant="outline" size="sm" onClick={handleDeactivate} disabled={loading || isSandbox} className="w-full text-destructive hover:text-destructive">
+                                {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Deactivate License'}
+                            </Button>
+                        </div>
+                    ) : isSandbox ? (
+                        <Button className="w-full" onClick={() => setShowSandboxModal(true)}>
+                            <FlaskConical className="mr-2 w-4 h-4" />
+                            Buy License (Sandbox Demo)
+                        </Button>
+                    ) : (
+                        <Button asChild className="w-full">
+                            <a href="https://nextblock.ca" target="_blank" rel="noopener noreferrer">
+                                Buy License <ExternalLink className="ml-2 w-3 h-3" />
+                            </a>
+                        </Button>
+                    )}
+                </div>
+            </div>
+        </>
+    );
+}

package/templates/nextblock-template/app/cms/settings/packages/page.tsx

@@ -0,0 +1,49 @@
+
+import { NEXTBLOCK_PACKAGES } from '@nextblock-cms/utils';
+import { createClient } from '@nextblock-cms/db/server';
+import { ActivationForm } from './activation-form';
+import { PackageCard } from './package-card';
+
+export const dynamic = 'force-dynamic';
+
+export default async function PackagesPage() {
+  const supabase = await createClient();
+  
+  // Fetch all activations for this instance
+  const { data: activations } = await supabase
+    .from('package_activations')
+    .select('package_id, status, license_key')
+    .eq('status', 'active');
+
+  const activationMap = new Map();
+  if (activations) {
+      activations.forEach((a: any) => activationMap.set(a.package_id, a));
+  }
+
+  return (
+    <div className="container mx-auto py-10 max-w-5xl">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold tracking-tight">My Packages</h1>
+        <p className="text-muted-foreground mt-2">
+          Manage your premium features and licenses.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+        {Object.values(NEXTBLOCK_PACKAGES).map((pkg) => {
+            const activation = activationMap.get(pkg.id);
+            return (
+                <PackageCard 
+                    key={pkg.id} 
+                    pkg={pkg} 
+                    isActive={!!activation} 
+                    licenseKey={activation?.license_key}
+                />
+            );
+        })}
+      </div>
+
+      <ActivationForm />
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/settings/privacy/actions.ts

@@ -0,0 +1,53 @@
+'use server';
+
+import { createClient } from '@nextblock-cms/db/server';
+import { revalidatePath } from 'next/cache';
+import {
+  getPrivacySettings as readPrivacySettings,
+  savePrivacySettings,
+} from '../../../../lib/privacy/settings';
+import type { PrivacySettings } from '../../../../lib/privacy/types';
+
+export async function getPrivacySettings(): Promise<PrivacySettings> {
+  return readPrivacySettings();
+}
+
+async function assertAdmin(): Promise<void> {
+  const supabase = createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) {
+    throw new Error('You must be logged in to update settings.');
+  }
+  const { data: profile } = await supabase
+    .from('profiles')
+    .select('role')
+    .eq('id', user.id)
+    .single();
+  if (!profile || profile.role !== 'ADMIN') {
+    throw new Error('You do not have permission to perform this action.');
+  }
+}
+
+export async function updatePrivacySettings(formData: FormData) {
+  await assertAdmin();
+
+  const settings: PrivacySettings = {
+    banner_enabled: formData.get('banner_enabled') === 'true',
+    gtm_id: (formData.get('gtm_id')?.toString() ?? '').trim(),
+    ga_measurement_id: (formData.get('ga_measurement_id')?.toString() ?? '').trim(),
+    custom_scripts: formData.get('custom_scripts')?.toString() ?? '',
+    corporate: {
+      legal_name: (formData.get('legal_name')?.toString() ?? '').trim(),
+      address: (formData.get('address')?.toString() ?? '').trim(),
+      support_email: (formData.get('support_email')?.toString() ?? '').trim(),
+    },
+  };
+
+  await savePrivacySettings(settings);
+  // Footer (corporate identity) and the analytics guard live in the root layout.
+  revalidatePath('/', 'layout');
+
+  return { success: true, message: 'Privacy settings saved.' };
+}

package/templates/nextblock-template/app/cms/settings/privacy/components/PrivacyForm.tsx

@@ -0,0 +1,196 @@
+'use client';
+
+import { useRef, useState, useTransition } from 'react';
+import {
+  Alert,
+  AlertDescription,
+  Button,
+  Checkbox,
+  Input,
+  Label,
+  Separator,
+  Spinner,
+  Textarea,
+} from '@nextblock-cms/ui';
+import { Message } from '../../../../../components/form-message';
+import { useHotkeys } from '../../../../../hooks/use-hotkeys';
+import type { PrivacySettings } from '../../../../../lib/privacy/types';
+import { updatePrivacySettings } from '../actions';
+
+interface PrivacyFormProps {
+  initialSettings: PrivacySettings;
+}
+
+export default function PrivacyForm({ initialSettings }: PrivacyFormProps) {
+  const [isPending, startTransition] = useTransition();
+  const [message, setMessage] = useState<Message | null>(null);
+
+  const [bannerEnabled, setBannerEnabled] = useState(initialSettings.banner_enabled);
+  const [gtmId, setGtmId] = useState(initialSettings.gtm_id);
+  const [gaId, setGaId] = useState(initialSettings.ga_measurement_id);
+  const [customScripts, setCustomScripts] = useState(initialSettings.custom_scripts);
+  const [legalName, setLegalName] = useState(initialSettings.corporate.legal_name);
+  const [address, setAddress] = useState(initialSettings.corporate.address);
+  const [supportEmail, setSupportEmail] = useState(initialSettings.corporate.support_email);
+
+  const formRef = useRef<HTMLFormElement>(null);
+  useHotkeys('ctrl+s', () => formRef.current?.requestSubmit());
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setMessage(null);
+
+    const formData = new FormData();
+    formData.append('banner_enabled', String(bannerEnabled));
+    formData.append('gtm_id', gtmId);
+    formData.append('ga_measurement_id', gaId);
+    formData.append('custom_scripts', customScripts);
+    formData.append('legal_name', legalName);
+    formData.append('address', address);
+    formData.append('support_email', supportEmail);
+
+    startTransition(async () => {
+      try {
+        const result = await updatePrivacySettings(formData);
+        setMessage({ success: result.message });
+      } catch (error) {
+        setMessage({
+          error: error instanceof Error ? error.message : 'An unknown error occurred.',
+        });
+      }
+    });
+  };
+
+  return (
+    <form ref={formRef} onSubmit={handleSubmit} className="space-y-8">
+      {/* Consent banner */}
+      <section className="space-y-4">
+        <div className="flex items-start gap-3">
+          <Checkbox
+            id="banner_enabled"
+            checked={bannerEnabled}
+            onCheckedChange={(checked) => setBannerEnabled(checked === true)}
+            className="mt-1"
+          />
+          <div className="space-y-1">
+            <Label htmlFor="banner_enabled">Enable the Law 25 consent banner</Label>
+            <p className="text-xs text-slate-500">
+              When on, first-time visitors see a floating consent prompt and analytics
+              stay disabled until they accept.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <Separator />
+
+      {/* Analytics */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-sm font-semibold">Analytics &amp; tracking</h3>
+          <p className="text-xs text-slate-500">
+            These load <strong>only</strong> after a visitor consents to analytics, so
+            the default page weight stays at zero tracking bytes.
+          </p>
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="gtm_id">Google Tag Manager ID</Label>
+          <Input
+            id="gtm_id"
+            value={gtmId}
+            onChange={(e) => setGtmId(e.target.value)}
+            placeholder="GTM-XXXXXXX"
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="ga_measurement_id">GA4 Measurement ID (optional)</Label>
+          <Input
+            id="ga_measurement_id"
+            value={gaId}
+            onChange={(e) => setGaId(e.target.value)}
+            placeholder="G-XXXXXXXXXX"
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="custom_scripts">Custom consented scripts (optional)</Label>
+          <Textarea
+            id="custom_scripts"
+            value={customScripts}
+            onChange={(e) => setCustomScripts(e.target.value)}
+            placeholder="<!-- Additional marketing/analytics <script> tags, injected only after consent -->"
+            rows={4}
+            className="font-mono text-xs"
+          />
+        </div>
+      </section>
+
+      <Separator />
+
+      {/* Corporate identity */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-sm font-semibold">Corporate identity (CASL footer)</h3>
+          <p className="text-xs text-slate-500">
+            CASL requires every commercial message and the site footer to identify the
+            sender. These values are appended to the public footer automatically.
+          </p>
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="legal_name">Legal name</Label>
+          <Input
+            id="legal_name"
+            value={legalName}
+            onChange={(e) => setLegalName(e.target.value)}
+            placeholder="Acme Technologies Inc."
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="address">Physical mailing address</Label>
+          <Textarea
+            id="address"
+            value={address}
+            onChange={(e) => setAddress(e.target.value)}
+            placeholder="123 Rue Example, Montréal, QC H0H 0H0, Canada"
+            rows={2}
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="support_email">Support / unsubscribe email</Label>
+          <Input
+            id="support_email"
+            type="email"
+            value={supportEmail}
+            onChange={(e) => setSupportEmail(e.target.value)}
+            placeholder="privacy@example.com"
+          />
+        </div>
+      </section>
+
+      <div className="flex items-center gap-4">
+        <Button type="submit" disabled={isPending}>
+          {isPending ? (
+            <>
+              <Spinner className="mr-2 h-4 w-4 animate-spin" /> Saving...
+            </>
+          ) : (
+            'Save Privacy Settings'
+          )}
+        </Button>
+        {message && (
+          <Alert
+            variant={'success' in message ? 'success' : 'destructive'}
+            className="py-2 px-4 w-auto inline-flex items-center"
+          >
+            <AlertDescription>
+              {'success' in message
+                ? message.success
+                : 'error' in message
+                  ? message.error
+                  : ''}
+            </AlertDescription>
+          </Alert>
+        )}
+      </div>
+    </form>
+  );
+}

package/templates/nextblock-template/app/cms/settings/privacy/page.tsx

@@ -0,0 +1,26 @@
+// app/cms/settings/privacy/page.tsx
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextblock-cms/ui';
+import { getPrivacySettings } from './actions';
+import PrivacyForm from './components/PrivacyForm';
+
+export default async function PrivacySettingsPage() {
+  const settings = await getPrivacySettings();
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <Card>
+        <CardHeader>
+          <CardTitle>Privacy &amp; Consent (Law 25 / CASL)</CardTitle>
+          <CardDescription>
+            Control the Quebec Law 25 consent banner, the analytics that load only
+            after consent, and the corporate identity appended to the CASL-compliant
+            footer. Analytics scripts download zero bytes until a visitor opts in.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <PrivacyForm initialSettings={settings} />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}