10b18c6010
- 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
48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { PaymentMethodSelector, CODInstructions } from "@/components/payment";
|
|
import { getPaymentMethodsForChannel } from "@/lib/config/paymentMethods";
|
|
import type { PaymentMethod } from "@/lib/saleor/payments/types";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
interface PaymentSectionProps {
|
|
selectedMethodId: string;
|
|
onSelectMethod: (methodId: string) => void;
|
|
locale: string;
|
|
channel?: string;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export function PaymentSection({
|
|
selectedMethodId,
|
|
onSelectMethod,
|
|
locale,
|
|
channel = "default-channel",
|
|
disabled = false,
|
|
}: PaymentSectionProps) {
|
|
const t = useTranslations("Payment");
|
|
|
|
// Get available payment methods for this channel
|
|
const paymentMethods: PaymentMethod[] = getPaymentMethodsForChannel(channel);
|
|
|
|
// Get the selected method details
|
|
const selectedMethod = paymentMethods.find((m) => m.id === selectedMethodId);
|
|
|
|
return (
|
|
<section className="border-t border-gray-200 pt-6">
|
|
<PaymentMethodSelector
|
|
methods={paymentMethods}
|
|
selectedMethodId={selectedMethodId}
|
|
onSelectMethod={onSelectMethod}
|
|
locale={locale}
|
|
disabled={disabled}
|
|
/>
|
|
|
|
{/* COD instructions can be shown here if needed */}
|
|
{selectedMethod?.id === "cod" && (
|
|
<CODInstructions />
|
|
)}
|
|
</section>
|
|
);
|
|
}
|