add placeholder for customer information

Author: msagolj

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

@@ -1 +1,29 @@
-/* stylelint-disable no-empty-source */
+.commerce-customer-information.placeholder.block::before {
+  content: "Customer Information";
+  position: absolute;
+  font-size: 20px;
+  font-weight: bold;
+  color: rgb(0 0 0 / 20%);
+  z-index: -1;
+}
+
+.commerce-customer-information.placeholder.block {
+  display: flex;
+  border: dashed 3px lightgrey;
+  padding: 10px;
+}
+
+.commerce-customer-information.placeholder.block > div {
+  flex-grow: 1;
+  padding: 10px;
+  display:flex;
+  justify-content: center;
+}
+
+.commerce-customer-information.placeholder.block > div > div {
+  padding: 10px;
+  }
+
+  .commerce-customer-information.placeholder.block > div > div:first-child {
+font-weight: bold;
+}

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

@@ -9,6 +9,12 @@ import { CUSTOMER_LOGIN_PATH } from '../../scripts/constants.js';
 import '../../scripts/initializers/account.js';
 
 export default async function decorate(block) {
+  // Xwalk: if in AEM author and not authenticated show placeholder instead
+  if (window.xwalk.isAuthorEnv && !checkIsAuthenticated()) {
+    block.classList.add('placeholder');
+    return;
+  }
+
   if (!checkIsAuthenticated()) {
     window.location.href = CUSTOMER_LOGIN_PATH;
   } else {