@builder.io/plugin-commercelayer 0.0.8-0 → 0.0.8-1

package/README.md

@@ -6,7 +6,8 @@ Easily connect your Commerce Layer products to your Builder.io content!
 
 Go to [builder.io/account/organization](https://builder.io/account/organization) and press on `@builder.io/plugin-commercelayer` in the list of plugins, then hit save. You'll be prompted for your Commerce Layer credentials:
 - Client ID
-- Market Scope (e.g., 'market:id:YOUR_MARKET_ID')
+- Client Secret (optional - required for integration tokens to access all markets)
+- Market Scope (e.g., 'market:all' for integrations, 'market:id:YOUR_MARKET_ID' for sales channels)
 
 ## Features
 
@@ -68,10 +69,21 @@ Go to [builder.io/account/organization](https://builder.io/account/organization)
 
 ## Authentication
 
-The plugin uses Commerce Layer's Sales Channel authentication. You'll need:
+The plugin supports both Commerce Layer authentication methods:
+
+### Sales Channel Authentication (Market-Specific)
+For accessing products from a specific market:
 - A Commerce Layer account
-- Sales Channel API credentials
-- A valid market scope
+- Sales Channel API credentials (Client ID only)
+- Market-specific scope (e.g., `market:id:YOUR_MARKET_ID`)
+
+### Integration Authentication (All Markets)
+For accessing products from all markets:
+- A Commerce Layer account  
+- Integration API credentials (Client ID + Client Secret)
+- Market scope set to `market:all`
+
+**Note:** Sales channel tokens with `market:all` scope will not return products due to Commerce Layer restrictions. Use integration tokens for cross-market access.
 
 ## Contributing
 

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.7";
+      var version = "0.0.8-0";
       var description = "Commerce Layer plugin for Builder.io";
       var keywords = [
       ];
@@ -146944,28 +146944,46 @@ System.register(['@builder.io/sdk', '@emotion/core', '@material-ui/core', 'react
       	dependencies: dependencies
       };
 
-      const authenticateClient = async ({ clientId, scope }) => {
+      let cachedAuth = null;
+      const getValidToken = async (clientId, clientSecret, scope) => {
+        const now = Date.now();
+        if (cachedAuth && cachedAuth.clientId === clientId && cachedAuth.clientSecret === clientSecret && cachedAuth.scope === scope && now < cachedAuth.expiresAt) {
+          return cachedAuth.token;
+        }
+        const auth = await authenticateClient({ clientId, clientSecret, scope });
+        cachedAuth = {
+          token: auth.accessToken,
+          expiresAt: now + (auth.expiresIn - 300) * 1e3,
+          // 5 min buffer
+          clientId,
+          clientSecret,
+          scope
+        };
+        return auth.accessToken;
+      };
+      const authenticateClient = async ({ clientId, clientSecret, scope }) => {
         const authUrl = "https://auth.commercelayer.io/oauth/token";
-        console.log("Authenticating with:", { clientId, scope });
+        const requestBody = {
+          grant_type: "client_credentials",
+          client_id: clientId,
+          scope
+        };
+        if (clientSecret) {
+          requestBody.client_secret = clientSecret;
+        }
         const response = await fetch(authUrl, {
           method: "POST",
           headers: {
             "Accept": "application/json",
             "Content-Type": "application/json"
           },
-          body: JSON.stringify({
-            grant_type: "client_credentials",
-            client_id: clientId,
-            scope
-          })
+          body: JSON.stringify(requestBody)
         });
         if (!response.ok) {
           const errorText = await response.text();
-          console.error("Auth Error:", { status: response.status, statusText: response.statusText, errorText });
           throw new Error(`Authentication failed: ${response.status} ${response.statusText} - ${errorText}`);
         }
         const data = await response.json();
-        console.log("Auth response:", data);
         return {
           accessToken: data.access_token,
           tokenType: data.token_type,
@@ -146975,7 +146993,6 @@ System.register(['@builder.io/sdk', '@emotion/core', '@material-ui/core', 'react
         };
       };
       const makeApiRequest = async (url, accessToken, options = {}) => {
-        console.log("Making API request:", { url, tokenLength: accessToken.length });
         const response = await fetch(url, {
           ...options,
           headers: {
@@ -146987,17 +147004,9 @@ System.register(['@builder.io/sdk', '@emotion/core', '@material-ui/core', 'react
         });
         if (!response.ok) {
           const errorText = await response.text();
-          console.error("API Error:", { status: response.status, statusText: response.statusText, errorText, url });
-          try {
-            const errorData = JSON.parse(errorText);
-            console.error("Parsed error:", errorData);
-          } catch (e) {
-            console.error("Raw error text:", errorText);
-          }
-          throw new Error(`API request failed: ${response.status} ${response.statusText}`);
+          throw new Error(`API request failed: ${response.status} ${response.statusText} - ${errorText}`);
         }
         const data = await response.json();
-        console.log("API response:", { url, dataLength: JSON.stringify(data).length });
         return data;
       };
       const getOrganizationInfo = async (accessToken) => {
@@ -147030,6 +147039,7 @@ System.register(['@builder.io/sdk', '@emotion/core', '@material-ui/core', 'react
         type: "product",
         title: product.attributes.name,
         handle: product.attributes.code,
+        price: product.attributes.price,
         image: {
           src: product.attributes.image_url
         }
@@ -147057,11 +147067,17 @@ System.register(['@builder.io/sdk', '@emotion/core', '@material-ui/core', 'react
               required: true,
               helperText: "Your Commerce Layer application Client ID"
             },
+            {
+              name: "clientSecret",
+              type: "string",
+              required: false,
+              helperText: "Your Commerce Layer Client Secret (required for integration tokens to access all markets)"
+            },
             {
               name: "scope",
               type: "string",
               required: true,
-              helperText: 'Commerce Layer scope (e.g., "market:all")'
+              helperText: 'Commerce Layer scope (e.g., "market:all" for integrations, "market:id:YOUR_MARKET_ID" for sales channels)'
             }
           ],
           ctaText: "Connect your Commerce Layer store"
@@ -147069,34 +147085,36 @@ System.register(['@builder.io/sdk', '@emotion/core', '@material-ui/core', 'react
         async (settings) => {
           try {
             const clientId = settings.get("clientId");
+            const clientSecret = settings.get("clientSecret");
             const scope = settings.get("scope");
-            console.log("Plugin initializing with:", { clientId, scope });
-            const auth = await authenticateClient({ clientId, scope });
+            const auth = await authenticateClient({ clientId, clientSecret, scope });
             const { baseEndpoint } = await getOrganizationInfo(auth.accessToken);
-            console.log("Plugin initialized with:", { baseEndpoint, tokenLength: auth.accessToken.length });
             return {
               product: {
                 async findById(id) {
-                  const product = await getProduct(id, auth.accessToken, baseEndpoint);
+                  const token = await getValidToken(clientId, clientSecret, scope);
+                  const product = await getProduct(id, token, baseEndpoint);
                   return transformProduct(product);
                 },
                 async findByHandle(handle) {
-                  const product = await getProductByHandle(handle, auth.accessToken, baseEndpoint);
+                  const token = await getValidToken(clientId, clientSecret, scope);
+                  const product = await getProductByHandle(handle, token, baseEndpoint);
                   return transformProduct(product);
                 },
                 async search(search) {
-                  console.log("Searching for:", search);
-                  const products = await searchProducts(search, auth.accessToken, baseEndpoint);
+                  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 ${auth.accessToken}`
+                        "Authorization": `Bearer ${token}`
                       }
                     },
                     options: {