@raxonltd/raxon-core 1.1.7 → 1.1.8

package/core/view/view.checkout.tsx

@@ -0,0 +1,1964 @@
+'use client';
+
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { CheckCircle2, HelpCircle, Loader2, Package, XCircle } from 'lucide-react';
+import { useState, useRef, useEffect, useMemo, useCallback, Suspense, createContext, useContext } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useForm } from 'react-hook-form';
+import { Input } from 'rizzui/input';
+import { Button } from 'rizzui/button';
+import { useRaxon } from '@/core/raxon.context';
+import { LOGIN_SUCCESS_EVENT } from '@/core/feature/auth/hook/use.auth';
+import { ModalAuth, ModalAuthRef } from '@/core/feature/auth/modal/modal.auth';
+import { BasketAddressInput, useCart } from '@/core/feature/cart/hook/use.cart';
+import { useAddress } from '@/core/feature/address/hook/use.addres';
+import { useAddressAutocomplete } from '@/core/feature/address/hook/use.address-autocomplete';
+import { AddressSearchInput } from '@/core/feature/address/form/address-search-input';
+import { formatAddressSummary, parsedAddressToFormFields } from '@/core/feature/address/util/parse-google-place';
+import { formatBasketItemVariantLine } from '@/core/util/basket.item.display';
+import { GeneralImage } from '@/core/component/general.image';
+import { Address, AddressType, BankAccount, DeliveryMethod, PaymentMethod, PaymentProvider, PaymentTerms, Status } from '@/core/interface/prisma.interface';
+import { consumeGarantiPaymentHtml, storeGarantiPaymentHtml, submitGarantiPaymentHtml } from '@/core/util/garanti-payment';
+import { useOrder } from '@/core/feature/order/hook/use.order';
+import { nexineAxios } from '@/core/util/nexine.axios';
+import { resolveClientIp } from '@/core/util/client-ip';
+import { CartPromoCodeSection } from '@/core/feature/cart/component/cart.promo.code.section';
+
+interface AddressFormData {
+  firstName: string;
+  lastName: string;
+  phone: string;
+  street: string;
+  buildingNumber: string;
+  apartmentNumber: string;
+  postalCode: string;
+  province: string;
+  district: string;
+  newsletter: boolean;
+  billingAddressDifferent: boolean;
+  billingFullName: string;
+  billingTaxNumber: string;
+  billingProvince: string;
+  billingDistrict: string;
+  billingStreet: string;
+  savedDeliveryAddressId: string;
+  savedBillingAddressId: string;
+  addressSearch: string;
+}
+
+const addressFormDefaultValues: AddressFormData = {
+  firstName: '',
+  lastName: '',
+  phone: '',
+  street: '',
+  buildingNumber: '',
+  apartmentNumber: '',
+  postalCode: '',
+  province: '',
+  district: '',
+  newsletter: false,
+  billingAddressDifferent: false,
+  billingFullName: '',
+  billingTaxNumber: '',
+  billingProvince: '',
+  billingDistrict: '',
+  billingStreet: '',
+  savedDeliveryAddressId: '',
+  savedBillingAddressId: '',
+  addressSearch: '',
+};
+
+type CheckoutStep = 'contact' | 'address' | 'checkout';
+
+export interface CheckoutViewProps {
+  webReturnUrl?: string;
+}
+
+type CheckoutViewConfig = {
+  webReturnUrl: string;
+};
+
+const CheckoutViewContext = createContext<CheckoutViewConfig>({
+  webReturnUrl: '/sepet/odeme',
+});
+
+function useCheckoutViewConfig() {
+  return useContext(CheckoutViewContext);
+}
+
+function resolveAbsoluteReturnUrl(webReturnUrl: string): string {
+  if (/^https?:\/\//i.test(webReturnUrl)) return webReturnUrl;
+  if (typeof window === 'undefined') return webReturnUrl;
+  return `${window.location.origin}${webReturnUrl.startsWith('/') ? webReturnUrl : `/${webReturnUrl}`}`;
+}
+
+function withCheckoutQuery(webReturnUrl: string, query: string): string {
+  const separator = webReturnUrl.includes('?') ? '&' : '?';
+  return `${webReturnUrl}${separator}${query}`;
+}
+
+function formatAddressLine(addr: {
+  firstName?: string | null;
+  lastName?: string | null;
+  fullAddress?: string | null;
+  streetName?: string | null;
+  administrativeAreaLevel2?: string | null;
+  administrativeAreaLevel1?: string | null;
+  postalCode?: string | null;
+  companyName?: string | null;
+  taxNumber?: string | null;
+}) {
+  const name = addr.companyName || `${addr.firstName ?? ''} ${addr.lastName ?? ''}`.trim();
+  const street = addr.streetName ?? addr.fullAddress ?? '';
+  const location = [addr.administrativeAreaLevel2, addr.administrativeAreaLevel1].filter(Boolean).join(', ');
+  return { name, street, location, postalCode: addr.postalCode, taxNumber: addr.taxNumber };
+}
+
+function pickDefaultDeliveryAddress(addresses: Address[]): Address | undefined {
+  return addresses.find(addr => addr.type === AddressType.DELIVERY) ?? addresses[0];
+}
+
+function ViewStep1({ onContinue }: { onContinue: (email: string) => void }) {
+  const { cart, profile, isAuthenticated, isGuest } = useRaxon();
+  const modalAuthRef = useRef<ModalAuthRef>(null);
+
+  const [emailInput, setEmailInput] = useState('');
+  const [emailError, setEmailError] = useState<string | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const lastSavedEmailRef = useRef('');
+  const saveInFlightRef = useRef<Promise<boolean> | null>(null);
+  const userEditedEmailRef = useRef(false);
+
+  const updateBasketMutation = useCart().update();
+
+  useEffect(() => {
+    const fromCart = cart?.email?.trim() || '';
+    const fromProfile = isAuthenticated && !isGuest ? profile?.email?.trim() || '' : '';
+    const resolved = fromCart || fromProfile;
+
+    if (fromCart) {
+      lastSavedEmailRef.current = fromCart;
+    }
+
+    if (!resolved || userEditedEmailRef.current) return;
+
+    setEmailInput(resolved);
+  }, [cart?.email, profile?.email, isAuthenticated, isGuest]);
+
+  const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+
+  const saveEmail = (email: string): Promise<boolean> => {
+    if (saveInFlightRef.current) return saveInFlightRef.current;
+
+    const promise = (async () => {
+      const trimmed = email.trim();
+      if (!trimmed) {
+        setEmailError('E-posta adresi zorunludur.');
+        return false;
+      }
+      if (!isValidEmail(trimmed)) {
+        setEmailError('Geçerli bir e-posta adresi giriniz.');
+        return false;
+      }
+      if (trimmed === lastSavedEmailRef.current) return true;
+      if (!cart?.id) {
+        setEmailError('Sepet bulunamadı. Lütfen sayfayı yenileyin.');
+        return false;
+      }
+
+      setEmailError(null);
+      setIsSaving(true);
+      try {
+        await updateBasketMutation.mutateAsync({ id: cart.id, email: trimmed });
+        lastSavedEmailRef.current = trimmed;
+        return true;
+      } catch {
+        setEmailError('E-posta kaydedilemedi. Lütfen tekrar deneyin.');
+        return false;
+      } finally {
+        setIsSaving(false);
+      }
+    })();
+
+    saveInFlightRef.current = promise;
+    void promise.finally(() => {
+      if (saveInFlightRef.current === promise) saveInFlightRef.current = null;
+    });
+    return promise;
+  };
+
+  const handleEmailBlur = () => {
+    void saveEmail(emailInput);
+  };
+
+  return (
+    <>
+      <ModalAuth ref={modalAuthRef} />
+      <div className="space-y-4">
+        <div>
+          <h2 className="text-base font-semibold text-gray-900">İletişim</h2>
+          <p className="mt-1 text-sm text-gray-500">Sipariş onayı ve kargo bilgileri bu adrese gönderilir.</p>
+        </div>
+
+        {!isGuest && isAuthenticated ? (
+          <p className="text-sm text-gray-600">
+            <button
+              type="button"
+              className="font-medium text-[#CF0A2C] hover:underline"
+              onClick={() => modalAuthRef.current?.open('login')}
+            >
+              Hesabınızla giriş yaptınız
+            </button>
+          </p>
+        ) : (
+          <p className="text-sm text-gray-600">
+            Hesabınız var mı?
+            <button
+              type="button"
+              className="font-medium text-[#CF0A2C] hover:underline"
+              onClick={() => modalAuthRef.current?.open('login')}
+            >
+              Giriş yap
+            </button>
+            {' veya '}
+            <button
+              type="button"
+              className="font-medium text-[#CF0A2C] hover:underline"
+              onClick={() => modalAuthRef.current?.open('register')}
+            >
+              kayıt ol
+            </button>
+          </p>
+        )}
+
+        <Input
+          type="email"
+          label="E-posta"
+          placeholder="ornek@email.com"
+          value={emailInput}
+          onChange={e => {
+            userEditedEmailRef.current = true;
+            setEmailInput(e.target.value);
+          }}
+          onBlur={handleEmailBlur}
+          size="lg"
+          className="rounded-xl"
+          required
+        />
+        {isSaving ? <p className="text-xs text-gray-500">Kaydediliyor…</p> : null}
+        {emailError ? <p className="text-sm text-red-600">{emailError}</p> : null}
+
+        <Button
+          type="button"
+          size="lg"
+          className="w-full rounded-xl bg-[#CF0A2C] font-semibold text-white hover:bg-[#a80824]"
+          disabled={!emailInput.trim() || isSaving}
+          onClick={async () => {
+            const ok = await saveEmail(emailInput);
+            if (ok) onContinue(emailInput.trim());
+          }}
+        >
+          Devam et
+        </Button>
+      </div>
+    </>
+  );
+}
+
+function ViewStep2({ onComplete, onBack }: { onComplete: () => void; onBack: () => void }) {
+  const { cart } = useRaxon();
+  const deliveryFormHydratedKeyRef = useRef<string | null>(null);
+  const addressBasketSyncRef = useRef<string | null>(null);
+
+  const {
+    query: addressSearchQuery,
+    setQuery: setAddressSearchQuery,
+    onUserQueryChange: onAddressSearchQueryChange,
+    results: addressSearchResults,
+    isSearching: isAddressSearching,
+    showResults: showAddressSearchResults,
+    setShowResults: setShowAddressSearchResults,
+    selectPlace: selectAddressPlace,
+    resetSearch: resetAddressSearch,
+  } = useAddressAutocomplete();
+
+  const updateBasketMutation = useCart().update();
+  const { data: addressesPayload } = useAddress().fetch();
+
+  const savedAddresses: Address[] = addressesPayload?.data ?? [];
+
+  const addressForm = useForm<AddressFormData>({
+    defaultValues: addressFormDefaultValues,
+  });
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    getValues,
+    reset,
+    setError,
+    clearErrors,
+    formState: { errors, isSubmitting },
+  } = addressForm;
+
+  const billingAddressDifferent = watch('billingAddressDifferent');
+  const savedDeliveryAddressId = watch('savedDeliveryAddressId');
+  const savedBillingAddressId = watch('savedBillingAddressId');
+  const provinceField = register('province', { required: 'İl giriniz' });
+  const districtField = register('district', { required: 'İlçe giriniz' });
+  const billingProvinceField = register('billingProvince', {
+    required: billingAddressDifferent ? 'İl giriniz' : false,
+  });
+  const billingDistrictField = register('billingDistrict', {
+    required: billingAddressDifferent ? 'İlçe giriniz' : false,
+  });
+
+  useEffect(() => {
+    const d = cart?.deliveryAddress;
+    if (!cart || !d?.id) return;
+    const hydrateKey = `${cart.id}:${d.id}`;
+    if (deliveryFormHydratedKeyRef.current === hydrateKey) return;
+    deliveryFormHydratedKeyRef.current = hydrateKey;
+    reset({
+      ...addressFormDefaultValues,
+      firstName: d.firstName ?? '',
+      lastName: d.lastName ?? '',
+      phone: d.phoneNumber ?? '',
+      street: d.streetName ?? d.fullAddress ?? '',
+      buildingNumber: d.buildingName ?? '',
+      apartmentNumber: d.apartmentNumber ?? '',
+      postalCode: d.postalCode ?? '',
+      province: d.administrativeAreaLevel1 ?? '',
+      district: d.administrativeAreaLevel2 ?? '',
+      savedDeliveryAddressId: d.id,
+    });
+    setAddressSearchQuery(formatAddressSummary(d));
+  }, [cart, cart?.deliveryAddress?.id, reset, setAddressSearchQuery]);
+
+  useEffect(() => {
+    if (cart?.deliveryAddress?.id) return;
+    if (!addressesPayload?.data?.length) return;
+
+    const defaultAddress = pickDefaultDeliveryAddress(addressesPayload.data);
+    if (!defaultAddress) return;
+
+    const hydrateKey = `saved:${defaultAddress.id}`;
+    if (deliveryFormHydratedKeyRef.current === hydrateKey) return;
+    deliveryFormHydratedKeyRef.current = hydrateKey;
+
+    reset({
+      ...addressFormDefaultValues,
+      firstName: defaultAddress.firstName ?? '',
+      lastName: defaultAddress.lastName ?? '',
+      phone: defaultAddress.phoneNumber ?? '',
+      street: defaultAddress.streetName ?? defaultAddress.fullAddress ?? '',
+      buildingNumber: defaultAddress.buildingName ?? '',
+      apartmentNumber: defaultAddress.apartmentNumber ?? '',
+      postalCode: defaultAddress.postalCode ?? '',
+      province: defaultAddress.administrativeAreaLevel1 ?? '',
+      district: defaultAddress.administrativeAreaLevel2 ?? '',
+      savedDeliveryAddressId: defaultAddress.id,
+    });
+    setAddressSearchQuery(formatAddressSummary(defaultAddress));
+  }, [addressesPayload?.data, cart?.deliveryAddress?.id, reset, setAddressSearchQuery]);
+
+  useEffect(() => {
+    if (updateBasketMutation.isPending) return;
+    if (!cart?.id || cart?.deliveryAddress?.id) return;
+    if (!addressesPayload?.data?.length) return;
+
+    const defaultAddress = pickDefaultDeliveryAddress(addressesPayload.data);
+    if (!defaultAddress?.id) return;
+
+    const syncKey = `${cart.id}:${defaultAddress.id}`;
+    if (addressBasketSyncRef.current === syncKey) return;
+    addressBasketSyncRef.current = syncKey;
+
+    updateBasketMutation.mutate({
+      id: cart.id,
+      deliveryAddressId: defaultAddress.id,
+      invoiceAddressId: defaultAddress.id,
+    });
+  }, [cart?.id, cart?.deliveryAddress?.id, addressesPayload?.data, updateBasketMutation.isPending, updateBasketMutation.mutate]);
+
+  useEffect(() => {
+    const invoiceId = cart?.invoiceAddress?.id;
+    const deliveryId = cart?.deliveryAddress?.id;
+    if (!invoiceId || !deliveryId) return;
+    if (invoiceId === deliveryId) return;
+
+    setValue('billingAddressDifferent', true);
+
+    const matched = savedAddresses.find(a => a.id === invoiceId);
+    if (matched) {
+      setValue('savedBillingAddressId', matched.id);
+      return;
+    }
+
+    const inv = cart.invoiceAddress!;
+    setValue('billingFullName', inv.companyName ?? `${inv.firstName ?? ''} ${inv.lastName ?? ''}`.trim());
+    setValue('billingTaxNumber', inv.taxNumber ?? '');
+    setValue('billingProvince', inv.administrativeAreaLevel1 ?? '');
+    setValue('billingDistrict', inv.administrativeAreaLevel2 ?? '');
+    setValue('billingStreet', (inv as unknown as Address).streetName ?? inv.description ?? '');
+  }, [cart?.invoiceAddress?.id, cart?.deliveryAddress?.id, savedAddresses, setValue]);
+
+  const applyParsedAddressToForm = (fields: ReturnType<typeof parsedAddressToFormFields>) => {
+    setValue('street', fields.street);
+    setValue('buildingNumber', fields.buildingNumber);
+    setValue('apartmentNumber', fields.apartmentNumber);
+    setValue('postalCode', fields.postalCode);
+    setValue('province', fields.provinceName);
+    setValue('district', fields.districtName);
+  };
+
+  const handleSelectGoogleAddress = async (placeId: string) => {
+    clearErrors('addressSearch');
+    const prediction = addressSearchResults.find(r => r.place_id === placeId);
+    if (!prediction) return;
+
+    const parsed = await selectAddressPlace(prediction);
+    if (!parsed) {
+      setError('addressSearch', { type: 'manual', message: 'Adres bilgileri alınamadı. Lütfen tekrar deneyin.' });
+      return;
+    }
+
+    applyParsedAddressToForm(parsedAddressToFormFields(parsed));
+    setValue('savedDeliveryAddressId', '');
+  };
+
+  const handleAddressSearchQueryChange = (value: string) => {
+    onAddressSearchQueryChange(value);
+    clearErrors('addressSearch');
+
+    if (!value.trim()) {
+      resetAddressSearch();
+      setValue('street', '');
+      setValue('buildingNumber', '');
+      setValue('apartmentNumber', '');
+      setValue('postalCode', '');
+      setValue('province', '');
+      setValue('district', '');
+    }
+  };
+
+  const handleSelectSavedAddress = (addr: Address) => {
+    reset({
+      ...getValues(),
+      firstName: addr.firstName ?? '',
+      lastName: addr.lastName ?? '',
+      phone: addr.phoneNumber ?? '',
+      street: addr.streetName ?? addr.fullAddress ?? '',
+      buildingNumber: addr.buildingName ?? '',
+      apartmentNumber: addr.apartmentNumber ?? '',
+      postalCode: addr.postalCode ?? '',
+      province: addr.administrativeAreaLevel1 ?? '',
+      district: addr.administrativeAreaLevel2 ?? '',
+      savedDeliveryAddressId: addr.id,
+    });
+    setAddressSearchQuery(formatAddressSummary(addr));
+  };
+
+  const handleSelectBillingAddress = (addr: Address) => {
+    setValue('savedBillingAddressId', addr.id);
+    setValue('billingFullName', addr.companyName ?? `${addr.firstName ?? ''} ${addr.lastName ?? ''}`.trim());
+    setValue('billingTaxNumber', addr.taxNumber ?? '');
+    setValue('billingProvince', addr.administrativeAreaLevel1 ?? '');
+    setValue('billingDistrict', addr.administrativeAreaLevel2 ?? '');
+    setValue('billingStreet', addr.streetName ?? addr.fullAddress ?? '');
+  };
+
+  const buildDeliveryAddress = (data: AddressFormData): BasketAddressInput => {
+    const fullAddr = [data.street, data.buildingNumber, data.apartmentNumber].filter(Boolean).join(', ');
+    const phoneDigits = data.phone.replace(/\D/g, '').replace(/^90/, '');
+
+    return {
+      title: 'Teslimat',
+      type: AddressType.DELIVERY,
+      firstName: data.firstName,
+      lastName: data.lastName,
+      phoneNumber: phoneDigits || data.phone,
+      postalCode: data.postalCode,
+      administrativeAreaLevel1: data.province.trim(),
+      administrativeAreaLevel2: data.district.trim(),
+      administrativeAreaLevel3: '',
+      fullAddress: fullAddr,
+      streetName: data.street,
+      buildingName: data.buildingNumber || null,
+      apartmentNumber: data.apartmentNumber || null,
+      country: 'Türkiye',
+      countryCode: 'TR',
+    };
+  };
+
+  const buildInvoiceAddress = (data: AddressFormData): BasketAddressInput => {
+    const phoneDigits = data.phone.replace(/\D/g, '').replace(/^90/, '');
+
+    return {
+      title: 'Fatura',
+      type: AddressType.INVOICE,
+      companyName: data.billingFullName,
+      taxNumber: data.billingTaxNumber,
+      phoneNumber: phoneDigits || data.phone,
+      postalCode: data.postalCode,
+      administrativeAreaLevel1: data.billingProvince.trim(),
+      administrativeAreaLevel2: data.billingDistrict.trim(),
+      administrativeAreaLevel3: '',
+      fullAddress: data.billingStreet,
+      streetName: data.billingStreet,
+      country: 'Türkiye',
+      countryCode: 'TR',
+    };
+  };
+
+  const handleAddressSubmit = async (data: AddressFormData) => {
+    if (!cart?.id) return;
+    clearErrors('root');
+    try {
+      const deliveryAddressPayload = buildDeliveryAddress(data);
+      const useDeliveryId = data.savedDeliveryAddressId || null;
+      const useInvoiceId = data.billingAddressDifferent ? data.savedBillingAddressId || null : useDeliveryId;
+
+      const basketPayload: Parameters<typeof updateBasketMutation.mutateAsync>[0] = { id: cart.id };
+
+      if (useDeliveryId) {
+        basketPayload.deliveryAddressId = useDeliveryId;
+      } else {
+        basketPayload.deliveryAddress = deliveryAddressPayload;
+      }
+
+      if (data.billingAddressDifferent) {
+        if (useInvoiceId) {
+          basketPayload.invoiceAddressId = useInvoiceId;
+        } else {
+          basketPayload.invoiceAddress = buildInvoiceAddress(data);
+        }
+      } else if (useDeliveryId) {
+        basketPayload.invoiceAddressId = useDeliveryId;
+      } else {
+        basketPayload.invoiceAddress = deliveryAddressPayload;
+      }
+
+      await updateBasketMutation.mutateAsync(basketPayload);
+      onComplete();
+    } catch {
+      setError('root', { type: 'server', message: 'Adres kaydedilemedi. Lütfen bilgileri kontrol edip tekrar deneyin.' });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(handleAddressSubmit)} className="space-y-6">
+      {savedAddresses.length > 0 && (
+        <div>
+          <label className="rizzui-input-label block text-sm mb-1.5 font-medium">Önerilen teslimat adresi</label>
+          <select
+            value={savedDeliveryAddressId || (cart?.deliveryAddress?.id ?? '')}
+            onChange={e => {
+              if (!e.target.value) {
+                setValue('savedDeliveryAddressId', '');
+                return;
+              }
+              const addr = savedAddresses.find(a => a.id === e.target.value);
+              if (addr) handleSelectSavedAddress(addr);
+            }}
+            className="rizzui-input-container peer flex h-10 w-full items-center rounded-lg border border-gray-200 bg-white px-3.5 py-2 text-sm transition-all focus:border-[#CF0A2C] focus:outline-none focus:ring-2 focus:ring-[#CF0A2C]/25"
+          >
+            <option value="">Yeni adres girin</option>
+            {savedAddresses.map(addr => (
+              <option key={addr.id} value={addr.id}>
+                {`${addr.firstName ?? ''} ${addr.lastName ?? ''}`.trim()}
+                {addr.administrativeAreaLevel2 ? ` — ${addr.administrativeAreaLevel2}, ${addr.administrativeAreaLevel1}` : ''}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      <div>
+        <h2 className="text-base font-semibold text-gray-900 mb-1">Teslimat adresi</h2>
+        <p className="text-sm text-gray-500 mb-4">Adresinizi aratarak hızlıca doldurabilir veya aşağıdaki alanları manuel girebilirsiniz.</p>
+
+        <div className="mb-4">
+          <AddressSearchInput
+            query={addressSearchQuery}
+            onQueryChange={handleAddressSearchQueryChange}
+            results={addressSearchResults}
+            isSearching={isAddressSearching}
+            showResults={showAddressSearchResults}
+            onShowResultsChange={setShowAddressSearchResults}
+            onSelect={placeId => void handleSelectGoogleAddress(placeId)}
+            error={errors.addressSearch?.message}
+            label="Adres ara"
+            placeholder="Mahalle, cadde, sokak veya posta kodu yazın…"
+            noResultsText="Sonuç bulunamadı"
+          />
+        </div>
+
+        <div className="space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <Input {...register('firstName', { required: true })} label="Ad" placeholder="Ad" size="lg" required error={errors.firstName?.message} />
+            <Input {...register('lastName', { required: true })} label="Soyad" placeholder="Soyad" size="lg" required error={errors.lastName?.message} />
+          </div>
+          <Input {...register('street', { required: true })} label="Mahalle, cadde, sokak vb." placeholder="Mahalle, cadde, sokak vb." size="lg" required error={errors.street?.message} />
+          <div className="grid grid-cols-2 gap-4">
+            <Input {...register('buildingNumber')} label="Apartman no" placeholder="Apartman / bina no" size="lg" />
+            <Input {...register('apartmentNumber')} label="Daire no" placeholder="Daire no" size="lg" />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <Input {...register('postalCode', { required: true })} label="Posta Kodu" placeholder="Posta Kodu" size="lg" required error={errors.postalCode?.message} />
+            <Input
+              {...provinceField}
+              onChange={e => {
+                provinceField.onChange(e);
+                setValue('savedDeliveryAddressId', '');
+              }}
+              label="İl"
+              placeholder="İl"
+              size="lg"
+              required
+              error={errors.province?.message}
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <Input
+              {...districtField}
+              onChange={e => {
+                districtField.onChange(e);
+                setValue('savedDeliveryAddressId', '');
+              }}
+              label="İlçe"
+              placeholder="İlçe"
+              size="lg"
+              required
+              error={errors.district?.message}
+            />
+          </div>
+          <div>
+            <label className="rizzui-input-label block text-sm mb-1.5 font-medium">Telefon *</label>
+            <div className="relative">
+              <div className="absolute left-3 top-1/2 -translate-y-1/2 flex items-center gap-2">
+                <span className="text-sm text-gray-700">🇹🇷</span>
+                <span className="text-sm text-gray-700">+90</span>
+              </div>
+              <Input {...register('phone', { required: true })} type="tel" placeholder="Telefon" size="lg" className="pl-20" required error={errors.phone?.message} />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h2 className="text-base font-semibold text-gray-900 mb-2">Fatura adresi</h2>
+        <div className="flex items-start gap-2 mb-4">
+          <input
+            type="checkbox"
+            id="billingAddressDifferent"
+            {...register('billingAddressDifferent')}
+            className="mt-1 h-4 w-4 rounded border-gray-300 text-[#CF0A2C] focus:ring-[#CF0A2C]"
+          />
+          <label htmlFor="billingAddressDifferent" className="cursor-pointer text-sm text-gray-700">
+            Fatura adresi farklı olsun
+          </label>
+        </div>
+        {billingAddressDifferent && (
+          <div className="mt-4 space-y-4 rounded-xl border border-gray-200 bg-white p-4">
+            {savedAddresses.length > 0 && (
+              <div>
+                <label className="rizzui-input-label block text-sm mb-1.5 font-medium">Önerilen fatura adresi</label>
+                <select
+                  value={savedBillingAddressId || (cart?.invoiceAddress?.id !== cart?.deliveryAddress?.id ? (cart?.invoiceAddress?.id ?? '') : '')}
+                  onChange={e => {
+                    if (!e.target.value) {
+                      setValue('savedBillingAddressId', '');
+                      return;
+                    }
+                    const addr = savedAddresses.find(a => a.id === e.target.value);
+                    if (addr) handleSelectBillingAddress(addr);
+                  }}
+                  className="rizzui-input-container peer flex h-10 w-full items-center rounded-lg border border-gray-200 bg-white px-3.5 py-2 text-sm transition-all focus:border-[#CF0A2C] focus:outline-none focus:ring-2 focus:ring-[#CF0A2C]/25"
+                >
+                  <option value="">Manuel girin</option>
+                  {savedAddresses.map(addr => (
+                    <option key={addr.id} value={addr.id}>
+                      {addr.companyName || `${addr.firstName ?? ''} ${addr.lastName ?? ''}`.trim()}
+                      {addr.administrativeAreaLevel2 ? ` — ${addr.administrativeAreaLevel2}, ${addr.administrativeAreaLevel1}` : ''}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
+            <p className="text-sm text-gray-600">Fatura bilgileri (şahıs adı veya firma unvanı, vergi numarası ve adres)</p>
+            <Input
+              {...register('billingFullName', {
+                required: billingAddressDifferent ? 'Ad / Firma adı zorunludur' : false,
+              })}
+              label="Ad / Firma adı"
+              placeholder="Şahıs için ad soyad, şirket için firma unvanı"
+              size="lg"
+              required={billingAddressDifferent}
+              error={errors.billingFullName?.message}
+            />
+            <Input
+              {...register('billingTaxNumber', {
+                required: billingAddressDifferent ? 'Vergi numarası zorunludur' : false,
+              })}
+              label="Vergi numarası"
+              placeholder="10 veya 11 haneli vergi numarası"
+              size="lg"
+              required={billingAddressDifferent}
+              error={errors.billingTaxNumber?.message}
+            />
+            <div className="grid grid-cols-2 gap-4">
+              <Input
+                {...billingProvinceField}
+                onChange={e => {
+                  billingProvinceField.onChange(e);
+                  setValue('savedBillingAddressId', '');
+                }}
+                label="İl"
+                placeholder="İl"
+                size="lg"
+                required={billingAddressDifferent}
+                error={errors.billingProvince?.message}
+              />
+              <Input
+                {...billingDistrictField}
+                onChange={e => {
+                  billingDistrictField.onChange(e);
+                  setValue('savedBillingAddressId', '');
+                }}
+                label="İlçe"
+                placeholder="İlçe"
+                size="lg"
+                required={billingAddressDifferent}
+                error={errors.billingDistrict?.message}
+              />
+            </div>
+            <Input
+              {...register('billingStreet', {
+                required: billingAddressDifferent ? 'Açık adres zorunludur' : false,
+              })}
+              label="Açık adres"
+              placeholder="Mahalle, cadde, sokak, bina no, daire no"
+              size="lg"
+              required={billingAddressDifferent}
+              error={errors.billingStreet?.message}
+            />
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-start gap-2">
+        <input type="checkbox" {...register('newsletter')} id="newsletter" className="mt-1 h-4 w-4 rounded border-gray-300 text-[#CF0A2C] focus:ring-[#CF0A2C]" />
+        <label htmlFor="newsletter" className="text-sm text-gray-700 flex items-center gap-1">
+          Beni haberlerden ve özel tekliflerden haberdar et
+          <HelpCircle className="w-4 h-4 text-gray-400" />
+        </label>
+      </div>
+
+      {errors.root?.message ? <p className="text-sm text-red-600">{errors.root.message}</p> : null}
+
+      <div className="flex flex-col gap-3 sm:flex-row">
+        <Button type="button" size="lg" variant="outline" className="rounded-xl border-2 border-gray-200 font-semibold text-gray-900 hover:border-gray-900" onClick={onBack}>
+          Geri
+        </Button>
+        <Button
+          type="submit"
+          size="lg"
+          className="flex-1 rounded-xl bg-[#CF0A2C] font-semibold text-white hover:bg-[#a80824]"
+          disabled={isSubmitting}
+        >
+          {isSubmitting ? 'Kaydediliyor…' : 'Devam et'}
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+function ViewStepCheckout({ onBack }: { onBack: () => void }) {
+  const router = useRouter();
+  const { webReturnUrl } = useCheckoutViewConfig();
+  const { cart, cartLoading, paymentMethod, deliveryMethod, bankAccount } = useRaxon();
+  const [payStartError, setPayStartError] = useState<string | null>(null);
+  const [bankTransferError, setBankTransferError] = useState<string | null>(null);
+  const [selectedBankAccountId, setSelectedBankAccountId] = useState<string | null>(null);
+  const paymentDefaultRef = useRef(false);
+  const deliveryDefaultRef = useRef(false);
+  const addressBasketSyncRef = useRef(false);
+
+  const updateBasketMutation = useCart().update();
+  const { data: addressesPayload, isLoading: addressesLoading } = useAddress().fetch();
+  const { mutateAsync: payMutation, isPending: payMutationPending } = useCart().pay();
+  const { mutateAsync: createTransferCode, isPending: transferCodePending } = useCart().createTransferCode();
+
+  const selectedPaymentMethod = paymentMethod.find(m => m.id === cart?.paymentMethod?.id);
+  const isBankTransfer =
+    selectedPaymentMethod?.provider === PaymentProvider.BANK_TRANSFER &&
+    selectedPaymentMethod?.paymentTerms === PaymentTerms.BANK_TRANSFER;
+  const payAmount = cart?.info?.payPrice?.pay ?? 0;
+  const bankTransferCode = cart?.bankTransferCode;
+  const hasValidTransferCode =
+    Boolean(bankTransferCode?.id) &&
+    bankTransferCode != null &&
+    Math.abs((bankTransferCode.amount ?? 0) - payAmount) < 0.01;
+
+  useEffect(() => {
+    void resolveClientIp();
+  }, []);
+
+  useEffect(() => {
+    setPayStartError(null);
+    setBankTransferError(null);
+    if (!isBankTransfer) {
+      setSelectedBankAccountId(null);
+    }
+  }, [cart?.paymentMethod?.id, isBankTransfer]);
+
+  useEffect(() => {
+    if (!isBankTransfer) return;
+    if (bankTransferCode?.bankAccount?.id) {
+      setSelectedBankAccountId(bankTransferCode.bankAccount.id);
+    }
+  }, [isBankTransfer, bankTransferCode?.bankAccount?.id]);
+
+  const handleBankAccountSelect = async (account: BankAccount) => {
+    if (!isBankTransfer || !cart?.id || transferCodePending || updateBasketMutation.isPending) return;
+
+    setSelectedBankAccountId(account.id);
+    setBankTransferError(null);
+
+    if (
+      hasValidTransferCode &&
+      bankTransferCode?.bankAccount?.id === account.id
+    ) {
+      return;
+    }
+
+    try {
+      const code = await createTransferCode({
+        amount: payAmount,
+        bankAccountId: account.id,
+      });
+      await updateBasketMutation.mutateAsync({
+        id: cart.id,
+        bankTransferCodeId: code.id,
+      });
+    } catch {
+      setBankTransferError('Transfer kodu oluşturulamadı. Lütfen tekrar deneyin.');
+    }
+  };
+
+  useEffect(() => {
+    paymentDefaultRef.current = false;
+    deliveryDefaultRef.current = false;
+    addressBasketSyncRef.current = false;
+  }, [cart?.id]);
+
+  const savedAddresses: Address[] = addressesPayload?.data ?? [];
+  const defaultSavedAddress = savedAddresses.length ? pickDefaultDeliveryAddress(savedAddresses) : undefined;
+
+  useEffect(() => {
+    if (updateBasketMutation.isPending) return;
+    if (!cart?.id || cart?.deliveryAddress?.id) return;
+    if (!defaultSavedAddress?.id) return;
+    if (addressBasketSyncRef.current) return;
+    addressBasketSyncRef.current = true;
+
+    updateBasketMutation.mutate({
+      id: cart.id,
+      deliveryAddressId: defaultSavedAddress.id,
+      invoiceAddressId: defaultSavedAddress.id,
+    });
+  }, [cart?.id, cart?.deliveryAddress?.id, defaultSavedAddress?.id, updateBasketMutation.isPending, updateBasketMutation.mutate]);
+
+  useEffect(() => {
+    if (updateBasketMutation.isPending) return;
+    if (!cart?.id) return;
+    const list = paymentMethod;
+    if (!list?.length || paymentDefaultRef.current) return;
+    if (cart?.paymentMethod?.id) {
+      paymentDefaultRef.current = true;
+      return;
+    }
+    paymentDefaultRef.current = true;
+    updateBasketMutation.mutate({ id: cart.id, paymentMethodId: list[0].id });
+  }, [paymentMethod, cart?.id, cart?.paymentMethod?.id, updateBasketMutation.isPending, updateBasketMutation.mutate]);
+
+  useEffect(() => {
+    if (updateBasketMutation.isPending) return;
+    if (!cart?.id) return;
+    const list = deliveryMethod;
+    if (!list?.length || deliveryDefaultRef.current) return;
+    if (cart?.deliveryMethod?.id) {
+      deliveryDefaultRef.current = true;
+      return;
+    }
+    deliveryDefaultRef.current = true;
+    updateBasketMutation.mutate({ id: cart.id, deliveryMethodId: list[0].id });
+  }, [deliveryMethod, cart?.id, cart?.deliveryMethod?.id, updateBasketMutation.isPending, updateBasketMutation.mutate]);
+
+  const delivery = cart?.deliveryAddress ?? defaultSavedAddress ?? undefined;
+  const invoice = cart?.invoiceAddress;
+  const invoiceSameAsDelivery = delivery?.id && invoice?.id === delivery.id;
+  const deliveryLine = delivery ? formatAddressLine(delivery) : null;
+  const invoiceLine = invoice && !invoiceSameAsDelivery ? formatAddressLine(invoice) : null;
+  const isAddressLoading = !deliveryLine && (cartLoading || addressesLoading || updateBasketMutation.isPending);
+
+  const paymentBlockers = useMemo(() => {
+    const blockers: string[] = [];
+
+    if (cartLoading) {
+      blockers.push('Sepet yükleniyor…');
+      return blockers;
+    }
+
+    if (!cart?.email?.trim()) {
+      blockers.push('E-posta adresi girilmedi.');
+    }
+
+    if (!cart?.deliveryAddress) {
+      if (isAddressLoading) {
+        blockers.push('Teslimat adresi hazırlanıyor…');
+      } else {
+        blockers.push('Teslimat adresi eklenmedi.');
+      }
+    }
+
+    if (paymentMethod.length === 0) {
+      blockers.push('Ödeme yöntemi bulunamadı.');
+    } else if (!cart?.paymentMethod?.id) {
+      blockers.push('Ödeme yöntemi seçin.');
+    }
+
+    if (deliveryMethod.length === 0) {
+      blockers.push('Teslimat yöntemi bulunamadı.');
+    } else if (!cart?.deliveryMethod?.id) {
+      blockers.push('Teslimat yöntemi seçin.');
+    }
+
+    if (isBankTransfer) {
+      if (bankAccount.length === 0) {
+        blockers.push('Havale için tanımlı banka hesabı bulunamadı.');
+      } else if (!hasValidTransferCode) {
+        if (!selectedBankAccountId && !bankTransferCode?.bankAccount?.id) {
+          blockers.push('Devam etmek için bir banka hesabı seçin.');
+        } else if (transferCodePending || updateBasketMutation.isPending) {
+          blockers.push('Transfer kodu hazırlanıyor…');
+        } else {
+          blockers.push('Transfer kodu oluşturulamadı. Banka hesabını tekrar seçin.');
+        }
+      }
+    }
+
+    return blockers;
+  }, [
+    cart?.email,
+    cart?.deliveryAddress,
+    cart?.paymentMethod?.id,
+    cart?.deliveryMethod?.id,
+    cartLoading,
+    isAddressLoading,
+    paymentMethod.length,
+    deliveryMethod.length,
+    isBankTransfer,
+    bankAccount.length,
+    hasValidTransferCode,
+    selectedBankAccountId,
+    bankTransferCode?.bankAccount?.id,
+    transferCodePending,
+    updateBasketMutation.isPending,
+  ]);
+
+  const canCompletePayment = paymentBlockers.length === 0;
+
+  const isPaymentButtonDisabled =
+    !canCompletePayment || payMutationPending || transferCodePending;
+
+  const handlePaymentSubmit = async () => {
+    if (!canCompletePayment) return;
+    setPayStartError(null);
+    try {
+      const payReturnUrl = resolveAbsoluteReturnUrl(webReturnUrl);
+      const paymentResponse = await payMutation({ platform: 'web', webReturnUrl: payReturnUrl });
+      const ok = paymentResponse && typeof paymentResponse === 'object' && 'status' in paymentResponse && (paymentResponse as { status: unknown }).status === true;
+      const info =
+        paymentResponse && typeof paymentResponse === 'object' && 'info' in paymentResponse && paymentResponse.info && typeof paymentResponse.info === 'object'
+          ? (paymentResponse.info as Record<string, unknown>)
+          : null;
+
+      if (isBankTransfer) {
+        const orderId = info && typeof info.orderId === 'string' ? info.orderId : null;
+        if (ok && orderId) {
+          router.push(`/hesabim/siparislerim/${orderId}`);
+          return;
+        }
+        setPayStartError('Sipariş oluşturulamadı. Lütfen tekrar deneyin.');
+        return;
+      }
+
+      const provider = info && typeof info.provider === 'string' ? info.provider : null;
+      const garantiHtml = info && typeof info.html === 'string' ? info.html : null;
+      const garantiTransactionId = info && typeof info.transactionId === 'string' ? info.transactionId : null;
+
+      if (ok && provider === PaymentProvider.GARANTI && garantiHtml && garantiTransactionId) {
+        storeGarantiPaymentHtml(garantiTransactionId, garantiHtml);
+        router.push(
+          withCheckoutQuery(webReturnUrl, `type=pay&provider=garanti&transactionId=${encodeURIComponent(garantiTransactionId)}`),
+        );
+        return;
+      }
+
+      const token = info && typeof info.token === 'string' ? info.token : null;
+      if (ok && token) {
+        router.push(withCheckoutQuery(webReturnUrl, `type=pay&token=${encodeURIComponent(token)}`));
+      } else {
+        setPayStartError('Ödeme ekranı açılamadı. Lütfen tekrar deneyin.');
+      }
+    } catch {
+      setPayStartError('Ödeme başlatılırken bir hata oluştu.');
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-base font-semibold text-gray-900">Sipariş özeti</h2>
+        <p className="mt-1 text-sm text-gray-500">Adres bilgilerinizi kontrol edin ve ödeme yöntemini seçin.</p>
+      </div>
+
+      {isAddressLoading ? (
+        <p className="text-sm text-gray-500">Sepet güncelleniyor…</p>
+      ) : !deliveryLine ? (
+        <p className="text-sm text-amber-700 rounded-xl border border-amber-200 bg-amber-50 p-4">Teslimat adresi henüz eklenmedi.</p>
+      ) : (
+        <div className="rounded-xl border border-gray-200 bg-gray-50 p-4 space-y-1">
+          <p className="text-xs font-black uppercase tracking-widest text-[#CF0A2C]">Teslimat adresi</p>
+          <p className="text-sm font-medium text-gray-900">{deliveryLine.name}</p>
+          <p className="text-sm text-gray-600">{deliveryLine.street}</p>
+          <p className="text-sm text-gray-600">
+            {[deliveryLine.location, deliveryLine.postalCode].filter(Boolean).join(' · ')}
+          </p>
+        </div>
+      )}
+
+      {invoiceLine ? (
+        <div className="rounded-xl border border-gray-200 bg-gray-50 p-4 space-y-1">
+          <p className="text-xs font-black uppercase tracking-widest text-[#CF0A2C]">Fatura adresi</p>
+          <p className="text-sm font-medium text-gray-900">{invoiceLine.name}</p>
+          {invoiceLine.taxNumber ? <p className="text-sm text-gray-600">VKN: {invoiceLine.taxNumber}</p> : null}
+          <p className="text-sm text-gray-600">{invoiceLine.street}</p>
+          <p className="text-sm text-gray-600">
+            {[invoiceLine.location, invoiceLine.postalCode].filter(Boolean).join(' · ')}
+          </p>
+        </div>
+      ) : deliveryLine ? (
+        <p className="text-sm text-gray-500">Fatura adresi teslimat adresi ile aynı.</p>
+      ) : null}
+
+      <div className="rounded-xl border border-gray-100 bg-white p-4 space-y-2">
+        <div className="flex justify-between text-sm">
+          <span className="text-gray-600">Ara toplam</span>
+          <span className="font-semibold tabular-nums">{(cart?.info?.basePrice?.total ?? 0).toTry()}</span>
+        </div>
+        {(cart?.info?.delivery?.pay ?? 0) > 0 ? (
+          <div className="flex justify-between text-sm">
+            <span className="text-gray-600">Kargo</span>
+            <span className="font-semibold tabular-nums">{cart?.info?.delivery?.pay?.toTry()}</span>
+          </div>
+        ) : null}
+        <div className="flex justify-between border-t border-gray-100 pt-2 text-sm">
+          <span className="font-semibold text-gray-900">Toplam</span>
+          <span className="font-bold tabular-nums text-[#CF0A2C]">{(cart?.info?.payPrice?.pay ?? 0).toTry()}</span>
+        </div>
+      </div>
+
+      <div className="border-t border-gray-100 pt-6">
+        <h2 className="text-base font-semibold text-gray-900 mb-3">Teslimat yöntemi</h2>
+        <div className="space-y-2">
+          {deliveryMethod.map((method: DeliveryMethod) => (
+            <label key={method.id} className="flex cursor-pointer items-start gap-3 rounded-xl border border-gray-100 bg-white p-4 shadow-sm transition-colors hover:border-gray-200 has-[:checked]:border-[#CF0A2C] has-[:checked]:ring-2 has-[:checked]:ring-[#CF0A2C]/20">
+              <input
+                type="radio"
+                name="deliveryMethod"
+                value={method.id}
+                checked={cart?.deliveryMethod?.id === method.id}
+                onChange={() => cart?.id && updateBasketMutation.mutate({ id: cart.id, deliveryMethodId: method.id })}
+                disabled={updateBasketMutation.isPending}
+                className="mt-0.5 h-4 w-4 shrink-0 border-gray-300 text-[#CF0A2C] focus:ring-[#CF0A2C]"
+              />
+              <span className="flex flex-col gap-0.5 min-w-0">
+                <span className="text-sm font-medium text-gray-900">{method.name}</span>
+              </span>
+            </label>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <h2 className="text-base font-semibold text-gray-900 mb-3">Ödeme yöntemi</h2>
+        <div className="space-y-2">
+          {paymentMethod.map((method: PaymentMethod) => (
+            <label key={method.id} className="flex cursor-pointer items-start gap-3 rounded-xl border border-gray-100 bg-white p-4 shadow-sm transition-colors hover:border-gray-200 has-[:checked]:border-[#CF0A2C] has-[:checked]:ring-2 has-[:checked]:ring-[#CF0A2C]/20">
+              <input
+                type="radio"
+                name="payment"
+                value={method.id}
+                checked={cart?.paymentMethod?.id === method.id}
+                onChange={() => cart?.id && updateBasketMutation.mutate({ id: cart.id, paymentMethodId: method.id })}
+                disabled={updateBasketMutation.isPending}
+                className="mt-0.5 h-4 w-4 shrink-0 border-gray-300 text-[#CF0A2C] focus:ring-[#CF0A2C]"
+              />
+              <span className="flex flex-col gap-0.5 min-w-0">
+                <span className="text-sm font-medium text-gray-900">{method.name}</span>
+                {method.description ? <span className="text-xs text-gray-600">{method.description}</span> : null}
+              </span>
+            </label>
+          ))}
+        </div>
+      </div>
+
+      {isBankTransfer ? (
+        <div className="space-y-4">
+          <div>
+            <h2 className="text-base font-semibold text-gray-900 mb-3">Banka hesabı</h2>
+            {bankAccount.length === 0 ? (
+              <p className="text-sm text-amber-700 rounded-xl border border-amber-200 bg-amber-50 p-4">
+                Havale için tanımlı banka hesabı bulunamadı.
+              </p>
+            ) : (
+              <div className="space-y-2">
+                {bankAccount.map((account: BankAccount) => (
+                  <label
+                    key={account.id}
+                    className="flex cursor-pointer items-start gap-3 rounded-xl border border-gray-100 bg-white p-4 shadow-sm transition-colors hover:border-gray-200 has-[:checked]:border-[#CF0A2C] has-[:checked]:ring-2 has-[:checked]:ring-[#CF0A2C]/20"
+                  >
+                    <input
+                      type="radio"
+                      name="bankAccount"
+                      value={account.id}
+                      checked={selectedBankAccountId === account.id}
+                      onChange={() => void handleBankAccountSelect(account)}
+                      disabled={transferCodePending || updateBasketMutation.isPending}
+                      className="mt-0.5 h-4 w-4 shrink-0 border-gray-300 text-[#CF0A2C] focus:ring-[#CF0A2C]"
+                    />
+                    <span className="flex flex-col gap-0.5 min-w-0">
+                      <span className="text-sm font-medium text-gray-900">{account.bankName}</span>
+                      {account.accountHolderName ? (
+                        <span className="text-xs text-gray-600">{account.accountHolderName}</span>
+                      ) : null}
+                      {account.IBAN && account.IBAN !== '-' ? (
+                        <span className="text-xs font-mono text-gray-500">{account.IBAN}</span>
+                      ) : null}
+                    </span>
+                  </label>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {transferCodePending || updateBasketMutation.isPending ? (
+            <p className="text-sm text-gray-500">Transfer kodu hazırlanıyor…</p>
+          ) : null}
+
+          {bankTransferError ? (
+            <p className="text-sm text-red-600" role="alert">
+              {bankTransferError}
+            </p>
+          ) : null}
+
+          {hasValidTransferCode && bankTransferCode ? (
+            <div className="rounded-xl border border-[#CF0A2C]/20 bg-[#CF0A2C]/5 p-4 space-y-3">
+              <p className="text-xs font-black uppercase tracking-widest text-[#CF0A2C]">Havale bilgileri</p>
+              <div className="space-y-2 text-sm">
+                <div>
+                  <p className="text-gray-500">Banka</p>
+                  <p className="font-medium text-gray-900">{bankTransferCode.bankAccount.bankName}</p>
+                </div>
+                {bankTransferCode.bankAccount.IBAN && bankTransferCode.bankAccount.IBAN !== '-' ? (
+                  <div>
+                    <p className="text-gray-500">IBAN</p>
+                    <p className="font-mono font-medium text-gray-900">{bankTransferCode.bankAccount.IBAN}</p>
+                  </div>
+                ) : null}
+                {bankTransferCode.bankAccount.accountHolderName ? (
+                  <div>
+                    <p className="text-gray-500">Alıcı adı</p>
+                    <p className="font-medium text-gray-900">{bankTransferCode.bankAccount.accountHolderName}</p>
+                  </div>
+                ) : null}
+                <div>
+                  <p className="text-gray-500">Tutar</p>
+                  <p className="font-bold tabular-nums text-[#CF0A2C]">{(bankTransferCode.amount ?? 0).toTry()}</p>
+                </div>
+                <div className="rounded-lg bg-white p-3 border border-[#CF0A2C]/20">
+                  <p className="text-xs text-gray-500">Transfer kodu (açıklama alanına yazın)</p>
+                  <p className="text-lg font-black tracking-wider text-[#CF0A2C]">{bankTransferCode.code}</p>
+                </div>
+              </div>
+              <p className="text-xs text-gray-600">
+                Havaleyi yaptıktan sonra &quot;Siparişi tamamla&quot; butonuna basın. Ödemeniz onaylandığında siparişiniz işleme alınır.
+              </p>
+            </div>
+          ) : isBankTransfer && bankAccount.length > 0 ? (
+            <p className="text-sm text-gray-500">Devam etmek için bir banka hesabı seçin.</p>
+          ) : null}
+        </div>
+      ) : null}
+
+      {payStartError && (
+        <p className="text-sm text-red-600" role="alert">
+          {payStartError}
+        </p>
+      )}
+
+      {paymentBlockers.length > 0 && !payMutationPending ? (
+        <div className="rounded-xl border border-red-200 bg-red-50 p-4" role="alert">
+          <p className="text-sm font-medium text-red-800">Ödeme tamamlanamıyor:</p>
+          <ul className="mt-1.5 list-inside list-disc space-y-0.5 text-sm text-red-600">
+            {paymentBlockers.map(message => (
+              <li key={message}>{message}</li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+
+      <div className="flex flex-col gap-3 sm:flex-row">
+        <Button type="button" size="lg" variant="outline" className="rounded-xl border-2 border-gray-200 font-semibold text-gray-900 hover:border-gray-900" onClick={onBack}>
+          Geri
+        </Button>
+        <Button
+          type="button"
+          size="lg"
+          className={`flex-1 rounded-xl font-black uppercase tracking-widest shadow-md ${
+            isPaymentButtonDisabled
+              ? 'cursor-not-allowed bg-gray-300 text-gray-500 hover:bg-gray-300 hover:shadow-md'
+              : 'bg-[#CF0A2C] text-white hover:bg-[#a80824] hover:shadow-lg'
+          }`}
+          onClick={handlePaymentSubmit}
+          disabled={isPaymentButtonDisabled}
+        >
+          {payMutationPending ? 'Yönlendiriliyor…' : isBankTransfer ? 'Siparişi tamamla' : 'Ödemeyi tamamla'}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+const CHECKOUT_STEP_LABELS: Record<CheckoutStep, string> = {
+  contact: 'İletişim',
+  address: 'Adres',
+  checkout: 'Önizleme ve ödeme',
+};
+
+const PAYTR_IFRAME_ID = 'paytriframe';
+
+const TERMINAL_FAILURE_STATUSES: Set<Status> = new Set([
+  Status.REJECTED,
+  Status.ERROR,
+  Status.CANCELLED,
+  Status.TIMEOUT,
+]);
+
+function normalizeReturnMessage(raw: string | null): string | null {
+  if (raw == null || raw === '') return null;
+  try {
+    const d = decodeURIComponent(raw.replace(/\+/g, ' '));
+    return d.replace(/^['"]|['"]$/g, '').trim() || null;
+  } catch {
+    return raw.replace(/^['"]|['"]$/g, '').trim() || null;
+  }
+}
+
+function shortenId(id: string): string {
+  if (id.length <= 12) return id;
+  return `${id.slice(0, 8)}…${id.slice(-4)}`;
+}
+
+async function fetchTransactionStatus(transactionId: string): Promise<{ status: Status | null; orderId: string | null }> {
+  const response = await nexineAxios.get<{ status?: Status; orderId?: string | null }>(
+    `/global/transcation/${transactionId}/status`,
+  );
+  return {
+    status: response.data?.status ?? null,
+    orderId: response.data?.orderId ?? null,
+  };
+}
+
+function runPaytrIframeResize() {
+  const w = window as Window & { iFrameResize?: (opts: Record<string, unknown>, selector: string) => void };
+  w.iFrameResize?.({}, `#${PAYTR_IFRAME_ID}`);
+}
+
+function CheckoutShellHeader() {
+  const { branch } = useRaxon();
+  return (
+    <header className="border-b border-gray-100 bg-white">
+      <div className="mx-auto flex max-w-3xl items-center justify-between px-4 py-5 sm:px-6">
+        <Link href="/" className="flex flex-col items-start gap-1">
+          <GeneralImage
+            quality={85}
+            src={branch?.logoMedia?.relativePath ? `${process.env.NEXT_PUBLIC_STORAGE_URL}/${branch.logoMedia.relativePath}` : ''}
+            alt={branch?.tradingName ?? 'Logo'}
+            width={120}
+            height={36}
+            className="h-7 w-auto object-contain"
+          />
+        </Link>
+      </div>
+    </header>
+  );
+}
+
+function CheckoutPayView() {
+  const searchParams = useSearchParams();
+  const { webReturnUrl } = useCheckoutViewConfig();
+
+  const token = searchParams.get('token');
+  const providerParam = searchParams.get('provider');
+  const transactionId = searchParams.get('transactionId');
+
+  const [garantiRedirectError, setGarantiRedirectError] = useState<string | null>(null);
+  const [garantiRedirecting, setGarantiRedirecting] = useState(false);
+  const garantiSubmitRef = useRef(false);
+
+  const isGarantiRedirect =
+    providerParam === 'garanti' &&
+    transactionId != null &&
+    transactionId.trim() !== '';
+
+  useEffect(() => {
+    if (!isGarantiRedirect || !transactionId || garantiSubmitRef.current) return;
+
+    const html = consumeGarantiPaymentHtml(transactionId);
+    if (!html) {
+      setGarantiRedirectError('Garanti ödeme oturumu bulunamadı. Lütfen ödeme adımından tekrar deneyin.');
+      return;
+    }
+
+    garantiSubmitRef.current = true;
+    setGarantiRedirecting(true);
+
+    try {
+      submitGarantiPaymentHtml(html);
+    } catch {
+      garantiSubmitRef.current = false;
+      setGarantiRedirecting(false);
+      setGarantiRedirectError('Garanti ödeme sayfasına yönlendirilemedi. Lütfen tekrar deneyin.');
+    }
+  }, [isGarantiRedirect, transactionId]);
+
+  useEffect(() => {
+    if (!token) return;
+    const scriptSelector = 'script[data-paytr-iframe-resizer]';
+    if (document.querySelector(scriptSelector)) {
+      runPaytrIframeResize();
+      return;
+    }
+    const s = document.createElement('script');
+    s.src = 'https://www.paytr.com/js/iframeResizer.min.js';
+    s.async = true;
+    s.dataset.paytrIframeResizer = 'true';
+    s.onload = runPaytrIframeResize;
+    document.body.appendChild(s);
+  }, [token]);
+
+  if (isGarantiRedirect) {
+    if (garantiRedirectError) {
+      return (
+        <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center px-4">
+          <div className="max-w-md w-full rounded-2xl border border-gray-100 bg-white p-10 text-center shadow-sm">
+            <h1 className="text-xl font-black uppercase tracking-tighter text-gray-900 mb-3">Garanti ödeme</h1>
+            <p className="text-sm text-[#CF0A2C] mb-8 font-medium">{garantiRedirectError}</p>
+            <Link href={webReturnUrl} className="inline-flex justify-center rounded-xl bg-[#CF0A2C] px-8 py-3.5 text-sm font-black uppercase tracking-widest text-white transition hover:bg-[#a80824]">
+              Ödemeye dön
+            </Link>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center px-4">
+        <div className="max-w-md w-full rounded-2xl border border-gray-100 bg-white p-10 text-center shadow-sm">
+          <div className="mx-auto mb-5 h-10 w-10 animate-spin rounded-full border-2 border-gray-200 border-t-[#CF0A2C]" aria-hidden />
+          <span className="text-sm font-black text-[#CF0A2C] uppercase tracking-widest">Garanti</span>
+          <h1 className="mt-2 text-xl font-black uppercase tracking-tighter text-gray-900 mb-3">
+            {garantiRedirecting ? 'Yönlendiriliyorsunuz' : 'Hazırlanıyor'}
+          </h1>
+          <p className="text-sm text-gray-600 leading-relaxed">
+            Garanti güvenli ödeme sayfasına aktarılıyorsunuz. Lütfen bekleyin.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (token) {
+    return (
+      <div className="min-h-screen bg-gray-50">
+        <div className="max-w-3xl mx-auto px-4 py-10 sm:py-12">
+          <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+            <div>
+              <span className="text-sm font-black text-[#CF0A2C] uppercase tracking-widest">PayTR</span>
+              <h1 className="mt-2 text-2xl font-black text-gray-900 uppercase tracking-tighter">Güvenli ödeme</h1>
+            </div>
+            <Link href={webReturnUrl} className="text-xs font-black uppercase tracking-widest text-gray-900 border-b-2 border-black pb-1 self-start sm:self-auto hover:text-[#CF0A2C] hover:border-[#CF0A2C] transition-colors">
+              Ödeme sayfasına dön
+            </Link>
+          </div>
+          <div className="rounded-2xl border border-gray-100 bg-white overflow-hidden shadow-sm">
+            <div className="p-2">
+              <iframe
+                title="PayTR güvenli ödeme"
+                src={`https://www.paytr.com/odeme/guvenli/${token}`}
+                id={PAYTR_IFRAME_ID}
+                frameBorder={0}
+                scrolling="no"
+                className="w-full min-h-[480px] border-0 rounded-xl"
+                onLoad={runPaytrIframeResize}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center px-4">
+      <div className="max-w-md w-full rounded-2xl border border-gray-100 bg-white p-10 text-center shadow-sm">
+        <h1 className="text-xl font-black uppercase tracking-tighter text-gray-900 mb-3">Geçersiz bağlantı</h1>
+        <p className="text-sm text-gray-600 mb-8 leading-relaxed">Ödeme oturumu bulunamadı. Lütfen ödeme adımından tekrar deneyin.</p>
+        <Link href={webReturnUrl} className="inline-flex justify-center rounded-xl bg-[#CF0A2C] px-8 py-3.5 text-sm font-black uppercase tracking-widest text-white transition hover:bg-[#a80824]">
+          Ödemeye git
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+type ResultPhase = 'loading' | 'polling' | 'success' | 'error';
+
+function CheckoutResultView() {
+  const searchParams = useSearchParams();
+  const queryClient = useQueryClient();
+  const { webReturnUrl } = useCheckoutViewConfig();
+
+  const statusParam = searchParams.get('status');
+  const titleParam = normalizeReturnMessage(searchParams.get('title'));
+  const messageParam = normalizeReturnMessage(searchParams.get('message'));
+  const transactionId = searchParams.get('transactionId');
+  const paymentIdParam = searchParams.get('paymentId');
+  const orderIdParam = searchParams.get('orderId');
+
+  const isSuccess = statusParam === 'success';
+  const isFailure = statusParam === 'fail' || statusParam === 'error';
+  const hasValidStatus = isSuccess || isFailure;
+
+  const [phase, setPhase] = useState<ResultPhase>(() => {
+    if (isFailure) return 'error';
+    if (isSuccess && orderIdParam) return 'success';
+    if (isSuccess) return 'loading';
+    return 'loading';
+  });
+  const [resolvedOrderId, setResolvedOrderId] = useState<string | null>(orderIdParam);
+  const resolvedPaymentId = paymentIdParam;
+  const [errorMessage, setErrorMessage] = useState<string | null>(
+    isFailure ? messageParam ?? titleParam ?? 'Ödeme tamamlanamadı.' : null,
+  );
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const pollFailCountRef = useRef(0);
+  const cartInvalidatedRef = useRef(false);
+
+  const clearPollInterval = useCallback(() => {
+    if (intervalRef.current != null) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+
+  const { detail } = useOrder();
+  const orderQuery = detail(resolvedOrderId ?? '');
+  const order = orderQuery.data;
+
+  useEffect(() => {
+    if (window.self !== window.top) {
+      window.top!.location.href = window.location.href;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isSuccess) return;
+
+    if (orderIdParam) {
+      setResolvedOrderId(orderIdParam);
+      setPhase('success');
+      return;
+    }
+
+    if (!transactionId) {
+      setErrorMessage('İşlem bilgisi bulunamadı.');
+      setPhase('error');
+      return;
+    }
+
+    let cancelled = false;
+    setPhase('polling');
+
+    const tick = async () => {
+      try {
+        const { status: st, orderId } = await fetchTransactionStatus(transactionId);
+        pollFailCountRef.current = 0;
+        if (cancelled) return;
+
+        if (orderId) {
+          setResolvedOrderId(orderId);
+        }
+
+        if (st === Status.COMPLETED) {
+          clearPollInterval();
+          if (!cartInvalidatedRef.current) {
+            cartInvalidatedRef.current = true;
+            await queryClient.invalidateQueries({ queryKey: ['organization', 'cart'] });
+          }
+          setPhase('success');
+          return;
+        }
+
+        if (st != null && TERMINAL_FAILURE_STATUSES.has(st)) {
+          clearPollInterval();
+          setErrorMessage('Ödeme tamamlanamadı veya iptal edildi.');
+          setPhase('error');
+        }
+      } catch {
+        pollFailCountRef.current += 1;
+        if (pollFailCountRef.current >= 5 && !cancelled) {
+          clearPollInterval();
+          setErrorMessage('Ödeme durumu alınamadı. Lütfen daha sonra siparişlerinizi kontrol edin.');
+          setPhase('error');
+        }
+      }
+    };
+
+    void tick();
+    intervalRef.current = setInterval(() => void tick(), 3000);
+
+    return () => {
+      cancelled = true;
+      clearPollInterval();
+    };
+  }, [isSuccess, transactionId, orderIdParam, clearPollInterval, queryClient]);
+
+  useEffect(() => {
+    if (phase !== 'success' || cartInvalidatedRef.current) return;
+    cartInvalidatedRef.current = true;
+    void queryClient.invalidateQueries({ queryKey: ['organization', 'cart'] });
+  }, [phase, queryClient]);
+
+  const displayTitle =
+    phase === 'success' ? (titleParam ?? 'Ödeme başarılı') : (titleParam ?? 'Ödeme başarısız');
+
+  const displayMessage =
+    phase === 'success'
+      ? (messageParam ?? 'Ödemeniz alındı. Siparişiniz işleme alınacaktır.')
+      : (errorMessage ?? messageParam ?? 'İşlem tamamlanamadı.');
+
+  const showOrderLoading = phase === 'success' && resolvedOrderId && orderQuery.isLoading;
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <CheckoutShellHeader />
+
+      <main className="mx-auto max-w-2xl px-4 py-10 sm:py-14">
+        {(phase === 'loading' || phase === 'polling' || showOrderLoading) && (
+          <div className="rounded-2xl border border-gray-100 bg-white p-10 text-center shadow-sm">
+            <Loader2 className="mx-auto mb-5 h-10 w-10 animate-spin text-[#CF0A2C]" aria-hidden />
+            <h1 className="text-xl font-black uppercase tracking-tighter text-gray-900 mb-3">Ödeme onaylanıyor</h1>
+            <p className="text-sm text-gray-600 leading-relaxed">
+              Siparişiniz oluşturuluyor. Lütfen bu sayfada kalın.
+            </p>
+          </div>
+        )}
+
+        {phase === 'success' && !showOrderLoading && (
+          <div className="space-y-6">
+            <div className="rounded-2xl border border-gray-100 bg-white p-8 sm:p-10 text-center shadow-sm">
+              <div className="mx-auto mb-5 inline-flex h-16 w-16 items-center justify-center rounded-full bg-green-50 text-green-600">
+                <CheckCircle2 size={32} aria-hidden />
+              </div>
+              <h1 className="text-2xl font-black uppercase tracking-tighter text-gray-900 mb-2">{displayTitle}</h1>
+              <p className="text-sm text-gray-600 leading-relaxed">{displayMessage}</p>
+            </div>
+
+            <div className="rounded-2xl border border-gray-100 bg-white p-6 shadow-sm space-y-4">
+              <p className="text-xs font-black uppercase tracking-widest text-[#CF0A2C]">İşlem bilgileri</p>
+              <dl className="space-y-3 text-sm">
+                {resolvedPaymentId ? (
+                  <div className="flex flex-col gap-0.5 sm:flex-row sm:justify-between sm:gap-4">
+                    <dt className="text-gray-500">Ödeme no</dt>
+                    <dd className="font-mono font-medium text-gray-900 break-all" title={resolvedPaymentId}>
+                      {shortenId(resolvedPaymentId)}
+                    </dd>
+                  </div>
+                ) : null}
+                {transactionId ? (
+                  <div className="flex flex-col gap-0.5 sm:flex-row sm:justify-between sm:gap-4">
+                    <dt className="text-gray-500">İşlem no</dt>
+                    <dd className="font-mono font-medium text-gray-900 break-all" title={transactionId}>
+                      {shortenId(transactionId)}
+                    </dd>
+                  </div>
+                ) : null}
+                {resolvedOrderId ? (
+                  <div className="flex flex-col gap-0.5 sm:flex-row sm:justify-between sm:gap-4">
+                    <dt className="text-gray-500">Sipariş no</dt>
+                    <dd className="font-medium text-gray-900">
+                      {order?.orderNumber ? `#${order.orderNumber}` : shortenId(resolvedOrderId)}
+                    </dd>
+                  </div>
+                ) : null}
+                {order?.totalPayAmount != null ? (
+                  <div className="flex flex-col gap-0.5 sm:flex-row sm:justify-between sm:gap-4 border-t border-gray-100 pt-3">
+                    <dt className="text-gray-500">Ödenen tutar</dt>
+                    <dd className="font-bold tabular-nums text-[#CF0A2C]">{order.totalPayAmount.toTry()}</dd>
+                  </div>
+                ) : null}
+              </dl>
+            </div>
+
+            {order?.items && order.items.length > 0 ? (
+              <div className="rounded-2xl border border-gray-100 bg-white p-6 shadow-sm">
+                <p className="text-xs font-black uppercase tracking-widest text-[#CF0A2C] mb-4">Sipariş özeti</p>
+                <ul className="space-y-4">
+                  {order.items.map(item => {
+                    const imageSrc = item.productImage
+                      ? `${process.env.NEXT_PUBLIC_STORAGE_URL}/${item.productImage.replace(/^\//, '')}`
+                      : null;
+                    return (
+                      <li key={item.id} className="flex gap-4">
+                        <div className="relative h-16 w-16 shrink-0 overflow-hidden rounded-xl border border-gray-100 bg-gray-50">
+                          {imageSrc ? (
+                            <img src={imageSrc} alt={item.productName ?? item.title ?? 'Ürün'} className="h-full w-full object-cover" />
+                          ) : (
+                            <div className="flex h-full w-full items-center justify-center text-gray-300">
+                              <Package size={24} />
+                            </div>
+                          )}
+                          <span className="absolute -bottom-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-[#CF0A2C] text-[10px] font-black text-white">
+                            {item.quantity}
+                          </span>
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <p className="text-sm font-medium text-gray-900">{item.productName ?? item.title}</p>
+                          {item.unitName ? <p className="text-xs text-gray-500 mt-0.5">{item.unitName}</p> : null}
+                        </div>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            ) : null}
+
+            <div className="flex flex-col gap-3 sm:flex-row">
+              {resolvedOrderId ? (
+                <Link
+                  href={`/hesabim/siparislerim/${resolvedOrderId}`}
+                  className="inline-flex flex-1 justify-center rounded-xl bg-[#CF0A2C] px-8 py-3.5 text-sm font-black uppercase tracking-widest text-white transition hover:bg-[#a80824]"
+                >
+                  Siparişi görüntüle
+                </Link>
+              ) : null}
+              <Link
+                href="/"
+                className="inline-flex flex-1 justify-center rounded-xl border-2 border-gray-200 px-8 py-3.5 text-sm font-black uppercase tracking-widest text-gray-900 transition hover:border-gray-900"
+              >
+                Alışverişe devam
+              </Link>
+            </div>
+          </div>
+        )}
+
+        {phase === 'error' && (
+          <div className="space-y-6">
+            <div className="rounded-2xl border border-gray-100 bg-white p-8 sm:p-10 text-center shadow-sm">
+              <div className="mx-auto mb-5 inline-flex h-16 w-16 items-center justify-center rounded-full bg-red-50 text-[#CF0A2C]">
+                <XCircle size={32} aria-hidden />
+              </div>
+              <h1 className="text-2xl font-black uppercase tracking-tighter text-gray-900 mb-2">{displayTitle}</h1>
+              <p className="text-sm text-gray-600 leading-relaxed">{displayMessage}</p>
+            </div>
+
+            {(transactionId || resolvedPaymentId) && (
+              <div className="rounded-2xl border border-gray-100 bg-white p-6 shadow-sm space-y-3 text-sm">
+                <p className="text-xs font-black uppercase tracking-widest text-gray-500">Referans bilgileri</p>
+                {transactionId ? (
+                  <div className="flex flex-col gap-0.5 sm:flex-row sm:justify-between">
+                    <span className="text-gray-500">İşlem no</span>
+                    <span className="font-mono text-gray-900 break-all" title={transactionId}>
+                      {shortenId(transactionId)}
+                    </span>
+                  </div>
+                ) : null}
+                {resolvedPaymentId ? (
+                  <div className="flex flex-col gap-0.5 sm:flex-row sm:justify-between">
+                    <span className="text-gray-500">Ödeme no</span>
+                    <span className="font-mono text-gray-900 break-all" title={resolvedPaymentId}>
+                      {shortenId(resolvedPaymentId)}
+                    </span>
+                  </div>
+                ) : null}
+              </div>
+            )}
+
+            <div className="flex flex-col gap-3 sm:flex-row">
+              <Link
+                href={webReturnUrl}
+                className="inline-flex flex-1 justify-center rounded-xl bg-[#CF0A2C] px-8 py-3.5 text-sm font-black uppercase tracking-widest text-white transition hover:bg-[#a80824]"
+              >
+                Ödemeyi tekrar dene
+              </Link>
+              <Link
+                href="/sepet"
+                className="inline-flex flex-1 justify-center rounded-xl border-2 border-gray-200 px-8 py-3.5 text-sm font-black uppercase tracking-widest text-gray-900 transition hover:border-gray-900"
+              >
+                Sepete dön
+              </Link>
+            </div>
+          </div>
+        )}
+
+        {!hasValidStatus && (
+          <div className="rounded-2xl border border-gray-100 bg-white p-10 text-center shadow-sm">
+            <h1 className="text-xl font-black uppercase tracking-tighter text-gray-900 mb-3">Geçersiz bağlantı</h1>
+            <p className="text-sm text-gray-600 mb-8 leading-relaxed">
+              Ödeme sonucu bulunamadı. Lütfen ödeme adımından tekrar deneyin.
+            </p>
+            <Link
+              href={webReturnUrl}
+              className="inline-flex justify-center rounded-xl bg-[#CF0A2C] px-8 py-3.5 text-sm font-black uppercase tracking-widest text-white transition hover:bg-[#a80824]"
+            >
+              Ödemeye git
+            </Link>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}
+
+function CheckoutPageInner() {
+  const searchParams = useSearchParams();
+  const type = searchParams.get('type');
+  const statusParam = searchParams.get('status');
+  const token = searchParams.get('token');
+  const providerParam = searchParams.get('provider');
+  const transactionId = searchParams.get('transactionId');
+
+  const isPaymentResult =
+    statusParam === 'success' || statusParam === 'fail' || statusParam === 'error';
+
+  const isPayFlow =
+    type === 'pay' ||
+    Boolean(token) ||
+    (providerParam === 'garanti' && Boolean(transactionId?.trim()));
+
+  if (isPaymentResult) return <CheckoutResultView />;
+  if (isPayFlow) return <CheckoutPayView />;
+  return <CheckoutMainView />;
+}
+
+function CheckoutMainView() {
+  const { cart, branch } = useRaxon();
+  const [checkoutStep, setCheckoutStep] = useState<CheckoutStep>('contact');
+  const [confirmedContactEmail, setConfirmedContactEmail] = useState('');
+
+  useEffect(() => {
+    const fromCart = cart?.email?.trim() || '';
+    if (fromCart) setConfirmedContactEmail(fromCart);
+  }, [cart?.email]);
+
+  useEffect(() => {
+    const hasContactEmail = Boolean(cart?.email?.trim() || confirmedContactEmail);
+    if (!hasContactEmail && checkoutStep !== 'contact') {
+      setCheckoutStep('contact');
+    }
+  }, [cart?.email, confirmedContactEmail, checkoutStep]);
+
+  useEffect(() => {
+    const handleLoginSuccess = () => window.location.reload();
+    window.addEventListener(LOGIN_SUCCESS_EVENT, handleLoginSuccess);
+    return () => window.removeEventListener(LOGIN_SUCCESS_EVENT, handleLoginSuccess);
+  }, []);
+
+  return (
+    <div className="min-h-screen overflow-x-hidden bg-gray-50">
+      <header className="border-b border-gray-100 bg-white">
+        <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-5 sm:px-6 lg:px-8">
+          <Link href="/" className="flex flex-col items-start gap-1">
+            <GeneralImage
+              quality={85}
+              src={branch?.logoMedia?.relativePath ? `${process.env.NEXT_PUBLIC_STORAGE_URL}/${branch.logoMedia.relativePath}` : ''}
+              alt={branch?.tradingName ?? 'Logo'}
+              width={120}
+              height={36}
+              className="h-7 w-auto object-contain"
+            />
+          </Link>
+          <Link
+            href="/sepet"
+            className="text-xs font-black uppercase tracking-widest text-gray-900 transition-colors hover:text-[#CF0A2C]"
+          >
+            Sepete dön
+          </Link>
+        </div>
+      </header>
+
+      <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 sm:py-14 lg:px-8">
+        <div className="flex flex-col gap-10 md:flex-row md:items-start md:gap-10 lg:gap-14">
+          <div className="min-w-0 flex-1 rounded-2xl border border-gray-100 bg-white p-6 shadow-sm sm:p-8">
+            <nav className="mb-8 flex flex-wrap gap-2" aria-label="Ödeme adımları">
+              {(['contact', 'address', 'checkout'] as CheckoutStep[]).map((step, index) => {
+                const stepOrder = ['contact', 'address', 'checkout'].indexOf(checkoutStep);
+                const isActive = checkoutStep === step;
+                const isDone = index < stepOrder;
+                return (
+                  <span
+                    key={step}
+                    className={`rounded-full px-3 py-1 text-xs font-semibold ${
+                      isActive
+                        ? 'bg-[#CF0A2C] text-white'
+                        : isDone
+                          ? 'bg-[#CF0A2C]/10 text-[#CF0A2C]'
+                          : 'bg-gray-100 text-gray-500'
+                    }`}
+                  >
+                    {index + 1}. {CHECKOUT_STEP_LABELS[step]}
+                  </span>
+                );
+              })}
+            </nav>
+
+            {checkoutStep === 'contact' && (
+              <ViewStep1
+                onContinue={email => {
+                  setConfirmedContactEmail(email);
+                  setCheckoutStep('address');
+                }}
+              />
+            )}
+            {checkoutStep === 'address' && (
+              <ViewStep2 onComplete={() => setCheckoutStep('checkout')} onBack={() => setCheckoutStep('contact')} />
+            )}
+            {checkoutStep === 'checkout' && <ViewStepCheckout onBack={() => setCheckoutStep('address')} />}
+          </div>
+
+          <aside className="w-full shrink-0 md:w-96 md:sticky md:top-24 md:self-start">
+            <div className="rounded-2xl border border-gray-100 bg-white p-6 shadow-sm lg:p-8">
+              <span className="text-sm font-black text-[#CF0A2C] uppercase tracking-widest">Özet</span>
+              <h2 className="mt-2 text-xl font-black text-gray-900 uppercase tracking-tighter">Sipariş özeti</h2>
+              <div className="my-6 space-y-5">
+                {cart?.items?.map(item => {
+                  const linePay = item.linePay ?? 0;
+                  const listGross = (item.lineTotal ?? 0) + (item.lineTax ?? 0);
+                  const showListStrike = listGross - linePay > 0.01;
+                  const variantLine = formatBasketItemVariantLine(item);
+                  return (
+                    <div key={item.id} className="flex gap-4">
+                      <div className="relative shrink-0">
+                        <img
+                          src={item.images?.[0] ? `${process.env.NEXT_PUBLIC_STORAGE_URL}/${item.images[0]}` : 'https://placehold.co/80x80/f3f4f6/9ca3af?text=Ürün'}
+                          alt={item.product.name}
+                          className="h-20 w-20 rounded-xl border border-gray-100 object-cover"
+                        />
+                        <div className="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-[#CF0A2C] text-[11px] font-black text-white shadow-sm">
+                          {item.quantity}
+                        </div>
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <h3 className="text-sm font-medium text-gray-900">{item.product.name}</h3>
+                        {variantLine ? (
+                          <p className="mt-1 text-xs text-gray-500">{variantLine}</p>
+                        ) : null}
+                        <div className="mt-2 flex flex-wrap items-center gap-2">
+                          {showListStrike ? (
+                            <span className="text-xs text-gray-400 line-through tabular-nums">{listGross.toTry()}</span>
+                          ) : null}
+                          <span className="text-sm font-bold tabular-nums text-[#CF0A2C]">{linePay.toTry()}</span>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+              <div className="space-y-3 border-t border-gray-100 pt-5">
+                <div className="flex items-center justify-between text-sm">
+                  <span className="flex items-center gap-1 text-gray-600">
+                    Ara toplam
+                    <HelpCircle className="h-4 w-4 text-gray-400" />
+                  </span>
+                  <span className="font-semibold tabular-nums text-gray-900">
+                    {(cart?.info?.basePrice?.total ?? 0).toTry()}
+                  </span>
+                </div>
+                {cart?.info?.tax && cart.info.tax.length > 0 ? (
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-gray-600">KDV</span>
+                    <span className="font-semibold tabular-nums text-gray-900">
+                      {cart.info.tax.reduce((acc, curr) => acc + curr.tax, 0).toTry()}
+                    </span>
+                  </div>
+                ) : null}
+                {(cart?.info?.delivery?.pay ?? 0) > 0 ? (
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-gray-600">Kargo</span>
+                    <span className="font-semibold tabular-nums text-gray-900">{cart?.info?.delivery?.pay?.toTry()}</span>
+                  </div>
+                ) : null}
+                {(cart?.info?.discount?.pay ?? 0) > 0 ? (
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="font-bold text-[#CF0A2C]">İndirim</span>
+                    <span className="font-semibold tabular-nums text-[#CF0A2C]">-{cart?.info?.discount?.pay?.toTry()}</span>
+                  </div>
+                ) : null}
+                <div className="flex flex-col gap-2 pt-1">
+                  <CartPromoCodeSection variant="checkout" />
+                  <button type="button" className="text-left text-xs font-black uppercase tracking-widest text-gray-600 underline-offset-2 transition-colors hover:text-[#CF0A2C] hover:underline">
+                    Sipariş notu ekle
+                  </button>
+                </div>
+                <div className="flex items-center justify-between border-t border-gray-100 pt-5">
+                  <span className="text-sm font-black uppercase tracking-widest text-gray-900">Toplam</span>
+                  <span className="text-xl font-black tabular-nums text-[#CF0A2C]">
+                    {(cart?.info?.payPrice?.pay ?? 0).toTry()}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function CheckoutPageFallback() {
+  return (
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+      <Loader2 className="h-10 w-10 animate-spin text-[#CF0A2C]" aria-label="Yükleniyor" />
+    </div>
+  );
+}
+
+export default function PaymentPage({ webReturnUrl = '/sepet/odeme' }: CheckoutViewProps) {
+  return (
+    <CheckoutViewContext.Provider value={{ webReturnUrl }}>
+      <Suspense fallback={<CheckoutPageFallback />}>
+        <CheckoutPageInner />
+      </Suspense>
+    </CheckoutViewContext.Provider>
+  );
+}
+
+export { PaymentPage as CheckoutView };