Next: CKO Channels

packages/checkout-com/README.md

@@ -26,13 +26,19 @@ If you are Developing Core of Vue Storefront Next you might need to add `@vue-st
 3. At the bottom of `modules` add:
 ```js
 ['@vue-storefront/checkout-com/nuxt', {
-    publicKey: 'pk_test_your-public-key',
-    secretKey: 'sk_test_your-secret-key',
-    ctApiUrl: 'https://your-commerctools-instance.com/api',
-    ckoWebHookUrl: 'https://your-commerctools-instance.com/api'
+    channels: {
+        en: {
+            publicKey: 'pk_test_your-public-key',
+            secretKey: 'sk_test_your-secret-key',
+            ctApiUrl: 'https://your-commerctools-instance.com/api',
+            ckoWebHookUrl: 'https://your-commerctools-instance.com/api'
+        }
+    },
+    defaultChannel: 'en'
 }],
 ```
-
+`defaultChannel` is the channel which will be chosen by default. Value should be keyname from `channels`
+`channels` allows us to define many variants of attributes. Developer is able to change them just by calling `setChannel` 
 `publicKey` and `secretKey` comes from Checkout COM
 `ctApiUrl` is URL to the API endpoints which needs `secretKey` & `publicKey` it will be proxied by Express API create inside CKO Nuxt's module
 `ckoWebHookUrl` is URL to the API endpoints which needs only `publicKey` it will be used in frontend calls to the API
@@ -407,4 +413,14 @@ const removeMinePaymentInstrument = async (paymentInstrument: string): Promise<v
         await removePaymentInstrument(cart.value.customerId, paymentInstrument);
     }
 }
-```
+```
+
+## Changing current channel
+All you have to do us just import `setChannel` method and call it:
+```ts
+import { setChannel } from '@vue-storefront/checkout-com';
+
+setChannel('it');
+```
+
+Where `it` is name of channel to set. It should be present inside config's `channels`.

packages/checkout-com/__tests__/configuration.spec.ts

@@ -1,44 +1,64 @@
-import { defaultConfig, setup, getPublicKey, getCkoWebhookUrl, getFramesStyles, getFramesLocalization, getCkoProxyUrl, getTransactionTokenKey, getSaveInstrumentKey } from '../src/configuration';
+import { defaultConfig, setup, getPublicKey, getCkoWebhookUrl, getFramesStyles, getFramesLocalization, getCkoProxyUrl, getTransactionTokenKey, getSaveInstrumentKey, getCurrentChannel, setChannel } from '../src/configuration';
+
+const consoleLogMock = {
+  error: jest.fn()
+};
+
+Object.defineProperty(window, 'console', {
+  value: consoleLogMock
+});
 
 describe('[checkout-com] configuration', () => {
 
   it('uses fallback values', () => {
 
     const config = {
-      publicKey: 'some-public-key'
+      channels: {
+        en: {
+          publicKey: '12'
+        }
+      },
+      defaultChannel: 'en'
     };
 
     setup(config);
 
-    expect(getPublicKey()).toBe(config.publicKey);
+    expect(getPublicKey()).toBe(config.channels.en.publicKey);
     expect(getCkoWebhookUrl()).toBe(defaultConfig.ckoWebHookUrl);
     expect(getFramesStyles()).toEqual(defaultConfig.card.style);
     expect(getFramesLocalization()).toEqual(defaultConfig.card.localization);
     expect(getTransactionTokenKey()).toBe(defaultConfig.tokenizedCardKey);
+    expect(getCurrentChannel()).toBe(config.defaultChannel);
 
   });
 
   it('appends configuration properly', () => {
 
     const config = {
-      publicKey: 'some-public-key',
-      ckoWebHookUrl: 'https://pwebhook.com/api/a',
-      card: {
-        style: {ab: '12'},
-        localization: 'en-US'
+      channels: {
+        en: {
+          publicKey: 'some-public-key',
+          ckoWebHookUrl: 'https://pwebhook.com/api/a',
+          card: {
+            style: {ab: '12'},
+            localization: 'en-US'
+          },
+          tokenizedCardKey: 'temporary-tokenized-value-key',
+          saveInstrumentKey: 'some-new-value'
+        }
       },
-      tokenizedCardKey: 'temporary-tokenized-value-key',
-      saveInstrumentKey: 'some-new-value'
+      defaultChannel: 'en'
     };
 
     setup(config);
 
-    expect(getPublicKey()).toBe(config.publicKey);
-    expect(getCkoWebhookUrl()).toBe(config.ckoWebHookUrl);
-    expect(getFramesStyles()).toEqual(config.card.style);
-    expect(getFramesLocalization()).toEqual(config.card.localization);
-    expect(getTransactionTokenKey()).toBe(config.tokenizedCardKey);
-    expect(getSaveInstrumentKey()).toBe(config.saveInstrumentKey);
+    expect(getPublicKey()).toBe(config.channels.en.publicKey);
+    expect(getCkoWebhookUrl()).toBe(config.channels.en.ckoWebHookUrl);
+    expect(getFramesStyles()).toEqual(config.channels.en.card.style);
+    expect(getFramesLocalization()).toEqual(config.channels.en.card.localization);
+    expect(getTransactionTokenKey()).toBe(config.channels.en.tokenizedCardKey);
+    expect(getSaveInstrumentKey()).toBe(config.channels.en.saveInstrumentKey);
+    expect(getCurrentChannel()).toBe(config.defaultChannel);
 
   });
 
@@ -48,4 +68,93 @@ describe('[checkout-com] configuration', () => {
 
   });
 
+  it('set ups new channel properly', () => {
+
+    const config = {
+      channels: {
+        en: {
+          publicKey: 'some-public-key',
+          ckoWebHookUrl: 'https://pwebhook.com/api/a',
+          card: {
+            style: {ab: '12'},
+            localization: 'en-US'
+          },
+          tokenizedCardKey: 'temporary-tokenized-value-key',
+          saveInstrumentKey: 'some-new-value'
+        },
+        it: {
+          publicKey: 'some-public-xcxcxc-asdas',
+          ckoWebHookUrl: 'https://abcc.com/api/bbba',
+          card: {
+            style: {asdas: '1552'},
+            localization: 'it-IT'
+          },
+          tokenizedCardKey: 'some-token-value-it',
+          saveInstrumentKey: 'some-new-value-it-ab'
+        }
+      },
+      defaultChannel: 'en'
+    };
+
+    setup(config);
+    const newChannel = 'it';
+    setChannel(newChannel);
+
+    expect(getPublicKey()).toBe(config.channels.it.publicKey);
+    expect(getCkoWebhookUrl()).toBe(config.channels.it.ckoWebHookUrl);
+    expect(getFramesStyles()).toEqual(config.channels.it.card.style);
+    expect(getFramesLocalization()).toEqual(config.channels.it.card.localization);
+    expect(getTransactionTokenKey()).toBe(config.channels.it.tokenizedCardKey);
+    expect(getSaveInstrumentKey()).toBe(config.channels.it.saveInstrumentKey);
+    expect(getCurrentChannel()).toBe(newChannel);
+
+  });
+
+  it('prints error if not existing channel is default', () => {
+
+    const config = {
+      channels: {
+        en: {
+          publicKey: 'some-public-key',
+          ckoWebHookUrl: 'https://pwebhook.com/api/a',
+          card: {
+            style: {ab: '12'},
+            localization: 'en-US'
+          },
+          tokenizedCardKey: 'temporary-tokenized-value-key',
+          saveInstrumentKey: 'some-new-value'
+        }
+      },
+      defaultChannel: 'ch'
+    };
+
+    setup(config);
+    expect(consoleLogMock.error).toHaveBeenCalledWith('[CKO] Bad config provided');
+
+  });
+
+  it('prints error if not existing channel is default', () => {
+
+    const config = {
+      channels: {
+        en: {
+          publicKey: 'some-public-key',
+          ckoWebHookUrl: 'https://pwebhook.com/api/a',
+          card: {
+            style: {ab: '12'},
+            localization: 'en-US'
+          },
+          tokenizedCardKey: 'temporary-tokenized-value-key',
+          saveInstrumentKey: 'some-new-value'
+        }
+      },
+      defaultChannel: 'en'
+    };
+
+    setup(config);
+    setChannel('it');
+    expect(consoleLogMock.error).toHaveBeenCalledWith('[CKO] Requested channel does not exist in the config');
+
+  });
+
 });

packages/checkout-com/__tests__/index.spec.ts

@@ -1,9 +1,10 @@
-import { setup, getPublicKey, getCkoWebhookUrl, getFramesStyles, useCko, CkoPaymentType } from '../src/index';
+import { setup, getPublicKey, getCkoWebhookUrl, getFramesStyles, useCko, setChannel, CkoPaymentType } from '../src/index';
 
 jest.mock('../src/configuration.ts', () => ({
   setup: jest.fn(),
   getPublicKey: jest.fn(),
   getCkoWebhookUrl: jest.fn(),
+  setChannel: jest.fn(),
   getFramesStyles: jest.fn()
 }));
 
@@ -13,18 +14,27 @@ describe('index.ts', () => {
 
   it('exports proper functions', () => {
     setup({
-      publicKey: '12'
+      channels: {
+        en: {
+          publicKey: '12'
+        }
+      },
+      defaultChannel: 'en'
     });
     getPublicKey();
     getCkoWebhookUrl();
     getFramesStyles();
     useCko();
 
+    const newChannel = 'it';
+    setChannel(newChannel);
+
     expect(setup).toHaveBeenCalled();
     expect(getPublicKey).toHaveBeenCalled();
     expect(getCkoWebhookUrl).toHaveBeenCalled();
     expect(getFramesStyles).toHaveBeenCalled();
     expect(useCko).toHaveBeenCalled();
+    expect(setChannel).toHaveBeenCalledWith(newChannel);
   });
 
   it('exports proper CkoPaymentType enum', () => {

packages/checkout-com/__tests__/payment.spec.ts

@@ -3,6 +3,7 @@ import { createContext, createPayment, getCustomerCards, removeSavedCard } from
 const publicKey = 'public key';
 const ckoWebhookUrl = 'https://webhook.com/api';
 const ckoProxyUrl = 'https://proxy.com/api';
+const currentChannel = 'en';
 
 import axios from 'axios';
 jest.mock('axios', () => ({
@@ -12,7 +13,8 @@ jest.mock('axios', () => ({
 jest.mock('@vue-storefront/checkout-com/src/configuration', () => ({
   getPublicKey: () => publicKey,
   getCkoWebhookUrl: () => ckoWebhookUrl,
-  getCkoProxyUrl: () => ckoProxyUrl
+  getCkoProxyUrl: () => ckoProxyUrl,
+  getCurrentChannel: () => currentChannel
 }));
 
 describe('[checkout-com] payment', () => {
@@ -113,16 +115,17 @@ describe('[checkout-com] payment', () => {
   it('getCustomerCards', () => {
 
     /*eslint-disable */
-    const customer = {
-      customer_id: 15
+    const payload = {
+      customer_id: 15,
+      channel: currentChannel
     };
     /* eslint-enable */
 
-    getCustomerCards(customer);
+    getCustomerCards(payload);
 
     expect(axios.post).toBeCalledWith(
       `${ckoProxyUrl}/payment-instruments`,
-      customer
+      payload
     );
 
   });
@@ -132,14 +135,15 @@ describe('[checkout-com] payment', () => {
     /*eslint-disable */
     const customerData = {
       customer_id: 15,
-      payment_instrument_id: 12
+      payment_instrument_id: 12,
+      channel: currentChannel
     };
     /* eslint-enable */
 
     removeSavedCard(customerData);
 
     expect(axios.delete).toBeCalledWith(
-      `${ckoProxyUrl}/payment-instruments/${customerData.customer_id}/${customerData.payment_instrument_id}`
+      `${ckoProxyUrl}/payment-instruments/${customerData.customer_id}/${customerData.payment_instrument_id}/${customerData.channel}`
     );
 
   });

packages/checkout-com/nuxt/index.js

@@ -27,11 +27,7 @@ export default function CheckoutComModule(moduleOptions) {
 
   this.addServerMiddleware({
     path: '/cko-api/payment-instruments',
-    handler: proxyMiddleware({
-      publicKey: moduleOptions.publicKey,
-      secretKey: moduleOptions.secretKey,
-      ctApiUrl: moduleOptions.ctApiUrl
-    })
+    handler: proxyMiddleware(moduleOptions.channels)
   });
 
   const paymentMethods = {

packages/checkout-com/nuxt/plugin.js

@@ -1,5 +1,10 @@
 import { setup } from '@vue-storefront/checkout-com';
 
 export default () => {
-  setup(<%= serialize(options) %>);
+  const options = <%= serialize(options) %>;
+  for (const channel of Object.keys(options.channels)) {
+    delete options.channels[channel].secretKey;
+  }
+
+  setup(options);
 };