diff --git a/assets/js/app.js b/assets/js/app.js
index b9e92bfdc8..2d95c5bef2 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -3,6 +3,7 @@ __webpack_public_path__ = window.__webpack_public_path__; // eslint-disable-line
import Global from './theme/global';
const getAccount = () => import('./theme/account');
+const getAddReturnNew = () => import('./theme/add-return-new');
const getLogin = () => import('./theme/auth');
const noop = null;
@@ -11,7 +12,7 @@ const pageClasses = {
account_order: getAccount,
account_addressbook: getAccount,
shippingaddressform: getAccount,
- account_new_return: getAccount,
+ account_new_return: getAddReturnNew,
'add-wishlist': () => import('./theme/wishlist'),
account_recentitems: getAccount,
account_downloaditem: getAccount,
diff --git a/assets/js/theme/add-return-new.js b/assets/js/theme/add-return-new.js
new file mode 100644
index 0000000000..44fe3cd0ef
--- /dev/null
+++ b/assets/js/theme/add-return-new.js
@@ -0,0 +1,253 @@
+import PageManager from './page-manager';
+
+export default class AddReturnNew extends PageManager {
+ onReady() {
+ const $form = $('[data-new-return-form]');
+ if (!$form.length) return;
+
+ // ---------------------------------------------------------------------------
+ // Hardcoded page data which mirrors the TypeScript returns-ui interface.
+ // Replace with Stencil context when it is available.
+ // ---------------------------------------------------------------------------
+ this.pageData = {
+ order: {
+ id: '101',
+ datePlaced: new Date('2024-01-01'),
+ status: 'Completed',
+ currency: 'AUD',
+ isTaxInclusive: true,
+ shipping: {
+ address: {
+ fullName: 'Jane Smith',
+ address1: '1-3 Smail Street',
+ city: 'Ultimo',
+ state: 'NSW',
+ zip: '2007',
+ country: 'Australia',
+ },
+ method: 'Australia Post',
+ dateShipped: 'May 15, 2024',
+ trackingNumber: '7E27315406641',
+ },
+ items: [
+ {
+ id: 'item-1',
+ name: 'Product Name',
+ variant: 'Blue / Black / Green',
+ sku: 'SKU-001',
+ quantity: 1,
+ returnableQuantity: 1,
+ thumbnailUrl: '',
+ totalIncTax: 123.99,
+ totalExTax: 110.71,
+ },
+ {
+ id: 'item-2',
+ name: 'Product Name',
+ variant: 'Blue / Black / Green',
+ sku: 'SKU-002',
+ quantity: 1,
+ returnableQuantity: 1,
+ thumbnailUrl: '',
+ totalIncTax: 123.99,
+ totalExTax: 110.71,
+ },
+ {
+ id: 'item-3',
+ name: 'Product Name',
+ variant: 'Blue / Black / Green',
+ sku: 'SKU-003',
+ quantity: 1,
+ returnableQuantity: 1,
+ thumbnailUrl: '',
+ totalIncTax: 123.99,
+ totalExTax: 110.71,
+ },
+ ],
+ },
+ reasons: [
+ { id: 'reason-1', nameForMerchant: 'Damaged or defective', active: true },
+ { id: 'reason-2', nameForMerchant: 'Wrong item received', active: true },
+ { id: 'reason-3', nameForMerchant: 'Changed my mind', active: true },
+ { id: 'reason-4', nameForMerchant: 'Item not as described', active: true },
+ { id: 'reason-5', nameForMerchant: 'Arrived too late', active: true },
+ ],
+ resolutions: [
+ { resolutionType: 'Refund' },
+ { resolutionType: 'Exchange' },
+ { resolutionType: 'Store Credit' },
+ ],
+ };
+
+ this.renderHeader();
+ this.renderShippingAddress();
+ this.renderShippingMethod();
+ this.renderOrderLineItems();
+ this.bindSubmit($form);
+ }
+
+ renderHeader() {
+ const { order } = this.pageData;
+ const dateLabel = order.datePlaced.toLocaleDateString('en-AU', { year: 'numeric', month: 'long', day: 'numeric' });
+
+ document.getElementById('return-new-orderId').textContent = order.id;
+ document.getElementById('return-new-statusBadge').textContent = order.status.toUpperCase();
+ document.getElementById('return-new-datePlaced').textContent = `Order date: ${dateLabel}`;
+ }
+
+ renderShippingAddress() {
+ const { address } = this.pageData.order.shipping;
+ const shippingAddressHtml = `Shipping address
+ ${this.escHtml(address.fullName)}
+ ${this.escHtml(address.address1)}
+ ${this.escHtml(address.city)}, ${this.escHtml(address.state)} ${this.escHtml(address.zip)}
+ ${this.escHtml(address.country)}
`;
+
+ document.getElementById('return-new-shippingAddress').innerHTML = shippingAddressHtml;
+ }
+
+ renderShippingMethod() {
+ const { shipping } = this.pageData.order;
+ const shippingMethodHtml = `Shipping method
+ ${this.escHtml(shipping.method)}
+ Shipped on ${this.escHtml(shipping.dateShipped)}
+ ${this.escHtml(shipping.trackingNumber)}
`;
+
+ document.getElementById('return-new-shippingMethod').innerHTML = shippingMethodHtml;
+ }
+
+ renderOrderLineItems() {
+ const { order, reasons, resolutions } = this.pageData;
+
+ const resolutionOptions = [
+ '',
+ ...resolutions.map(resolution => {
+ const optionValue = this.isCustomResolution(resolution) ? this.escHtml(resolution.id) : this.escHtml(resolution.resolutionType);
+ const optionLabel = this.isCustomResolution(resolution) ? this.escHtml(resolution.nameForMerchant) : this.escHtml(resolution.resolutionType);
+ return ``;
+ }),
+ ].join('');
+
+ const reasonOptions = [
+ '',
+ ...reasons
+ .filter(reason => reason.active)
+ .map(reason => ``),
+ ].join('');
+
+ const orderLineItemsHtml = order.items.map(item => {
+ const price = new Intl.NumberFormat('en-AU', { style: 'currency', currency: order.currency }).format(item.totalIncTax);
+ const thumbnailHtml = item.thumbnailUrl
+ ? `})
`
+ : 'No image
';
+
+ return `
+
+ ${thumbnailHtml}
+
+
${this.escHtml(item.name)}
+
${this.escHtml(item.variant)}
+
${price} x ${item.quantity}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{{/partial}}
+{{> layout/base}}