1 files changed, 66 insertions, 1 deletions

diff --git a/src/lib/variant/components/VariantGroupCard.jsx b/src/lib/variant/components/VariantGroupCard.jsx
index 8cb1eec4..aba6971f 100644
--- a/src/lib/variant/components/VariantGroupCard.jsx
+++ b/src/lib/variant/components/VariantGroupCard.jsx
@@ -1,14 +1,79 @@
 import { useState } from 'react'
 import VariantCard from './VariantCard'
+import Image from '@/core/components/elements/Image/Image'
+import currencyFormat from '@/core/utils/currencyFormat'
 
 const VariantGroupCard = ({ variants, ...props }) => {
+  console.log('variant', variants)
   const [showAll, setShowAll] = useState(false)
   const variantsToShow = showAll ? variants : variants.slice(0, 2)
 
   return (
     <>
       {variantsToShow?.map((variant, index) => (
-        <VariantCard key={index} product={variant} {...props} />
+        <>
+          <VariantCard key={index} product={variant} {...props} />
+          {variant.program &&
+            variant.program.items &&
+            variant.program.items.map((item) => (
+              <div key={item.id}>
+                <div className='flex gap-x-3'>
+                  <div className='w-4/12 flex items-center gap-x-2'>
+                    <Image
+                      src={item.parent.image}
+                      alt={item.name}
+                      className='object-contain object-center border border-gray_r-6 h-32 w-full rounded-md'
+                    />
+                  </div>
+                  <div className='w-8/12 flex flex-col'>
+                    <p className='product-card__title wrap-line-ellipsis-2'>
+                      {item.name}
+                    </p>
+                    <p className='text-caption-2 text-gray_r-11 mt-1'>
+                      {/* {product.code || '-'}
+                      {product.attributes.length > 0 ? ` ・ ${product.attributes.join(', ')}` : ''} */}
+                    </p>
+                    <p className='text-caption-2 text-gray_r-11 mt-1'>
+                      Berat Item : {item.weight} Kg
+                    </p>
+                    <div className='flex flex-wrap gap-x-1 items-center mt-auto'>
+                      {item.price.discountPercentage > 0 && (
+                        <>
+                          <p className='text-caption-2 text-gray_r-11 line-through'>
+                            {currencyFormat(item.price.price)}
+                          </p>
+                          <span className='badge-red'>{item.price.discountPercentage}%</span>
+                        </>
+                      )}
+                    </div>
+                    <p className='text-caption-2 text-gray_r-11 mt-1'>
+                      {item.price.priceDiscount > 0
+                        ? currencyFormat(item.price.priceDiscount) +
+                          ' × ' +
+                          item.quantity +
+                          ' Barang'
+                        : ''}
+                    </p>
+                    <p className='text-caption-2 text-gray_r-12 font-bold mt-2'>
+                      {item.price.priceDiscount > 0 ? (
+                        currencyFormat(item.quantity * item.price.priceDiscount)
+                      ) : (
+                        <a
+                          href={whatsappUrl('product', {
+                            name: item.name,
+                            url: createSlug('/shop/product/', item.name, item.id, true)
+                          })}
+                          className='underline text-danger-500'
+                        >
+                          Call For Price{' '}
+                        </a>
+                      )}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ))}
+        </>
       ))}
       {variants.length > 2 && (
         <button