@magento/experience-platform-connector 1.0.0-alpha.1

package/src/handlers/editAccount.js

@@ -0,0 +1,25 @@
+const canHandle = event => event.type === 'USER_ACCOUNT_UPDATE';
+
+const handle = (sdk, event) => {
+    const { payload } = event;
+
+    const { email, firstName, lastName } = payload;
+
+    const accountContext = {
+        firstName,
+        lastName,
+        emailAddress: email
+    };
+
+    sdk.context.setAccount(accountContext);
+    sdk.publish.editAccount({
+        personalEmail: {
+            address: email
+        }
+    });
+};
+
+export default {
+    canHandle,
+    handle
+};

package/src/handlers/pageView.js

@@ -0,0 +1,26 @@
+const canHandle = event => event.type === 'CMS_PAGE_VIEW';
+
+const handle = (sdk, event) => {
+    const { payload } = event;
+
+    const { title } = payload;
+
+    const context = {
+        pageType: 'CMS',
+        pageName: title,
+        eventType: 'visibilityHidden',
+        maxXOffset: 0,
+        maxYOffset: 0,
+        minXOffset: 0,
+        minYOffset: 0
+    };
+
+    sdk.context.setPage(context);
+
+    sdk.publish.pageView();
+};
+
+export default {
+    canHandle,
+    handle
+};

package/src/handlers/placeOrder.js

@@ -0,0 +1,32 @@
+const canHandle = event => event.type === 'CHECKOUT_PLACE_ORDER_BUTTON_CLICKED';
+
+const handle = (sdk, event) => {
+    const { payload } = event;
+
+    const grandTotal = payload.amount.grand_total.value;
+
+    const { payment, shipping } = payload;
+
+    const orderContext = {
+        grandTotal: grandTotal,
+        orderType: 'checkout',
+        payments: [
+            {
+                paymentMethodCode: payment.title,
+                paymentMethodName: payment.title,
+                total: grandTotal
+            }
+        ],
+        shipping: {
+            shippingMethod: shipping[0].method_title,
+            shippingAmount: shipping[0].amount.value
+        }
+    };
+
+    sdk.context.setOrder(orderContext);
+};
+
+export default {
+    canHandle,
+    handle
+};

package/src/handlers/productPageView.js

@@ -0,0 +1,41 @@
+const canHandle = event => event.type === 'PRODUCT_PAGE_VIEW';
+
+const handle = (sdk, event) => {
+    const { payload } = event;
+
+    const { name, id, currency_code, price_range, sku, url_key } = payload;
+
+    const pageContext = {
+        pageType: 'PDP',
+        pageName: name,
+        eventType: 'visibilityHidden',
+        maxXOffset: 0,
+        maxYOffset: 0,
+        minXOffset: 0,
+        minYOffset: 0
+    };
+
+    sdk.context.setPage(pageContext);
+
+    sdk.publish.pageView();
+
+    const productContext = {
+        productId: id,
+        name,
+        sku,
+        pricing: {
+            currencyCode: currency_code,
+            maximalPrice: price_range.maximum_price.final_price
+        },
+        canonicalUrl: url_key
+    };
+
+    sdk.context.setProduct(productContext);
+
+    sdk.publish.productPageView();
+};
+
+export default {
+    canHandle,
+    handle
+};

package/src/handlers/searchRequestSent.js

@@ -0,0 +1,38 @@
+const canHandle = event =>
+    ['SEARCH_REQUEST', 'SEARCHBAR_REQUEST'].includes(event.type);
+
+const handle = (sdk, event) => {
+    const { payload } = event;
+
+    const { query, pageSize, currentPage, refinements, sort } = payload;
+
+    const filter = refinements.map(refinement => {
+        const { attribute, value } = refinement;
+        return {
+            attribute: attribute,
+            in: Array.from(value.values())
+        };
+    });
+
+    const requestContext = {
+        units: [
+            {
+                searchUnitId: 'productPage',
+                queryTypes: ['products'],
+                phrase: query,
+                pageSize: pageSize,
+                currentPage: currentPage,
+                filter: filter,
+                sort: [{ attribute: sort?.attribute, direction: sort?.order }]
+            }
+        ]
+    };
+
+    sdk.context.setSearchInput(requestContext);
+    sdk.publish.searchRequestSent();
+};
+
+export default {
+    canHandle,
+    handle
+};

package/src/handlers/searchResponseReceived.js

@@ -0,0 +1,39 @@
+const canHandle = event => event.type === 'SEARCH_RESPONSE';
+
+const handle = (sdk, event) => {
+    const { payload } = event;
+
+    const {
+        categories,
+        facets,
+        page,
+        perPage,
+        products,
+        searchRequestId,
+        searchUnitId,
+        suggestions
+    } = payload;
+
+    const searchResultsContext = {
+        units: [
+            {
+                categories,
+                facets,
+                page,
+                perPage,
+                products,
+                searchRequestId,
+                searchUnitId,
+                suggestions
+            }
+        ]
+    };
+
+    sdk.context.setSearchResults(searchResultsContext);
+    sdk.publish.searchResponseReceived(searchUnitId, searchResultsContext);
+};
+
+export default {
+    canHandle,
+    handle
+};

package/src/handlers/shoppingCartPageView.js

@@ -0,0 +1,45 @@
+import { getCartTotal, getCurrency, getFormattedProducts } from '../utils';
+
+const canHandle = event => event.type === 'CART_PAGE_VIEW';
+
+const handle = (sdk, event) => {
+    const { payload } = event;
+
+    const { cart_id: id, products } = payload;
+
+    const cartContext = {
+        id,
+        prices: {
+            subtotalExcludingTax: {
+                value: getCartTotal(products),
+                currency: getCurrency(products)
+            }
+        },
+        items: getFormattedProducts(products),
+        possibleOnepageCheckout: false,
+        giftMessageSelected: false,
+        giftWrappingSelected: false
+    };
+
+    sdk.context.setShoppingCart(cartContext);
+    sdk.publish.shoppingCartView();
+
+    // Send out page view event
+    const pageContext = {
+        pageType: 'Cart',
+        pageName: 'Cart',
+        eventType: 'visibilityHidden',
+        maxXOffset: 0,
+        maxYOffset: 0,
+        minXOffset: 0,
+        minYOffset: 0
+    };
+
+    sdk.context.setPage(pageContext);
+    sdk.publish.pageView();
+};
+
+export default {
+    canHandle,
+    handle
+};

package/src/handlers/shoppingMiniCartView.js

@@ -0,0 +1,31 @@
+import { getCartTotal, getCurrency, getFormattedProducts } from '../utils';
+
+const canHandle = event => event.type === 'MINI_CART_VIEW';
+
+const handle = (sdk, event) => {
+    const { payload } = event;
+
+    const { cartId: id, products } = payload;
+
+    const cartContext = {
+        id: id,
+        prices: {
+            subtotalExcludingTax: {
+                value: getCartTotal(products),
+                currency: getCurrency(products)
+            }
+        },
+        items: getFormattedProducts(products),
+        possibleOnepageCheckout: false,
+        giftMessageSelected: false,
+        giftWrappingSelected: false
+    };
+
+    sdk.context.setShoppingCart(cartContext);
+    sdk.publish.shoppingCartView();
+};
+
+export default {
+    canHandle,
+    handle
+};

package/src/handlers/signIn.js

@@ -0,0 +1,29 @@
+const canHandle = event => event.type === 'USER_SIGN_IN';
+
+const handle = (sdk, event) => {
+    const { payload } = event;
+
+    sdk.context.setShopper({
+        shopperId: 'logged-in'
+    });
+
+    const { firstname, lastname, email } = payload;
+
+    const accountContext = {
+        firstName: firstname,
+        lastName: lastname,
+        emailAddress: email
+    };
+
+    sdk.context.setAccount(accountContext);
+    sdk.publish.signIn({
+        personalEmail: {
+            address: email
+        }
+    });
+};
+
+export default {
+    canHandle,
+    handle
+};

package/src/handlers/startCheckout.js

@@ -0,0 +1,45 @@
+import { getCartTotal, getCurrency, getFormattedProducts } from '../utils';
+
+const canHandle = event => event.type === 'CHECKOUT_PAGE_VIEW';
+
+const handle = (sdk, event) => {
+    const { payload } = event;
+
+    const { cart_id, products } = payload;
+
+    // Send out page view event
+    const pageContext = {
+        pageType: 'Checkout',
+        pageName: 'Checkout',
+        eventType: 'visibilityHidden',
+        maxXOffset: 0,
+        maxYOffset: 0,
+        minXOffset: 0,
+        minYOffset: 0
+    };
+
+    sdk.context.setPage(pageContext);
+    sdk.publish.pageView();
+
+    const cartContext = {
+        id: cart_id,
+        prices: {
+            subtotalExcludingTax: {
+                value: getCartTotal(products),
+                currency: getCurrency(products)
+            }
+        },
+        items: getFormattedProducts(products),
+        possibleOnepageCheckout: false,
+        giftMessageSelected: false,
+        giftWrappingSelected: false
+    };
+
+    sdk.context.setShoppingCart(cartContext);
+    sdk.publish.initiateCheckout();
+};
+
+export default {
+    canHandle,
+    handle
+};

package/src/hooks/useExtensionContext.js

@@ -0,0 +1,21 @@
+import { useLazyQuery } from '@apollo/client';
+import { GET_EXTENSION_CONTEXT } from '../queries/getExtensionContext.js';
+import { useEffect } from 'react';
+
+const useExtensionContext = () => {
+    const [
+        fetchExtensionContext,
+        { called, data, loading, error }
+    ] = useLazyQuery(GET_EXTENSION_CONTEXT);
+    useEffect(() => {
+        fetchExtensionContext();
+    }, [fetchExtensionContext]);
+
+    return {
+        ready: called && !loading,
+        data,
+        error
+    };
+};
+
+export default useExtensionContext;

package/src/main.js

@@ -0,0 +1,116 @@
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+import { useEffect, useState } from 'react';
+import { default as handleEvent } from './handleEvent';
+import useExtensionContext from './hooks/useExtensionContext';
+
+export default original => props => {
+    const [{ isSignedIn, currentUser }] = useUserContext();
+    const [observable] = useEventingContext();
+
+    const [sdk, setSdk] = useState();
+
+    const {
+        data: storefrontData,
+        ready: storefrontDataReady,
+        errors
+    } = useExtensionContext();
+
+    useEffect(() => {
+        if (errors) {
+            console.error('Experience Platform Connector Error', errors);
+            return;
+        }
+
+        if (storefrontDataReady && storefrontData) {
+            const {
+                dataServicesStorefrontInstanceContext: storefrontContext,
+                experienceConnectorContext: connectorContext
+            } = storefrontData;
+
+            import('@adobe/magento-storefront-events-sdk').then(mse => {
+                if (!window.magentoStorefrontEvents) {
+                    window.magentoStorefrontEvents = mse;
+                }
+
+                const orgId = storefrontContext.ims_org_id;
+                const datastreamId = connectorContext.datastream_id;
+
+                if (orgId && datastreamId) {
+                    mse.context.setAEP({
+                        imsOrgId: orgId,
+                        datastreamId: datastreamId
+                    });
+
+                    mse.context.setEventForwarding({
+                        aep: true
+                    });
+
+                    // Set storefront context
+                    mse.context.setStorefrontInstance({
+                        environmentId: storefrontContext.environment_id,
+                        environment: storefrontContext.environment,
+                        storeUrl: storefrontContext.store_url,
+                        websiteId: storefrontContext.website_id,
+                        websiteCode: storefrontContext.website_code,
+                        storeId: storefrontContext.store_id,
+                        storeCode: storefrontContext.store_code,
+                        storeViewId: storefrontContext.store_view_id,
+                        storeViewCode: storefrontContext.store_view_code,
+                        websiteName: storefrontContext.website_name,
+                        storeName: storefrontContext.store_name,
+                        storeViewName: storefrontContext.store_view_name,
+                        baseCurrencyCode: storefrontContext.base_currency_code,
+                        storeViewCurrencyCode:
+                            storefrontContext.store_view_currency_code,
+                        catalogExtensionVersion:
+                            storefrontContext.catalog_extension_version
+                    });
+
+                    import('@adobe/magento-storefront-event-collector').then(
+                        msec => {
+                            msec;
+                            setSdk(mse);
+                        }
+                    );
+                }
+            });
+        }
+    }, [storefrontDataReady, storefrontData, setSdk, errors]);
+
+    useEffect(() => {
+        if (sdk) {
+            const sub = observable.subscribe(async event => {
+                handleEvent(sdk, event);
+            });
+
+            return () => {
+                sub.unsubscribe();
+            };
+        }
+    }, [sdk, observable]);
+
+    // Sets shopper context on initial load (when shopper context is null)
+    useEffect(() => {
+        if (sdk && !sdk.context.getShopper()) {
+            if (isSignedIn) {
+                sdk.context.setShopper({
+                    shopperId: 'logged-in'
+                });
+
+                sdk.context.setAccount({
+                    firstName: currentUser.firstname,
+                    lastName: currentUser.lastname,
+                    emailAddress: currentUser.email,
+                    accountType: currentUser.__typename
+                });
+            } else {
+                sdk.context.setShopper({
+                    shopperId: 'guest'
+                });
+            }
+        }
+    }, [sdk, isSignedIn, currentUser]);
+
+    return original(props);
+};

package/src/queries/getExtensionContext.js

@@ -0,0 +1,31 @@
+import { gql } from '@apollo/client';
+
+export const GET_EXTENSION_CONTEXT = gql`
+    query experiencePlatformConnectorContext {
+        dataServicesStorefrontInstanceContext {
+            environment_id
+            environment
+            store_url
+            website_id
+            website_code
+            store_id
+            store_code
+            store_view_id
+            store_view_code
+            website_name
+            store_name
+            store_view_name
+            base_currency_code
+            store_view_currency_code
+            catalog_extension_version
+            ims_org_id
+        }
+        experienceConnectorContext {
+            datastream_id
+        }
+    }
+`;
+
+export default {
+    getExtensionContext: GET_EXTENSION_CONTEXT
+};

package/src/utils.js

@@ -0,0 +1,101 @@
+/** Cart focused utils **/
+
+/**
+ * Returns the total sum from an array of cart products
+ *
+ * @param {Array} products
+ * @returns {Number} Sum of all product prices in the array
+ */
+export const getCartTotal = products => {
+    return products
+        ? products.reduce(
+              (previous, current) =>
+                  current.prices.price.value * current.quantity + previous,
+              0
+          )
+        : 0;
+};
+
+/**
+ * Get the currency from the first product item in an array of cart products
+ *
+ * @param {Array} products
+ * @returns {String} Currency code from the first product item or null if array is empty
+ */
+export const getCurrency = products =>
+    products && products.length > 0 ? products[0].prices.price.currency : null;
+
+/**
+ * Transforms an array of cart products into a format compatible with the
+ * Magento Storefront Event SDK
+ *
+ * @param {Array} products
+ * @returns {Array} Array of data compatible with the Magento Storefront Event SDK
+ */
+export const getFormattedProducts = products => {
+    return products
+        ? products.map(item => {
+              const {
+                  uid,
+                  product,
+                  prices,
+                  quantity,
+                  configurable_options: options
+              } = item;
+
+              const {
+                  name,
+                  sku,
+                  __typename: type,
+                  url_key: url,
+                  small_image: image,
+                  thumbnail
+              } = product;
+
+              const formattedOptions = options
+                  ? options.map(option => {
+                        const {
+                            id,
+                            option_label,
+                            value_label,
+                            configurable_product_option_value_uid: valueId
+                        } = option;
+                        return {
+                            id: id,
+                            optionLabel: option_label,
+                            valueId: valueId,
+                            valueLabel: value_label
+                        };
+                    })
+                  : null;
+
+              const imageUrl = image
+                  ? image.url
+                  : thumbnail
+                  ? thumbnail.url
+                  : null;
+
+              return {
+                  formattedPrice: '',
+                  id: uid,
+                  prices: prices,
+                  product: {
+                      name: name,
+                      sku: sku,
+                      productType: type,
+                      pricing: {
+                          regularPrice: prices.price.value,
+                          minimalPrice: prices.price.value,
+                          maximalPrice: prices.price.value,
+                          currencyCode: prices.price.currency
+                      },
+                      canonicalUrl: url,
+                      mainImageUrl: imageUrl
+                  },
+
+                  configurableOptions: formattedOptions,
+                  quantity: quantity
+              };
+          })
+        : null;
+};

package/src/wrappers/wrapUseAccountMenu.js

@@ -0,0 +1,29 @@
+import { useCallback } from 'react';
+
+// Wrapper for the useAccountMenu() talon
+const wrapUseAccountMenu = useAccountMenu => {
+    return props => {
+        const talonProps = useAccountMenu(props);
+
+        const { handleSignOut, ...restProps } = talonProps;
+
+        const sdk = window.magentoStorefrontEvents;
+
+        // Need to publish the sign out event before actually calling the original sign out
+        // callback to make sure data is sent before the page refreshes
+        const newHandleSignOut = useCallback(async () => {
+            if (sdk) {
+                sdk.publish.signOut();
+            }
+
+            handleSignOut();
+        }, [sdk, handleSignOut]);
+
+        return {
+            handleSignOut: newHandleSignOut,
+            ...restProps
+        };
+    };
+};
+
+export default wrapUseAccountMenu;