fix: add disclaimer

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",

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/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,