Update order and account dropins integration (#161)

* Update order and account dropins integration

* Fix lint issues

* Adjust TODO comments

* Integrate placeholders approach for static text

* Logout redirect fix

* Bump storefront-order version

* Return details (#163)

Implement return-details page

* Bump storefront-order version

* Update placeholders, remove debug code

* Adjust placeholders approach

* Adjust placeholders approach (once again)

blocks/commerce-account-sidebar/commerce-account-sidebar.css

@@ -9,8 +9,8 @@
     align-items: center;
     padding: var(--spacing-medium);
     margin-bottom: var(--spacing-small);
-    border: var(--shape-border-width-1) solid var(--color-neutral-400);
-    border-radius: var(--shape-border-radius-1);
+    border: var(--shape-border-width-2) solid var(--color-neutral-400);
+    border-radius: var(--shape-border-radius-2);
     text-decoration: none;
 }
 

blocks/commerce-customer-details/commerce-customer-details.css

@@ -1,2 +1,6 @@
 /* .commerce-customer-details {
 } */
+
+.commerce-customer-details {
+    margin-bottom: var(--spacing-small);
+}

blocks/commerce-customer-information/commerce-customer-information.css

@@ -0,0 +1 @@
+/* stylelint-disable no-empty-source */

blocks/commerce-customer-information/commerce-customer-information.js

@@ -0,0 +1,17 @@
+/* eslint-disable import/no-unresolved */
+/* eslint-disable import/no-extraneous-dependencies */
+import CustomerInformation from '@dropins/storefront-account/containers/CustomerInformation.js';
+import { render as accountRenderer } from '@dropins/storefront-account/render.js';
+import { checkIsAuthenticated } from '../../scripts/configs.js';
+import { CUSTOMER_LOGIN_PATH } from '../../scripts/constants.js';
+
+// Initialize
+import '../../scripts/initializers/account.js';
+
+export default async function decorate(block) {
+  if (!checkIsAuthenticated()) {
+    window.location.href = CUSTOMER_LOGIN_PATH;
+  } else {
+    await accountRenderer.render(CustomerInformation, {})(block);
+  }
+}

blocks/commerce-order-cost-summary/commerce-order-cost-summary.css

@@ -0,0 +1,6 @@
+/* .commerce-customer-details {
+} */
+
+.commerce-order-cost-summary {
+    margin-bottom: var(--spacing-small);
+}

blocks/commerce-order-cost-summary/commerce-order-cost-summary.js

@@ -0,0 +1,11 @@
+/* eslint-disable import/no-unresolved */
+/* eslint-disable import/no-extraneous-dependencies */
+import { render as orderRenderer } from '@dropins/storefront-order/render.js';
+import { OrderCostSummary } from '@dropins/storefront-order/containers/OrderCostSummary.js';
+
+// Initialize
+import '../../scripts/initializers/order.js';
+
+export default async function decorate(block) {
+  await orderRenderer.render(OrderCostSummary, {})(block);
+}

blocks/commerce-order-header/commerce-order-header.css

@@ -1,3 +1,7 @@
+body:not(.columns) main div.commerce-order-header-wrapper {
+    margin-top: var(--spacing-large);
+}
+
 body.columns main > .section > div.commerce-order-header-wrapper {
     margin-bottom: 0;
 }

blocks/commerce-order-header/commerce-order-header.js

@@ -3,6 +3,7 @@
 import { events } from '@dropins/tools/event-bus.js';
 import { Header, provider as uiProvider } from '@dropins/tools/components.js';
 import { CUSTOMER_ORDER_DETAILS_PATH, CUSTOMER_ORDERS_PATH } from '../../scripts/constants.js';
+import { fetchPlaceholders } from '../../scripts/aem.js';
 
 export default async function decorate(block) {
   block.innerHTML = '';
@@ -11,10 +12,11 @@ export default async function decorate(block) {
   await uiProvider.render(Header, { title: 'Order' })(headerContainer);
 
   if (window.location.href.includes(CUSTOMER_ORDER_DETAILS_PATH)) {
+    const placeholders = await fetchPlaceholders();
+
     const link = document.createElement('a');
 
-    // TODO: Add i18n when appropriate functionality will be introduced in boilerplate
-    link.innerText = '< Back to all orders';
+    link.innerText = placeholders?.Custom?.CommerceOrderHeader?.backToAllOrders;
     link.href = CUSTOMER_ORDERS_PATH;
     link.classList.add('orders-list-link');
 

blocks/commerce-order-product-list/commerce-order-product-list.css

@@ -0,0 +1,10 @@
+/* .commerce-customer-details {
+} */
+
+.commerce-order-product-list {
+    margin-bottom: var(--spacing-small);
+}
+
+.commerce-order-product-list .dropin-cart-item a:hover {
+    text-decoration: none;
+}

blocks/commerce-order-product-list/commerce-order-product-list.js

@@ -0,0 +1,13 @@
+/* eslint-disable import/no-unresolved */
+/* eslint-disable import/no-extraneous-dependencies */
+import { render as orderRenderer } from '@dropins/storefront-order/render.js';
+import { OrderProductList } from '@dropins/storefront-order/containers/OrderProductList.js';
+
+// Initialize
+import '../../scripts/initializers/order.js';
+
+export default async function decorate(block) {
+  await orderRenderer.render(OrderProductList, {
+    routeProductDetails: (product) => `/products/${product.productUrlKey}/${product.product.sku}`,
+  })(block);
+}

blocks/commerce-order-returns/commerce-order-returns.css

@@ -0,0 +1,6 @@
+/* .commerce-customer-details {
+} */
+
+.commerce-order-returns {
+    margin-bottom: var(--spacing-small);
+}

blocks/commerce-order-returns/commerce-order-returns.js

@@ -0,0 +1,32 @@
+/* eslint-disable import/no-unresolved */
+/* eslint-disable import/no-extraneous-dependencies */
+import { render as orderRenderer } from '@dropins/storefront-order/render.js';
+import { OrderReturns } from '@dropins/storefront-order/containers/OrderReturns.js';
+import { checkIsAuthenticated } from '../../scripts/configs.js';
+import {
+  CUSTOMER_RETURN_DETAILS_PATH,
+  RETURN_DETAILS_PATH,
+} from '../../scripts/constants.js';
+
+// Initialize
+import '../../scripts/initializers/order.js';
+
+export default async function decorate(block) {
+  const isAuthenticated = checkIsAuthenticated();
+  const returnDetailsPath = isAuthenticated
+    ? CUSTOMER_RETURN_DETAILS_PATH
+    : RETURN_DETAILS_PATH;
+
+  await orderRenderer.render(OrderReturns, {
+    routeReturnDetails: ({ orderNumber, returnNumber, token }) => {
+      const { searchParams } = new URL(window.location.href);
+      const orderRefFromUrl = searchParams.get('orderRef');
+      const newOrderRef = isAuthenticated ? orderNumber : token;
+
+      const encodedOrderRef = encodeURIComponent(orderRefFromUrl || newOrderRef);
+
+      return `${returnDetailsPath}?orderRef=${encodedOrderRef}&returnRef=${returnNumber}`;
+    },
+    routeProductDetails: (productData) => (productData ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
+  })(block);
+}

blocks/commerce-order-status/commerce-order-status.css

@@ -1 +1,5 @@
 /* stylelint-disable no-empty-source */
+
+.commerce-order-status {
+    margin-bottom: var(--spacing-small);
+}

blocks/commerce-order-status/commerce-order-status.js

@@ -2,10 +2,14 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { render as orderRenderer } from '@dropins/storefront-order/render.js';
 import { OrderStatus } from '@dropins/storefront-order/containers/OrderStatus.js';
+import { checkIsAuthenticated } from '../../scripts/configs.js';
 
 // Initialize
 import '../../scripts/initializers/order.js';
 
 export default async function decorate(block) {
-  await orderRenderer.render(OrderStatus, {})(block);
+  await orderRenderer.render(OrderStatus, {
+    routeCreateReturn: (orderData) => (checkIsAuthenticated() ? `/customer/create-return?orderId=${orderData.id}` : `/create-return?orderId=${orderData.id}`),
+    routeOnSuccess: () => '/cart',
+  })(block);
 }

blocks/commerce-orders-list/commerce-orders-list.js

@@ -4,7 +4,12 @@ import { render as accountRenderer } from '@dropins/storefront-account/render.js
 import { OrdersList } from '@dropins/storefront-account/containers/OrdersList.js';
 import { readBlockConfig } from '../../scripts/aem.js';
 import { checkIsAuthenticated } from '../../scripts/configs.js';
-import { CUSTOMER_LOGIN_PATH, CUSTOMER_ORDER_DETAILS_PATH, CUSTOMER_ORDERS_PATH } from '../../scripts/constants.js';
+import {
+  CUSTOMER_LOGIN_PATH,
+  CUSTOMER_ORDER_DETAILS_PATH,
+  CUSTOMER_ORDERS_PATH,
+  CUSTOMER_RETURN_DETAILS_PATH,
+} from '../../scripts/constants.js';
 
 // Initialize
 import '../../scripts/initializers/account.js';
@@ -19,14 +24,8 @@ export default async function decorate(block) {
       minifiedView: minifiedViewConfig === 'true',
       routeOrdersList: () => CUSTOMER_ORDERS_PATH,
       routeOrderDetails: (orderNumber) => `${CUSTOMER_ORDER_DETAILS_PATH}?orderRef=${orderNumber}`,
-      slots: {
-        // OrdersListCard: (ctx) => {
-        //   console.log('OrdersListCard', ctx);
-        // },
-        // OrdersListAction: (ctx) => {
-        //   console.log('OrdersListAction', ctx);
-        // },
-      },
+      routeReturnDetails: ({ orderNumber, returnNumber }) => `${CUSTOMER_RETURN_DETAILS_PATH}?orderRef=${orderNumber}&returnRef=${returnNumber}`,
+      routeOrderProduct: (productData) => (productData ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
     })(block);
   }
 }

blocks/commerce-return-header/commerce-return-header.css

@@ -0,0 +1,12 @@
+body:not(.columns) main div.commerce-return-header {
+    margin-top: var(--spacing-large);
+}
+
+body.columns main > .section > div.commerce-return-header {
+    margin-bottom: 0;
+}
+
+.returns-list-header {
+    display: inline-block;
+    margin-bottom: var(--spacing-medium);
+}

blocks/commerce-return-header/commerce-return-header.js

@@ -0,0 +1,34 @@
+/* eslint-disable import/no-unresolved */
+/* eslint-disable import/no-extraneous-dependencies */
+import { events } from '@dropins/tools/event-bus.js';
+import { Header, provider as uiProvider } from '@dropins/tools/components.js';
+import { CUSTOMER_RETURN_DETAILS_PATH, CUSTOMER_RETURNS_PATH } from '../../scripts/constants.js';
+import { fetchPlaceholders } from '../../scripts/aem.js';
+
+export default async function decorate(block) {
+  block.innerHTML = '';
+
+  const headerContainer = document.createElement('div');
+  await uiProvider.render(Header, { title: 'Return' })(headerContainer);
+
+  if (window.location.href.includes(CUSTOMER_RETURN_DETAILS_PATH)) {
+    const placeholders = await fetchPlaceholders();
+
+    const link = document.createElement('a');
+
+    link.innerText = placeholders?.Custom?.CommerceReturnHeader?.backToAllReturns;
+    link.href = CUSTOMER_RETURNS_PATH;
+    link.classList.add('returns-list-header');
+
+    block.appendChild(link);
+  }
+
+  block.appendChild(headerContainer);
+
+  events.on('order/data', (orderData) => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const returnNumber = urlParams.get('returnRef');
+    const returnData = orderData.returns.find((item) => item.returnNumber === returnNumber);
+    uiProvider.render(Header, { title: `Return ${returnData.returnNumber}` })(headerContainer);
+  }, { eager: true });
+}

blocks/commerce-returns-list/commerce-returns-list.css

@@ -0,0 +1 @@
+/* stylelint-disable no-empty-source */

blocks/commerce-returns-list/commerce-returns-list.js

@@ -0,0 +1,33 @@
+/* eslint-disable import/no-unresolved */
+/* eslint-disable import/no-extraneous-dependencies */
+import { render as orderRenderer } from '@dropins/storefront-order/render.js';
+import ReturnsList from '@dropins/storefront-order/containers/ReturnsList.js';
+import { readBlockConfig } from '../../scripts/aem.js';
+import { checkIsAuthenticated } from '../../scripts/configs.js';
+import {
+  CUSTOMER_LOGIN_PATH,
+  CUSTOMER_RETURN_DETAILS_PATH,
+  CUSTOMER_ORDER_DETAILS_PATH,
+  CUSTOMER_RETURNS_PATH,
+} from '../../scripts/constants.js';
+
+// Initialize
+import '../../scripts/initializers/order.js';
+
+export default async function decorate(block) {
+  const {
+    'minified-view': minifiedViewConfig = 'false',
+  } = readBlockConfig(block);
+
+  if (!checkIsAuthenticated()) {
+    window.location.href = CUSTOMER_LOGIN_PATH;
+  } else {
+    await orderRenderer.render(ReturnsList, {
+      minifiedView: minifiedViewConfig === 'true',
+      routeReturnDetails: ({ orderNumber, returnNumber }) => `${CUSTOMER_RETURN_DETAILS_PATH}?orderRef=${orderNumber}&returnRef=${returnNumber}`,
+      routeOrderDetails: ({ orderNumber }) => `${CUSTOMER_ORDER_DETAILS_PATH}?orderRef=${orderNumber}`,
+      routeReturnsList: () => CUSTOMER_RETURNS_PATH,
+      routeProductDetails: (productData) => (productData ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
+    })(block);
+  }
+}

blocks/commerce-search-order/commerce-search-order.css

@@ -3,3 +3,15 @@ main .commerce-search-order-container {
     margin: 40px auto;
     width: 100%;
 }
+
+.commerce-search-order .dropin-in-line-alert {
+    margin-bottom: var(--spacing-small);
+}
+
+.commerce-search-order .dropin-card h2 {
+    margin-bottom: var(--spacing-small);
+}
+
+.commerce-search-order .dropin-card p {
+    margin-bottom: var(--spacing-small);
+}

blocks/commerce-shipping-status/commerce-shipping-status.css

@@ -1 +1,9 @@
 /* stylelint-disable no-empty-source */
+
+.commerce-shipping-status {
+    margin-bottom: var(--spacing-small);
+}
+
+.commerce-shipping-status .order-shipping-status-card {
+    margin-bottom: var(--spacing-small);
+}

blocks/commerce-shipping-status/commerce-shipping-status.js

@@ -7,5 +7,15 @@ import { ShippingStatus } from '@dropins/storefront-order/containers/ShippingSta
 import '../../scripts/initializers/order.js';
 
 export default async function decorate(block) {
-  await orderRenderer.render(ShippingStatus, {})(block);
+  await orderRenderer.render(ShippingStatus, {
+    routeProductDetails: (data) => {
+      if (data?.orderItem) {
+        return `/products/${data?.orderItem?.productUrlKey}/${data?.orderItem?.product?.sku}`;
+      }
+      if (data?.product) {
+        return `/products/${data?.product?.urlKey}/${data?.product?.sku}`;
+      }
+      return '#';
+    },
+  })(block);
 }

blocks/header/renderAuthDropdown.js

@@ -68,7 +68,7 @@ export function renderAuthDropdown(navTools) {
 
   logoutButtonElement.addEventListener('click', async () => {
     await authApi.revokeCustomerToken();
-    checkAndRedirect('/customer/account', '/customer/login');
+    checkAndRedirect('/customer', '/customer/login');
   });
 
   renderSignIn(authDropinContainer);

package.json

@@ -35,11 +35,11 @@
   "dependencies": {
     "@adobe/magento-storefront-event-collector": "^1.8.0",
     "@adobe/magento-storefront-events-sdk": "^1.8.0",
-    "@dropins/storefront-account": "0.1.0-alpha13",
+    "@dropins/storefront-account": "0.1.0-alpha17",
     "@dropins/storefront-auth": "0.0.1-alpha25",
     "@dropins/storefront-cart": "0.9.0",
     "@dropins/storefront-checkout": "0.1.0-alpha49",
-    "@dropins/storefront-order": "0.1.0-alpha15",
+    "@dropins/storefront-order": "0.1.0-alpha18",
     "@dropins/storefront-order-confirmation": "0.1.0-alpha33",
     "@dropins/storefront-pdp": "0.4.0",
     "@dropins/tools": "^0.35.0"