diff --git a/.env.example b/.env.example index f7fa990d4..89939b046 100644 --- a/.env.example +++ b/.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 diff --git a/.env.production b/.env.production new file mode 100644 index 000000000..afedb41e7 --- /dev/null +++ b/.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 diff --git a/.graphqlrc.yml b/.graphqlrc.yml new file mode 100644 index 000000000..60997be82 --- /dev/null +++ b/.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 diff --git a/app/_not-found/page.tsx b/app/_not-found/page.tsx new file mode 100644 index 000000000..9799278e6 --- /dev/null +++ b/app/_not-found/page.tsx @@ -0,0 +1,9 @@ +// app/_not-found/page.tsx +export default function StubNotFound() { + return ( +
+

404

+

Page not found.

+
+ ) +} diff --git a/app/cart-checkout/page.tsx b/app/cart-checkout/page.tsx new file mode 100644 index 000000000..f0775904e --- /dev/null +++ b/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 ( +
+

Shopping Cart & Checkout

+ + {/* Cart Items Section */} +
+

Your Cart

+ {cartItems.length > 0 ? ( + <> + {cartItems.map(item => ( +
+
+

{item.name}

+

Price: ${item.price.toFixed(2)}

+

+ Quantity: + {item.quantity} +

+
+
+

Total: ${(item.price * item.quantity).toFixed(2)}

+ +
+
+ ))} +
+

Subtotal: ${cartSubtotal.toFixed(2)}

+

Shipping Estimate: ${shippingEstimate.toFixed(2)}

+

Grand Total: ${grandTotal.toFixed(2)}

+
+ + ) : ( +

Your cart is currently empty.

+ )} +
+ + {/* Checkout Form Section */} + {cartItems.length > 0 && ( // Only show checkout if cart is not empty +
+

Checkout

+
e.preventDefault()} > {/* Prevent actual submission */} + +

Shipping Address

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +

Billing Address

+
+ setBillingSameAsShipping(e.target.checked)} + style={{ marginRight: '10px' }} + /> + +
+ + {!billingSameAsShipping && ( + <> + {/* Billing address fields would go here, similar to shipping */} +

(Billing address fields would appear here if different)

+ + )} + +

Payment Information

+
+

Card Number:

+

(Placeholder: Actual card input fields are not implemented for security reasons)

+

Expiry Date (MM/YY):

+

CVV:

+
+ + +
+
+ )} + + {/* Request a Quote Section */} +
+

Need a Custom Quote?

+

For bulk orders or special requirements, please request a quote.

+ +
+
+ ); +} diff --git a/app/content/[slug]/page.tsx b/app/content/[slug]/page.tsx new file mode 100644 index 000000000..638d1a451 --- /dev/null +++ b/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: contact@example.com', + '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
Content not found for {resolvedParams.slug}
; + } + + return ( +
+

{content.title}

+ {content.body.map((paragraph, index) => ( +

{paragraph}

+ ))} +
+ ); +} + +// Optional: Generate static params still works the same way +// export async function generateStaticParams() { +// return [{ slug: 'about-us' }, { slug: 'contact-us' }, { slug: 'privacy-policy' }]; +// } diff --git a/app/login/page.tsx b/app/login/page.tsx new file mode 100644 index 000000000..435f3ea4a --- /dev/null +++ b/app/login/page.tsx @@ -0,0 +1,58 @@ +// app/login/page.tsx +export default function LoginPage() { + return ( +
+

Sign In

+
e.preventDefault()} > {/* Prevent actual submission for this mock */} +
+ + +
+
+ + +
+ +
+
+

+ New customer? Create an account +

+

+ Forgot your password? +

+
+
+ ); +} diff --git a/app/my-page/page.tsx b/app/my-page/page.tsx new file mode 100644 index 000000000..e0b071573 --- /dev/null +++ b/app/my-page/page.tsx @@ -0,0 +1,139 @@ +// app/my-page/page.tsx + +export default function MyPage() { + // Dummy data + const orders = [ + { id: '12345', date: '2023-10-26', total: '$150.00', status: 'Shipped' }, + { id: '67890', date: '2023-11-05', total: '$75.50', status: 'Processing' }, + { id: '10112', date: '2023-11-15', total: '$220.00', status: 'Delivered' }, + ]; + const quotes = [ + { id: 'Q1001', date: '2023-10-20', total: '$500.00', status: 'Accepted' }, + { id: 'Q1002', date: '2023-11-01', total: '$1250.75', status: 'Pending' }, + ]; + const downloads = [ + { name: 'Product Manual X123.pdf', url: '#' }, + { name: 'Software License - MyProduct v2.txt', url: '#' }, + { name: 'Invoice_INV2023-10-26.pdf', url: '#' }, + ]; + const userProfile = { + name: 'Jane Doe', + email: 'jane.doe@example.com', + company: 'Innovate Solutions Ltd.', + memberSince: '2022-01-15', + }; + + const sectionStyle = { + marginBottom: '40px', + paddingBottom: '20px', + borderBottom: '1px solid #eee' + }; + + const headingStyle = { + color: '#333', + marginBottom: '15px' + }; + + const tableCellStyle = { + border: '1px solid #ddd', + padding: '10px', + textAlign: 'left' as const // Explicitly type textAlign + }; + + const buttonStyle = { + padding: '10px 15px', + backgroundColor: '#007bff', + color: 'white', + border: 'none', + borderRadius: '4px', + cursor: 'pointer', + fontSize: '1em' + }; + + + return ( +
+

My Account

+ + {/* Order History Section */} +
+

Order History

+ {orders.length > 0 ? ( + + + + + + + + + + + {orders.map(order => ( + + + + + + + ))} + +
Order IDDateTotalStatus
#{order.id}{order.date}{order.total}{order.status}
+ ) : ( +

You have no past orders.

+ )} +
+ + {/* My Quotes Section */} +
+

My Quotes

+ {quotes.length > 0 ? ( + + ) : ( +

You have no active quotes.

+ )} +
+ + {/* My Downloads Section */} +
+

My Downloads

+ {downloads.length > 0 ? ( + + ) : ( +

No downloads available.

+ )} +
+ + {/* Profile Information Section */} +
+

My Profile

+
+

Name: {userProfile.name}

+

Email: {userProfile.email}

+

Company: {userProfile.company}

+

Member Since: {userProfile.memberSince}

+
+ +
+
+ ); +} diff --git a/app/not-found.tsx b/app/not-found.tsx new file mode 100644 index 000000000..3021bd6b7 --- /dev/null +++ b/app/not-found.tsx @@ -0,0 +1,8 @@ +export default function NotFound() { + return ( +
+

404

+

This page could not be found.

+
+ ); +} diff --git a/app/page.tsx b/app/page.tsx index 7c4a7d74f..69aba7b80 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -10,11 +10,60 @@ export const metadata = { } }; +// Simulate fetching page configuration from a CMS +const pageConfig = { + showFeaturedProducts: true, + showPromotions: true +}; + +// Placeholder Product Item Component +function ProductItem({ name, price, imageUrl }: { name: string; price: string; imageUrl: string }) { + return ( +
+ {name} +

{name}

+

{price}

+
+ ); +} + +// Placeholder Promotion Banner Component +function PromotionBanner({ title, imageUrl }: { title: string; imageUrl: string }) { + return ( +
+ {title} +

{title}

+
+ ); +} + export default function HomePage() { return ( <> + {/* Existing components can remain if they are part of the desired layout */} + + {pageConfig.showFeaturedProducts && ( +
+

Featured Products

+
+ + + + +
+
+ )} + + {pageConfig.showPromotions && ( +
+

Promotions

+ + +
+ )} +