Transaction detail and variant card component

4 files changed, 93 insertions, 0 deletions

diff --git a/src/components/elements/DescriptionRow.js b/src/components/elements/DescriptionRow.js
new file mode 100644
index 00000000..7fe9e3a1
--- /dev/null
+++ b/src/components/elements/DescriptionRow.js
@@ -0,0 +1,10 @@
+const DescriptionRow = ({ label, children }) => (
+  <div className="grid grid-cols-2">
+    <p className="leading-normal text-gray_r-11">{ label }</p>
+    <div className="text-right leading-normal">
+      { children }
+    </div>
+  </div>
+);
+
+export default DescriptionRow;
\ No newline at end of file
diff --git a/src/components/elements/Disclosure.js b/src/components/elements/Disclosure.js
new file mode 100644
index 00000000..0aaedf87
--- /dev/null
+++ b/src/components/elements/Disclosure.js
@@ -0,0 +1,14 @@
+const { ChevronUpIcon, ChevronDownIcon } = require("@heroicons/react/24/outline");
+
+const Disclosure = ({ label, active, onClick }) => (
+  <div className="flex justify-between p-4" onClick={onClick}>
+    <p className="font-medium leading-normal">{ label }</p>
+    { onClick && ( active ? (
+      <ChevronUpIcon className="w-5 h-5" />
+    ) : (
+      <ChevronDownIcon className="w-5 h-5" />
+    ) ) }
+  </div>
+);
+
+export default Disclosure;
\ No newline at end of file
diff --git a/src/components/transactions/TransactionDetail.js b/src/components/transactions/TransactionDetail.js
new file mode 100644
index 00000000..6d304d31
--- /dev/null
+++ b/src/components/transactions/TransactionDetail.js
@@ -0,0 +1,21 @@
+import DescriptionRow from "../elements/DescriptionRow";
+
+const CustomerSection = ({ address }) => {
+  const fullAddress = [];
+  if (address?.street) fullAddress.push(address.street);
+  if (address?.sub_district?.name) fullAddress.push(address.sub_district.name);
+  if (address?.district?.name) fullAddress.push(address.district.name);
+  if (address?.city?.name) fullAddress.push(address.city.name);
+  return (
+    <div className="px-4 pb-4 flex flex-col gap-y-4">
+      <DescriptionRow label="Nama">{ address?.name }</DescriptionRow>
+      <DescriptionRow label="Email">{ address?.email || '-' }</DescriptionRow>
+      <DescriptionRow label="No Telepon">{ address?.mobile || '-' }</DescriptionRow>
+      <DescriptionRow label="Alamat">{ fullAddress.join(', ') }</DescriptionRow>
+    </div>
+  );
+};
+
+export {
+  CustomerSection
+};
\ No newline at end of file
diff --git a/src/components/variants/VariantCard.js b/src/components/variants/VariantCard.js
new file mode 100644
index 00000000..cb4d8272
--- /dev/null
+++ b/src/components/variants/VariantCard.js
@@ -0,0 +1,48 @@
+import { createSlug } from "@/core/utils/slug";
+import Image from "../elements/Image";
+import Link from "../elements/Link";
+import currencyFormat from "@/core/utils/currencyFormat";
+
+export default function VariantCard({ 
+  data,
+  openOnClick = true 
+}) {
+  let product = data;
+
+  const Card = () => (
+    <div className="flex gap-x-3">
+      <div className="w-4/12 flex items-center gap-x-2">
+        <Image
+          src={product.parent.image} 
+          alt={product.parent.name} 
+          className="object-contain object-center border border-gray_r-6 h-32 w-full rounded-md"
+        />
+      </div>
+      <div className="w-8/12 flex flex-col">
+        <p className="product-card__title wrap-line-ellipsis-2">
+          {product.parent.name}
+        </p>
+        <p className="text-caption-2 text-gray_r-11 mt-1">
+          {product.code || '-'}
+          {product.attributes.length > 0 ? ` ・ ${product.attributes.join(', ')}` : ''}
+        </p>
+        <p className="text-caption-2 text-gray_r-11 mt-1">
+          {currencyFormat(product.price.price_discount)} × {product.quantity} Barang
+        </p>
+        <p className="text-caption-2 text-gray_r-12 font-bold mt-2">
+          {currencyFormat(product.quantity * product.price.price_discount)}
+        </p>
+      </div>
+    </div>
+  );
+
+  if (openOnClick) {
+    return (
+      <Link href={'/shop/product/' + createSlug(product.parent.name, product.parent.id)}>
+        <Card />
+      </Link>
+    );
+  }
+
+  return <Card/>;
+}
\ No newline at end of file