Fix subscription modal dismissal persistence

diagnose-renewal.mjs

@@ -0,0 +1,53 @@
+import pkg from '@prisma/client';
+import { PrismaPg } from '@prisma/adapter-pg';
+const { PrismaClient } = pkg;
+
+const adapter = new PrismaPg({ connectionString: process.env.DATABASE_URL });
+const prisma = new PrismaClient({ adapter });
+
+async function main() {
+  const user = await prisma.user.findFirst({ where: { email: 'shisir4@gmail.com' } });
+  if (!user) { console.log('User not found'); return; }
+  console.log('User ID:', user.id);
+
+  const membership = await prisma.membership.findFirst({
+    where: { userId: user.id, role: { in: ['OWNER', 'ADMIN'] } },
+    include: { organization: { include: { store: { select: { id: true, name: true } } } } }
+  });
+  if (!membership?.organization?.store) { console.log('No store found'); return; }
+  const storeId = membership.organization.store.id;
+  console.log('Store:', membership.organization.store.name, 'ID:', storeId);
+
+  const sub = await prisma.subscription.findUnique({
+    where: { storeId },
+    include: { plan: true }
+  });
+  if (!sub) { console.log('No subscription'); return; }
+  console.log('\n=== SUBSCRIPTION ===');
+  console.log('Plan:', sub.plan.name, 'ID:', sub.plan.id);
+  console.log('Plan isPublic:', sub.plan.isPublic, 'isActive:', sub.plan.isActive);
+  console.log('Status:', sub.status);
+  console.log('PeriodStart:', sub.currentPeriodStart);
+  console.log('PeriodEnd:', sub.currentPeriodEnd);
+  console.log('billingCycle:', sub.billingCycle);
+
+  const plans = await prisma.subscriptionPlanModel.findMany({ where: { isPublic: true, isActive: true, deletedAt: null } });
+  console.log('\n=== PUBLIC PLANS ===');
+  plans.forEach(p => console.log(' -', p.name, 'id=' + p.id));
+  const found = plans.find(p => p.id === sub.planId);
+  console.log('\nCurrent plan in public list?', !!found);
+
+  const payments = await prisma.subPayment.findMany({
+    where: { subscriptionId: sub.id },
+    orderBy: { createdAt: 'desc' },
+    take: 5
+  });
+  console.log('\n=== RECENT PAYMENTS ===');
+  payments.forEach(p => {
+    let meta = {};
+    try { meta = JSON.parse(p.gatewayResponse); } catch {}
+    console.log(' -', p.status, '| tran:', p.gatewayTransactionId, '| created:', p.createdAt, '| planId:', meta.targetPlanId, '| isRenewal:', meta.isRenewal);
+  });
+}
+
+main().then(() => prisma.$disconnect()).catch(e => { console.error(e); prisma.$disconnect(); });

e2e/auth.setup.ts

@@ -28,8 +28,8 @@ setup('authenticate', async ({ page }) => {
   }
 
   // Fill in credentials
-  await page.locator('#email').fill('owner@example.com');
-  await page.locator('#password').fill('Test123!@#');
+  await page.locator('#email').fill('shisir4@gmail.com');
+  await page.locator('#password').fill('susmoy14');
 
   // Submit form
   await page.locator('button[type="submit"]').filter({ hasText: /Sign In/i }).click();

e2e/subscription-renew.spec.ts

@@ -0,0 +1,301 @@
+/**
+ * Subscription Renewal E2E Tests
+ *
+ * Tests the full renewal flow:
+ *   1. Before payment → "Renew Plan" button visible
+ *   2. Click renew → API creates PENDING payment → SSLCommerz checkout URL
+ *   3. Simulate SSLCommerz success callback with real tran_id
+ *   4. Browser navigates through /payment/success redirect chain
+ *   5. After payment → "Renew Plan" button STILL visible (not "Select Plan")
+ */
+import { test, expect, type Page } from '@playwright/test';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** Wait for PlanSelector to finish loading (skeleton → rendered cards) */
+async function waitForPlansLoaded(page: Page) {
+  await page
+    .waitForSelector('[class*="animate-pulse"]', {
+      state: 'detached',
+      timeout: 15000,
+    })
+    .catch(() => {});
+  await page.waitForTimeout(2000);
+}
+
+/** Get all plan buttons via data-testid */
+async function getPlanButtons(page: Page) {
+  return page.evaluate(() => {
+    const btns = Array.from(
+      document.querySelectorAll<HTMLButtonElement>(
+        '[data-testid="plan-action-btn"]'
+      )
+    );
+    return btns.map((btn) => ({
+      text: btn.textContent?.trim() ?? '',
+      disabled: btn.disabled,
+      planId: btn.dataset.planId ?? '',
+      isCurrent: btn.dataset.isCurrent === 'true',
+    }));
+  });
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Tests
+// ─────────────────────────────────────────────────────────────────────────────
+
+test.describe('Subscription Renewal Flow', () => {
+  // ── TEST 1: Before any payment, current plan → "Renew Plan" ───────────────
+  test('current plan shows Renew Plan button', async ({ page }) => {
+    await page.goto('/dashboard/subscriptions');
+    await page.waitForLoadState('networkidle');
+    await waitForPlansLoaded(page);
+
+    const buttons = await getPlanButtons(page);
+    console.log('📋 Plan buttons:', JSON.stringify(buttons, null, 2));
+
+    const currentBtn = buttons.find((b) => b.isCurrent);
+    expect(currentBtn, 'A current-plan button must exist').toBeTruthy();
+    expect(currentBtn!.text).toMatch(/Renew Plan|Renew Now/i);
+    expect(currentBtn!.disabled).toBe(false);
+
+    // Non-current buttons must say "Select Plan"
+    for (const btn of buttons.filter((b) => !b.isCurrent)) {
+      expect(btn.text).toBe('Select Plan');
+    }
+
+    await page.screenshot({
+      path: 'test-results/01-before-payment.png',
+      fullPage: true,
+    });
+  });
+
+  // ── TEST 2: Full E2E — renew → callback → verify ─────────────────────────
+  test('after SSLCommerz callback, current plan still shows Renew Plan', async ({
+    page,
+  }) => {
+    await page.goto('/dashboard/subscriptions');
+    await page.waitForLoadState('networkidle');
+    await waitForPlansLoaded(page);
+
+    // ── Step A: Capture state BEFORE ────────────────────────────────────────
+    const beforeApi = await page.evaluate(async () => {
+      const r = await fetch('/api/subscriptions/current?t=' + Date.now());
+      return r.json();
+    });
+    const beforePlanId = beforeApi?.data?.subscription?.planId ?? null;
+    const beforePeriodEnd =
+      beforeApi?.data?.subscription?.currentPeriodEnd ?? null;
+    console.log('📊 BEFORE:', {
+      status: beforeApi?.data?.status,
+      planId: beforePlanId,
+      periodEnd: beforePeriodEnd,
+    });
+
+    // ── Step B: Call renew API (this creates a PENDING SubPayment) ──────────
+    const renewResp = await page.evaluate(async () => {
+      const r = await fetch('/api/subscriptions/renew', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ billingCycle: 'MONTHLY', gateway: 'sslcommerz' }),
+      });
+      return { status: r.status, body: await r.json() };
+    });
+    expect(renewResp.status, 'Renew API must return 200').toBe(200);
+
+    const transactionId: string | undefined = renewResp.body?.transactionId;
+    console.log('🔑 Transaction ID:', transactionId);
+    expect(transactionId, 'Renew API must return transactionId').toBeTruthy();
+
+    // ── Step C: Simulate SSLCommerz callback via fetch ──────────────────────
+    const callbackResult = await page.evaluate(
+      async (tranId: string) => {
+        const r = await fetch('/api/subscriptions/sslcommerz/success', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+          },
+          body: new URLSearchParams({
+            status: 'VALID',
+            tran_id: tranId,
+            val_id: 'SANDBOX_VAL_' + Date.now(),
+            amount: '100.00',
+            currency_amount: '100.00',
+            store_amount: '100.00',
+            currency: 'BDT',
+            bank_tran_id: 'SANDBOX_BANK_' + Date.now(),
+            card_type: 'VISA-Dutch Bangla',
+            card_brand: 'VISA',
+          }).toString(),
+          redirect: 'manual',
+        });
+        return { status: r.status, type: r.type };
+      },
+      transactionId!
+    );
+    console.log('✅ Callback result:', JSON.stringify(callbackResult));
+
+    // ── Step D: Verify subscription was updated ─────────────────────────────
+    const afterApi = await page.evaluate(async () => {
+      const r = await fetch('/api/subscriptions/current?t=' + Date.now());
+      return r.json();
+    });
+    const afterPlanId = afterApi?.data?.subscription?.planId ?? null;
+    const afterPeriodEnd =
+      afterApi?.data?.subscription?.currentPeriodEnd ?? null;
+    console.log('📊 AFTER callback:', {
+      status: afterApi?.data?.status,
+      planId: afterPlanId,
+      periodEnd: afterPeriodEnd,
+    });
+
+    // Plan ID must NOT change (renewal = same plan)
+    expect(afterPlanId, 'planId must be preserved').toBe(beforePlanId);
+
+    // Period end must be extended
+    if (beforePeriodEnd && afterPeriodEnd) {
+      expect(
+        new Date(afterPeriodEnd).getTime(),
+        'Period end must extend'
+      ).toBeGreaterThan(new Date(beforePeriodEnd).getTime());
+    }
+
+    // ── Step E: Navigate like SSLCommerz redirect → payment success → subs ──
+    // This is the REAL redirect chain the user would experience
+    await page.goto('/dashboard/subscriptions?renewed=true');
+    await page.waitForLoadState('networkidle');
+    await waitForPlansLoaded(page);
+
+    const buttonsAfter = await getPlanButtons(page);
+    console.log(
+      '📋 Buttons AFTER:',
+      JSON.stringify(buttonsAfter, null, 2)
+    );
+
+    await page.screenshot({
+      path: 'test-results/02-after-callback.png',
+      fullPage: true,
+    });
+
+    // CRITICAL: Current plan must say "Renew Plan"
+    const currentBtn = buttonsAfter.find((b) => b.isCurrent);
+    expect(currentBtn, 'Current plan button exists').toBeTruthy();
+    expect(currentBtn!.text).toMatch(/Renew Plan|Renew Now/i);
+  });
+
+  // ── TEST 3: Browser redirect flow (like real SSLCommerz) ──────────────────
+  test('browser redirect through /payment/success preserves button state', async ({
+    page,
+  }) => {
+    // This test simulates what the browser does AFTER SSLCommerz:
+    // 1. Browser GETs /payment/success?txn=...&renewed=true (our redirect)
+    // 2. Payment success page shows countdown
+    // 3. Client-side router.push to /dashboard/subscriptions?renewed=true
+    // 4. PlanSelector renders with correct buttons
+
+    // First, verify the payment success page works
+    await page.goto('/payment/success?txn=TEST_TXN&renewed=true');
+    await page.waitForLoadState('networkidle');
+
+    // Wait for the payment success page to show
+    const successTitle = page.getByRole('heading', {
+      name: /Payment Successful/i,
+    });
+    const hasSuccessPage = await successTitle
+      .isVisible({ timeout: 5000 })
+      .catch(() => false);
+    console.log('🎉 Payment success page visible:', hasSuccessPage);
+
+    if (hasSuccessPage) {
+      // Click "Go to Billing Now" to skip countdown
+      const goToBillingBtn = page.getByRole('button', {
+        name: /Go to Billing|Go to Subscriptions/i,
+      });
+      if (await goToBillingBtn.isVisible({ timeout: 3000 }).catch(() => false)) {
+        await goToBillingBtn.click();
+      } else {
+        // Wait for auto-redirect (3s countdown)
+        await page.waitForURL(/dashboard\/subscriptions/, {
+          timeout: 10000,
+        });
+      }
+    } else {
+      // Maybe session expired or page didn't render
+      // Just navigate directly
+      console.log('⚠️ Payment success page not shown, navigating directly');
+      await page.goto('/dashboard/subscriptions?renewed=true');
+    }
+
+    await page.waitForLoadState('networkidle');
+    await waitForPlansLoaded(page);
+
+    const buttons = await getPlanButtons(page);
+    console.log('📋 Buttons after redirect chain:', JSON.stringify(buttons, null, 2));
+
+    await page.screenshot({
+      path: 'test-results/03-after-redirect-chain.png',
+      fullPage: true,
+    });
+
+    const currentBtn = buttons.find((b) => b.isCurrent);
+    expect(currentBtn, 'Current plan button exists after redirect').toBeTruthy();
+    expect(
+      currentBtn!.text,
+      'Button shows Renew Plan after payment success redirect'
+    ).toMatch(/Renew Plan|Renew Now/i);
+  });
+
+  // ── TEST 4: ?renewed=true shows toast ─────────────────────────────────────
+  test('renewed=true param shows toast and correct buttons', async ({
+    page,
+  }) => {
+    await page.goto('/dashboard/subscriptions?renewed=true');
+    await page.waitForLoadState('networkidle');
+    await waitForPlansLoaded(page);
+
+    // Check toast
+    const toastEl = page
+      .locator('[data-sonner-toast]')
+      .filter({ hasText: /renewed|success/i });
+    const toastVisible = await toastEl
+      .isVisible({ timeout: 5000 })
+      .catch(() => false);
+    console.log('🎉 Toast visible:', toastVisible);
+
+    const buttons = await getPlanButtons(page);
+    console.log('📋 Buttons:', JSON.stringify(buttons, null, 2));
+
+    const currentBtn = buttons.find((b) => b.isCurrent);
+    expect(currentBtn, 'Current plan must exist').toBeTruthy();
+    expect(currentBtn!.text).toMatch(/Renew Plan|Renew Now/i);
+  });
+
+  // ── TEST 5: API contract ──────────────────────────────────────────────────
+  test('API /current returns planId for PlanSelector', async ({ page }) => {
+    await page.goto('/dashboard');
+    await page.waitForLoadState('networkidle');
+
+    const result = await page.evaluate(async () => {
+      const r = await fetch('/api/subscriptions/current?t=' + Date.now(), {
+        headers: { 'Cache-Control': 'no-cache' },
+      });
+      return r.json();
+    });
+
+    console.log('📊 API:', JSON.stringify({
+      status: result.data?.status,
+      planId: result.data?.subscription?.planId,
+      periodEnd: result.data?.subscription?.currentPeriodEnd,
+      remainingDays: result.data?.remainingDays,
+    }, null, 2));
+
+    expect(result.data, 'data must exist').toBeTruthy();
+    expect(result.data.status, 'status must be set').toBeTruthy();
+    expect(
+      result.data.subscription?.planId,
+      'planId is REQUIRED for PlanSelector to match current plan'
+    ).toBeTruthy();
+  });
+});