feat: add 30-day money back guarantee trust badge above complete order button

- Add green trust badge with checkmark icon above 'Complete Order' button
- Add translations for all locales (EN, SR, DE, FR)
- Badge includes: '30-Day Money-Back Guarantee' text
- Styled with green background and border to match trust/conversion theme
This commit is contained in:
Unchained
2026-03-29 14:27:05 +02:00
parent eaf599f248
commit 10b18c6010
8 changed files with 62 additions and 81 deletions

View File

@@ -1,55 +1,6 @@
"use client";
// COD Instructions component - currently disabled as the instructions are self-explanatory
// Can be re-enabled if payment method instructions are needed in the future
import { useTranslations } from "next-intl";
import { Banknote, Package, CheckCircle } from "lucide-react";
interface CODInstructionsProps {
locale: string;
}
export function CODInstructions({ locale }: CODInstructionsProps) {
const t = useTranslations("Payment.cod");
const instructions = [
{
icon: Banknote,
title: t("instructions.prepareCash"),
description: t("instructions.prepareCashDesc"),
},
{
icon: Package,
title: t("instructions.inspectOrder"),
description: t("instructions.inspectOrderDesc"),
},
{
icon: CheckCircle,
title: t("instructions.noFee"),
description: t("instructions.noFeeDesc"),
},
];
return (
<div className="mt-4 rounded-lg bg-blue-50 p-4">
<h4 className="mb-3 font-medium text-blue-900">
{t("instructions.title")}
</h4>
<div className="space-y-3">
{instructions.map((instruction, index) => {
const Icon = instruction.icon;
return (
<div key={index} className="flex items-start gap-3">
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-100">
<Icon className="h-4 w-4 text-blue-600" />
</div>
<div>
<p className="font-medium text-blue-900">{instruction.title}</p>
<p className="text-sm text-blue-700">{instruction.description}</p>
</div>
</div>
);
})}
</div>
</div>
);
}
export function CODInstructions() {
return null;
}