Merge branch 'gece/p6-arti-aninda-ekle' into gece/entegrasyon-test-2

2026-09-21 09:27:12 +03:00
parent c196b02442 1a87d89b5a
commit 0b67b8303a
4 changed files with 232 additions and 62 deletions
--- a/src/features/liste/components/program-ekle-butonu.tsx
+++ b/src/features/liste/components/program-ekle-butonu.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { Check, Plus } from "lucide-react";
+import { ArrowRight, Check, Plus } from "lucide-react";
 import { toast } from "sonner";
 import type { Program } from "@/types/yokatlas";
 import { olay } from "@/lib/analitik";
@@ -10,7 +10,10 @@ import {
  useListedeMi,
  type ManuelKaynak,
 } from "../liste-store";
-import { programEkleIste } from "../hooks/use-tercih-profili";
+import {
+  profilToplamaAc,
+  programEkleIste,
+} from "../hooks/use-tercih-profili";
 import { preloadTercihProfiliKapisi } from "./tercih-profili-kapisi-lazy";

 type ProgramOzet = Pick<
@@ -25,6 +28,8 @@ type ProgramOzet = Pick<
  | "sira2024"
 >;

+const PROFILSIZ_EKLEME_TOAST_ID = "profilsiz-ekleme";
+
 export function ProgramEkleButonu({
  program,
  kaynak = "sonuc",
@@ -52,8 +57,33 @@ export function ProgramEkleButonu({
      toast.info(`Listen ${MANUEL_LISTE_MAX} tercihe ulaştı.`);
    } else if (sonuc.zatenVar) {
      toast.info("Bu program zaten seçtiklerinde.");
-    } else {
-      olay("program_eklendi", { kaynak });
+    } else if (sonuc.eklendi) {
+      olay("program_eklendi", {
+        kaynak,
+        yol: "dogrudan",
+        profilli: sonuc.profilsiz ? "hayir" : "evet",
+      });
+      if (sonuc.profilsiz) {
+        // Önce ver, sonra iste: program eklendi; sıralama sorusu değer
+        // karşılığında gelir. Sabit id → art arda ＋'larda toast yığılmaz,
+        // aynı toast tazelenir.
+        toast.success("Seçtiklerine eklendi", {
+          id: PROFILSIZ_EKLEME_TOAST_ID,
+          duration: 8000,
+          description:
+            "Sıralamanı girersen bu programın risk seviyesini de gösteririz.",
+          action: {
+            label: (
+              <span className="inline-flex items-center gap-1">
+                Sıralamamı gir
+                <ArrowRight className="size-4" aria-hidden />
+              </span>
+            ),
+            // Tanıtım ekranını atla, doğrudan sıralama adımı
+            onClick: () => profilToplamaAc(null, true, "arti_toast"),
+          },
+        });
+      }
    }
  }

@@ -62,7 +92,8 @@ export function ProgramEkleButonu({
      type="button"
      disabled={listede || doldu}
      onClick={handleClick}
-      // Profilsiz kullanıcıda ＋ kapıyı açar — chunk'ı niyet anında ısıt
+      // Profilsiz eklemenin toast aksiyonu kapıyı açar — chunk'ı niyet
+      // anında ısıt
      onPointerEnter={preloadTercihProfiliKapisi}
      onFocus={preloadTercihProfiliKapisi}
      title={
--- a/src/features/liste/components/tercih-profili-kapisi.tsx
+++ b/src/features/liste/components/tercih-profili-kapisi.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { ArrowRight, Trophy } from "lucide-react";
 import { useReducedMotion } from "motion/react";
@@ -53,17 +53,38 @@ type Adim = "giris" | "sira" | "sihirbaz";
 const ADIM_SIRASI: Record<Adim, number> = { giris: 0, sira: 1, sihirbaz: 2 };

 export function TercihProfiliKapisi() {
-  const { acik, duzenle, dogrudanSira, bekleyen, bekleyenHedef, profil } =
-    useProfilKapisi();
+  const {
+    acik,
+    duzenle,
+    dogrudanSira,
+    tetik,
+    bekleyen,
+    bekleyenHedef,
+    profil,
+  } = useProfilKapisi();
+  // Kapanış olayı için o an görünen adım; KapıIcerik her adım değişiminde
+  // (ve mount'ta) bildirir. Render'ı etkilemediği için state değil ref.
+  const adimRef = useRef<Adim>("giris");
  const oturumAnahtari = acik
    ? `${duzenle ? "d" : "n"}-${bekleyen?.program.id ?? "yok"}-${profil?.sira ?? 0}-${profil?.tur ?? ""}`
    : "kapali";

+  // Tamamlanmadan kapanışın TEK noktası: X, dışarı tıklama, Esc (Dialog
+  // onOpenChange) ve içerideki "Vazgeç" butonları buradan geçer.
+  // Tamamlanan kapı buraya uğramaz: secimleriTamamla → profilTamamlandi
+  // depoda `acik`'ı doğrudan kapatır; Radix kontrollü `open` prop'u
+  // değişince onOpenChange çağırmaz → `kapi_kapatildi` atılmaz.
+  function vazgec() {
+    if (!acik) return;
+    olay("kapi_kapatildi", { adim: adimRef.current, tetik });
+    profilKapisiniKapat();
+  }
+
  return (
    <Dialog
      open={acik}
      onOpenChange={(v) => {
-        if (!v) profilKapisiniKapat();
+        if (!v) vazgec();
      }}
    >
      <DialogContent
@@ -85,6 +106,10 @@ export function TercihProfiliKapisi() {
            bekleyen={bekleyen}
            hedef={bekleyenHedef}
            profil={profil}
+            onAdimDegisti={(yeniAdim) => {
+              adimRef.current = yeniAdim;
+            }}
+            onVazgec={vazgec}
          />
        ) : null}
      </DialogContent>
@@ -98,21 +123,32 @@ function KapıIcerik({
  bekleyen,
  hedef,
  profil,
+  onAdimDegisti,
+  onVazgec,
 }: {
  duzenle: boolean;
  dogrudanSira: boolean;
  bekleyen: BekleyenProgram | null;
  hedef: BekleyenHedef | null;
  profil: TercihProfili | null;
+  /** Görünen adımı üst bileşene bildirir (yalnız `kapi_kapatildi` ölçümü). */
+  onAdimDegisti: (adim: Adim) => void;
+  /** Tamamlamadan kapat — olayı üst bileşen atar, sonra kapıyı kapatır. */
+  onVazgec: () => void;
 }) {
  const router = useRouter();
  const bilinenSira = bekleyen?.adaySira ?? profil?.sira ?? null;
  const bilinenTur = bekleyen?.adayTur ?? profil?.tur ?? "say";

  // Düzenlemede ve navbar "Sıralamanı gir" girişinde doğrudan sıralama adımı
-  const [adim, setAdim] = useState<Adim>(
-    duzenle || dogrudanSira ? "sira" : "giris",
-  );
+  const ilkAdim: Adim = duzenle || dogrudanSira ? "sira" : "giris";
+  const [adim, setAdim] = useState<Adim>(ilkAdim);
+  // Her açılışta (key ile yeniden mount) üstteki adım kaydını başa sar;
+  // önceki açılıştan kalan "sihirbaz" değeri yeni kapanışa sızmasın.
+  useEffect(() => {
+    onAdimDegisti(ilkAdim);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- yalnız mount
+  }, []);
  // Adım geçişleri sihirbazın kendi içindeki TransitionPanel kaymasıyla oynar
  const [yon, setYon] = useState(1);
  const [gecisBasladi, setGecisBasladi] = useState(false);
@@ -140,6 +176,7 @@ function KapıIcerik({
    setYon(ADIM_SIRASI[yeniAdim] > ADIM_SIRASI[adim] ? 1 : -1);
    setGecisBasladi(true);
    setAdim(yeniAdim);
+    onAdimDegisti(yeniAdim);
  }

  async function facetYukle(siraDeger: number, turDeger: string) {
@@ -287,7 +324,7 @@ function KapıIcerik({
          <Button
            type="button"
            variant="ghost"
-            onClick={profilKapisiniKapat}
+            onClick={onVazgec}
            className="cursor-pointer"
          >
            Vazgeç
@@ -385,7 +422,7 @@ function KapıIcerik({
            onClick={() =>
              // Doğrudan sıralama adımıyla açıldıysa tanıtım adımı hiç
              // görülmedi; "Geri" yerine kapıyı kapatmak beklenen davranış.
-              duzenle || dogrudanSira ? profilKapisiniKapat() : adimaGec("giris")
+              duzenle || dogrudanSira ? onVazgec() : adimaGec("giris")
            }
            className="cursor-pointer"
          >
--- a/src/features/liste/hooks/use-tercih-profili.ts
+++ b/src/features/liste/hooks/use-tercih-profili.ts
@@ -1,10 +1,12 @@
 "use client";

-// Global "+" kapısı: profil yokken bekleyen programı tutar, modalı açar.
+// Global profil kapısı deposu. ＋ profil yokken de programı hemen ekler
+// (prototip); kapı, ekleme toast'ındaki aksiyondan ve diğer CTA'lardan açılır.
 // Layout'ta bir kez monte edilen TercihProfiliKapisi bu store'a abone olur.

 import { useSyncExternalStore } from "react";
 import type { Program } from "@/types/yokatlas";
+import { olay } from "@/lib/analitik";
 import { PROFIL_DEGISTI_EVENT, sonucHref, type TercihProfili } from "@/features/sihirbaz/sihirbaz-sabitler";
 import { tercihProfiliOku, tercihProfiliTamamlandiMi } from "@/features/sihirbaz/sihirbaz-profil";
 import {
@@ -40,11 +42,27 @@ export type BekleyenProgram = {
 *  girişsizse giriş CTA paneli; hero-form ile aynı desen). */
 export type BekleyenHedef = "sonuc" | "sihirbaz";

+/** Kapıyı kimin açtığı — yalnız ölçüm içindir (`kapi_acildi` /
+ *  `kapi_kapatildi` olaylarının `tetik` özelliği), davranışı etkilemez.
+ *  "arti": ＋ butonu · "sonuc": sonuca gitmek isteyen CTA'lar ·
+ *  "sihirbaz": Yapay Zeka niyetli CTA'lar · "duzenle": profil düzenleme. */
+export type KapiTetik =
+  | "arti"
+  // Profilsiz ＋ artık anında ekliyor; kapı, ekleme toast'ındaki
+  // "Sıralamamı gir" aksiyonundan açılır ("arti" yeni akışta atılmaz).
+  | "arti_toast"
+  | "sonuc"
+  | "sihirbaz"
+  | "duzenle"
+  | "diger";
+
 type KapıDurumu = {
  acik: boolean;
  duzenle: boolean;
  /** Tanıtım (giriş) adımını atla, doğrudan sıralama adımıyla aç. */
  dogrudanSira: boolean;
+  /** Açık kapıyı kimin açtığı; kapalıyken "diger". */
+  tetik: KapiTetik;
  bekleyen: BekleyenProgram | null;
  bekleyenHedef: BekleyenHedef | null;
  profil: TercihProfili | null;
@@ -55,6 +73,7 @@ let durum: KapıDurumu = {
  acik: false,
  duzenle: false,
  dogrudanSira: false,
+  tetik: "diger",
  bekleyen: null,
  bekleyenHedef: null,
  profil: null,
@@ -106,6 +125,7 @@ const SSR_DURUM: KapıDurumu = {
  acik: false,
  duzenle: false,
  dogrudanSira: false,
+  tetik: "diger",
  bekleyen: null,
  bekleyenHedef: null,
  profil: null,
@@ -133,44 +153,63 @@ export function profilKapisiniKapat() {
    acik: false,
    duzenle: false,
    dogrudanSira: false,
+    tetik: "diger",
    bekleyen: null,
    bekleyenHedef: null,
  };
  yayinla();
 }

+/** Kapının tek açılış noktası: durumu yazar ve `kapi_acildi`'yi atar; her
+ *  açıcı kendi `tetik` değerini verir. (Tamamlanmadan kapanışın olayı
+ *  `kapi_kapatildi` kapı bileşeninden atılır — adımı yalnız o bilir.) */
+function kapiyiAc(
+  yama: Pick<
+    KapıDurumu,
+    "duzenle" | "dogrudanSira" | "bekleyen" | "bekleyenHedef"
+  >,
+  tetik: KapiTetik,
+) {
+  durum = { ...durum, acik: true, ...yama, tetik };
+  yayinla();
+  olay("kapi_acildi", { tetik });
+}
+
 export function profilDuzenlemeyiAc() {
  if (!durum.profilYuklendi) yukle();
-  durum = {
-    ...durum,
-    acik: true,
+  kapiyiAc(
+    {
      duzenle: true,
      dogrudanSira: false,
      bekleyen: null,
      bekleyenHedef: null,
-  };
-  yayinla();
+    },
+    "duzenle",
+  );
 }

 /**
 * Profil yokken kapıyı açar; tamamlanınca `hedef`'e yönlendirilir.
 * Navbar, çekmece +, /sonuc boş hali ve listem gibi yerler bunu kullanır.
 * `dogrudanSira` tanıtım adımını atlar — kapı sıralama adımıyla açılır.
+ * `tetik` yalnız ölçüm içindir; verilmezse hedeften türetilir ("sonuc" /
+ * "sihirbaz"), hedef de yoksa "diger".
 */
 export function profilToplamaAc(
  hedef: BekleyenHedef | null = null,
  dogrudanSira = false,
+  tetik?: KapiTetik,
 ) {
  if (!durum.profilYuklendi) yukle();
-  durum = {
-    ...durum,
-    acik: true,
+  kapiyiAc(
+    {
      duzenle: false,
      dogrudanSira,
      bekleyen: null,
      bekleyenHedef: hedef,
-  };
-  yayinla();
+    },
+    tetik ?? hedef ?? "diger",
+  );
 }

 /**
@@ -200,32 +239,35 @@ export function programEkleIste(opts: {
  eklendi: boolean;
  zatenVar: boolean;
  doldu: boolean;
+  /** Artık hep false: ＋ kapıyı açmıyor (çağıranlar kırılmasın diye duruyor). */
  kapiAcildi: boolean;
+  /** Program profil (sıralama) olmadan eklendi → risk henüz hesaplanamadı. */
+  profilsiz: boolean;
 } {
-  const { program, kaynak = "sonuc", adaySira, adayTur } = opts;
+  const { program, kaynak = "sonuc", adaySira } = opts;

  if (listedeMi(program.id)) {
-    return { eklendi: false, zatenVar: true, doldu: false, kapiAcildi: false };
-  }
-
-  if (!tercihProfiliTamamlandiMi()) {
-    durum = {
-      ...durum,
-      acik: true,
-      duzenle: false,
-      dogrudanSira: false,
-      bekleyen: { program, kaynak, adaySira, adayTur },
-      bekleyenHedef: null,
+    return {
+      eklendi: false,
+      zatenVar: true,
+      doldu: false,
+      kapiAcildi: false,
+      profilsiz: false,
    };
-    yayinla();
-    return { eklendi: false, zatenVar: false, doldu: false, kapiAcildi: true };
  }

-  if (!durum.profilYuklendi) {
+  // [PROTOTİP] Önce ver, sonra iste: profil yokken de program HEMEN listeye
+  // girer (sıra bilinmiyorsa risk null), kapı açılmaz. Sıralama sorusu
+  // butondaki toast aksiyonuyla gelir; profil girilince profilTamamlandi →
+  // riskleriYenile tüm listedeki null riskleri doldurur. Eski davranış
+  // (bekleyen program + kapı) için bu commit'i geri almak yeterli.
+  const profilsiz = !tercihProfiliTamamlandiMi();
+
+  if (!profilsiz && !durum.profilYuklendi) {
    profiliTazele();
  }

-  const profil = durum.profil ?? tercihProfiliOku();
+  const profil = profilsiz ? null : (durum.profil ?? tercihProfiliOku());
  const tercih = programdanManuelTercih(
    program,
    adaySira ?? profil?.sira ?? null,
@@ -233,9 +275,21 @@ export function programEkleIste(opts: {
  );
  const ok = ekle(tercih);
  if (!ok) {
-    return { eklendi: false, zatenVar: false, doldu: true, kapiAcildi: false };
+    return {
+      eklendi: false,
+      zatenVar: false,
+      doldu: true,
+      kapiAcildi: false,
+      profilsiz,
+    };
  }
-  return { eklendi: true, zatenVar: false, doldu: false, kapiAcildi: false };
+  return {
+    eklendi: true,
+    zatenVar: false,
+    doldu: false,
+    kapiAcildi: false,
+    profilsiz,
+  };
 }

 /** Profil yazıldıktan sonra; bekleyen hedef varsa yönlendirme href'i döner.
@@ -250,13 +304,21 @@ export function profilTamamlandi(
  const bekleyen = durum.bekleyen;
  const hedef = durum.bekleyenHedef;
  if (bekleyen) {
-    ekle(programdanManuelTercih(bekleyen.program, profil.sira, bekleyen.kaynak));
+    const eklendi = ekle(
+      programdanManuelTercih(bekleyen.program, profil.sira, bekleyen.kaynak),
+    );
+    // Kapıdan geçen ＋: program ancak şimdi listeye girdi. Butondaki
+    // {yol: "dogrudan"} atışının eşi; liste doluysa/zaten varsa atılmaz.
+    if (eklendi) {
+      olay("program_eklendi", { kaynak: bekleyen.kaynak, yol: "kapi" });
+    }
  }
  durum = {
    ...durum,
    acik: false,
    duzenle: false,
    dogrudanSira: false,
+    tetik: "diger",
    bekleyen: null,
    bekleyenHedef: null,
    profil,
--- a/src/lib/analitik.ts
+++ b/src/lib/analitik.ts
@@ -20,6 +20,9 @@ export type OlayAdi =
  | "liste_olusturuldu"
  | "liste_guncellendi"
  | "liste_revize"
+  // Seri kırılması: bu düzeltmenin canlıya çıktığı tarihten önce = ＋
+  // tıklaması (kapı açılsa da atılıyordu), sonrası = gerçek ekleme
+  // ({yol: "dogrudan" | "kapi"}); seriler karşılaştırılamaz.
  | "program_eklendi"
  | "netler_goruntulendi"
  | "danisman_sorusu"
@@ -36,7 +39,12 @@ export type OlayAdi =
  | "sonuc_goruntulendi"
  | "paket_goruntulendi"
  | "liste_uretim_hata"
-  | "giris_hata";
+  | "giris_hata"
+  // Profil kapısı (sıra + sihirbaz modalı). kapi_acildi {tetik}: her açılış.
+  // kapi_kapatildi {adim, tetik}: yalnız TAMAMLANMADAN kapanış (X, dışarı
+  // tıklama, Vazgeç); tamamlanan kapıda atılmaz.
+  | "kapi_acildi"
+  | "kapi_kapatildi";

 export type Ozellikler = Record<string, string | number>;

@@ -66,6 +74,10 @@ const DENEME_ARALIGI_MS = 500;
 const DENEME_SINIRI = 20;

 let kuyruk: Array<[OlayAdi, Ozellikler | undefined]> = [];
+// Script'ten önce gelen identify için tek "son değer" slotu: sert yüklemede
+// (OAuth / e-posta linki dönüşü) RybbitIdentify effect'i de script'ten önce
+// koşar. Kuyruk değil slot — yalnız en son kimlik anlamlıdır.
+let bekleyenKimlik: [string, Record<string, string> | undefined] | null = null;
 let zamanlayici: ReturnType<typeof setInterval> | null = null;
 let denemeSayisi = 0;
 let kuyrukKapali = false;
@@ -75,11 +87,21 @@ function zamanlayiciyiDurdur(): void {
  zamanlayici = null;
 }

-/** Bekleyen olayları geliş sırasıyla gönderir. */
+/** Önce bekleyen kimliği uygular, sonra olayları geliş sırasıyla gönderir
+ *  (kuyruktaki olaylar anonim profile değil tanımlı kullanıcıya yazılsın). */
 function kuyruguBosalt(rybbit: RybbitApi): void {
  const bekleyenler = kuyruk;
+  const kimlik = bekleyenKimlik;
  kuyruk = [];
+  bekleyenKimlik = null;
  zamanlayiciyiDurdur();
+  if (kimlik) {
+    try {
+      rybbit.identify(kimlik[0], kimlik[1]);
+    } catch {
+      // yut
+    }
+  }
  for (const [ad, ozellikler] of bekleyenler) {
    try {
      rybbit.event(ad, ozellikler);
@@ -89,23 +111,29 @@ function kuyruguBosalt(rybbit: RybbitApi): void {
  }
 }

-function kuyrugaEkle(ad: OlayAdi, ozellikler?: Ozellikler): void {
-  if (kuyrukKapali || kuyruk.length >= KUYRUK_SINIRI) return;
-  kuyruk.push([ad, ozellikler]);
+/** Script'i bekleyen yoklamayı başlatır (olay kuyruğu ve kimlik slotu ortak). */
+function zamanlayiciyiBaslat(): void {
  if (zamanlayici !== null) return;
  zamanlayici = setInterval(() => {
    denemeSayisi += 1;
    if (window.rybbit) {
      kuyruguBosalt(window.rybbit);
    } else if (denemeSayisi >= DENEME_SINIRI) {
-      // Script gelmedi: bekleyenleri at, sonraki olaylar eski no-op'a dönsün
+      // Script gelmedi: bekleyenleri at, sonraki çağrılar eski no-op'a dönsün
      kuyruk = [];
+      bekleyenKimlik = null;
      kuyrukKapali = true;
      zamanlayiciyiDurdur();
    }
  }, DENEME_ARALIGI_MS);
 }

+function kuyrugaEkle(ad: OlayAdi, ozellikler?: Ozellikler): void {
+  if (kuyrukKapali || kuyruk.length >= KUYRUK_SINIRI) return;
+  kuyruk.push([ad, ozellikler]);
+  zamanlayiciyiBaslat();
+}
+
 /** Özel olay gönderir. Script henüz yoksa kısa süre kuyrukta bekletir. */
 export function olay(ad: OlayAdi, ozellikler?: Ozellikler): void {
  if (typeof window === "undefined") return;
@@ -114,8 +142,8 @@ export function olay(ad: OlayAdi, ozellikler?: Ozellikler): void {
      kuyrugaEkle(ad, ozellikler);
      return;
    }
-    // Sıra bozulmasın: bekleyen varsa önce onlar gider
-    if (kuyruk.length > 0) kuyruguBosalt(window.rybbit);
+    // Sıra bozulmasın: bekleyen (kimlik ya da olay) varsa önce onlar gider
+    if (kuyruk.length > 0 || bekleyenKimlik) kuyruguBosalt(window.rybbit);
    window.rybbit.event(ad, ozellikler);
  } catch {
    // Analitik hiçbir koşulda kullanıcı akışını bozmaz
@@ -166,6 +194,8 @@ export function siraKovasi(sira: number): string {
 * Giriş yapan kullanıcıyı eşler. İlk çağrıda o cihazdaki önceki anonim
 * olaylar geriye dönük olarak bu kullanıcıya bağlanır (sihirbazı doldurup
 * sonra giriş yapan öğrencinin yolculuğu tek profilde birleşsin diye).
+ * Script henüz yoksa kimlik tek slotta bekler; kuyruk boşaltılırken
+ * olaylardan ÖNCE uygulanır.
 */
 export function kullaniciTanit(
  kullaniciId: string,
@@ -173,15 +203,25 @@ export function kullaniciTanit(
 ): void {
  if (typeof window === "undefined") return;
  try {
-    window.rybbit?.identify(kullaniciId, traits);
+    if (!window.rybbit) {
+      if (kuyrukKapali) return;
+      bekleyenKimlik = [kullaniciId, traits];
+      zamanlayiciyiBaslat();
+      return;
+    }
+    // Doğrudan uygulanır; kuyrukta olay bekliyorsa sonraki boşaltmada bu
+    // kimlikle gider. Eski slot değeri geçersiz kalmasın diye silinir.
+    bekleyenKimlik = null;
+    window.rybbit.identify(kullaniciId, traits);
  } catch {
    // yut
  }
 }

-/** Çıkışta kimliği temizler. */
+/** Çıkışta kimliği temizler (bekleyen kimlik slotu dahil). */
 export function kullaniciTemizle(): void {
  if (typeof window === "undefined") return;
+  bekleyenKimlik = null;
  try {
    window.rybbit?.clearUserId();
  } catch {