From a71740767d0992e35bd0bb78bd32aad6e95a0e82 Mon Sep 17 00:00:00 2001 From: bilalgursen Date: Tue, 11 Aug 2026 07:03:32 +0300 Subject: [PATCH] =?UTF-8?q?feat(odeme):=20checkout=20ekran=C4=B1nda=20site?= =?UTF-8?q?=20kromunu=20daralt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ödeme adımında ekranda ~20 kaçış yolu vardı (SEO footer kolonları, katalog arama, user nav) ve geri sayım banner'ı kart formunun üstünde duruyordu. Ayrıca layout'un alt progressive blur katmanı iyzico iframe'inin son satırlarını bulanıklaştırıyordu. - kromGizliMi: /odeme kroma kapatıldı, /odeme/sonuc istisna tutuldu (orada kullanıcıyı ürüne döndürmek istiyoruz) - OdemeUstSerit: SiteHeader'ın tasarım dilinde daraltılmış şerit — logo bilerek link değil, tek çıkış "Paket sayfasına dön" - Sipariş özeti kartı kaldırıldı: ürün ve tutar /paket'te seçiliyor, iyzico da ödeme butonunda tutarı gösteriyor - Yasal linkler + iyzico logo bandı ayrı footer yerine doğrudan formun altında; bant sayfada artık tek kez görünüyor Co-Authored-By: Claude Opus 5 --- src/app/odeme/page.tsx | 8 +- src/components/header-gate.tsx | 17 +++- src/features/odeme/components/odeme-kromu.tsx | 54 ++++++++++++ .../odeme/components/odeme-sayfasi.tsx | 88 ++++++++----------- 4 files changed, 111 insertions(+), 56 deletions(-) create mode 100644 src/features/odeme/components/odeme-kromu.tsx diff --git a/src/app/odeme/page.tsx b/src/app/odeme/page.tsx index 0b97eb9..7e5c316 100644 --- a/src/app/odeme/page.tsx +++ b/src/app/odeme/page.tsx @@ -1,6 +1,6 @@ import { Suspense } from "react"; import type { Metadata } from "next"; -import { SiteFooter } from "@/components/site-footer"; +import { OdemeUstSerit } from "@/features/odeme/components/odeme-kromu"; import { OdemeSayfasi, OdemeSayfasiSkeleton, @@ -17,7 +17,10 @@ export default function OdemePage({ searchParams: Promise<{ siparis?: string }>; }) { return ( -
+ // -mb-28: layout'taki ScrollFlow sarmalayıcısının pb-28'ini nötrler — o + // padding gizlenen alt blur katmanı içindi, checkout'ta krom kapalı. +
+
}> {searchParams.then(({ siparis }) => ( @@ -25,7 +28,6 @@ export default function OdemePage({ ))}
-
); } diff --git a/src/components/header-gate.tsx b/src/components/header-gate.tsx index eaeb0de..a43b094 100644 --- a/src/components/header-gate.tsx +++ b/src/components/header-gate.tsx @@ -4,14 +4,25 @@ import { usePathname } from "next/navigation"; // Site kromunun (banner, header, üst/alt blur) gizleneceği rotalar // (tam eşleşme veya alt yol). KaydetBanner da aynı listeye uyar. -const HIDDEN_PREFIXES = ["/giris"]; +// /odeme: checkout ekranında nav/arama/geri sayım birer kaçış yolu; üstelik +// alt blur katmanı iyzico iframe'inin son satırlarını bulanıklaştırıyor. +const HIDDEN_PREFIXES = ["/giris", "/odeme"]; -export function kromGizliMi(pathname: string) { - return HIDDEN_PREFIXES.some( +// Kromun geri geldiği istisnalar: ödeme sonucu sayfasında kullanıcıyı ürüne +// döndürmek istiyoruz, o yüzden orada tam krom kalır. +const ISTISNA_PREFIXES = ["/odeme/sonuc"]; + +function yolEslesir(pathname: string, prefixler: string[]) { + return prefixler.some( (p) => pathname === p || pathname.startsWith(`${p}/`), ); } +export function kromGizliMi(pathname: string) { + if (yolEslesir(pathname, ISTISNA_PREFIXES)) return false; + return yolEslesir(pathname, HIDDEN_PREFIXES); +} + export function HeaderGate({ children }: { children: React.ReactNode }) { const pathname = usePathname(); if (kromGizliMi(pathname)) return null; diff --git a/src/features/odeme/components/odeme-kromu.tsx b/src/features/odeme/components/odeme-kromu.tsx new file mode 100644 index 0000000..12689ba --- /dev/null +++ b/src/features/odeme/components/odeme-kromu.tsx @@ -0,0 +1,54 @@ +import Image from "next/image"; +import Link from "next/link"; +import { ArrowLeft } from "lucide-react"; + +/** + * Checkout üst şeridi: /odeme'de site header'ı ve SEO footer'ı kapalı + * (bkz. `kromGizliMi`), yerine bu daraltılmış şerit gelir. Ayrı bir footer + * yok — yasal linkler ve iyzico bandı doğrudan formun altında duruyor + * (bkz. `OdemeSayfasi`). + * + * Tasarım dili birebir `SiteHeader`dan alınır — aynı kap (`max-w-6xl`), aynı + * logo ölçüleri, aynı tipografi, çerçevesiz/zeminsiz yerleşim. Fark yalnızca + * içerikte: ödeme adımında kaçış yolu bırakmıyoruz, bu yüzden arama + user + * nav yerine tek çıkış olarak "Paket sayfasına dön" duruyor ve logo bilerek + * link değil. + */ +export function OdemeUstSerit() { + return ( + // SiteHeader sticky; burada arkasında progressive blur katmanı olmadığı + // için (krom kapalı) statik bırakıldı — durağan haldeki görünüm aynı. +
+
+
+ + + + Kolay + + + Tercih + + +
+ + + Paket sayfasına dön + +
+
+ ); +} diff --git a/src/features/odeme/components/odeme-sayfasi.tsx b/src/features/odeme/components/odeme-sayfasi.tsx index d578f05..7b23d3b 100644 --- a/src/features/odeme/components/odeme-sayfasi.tsx +++ b/src/features/odeme/components/odeme-sayfasi.tsx @@ -1,20 +1,15 @@ import Image from "next/image"; import Link from "next/link"; import { notFound, redirect } from "next/navigation"; -import { ArrowLeft, Lock } from "lucide-react"; +import { Lock } from "lucide-react"; import { verifySession } from "@/lib/session"; -import { URUNLER } from "@/lib/credits"; import { SectionEyebrow } from "@/components/pixel-decor"; import { Skeleton } from "@/components/ui/skeleton"; import { siparisGetir } from "../odeme-queries"; import { IyzicoFormu } from "./iyzico-formu"; -function tl(kurus: number) { - return (kurus / 100).toLocaleString("tr-TR", { maximumFractionDigits: 0 }); -} - -// Kendi tasarımımızdaki ödeme sayfası: sipariş özeti bizden, kart formu -// iyzico'nun gömülü iframe'inden gelir (kart verisi bize hiç uğramaz). +// Kendi tasarımımızdaki ödeme sayfası: kart formu iyzico'nun gömülü +// iframe'inden gelir (kart verisi bize hiç uğramaz). export async function OdemeSayfasi({ siparisId }: { siparisId?: string }) { if (!siparisId) redirect("/paket"); // Oturum düşmüşse geri dönüşte ?siparis= kaybolmasın @@ -34,49 +29,24 @@ export async function OdemeSayfasi({ siparisId }: { siparisId?: string }) { redirect("/paket"); } - const urun = URUNLER[order.product]; - return (
- - - Paket sayfasına dön - - -
+ {/* "Paket sayfasına dön" linki checkout üst şeridinde (OdemeUstSerit) */} +
Güvenli ödeme

Ödemeyi tamamla

- {/* Sipariş özeti */} -
-
-
-

{urun.label}

-

- {order.credits} Yapay Zeka danışman kredisi - {order.product === "paket" && - " · 24 tercihlik liste, risk analizi ve PDF rapor"} -

-
-

- {tl(order.amountKurus)} TL -

-
-
+ {/* Sipariş özeti bilerek yok: paket/ürün ve tutar bir önceki adımda + (/paket) seçildi, iyzico formu da ödeme butonunda tutarı gösteriyor — + burada üçüncü kez tekrar etmiyoruz. */} {/* iyzico gömülü kart formu */}
@@ -85,19 +55,39 @@ export async function OdemeSayfasi({ siparisId }: { siparisId?: string }) { 256-bit SSL ile şifreli bağlantı
+

+ Kart bilgilerin iyzico'da işlenir, bize hiç ulaşmaz +

+ + {/* Ayrı bir footer yerine yasal linkler ve iyzico bandı doğrudan formun + altında: mesafeli satış mevzuatı ve iyzico işyeri sözleşmesi bunların + ödeme adımında görünür olmasını istiyor. */} + + {/* iyzico işyeri sözleşmesi gereği: "iyzico ile Öde" + kart logoları + görünür olmalı. Resmî logo bandı (iyzico logo paketi). */} iyzico ile Öde — Mastercard, Visa, American Express ve Troy ile güvenli ödeme -

- Kart bilgilerin iyzico'da işlenir, bize hiç ulaşmaz ·{" "} - - İade koşulları - -

); } @@ -105,11 +95,9 @@ export async function OdemeSayfasi({ siparisId }: { siparisId?: string }) { export function OdemeSayfasiSkeleton() { return (
- - + - - +
); }