Gerhard Scheikl
441 lines
16 KiB
TypeScript
441 lines
16 KiB
TypeScript
import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router";
|
|
import { Form, useActionData, useLoaderData, useNavigation } from "react-router";
|
|
import { authenticate } from "../shopify.server";
|
|
import db from "../db.server";
|
|
import {
|
|
isValidAtVatId,
|
|
isValidBic,
|
|
isValidIban,
|
|
normaliseIban,
|
|
} from "../services/invoice/validation";
|
|
import {
|
|
STORED_LOGO_SENTINEL,
|
|
deleteStoredLogo,
|
|
storeUploadedLogo,
|
|
} from "../services/invoice/logoCache.server";
|
|
|
|
interface SettingsFieldErrors {
|
|
vatId?: string;
|
|
iban?: string;
|
|
bic?: string;
|
|
smtpPort?: string;
|
|
paymentTermDays?: string;
|
|
invoiceSeed?: string;
|
|
logo?: string;
|
|
}
|
|
|
|
export const loader = async ({ request }: LoaderFunctionArgs) => {
|
|
const { session } = await authenticate.admin(request);
|
|
const settings = await db.shopSettings.upsert({
|
|
where: { shopDomain: session.shop },
|
|
update: {},
|
|
create: { shopDomain: session.shop },
|
|
});
|
|
let logoPreviewDataUrl: string | null = null;
|
|
if (settings.logoUrl === STORED_LOGO_SENTINEL) {
|
|
const cached = await db.logoCache.findUnique({ where: { shopDomain: session.shop } });
|
|
if (cached) {
|
|
logoPreviewDataUrl = `data:${cached.contentType};base64,${Buffer.from(cached.bytes).toString("base64")}`;
|
|
}
|
|
}
|
|
return { settings, logoPreviewDataUrl };
|
|
};
|
|
|
|
export const action = async ({ request }: ActionFunctionArgs) => {
|
|
const { session } = await authenticate.admin(request);
|
|
const form = await request.formData();
|
|
const errors: SettingsFieldErrors = {};
|
|
|
|
const str = (k: string, fallback = "") => (form.get(k) ?? fallback).toString().trim();
|
|
const bool = (k: string) => form.get(k) === "on";
|
|
const intOrNull = (k: string): number | null => {
|
|
const raw = form.get(k);
|
|
if (raw === null || raw === "") return null;
|
|
const n = parseInt(raw.toString(), 10);
|
|
return Number.isFinite(n) ? n : null;
|
|
};
|
|
|
|
const vatId = str("vatId").toUpperCase();
|
|
if (vatId && !isValidAtVatId(vatId)) {
|
|
errors.vatId = "Expected format: ATU followed by 8 digits (e.g. ATU12345678).";
|
|
}
|
|
|
|
const iban = normaliseIban(str("iban"));
|
|
if (iban && !isValidIban(iban)) {
|
|
errors.iban = "Invalid IBAN (failed checksum or unknown country length).";
|
|
}
|
|
|
|
const bic = str("bic").toUpperCase();
|
|
if (bic && !isValidBic(bic)) {
|
|
errors.bic = "Invalid BIC (8 or 11 alphanumeric characters).";
|
|
}
|
|
|
|
const smtpPort = intOrNull("smtpPort");
|
|
if (smtpPort !== null && (smtpPort < 1 || smtpPort > 65535)) {
|
|
errors.smtpPort = "Port must be between 1 and 65535.";
|
|
}
|
|
|
|
const paymentTermDays = intOrNull("paymentTermDays");
|
|
if (paymentTermDays !== null && (paymentTermDays < 0 || paymentTermDays > 365)) {
|
|
errors.paymentTermDays = "Must be between 0 and 365.";
|
|
}
|
|
|
|
const invoiceSeed = intOrNull("invoiceSeed");
|
|
if (invoiceSeed !== null && invoiceSeed < 0) {
|
|
errors.invoiceSeed = "Must be a non-negative number.";
|
|
}
|
|
|
|
// --- Logo handling --------------------------------------------------------
|
|
// The settings page allows three actions on the logo:
|
|
// 1. Upload a new file (multipart `logoFile`) — stored in `LogoCache`.
|
|
// 2. Remove the current logo (`removeLogo=on`).
|
|
// 3. Provide an external URL via the `logoUrl` field.
|
|
// If a file is uploaded it wins over a manually-entered URL.
|
|
let resolvedLogoUrl = str("logoUrl");
|
|
const removeLogo = bool("removeLogo");
|
|
const logoFile = form.get("logoFile");
|
|
const hasUpload =
|
|
logoFile && typeof logoFile === "object" && "size" in logoFile && (logoFile as File).size > 0;
|
|
|
|
if (removeLogo && !hasUpload) {
|
|
await deleteStoredLogo(session.shop);
|
|
resolvedLogoUrl = "";
|
|
} else if (hasUpload) {
|
|
const file = logoFile as File;
|
|
const buf = Buffer.from(await file.arrayBuffer());
|
|
const stored = await storeUploadedLogo(session.shop, buf, file.type);
|
|
if (!stored.ok) {
|
|
errors.logo = stored.error ?? "Failed to store uploaded logo.";
|
|
} else {
|
|
resolvedLogoUrl = STORED_LOGO_SENTINEL;
|
|
}
|
|
}
|
|
|
|
if (Object.keys(errors).length > 0) {
|
|
return { ok: false, errors, savedAt: null as string | null };
|
|
}
|
|
|
|
const data = {
|
|
companyName: str("companyName"),
|
|
legalForm: str("legalForm"),
|
|
ownerName: str("ownerName"),
|
|
addressLine1: str("addressLine1"),
|
|
addressLine2: str("addressLine2"),
|
|
postalCode: str("postalCode"),
|
|
city: str("city"),
|
|
countryCode: str("countryCode", "AT").toUpperCase(),
|
|
phone: str("phone"),
|
|
email: str("email"),
|
|
website: str("website"),
|
|
vatId,
|
|
taxNumber: str("taxNumber"),
|
|
registrationNo: str("registrationNo"),
|
|
registrationCourt: str("registrationCourt"),
|
|
bankName: str("bankName"),
|
|
iban,
|
|
bic,
|
|
giroCodeEnabled: bool("giroCodeEnabled"),
|
|
numberingMode: str("numberingMode", "shopify_order_number"),
|
|
invoicePrefix: str("invoicePrefix"),
|
|
invoiceSeed: invoiceSeed ?? 1000,
|
|
defaultLanguage: str("defaultLanguage", "de") === "en" ? "en" : "de",
|
|
paymentTermDays: paymentTermDays ?? 14,
|
|
footerNote: str("footerNote"),
|
|
footerNoteEn: str("footerNoteEn"),
|
|
kleinunternehmer: bool("kleinunternehmer"),
|
|
logoUrl: resolvedLogoUrl,
|
|
smtpHost: str("smtpHost"),
|
|
smtpPort: smtpPort ?? 587,
|
|
smtpSecure: bool("smtpSecure"),
|
|
smtpUser: str("smtpUser"),
|
|
smtpPassword: str("smtpPassword"),
|
|
smtpFromName: str("smtpFromName"),
|
|
smtpFromEmail: str("smtpFromEmail"),
|
|
smtpReplyTo: str("smtpReplyTo"),
|
|
};
|
|
|
|
await db.shopSettings.upsert({
|
|
where: { shopDomain: session.shop },
|
|
update: data,
|
|
create: { shopDomain: session.shop, ...data },
|
|
});
|
|
|
|
return { ok: true, errors: {}, savedAt: new Date().toISOString() };
|
|
};
|
|
|
|
export default function SettingsRoute() {
|
|
const { settings, logoPreviewDataUrl } = useLoaderData<typeof loader>();
|
|
const actionData = useActionData<typeof action>();
|
|
const nav = useNavigation();
|
|
const isSaving = nav.state === "submitting";
|
|
const errors = actionData?.errors ?? {};
|
|
const hasStoredLogo = settings.logoUrl === STORED_LOGO_SENTINEL;
|
|
// Show the URL field only when not using a stored upload — keeps the UI
|
|
// simpler and avoids the sentinel value leaking into the input.
|
|
const visibleLogoUrl = hasStoredLogo ? "" : settings.logoUrl;
|
|
|
|
return (
|
|
<s-page heading="Invoice settings">
|
|
<s-section>
|
|
<s-paragraph>
|
|
Configure issuer details, bank, numbering, language and SMTP. These
|
|
values are written into every PDF invoice this app generates and must
|
|
match your legal records.
|
|
</s-paragraph>
|
|
</s-section>
|
|
|
|
{actionData?.ok && (
|
|
<s-banner tone="success" heading="Settings saved">
|
|
Your changes are now live and will be used for the next invoice.
|
|
</s-banner>
|
|
)}
|
|
{actionData && !actionData.ok && (
|
|
<s-banner tone="critical" heading="Please fix the highlighted errors">
|
|
Some fields below need attention before settings can be saved.
|
|
</s-banner>
|
|
)}
|
|
|
|
<Form method="post" encType="multipart/form-data">
|
|
<s-section heading="Company">
|
|
<s-stack direction="block" gap="base">
|
|
<Field label="Company name" name="companyName" defaultValue={settings.companyName} />
|
|
<Field label="Legal form (e.g. e.U., GmbH)" name="legalForm" defaultValue={settings.legalForm} />
|
|
<Field label="Owner / managing director" name="ownerName" defaultValue={settings.ownerName} />
|
|
<Field label="Address line 1" name="addressLine1" defaultValue={settings.addressLine1} />
|
|
<Field label="Address line 2" name="addressLine2" defaultValue={settings.addressLine2} />
|
|
<s-stack direction="inline" gap="base">
|
|
<Field label="Postal code" name="postalCode" defaultValue={settings.postalCode} />
|
|
<Field label="City" name="city" defaultValue={settings.city} />
|
|
<Field label="Country (ISO)" name="countryCode" defaultValue={settings.countryCode} />
|
|
</s-stack>
|
|
<s-stack direction="inline" gap="base">
|
|
<Field label="Phone" name="phone" defaultValue={settings.phone} />
|
|
<Field label="E-mail" name="email" defaultValue={settings.email} />
|
|
<Field label="Website" name="website" defaultValue={settings.website} />
|
|
</s-stack>
|
|
</s-stack>
|
|
</s-section>
|
|
|
|
<s-section heading="Legal identifiers">
|
|
<s-stack direction="block" gap="base">
|
|
<Field
|
|
label="VAT ID (UID)"
|
|
name="vatId"
|
|
defaultValue={settings.vatId}
|
|
error={errors.vatId}
|
|
helpText="Austrian format: ATU followed by 8 digits."
|
|
/>
|
|
<Field label="Tax number (Steuernummer)" name="taxNumber" defaultValue={settings.taxNumber} />
|
|
<Field label="Commercial register no. (FN)" name="registrationNo" defaultValue={settings.registrationNo} />
|
|
<Field label="Commercial register court" name="registrationCourt" defaultValue={settings.registrationCourt} />
|
|
<Toggle
|
|
label="I am a Kleinunternehmer (no VAT charged, § 6 Abs. 1 Z 27 UStG)"
|
|
name="kleinunternehmer"
|
|
checked={settings.kleinunternehmer}
|
|
/>
|
|
</s-stack>
|
|
</s-section>
|
|
|
|
<s-section heading="Bank">
|
|
<s-stack direction="block" gap="base">
|
|
<Field label="Bank name" name="bankName" defaultValue={settings.bankName} />
|
|
<Field
|
|
label="IBAN"
|
|
name="iban"
|
|
defaultValue={settings.iban}
|
|
error={errors.iban}
|
|
/>
|
|
<Field
|
|
label="BIC"
|
|
name="bic"
|
|
defaultValue={settings.bic}
|
|
error={errors.bic}
|
|
/>
|
|
<Toggle
|
|
label="Render GiroCode (EPC QR) on unpaid invoices"
|
|
name="giroCodeEnabled"
|
|
checked={settings.giroCodeEnabled}
|
|
/>
|
|
</s-stack>
|
|
</s-section>
|
|
|
|
<s-section heading="Invoice numbering">
|
|
<s-stack direction="block" gap="base">
|
|
<s-paragraph>
|
|
<strong>shopify_order_number</strong> reuses the Shopify order
|
|
number (e.g. <code>RE-1004</code>). <strong>prefix_sequential</strong>
|
|
{" "}allocates a strictly gapless number from an internal counter
|
|
(legally safest under § 11 UStG).
|
|
</s-paragraph>
|
|
<Select
|
|
label="Numbering mode"
|
|
name="numberingMode"
|
|
defaultValue={settings.numberingMode}
|
|
options={[
|
|
{ value: "shopify_order_number", label: "Use Shopify order number" },
|
|
{ value: "prefix_sequential", label: "Sequential (gapless, app-managed)" },
|
|
]}
|
|
/>
|
|
<Field label="Invoice number prefix" name="invoicePrefix" defaultValue={settings.invoicePrefix} />
|
|
<Field
|
|
label="Sequential start (last issued; next = this + 1)"
|
|
name="invoiceSeed"
|
|
type="number"
|
|
defaultValue={String(settings.invoiceSeed)}
|
|
error={errors.invoiceSeed}
|
|
/>
|
|
<Field
|
|
label="Payment term (days)"
|
|
name="paymentTermDays"
|
|
type="number"
|
|
defaultValue={String(settings.paymentTermDays)}
|
|
error={errors.paymentTermDays}
|
|
/>
|
|
<Select
|
|
label="Default language"
|
|
name="defaultLanguage"
|
|
defaultValue={settings.defaultLanguage}
|
|
options={[
|
|
{ value: "de", label: "German (de)" },
|
|
{ value: "en", label: "English (en)" },
|
|
]}
|
|
/>
|
|
<Field label="Footer note (German)" name="footerNote" defaultValue={settings.footerNote} helpText="Shown at the bottom of every German PDF invoice (e.g. „Vielen Dank für Ihren Auftrag.“)." />
|
|
<Field label="Footer note (English)" name="footerNoteEn" defaultValue={settings.footerNoteEn} helpText="Shown on English PDF invoices. Falls back to the German note when empty." />
|
|
</s-stack>
|
|
</s-section>
|
|
|
|
<s-section heading="Logo">
|
|
<s-stack direction="block" gap="base">
|
|
<s-paragraph>
|
|
The logo is rendered in the top-right corner of every invoice
|
|
PDF. Upload an image (PNG, JPEG, WebP or GIF, max 5 MB) or
|
|
provide a publicly reachable HTTPS URL — uploads take precedence.
|
|
</s-paragraph>
|
|
{errors.logo && <s-banner tone="critical">{errors.logo}</s-banner>}
|
|
{logoPreviewDataUrl && (
|
|
<s-stack direction="block" gap="small">
|
|
<s-text>Current logo:</s-text>
|
|
<img
|
|
src={logoPreviewDataUrl}
|
|
alt="Current invoice logo"
|
|
style={{ maxWidth: "240px", maxHeight: "120px", border: "1px solid #ddd", padding: "8px", background: "#fff" }}
|
|
/>
|
|
<s-checkbox name="removeLogo" label="Remove current logo on save" />
|
|
</s-stack>
|
|
)}
|
|
<s-text>Upload a new logo:</s-text>
|
|
<input type="file" name="logoFile" accept="image/png,image/jpeg,image/webp,image/gif" />
|
|
<Field
|
|
label="Or external logo URL (PNG/JPG/WebP, served from Shopify Files or any HTTPS URL)"
|
|
name="logoUrl"
|
|
defaultValue={visibleLogoUrl}
|
|
/>
|
|
</s-stack>
|
|
</s-section>
|
|
|
|
<s-section heading="SMTP (used by the email Flow action)">
|
|
<s-stack direction="block" gap="base">
|
|
<s-stack direction="inline" gap="base">
|
|
<Field label="Host" name="smtpHost" defaultValue={settings.smtpHost} />
|
|
<Field
|
|
label="Port"
|
|
name="smtpPort"
|
|
type="number"
|
|
defaultValue={String(settings.smtpPort)}
|
|
error={errors.smtpPort}
|
|
/>
|
|
</s-stack>
|
|
<Toggle
|
|
label="Use TLS (SMTPS) — typically required for port 465"
|
|
name="smtpSecure"
|
|
checked={settings.smtpSecure}
|
|
/>
|
|
<Field label="Username" name="smtpUser" defaultValue={settings.smtpUser} />
|
|
<Field label="Password" name="smtpPassword" type="password" defaultValue={settings.smtpPassword} />
|
|
<s-stack direction="inline" gap="base">
|
|
<Field label="From name" name="smtpFromName" defaultValue={settings.smtpFromName} />
|
|
<Field label="From e-mail" name="smtpFromEmail" defaultValue={settings.smtpFromEmail} />
|
|
<Field label="Reply-to" name="smtpReplyTo" defaultValue={settings.smtpReplyTo} />
|
|
</s-stack>
|
|
</s-stack>
|
|
</s-section>
|
|
|
|
<s-section>
|
|
<s-stack direction="inline" gap="base" justifyContent="end" alignItems="center">
|
|
{isSaving ? <s-text tone="neutral">Saving…</s-text> : null}
|
|
<s-button type="submit" variant="primary" {...(isSaving ? { loading: true } : {})}>
|
|
Save settings
|
|
</s-button>
|
|
</s-stack>
|
|
</s-section>
|
|
</Form>
|
|
</s-page>
|
|
);
|
|
}
|
|
|
|
interface FieldProps {
|
|
label: string;
|
|
name: string;
|
|
defaultValue?: string;
|
|
type?: string;
|
|
error?: string;
|
|
helpText?: string;
|
|
}
|
|
|
|
function Field({ label, name, defaultValue = "", type = "text", error, helpText }: FieldProps) {
|
|
// Polaris web-components don't expose a generic html `type` prop; we use
|
|
// distinct tags only when needed (e.g. password). The form action parses
|
|
// numeric strings server-side.
|
|
if (type === "password") {
|
|
return (
|
|
// s-password-field renders an obscured input
|
|
<s-password-field
|
|
label={label}
|
|
name={name}
|
|
value={defaultValue}
|
|
{...(error ? { error } : {})}
|
|
{...(helpText ? { details: helpText } : {})}
|
|
/>
|
|
);
|
|
}
|
|
return (
|
|
<s-text-field
|
|
label={label}
|
|
name={name}
|
|
value={defaultValue}
|
|
{...(error ? { error } : {})}
|
|
{...(helpText ? { details: helpText } : {})}
|
|
/>
|
|
);
|
|
}
|
|
|
|
interface ToggleProps { label: string; name: string; checked: boolean }
|
|
function Toggle({ label, name, checked }: ToggleProps) {
|
|
return (
|
|
<s-checkbox
|
|
name={name}
|
|
label={label}
|
|
{...(checked ? { checked: true } : {})}
|
|
/>
|
|
);
|
|
}
|
|
|
|
interface SelectProps {
|
|
label: string;
|
|
name: string;
|
|
defaultValue: string;
|
|
options: { value: string; label: string }[];
|
|
}
|
|
function Select({ label, name, defaultValue, options }: SelectProps) {
|
|
return (
|
|
<s-select label={label} name={name} value={defaultValue}>
|
|
{options.map((o) => (
|
|
<s-option key={o.value} value={o.value}>
|
|
{o.label}
|
|
</s-option>
|
|
))}
|
|
</s-select>
|
|
);
|
|
}
|