diff options
3 files changed, 449 insertions, 196 deletions
diff --git a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx index 14b177ad..a58ad5b2 100644 --- a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx +++ b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { Modal, ModalOverlay, @@ -18,94 +18,238 @@ import { InputLeftElement, VStack, HStack, - Select, IconButton, Flex, - Icon, // Dibutuhkan untuk membungkus icon dari Lucide + Icon, + Spinner, + List, + ListItem, + useToast, + Select } from '@chakra-ui/react'; -// Import hanya icon standar UI dari lucide-react (pengganti @chakra-ui/icons) -import { Search } from 'lucide-react'; - -// --- Dummy Data Types --- -type Product = { - id: string; - name: string; - price: string; - originalPrice: string; - image: string; - variants: string[]; - specs: Record<string, string>; +import { Search, ShoppingCart, Trash2 } from 'lucide-react'; + +// --- HELPER FORMATTING --- +const formatPrice = (price: number) => { + return new Intl.NumberFormat('id-ID', { + style: 'currency', + currency: 'IDR', + minimumFractionDigits: 0, + }).format(price); +}; + +const renderSpecValue = (val: any) => { + if (!val || val === '-') return '-'; + return String(val).replace(/<[^>]*>?/gm, ''); }; type Props = { isOpen: boolean; onClose: () => void; + mainProduct: any; + selectedVariant: any; }; -// --- Dummy Data Configuration --- -const SPEC_LABELS = [ - 'Tipe Baterai', - 'Kecepatan Tanpa Beban', - 'Torsi Maksimum', - 'Ukuran Drive', - 'Berat Bersih', - 'Garansi', -]; - -const DUMMY_PRODUCTS: (Product | null)[] = [ - { - id: '1', - name: 'TEKIRO Cordless Impact Wrench 1/2 Inch XV Brushless', - price: 'Rp 999.999', - originalPrice: 'Rp 1.500.000', - image: '/images/no-image-compare.svg', - variants: ['Unit Only', '1 Baterai Kit', '2 Baterai Kit'], - specs: { - 'Tipe Baterai': '20V Lithium-Ion', - 'Kecepatan Tanpa Beban': '0-2400 RPM', - 'Torsi Maksimum': '300 N.m', - 'Ukuran Drive': '1/2 Inch', - 'Berat Bersih': '1.5 Kg', - 'Garansi': '1 Tahun', - }, - }, - { - id: '2', - name: 'Makita Cordless Impact Wrench TW001GZ (40V)', - price: 'Rp 2.450.000', - originalPrice: 'Rp 3.000.000', - image: '/images/no-image-compare.svg', - variants: ['Unit Only', 'Full Set'], - specs: { - 'Tipe Baterai': '40V Max XGT', - 'Kecepatan Tanpa Beban': '0-2500 RPM', - 'Torsi Maksimum': '1350 N.m', - 'Ukuran Drive': '3/4 Inch', - 'Berat Bersih': '2.8 Kg', - 'Garansi': '2 Tahun', - }, - }, - { - id: '3', - name: 'DEWALT Max Brushless 1/2 High Torque Impact', - price: 'Rp 3.100.000', - originalPrice: 'Rp 3.500.000', - image: '/images/no-image-compare.svg', - variants: ['Unit Only'], - specs: { - 'Tipe Baterai': '20V XR Li-Ion', - 'Kecepatan Tanpa Beban': '0-1900 RPM', - 'Torsi Maksimum': '950 N.m', - 'Ukuran Drive': '1/2 Inch', - 'Berat Bersih': '2.6 Kg', - 'Garansi': '3 Tahun', - }, - }, - null, // Slot kosong -]; - -const ProductComparisonModal = ({ isOpen, onClose }: Props) => { +const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant }: Props) => { + const toast = useToast(); + + // --- STATE --- + const [products, setProducts] = useState<(any | null)[]>([null, null, null, null]); + const [specsMatrix, setSpecsMatrix] = useState<any[]>([]); + const [isLoadingMatrix, setIsLoadingMatrix] = useState(false); + + // Search State + const [activeSearchSlot, setActiveSearchSlot] = useState<number | null>(null); + const [searchQuery, setSearchQuery] = useState(''); + const [searchResults, setSearchResults] = useState<any[]>([]); + const [isSearching, setIsSearching] = useState(false); + + // =========================================================================== + // 1. LOGIC UTAMA: ISI SLOT 1 + // =========================================================================== + useEffect(() => { + if (isOpen && mainProduct) { + let activeItem = selectedVariant; + + if (!activeItem && mainProduct.variants && mainProduct.variants.length > 0) { + activeItem = mainProduct.variants[0]; + } + if (!activeItem) { + activeItem = mainProduct; + } + + const targetId = activeItem.id; + const displayCode = activeItem.default_code || activeItem.code || activeItem.sku || mainProduct.default_code || mainProduct.code; + + const variantOptions = mainProduct.variants?.map((v: any) => ({ + id: v.id, + code: v.default_code || v.code || v.sku, + name: v.name, + price: v.price?.price || v.price || 0, + image: v.image + })) || []; + + if (variantOptions.length === 0) { + variantOptions.push({ + id: targetId, + code: displayCode, + name: mainProduct.name, + price: activeItem.price?.price || activeItem.price || 0, + image: activeItem.image || mainProduct.image + }); + } + + const productSlot1 = { + id: targetId, + sku: targetId, // ID untuk API + realCode: displayCode, + name: mainProduct.name, + price: activeItem.price?.price || activeItem.price || mainProduct.lowest_price?.price || 0, + image: activeItem.image || mainProduct.image, + variants: variantOptions + }; + + setProducts((prev) => { + const newSlots = [...prev]; + if (!newSlots[0] || String(newSlots[0].id) !== String(targetId)) { + newSlots[0] = productSlot1; + } + return newSlots; + }); + } + }, [isOpen, mainProduct, selectedVariant]); + + // =========================================================================== + // 2. FETCH SPECS + // =========================================================================== + useEffect(() => { + const validProducts = products.filter(p => p !== null); + if (!isOpen || validProducts.length === 0) return; + + const fetchSpecs = async () => { + setIsLoadingMatrix(true); + try { + const allSkus = validProducts.map(p => p.sku).join(','); + const mainSku = validProducts[0]?.sku; + + const res = await fetch(`/api/magento-product?skus=${allSkus}&main_sku=${mainSku}`); + if (!res.ok) return; + + const data = await res.json(); + if (data.specsMatrix) { + setSpecsMatrix(data.specsMatrix); + } + } catch (err) { + console.error(err); + } finally { + setIsLoadingMatrix(false); + } + }; + + fetchSpecs(); + }, [products, isOpen]); + + // =========================================================================== + // 3. SEARCH LOGIC + // =========================================================================== + useEffect(() => { + const delayDebounceFn = setTimeout(async () => { + if (searchQuery.length < 3) { + setSearchResults([]); + return; + } + + setIsSearching(true); + try { + const attrSetId = selectedVariant?.attribute_set_id || mainProduct?.attribute_set_id; + const params = new URLSearchParams({ + source: 'compare', + q: searchQuery, + limit: '5', + fq: attrSetId ? `attribute_set_id_i:${attrSetId}` : '' + }); + + const res = await fetch(`/api/search?${params.toString()}`); + if (res.ok) { + const data = await res.json(); + setSearchResults(data.response?.products || []); + } else { + setSearchResults([]); + } + } catch (e) { + setSearchResults([]); + } finally { + setIsSearching(false); + } + }, 500); + + return () => clearTimeout(delayDebounceFn); + }, [searchQuery, mainProduct, selectedVariant]); + + // =========================================================================== + // 4. HANDLERS + // =========================================================================== + const handleVariantChange = (slotIndex: number, newId: string) => { + const currentProduct = products[slotIndex]; + if (!currentProduct || !currentProduct.variants) return; + + const selectedVar = currentProduct.variants.find((v: any) => String(v.id) === String(newId)); + + if (selectedVar) { + const newProducts = [...products]; + newProducts[slotIndex] = { + ...currentProduct, + id: selectedVar.id, + sku: selectedVar.id, + realCode: selectedVar.code, + price: selectedVar.price, + image: selectedVar.image + }; + setProducts(newProducts); + } + }; + + const handleAddProduct = (solrProduct: any, slotIndex: number) => { + const newProducts = [...products]; + + const idToAdd = solrProduct.product_id_i || solrProduct.id; + const codeToAdd = solrProduct.default_code_s || solrProduct.sku; + + if (newProducts.find(p => p && String(p.id) === String(idToAdd))) { + toast({ title: "Produk sudah ada", status: "warning", position: "top" }); + return; + } + + newProducts[slotIndex] = { + id: idToAdd, + sku: idToAdd, + realCode: codeToAdd, + name: solrProduct.display_name_s || solrProduct.name_s, + price: solrProduct.price_tier1_v2_f || 0, + image: solrProduct.image_s, + variants: [{ + id: idToAdd, + code: codeToAdd, + name: solrProduct.name_s, + price: solrProduct.price_tier1_v2_f, + image: solrProduct.image_s + }] + }; + + setProducts(newProducts); + setActiveSearchSlot(null); + setSearchQuery(''); + setSearchResults([]); + }; + + const handleRemoveProduct = (index: number) => { + const newProducts = [...products]; + newProducts[index] = null; + setProducts(newProducts); + if (newProducts.every(p => p === null)) setSpecsMatrix([]); + }; + return ( <Modal isOpen={isOpen} onClose={onClose} size="6xl" scrollBehavior="inside"> <ModalOverlay /> @@ -114,158 +258,189 @@ const ProductComparisonModal = ({ isOpen, onClose }: Props) => { <HStack spacing={3}> <Text fontSize="xl" fontWeight="bold">Bandingkan Produk</Text> <Badge colorScheme="red" variant="solid" borderRadius="full" px={2}> - Baru + {products.filter(p => p !== null).length} Item </Badge> </HStack> <Text fontSize="sm" color="gray.500" fontWeight="normal" mt={1}> - Detail Spesifikasi Produk yang kamu pilih + Detail Spesifikasi Produk yang kamu pilih </Text> </ModalHeader> <ModalCloseButton /> - <ModalBody p={6}> - {/* Main Grid Layout: 5 Columns */} + <ModalBody p={6} bg="white"> <Grid templateColumns="200px repeat(4, 1fr)" gap={4}> - {/* Cell 1: Top Left Empty Space */} + {/* Cell 1: Kosong */} <GridItem /> - {/* Cell 2-5: Render Products */} - {DUMMY_PRODUCTS.map((product, index) => ( - <GridItem key={index}> + {/* Loop Slot Produk */} + {products.map((product, index) => ( + <GridItem key={index} position="relative" minW="0"> {product ? ( - // --- KARTU PRODUK TERISI --- - <VStack align="stretch" spacing={3}> - {/* Search Bar (Pakai Icon Lucide) */} - <InputGroup size="sm"> - <InputLeftElement pointerEvents="none"> - <Icon as={Search} color="gray.300" /> - </InputLeftElement> - <Input placeholder="Cari Produk lain" borderRadius="md" /> - </InputGroup> + <VStack align="stretch" spacing={3} h="100%"> + + {/* Tombol Hapus */} + {index !== 0 && ( + <IconButton + aria-label="Hapus" icon={<Trash2 size={16}/>} + size="xs" position="absolute" top={-2} right={-2} + colorScheme="red" onClick={() => handleRemoveProduct(index)} zIndex={2} + /> + )} - {/* Gambar Produk */} - <Box h="180px" display="flex" alignItems="center" justifyContent="center"> + {/* Gambar */} + <Box h="160px" display="flex" alignItems="center" justifyContent="center" bg="gray.50" borderRadius="md" p={2}> <Image - src={product.image} + src={product.image || '/images/noimage.jpeg'} alt={product.name} - maxH="100%" - objectFit="contain" + maxH="100%" objectFit="contain" + onError={(e) => { (e.target as HTMLImageElement).src = '/images/noimage.jpeg'; }} /> </Box> - {/* Harga */} + {/* Info Harga & Nama */} <Box> - <Text color="red.500" fontWeight="bold" fontSize="lg"> - {product.price} + <Text color="red.600" fontWeight="bold" fontSize="md"> + {product.price > 0 ? formatPrice(product.price) : 'Hubungi Admin'} </Text> - <Text as="s" color="gray.400" fontSize="xs"> - {product.originalPrice} + {/* Margin Bottom agar tidak tertutup dropdown */} + <Text fontSize="xs" fontWeight="bold" noOfLines={2} h="35px" title={product.name} mb={2}> + {product.name} </Text> </Box> - {/* Nama Produk */} - <Text fontSize="sm" fontWeight="bold" noOfLines={2} h="40px"> - {product.name} - </Text> - {/* Dropdown Varian */} - <Select size="sm" placeholder="Pilih Varian" borderRadius="md"> - {product.variants.map((v) => ( - <option key={v} value={v}>{v}</option> - ))} + <Select + size="sm" + borderRadius="md" + fontSize="xs" + value={product.id} + onChange={(e) => handleVariantChange(index, e.target.value)} + isDisabled={false} + bg="white" + > + {product.variants && product.variants.map((v: any) => ( + <option key={v.id} value={v.id}> + {v.code} + </option> + ))} </Select> - {/* Tombol Aksi (Pakai SVG Custom untuk Keranjang) */} + {/* Tombol */} <HStack spacing={2}> - <IconButton - aria-label="Add to cart" - icon={<Image src="/images/keranjang-compare.svg" w="20px" />} - variant="outline" - colorScheme="red" - size="sm" - w="40px" - /> - <Button colorScheme="red" size="sm" flex={1} fontSize="xs"> - Beli Sekarang - </Button> + <IconButton aria-label="Cart" icon={<Icon as={ShoppingCart} />} variant="outline" colorScheme="red" size="sm" /> + <Button as="a" href={`/product/${product.id}`} target="_blank" colorScheme="red" size="sm" flex={1} fontSize="xs"> + Lihat Detail + </Button> </HStack> </VStack> ) : ( - // --- SLOT KOSONG --- - <VStack align="stretch" spacing={3} h="100%"> - <InputGroup size="sm"> - <InputLeftElement pointerEvents="none"> - <Icon as={Search} color="gray.300" /> - </InputLeftElement> - <Input placeholder="Cari Produk lain" borderRadius="md" /> + // SLOT KOSONG + <VStack align="stretch" spacing={3} h="100%" position="relative"> + <InputGroup size="sm"> + <InputLeftElement pointerEvents="none"><Icon as={Search} color="gray.300" /></InputLeftElement> + <Input + placeholder="Cari Produk..." borderRadius="md" + value={activeSearchSlot === index ? searchQuery : ''} + onFocus={() => { setActiveSearchSlot(index); setSearchQuery(''); }} + onChange={(e) => setSearchQuery(e.target.value)} + /> </InputGroup> + + {activeSearchSlot === index && searchQuery.length > 0 && ( + <Box position="absolute" top="35px" left={0} right={0} bg="white" boxShadow="lg" zIndex={10} borderRadius="md" border="1px solid" borderColor="gray.200" maxH="250px" overflowY="auto"> + {isSearching ? ( + <Box p={4} textAlign="center"><Spinner size="sm" color="red.500"/></Box> + ) : searchResults.length > 0 ? ( + <List spacing={0}> + {searchResults.map((res) => ( + <ListItem + key={res.product_id_i || res.id} + p={2} borderBottom="1px solid #f0f0f0" + _hover={{ bg: 'red.50', cursor: 'pointer' }} + onClick={() => handleAddProduct(res, index)} + > + <Flex align="center" gap={2}> + <Image src={res.image_s || '/images/noimage.jpeg'} boxSize="30px" objectFit="contain" onError={(e) => { (e.target as HTMLImageElement).src = '/images/noimage.jpeg'; }} /> + <Box> + <Text fontSize="xs" fontWeight="bold" noOfLines={1}>{res.display_name_s || res.name_s}</Text> + <Text fontSize="xs" color="red.500">{formatPrice(res.price_tier1_v2_f || 0)}</Text> + </Box> + </Flex> + </ListItem> + ))} + </List> + ) : ( + <Box p={3} fontSize="xs" color="gray.500" textAlign="center">Tidak ditemukan.</Box> + )} + </Box> + )} - <Flex - direction="column" - align="center" - justify="center" - h="300px" - border="2px dashed" - borderColor="gray.200" - borderRadius="md" - bg="gray.50" - > - {/* Placeholder Image (SVG Custom) */} - <Image - src="/images/no-image-compare.svg" - w="60px" - mb={4} - opacity={0.5} - /> - <Text fontSize="sm" color="gray.400" textAlign="center"> - Produk belum ditambahkan - </Text> + <Flex direction="column" align="center" justify="center" flex={1} border="2px dashed" borderColor="gray.200" borderRadius="md" bg="gray.50" color="gray.400"> + <Icon as={Search} w={8} h={8} opacity={0.3} mb={2} /> + <Text fontSize="xs" textAlign="center">Tambah produk<br/>untuk membandingkan</Text> </Flex> </VStack> )} </GridItem> ))} - {/* --- SEPARATOR HEADER SPEC --- */} + {/* --- BAGIAN SPESIFIKASI --- */} <GridItem colSpan={5} py={6}> - <Box> + <Box borderBottom="2px solid" borderColor="gray.100" pb={2}> <Text fontSize="lg" fontWeight="bold">Spesifikasi Teknis</Text> - <Text fontSize="sm" color="gray.500">Detail Spesifikasi Produk yang kamu pilih</Text> </Box> </GridItem> - {/* --- TABLE SPEC --- */} - {SPEC_LABELS.map((label, rowIndex) => ( - <React.Fragment key={label}> - {/* Kolom Label */} - <GridItem - py={3} - borderBottom="1px solid" - borderColor="gray.100" - bg={rowIndex % 2 !== 0 ? "white" : "gray.50"} - > - <Text fontWeight="bold" fontSize="sm" color="gray.700"> - {label} - </Text> - </GridItem> + {isLoadingMatrix ? ( + <GridItem colSpan={5} textAlign="center" py={10}> + <Spinner color="red.500" thickness="4px" size="xl" /> + <Text mt={2} color="gray.500">Memuat data...</Text> + </GridItem> + ) : specsMatrix.length > 0 ? ( + specsMatrix.map((row, rowIndex) => ( + <React.Fragment key={row.code || rowIndex}> + {/* Label (Kiri) */} + <GridItem + py={3} + px={2} + borderBottom="1px solid" + borderColor="gray.100" + bg={rowIndex % 2 !== 0 ? "white" : "gray.50"} + display="flex" + alignItems="center" + > + <Text fontWeight="bold" fontSize="sm" color="gray.700">{row.label}</Text> + </GridItem> - {/* Kolom Value */} - {DUMMY_PRODUCTS.map((product, colIndex) => ( - <GridItem - key={`${label}-${colIndex}`} - py={3} - borderBottom="1px solid" - borderColor="gray.100" - bg={rowIndex % 2 !== 0 ? "white" : "gray.50"} - > - <Text fontSize="sm" color="gray.600"> - {product ? (product.specs[label] || '-') : '-'} - </Text> - </GridItem> - ))} - </React.Fragment> - ))} + {/* Value (Rata Tengah) */} + {products.map((product, colIndex) => { + const val = product ? (row.values[String(product.sku)] || '-') : ''; + + return ( + <GridItem + key={`${row.code}-${colIndex}`} + py={3} + px={2} + borderBottom="1px solid" + borderColor="gray.100" + bg={rowIndex % 2 !== 0 ? "white" : "gray.50"} + display="flex" // [FIX] Flex untuk centering + alignItems="center" // [FIX] Vertical Center + justifyContent="center" // [FIX] Horizontal Center + textAlign="center" // [FIX] Text Align Center + > + <Text fontSize="sm" color="gray.600">{renderSpecValue(val)}</Text> + </GridItem> + ); + })} + </React.Fragment> + )) + ) : ( + <GridItem colSpan={5} py={10} textAlign="center" color="gray.500" bg="gray.50"> + <Text>Data spesifikasi belum tersedia untuk produk ini.</Text> + </GridItem> + )} </Grid> </ModalBody> diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index 0f851560..58276f3c 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -334,7 +334,9 @@ const ProductDetail = ({ product }: Props) => { {/* Render di luar layout utama agar tidak tertutup elemen lain */} <ProductComparisonModal isOpen={isCompareOpen} - onClose={() => setCompareOpen(false)} + onClose={() => setCompareOpen(false)} + mainProduct={product} + selectedVariant={selectedVariant} /> <div className='relative'> diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js index 7d4adfcb..90841e09 100644 --- a/src/pages/api/shop/search.js +++ b/src/pages/api/shop/search.js @@ -2,6 +2,14 @@ import { productMappingSolr } from '@/utils/solrMapping'; import axios from 'axios'; import camelcaseObjectDeep from 'camelcase-object-deep'; +const escapeSolrQuery = (query) => { + if (query == '*') return query; + query = query.replace(/-/g, ' '); + const specialChars = /([\+\!\(\)\{\}\[\]\^"~\*\?:\\\/])/g; + const words = query.split(/\s+/); + return words.map((word) => specialChars.test(word) ? word.replace(specialChars, '\\$1') : word).join(' '); +}; + export default async function handler(req, res) { const { q = '*', @@ -20,6 +28,82 @@ export default async function handler(req, res) { let { stock = '' } = req.query; // ============================================================ + // [BARU] 1. LOGIC KHUSUS COMPARE (Wajib ditaruh paling atas) + // ============================================================ + if (source === 'compare') { + try { + let qCompare = q === '*' ? '*:*' : q; + + // Sanitasi Query + if (qCompare !== '*:*') { + const escaped = escapeSolrQuery(qCompare); + qCompare = `*${escaped}*`; + } + + // Susun Parameter Solr + const parameter = [ + `q=${encodeURIComponent(qCompare)}`, + `rows=${limit}`, + 'wt=json', + 'indent=true', + 'defType=edismax', + + // Grouping agar varian tidak banjir (per template) + 'group=true', + 'group.field=template_id_i', + 'group.limit=1', + 'group.main=true', + + // Field Wajib (Perhatikan: kita butuh product_id_i/default_code_s) + 'fl=id,display_name_s,default_code_s,image_s,price_tier1_v2_f,attribute_set_id_i,attribute_set_name_s,template_id_i,product_id_i', + + // Filter Dasar + 'fq=-publish_b:false', + 'fq=price_tier1_v2_f:[1 TO *]' + ]; + + // Logic Locking (Filter Attribute Set ID dari Frontend) + // Frontend akan mengirim fq="attribute_set_id_i:9" + if (fq) { + if (Array.isArray(fq)) { + fq.forEach(f => parameter.push(`fq=${encodeURIComponent(f)}`)); + } else { + parameter.push(`fq=${encodeURIComponent(fq)}`); + } + } + + // Target Core: VARIANTS (Karena compare butuh data spesifik) + const solrUrl = process.env.SOLR_HOST + '/solr/variants/select?' + parameter.join('&'); + + const result = await axios(solrUrl); + + // Mapping Result + const mappedProducts = productMappingSolr( + result.data.response.docs, + false + ); + + const finalResponse = { + ...result.data, + response: { + ...result.data.response, + products: mappedProducts + } + }; + + delete finalResponse.response.docs; + const camelCasedData = camelcaseObjectDeep(finalResponse); + + return res.status(200).json(camelCasedData); + + } catch (e) { + console.error('[COMPARE SEARCH ERROR]', e.message); + // Return JSON valid meski kosong, agar frontend tidak error syntax + return res.status(200).json({ response: { products: [], numFound: 0 } }); + } + } + + // ============================================================ // LOGIC KHUSUS UPSELL (Simple & Direct) // ============================================================ if (source === 'upsell') { @@ -219,12 +303,4 @@ export default async function handler(req, res) { } catch (error) { res.status(400).json({ error: error.message }); } -} - -const escapeSolrQuery = (query) => { - if (query == '*') return query; - query = query.replace(/-/g, ' '); - const specialChars = /([\+\!\(\)\{\}\[\]\^"~\*\?:\\\/])/g; - const words = query.split(/\s+/); - return words.map((word) => specialChars.test(word) ? word.replace(specialChars, '\\$1') : word).join(' '); -};
\ No newline at end of file +}
\ No newline at end of file |