fix: remove mandatory

messages/en.json

@@ -27,6 +27,10 @@
   "booking": {
     "title": "LPG cylinder order",
     "intro": "Reserve LPG cylinders for your contingent at the camp. A confirmation will be sent to the email you provide.",
+    "responsibility": {
+      "title": "Your responsibility",
+      "body": "As the orderer you are responsible for ensuring your village/contingent has permission for the quantity of LPG ordered. Guideline: 60 litres per 40 participants."
+    },
     "stepProducts": "Choose products",
     "stepDetails": "Your details",
     "stepPickup": "Pickup",

messages/sv.json

@@ -27,6 +27,10 @@
   "booking": {
     "title": "Beställning av gasoltuber",
     "intro": "Reservera gasoltuber till ert kontingent på lägret. Bekräftelse skickas till angiven e-postadress.",
+    "responsibility": {
+      "title": "Beställarens ansvar",
+      "body": "Som beställare ansvarar du för att din by/kontingent har tillstånd för den mängd gasol som beställs. Riktlinje: 60 liter per 40 deltagare."
+    },
     "stepProducts": "Välj produkter",
     "stepDetails": "Era uppgifter",
     "stepPickup": "Upphämtning",

prisma/schema.prisma

@@ -80,7 +80,7 @@ model Booking {
 
   // Organization
   orgName       String
-  orgNumber     String
+  orgNumber     String?
 
   // Invoice address
   address       String

src/app/[locale]/admin/layout.tsx

@@ -26,47 +26,47 @@ export default async function AdminLayout({
 
   return (
     <div className="min-h-screen bg-ink-50">
-      <header className="border-b border-ink-200 bg-white">
+      <header className="border-b border-brand-700 bg-brand-600 text-white">
         <div className="mx-auto flex max-w-6xl items-center justify-between gap-3 px-4 py-3">
           <div className="flex items-center gap-3">
-            <Link href="/admin" className="text-base font-semibold text-ink-900">
+            <Link href="/admin" className="text-base font-semibold">
               {t('title')}
             </Link>
             {session?.user && (
               <nav className="hidden gap-1 sm:flex">
                 <Link
                   href="/admin"
-                  className="rounded-md px-3 py-1.5 text-sm text-ink-600 hover:bg-ink-100"
+                  className="rounded-md px-3 py-1.5 text-sm text-white/80 hover:bg-white/10 hover:text-white"
                 >
                   {t('nav.bookings')}
                 </Link>
                 <Link
                   href="/admin/products"
-                  className="rounded-md px-3 py-1.5 text-sm text-ink-600 hover:bg-ink-100"
+                  className="rounded-md px-3 py-1.5 text-sm text-white/80 hover:bg-white/10 hover:text-white"
                 >
                   {t('nav.products')}
                 </Link>
                 <Link
                   href="/admin/pickup-slots"
-                  className="rounded-md px-3 py-1.5 text-sm text-ink-600 hover:bg-ink-100"
+                  className="rounded-md px-3 py-1.5 text-sm text-white/80 hover:bg-white/10 hover:text-white"
                 >
                   {t('nav.pickupSlots')}
                 </Link>
                 <Link
                   href="/admin/replacements"
-                  className="rounded-md px-3 py-1.5 text-sm text-ink-600 hover:bg-ink-100"
+                  className="rounded-md px-3 py-1.5 text-sm text-white/80 hover:bg-white/10 hover:text-white"
                 >
                   {tr('navTitle')}
                 </Link>
                 <Link
                   href="/admin/settings"
-                  className="rounded-md px-3 py-1.5 text-sm text-ink-600 hover:bg-ink-100"
+                  className="rounded-md px-3 py-1.5 text-sm text-white/80 hover:bg-white/10 hover:text-white"
                 >
                   {t('nav.settings')}
                 </Link>
                 <Link
                   href="/admin/users"
-                  className="rounded-md px-3 py-1.5 text-sm text-ink-600 hover:bg-ink-100"
+                  className="rounded-md px-3 py-1.5 text-sm text-white/80 hover:bg-white/10 hover:text-white"
                 >
                   {t('nav.users')}
                 </Link>
@@ -82,7 +82,10 @@ export default async function AdminLayout({
                   await signOut({ redirectTo: '/admin/login' });
                 }}
               >
-                <button type="submit" className="btn-ghost text-xs">
+                <button
+                  type="submit"
+                  className="rounded-md px-3 py-1.5 text-xs text-white/80 hover:bg-white/10 hover:text-white"
+                >
                   {t('nav.signOut')}
                 </button>
               </form>

src/app/[locale]/booking/[number]/page.tsx

@@ -114,6 +114,15 @@ export default async function BookingConfirmedPage({
               </div>
             )}
 
+            <div className="rounded-lg border border-amber-300 bg-amber-50 p-4 text-sm">
+              <div className="font-semibold text-amber-900">
+                {t('booking.responsibility.title')}
+              </div>
+              <p className="mt-1 text-amber-800">
+                {t('booking.responsibility.body')}
+              </p>
+            </div>
+
             <div className="rounded-lg bg-ink-50 p-4 text-sm text-ink-600">
               {t('email.invoiceInfo')}
             </div>

src/app/[locale]/page.tsx

@@ -50,6 +50,27 @@ export default async function BookingPage({
           </h1>
           <p className="mt-1 max-w-2xl text-sm text-ink-600">{t('intro')}</p>
         </div>
+        <div className="mb-6 flex max-w-2xl gap-3 rounded-lg border border-amber-300 bg-amber-50 p-4">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            className="mt-0.5 h-5 w-5 shrink-0 text-amber-600"
+            aria-hidden="true"
+          >
+            <path
+              fillRule="evenodd"
+              d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
+              clipRule="evenodd"
+            />
+          </svg>
+          <div className="text-sm">
+            <div className="font-semibold text-amber-900">
+              {t('responsibility.title')}
+            </div>
+            <p className="mt-1 text-amber-800">{t('responsibility.body')}</p>
+          </div>
+        </div>
         <BookingForm
           products={products.map((p) => ({
             id: p.id,

src/components/BookingForm.tsx

@@ -126,7 +126,7 @@ export function BookingForm({
         /^\S+@\S+\.\S+$/.test(email) &&
         phone.trim().length >= 5 &&
         orgName.trim().length >= 2 &&
-        isValidSeOrgNumber(orgNumber) &&
+        (orgNumber.trim() === '' || isValidSeOrgNumber(orgNumber)) &&
         address.trim().length >= 2 &&
         postalCode.trim().length >= 3 &&
         city.trim().length >= 1
@@ -347,7 +347,6 @@ export function BookingForm({
                 />
                 <Field
                   label={t('details.orgNumber')}
-                  required
                   value={orgNumber}
                   onChange={(v) => patch({ orgNumber: v })}
                   placeholder={t('details.orgNumberPlaceholder')}

src/lib/mailjet.ts

@@ -35,6 +35,8 @@ type EmailStrings = {
   orderSummary: string;
   pickup: string;
   invoiceInfo: string;
+  responsibilityTitle: string;
+  responsibilityBody: string;
   questions: string;
   footer: string;
   subtotal: string;
@@ -53,6 +55,9 @@ function getStrings(locale: 'sv' | 'en', event: string): EmailStrings {
       orderSummary: 'Beställning',
       pickup: 'Upphämtning',
       invoiceInfo: 'Faktura skickas till organisationen efter eventet.',
+      responsibilityTitle: 'Beställarens ansvar',
+      responsibilityBody:
+        'Som beställare ansvarar du för att din by/kontingent har tillstånd för den mängd gasol som beställs. Riktlinje: 60 liter per 40 deltagare.',
       questions: 'Har du frågor? Svara på detta mejl så hjälper vi dig.',
       footer: 'Detta är en automatiserad bekräftelse från Gasol247.',
       subtotal: 'Delsumma',
@@ -69,6 +74,9 @@ function getStrings(locale: 'sv' | 'en', event: string): EmailStrings {
     orderSummary: 'Order',
     pickup: 'Pickup',
     invoiceInfo: 'An invoice will be sent to your organization after the event.',
+    responsibilityTitle: 'Your responsibility',
+    responsibilityBody:
+      'As the orderer you are responsible for ensuring your village/contingent has permission for the quantity of LPG ordered. Guideline: 60 litres per 40 participants.',
     questions: 'Questions? Reply to this email and we will help you.',
     footer: 'This is an automated confirmation from Gasol247.',
     subtotal: 'Subtotal',
@@ -166,7 +174,12 @@ export function renderBookingEmail(
 
               ${pickupHtml}
 
-              <div style="margin-top:24px;padding:16px;background:#f1f5f9;border-radius:8px;font-size:13px;color:#475569;">
+              <div style="margin-top:24px;padding:16px;background:#fef3c7;border:1px solid #fcd34d;border-radius:8px;font-size:13px;color:#78350f;">
+                <div style="font-weight:600;color:#7c2d12;margin-bottom:4px;">${escapeHtml(s.responsibilityTitle)}</div>
+                ${escapeHtml(s.responsibilityBody)}
+              </div>
+
+              <div style="margin-top:16px;padding:16px;background:#f1f5f9;border-radius:8px;font-size:13px;color:#475569;">
                 ${escapeHtml(s.invoiceInfo)}
               </div>
 
@@ -202,6 +215,8 @@ export function renderBookingEmail(
     `${s.total}: ${fmt(booking.totalOre)}`,
     ...(slotLabel ? ['', `${s.pickup}: ${slotLabel} – ${slotTime}`] : []),
     '',
+    `${s.responsibilityTitle}: ${s.responsibilityBody}`,
+    '',
     s.invoiceInfo,
     '',
     s.questions,

src/lib/validation.ts

@@ -14,12 +14,13 @@ export const bookingSubmitSchema = z.object({
   orgNumber: z
     .string()
     .trim()
-    .min(10)
     .max(13)
-    .refine((v) => isValidSeOrgNumber(v), {
+    .refine((v) => v === '' || isValidSeOrgNumber(v), {
       message: 'invalidOrgNumber',
     })
-    .transform((v) => normalizeOrgNumber(v)),
+    .transform((v) => (v === '' ? null : normalizeOrgNumber(v)))
+    .nullable()
+    .optional(),
   address: z.string().trim().min(2).max(200),
   postalCode: z.string().trim().min(3).max(20),
   city: z.string().trim().min(1).max(100),