create-nextblock 0.2.78 → 0.8.0

package/templates/nextblock-template/app/cms/settings/logos/components/DeleteLogoButton.tsx

@@ -2,28 +2,31 @@
 
 import { DropdownMenuItem } from "@nextblock-cms/ui";
 import { Trash2 } from "lucide-react";
-import { deleteLogo } from "../actions";
-import { useTransition, useState } from 'react';
-import { ConfirmationModal } from "@/app/cms/components/ConfirmationModal";
-import { toast } from 'react-hot-toast';
+import { deleteLogo } from "../actions";
+import { useTransition, useState } from 'react';
+import { ConfirmationModal } from '../../../components/ConfirmationModal';
+import { toast } from 'react-hot-toast';
+import { useRouter } from 'next/navigation';
 
 interface DeleteLogoButtonProps {
   logoId: string;
 }
 
-export default function DeleteLogoButton({ logoId }: DeleteLogoButtonProps) {
-  const [isPending, startTransition] = useTransition();
-  const [isModalOpen, setIsModalOpen] = useState(false);
+export default function DeleteLogoButton({ logoId }: DeleteLogoButtonProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleDeleteConfirm = () => {
     startTransition(async () => {
       const result = await deleteLogo(logoId);
       if (result?.error) {
         toast.error(`Error: ${result.error}`);
-      } else {
-          toast.success("Logo deleted successfully");
-      }
-      setIsModalOpen(false);
+      } else {
+          toast.success("Logo deleted successfully");
+          router.refresh();
+      }
+      setIsModalOpen(false);
     });
   };
 
@@ -38,13 +41,13 @@ export default function DeleteLogoButton({ logoId }: DeleteLogoButtonProps) {
         <Trash2 className="mr-2 h-4 w-4" />
         {isPending ? "Deleting..." : "Delete"}
       </DropdownMenuItem>
-      <ConfirmationModal
-        isOpen={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
-        onConfirm={handleDeleteConfirm}
-        title="Delete Logo?"
-        description="This will permanently delete the logo. This action cannot be undone."
-      />
+      <ConfirmationModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onConfirm={handleDeleteConfirm}
+        title="Delete Brand Logo?"
+        description="This will permanently delete the logo. This action cannot be undone."
+      />
     </>
   );
 }

package/templates/nextblock-template/app/cms/settings/logos/components/LogoForm.tsx

@@ -8,11 +8,15 @@ import { Label } from '@nextblock-cms/ui'
 import { Button } from '@nextblock-cms/ui'
 import { Alert, AlertDescription, Spinner } from '@nextblock-cms/ui'
 import type { Database } from '@nextblock-cms/db'
-import { ImageIcon, X as XIcon } from 'lucide-react'
-import MediaPickerDialog from '@/app/cms/media/components/MediaPickerDialog'
-import { useHotkeys } from '@/hooks/use-hotkeys'
-type Media = Database['public']['Tables']['media']['Row'];
-const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || ''
+import { ImageIcon, X as XIcon } from 'lucide-react'
+import MediaPickerDialog from '../../../media/components/MediaPickerDialog'
+import { useHotkeys } from '../../../../../hooks/use-hotkeys';
+import { resolveMediaUrl } from '../../../../../lib/media/resolveMediaUrl';
+type Media = Database['public']['Tables']['media']['Row'];
+
+function resolveLogoSrc(objectKey?: string | null) {
+  return resolveMediaUrl(objectKey)
+}
 
 interface LogoDetails {
   id?: string
@@ -102,8 +106,8 @@ export default function LogoForm({ logo, action }: LogoFormProps) {
 
   return (
     <div className="space-y-6">
-      <div>
-        <Label htmlFor="name">Logo Name</Label>
+      <div>
+        <Label htmlFor="name">Logo Name</Label>
         <Input
           id="name"
           name="name"
@@ -126,11 +130,11 @@ export default function LogoForm({ logo, action }: LogoFormProps) {
               className="relative group inline-block"
               style={{ maxWidth: logoDetails.width, maxHeight: 200 }}
             >
-              <Image
-                src={`${R2_BASE_URL}/${logoDetails.object_key}`}
-                alt={logoDetails.name || 'Selected logo'}
-                width={logoDetails.width}
-                height={logoDetails.height}
+              <Image
+                src={resolveLogoSrc(logoDetails.object_key) || ''}
+                alt={logoDetails.name || 'Selected logo'}
+                width={logoDetails.width}
+                height={logoDetails.height}
                 className="rounded-md object-contain"
                 style={{ maxHeight: '200px' }}
                 placeholder={logoDetails.blur_data_url ? 'blur' : 'empty'}
@@ -170,10 +174,10 @@ export default function LogoForm({ logo, action }: LogoFormProps) {
             <>
               <Spinner className="mr-2 h-4 w-4" /> Saving...
             </>
-          ) : (
-            `${logo ? 'Update' : 'Create'} Logo`
-          )}
-        </Button>
+          ) : (
+            `${logo ? 'Update' : 'Create'} Logo`
+          )}
+        </Button>
         {formError && (
           <Alert variant="destructive" className="py-2 px-4 w-auto inline-flex items-center">
              <AlertDescription>{formError}</AlertDescription>

package/templates/nextblock-template/app/cms/settings/logos/components/SiteSeoSettingsForm.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import { useState, useTransition } from 'react'
+import { Button, Input, Label, Textarea } from '@nextblock-cms/ui'
+
+import { saveSiteSeoSettings, type SiteSeoSettings } from '../actions'
+
+interface SiteSeoSettingsFormProps {
+  initialSettings: SiteSeoSettings
+}
+
+const TITLE_RECOMMENDED_MAX = 60
+const DESCRIPTION_RECOMMENDED_MAX = 160
+
+export default function SiteSeoSettingsForm({ initialSettings }: SiteSeoSettingsFormProps) {
+  const [isPending, startTransition] = useTransition()
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
+  const [settings, setSettings] = useState<SiteSeoSettings>(() => ({
+    siteTitle: initialSettings.siteTitle ?? '',
+    siteDescription: initialSettings.siteDescription ?? '',
+    siteKeywords: initialSettings.siteKeywords ?? '',
+  }))
+
+  const handleSave = () => {
+    setMessage(null)
+    startTransition(async () => {
+      const result = await saveSiteSeoSettings(settings)
+
+      if (result?.error) {
+        setMessage({ type: 'error', text: result.error })
+        return
+      }
+
+      setMessage({ type: 'success', text: 'Site SEO settings updated successfully.' })
+    })
+  }
+
+  return (
+    <div className="space-y-6 rounded-xl border bg-background p-5">
+      <div className="space-y-1">
+        <h2 className="text-xl font-semibold">Site identity &amp; SEO</h2>
+        <p className="text-sm text-muted-foreground">
+          Used for the browser tab, search results, and social link previews (Open Graph / Twitter).
+          The site title is also appended to every page title and shown next to the logo.
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <Label htmlFor="seo-site-title">Site title</Label>
+          <span
+            className={`text-xs ${
+              settings.siteTitle.length > TITLE_RECOMMENDED_MAX
+                ? 'text-amber-600'
+                : 'text-muted-foreground'
+            }`}
+          >
+            {settings.siteTitle.length}/{TITLE_RECOMMENDED_MAX}
+          </span>
+        </div>
+        <Input
+          id="seo-site-title"
+          placeholder="NextBlock™ CMS"
+          value={settings.siteTitle}
+          onChange={(event) =>
+            setSettings((current) => ({ ...current, siteTitle: event.target.value }))
+          }
+        />
+        <p className="text-xs text-muted-foreground">
+          Example result: <span className="font-medium">Home | {settings.siteTitle || 'NextBlock™ CMS'}</span>
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <Label htmlFor="seo-site-description">Default meta description</Label>
+          <span
+            className={`text-xs ${
+              settings.siteDescription.length > DESCRIPTION_RECOMMENDED_MAX
+                ? 'text-amber-600'
+                : 'text-muted-foreground'
+            }`}
+          >
+            {settings.siteDescription.length}/{DESCRIPTION_RECOMMENDED_MAX}
+          </span>
+        </div>
+        <Textarea
+          id="seo-site-description"
+          rows={3}
+          placeholder="A short, compelling summary of your site for search engines and social cards."
+          value={settings.siteDescription}
+          onChange={(event) =>
+            setSettings((current) => ({ ...current, siteDescription: event.target.value }))
+          }
+        />
+        <p className="text-xs text-muted-foreground">
+          Shown when a page has no description of its own. Aim for ~150–160 characters.
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="seo-site-keywords">Default keywords</Label>
+        <Input
+          id="seo-site-keywords"
+          placeholder="NextBlock, CMS, Next.js, Supabase"
+          value={settings.siteKeywords}
+          onChange={(event) =>
+            setSettings((current) => ({ ...current, siteKeywords: event.target.value }))
+          }
+        />
+        <p className="text-xs text-muted-foreground">Comma-separated. Used as the default meta keywords.</p>
+      </div>
+
+      {message ? (
+        <div
+          className={`rounded-lg border px-4 py-3 text-sm ${
+            message.type === 'success'
+              ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
+              : 'border-red-200 bg-red-50 text-red-700'
+          }`}
+        >
+          {message.text}
+        </div>
+      ) : null}
+
+      <div className="flex justify-end">
+        <Button type="button" onClick={handleSave} disabled={isPending}>
+          {isPending ? 'Saving...' : 'Save SEO Settings'}
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -1,11 +1,11 @@
 import LogoForm from '../components/LogoForm'
 import { createLogo } from '../actions'
 
-export default function NewLogoPage() {
-  return (
-    <div>
-      <h1 className="text-2xl font-semibold mb-6">Create New Logo</h1>
-      <LogoForm action={createLogo} />
-    </div>
-  )
-}
+export default function NewLogoPage() {
+  return (
+    <div>
+      <h1 className="text-2xl font-semibold mb-6">Add Brand Logo</h1>
+      <LogoForm action={createLogo} />
+    </div>
+  )
+}

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

@@ -1,6 +1,6 @@
-import React from 'react'
 import Link from 'next/link'
 import { Button } from '@nextblock-cms/ui'
+import { getInvoiceBrandingData } from '@nextblock-cms/ecommerce/server'
 import {
   Table,
   TableBody,
@@ -17,99 +17,137 @@ import {
   DropdownMenuTrigger,
   DropdownMenuSeparator,
 } from '@nextblock-cms/ui'
-import { getLogos } from './actions'
-import MediaImage from '@/app/cms/media/components/MediaImage'
+import { getLogos, getSiteSeoSettings } from './actions'
+import BrandingSettingsForm from './components/BrandingSettingsForm'
+import SiteSeoSettingsForm from './components/SiteSeoSettingsForm'
+import MediaImage from '../../media/components/MediaImage'
 import DeleteLogoButton from './components/DeleteLogoButton'
+import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl'
 
-const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || ''
+function resolveLogoSrc(objectKey?: string | null) {
+  return resolveMediaUrl(objectKey)
+}
 
 export default async function CmsLogosListPage() {
-  const logos = await getLogos()
+  const [logos, branding, seoSettings] = await Promise.all([
+    getLogos(),
+    getInvoiceBrandingData(),
+    getSiteSeoSettings(),
+  ])
 
   return (
-    <div className="w-full">
-      <div className="flex justify-between items-center mb-6">
-        <h1 className="text-2xl font-semibold">Manage Logos</h1>
-        <Button variant="default" asChild>
-          <Link href="/cms/settings/logos/new">
-            <PlusCircle className="mr-2 h-4 w-4" /> New Logo
-          </Link>
-        </Button>
+    <div className="w-full space-y-8">
+      <div className="mb-6">
+        <div>
+          <h1 className="text-2xl font-semibold">Branding</h1>
+          <p className="text-sm text-muted-foreground mt-1">
+            Manage the site title &amp; SEO, the active website logo, and the seller details printed on invoices.
+          </p>
+        </div>
       </div>
 
-      {logos.length === 0 ? (
-        <div className="text-center py-10 border rounded-lg">
-          <ImageIcon className="mx-auto h-12 w-12 text-muted-foreground" />
-          <h3 className="mt-2 text-sm font-medium">No logos found.</h3>
-          <p className="mt-1 text-sm text-muted-foreground">
-            Get started by creating a new logo.
-          </p>
-          <div className="mt-6">
-            <Button asChild>
-              <Link href="/cms/settings/logos/new">
-                <PlusCircle className="mr-2 h-4 w-4" /> Create Logo
-              </Link>
-            </Button>
+      <SiteSeoSettingsForm initialSettings={seoSettings} />
+
+      <BrandingSettingsForm initialSettings={branding.settings} />
+
+      <section className="space-y-4">
+        <div className="flex items-center justify-between gap-4">
+          <div>
+            <h2 className="text-xl font-semibold">Logos</h2>
+            <p className="text-sm text-muted-foreground">
+              The most recently created logo is used on the storefront and invoices.
+            </p>
           </div>
+          <Button variant="default" asChild>
+            <Link href="/cms/settings/logos/new">
+              <PlusCircle className="mr-2 h-4 w-4" /> New Logo
+            </Link>
+          </Button>
         </div>
-      ) : (
-        <div className="rounded-lg border overflow-hidden">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead className="w-[80px]">Image</TableHead>
-                <TableHead>Name</TableHead>
-                <TableHead className="hidden md:table-cell">Created At</TableHead>
-                <TableHead className="text-right">Actions</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {logos.map(logo => (
-                <TableRow key={logo.id}>
-                  <TableCell>
+
+        {logos.length === 0 ? (
+          <div className="text-center py-10 border rounded-lg">
+            <ImageIcon className="mx-auto h-12 w-12 text-muted-foreground" />
+            <h3 className="mt-2 text-sm font-medium">No logos found.</h3>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Get started by creating a new logo.
+            </p>
+            <div className="mt-6">
+              <Button asChild>
+                <Link href="/cms/settings/logos/new">
+                  <PlusCircle className="mr-2 h-4 w-4" /> Create Logo
+                </Link>
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div className="rounded-lg border overflow-hidden">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[80px]">Image</TableHead>
+                  <TableHead>Name</TableHead>
+                  <TableHead className="hidden md:table-cell">Created At</TableHead>
+                  <TableHead className="text-right">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {logos.map((logo, index) => (
+                  <TableRow key={logo.id}>
+                    <TableCell>
                     {logo.media ? (
                       <MediaImage
-                        src={`${R2_BASE_URL}/${logo.media.object_key}`}
-                        alt={logo.media.alt_text || logo.name}
-                        width={logo.media.width || 100}
-                        height={logo.media.height || 100}
-                        className="max-w-16 max-h-16 object-contain"
-                      />
-                    ) : (
-                      <div className="w-16 h-16 bg-muted rounded-sm flex items-center justify-center">
-                        <ImageIcon className="h-6 w-6 text-muted-foreground" />
+                          src={resolveLogoSrc(logo.media.object_key) || ''}
+                          alt={logo.media.alt_text || logo.name}
+                          width={logo.media.width || 100}
+                          height={logo.media.height || 100}
+                          className="max-w-16 max-h-16 object-contain"
+                        />
+                      ) : (
+                        <div className="w-16 h-16 bg-muted rounded-sm flex items-center justify-center">
+                          <ImageIcon className="h-6 w-6 text-muted-foreground" />
+                        </div>
+                      )}
+                    </TableCell>
+                    <TableCell className="font-medium">
+                      <div className="flex items-center gap-2">
+                        <span>{logo.name}</span>
+                        {index === 0 ? (
+                          <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary">
+                            Active
+                          </span>
+                        ) : null}
                       </div>
-                    )}
-                  </TableCell>
-                  <TableCell className="font-medium">{logo.name}</TableCell>
-                  <TableCell className="hidden md:table-cell">
-                    {new Date(logo.created_at).toLocaleDateString()}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" size="icon">
-                          <MoreHorizontal className="h-4 w-4" />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem asChild>
-                          <Link href={`/cms/settings/logos/${logo.id}/edit`}>
-                            <Edit3 className="mr-2 h-4 w-4" />
-                            Edit
-                          </Link>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DeleteLogoButton logoId={logo.id} />
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-      )}
+                    </TableCell>
+                    <TableCell className="hidden md:table-cell">
+                      {new Date(logo.created_at).toLocaleDateString()}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button id={`logo-trigger-${logo.id}`} variant="ghost" size="icon">
+                            <MoreHorizontal className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem asChild>
+                            <Link href={`/cms/settings/logos/${logo.id}/edit`}>
+                              <Edit3 className="mr-2 h-4 w-4" />
+                              Edit
+                            </Link>
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DeleteLogoButton logoId={logo.id} />
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </section>
     </div>
   )
-}
+}

package/templates/nextblock-template/app/cms/settings/logos/types.ts

@@ -1,8 +1,8 @@
-import type { Database } from '@nextblock-cms/db';
-
-export type Logo = Database['public']['Tables']['logos']['Row'] & {
-  site_title?: string | null;
-  media: (Database['public']['Tables']['media']['Row'] & {
-    alt_text: string | null;
-  }) | null;
-};
+import type { Database } from '@nextblock-cms/db';
+
+export type Logo = Database['public']['Tables']['logos']['Row'] & {
+  site_title?: string | null;
+  media: (Database['public']['Tables']['media']['Row'] & {
+    alt_text: string | null;
+  }) | null;
+};

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

@@ -0,0 +1,84 @@
+'use client';
+
+import { useState } from 'react';
+import { activatePackage } from '../../../actions/package-actions';
+import { toast } from 'sonner';
+import { Button } from '@nextblock-cms/ui';
+import { Input } from '@nextblock-cms/ui';
+import { Loader2, FlaskConical } from 'lucide-react';
+
+const isSandbox = process.env.NEXT_PUBLIC_IS_SANDBOX === 'true';
+
+export function ActivationForm() {
+  const [key, setKey] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+
+  const handleActivate = async () => {
+    if (!key) return;
+    setLoading(true);
+    setErrorMsg(null);
+    try {
+      const res = await activatePackage(key);
+      if (res?.error) {
+        toast.error(res.error);
+        setErrorMsg(res.error);
+      } else {
+        toast.success(`Package "${res?.package}" activated successfully!`);
+        setKey('');
+        setErrorMsg(null);
+      }
+    } catch {
+      toast.error('Activation failed. Please try again.');
+      setErrorMsg('Activation failed. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (isSandbox) {
+    return (
+      <div className="mt-8 p-6 border rounded-lg bg-amber-50 dark:bg-amber-950/20 border-amber-200 dark:border-amber-800">
+        <div className="flex items-center gap-2 mb-2">
+          <FlaskConical className="h-5 w-5 text-amber-600 dark:text-amber-400" />
+          <h3 className="text-lg font-medium text-amber-800 dark:text-amber-300">Sandbox Environment</h3>
+        </div>
+        <p className="text-sm text-amber-700 dark:text-amber-400">
+          License activation is disabled in this sandbox demo. To purchase a real license for
+          your self-hosted instance, visit{' '}
+          <a href="https://nextblock.ca" target="_blank" rel="noopener noreferrer" className="underline font-semibold">
+            nextblock.ca
+          </a>.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-8 p-6 border rounded-lg bg-card">
+      <h3 className="text-lg font-medium mb-4">Activate a Package</h3>
+      <div className="flex items-start gap-4">
+        <div className="flex flex-col gap-2 flex-1 max-w-md">
+          <Input 
+            placeholder="Enter your Freemius License Key"
+            value={key}
+            onChange={(e) => {
+                setKey(e.target.value);
+                setErrorMsg(null);
+            }}
+          />
+          {errorMsg && (
+            <p className="text-sm font-medium text-destructive">{errorMsg}</p>
+          )}
+        </div>
+        <Button onClick={handleActivate} disabled={loading || !key}>
+          {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+          Activate License
+        </Button>
+      </div>
+      <p className="text-sm text-muted-foreground mt-2">
+        Enter the license key you received from Freemius to unlock the package features.
+      </p>
+    </div>
+  );
+}