Merge pull request vercel#46 from DSCO-Co/callamsBranch

Callams branch

site/components/common/SidebarLayout/SidebarLayout.tsx

@@ -68,6 +68,7 @@ const SidebarLayout: FC<SidebarLayoutProps> = ({
         {sidebarView === 'MOBILE_MENU_VIEW' && renderMobileNavbar()}
         {children}
       </div>
+
     </div>
   );
 };

site/components/common/UserNav/MenuSidebarView/MenuSidebarView.tsx

@@ -16,7 +16,8 @@ export default function MenuSidebarView({
   const toggleExpand = (href: string) => {
     setExpandedLink((current) => (current === href ? null : href))
   }
-  console.log(links)
+  console.log(links);
+
 
   return (
     <SidebarLayout handleClose={() => closeSidebar()}>

site/components/product/ProductCard/ProductCard.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { FC } from 'react'
 
 import {
-  AlgoliaStylizedCard,
+  // AlgoliaStylizedCard,
   CalloutProductCard,
   DefaultCard,
   ProductCardProps,
@@ -38,7 +38,7 @@ const ProductCard: FC<ProductCardProps> = ({
       className={`${rootClassName} rounded-xl`}
       aria-label={product.name}
       onClick={() => {
-        trackProductViewed(product);
+        // trackProductViewed(product);
       }}
     >
       {variant === 'slim' && <SlimCard product={product} imgProps={imgProps} />}
@@ -71,7 +71,7 @@ const ProductCard: FC<ProductCardProps> = ({
           item={item}
         />
       )}
-      {variant === 'algolia-stylized' && (
+      {/* {variant === 'algolia-stylized' && (
         <AlgoliaStylizedCard product={product} imgProps={imgProps} />
       )}
       {variant === 'callout' && (
@@ -84,7 +84,7 @@ const ProductCard: FC<ProductCardProps> = ({
           loading={loading}
           item={item}
         />
-      )}
+      )} */}
     </Link>
   )
 }

site/pages/api/webhooks/stape.ts

@@ -0,0 +1,53 @@
+// import axios from 'axios'
+
+// // localhost:3000/api/webhooks/stape
+
+// /*
+//     nextjs client -> api route -> stape.io -> gtm
+//     client: POST /api/webhooks/stape
+//     server: builds the event type, adds user data, adds product data, etc...
+//     server: POST https://ss.poochie.co/collect, whatever...
+// */
+// export default async function handler(req, res) {
+//   const requestMethod = req.method
+
+//   switch (requestMethod) {
+//     case 'GET':
+//       res.status(200).json({
+//         message: `Get requests are not supported. Did you mean to make a POST request?`,
+//       })
+//       break
+
+//     case 'POST':
+//       const eventData = req.body
+//       console.log('Received event data:', eventData)
+
+//       const url = eventData.url ? encodeURIComponent(eventData.url) : ''
+
+//       try {
+//         const response = await axios.get(
+//           `https://ss.poochie.co/g/collect?v=2&en=page_view&tid=G-1234&cid=123.456&dl=${url}`,
+//           {
+//             headers: {
+//               'x-gtm-server-preview':
+//                 'ZW52LTR8Mm1kZnBEQ1ZpdHhJemRkbkNEaU9zd3wxODc3YzgzOTNhMTFhMzVjNmNmZDQ=',
+//             },
+//           }
+//         )
+//         console.log('Axios response:', response.data)
+//       } catch (error) {
+//         console.error('Axios request failed:', error)
+//       }
+
+//       res
+//         .status(200)
+//         .json({ message: 'Hey it worked in stape routes this time' })
+//       break
+
+//     // handle other HTTP methods
+//     default:
+//       res.status(200).json({ message: 'Welcome to API Routes!' })
+//       break
+//   }
+// }
+export {}

site/pages/products/[slug].tsx

@@ -1,6 +1,8 @@
 import { Layout } from '@components/common'
 import { ProductView } from '@components/product'
 import commerce from '@lib/api/commerce'
+import { useEffect } from 'react'
+import { trackProductViewed } from '@Segment/segmentAnalytics'
 import type {
   GetStaticPathsContext,
   GetStaticPropsContext,
@@ -40,6 +42,7 @@ export async function getStaticProps({
 
   const { products: relatedProducts } = await allProductsPromise
 
+
   if (!product) {
     return {
       notFound: true,
@@ -59,6 +62,7 @@ export async function getStaticProps({
 
 export async function getStaticPaths({ locales }: GetStaticPathsContext) {
   const { products } = await commerce.getAllProductPaths()
+
 
   return {
     //
@@ -83,6 +87,15 @@ export default function Slug({
   product,
   relatedProducts,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
+
+  useEffect(() => {
+    if (product) {
+      trackProductViewed(product);
+    }
+  }, [product])
+
+
+
   const router = useRouter()
   return router.isFallback ? (
     <h1>Loading...</h1>