program promotion

2 files changed, 36 insertions, 0 deletions

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 75b37b9d..c3addbb9 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -14,6 +14,7 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import ProductCard from '../ProductCard'
 import productSimilarApi from '../../api/productSimilarApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
+import PromotionType from '@/lib/promotinProgram/components/PromotionType'
 
 const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -21,6 +22,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   const [lowestPrice, setLowestPrice] = useState(null)
 
   const [addCartAlert, setAddCartAlert] = useState(false)
+  const [promotionType, setPromotionType] = useState(false)
 
   const getLowestPrice = useCallback(() => {
     const prices = product.variants.map((variant) => variant.price)
@@ -156,6 +158,12 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                     )}
                   </div>
                 </div>
+                <div className='pt-3'>
+                  <div className='text-h-lg font-semibold'>Promotion Program</div>
+                  <div className='flex mt-3'>
+                    <PromotionType></PromotionType>
+                  </div>
+                </div>
               </div>
             </div>
 
@@ -229,6 +237,16 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                 </span>
               )}
             </h3>
+            <div className='mt-5'>
+              <button
+                type='button'
+                onClick={() => setPromotionType(true)}
+                className='text-gray-900 flex items-center justify-center rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
+              >
+                <span className='text-left'>%</span>
+                <span className='text-left ml-5'>Makin Hemat Pakai Promo </span>
+              </button>
+            </div>
             {product.variants.length > 1 ? (
               <button
                 type='button'
@@ -402,6 +420,16 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
             </LazyLoad>
           </div>
         </BottomPopup>
+        <BottomPopup
+          className='!w-[32%]'
+          title='Pakai Promo'
+          active={promotionType}
+          close={() => setPromotionType(false)}
+        >
+          <div className='flex mt-4'>
+            <PromotionType></PromotionType>
+          </div>
+        </BottomPopup>
       </div>
     </DesktopView>
   )
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 426fe1b8..5ed796ae 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -14,6 +14,7 @@ import { toast } from 'react-hot-toast'
 import { createSlug } from '@/core/utils/slug'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import whatsappUrl from '@/core/utils/whatsappUrl'
+import PromotionType from '@/lib/promotinProgram/components/PromotionType'
 
 const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -170,6 +171,13 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
       <Divider />
 
       <div className='p-4'>
+        <div className='mb-5'>
+          {/* <PromotionType></PromotionType> */}
+          <button type='button' className='text-gray-900  flex p-3 rounded-lg bg-white border border-gray-300  hover:bg-gray-100 py-2.5 w-[100%]'>
+           <span className='text-left'>%</span>
+           <span className='text-left ml-5'>Makin Hemat Pakai Promo</span>
+          </button>
+        </div>
         <div>
           <label className='flex justify-between'>
             Pilih Varian: