eid-salami 1.0.0

package/frontend/src/pages/HomePage.module.css

@@ -0,0 +1,416 @@
+/* ── Hero ─────────────────────────────────────────────────────────────────── */
+.hero {
+  position: relative;
+  min-height: calc(100vh - 68px);
+  background: linear-gradient(160deg, #0a2e22 0%, #0d3b2e 45%, #0f4535 100%);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  gap: 2rem;
+  padding: 4rem clamp(1.5rem, 6vw, 6rem);
+  overflow: hidden;
+}
+
+@media (max-width: 768px) {
+  .hero { grid-template-columns: 1fr; padding: 3rem 1.5rem; }
+  .heroArt { display: none; }
+}
+
+.starfield {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.star {
+  position: absolute;
+  background: var(--gold-pale);
+  border-radius: 50%;
+  opacity: 0;
+  animation: twinkle 3s ease-in-out infinite;
+}
+
+@keyframes twinkle {
+  0%, 100% { opacity: 0; transform: scale(0.5); }
+  50%       { opacity: 0.7; transform: scale(1); }
+}
+
+.heroContent {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+}
+
+.eyebrow {
+  font-family: var(--font-bengali);
+  font-size: 1rem;
+  color: var(--gold-bright);
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  animation: fadeUp 0.6s ease both;
+}
+
+.heroTitle {
+  font-size: clamp(2.8rem, 5vw, 4.5rem);
+  color: var(--cream);
+  font-weight: 900;
+  line-height: 1.08;
+  animation: fadeUp 0.7s ease 0.1s both;
+}
+
+.heroTitle em {
+  font-style: italic;
+  color: var(--gold-bright);
+}
+
+.heroSub {
+  font-family: var(--font-bengali);
+  font-size: 1.1rem;
+  color: rgba(253, 247, 236, 0.75);
+  max-width: 480px;
+  animation: fadeUp 0.7s ease 0.2s both;
+}
+
+.heroCtas {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin-top: 0.5rem;
+  animation: fadeUp 0.7s ease 0.3s both;
+}
+
+.btnPrimary {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-family: var(--font-bengali);
+  font-weight: 700;
+  font-size: 1rem;
+  color: var(--emerald);
+  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
+  padding: 0.85rem 2rem;
+  border-radius: 100px;
+  transition: all 0.2s;
+  box-shadow: 0 4px 20px rgba(200, 153, 26, 0.4);
+}
+
+.btnPrimary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 30px rgba(200, 153, 26, 0.5);
+}
+
+.btnGhost {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--font-bengali);
+  font-size: 1rem;
+  color: var(--gold-pale);
+  border: 1.5px solid rgba(245, 225, 160, 0.4);
+  padding: 0.85rem 1.8rem;
+  border-radius: 100px;
+  transition: all 0.2s;
+}
+
+.btnGhost:hover {
+  background: rgba(245, 225, 160, 0.08);
+  border-color: var(--gold-pale);
+}
+
+.heroStats {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  margin-top: 1rem;
+  animation: fadeUp 0.7s ease 0.4s both;
+}
+
+.stat { display: flex; flex-direction: column; gap: 0.2rem; }
+.statNum {
+  font-family: var(--font-bengali);
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--gold-bright);
+}
+.statLabel {
+  font-size: 0.75rem;
+  color: rgba(245, 225, 160, 0.5);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+.statDivider { width: 1px; height: 36px; background: rgba(200,153,26,0.3); }
+
+/* ── Hero art ─────────────────────────────────────────────────────────────── */
+.heroArt {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 420px;
+}
+
+.moonRing {
+  width: 300px;
+  height: 300px;
+  border-radius: 50%;
+  border: 2px solid rgba(200, 153, 26, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: slowSpin 30s linear infinite;
+  position: relative;
+}
+
+.moonRing::before {
+  content: '';
+  position: absolute;
+  inset: 20px;
+  border-radius: 50%;
+  border: 1px dashed rgba(200,153,26,0.15);
+}
+
+.moonInner {
+  font-size: 7rem;
+  color: var(--gold-bright);
+  filter: drop-shadow(0 0 40px rgba(200,153,26,0.5));
+  animation: moonGlow 4s ease-in-out infinite;
+}
+
+@keyframes moonGlow {
+  0%, 100% { filter: drop-shadow(0 0 30px rgba(200,153,26,0.4)); }
+  50%       { filter: drop-shadow(0 0 60px rgba(200,153,26,0.7)); }
+}
+
+@keyframes slowSpin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+.lantern {
+  position: absolute;
+  bottom: 60px;
+  right: 60px;
+  font-size: 3rem;
+  animation: float 3s ease-in-out infinite;
+}
+
+.stars2 {
+  position: absolute;
+  top: 40px;
+  right: 30px;
+  font-size: 0.8rem;
+  color: var(--gold-bright);
+  letter-spacing: 0.6em;
+  opacity: 0.6;
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50%       { transform: translateY(-12px); }
+}
+
+/* ── How it works ─────────────────────────────────────────────────────────── */
+.howSection {
+  background: var(--cream);
+  padding: 5rem clamp(1.5rem, 6vw, 6rem);
+}
+
+.sectionInner {
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.sectionTitle {
+  font-family: var(--font-bengali);
+  font-size: clamp(1.8rem, 3vw, 2.6rem);
+  color: var(--emerald);
+  text-align: center;
+  font-weight: 700;
+}
+
+.sectionSub {
+  text-align: center;
+  color: var(--text-light);
+  margin-top: 0.5rem;
+  font-size: 1rem;
+}
+
+.steps {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1.5rem;
+  margin-top: 3rem;
+  position: relative;
+}
+
+.steps::before {
+  content: '';
+  position: absolute;
+  top: 38px;
+  left: calc(12.5% + 20px);
+  right: calc(12.5% + 20px);
+  height: 2px;
+  background: linear-gradient(90deg, var(--gold), var(--gold-bright), var(--gold));
+  opacity: 0.3;
+}
+
+@media (max-width: 768px) {
+  .steps { grid-template-columns: 1fr 1fr; }
+  .steps::before { display: none; }
+}
+
+@media (max-width: 480px) {
+  .steps { grid-template-columns: 1fr; }
+}
+
+.step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.7rem;
+  text-align: center;
+  padding: 2rem 1rem;
+  background: var(--white);
+  border-radius: var(--radius);
+  border: 1px solid rgba(200,153,26,0.12);
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.step:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
+}
+
+.stepNum {
+  font-family: var(--font-display);
+  font-size: 0.7rem;
+  font-weight: 700;
+  color: var(--white);
+  background: var(--gold);
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.stepEmoji { font-size: 2.2rem; }
+
+.stepTitle {
+  font-family: var(--font-bengali);
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--emerald);
+}
+
+.stepSub {
+  font-size: 0.82rem;
+  color: var(--text-light);
+}
+
+/* ── Packages ─────────────────────────────────────────────────────────────── */
+.packagesSection {
+  background: linear-gradient(180deg, #f5f0e8 0%, var(--cream) 100%);
+  padding: 5rem clamp(1.5rem, 6vw, 6rem);
+}
+
+.packagesGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 1.2rem;
+  margin-top: 3rem;
+}
+
+.pkgCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 1.8rem 1rem;
+  background: var(--white);
+  border: 2px solid transparent;
+  border-radius: var(--radius);
+  text-decoration: none;
+  transition: all 0.2s;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
+}
+
+.pkgCard:hover {
+  border-color: var(--gold-bright);
+  transform: translateY(-4px);
+  box-shadow: 0 12px 40px rgba(200,153,26,0.2);
+}
+
+.pkgEmoji { font-size: 2.2rem; }
+
+.pkgName {
+  font-family: var(--font-bengali);
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: var(--emerald);
+  text-align: center;
+}
+
+.pkgAmount {
+  font-family: var(--font-display);
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--gold);
+}
+
+.pkgBtn {
+  font-size: 0.78rem;
+  font-weight: 500;
+  color: var(--emerald-light);
+  opacity: 0.7;
+}
+
+/* ── CTA Banner ───────────────────────────────────────────────────────────── */
+.ctaBanner {
+  background: linear-gradient(135deg, var(--emerald) 0%, #0f4535 100%);
+  padding: 5rem clamp(1.5rem, 6vw, 6rem);
+  position: relative;
+  overflow: hidden;
+}
+
+.ctaBanner::before {
+  content: '☽';
+  position: absolute;
+  right: 8%;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 12rem;
+  color: rgba(200,153,26,0.06);
+  pointer-events: none;
+}
+
+.ctaInner {
+  max-width: 600px;
+  margin: 0 auto;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.ctaInner h2 {
+  font-family: var(--font-bengali);
+  font-size: clamp(1.8rem, 3vw, 2.5rem);
+  color: var(--cream);
+  font-weight: 700;
+}
+
+.ctaInner p {
+  font-family: var(--font-bengali);
+  color: rgba(245,225,160,0.7);
+  font-size: 1rem;
+}
+
+/* ── Animations ───────────────────────────────────────────────────────────── */
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(24px); }
+  to   { opacity: 1; transform: translateY(0); }
+}

package/frontend/src/pages/HomePage.tsx

@@ -0,0 +1,146 @@
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { getPackages, type Package } from '../api/client'
+import styles from './HomePage.module.css'
+
+const STARS = Array.from({ length: 28 }, (_, i) => ({
+  id: i,
+  x: Math.random() * 100,
+  y: Math.random() * 60,
+  size: 2 + Math.random() * 3,
+  delay: Math.random() * 3,
+}))
+
+const STEPS = [
+  { emoji: '🎁', title: 'প্যাকেজ বেছে নিন', sub: 'Choose a salami amount' },
+  { emoji: '✍️', title: 'তথ্য পূরণ করুন', sub: 'Fill sender & recipient details' },
+  { emoji: '💚', title: 'bKash-এ পেমেন্ট', sub: 'Pay securely via bKash' },
+  { emoji: '🌙', title: 'সালামি পৌঁছে যাবে', sub: 'Salami delivered instantly' },
+]
+
+export default function HomePage() {
+  const [packages, setPackages] = useState<Package[]>([])
+
+  useEffect(() => {
+    getPackages().then(setPackages).catch(() => {})
+  }, [])
+
+  return (
+    <main>
+      {/* ── Hero ─────────────────────────────────────────────────────────── */}
+      <section className={styles.hero}>
+        <div className={styles.starfield}>
+          {STARS.map(s => (
+            <span
+              key={s.id}
+              className={styles.star}
+              style={{
+                left: `${s.x}%`,
+                top: `${s.y}%`,
+                width: s.size,
+                height: s.size,
+                animationDelay: `${s.delay}s`,
+              }}
+            />
+          ))}
+        </div>
+
+        <div className={styles.heroContent}>
+          <p className={styles.eyebrow}>ঈদ মোবারক ✨</p>
+          <h1 className={styles.heroTitle}>
+            Send Eid Salami<br />
+            <em>with Love & Joy</em>
+          </h1>
+          <p className={styles.heroSub}>
+            প্রিয়জনকে ঈদের সালামি পাঠান — সহজে, দ্রুত, bKash-এর মাধ্যমে।
+          </p>
+
+          <div className={styles.heroCtas}>
+            <Link to="/send" className={styles.btnPrimary}>
+              এখনই সালামি পাঠান →
+            </Link>
+            <a href="#how" className={styles.btnGhost}>
+              কীভাবে কাজ করে?
+            </a>
+          </div>
+
+          <div className={styles.heroStats}>
+            <div className={styles.stat}>
+              <span className={styles.statNum}>৳100</span>
+              <span className={styles.statLabel}>থেকে শুরু</span>
+            </div>
+            <div className={styles.statDivider} />
+            <div className={styles.stat}>
+              <span className={styles.statNum}>bKash</span>
+              <span className={styles.statLabel}>পেমেন্ট</span>
+            </div>
+            <div className={styles.statDivider} />
+            <div className={styles.stat}>
+              <span className={styles.statNum}>তাৎক্ষণিক</span>
+              <span className={styles.statLabel}>ডেলিভারি</span>
+            </div>
+          </div>
+        </div>
+
+        <div className={styles.heroArt}>
+          <div className={styles.moonRing}>
+            <div className={styles.moonInner}>☽</div>
+          </div>
+          <div className={styles.lantern}>🪔</div>
+          <div className={styles.stars2}>✦ ✦ ✦</div>
+        </div>
+      </section>
+
+      {/* ── How it works ─────────────────────────────────────────────────── */}
+      <section id="how" className={styles.howSection}>
+        <div className={styles.sectionInner}>
+          <h2 className={styles.sectionTitle}>কীভাবে কাজ করে</h2>
+          <p className={styles.sectionSub}>মাত্র ৪টি সহজ ধাপে সালামি পাঠান</p>
+
+          <div className={styles.steps}>
+            {STEPS.map((step, i) => (
+              <div key={i} className={styles.step}>
+                <div className={styles.stepNum}>{i + 1}</div>
+                <div className={styles.stepEmoji}>{step.emoji}</div>
+                <h3 className={styles.stepTitle}>{step.title}</h3>
+                <p className={styles.stepSub}>{step.sub}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── Packages preview ─────────────────────────────────────────────── */}
+      {packages.length > 0 && (
+        <section className={styles.packagesSection}>
+          <div className={styles.sectionInner}>
+            <h2 className={styles.sectionTitle}>সালামি প্যাকেজ</h2>
+            <p className={styles.sectionSub}>Choose the perfect amount for your loved one</p>
+
+            <div className={styles.packagesGrid}>
+              {packages.map(pkg => (
+                <Link to={`/send?package=${pkg.id}`} key={pkg.id} className={styles.pkgCard}>
+                  <span className={styles.pkgEmoji}>{pkg.emoji}</span>
+                  <span className={styles.pkgName}>{pkg.name}</span>
+                  <span className={styles.pkgAmount}>৳{pkg.amount.toLocaleString()}</span>
+                  <span className={styles.pkgBtn}>পাঠান →</span>
+                </Link>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* ── CTA Banner ───────────────────────────────────────────────────── */}
+      <section className={styles.ctaBanner}>
+        <div className={styles.ctaInner}>
+          <h2>আজই শুরু করুন 🌙</h2>
+          <p>ঈদের আনন্দ ভাগ করে নিন প্রিয়জনের সাথে</p>
+          <Link to="/send" className={styles.btnPrimary}>
+            সালামি পাঠান
+          </Link>
+        </div>
+      </section>
+    </main>
+  )
+}

package/frontend/src/pages/OrderPage.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { getPackages, createOrder, submitTrxID } from '../api/client';
+import PackageCard from '../components/PackageCard';
+import styles from './OrderPage.module.css';
+const INITIAL = {
+    senderName: '', senderPhone: '', senderMessage: '',
+    packageId: '',
+};
+export default function OrderPage() {
+    const [searchParams] = useSearchParams();
+    const [step, setStep] = useState('package');
+    const [packages, setPackages] = useState([]);
+    const [form, setForm] = useState({ ...INITIAL, packageId: searchParams.get('package') ?? '' });
+    const [orderResult, setOrderResult] = useState(null);
+    const [trxID, setTrxID] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    const [copied, setCopied] = useState(false);
+    const [pkgsLoading, setPkgsLoading] = useState(true);
+    useEffect(() => {
+        getPackages()
+            .then(pkgs => {
+            setPackages(pkgs);
+            if (form.packageId && pkgs.some(p => p.id === form.packageId))
+                setStep('details');
+        })
+            .catch(() => setError('প্যাকেজ লোড হয়নি।'))
+            .finally(() => setPkgsLoading(false));
+    }, []);
+    const selectedPkg = packages.find(p => p.id === form.packageId);
+    const set = (f) => (e) => setForm(prev => ({ ...prev, [f]: e.target.value }));
+    const validateDetails = () => {
+        if (!form.senderName.trim())
+            return 'আপনার নাম লিখুন';
+        if (!/^01[3-9]\d{8}$/.test(form.senderPhone))
+            return 'বৈধ bKash নম্বর দিন (01XXXXXXXXX)';
+        return '';
+    };
+    // Step 2 → 3: Create order in backend, get bKash number to send to
+    const handleCreateOrder = async () => {
+        setError('');
+        setLoading(true);
+        try {
+            const result = await createOrder({
+                senderName: form.senderName,
+                senderPhone: form.senderPhone,
+                senderMessage: form.senderMessage,
+                packageId: form.packageId,
+            });
+            setOrderResult(result);
+            setStep('pay');
+        }
+        catch (err) {
+            setError(err?.response?.data?.error ?? 'অর্ডার তৈরিতে সমস্যা হয়েছে।');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    // Step 3 → 4: Submit TrxID after user has sent the money
+    const handleSubmitTrxID = async () => {
+        if (!trxID.trim()) {
+            setError('TrxID লিখুন');
+            return;
+        }
+        setError('');
+        setLoading(true);
+        try {
+            await submitTrxID(orderResult.orderId, trxID.trim());
+            setStep('submitted');
+        }
+        catch (err) {
+            setError(err?.response?.data?.error ?? 'TrxID জমা দিতে সমস্যা হয়েছে।');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const copyNumber = () => {
+        navigator.clipboard.writeText(orderResult?.bkashNumber ?? '');
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+    const STEP_LABELS = ['প্যাকেজ', 'তথ্য', 'পেমেন্ট', 'সম্পন্ন'];
+    const STEP_KEYS = ['package', 'details', 'pay', 'submitted'];
+    const stepIdx = STEP_KEYS.indexOf(step);
+    return (_jsx("main", { className: styles.page, children: _jsxs("div", { className: styles.container, children: [_jsx("h1", { className: styles.title, children: "\u0988\u09A6 \u09B8\u09BE\u09B2\u09BE\u09AE\u09BF \u09AA\u09BE\u09A0\u09BE\u09A8 \uD83C\uDF19" }), _jsx("div", { className: styles.progress, children: STEP_LABELS.map((label, i) => (_jsxs("div", { className: `${styles.progressItem} ${i <= stepIdx ? styles.active : ''}`, children: [_jsx("div", { className: styles.progressDot, children: i < stepIdx ? '✓' : i + 1 }), _jsx("span", { className: styles.progressLabel, children: label }), i < 3 && _jsx("div", { className: `${styles.progressLine} ${i < stepIdx ? styles.lineDone : ''}` })] }, label))) }), step === 'package' && (_jsxs("div", { className: styles.stepPanel, children: [_jsx("h2", { className: styles.stepHeading, children: "\u09AA\u09CD\u09AF\u09BE\u0995\u09C7\u099C \u09AC\u09C7\u099B\u09C7 \u09A8\u09BF\u09A8" }), pkgsLoading ? (_jsx("div", { className: styles.loader, children: "\u09B2\u09CB\u09A1 \u09B9\u099A\u09CD\u099B\u09C7\u2026" })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.packagesGrid, children: packages.map(pkg => (_jsx(PackageCard, { pkg: pkg, selected: form.packageId === pkg.id, onSelect: id => setForm(prev => ({ ...prev, packageId: id })) }, pkg.id))) }), _jsx("button", { className: styles.btnNext, disabled: !form.packageId, onClick: () => setStep('details'), children: "\u09AA\u09B0\u09AC\u09B0\u09CD\u09A4\u09C0 \u2192" })] }))] })), step === 'details' && (_jsxs("div", { className: styles.stepPanel, children: [_jsx("h2", { className: styles.stepHeading, children: "\u0986\u09AA\u09A8\u09BE\u09B0 \u09A4\u09A5\u09CD\u09AF" }), _jsx("div", { className: styles.formGrid, children: _jsxs("div", { className: styles.formSection, children: [_jsx("h3", { className: styles.formSectionTitle, children: "\uD83D\uDE4B \u0986\u09AA\u09A8\u09BE\u09B0 \u09A4\u09A5\u09CD\u09AF" }), _jsxs("label", { className: styles.label, children: ["\u0986\u09AA\u09A8\u09BE\u09B0 \u09A8\u09BE\u09AE *", _jsx("input", { className: styles.input, value: form.senderName, onChange: set('senderName'), placeholder: "\u0986\u09AA\u09A8\u09BE\u09B0 \u09A8\u09BE\u09AE" })] }), _jsxs("label", { className: styles.label, children: ["\u0986\u09AA\u09A8\u09BE\u09B0 bKash \u09A8\u09AE\u09CD\u09AC\u09B0 *", _jsx("input", { className: styles.input, value: form.senderPhone, onChange: set('senderPhone'), placeholder: "01XXXXXXXXX", maxLength: 11 })] }), _jsxs("label", { className: styles.label, children: ["\u09B6\u09C1\u09AD\u09C7\u099A\u09CD\u099B\u09BE \u09AC\u09BE\u09B0\u09CD\u09A4\u09BE (\u0990\u099A\u09CD\u099B\u09BF\u0995)", _jsx("textarea", { className: styles.textarea, value: form.senderMessage, onChange: set('senderMessage'), placeholder: "\u0988\u09A6 \u09AE\u09CB\u09AC\u09BE\u09B0\u0995! \u09A4\u09CB\u09AE\u09BE\u0995\u09C7 \u09AD\u09BE\u09B2\u09CB\u09AC\u09BE\u09B8\u09BF\u2026", rows: 3 })] })] }) }), error && _jsx("p", { className: styles.error, children: error }), _jsxs("div", { className: styles.navBtns, children: [_jsx("button", { className: styles.btnBack, onClick: () => setStep('package'), children: "\u2190 \u09AA\u09C7\u099B\u09A8\u09C7" }), _jsx("button", { className: styles.btnNext, disabled: loading, onClick: () => {
+                                        const err = validateDetails();
+                                        if (err) {
+                                            setError(err);
+                                            return;
+                                        }
+                                        setError('');
+                                        handleCreateOrder();
+                                    }, children: loading ? 'অর্ডার তৈরি হচ্ছে…' : 'পরবর্তী →' })] })] })), step === 'pay' && orderResult && (_jsxs("div", { className: styles.stepPanel, children: [_jsx("h2", { className: styles.stepHeading, children: "\u09AA\u09C7\u09AE\u09C7\u09A8\u09CD\u099F \u09B8\u09AE\u09CD\u09AA\u09A8\u09CD\u09A8 \u0995\u09B0\u09C1\u09A8" }), _jsxs("div", { className: styles.paymentInfo, children: [_jsxs("p", { className: styles.payText, children: ["\u09A8\u09BF\u099A\u09C7\u09B0 \u09A8\u09AE\u09CD\u09AC\u09B0\u09C7 ", _jsxs("strong", { children: ["\u09F3", orderResult.amount] }), " \u09B8\u09C7\u09A8\u09CD\u09A1 \u09AE\u09BE\u09A8\u09BF \u0995\u09B0\u09C1\u09A8:"] }), _jsxs("div", { className: styles.copyBox, children: [_jsx("code", { className: styles.bkashNum, children: orderResult.bkashNumber }), _jsx("button", { className: styles.copyBtn, onClick: copyNumber, children: copied ? 'কপি হয়েছে!' : 'কপি করুন' })] }), _jsxs("p", { className: styles.refText, children: ["\u09B0\u09C7\u09AB\u09BE\u09B0\u09C7\u09A8\u09CD\u09B8\u09C7 \u09A6\u09BF\u09A8: ", _jsx("strong", { children: orderResult.invoiceRef })] })] }), _jsxs("div", { className: styles.trxInputSection, children: [_jsx("h3", { className: styles.formSectionTitle, children: "\u09AA\u09C7\u09AE\u09C7\u09A8\u09CD\u099F \u0995\u09B0\u09BE\u09B0 \u09AA\u09B0 TrxID \u09A6\u09BF\u09A8:" }), _jsx("input", { className: styles.input, value: trxID, onChange: e => setTrxID(e.target.value), placeholder: "Ex: AB12CD34EF" }), error && _jsx("p", { className: styles.error, children: error }), _jsx("button", { className: styles.btnSubmit, disabled: loading, onClick: handleSubmitTrxID, children: loading ? 'যাচাই হচ্ছে…' : 'সালামি পাঠান 🚀' })] })] })), step === 'submitted' && (_jsxs("div", { className: `${styles.stepPanel} ${styles.center}`, children: [_jsx("div", { className: styles.successIcon, children: "\uD83C\uDF89" }), _jsx("h2", { className: styles.successTitle, children: "\u09B8\u09BE\u09B2\u09BE\u09AE\u09BF \u09B8\u09AB\u09B2\u09AD\u09BE\u09AC\u09C7 \u09AA\u09BE\u09A0\u09BE\u09A8\u09CB \u09B9\u09DF\u09C7\u099B\u09C7!" }), _jsx("p", { className: styles.successText, children: "\u0986\u09AA\u09A8\u09BE\u09B0 \u09AA\u09C7\u09AE\u09C7\u09A8\u09CD\u099F \u09AF\u09BE\u099A\u09BE\u0987 \u0995\u09B0\u09BE \u09B9\u099A\u09CD\u099B\u09C7\u0964 \u0995\u09BF\u099B\u09C1\u0995\u09CD\u09B7\u09A3\u09C7\u09B0 \u09AE\u09A7\u09CD\u09AF\u09C7\u0987 \u09AA\u09CD\u09B0\u09BE\u09AA\u0995 \u09B8\u09BE\u09B2\u09BE\u09AE\u09BF \u09AA\u09C7\u09DF\u09C7 \u09AF\u09BE\u09AC\u09C7\u09A8 \u0987\u09A8\u09B6\u09BE\u0986\u09B2\u09CD\u09B2\u09BE\u09B9\u0964" }), _jsx("button", { className: styles.btnHome, onClick: () => window.location.href = '/', children: "\u0986\u09AC\u09BE\u09B0 \u09AA\u09BE\u09A0\u09BE\u09A8" })] }))] }) }));
+}