From e713d858d6ee701d755f94a9d671e40f50da3764 Mon Sep 17 00:00:00 2001
From: SRUTHY R <117913189+Sruthy1810@users.noreply.github.com>
Date: Sat, 19 Oct 2024 00:29:00 +0530
Subject: [PATCH] Updated index.js

added customer details
---
 .../app/components/Manager/OrderList/index.js | 69 ++++++++++---------
 1 file changed, 37 insertions(+), 32 deletions(-)

diff --git a/client/app/components/Manager/OrderList/index.js b/client/app/components/Manager/OrderList/index.js
index 59a28a82..b1eac6b6 100644
--- a/client/app/components/Manager/OrderList/index.js
+++ b/client/app/components/Manager/OrderList/index.js
@@ -1,71 +1,76 @@
-/**
- *
- * OrderList
- *
- */
-
 import React from 'react';
-
 import { Link } from 'react-router-dom';
-
 import { formatDate } from '../../../utils/date';
 
-const OrderList = props => {
+const OrderList = (props) => {
   const { orders } = props;
 
-  const renderFirstItem = order => {
+  const renderFirstItem = (order) => {
     if (order.products) {
       const product = order.products[0].product;
       return (
         <img
-          className='item-image'
+          className="item-image"
           src={`${
             product && product?.imageUrl
               ? product?.imageUrl
               : '/images/placeholder-image.png'
           }`}
+          alt="product" // Ensure alt attribute for accessibility
         />
       );
     } else {
-      return <img className='item-image' src='/images/placeholder-image.png' />;
+      return <img className="item-image" src="/images/placeholder-image.png" alt="placeholder" />;
+    }
+  };
+
+  const renderAddress = (order) => {
+    const { address } = order.customer;
+    if (address) {
+      return (
+        <div className="customer-address mb-1">
+          <span>Address:</span>
+          <span className="order-label">{`${address.street}, ${address.city}, ${address.state}, ${address.zipCode}`}</span>
+        </div>
+      );
+    } else {
+      return <div className="customer-address">No Address Available</div>;
     }
   };
 
   return (
-    <div className='order-list'>
+    <div className="order-list">
       {orders.map((order, index) => (
-        <div key={index} className='order-box'>
-          <Link to={`/order/${order._id}`} className='d-block box-link'>
-            <div className='d-flex flex-column flex-lg-row mb-3'>
-              <div className='order-first-item p-lg-3'>
+        <div key={index} className="order-box">
+          <Link to={`/order/${order._id}`} className="d-block box-link">
+            <div className="d-flex flex-column flex-lg-row mb-3">
+              <div className="order-first-item p-lg-3">
                 {renderFirstItem(order)}
               </div>
-              <div className='d-flex flex-column flex-xl-row justify-content-between flex-1 ml-lg-2 mr-xl-4 p-3'>
-                <div className='order-details'>
-                  <div className='mb-1'>
+              <div className="d-flex flex-column flex-xl-row justify-content-between flex-1 ml-lg-2 mr-xl-4 p-3">
+                <div className="order-details">
+                  <div className="mb-1">
                     <span>Status</span>
                     {order?.products ? (
-                      <span className='order-label order-status'>{` ${order?.products[0].status}`}</span>
+                      <span className="order-label order-status">{` ${order?.products[0].status}`}</span>
                     ) : (
-                      <span className='order-label order-status'>{` Unavailable`}</span>
+                      <span className="order-label order-status">Unavailable</span>
                     )}
                   </div>
-                  <div className='mb-1'>
+                  <div className="mb-1">
                     <span>Order #</span>
-                    <span className='order-label'>{` ${order._id}`}</span>
+                    <span className="order-label">{` ${order._id}`}</span>
                   </div>
-                  <div className='mb-1'>
+                  <div className="mb-1">
                     <span>Ordered on</span>
-                    <span className='order-label'>{` ${formatDate(
-                      order.created
-                    )}`}</span>
+                    <span className="order-label">{` ${formatDate(order.created)}`}</span>
                   </div>
-                  <div className='mb-1'>
+                  <div className="mb-1">
                     <span>Order Total</span>
-                    <span className='order-label'>{` $${
-                      order?.totalWithTax ? order?.totalWithTax : 0
-                    }`}</span>
+                    <span className="order-label">{` $${order?.totalWithTax ? order?.totalWithTax : 0}`}</span>
                   </div>
+                  {/* Render Customer Address */}
+                  {renderAddress(order)}
                 </div>
               </div>
             </div>