(andri) fix table spec jika attribute mengandung html

2 files changed, 87 insertions, 8 deletions

diff --git a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
index b836c892..260b6713 100644
--- a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
+++ b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
@@ -60,7 +60,8 @@ const formatPrice = (price: number) => {
 
 const renderSpecValue = (val: any) => {
   if (!val || val === '-') return '-';
-  return String(val).replace(/<[^>]*>?/gm, '');
+  // return String(val).replace(/<[^>]*>?/gm, '');
+  return String(val);
 };
 
 const extractAttribute = (item: any) => {
@@ -777,11 +778,38 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
                                     {isItemLoading ? (
                                         <Spinner size="xs" color="red.500" />
                                     ) : (
-                                        <Text fontWeight="semibold" fontSize="12px" color="gray.800" textAlign="center" lineHeight="shorter">
-                                            {renderSpecValue(val)}
-                                        </Text>
+                                        <Box 
+                                            fontSize="12px" 
+                                            fontWeight="semibold" 
+                                            color="gray.800" 
+                                            w="100%"
+                                            textAlign="center"
+                                            sx={{
+                                                '& ul, & ol': { 
+                                                    textAlign: 'center', 
+                                                    paddingLeft: '1.2rem', 
+                                                    listStylePosition: 'outside',
+                                                    margin: 0,
+                                                    width: '100%'
+                                                },
+                                                '& li': { 
+                                                    textAlign: 'center',
+                                                    marginBottom: '4px',
+                                                    fontWeight: 'normal'
+                                                },
+                                                '& strong': {
+                                                    display: 'block', 
+                                                    marginBottom: '2px' 
+                                                },
+                                                '& p': { 
+                                                    textAlign: 'center', 
+                                                    margin: 0 
+                                                }
+                                            }}
+                                            dangerouslySetInnerHTML={{ __html: renderSpecValue(val) }} 
+                                        />
                                     )}
-                                    <Text fontSize="10px" color="gray.600" fontWeight="normal" textAlign="center">
+                                    <Text fontSize="10px" color="gray.600" fontWeight="bold" textAlign="center">
                                        {row.label}
                                     </Text>
                                  </VStack>
@@ -948,14 +976,44 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
                         py={3} px={2}
                         borderBottom="1px solid" borderColor="gray.100"
                         bg={rowIndex % 2 !== 0 ? "white" : "gray.50"}
-                        display="flex" alignItems="center" justifyContent="center" textAlign="center"
+                        display="flex" 
+                        alignItems="center" 
+                        justifyContent="center" 
+                        textAlign="center"
                         opacity={isLoadingMatrix ? 0.6 : 1}
                         transition="opacity 0.2s"
                       >
                         {isLoadingMatrix && product && !row.values[String(product.sku)] ? (
                           <Spinner size="xs" color="gray.400" />
                         ) : (
-                          <Text fontSize="sm" color="gray.600">{renderSpecValue(val)}</Text>
+                          <Box 
+                            fontSize="sm" 
+                            color="gray.600"
+                            w="100%"
+                            sx={{
+                              '& ul, & ol': { 
+                                textAlign: 'center', 
+                                paddingLeft: '1.2rem', 
+                                listStylePosition: 'outside',
+                                margin: 0,
+                                width: '100%'
+                                },
+                              '& li': { 
+                                textAlign: 'center',
+                                marginBottom: '4px',
+                                fontWeight: 'normal'
+                                },
+                              '& strong': {
+                                display: 'block', 
+                                marginBottom: '2px' 
+                              },
+                              '& p': { 
+                                textAlign: 'center', 
+                                margin: 0 
+                              }
+                            }}
+                            dangerouslySetInnerHTML={{ __html: renderSpecValue(val) }} 
+                          />
                         )}
                       </GridItem>
                     );
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index d63eb365..03089afa 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -310,8 +310,29 @@ const ProductDetail = ({ product }: Props) => {
 
     if (strVal.includes('<') && strVal.includes('>')) {
        return (
-         <div 
+         <Box 
            className="prose prose-sm text-gray-700"
+           sx={{
+             '& ul, & ol': { 
+                paddingLeft: '1.2rem', 
+                margin: 0,
+                textAlign: 'left'
+             },
+             '& li': { 
+                fontWeight: 'normal',
+                marginBottom: '4px',
+                textAlign: 'left'
+             },
+             '& strong': { 
+                display: 'block', 
+                marginBottom: '2px',
+                fontWeight: 'bold'
+             },
+             '& p': { 
+                margin: 0,
+                textAlign: 'left'
+             }
+           }}
            dangerouslySetInnerHTML={{ __html: strVal }}
          />
        );