summaryrefslogtreecommitdiff
path: root/src-migrate/modules/product-detail/components/Information.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src-migrate/modules/product-detail/components/Information.tsx')
-rw-r--r--src-migrate/modules/product-detail/components/Information.tsx92
1 files changed, 50 insertions, 42 deletions
diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index c565682f..6e2c930e 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -9,10 +9,10 @@ import style from '../styles/information.module.css';
import dynamic from 'next/dynamic';
import Link from 'next/link';
import { useEffect, useRef, useState } from 'react';
-import axios from 'axios'; // <--- 1. TAMBAHAN IMPORT AXIOS
+import axios from 'axios';
import currencyFormat from '@/core/utils/currencyFormat';
-import { InputGroup, InputRightElement, SimpleGrid, Flex, Text, Box } from '@chakra-ui/react';
+import { InputGroup, InputRightElement, SimpleGrid, Flex, Text, Box, Center } from '@chakra-ui/react';
import { ChevronDownIcon } from '@heroicons/react/24/outline';
import Image from 'next/image';
import { formatToShortText } from '~/libs/formatNumber';
@@ -54,23 +54,16 @@ const Information = ({ product }: Props) => {
setLoadingWarranty(true);
try {
- // Ambil semua SKU untuk dikirim ke API
const skus = product.variants.map((v) => v.id).join(',');
const mainSku = product.variants[0].id;
- console.log("Fetching warranties for SKUs:", skus);
- console.log("Main SKU:", mainSku);
- // Panggil API magento-product
const res = await axios.get('/api/magento-product', {
params: { skus, main_sku: mainSku }
});
- // Simpan hasil ke state lokal
if (res.data && res.data.warranties) {
setWarranties(res.data.warranties);
}
- console.log("Warranties API Response:", res);
- console.log("Warranties fetched:", res.data.warranties);
} catch (error) {
console.error("Gagal ambil garansi:", error);
} finally {
@@ -80,8 +73,6 @@ const Information = ({ product }: Props) => {
fetchWarrantyDirectly();
}, [product]);
- // ======================================================
-
useEffect(() => {
if (selectedVariant) {
@@ -103,27 +94,26 @@ const Information = ({ product }: Props) => {
}
}, [slaVariant, isLoading, setSla]);
-const handleOnChange = (vals: any) => {
-    setDisableFilter(true);
-    let code = vals.replace(/\s-\s.*$/, '').trim();
-    let variant = product?.variants.find((item) => item.code === code);
-   
+ const handleOnChange = (vals: any) => {
+ setDisableFilter(true);
+ let code = vals.replace(/\s-\s.*$/, '').trim();
+ let variant = product?.variants.find((item) => item.code === code);
+
if (variant) {
-    setSelectedVariant(variant);
-    setInputValue(
-      variant?.code +
-        (variant?.attributes[0] ? ' - ' + variant?.attributes[0] : '')
-    );
+ setSelectedVariant(variant);
+ setInputValue(
+ variant?.code +
+ (variant?.attributes[0] ? ' - ' + variant?.attributes[0] : '')
+ );
setVariantOptions(product?.variants);
-    }
-  };
+ }
+ };
const handleOnKeyUp = (e: any) => {
setDisableFilter(false);
setInputValue(e.target.value);
};
- // STYLE CUSTOM UNTUK BARIS (Item Code, dll)
const rowStyle = {
backgroundColor: '#ffffff',
fontSize: '13px',
@@ -275,37 +265,51 @@ const handleOnChange = (vals: any) => {
</div>
</div>
- {/* === DETAIL INFORMASI PRODUK (Updated Layout) === */}
+ {/* === DETAIL INFORMASI PRODUK (Horizontal Minimalis) === */}
<div className="mt-6 border-t pt-4">
- <h2 className="font-bold text-gray-800 text-sm mb-4">Detail Informasi Produk</h2>
+ <h2 className="hidden md:block font-bold text-gray-800 text-sm mb-4">
+ Detail Informasi Produk
+ </h2>
- <SimpleGrid columns={{ base: 1, md: 3 }} spacing={10}>
+ {/* Mobile: 3 Kolom, Spacing Kecil. Desktop: 3 Kolom, Spacing Besar */}
+ <SimpleGrid columns={{ base: 3, md: 3 }} spacing={{ base: 2, md: 10 }}>
+
{/* 1. Distributor Resmi */}
- <Flex align="center" className="gap-3">
+ <Flex
+ direction={{ base: 'column', md: 'row' }}
+ align="center"
+ textAlign={{ base: 'center', md: 'left' }}
+ gap={{ base: 2, md: 3 }}
+ >
<img
src="/images/produk_asli.svg"
alt="Distributor Resmi"
- className="w-10 h-10 shrink-0"
+ className="w-8 h-8 md:w-10 md:h-10 shrink-0"
/>
<Box>
- <Text fontSize="11px" color="gray.500" lineHeight="short" mb="1px">Distributor Resmi</Text>
- <Text fontSize="12px" fontWeight="bold" color="gray.800" lineHeight="short">Jaminan Produk Asli</Text>
+ <Text fontSize={{ base: "10px", md: "11px" }} color="gray.500" lineHeight="short" mb="1px">Distributor Resmi</Text>
+ <Text fontSize={{ base: "10px", md: "12px" }} fontWeight="bold" color="gray.800" lineHeight="1.2">Jaminan Produk Asli</Text>
</Box>
</Flex>
{/* 2. Estimasi Penyiapan */}
- <Flex align="center" className="gap-3">
+ <Flex
+ direction={{ base: 'column', md: 'row' }}
+ align="center"
+ textAlign={{ base: 'center', md: 'left' }}
+ gap={{ base: 2, md: 3 }}
+ >
<img
src="/images/estimasi.svg"
alt="Estimasi Penyiapan"
- className="w-9 h-9 shrink-0"
+ className="w-8 h-8 md:w-9 md:h-9 shrink-0"
/>
<Box>
- <Text fontSize="11px" color="gray.500" lineHeight="short" mb="1px">Estimasi Penyiapan</Text>
+ <Text fontSize={{ base: "10px", md: "11px" }} color="gray.500" lineHeight="short" mb="1px">Estimasi Penyiapan</Text>
{isLoading ? (
- <Skeleton height="12px" width="60px" mt="2px" />
+ <Center><Skeleton height="10px" width="50px" mt="2px" /></Center>
) : (
- <Text fontSize="12px" fontWeight="bold" color="gray.800" lineHeight="short">
+ <Text fontSize={{ base: "10px", md: "12px" }} fontWeight="bold" color="gray.800" lineHeight="1.2">
{sla?.sla_date || '3 - 7 Hari'}
</Text>
)}
@@ -313,20 +317,24 @@ const handleOnChange = (vals: any) => {
</Flex>
{/* 3. Garansi Produk */}
- <Flex align="center" className="gap-3">
+ <Flex
+ direction={{ base: 'column', md: 'row' }}
+ align="center"
+ textAlign={{ base: 'center', md: 'left' }}
+ gap={{ base: 2, md: 3 }}
+ >
<img
src="/images/garansi.svg"
alt="Garansi Produk"
- className="w-10 h-10 shrink-0"
+ className="w-8 h-8 md:w-10 md:h-10 shrink-0"
/>
<Box>
- <Text fontSize="11px" color="gray.500" lineHeight="short" mb="1px">Garansi Produk</Text>
+ <Text fontSize={{ base: "10px", md: "11px" }} color="gray.500" lineHeight="short" mb="1px">Garansi Produk</Text>
- {/* Menggunakan Loading State & Data dari 'warranties' */}
{loadingWarranty ? (
- <Skeleton height="12px" width="80px" mt="2px" />
+ <Center><Skeleton height="10px" width="50px" mt="2px" /></Center>
) : (
- <Text fontSize="12px" fontWeight="bold" color="gray.800" lineHeight="short">
+ <Text fontSize={{ base: "10px", md: "12px" }} fontWeight="bold" color="gray.800" lineHeight="1.2">
{selectedVariant && warranties[selectedVariant.id]
? warranties[selectedVariant.id]
: '-'}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-17 17:28:37 +0000