├── .npmrc
├── public
    └── favicon.ico
├── .vscode
    ├── extensions.json
    └── launch.json
├── src
    ├── components
    │   ├── ui
    │   │   ├── Link.jsx
    │   │   ├── Check.jsx
    │   │   ├── SkeletonLoading.jsx
    │   │   ├── Card.jsx
    │   │   ├── Disclosure.jsx
    │   │   ├── Select.jsx
    │   │   ├── Modal.jsx
    │   │   ├── Badge.jsx
    │   │   ├── Input.jsx
    │   │   └── Button.jsx
    │   ├── icon
    │   │   ├── Spinner.jsx
    │   │   ├── Check.jsx
    │   │   ├── ChevronDown.jsx
    │   │   ├── ChevronRight.jsx
    │   │   ├── Selector.jsx
    │   │   ├── Search.jsx
    │   │   ├── ShoppingBag.jsx
    │   │   ├── User.jsx
    │   │   ├── Refresh.jsx
    │   │   ├── Trash.jsx
    │   │   └── Truck.jsx
    │   ├── login
    │   │   ├── index.jsx
    │   │   └── Login.jsx
    │   ├── register
    │   │   ├── index.jsx
    │   │   └── Register.jsx
    │   ├── checkout
    │   │   ├── CustomerDetail.jsx
    │   │   ├── Login.jsx
    │   │   ├── Payment.jsx
    │   │   ├── Register.jsx
    │   │   ├── index.jsx
    │   │   └── Shipping.jsx
    │   ├── ItemCard.jsx
    │   ├── Menu.jsx
    │   ├── store.js
    │   ├── profile
    │   │   ├── Address.jsx
    │   │   ├── Order.jsx
    │   │   ├── Account.jsx
    │   │   └── index.jsx
    │   ├── product
    │   │   ├── index.jsx
    │   │   └── ProductCard.jsx
    │   ├── OrderSummary.jsx
    │   ├── MiniCart.jsx
    │   ├── Footer.jsx
    │   ├── collection
    │   │   └── index.jsx
    │   ├── Nav.jsx
    │   ├── ElasticSearch.jsx
    │   ├── cart
    │   │   ├── index.jsx
    │   │   └── OrderLine.jsx
    │   └── home
    │   │   └── index.jsx
    ├── pages
    │   ├── checkout.astro
    │   ├── cart.astro
    │   ├── register.astro
    │   ├── login.astro
    │   ├── index.astro
    │   ├── profile.astro
    │   ├── product
    │   │   └── [slug].astro
    │   └── collection
    │   │   └── [slug].astro
    ├── utils
    │   ├── client
    │   │   └── gqlClient.js
    │   └── server
    │   │   └── gqlClient.js
    ├── layouts
    │   └── base.astro
    ├── api
    │   ├── schema.js
    │   ├── server.js
    │   └── client.js
    └── styles
    │   └── global.css
├── tailwind.config.cjs
├── .gitignore
├── astro.config.mjs
├── tsconfig.json
├── package.json
├── tailwind-themes.js
└── README.md


/.npmrc:
--------------------------------------------------------------------------------
1 | # Expose Astro dependencies for `pnpm` users
2 | shamefully-hoist=true
3 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/turiguiliano88/astro-vendure-storefront/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["astro-build.astro-vscode"],
3 |   "unwantedRecommendations": []
4 | }
5 | 


--------------------------------------------------------------------------------
/src/components/ui/Link.jsx:
--------------------------------------------------------------------------------
1 | export default function Link(props) {
2 |   return <a href={props.href}>{props.children}</a>;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/pages/checkout.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Base from "../layouts/base.astro";
3 | import App from '../components/checkout';
4 | ---
5 | 
6 | <Base>
7 | <App client:load />
8 | </Base>


--------------------------------------------------------------------------------
/src/pages/cart.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Base from "../layouts/base.astro";
3 | import App from '../components/cart'
4 | ---
5 | 
6 | <Base>
7 | <App client:load showSearchBox={true} />
8 | </Base>


--------------------------------------------------------------------------------
/src/components/icon/Spinner.jsx:
--------------------------------------------------------------------------------
1 | export default function SpinnerIcon(props) {
2 |   return (
3 |     <div
4 |       className={`${props.className} animate-spin border-r-2 rounded-full mx-sm`}
5 |     ></div>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
1 | const themes = require("./tailwind-themes");
2 | 
3 | module.exports = {
4 |   content: ["./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}"],
5 |   theme: themes.defaultTheme,
6 |   plugins: [],
7 | };
8 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.2.0",
 3 |   "configurations": [
 4 |     {
 5 |       "command": "./node_modules/.bin/astro dev",
 6 |       "name": "Development server",
 7 |       "request": "launch",
 8 |       "type": "node-terminal"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/src/components/login/index.jsx:
--------------------------------------------------------------------------------
 1 | import Nav from "../Nav";
 2 | import Login from "./Login";
 3 | export default function App() {
 4 |   return (
 5 |     <div>
 6 |       <Nav />
 7 |       <div className="max-w-sm my-lg mx-auto">
 8 |         <Login />
 9 |       </div>
10 |     </div>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # build output
 2 | dist/
 3 | .output/
 4 | 
 5 | # dependencies
 6 | node_modules/
 7 | 
 8 | # logs
 9 | npm-debug.log*
10 | yarn-debug.log*
11 | yarn-error.log*
12 | pnpm-debug.log*
13 | 
14 | 
15 | # environment variables
16 | .env
17 | .env.production
18 | 
19 | # macOS-specific files
20 | .DS_Store
21 | 


--------------------------------------------------------------------------------
/src/components/register/index.jsx:
--------------------------------------------------------------------------------
 1 | import Nav from "../Nav";
 2 | import Register from "./Register";
 3 | export default function App() {
 4 |   return (
 5 |     <div>
 6 |       <Nav />
 7 |       <div className="max-w-sm my-lg mx-auto">
 8 |         <Register />
 9 |       </div>
10 |     </div>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "astro/config";
 2 | // import nodejs from "@astrojs/node";
 3 | import react from "@astrojs/react";
 4 | import tailwind from "@astrojs/tailwind";
 5 | 
 6 | // https://astro.build/config
 7 | export default defineConfig({
 8 |   integrations: [react(), tailwind()],
 9 |   // adapter: nodejs(),
10 |   server: {
11 |     port: 3001,
12 |   },
13 | });
14 | 


--------------------------------------------------------------------------------
/src/components/icon/Check.jsx:
--------------------------------------------------------------------------------
 1 | export default function Check(props) {
 2 |   return (
 3 |     <svg
 4 |       xmlns="http://www.w3.org/2000/svg"
 5 |       className={props.className}
 6 |       fill="none"
 7 |       viewBox="0 0 24 24"
 8 |       stroke="currentColor"
 9 |       strokeWidth={2}
10 |     >
11 |       <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
12 |     </svg>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/src/components/ui/Check.jsx:
--------------------------------------------------------------------------------
 1 | export default function Check(props) {
 2 |   return (
 3 |     <div className="flex items-center first:mr-2">
 4 |       <input
 5 |         type="checkbox"
 6 |         onChange={props.onChange}
 7 |         className="appearance-none mr-1 w-3 h-3 ring-2 ring-inset ring-gray-800 text-primary checked:ring-primary"
 8 |       />
 9 |       <label>{props.label}</label>
10 |     </div>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/src/components/icon/ChevronDown.jsx:
--------------------------------------------------------------------------------
 1 | export default function ChevronDown(props) {
 2 |   return (
 3 |     <svg
 4 |       xmlns="http://www.w3.org/2000/svg"
 5 |       className={props.className}
 6 |       fill="none"
 7 |       viewBox="0 0 24 24"
 8 |       stroke="currentColor"
 9 |       strokeWidth="2"
10 |     >
11 |       <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
12 |     </svg>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/src/components/icon/ChevronRight.jsx:
--------------------------------------------------------------------------------
 1 | export default function ChevronRight(props) {
 2 |   return (
 3 |     <svg
 4 |       xmlns="http://www.w3.org/2000/svg"
 5 |       className={props.className}
 6 |       fill="none"
 7 |       viewBox="0 0 24 24"
 8 |       stroke="currentColor"
 9 |       strokeWidth="2"
10 |     >
11 |       <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
12 |     </svg>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/src/components/ui/SkeletonLoading.jsx:
--------------------------------------------------------------------------------
 1 | export default function SkeletonLoading({ rows }) {
 2 |   return (
 3 |     <div className="flex justify-center items-center w-full h-full flex-col">
 4 |       {[...Array(rows).keys()].map((index) => (
 5 |         <div
 6 |           className="h-3 w-full mb-sm bg-neutral-100 animate-pulse rounded-sm"
 7 |           key={index}
 8 |         ></div>
 9 |       ))}
10 |     </div>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/src/components/ui/Card.jsx:
--------------------------------------------------------------------------------
 1 | export const Card = (props) => {
 2 |   return <div className="rounded-sm p-sm">{props.children}</div>;
 3 | };
 4 | 
 5 | export const CardContent = (props) => {
 6 |   return <div className="">{props.children}</div>;
 7 | };
 8 | 
 9 | export const CardTitle = (props) => {
10 |   return (
11 |     <div className="text-5xl mb-lg font-sub-heading font-black">
12 |       {props.children}
13 |     </div>
14 |   );
15 | };
16 | 


--------------------------------------------------------------------------------
/src/components/ui/Disclosure.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | 
 3 | export default function Disclosure({ title, content }) {
 4 |   const [open, setOpen] = useState(false);
 5 | 
 6 |   return (
 7 |     <div>
 8 |       <div
 9 |         onClick={() => {
10 |           setOpen(!open);
11 |         }}
12 |       >
13 |         {title}
14 |       </div>
15 |       <div className={open ? "" : "hidden"}>{content}</div>
16 |     </div>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/src/pages/register.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Base from "../layouts/base.astro";
 3 | import App from '../components/register'
 4 | import { getActiveCustomer } from "../api/server";
 5 | 
 6 | const cookie = Astro.request.headers.get('cookie');
 7 | if (cookie) {
 8 | 	const activeCustomer = (await getActiveCustomer(cookie)).activeCustomer;
 9 |     if (activeCustomer) return Astro.redirect('/profile');
10 | }
11 | ---
12 | 
13 | <Base>
14 | <App client:load />
15 | </Base>


--------------------------------------------------------------------------------
/src/pages/login.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Base from "../layouts/base.astro";
 3 | import App from '../components/login'
 4 | import { getActiveCustomer } from "../api/server";
 5 | 
 6 | // const cookie = Astro.request.headers.get('cookie');
 7 | // if (cookie) {
 8 | // 	const activeCustomer = (await getActiveCustomer(cookie)).activeCustomer;
 9 | //     if (activeCustomer) return Astro.redirect('/profile');
10 | // }
11 | ---
12 | 
13 | <Base>
14 | <App client:load />
15 | </Base>


--------------------------------------------------------------------------------
/src/components/icon/Selector.jsx:
--------------------------------------------------------------------------------
 1 | export default function Selector(props) {
 2 |   return (
 3 |     <svg
 4 |       xmlns="http://www.w3.org/2000/svg"
 5 |       className={props.className}
 6 |       fill="none"
 7 |       viewBox="0 0 24 24"
 8 |       stroke="currentColor"
 9 |       strokeWidth="2"
10 |     >
11 |       <path
12 |         strokeLinecap="round"
13 |         strokeLinejoin="round"
14 |         d="M8 9l4-4 4 4m0 6l-4 4-4-4"
15 |       />
16 |     </svg>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/src/components/icon/Search.jsx:
--------------------------------------------------------------------------------
 1 | export default function Search(props) {
 2 |   return (
 3 |     <svg
 4 |       xmlns="http://www.w3.org/2000/svg"
 5 |       className={props.className}
 6 |       fill="none"
 7 |       viewBox="0 0 24 24"
 8 |       stroke="currentColor"
 9 |       strokeWidth={2}
10 |     >
11 |       <path
12 |         strokeLinecap="round"
13 |         strokeLinejoin="round"
14 |         d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
15 |       />
16 |     </svg>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/src/pages/index.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Base from '../layouts/base.astro';
 3 | import App from '../components/home'
 4 | import { getProducts, getActiveCustomer, getActiveOrder, getCollectionsShort } from '../api/server';
 5 | 
 6 | const data = await getProducts(10);
 7 | const products = data.products;
 8 | 
 9 | const collections = (await getCollectionsShort()).collections;
10 | 
11 | 
12 | ---
13 | 
14 | <Base title="Home">
15 | <App client:load products={products} collections={collections} />
16 | </Base>


--------------------------------------------------------------------------------
/src/utils/client/gqlClient.js:
--------------------------------------------------------------------------------
 1 | const gqlShopURL = import.meta.env.PUBLIC_SHOPAPI;
 2 | 
 3 | export const createQuery = async ({ query, variables }) => {
 4 |   let headers = { "Content-Type": "application/json" };
 5 |   const response = await fetch(gqlShopURL, {
 6 |     method: "POST",
 7 |     headers,
 8 |     body: JSON.stringify({
 9 |       query,
10 |       variables,
11 |     }),
12 |     credentials: "include",
13 |   });
14 |   const json = await response.json();
15 |   return json.data;
16 | };
17 | 


--------------------------------------------------------------------------------
/src/components/icon/ShoppingBag.jsx:
--------------------------------------------------------------------------------
 1 | export default function ShoppingBag(props) {
 2 |   return (
 3 |     <svg
 4 |       xmlns="http://www.w3.org/2000/svg"
 5 |       className={props.className}
 6 |       fill="none"
 7 |       viewBox="0 0 24 24"
 8 |       stroke="currentColor"
 9 |       strokeWidth="2"
10 |     >
11 |       <path
12 |         strokeLinecap="round"
13 |         strokeLinejoin="round"
14 |         d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
15 |       />
16 |     </svg>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/src/layouts/base.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import '../styles/global.css';
 3 | import Footer from '../components/Footer'
 4 | 
 5 | const { title } = Astro.props;
 6 | ---
 7 | 
 8 | <html lang="end">
 9 | 
10 | <head>
11 |     <meta charset="UTF-8">
12 |     <meta name="viewport" content="width=device-width">
13 |     <title>{title}</title>
14 | </head>
15 | 
16 | <body class="flex justify-center">
17 |     <div class="w-full" id="root">
18 |         <slot />
19 |         <Footer />
20 |     </div>
21 | </body>
22 | 
23 | </html>


--------------------------------------------------------------------------------
/src/components/icon/User.jsx:
--------------------------------------------------------------------------------
 1 | export default function User(props) {
 2 |   return (
 3 |     <svg
 4 |       xmlns="http://www.w3.org/2000/svg"
 5 |       className={props.className}
 6 |       fill="none"
 7 |       viewBox="0 0 24 24"
 8 |       stroke="currentColor"
 9 |       strokeWidth={2}
10 |     >
11 |       <path
12 |         strokeLinecap="round"
13 |         strokeLinejoin="round"
14 |         d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
15 |       />
16 |     </svg>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/src/components/checkout/CustomerDetail.jsx:
--------------------------------------------------------------------------------
 1 | import Login from "./Login";
 2 | import Register from "./Register";
 3 | export default function CustomerDetail({ setOrder }) {
 4 |   return (
 5 |     <div className="">
 6 |       <div className="text-lg bg-neutral-100 p-sm mb-xs">
 7 |         Step 0: Register or Login
 8 |       </div>
 9 |       <div className="flex justify-center flex-wrap md:flex-nowrap">
10 |         <Login setOrder={setOrder} />
11 |         <Register setOrder={setOrder} />
12 |       </div>
13 |     </div>
14 |   );
15 | }
16 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     // Enable top-level await, and other modern ESM features.
 4 |     "target": "ESNext",
 5 |     "module": "ESNext",
 6 |     // Enable node-style module resolution, for things like npm package imports.
 7 |     "moduleResolution": "node",
 8 |     // Enable JSON imports.
 9 |     "resolveJsonModule": true,
10 |     // Enable stricter transpilation for better output.
11 |     "isolatedModules": true,
12 |     // Add type definitions for our Vite runtime.
13 |     "types": ["vite/client"]
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/components/icon/Refresh.jsx:
--------------------------------------------------------------------------------
 1 | export default function Refresh(props) {
 2 |   return (
 3 |     <svg
 4 |       xmlns="http://www.w3.org/2000/svg"
 5 |       className={props.className}
 6 |       fill="none"
 7 |       viewBox="0 0 24 24"
 8 |       stroke="currentColor"
 9 |       strokeWidth={2}
10 |     >
11 |       <path
12 |         strokeLinecap="round"
13 |         strokeLinejoin="round"
14 |         d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
15 |       />
16 |     </svg>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/src/utils/server/gqlClient.js:
--------------------------------------------------------------------------------
 1 | const gqlShopURL = import.meta.env.SERVER_SHOPAPI;
 2 | 
 3 | export const createQuery = async ({ query, variables }, cookie) => {
 4 |   let headers = { "Content-Type": "application/json" };
 5 |   if (cookie) headers.Cookie = cookie;
 6 |   const response = await fetch(gqlShopURL, {
 7 |     method: "POST",
 8 |     headers,
 9 |     body: JSON.stringify({
10 |       query,
11 |       variables,
12 |     }),
13 |     credentials: "include",
14 |   });
15 | 
16 |   const json = await response.json();
17 |   return json.data;
18 | };
19 | 


--------------------------------------------------------------------------------
/src/components/icon/Trash.jsx:
--------------------------------------------------------------------------------
 1 | export default function Trash(props) {
 2 |   return (
 3 |     <svg
 4 |       xmlns="http://www.w3.org/2000/svg"
 5 |       className={props.className}
 6 |       viewBox="0 0 20 20"
 7 |       fill="currentColor"
 8 |     >
 9 |       <path
10 |         fillRule="evenodd"
11 |         d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
12 |         clipRule="evenodd"
13 |       />
14 |     </svg>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/src/pages/profile.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Base from "../layouts/base.astro";
 3 | import App from '../components/profile';
 4 | // import { getActiveCustomer, getActiveOrder } from "../api/server";
 5 | 
 6 | 
 7 | // const cookie = Astro.request.headers.get('cookie');
 8 | // let totalQuantity, customer;
 9 | // if (cookie) {
10 | // 	totalQuantity = (await getActiveOrder(cookie)).activeOrder?.totalQuantity;
11 | // 	const activeCustomer = (await getActiveCustomer(cookie)).activeCustomer;
12 | // 	if (activeCustomer) customer = activeCustomer;
13 | // }
14 | // if (!cookie || !customer) {
15 | //     return Astro.redirect('/login');
16 | // }
17 | ---
18 | 
19 | <Base>
20 | <App client:load />
21 | </Base>


--------------------------------------------------------------------------------
/src/pages/product/[slug].astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Base from '../../layouts/base.astro';
 3 | import { getProducts } from '../../api/server';
 4 | import App from '../../components/product';
 5 | 
 6 | export async function getStaticPaths() {
 7 |     const data = await getProducts(100);
 8 |     return data.products.items.map(item => {
 9 |         return {
10 |             params: {
11 |                 slug: item.slug
12 |             },
13 |             props: {
14 |                 product: item
15 |             }
16 |         }
17 |     })
18 | 
19 | }
20 | 
21 | const { product } = Astro.props;
22 | ---
23 | 
24 | <Base title="product">
25 | <App client:load product={product} showSearchBox={true} />
26 | </Base>


--------------------------------------------------------------------------------
/src/components/ItemCard.jsx:
--------------------------------------------------------------------------------
 1 | export default function ItemCard({ name, price, img_url, path }) {
 2 |   return (
 3 |     <div className="relative h-full overflow-hidden">
 4 |       <div className="h-full cursor-pointer">
 5 |         <a href={path} className="h-[200px] md:h-[300px] w-full flex">
 6 |           <img
 7 |             loading="lazy"
 8 |             src={`${img_url}`}
 9 |             className="object-cover hover:scale-105 transition delay-50 w-full"
10 |           />
11 |         </a>
12 |       </div>
13 |       <div className="bg-white py-xxs px-xs absolute left-xxs top-xxs rounded-sm">
14 |         <div className="text-sm">{name}</div>
15 |         <div className="text-sm text-primary">€{price}</div>
16 |       </div>
17 |     </div>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/src/components/icon/Truck.jsx:
--------------------------------------------------------------------------------
 1 | export default function Truck(props) {
 2 |   return (
 3 |     <svg
 4 |       xmlns="http://www.w3.org/2000/svg"
 5 |       className={props.className}
 6 |       fill="none"
 7 |       viewBox="0 0 24 24"
 8 |       stroke="currentColor"
 9 |       strokeWidth="2"
10 |     >
11 |       <path d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" />
12 |       <path
13 |         strokeLinecap="round"
14 |         strokeLinejoin="round"
15 |         d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"
16 |       />
17 |     </svg>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/src/components/ui/Select.jsx:
--------------------------------------------------------------------------------
 1 | export default function Select(props) {
 2 |   return (
 3 |     <div className="text-neutral-800 flex flex-col">
 4 |       {props.label && <div className="mb-xxs">{props.label}</div>}
 5 |       <div className="flex items-center rounded-sm grow px-sm py-xs border-neutral-200 border-2 focus-within:border-primary">
 6 |         <select
 7 |           onChange={props.onChange}
 8 |           defaultValue={props.selected}
 9 |           className="w-full bg-transparent focus:outline-none"
10 |         >
11 |           {props.options &&
12 |             props.options.map((o) => (
13 |               <option key={o.name} value={o.value}>
14 |                 {o.name}
15 |               </option>
16 |             ))}
17 |         </select>
18 |       </div>
19 |     </div>
20 |   );
21 | }
22 | 


--------------------------------------------------------------------------------
/src/components/Menu.jsx:
--------------------------------------------------------------------------------
 1 | import ChevronRightIcon from "./icon/ChevronRight";
 2 | 
 3 | export default function Menu(props) {
 4 |   return (
 5 |     <div className="m-sm bg-white flex md:block">
 6 |       {props.tabs.map((item, index) => (
 7 |         <a href={item.href} key={index}>
 8 |           <div
 9 |             className={
10 |               item.name === props.activeTab
11 |                 ? "bg-neutral-200 p-sm flex justify-between items-center"
12 |                 : "p-sm flex justify-between items-center cursor-pointer hover:bg-neutral-50"
13 |             }
14 |             key={index}
15 |             onClick={item.onClick}
16 |           >
17 |             {item.value}
18 |             <ChevronRightIcon className="h-3 w-3" />
19 |           </div>
20 |         </a>
21 |       ))}
22 |     </div>
23 |   );
24 | }
25 | 


--------------------------------------------------------------------------------
/src/components/store.js:
--------------------------------------------------------------------------------
 1 | import create from "zustand";
 2 | import { getActiveCustomer, getActiveOrder } from "../api/client";
 3 | import produce from "immer";
 4 | 
 5 | export const useStore = create((set) => ({
 6 |   customer: null,
 7 |   order: null,
 8 |   orderQuantity: null,
 9 |   loading: false,
10 |   fetchAll: async () => {
11 |     set({ loading: true });
12 |     const customer = (await getActiveCustomer()).activeCustomer;
13 |     customer && set({ customer: customer });
14 |     const order = (await getActiveOrder()).activeOrder;
15 |     order && set({ order: order, orderQuantity: order.totalQuantity });
16 |     set({ loading: false });
17 |   },
18 |   setCustomer: (data) => set({ customer: data }),
19 |   setOrder: (data) => set({ order: data }),
20 |   setOrderQuantity: (q) => set({ orderQuantity: q }),
21 | }));
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@example/basics",
 3 |   "version": "0.0.1",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "astro dev",
 7 |     "start": "astro dev",
 8 |     "build": "astro build",
 9 |     "preview": "astro preview"
10 |   },
11 |   "devDependencies": {
12 |     "@astrojs/node": "^0.1.1",
13 |     "@astrojs/react": "^0.1.1",
14 |     "@astrojs/tailwind": "^0.2.1",
15 |     "@astrojs/turbolinks": "^0.1.2",
16 |     "astro": "^1.0.0-beta.20",
17 |     "react": "^18.1.0",
18 |     "react-dom": "^18.1.0"
19 |   },
20 |   "dependencies": {
21 |     "@splidejs/react-splide": "^0.7.5",
22 |     "astro-spa": "^1.3.9",
23 |     "date-and-time": "^2.3.1",
24 |     "immer": "^9.0.15",
25 |     "react-router-dom": "^6.3.0",
26 |     "recoil": "^0.7.3-alpha.2",
27 |     "swr": "^1.3.0",
28 |     "zustand": "^4.0.0-rc.1"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/components/ui/Modal.jsx:
--------------------------------------------------------------------------------
 1 | export const Modal = ({ enabled, children }) => {
 2 |   return (
 3 |     <div
 4 |       className={`${
 5 |         !enabled && "hidden"
 6 |       } fixed top-0 left-0 right-0 w-full h-full flex items-center justify-center`}
 7 |     >
 8 |       <div className="bg-neutral-800/80 absolute w-full h-full"></div>
 9 |       <div className="bg-white z-10 p-md rounded-sm flex flex-col drop-shadow-xl">
10 |         {children}
11 |       </div>
12 |     </div>
13 |   );
14 | };
15 | 
16 | export const ModalContent = (props) => {
17 |   return <div className="my-sm">{props.children}</div>;
18 | };
19 | 
20 | export const ModalTitle = (props) => {
21 |   return <div className="text-2xl font-semibold">{props.children}</div>;
22 | };
23 | 
24 | export const ModalAction = (props) => {
25 |   return <div>{props.children}</div>;
26 | };
27 | 


--------------------------------------------------------------------------------
/src/api/schema.js:
--------------------------------------------------------------------------------
 1 | export const OrderSchema = `
 2 |   id
 3 |   state
 4 |   createdAt
 5 |   code
 6 |   totalQuantity
 7 |   shipping
 8 |   subTotal
 9 |   total
10 |   customer {
11 |     id
12 |     firstName
13 |     lastName
14 |     emailAddress
15 |   }
16 |   lines {
17 |     id
18 |     featuredAsset {
19 |       preview
20 |     }
21 |     productVariant {
22 |       name
23 |       product {
24 |         name
25 |         slug
26 |       }
27 |       featuredAsset {
28 |         preview
29 |       }
30 |     }
31 |     quantity
32 |     linePrice
33 |   }
34 | `;
35 | 
36 | export const CustomerSchema = `
37 |     lastName
38 |     firstName
39 |     emailAddress
40 |     phoneNumber
41 |     addresses {
42 |         fullName
43 |         streetLine1
44 |         streetLine2
45 |         city
46 |         province
47 |         phoneNumber
48 |         defaultShippingAddress
49 |     }
50 |     user {
51 |         id
52 |     }
53 |     orders {
54 |         items {
55 |         ${OrderSchema}
56 |         }
57 |     }
58 | `;
59 | 


--------------------------------------------------------------------------------
/src/components/profile/Address.jsx:
--------------------------------------------------------------------------------
 1 | import { Card, CardContent, CardTitle } from "../ui/Card";
 2 | import Button from "../ui/Button";
 3 | import Badge from "../ui/Badge";
 4 | 
 5 | export default function ProfileAddress({ addresses }) {
 6 |   return (
 7 |     <Card>
 8 |       <CardTitle>
 9 |         <div className="flex items-center">Shipping address</div>
10 |       </CardTitle>
11 |       <CardContent>
12 |         {addresses?.map((item, index) => (
13 |           <div
14 |             className="p-sm border-2 border-neutral-300 w-fit relative"
15 |             key={index}
16 |           >
17 |             <div>{item.fullName}</div>
18 |             <div>{item.streetLine1}</div>
19 |             <div>{`${item.city}, ${item.province}`}</div>
20 |             <div>{item.phoneNumber}</div>
21 |             {item.defaultShippingAddress && (
22 |               <div className="mt-sm">
23 |                 <Badge>default</Badge>
24 |               </div>
25 |             )}
26 |           </div>
27 |         ))}
28 |       </CardContent>
29 |     </Card>
30 |   );
31 | }
32 | 


--------------------------------------------------------------------------------
/src/components/product/index.jsx:
--------------------------------------------------------------------------------
 1 | import Nav from "../Nav";
 2 | import ProductCard from "./ProductCard";
 3 | import { useState, useEffect } from "react";
 4 | import { useStore } from "../store";
 5 | export default function App({ product, showSearchBox }) {
 6 |   const [showMiniCart, setShowMiniCart] = useState(false);
 7 |   const customer = useStore((state) => state.customer);
 8 |   const orderQuantity = useStore((state) => state.orderQuantity);
 9 |   const fetchAll = useStore((state) => state.fetchAll);
10 | 
11 |   useEffect(() => {
12 |     fetchAll();
13 |   }, []);
14 | 
15 |   return (
16 |     <div>
17 |       <Nav
18 |         customerName={
19 |           customer ? `${customer?.firstName} ${customer?.lastName}` : null
20 |         }
21 |         totalQuantity={orderQuantity}
22 |         showMiniCart={showMiniCart}
23 |         setShowMiniCart={setShowMiniCart}
24 |         showSearchBox={showSearchBox}
25 |       />
26 |       <div className="max-w-7xl my-lg mx-auto">
27 |         <ProductCard product={product} setShowMiniCart={setShowMiniCart} />
28 |       </div>
29 |     </div>
30 |   );
31 | }
32 | 


--------------------------------------------------------------------------------
/src/components/ui/Badge.jsx:
--------------------------------------------------------------------------------
 1 | export default function Badge(props) {
 2 |   let styleColor;
 3 |   switch (props.type) {
 4 |     case "neutral":
 5 |       styleColor = "bg-neutral-100 text-neutral-900 hover:ring-neutral-300";
 6 |       break;
 7 |     case "secondary":
 8 |       styleColor = "bg-secondary text-white  hover:ring-secondary/40";
 9 |       break;
10 |     case "transparent":
11 |       styleColor = "bg-transparent hover:ring-transparent text-neutral-900";
12 |       break;
13 |     default:
14 |       // styleColor = "bg-primary text-gray-900 hover:ring-gray-900";
15 |       styleColor = "bg-primary text-white";
16 |       break;
17 |   }
18 | 
19 |   let styleSize;
20 |   switch (props.size) {
21 |     case "medium":
22 |       styleSize = "py-xs px-md";
23 |       break;
24 |     case "large":
25 |       styleSize = "py-sm px-lg";
26 |       break;
27 |     default:
28 |       styleSize = "py-xxs px-sm";
29 |       break;
30 |   }
31 |   return (
32 |     <span
33 |       className={`${styleColor} ${styleSize} text-sm rounded-lg ring-2 ring-primary/40`}
34 |     >
35 |       {props.children}
36 |     </span>
37 |   );
38 | }
39 | 


--------------------------------------------------------------------------------
/src/components/ui/Input.jsx:
--------------------------------------------------------------------------------
 1 | export default function Input(props) {
 2 |   let backgroundStyle = props.disabled ? "bg-neutral-200" : "bg-transparent";
 3 |   backgroundStyle = props.backgroundStyle
 4 |     ? props.backgroundStyle
 5 |     : backgroundStyle;
 6 |   return (
 7 |     <div className="text-neutral-800 flex flex-col grow">
 8 |       {props.label && <div className="mb-xxs">{props.label}</div>}
 9 |       <div
10 |         className={`flex border-neutral-200 border-2 items-center rounded-sm px-sm py-xs focus-within:outline-none focus-within:border-primary ${backgroundStyle}`}
11 |       >
12 |         <input
13 |           required={props.required}
14 |           className="transition p-0 m-0 grow border-none focus:outline-none bg-transparent"
15 |           type={props.type}
16 |           onChange={props.onChange}
17 |           onInput={props.onInput}
18 |           placeholder={props.placeholder ? props.placeholder : ""}
19 |           min={props.min}
20 |           max={props.max}
21 |           disabled={props.disabled}
22 |           defaultValue={props.value}
23 |         />
24 |         {props.icon}
25 |       </div>
26 |     </div>
27 |   );
28 | }
29 | 


--------------------------------------------------------------------------------
/src/components/OrderSummary.jsx:
--------------------------------------------------------------------------------
 1 | import { Card, CardTitle, CardContent } from "./ui/Card";
 2 | import Button from "./ui/Button";
 3 | 
 4 | export default function OrderSummary({ order, showCheckoutButton }) {
 5 |   return (
 6 |     <div className="h-fit">
 7 |       <Card>
 8 |         <CardTitle>Order Summary</CardTitle>
 9 |         <CardContent>
10 |           <div className="flex justify-between">
11 |             <span>Subtotal</span>
12 |             <span>€{order && (order?.subTotal / 100).toFixed(2)}</span>
13 |           </div>
14 |           <div className="flex justify-between">
15 |             <span>Shipping</span>
16 |             <span>€{order && (order?.shipping / 100).toFixed(2)}</span>
17 |           </div>
18 |           <hr className="my-sm border-2 border-neutral-600" />
19 |           <div className="flex justify-between mb-sm">
20 |             <span>Total</span>
21 |             <span>€{order && (order?.total / 100).toFixed(2)}</span>
22 |           </div>
23 |           {showCheckoutButton && (
24 |             <a href="/checkout">
25 |               <Button>Checkout</Button>
26 |             </a>
27 |           )}
28 |         </CardContent>
29 |       </Card>
30 |     </div>
31 |   );
32 | }
33 | 


--------------------------------------------------------------------------------
/src/pages/collection/[slug].astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Base from "../../layouts/base.astro";
 3 | import { getCollections } from "../../api/server";
 4 | import App from '../../components/collection'
 5 | 
 6 | export async function getStaticPaths() {
 7 | 	const data = await getCollections();
 8 | 
 9 | 	return data.collections.items.map(item => {
10 | 		let products = {};
11 | 		item.productVariants.items.map(item => {
12 | 			products[item.product.id] = item.product
13 | 		})
14 | 		return {
15 | 			params: {
16 | 				slug: item.slug
17 | 			},
18 | 			props: {
19 | 				products: Object.values(products),
20 | 				name: item.name
21 | 			}
22 | 		}
23 | 	})
24 | 
25 | }
26 | 
27 | // const cookie = Astro.request.headers.get('cookie');
28 | // let totalQuantity, customerName;
29 | // if (cookie) {
30 | // 	totalQuantity = (await getActiveOrder(cookie)).activeOrder?.totalQuantity;
31 | // 	const activeCustomer = (await getActiveCustomer(cookie)).activeCustomer;
32 | // 	if (activeCustomer) customerName = activeCustomer?.firstName + ' ' + activeCustomer?.lastName;
33 | // }
34 | 
35 | const { name } = Astro.props;
36 | const { products } = Astro.props
37 | ---
38 | 
39 | <Base>
40 | <App client:load name={name} products={products} />
41 | </Base>


--------------------------------------------------------------------------------
/src/styles/global.css:
--------------------------------------------------------------------------------
 1 | /* * {
 2 | 	box-sizing: border-box;
 3 | 	margin: 0;
 4 | }
 5 | 
 6 | :root {
 7 | 	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
 8 | 		Apple Color Emoji, Segoe UI Emoji;
 9 | 	font-size: 1rem;
10 | 	--user-font-scale: 1rem - 16px;
11 | 	font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem);
12 | }
13 | 
14 | body {
15 | 	padding: 4rem 2rem;
16 | 	width: 100%;
17 | 	min-height: 100vh;
18 | 	display: grid;
19 | 	justify-content: center;
20 | 	background: #f9fafb;
21 | 	color: #111827;
22 | }
23 | 
24 | @media (prefers-color-scheme: dark) {
25 | 	body {
26 | 		background: #111827;
27 | 		color: #fff;
28 | 	}
29 | } */
30 | 
31 | input[type="checkbox"]:checked {
32 |   background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
33 |   border-color: transparent;
34 |   background-color: currentColor;
35 |   background-size: 100% 100%;
36 |   background-position: center;
37 |   background-repeat: no-repeat;
38 | }
39 | 
40 | body {
41 |   /* @apply bg-red-50; */
42 |   @apply text-neutral-800;
43 | }
44 | 


--------------------------------------------------------------------------------
/tailwind-themes.js:
--------------------------------------------------------------------------------
 1 | const colors = require("tailwindcss/colors");
 2 | 
 3 | module.exports = {
 4 |   defaultTheme: {
 5 |     spacing: {
 6 |       0: 0,
 7 |       1: "4px",
 8 |       2: "8px",
 9 |       3: "16px",
10 |       4: "24px",
11 |       5: "32px",
12 |       6: "48px",
13 |       sm: "16px",
14 |       md: "24px",
15 |       lg: "32px",
16 |       xl: "48px",
17 |     },
18 |     borderRadius: {
19 |       sm: "10px",
20 |       DEFAULT: "4px",
21 |       md: "16px",
22 |       lg: "32px",
23 |       full: "9999px",
24 |     },
25 |     fontSize: {
26 |       xs: ["10px", "12px"],
27 |       sm: ["14px", "21px"],
28 |       base: ["16px", "24px"],
29 |       lg: ["18px", "21.6px"],
30 |       xl: ["20px", "24px"],
31 |       "2xl": ["24px", "28.8px"],
32 |       "3xl": ["28px", "33.6px"],
33 |       "4xl": ["32px", "38.4px"],
34 |       "5xl": ["40px", "48px"],
35 |     },
36 |     extend: {
37 |       colors: {
38 |         primary: colors.red["600"],
39 |         secondary: colors.green["400"],
40 |         neutral: colors.neutral,
41 |       },
42 |       spacing: {
43 |         sm: "16px",
44 |         xs: "8px",
45 |         xxs: "4px",
46 |         40: "160px",
47 |       },
48 |       flexShrink: {
49 |         2: 2,
50 |       },
51 |     },
52 |   },
53 | };
54 | 


--------------------------------------------------------------------------------
/src/components/MiniCart.jsx:
--------------------------------------------------------------------------------
 1 | import Button from "./ui/Button";
 2 | import ShoppingBagIcon from "./icon/ShoppingBag";
 3 | export default function MiniCart({
 4 |   showMiniCart,
 5 |   setShowMiniCart,
 6 |   totalQuantity,
 7 | }) {
 8 |   return (
 9 |     <div className="relative transition">
10 |       <div className="z-50 relative">
11 |         <a href="/cart" className="z-50">
12 |           <ShoppingBagIcon className="w-5 h-5" />
13 |           <div className="text-white font-medium text-xs bottom-1 right-0 w-3 h-3 absolute bg-primary rounded-full flex items-center justify-center">
14 |             {totalQuantity}
15 |           </div>
16 |         </a>
17 |       </div>
18 |       <div
19 |         className={
20 |           showMiniCart
21 |             ? "absolute right-0 border-2 border-neutral-800 mt-xs z-50 bg-white w-max"
22 |             : "hidden"
23 |         }
24 |       >
25 |         <div className="p-md">
26 |           <p className="mb-xs">
27 |             You have {totalQuantity} {totalQuantity > 1 ? "items" : "item"}.
28 |           </p>
29 |           <a href="/cart">
30 |             <Button>View cart</Button>
31 |           </a>
32 |         </div>
33 |       </div>
34 |       <div
35 |         className={
36 |           showMiniCart
37 |             ? "fixed top-0 left-0 right-0 w-full h-full bg-neutral-600/90 z-30"
38 |             : "hidden"
39 |         }
40 |         onClick={() => setShowMiniCart(false)}
41 |       ></div>
42 |     </div>
43 |   );
44 | }
45 | 


--------------------------------------------------------------------------------
/src/components/Footer.jsx:
--------------------------------------------------------------------------------
 1 | export default function Footer() {
 2 |   return (
 3 |     <div className="p-md bg-neutral-100">
 4 |       <div className="flex flex-wrap">
 5 |         <div className="flex flex-col p-md text-neutral-700 text-sm">
 6 |           <span className="font-semibold text-base mb-xxs">Shipping</span>
 7 |           <span>UPS</span>
 8 |           <span>DHL</span>
 9 |         </div>
10 |         <div className="flex flex-col p-md text-neutral-700 text-sm">
11 |           <span className="font-semibold text-base mb-xxs">Payment</span>
12 |           <span>Visa/Mastercard</span>
13 |           <span>Paypal</span>
14 |           <span>Klarna</span>
15 |         </div>
16 |         <div className="flex flex-col p-md text-neutral-700 text-sm">
17 |           <span className="font-semibold text-base mb-xxs">Social</span>
18 |           <span>Facebook</span>
19 |           <span>Instagram</span>
20 |         </div>
21 |         <div className="flex flex-col p-md text-neutral-700 text-sm">
22 |           <span className="font-semibold text-base mb-xxs">Contact</span>
23 |           <span>
24 |             <a href="mailto:admin@minh.berlin">admin@minh.berlin</a>
25 |           </span>
26 |         </div>
27 |       </div>
28 |       <hr className="my-sm" />
29 |       <section className="flex items-center flex-col justify-center m-xs text-sm text-neutral-500">
30 |         <p>@Minh</p>
31 |         <p>
32 |           Made with ❤️ from <span className="text-green-500">Berlin</span>
33 |         </p>
34 |       </section>
35 |     </div>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/src/components/ui/Button.jsx:
--------------------------------------------------------------------------------
 1 | import SpinnerIcon from "../icon/Spinner";
 2 | export default function Button(props) {
 3 |   let styleColor;
 4 |   switch (props.type) {
 5 |     case "neutral":
 6 |       styleColor = "bg-neutral-200 text-neutral-900 hover:ring-neutral-600";
 7 |       break;
 8 |     case "secondary":
 9 |       styleColor = "bg-secondary text-white  hover:ring-secondary/40";
10 |       break;
11 |     case "transparent":
12 |       styleColor =
13 |         "bg-transparent hover:before:content-['→_'] hover:ring-transparent text-neutral-900 font-semibold";
14 |       break;
15 |     default:
16 |       styleColor = "bg-primary text-white";
17 |       break;
18 |   }
19 | 
20 |   let styleSize;
21 |   switch (props.size) {
22 |     case "small":
23 |       styleSize = "py-xxs px-sm";
24 |       break;
25 |     case "large":
26 |       styleSize = "py-sm px-lg";
27 |       break;
28 |     default:
29 |       styleSize = "py-xs px-md";
30 |       break;
31 |   }
32 | 
33 |   let loadingStyle = props.isLoading ? "" : "";
34 |   return (
35 |     <button
36 |       onClick={props.onClick}
37 |       type={props.submit ? "submit" : "button"}
38 |       // className={`${styleColor} ${styleSize} transition flex-initial rounded-lg hover:ring-2 active:opacity-70 hover:before:content-['→_']`}
39 |       className={`${styleColor} ${styleSize} ${loadingStyle} transition flex-initial rounded-lg hover:ring-2 hover:ring-primary/40 active:opacity-70`}
40 |       disabled={props.isLoading}
41 |     >
42 |       {props.isLoading ? (
43 |         <SpinnerIcon className="h-4 w-4 border-white" />
44 |       ) : (
45 |         props.children
46 |       )}
47 |     </button>
48 |   );
49 | }
50 | 


--------------------------------------------------------------------------------
/src/components/collection/index.jsx:
--------------------------------------------------------------------------------
 1 | import Nav from "../Nav";
 2 | import { Card, CardTitle, CardContent } from "../ui/Card";
 3 | import ItemCard from "../ItemCard";
 4 | import { useStore } from "../store";
 5 | import { useEffect } from "react";
 6 | 
 7 | export default function App({ name, products }) {
 8 |   const customer = useStore((state) => state.customer);
 9 |   const order = useStore((state) => state.order);
10 |   const fetchAll = useStore((state) => state.fetchAll);
11 |   useEffect(() => {
12 |     fetchAll();
13 |   }, []);
14 |   return (
15 |     <>
16 |       <Nav
17 |         showSearchBox={true}
18 |         customerName={
19 |           customer ? `${customer.firstName} ${customer.lastName}` : null
20 |         }
21 |         totalQuantity={order ? order.totalQuantity : null}
22 |       />
23 |       <div className="max-w-7xl my-lg mx-auto">
24 |         <Card>
25 |           <CardTitle>{name}</CardTitle>
26 |           <CardContent>
27 |             <div className="flex flex-wrap">
28 |               {products.map((item) => {
29 |                 return (
30 |                   <div
31 |                     className="w-1/2 md:w-1/3 xl:w-1/4 p-xxs md:p-xs"
32 |                     key={item.slug}
33 |                   >
34 |                     <ItemCard
35 |                       img_url={item.featuredAsset.preview}
36 |                       path={`/product/${item.slug}`}
37 |                       name={item.name}
38 |                       price={item.variants[0].price / 100}
39 |                     />
40 |                   </div>
41 |                 );
42 |               })}
43 |             </div>
44 |           </CardContent>
45 |         </Card>
46 |       </div>
47 |     </>
48 |   );
49 | }
50 | 


--------------------------------------------------------------------------------
/src/components/Nav.jsx:
--------------------------------------------------------------------------------
 1 | import Button from "../components/ui/Button";
 2 | import ElasticSearch from "./ElasticSearch";
 3 | import MiniCart from "./MiniCart";
 4 | 
 5 | export default function Nav({
 6 |   showMiniCart,
 7 |   setShowMiniCart,
 8 |   showSearchBox,
 9 |   customerName,
10 |   totalQuantity,
11 | }) {
12 |   return (
13 |     <div className="m-sm">
14 |       <div className="flex justify-between items-center">
15 |         <span className="font-semibold text-lg">
16 |           <a href="/">Storefront</a>
17 |         </span>
18 |         {showSearchBox && (
19 |           <div className="grow px-xs hidden md:flex max-w-md">
20 |             <ElasticSearch />
21 |           </div>
22 |         )}
23 |         <div className="flex items-center">
24 |           {customerName ? (
25 |             <a href="/profile" className="font-semibold">
26 |               {customerName}
27 |             </a>
28 |           ) : (
29 |             <div className="flex">
30 |               <a href="/register">
31 |                 <Button size="small" type="transparent">
32 |                   Register
33 |                 </Button>
34 |               </a>
35 |               <a href="/login">
36 |                 <Button size="small">Login</Button>
37 |               </a>
38 |             </div>
39 |           )}
40 |           <div className="relative">
41 |             <MiniCart
42 |               showMiniCart={showMiniCart}
43 |               setShowMiniCart={setShowMiniCart}
44 |               totalQuantity={totalQuantity}
45 |             />
46 |           </div>
47 |         </div>
48 |       </div>
49 |       <div className="flex grow py-xs md:hidden">
50 |         <ElasticSearch />
51 |       </div>
52 |     </div>
53 |   );
54 | }
55 | 


--------------------------------------------------------------------------------
/src/components/checkout/Login.jsx:
--------------------------------------------------------------------------------
 1 | import Input from "../ui/Input";
 2 | import Button from "../ui/Button";
 3 | import Check from "../ui/Check";
 4 | import { useState } from "react";
 5 | import { login, getActiveOrder } from "../../api/client";
 6 | 
 7 | export default function Login({ setOrder }) {
 8 |   const [password, setPassword] = useState("");
 9 |   const [rememberMe, setRememberMe] = useState(false);
10 |   const [email, setEmail] = useState("");
11 |   return (
12 |     <form
13 |       className="w-full md:w-1/2 border-neutral-200 border-2 p-lg h-fit"
14 |       onSubmit={async (event) => {
15 |         event.preventDefault();
16 |         await login(email, password, true);
17 |         setOrder((await getActiveOrder()).activeOrder);
18 |       }}
19 |     >
20 |       <div className="text-2xl mb-sm font-semibold">Login</div>
21 |       <div className="mb-xs">
22 |         <Input
23 |           type="email"
24 |           label="Email*"
25 |           required
26 |           onChange={(event) => setEmail(event.target.value)}
27 |         />
28 |       </div>
29 |       <div className="mb-xs">
30 |         <Input
31 |           type="password"
32 |           label="Password*"
33 |           required
34 |           onChange={(event) => setPassword(event.target.value)}
35 |         />
36 |       </div>
37 |       <div className="mb-md">
38 |         <Check
39 |           label="Remember me"
40 |           onChange={() => setRememberMe(!rememberMe)}
41 |         />
42 |       </div>
43 |       <div className="my-sm">
44 |         <Button submit>Login</Button>
45 |       </div>
46 |       <span className="text-sm text-neutral-600">
47 |         Please login if you're already registered with us.
48 |       </span>
49 |     </form>
50 |   );
51 | }
52 | 


--------------------------------------------------------------------------------
/src/components/ElasticSearch.jsx:
--------------------------------------------------------------------------------
 1 | import Input from "./ui/Input";
 2 | import SearchIcon from "./icon/Search";
 3 | import { useState, useEffect } from "react";
 4 | import { search } from "../api/client";
 5 | 
 6 | export default function ElasticSearch() {
 7 |   const [items, setItems] = useState([]);
 8 |   const [term, setTerm] = useState("");
 9 | 
10 |   useEffect(() => {
11 |     const timeOutId = setTimeout(async () => {
12 |       if (term) {
13 |         const data = await search(term);
14 |         if (data.search.totalItems > 0) {
15 |           setItems(data.search.items);
16 |         } else {
17 |           setItems([{ productName: "No product found." }]);
18 |         }
19 |       } else {
20 |         setItems([]);
21 |       }
22 |     }, 300);
23 |     return () => clearTimeout(timeOutId);
24 |   }, [term]);
25 |   return (
26 |     <>
27 |       <div className="relative z-20 w-full font-medium">
28 |         <Input
29 |           icon={
30 |             <div>
31 |               <SearchIcon className="w-4 h-4" />
32 |             </div>
33 |           }
34 |           type="text"
35 |           onChange={(event) => setTerm(event.target.value)}
36 |         />
37 |         {items.length > 0 && (
38 |           <div className="absolute bg-white w-full border-2 border-neutral-200">
39 |             {items.map((item, index) => (
40 |               <div key={index} className="px-sm py-xs hover:bg-neutral-200">
41 |                 {item.productName === "No product found." ? (
42 |                   item.productName
43 |                 ) : (
44 |                   <a href={`/product/${item.slug}`} className="block">
45 |                     {item?.productName}
46 |                   </a>
47 |                 )}
48 |               </div>
49 |             ))}
50 |           </div>
51 |         )}
52 |       </div>
53 |     </>
54 |   );
55 | }
56 | 


--------------------------------------------------------------------------------
/src/components/cart/index.jsx:
--------------------------------------------------------------------------------
 1 | import OrderLine from "./OrderLine";
 2 | import OrderSummary from "../OrderSummary";
 3 | import { Card, CardTitle, CardContent } from "../ui/Card";
 4 | import Nav from "../Nav";
 5 | import { useEffect } from "react";
 6 | import { useStore } from "../store";
 7 | 
 8 | export default function App({ showSearchBox }) {
 9 |   const customer = useStore((state) => state.customer);
10 |   const order = useStore((state) => state.order);
11 |   const fetchAll = useStore((state) => state.fetchAll);
12 |   const setOrder = useStore((state) => state.setOrder);
13 |   const loading = useStore((state) => state.loading);
14 | 
15 |   useEffect(() => {
16 |     fetchAll();
17 |   }, []);
18 |   return (
19 |     <div>
20 |       <Nav
21 |         customerName={
22 |           customer ? `${customer.firstName} ${customer.lastName}` : null
23 |         }
24 |         totalQuantity={order?.totalQuantity}
25 |         showSearchBox={showSearchBox}
26 |       />
27 |       <div className="max-w-7xl my-lg mx-auto">
28 |         <div className="flex flex-wrap md:flex-nowrap">
29 |           <div className="w-full md:w-2/3">
30 |             <Card>
31 |               <CardTitle>Cart</CardTitle>
32 |               <CardContent>
33 |                 {order?.lines &&
34 |                   order?.lines.map((line, index) => (
35 |                     <OrderLine
36 |                       key={index}
37 |                       line={line}
38 |                       quantities={[1, 2, 3]}
39 |                       setOrder={setOrder}
40 |                     />
41 |                   ))}
42 |               </CardContent>
43 |             </Card>
44 |           </div>
45 |           <div className="w-full md:w-1/3 bg-neutral-200 p-sm m-sm">
46 |             <OrderSummary order={order} showCheckoutButton={true} />
47 |           </div>
48 |         </div>
49 |       </div>
50 |     </div>
51 |   );
52 | }
53 | 


--------------------------------------------------------------------------------
/src/components/profile/Order.jsx:
--------------------------------------------------------------------------------
 1 | import { Card, CardContent, CardTitle } from "../ui/Card";
 2 | import Disclosure from "../ui/Disclosure";
 3 | import OrderLine from "../cart/OrderLine";
 4 | 
 5 | export default function ProfileOrder({ orders }) {
 6 |   function parseDate(input) {
 7 |     return input.slice(0, 10);
 8 |   }
 9 |   return (
10 |     <Card>
11 |       <CardTitle>Order</CardTitle>
12 |       <CardContent>
13 |         <div>
14 |           {orders &&
15 |             orders.map((order, index) => (
16 |               <Disclosure
17 |                 key={index}
18 |                 title={
19 |                   <div className="mb-xs p-sm border-2 border-neutral-200 cursor-pointer hover:bg-neutral-200">
20 |                     <div className="text-lg font-medium">
21 |                       Order code: {order.code}
22 |                     </div>
23 |                     <div className="flex justify-between mt-xs text-neutral-600">
24 |                       <span>Items: {order.totalQuantity}</span>
25 |                       <span>Ordered at: {parseDate(order.createdAt)}</span>
26 |                     </div>
27 |                   </div>
28 |                 }
29 |                 content={
30 |                   <div className="p-xs md:p-sm">
31 |                     {order.lines.map((line, index) => (
32 |                       <div className="" key={index}>
33 |                         <OrderLine key={index} line={line} />
34 |                       </div>
35 |                     ))}
36 |                     <hr className="my-sm text-neutral-200" />
37 |                     <div className="flex justify-between p-xs font-medium">
38 |                       <span>Shipping: </span>
39 |                       <span>€{order.shipping}</span>
40 |                     </div>
41 |                     <div className="flex justify-between p-xs font-medium">
42 |                       <span>Total: </span>
43 |                       <span>€{order.total}</span>
44 |                     </div>
45 |                   </div>
46 |                 }
47 |               />
48 |             ))}
49 |         </div>
50 |       </CardContent>
51 |     </Card>
52 |   );
53 | }
54 | 


--------------------------------------------------------------------------------
/src/components/checkout/Payment.jsx:
--------------------------------------------------------------------------------
 1 | import Button from "../ui/Button";
 2 | import { useState, useEffect } from "react";
 3 | import {
 4 |   addPaymentToOrder,
 5 |   getEligiblePaymentMethods,
 6 |   transitionOrderToState,
 7 | } from "../../api/client";
 8 | export default function Payment({ setOrder }) {
 9 |   const [paymentMethod, setPaymentMethod] = useState({});
10 |   const [paymentMethods, setPaymentMethods] = useState([]);
11 | 
12 |   useEffect(() => {
13 |     async function fetchPaymentMethods() {
14 |       const data = await getEligiblePaymentMethods();
15 |       setPaymentMethods(data.eligiblePaymentMethods);
16 |     }
17 |     fetchPaymentMethods();
18 |   }, []);
19 |   return (
20 |     <form
21 |       onSubmit={async (event) => {
22 |         event.preventDefault();
23 |         const data = (await addPaymentToOrder(paymentMethod?.code, { id: 12 }))
24 |           .addPaymentToOrder;
25 |         setOrder({ ...data, totalQuantity: null });
26 |       }}
27 |     >
28 |       <div className="text-lg bg-neutral-100 p-sm mb-xs">Step 2: Payment</div>
29 |       <div className="text-sm my-xs text-neutral-700">
30 |         Please select the payment method and authorized with the provider.
31 |       </div>
32 |       <div className="flex">
33 |         {paymentMethods.map((item, index) => (
34 |           <div className="flex items-center py-sm mr-sm" key={index}>
35 |             <input
36 |               type="radio"
37 |               name="payment"
38 |               value={item.id}
39 |               required
40 |               onClick={() => setPaymentMethod(item)}
41 |             />
42 |             <label className="ml-xs">{item.name}</label>
43 |           </div>
44 |         ))}
45 |       </div>
46 |       <div className="mt-sm">
47 |         <Button submit>Next</Button>
48 |       </div>
49 |       <div className="mt-xs">
50 |         <Button
51 |           type="neutral"
52 |           onClick={async () => {
53 |             setOrder(
54 |               (await transitionOrderToState("AddingItems"))
55 |                 .transitionOrderToState
56 |             );
57 |           }}
58 |         >
59 |           ← Modify shipping details
60 |         </Button>
61 |       </div>
62 |     </form>
63 |   );
64 | }
65 | 


--------------------------------------------------------------------------------
/src/components/cart/OrderLine.jsx:
--------------------------------------------------------------------------------
 1 | import Select from "../ui/Select";
 2 | import { adjustOrderLine, removeOrderLine } from "../../api/client";
 3 | import TrashIcon from "../icon/Trash";
 4 | 
 5 | export default function OrderLine({ line, quantities, setOrder }) {
 6 |   return (
 7 |     <div className="flex justify-center text-neutral-600">
 8 |       <div className="w-[80px] md:w-[120px] flex p-xs justify-center">
 9 |         <a href={`/product/${line.productVariant.product.slug}`}>
10 |           <img
11 |             className="object-contain w-full"
12 |             src={`${line.featuredAsset.preview}?preset=thumb`}
13 |           />
14 |         </a>
15 |       </div>
16 |       <div className="flex justify-between grow">
17 |         <div className="p-xs">
18 |           <div className="font-medium">{line.productVariant.product.name}</div>
19 |           <div className="text-sm my-xs">{line.productVariant.name}</div>
20 |           <div className="w-max">
21 |             {quantities ? (
22 |               <div className="flex items-center">
23 |                 <Select
24 |                   options={quantities.map((item) => {
25 |                     return {
26 |                       name: item,
27 |                       value: item,
28 |                     };
29 |                   })}
30 |                   selected={line.quantity}
31 |                   onChange={async (event) => {
32 |                     const data = await adjustOrderLine(
33 |                       Number(line.id),
34 |                       Number(event.target.value)
35 |                     );
36 |                     console.log("change ", data.adjustOrderLine);
37 |                     setOrder(data.adjustOrderLine);
38 |                   }}
39 |                 />
40 |                 <div
41 |                   className="ml-xs cursor-pointer"
42 |                   onClick={async () => {
43 |                     setOrder((await removeOrderLine(line.id)).removeOrderLine);
44 |                   }}
45 |                 >
46 |                   <TrashIcon className="w-4 h-4" />
47 |                 </div>
48 |               </div>
49 |             ) : (
50 |               "x " + line.quantity
51 |             )}
52 |           </div>
53 |         </div>
54 |         <div className="p-xs">
55 |           <span className="font-semibold">{`€${line.linePrice / 100}`}</span>
56 |         </div>
57 |       </div>
58 |     </div>
59 |   );
60 | }
61 | 


--------------------------------------------------------------------------------
/src/components/profile/Account.jsx:
--------------------------------------------------------------------------------
 1 | import { Card, CardContent, CardTitle } from "../ui/Card";
 2 | import Input from "../ui/Input";
 3 | import Button from "../ui/Button";
 4 | import { updateCustomer } from "../../api/client";
 5 | import { useState } from "react";
 6 | import { useStore } from "../store";
 7 | 
 8 | export default function ProfileAccount({ customer }) {
 9 |   const [firstName, setFirstName] = useState(customer.firstName);
10 |   const [lastName, setLastName] = useState(customer.lastName);
11 |   const [phoneNumber, setPhoneNumber] = useState(customer.phoneNumber);
12 |   const setCustomer = useStore((state) => state.setCustomer);
13 |   return (
14 |     <Card>
15 |       <CardTitle>Account</CardTitle>
16 |       <CardContent>
17 |         <form
18 |           onSubmit={async (event) => {
19 |             event.preventDefault();
20 |             const data = (
21 |               await updateCustomer(firstName, lastName, phoneNumber)
22 |             ).updateCustomer;
23 |             setCustomer({
24 |               ...customer,
25 |               firstName: data.firstName,
26 |               lastName: data.lastName,
27 |               phoneNumber: data.phoneNumber,
28 |             });
29 |           }}
30 |         >
31 |           <div className="mb-xs">
32 |             <Input
33 |               type="text"
34 |               label="First name"
35 |               value={firstName}
36 |               onChange={(event) => setFirstName(event.target.value)}
37 |             />
38 |           </div>
39 |           <div className="mb-xs">
40 |             <Input
41 |               type="text"
42 |               label="Last name"
43 |               value={lastName}
44 |               onChange={(event) => setLastName(event.target.value)}
45 |             />
46 |           </div>
47 |           <div className="mb-xs">
48 |             <Input
49 |               type="tel"
50 |               label="Phone number"
51 |               value={phoneNumber}
52 |               onChange={(event) => setPhoneNumber(event.target.value)}
53 |             />
54 |           </div>
55 |           <div className="mb-sm">
56 |             <Input
57 |               type="text"
58 |               label="Email"
59 |               value={customer.emailAddress}
60 |               disabled
61 |             />
62 |           </div>
63 |           <div className="self-start">
64 |             <Button submit>Update</Button>
65 |           </div>
66 |         </form>
67 |       </CardContent>
68 |     </Card>
69 |   );
70 | }
71 | 


--------------------------------------------------------------------------------
/src/components/home/index.jsx:
--------------------------------------------------------------------------------
 1 | import Nav from "../Nav";
 2 | import { Card, CardTitle, CardContent } from "../ui/Card";
 3 | import ItemCard from "../ItemCard";
 4 | import { useStore } from "../store";
 5 | import { useEffect } from "react";
 6 | 
 7 | export default function App({ collections, products }) {
 8 |   const customer = useStore((state) => state.customer);
 9 |   const order = useStore((state) => state.order);
10 |   const fetchAll = useStore((state) => state.fetchAll);
11 |   useEffect(() => {
12 |     fetchAll();
13 |   }, []);
14 |   return (
15 |     <>
16 |       <Nav
17 |         showSearchBox={true}
18 |         customerName={
19 |           customer ? `${customer.firstName} ${customer.lastName}` : null
20 |         }
21 |         totalQuantity={order ? order.totalQuantity : null}
22 |       />
23 |       <div className="max-w-7xl my-lg mx-auto">
24 |         <div>
25 |           <Card>
26 |             <CardTitle>Collections</CardTitle>
27 |             <CardContent>
28 |               <div className="flex flex-wrap">
29 |                 {collections.items?.map((item) => {
30 |                   return (
31 |                     <div
32 |                       className="w-1/2 md:w-1/3 xl:w-1/4 p-xxs md:p-xs"
33 |                       key={item.slug}
34 |                     >
35 |                       <a href={`/collection/${item.slug}`}>{item.name}</a>
36 |                     </div>
37 |                   );
38 |                 })}
39 |               </div>
40 |             </CardContent>
41 |           </Card>
42 |         </div>
43 |         <div>
44 |           <Card>
45 |             <CardTitle>Top products</CardTitle>
46 |             <CardContent>
47 |               <div className="flex flex-wrap">
48 |                 {products.items?.map((item) => {
49 |                   return (
50 |                     <div
51 |                       className="w-1/2 md:w-1/3 xl:w-1/4 p-xxs md:p-xs"
52 |                       key={item.slug}
53 |                     >
54 |                       <ItemCard
55 |                         img_url={item.featuredAsset.preview}
56 |                         path={`/product/${item.slug}`}
57 |                         name={item.name}
58 |                         price={item.variants[0].price / 100}
59 |                       />
60 |                     </div>
61 |                   );
62 |                 })}
63 |               </div>
64 |             </CardContent>
65 |           </Card>
66 |         </div>
67 |       </div>
68 |     </>
69 |   );
70 | }
71 | 


--------------------------------------------------------------------------------
/src/components/login/Login.jsx:
--------------------------------------------------------------------------------
 1 | import Button from "../ui/Button";
 2 | import Input from "../ui/Input";
 3 | import { Card, CardContent, CardTitle } from "../ui/Card";
 4 | import Check from "../ui/Check";
 5 | import { useState } from "react";
 6 | import { login } from "../../api/client";
 7 | 
 8 | export default function Login() {
 9 |   const [email, setEmail] = useState("");
10 |   const [password, setPassword] = useState("");
11 |   const [rememberMe, setRememberMe] = useState(false);
12 |   const [isLoading, setIsLoading] = useState(false);
13 |   const [errorMessage, setErrorMessage] = useState("");
14 | 
15 |   return (
16 |     <form
17 |       onSubmit={async (event) => {
18 |         event.preventDefault();
19 |         setErrorMessage("");
20 |         setIsLoading(true);
21 |         const res = await login(email, password, rememberMe);
22 |         console.log("res", res);
23 |         if (res.login.message) {
24 |           setIsLoading(false);
25 |           setErrorMessage(res.login.message);
26 |         } else if (res.login.id) {
27 |           window.location.href = "/profile";
28 |         }
29 |       }}
30 |     >
31 |       <Card>
32 |         <CardTitle>Log In</CardTitle>
33 |         <CardContent>
34 |           {errorMessage && (
35 |             <div className="my-xs text-red-600">{errorMessage}</div>
36 |           )}
37 |           <div className="mb-xs">
38 |             <Input
39 |               label="Email*"
40 |               onChange={(event) => setEmail(event.target.value)}
41 |               required
42 |               type="email"
43 |             />
44 |           </div>
45 |           <div className="mb-xs">
46 |             <Input
47 |               label="Password*"
48 |               onInput={(event) => setPassword(event.target.value)}
49 |               required
50 |               type="password"
51 |             />
52 |           </div>
53 |           <div className="mb-md">
54 |             <Check
55 |               label="Remember me"
56 |               onChange={() => setRememberMe(!rememberMe)}
57 |             />
58 |           </div>
59 |           <div className="self-start">
60 |             <Button submit isLoading={isLoading}>
61 |               Login
62 |             </Button>
63 |           </div>
64 |           <hr className="my-sm text-neutral-200" />
65 |           <div className="text-gray-500">
66 |             <span>Don't have an account? </span>
67 |             <a className="text-primary">Sign up</a>
68 |           </div>
69 |         </CardContent>
70 |       </Card>
71 |     </form>
72 |   );
73 | }
74 | 


--------------------------------------------------------------------------------
/src/components/profile/index.jsx:
--------------------------------------------------------------------------------
 1 | import ProfileMenu from "../Menu";
 2 | import ProfileOrder from "./Order";
 3 | import ProfileAccount from "./Account";
 4 | import ProfileAddress from "./Address";
 5 | import Button from "../ui/Button";
 6 | import { useState, useEffect } from "react";
 7 | import Nav from "../Nav";
 8 | import { useStore } from "../store";
 9 | import { logout } from "../../api/client";
10 | 
11 | export default function Profile() {
12 |   const [activeTab, setActiveTab] = useState("Order");
13 |   const [isLoading, setIsLoading] = useState(false);
14 | 
15 |   const customer = useStore((state) => state.customer);
16 |   const order = useStore((state) => state.order);
17 |   const fetchAll = useStore((state) => state.fetchAll);
18 | 
19 |   useEffect(() => {
20 |     fetchAll();
21 |   }, []);
22 | 
23 |   const options = ["Order", "Address", "Account"].map((item) => {
24 |     return {
25 |       name: item,
26 |       value: item,
27 |       onClick: () => {
28 |         setActiveTab(item);
29 |       },
30 |     };
31 |   });
32 |   return (
33 |     <div>
34 |       <Nav
35 |         customerName={
36 |           customer && `${customer?.firstName} ${customer?.lastName}`
37 |         }
38 |         totalQuantity={order?.totalQuantity}
39 |       />
40 |       <div className="max-w-7xl mx-auto">
41 |         <div className="flex flex-wrap">
42 |           <div className="w-full md:w-1/3">
43 |             <ProfileMenu activeTab={activeTab} tabs={options} />
44 |             <div className="p-sm">
45 |               <Button
46 |                 type="neutral"
47 |                 isLoading={isLoading}
48 |                 onClick={async () => {
49 |                   setIsLoading(true);
50 |                   const res = await logout();
51 |                   if (res.logout.success) {
52 |                     window.location.href = "/";
53 |                   } else {
54 |                     setIsLoading(false);
55 |                   }
56 |                 }}
57 |               >
58 |                 Logout
59 |               </Button>
60 |             </div>
61 |           </div>
62 |           <div className="grow">
63 |             {activeTab === "Order" && (
64 |               <ProfileOrder orders={customer?.orders?.items} />
65 |             )}
66 |             {activeTab === "Account" && <ProfileAccount customer={customer} />}
67 |             {activeTab === "Address" && (
68 |               <ProfileAddress addresses={customer.addresses} />
69 |             )}
70 |           </div>
71 |         </div>
72 |       </div>
73 |     </div>
74 |   );
75 | }
76 | 


--------------------------------------------------------------------------------
/src/components/product/ProductCard.jsx:
--------------------------------------------------------------------------------
 1 | import Button from "../ui/Button";
 2 | import Select from "../ui/Select";
 3 | import { useState } from "react";
 4 | import { addItemToOrder } from "../../api/client";
 5 | import { useStore } from "../store";
 6 | 
 7 | export default function ProductCard({ product, setShowMiniCart }) {
 8 |   const [currentVariant, setCurrentVariant] = useState(product.variants[0]);
 9 |   const [quantity, setQuantity] = useState(1);
10 |   const [isLoading, setIsLoading] = useState(false);
11 |   const setOrderQuantity = useStore((state) => state.setOrderQuantity);
12 | 
13 |   const addToBag = async () => {
14 |     setIsLoading(true);
15 |     const data = await addItemToOrder({
16 |       productVariantId: currentVariant.id,
17 |       quantity: Number(quantity),
18 |     });
19 |     // console.log("data ", data);
20 |     setIsLoading(false);
21 |     setOrderQuantity(data.addItemToOrder?.totalQuantity);
22 |     setShowMiniCart(true);
23 |     window.scroll(0, 0);
24 |   };
25 |   return (
26 |     <div className="flex p-sm flex-wrap md:flex-nowrap">
27 |       <div className="w-full md:w-1/3">
28 |         <img className="w-full" src={product.featuredAsset?.preview} />
29 |       </div>
30 |       <div className="w-full md:w-2/3 p-xs md:p-sm">
31 |         <h1 className="text-2xl font-semibold">{product.name}</h1>
32 |         <div className="my-xs text-lg font-semibold">
33 |           €{(currentVariant?.price / 100) * quantity}
34 |         </div>
35 |         <div className="my-sm">
36 |           <div dangerouslySetInnerHTML={{ __html: product.description }}></div>
37 |         </div>
38 |         <div className="my-sm text-sm">
39 |           {product.variants.map((item, index) => {
40 |             return (
41 |               <span
42 |                 key={index}
43 |                 className={
44 |                   currentVariant?.id === item.id
45 |                     ? `bg-neutral-800 text-white py-xs px-sm mr-xs mb-xs inline-flex rounded-md`
46 |                     : `bg-neutral-100 py-xs px-sm mr-xs mb-xs inline-flex rounded-md cursor-pointer hover:bg-neutral-300`
47 |                 }
48 |                 onClick={() => setCurrentVariant(item)}
49 |               >
50 |                 {item.name}
51 |               </span>
52 |             );
53 |           })}
54 |         </div>
55 | 
56 |         <div className="flex">
57 |           <div className="mr-xs">
58 |             <Select
59 |               options={[
60 |                 { name: 1, value: 1 },
61 |                 { name: 2, value: 2 },
62 |               ]}
63 |               onChange={(event) => setQuantity(event.target.value)}
64 |             />
65 |           </div>
66 |           <Button onClick={addToBag} isLoading={isLoading}>
67 |             Add to bag
68 |           </Button>
69 |         </div>
70 |       </div>
71 |     </div>
72 |   );
73 | }
74 | 


--------------------------------------------------------------------------------
/src/components/checkout/Register.jsx:
--------------------------------------------------------------------------------
  1 | import Input from "../ui/Input";
  2 | import Button from "../ui/Button";
  3 | import { useState } from "react";
  4 | import { setCustomerForOrder, registerCustomerAccount } from "../../api/client";
  5 | 
  6 | export default function Register({ setOrder }) {
  7 |   const [firstName, setFirstName] = useState("");
  8 |   const [lastName, setLastName] = useState("");
  9 |   const [phoneNumber, setPhoneNumber] = useState("");
 10 |   const [password, setPassword] = useState("");
 11 |   const [emailAddress, setEmailAddress] = useState("");
 12 |   return (
 13 |     <form
 14 |       className="w-full md:w-1/2 p-lg"
 15 |       onSubmit={async (event) => {
 16 |         event.preventDefault();
 17 |         const data = await setCustomerForOrder(
 18 |           firstName,
 19 |           lastName,
 20 |           phoneNumber,
 21 |           emailAddress
 22 |         );
 23 |         await registerCustomerAccount(
 24 |           firstName,
 25 |           lastName,
 26 |           phoneNumber,
 27 |           emailAddress,
 28 |           password
 29 |         );
 30 |         setOrder(data.setCustomerForOrder);
 31 |       }}
 32 |     >
 33 |       <div className="flex flex-wrap mb-xs ">
 34 |         <div className="w-full md:w-6/12 md:pr-xs">
 35 |           <Input
 36 |             type="text"
 37 |             label="First name*"
 38 |             onChange={(event) => setFirstName(event.target.value)}
 39 |             required
 40 |           />
 41 |         </div>
 42 |         <div className="w-full md:w-6/12">
 43 |           <Input
 44 |             type="text"
 45 |             label="Last name*"
 46 |             onChange={(event) => setLastName(event.target.value)}
 47 |             required
 48 |           />
 49 |         </div>
 50 |       </div>
 51 |       <div className="mb-xs">
 52 |         <Input
 53 |           type="email"
 54 |           label="Email*"
 55 |           onChange={(event) => setEmailAddress(event.target.value)}
 56 |           required
 57 |         />
 58 |       </div>
 59 |       {/* <div className="mb-xs">
 60 |         <Input
 61 |           type="password"
 62 |           label="Password*"
 63 |           onChange={(event) => setPassword(event.target.value)}
 64 |           required
 65 |         />
 66 |       </div> */}
 67 |       <div className="mb-xs">
 68 |         <Input
 69 |           type="tel"
 70 |           label="Phone number"
 71 |           onChange={(event) => setPhoneNumber(event.target.value)}
 72 |         />
 73 |       </div>
 74 |       {/* <div className="mt-sm">
 75 |         <Button submit>Register and continue</Button>
 76 |       </div> */}
 77 |       <div className="mb-sm">
 78 |         <Button
 79 |           type="transparent"
 80 |           onClick={async () => {
 81 |             const data = await setCustomerForOrder(
 82 |               firstName,
 83 |               lastName,
 84 |               phoneNumber,
 85 |               emailAddress
 86 |             );
 87 |             if (data.setCustomerForOrder?.message) {
 88 |               alert(data.setCustomerForOrder?.message);
 89 |             } else {
 90 |               setOrder(data.setCustomerForOrder);
 91 |             }
 92 |           }}
 93 |         >
 94 |           Continue as guest
 95 |         </Button>
 96 |       </div>
 97 |     </form>
 98 |   );
 99 | }
100 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Astro Vendure storefront
  2 | 
  3 | [Demo](https://astrossr.minh.berlin)
  4 | 
  5 | ## Description
  6 | 
  7 | This project attempts to deliever smooth, mobile-friendly e-commerce storefront experiences to customer/end user. It is powered by Vendure - headless commerce framework as backend and ~~leveraging SSR functionalities~~ and partial hydration on client side that Astro gives us.
  8 | 
  9 | **Due to the instability and server's performance, I am switching to SSG for the moment. If you're interested in SSR version in the main branch, you can check out branch /ssr also in this repository**
 10 | 
 11 | ## Features
 12 | 
 13 | This project supports common ecommerce flow such as ordering and managing profile.
 14 | 
 15 | - Order flow:
 16 | 
 17 |   1. Add item to cart
 18 |   2. Modify cart
 19 |   3. Add shipping address
 20 |   4. Authorize payment (dummy payment provider for now)
 21 | 
 22 | - Profile management:
 23 |   - Orders
 24 |   - Addresses
 25 |   - Account detail
 26 | 
 27 | ## 🚀 Project Structure
 28 | 
 29 | Inside of your Astro project, you'll see the following folders and files:
 30 | 
 31 | ### React components
 32 | 
 33 | These are responsible for building UI components and interactivities on the client. As they are just React components, you can probably extract and use them anywhere else (in React project, or Nextjs project ...).
 34 | It also follows design-guide carefully in order to create modern looking UI. By quickly modifying color primary / typography / spacing system in tailwind-themes.js you are good to go with your brand.
 35 | 
 36 | ```
 37 | ├── src/
 38 | │   ├── components/
 39 | │   │   ├── ui
 40 | │   │   │    └── Button
 41 | │   │   │    └── Input
 42 | │   │   │    └── ...
 43 | │   │   ├── icon
 44 | │   │   │    └── ShoppingBag
 45 | │   │   │    └── Search
 46 | │   │   │    └── ...
 47 | │   │   ├── cart
 48 | │   │   │    └── index.jsx
 49 | │   │   │    └── ...
 50 | │   │   ├── checkout
 51 | │   │   │    └── index.jsx
 52 | │   │   │    └── ...
 53 | │   │   ├── product
 54 | │   │   │    └── index.jsx
 55 | │   │   │    └── ...
 56 | │   │   ├── profile
 57 | │   │   │    └── index.jsx
 58 | │   │   │    └── ...
 59 | │   │   ├── login
 60 | │   │   │    └── index.jsx
 61 | │   │   │    └── ...
 62 | │   │   ├── register
 63 | │   │   │    └── index.jsx
 64 | │   │   │    └── ...
 65 | ```
 66 | 
 67 | ### Astro components
 68 | 
 69 | These are responsible for layout / non-state Astro component rendered at server.
 70 | 
 71 | ```
 72 | ├── src/
 73 | │   ├── pages/
 74 | │   │   └── index.astro
 75 | │   │   └── login.astro
 76 | │   │   └── register.astro
 77 | │   │   └── cart.astro
 78 | │   │   └── checkout.astro
 79 | │   │   ├── product
 80 | │   │   │    └── [slug].astro
 81 | │   │   ├── collection
 82 | │   │   │    └── [slug].astro
 83 | │   ├── layouts/
 84 | │   │   └── base.astro
 85 | ```
 86 | 
 87 | ### Api
 88 | 
 89 | These are responsible for api logic serving only in server or public for client.
 90 | 
 91 | ```
 92 | ├── src/
 93 | │   ├── api/
 94 | │   │   └── client.js
 95 | │   │   └── server.js
 96 | ```
 97 | 
 98 | ## Future improvements
 99 | 
100 | 1. Addresses management
101 | 2. Write test
102 | 3. ...
103 | 
104 | ## Powered by
105 | 
106 | - [Astro](https://astro.build)
107 | - [Vendure](https://www.vendure.io)
108 | - [React](https://reactjs.org)
109 | - [TailwindCSS](https://tailwindcss.com)
110 | - ...
111 | 
112 | ## About me
113 | 
114 | I am Minh from Berlin. Coding and desiging are my jobs 😁
115 | 
116 | I hope you find this project useful!
117 | 
118 | ```
119 | 
120 | ```
121 | 


--------------------------------------------------------------------------------
/src/components/checkout/index.jsx:
--------------------------------------------------------------------------------
 1 | import { Card, CardContent, CardTitle } from "../ui/Card";
 2 | import Shipping from "./Shipping";
 3 | import Payment from "./Payment";
 4 | import CustomerDetail from "./CustomerDetail";
 5 | import OrderSummary from "../OrderSummary";
 6 | import Nav from "../Nav";
 7 | import { useState, useEffect } from "react";
 8 | import { useStore } from "../store";
 9 | import SkeletonLoading from "../ui/SkeletonLoading";
10 | 
11 | export default function App({}) {
12 |   const customer = useStore((state) => state.customer);
13 |   const order = useStore((state) => state.order);
14 |   const fetchAll = useStore((state) => state.fetchAll);
15 |   const setOrder = useStore((state) => state.setOrder);
16 |   const setCustomer = useStore((state) => state.setCustomer);
17 |   // const [isLoading, setIsLoading] = useState(false);
18 |   const loading = useStore((state) => state.loading);
19 | 
20 |   useEffect(() => {
21 |     fetchAll();
22 |     // async function fetchData() {
23 |     //   setIsLoading(true);
24 |     //   const customer = (await getActiveCustomer()).activeCustomer;
25 |     //   customer && setCustomer(customer);
26 |     //   const order = (await getActiveOrder()).activeOrder;
27 |     //   order && setOrder(order);
28 |     //   setIsLoading(false);
29 |     // }
30 |     // fetchData();
31 |   }, []);
32 |   return (
33 |     <div className="">
34 |       <Nav
35 |         customerName={customer && `${customer?.firstName} ${customer.lastName}`}
36 |         totalQuantity={order?.totalQuantity}
37 |       />
38 |       <div className="max-w-5xl my-lg mx-auto">
39 |         {loading || order === null ? (
40 |           <div className="p-lg">
41 |             <SkeletonLoading rows={3} />
42 |           </div>
43 |         ) : (
44 |           <Card>
45 |             <CardTitle>Checkout</CardTitle>
46 |             <CardContent>
47 |               <div className="flex flex-wrap">
48 |                 <div className="mr-sm mb-sm">
49 |                   {order?.customer ? (
50 |                     <>
51 |                       {order?.state === "AddingItems" && (
52 |                         <Shipping setOrder={setOrder} />
53 |                       )}
54 |                       {order?.state === "ArrangingPayment" && (
55 |                         <Payment setOrder={setOrder} />
56 |                       )}
57 |                       {order?.state === "PaymentSettled" && (
58 |                         <div className="flex justify-center items-center p-xl">
59 |                           <div className="">
60 |                             <div className="text-3xl font-semibold flex flex-wrap">
61 |                               Thank you for your order {order?.code} !
62 |                             </div>
63 |                             <div className="text-base font-normal whitespace-pre mt-xs">
64 |                               You will soon receive an email as the order
65 |                               confirmation.
66 |                               {"\n"}
67 |                               Have a nice day!
68 |                             </div>
69 |                           </div>
70 |                         </div>
71 |                       )}
72 |                     </>
73 |                   ) : (
74 |                     <CustomerDetail setOrder={setOrder} />
75 |                   )}
76 |                 </div>
77 |                 {order?.state !== "PaymentSettled" && order?.customer && (
78 |                   <div className="bg-neutral-200 p-lg h-fit">
79 |                     <OrderSummary order={order} />
80 |                   </div>
81 |                 )}
82 |               </div>
83 |             </CardContent>
84 |           </Card>
85 |         )}
86 |       </div>
87 |     </div>
88 |   );
89 | }
90 | 


--------------------------------------------------------------------------------
/src/components/register/Register.jsx:
--------------------------------------------------------------------------------
  1 | import Button from "../ui/Button";
  2 | import Input from "../ui/Input";
  3 | import { Card, CardContent, CardTitle } from "../ui/Card";
  4 | import { registerCustomerAccount } from "../../api/client";
  5 | import { useState } from "react";
  6 | 
  7 | export default function SignUp() {
  8 |   const [firstName, setFirstName] = useState("");
  9 |   const [lastName, setLastName] = useState("");
 10 |   const [phoneNumber, setPhoneNumber] = useState("");
 11 |   const [password, setPassword] = useState("");
 12 |   const [emailAddress, setEmailAddress] = useState("");
 13 |   const [isLoading, setIsLoading] = useState(false);
 14 |   const [errorMessage, setErrorMessage] = useState("");
 15 |   return (
 16 |     <form
 17 |       onSubmit={async (event) => {
 18 |         event.preventDefault();
 19 |         setErrorMessage("");
 20 |         setIsLoading(true);
 21 |         const data = await registerCustomerAccount(
 22 |           firstName,
 23 |           lastName,
 24 |           phoneNumber,
 25 |           emailAddress,
 26 |           password
 27 |         );
 28 |         if (data.registerCustomerAccount?.success) {
 29 |           window.location.href = "/login";
 30 |         } else {
 31 |           setIsLoading(false);
 32 |           setErrorMessage("There is error while registering!");
 33 |         }
 34 |       }}
 35 |     >
 36 |       <Card>
 37 |         <CardTitle>Register</CardTitle>
 38 |         <CardContent>
 39 |           {errorMessage && (
 40 |             <div className="my-xs text-red-600">{errorMessage}</div>
 41 |           )}
 42 |           <div className="flex flex-wrap mb-xs">
 43 |             <div className="w-full md:w-6/12 pr-2">
 44 |               <Input
 45 |                 type="text"
 46 |                 label="First name"
 47 |                 onChange={(event) => setFirstName(event.target.value)}
 48 |               />
 49 |             </div>
 50 |             <div className="w-full md:w-6/12">
 51 |               <Input
 52 |                 type="text"
 53 |                 label="Last name"
 54 |                 onChange={(event) => setLastName(event.target.value)}
 55 |               />
 56 |             </div>
 57 |           </div>
 58 |           <div className="mb-xs">
 59 |             <Input
 60 |               type="email"
 61 |               label="Email*"
 62 |               required
 63 |               onChange={(event) => setEmailAddress(event.target.value)}
 64 |             />
 65 |           </div>
 66 |           <div className="mb-xs">
 67 |             <Input
 68 |               type="password"
 69 |               label="Password*"
 70 |               required
 71 |               onChange={(event) => setPassword(event.target.value)}
 72 |             />
 73 |           </div>
 74 |           <div className="mb-xs">
 75 |             <Input
 76 |               type="tel"
 77 |               label="Phone"
 78 |               onChange={(event) => setPhoneNumber(event.target.value)}
 79 |             />
 80 |           </div>
 81 |           <div className="my-xs">
 82 |             <Button submit isLoading={isLoading}>
 83 |               Sign up
 84 |             </Button>
 85 |           </div>
 86 |           <hr className="my-sm text-neutral-200" />
 87 |           <div className="self-start text-neutral-500">
 88 |             By clicking the 'Sign up' button, you confirm that you accept our{" "}
 89 |             <span className="underline cursor-pointer text-primary">
 90 |               Term of Use
 91 |             </span>{" "}
 92 |             and{" "}
 93 |             <span className="underline cursor-pointer text-primary">
 94 |               Privacy Policy
 95 |             </span>
 96 |           </div>
 97 |         </CardContent>
 98 |       </Card>
 99 |     </form>
100 |   );
101 | }
102 | 


--------------------------------------------------------------------------------
/src/components/checkout/Shipping.jsx:
--------------------------------------------------------------------------------
  1 | import Button from "../ui/Button";
  2 | import Input from "../ui/Input";
  3 | import { useState, useEffect } from "react";
  4 | import {
  5 |   getEligibleShippingMethods,
  6 |   setOrderShippingMethod,
  7 |   setOrderShippingAddress,
  8 |   transitionOrderToState,
  9 | } from "../../api/client";
 10 | 
 11 | export default function Shipping({ setOrder }) {
 12 |   const [shippingMethod, setShippingMethod] = useState(0);
 13 |   const [shippingMethods, setShippingMethods] = useState([]);
 14 |   const [fullName, setFullName] = useState("");
 15 |   const [streetLine1, setStreetLine1] = useState("");
 16 |   const [streetLine2, setStreetLine2] = useState("");
 17 |   const [city, setCity] = useState("");
 18 |   const [province, setProvince] = useState("");
 19 |   const [phoneNumber, setPhoneNumber] = useState(0);
 20 | 
 21 |   useEffect(() => {
 22 |     async function fetchEligibleShippingMethods() {
 23 |       const data = await getEligibleShippingMethods();
 24 |       setShippingMethods(data.eligibleShippingMethods);
 25 |     }
 26 |     fetchEligibleShippingMethods();
 27 |   }, []);
 28 |   return (
 29 |     <form
 30 |       onSubmit={async (event) => {
 31 |         event.preventDefault();
 32 |         if (shippingMethod) await setOrderShippingMethod(shippingMethod);
 33 |         await setOrderShippingAddress(
 34 |           fullName,
 35 |           streetLine1,
 36 |           streetLine2,
 37 |           city,
 38 |           province,
 39 |           phoneNumber
 40 |         );
 41 |         // );
 42 |         const data = await transitionOrderToState("ArrangingPayment");
 43 |         setOrder(data.transitionOrderToState);
 44 |       }}
 45 |     >
 46 |       <div className="text-lg bg-neutral-100 p-sm mb-xs">Step 1: Shipping</div>
 47 |       <div className="text-sm my-xs text-neutral-700">
 48 |         Please select the shipping method and fill out your shipping address.
 49 |       </div>
 50 |       <div className="flex">
 51 |         {shippingMethods.map((item, index) => (
 52 |           <div className="flex items-center py-sm mr-sm" key={index}>
 53 |             <input
 54 |               type="radio"
 55 |               name="shipping"
 56 |               value={item.id}
 57 |               required
 58 |               onClick={() => setShippingMethod(item.id)}
 59 |             />
 60 |             <label className="ml-xs">{item.name}</label>
 61 |           </div>
 62 |         ))}
 63 |       </div>
 64 |       <div className="mb-xs">
 65 |         <Input
 66 |           type="text"
 67 |           label="Full name"
 68 |           required
 69 |           onChange={(event) => setFullName(event.target.value)}
 70 |         />
 71 |       </div>
 72 |       <div className="mb-xs">
 73 |         <Input
 74 |           type="text"
 75 |           label="Street Line 1*"
 76 |           required
 77 |           onChange={(event) => setStreetLine1(event.target.value)}
 78 |         />
 79 |       </div>
 80 |       <div className="mb-xs">
 81 |         <Input
 82 |           type="text"
 83 |           label="Street Line 2"
 84 |           onChange={(event) => setStreetLine2(event.target.value)}
 85 |         />
 86 |       </div>
 87 |       <div className="flex flex-wrap mb-xs">
 88 |         <div className="w-full md:w-1/2 pr-2">
 89 |           <Input
 90 |             type="text"
 91 |             label="City"
 92 |             required
 93 |             onChange={(event) => setCity(event.target.value)}
 94 |           />
 95 |         </div>
 96 |         <div className="w-full md:w-1/2">
 97 |           <Input
 98 |             type="text"
 99 |             label="Province"
100 |             onChange={(event) => setProvince(event.target.value)}
101 |           />
102 |         </div>
103 |       </div>
104 |       <div className="mb-xs">
105 |         <Input
106 |           type="tel"
107 |           label="Phone number"
108 |           onChange={(event) => setPhoneNumber(event.target.value)}
109 |         />
110 |       </div>
111 |       <div className="mt-sm">
112 |         <Button submit>Next</Button>
113 |       </div>
114 |     </form>
115 |   );
116 | }
117 | 


--------------------------------------------------------------------------------
/src/api/server.js:
--------------------------------------------------------------------------------
  1 | import { createQuery } from "../utils/server/gqlClient";
  2 | import { OrderSchema, CustomerSchema } from "./schema";
  3 | 
  4 | export async function addItemToOrder({ productVariantId, quantity }, cookie) {
  5 |   return await createQuery(
  6 |     {
  7 |       query: `
  8 |       mutation($productVariantId: ID!, $quantity: Int!){
  9 |         addItemToOrder(productVariantId: $productVariantId, quantity: $quantity) {
 10 |           ... on Order {
 11 |             ${OrderSchema}
 12 |           }
 13 |         }
 14 |       }`,
 15 |       variables: {
 16 |         productVariantId,
 17 |         quantity,
 18 |       },
 19 |     },
 20 |     cookie
 21 |   );
 22 | }
 23 | 
 24 | export async function getActiveOrder(cookie) {
 25 |   return await createQuery(
 26 |     {
 27 |       query: `
 28 |       query {
 29 |         activeOrder {
 30 |           ${OrderSchema}
 31 |         }
 32 |       }`,
 33 |     },
 34 |     cookie
 35 |   );
 36 | }
 37 | 
 38 | export async function getCurrentUser(cookie) {
 39 |   return await createQuery(
 40 |     {
 41 |       query: `
 42 |     
 43 |     `,
 44 |     },
 45 |     cookie
 46 |   );
 47 | }
 48 | 
 49 | export async function getActiveCustomer(cookie) {
 50 |   return await createQuery(
 51 |     {
 52 |       query: `
 53 |         query {
 54 |           activeCustomer {
 55 |             ${CustomerSchema}
 56 |           }
 57 |         }`,
 58 |     },
 59 |     cookie
 60 |   );
 61 | }
 62 | 
 63 | export async function getMe(cookie) {
 64 |   return await createQuery(
 65 |     {
 66 |       query: `
 67 |         query {
 68 |           me {
 69 |             id
 70 |           }  
 71 |         }`,
 72 |     },
 73 |     cookie
 74 |   );
 75 | }
 76 | 
 77 | export async function getProducts(take) {
 78 |   return await createQuery({
 79 |     query: `
 80 |         query {
 81 |           products(options: {
 82 |             take: ${take}
 83 |           }) {
 84 |             totalItems
 85 |             items {
 86 |               id
 87 |               slug
 88 |               name
 89 |               description
 90 |               assets {
 91 |                 preview
 92 |               }
 93 |               featuredAsset {
 94 |                 preview
 95 |                 width
 96 |                 height
 97 |               }
 98 |               variants {
 99 |                 id
100 |                 name
101 |                 price
102 |               }
103 |             }
104 |           }
105 | 		    }
106 |       `,
107 |   });
108 | }
109 | 
110 | export async function login({ username, password, rememberMe }) {
111 |   console.log("argument", username, password, rememberMe);
112 |   return await createQuery({
113 |     query: `
114 |       mutation($username: String!, $password: String!, $rememberMe: Boolean) {
115 |         login(username: $username, password: $password, rememberMe: $rememberMe) {
116 |           ... on CurrentUser {
117 |             id
118 |           }
119 |         }
120 |       }
121 |     `,
122 |     variables: {
123 |       username,
124 |       password,
125 |       rememberMe,
126 |     },
127 |   });
128 | }
129 | 
130 | export async function getEligibleShippingMethods() {
131 |   return await createQuery({
132 |     query: `
133 |     query {
134 |       eligibleShippingMethods {
135 |         id
136 |         name
137 |         code
138 |         description
139 |         price
140 |         priceWithTax
141 |       }
142 |     }`,
143 |   });
144 | }
145 | 
146 | export async function getEligiblePaymentMethods() {
147 |   return await createQuery({
148 |     query: `
149 |     query {
150 |       eligiblePaymentMethods {
151 |         id
152 |         name
153 |         code
154 |         description
155 |       }
156 |     }`,
157 |   });
158 | }
159 | 
160 | export async function setOrderShippingMethod(id, cookie) {
161 |   return await createQuery(
162 |     {
163 |       query: `
164 |     mutation {
165 |       setOrderShippingMethod(shippingMethodId: ${id}) {
166 |         ... on Order {
167 |           id
168 |         }
169 |       }
170 |     }`,
171 |     },
172 |     cookie
173 |   );
174 | }
175 | 
176 | export async function addPaymentToOrder(method, metadata) {
177 |   return await createQuery({
178 |     query: `
179 |     mutation($metadata: JSON!, $method: String!) {
180 |       addPaymentToOrder(input: {
181 |         method: $method,
182 |         metadata: $metadata
183 |       }) {
184 |         ... on Order {
185 |           id
186 |         }
187 |       }
188 |     }`,
189 |     variables: {
190 |       method,
191 |       metadata,
192 |     },
193 |   });
194 | }
195 | 
196 | export async function setOrderShippingAddress(
197 |   fullName,
198 |   streetLine1,
199 |   streetLine2,
200 |   city,
201 |   province,
202 |   phoneNumber,
203 |   cookie
204 | ) {
205 |   return await createQuery(
206 |     {
207 |       query: `
208 |     mutation {
209 |       setOrderShippingAddress(input: {
210 |         fullName: "${fullName}",
211 |         streetLine1: "${streetLine1}",
212 |         streetLine2: "${streetLine2}",
213 |         city: "${city}",
214 |         province: "${province}",
215 |         countryCode: "DE",
216 |         phoneNumber: "${phoneNumber}"
217 |       }) {
218 |         ... on Order {
219 |           ${OrderSchema}
220 |         }
221 |       }
222 |     }`,
223 |     },
224 |     cookie
225 |   );
226 | }
227 | 
228 | export async function transitionOrderToState(state, cookie) {
229 |   return await createQuery(
230 |     {
231 |       query: `
232 |     mutation {
233 |       transitionOrderToState(state: "${state}") {
234 |         ... on OrderStateTransitionError {
235 |           message
236 |         }
237 |         ... on Order {
238 |           ${OrderSchema}
239 |         }
240 |       }
241 |     }
242 |     `,
243 |     },
244 |     cookie
245 |   );
246 | }
247 | 
248 | export async function getCollections() {
249 |   return await createQuery({
250 |     query: `
251 |     query {
252 |       collections {
253 |         items {
254 |           name
255 |           slug
256 |           featuredAsset {
257 |             preview
258 |           }
259 |           productVariants {
260 |             items {
261 |               name
262 |               product {
263 |                 id
264 |                 name
265 |                 slug
266 |                 featuredAsset {
267 |                   preview
268 |                 }
269 |                 variants {
270 |                   price
271 |                 }
272 |               }
273 |             }
274 |           }
275 |         }
276 |       }
277 |     }
278 |     `,
279 |   });
280 | }
281 | 
282 | export async function getCollectionsShort() {
283 |   return await createQuery({
284 |     query: `
285 |     query {
286 |       collections {
287 |         items {
288 |           name
289 |           slug
290 |           featuredAsset {
291 |             preview
292 |           }
293 |         }
294 |       }
295 |     }
296 |     `,
297 |   });
298 | }
299 | 


--------------------------------------------------------------------------------
/src/api/client.js:
--------------------------------------------------------------------------------
  1 | import { createQuery } from "../utils/client/gqlClient";
  2 | import { OrderSchema, CustomerSchema } from "./schema";
  3 | 
  4 | export async function addItemToOrder({ productVariantId, quantity }) {
  5 |   return await createQuery({
  6 |     query: `
  7 |       mutation($productVariantId: ID!, $quantity: Int!){
  8 |         addItemToOrder(productVariantId: $productVariantId, quantity: $quantity) {
  9 |           ... on Order {
 10 |             ${OrderSchema}
 11 |           }
 12 |         }
 13 |       }`,
 14 |     variables: {
 15 |       productVariantId,
 16 |       quantity,
 17 |     },
 18 |   });
 19 | }
 20 | 
 21 | export async function getActiveOrder() {
 22 |   return await createQuery({
 23 |     query: `
 24 |       query {
 25 |         activeOrder {
 26 |           ${OrderSchema}
 27 |         }
 28 |       }`,
 29 |   });
 30 | }
 31 | 
 32 | export async function getCurrentUser(id) {
 33 |   return await createQuery({
 34 |     query: `
 35 |     
 36 |     `,
 37 |   });
 38 | }
 39 | 
 40 | export async function getActiveCustomer() {
 41 |   return await createQuery({
 42 |     query: `
 43 |     query {
 44 |       activeCustomer {
 45 |         ${CustomerSchema}
 46 |       }
 47 |     }`,
 48 |   });
 49 | }
 50 | 
 51 | export async function getMe() {
 52 |   return await createQuery({
 53 |     query: `
 54 |     query {
 55 |       me {
 56 |         id
 57 |       }  
 58 |     }`,
 59 |   });
 60 | }
 61 | 
 62 | export async function getProducts() {
 63 |   return await createQuery({
 64 |     query: `
 65 |         query {
 66 |           products {
 67 |             totalItems
 68 |             items {
 69 |               id
 70 |               slug
 71 |               name
 72 |               description
 73 |               assets {
 74 |                 preview
 75 |               }
 76 |               featuredAsset {
 77 |                 preview
 78 |                 width
 79 |                 height
 80 |               }
 81 |               variants {
 82 |                 id
 83 |                 name
 84 |                 price
 85 |               }
 86 |             }
 87 |           }
 88 | 		    }
 89 |       `,
 90 |   });
 91 | }
 92 | 
 93 | export async function login(username, password, rememberMe) {
 94 |   console.log("argument", username, password, rememberMe);
 95 |   return await createQuery({
 96 |     query: `
 97 |       mutation($username: String!, $password: String!, $rememberMe: Boolean) {
 98 |         login(username: $username, password: $password, rememberMe: $rememberMe) {
 99 |           ... on CurrentUser {
100 |             id
101 |           }
102 |           ... on InvalidCredentialsError {
103 |             message
104 |           }
105 |         }
106 |       }
107 |     `,
108 |     variables: {
109 |       username,
110 |       password,
111 |       rememberMe,
112 |     },
113 |   });
114 | }
115 | 
116 | export async function getEligibleShippingMethods() {
117 |   return await createQuery({
118 |     query: `
119 |     query {
120 |       eligibleShippingMethods {
121 |         id
122 |         name
123 |         code
124 |         description
125 |         price
126 |         priceWithTax
127 |       }
128 |     }`,
129 |   });
130 | }
131 | 
132 | export async function getEligiblePaymentMethods() {
133 |   return await createQuery({
134 |     query: `
135 |     query {
136 |       eligiblePaymentMethods {
137 |         id
138 |         name
139 |         code
140 |         description
141 |       }
142 |     }`,
143 |   });
144 | }
145 | 
146 | export async function setOrderShippingMethod(id) {
147 |   return await createQuery({
148 |     query: `
149 |     mutation {
150 |       setOrderShippingMethod(shippingMethodId: ${id}) {
151 |         ... on Order {
152 |           id
153 |         }
154 |       }
155 |     }`,
156 |   });
157 | }
158 | 
159 | export async function addPaymentToOrder(method, metadata) {
160 |   return await createQuery({
161 |     query: `
162 |     mutation($metadata: JSON!, $method: String!) {
163 |       addPaymentToOrder(input: {
164 |         method: $method,
165 |         metadata: $metadata
166 |       }) {
167 |         ... on Order {
168 |           ${OrderSchema}
169 |         }
170 |       }
171 |     }`,
172 |     variables: {
173 |       method,
174 |       metadata,
175 |     },
176 |   });
177 | }
178 | 
179 | export async function setOrderShippingAddress(
180 |   fullName,
181 |   streetLine1,
182 |   streetLine2,
183 |   city,
184 |   province,
185 |   phoneNumber
186 | ) {
187 |   return await createQuery({
188 |     query: `
189 |     mutation {
190 |       setOrderShippingAddress(input: {
191 |         fullName: "${fullName}",
192 |         streetLine1: "${streetLine1}",
193 |         streetLine2: "${streetLine2}",
194 |         city: "${city}",
195 |         province: "${province}",
196 |         countryCode: "DE",
197 |         phoneNumber: "${phoneNumber}"
198 |       }) {
199 |         ... on Order {
200 |           ${OrderSchema}
201 |         }
202 |       }
203 |     }`,
204 |   });
205 | }
206 | 
207 | export async function transitionOrderToState(state) {
208 |   return await createQuery({
209 |     query: `
210 |     mutation {
211 |       transitionOrderToState(state: "${state}") {
212 |         ... on OrderStateTransitionError {
213 |           message
214 |         }
215 |         ... on Order {
216 |           ${OrderSchema}
217 |         }
218 |       }
219 |     }
220 |     `,
221 |   });
222 | }
223 | 
224 | export async function search(term) {
225 |   return await createQuery({
226 |     query: `
227 |     query {
228 |       search(input: {
229 |         term: "${term}",
230 |         take: 10
231 |       }) {
232 |         totalItems
233 |         items {
234 |           productAsset {
235 |             preview
236 |           }
237 |           productName
238 |           slug
239 |         }
240 |       }
241 |     }
242 |     `,
243 |   });
244 | }
245 | 
246 | export async function updateCustomer(firstName, lastName, phoneNumber) {
247 |   return await createQuery({
248 |     query: `
249 |     mutation {
250 |       updateCustomer(input: {
251 |         firstName: "${firstName}",
252 |         lastName: "${lastName}",
253 |         phoneNumber: "${phoneNumber}"
254 |       }) {
255 |         id
256 |         firstName
257 |         lastName
258 |         phoneNumber
259 |       }
260 |     }
261 |     `,
262 |   });
263 | }
264 | 
265 | export async function adjustOrderLine(orderLineId, quantity) {
266 |   return await createQuery({
267 |     query: `
268 |     mutation {
269 |       adjustOrderLine(orderLineId: ${orderLineId}, quantity: ${quantity}) {
270 |         ... on Order {
271 |           ${OrderSchema}
272 |         }
273 |       }
274 |     }
275 |     `,
276 |   });
277 | }
278 | 
279 | export async function removeOrderLine(orderLineId) {
280 |   return await createQuery({
281 |     query: `
282 |     mutation {
283 |       removeOrderLine(orderLineId: ${orderLineId}) {
284 |         ... on Order {
285 |           ${OrderSchema}
286 |         }
287 |       }
288 |     }
289 |     `,
290 |   });
291 | }
292 | 
293 | export async function setCustomerForOrder(
294 |   firstName,
295 |   lastName,
296 |   phoneNumber,
297 |   emailAddress
298 | ) {
299 |   return await createQuery({
300 |     query: `
301 |     mutation {
302 |       setCustomerForOrder(input: {
303 |         firstName: "${firstName}",
304 |         lastName: "${lastName}",
305 |         phoneNumber: "${phoneNumber}",
306 |         emailAddress: "${emailAddress}"
307 |       }) {
308 |         ... on Order {
309 |           ${OrderSchema}
310 |         }
311 |         ... on EmailAddressConflictError {
312 |           message
313 |           errorCode
314 |         }
315 |       }
316 |     }
317 |     `,
318 |   });
319 | }
320 | 
321 | export async function registerCustomerAccount(
322 |   firstName,
323 |   lastName,
324 |   phoneNumber,
325 |   emailAddress,
326 |   password
327 | ) {
328 |   return await createQuery({
329 |     query: `
330 |     mutation {
331 |       registerCustomerAccount(input: {
332 |         firstName: "${firstName}",
333 |         lastName: "${lastName}",
334 |         phoneNumber: "${phoneNumber}",
335 |         emailAddress: "${emailAddress}",
336 |         password: "${password}"
337 |       }) {
338 |         ... on Success {
339 |           success
340 |         }
341 |         ... on MissingPasswordError {
342 |           errorCode
343 |           message
344 |         }
345 |         ... on NativeAuthStrategyError {
346 |           errorCode
347 |           message
348 |         }
349 |       }
350 |     }
351 |     `,
352 |   });
353 | }
354 | 
355 | export async function logout() {
356 |   return await createQuery({
357 |     query: `
358 |     mutation {
359 |       logout {
360 |         success
361 |       }
362 |     }
363 |     `,
364 |   });
365 | }
366 | 


--------------------------------------------------------------------------------