From f62b2345f463695ef0f8f79830cd76b6e0332821 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Sat, 13 Jan 2024 10:35:22 +0700
Subject: Refactor src migrate folder

---
 .../product-card/components/ProductCard.tsx        | 104 +++++++++++++++++++++
 src-migrate/modules/product-card/index.tsx         |   3 +
 .../product-card/styles/product-card.module.css    |  50 ++++++++++
 3 files changed, 157 insertions(+)
 create mode 100644 src-migrate/modules/product-card/components/ProductCard.tsx
 create mode 100644 src-migrate/modules/product-card/index.tsx
 create mode 100644 src-migrate/modules/product-card/styles/product-card.module.css

(limited to 'src-migrate/modules/product-card')

diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx
new file mode 100644
index 00000000..8cd96ce8
--- /dev/null
+++ b/src-migrate/modules/product-card/components/ProductCard.tsx
@@ -0,0 +1,104 @@
+import style from '../styles/product-card.module.css'
+
+import Link from 'next/link'
+import React from 'react'
+import Image from '~/components/ui/image'
+import clsxm from '~/libs/clsxm'
+import formatCurrency from '~/libs/formatCurrency'
+import { formatToShortText } from '~/libs/formatNumber'
+import { createSlug } from '~/libs/slug'
+import { IProduct } from '~/types/product'
+
+type Props = {
+  product: IProduct
+  layout?: 'vertical' | 'horizontal'
+}
+
+const ProductCard = ({ product, layout = 'vertical' }: Props) => {
+  const URL = {
+    product: createSlug('/shop/product/', product.name, product.id.toString()),
+    manufacture: createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString()),
+  }
+
+  return (
+    <div className={clsxm(style['wrapper'], {
+      [style['wrapper-v']]: layout === 'vertical',
+      [style['wrapper-h']]: layout === 'horizontal',
+    })}
+    >
+      <div className={clsxm({
+        [style['image-v']]: layout === 'vertical',
+        [style['image-h']]: layout === 'horizontal',
+      })}>
+        <Link href={URL.product}>
+          <Image
+            src={product.image || '/images/noimage.jpeg'}
+            alt={product.name}
+            width={128}
+            height={128}
+            className='object-contain object-center h-full w-full'
+            classNames={{ wrapper: 'h-full' }}
+          />
+        </Link>
+      </div>
+
+      <div className={clsxm({
+        [style['content-v']]: layout === 'vertical',
+        [style['content-h']]: layout === 'horizontal',
+      })}>
+        <Link
+          href={URL.manufacture}
+          className={style['brand']}
+        >
+          {product.manufacture.name}
+        </Link>
+
+        <div className='h-0.5' />
+
+        <Link
+          href={URL.product}
+          className={clsxm(style['name'], {
+            [style['name-v']]: layout === 'vertical',
+            [style['name-h']]: layout === 'horizontal',
+          })}
+        >
+          {product.name}
+        </Link>
+        <div className='h-1.5' />
+
+        <div className={style['price']}>
+          Rp {formatCurrency(product.lowest_price.price)}
+        </div>
+
+        <div className='h-1.5' />
+
+        <div className={style['price-inc']}>
+          Inc PPN:
+          Rp {formatCurrency(Math.round(product.lowest_price.price * 1.11))}
+        </div>
+
+        <div className='h-1' />
+
+        <div className='flex items-center gap-x-2.5'>
+          {product.stock_total > 0 && (
+            <div className={style['ready-stock']}>
+              Ready Stock
+            </div>
+          )}
+          {product.qty_sold > 0 && (
+            <div className={style['sold']}>
+              {formatToShortText(product.qty_sold)} Terjual
+            </div>
+          )}
+        </div>
+
+      </div>
+    </div>
+  )
+}
+
+const classPrefix = ({ layout }: Props) => {
+
+}
+
+export default ProductCard
\ No newline at end of file
diff --git a/src-migrate/modules/product-card/index.tsx b/src-migrate/modules/product-card/index.tsx
new file mode 100644
index 00000000..c87167bc
--- /dev/null
+++ b/src-migrate/modules/product-card/index.tsx
@@ -0,0 +1,3 @@
+import ProductCard from "./components/ProductCard";
+
+export default ProductCard
\ No newline at end of file
diff --git a/src-migrate/modules/product-card/styles/product-card.module.css b/src-migrate/modules/product-card/styles/product-card.module.css
new file mode 100644
index 00000000..38b895f9
--- /dev/null
+++ b/src-migrate/modules/product-card/styles/product-card.module.css
@@ -0,0 +1,50 @@
+.wrapper {
+    @apply w-full flex;
+}
+.wrapper-v {
+    @apply flex-col border border-gray-300 rounded-md h-[350px];
+}
+.wrapper-h {
+    @apply flex-row gap-x-2 pt-4;
+}
+
+.image-v {
+    @apply w-full h-48 px-4 border-b border-gray-300;
+}
+.image-h {
+    @apply w-4/12 h-24 px-1;
+}
+
+.content-v {
+    @apply w-full p-2;
+}
+.content-h {
+    @apply w-8/12;
+}
+
+.brand {
+    @apply text-danger-500 font-medium block;
+}
+
+.name {
+    @apply text-gray-700 font-medium line-clamp-3;
+}
+.name-v {
+    @apply min-h-[64px];
+}
+.name-h {
+    @apply min-h-[32px];
+}
+
+.price {
+    @apply text-danger-500 font-medium;
+}
+
+.ready-stock {
+    @apply bg-danger-500 text-white text-[11px] px-2 py-1 rounded-md;
+}
+
+.price-inc,
+.sold {
+    @apply text-gray-600 text-[11px];
+}
-- 
cgit v1.2.3


From 7072d220bc86b56e76716d114e28af98219e3f69 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 17 Jan 2024 09:54:59 +0700
Subject: Update image for performance

---
 src-migrate/modules/product-card/components/ProductCard.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src-migrate/modules/product-card')

diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx
index 8cd96ce8..c8a0b701 100644
--- a/src-migrate/modules/product-card/components/ProductCard.tsx
+++ b/src-migrate/modules/product-card/components/ProductCard.tsx
@@ -37,7 +37,6 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
             width={128}
             height={128}
             className='object-contain object-center h-full w-full'
-            classNames={{ wrapper: 'h-full' }}
           />
         </Link>
       </div>
-- 
cgit v1.2.3


From f7a0be1407da7edab60f6cb2ca3f1ef97acf811a Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 17 Jan 2024 16:03:48 +0700
Subject: Update product detail page ui

---
 src-migrate/modules/product-card/styles/product-card.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src-migrate/modules/product-card')

diff --git a/src-migrate/modules/product-card/styles/product-card.module.css b/src-migrate/modules/product-card/styles/product-card.module.css
index 38b895f9..aac27a84 100644
--- a/src-migrate/modules/product-card/styles/product-card.module.css
+++ b/src-migrate/modules/product-card/styles/product-card.module.css
@@ -41,7 +41,7 @@
 }
 
 .ready-stock {
-    @apply bg-danger-500 text-white text-[11px] px-2 py-1 rounded-md;
+    @apply bg-danger-500 text-white text-[11px] px-2 py-1 rounded-md whitespace-nowrap;
 }
 
 .price-inc,
-- 
cgit v1.2.3


From f02511b103acce8d3fa4bc174a43be15c4cca052 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 18 Jan 2024 12:08:37 +0700
Subject: Update add to wishlist in product detail

---
 src-migrate/modules/product-card/components/ProductCard.tsx     | 5 ++++-
 src-migrate/modules/product-card/styles/product-card.module.css | 4 ++++
 2 files changed, 8 insertions(+), 1 deletion(-)

(limited to 'src-migrate/modules/product-card')

diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx
index c8a0b701..0a97b344 100644
--- a/src-migrate/modules/product-card/components/ProductCard.tsx
+++ b/src-migrate/modules/product-card/components/ProductCard.tsx
@@ -26,7 +26,7 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
       [style['wrapper-h']]: layout === 'horizontal',
     })}
     >
-      <div className={clsxm({
+      <div className={clsxm('relative', {
         [style['image-v']]: layout === 'vertical',
         [style['image-h']]: layout === 'horizontal',
       })}>
@@ -38,6 +38,9 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
             height={128}
             className='object-contain object-center h-full w-full'
           />
+          {product.variant_total > 1 && (
+            <div className={style['variant-badge']}>{product.variant_total} Varian</div>
+          )}
         </Link>
       </div>
 
diff --git a/src-migrate/modules/product-card/styles/product-card.module.css b/src-migrate/modules/product-card/styles/product-card.module.css
index aac27a84..653bf2ca 100644
--- a/src-migrate/modules/product-card/styles/product-card.module.css
+++ b/src-migrate/modules/product-card/styles/product-card.module.css
@@ -48,3 +48,7 @@
 .sold {
     @apply text-gray-600 text-[11px];
 }
+
+.variant-badge {
+    @apply bg-gray-500/20 backdrop-blur-md absolute rounded-md bottom-2 left-2 px-2 py-1 text-caption-2;
+}
-- 
cgit v1.2.3