@builder.io/plugin-commercelayer 0.0.9-3 → 0.1.2-0

package/README.md

@@ -11,13 +11,31 @@ Go to [builder.io/account/organization](https://builder.io/account/organization)
 
 ## Features
 
-The plugin provides new field types for your Builder.io models:
+The plugin provides new field types for your Builder.io models and data connection capabilities:
 
-### Product Fields
+### Product & Bundle Fields
 
-- `Commerce Layer Product` - Search and select products from your Commerce Layer catalog
+- `Commerce Layer Product` - Search and select products (SKUs) from your Commerce Layer catalog
+- `Commerce Layer Bundle` - Search and select bundles from your Commerce Layer catalog
 - `Commerce Layer Product Preview` - Preview product templates with live data
 
+### Connect Data
+
+The plugin also provides a "Connect Data" feature that allows you to fetch live product data directly from your Commerce Layer API:
+
+- **Real-time data access** - Connect to your Commerce Layer products as a data source
+- **Flexible querying** - Search products or bundles by name or SKU code with configurable result limits
+- **Full product data** - Access all product attributes including SKU codes, prices, images, and metadata
+- **Dynamic content** - Use live product data in your Builder.io content and templates
+
+To use Connect Data:
+1. In the Builder.io editor, go to the "Connect Data" panel
+2. Click "Add Data" and select "CommerceLayer" from the data sources
+3. Configure your query parameters (search terms, result limits)
+4. Use the returned product data in your content via data bindings
+
+Example: Access product SKU code with `data.attributes.code` or product name with `data.attributes.name`
+
 ### Component Model Fields
 
 Component models can be used to create product page templates. Using the following fields makes previewing the templates straightforward:

package/dist/plugin.system.js

@@ -146881,7 +146881,7 @@ System.register(['@builder.io/sdk', '@emotion/core', '@material-ui/core', 'react
       });
 
       var name = "@builder.io/plugin-commercelayer";
-      var version = "0.0.9-2";
+      var version = "0.1.1";
       var description = "Commerce Layer plugin for Builder.io";
       var keywords = [
       ];
@@ -147020,38 +147020,42 @@ System.register(['@builder.io/sdk', '@emotion/core', '@material-ui/core', 'react
         }
         throw new Error("Invalid token: no organization found");
       };
-      const getProduct = async (id, accessToken, baseEndpoint) => {
-        const url = `${baseEndpoint}/api/skus/${id}`;
+      const RESOURCE_ENDPOINTS = {
+        product: "skus",
+        bundle: "bundles"
+      };
+      const getResource = async (type, id, accessToken, baseEndpoint) => {
+        const url = `${baseEndpoint}/api/${RESOURCE_ENDPOINTS[type]}/${id}`;
         const data = await makeApiRequest(url, accessToken);
         return data.data;
       };
-      const searchProducts = async (search, accessToken, baseEndpoint) => {
+      const searchResources = async (type, search, accessToken, baseEndpoint) => {
         const params = new URLSearchParams({
           "filter[q][name_or_code_cont]": search,
           "page[size]": "25"
         });
-        const url = `${baseEndpoint}/api/skus?${params}`;
+        const url = `${baseEndpoint}/api/${RESOURCE_ENDPOINTS[type]}?${params}`;
         const data = await makeApiRequest(url, accessToken);
         return data.data || [];
       };
-      const transformProduct = (product) => ({
-        id: product.id,
-        type: "product",
-        title: product.attributes.name,
-        handle: product.attributes.code,
-        price: product.attributes.price,
-        image: {
-          src: product.attributes.image_url
-        }
-      });
-      const getProductByHandle = async (handle, accessToken, baseEndpoint) => {
+      const transformResource = (resource, type) => ({
+        id: resource.id,
+        type,
+        title: resource.attributes.name,
+        handle: resource.attributes.code,
+        price: resource.attributes.price,
+        image: resource.attributes.image_url ? {
+          src: resource.attributes.image_url
+        } : void 0
+      });
+      const getResourceByHandle = async (type, handle, accessToken, baseEndpoint) => {
         const params = new URLSearchParams({
           "filter[q][code_eq]": handle
         });
-        const url = `${baseEndpoint}/api/skus?${params}`;
+        const url = `${baseEndpoint}/api/${RESOURCE_ENDPOINTS[type]}?${params}`;
         const data = await makeApiRequest(url, accessToken);
         if (!data.data?.[0]) {
-          throw new Error(`Product not found with handle: ${handle}`);
+          throw new Error(`${type} not found with handle: ${handle}`);
         }
         return data.data[0];
       };
@@ -147065,15 +147069,16 @@ System.register(['@builder.io/sdk', '@emotion/core', '@material-ui/core', 'react
         token
       }) => {
         let url;
+        const endpoint = RESOURCE_ENDPOINTS[resource];
         if (resourceId) {
-          url = `${baseEndpoint}/api/skus/${resourceId}`;
+          url = `${baseEndpoint}/api/${endpoint}/${resourceId}`;
         } else {
           const params = new URLSearchParams();
           if (query) {
             params.set("filter[q][name_or_code_cont]", query);
           }
           params.set("page[size]", (limit || 25).toString());
-          url = `${baseEndpoint}/api/skus?${params}`;
+          url = `${baseEndpoint}/api/${endpoint}?${params}`;
         }
         return {
           "@type": "@builder.io/core:Request",
@@ -147098,6 +147103,11 @@ System.register(['@builder.io/sdk', '@emotion/core', '@material-ui/core', 'react
           name: "Product",
           id: "product",
           description: "All of your Commerce Layer products (SKUs)."
+        },
+        {
+          name: "Bundle",
+          id: "bundle",
+          description: "All of your Commerce Layer bundles."
         }
       ];
       const getDataConfig = (service, baseEndpoint, token) => {
@@ -147187,41 +147197,45 @@ System.register(['@builder.io/sdk', '@emotion/core', '@material-ui/core', 'react
             const scope = settings.get("scope");
             const auth = await authenticateClient({ clientId, clientSecret, scope });
             const { baseEndpoint } = await getOrganizationInfo(auth.accessToken);
-            const service = {
-              product: {
-                async findById(id) {
-                  const token = await getValidToken(clientId, clientSecret, scope);
-                  const product = await getProduct(id, token, baseEndpoint);
-                  return transformProduct(product);
-                },
-                async findByHandle(handle) {
-                  const token = await getValidToken(clientId, clientSecret, scope);
-                  const product = await getProductByHandle(handle, token, baseEndpoint);
-                  return transformProduct(product);
-                },
-                async search(search) {
-                  const token = await getValidToken(clientId, clientSecret, scope);
-                  const products = await searchProducts(search, token, baseEndpoint);
-                  return products.map(transformProduct);
-                },
-                getRequestObject(id) {
-                  const token = cachedAuth?.token || auth.accessToken;
-                  return {
-                    "@type": "@builder.io/core:Request",
-                    request: {
-                      url: `${baseEndpoint}/api/skus/${id}`,
-                      method: "GET",
-                      headers: {
-                        "Authorization": `Bearer ${token}`
-                      }
-                    },
-                    options: {
-                      product: id,
-                      pluginId: pkg.name
+            const createResourceService = (type) => ({
+              async findById(id) {
+                const token = await getValidToken(clientId, clientSecret, scope);
+                const resource = await getResource(type, id, token, baseEndpoint);
+                return transformResource(resource, type);
+              },
+              async findByHandle(handle) {
+                const token = await getValidToken(clientId, clientSecret, scope);
+                const resource = await getResourceByHandle(type, handle, token, baseEndpoint);
+                return transformResource(resource, type);
+              },
+              async search(search) {
+                const token = await getValidToken(clientId, clientSecret, scope);
+                const resources = await searchResources(type, search, token, baseEndpoint);
+                return resources.map((res) => transformResource(res, type));
+              },
+              getRequestObject(id) {
+                const token = cachedAuth?.token || auth.accessToken;
+                return {
+                  "@type": "@builder.io/core:Request",
+                  request: {
+                    url: `${baseEndpoint}/api/${RESOURCE_ENDPOINTS[type]}/${id}`,
+                    method: "GET",
+                    headers: {
+                      "Authorization": `Bearer ${token}`
                     }
-                  };
-                }
+                  },
+                  options: {
+                    [type]: id,
+                    resourceType: type,
+                    resourceId: id,
+                    pluginId: pkg.name
+                  }
+                };
               }
+            });
+            const service = {
+              product: createResourceService("product"),
+              bundle: createResourceService("bundle")
             };
             appState.registerDataPlugin(getDataConfig(service, baseEndpoint, auth.accessToken));
             return service;