feat(connectservice): connect to a specific service

README.md

@@ -57,7 +57,7 @@ Config properties:
   locale, // string; // [optional] To force the display to a specific language (e.g.: en-AU).
   state, // string; // [optional] An opaque value, used for security purposes. If this request parameter is set in the request, then it is returned to the application as part of the redirect_uri.
   appToken, // string; // [optional] The Access Token granted through oauth
-  isTestEnvironment // boolean; // [optional] If you wanna use the staging or production environemnt
+  isTestEnvironment // boolean; // [optional] If you wanna use the staging or production environment
 }
 ```
 
@@ -114,3 +114,17 @@ You can pass the following options:
 - `backTo`: Redirect URL for some actions (back, revoke, logout, delete)
   - Values: A string representing a URL
   - Default: Current URL
+
+### Open the vault in a specific service connect page
+
+`mtLinkSdk.connectService(options);`
+You can pass the following options:
+
+- `key`: The key to service to connect. Is required.
+  - Values: A string representing the service key
+- `newTab`: Open in a new browser tab
+  - Values: `true` or `false`
+  - Default: `false`
+- `backTo`: Redirect URL for some actions (back, revoke, logout, delete)
+  - Values: A string representing a URL
+  - Default: Current URL

dist/endpoints.d.ts

@@ -2,6 +2,9 @@ export declare const DOMAIN = "getmoneytree.com";
 export declare const VAULT: {
     SUBDOMAIN: string;
     TEST_SUBDOMAIN: string;
+    PATHS: {
+        SERVICE: string;
+    };
 };
 export declare const MY_ACCOUNT: {
     SUBDOMAIN: string;

dist/index.d.ts

@@ -28,6 +28,9 @@ interface IVaultOptions {
     backTo?: string;
     newTab?: boolean;
 }
+interface IVaultService extends IVaultOptions {
+    key: string;
+}
 interface IMyAccountOptions {
     backTo?: string;
     newTab?: boolean;
@@ -44,6 +47,7 @@ declare class LinkSDK {
     authorize({ newTab, email, authPage, backTo, showAuthToggle }?: IMyAccountOptions): void;
     logout({ newTab }?: IMyAccountOptions): void;
     openVault({ newTab, backTo }?: IVaultOptions): void;
+    connectService(vaultParams: IVaultService): void;
     openSettings({ newTab, backTo }?: IMyAccountOptions): void;
 }
 declare const _default: LinkSDK;

sample/src/index.html

@@ -12,6 +12,12 @@ <h3>Welcome to the Moneytree Link Web SDK Sample App</h3>
       <button id="settings-btn">Open Moneytree Settings</button>
       <button id="vault-btn">Open Vault</button>
       <button id="logout-btn">Logout</button>
+      <br />
+      <br />
+      <div>
+        <input id="connect-service-key" value="smbc_bank" />
+        <button id="connect-service-btn">Connect Service</button>
+      </div>
     </div>
   </body>
 </html>

sample/src/index.ts

@@ -15,10 +15,12 @@ const authorizeBtn = document.getElementById('authorize-btn') as HTMLButtonEleme
 const logoutBtn = document.getElementById('logout-btn') as HTMLButtonElement;
 const goToSettingsBtn = document.getElementById('settings-btn') as HTMLButtonElement;
 const goToVaultBtn = document.getElementById('vault-btn') as HTMLButtonElement;
+const connectServiceBtn = document.getElementById('connect-service-btn') as HTMLButtonElement;
+const connectServiceKey = document.getElementById('connect-service-key') as HTMLButtonElement;
 const tokenInfoLbl = document.getElementById('access-token-text') as HTMLButtonElement;
 const accessTokenLabel = document.getElementById('access-token-text') as HTMLParagraphElement;
 
-if (!authorizeBtn || !logoutBtn || !goToSettingsBtn || !goToVaultBtn) {
+if (!authorizeBtn || !logoutBtn || !goToSettingsBtn || !goToVaultBtn || !connectServiceBtn) {
   throw new Error('An error occurred');
 }
 
@@ -42,6 +44,11 @@ goToVaultBtn.onclick = () => {
   LinkSDK.openVault({ newTab: false });
 };
 
+// Launch vault on specific service route when clicked
+connectServiceBtn.onclick = () => {
+  LinkSDK.connectService({ key: connectServiceKey.value, newTab: false });
+};
+
 const initializeLinkSDK = () => {
   LinkSDK.init({
     clientId: AWESOME_APP_ID,
@@ -62,6 +69,7 @@ const validateToken = async () => {
   if (!accessToken) {
     goToSettingsBtn.disabled = true;
     goToVaultBtn.disabled = true;
+    connectServiceBtn.disabled = true;
     logoutBtn.disabled = true;
     return;
   }

src/__tests__/index.ts

@@ -288,6 +288,80 @@ describe('LinkSDK', () => {
     });
   });
 
+  describe('connectService', () => {
+    test('Calling "connectService" method before an init will fail', async () => {
+      expect(() => {
+        // @ts-ignore Ignores missing arguments to test user passing no arguments
+        linkSDK.connectService();
+      }).toThrow('SDK not initialized');
+    });
+
+    test('no params', async () => {
+      linkSDK.init.call(mockValue, {
+        clientId: value,
+        scope: [value]
+      });
+
+      expect(() => {
+        // @ts-ignore Ignores missing arguments to test user passing no arguments
+        linkSDK.connectService.call(mockValue);
+      }).toThrow('Key not provided');
+    });
+
+    test('default params', async () => {
+      const open = (window.open = jest.fn());
+
+      linkSDK.init.call(mockValue, {
+        clientId: value,
+        scope: [value]
+      });
+      // @ts-ignore Ignores missing arguments to test user passing no arguments
+      linkSDK.connectService.call(mockValue, { key: value });
+
+      expect(open).toBeCalled();
+
+      const [[url, isNewTab]] = open.mock.calls; // [0][1]
+
+      const host = `https://${mockValue.domains.vault}/${VAULT.PATHS.SERVICE}/${value}`;
+      expect(url).toContain(host);
+      expect(isNewTab).toBe('_self');
+
+      const { params } = mockValue;
+      const qs = `client_id=${params.client_id}`;
+      const configs = encodeURIComponent(`sdk_platform=js;sdk_version=${packageJSON.version};back_to=${location.href}`);
+
+      expect(url).toBe(`${host}?${qs}&configs=${configs}`);
+    });
+
+    test('with params', async () => {
+      const open = (window.open = jest.fn());
+      const backTo = 'http://google.com';
+
+      linkSDK.init.call(mockValue, {
+        clientId: value,
+        scope: [value],
+        isTestEnvironment: true
+      });
+      linkSDK.connectService.call(mockValue, {
+        key: value,
+        backTo,
+        newTab: true
+      });
+
+      expect(open).toBeCalled();
+
+      const [[url, isNewTab]] = open.mock.calls; // [0][1]
+      expect(isNewTab).toBe('_blank');
+
+      const { params } = mockValue;
+      const host = `https://${mockValue.domains.vault}/${VAULT.PATHS.SERVICE}/${value}`;
+      const qs = `client_id=${params.client_id}`;
+      const configs = encodeURIComponent(`sdk_platform=js;sdk_version=${packageJSON.version};back_to=${backTo}`);
+
+      expect(url).toBe(`${host}?${qs}&configs=${configs}`);
+    });
+  });
+
   describe('openSettings', () => {
     test('Calling "openSettings" method before an init will failed', async () => {
       expect(() => {

src/endpoints.ts

@@ -2,7 +2,10 @@ export const DOMAIN = 'getmoneytree.com';
 
 export const VAULT = {
   SUBDOMAIN: 'vault',
-  TEST_SUBDOMAIN: 'vault-staging'
+  TEST_SUBDOMAIN: 'vault-staging',
+  PATHS: {
+    SERVICE: 'service'
+  }
 };
 
 export const MY_ACCOUNT = {

src/index.ts

@@ -37,6 +37,10 @@ interface IVaultOptions {
   newTab?: boolean;
 }
 
+interface IVaultService extends IVaultOptions {
+  key: string;
+}
+
 interface IMyAccountOptions {
   backTo?: string;
   newTab?: boolean;
@@ -155,6 +159,26 @@ class LinkSDK {
     window.open(`https://${this.domains.vault}${params}`, newTab ? '_blank' : '_self');
   }
 
+  // Opens a specific service connect page
+  public connectService(vaultParams: IVaultService): void {
+    if (!this.isInitialized) {
+      throw new Error('SDK not initialized');
+    }
+
+    if (!vaultParams || typeof vaultParams !== 'object' || !vaultParams.key) {
+      throw new Error('Key not provided');
+    }
+
+    const { key, newTab = false, backTo = location.href } = vaultParams;
+
+    const params = encodeConfigWithParams<IParams, ICommonUrlConfig>(this.params, {
+      ...commonUrlConfig,
+      back_to: backTo
+    });
+
+    window.open(`https://${this.domains.vault}/${VAULT.PATHS.SERVICE}/${key}${params}`, newTab ? '_blank' : '_self');
+  }
+
   // Open the Guest settings page
   public openSettings({ newTab = false, backTo = location.href }: IMyAccountOptions = {}): void {
     if (!this.isInitialized) {