diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index c9bbe59..2c9667d 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -5,7 +5,7 @@ import Link from "next/link"; import Image from "next/image"; import { usePathname } from "next/navigation"; import { AnimatePresence, motion } from "framer-motion"; -import { useTranslations } from "next-intl"; +import { useTranslations, useLocale } from "next-intl"; import { useSaleorCheckoutStore } from "@/stores/saleorCheckoutStore"; import { User, ShoppingBag, Menu, X, Globe } from "lucide-react"; import CartDrawer from "@/components/cart/CartDrawer"; @@ -16,14 +16,15 @@ interface HeaderProps { locale?: string; } -export default function Header({ locale = "sr" }: HeaderProps) { +export default function Header({ locale: propLocale = "sr" }: HeaderProps) { const t = useTranslations("Header"); const pathname = usePathname(); const dropdownRef = useRef(null); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [scrolled, setScrolled] = useState(false); const [langDropdownOpen, setLangDropdownOpen] = useState(false); - const { getLineCount, toggleCart, initCheckout } = useSaleorCheckoutStore(); + const { getLineCount, toggleCart, initCheckout, setLanguageCode } = useSaleorCheckoutStore(); + const locale = useLocale(); const itemCount = getLineCount(); const currentLocale = isValidLocale(locale) ? LOCALE_CONFIG[locale] : LOCALE_CONFIG.sr; @@ -58,6 +59,13 @@ export default function Header({ locale = "sr" }: HeaderProps) { initCheckout(); }, [initCheckout]); + // Set language code for checkout based on current locale + useEffect(() => { + if (locale) { + setLanguageCode(locale); + } + }, [locale, setLanguageCode]); + useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 50); diff --git a/src/stores/saleorCheckoutStore.ts b/src/stores/saleorCheckoutStore.ts index fd6e6e6..c54acfd 100644 --- a/src/stores/saleorCheckoutStore.ts +++ b/src/stores/saleorCheckoutStore.ts @@ -58,22 +58,24 @@ interface GetCheckoutResponse { interface SaleorCheckoutStore { checkout: Checkout | null; checkoutToken: string | null; + languageCode: string | null; isOpen: boolean; isLoading: boolean; error: string | null; - + // Actions initCheckout: () => Promise; addLine: (variantId: string, quantity: number) => Promise; updateLine: (lineId: string, quantity: number) => Promise; removeLine: (lineId: string) => Promise; setEmail: (email: string) => Promise; + setLanguageCode: (languageCode: string) => void; refreshCheckout: () => Promise; toggleCart: () => void; openCart: () => void; closeCart: () => void; clearError: () => void; - + // Getters getLineCount: () => number; getTotal: () => number; @@ -85,13 +87,14 @@ export const useSaleorCheckoutStore = create()( (set, get) => ({ checkout: null, checkoutToken: null, + languageCode: null, isOpen: false, isLoading: false, error: null, initCheckout: async () => { - const { checkoutToken } = get(); - + const { checkoutToken, languageCode } = get(); + if (checkoutToken) { // Try to fetch existing checkout try { @@ -99,7 +102,7 @@ export const useSaleorCheckoutStore = create()( query: GET_CHECKOUT, variables: { token: checkoutToken }, }); - + if (data?.checkout) { set({ checkout: data.checkout }); return; @@ -108,8 +111,8 @@ export const useSaleorCheckoutStore = create()( // Checkout not found or expired, create new one } } - - // Create new checkout + + // Create new checkout with language code try { const { data } = await saleorClient.mutate({ mutation: CHECKOUT_CREATE, @@ -117,10 +120,11 @@ export const useSaleorCheckoutStore = create()( input: { channel: CHANNEL, lines: [], + languageCode: languageCode ? languageCode.toUpperCase() : undefined, }, }, }); - + if (data?.checkoutCreate?.checkout) { set({ checkout: data.checkoutCreate.checkout, @@ -294,6 +298,7 @@ export const useSaleorCheckoutStore = create()( openCart: () => set({ isOpen: true }), closeCart: () => set({ isOpen: false }), clearError: () => set({ error: null }), + setLanguageCode: (languageCode: string) => set({ languageCode }), getLineCount: () => { const { checkout } = get();