create-nextblock 0.2.78 → 0.8.0

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

@@ -0,0 +1,65 @@
+// app/cms/settings/global-css/actions.ts
+'use server';
+
+import { createClient } from '@nextblock-cms/db/server';
+import { revalidatePath } from 'next/cache';
+
+export async function getGlobalCss(): Promise<string> {
+  const supabase = createClient();
+  const { data, error } = await supabase
+    .from('site_settings')
+    .select('value')
+    .eq('key', 'global_css')
+    .single();
+
+  if (error || !data || !data.value) {
+    return ''; // Default empty
+  }
+
+  // Value is stored as JSONB, but we might have saved it as a raw string or JSON encoded string. 
+  // Let's handle both.
+  if (typeof data.value === 'string') {
+      // If it looks like a JSON string with quotes, parse it
+      if (data.value.startsWith('"') && data.value.endsWith('"')) {
+          try {
+              return JSON.parse(data.value);
+          }catch{
+              return data.value;
+          }
+      }
+      return data.value;
+  }
+  
+  return String(data.value);
+}
+
+export async function updateGlobalCss(css: string) {
+  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, error: profileError } = await supabase
+    .from('profiles')
+    .select('role')
+    .eq('id', user.id)
+    .single();
+
+  if (profileError || !profile || !['ADMIN', 'WRITER'].includes(profile.role)) {
+    throw new Error('You do not have permission to perform this action.');
+  }
+
+  const { error } = await supabase
+    .from('site_settings')
+    .upsert({ key: 'global_css', value: css });
+
+  if (error) {
+    console.error('Error updating global CSS:', error);
+    throw new Error('Failed to update CSS.');
+  }
+
+  revalidatePath('/', 'layout');
+  return { success: true, message: 'Global CSS updated successfully.' };
+}

package/templates/nextblock-template/app/cms/settings/global-css/components/GlobalCssForm.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import React, { useState } from 'react';
+import { updateGlobalCss } from '../actions';
+import { Button } from '@nextblock-cms/ui';
+import { Label } from '@nextblock-cms/ui';
+import { toast } from 'sonner';
+
+export default function GlobalCssForm({ initialCss }: { initialCss: string }) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [css, setCss] = useState(initialCss);
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    try {
+      const res = await updateGlobalCss(css);
+      toast.success(res.message);
+    } catch (err: any) {
+      toast.error(err.message || 'An error occurred.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <form onSubmit={onSubmit} className="space-y-6">
+      <div className="space-y-2">
+        <Label htmlFor="css">Custom CSS</Label>
+        <textarea
+          id="css"
+          name="css"
+          value={css}
+          onChange={(e) => setCss(e.target.value)}
+          className="w-full flex min-h-[400px] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 font-mono"
+          placeholder={`body {\n  background-color: #f0f0f0;\n}`}
+        />
+      </div>
+      <div className="flex justify-start">
+        <Button type="submit" disabled={isSubmitting}>
+          {isSubmitting ? 'Saving...' : 'Save Settings'}
+        </Button>
+      </div>
+    </form>
+  );
+}

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

@@ -0,0 +1,24 @@
+// app/cms/settings/global-css/page.tsx
+import { getGlobalCss } from './actions';
+import GlobalCssForm from './components/GlobalCssForm';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextblock-cms/ui';
+
+export default async function GlobalCssSettingsPage() {
+  const css = await getGlobalCss();
+
+  return (
+    <div className="max-w-4xl mx-auto">
+        <Card>
+            <CardHeader>
+                <CardTitle>Global CSS</CardTitle>
+                <CardDescription>
+                    Inject custom CSS rules dynamically across the entire application front-end.
+                </CardDescription>
+            </CardHeader>
+            <CardContent>
+                <GlobalCssForm initialCss={css} />
+            </CardContent>
+        </Card>
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/settings/languages/components/DeleteLanguageButton.tsx

@@ -5,7 +5,7 @@ import { Trash2, ShieldAlert } from "lucide-react";
 import { deleteLanguage } from "../actions"; // Server action
 import type { Database } from "@nextblock-cms/db";
 import { useTransition, useState } from 'react';
-import { ConfirmationModal } from "@/app/cms/components/ConfirmationModal";
+import { ConfirmationModal } from '../../../components/ConfirmationModal';
 import { toast } from 'react-hot-toast';
 
 type Language = Database['public']['Tables']['languages']['Row'];

package/templates/nextblock-template/app/cms/settings/languages/components/LanguageForm.tsx

@@ -12,8 +12,8 @@ import { Info } from 'lucide-react';
 import type { Database } from "@nextblock-cms/db";
 
 type Language = Database["public"]["Tables"]["languages"]["Row"];
-import { useAuth } from '@/context/AuthContext';
-import { useHotkeys } from '@/hooks/use-hotkeys';
+import { useAuth } from '../../../../../context/AuthContext';
+import { useHotkeys } from '../../../../../hooks/use-hotkeys';
 
 interface LanguageFormProps {
   language?: Language | null;

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

@@ -122,7 +122,7 @@ export default async function CmsLanguagesListPage() {
                   <TableCell className="text-right">
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" size="icon">
+                        <Button id={`lang-trigger-${lang.id}`} variant="ghost" size="icon">
                           <MoreHorizontal className="h-4 w-4" />
                           <span className="sr-only">Language actions</span>
                         </Button>

package/templates/nextblock-template/app/cms/settings/logos/[id]/edit/page.tsx

@@ -10,10 +10,10 @@ export default async function EditLogoPage(props: { params: Promise<{ id: string
     notFound()
   }
 
-  return (
-    <div>
-      <h1 className="text-2xl font-semibold mb-6">Edit Logo</h1>
-      <LogoForm logo={logo} action={updateLogo as any} />
-    </div>
-  )
-}
+  return (
+    <div>
+      <h1 className="text-2xl font-semibold mb-6">Edit Brand Logo</h1>
+      <LogoForm logo={logo} action={updateLogo as any} />
+    </div>
+  )
+}

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

@@ -1,9 +1,18 @@
 'use server'
 
 import { createClient } from '@nextblock-cms/db/server'
-import { revalidatePath } from 'next/cache'
+import { INVOICE_SETTINGS_KEY, serializeInvoiceSettings, type InvoiceSettings } from '@nextblock-cms/ecommerce'
+import { revalidatePath, updateTag } from 'next/cache'
 import { redirect } from 'next/navigation'
 import type { Logo } from './types'
+import { SITE_SETTINGS_CACHE_TAG } from '../../../lib/site-settings'
+
+const PUBLIC_LAYOUT_LOGO_CACHE_TAG = 'public-layout-logo'
+
+function revalidateLogoViews() {
+  revalidatePath('/cms/settings/logos')
+  updateTag(PUBLIC_LAYOUT_LOGO_CACHE_TAG)
+}
 
 export async function createLogo(payload: {
   name: string
@@ -18,7 +27,7 @@ export async function createLogo(payload: {
     return { success: false, error: error.message }
   }
 
-  revalidatePath('/cms/settings/logos')
+  revalidateLogoViews()
   return { success: true }
 }
 
@@ -39,7 +48,7 @@ export async function updateLogo(payload: {
     return
   }
 
-  revalidatePath('/cms/settings/logos')
+  revalidateLogoViews()
   revalidatePath(`/cms/settings/logos/${id}/edit`)
   redirect('/cms/settings/logos')
 }
@@ -54,7 +63,7 @@ export async function deleteLogo(id: string) {
     return { success: false, error: error.message }
   }
 
-  revalidatePath('/cms/settings/logos')
+  revalidateLogoViews()
   return { success: true }
 }
 
@@ -70,7 +79,7 @@ export async function getLogos() {
     throw new Error(`Failed to fetch logos: ${error.message}`)
   }
 
-  return data
+  return data as unknown as Logo[]
 }
 
 export async function getLogoById(id: string) {
@@ -110,4 +119,71 @@ export async function getActiveLogo(): Promise<Logo | null> {
   }
 
   return data as Logo | null
-}
+}
+
+export async function saveInvoiceSettings(payload: InvoiceSettings) {
+  const supabase = createClient()
+  const { error } = await supabase.from('site_settings').upsert({
+    key: INVOICE_SETTINGS_KEY,
+    value: serializeInvoiceSettings(payload),
+  })
+
+  if (error) {
+    console.error('Error saving invoice settings:', error.message)
+    return { success: false, error: error.message }
+  }
+
+  revalidatePath('/cms/settings/logos')
+  return { success: true }
+}
+
+export interface SiteSeoSettings {
+  siteTitle: string
+  siteDescription: string
+  siteKeywords: string
+}
+
+export async function getSiteSeoSettings(): Promise<SiteSeoSettings> {
+  const supabase = createClient()
+  const { data, error } = await supabase
+    .from('site_settings')
+    .select('key, value')
+    .in('key', ['site_title', 'site_description', 'site_keywords'])
+
+  const settings: Record<string, string> = {}
+  if (!error && data) {
+    data.forEach((item) => {
+      if (typeof item.value === 'string') {
+        settings[item.key] = item.value
+      }
+    })
+  }
+
+  return {
+    siteTitle: settings.site_title ?? '',
+    siteDescription: settings.site_description ?? '',
+    siteKeywords: settings.site_keywords ?? '',
+  }
+}
+
+export async function saveSiteSeoSettings(payload: SiteSeoSettings) {
+  const supabase = createClient()
+
+  const { error } = await supabase.from('site_settings').upsert([
+    { key: 'site_title', value: payload.siteTitle.trim() },
+    { key: 'site_description', value: payload.siteDescription.trim() },
+    { key: 'site_keywords', value: payload.siteKeywords.trim() },
+  ])
+
+  if (error) {
+    console.error('Error saving site SEO settings:', error.message)
+    return { success: false, error: error.message }
+  }
+
+  // Bust the cached public site settings (title/description/keywords) and the
+  // root layout so metadata + header brand update immediately.
+  updateTag(SITE_SETTINGS_CACHE_TAG)
+  revalidatePath('/cms/settings/logos')
+  revalidatePath('/', 'layout')
+  return { success: true }
+}

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

@@ -0,0 +1,339 @@
+'use client'
+
+import { useMemo, useState, useTransition } from 'react'
+import { Button, Input, Label } from '@nextblock-cms/ui'
+import { useTranslations } from '@nextblock-cms/utils'
+import {
+  DEFAULT_INVOICE_SETTINGS,
+  type InvoiceSettings,
+  type InvoiceTaxRegistration,
+} from '@nextblock-cms/ecommerce'
+
+import { saveInvoiceSettings } from '../actions'
+
+interface BrandingSettingsFormProps {
+  initialSettings: InvoiceSettings
+}
+
+function createEmptyRegistration(): InvoiceTaxRegistration {
+  return {
+    label: '',
+    value: '',
+  }
+}
+
+export default function BrandingSettingsForm({
+  initialSettings,
+}: BrandingSettingsFormProps) {
+  const { t } = useTranslations()
+  const translateOrFallback = (key: string, fallback: string) => {
+    const translated = t(key)
+    return translated === key ? fallback : translated
+  }
+  const [isPending, startTransition] = useTransition()
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(
+    null
+  )
+  const [settings, setSettings] = useState<InvoiceSettings>(() => ({
+    ...DEFAULT_INVOICE_SETTINGS,
+    ...initialSettings,
+    address: {
+      ...DEFAULT_INVOICE_SETTINGS.address,
+      ...initialSettings.address,
+    },
+    taxRegistrations:
+      initialSettings.taxRegistrations.length > 0
+        ? initialSettings.taxRegistrations
+        : [createEmptyRegistration()],
+  }))
+
+  const normalizedRegistrations = useMemo(
+    () => settings.taxRegistrations.filter((entry) => entry.label || entry.value),
+    [settings.taxRegistrations]
+  )
+
+  const handleSave = () => {
+    setMessage(null)
+    startTransition(async () => {
+      const result = await saveInvoiceSettings({
+        ...settings,
+        taxRegistrations: normalizedRegistrations,
+      })
+
+      if (result?.error) {
+        setMessage({ type: 'error', text: result.error })
+        return
+      }
+
+      setMessage({
+        type: 'success',
+        text: 'Branding 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">
+          {translateOrFallback('invoice_settings', 'Invoice settings')}
+        </h2>
+        <p className="text-sm text-muted-foreground">
+          Seller details shown on printed invoices and customer order confirmations.
+        </p>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <div className="space-y-2">
+          <Label htmlFor="branding-business-name">
+            {translateOrFallback('business_name', 'Business name')}
+          </Label>
+          <Input
+            id="branding-business-name"
+            value={settings.businessName}
+            onChange={(event) =>
+              setSettings((current) => ({
+                ...current,
+                businessName: event.target.value,
+              }))
+            }
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="branding-email">{t('email') || 'Email'}</Label>
+          <Input
+            id="branding-email"
+            value={settings.email}
+            onChange={(event) =>
+              setSettings((current) => ({
+                ...current,
+                email: event.target.value,
+              }))
+            }
+          />
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <div className="space-y-2">
+          <Label htmlFor="branding-phone">{t('phone_number')}</Label>
+          <Input
+            id="branding-phone"
+            value={settings.phone}
+            onChange={(event) =>
+              setSettings((current) => ({
+                ...current,
+                phone: event.target.value,
+              }))
+            }
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="branding-country">{t('country')}</Label>
+          <Input
+            id="branding-country"
+            placeholder="CA"
+            value={settings.address.country_code || ''}
+            onChange={(event) =>
+              setSettings((current) => ({
+                ...current,
+                address: {
+                  ...current.address,
+                  country_code: event.target.value.toUpperCase(),
+                },
+              }))
+            }
+          />
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="branding-line1">{t('address_line_1')}</Label>
+        <Input
+          id="branding-line1"
+          value={settings.address.line1 || ''}
+          onChange={(event) =>
+            setSettings((current) => ({
+              ...current,
+              address: {
+                ...current.address,
+                line1: event.target.value,
+              },
+            }))
+          }
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="branding-line2">{t('address_line_2')}</Label>
+        <Input
+          id="branding-line2"
+          value={settings.address.line2 || ''}
+          onChange={(event) =>
+            setSettings((current) => ({
+              ...current,
+              address: {
+                ...current.address,
+                line2: event.target.value,
+              },
+            }))
+          }
+        />
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        <div className="space-y-2">
+          <Label htmlFor="branding-city">{t('city')}</Label>
+          <Input
+            id="branding-city"
+            value={settings.address.city || ''}
+            onChange={(event) =>
+              setSettings((current) => ({
+                ...current,
+                address: {
+                  ...current.address,
+                  city: event.target.value,
+                },
+              }))
+            }
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="branding-state">{t('state_province')}</Label>
+          <Input
+            id="branding-state"
+            value={settings.address.state || ''}
+            onChange={(event) =>
+              setSettings((current) => ({
+                ...current,
+                address: {
+                  ...current.address,
+                  state: event.target.value,
+                },
+              }))
+            }
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="branding-postal">{t('postal_zip_code')}</Label>
+          <Input
+            id="branding-postal"
+            value={settings.address.postal_code || ''}
+            onChange={(event) =>
+              setSettings((current) => ({
+                ...current,
+                address: {
+                  ...current.address,
+                  postal_code: event.target.value,
+                },
+              }))
+            }
+          />
+        </div>
+      </div>
+
+      <div className="space-y-4 rounded-lg border bg-muted/10 p-4">
+        <div className="flex items-center justify-between gap-4">
+          <div>
+            <h3 className="font-medium">
+              {translateOrFallback('tax_registrations', 'Tax registrations')}
+            </h3>
+            <p className="text-sm text-muted-foreground">
+              Add GST, QST, VAT, or other seller tax identifiers to print them on invoices.
+            </p>
+          </div>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() =>
+              setSettings((current) => ({
+                ...current,
+                taxRegistrations: [...current.taxRegistrations, createEmptyRegistration()],
+              }))
+            }
+          >
+            Add Tax Number
+          </Button>
+        </div>
+
+        <div className="space-y-3">
+          {settings.taxRegistrations.map((registration, index) => (
+            <div key={index} className="grid gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)_auto]">
+              <div className="space-y-2">
+                <Label htmlFor={`tax-label-${index}`}>Label</Label>
+                <Input
+                  id={`tax-label-${index}`}
+                  placeholder="GST"
+                  value={registration.label}
+                  onChange={(event) =>
+                    setSettings((current) => ({
+                      ...current,
+                      taxRegistrations: current.taxRegistrations.map((entry, entryIndex) =>
+                        entryIndex === index
+                          ? { ...entry, label: event.target.value }
+                          : entry
+                      ),
+                    }))
+                  }
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor={`tax-value-${index}`}>Number</Label>
+                <Input
+                  id={`tax-value-${index}`}
+                  placeholder="123456789 RT0001"
+                  value={registration.value}
+                  onChange={(event) =>
+                    setSettings((current) => ({
+                      ...current,
+                      taxRegistrations: current.taxRegistrations.map((entry, entryIndex) =>
+                        entryIndex === index
+                          ? { ...entry, value: event.target.value }
+                          : entry
+                      ),
+                    }))
+                  }
+                />
+              </div>
+              <div className="flex items-end">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  onClick={() =>
+                    setSettings((current) => ({
+                      ...current,
+                      taxRegistrations:
+                        current.taxRegistrations.length > 1
+                          ? current.taxRegistrations.filter((_, entryIndex) => entryIndex !== index)
+                          : [createEmptyRegistration()],
+                    }))
+                  }
+                >
+                  Remove
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </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 Branding Settings'}
+        </Button>
+      </div>
+    </div>
+  )
+}