summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src-migrate/modules/product-promo/components/AddToCart.tsx52
-rw-r--r--src-migrate/modules/product-promo/components/Card.tsx68
-rw-r--r--src-migrate/modules/product-promo/styles/card.module.css12
-rw-r--r--src/pages/shop/promo/[slug].tsx6
4 files changed, 120 insertions, 18 deletions
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];
+ }
+ } */
diff --git a/src/pages/shop/promo/[slug].tsx b/src/pages/shop/promo/[slug].tsx
index 667a26ce..6e18101f 100644
--- a/src/pages/shop/promo/[slug].tsx
+++ b/src/pages/shop/promo/[slug].tsx
@@ -339,7 +339,7 @@ export default function PromoDetail() {
<>
<div className='grid grid-cols-1 gap-x-1 gap-y-1'>
{visiblePromotions?.map((promotion) => (
- <div key={promotion.id} className="min-w-[360px] max-w-[360px] mb-[20px] sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/4 ">
+ <div key={promotion.id} className="min-w-36 max-w-[400px] mb-[20px] sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/4 ">
<ProductPromoCard promotion={promotion}/>
</div>
))}
@@ -395,9 +395,9 @@ export default function PromoDetail() {
</div>
) : promoData && promoItems.length >= 1 ? (
<>
- <div className='grid grid-cols-2 gap-x-36 gap-y-1'>
+ <div className='grid grid-cols-1 gap-x-20 gap-y-1 lg:gap-x-14 xl:gap-x-36 lg:grid-cols-2 '>
{visiblePromotions?.map((promotion) => (
- <div key={promotion.id} className="min-w-[400px] max-w-[400px] mb-[20px] sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/4 ">
+ <div key={promotion.id} className="min-w-[400px] max-w-[400px] mb-[20px] sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/4 ">
<ProductPromoCard promotion={promotion}/>
</div>
))}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 00:39:43 +0000