upgraded cart add function

2025-12-24 15:43:27 +05:00
parent 2b46d525f2
commit d3ed4d1901
9 changed files with 224 additions and 126 deletions
--- a/app/[locale]/cart/page.tsx
+++ b/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 (
-      !selectedRegion ||
-      !selectedProvince ||
-      !paymentType ||
-      !phone ||
-      !name
-    ) {
-      console.warn("Missing required fields for order");
-      return;
-    }
 
-    const selectedProvinceData = provinces.find(
-      (p) => p.id === selectedProvince
-    );
-    if (!selectedProvinceData) return;
+  const formatPhoneForBackend = (phoneNumber: string): string => {
   
-    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`);
-        },
-      }
-    );
+    return phoneNumber.replace(/^\+993\s*/, "").replace(/\s+/g, "");
  };

+  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) {
--- a/components/layout/ui/AuthDialog.tsx
+++ b/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 handleSendOtp = useCallback(() => {
-    const cleanPhone = phone.replace(/\D/g, "");
+  const formatPhoneForBackend = (phoneNumber: string): string => {
+    return phoneNumber.replace(/^\+993\s*/, "").replace(/\s+/g, "");
+  };

-    if (cleanPhone.length !== 11 || !cleanPhone.startsWith("993")) {
+  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(() => {
+    if (!isPhoneValid()) {
      toast.error(t("invalid_phone"));
      return;
    }

-    const phoneNumber = cleanPhone.substring(3);
-    setRawPhone(phoneNumber);
+    const phoneNumber = formatPhoneForBackend(phone);

    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,
-        code: otp,
+        phone_number: parseInt(phoneNumber, 10),
+        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) => {
-    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);
-  }, []);
+  const handleKeyPress = useCallback(
+    (e: React.KeyboardEvent, action: () => void) => {
+      if (e.key === "Enter") {
+        action();
+      }
+    },
+    []
+  );

  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>
-          <p className="text-center text-sm text-gray-600">{t("common.weWillSendCode")}</p>
+          <DialogTitle className="text-2xl text-center">
+            {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,15 +178,17 @@ 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")
-                : otpSent
-                  ? t("verify")
-                  : t("common.send")}
+              ? t("verifying")
+              : otpSent
+              ? t("verify")
+              : t("common.send")}
          </Button>
        </div>
      </DialogContent>
--- a/features/cart/components/CartItemCard.tsx
+++ b/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}
--- a/features/cart/components/OrderSummary.tsx
+++ b/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)}
-              placeholder={t("phone")}
-              className="rounded-lg"
+              onChange={handlePhoneChange}
+              placeholder="+993 61 097651"
+              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}
-        disabled={!isFormValid || isLoading}
+        onClick={handleCompleteOrderClick}
+        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"
      >
--- a/features/cart/hooks/useCart.ts
+++ b/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;
--- a/features/home/components/ProductCard.tsx
+++ b/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(
--- a/features/products/components/ProductPageContent.tsx
+++ b/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,
-    refetchCart,
-    t,
-  ]);
+  }, [product, localQuantity, availableStock, addToCartMutation, t]);

  const handleQuantityIncrease = useCallback(() => {
    if (localQuantity >= availableStock) {
--- a/lib/hooks/useAuth.ts
+++ b/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;
-  code: string;
+  phone_number: number;
+  code: number;
 }

 interface AuthResponse {
--- a/next.config.ts
+++ b/next.config.ts
@@ -13,7 +13,7 @@ const nextConfig: NextConfig = {
      {
        protocol: "http",
        hostname: "shop.post.tm",
-        port: "8080",
+        // port: "8080",
      },
    ],
  },