ok

src/App.js

@@ -2,9 +2,7 @@ import React, { useEffect, useState, useRef } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import styles from './components/Styles.module.css';
 
-// Import components
 import Login from './components/Login';
-
 import Header from './components/Header';
 import HeroSection from './components/HeroSection';
 import ServicesSection from './components/ServicesSection';
@@ -14,13 +12,11 @@ import AboutUsSection from './components/AboutUsSection';
 import KnowledgeBaseSection from './components/KnowledgeBaseSection';
 import ClientsSection from './components/ClientsSection';
 import Footer from './components/Footer';
-
 import ProductDetailPage from './components/ProductDetailPage';
-
 import Dashboard from './components/Dashboard';
 import ProductsPage from './components/pages/ProductsPage';
 
-
+import processProducts from './helper/processProducts';
 
 function HomePage({
   hoveredCard,
@@ -32,7 +28,6 @@ function HomePage({
   productSectionRef,
   courseSectionRef
 }) {
-
   return (
     <>
       <HeroSection />
@@ -49,13 +44,15 @@ function HomePage({
         hoveredCard={hoveredCard}
         setHoveredCard={setHoveredCard}
         setSelectedProduct={setSelectedProduct}
-        setShowedModal={setShowedModal} />
+        setShowedModal={setShowedModal}
+      />
       <AboutUsSection />
       <KnowledgeBaseSection />
       <ClientsSection />
     </>
   );
 }
+
 function parseJwt(token) {
   try {
     const base64Url = token.split('.')[1];
@@ -74,19 +71,26 @@ function parseJwt(token) {
 
 function App() {
   const [loading, setLoading] = useState(true);
-
-  // State yang diperlukan untuk HomePage
   const [hoveredCard, setHoveredCard] = useState(null);
-
   const [subscriptions, setSubscriptions] = useState(null);
   const [selectedProduct, setSelectedProduct] = useState({});
-  const [showedModal, setShowedModal] = useState(null); // 'product' | 'login' | null
+  const [showedModal, setShowedModal] = useState(null);
-
   const [username, setUsername] = useState(null);
 
   const productSectionRef = useRef(null);
   const courseSectionRef = useRef(null);
 
+  const [productModalRequest, setProductModalRequest] = useState(null);
+
+
+  const scrollToProduct = () => {
+    productSectionRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  const scrollToCourse = () => {
+    courseSectionRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
   const requestLogin = (nextAction) => {
     const url = new URL(window.location);
     url.searchParams.set('next', nextAction);
@@ -94,53 +98,151 @@ function App() {
     setShowedModal('login');
   };
 
+  // Ambil token dan user info dari cookie
   useEffect(() => {
-    // Ambil token dari cookies
     const match = document.cookie.match(new RegExp('(^| )token=([^;]+)'));
     if (match) {
       const token = match[2];
-
       fetch('https://bot.kediritechnopark.com/webhook/user-dev/data', {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',
           'Authorization': 'Bearer ' + token
-
         },
       })
         .then(res => res.json())
         .then(data => {
-
           if (data && data.token) {
-            // Update token with data[0].token
             document.cookie = `token=${data.token}; path=/`;
-            console.log(data)
+            setSubscriptions(data.subscriptions);
-            setSubscriptions(data.subscriptions)
             const payload = parseJwt(data.token);
             if (payload && payload.username) {
               setUsername(payload.username);
             }
-          } else {
-            console.warn('Token tidak ditemukan dalam data.');
           }
         })
         .catch(err => console.error('Fetch error:', err));
+    }
+  }, []);
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const modalType = params.get('modal');
+    const productId = params.get('product_id');
+    const authorizedUri = params.get('authorized_uri');
+    const unauthorizedUri = params.get('unauthorized_uri');
 
+    if (modalType === 'product' && productId) {
+      const token = document.cookie.match(/(^| )token=([^;]+)/)?.[2];
+
+      // Simpan semua param penting ke localStorage
+      localStorage.setItem('product_id', productId);
+      if (authorizedUri) localStorage.setItem('authorized_uri', authorizedUri);
+      if (unauthorizedUri) localStorage.setItem('unauthorized_uri', unauthorizedUri);
+
+      // Jika belum login, tampilkan modal login
+      if (!token) {
+        setShowedModal('login');
+      }
+      // Jika sudah login, tidak langsung fetch di sini — akan diproses saat subscriptions tersedia
+    }
+  }, []);
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const modalType = params.get('modal');
+    const productId = parseInt(params.get('product_id'));
+    const authorizedUri = params.get('authorized_uri');
+    const unauthorizedUri = params.get('unauthorized_uri');
+
+    const token = document.cookie.match(/(^| )token=([^;]+)/)?.[2];
+
+    if (modalType === 'product' && productId) {
+      if (!token) {
+        setShowedModal('login'); // belum login → tampilkan login modal
+      } else {
+        // sudah login → lanjutkan proses otorisasi saat subscriptions tersedia
+        setProductModalRequest({ productId, authorizedUri, unauthorizedUri });
+        console.log('modal')
+      }
     }
   }, []);
 
   useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
+    if (!productModalRequest) return;
-    if (params.has('next')) {
+
-        setShowedModal('login');
+    const { productId, authorizedUri, unauthorizedUri } = productModalRequest;
+
+    const hasAccess = subscriptions && subscriptions.some(sub => sub.product_id === productId);
+
+    if (hasAccess) {
+      if (authorizedUri) {
+        let finalUri = decodeURIComponent(authorizedUri);
+        const token = document.cookie.match(/(^| )token=([^;]+)/)?.[2];
+
+        if (finalUri.includes('token=null') || finalUri.includes('token=')) {
+          const url = new URL(finalUri);
+          url.searchParams.set('token', token || '');
+          finalUri = url.toString();
+        }
+
+        window.location.href = finalUri;
+      }
+      else {// Assuming you already imported processProducts from './processProducts'
+
+        fetch('https://bot.kediritechnopark.com/webhook/store-dev/products', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            itemsId: [productId],
+            withChildren: true,
+          }),
+        })
+          .then(res => res.json())
+          .then(data => {
+            if (Array.isArray(data) && data.length > 0) {
+              // Process the raw data to group children under their parent
+              const processed = processProducts(data);
+              // Set the first product (which should be the parent with children nested)
+              setSelectedProduct(processed[0]);
+              setShowedModal('product');
+            }
+          })
+          .catch(err => console.error('Fetch product error:', err));
+      }
+    } else {
+      if (unauthorizedUri) {
+        window.location.href = decodeURIComponent(unauthorizedUri);
+      } else {
+
+        fetch('https://bot.kediritechnopark.com/webhook/store-dev/products', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            itemsId: [productId],
+            withChildren: true,
+          }),
+        })
+          .then(res => res.json())
+          .then(data => {
+            if (Array.isArray(data) && data.length > 0) {
+              // Process the raw data to group children under their parent
+              const processed = processProducts(data);
+              // Set the first product (which should be the parent with children nested)
+              setSelectedProduct(processed[0]);
+              setShowedModal('product');
+            }
+          })
+          .catch(err => console.error('Fetch product error:', err));
+      
+        console.log('modal')
+      }
     }
-  }, []);
+
-  const scrollToProduct = () => {
+    setProductModalRequest(null); // reset
-    productSectionRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [subscriptions, productModalRequest]);
-  };
-  const scrollToCourse = () => {
-    courseSectionRef.current?.scrollIntoView({ behavior: "smooth" });
-  };
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -150,13 +252,8 @@ function App() {
   }, []);
 
   const handleLogout = () => {
-    // Hapus cookie token dengan mengatur tanggal kadaluarsa ke masa lalu
     document.cookie = 'token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC';
-
+    setUsername(null);
-    // Jika kamu menggunakan state seperti `setUsername`, bersihkan di sini juga
-    setUsername(null); // jika applicable
-
-    // Redirect ke homepage atau reload halaman
     window.location.reload();
   };
 
@@ -178,7 +275,13 @@ function App() {
   return (
     <Router>
       <div className="App">
-        <Header username={username} scrollToProduct={scrollToProduct} scrollToCourse={scrollToCourse} setShowedModal={setShowedModal} handleLogout={handleLogout} />
+        <Header
+          username={username}
+          scrollToProduct={scrollToProduct}
+          scrollToCourse={scrollToCourse}
+          setShowedModal={setShowedModal}
+          handleLogout={handleLogout}
+        />
         <Routes>
           <Route
             path="/"
@@ -195,38 +298,28 @@ function App() {
               />
             }
           />
-          <Route
+          <Route path="/products" element={<ProductsPage subscriptions={subscriptions} />} />
-            path="/products"
+          <Route path="/dashboard" element={<Dashboard />} />
-            element={
-              <ProductsPage subscriptions={subscriptions}/>
-            }
-          />
-          <Route
-            path="/dashboard"
-            element={
-              <Dashboard />
-            }
-          />
         </Routes>
         <Footer />
-        {/* Unified Modal */}
+
+        {/* Modal */}
         {showedModal && (
           <div
             className={styles.modal}
             onClick={() => {
               const url = new URL(window.location);
-              if (url.searchParams.has('next')) {
+              url.searchParams.delete('modal');
-                url.searchParams.delete('next');
+              url.searchParams.delete('product_id');
-                window.history.pushState({}, '', url);
+              url.searchParams.delete('authorized_uri');
-              }
+              url.searchParams.delete('unauthorized_uri');
+              url.searchParams.delete('next');
+              window.history.pushState({}, '', url);
               setShowedModal(null);
               setSelectedProduct({});
             }}
           >
-            <div
+            <div className={styles.modalBody} onClick={(e) => e.stopPropagation()}>
-              className={styles.modalBody}
-              onClick={(e) => e.stopPropagation()}
-            >
               {showedModal === 'product' && (
                 <ProductDetailPage
                   subscriptions={subscriptions}

src/components/AcademySection.js

@@ -41,14 +41,18 @@ const AcademySection = ({hoveredCard, setHoveredCard, setSelectedProduct, setSho
                 onMouseEnter={() => setHoveredCard(product.id)}
                 onMouseLeave={() => setHoveredCard(null)}
               >
+                <div>
                 <div className={styles.courseImage} style={{ backgroundImage: `url(${product.image})` }}>
                   {product.price === 0 && (
                     <span className={styles.courseLabel}>Free</span>
                   )}
                 </div>
-                <div className={styles.courseContent}>
+                <div className={styles.courseContentTop}>
                   <h3 className={styles.courseTitle}>{product.name}</h3>
                   <p className={styles.courseDesc}>{product.description}</p>
+                  </div>
+                                  <div className={styles.courseContentBottom}>
+
                   <div className={styles.coursePrice}>
                     <span
                       className={
@@ -64,6 +68,7 @@ const AcademySection = ({hoveredCard, setHoveredCard, setSelectedProduct, setSho
                   </div>
                 </div>
               </div>
+              </div>
             ))}
         </div>
       </Container>

src/components/ProductDetail.module.css

@@ -28,11 +28,11 @@
 
 .headerRow {
   display: flex;
-  justify-content: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
   align-items: center;
-  gap: 1rem;
+  gap: 0.5rem; /* optional: supaya nggak terlalu rapat saat wrap */
   margin-bottom: 1rem;
-  text-align: center;
 }
 
 .title {
@@ -53,6 +53,7 @@
   color: #64748b;
   margin-bottom: 1.5rem;
   line-height: 1.6;
+  text-align: left;
 }
 
 .buttonGroup {
@@ -90,9 +91,6 @@
   .container {
     text-align: left;
   }
-  .headerRow {
-    justify-content: flex-start;
-  }
   .buttonGroup {
     gap: 0.5rem;
   }

src/components/ProductDetailPage.js

@@ -84,7 +84,7 @@ if (hasMatchingSubscription) {
     }
     // No children, no matching subscription
     const itemsParam = JSON.stringify([product.id]);
-    window.location.href = `http://localhost:3002/?token=${token}&itemsId=${itemsParam}&redirect_uri=http://localhost:3000/products&redirect_failed=http://localhost:3000`;
+    window.location.href = `https://checkout.kediritechnopark.com/?token=${token}&itemsId=${itemsParam}&redirect_uri=https://kediritechnopark.com/products&redirect_failed=https://kediritechnopark.com`;
   };
 
   const onConfirmChildren = () => {
@@ -103,7 +103,7 @@ if (hasMatchingSubscription) {
     }
 
     const itemsParam = selectedChildIds.length > 0 ? JSON.stringify(selectedChildIds) :  JSON.stringify([product.id]);
-    window.location.href = `http://localhost:3002/?token=${token}&itemsId=${itemsParam}&redirect_uri=http://localhost:3000/products&redirect_failed=http://localhost:3000`;
+    window.location.href = `https://checkout.kediritechnopark.com/?token=${token}&itemsId=${itemsParam}&redirect_uri=https://kediritechnopark.com/products&redirect_failed=https://kediritechnopark.com`;
   };
 
   const onFinalCheckoutNewProduct = () => {
@@ -117,7 +117,7 @@ if (hasMatchingSubscription) {
     const itemsParam = selectedChildIds.length > 0 ? JSON.stringify(selectedChildIds) :  JSON.stringify([product.id]);
     const encodedName = encodeURIComponent(customName.trim());
 
-    window.location.href = `http://localhost:3002/?token=${token}&itemsId=${itemsParam}&new_name=${encodedName}&redirect_uri=http://localhost:3000/products&redirect_failed=http://localhost:3000`;
+    window.location.href = `https://checkout.kediritechnopark.com/?token=${token}&itemsId=${itemsParam}&new_name=${encodedName}&redirect_uri=https://kediritechnopark.com/products&redirect_failed=https://kediritechnopark.com`;
   };
 
   const onConfirmSelector = () => {
@@ -139,7 +139,7 @@ if (hasMatchingSubscription) {
       const productName = selectedSubscription?.product_name;
       const encodedName = encodeURIComponent(productName);
 
-      window.location.href = `http://localhost:3002/?token=${token}&itemsId=${itemsParam}&set_name=${encodedName}&redirect_uri=http://localhost:3000/products&redirect_failed=http://localhost:3000`;
+      window.location.href = `https://checkout.kediritechnopark.com/?token=${token}&itemsId=${itemsParam}&set_name=${encodedName}&redirect_uri=https://kediritechnopark.com/products&redirect_failed=https://kediritechnopark.com`;
     }
   };
 

src/components/ProductSection.js

@@ -1,11 +1,15 @@
 import React, { useEffect, useState } from 'react';
 import { Container } from 'react-bootstrap';
 import styles from './Styles.module.css';
+import processProducts from '../helper/processProducts';
 
 
 const ProductSection = ({ hoveredCard, setHoveredCard, setSelectedProduct, setShowedModal, productSectionRef }) => {
   const [products, setProducts] = useState([]);
+// Define this function outside useEffect so it can be called anywhere
 
+
+// Inside your component
 useEffect(() => {
   fetch('https://bot.kediritechnopark.com/webhook/store-dev/products', {
     method: 'POST',
@@ -16,34 +20,7 @@ useEffect(() => {
   })
     .then(res => res.json())
     .then(data => {
-      const parentMap = {};
+      const enrichedData = processProducts(data);
-      const childrenMap = {};
-
-      // Pisahkan parent dan child
-      data.forEach(product => {
-        if (product.sub_product_of) {
-          const parentId = product.sub_product_of;
-          if (!childrenMap[parentId]) childrenMap[parentId] = [];
-          childrenMap[parentId].push(product);
-        } else {
-          parentMap[product.id] = {
-            ...product,
-            children: []
-          };
-        }
-      });
-
-      // Pasang children ke parent
-      Object.keys(childrenMap).forEach(parentId => {
-        const parent = parentMap[parentId];
-        if (parent) {
-          parent.children = childrenMap[parentId];
-        }
-      });
-
-      // Ambil parent saja
-      const enrichedData = Object.values(parentMap);
-
       setProducts(enrichedData);
     })
     .catch(err => console.error('Fetch error:', err));
@@ -62,41 +39,45 @@ useEffect(() => {
           {products &&
             products[0]?.name &&
             products
-            .map(product => (
+              .map(product => (
-              <div
+                <div
-                key={product.id}
+                  key={product.id}
-                className={`${styles.courseCard} ${hoveredCard === product.id ? styles.courseCardHover : ''}`}
+                  className={`${styles.courseCard} ${hoveredCard === product.id ? styles.courseCardHover : ''}`}
-                onClick={() => {
+                  onClick={() => {
-                  setSelectedProduct(product);
+                    setSelectedProduct(product);
-                  setShowedModal('product');
+                    setShowedModal('product');
-                }}
+                  }}
-                onMouseEnter={() => setHoveredCard(product.id)}
+                  onMouseEnter={() => setHoveredCard(product.id)}
-                onMouseLeave={() => setHoveredCard(null)}
+                  onMouseLeave={() => setHoveredCard(null)}
-              >
+                >
-                <div className={styles.courseImage} style={{ backgroundImage: `url(${product.image})` }}>
+                  <div>
-                  {product.price === 0 && (
+                    <div className={styles.courseImage} style={{ backgroundImage: `url(${product.image})` }}>
-                    <span className={styles.courseLabel}>Free</span>
+                      {product.price === 0 && (
-                  )}
+                        <span className={styles.courseLabel}>Free</span>
-                </div>
+                      )}
-                <div className={styles.courseContent}>
+                    </div>
-                  <h3 className={styles.courseTitle}>{product.name}</h3>
+                    <div className={styles.courseContentTop}>
-                  <p className={styles.courseDesc}>{product.description}</p>
+                      <h3 className={styles.courseTitle}>{product.name}</h3>
-                  <div className={styles.coursePrice}>
+                      <p className={styles.courseDesc}>{product.description}</p>
-                    <span
+                    </div>
-                      className={
+                  </div>
-                        product.price === 0
+                  <div className={styles.courseContentBottom}>
-                          ? styles.freePrice
+                    <div className={styles.coursePrice}>
-                          : styles.currentPrice
+                      <span
-                      }
+                        className={
-                    >
+                          product.price === 0
-                      {product.price == null
+                            ? styles.freePrice
-                        ? 'Pay-As-You-Go'
+                            : styles.currentPrice
-                        : `Rp ${product.price.toLocaleString('id-ID')}`}
+                        }
-                    </span>
+                      >
+                        {product.price == null
+                          ? 'Pay-As-You-Go'
+                          : `Rp ${product.price.toLocaleString('id-ID')}`}
+                      </span>
+                    </div>
                   </div>
                 </div>
-              </div>
+              ))}
-            ))}
         </div>
       </Container>
     </section>

src/components/Styles.module.css

@@ -194,14 +194,14 @@
     box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3);
     transition: all 0.3s ease;
     cursor: pointer;
-
-    /* Tambahan untuk menghilangkan highlight biru */
     -webkit-tap-highlight-color: transparent;
     -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     outline: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
 }
 
 .courseCard:focus {
@@ -241,8 +241,20 @@
     font-weight: 600;
 }
 
-.courseContent {
+.courseContentTop {
-    padding: 1.5rem;
+    padding: 1rem 1rem 0rem;
+    text-align: left;
+}
+
+.courseContentTop p {
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+
+.courseContentBottom {
+    padding: 1rem;
+    padding-top: 0;
     text-align: left;
 }
 
@@ -490,13 +502,11 @@
 
     .ctaTitle,
     .courseTitle {
-        font-size: 15px;
         margin: 0;
     }
 
     .ctaDescription,
-    .courseContent p {
+    .courseContentTop, .courseContentBottom p {
-        font-size: 13px;
         margin: 6px 0px;
     }
 
@@ -506,9 +516,8 @@
         background-color: #f8fafc;
     }
 
-    .courseContent {
+    .courseContentTop, .courseContentBottom {
         text-align: left;
-        padding: 0.8rem;
     }
 
     .ctaContainer,

src/components/pages/ProductsPage.js

@@ -150,14 +150,18 @@ const CoursePage = ({ subscriptions }) => {
                                         onMouseEnter={() => setHoveredCard(product.name)}
                                         onMouseLeave={() => setHoveredCard(null)}
                                     >
+                                        <div>
                                         <div className={styles.courseImage} style={{ backgroundImage: `url(${product.image})` }}>
                                             {/* {product.price == 0 && (
                                                 <span className={styles.courseLabel}>Free</span>
                                             )} */}
                                         </div>
-                                        <div className={styles.courseContent}>
+                                        <div className={styles.courseContentTop}>
                                             <h3 className={styles.courseTitle}>{product.name}</h3>
                                             <p className={styles.courseDesc}>{product.description}</p>
+                                        </div>
+                                        </div>
+                                        <div className={styles.courseContentBottom}>
                                             <div className={styles.coursePrice}>
                                                 <span
                                                     className={

src/helper/processProducts.js

@@ -0,0 +1,30 @@
+// processProducts.js
+export default function processProducts(data) {
+  const parentMap = {};
+  const childrenMap = {};
+
+  // Pisahkan parent dan child
+  data.forEach(product => {
+    if (product.sub_product_of) {
+      const parentId = product.sub_product_of;
+      if (!childrenMap[parentId]) childrenMap[parentId] = [];
+      childrenMap[parentId].push(product);
+    } else {
+      parentMap[product.id] = {
+        ...product,
+        children: []
+      };
+    }
+  });
+
+  // Pasang children ke parent
+  Object.keys(childrenMap).forEach(parentId => {
+    const parent = parentMap[parentId];
+    if (parent) {
+      parent.children = childrenMap[parentId];
+    }
+  });
+
+  // Ambil parent saja
+  return Object.values(parentMap);
+}