Adding sku and variant option to the oder item listing

evershopcommerce · Oct 14, 2023 · 33642a5 · 33642a5
1 parent 8c46dcb
commit 33642a5
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 10 deletions.
diff --git a/packages/evershop/src/components/admin/oms/orderEdit/items/ItemVariantOptions.jsx b/packages/evershop/src/components/admin/oms/orderEdit/items/ItemVariantOptions.jsx
@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export function ItemVariantOptions({ options = [] }) {
+  if (!Array.isArray(options) || !options || options.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="cart-item-variant-options mt-05">
+      <ul>
+        {options.map((o, i) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <li key={i}>
+            <span className="attribute-name font-semibold">
+              {o.attribute_name}:{' '}
+            </span>
+            <span>{o.option_text}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+ItemVariantOptions.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      attribute_name: PropTypes.string,
+      option_text: PropTypes.string
+    })
+  )
+};
+
+ItemVariantOptions.defaultProps = {
+  options: []
+};
diff --git a/packages/evershop/src/components/admin/oms/orderEdit/items/Name.jsx b/packages/evershop/src/components/admin/oms/orderEdit/items/Name.jsx
@@ -2,24 +2,32 @@
 /* eslint-disable react/jsx-closing-tag-location */
 import PropTypes from 'prop-types';
 import React from 'react';
-import { ItemOptions } from '@components/admin/oms/orderEdit/items/ItemOptions';
+import { ItemVariantOptions } from '@components/admin/oms/orderEdit/items/ItemVariantOptions';
 
-export function Name({ name, options = [] }) {
+export function Name({ name, productSku, productUrl, variantOptions = [] }) {
   return (
     <td>
       <div className="product-column">
         <div>
-          <span className="font-semibold">{name}</span>
+          <span className="font-semibold">
+            <a href={productUrl}>{name}</a>
+          </span>
         </div>
-        <ItemOptions options={options} />
+        <div className="text-sm text-gray-500">
+          <span className="font-semibold">SKU: </span>
+          <span>{productSku}</span>
+        </div>
+        <ItemVariantOptions options={variantOptions} />
       </div>
     </td>
   );
 }
 
 Name.propTypes = {
   name: PropTypes.string.isRequired,
-  options: PropTypes.arrayOf(
+  productSku: PropTypes.string.isRequired,
+  productUrl: PropTypes.string.isRequired,
+  variantOptions: PropTypes.arrayOf(
     PropTypes.shape({
       option_name: PropTypes.string,
       values: PropTypes.arrayOf(
@@ -33,5 +41,5 @@ Name.propTypes = {
 };
 
 Name.defaultProps = {
-  options: undefined
+  variantOptions: []
 };
diff --git a/packages/evershop/src/modules/oms/graphql/types/Order/Order.graphql b/packages/evershop/src/modules/oms/graphql/types/Order/Order.graphql
@@ -17,7 +17,7 @@ type OrderAddress implements Address {
 """
 Represents an Order Item.
 """
-type OrdertItem implements ShoppingCartItem {
+type OrderItem {
   orderItemId: ID!
   uuid: String!
   orderId: ID!
@@ -39,7 +39,7 @@ type OrdertItem implements ShoppingCartItem {
   variantGroupId: Int
   variantOptions: String
   productCustomOptions: String
-  productUrl: String!
+  productUrl: String
 }
 
 """
@@ -49,7 +49,7 @@ type Order implements ShoppingCart {
   orderId: ID!
   uuid: String!
   orderNumber: String!
-  items: [OrdertItem]
+  items: [OrderItem]
   shippingAddress: OrderAddress
   billingAddress: OrderAddress
   currency: String!

diff --git a/packages/evershop/src/modules/oms/graphql/types/Order/Order.resolvers.js b/packages/evershop/src/modules/oms/graphql/types/Order/Order.resolvers.js
@@ -1,6 +1,7 @@
 const { select } = require('@evershop/postgres-query-builder');
 const { camelCase } = require('@evershop/evershop/src/lib/util/camelCase');
 const { getConfig } = require('@evershop/evershop/src/lib/util/getConfig');
+const { buildUrl } = require('@evershop/evershop/src/lib/router/buildUrl');
 
 module.exports = {
   Query: {
@@ -92,5 +93,14 @@ module.exports = {
         .execute(pool);
       return orders.map((row) => camelCase(row));
     }
+  },
+  OrderItem: {
+    productUrl: async ({ productId }, _, { pool }) => {
+      const product = await select()
+        .from('product')
+        .where('product_id', '=', productId)
+        .load(pool);
+      return product ? buildUrl('productEdit', { id: product.uuid }) : null;
+    }
   }
 };
diff --git a/packages/evershop/src/modules/oms/pages/admin/orderEdit/Items.jsx b/packages/evershop/src/modules/oms/pages/admin/orderEdit/Items.jsx
@@ -41,7 +41,12 @@ export default function Items({ order: { items, shipmentStatus } }) {
                     },
                     {
                       component: { default: Name },
-                      props: { name: i.productName, options: [] }, // TODO: Implement custom options
+                      props: {
+                        name: i.productName,
+                        productSku: i.productSku,
+                        productUrl: i.productUrl,
+                        variantOptions: JSON.parse(i.variantOptions || '[]')
+                      }, // TODO: Implement custom options
                       sortOrder: 20,
                       id: 'productName'
                     },
@@ -83,11 +88,14 @@ Items.propTypes = {
         id: PropTypes.string,
         qty: PropTypes.number,
         productName: PropTypes.string,
+        productSku: PropTypes.string,
+        productUrl: PropTypes.string,
         thumbnail: PropTypes.string,
         productPrice: PropTypes.shape({
           value: PropTypes.number,
           text: PropTypes.string
         }),
+        variantOptions: PropTypes.string,
         finalPrice: PropTypes.shape({
           value: PropTypes.number,
           text: PropTypes.string
@@ -143,7 +151,10 @@ export const query = `
         id: orderItemId
         qty
         productName
+        productSku
+        productUrl
         thumbnail
+        variantOptions
         productPrice {
           value
           text