From d2011b63906b73cb44ea80cdde8e580b70a9ded8 Mon Sep 17 00:00:00 2001
From: Bello Babakolo <fleetbeekay@gmail.com>
Date: Sat, 31 Aug 2024 19:14:02 +0100
Subject: [PATCH] chore: refactor order-items components

---
 .../order-items/order-item.component.html     | 75 +++++++++++++++++++
 .../order-items/order-item.component.ts       | 21 ++++++
 .../modules/ui/src/lib/modules-ui.module.ts   |  2 +
 3 files changed, 98 insertions(+)
 create mode 100644 packages/modules/ui/src/lib/components/molecules/order-items/order-item.component.html
 create mode 100644 packages/modules/ui/src/lib/components/molecules/order-items/order-item.component.ts

diff --git a/packages/modules/ui/src/lib/components/molecules/order-items/order-item.component.html b/packages/modules/ui/src/lib/components/molecules/order-items/order-item.component.html
new file mode 100644
index 00000000..63bb5a2f
--- /dev/null
+++ b/packages/modules/ui/src/lib/components/molecules/order-items/order-item.component.html
@@ -0,0 +1,75 @@
+<div class="row">
+  <div class="flex-10">
+    <h4>{{ item.product?.product?.name }}</h4>
+  </div>
+
+  <div #target>
+    <button
+      vcl-button
+      square
+      class="emphasized-transparent"
+      title="Options"
+      (click)="popover.open()"
+    >
+      <vcl-icon
+        class="scale155p"
+        icon="mdi mdi-dots-vertical"
+      />
+    </button>
+  </div>
+</div>
+
+<div class="my-1 secondary-text-color">[Qty: {{ item.quantity }}]</div>
+
+<div>
+  {{ item.productId }}
+</div>
+<div>'No variant': {{ item.variantId }}</div>
+
+<img
+  [alt]="item.product?.product?.physical?.variants?.[0]?.name"
+  [src]="item.product?.product?.physical?.variants?.[0]?.images?.[0]?.url"
+  sizes="(max-width: 123px) 123px, 123px"
+  width="123"
+  loading="lazy"
+  ngOptimizedImage
+  priority="auto"
+/>
+<p class="mt-2">
+  <strong>Price:</strong> {{ item.unitPrice?.currency || 'EUR' }}
+  {{ item.unitPrice?.regularPrice }}
+</p>
+
+<ng-template
+  vclPopover
+  #popover="vclPopover"
+  [closeOnOffClick]="true"
+  [target]="target"
+  [positions]="[
+    {
+      originX: 'end',
+      originY: 'bottom',
+      overlayX: 'end',
+      overlayY: 'top'
+    }
+  ]"
+>
+  <div>
+    <vcl-button-group class="vertical">
+      <button
+        vcl-button
+        class="transparent"
+      >
+        <!-- (click)="editVariant.emit(variant); popover.close()" -->
+        Edit
+      </button>
+      <button
+        class="transparent"
+        vcl-button
+        [value]="2"
+      >
+        Delete
+      </button>
+    </vcl-button-group>
+  </div>
+</ng-template>
diff --git a/packages/modules/ui/src/lib/components/molecules/order-items/order-item.component.ts b/packages/modules/ui/src/lib/components/molecules/order-items/order-item.component.ts
new file mode 100644
index 00000000..6078c775
--- /dev/null
+++ b/packages/modules/ui/src/lib/components/molecules/order-items/order-item.component.ts
@@ -0,0 +1,21 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+
+import { IoRestorecommerceOrderItem } from '@console-core/graphql';
+
+@Component({
+  selector: 'rc-order-item',
+  templateUrl: './order-item.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RcOrderItemComponent {
+  @Input({ required: true })
+  item!: IoRestorecommerceOrderItem;
+
+  @Output() openEditItemModal = new EventEmitter<void>();
+}
diff --git a/packages/modules/ui/src/lib/modules-ui.module.ts b/packages/modules/ui/src/lib/modules-ui.module.ts
index c8f4e69b..37be965b 100644
--- a/packages/modules/ui/src/lib/modules-ui.module.ts
+++ b/packages/modules/ui/src/lib/modules-ui.module.ts
@@ -50,6 +50,7 @@ import {
   RcProductVariantsComponent,
   RcProductImagesComponent,
 } from './components/molecules';
+import { RcOrderItemComponent } from './components/molecules/order-items/order-item.component';
 import {
   RcAppComponent,
   RcSignUpComponent,
@@ -166,6 +167,7 @@ const molecules = [
   RcProductVariantComponent,
   RcProductVariantsComponent,
   RcProductImagesComponent,
+  RcOrderItemComponent,
 ];
 
 const organisms = [