ok

src/components/ProductDetailPage.js

@@ -29,7 +29,7 @@ const ProductDetail = ({ willDo, setWillDo, subscriptions, product, requestLogin
         subscriptions.some(sub =>
           String(sub.product_id) === String(product.id) || String(sub.product_parent_id) === String(product.id)
         );
-
+        console.log(hasMatchingSubscription)
       // ✅ Check subscription first
       if (hasMatchingSubscription) {
         const matching = subscriptions.filter(sub =>
@@ -126,9 +126,21 @@ const ProductDetail = ({ willDo, setWillDo, subscriptions, product, requestLogin
   };
 
   useEffect(() => {
-    if (willDo === 'checkout') {
+    if (!product.executeCheckout && willDo === 'checkout') {
       onCheckout();
     }
+    else if (product.children && product.children.length > 0) {
+      setShowChildSelector(true);
+    }
+    else {
+
+    const tokenCookie = document.cookie.split('; ').find(row => row.startsWith('token='));
+    const token = tokenCookie ? tokenCookie.split('=')[1] : '';
+    const encodedName = encodeURIComponent(product.name);
+    const itemsParam = JSON.stringify([product.id]);
+
+    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`;
+    }
     if (setWillDo) setWillDo('');
   }, []);
 
@@ -227,6 +239,7 @@ const ProductDetail = ({ willDo, setWillDo, subscriptions, product, requestLogin
         </div>
       )}
 
+
       {/* Naming input */}
       {showNamingInput && (
         <div className={styles.childSelector}>

src/components/pages/ProductsPage.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Container, Row, Col, Card, Button, Tabs, Tab, Form } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
+import processProducts from '../../helper/processProducts';
 
 const Dashboard = ({
   subscriptions,
@@ -91,10 +92,25 @@ const Dashboard = ({
     fetch("https://bot.kediritechnopark.com/webhook/store-production/products", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ itemsId: productIds })
+      body: JSON.stringify({ itemsId: productIds, withChildren: true })
     })
       .then((res) => res.json())
       .then((data) => {
+        console.log(data)
+
+        const dataMap = {};
+        data.forEach((item) => {
+          dataMap[item.id] = { ...item, children: [] };
+        });
+
+        // Masukkan anak-anak ke parent-nya
+        data.forEach((item) => {
+          if (item.sub_product_of && dataMap[item.sub_product_of]) {
+            dataMap[item.sub_product_of].children.push(dataMap[item.id]);
+          }
+        });
+
+        console.log(dataMap)
         const enrichedData = Object.values(groupedSubs)
           .filter((group) => data.some((p) => p.id === group.product_id))
           .map((group) => {
@@ -124,10 +140,10 @@ const Dashboard = ({
               unit_type: productData?.unit_type || group.unit_type,
               quantity: group.quantity,
               end_date: group.end_date,
-              children: []
+              children: dataMap[productData?.sub_product_of]?.children || []
             };
           });
-
+        console.log(enrichedData)
         setProducts(enrichedData);
       })
       .catch((err) => console.error("Fetch error:", err));
@@ -164,11 +180,10 @@ const Dashboard = ({
                   <Card.Footer>
                     <small className="text-muted">
                       {product.unit_type === "duration"
-                        ? `Valid until: ${
+                        ? `Valid until: ${product.end_date
-                            product.end_date
+                          ? new Date(product.end_date).toLocaleDateString()
-                              ? new Date(product.end_date).toLocaleDateString()
+                          : "N/A"
-                              : "N/A"
+                        }`
-                          }`
                         : `SISA TOKEN ${product.quantity || 0}`}
                     </small>
                     <Button