ok

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 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);
-
+      const enrichedData = processProducts(data);
       setProducts(enrichedData);
     })
     .catch(err => console.error('Fetch error:', err));
@@ -62,41 +39,45 @@ useEffect(() => {
           {products &&
             products[0]?.name &&
             products
-            .map(product => (
-              <div
-                key={product.id}
-                className={`${styles.courseCard} ${hoveredCard === product.id ? styles.courseCardHover : ''}`}
-                onClick={() => {
-                  setSelectedProduct(product);
-                  setShowedModal('product');
-                }}
-                onMouseEnter={() => setHoveredCard(product.id)}
-                onMouseLeave={() => setHoveredCard(null)}
-              >
-                <div className={styles.courseImage} style={{ backgroundImage: `url(${product.image})` }}>
-                  {product.price === 0 && (
-                    <span className={styles.courseLabel}>Free</span>
-                  )}
-                </div>
-                <div className={styles.courseContent}>
-                  <h3 className={styles.courseTitle}>{product.name}</h3>
-                  <p className={styles.courseDesc}>{product.description}</p>
-                  <div className={styles.coursePrice}>
-                    <span
-                      className={
-                        product.price === 0
-                          ? styles.freePrice
-                          : styles.currentPrice
-                      }
-                    >
-                      {product.price == null
-                        ? 'Pay-As-You-Go'
-                        : `Rp ${product.price.toLocaleString('id-ID')}`}
-                    </span>
+              .map(product => (
+                <div
+                  key={product.id}
+                  className={`${styles.courseCard} ${hoveredCard === product.id ? styles.courseCardHover : ''}`}
+                  onClick={() => {
+                    setSelectedProduct(product);
+                    setShowedModal('product');
+                  }}
+                  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.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={
+                          product.price === 0
+                            ? styles.freePrice
+                            : styles.currentPrice
+                        }
+                      >
+                        {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 {
-    padding: 1.5rem;
+.courseContentTop {
+    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 {
-        font-size: 13px;
+    .courseContentTop, .courseContentBottom p {
         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={