@builder.io/plugin-sfcc-commerce-api 0.0.5 → 0.0.6

package/README.md

@@ -1,3 +1,62 @@
-# Builder.io Saleforce Commerce Api plugin [alpha]
+# Builder.io Salesforce Commerce Api plugin [alpha]
+
+Easily connect your SalesForce B2C Commerce PWA APP to your Builder.io content!
+
+## SalesForce Setup API Access
+Read through this [get started guide](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/setting-up-api-access.html) to make sure you have your *Shopper Login and API Access Service (SLAS)* client setup ready.
+
+
+## Installation
+
+Go to [builder.io/account/organization](https://builder.io/account/organization) and type `@builder.io/plugin-sfcc-commerce-api` in the input, then hit save.
+
+
+![Installation screenshot](https://cdn.builder.io/api/v1/image/assets%2Fd1ed12c3338144da8dd6b63b35d14c30%2F2c0da6f6b3104d6d87bdf62caa9ee271)
+
+Following, you'll be prompted to enter the following data:
+* Client id
+* Organization id
+* Proxy address
+* Short code
+* Site id
+
+**The same configuration you find at your config/default.js file**
+![Config screenshot](https://cdn.builder.io/api/v1/image/assets%2F1fa6810c36c54e87bfe1a6cc0f0be906%2Fa1e74597f82e46d390fd0b328c19bf78)
+
+Log into your Administration panel with your SFCC credentials at your [account administrator panel](https://account.demandware.com/)
+
+![Credentials screenshot](https://cdn.builder.io/api/v1/image/assets%2Fd1ed12c3338144da8dd6b63b35d14c30%2F92cfc4b9885d41eaa4d5c23b00ebeace)
+
+
+After putting the required info, hit the connect button. You will now see a few new field types (for [model](https://builder.io/c/docs/guides/getting-started-with-models) fields, [symbol](https://builder.io/c/docs/guides/symbols) inputs, [custom components](https://builder.io/c/docs/custom-react-components) fields), and [custom targeting attributes](https://www.builder.io/c/docs/guides/targeting-and-scheduling#custom-targeting) that can be used in three different contexts:
+
+
+
+![Custom targeting attributes](https://cdn.builder.io/api/v1/image/assets%2Fd1ed12c3338144da8dd6b63b35d14c30%2F761dc7267e3b45198c460dfe6b0cec8e)
+
+### Custom targeting
+
+Custom targeting in Builder.io allow users to target content by a multitude of attributes, and in this plugin you'll be able to add specific content from SFCC products, for this you'll need first to set the target attributes on the host site, either by setting the `userAttributes` if you're rendering client side:
+
+```ts
+builder.setUserAttributes({
+  product: currentProduct.id,
+});
+```
+
+Or by passing it as a query param to the [content API](https://www.builder.io/c/docs/query-api#:~:text=userAttributes) call, or in [graqhql query](https://www.builder.io/c/docs/graphql-api#:~:text=with%20targeting) for e.g in Gatsby or nextjs.
+
+- `SfCommerceProduct` when used as a custom targeting type, it'll target contexts where the field is set to the product ID, you'll need to set the product ID on the host environment, using one of the methods above.
+
+- `SfCommerceProductsList` when used as a custom targeting type, it'll target contexts where the field is set to the a list of product Ids, you'll need to set the list of product Ids on the host environment, using one of the methods above.
+
+- `SfCommerceCategory` can be used as custom targeting attribute to target specific category by ID, you'll need to set the category ID on the host environment, using one of the methods above.
+
+- `SfCommerceCategoriesList` when used as a custom targeting type, it'll target contexts where the field is set to the a list of category Ids, you'll need to set the list of category Ids on the host environment, using one of the methods above.
+
+
+### Seeing the plugin in action
+
+Try creating a custom [model](https://builder.io/c/docs/guides/getting-started-with-models), [component](https://builder.io/c/docs/custom-react-components), or [symbol](https://builder.io/c/docs/guides/symbols) using any of the SFCC field types, and edit away!
+
 
-TODO

package/dist/plugin.system.js

@@ -33563,7 +33563,7 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
       }); };
 
       var name = "@builder.io/plugin-sfcc-commerce-api";
-      var version = "0.0.4";
+      var version = "0.0.5";
       var description = "";
       var keywords = [
       ];
@@ -33734,6 +33734,21 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
           src: cat.image || "https://unpkg.com/css.gg@2.0.0/icons/svg/box.svg"
         }
       });
+      const transformRecommender = (rec) => ({
+        ...rec,
+        id: rec.name,
+        title: rec.name,
+        image: {
+          src: "https://cdn.builder.io/api/v1/image/assets%2Fd1ed12c3338144da8dd6b63b35d14c30%2Fe1439f0d991c4e2d968c84a38059f1d2"
+        }
+      });
+      const getRecommenders = (siteId, clientId) => {
+        const url = new URL("https://cdn.builder.io/api/v1/proxy-api");
+        url.searchParams.set("url", `https://api.cquotient.com/v3/personalization/recommenders/${siteId}`);
+        url.searchParams.set("headers.x-cq-client-id", clientId);
+        url.searchParams.set("apiKey", appState.user.apiKey);
+        return fetch(url).then((res) => res.json()).then((res) => res.recommenders.map(transformRecommender));
+      };
       class Api {
         constructor(apiKey, pluginId) {
           this.apiKey = apiKey;
@@ -33797,6 +33812,7 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
       registerCommercePlugin({
         name: "SFCommerce",
         id: pkg.name,
+        noPreviewTypes: true,
         settings: [
           {
             name: "clientId",
@@ -33822,11 +33838,40 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
             name: "siteId",
             type: "string",
             required: true
+          },
+          {
+            name: "einsteinId",
+            friendlyName: "Einstein API Client ID",
+            type: "string"
+          },
+          {
+            name: "einsteinSiteId",
+            friendlyName: "Einstein API Site ID",
+            type: "string"
           }
         ],
         ctaText: `Connect your Salesforce Commerce API`
-      }, async () => {
+      }, async (settings) => {
         const api = new Api(appState.user.apiKey, pkg.name);
+        const einsteinId = settings.get("einsteinId");
+        const einsteinSiteId = settings.get("einsteinSiteId");
+        let recommendersType = {};
+        if (einsteinId && einsteinSiteId) {
+          const recommenders = await getRecommenders(einsteinSiteId, einsteinId);
+          recommendersType = {
+            recommender: {
+              search(search = "") {
+                return Promise.resolve(recommenders.filter((rec) => JSON.stringify(rec).includes(search)));
+              },
+              findById(id) {
+                return Promise.resolve(recommenders.find((rec) => rec.id === id));
+              },
+              getRequestObject(id) {
+                return id;
+              }
+            }
+          };
+        }
         return {
           product: {
             async findById(id) {
@@ -33865,7 +33910,8 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
                 }
               };
             }
-          }
+          },
+          ...recommendersType
         };
       });