From 629133beeb7f5668b63db61e415cf844d513cde7 Mon Sep 17 00:00:00 2001 From: FIN-IT_AndriFP Date: Thu, 27 Nov 2025 14:30:30 +0700 Subject: (andri) view from magento --- .../product-detail/components/Information.tsx | 114 +++++++++++++++------ 1 file changed, 82 insertions(+), 32 deletions(-) (limited to 'src-migrate/modules/product-detail/components/Information.tsx') diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index a7a58cbc..b7d3401e 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -11,12 +11,11 @@ import Link from 'next/link'; import { useEffect, useRef, useState } from 'react'; import currencyFormat from '@/core/utils/currencyFormat'; -import { InputGroup, InputRightElement, Spinner } from '@chakra-ui/react'; +import { InputGroup, InputRightElement, SimpleGrid, Flex, Text, Box } from '@chakra-ui/react'; import { ChevronDownIcon } from '@heroicons/react/24/outline'; import Image from 'next/image'; import { formatToShortText } from '~/libs/formatNumber'; import { createSlug } from '~/libs/slug'; -import { getVariantSLA } from '~/services/productVariant'; import { IProductDetail } from '~/types/product'; import { useProductDetail } from '../stores/useProductDetail'; import useVariant from '../hook/useVariant'; @@ -30,7 +29,7 @@ type Props = { }; const Information = ({ product }: Props) => { - const { selectedVariant, setSelectedVariant, setSla, setActive, sla } = + const { selectedVariant, setSelectedVariant, setSla, sla } = useProductDetail(); const [inputValue, setInputValue] = useState( @@ -45,15 +44,6 @@ const Information = ({ product }: Props) => { const variantId = selectedVariant?.id; const { slaVariant, isLoading } = useVariant({ variantId }); - // let variantOptions = product?.variants; - - // const querySLA = useQuery({ - // queryKey: ['variant-sla', selectedVariant?.id], - // queryFn: () => getVariantSLA(selectedVariant?.id), - // enabled: !!selectedVariant?.id, - // }); - // const sla = querySLA?.data; - useEffect(() => { if (selectedVariant) { setInputValue( @@ -66,14 +56,13 @@ const Information = ({ product }: Props) => { }, [selectedVariant]); useEffect(() => { - if (isLoading){ + if (isLoading) { setSla(null); } if (slaVariant) { setSla(slaVariant); } - }, [slaVariant, isLoading]); - + }, [slaVariant, isLoading, setSla]); const handleOnChange = (vals: any) => { setDisableFilter(true); @@ -98,6 +87,15 @@ const Information = ({ product }: Props) => { setInputValue(e.target.value); }; + // STYLE CUSTOM UNTUK BARIS (Item Code, dll) + const rowStyle = { + backgroundColor: '#ffffff', + fontSize: '13px', + borderBottom: '1px dashed #e2e8f0', + padding: '8px 0', + marginBottom: '0px' + }; + return (
@@ -183,12 +181,15 @@ const Information = ({ product }: Props) => {
-
-
Item Code
+ {/* ITEM CODE */} +
+
Item Code
{selectedVariant?.code}
-
-
Manufacture
+ + {/* MANUFACTURE */} +
+
Manufacture
{!!product.manufacture.name ? ( { )}
-
-
Berat Barang
+ + {/* BERAT BARANG */} +
+
Berat Barang
{selectedVariant?.weight > 0 ? `${selectedVariant?.weight} Kg` : '-'}
-
-
Terjual
+ + {/* TERJUAL */} +
+
Terjual
{product.qty_sold > 0 ? formatToShortText(product.qty_sold) : '-'}
-
-
Persiapan Barang
- {isLoading && ( -
- -
- )} - {!isLoading &&
{sla?.sla_date}
} + + {/* === DETAIL INFORMASI PRODUK (Updated Layout) === */} +
+

Detail Informasi Produk

+ + {/* Perubahan: Spacing diperbesar menjadi 10 agar estimasi bergeser ke kanan */} + + {/* 1. Distributor Resmi */} + + Distributor Resmi + + Distributor Resmi + Jaminan Produk Asli + + + + {/* 2. Estimasi Penyiapan */} + + Estimasi Penyiapan + + Estimasi Penyiapan + {isLoading ? ( + + ) : ( + + {sla?.sla_date || '3 - 7 Hari'} + + )} + + + + {/* 3. Garansi Produk */} + + Garansi Produk + + Garansi Produk + 24 Bulan + + +
+
); }; -export default Information; +export default Information; \ No newline at end of file -- cgit v1.2.3 From 4c9f6b642871f180de70f38e6c05c88c234b7d32 Mon Sep 17 00:00:00 2001 From: FIN-IT_AndriFP Date: Mon, 5 Jan 2026 11:01:11 +0700 Subject: (andri) add garansi --- src-migrate/modules/product-detail/components/Information.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'src-migrate/modules/product-detail/components/Information.tsx') diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index b7d3401e..4d54c03c 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -273,7 +273,7 @@ const Information = ({ product }: Props) => { - {/* 3. Garansi Produk */} + {/* 3. Garansi Produk - UPDATED DYNAMIC VALUE */} { /> Garansi Produk - 24 Bulan + + {/* Mengambil dari selectedVariant.z_warranty */} + {selectedVariant && (selectedVariant as any).z_warranty + ? (selectedVariant as any).z_warranty + : '-'} + -- cgit v1.2.3 From c0c09e2d948e04f487641dc0141cc38523fe0b69 Mon Sep 17 00:00:00 2001 From: FIN-IT_AndriFP Date: Mon, 5 Jan 2026 13:43:48 +0700 Subject: (andri) fix garansi --- .../product-detail/components/Information.tsx | 59 +++++++++++++++++++--- 1 file changed, 51 insertions(+), 8 deletions(-) (limited to 'src-migrate/modules/product-detail/components/Information.tsx') diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index 4d54c03c..25ca3709 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -9,6 +9,7 @@ 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 currencyFormat from '@/core/utils/currencyFormat'; import { InputGroup, InputRightElement, SimpleGrid, Flex, Text, Box } from '@chakra-ui/react'; @@ -44,6 +45,44 @@ const Information = ({ product }: Props) => { const variantId = selectedVariant?.id; const { slaVariant, isLoading } = useVariant({ variantId }); + const [warranties, setWarranties] = useState>({}); + const [loadingWarranty, setLoadingWarranty] = useState(false); + + useEffect(() => { + const fetchWarrantyDirectly = async () => { + if (!product?.variants || product.variants.length === 0) return; + + 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 { + setLoadingWarranty(false); + } + }; + + fetchWarrantyDirectly(); + }, [product]); + // ====================================================== + + useEffect(() => { if (selectedVariant) { setInputValue( @@ -239,7 +278,6 @@ const Information = ({ product }: Props) => {

Detail Informasi Produk

- {/* Perubahan: Spacing diperbesar menjadi 10 agar estimasi bergeser ke kanan */} {/* 1. Distributor Resmi */} @@ -273,7 +311,7 @@ const Information = ({ product }: Props) => { - {/* 3. Garansi Produk - UPDATED DYNAMIC VALUE */} + {/* 3. Garansi Produk */} { /> Garansi Produk - - {/* Mengambil dari selectedVariant.z_warranty */} - {selectedVariant && (selectedVariant as any).z_warranty - ? (selectedVariant as any).z_warranty - : '-'} - + + {/* Menggunakan Loading State & Data dari 'warranties' */} + {loadingWarranty ? ( + + ) : ( + + {selectedVariant && warranties[selectedVariant.id] + ? warranties[selectedVariant.id] + : '-'} + + )} -- cgit v1.2.3 From 44afa589c9ced88aa4dcd93181d9e068d79603ea Mon Sep 17 00:00:00 2001 From: FIN-IT_AndriFP Date: Tue, 6 Jan 2026 11:21:14 +0700 Subject: (andri) fix sort pilih variant --- .../product-detail/components/Information.tsx | 35 +++++++++++----------- 1 file changed, 18 insertions(+), 17 deletions(-) (limited to 'src-migrate/modules/product-detail/components/Information.tsx') diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index 25ca3709..c565682f 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -103,23 +103,20 @@ const Information = ({ product }: Props) => { } }, [slaVariant, isLoading, setSla]); - const handleOnChange = (vals: any) => { - setDisableFilter(true); - let code = vals.replace(/\s-\s.*$/, '').trim(); - let variant = variantOptions.find((item) => item.code === code); - setSelectedVariant(variant); - setInputValue( - variant?.code + - (variant?.attributes[0] ? ' - ' + variant?.attributes[0] : '') - ); +const handleOnChange = (vals: any) => { +    setDisableFilter(true); +    let code = vals.replace(/\s-\s.*$/, '').trim(); +    let variant = product?.variants.find((item) => item.code === code); +    if (variant) { - const filteredOptions = product?.variants.filter( - (item) => item !== variant - ); - const newOptions = [variant, ...filteredOptions]; - setVariantOptions(newOptions); - } - }; +    setSelectedVariant(variant); +    setInputValue( +      variant?.code + +        (variant?.attributes[0] ? ' - ' + variant?.attributes[0] : '') +    ); + setVariantOptions(product?.variants); +    } +  }; const handleOnKeyUp = (e: any) => { setDisableFilter(false); @@ -166,7 +163,11 @@ const Information = ({ product }: Props) => { - {variantOptions.map((option, cid) => ( + {variantOptions + .sort((a: any, b: any) => { + return a.code.localeCompare(b.code, undefined, { numeric: true, sensitivity: 'base' }); + }) + .map((option, cid) => ( Date: Mon, 12 Jan 2026 13:33:39 +0700 Subject: (andri) fix index table spek & fix view detail information di mobile --- .../product-detail/components/Information.tsx | 88 ++++++++++++---------- 1 file changed, 47 insertions(+), 41 deletions(-) (limited to 'src-migrate/modules/product-detail/components/Information.tsx') diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index c565682f..e07537fb 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,49 @@ const handleOnChange = (vals: any) => {
- {/* === DETAIL INFORMASI PRODUK (Updated Layout) === */} + {/* === DETAIL INFORMASI PRODUK (Horizontal Minimalis) === */}

Detail Informasi Produk

- + {/* Mobile: 3 Kolom, Spacing Kecil. Desktop: 3 Kolom, Spacing Besar */} + + {/* 1. Distributor Resmi */} - + Distributor Resmi - Distributor Resmi - Jaminan Produk Asli + Distributor Resmi + Jaminan Produk Asli {/* 2. Estimasi Penyiapan */} - + Estimasi Penyiapan - Estimasi Penyiapan + Estimasi Penyiapan {isLoading ? ( - +
) : ( - + {sla?.sla_date || '3 - 7 Hari'} )} @@ -313,20 +315,24 @@ const handleOnChange = (vals: any) => { {/* 3. Garansi Produk */} - + Garansi Produk - Garansi Produk + Garansi Produk - {/* Menggunakan Loading State & Data dari 'warranties' */} {loadingWarranty ? ( - +
) : ( - + {selectedVariant && warranties[selectedVariant.id] ? warranties[selectedVariant.id] : '-'} -- cgit v1.2.3 From 0befdef251386bd026d53721e5cb2173aebd41f2 Mon Sep 17 00:00:00 2001 From: FIN-IT_AndriFP Date: Mon, 12 Jan 2026 15:28:52 +0700 Subject: (andri) fix detail informasi mobile --- src-migrate/modules/product-detail/components/Information.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src-migrate/modules/product-detail/components/Information.tsx') diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index e07537fb..6e2c930e 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -267,7 +267,9 @@ const Information = ({ product }: Props) => { {/* === DETAIL INFORMASI PRODUK (Horizontal Minimalis) === */}
-

Detail Informasi Produk

+

+ Detail Informasi Produk +

{/* Mobile: 3 Kolom, Spacing Kecil. Desktop: 3 Kolom, Spacing Besar */} -- cgit v1.2.3 From f56cc888934d4b4ef962e967d40533ab5ded2414 Mon Sep 17 00:00:00 2001 From: FIN-IT_AndriFP Date: Mon, 19 Jan 2026 09:39:25 +0700 Subject: (andri) fix view mobile compare --- .../product-detail/components/Information.tsx | 95 ++++++++++++---------- 1 file changed, 53 insertions(+), 42 deletions(-) (limited to 'src-migrate/modules/product-detail/components/Information.tsx') diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index 6e2c930e..f3abe0c7 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -12,15 +12,21 @@ import { useEffect, useRef, useState } from 'react'; import axios from 'axios'; import currencyFormat from '@/core/utils/currencyFormat'; -import { InputGroup, InputRightElement, SimpleGrid, Flex, Text, Box, Center } from '@chakra-ui/react'; +import { InputGroup, InputRightElement, SimpleGrid, Flex, Text, Box, Center, Icon } from '@chakra-ui/react'; import { ChevronDownIcon } from '@heroicons/react/24/outline'; -import Image from 'next/image'; +import ImageNext from 'next/image'; import { formatToShortText } from '~/libs/formatNumber'; import { createSlug } from '~/libs/slug'; import { IProductDetail } from '~/types/product'; import { useProductDetail } from '../stores/useProductDetail'; import useVariant from '../hook/useVariant'; +// Import View Components +import MobileView from '@/core/components/views/MobileView'; // Pastikan path import benar + +// Import Modal Compare +import ProductComparisonModal from './ProductComparisonModal'; + const Skeleton = dynamic(() => import('@chakra-ui/react').then((mod) => mod.Skeleton) ); @@ -30,8 +36,7 @@ type Props = { }; const Information = ({ product }: Props) => { - const { selectedVariant, setSelectedVariant, setSla, sla } = - useProductDetail(); + const { selectedVariant, setSelectedVariant, setSla, sla } = useProductDetail(); const [inputValue, setInputValue] = useState( selectedVariant?.code + ' - ' + selectedVariant?.attributes[0] @@ -48,6 +53,9 @@ const Information = ({ product }: Props) => { const [warranties, setWarranties] = useState>({}); const [loadingWarranty, setLoadingWarranty] = useState(false); + // State untuk Modal Compare + const [isCompareOpen, setIsCompareOpen] = useState(false); + useEffect(() => { const fetchWarrantyDirectly = async () => { if (!product?.variants || product.variants.length === 0) return; @@ -166,9 +174,7 @@ const Information = ({ product }: Props) => { } _selected={ option.id === selectedVariant?.id - ? { - bg: 'gray.300', - } + ? { bg: 'gray.300' } : undefined } textTransform='capitalize' @@ -183,13 +189,7 @@ const Information = ({ product }: Props) => { ? ' - ' + option?.attributes[0] : '')}
-
+
{option?.price?.discount_percentage > 0 && ( <>
@@ -209,6 +209,38 @@ const Information = ({ product }: Props) => { ))} + + {/* === TOMBOL BANDINGKAN PRODUK (HANYA MOBILE) === */} + +
setIsCompareOpen(true)} + > +
+
+ +
+
+ Bandingkan Produk + Coba bandingkan dengan produk lainnya +
+
+
+ Baru + +
+
+ + + {/* Render Modal (Logic open/close ada di dalam component) */} + {isCompareOpen && ( + setIsCompareOpen(false)} + mainProduct={product} + selectedVariant={selectedVariant} + /> + )}
{/* ITEM CODE */} @@ -230,7 +262,7 @@ const Information = ({ product }: Props) => { )} > {product?.manufacture.logo ? ( - {
- {/* === DETAIL INFORMASI PRODUK (Horizontal Minimalis) === */} + {/* === DETAIL INFORMASI PRODUK === */}

Detail Informasi Produk

- {/* Mobile: 3 Kolom, Spacing Kecil. Desktop: 3 Kolom, Spacing Besar */} - - {/* 1. Distributor Resmi */} - Distributor Resmi + Distributor Resmi Distributor Resmi Jaminan Produk Asli - {/* 2. Estimasi Penyiapan */} - Estimasi Penyiapan + Estimasi Penyiapan Estimasi Penyiapan {isLoading ? ( @@ -316,35 +336,26 @@ const Information = ({ product }: Props) => { - {/* 3. Garansi Produk */} - Garansi Produk + Garansi Produk Garansi Produk - {loadingWarranty ? ( -
+
) : ( - {selectedVariant && warranties[selectedVariant.id] - ? warranties[selectedVariant.id] - : '-'} + {selectedVariant && warranties[selectedVariant.id] ? warranties[selectedVariant.id] : '-'} )}
-
); }; -- cgit v1.2.3 From 4217b184369fae3ad52ee8a1f2d7efc4e2829365 Mon Sep 17 00:00:00 2001 From: FIN-IT_AndriFP Date: Mon, 19 Jan 2026 10:38:43 +0700 Subject: (andri) fix size font specs in compare --- src-migrate/modules/product-detail/components/Information.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src-migrate/modules/product-detail/components/Information.tsx') diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index f3abe0c7..6018f6a1 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -330,7 +330,7 @@ const Information = ({ product }: Props) => {
) : ( - {sla?.sla_date || '3 - 7 Hari'} + {sla?.sla_date || '-'} )} -- cgit v1.2.3 From 911c74e00974aaff071bec462981bb8cef901ddb Mon Sep 17 00:00:00 2001 From: FIN-IT_AndriFP Date: Mon, 19 Jan 2026 16:20:12 +0700 Subject: (andri) fix dynamic view compare desktop --- src-migrate/modules/product-detail/components/Information.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src-migrate/modules/product-detail/components/Information.tsx') diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index 6018f6a1..cc16fb6d 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -213,7 +213,7 @@ const Information = ({ product }: Props) => { {/* === TOMBOL BANDINGKAN PRODUK (HANYA MOBILE) === */}
setIsCompareOpen(true)} >
-- cgit v1.2.3 From d74edefd0226cb192be55cad005378ca7ca084a6 Mon Sep 17 00:00:00 2001 From: FIN-IT_AndriFP Date: Fri, 30 Jan 2026 09:52:57 +0700 Subject: fix dropdown variant information --- src-migrate/modules/product-detail/components/Information.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'src-migrate/modules/product-detail/components/Information.tsx') diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index 900225a5..ce848267 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -178,7 +178,10 @@ const Information = ({ product }: Props) => { .map((option, cid) => (