feat(js-api-client): cart api and TSUP updates

Author: Plopix

README.md

@@ -48,6 +48,8 @@ You get access to different helpers for each API:
 -   orderApi
 -   subscriptionApi
 -   pimApi
+-   pimNextApi
+-   shopCartApi
 
 First, you need to create the _Client_:
 
@@ -63,14 +65,64 @@ Then you can use it:
 
 ```typescript
 export async function fetchSomething(): Promise<Something[]> {
-    const caller = CrystallizeClient.catalogueApi;
-    const response = await caller(graphQLQuery, variables);
+    const response = await CrystallizeClient.catalogueApi(graphQLQuery, variables);
     return response.catalogue;
 }
 ```
 
 There is a live demo: https://crystallizeapi.github.io/libraries/js-api-client/call-api
 
+When it comes to API that requires Authentication you can provide more to _createClient_.
+
+```javascript
+const pimApiClient = createClient({
+    tenantIdentifier: 'furniture',
+    accessTokenId: 'xxx',
+    accessTokenSecret: 'xxx',
+};
+await pimApiClient.pimApi(query)
+
+const catalogueApiClient = createClient({
+    tenantIdentifier: 'furniture',
+    staticAuthToken: 'xxx'
+};
+await catalogueApiClient.catalogueApi(query)
+```
+
+There is even more about the Shop Cart API that requires a specific token.
+If you fetched the Token yourself you can pass it directly and enjoy the Shop Cart API
+
+```javascript
+const cartApiClient = createClient({
+    tenantIdentifier: 'furniture',
+    shopApiToken: 'xxx',
+});
+await cartApiClient.shopCartApi(query);
+```
+
+But you can let the JS API Client do the heavy-lifting for you. Shop Cart API requires proof of access to PIM in order to get such Token.
+Based on your situation, most likely you are using Shop Cart API server-side:
+
+```javascript
+const cartApiClient = createClient(
+    {
+        tenantIdentifier: 'furniture',
+        accessTokenId: 'xxx',
+        accessTokenSecret: 'xxx',
+    },
+    {
+        // optional
+        shopApiToken: {
+            expiresIn: 900000, // optional, default 12 hours
+            scopes: ['cart', 'cart:admin', 'usage'], // optional, default ['cart']
+        },
+    },
+);
+await cartApiClient.shopCartApi(query);
+```
+
+JS API Client will grab the Token for you (once) and use it within the following calls to Shop Cart API.
+
 ## Catalogue Fetcher
 
 You can pass objects that respect the logic of https://www.npmjs.com/package/json-to-graphql-query to the Client.

package.json

@@ -1,15 +1,15 @@
 {
     "name": "@crystallize/js-api-client",
     "license": "MIT",
-    "version": "1.13.1",
+    "version": "2.0.0",
     "author": "Crystallize <[email protected]> (https://crystallize.com)",
     "contributors": [
         "Sébastien Morel <[email protected]>",
         "Dhairya Dwivedi <[email protected]>"
     ],
     "scripts": {
         "watch": "yarn tsc -W",
-        "build": "yarn tsc",
+        "build": "tsup src/index.ts --format esm,cjs --dts",
         "test": "jest",
         "test:watch": "jest --watch",
         "bump": "yarn tsc && yarn version --no-git-tag-version --new-version"
@@ -18,16 +18,18 @@
         "type": "git",
         "url": "https://github.com/CrystallizeAPI/js-api-client.git"
     },
-    "main": "dist/index.js",
-    "types": "dist/index.d.ts",
+    "types": "./dist/index.d.ts",
+    "main": "./dist/index.js",
+    "module": "./dist/index.mjs",
     "devDependencies": {
         "@tsconfig/node16": "^16.1.1",
         "@types/node": "^20.10.4",
+        "tsup": "^8.0.1",
         "@types/node-fetch": "^2",
         "jest": "^29.7.0"
     },
     "dependencies": {
-        "dotenv": "^16.3.1",
+        "dotenv": "^16.4.1",
         "json-to-graphql-query": "^2.2.5",
         "mime-lite": "^1.0.3",
         "node-fetch": "^2",

src/core/client.ts

@@ -7,6 +7,7 @@ export type ClientConfiguration = {
     accessTokenSecret?: string;
     staticAuthToken?: string;
     sessionId?: string;
+    shopApiToken?: string;
     origin?: string;
 };
 
@@ -27,6 +28,11 @@ type ProfilingOptions = {
 
 export type CreateClientOptions = {
     profiling?: ProfilingOptions;
+    shopApiToken?: {
+        doNotFetch?: boolean;
+        scopes?: string[];
+        expiresIn?: number;
+    };
 };
 
 export type VariablesType = Record<string, any>;
@@ -38,10 +44,12 @@ export type ClientInterface = {
     orderApi: ApiCaller<any>;
     subscriptionApi: ApiCaller<any>;
     pimApi: ApiCaller<any>;
+    nextPimApi: ApiCaller<any>;
+    shopCartApi: ApiCaller<any>;
     config: Pick<ClientConfiguration, 'tenantIdentifier' | 'tenantId' | 'origin'>;
 };
 
-function authenticationHeaders(config: ClientConfiguration) {
+function authenticationHeaders(config: ClientConfiguration): Record<string, string> {
     if (config.sessionId) {
         return {
             Cookie: 'connect.sid=' + config.sessionId,
@@ -67,14 +75,15 @@ async function post<T>(
     profiling?: ProfilingOptions,
 ): Promise<T> {
     try {
-        const commonHeaders = {
+        const { headers: initHeaders, ...initRest } = init || {};
+
+        const headers = {
             'Content-type': 'application/json; charset=UTF-8',
             Accept: 'application/json',
-        };
-        const headers = {
-            ...commonHeaders,
             ...authenticationHeaders(config),
+            ...initHeaders,
         };
+
         const body = JSON.stringify({ query, variables });
         let start: number = 0;
         if (profiling) {
@@ -85,7 +94,7 @@ async function post<T>(
         }
 
         const response = await fetch(path, {
-            ...init,
+            ...initRest,
             method: 'POST',
             headers,
             body,
@@ -133,6 +142,12 @@ async function post<T>(
     }
 }
 
+function apiHost(configuration: ClientConfiguration) {
+    const origin = configuration.origin || '.crystallize.com';
+    return (path: string[], prefix: 'api' | 'pim' | 'shop-api' = 'api') =>
+        `https://${prefix}${origin}/${path.join('/')}`;
+}
+
 function createApiCaller(
     uri: string,
     configuration: ClientConfiguration,
@@ -143,16 +158,58 @@ function createApiCaller(
     };
 }
 
+function shopApiCaller(configuration: ClientConfiguration, options?: CreateClientOptions) {
+    const identifier = configuration.tenantIdentifier;
+    let shopApiToken = configuration.shopApiToken;
+    return async function callApi<T>(query: string, variables?: VariablesType): Promise<T> {
+        if (!shopApiToken && options?.shopApiToken?.doNotFetch !== true) {
+            const headers = {
+                'Content-type': 'application/json; charset=UTF-8',
+                Accept: 'application/json',
+                ...authenticationHeaders(configuration),
+            };
+            const response = await fetch(apiHost(configuration)([`@${identifier}`, 'auth', 'token'], 'shop-api'), {
+                method: 'POST',
+                headers,
+                body: JSON.stringify({
+                    scopes: options?.shopApiToken?.scopes || ['cart'],
+                    expiresIn: options?.shopApiToken?.expiresIn || 3600 * 12,
+                }),
+            });
+            const results = await response.json();
+            if (results.success !== true) {
+                throw new Error('Could not fetch shop api token: ' + results.error);
+            }
+            shopApiToken = results.token;
+        }
+        return post<T>(
+            apiHost(configuration)([`@${identifier}`, 'cart'], 'shop-api'),
+            {
+                ...configuration,
+                shopApiToken: shopApiToken,
+            },
+            query,
+            variables,
+            {
+                headers: {
+                    Authorization: `Bearer ${shopApiToken}`,
+                },
+            },
+            options?.profiling,
+        );
+    };
+}
+
 export function createClient(configuration: ClientConfiguration, options?: CreateClientOptions): ClientInterface {
     const identifier = configuration.tenantIdentifier;
-    const origin = configuration.origin || '.crystallize.com';
-    const apiHost = (path: string[], prefix: 'api' | 'pim' = 'api') => `https://${prefix}${origin}/${path.join('/')}`;
     return {
-        catalogueApi: createApiCaller(apiHost([identifier, 'catalogue']), configuration, options),
-        searchApi: createApiCaller(apiHost([identifier, 'search']), configuration, options),
-        orderApi: createApiCaller(apiHost([identifier, 'orders']), configuration, options),
-        subscriptionApi: createApiCaller(apiHost([identifier, 'subscriptions']), configuration, options),
-        pimApi: createApiCaller(apiHost(['graphql'], 'pim'), configuration, options),
+        catalogueApi: createApiCaller(apiHost(configuration)([identifier, 'catalogue']), configuration, options),
+        searchApi: createApiCaller(apiHost(configuration)([identifier, 'search']), configuration, options),
+        orderApi: createApiCaller(apiHost(configuration)([identifier, 'orders']), configuration, options),
+        subscriptionApi: createApiCaller(apiHost(configuration)([identifier, 'subscriptions']), configuration, options),
+        pimApi: createApiCaller(apiHost(configuration)(['graphql'], 'pim'), configuration, options),
+        nextPimApi: createApiCaller(apiHost(configuration)([`@${identifier}`]), configuration, options),
+        shopCartApi: shopApiCaller(configuration, options),
         config: {
             tenantId: configuration.tenantId,
             tenantIdentifier: configuration.tenantIdentifier,

src/core/massCallClient.ts

@@ -189,6 +189,8 @@ export function createMassCallClient(
         orderApi: client.orderApi,
         subscriptionApi: client.subscriptionApi,
         pimApi: client.pimApi,
+        shopCartApi: client.shopCartApi,
+        nextPimApi: client.nextPimApi,
         config: client.config,
         enqueue: {
             catalogueApi: (query: string, variables?: VariablesType): string => {

tests/call.test.js

@@ -100,3 +100,36 @@ test('callSearchApi: Raw fetch Skus', async () => {
 
     expect(response.search.edges[0].node.path).toBe('/shop/bathroom-fitting/large-mounted-cabinet-in-treated-wood');
 });
+
+test.skip('Shop API Cart: Test we can call it', async () => {
+    const CrystallizeClient = createClient(
+        {
+            tenantIdentifier: 'frntr',
+            accessTokenId: 'xxx',
+            accessTokenSecret: 'xxx',
+            // shopApiToken: 'xxx'
+        },
+        {
+            shopApiToken: {
+                // doNotFetch: false,
+                // expiresIn: 900000,
+                // scopes: ['cart', 'cart:admin', 'usage']
+            },
+        },
+    );
+    const caller = CrystallizeClient.shopCartApi;
+    const query = `mutation HYDRATE ($sku: String!) {
+    hydrate(input: { items: [ { sku: $sku } ] }) {
+        id
+        total {
+            gross
+        }
+        items {
+            name
+        }
+    }}`;
+    const response = await caller(query, {
+        sku: 'smeg-robot-pink-standard',
+    });
+    expect(response.hydrate.id).toBeDefined();
+});

tests/catalogue.test.js

@@ -1,4 +1,4 @@
-const { catalogueFetcherGraphqlBuilder } = require('../dist/core/catalogue.js');
+const { catalogueFetcherGraphqlBuilder } = require('../dist/index.js');
 const { jsonToGraphQLQuery } = require('json-to-graphql-query');
 
 test('Catalogue Query Builder Test', () => {