src/app/router.tsx

@@ -1,11 +1,10 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import { AppLayout } from './AppLayout'
-// import { CheckoutPage } from '../pages/CheckoutPage'
+import { CheckoutPage } from '../pages/CheckoutPage'
 import { PaymentStatusPage } from '../pages/PaymentStatusPage'
 import { PaymentHistoryPage } from '../pages/PaymentHistoryPage'
 import { NotFoundPage } from '../pages/NotFoundPage'
-// import { DemoStorePage } from '../pages/DemoStorePage'
-import { InitPage } from '../pages/InitialPage'
+import { DemoStorePage } from '../pages/DemoStorePage'
 import { PayPage } from '../pages/PayPage'
 
 const router = createBrowserRouter([
@@ -14,8 +13,8 @@ const router = createBrowserRouter([
     element: <AppLayout />,
     errorElement: <div role="alert">Terjadi kesalahan. Coba muat ulang.</div>,
     children: [
-      { index: true, element: <InitPage /> },
-      // { path: 'checkout', element: <CheckoutPage /> },
+      { index: true, element: <DemoStorePage /> },
+      { path: 'checkout', element: <CheckoutPage /> },
       { path: 'pay/:token', element: <PayPage /> },
       { path: 'payments/:orderId/status', element: <PaymentStatusPage /> },
       { path: 'history', element: <PaymentHistoryPage /> },

src/features/payments/components/PaymentLogos.tsx

@@ -103,7 +103,7 @@ export function CStoreLogosRow({ compact = false, size }: { compact?: boolean; s
   return (
     <div className="flex items-center gap-2">
       <LogoAlfamart compact={compact} size={size} />
-      {/* <LogoIndomaret compact={compact} size={size} /> */}
+      <LogoIndomaret compact={compact} size={size} />
     </div>
   )
 }

src/features/payments/components/PaymentSheet.tsx

@@ -64,21 +64,22 @@ export function PaymentSheet({ merchantName = 'Simaya', orderId, amount, expireA
             </button>
           </div>
         </div>
-
+        {/* Amount panel */}
         {expanded && (
           <div className="p-4 border-b border-black/10 flex items-start justify-between">
             <div>
-              <div className="text-xs text-black">Total</div>
+              <div className="text-xs text-black/60">Total</div>
               <div className="text-xl font-semibold">{formatCurrencyIDR(amount)}</div>
               <div className="text-xs text-black/60">Order ID #{orderId}</div>
             </div>
           </div>
         )}
-
+        {/* Body */}
         <div className="p-4">
           {children}
           <TrustStrip location="sheet" />
         </div>
+        {/* Sticky CTA (mobile-friendly) */}
         {showStatusCTA && (
           <div className="sticky bottom-0 bg-white/95 backdrop-blur border-t border-black/10 p-3 pb-[env(safe-area-inset-bottom)]">
             <Link

src/features/payments/lib/navigation.ts

@@ -4,7 +4,7 @@ export function usePaymentNavigation() {
   const navigate = useNavigate()
   return {
     toCheckout() {
-      window.location.assign('https://erpskrip.id/pembayaran-pelanggan')
+      navigate('/checkout')
     },
     toStatus(orderId: string, method?: string) {
       const qs = method ? `?m=${encodeURIComponent(method)}` : ''

src/main.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './styles/globals.css'
-
+// Force light theme in case hosting injects a global 'dark' class
 (() => {
   const html = document.documentElement
   try {
@@ -9,9 +9,11 @@ import './styles/globals.css'
       html.classList.remove('dark')
     }
     document.body.classList.remove('dark')
+    // Hint browsers to prefer light color scheme
     html.style.colorScheme = 'light'
     html.setAttribute('data-theme', 'light')
   } catch {
+    // noop
   }
 })()
 import { AppRouter } from './app/router'

src/pages/InitialPage.tsx

@@ -1,13 +0,0 @@
-export function InitPage() {
-    return (
-        <div className="fixed inset-0 bg-white overflow-hidden flex items-center justify-center p-6">
-            <div className="flex items-center gap-3">
-                <img src="/simaya.png" alt="Simaya" className="h-12 w-12 md:h-16 md:w-16" />
-                <div className="text-black">
-                    <div className="text-xl font-semibold leading-none">Simaya Midtrans</div>
-                    <div className="text-sm leading-none">Payment Service</div>
-                </div>
-            </div>
-        </div>
-    )
-}

src/pages/NotFoundPage.tsx

@@ -5,8 +5,7 @@ export function NotFoundPage() {
     <div className="space-y-3">
       <h1 className="text-xl font-semibold">Halaman tidak ditemukan</h1>
       <p className="text-sm text-black/70">Periksa URL atau kembali ke checkout.</p>
-      {/* <Link to="/checkout" className="text-brand-600 underline">Kembali ke Checkout</Link> */}
-      <Link to="/" className="text-brand-600 underline">Kembali</Link>
+      <Link to="/checkout" className="text-brand-600 underline">Kembali ke Checkout</Link>
     </div>
   )
 }

src/pages/PayPage.tsx

@@ -53,7 +53,7 @@ export function PayPage() {
     }
   }, [token])
 
-  const merchantName = useMemo(() => '', [])
+  const merchantName = useMemo(() => 'Simaya Retail', [])
 
   const isExpired = expireAt ? Date.now() > expireAt : false
   const enabledMap: Record<PaymentMethod, boolean> = useMemo(() => {
@@ -88,17 +88,16 @@ export function PayPage() {
       >
         <div className="space-y-4 px-4 py-6">
           <Alert title={title}>{msg}</Alert>
-          <div className="flex flex-col gap-2 sm:flex-row">
+          <div className="flex gap-2">
             <Button
               variant="secondary"
               onClick={() => { try { window.location.reload() } catch { } }}
-              className="w-full sm:w-auto"
             >
               Muat ulang
             </Button>
             <a
               href="mailto:retailimaya@gmail.com?subject=Permintaan%20Link%20Pembayaran&body=Order%20ID:%20"
-              className="inline-flex items-center px-3 py-2 rounded border bg-gray-800 !text-white hover:!text-white focus:!text-white visited:!text-white active:!text-white w-full sm:w-auto justify-center"
+              className="inline-flex items-center px-3 py-2 rounded border bg-gray-800 !text-white hover:!text-white focus:!text-white visited:!text-white active:!text-white"
             >
               Hubungi Admin
             </a>
@@ -124,6 +123,7 @@ export function PayPage() {
               onSelect={(m) => {
                 setSelectedMethod(m as Method)
                 if (m === 'bank_transfer' || m === 'cstore') {
+                  // Panel pemilihan bank/toko akan muncul di bawah item, dan lanjut ke step 3 setelah memilih
                 } else if (m === 'cpay') {
                   try {
                     window.open('https://play.google.com/store/apps/details?id=com.cifo.walanja', '_blank')
@@ -148,7 +148,7 @@ export function PayPage() {
                   return (
                     <div className="space-y-2" aria-live="polite">
                       <div className="text-xs text-gray-600">Pilih bank untuk membuat Virtual Account</div>
-                      <div className={`grid grid-cols-2 md:grid-cols-3 gap-2 ${isBusy ? 'pointer-events-none opacity-60' : ''}`}>
+                      <div className={`grid grid-cols-3 gap-2 ${isBusy ? 'pointer-events-none opacity-60' : ''}`}>
                         {(['bca', 'bni', 'bri', 'cimb', 'mandiri', 'permata'] as BankKey[]).map((bk) => (
                           <button
                             key={bk}
@@ -158,7 +158,7 @@ export function PayPage() {
                               setIsBusy(true)
                               setTimeout(() => { setCurrentStep(3); setIsBusy(false) }, 300)
                             }}
-                            className="rounded border border-gray-300 bg-white p-3 md:p-2 w-full flex items-center justify-center overflow-hidden hover:bg-gray-100"
+                            className="rounded border border-gray-300 bg-white p-2 flex items-center justify-center overflow-hidden hover:bg-gray-100"
                             aria-label={`Pilih bank ${bk.toUpperCase()}`}
                           >
                             <BankLogo bank={bk} />
@@ -179,8 +179,7 @@ export function PayPage() {
                     <div className="space-y-2" aria-live="polite">
                       <div className="text-xs text-gray-600">Pilih toko untuk membuat kode pembayaran</div>
                       <div className={`grid grid-cols-2 gap-2 ${isBusy ? 'pointer-events-none opacity-60' : ''}`}>
-                        {/* {(['alfamart', 'indomaret'] as const).map((st) => ( */}
-                          {(['alfamart'] as const).map((st) => (
+                        {(['alfamart', 'indomaret'] as const).map((st) => (
                           <button
                             key={st}
                             type="button"
@@ -189,7 +188,7 @@ export function PayPage() {
                               setIsBusy(true)
                               setTimeout(() => { setCurrentStep(3); setIsBusy(false) }, 300)
                             }}
-                            className="rounded border border-gray-300 bg-white p-3 md:p-2 w-full flex items-center justify-center hover:bg-gray-100"
+                            className="rounded border border-gray-300 bg-white p-2 flex items-center justify-center hover:bg-gray-100"
                             aria-label={`Pilih toko ${st.toUpperCase()}`}
                           >
                             {st === 'alfamart' ? <LogoAlfamart /> : <LogoIndomaret />}

src/pages/PaymentStatusPage.tsx

@@ -112,7 +112,7 @@ export function PaymentStatusPage() {
         ) : null}
         <div className="mt-4 flex gap-2">
           <Button onClick={() => nav.toHistory()}>Lihat Riwayat</Button>
-          <Button variant="secondary" onClick={() => nav.toCheckout()}>Kembali</Button>
+          <Button variant="secondary" onClick={() => nav.toCheckout()}>Kembali ke Checkout</Button>
         </div>
       </div>
       {!Env.API_BASE_URL && (

src/services/api.ts

@@ -129,6 +129,8 @@ export async function getPaymentLinkPayload(token: string): Promise<PaymentLinkP
     Logger.info('paymentlink.resolve', { tokenLen: token.length })
     return data as PaymentLinkPayload
   }
+  // Fallback when API base not set or resolver unavailable
+  // Try a best-effort decode of base64(JSON) payload; if fails, use defaults
   try {
     const json = JSON.parse(atob(token))
     return {