Jules wip 9832509343613941747

.env.example

@@ -1,5 +1,6 @@
 COMPANY_NAME="Vercel Inc."
-SITE_NAME="Next.js Commerce"
-SHOPIFY_REVALIDATION_SECRET=""
-SHOPIFY_STOREFRONT_ACCESS_TOKEN=""
-SHOPIFY_STORE_DOMAIN="[your-shopify-store-subdomain].myshopify.com"
+COMMERCE_PROVIDER=crystallize
+NEXT_PUBLIC_COMMERCE_PROVIDER=crystallize
+CRYSTALLIZE_API_URL=https://api.crystallize.com/6422a2c186ef95b31e1cd1e5/graphql
+CRYSTALLIZE_ACCESS_TOKEN=c3ab0fef20aadcbeb9919e6701f015cfb4ddf1ff
+NEXT_PUBLIC_USE_DUMMY_DATA=true

.env.production

@@ -0,0 +1,9 @@
+COMMERCE_PROVIDER=shopify_local
+NEXT_PUBLIC_COMMERCE_PROVIDER=shopify_local
+
+SHOPIFY_STORE_DOMAIN=dummy.myshopify.com
+SHOPIFY_STOREFRONT_API_TOKEN=dummy
+SHOPIFY_STOREFRONT_API_VERSION=2023-01
+
+SHOPIFY_HEADER_MENU=next-js-frontend-header-menu
+SHOPIFY_FOOTER_MENU=next-js-frontend-footer-menu

.graphqlrc.yml

@@ -0,0 +1,8 @@
+schema:
+  - https://api.crystallize.com/bykirken/graphql
+extensions:
+  endpoints:
+    default:
+      url: https://api.crystallize.com/bykirken/graphql
+      headers:
+        Authorization: Basic c3ab0fef20aadcbeb9919e6701f015cfb4ddf1ff

app/_not-found/page.tsx

@@ -0,0 +1,9 @@
+// app/_not-found/page.tsx
+export default function StubNotFound() {
+  return (
+    <div style={{ padding: '4rem', textAlign: 'center' }}>
+      <h1 style={{ fontSize: '3rem', marginBottom: '1rem' }}>404</h1>
+      <p style={{ fontSize: '1.25rem' }}>Page not found.</p>
+    </div>
+  )
+}

app/cart-checkout/page.tsx

@@ -0,0 +1,151 @@
+// app/cart-checkout/page.tsx
+'use client'; // For useState if we were to make checkbox interactive
+
+import { useState } from 'react';
+
+export default function CartCheckoutPage() {
+  const [billingSameAsShipping, setBillingSameAsShipping] = useState(true);
+
+  // Dummy cart items
+  const cartItems = [
+    { id: 'p1', name: 'Awesome T-Shirt (Red, L)', quantity: 1, price: 29.99 },
+    { id: 'p2', name: 'Cool Cap - Black', quantity: 2, price: 15.00 },
+    { id: 'p3', name: 'Generic Gadget XL', quantity: 1, price: 199.50 },
+  ];
+
+  const cartSubtotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
+  const shippingEstimate = cartItems.length > 0 ? 5.00 : 0; // No shipping if cart is empty
+  const grandTotal = cartSubtotal + shippingEstimate;
+
+  // Inline styles
+  const pageStyle = { padding: '20px', fontFamily: 'Arial, sans-serif', maxWidth: '1000px', margin: '20px auto' };
+  const sectionStyle = { marginBottom: '40px', paddingBottom: '20px', borderBottom: '1px solid #eee' };
+  const headingStyle = { color: '#333', marginBottom: '20px', borderBottom: '1px solid #ddd', paddingBottom: '10px' };
+  const subHeadingStyle = { color: '#444', marginBottom: '15px' };
+  const inputStyle = { width: 'calc(100% - 22px)', padding: '10px', marginBottom: '10px', border: '1px solid #ccc', borderRadius: '4px', boxSizing: 'border-box' as const };
+  const buttonStyle = { padding: '12px 20px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', fontSize: '1em' };
+  const smallButtonStyle = { padding: '5px 8px', margin: '0 5px', cursor: 'pointer' };
+  const cartItemStyle = { borderBottom: '1px solid #eee', padding: '15px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' };
+  const formGroupStyle = { marginBottom: '15px' };
+  const labelStyle = { display: 'block', marginBottom: '5px', fontWeight: 'bold' as const };
+
+
+  return (
+    <div style={pageStyle}>
+      <h1 style={{ textAlign: 'center', color: '#222', marginBottom: '40px' }}>Shopping Cart & Checkout</h1>
+
+      {/* Cart Items Section */}
+      <section style={sectionStyle}>
+        <h2 style={subHeadingStyle}>Your Cart</h2>
+        {cartItems.length > 0 ? (
+          <>
+            {cartItems.map(item => (
+              <div key={item.id} style={cartItemStyle}>
+                <div style={{ flexGrow: 1 }}>
+                  <p style={{ fontWeight: 'bold', margin: '0 0 5px 0' }}>{item.name}</p>
+                  <p style={{ margin: '0 0 5px 0', fontSize: '0.9em' }}>Price: ${item.price.toFixed(2)}</p>
+                  <p style={{ margin: '0', fontSize: '0.9em' }}>
+                    Quantity: 
+                    <button style={smallButtonStyle} disabled>-</button> {item.quantity} <button style={smallButtonStyle} disabled>+</button>
+                  </p>
+                </div>
+                <div style={{ textAlign: 'right' as const }}>
+                  <p style={{ fontWeight: 'bold', margin: '0 0 10px 0' }}>Total: ${(item.price * item.quantity).toFixed(2)}</p>
+                  <button style={{ ...smallButtonStyle, backgroundColor: '#dc3545', color: 'white', border: 'none', borderRadius: '3px' }} disabled>Remove</button>
+                </div>
+              </div>
+            ))}
+            <div style={{ marginTop: '20px', textAlign: 'right' as const }}>
+              <p><strong>Subtotal:</strong> ${cartSubtotal.toFixed(2)}</p>
+              <p><strong>Shipping Estimate:</strong> ${shippingEstimate.toFixed(2)}</p>
+              <h3 style={{ marginTop: '10px' }}>Grand Total: ${grandTotal.toFixed(2)}</h3>
+            </div>
+          </>
+        ) : (
+          <p>Your cart is currently empty.</p>
+        )}
+      </section>
+
+      {/* Checkout Form Section */}
+      {cartItems.length > 0 && ( // Only show checkout if cart is not empty
+        <section style={sectionStyle}>
+          <h2 style={subHeadingStyle}>Checkout</h2>
+          <form onSubmit={(e) => e.preventDefault()} > {/* Prevent actual submission */}
+
+            <h3 style={{ ...subHeadingStyle, fontSize: '1.1em', marginTop: '0' }}>Shipping Address</h3>
+            <div style={formGroupStyle}>
+              <label htmlFor="fullName" style={labelStyle}>Full Name</label>
+              <input type="text" id="fullName" name="fullName" style={inputStyle} required />
+            </div>
+            <div style={formGroupStyle}>
+              <label htmlFor="address1" style={labelStyle}>Address Line 1</label>
+              <input type="text" id="address1" name="address1" style={inputStyle} required />
+            </div>
+            <div style={formGroupStyle}>
+              <label htmlFor="city" style={labelStyle}>City</label>
+              <input type="text" id="city" name="city" style={inputStyle} required />
+            </div>
+            <div style={formGroupStyle}>
+              <label htmlFor="postalCode" style={labelStyle}>Postal Code</label>
+              <input type="text" id="postalCode" name="postalCode" style={inputStyle} required />
+            </div>
+            <div style={formGroupStyle}>
+              <label htmlFor="country" style={labelStyle}>Country</label>
+              <input type="text" id="country" name="country" style={inputStyle} required />
+            </div>
+
+            <h3 style={{ ...subHeadingStyle, fontSize: '1.1em', marginTop: '30px' }}>Billing Address</h3>
+            <div style={{ ...formGroupStyle, display: 'flex', alignItems: 'center' }}>
+              <input 
+                type="checkbox" 
+                id="billingSame" 
+                name="billingSame" 
+                checked={billingSameAsShipping} 
+                onChange={(e) => setBillingSameAsShipping(e.target.checked)} 
+                style={{ marginRight: '10px' }}
+              />
+              <label htmlFor="billingSame" style={{ ...labelStyle, marginBottom: '0' }}>Same as shipping address</label>
+            </div>
+
+            {!billingSameAsShipping && (
+              <>
+                {/* Billing address fields would go here, similar to shipping */}
+                <p style={{ fontStyle: 'italic', color: '#666' }}>(Billing address fields would appear here if different)</p>
+              </>
+            )}
+
+            <h3 style={{ ...subHeadingStyle, fontSize: '1.1em', marginTop: '30px' }}>Payment Information</h3>
+            <div style={{ border: '1px dashed #ccc', padding: '15px', borderRadius: '4px', backgroundColor: '#f9f9f9' }}>
+              <p style={{ margin: '0 0 10px 0', fontWeight: 'bold' }}>Card Number:</p>
+              <p style={{ color: '#777', fontStyle: 'italic' }}> (Placeholder: Actual card input fields are not implemented for security reasons)</p>
+              <p style={{ margin: '10px 0 10px 0', fontWeight: 'bold' }}>Expiry Date (MM/YY):</p>
+              <p style={{ margin: '10px 0 0 0', fontWeight: 'bold' }}>CVV:</p>
+            </div>
+
+            <button type="submit" style={{ ...buttonStyle, marginTop: '30px', width: '100%', backgroundColor: '#28a745' }}
+              onMouseOver={(e) => (e.currentTarget.style.backgroundColor = '#218838')}
+              onMouseOut={(e) => (e.currentTarget.style.backgroundColor = '#28a745')}
+              disabled={cartItems.length === 0}
+            >
+              Place Order
+            </button>
+          </form>
+        </section>
+      )}
+
+      {/* Request a Quote Section */}
+      <section style={{ ...sectionStyle, borderBottom: 'none', textAlign: 'center' as const }}>
+        <h2 style={subHeadingStyle}>Need a Custom Quote?</h2>
+        <p style={{ marginBottom: '15px' }}>For bulk orders or special requirements, please request a quote.</p>
+        <button 
+          style={{ ...buttonStyle, backgroundColor: '#17a2b8' }}
+          onClick={() => alert('Redirecting to quote request page... (placeholder)')} // Placeholder action
+          onMouseOver={(e) => (e.currentTarget.style.backgroundColor = '#138496')}
+          onMouseOut={(e) => (e.currentTarget.style.backgroundColor = '#17a2b8')}
+        >
+          Request a Quote
+        </button>
+      </section>
+    </div>
+  );
+}

app/content/[slug]/page.tsx

@@ -0,0 +1,65 @@
+// app/content/[slug]/page.tsx
+
+// Simulate fetching content (replace with actual CMS fetching later)
+async function getContent(slug: string) {
+  // In a real app, you'd fetch this from a CMS
+  const allContent: { [key: string]: { title: string; body: string[] } } = {
+    'about-us': {
+      title: 'About Us',
+      body: [
+        'This is the about us page.',
+        'We are a company that does things.'
+      ]
+    },
+    'contact-us': {
+      title: 'Contact Us',
+      body: [
+        'You can contact us via email or phone.',
+        'Email: [email protected]',
+        'Phone: 123-456-7890'
+      ]
+    },
+    'privacy-policy': {
+      title: 'Privacy Policy',
+      body: [
+        'This is our privacy policy.',
+        'We respect your privacy and are committed to protecting your personal data.'
+      ]
+    }
+  };
+  // Ensure slug is a string before using it as an index
+  return allContent[String(slug)] || null;
+}
+
+// Define an interface for the page's props, with params and searchParams as Promises
+interface ContentPageProps {
+  params: Promise<{ slug: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}
+
+export default async function ContentPage({ params, searchParams }: ContentPageProps) {
+  // Await the params promise to get its value
+  const resolvedParams = await params;
+  // Await searchParams if you need to use them, e.g.:
+  // const resolvedSearchParams = await searchParams;
+
+  const content = await getContent(resolvedParams.slug);
+
+  if (!content) {
+    return <div>Content not found for {resolvedParams.slug}</div>;
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h1>{content.title}</h1>
+      {content.body.map((paragraph, index) => (
+        <p key={index}>{paragraph}</p>
+      ))}
+    </div>
+  );
+}
+
+// Optional: Generate static params still works the same way
+// export async function generateStaticParams() {
+//   return [{ slug: 'about-us' }, { slug: 'contact-us' }, { slug: 'privacy-policy' }];
+// }

app/login/page.tsx

@@ -0,0 +1,58 @@
+// app/login/page.tsx
+export default function LoginPage() {
+  return (
+    <div style={{ maxWidth: '400px', margin: '50px auto', padding: '40px', border: '1px solid #ddd', borderRadius: '8px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)' }}>
+      <h1 style={{ textAlign: 'center', marginBottom: '30px', color: '#333' }}>Sign In</h1>
+      <form onSubmit={(e) => e.preventDefault()} > {/* Prevent actual submission for this mock */}
+        <div style={{ marginBottom: '15px' }}>
+          <label htmlFor="email" style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#555' }}>Email Address</label>
+          <input 
+            type="email" 
+            id="email" 
+            name="email" 
+            required 
+            placeholder="[email protected]"
+            style={{ width: '100%', padding: '10px', border: '1px solid #ccc', borderRadius: '4px', boxSizing: 'border-box' }} 
+          />
+        </div>
+        <div style={{ marginBottom: '20px' }}>
+          <label htmlFor="password" style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#555' }}>Password</label>
+          <input 
+            type="password" 
+            id="password" 
+            name="password" 
+            required 
+            placeholder="Your password"
+            style={{ width: '100%', padding: '10px', border: '1px solid #ccc', borderRadius: '4px', boxSizing: 'border-box' }} 
+          />
+        </div>
+        <button 
+          type="submit" 
+          style={{ 
+            width: '100%', 
+            padding: '12px', 
+            backgroundColor: '#007bff', 
+            color: 'white', 
+            border: 'none', 
+            borderRadius: '4px', 
+            fontSize: '16px',
+            cursor: 'pointer',
+            transition: 'background-color 0.2s'
+          }}
+          onMouseOver={(e) => (e.currentTarget.style.backgroundColor = '#0056b3')}
+          onMouseOut={(e) => (e.currentTarget.style.backgroundColor = '#007bff')}
+        >
+          Sign In
+        </button>
+      </form>
+      <div style={{ marginTop: '25px', textAlign: 'center', fontSize: '14px' }}>
+        <p style={{ marginBottom: '10px' }}>
+          New customer? <a href="/signup" style={{ color: '#007bff', textDecoration: 'none' }}>Create an account</a>
+        </p>
+        <p>
+          <a href="/reset-password" style={{ color: '#007bff', textDecoration: 'none' }}>Forgot your password?</a>
+        </p>
+      </div>
+    </div>
+  );
+}