add placeholder for addresses

Author: msagolj

blocks/commerce-addresses/commerce-addresses.css

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

blocks/commerce-addresses/commerce-addresses.js

@@ -10,6 +10,12 @@ import { CUSTOMER_ADDRESS_PATH, CUSTOMER_LOGIN_PATH } from '../../scripts/consta
 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;
+  }
+
   const {
     'minified-view': minifiedViewConfig = 'false',
   } = readBlockConfig(block);