From c88d98f06a6301bad6dd6d2e58b4908d8562638c Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 7 Jun 2024 17:08:09 +0700
Subject: <iman> add promotion program

---
 .../modules/product-promo/components/Card.tsx      | 144 ++++++++++++---------
 1 file changed, 80 insertions(+), 64 deletions(-)

(limited to 'src-migrate')

diff --git a/src-migrate/modules/product-promo/components/Card.tsx b/src-migrate/modules/product-promo/components/Card.tsx
index 59110098..be7d5b6e 100644
--- a/src-migrate/modules/product-promo/components/Card.tsx
+++ b/src-migrate/modules/product-promo/components/Card.tsx
@@ -18,36 +18,47 @@ import ProductPromoCardCountdown from "./CardCountdown"
 
 type Props = {
   promotion: IPromotion
+  slug?: string 
 }
 
-const ProductPromoCard = ({ promotion }: Props) => {
+const ProductPromoCard = ({ promotion, slug }: Props) => {
   const [products, setProducts] = useState<IProductVariantPromo[]>([])
+  const [freeProducts, setFreeProducts] = useState<IProductVariantPromo[]>([])
+  const [error, setError] = useState<string | null>(null)
 
   useEffect(() => {
     const getProducts = async () => {
-      const datas = []
-      for (const product of promotion.products) {
-        const res = await getVariantById(product.product_id)
-        res.data.qty = product.qty
-        datas.push(res.data)
+      try {
+        const datas = []
+        for (const product of promotion.products) {
+          const res = await getVariantById(product.product_id)
+          res.data.qty = product.qty
+          datas.push(res.data)
+        }
+        setProducts(datas)
+      } catch (err) {
+        setError('Failed to fetch product variants.')
+        console.error(err)
       }
-      setProducts(datas)
     }
 
     getProducts()
   }, [promotion.products])
 
-  const [freeProducts, setFreeProducts] = useState<IProductVariantPromo[]>([])
-
   useEffect(() => {
     const getFreeProducts = async () => {
-      const datas = []
-      for (const product of promotion.free_products) {
-        const res = await getVariantById(product.product_id)
-        res.data.qty = product.qty
-        datas.push(res.data)
+      try {
+        const datas = []
+        for (const product of promotion.free_products) {
+          const res = await getVariantById(product.product_id)
+          res.data.qty = product.qty
+          datas.push(res.data)
+        }
+        setFreeProducts(datas)
+      } catch (err) {
+        setError('Failed to fetch free product variants.')
+        console.error(err)
       }
-      setFreeProducts(datas)
     }
 
     getFreeProducts()
@@ -63,62 +74,67 @@ const ProductPromoCard = ({ promotion }: Props) => {
 
   const allProducts = [...products, ...freeProducts]
 
-  return (
-    <div className={style.card}>
-      <ProductPromoCardCountdown promotion={promotion} />
+  const shouldRender = !slug || promotion.type.value === slug
 
-      <div className='px-4 mt-4 text-caption-1'>
-        <div className="flex justify-between items-center">
-          <div className={style.title}>{promotion.name}</div>
+  return (
+    shouldRender && (
+      <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={2} rounded={6}>
+              <div className={style.badgeType}>
+                Paket {PROMO_CATEGORY[promotion.type.value].alias}
+                <InfoIcon size={16} />
+              </div>
+            </Tooltip>
+          </div>
 
-          <Tooltip label={PROMO_CATEGORY[promotion.type.value].description} placement="top" bgColor='red.600' p={2} rounded={6}>
-            <div className={style.badgeType}>
-              Paket {PROMO_CATEGORY[promotion.type.value].alias}
-              <InfoIcon size={16} />
+          <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>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>
-          </Tooltip>
-        </div>
-
-        <Skeleton className={clsxm(style.productSection, { 'justify-center': allProducts.length === 2 })} isLoaded={allProducts.length > 0}>
-          {allProducts.map((product, index) => (
-            <>
-              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.6 }}>
-                <ProductPromoItem
-                  variant={product}
-                  isFree={index + 1 > products.length && promotion.type.value === 'merchandise'}
-                />
-              </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>
-            </>
-          ))}
-        </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>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>
+              <ProductPromoAddToCart promotion={promotion} />
             </div>
-          </div>
-          <div>
-            <ProductPromoAddToCart promotion={promotion} />
-          </div>
 
+          </div>
         </div>
       </div>
-    </div>
+    )
   )
 }
 
-export default ProductPromoCard
\ No newline at end of file
+export default ProductPromoCard
-- 
cgit v1.2.3


From 9565ddf794165e297acf511a108f9a9643ee615d Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 11 Jun 2024 13:40:23 +0700
Subject: <iman> update promotion program

---
 src-migrate/modules/product-promo/components/Card.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src-migrate')

diff --git a/src-migrate/modules/product-promo/components/Card.tsx b/src-migrate/modules/product-promo/components/Card.tsx
index be7d5b6e..0be27af2 100644
--- a/src-migrate/modules/product-promo/components/Card.tsx
+++ b/src-migrate/modules/product-promo/components/Card.tsx
@@ -77,7 +77,7 @@ const ProductPromoCard = ({ promotion, slug }: Props) => {
   const shouldRender = !slug || promotion.type.value === slug
 
   return (
-    shouldRender && (
+    // shouldRender && (
       <div className={style.card}>
         <ProductPromoCardCountdown promotion={promotion} />
 
@@ -133,7 +133,7 @@ const ProductPromoCard = ({ promotion, slug }: Props) => {
           </div>
         </div>
       </div>
-    )
+    // )
   )
 }
 
-- 
cgit v1.2.3


From 0a87455727114468c216fbcd74266ea928eaec37 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 13 Jun 2024 09:34:24 +0700
Subject: <iman> update promotion-program

---
 src-migrate/modules/product-promo/components/Card.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src-migrate')

diff --git a/src-migrate/modules/product-promo/components/Card.tsx b/src-migrate/modules/product-promo/components/Card.tsx
index 0be27af2..e927508f 100644
--- a/src-migrate/modules/product-promo/components/Card.tsx
+++ b/src-migrate/modules/product-promo/components/Card.tsx
@@ -18,10 +18,10 @@ import ProductPromoCardCountdown from "./CardCountdown"
 
 type Props = {
   promotion: IPromotion
-  slug?: string 
+  
 }
 
-const ProductPromoCard = ({ promotion, slug }: Props) => {
+const ProductPromoCard = ({ promotion}: Props) => {
   const [products, setProducts] = useState<IProductVariantPromo[]>([])
   const [freeProducts, setFreeProducts] = useState<IProductVariantPromo[]>([])
   const [error, setError] = useState<string | null>(null)
@@ -74,7 +74,7 @@ const ProductPromoCard = ({ promotion, slug }: Props) => {
 
   const allProducts = [...products, ...freeProducts]
 
-  const shouldRender = !slug || promotion.type.value === slug
+  
 
   return (
     // shouldRender && (
-- 
cgit v1.2.3


From e3e3fe8d87130fcd1872046de0160272b6ea9763 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 14 Jun 2024 15:15:30 +0700
Subject: <iman> update promotion-program

---
 src-migrate/modules/product-promo/components/Section.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src-migrate')

diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
index 5fc0da4c..4e8a7dd5 100644
--- a/src-migrate/modules/product-promo/components/Section.tsx
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -50,7 +50,7 @@ const ProductPromoSection = ({ productId }: Props) => {
       >
         {promotions?.data.map((promotion) => (
           <div key={promotion.id} className="min-w-[400px] max-w-[400px]">
-            <ProductPromoCard promotion={promotion} />
+            <ProductPromoCard promotion={promotion}  />
           </div>
         ))}
       </Skeleton>
-- 
cgit v1.2.3


From ba84659f27c84d0d2c0cc3275e211a865e416bf7 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 19 Jun 2024 11:31:02 +0700
Subject: <iman> update responsive promotion program

---
 .../modules/product-promo/components/AddToCart.tsx | 52 ++++++++++++-----
 .../modules/product-promo/components/Card.tsx      | 68 +++++++++++++++++++++-
 .../modules/product-promo/styles/card.module.css   | 12 ++++
 3 files changed, 117 insertions(+), 15 deletions(-)

(limited to 'src-migrate')

diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx
index 192dd231..87017c14 100644
--- a/src-migrate/modules/product-promo/components/AddToCart.tsx
+++ b/src-migrate/modules/product-promo/components/AddToCart.tsx
@@ -7,6 +7,9 @@ import { getAuth } from '~/libs/auth'
 import { upsertUserCart } from '~/services/cart'
 import { IPromotion } from '~/types/promotion'
 
+import DesktopView from '../../../../src/core/components/views/DesktopView';
+import MobileView from '../../../../src/core/components/views/MobileView';
+
 type Props = {
   promotion: IPromotion
 }
@@ -55,21 +58,42 @@ const ProductPromoAddToCart = ({ promotion }: Props) => {
   }, [status])
 
   return (
-    <Button
-      colorScheme='yellow'
-      px={2}
-      w='110px'
-      gap={1}
-      isDisabled={status === 'loading'}
-      onClick={handleButton}
-    >
-      {status === 'success' && <CheckIcon size={16} />}
-      {status === 'loading' && <Spinner size='xs' mr={1.5} />}
-      {status === 'idle' && <PlusIcon size={16} />}
+    <div>
+      <MobileView>
+        <Button
+          colorScheme='yellow'
+          px={2}
+          w='36px'
+          gap={1}
+          isDisabled={status === 'loading'}
+          onClick={handleButton}
+        >
+          {status === 'success' && <CheckIcon size={16} />}
+          {status === 'loading' && <Spinner size='xs' mr={1.5} />}
+          {status === 'idle' && <PlusIcon size={16} />}
+
+          {status === 'success' && <span>Berhasil</span>}
+          {/* {status !== 'success' && <span>Keranjang</span>} */}
+        </Button>
+      </MobileView>
+      <DesktopView>
+        <Button
+          colorScheme='yellow'
+          px={2}
+          w='110px'
+          gap={1}
+          isDisabled={status === 'loading'}
+          onClick={handleButton}
+        >
+          {status === 'success' && <CheckIcon size={16} />}
+          {status === 'loading' && <Spinner size='xs' mr={1.5} />}
+          {status === 'idle' && <PlusIcon size={16} />}
 
-      {status === 'success' && <span>Berhasil</span>}
-      {status !== 'success' && <span>Keranjang</span>}
-    </Button>
+          {status === 'success' && <span>Berhasil</span>}
+          {status !== 'success' && <span>Keranjang</span>}
+        </Button>
+      </DesktopView>
+    </div>
   )
 }
 
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 && (
+      
     // )
   )
 }
diff --git a/src-migrate/modules/product-promo/styles/card.module.css b/src-migrate/modules/product-promo/styles/card.module.css
index a2ad9af6..29db13f3 100644
--- a/src-migrate/modules/product-promo/styles/card.module.css
+++ b/src-migrate/modules/product-promo/styles/card.module.css
@@ -44,3 +44,15 @@
 .totalItems {
     @apply text-gray_r-9;
 }
+
+/* @media only screen and (max-width: 384px) {
+    .basePrice {
+        @apply text-[13px];
+    }
+    .price{
+        @apply  text-[15px];
+    }
+    .totalItems{
+        @apply  text-[11px];
+    }
+  } */
-- 
cgit v1.2.3


From 2de8d24f2d9850ae7578e5bf40f50c8157093625 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 19 Jun 2024 11:35:11 +0700
Subject: <iman> update responsive promotion program

---
 src-migrate/modules/product-promo/styles/card.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src-migrate')

diff --git a/src-migrate/modules/product-promo/styles/card.module.css b/src-migrate/modules/product-promo/styles/card.module.css
index 29db13f3..faa3b370 100644
--- a/src-migrate/modules/product-promo/styles/card.module.css
+++ b/src-migrate/modules/product-promo/styles/card.module.css
@@ -45,7 +45,7 @@
     @apply text-gray_r-9;
 }
 
-/* @media only screen and (max-width: 384px) {
+@media only screen and (max-width: 384px) {
     .basePrice {
         @apply text-[13px];
     }
@@ -55,4 +55,4 @@
     .totalItems{
         @apply  text-[11px];
     }
-  } */
+  }
\ No newline at end of file
-- 
cgit v1.2.3