@builder.io/plugin-commercelayer 0.0.6 → 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.5";
+      var version = "0.0.8-0";
       var description = "Commerce Layer plugin for Builder.io";
       var keywords = [
       ];
@@ -146902,20 +146902,11 @@ System.register(['@builder.io/sdk', '@emotion/core', '@material-ui/core', 'react
       var type = "module";
       var types = "dist/index.d.ts";
       var scripts = {
-      	lint: "tslint  --project tsconfig.json -t codeFrame 'src/**/*.ts' 'test/**/*.ts'",
       	prebuild: "rimraf dist",
       	build: "rollup -c rollup.config.ts --configPlugin @rollup/plugin-typescript",
       	start: "SERVE=true rollup -c rollup.config.ts --configPlugin @rollup/plugin-typescript -w",
       	"release:dev": "npm run build && npm version prerelease --no-git-tag-version && npm publish --tag dev",
-      	"release:patch": "npm run build && npm version patch --no-git-tag-version && npm publish",
-      	test: "jest --coverage",
-      	"test:watch": "jest --coverage --watch",
-      	"test:prod": "npm run lint && npm run test -- --no-cache",
-      	"report-coverage": "cat ./coverage/lcov.info | coveralls",
-      	commit: "git-cz",
-      	"semantic-release": "semantic-release",
-      	"semantic-release-prepare": "ts-node tools/semantic-release-prepare",
-      	"travis-deploy-once": "travis-deploy-once"
+      	"release:patch": "npm run build && npm version patch --no-git-tag-version && npm publish"
       };
       var devDependencies = {
       	"@rollup/plugin-json": "^6.1.0",
@@ -146923,12 +146914,13 @@ System.register(['@builder.io/sdk', '@emotion/core', '@material-ui/core', 'react
       	"@rollup/plugin-replace": "^5.0.5",
       	"@rollup/plugin-typescript": "^11.1.6",
       	"@types/node": "^20.11.19",
+      	rimraf: "^2.6.2",
       	rollup: "^4.12.0",
       	"rollup-plugin-esbuild": "^6.1.1",
       	"rollup-plugin-serve": "^1.1.1",
+      	tslib: "^2.8.1",
       	tsx: "^4.7.1",
-      	typescript: "^5.2.2",
-      	rimraf: "^2.6.2"
+      	typescript: "^5.2.2"
       };
       var dependencies = {
       	"@builder.io/plugin-tools": "^0.0.6"
@@ -146952,26 +146944,44 @@ System.register(['@builder.io/sdk', '@emotion/core', '@material-ui/core', 'react
       	dependencies: dependencies
       };
 
-      const authenticateClient = async ({ clientId, scope }) => {
-        const response = await fetch("https://auth.commercelayer.io/oauth/token", {
+      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";
+        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",
-            "Access-Control-Allow-Origin": "*",
-            "Access-Control-Allow-Methods": "POST, OPTIONS",
-            "Access-Control-Allow-Headers": "Content-Type, Authorization"
+            "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:", errorText);
-          throw new Error(`Authentication failed: ${response.statusText}`);
+          throw new Error(`Authentication failed: ${response.status} ${response.statusText} - ${errorText}`);
         }
         const data = await response.json();
         return {
@@ -146982,6 +146992,23 @@ System.register(['@builder.io/sdk', '@emotion/core', '@material-ui/core', 'react
           createdAt: data.created_at
         };
       };
+      const makeApiRequest = async (url, accessToken, options = {}) => {
+        const response = await fetch(url, {
+          ...options,
+          headers: {
+            "Authorization": `Bearer ${accessToken}`,
+            "Accept": "application/vnd.api+json",
+            "Content-Type": "application/vnd.api+json",
+            ...options.headers
+          }
+        });
+        if (!response.ok) {
+          const errorText = await response.text();
+          throw new Error(`API request failed: ${response.status} ${response.statusText} - ${errorText}`);
+        }
+        const data = await response.json();
+        return data;
+      };
       const getOrganizationInfo = async (accessToken) => {
         const [, payload] = accessToken.split(".");
         const decodedPayload = JSON.parse(atob(payload));
@@ -146994,42 +147021,25 @@ 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 response = await fetch(`${baseEndpoint}/api/skus/${id}`, {
-          headers: {
-            "Authorization": `Bearer ${accessToken}`,
-            "Content-Type": "application/json"
-          }
-        });
-        if (!response.ok) {
-          throw new Error(`Failed to fetch product: ${response.statusText}`);
-        }
-        const data = await response.json();
+        const url = `${baseEndpoint}/api/skus/${id}`;
+        const data = await makeApiRequest(url, accessToken);
         return data.data;
       };
       const searchProducts = async (search, accessToken, baseEndpoint) => {
         const params = new URLSearchParams({
-          "filter[q][code_or_name_cont]": search,
-          "include": "prices,stock_items"
+          "filter[q][name_or_code_cont]": search,
+          "page[size]": "25"
         });
-        const response = await fetch(`${baseEndpoint}/api/skus?${params}`, {
-          headers: {
-            "Authorization": `Bearer ${accessToken}`,
-            "Accept": "application/vnd.api+json",
-            "Content-Type": "application/vnd.api+json"
-          }
-        });
-        if (!response.ok) {
-          console.error("Search Error:", await response.text());
-          throw new Error(`Failed to search products: ${response.statusText}`);
-        }
-        const data = await response.json();
-        return data.data;
+        const url = `${baseEndpoint}/api/skus?${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
         }
@@ -147038,18 +147048,8 @@ System.register(['@builder.io/sdk', '@emotion/core', '@material-ui/core', 'react
         const params = new URLSearchParams({
           "filter[q][code_eq]": handle
         });
-        const response = await fetch(`${baseEndpoint}/api/skus?${params}`, {
-          headers: {
-            "Authorization": `Bearer ${accessToken}`,
-            "Accept": "application/vnd.api+json",
-            "Content-Type": "application/vnd.api+json"
-          }
-        });
-        if (!response.ok) {
-          console.error("Product Handle Error:", await response.text());
-          throw new Error(`Failed to fetch product by handle: ${response.statusText}`);
-        }
-        const data = await response.json();
+        const url = `${baseEndpoint}/api/skus?${params}`;
+        const data = await makeApiRequest(url, accessToken);
         if (!data.data?.[0]) {
           throw new Error(`Product not found with handle: ${handle}`);
         }
@@ -147064,44 +147064,57 @@ System.register(['@builder.io/sdk', '@emotion/core', '@material-ui/core', 'react
             {
               name: "clientId",
               type: "string",
-              required: true
+              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
+              required: true,
+              helperText: 'Commerce Layer scope (e.g., "market:all" for integrations, "market:id:YOUR_MARKET_ID" for sales channels)'
             }
           ],
-          ctaText: "Connect Commerce Layer"
+          ctaText: "Connect your Commerce Layer store"
         },
         async (settings) => {
           try {
             const clientId = settings.get("clientId");
+            const clientSecret = settings.get("clientSecret");
             const scope = settings.get("scope");
-            const auth = await authenticateClient({ clientId, scope });
+            const auth = await authenticateClient({ clientId, clientSecret, scope });
             const { baseEndpoint } = await getOrganizationInfo(auth.accessToken);
             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) {
-                  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: {