@magento/venia-sample-eventing 0.0.1-alpha.1

package/intercept.js

@@ -0,0 +1,18 @@
+module.exports = targets => {
+    const { talons } = targets.of('@magento/peregrine');
+    const { specialFeatures } = targets.of('@magento/pwa-buildpack');
+
+    specialFeatures.tap(flags => {
+        /**
+         *  Wee need to activate esModules, cssModules and GQL Queries to allow build pack to load our extension
+         * {@link https://magento.github.io/pwa-studio/pwa-buildpack/reference/configure-webpack/#special-flags}.
+         */
+        flags[targets.name] = {
+            esModules: true
+        };
+    });
+
+    talons.tap(({ App }) => {
+        App.useApp.wrapWith('@magento/venia-sample-eventing');
+    });
+};

package/main.js

@@ -0,0 +1,69 @@
+import { useEffect } from 'react';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+
+const formatCartProducts = items => {
+    const productList = [];
+    items.forEach(item => {
+        productList.push({
+            SKU: item.product?.sku || null,
+            name: item.product?.name || null,
+            priceTotal: item.prices?.row_total?.value || null,
+            quantity: item?.quantity || null,
+            discountAmount: item.prices?.total_item_discount?.value || null,
+            currencyCode: item.prices?.price?.currency || null,
+            selectedOptions: item?.configurable_options
+                ? item.configurable_options.reduce((result, item) => {
+                      const option = {
+                          attribute: item?.option_label || null,
+                          value: item?.value_label || null
+                      };
+                      return [...result, option];
+                  }, [])
+                : null
+        });
+    });
+    return productList;
+};
+
+export default original => props => {
+    const [observable, { dispatch }] = useEventingContext();
+
+    useEffect(() => {
+        const sub = observable.subscribe(async event => {
+            switch (event.type) {
+                case 'CART_PAGE_VIEW':
+                    console.log('Logging event:', {
+                        type: event.type,
+                        ...event.payload,
+                        products: formatCartProducts(event.payload.products)
+                    });
+                    break;
+                case 'CHECKOUT_PAGE_VIEW':
+                    console.log('Logging event:', {
+                        type: event.type,
+                        ...event.payload,
+                        products: formatCartProducts(event.payload.products)
+                    });
+                    break;
+                case 'ORDER_CONFIRMATION_PAGE_VIEW':
+                    console.log('Logging event:', {
+                        type: event.type,
+                        ...event.payload,
+                        products: formatCartProducts(event.payload.products)
+                    });
+                    break;
+                default:
+                    console.log('Logging event:', event);
+                    break;
+            }
+        });
+
+        dispatch('hello world');
+
+        return () => {
+            sub.unsubscribe();
+        };
+    }, [dispatch, observable]);
+
+    return original(props);
+};

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@magento/venia-sample-eventing",
+  "version": "0.0.1-alpha.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Demonstrates how to read and write PWA Studio events.",
+  "main": "./main.js",
+  "scripts": {
+    "clean": " "
+  },
+  "repository": "github:magento/pwa-studio",
+  "license": "(OSL-3.0 OR AFL-3.0)",
+  "peerDependencies": {
+    "@magento/peregrine": "~12.3.0",
+    "@magento/pwa-buildpack": "~11.2.0",
+    "react": "~17.0.1"
+  },
+  "pwa-studio": {
+    "targets": {
+      "intercept": "./intercept"
+    }
+  }
+}