Merge pull request #24 from calimania/feat/product-link

Fixes after user testing
calimania · Jan 5, 2025 · 5c9dcc6 · 5c9dcc6
2 parents 5846025 + 2ca0cba
commit 5c9dcc6
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 11 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -4,16 +4,17 @@ import Hr from "./Hr.astro";
 import LinkButton from "./LinkButton.astro";
 import type Store from "../interfaces/Store";
 
-export type activeNav = "tags" | "about" | "search" | "pages" | "blog";
+export type activeNav = "tags" | "about" | "search" | "pages" | "blog" | "products";
 
 export interface Props {
   activeNav?: activeNav;
   store?: {
     data: Store;
   };
+  products: any;
 }
 
-const { activeNav, store } = Astro.props;
+const { activeNav, store, products } = Astro.props;
 ---
 
 <header>
@@ -65,6 +66,18 @@ const { activeNav, store } = Astro.props;
               Blog
             </a>
           </li>
+          {
+            products?.length > 0 && (
+              <li>
+                <a
+                  href="/products/"
+                  class={activeNav === "products" ? "active" : ""}
+                >
+                  Products
+                </a>
+              </li>
+            )
+          }
           <li>
             <a href="/tags/" class={activeNav === "tags" ? "active" : ""}>
               Tags

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -23,7 +23,7 @@ const store = stores.find(
   (store: Store) => store.data.slug === markketplace.STORE_SLUG
 );
 
-const products = await getCollection("products");
+const products: Product[] = await getCollection("products");
 
 const posts = await getCollection("posts");
 
@@ -41,7 +41,7 @@ const links = store?.URLS || [];
 ---
 
 <Layout title={`Home | ${SITE.title}`}>
-  <Header store={store} />
+  <Header store={store} products={products} />
   <main id="main-content">
     <section id="hero">
       <h1>{store?.title || "Markketplace"}</h1>

diff --git a/src/pages/products/[slug].astro b/src/pages/products/[slug].astro
@@ -53,8 +53,10 @@ const selectedImage =
 
 <script>
   import { ProductSlideshow, ProductForm } from "../../scripts/ui.product";
-  ProductForm();
-  ProductSlideshow();
+  document.addEventListener("astro:page-load", () => {
+    ProductForm();
+    ProductSlideshow();
+  });
 </script>
 
 <Layout

diff --git a/src/pages/products/index.astro b/src/pages/products/index.astro
@@ -38,7 +38,7 @@ const { currentPage, totalPages } = Astro.props;
     description: "Physical & Digital offers from our collective",
   }}
 >
-  <Header activeNav="pages" store={store} />
+  <Header activeNav="products" store={store} products={products} />
   <main id="main-content">
     <section id="about" class="mb-10 max-w-3xl prose-img:border-0">
       {

diff --git a/src/pages/receipt.astro b/src/pages/receipt.astro
@@ -26,7 +26,9 @@ const store = stores?.find(
   import { receiptPage } from "../scripts/ui.receipt";
   const urlParams = new URLSearchParams(window.location.search);
   const sessionId: string = urlParams.get("session_id") || "";
-  receiptPage(sessionId);
+  document.addEventListener("astro:page-load", () => {
+    receiptPage(sessionId);
+  });
 </script>
 <Layout
   title={page?.SEO?.metaTitle || "Newsletter"}

diff --git a/src/scripts/ui.product.ts b/src/scripts/ui.product.ts
@@ -44,7 +44,9 @@ export type Price = {
 export type PaymentLinkOptions = {
   totalPrice: number,
   product: string,
-  prices: Price[]
+  prices: Price[],
+  includes_shipping: boolean,
+  stripe_test: boolean,
 };
 
 /**
@@ -63,6 +65,8 @@ export const createPaymentLink = async (options: PaymentLinkOptions, isTest: boo
     total: options.totalPrice,
     product: options.product,
     action: 'stripe.link',
+    includes_shipping: options.includes_shipping,
+    stripe_test: options.stripe_test,
   };
 
   // markketplace.STRAPI_URL = 'http://localhost:1337';
@@ -78,8 +82,9 @@ export const createPaymentLink = async (options: PaymentLinkOptions, isTest: boo
 
   console.log("Payment link", { request, response });
 
-  if (request.ok && response?.data?.link?.url) {
-    window.location.href = response.data.link.url;
+  const url = response?.data?.link?.response?.url;
+  if (request.ok && url) {
+    window.location.href = url;
   }
 
   return request;
@@ -94,6 +99,8 @@ export const ProductForm = function () {
     totalPrice: 0,
     product: '',
     prices: [],
+    includes_shipping: true,
+    stripe_test: false,
   };
 
   const form = document.querySelector('form[data-product-price]')
@@ -107,6 +114,8 @@ export const ProductForm = function () {
       totalPrice: options.totalPrice,
       product: options.product,
       prices: options.prices,
+      includes_shipping: options.includes_shipping,
+      stripe_test: options.stripe_test,
     });
 
     console.log({ options, response });
@@ -125,6 +134,16 @@ export const ProductForm = function () {
 
     const productData = JSON.parse(productDataString) as Product;
 
+    if (productData.Name?.match(/test/i)) {
+      // @TODO: Read from Product JSON
+      options.stripe_test = true;
+    }
+
+    if (productData.Name?.match(/digital/i)) {
+      // @TODO: Read from Product JSON
+      options.includes_shipping = false;
+    }
+
     options.product = '' + productData.id;
 
     let customPriceInput = document.querySelector('[data-input="custom-price"]')?.value;