@riosst100/pwa-marketplace 2.9.4 → 2.9.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/i18n/en_US.json +1 -0
  2. package/i18n/id_ID.json +1 -0
  3. package/package.json +1 -1
  4. package/src/componentOverrideMapping.js +6 -1
  5. package/src/components/ConfirmEmailPage/confirmEmail.js +76 -0
  6. package/src/components/ConfirmEmailPage/confirmEmail.module.css +71 -0
  7. package/src/components/ConfirmEmailPage/index.js +1 -0
  8. package/src/components/FavoriteSellerPage/favoriteSeller.js +0 -1
  9. package/src/components/FavoriteSellerPage/item.js +0 -2
  10. package/src/components/OrderDetail/components/itemsOrdered.js +94 -82
  11. package/src/components/OrderDetail/components/rmaList.js +80 -88
  12. package/src/components/OrderDetail/orderDetail.js +154 -95
  13. package/src/components/RMAPage/RMACreate.js +225 -36
  14. package/src/components/RMAPage/RMADetail.js +141 -89
  15. package/src/components/RMAPage/RMAList.js +38 -57
  16. package/src/components/RMAPage/components/productItem.js +55 -30
  17. package/src/components/RMAPage/orderRow.js +109 -254
  18. package/src/components/VerifyEmailPage/verifyEmail.js +33 -10
  19. package/src/intercept.js +8 -1
  20. package/src/overwrites/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary.js +2 -2
  21. package/src/overwrites/peregrine/lib/talons/CheckoutPage/PaymentInformation/paymentMethods.gql.js +45 -0
  22. package/src/overwrites/peregrine/lib/talons/OrderHistoryPage/orderHistoryPage.gql.js +117 -0
  23. package/src/overwrites/peregrine/lib/talons/OrderHistoryPage/orderRow.gql.js +46 -0
  24. package/src/overwrites/peregrine/lib/talons/OrderHistoryPage/useOrderRow.js +112 -0
  25. package/src/overwrites/peregrine/lib/talons/RMAPage/rmaPage.gql.js +170 -0
  26. package/src/overwrites/venia-ui/lib/components/AccountInformationPage/DeleteAccount.js +5 -37
  27. package/src/overwrites/venia-ui/lib/components/Adapter/adapter.js +3 -1
  28. package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.js +10 -2
  29. package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/orderRow.js +158 -79
  30. package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/orderRow.module.css +3 -3
  31. package/src/overwrites/venia-ui/lib/components/StoreCodeRoute/storeCodeRoute.js +1 -1
  32. package/src/talons/AccountInformationPage/deleteAccount.gql.js +23 -0
  33. package/src/talons/AccountInformationPage/useDeleteAccount.js +98 -0
  34. package/src/talons/ConfirmEmailPage/confirmEmailPage.gql.js +20 -0
  35. package/src/talons/ConfirmEmailPage/useConfirmEmailPage.js +78 -0
  36. package/src/talons/OrderHistoryPage/useOrderHistoryPage.js +115 -0
  37. package/src/talons/RMAPage/useRmaPage.js +145 -0
  38. package/src/talons/VerifyEmailPage/useVerifyEmailPage.js +73 -0
  39. package/src/talons/VerifyEmailPage/verifyEmailPage.gql.js +36 -0
package/src/components/OrderDetail/components/rmaList.js CHANGED
@@ -2,108 +2,100 @@ import React from 'react'
2
2
  import { useIntl } from 'react-intl';
3
3
  import { Link } from 'react-router-dom';
4
4
 
5
- const rmaList = () => {
5
+ const rmaList = ({ rmas, isLoadingWithoutData }) => {
6
6
  const { formatMessage } = useIntl();
7
7
 
8
8
  return (
9
9
  <>
10
10
  <div className='rounded-md border border-gray-100'>
11
- <div class="hidden md_block table-wrapper order-items w-full">
12
- <table class="data table table-order-items w-full" id="my-orders-table" summary="Items Ordered">
11
+ <div className="hidden md_block table-wrapper order-items w-full">
12
+ <table className="data table table-order-items w-full" id="my-orders-table" summary="Items Ordered">
13
13
  <thead>
14
14
  <tr className='bg-gray-150'>
15
- <th class="col text-left py-3 px-2.5 rounded-tl-md">RMA</th>
16
- <th class="col text-left py-3 px-2.5">Date</th>
17
- <th class="col text-left py-3 px-2.5">Order</th>
18
- <th class="col text-left py-3 px-2.5">Status</th>
19
- <th class="col text-left py-3 px-2.5 rounded-tr-md">Action</th>
15
+ <th className="col text-left py-3 px-2.5 rounded-tl-md">RMA</th>
16
+ <th className="col text-left py-3 px-2.5">Date</th>
17
+ <th className="col text-left py-3 px-2.5">Order</th>
18
+ <th className="col text-left py-3 px-2.5">Status</th>
19
+ <th className="col text-left py-3 px-2.5 rounded-tr-md">Action</th>
20
20
  </tr>
21
21
  </thead>
22
22
  <tbody>
23
- <tr id="order-item-row-1" className='border-b border-gray-150 last-of-type_border-0'>
24
- <td class="col rma text-left align-top py-3 px-2.5" data-th="Product Name">
25
- <span className='font-semibold'>
26
- 3000000011-2
27
- </span>
28
- </td>
29
- <td class="col date align-top py-3 px-2.5" data-th="SKU">
30
- <span className='font-normal'>
31
- Jun 29, 2024
32
- </span>
33
- </td>
34
- <td class="col order text-left align-top py-3 px-2.5" data-th="Price">
35
- <Link to={'/order/123123'} className="underline">
36
- 3000000011
37
- </Link>
38
- </td>
39
- <td class="col qty text-left align-top py-3 px-2.5" data-th="Qty">
40
- <p className='p-1 bg-[#F1EFF6] rounded-md flex items-center px-5 w-fit'>
41
- <span className='font-medium block text-blue-700'>
42
- Pending Approval
43
- </span>
44
- </p>
45
- </td>
46
- <td class="col subtotal text-left align-top py-3 px-2.5" data-th="Subtotal">
47
- <Link to={'/return/123123'} className="underline">
48
- View Return
49
- </Link>
50
- </td>
51
- </tr>
23
+ {rmas && rmas.length > 0 ? (
24
+ rmas.map((rma, idx) => {
25
+ const formattedDate = rma.created_at ? new Date(rma.created_at.replace(' ', 'T')).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }) : '-';
26
+ return (
27
+ <tr key={rma.rma_id || idx} className='border-b border-gray-150 last-of-type_border-0'>
28
+ <td className="col rma text-left align-top py-3 px-2.5" data-th="RMA">
29
+ <span className='font-semibold'>{rma.increment_id}</span>
30
+ </td>
31
+ <td className="col date align-top py-3 px-2.5" data-th="Date">
32
+ <span className='font-normal'>{formattedDate}</span>
33
+ </td>
34
+ <td className="col order text-left align-top py-3 px-2.5" data-th="Order">
35
+ {rma.order_increment_id || (rma.order && rma.order.increment_id) || '-'}
36
+ </td>
37
+ <td className="col qty text-left align-top py-3 px-2.5" data-th="Status">
38
+ <p className='p-1 flex items-center w-fit'>
39
+ <span className='font-medium block text-blue-700'>{rma.status_label || rma.status}</span>
40
+ </p>
41
+ </td>
42
+ <td className="col subtotal text-left align-top py-3 px-2.5" data-th="Action">
43
+ <Link to={`/return/view/${rma.rma_id}`} className="underline">
44
+ View Return
45
+ </Link>
46
+ </td>
47
+ </tr>
48
+ );
49
+ })
50
+ ) : (
51
+ <tr><td colSpan={5} className='text-center py-4'>No RMA found.</td></tr>
52
+ )}
52
53
  </tbody>
53
54
  </table>
54
55
  </div>
55
56
  <div className='md_hidden'>
56
- <div class="orderDetails-orderTotalContainer-6or m-0 max-w-none min-w-none lg_m-auto lg_max-w-[25rem] lg_min-w-[22rem]">
57
- <div className='item flex flex-col gap-2 p-4 odd_border border-gray-150 last-of-type_border-0'>
58
- <div className='flex gap-3'>
59
- <div className='min-w-[60px] text-[14px] font-semibold'>
60
- RMA
61
- </div>
62
- <div className='min-w-[60px] text-[14px]'>
63
- 3000000011-2
64
- </div>
65
- </div>
66
- <div className='flex gap-3'>
67
- <div className='min-w-[60px] text-[14px] font-semibold'>
68
- Date
69
- </div>
70
- <div className='min-w-[60px] text-[14px]'>
71
- Jun 29, 2024
72
- </div>
73
- </div>
74
- <div className='flex gap-3'>
75
- <div className='min-w-[60px] text-[14px] font-semibold'>
76
- Order
77
- </div>
78
- <div className='min-w-[60px] text-[14px]'>
79
- <Link to={'/order-history/view/123123'} className="underline">
80
- 3000000011
81
- </Link>
82
- </div>
83
- </div>
84
- <div className='flex gap-3'>
85
- <div className='min-w-[60px] text-[14px] font-semibold self-center'>
86
- Status
87
- </div>
88
- <div className='min-w-[60px] text-[14px]'>
89
- <p className='p-1 bg-[#F1EFF6] rounded-md flex items-center px-5 w-fit'>
90
- <span className='font-medium block text-blue-700'>
91
- Pending Approval
92
- </span>
93
- </p>
94
- </div>
95
- </div>
96
- <div className='flex gap-3'>
97
- <div className='min-w-[60px] text-[14px] font-semibold self-center'>
98
- Action
99
- </div>
100
- <div className='min-w-[60px] text-[14px]'>
101
- <Link to={'/return/view/123123'} className="underline">
102
- View Return
103
- </Link>
104
- </div>
105
- </div>
106
- </div>
57
+ <div className="orderDetails-orderTotalContainer-6or m-0 max-w-none min-w-none lg_m-auto lg_max-w-[25rem] lg_min-w-[22rem]">
58
+ {rmas && rmas.length > 0 ? (
59
+ rmas.map((rma, idx) => {
60
+ const formattedDate = rma.created_at ? new Date(rma.created_at.replace(' ', 'T')).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }) : '-';
61
+ return (
62
+ <div key={rma.rma_id || idx} className='item flex flex-col gap-2 p-4 odd_border border-gray-150 last-of-type_border-0'>
63
+ <div className='flex gap-3'>
64
+ <div className='min-w-[60px] text-[14px] font-semibold'>RMA</div>
65
+ <div className='min-w-[60px] text-[14px]'>{rma.increment_id}</div>
66
+ </div>
67
+ <div className='flex gap-3'>
68
+ <div className='min-w-[60px] text-[14px] font-semibold'>Date</div>
69
+ <div className='min-w-[60px] text-[14px]'>{formattedDate}</div>
70
+ </div>
71
+ <div className='flex gap-3'>
72
+ <div className='min-w-[60px] text-[14px] font-semibold'>Order</div>
73
+ <div className='min-w-[60px] text-[14px]'>
74
+ {rma.order_increment_id || (rma.order && rma.order.increment_id) || '-'}
75
+ </div>
76
+ </div>
77
+ <div className='flex gap-3'>
78
+ <div className='min-w-[60px] text-[14px] font-semibold self-center'>Status</div>
79
+ <div className='min-w-[60px] text-[14px]'>
80
+ <p className='p-1 bg-[#F1EFF6] rounded-md flex items-center px-5 w-fit'>
81
+ <span className='font-medium block text-blue-700'>{rma.status_label || rma.status}</span>
82
+ </p>
83
+ </div>
84
+ </div>
85
+ <div className='flex gap-3'>
86
+ <div className='min-w-[60px] text-[14px] font-semibold self-center'>Action</div>
87
+ <div className='min-w-[60px] text-[14px]'>
88
+ <Link to={`/return/view/${rma.rma_id}`} className="underline">
89
+ View Return
90
+ </Link>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ );
95
+ })
96
+ ) : (
97
+ <div className='text-center py-4'>No RMA found.</div>
98
+ )}
107
99
  </div>
108
100
  </div>
109
101
  </div>
package/src/components/OrderDetail/orderDetail.js CHANGED
@@ -1,79 +1,154 @@
1
- import React from 'react';
1
+ import React, { useCallback, useRef, useMemo, useEffect, useState } from 'react';
2
2
  import { useIntl } from 'react-intl';
3
3
  import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
4
4
  import Button from '@magento/venia-ui/lib/components/Button';
5
5
  import cn from 'classnames';
6
6
  import { Printer } from 'iconsax-react';
7
- // import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
8
7
  import ItemsOrdered from './components/itemsOrdered';
9
8
  import RMAList from './components/rmaList';
9
+ import useRmaPage from '@riosst100/pwa-marketplace/src/talons/RMAPage/useRmaPage';
10
+ import { useLocation, useParams } from 'react-router-dom';
11
+ import useOrderHistoryPage from '@riosst100/pwa-marketplace/src/talons/OrderHistoryPage/useOrderHistoryPage';
10
12
 
11
- const OrderDetail = () => {
13
+ const OrderDetail = (props) => {
14
+ const printRef = useRef(null);
12
15
  const { formatMessage } = useIntl();
16
+ const location = useLocation();
13
17
  const PAGE_TITLE = formatMessage({
14
18
  id: 'Quotes.pageTitleTextRMADetail',
15
19
  defaultMessage: 'Order Detail'
16
20
  });
17
21
 
18
- // const dataTabs =
19
- // [
20
- // {
21
- // id: 'items-ordered',
22
- // title: 'Items Ordered',
23
- // content: <ItemsOrdered />
24
- // },
25
- // {
26
- // id: 'invoices',
27
- // title: 'Invoices',
28
- // content: <><h2>invoices</h2></>
29
- // },
30
- // {
31
- // id: 'order-shipments',
32
- // title: 'Order Shipments',
33
- // content: <><h2>Order shipments</h2></>
34
- // }
35
- // ];
22
+ // Retrieve order data from props or location state, fallback to fetch by orderNumber param
23
+ const params = useParams();
24
+
25
+ // Support both /order-history/view/:orderNumber and /order/:orderNumber
26
+ const orderNumberParam = params.orderNumber || params.urlKey || params.id;
27
+
28
+ // Keep a stable local state for order to avoid it turning undefined on re-renders
29
+ const [order, setOrder] = useState(() => props.order || location.state?.order || null);
30
+
31
+ // Fallback: fetch order by orderNumber from order history if not found
32
+ const { orders } = useOrderHistoryPage();
33
+
34
+ const fallbackOrder = useMemo(() => {
35
+ if (!order && orderNumberParam && orders && orders.length > 0) {
36
+ // order.number might be string or number, so use loose equality
37
+ return orders.find(o => o.number == orderNumberParam);
38
+ }
39
+ return undefined;
40
+ }, [order, orderNumberParam, orders]);
41
+
42
+ // Populate order state from fallback if needed (once data available)
43
+ useEffect(() => {
44
+ if (!order && fallbackOrder) {
45
+ setOrder(fallbackOrder);
46
+ }
47
+ }, [fallbackOrder, order]);
48
+ // Fetch RMA data for this order
49
+ const { rmas, isLoadingWithoutData } = useRmaPage({ orderNumber: orderNumberParam });
50
+
51
+ // Extract order data
52
+ const invoiceNumber = order?.invoices?.[0]?.number || '-';
53
+ const orderDate = order?.order_date
54
+ ? new Date(order.order_date.replace(' ', 'T')).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
55
+ : '-';
56
+ const status = order?.status || '-';
57
+ const shippingMethod = order?.shipping_method || '-';
58
+ const trackingNumber = order?.shipments?.[0]?.tracking?.[0]?.number || '-';
59
+ const shippingAddress = order?.shipping_address;
60
+ const billingAddress = order?.billing_address;
61
+ const paymentMethod = order?.payment_methods?.[0]?.type || '-';
62
+
63
+ // Format address helper
64
+ const formatAddress = addr => {
65
+ if (!addr) return '-';
66
+ return [
67
+ `${addr.firstname} ${addr.lastname}`,
68
+ ...(addr.street || []),
69
+ `${addr.city}${addr.region_id ? ', ' + addr.region_id : ''}${addr.postcode ? ', ' + addr.postcode : ''}`,
70
+ addr.country_code,
71
+ addr.telephone ? `T: ${addr.telephone}` : ''
72
+ ].filter(Boolean).join('\n');
73
+ };
74
+
75
+ const handlePrint = useCallback(() => {
76
+ const styleId = 'order-detail-print-style';
77
+ let style = document.getElementById(styleId);
78
+ if (!style) {
79
+ style = document.createElement('style');
80
+ style.id = styleId;
81
+ style.type = 'text/css';
82
+ style.media = 'print';
83
+ style.appendChild(document.createTextNode(`
84
+ @page { size: A3; margin: 0; }
85
+ @media print {
86
+ body { margin: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
87
+ body * { visibility: hidden !important; }
88
+ .print-area, .print-area * { visibility: visible !important; }
89
+ .print-area { position: relative; left: 0; top: -20px; width: 100%;}
90
+ .no-print { display: none !important; }
91
+ }
92
+ `));
93
+ document.head.appendChild(style);
94
+ }
95
+ window.print();
96
+ setTimeout(() => {
97
+ }, 500);
98
+ }, []);
99
+
100
+ // Early guard: show skeleton if order still resolving
101
+ if (!order && !fallbackOrder) {
102
+ return (
103
+ <div className='print-area relative grid gap-y-md' ref={printRef}>
104
+ <StoreTitle>{PAGE_TITLE}</StoreTitle>
105
+ <div aria-live="polite" className="text-xl font-medium text-left">
106
+ {PAGE_TITLE} - #-
107
+ </div>
108
+ </div>
109
+ );
110
+ }
36
111
 
37
112
  return (
38
- <div className='relative grid gap-y-md'>
113
+ <div className='print-area relative grid gap-y-md' ref={printRef}>
39
114
  <StoreTitle>{PAGE_TITLE}</StoreTitle>
40
115
  <div aria-live="polite" className="text-xl font-medium text-left">
41
- {PAGE_TITLE} - DEV123123123
116
+ {PAGE_TITLE} - #{order?.number || '-'}
42
117
  </div>
43
118
  <div className='block relative'>
44
119
  <div className='flex gap-2 mb-4 flex-col'>
45
- <div class="box box-order-shipping-method flex gap-4">
46
- <p class="box-title block min-w-[90px] font-semibold text-[14px]">
120
+ <div className="box box-order-shipping-method flex gap-4">
121
+ <p className="box-title block min-w-[90px] font-semibold text-[14px]">
47
122
  <span>Invoice</span>
48
123
  </p>
49
- <div class="box-content text-[14px]">
50
- INV/20240705/MPL/4007072581
124
+ <div className="box-content text-[14px]">
125
+ {invoiceNumber || '-'}
51
126
  </div>
52
127
  </div>
53
- <div class="box box-order-shipping-method flex gap-4 text-[14px]">
54
- <p class="box-title block min-w-[90px] font-semibold">
128
+ <div className="box box-order-shipping-method flex gap-4 text-[14px]">
129
+ <p className="box-title block min-w-[90px] font-semibold">
55
130
  <span>Order Date</span>
56
131
  </p>
57
- <div class="box-content text-[14px]">
58
- February 23, 2024
132
+ <div className="box-content text-[14px]">
133
+ {orderDate}
59
134
  </div>
60
135
  </div>
61
- <div class="box box-order-shipping-method flex gap-4 text-[14px]">
62
- <p class="box-title block min-w-[90px] font-semibold self-center">
136
+ <div className="box box-order-shipping-method flex gap-4 text-[14px]">
137
+ <p className="box-title block min-w-[90px] font-semibold self-center">
63
138
  <span>Status</span>
64
139
  </p>
65
- <div class="box-content text-[14px]">
140
+ <div className="box-content text-[14px]">
66
141
  <div className='p-1 bg-[#F1EFF6] rounded-md flex items-center px-5'>
67
142
  <p className='text-[14px] text-blue-700 flex justify-between'>
68
143
  <span className='font-medium block text-blue-700'>
69
- Processing
144
+ {status}
70
145
  </span>
71
146
  </p>
72
147
  </div>
73
148
  </div>
74
149
  </div>
75
150
  </div>
76
- <div className='flex flex-col md_flex-row gap-x-4 justify-end'>
151
+ <div className='flex flex-col md_flex-row gap-x-4 justify-end no-print'>
77
152
  <Button
78
153
  priority='high'
79
154
  classes={{
@@ -83,6 +158,8 @@ const OrderDetail = () => {
83
158
  "bg-white px-6 py-2 rounded-md text-gray-900 hover_!text-white border border-solid",
84
159
  "border-gray-900 focus-visible_outline-none hover_bg-gray-900 min-h-[40px]"
85
160
  )}
161
+ onClick={handlePrint}
162
+ aria-label={formatMessage({ id: 'order.printInvoices', defaultMessage: 'Print Invoices' })}
86
163
  >
87
164
  <span className='flex gap-x-3 justify-center group-hover_!text-white'>
88
165
  <Printer
@@ -99,15 +176,7 @@ const OrderDetail = () => {
99
176
  </Button>
100
177
  </div>
101
178
  </div>
102
-
103
- {/* <Tabs
104
- data={dataTabs}
105
- tabContentWrapperClassName='!p-0'
106
- hasContent
107
- tabWrapperClassName='xl_gap-x-[60px]'
108
- rootClassName="mb-0"
109
- /> */}
110
- <div class="block block-order-details-view">
179
+ <div className="block block-order-details-view">
111
180
  <div aria-live="polite" className="text-lg font-medium text-left mb-4 block-title">
112
181
  {
113
182
  formatMessage({
@@ -116,24 +185,22 @@ const OrderDetail = () => {
116
185
  })
117
186
  }
118
187
  </div>
119
-
120
- <ItemsOrdered />
188
+ <ItemsOrdered order={order} />
121
189
  </div>
122
-
123
- <div class="block block-order-details-view">
124
- <div aria-live="polite" className="text-lg font-medium text-left mb-4 block-title">
125
- {
126
- formatMessage({
127
- id: 'order.rmaInformation',
128
- defaultMessage: 'RMA Information'
129
- })
130
- }
190
+ {rmas && rmas.length > 0 && (
191
+ <div className="block block-order-details-view">
192
+ <div aria-live="polite" className="text-lg font-medium text-left mb-4 block-title">
193
+ {
194
+ formatMessage({
195
+ id: 'order.rmaInformation',
196
+ defaultMessage: 'RMA Information'
197
+ })
198
+ }
199
+ </div>
200
+ <RMAList rmas={rmas} isLoadingWithoutData={isLoadingWithoutData} />
131
201
  </div>
132
-
133
- <RMAList />
134
- </div>
135
-
136
- <div class="block block-order-details-view">
202
+ )}
203
+ <div className="block block-order-details-view">
137
204
  <div aria-live="polite" className="text-lg font-medium text-left mb-4 block-title">
138
205
  {
139
206
  formatMessage({
@@ -142,63 +209,55 @@ const OrderDetail = () => {
142
209
  })
143
210
  }
144
211
  </div>
145
- <div class="block-content flex flex-col gap-y-4 rounded-md border border-gray-100 px-4 py-6 justify-between gap-x-10">
146
- <div class="box box-order-shipping-method flex gap-4">
147
- <strong class="box-title block min-w-[140px]">
212
+ <div className="block-content flex flex-col gap-y-4 rounded-md border border-gray-100 px-4 py-6 justify-between gap-x-10">
213
+ <div className="box box-order-shipping-method flex gap-4">
214
+ <strong className="box-title block min-w-[140px]">
148
215
  <span>Shipping Method</span>
149
216
  </strong>
150
- <div class="box-content">
151
- Flat Rate - Fixed
217
+ <div className="box-content">
218
+ {shippingMethod}
152
219
  </div>
153
220
  </div>
154
- <div class="box box-order-shipping-method flex gap-4">
155
- <strong class="box-title block min-w-[140px]">
221
+ <div className="box box-order-shipping-method flex gap-4">
222
+ <strong className="box-title block min-w-[140px]">
156
223
  <span>Tracking Number</span>
157
224
  </strong>
158
- <div class="box-content">
159
- TX8971239123
225
+ <div className="box-content">
226
+ {trackingNumber}
160
227
  </div>
161
228
  </div>
162
- <div class="box box-order-shipping-address flex gap-4">
163
- <strong class="box-title block min-w-[140px]"><span>Shipping Address</span></strong>
164
- <div class="box-content">
165
- <div className=' whitespace-pre-wrap'>
166
- Veronica Costello{'\n'}
167
- 6146 Honey Bluff Parkway{'\n'}
168
- Calder, Michigan, 49628-7978{'\n'}
169
- United States{'\n'}
170
- T: <a href="tel:(555) 229-3326">(555) 229-3326</a>
229
+ <div className="box box-order-shipping-address flex gap-4">
230
+ <strong className="box-title block min-w-[140px]"><span>Shipping Address</span></strong>
231
+ <div className="box-content">
232
+ <div className='whitespace-pre-wrap'>
233
+ {formatAddress(shippingAddress)}
171
234
  </div>
172
235
  </div>
173
236
  </div>
174
- <div class="box box-order-billing-method flex gap-4">
175
- <strong class="box-title block min-w-[140px]">
237
+ <div className="box box-order-billing-method flex gap-4">
238
+ <strong className="box-title block min-w-[140px]">
176
239
  <span>Payment Method</span>
177
240
  </strong>
178
- <div class="box-content">
179
- <dl class="payment-method checkmemo">
180
- <dt class="title">Check / Money order</dt>
241
+ <div className="box-content">
242
+ <dl className="payment-method checkmemo">
243
+ <dt className="title">{paymentMethod}</dt>
181
244
  </dl>
182
245
  </div>
183
246
  </div>
184
- <div class="box box-order-billing-address flex gap-4">
185
- <strong class="box-title block min-w-[140px]">
247
+ <div className="box box-order-billing-address flex gap-4">
248
+ <strong className="box-title block min-w-[140px]">
186
249
  <span>Billing Address</span>
187
250
  </strong>
188
- <div class="box-content">
251
+ <div className="box-content">
189
252
  <div className='whitespace-pre-wrap'>
190
- Veronica Costello{'\n'}
191
- 6146 Honey Bluff Parkway{'\n'}
192
- Calder, Michigan, 49628-7978{'\n'}
193
- United States{'\n'}
194
- T: <a href="tel:(555) 229-3326">(555) 229-3326</a>
253
+ {formatAddress(billingAddress)}
195
254
  </div>
196
255
  </div>
197
256
  </div>
198
257
  </div>
199
- </div>
258
+ </div>
200
259
  </div>
201
- )
202
- }
260
+ );
261
+ };
203
262
 
204
263
  export default OrderDetail;