Compare commits
4 Commits
refactor/r
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
ca363a2406 | ||
|
|
5ec0e6c92c | ||
|
|
ee574cb736 | ||
|
|
f66f9b87ab |
@@ -15,9 +15,13 @@ interface NewHeroProps {
|
|||||||
|
|
||||||
export default function NewHero({ featuredProduct }: NewHeroProps) {
|
export default function NewHero({ featuredProduct }: NewHeroProps) {
|
||||||
const locale = useLocale();
|
const locale = useLocale();
|
||||||
const { addLine, openCart } = useSaleorCheckoutStore();
|
const { addLine, openCart, setLanguageCode } = useSaleorCheckoutStore();
|
||||||
|
|
||||||
const handleAddToCart = async () => {
|
const handleAddToCart = async () => {
|
||||||
|
// Set language code before adding to cart
|
||||||
|
if (locale) {
|
||||||
|
setLanguageCode(locale);
|
||||||
|
}
|
||||||
const variant = featuredProduct?.variants?.[0];
|
const variant = featuredProduct?.variants?.[0];
|
||||||
if (variant?.id) {
|
if (variant?.id) {
|
||||||
await addLine(variant.id, 1);
|
await addLine(variant.id, 1);
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import Link from "next/link";
|
|||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import { usePathname } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
import { AnimatePresence, motion } from "framer-motion";
|
import { AnimatePresence, motion } from "framer-motion";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations, useLocale } from "next-intl";
|
||||||
import { useSaleorCheckoutStore } from "@/stores/saleorCheckoutStore";
|
import { useSaleorCheckoutStore } from "@/stores/saleorCheckoutStore";
|
||||||
import { User, ShoppingBag, Menu, X, Globe } from "lucide-react";
|
import { User, ShoppingBag, Menu, X, Globe } from "lucide-react";
|
||||||
import CartDrawer from "@/components/cart/CartDrawer";
|
import CartDrawer from "@/components/cart/CartDrawer";
|
||||||
@@ -16,14 +16,15 @@ interface HeaderProps {
|
|||||||
locale?: string;
|
locale?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Header({ locale = "sr" }: HeaderProps) {
|
export default function Header({ locale: propLocale = "sr" }: HeaderProps) {
|
||||||
const t = useTranslations("Header");
|
const t = useTranslations("Header");
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||||
const [scrolled, setScrolled] = useState(false);
|
const [scrolled, setScrolled] = useState(false);
|
||||||
const [langDropdownOpen, setLangDropdownOpen] = 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 itemCount = getLineCount();
|
||||||
const currentLocale = isValidLocale(locale) ? LOCALE_CONFIG[locale] : LOCALE_CONFIG.sr;
|
const currentLocale = isValidLocale(locale) ? LOCALE_CONFIG[locale] : LOCALE_CONFIG.sr;
|
||||||
@@ -58,6 +59,13 @@ export default function Header({ locale = "sr" }: HeaderProps) {
|
|||||||
initCheckout();
|
initCheckout();
|
||||||
}, [initCheckout]);
|
}, [initCheckout]);
|
||||||
|
|
||||||
|
// Set language code for checkout based on current locale
|
||||||
|
useEffect(() => {
|
||||||
|
if (locale) {
|
||||||
|
setLanguageCode(locale);
|
||||||
|
}
|
||||||
|
}, [locale, setLanguageCode]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleScroll = () => {
|
const handleScroll = () => {
|
||||||
setScrolled(window.scrollY > 50);
|
setScrolled(window.scrollY > 50);
|
||||||
|
|||||||
@@ -99,7 +99,7 @@ export default function ProductDetail({ product, relatedProducts, bundleProducts
|
|||||||
const [isAdding, setIsAdding] = useState(false);
|
const [isAdding, setIsAdding] = useState(false);
|
||||||
const [urgencyIndex, setUrgencyIndex] = useState(0);
|
const [urgencyIndex, setUrgencyIndex] = useState(0);
|
||||||
const [selectedBundleVariantId, setSelectedBundleVariantId] = useState<string | null>(null);
|
const [selectedBundleVariantId, setSelectedBundleVariantId] = useState<string | null>(null);
|
||||||
const { addLine, openCart } = useSaleorCheckoutStore();
|
const { addLine, openCart, setLanguageCode } = useSaleorCheckoutStore();
|
||||||
const { trackProductView, trackAddToCart } = useAnalytics();
|
const { trackProductView, trackAddToCart } = useAnalytics();
|
||||||
const validLocale = isValidLocale(locale) ? locale : "sr";
|
const validLocale = isValidLocale(locale) ? locale : "sr";
|
||||||
|
|
||||||
@@ -147,6 +147,11 @@ export default function ProductDetail({ product, relatedProducts, bundleProducts
|
|||||||
const handleAddToCart = async () => {
|
const handleAddToCart = async () => {
|
||||||
if (!selectedVariantId) return;
|
if (!selectedVariantId) return;
|
||||||
|
|
||||||
|
// Set language code before adding to cart
|
||||||
|
if (validLocale) {
|
||||||
|
setLanguageCode(validLocale);
|
||||||
|
}
|
||||||
|
|
||||||
setIsAdding(true);
|
setIsAdding(true);
|
||||||
try {
|
try {
|
||||||
await addLine(selectedVariantId, 1);
|
await addLine(selectedVariantId, 1);
|
||||||
|
|||||||
@@ -58,22 +58,24 @@ interface GetCheckoutResponse {
|
|||||||
interface SaleorCheckoutStore {
|
interface SaleorCheckoutStore {
|
||||||
checkout: Checkout | null;
|
checkout: Checkout | null;
|
||||||
checkoutToken: string | null;
|
checkoutToken: string | null;
|
||||||
|
languageCode: string | null;
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
isLoading: boolean;
|
isLoading: boolean;
|
||||||
error: string | null;
|
error: string | null;
|
||||||
|
|
||||||
// Actions
|
// Actions
|
||||||
initCheckout: () => Promise<void>;
|
initCheckout: () => Promise<void>;
|
||||||
addLine: (variantId: string, quantity: number) => Promise<void>;
|
addLine: (variantId: string, quantity: number) => Promise<void>;
|
||||||
updateLine: (lineId: string, quantity: number) => Promise<void>;
|
updateLine: (lineId: string, quantity: number) => Promise<void>;
|
||||||
removeLine: (lineId: string) => Promise<void>;
|
removeLine: (lineId: string) => Promise<void>;
|
||||||
setEmail: (email: string) => Promise<void>;
|
setEmail: (email: string) => Promise<void>;
|
||||||
|
setLanguageCode: (languageCode: string) => void;
|
||||||
refreshCheckout: () => Promise<void>;
|
refreshCheckout: () => Promise<void>;
|
||||||
toggleCart: () => void;
|
toggleCart: () => void;
|
||||||
openCart: () => void;
|
openCart: () => void;
|
||||||
closeCart: () => void;
|
closeCart: () => void;
|
||||||
clearError: () => void;
|
clearError: () => void;
|
||||||
|
|
||||||
// Getters
|
// Getters
|
||||||
getLineCount: () => number;
|
getLineCount: () => number;
|
||||||
getTotal: () => number;
|
getTotal: () => number;
|
||||||
@@ -85,13 +87,14 @@ export const useSaleorCheckoutStore = create<SaleorCheckoutStore>()(
|
|||||||
(set, get) => ({
|
(set, get) => ({
|
||||||
checkout: null,
|
checkout: null,
|
||||||
checkoutToken: null,
|
checkoutToken: null,
|
||||||
|
languageCode: null,
|
||||||
isOpen: false,
|
isOpen: false,
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
error: null,
|
error: null,
|
||||||
|
|
||||||
initCheckout: async () => {
|
initCheckout: async () => {
|
||||||
const { checkoutToken } = get();
|
const { checkoutToken, languageCode } = get();
|
||||||
|
|
||||||
if (checkoutToken) {
|
if (checkoutToken) {
|
||||||
// Try to fetch existing checkout
|
// Try to fetch existing checkout
|
||||||
try {
|
try {
|
||||||
@@ -99,7 +102,7 @@ export const useSaleorCheckoutStore = create<SaleorCheckoutStore>()(
|
|||||||
query: GET_CHECKOUT,
|
query: GET_CHECKOUT,
|
||||||
variables: { token: checkoutToken },
|
variables: { token: checkoutToken },
|
||||||
});
|
});
|
||||||
|
|
||||||
if (data?.checkout) {
|
if (data?.checkout) {
|
||||||
set({ checkout: data.checkout });
|
set({ checkout: data.checkout });
|
||||||
return;
|
return;
|
||||||
@@ -108,8 +111,8 @@ export const useSaleorCheckoutStore = create<SaleorCheckoutStore>()(
|
|||||||
// Checkout not found or expired, create new one
|
// Checkout not found or expired, create new one
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Create new checkout
|
// Create new checkout with language code
|
||||||
try {
|
try {
|
||||||
const { data } = await saleorClient.mutate<CheckoutCreateResponse>({
|
const { data } = await saleorClient.mutate<CheckoutCreateResponse>({
|
||||||
mutation: CHECKOUT_CREATE,
|
mutation: CHECKOUT_CREATE,
|
||||||
@@ -117,10 +120,11 @@ export const useSaleorCheckoutStore = create<SaleorCheckoutStore>()(
|
|||||||
input: {
|
input: {
|
||||||
channel: CHANNEL,
|
channel: CHANNEL,
|
||||||
lines: [],
|
lines: [],
|
||||||
|
languageCode: languageCode ? languageCode.toUpperCase() : undefined,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
if (data?.checkoutCreate?.checkout) {
|
if (data?.checkoutCreate?.checkout) {
|
||||||
set({
|
set({
|
||||||
checkout: data.checkoutCreate.checkout,
|
checkout: data.checkoutCreate.checkout,
|
||||||
@@ -294,6 +298,7 @@ export const useSaleorCheckoutStore = create<SaleorCheckoutStore>()(
|
|||||||
openCart: () => set({ isOpen: true }),
|
openCart: () => set({ isOpen: true }),
|
||||||
closeCart: () => set({ isOpen: false }),
|
closeCart: () => set({ isOpen: false }),
|
||||||
clearError: () => set({ error: null }),
|
clearError: () => set({ error: null }),
|
||||||
|
setLanguageCode: (languageCode: string) => set({ languageCode }),
|
||||||
|
|
||||||
getLineCount: () => {
|
getLineCount: () => {
|
||||||
const { checkout } = get();
|
const { checkout } = get();
|
||||||
|
|||||||
Reference in New Issue
Block a user