Percy demo

.eslintignore

@@ -9,3 +9,4 @@ scripts/commerce-events-collector.js
 scripts/commerce-events-sdk.js
 scripts/widgets
 plugins/
+cypress/

.eslintrc.js

@@ -14,5 +14,12 @@ module.exports = {
     'import/extensions': ['error', { js: 'always' }], // require js file extensions in imports
     'linebreak-style': ['error', 'unix'], // enforce unix linebreaks
     'no-param-reassign': [2, { props: false }], // allow modifying properties of param
+    'no-use-before-define': [2, { functions: false }],
+    'no-console': [
+      'error',
+      {
+        allow: ['warn', 'error', 'info', 'debug'],
+      },
+    ],
   },
 };

.github/workflows/run-e2e-tests.yaml

@@ -0,0 +1,29 @@
+name: Cypress E2E Tests
+on: push
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install root dependencies
+        run: npm ci
+      - name: Start server in the background
+        run: npm start &
+
+      - name: Install Cypress and run tests    
+        uses: cypress-io/github-action@v6
+        with:
+          working-directory: cypress
+          browser: chrome
+          wait-on: 'http://localhost:3000'
+          config: baseUrl=http://localhost:3000
+          command: npm run cypress:percy
+        env:
+          # pass the Percy Token
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+          if-no-files-found: ignore 

.gitignore

@@ -9,4 +9,4 @@ helix-importer-ui
 *.bak
 .idea
 # Ignore .map files in scripts/__dropins__/ directory and all its subdirectories
-scripts/__dropins__/**/*.map
+scripts/__dropins__/**/*.map

.hlxignore

@@ -7,3 +7,4 @@ package-lock.json
 test/*
 postinstall.js
 tools/picker/src/*
+cypress/

.npmrc

@@ -0,0 +1,2 @@
+; force @adobe namespaced packages to be installed from npmjs.org
+@adobe:registry=https://registry.npmjs.org

README.md

@@ -5,9 +5,22 @@ This project boilerplate is for Edge Delivery Services projects that integrate w
 https://experienceleague.adobe.com/developer/commerce/storefront/
 
 ## Environments
+
 - Preview: https://main--{repo}--{owner}.hlx.page/
 - Live: https://main--{repo}--{owner}.hlx.live/
 
+## Pre-requisites
+
+Out of the box, this project template uses a pre-configured Adobe Commerce environment. If you want to use your own Adobe Commerce environment, you'll need to update the `configs.xlsx` file in your content repository to have values that match your environment.
+
+Additionally, you need to have the following modules and customizations installed on your environment:
+
+1. magento/magento-extra-graphql: Commerce module required for Cart and Checkout Drop-Ins.
+1. magento/module-data-services-graphql: Commerce module with functionality necessary for adding context to events.
+1. magento/module-page-builder-product-recommendations: Commerce module required for PRex Widget
+1. magento/module-visual-product-recommendations: Commerce module required for PRex Widget
+<!-- 1. TODO: Add further prereqs.  -->
+
 ## Installation
 
 ```sh
@@ -33,4 +46,4 @@ npm run lint
 
 Major changes are described and documented as part of pull requests and tracked via the `changelog` tag. To keep your project up to date, please follow this list:
 
-https://github.com/hlxsites/aem-boilerplate-commerce/issues?q=label%3Achangelog+is%3Aclosed
+https://github.com/hlxsites/aem-boilerplate-commerce/issues?q=label%3Achangelog+is%3Aclosed

blocks/commerce-account/api/getCustomer.js

@@ -0,0 +1,141 @@
+import { getConfigValue, getCookie } from '../../../scripts/configs.js';
+
+const getCustomer = async () => {
+  const query = `
+    {
+      customer {
+        firstname
+        lastname
+        email
+        is_subscribed
+        wishlist {
+          id
+          items_count
+          sharing_code
+          updated_at
+          items {
+            id
+            qty
+            description
+            added_at
+            product {
+              id
+              sku
+              name
+              url_key
+              price {
+                regularPrice {
+                    amount {
+                        currency
+                        value
+                    }
+                }
+            }
+            image {
+              url
+              label
+             }
+            }
+          }
+        }
+        addresses {
+          firstname
+          lastname
+          city
+          company
+          country_code
+          region{
+            region
+            region_code
+            region_id
+          }
+          region_id
+          telephone
+          id
+          vat_id
+          postcode
+          street
+          default_shipping
+          default_billing
+        }
+        orders {
+          page_info {
+            current_page
+            page_size
+            total_pages
+          }
+          items {
+            id
+            status
+            order_date
+            number
+            shipping_method
+            payment_methods {
+              type
+              name
+            }
+            billing_address {
+              firstname
+              lastname
+              city
+              country_code
+              region
+              telephone
+              postcode
+              telephone
+              street
+            }
+            shipping_address {
+              region
+              firstname
+              lastname
+              city
+              country_code
+              region_id
+              telephone
+              postcode
+              street
+            }
+            items {
+              product_name
+              product_type
+              product_url_key
+              id
+              quantity_invoiced
+              quantity_canceled
+              quantity_ordered
+              quantity_refunded
+              quantity_returned
+              quantity_shipped
+              status
+              product_sku
+              product_sale_price {
+                currency
+                value
+              }
+            }
+          }
+        }
+      }
+    }
+`;
+
+  const token = getCookie('auth_dropin_user_token');
+
+  try {
+    const response = await fetch(await getConfigValue('commerce-core-endpoint'), {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ query }),
+    });
+
+    return await response.json();
+  } catch (error) {
+    return null;
+  }
+};
+
+export default getCustomer;

blocks/commerce-account/commerce-account.css

@@ -1 +1,67 @@
-/* stylelint-disable no-empty-source */
+* {
+  box-sizing: border-box;
+}
+
+.admin-panel {
+  display: flex;
+  align-items: flex-start;
+}
+
+.admin-panel .sidebar {
+  width: 300px;
+  background-color: #e0e0e06b;
+  padding: 10px;
+}
+
+.admin-panel .logo {
+  padding: 10px;
+  text-align: center;
+}
+
+.admin-panel .menu ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  padding-bottom: 10px;
+  border-bottom: 1px solid lightgray;
+}
+
+.admin-panel .menu ul:last-child {
+  border: none;
+}
+
+.admin-panel .menu a {
+  display: block;
+  padding: 10px;
+  text-decoration: none;
+}
+
+.admin-panel .content {
+  padding: 20px;
+  flex-grow: 1;
+  border-left: 1px solid #e0e0e06b;
+}
+
+.admin-panel h2 {
+  margin-top: 0;
+}
+
+.admin-panel h4 {
+  padding-bottom: 0.5em;
+  border-bottom: 1px solid lightgray;
+}
+
+.admin-panel address {
+  margin-bottom: 1em;
+}
+
+.orders-list {
+  list-style: none;
+  padding: 0;
+}
+
+.orders-list li {
+  display: flex;
+  gap: 0 10px;
+  margin: 10px;
+}