<iman> update responsive promotion program

1 files changed, 67 insertions, 1 deletions

diff --git a/src-migrate/modules/product-promo/components/Card.tsx b/src-migrate/modules/product-promo/components/Card.tsx
index e927508f..56e29e38 100644
--- a/src-migrate/modules/product-promo/components/Card.tsx
+++ b/src-migrate/modules/product-promo/components/Card.tsx
@@ -16,6 +16,9 @@ import ProductPromoItem from './Item'
 import ProductPromoAddToCart from "./AddToCart"
 import ProductPromoCardCountdown from "./CardCountdown"
 
+import MobileView from '../../../../src/core/components/views/MobileView';
+import DesktopView from '../../../../src/core/components/views/DesktopView';
+
 type Props = {
   promotion: IPromotion
   
@@ -77,7 +80,66 @@ const ProductPromoCard = ({ promotion}: Props) => {
   
 
   return (
-    // shouldRender && (
+    <div>
+      <MobileView>
+      <div className={style.card}>
+        <ProductPromoCardCountdown promotion={promotion} />
+
+        <div className='px-4 mt-4 text-caption-1'>
+          <div className="flex justify-between items-center">
+            <div className={style.title}>{promotion.name}</div>
+
+            <Tooltip label={PROMO_CATEGORY[promotion.type.value].description} placement="top" bgColor='red.600' p={1} rounded={6}>
+              {/* <div className={style.badgeType} > */}
+                {/* Paket {PROMO_CATEGORY[promotion.type.value].alias} */}
+                <InfoIcon className={style.badgeType} size={25} />
+              {/* </div> */}
+            </Tooltip>
+          </div>
+
+          <Skeleton className={clsxm(style.productSection, { 'justify-center': allProducts.length === 2 })} isLoaded={allProducts.length > 0}>
+            {allProducts.map((product, index) => (
+              <React.Fragment key={product.id}>
+                <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.6 }}>
+                  <ProductPromoItem
+                    variant={product}
+                    isFree={index + 1 > products.length && promotion.type.value === 'merchandise'}
+                    // isFree={index + 1 > products.length }
+                  />
+                </motion.div>
+                <motion.div initial={{ y: 30, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ duration: 0.5, delay: 0.1 }}>
+                  {index + 1 < allProducts.length && (
+                    <div className="h-fit p-1 rounded-full border border-danger-500 text-danger-500 mt-[38px]">
+                      <PlusIcon size={14} strokeWidth='2px' />
+                    </div>
+                  )}
+                </motion.div>
+              </React.Fragment>
+            ))}
+          </Skeleton>
+
+          <div className={style.priceSection}>
+            <div className={style.priceCol}>
+              <Skeleton className={style.priceRow} isLoaded={priceTotal > 0}>
+                <span className={style.basePrice}>Rp{formatCurrency(priceTotal)}</span>
+                <span className="text-[11px]">Hemat <span className={style.savingAmt}>Rp {formatCurrency(priceTotal - promotion.price)}</span></span>
+              </Skeleton>
+
+              <div className={style.priceRow}>
+                <span className={style.price}>Rp{formatCurrency(promotion.price)}</span>
+                <span className={style.totalItems}>(Total {promotion.total_qty} barang)</span>
+              </div>
+              
+            </div>
+            <div>
+              <ProductPromoAddToCart promotion={promotion} />
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </MobileView>
+    <DesktopView>
       <div className={style.card}>
         <ProductPromoCardCountdown promotion={promotion} />
 
@@ -133,6 +195,10 @@ const ProductPromoCard = ({ promotion}: Props) => {
           </div>
         </div>
       </div>
+    </DesktopView>
+    </div>
+    // shouldRender && (
+      
     // )
   )
 }