-
📦
-
-
{product.name}
-
- {product.price == null
- ? 'Pay-As-You-Go'
- : `Rp ${parseInt(product.price).toLocaleString('id-ID')}`}
+ {/* ✅ Tampilan utama disembunyikan jika sedang memilih child */}
+ {!showChildSelector && (
+ <>
+
+
+
+
{product.name}
+
+ {product.price == null
+ ? 'Pay-As-You-Go'
+ : `Rp ${parseInt(product.price).toLocaleString('id-ID')}`}
+
+
+
+
{product.description}
+
+
+
+
+
+
+
+ )}
+
+ {/* ✅ UI pemilihan child */}
+ {showChildSelector && (
+
+
Pilih Paket
+ {product.children.map(child => (
+
+ ))}
+
+
+ Total Harga:{' '}
+ Rp {selectedChildIds
+ .map(id => {
+ const found = product.children.find(child => child.id === id);
+ return found ? found.price || 0 : 0;
+ })
+ .reduce((a, b) => a + b, 0)
+ .toLocaleString('id-ID')}
+
+
+
+
+
+
+
-
-
-
{product.description}
-
-
-
-
-
+ )}
);
};
diff --git a/src/components/ProductSection.js b/src/components/ProductSection.js
index 1d862d7..85135ae 100644
--- a/src/components/ProductSection.js
+++ b/src/components/ProductSection.js
@@ -6,18 +6,48 @@ import styles from './Styles.module.css';
const ProductSection = ({ hoveredCard, setHoveredCard, setSelectedProduct, setShowedModal, productSectionRef }) => {
const [products, setProducts] = useState([]);
- useEffect(() => {
- fetch('https://bot.kediritechnopark.com/webhook/store-dev/products', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({ type: 'product', onlyParents: true }),
+useEffect(() => {
+ fetch('https://bot.kediritechnopark.com/webhook/store-dev/products', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ type: 'product' }),
+ })
+ .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);
+
+ setProducts(enrichedData);
})
- .then(res => res.json())
- .then(data => setProducts(data))
- .catch(err => console.error('Fetch error:', err));
- }, []);
+ .catch(err => console.error('Fetch error:', err));
+}, []);
return (
@@ -31,7 +61,8 @@ const ProductSection = ({ hoveredCard, setHoveredCard, setSelectedProduct, setSh
{products &&
products[0]?.name &&
- products.map(product => (
+ products
+ .map(product => (
p.product_id);
+ return [...new Set(productIds)];
+}
+
+function getLatestEndDatesFromJwt(token) {
+ const payload = parseJwt(token);
+ if (!payload || !payload.subscriptions || !payload.subscriptions) return {};
+
+ const result = {};
+ payload.subscriptions.forEach(p => {
+ if (!p.end_date) return;
+ const id = p.product_id;
+ const endDate = new Date(p.end_date);
+ if (!result[id] || endDate > new Date(result[id])) {
+ result[id] = p.end_date;
+ }
+ });
+
+ return result;
+}
+function getTotalTokenFromJwt(token) {
+ const payload = parseJwt(token);
+ if (!payload || !payload.subscriptions || !payload.subscriptions) return {};
+
+ const tokenQuantities = {};
+ payload.subscriptions.forEach(p => {
+ // Pastikan ada quantity dan unit_type token
+ if (p.quantity && p.product_id) {
+ tokenQuantities[p.product_id] = (tokenQuantities[p.product_id] || 0) + p.quantity;
+ }
+ });
+
+ return tokenQuantities;
+}
+
+
const CoursePage = () => {
const [postLoginAction, setPostLoginAction] = useState(null);
const [selectedProduct, setSelectedProduct] = useState({});
const [hoveredCard, setHoveredCard] = useState(null);
- const [showedModal, setShowedModal] = useState(null); // 'product' | 'login' | null
+ const [showedModal, setShowedModal] = useState(null);
const [products, setProducts] = useState([]);
+useEffect(() => {
+ const match = document.cookie.match(new RegExp('(^| )token=([^;]+)'));
+ if (match) {
+ const token = match[2];
- useEffect(() => {
- // Ambil token dari cookies
- const match = document.cookie.match(new RegExp('(^| )token=([^;]+)'));
- if (match) {
- const token = match[2];
+ const productIds = getDistinctProductIdsFromJwt(token);
+ const endDates = getLatestEndDatesFromJwt(token);
+ const tokenQuantitiesFromJwt = getTotalTokenFromJwt(token);
- fetch('https://bot.kediritechnopark.com/webhook/users-dev/my-products', {
+ fetch('https://bot.kediritechnopark.com/webhook/store-dev/products', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
- 'Authorization': 'Bearer ' + token
},
- body: JSON.stringify({ type: 'product' }),
+ body: JSON.stringify({ itemsId: productIds, type: 'product' }),
})
.then(res => res.json())
- .then(data => setProducts(data))
- .catch(err => console.error('Fetch error:', err));
+ .then(data => {
+ const parentMap = {};
+ const childrenMap = {};
+
+ 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,
+ quantity: product.quantity || 0,
+ end_date: endDates[product.id] || null,
+ children: []
+ };
+ }
+ });
+// ...
+
+Object.keys(childrenMap).forEach(parentId => {
+ const parent = parentMap[parentId];
+ const children = childrenMap[parentId];
+
+ if (parent) {
+ parent.children = children;
+
+ // Pakai quantity dari JWT langsung (tokenQuantitiesFromJwt)
+ parent.quantity = children.reduce((total, child) => {
+ return total + (tokenQuantitiesFromJwt[child.id] || 0);
+ }, 0);
+ }
+});
+
+// ...
+
+// Update quantity untuk produk yang bukan parent dan bukan anak
+Object.values(parentMap).forEach(product => {
+ if (!product.children.length) {
+ if (product.unit_type === 'token') {
+ product.quantity = tokenQuantitiesFromJwt[product.id] || 0;
}
- }, []);
+ }
+});
+
+ const enrichedData = Object.values(parentMap);
+ setProducts(enrichedData);
+ console.log(enrichedData);
+ })
+ .catch(err => console.error('Fetch error:', err));
+ }
+}, []);
+
const features = [
{
@@ -70,49 +160,52 @@ const CoursePage = () => {
return (
-
+
{/* Courses Section */}
-
OUR COURSES
+
MY PRODUCTS
{products &&
products[0]?.name &&
- products.map(product => (
-
{
- setSelectedProduct(product);
- setShowedModal('product');
- }}
- onMouseEnter={() => setHoveredCard(product.id)}
- onMouseLeave={() => setHoveredCard(null)}
- >
-
- {product.price == 0 && (
- Free
- )}
-
-
-
{product.name}
-
{product.description}
-
-
- {product.price == 0
- ? 'Free'
- : `Rp ${product.price.toLocaleString('id-ID')}`}
-
+ products
+ .map(product => (
+
{
+ setSelectedProduct(product);
+ setShowedModal('product');
+ }}
+ onMouseEnter={() => setHoveredCard(product.id)}
+ onMouseLeave={() => setHoveredCard(null)}
+ >
+
+ {product.price == 0 && (
+ Free
+ )}
+
+
+
{product.name}
+
{product.description}
+
+
+ {product.unit_type === 'duration'
+ ? `Valid until: ${product.end_date ? new Date(product.end_date).toLocaleDateString() : 'N/A'}`
+ : `SISA TOKEN ${product.quantity || 0}`
+ }
+
+
+
-
- ))}
+ ))}