upgraded cart add function

app/[locale]/cart/page.tsx

@@ -26,7 +26,7 @@ export default function CartPage() {
   const [selectedRegion, setSelectedRegion] = useState<string>("");
   const [selectedProvince, setSelectedProvince] = useState<number | null>(null);
   const [note, setNote] = useState<string>("");
-  const [phone, setPhone] = useState<string>("");
+  const [phone, setPhone] = useState<string>("+993 "); 
   const [name, setName] = useState<string>("");
   const [lastName, setLastName] = useState<string>("");
   const router = useRouter();
@@ -88,41 +88,45 @@ export default function CartPage() {
     setSelectedProvince(null);
   };
 
-  const handleCompleteOrder = () => {
+ 
-    if (
+  const formatPhoneForBackend = (phoneNumber: string): string => {
-      !selectedRegion ||
+   
-      !selectedProvince ||
+    return phoneNumber.replace(/^\+993\s*/, "").replace(/\s+/g, "");
-      !paymentType ||
-      !phone ||
-      !name
-    ) {
-      console.warn("Missing required fields for order");
-      return;
-    }
-
-    const selectedProvinceData = provinces.find(
-      (p) => p.id === selectedProvince
-    );
-    if (!selectedProvinceData) return;
-
-    createOrder(
-      {
-        customer_name: name,
-        customer_phone: phone,
-        customer_address: selectedProvinceData.name,
-        shipping_method: "standart",
-        payment_type_id: paymentType.id,
-        region: selectedRegion,
-        note: note || undefined,
-      },
-      {
-        onSuccess: () => {
-          router.push(`/orders`);
-        },
-      }
-    );
   };
 
+  const handleCompleteOrder = () => {
+  if (!selectedRegion || !selectedProvince || !paymentType || !phone || !name) {
+    console.warn("Missing required fields for order");
+    return;
+  }
+
+  const phoneDigits = formatPhoneForBackend(phone);
+  if (phoneDigits.length !== 8) {
+    console.warn("Phone number must be exactly 8 digits");
+    return;
+  }
+
+  const selectedProvinceData = provinces.find((p) => p.id === selectedProvince);
+  if (!selectedProvinceData) return;
+
+  createOrder(
+    {
+      customer_name: `${name} ${lastName}`.trim(),
+      customer_phone: parseInt(phoneDigits, 10), 
+      customer_address: selectedProvinceData.name,
+      shipping_method: "standart",
+      payment_type_id: paymentType.id,
+      region: selectedRegion,
+      note: note || undefined,
+    },
+    {
+      onSuccess: () => {
+        router.push(`/orders`);
+      },
+    }
+  );
+};
+
   if (!isClient) return null;
 
   if (isLoading) {
@@ -254,4 +258,4 @@ export default function CartPage() {
       </div>
     </div>
   );
-}
+}

components/layout/ui/AuthDialog.tsx

@@ -4,7 +4,12 @@ import { useState, useCallback } from "react";
 import Image from "next/image";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { toast } from "sonner";
 import Logo from "@/public/logo.webp";
 import { useLogin, useVerifyToken } from "@/lib/hooks/useAuth";
@@ -16,10 +21,9 @@ interface AuthDialogProps {
 }
 
 export default function AuthDialog({ isOpen, onClose }: AuthDialogProps) {
-  const [phone, setPhone] = useState("993");
+  const [phone, setPhone] = useState("+993 ");
   const [otp, setOtp] = useState("");
   const [otpSent, setOtpSent] = useState(false);
-  const [rawPhone, setRawPhone] = useState("");
   const t = useTranslations();
 
   const { mutate: login, isPending: isLoginLoading } = useLogin();
@@ -27,25 +31,55 @@ export default function AuthDialog({ isOpen, onClose }: AuthDialogProps) {
 
   const resetDialog = useCallback(() => {
     setOtpSent(false);
-    setPhone("993");
+    setPhone("+993 ");
     setOtp("");
-    setRawPhone("");
     onClose();
   }, [onClose]);
 
+  const formatPhoneForBackend = (phoneNumber: string): string => {
+    return phoneNumber.replace(/^\+993\s*/, "").replace(/\s+/g, "");
+  };
+
+  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const input = e.target.value;
+    const prefix = "+993 ";
+
+    if (input.length < prefix.length) {
+      setPhone(prefix);
+      return;
+    }
+
+    const digitsOnly = input.substring(prefix.length).replace(/\D/g, "");
+
+    const limitedDigits = digitsOnly.substring(0, 8);
+
+    let formattedPhone = prefix;
+    if (limitedDigits.length > 0) {
+      formattedPhone += limitedDigits.substring(0, 2);
+
+      if (limitedDigits.length > 2) {
+        formattedPhone += " " + limitedDigits.substring(2);
+      }
+    }
+
+    setPhone(formattedPhone);
+  };
+
+  const isPhoneValid = (): boolean => {
+    const phoneDigits = formatPhoneForBackend(phone);
+    return phoneDigits.length === 8;
+  };
+
   const handleSendOtp = useCallback(() => {
-    const cleanPhone = phone.replace(/\D/g, "");
+    if (!isPhoneValid()) {
-    
-    if (cleanPhone.length !== 11 || !cleanPhone.startsWith("993")) {
       toast.error(t("invalid_phone"));
       return;
     }
 
-    const phoneNumber = cleanPhone.substring(3);
+    const phoneNumber = formatPhoneForBackend(phone);
-    setRawPhone(phoneNumber);
 
     login(
-      { phone_number: phoneNumber },
+      { phone_number: parseInt(phoneNumber, 10) },
       {
         onSuccess: () => {
           toast.success(t("code_sent"));
@@ -64,10 +98,12 @@ export default function AuthDialog({ isOpen, onClose }: AuthDialogProps) {
       return;
     }
 
+    const phoneNumber = formatPhoneForBackend(phone);
+
     verifyToken(
       {
-        phone_number: rawPhone,
+        phone_number: parseInt(phoneNumber, 10),
-        code: otp,
+        code: parseInt(otp, 10),
       },
       {
         onSuccess: () => {
@@ -80,21 +116,16 @@ export default function AuthDialog({ isOpen, onClose }: AuthDialogProps) {
         },
       }
     );
-  }, [otp, rawPhone, verifyToken, resetDialog, t]);
+  }, [otp, phone, verifyToken, resetDialog, t]);
 
-  const handleKeyPress = useCallback((e: React.KeyboardEvent, action: () => void) => {
+  const handleKeyPress = useCallback(
-    if (e.key === "Enter") {
+    (e: React.KeyboardEvent, action: () => void) => {
-      action();
+      if (e.key === "Enter") {
-    }
+        action();
-  }, []);
+      }
-
+    },
-  const formatPhoneInput = useCallback((value: string) => {
+    []
-    const cleaned = value.replace(/\D/g, "");
+  );
-    if (!cleaned.startsWith("993")) {
-      return "993";
-    }
-    return cleaned.substring(0, 11);
-  }, []);
 
   return (
     <Dialog open={isOpen} onOpenChange={resetDialog}>
@@ -105,21 +136,24 @@ export default function AuthDialog({ isOpen, onClose }: AuthDialogProps) {
               <Image src={Logo} alt="Logo" fill className="object-contain" />
             </div>
           </div>
-          <DialogTitle className="text-2xl text-center">{t("common.enterPhone")}</DialogTitle>
+          <DialogTitle className="text-2xl text-center">
-          <p className="text-center text-sm text-gray-600">{t("common.weWillSendCode")}</p>
+            {t("common.enterPhone")}
+          </DialogTitle>
+          <p className="text-center text-sm text-gray-600">
+            {t("common.weWillSendCode")}
+          </p>
         </DialogHeader>
 
         <div className="space-y-4 mt-4">
           <div>
             <Input
               type="tel"
-              placeholder={t("common.phone")}
+              placeholder="+993 61 097651"
               value={phone}
-              onChange={(e) => setPhone(formatPhoneInput(e.target.value))}
+              onChange={handlePhoneChange}
               className="h-12 rounded-xl"
               onKeyDown={(e) => handleKeyPress(e, handleSendOtp)}
               disabled={otpSent || isLoginLoading}
-              maxLength={11}
             />
             <p className="text-xs text-gray-500 mt-1">{t("phone_format")}</p>
           </div>
@@ -129,7 +163,9 @@ export default function AuthDialog({ isOpen, onClose }: AuthDialogProps) {
               type="text"
               placeholder={t("common.code")}
               value={otp}
-              onChange={(e) => setOtp(e.target.value.replace(/\D/g, "").substring(0, 6))}
+              onChange={(e) =>
+                setOtp(e.target.value.replace(/\D/g, "").substring(0, 6))
+              }
               className="h-12 rounded-xl"
               onKeyDown={(e) => handleKeyPress(e, handleLogin)}
               disabled={isVerifyLoading}
@@ -142,18 +178,20 @@ export default function AuthDialog({ isOpen, onClose }: AuthDialogProps) {
             onClick={otpSent ? handleLogin : handleSendOtp}
             className="w-full cursor-pointer h-12 rounded-xl font-bold text-base bg-[#005bff] hover:bg-[#0041c4]"
             size="lg"
-            disabled={isLoginLoading || isVerifyLoading}
+            disabled={
+              isLoginLoading || isVerifyLoading || (!otpSent && !isPhoneValid())
+            }
           >
             {isLoginLoading
               ? t("sending")
               : isVerifyLoading
-                ? t("verifying")
+              ? t("verifying")
-                : otpSent
+              : otpSent
-                  ? t("verify")
+              ? t("verify")
-                  : t("common.send")}
+              : t("common.send")}
           </Button>
         </div>
       </DialogContent>
     </Dialog>
   );
-}
+}

features/cart/components/CartItemCard.tsx

@@ -326,7 +326,7 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
       <Card className="p-4 shadow-none border">
         <div className="flex flex-col sm:flex-row gap-4">
           <div className="flex gap-4 flex-1">
-            <div className="relative w-[88px] h-[117px] rounded-xl border overflow-hidden flex-shrink-0">
+            <div className="relative w-[88px] h-[117px] rounded-xl border overflow-hidden shrink-0">
               <Image
                 src={getImageSrc()}
                 alt={item.product.name}

features/cart/components/OrderSummary.tsx

@@ -16,6 +16,7 @@ import { Input } from "@/components/ui/input";
 import DeliveryTypeSelector from "./DeliveryTypeSelector";
 import { useTranslations } from "next-intl";
 import type { DeliveryType, PaymentType, Province } from "@/lib/types/api";
+import { useState } from "react";
 
 interface OrderBillingItem {
   title: string;
@@ -83,17 +84,59 @@ export default function OrderSummary({
   isLoading,
 }: OrderSummaryProps) {
   const t = useTranslations();
+  const [showValidation, setShowValidation] = useState(false);
 
   const provincesForSelectedRegion = selectedRegion
     ? regionGroups[selectedRegion] || []
     : [];
+
+  const phoneDigits = phone.replace(/\D/g, "");
+  const isPhoneValid = phoneDigits.length === 11;
+
   const isFormValid =
-    selectedRegion && selectedProvince && paymentType && phone && name;
+    selectedRegion &&
+    selectedProvince &&
+    paymentType &&
+    isPhoneValid &&
+    name.trim() !== "" &&
+    lastName.trim() !== "";
+
+  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const input = e.target.value;
+    const prefix = "+993 ";
+
+    if (input.length < prefix.length) {
+      onPhoneChange(prefix);
+      return;
+    }
+
+    const digitsOnly = input.substring(prefix.length).replace(/\D/g, "");
+
+    const limitedDigits = digitsOnly.substring(0, 8);
+
+    let formattedPhone = prefix;
+    if (limitedDigits.length > 0) {
+      formattedPhone += limitedDigits.substring(0, 2);
+
+      if (limitedDigits.length > 2) {
+        formattedPhone += " " + limitedDigits.substring(2);
+      }
+    }
+
+    onPhoneChange(formattedPhone);
+  };
+
+  const handleCompleteOrderClick = () => {
+    setShowValidation(true);
+    if (isFormValid) {
+      onCompleteOrder();
+    }
+  };
 
   return (
     <Card className="w-full md:w-[380px] p-4 md:p-6 rounded-xl h-fit sticky top-20">
       {/* Customer Information */}
-      <div className="">
+      <div className="mb-6">
         <h3 className="text-lg font-semibold mb-3">
           {t("customer_information")}
         </h3>
@@ -107,8 +150,13 @@ export default function OrderSummary({
               value={name}
               onChange={(e) => onNameChange(e.target.value)}
               placeholder={t("name")}
-              className="rounded-lg"
+              className={`rounded-lg ${
+                showValidation && name.trim() === "" ? "border-red-500" : ""
+              }`}
             />
+            {showValidation && name.trim() === "" && (
+              <p className="text-xs text-red-500 mt-1">Bu alan zorunludur</p>
+            )}
           </div>
           <div>
             <Label className="text-sm font-medium mb-2 block">
@@ -119,8 +167,13 @@ export default function OrderSummary({
               value={lastName}
               onChange={(e) => onLastNameChange(e.target.value)}
               placeholder={t("last_name")}
-              className="rounded-lg"
+              className={`rounded-lg ${
+                showValidation && lastName.trim() === "" ? "border-red-500" : ""
+              }`}
             />
+            {showValidation && lastName.trim() === "" && (
+              <p className="text-xs text-red-500 mt-1">Bu alan zorunludur</p>
+            )}
           </div>
           <div>
             <Label className="text-sm font-medium mb-2 block">
@@ -129,16 +182,23 @@ export default function OrderSummary({
             <Input
               type="tel"
               value={phone}
-              onChange={(e) => onPhoneChange(e.target.value)}
+              onChange={handlePhoneChange}
-              placeholder={t("phone")}
+              placeholder="+993 61 097651"
-              className="rounded-lg"
+              className={`rounded-lg ${
+                showValidation && !isPhoneValid ? "border-red-500" : ""
+              }`}
             />
+            {showValidation && !isPhoneValid && (
+              <p className="text-xs text-red-500 mt-1">
+                Telefon 8 rakamdan oluşmalıdır
+              </p>
+            )}
           </div>
         </div>
       </div>
 
       {/* Payment Type */}
-      <div className="">
+      <div className="mb-6">
         <h3 className="text-lg font-semibold mb-3">{t("payment_type")}</h3>
         <div className="flex gap-2">
           {paymentTypes.map((type) => (
@@ -147,6 +207,8 @@ export default function OrderSummary({
               className={`flex-1 cursor-pointer transition-all ${
                 paymentType?.id === type.id
                   ? "border-2 border-[#005bff] bg-blue-50"
+                  : showValidation && !paymentType
+                  ? "border-2 border-red-500"
                   : "border-2 border-gray-200"
               }`}
               onClick={() => onPaymentTypeChange(type)}
@@ -163,16 +225,13 @@ export default function OrderSummary({
             </Card>
           ))}
         </div>
+        {showValidation && !paymentType && (
+          <p className="text-xs text-red-500 mt-1">Ödeme türü seçiniz</p>
+        )}
       </div>
 
-      {/* Delivery Type */}
-      {/* <DeliveryTypeSelector
-        selectedType={deliveryType}
-        onSelect={onDeliveryTypeChange}
-      /> */}
-
       {/* Region Selection */}
-      <div className="">
+      <div className="mb-6">
         <Label className="text-lg font-semibold mb-3 block">
           {t("choose_region")}
         </Label>
@@ -189,7 +248,11 @@ export default function OrderSummary({
               <RadioGroupItem
                 value={regionCode}
                 id={`region-${regionCode}`}
-                className="border-2 border-gray-400 data-[state=checked]:border-[#005bff] data-[state=checked]:bg-white"
+                className={`border-2 ${
+                  showValidation && !selectedRegion
+                    ? "border-red-500"
+                    : "border-gray-400"
+                } data-[state=checked]:border-[#005bff] data-[state=checked]:bg-white`}
               />
               <Label
                 htmlFor={`region-${regionCode}`}
@@ -200,11 +263,14 @@ export default function OrderSummary({
             </div>
           ))}
         </RadioGroup>
+        {showValidation && !selectedRegion && (
+          <p className="text-xs text-red-500 mt-1">Bölge seçiniz</p>
+        )}
       </div>
 
       {/* Province Selection */}
       {selectedRegion && provincesForSelectedRegion.length > 0 && (
-        <div className="">
+        <div className="mb-6">
           <Label className="text-lg font-semibold mb-3 block">
             {t("choose_address")}
           </Label>
@@ -212,7 +278,11 @@ export default function OrderSummary({
             value={selectedProvince?.toString() || ""}
             onValueChange={(value) => onProvinceChange(parseInt(value))}
           >
-            <SelectTrigger className="rounded-lg w-full">
+            <SelectTrigger
+              className={`rounded-lg w-full ${
+                showValidation && !selectedProvince ? "border-red-500" : ""
+              }`}
+            >
               <SelectValue placeholder={t("choose_address")} />
             </SelectTrigger>
             <SelectContent>
@@ -223,11 +293,14 @@ export default function OrderSummary({
               ))}
             </SelectContent>
           </Select>
+          {showValidation && !selectedProvince && (
+            <p className="text-xs text-red-500 mt-1">Adres seçiniz</p>
+          )}
         </div>
       )}
 
       {/* Note */}
-      <div className="">
+      <div className="mb-6">
         <Label className="text-lg font-semibold mb-3 block">{t("note")}</Label>
         <Textarea
           value={note}
@@ -253,7 +326,7 @@ export default function OrderSummary({
 
       <Separator className="my-4" />
 
-      <div className="flex justify-between items-center ">
+      <div className="flex justify-between items-center mb-6">
         <span className="text-lg font-semibold">
           {order.billing.footer.title}:
         </span>
@@ -263,8 +336,8 @@ export default function OrderSummary({
       </div>
 
       <Button
-        onClick={onCompleteOrder}
+        onClick={handleCompleteOrderClick}
-        disabled={!isFormValid || isLoading}
+        disabled={isLoading}
         className="w-full rounded-lg cursor-pointer bg-[#005bff] hover:bg-[#004dcc] h-12 text-lg font-bold disabled:opacity-50"
         size="lg"
       >

features/cart/hooks/useCart.ts

@@ -463,7 +463,7 @@ export function useCreateOrder() {
   return useMutation({
     mutationFn: async (payload: {
       customer_name?: string;
-      customer_phone: string;
+      customer_phone: number;
       customer_address: string;
       shipping_method: string;
       payment_type_id: number;
@@ -475,7 +475,11 @@ export function useCreateOrder() {
       const response = await apiClient.post("/orders", payload);
       return response.data;
     },
-    onSuccess: () => {
+    onSuccess: (data) => {
+      if (data && data.payment_url) {
+        window.open(data.payment_url, '_blank')?.focus();
+      }
+
       pendingUpdates.clear();
       queryClient.setQueryData<CartResponse>(["cart"], (old) => {
         if (!old) return old;

features/home/components/ProductCard.tsx

@@ -195,7 +195,6 @@ export default function ProductCard({
           productId: id,
           quantity: localQuantity,
         });
-        await refetchCart();
         toast.success(t("added_to_cart"), {
           description: `${name} ${t("added_to_cart_description")}`,
         });
@@ -206,7 +205,7 @@ export default function ProductCard({
         setIsSyncing(false);
       }
     },
-    [id, name, localQuantity, availableStock, addToCartMutation, refetchCart]
+    [id, name, localQuantity, availableStock, addToCartMutation]
   );
 
   const handleQuantityChange = useCallback(

features/products/components/ProductPageContent.tsx

@@ -119,16 +119,6 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
     [product]
   );
 
-  useEffect(() => {
-    const unsubscribe = cartEvents.subscribe(() => {
-      refetchCart();
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, [refetchCart]);
-
   useEffect(() => {
     if (!product?.id || isInitialized) return;
 
@@ -246,7 +236,6 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
           });
         }
 
-        await refetchCart();
         retryCountRef.current = 0;
         clearPendingUpdate();
 
@@ -274,7 +263,6 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
       addToCartMutation,
       removeFromCartMutation,
       cartItem,
-      refetchCart,
       clearPendingUpdate,
       t,
     ]
@@ -332,7 +320,6 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
 
       setTimeout(() => {
         shouldSyncFromCartRef.current = true;
-        refetchCart();
       }, 150);
 
       setIsSyncing(false);
@@ -348,14 +335,7 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
         description: t("add_to_cart_failed"),
       });
     }
-  }, [
+  }, [product, localQuantity, availableStock, addToCartMutation, t]);
-    product,
-    localQuantity,
-    availableStock,
-    addToCartMutation,
-    refetchCart,
-    t,
-  ]);
 
   const handleQuantityIncrease = useCallback(() => {
     if (localQuantity >= availableStock) {

lib/hooks/useAuth.ts

@@ -8,7 +8,7 @@ import { AxiosError } from "axios";
 
 // ==================== TYPES ====================
 interface LoginCredentials {
-  phone_number: string;
+  phone_number: number;
   password?: string;
 }
 
@@ -19,8 +19,8 @@ interface RegisterData {
 }
 
 interface VerifyTokenData {
-  phone_number: string;
+  phone_number: number;
-  code: string;
+  code: number;
 }
 
 interface AuthResponse {

next.config.ts

@@ -13,7 +13,7 @@ const nextConfig: NextConfig = {
       {
         protocol: "http",
         hostname: "shop.post.tm",
-        port: "8080",
+        // port: "8080",
       },
     ],
   },