refactor.js

import fs from 'fs';

let content = fs.readFileSync('src/app/StorePage.tsx', 'utf8');

// Replace view states
content = content.replace("useState<'grid' | 'detail'>('grid')", "useState<'grid' | 'detail' | 'checkout'>('grid')");
content = content.replaceAll('setIsCartOpen(true)', "setViewState('checkout')");
content = content.replaceAll('setIsCartOpen(false)', "setViewState('grid')");
content = content.replaceAll('setIsRazorpayOpen(true)', "setViewState('checkout')");
content = content.replaceAll('setIsRazorpayOpen(false)', "setViewState('grid')");

// We'll use regex to extract the inner contents of Cart and Razorpay
// Cart Inner Extraction
const cartRegex = /<div className="bg-white dark:bg-\[#1A1723\] w-full max-w-md h-full shadow-2xl border-l border-nivarra-border\/20 flex flex-col justify-between p-6 md:p-8 animate-slide-in relative text-left">([\s\S]*?)<\/div>\s*<\/div>\s*<\/div>\s*<style>\s*\{\`\s*\.hide-scrollbar/m;
const matchCart = content.match(/<div className="bg-white dark:bg-\[#1A1723\][^>]*>([\s\S]*?)<\/div>\s*<\/div>\s*}\)/);

// Better way: Find the exact start string and just find the last closing div.
const cartStart = '<div className="bg-white dark:bg-[#1A1723] w-full max-w-md h-full shadow-2xl border-l border-nivarra-border/20 flex flex-col justify-between p-6 md:p-8 animate-slide-in relative text-left">';
const cartStartIndex = content.indexOf(cartStart);

const razorpayStart = '<div className="bg-[#0f111e] text-white w-full max-w-[480px] rounded-3xl shadow-2xl border border-slate-800 p-6 flex flex-col justify-between overflow-hidden relative font-sans" style={{ maxHeight: \'80vh\' }}>';
const razorpayStartIndex = content.indexOf(razorpayStart);

if (cartStartIndex === -1 || razorpayStartIndex === -1) {
  console.log("Could not find start markers");
  process.exit(1);
}

// Find the end by looking for the next `{/* ======================================= */}`
const cartEndIndex = content.indexOf('{/* ======================================= */}', cartStartIndex);
const cartContent = content.substring(cartStartIndex + cartStart.length, content.lastIndexOf('</div>', content.lastIndexOf('</div>', cartEndIndex) - 1));

const razorpayEndIndex = content.indexOf('</div>\n  );\n}', razorpayStartIndex);
const razorpayContent = content.substring(razorpayStartIndex + razorpayStart.length, content.lastIndexOf('</div>', content.lastIndexOf('</div>', razorpayEndIndex) - 1));

const checkoutLayout = `
      {viewState === 'checkout' && (
        <div className="max-w-[1400px] mx-auto px-4 md:px-8 pt-10 pb-16 animate-fade-in min-h-screen">
          <button 
            onClick={() => setViewState('grid')}
            className="flex items-center gap-2 text-nivarra-text-secondary hover:text-nivarra-text-primary transition-colors mb-6 font-bold text-sm bg-transparent border-none cursor-pointer"
          >
            ← Back to Store
          </button>
          <div className="grid grid-cols-1 xl:grid-cols-3 gap-8 items-start h-full">
            <div className="xl:col-span-2 flex flex-col h-full min-h-[600px] bg-white dark:bg-[#1A1723] rounded-3xl border border-nivarra-border shadow-xl p-6 md:p-8 relative text-left">
              \${cartContent}
            </div>
            <div className="xl:col-span-1 flex flex-col h-full min-h-[600px] bg-[#0f111e] text-white rounded-3xl shadow-2xl border border-slate-800 p-6 overflow-hidden relative font-sans">
              \${razorpayContent}
            </div>
          </div>
        </div>
      )}
`;

// Now replace the entire blocks
const cartBlockStart = content.lastIndexOf('{/* ======================================= */}', cartStartIndex - 100);
const razorpayBlockStart = content.lastIndexOf('{/* ======================================= */}', razorpayStartIndex - 100);

// Remove Razorpay Block first
content = content.substring(0, razorpayBlockStart - 100) + '\\n    </div>\\n  );\\n}\\n';

// Replace Cart Block with Checkout Layout
content = content.substring(0, cartBlockStart - 100) + checkoutLayout + '\\n\\n' + content.substring(cartEndIndex);

// Let's use string replace for safety instead of blind substrings
content = content.replace("useState<'grid' | 'detail'>('grid')", "useState<'grid' | 'detail' | 'checkout'>('grid')");

fs.writeFileSync('src/app/StorePage.tsx', content);
console.log("Success");