Teslimat ve fatura adresi

Projene ekle

Komut yalnızca modülü kurar; sayfa senin kararın. Seçimlerine göre prompt ve sayfa kodu hazırlanır.

ViraStack Start projeme checkout-address modülünü ekle.

1. Proje kökünde `npx virastack add checkout-address` komutunu çalıştır. Bu komut yalnızca `src/features/checkout-address` klasörünü ve paketleri kurar, sayfa oluşturmaz. Çakışma hatası alırsan hiçbir dosyayı silme, durumu bana bildir.
2. Projenin Next.js kullandığını `package.json` ve klasör yapısından doğrula. Uyuşmuyorsa dur ve bana sor.
3. `src/app/checkout-address/page.tsx` dosyasını aşağıdaki kodla oluştur. Dosya zaten varsa üzerine yazma, `CheckoutAddress` bileşenini var olan sayfaya ekle.

```tsx
import { CheckoutAddress } from "@/features/checkout-address/components/CheckoutAddress"

export default function Page() {
  return (
    <main className="mx-auto w-full max-w-4xl flex-1 px-4 py-6 sm:px-6">
      <CheckoutAddress />
    </main>
  )
}
```

4. API adresimi verdiysem adresi Next.js'te `NEXT_PUBLIC_API_URL`, TanStack Start'ta `VITE_API_URL` değişkenine yaz. Yanıt biçimi farklıysa `src/features/checkout-address` içinde gereken yerleri uyarla.
5. Projenin paket yöneticisiyle `typecheck`, `test` ve `lint:ci` script'lerini çalıştır, sonucu bildir.

Modülde neler var?

• Ekranda yalnızca seçili adres görünür; Değiştir düğmesi tüm adresleri popup'ta listeler. Liste TanStack Query ile yönetilir, iki dummy adresle başlar.
• Adres formu React Hook Form ve Zod ile doğrulanır, shadcn/ui bileşenlerini kullanır. Ekleme ve düzenleme aynı formu kullanır, kaydedince istek network'e çıkar.
• İl, ilçe, mahalle ve posta kodu ViraStack Address paketinden gelir; cep telefonu ile kurumsal adresteki VKN'yi ViraStack Mask biçimlendirir ve doğrular.
• Fatura adresi teslimat adresiyle aynıysa ekranda tek adres görünür; değilse ikinci adres aynı bileşenlerle ayrı seçilir.
• Adres teslimat ya da fatura türü taşımaz, adres defterine eklenir. Seçimi Zustand tutar, useCheckoutAddress hook'u siparişe hazır veriyi döndürür.
• Testlerde Vitest, Testing Library ve MSW kullanılır; 2 test dosyası hazır gelir.

Projene neler iner?

Yukarıdaki seçimlerine göre npx virastack add checkout-address şu dosyaları projene ekler.

Sayfa oluşturulmaz; modülü yukarıdaki adımlarla kendi sayfana eklersin.

Nasıl kullanırsın?

Kendi API'ne geçiş

API adresini .env.local dosyasında Next.js'te NEXT_PUBLIC_API_URL, TanStack Start'ta VITE_API_URL değerine, adres yolunu ADDRESSES_PATH değerine yaz. get-addresses.api.ts şimdilik dummy adresleri döndürür, onu isteğe çevir; save-address.api.ts dosyasını kendi API'ne göre değiştir. Sunucu tarafı doğrulama senin sorumluluğunda.

Kod artık senin

Modül projene kopyalanır, bir pakete bağlı kalmazsın. İstediğin gibi değiştirirsin; istemezsen npx virastack remove checkout-address ile kaldırırsın.

Aynı alandaki modüller

• Kartla ödeme

  Seçili kart ekranda görünür; kayıtlı kartlar popup'ta listelenir, yeni kart eklenir. Kart numarası ve CVV network'e çıkmaz, ödeme sağlayıcını tek noktadan bağlarsın.