Add cart endpoints, handle woo session

dbertella · Nov 22, 2020 · 4b7bc3e · 4b7bc3e
1 parent 11df5af
commit 4b7bc3e
Show file tree

Hide file tree

Showing 15 changed files with 298 additions and 117 deletions.
diff --git a/lib/api.ts b/lib/api.ts
@@ -1,4 +1,4 @@
-const API_URL = `${process.env.WORDPRESS_API_URL}`;
+const API_URL = `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}`;
 
 export async function fetchAPI(query: string, options?: { variables: object }) {
   const headers = { "Content-Type": "application/json" };
@@ -9,6 +9,11 @@ export async function fetchAPI(query: string, options?: { variables: object }) {
     ] = `Bearer ${process.env.WORDPRESS_AUTH_REFRESH_TOKEN}`;
   }
 
+  const session = process.browser ? localStorage.getItem("woo-session") : null;
+  if (session) {
+    console.log(session);
+    headers["woocommerce-session"] = `Session ${session}`;
+  }
   const { variables } = options ?? {};
 
   const res = await fetch(API_URL, {
@@ -45,4 +50,3 @@ export async function getPreviewPost(id: string, idType = "DATABASE_ID") {
   );
   return data.post;
 }
-
diff --git a/lib/mutations/add-to-cart.graphql → lib/clientGql/add-to-cart.graphql b/lib/mutations/add-to-cart.graphql → lib/clientGql/add-to-cart.graphql
diff --git a/lib/clientGql/add-to-cart.ts b/lib/clientGql/add-to-cart.ts
@@ -0,0 +1,72 @@
+import { fetchAPI } from "lib";
+import { AddToCartInput } from "lib/graphql";
+
+export async function addToCart(input: AddToCartInput) {
+  const data = await fetchAPI(
+    `
+      mutation AddToCart($input: AddToCartInput!) {
+        addToCart(input: $input) {
+          cartItem {
+            key
+            product {
+              id
+              name
+              description
+              type
+              onSale
+              slug
+              averageRating
+              reviewCount
+              image {
+                id
+                sourceUrl
+                altText
+              }
+              galleryImages {
+                nodes {
+                  id
+                  sourceUrl
+                  altText
+                }
+              }
+            }
+            variation {
+              id
+              name
+              description
+              type
+              onSale
+              price
+              regularPrice
+              salePrice
+              image {
+                id
+                sourceUrl
+                altText
+              }
+              attributes {
+                nodes {
+                  id
+                  attributeId
+                  name
+                  value
+                }
+              }
+            }
+            quantity
+            total
+            subtotal
+            subtotalTax
+          }
+        }
+      }
+    `,
+    {
+      variables: {
+        input,
+      },
+    }
+  );
+
+  return data;
+}
diff --git a/lib/mutations/checkout.ts → lib/clientGql/checkout.ts b/lib/mutations/checkout.ts → lib/clientGql/checkout.ts
diff --git a/lib/mutations/clear-cart.ts → lib/clientGql/clear-cart.ts b/lib/mutations/clear-cart.ts → lib/clientGql/clear-cart.ts
diff --git a/lib/clientGql/get-cart.ts b/lib/clientGql/get-cart.ts
@@ -0,0 +1,90 @@
+import { fetchAPI } from "lib";
+
+export async function getCart() {
+  const data = await fetchAPI(
+    `
+      query GetCart {
+        cart {
+          contents {
+            nodes {
+              key
+              product {
+                id
+                name
+                description
+                type
+                onSale
+                slug
+                averageRating
+                reviewCount
+                image {
+                  sourceUrl
+                  srcSet
+                  altText
+                }
+              }
+              variation {
+                id
+                name
+                description
+                type
+                onSale
+                price
+                regularPrice
+                salePrice
+                image {
+                  id
+                  sourceUrl
+                  srcSet
+                  altText
+                  title
+                }
+                attributes {
+                  nodes {
+                    id
+                    name
+                    value
+                  }
+                }
+              }
+              quantity
+              total
+              subtotal
+              subtotalTax
+            }
+          }
+          appliedCoupons {
+            nodes {
+              id
+              discountType
+              amount
+              dateExpiry
+              products {
+                nodes {
+                  id
+                }
+              }
+              productCategories {
+                nodes {
+                  id
+                }
+              }
+            }
+          }
+          subtotal
+          subtotalTax
+          shippingTax
+          shippingTotal
+          total
+          totalTax
+          feeTax
+          feeTotal
+          discountTax
+          discountTotal
+        }
+      }
+    `
+  );
+
+  return data;
+}
diff --git a/lib/mutations/update-cart.ts → lib/clientGql/update-cart.ts b/lib/mutations/update-cart.ts → lib/clientGql/update-cart.ts
diff --git a/lib/index.ts b/lib/index.ts
@@ -9,3 +9,7 @@ export * from "./queries/products";
 export * from "./queries/home";
 export * from "./queries/news";
 export * from "./queries/page-by-slug";
+
+// Ecommerce
+export * from "./clientGql/get-cart";
+export * from "./clientGql/add-to-cart";
diff --git a/lib/queries/get-cart.ts b/lib/queries/get-cart.ts
diff --git a/lib/queries/product-by-slug.ts b/lib/queries/product-by-slug.ts
@@ -7,6 +7,7 @@ export async function getProductBySlug(slug: string) {
       fragment ProductFields on Product {
         name
         slug
+        databaseId
         seo {
           canonical
           title
@@ -54,6 +55,17 @@ export async function getProductBySlug(slug: string) {
           shortDescription
           type
           ...ProductFields
+          productElements {
+            productGallery {
+              image {
+                id
+                sourceUrl
+                srcSet
+                altText
+                title
+              }
+            }
+          }
           productTypes {
             edges {
               node {

diff --git a/lib/types.ts b/lib/types.ts
@@ -74,25 +74,20 @@ export type PageSingle = {
 };
 
 export type ProductListItem = {
-  id: string;
+  id: number;
   name: string;
   slug: string;
   price: string;
   image: MediaImage;
 };
 
-export type ProductSingle = {
-  id: string;
-  name: string;
-  productId: string;
+export type ProductSingle = ProductListItem & {
   averageRating: string;
-  slug: string;
   description: string;
   shortDescription: string;
-  image: MediaImage;
-  price: string;
   onSale: boolean;
   type: string;
+  databaseId: number;
   seo: Seo;
   productCategories: {
     edges: CategoryListItem[];

diff --git a/package.json b/package.json
@@ -11,20 +11,25 @@
   },
   "dependencies": {
     "-": "^0.0.1",
+    "@types/cookie": "^0.4.0",
     "@types/lodash": "^4.14.164",
     "D": "^1.0.0",
+    "cookie": "^0.4.1",
     "dayjs": "^1.9.5",
     "graphql": "^15.4.0",
     "graphql-import": "^1.0.2",
     "graphql-tag": "^2.11.0",
     "immer": "^7.0.14",
+    "js-cookie": "^2.2.1",
     "lodash": "^4.17.20",
     "next": "10.0.1",
     "react": "17.0.1",
     "react-cookie-consent": "^6.0.0",
     "react-dom": "17.0.1",
     "react-image-gallery": "^1.0.8",
-    "theme-ui": "^0.3.1"
+    "react-query": "^2.26.3",
+    "theme-ui": "^0.3.1",
+    "uuid": "^8.3.1"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "1.19.1",
@@ -35,6 +40,7 @@
     "@types/react": "^16.9.55",
     "@types/react-image-gallery": "^1.0.0",
     "@types/theme-ui": "^0.3.7",
+    "@types/uuid": "^8.3.0",
     "globby": "^11.0.1",
     "typescript": "^4.0.5"
   }