feat(open-service): rename myaccount-settings to myaccount

moneytree · Jun 1, 2021 · 71cdd6c · 71cdd6c
1 parent 6f3b194
commit 71cdd6c
Show file tree

Hide file tree

Showing 7 changed files with 171 additions and 145 deletions.
diff --git a/docs/README.md b/docs/README.md
diff --git a/sample/src/elements.ts b/sample/src/elements.ts
@@ -16,7 +16,8 @@ export default {
   },
   openServiceOptionsElms: {
     serviceId: document.getElementById('open-service-options-serviceId') as HTMLSelectElement,
-    view: document.getElementById('open-service-options-view') as HTMLSelectElement,
+    vaultView: document.getElementById('open-service-options-vault-view') as HTMLSelectElement,
+    myAccountView: document.getElementById('open-service-options-myaccount-view') as HTMLSelectElement,
     type: document.getElementById('open-service-options-type') as HTMLSelectElement,
     group: document.getElementById('open-service-options-group') as HTMLSelectElement,
     search: document.getElementById('open-service-options-search') as HTMLInputElement,
@@ -41,5 +42,6 @@ export default {
   openServiceSection: document.getElementById('open-service-section') as HTMLDivElement,
   logoutSection: document.getElementById('logout-section') as HTMLDivElement,
   tokenInfoSection: document.getElementById('token-info-section') as HTMLDivElement,
-  vaultOptions: document.getElementById('vault-options') as HTMLDivElement
+  pageVaultOptions: document.getElementById('page-vault-options') as HTMLDivElement,
+  pageMyAccountOptions: document.getElementById('page-myaccount-options') as HTMLDivElement
 };
diff --git a/sample/src/index.html b/sample/src/index.html
@@ -163,7 +163,7 @@ <h3>Login Link</h3>
               <option value="settings/email-preferences">settings/email-preferences</option>
               <option value="settings/delete-account">settings/delete-account</option>
               <option value="settings/update-email">settings/update-email</option>
-              <option value="settings/update-email">settings/update-password</option>
+              <option value="settings/update-password">settings/update-password</option>
             </select>
           </div>
         </p>
@@ -197,30 +197,39 @@ <h3>Token Information</h3>
       <section id="open-service-section">
         <h3>Open Service</h3>
         <p>
-          <span style="color: red;">*</span>ServiceId, <small>Open a service by Id, current supported services are vault, my-account, link-kit </small>
+          <span style="color: red;">*</span>ServiceId, <small>Open a service by Id, current supported services are vault, myaccount, link-kit </small>
           <div>
             <select id="open-service-options-serviceId">
               <option value="vault" default>vault</option>
-              <option value="myaccount-settings">myaccount</option>
+              <option value="myaccount">myaccount</option>
               <option value="link-kit">link-kit</option>
             </select>
           </div>
         </p>
 
-        <div id="vault-options">
-          <span style="color: red;">*</span>View, <small>We provide a way to open the Vault's specific pages. </small>
+        <div id="page-myaccount-options" style="display: none">
+          <span style="color: red;">*</span>View, <small>We provide a way to open specific pages. </small>
           <div>
-            <select id="open-service-options-view">
+            <select id="open-service-options-myaccount-view">
+              <option value="settings" default>settings</option>
+              <option value="settings/authorized-applications">settings/authorized-applications</option>
+              <option value="settings/change-language">settings/change-language</option>
+              <option value="settings/email-preferences">settings/email-preferences</option>
+              <option value="settings/delete-account">settings/delete-account</option>
+              <option value="settings/update-email">settings/update-email</option>
+              <option value="settings/update-password">settings/update-password</option>
+            </select>
+          </div>
+        </div>
+
+        <div id="page-vault-options">
+          <span style="color: red;">*</span>View, <small>We provide a way to open specific pages. </small>
+          <div>
+            <select id="open-service-options-vault-view">
               <option value="services-list" default>services-list</option>
               <option value="service-connection">service-connection</option>
               <option value="connection-setting">connection-setting</option>
               <option value="customer-support">customer-support</option>
-              <option value="authorized-applications">authorized-applications</option>
-              <option value="change-language">change-language</option>
-              <option value="email-preferences">email-preferences</option>
-              <option value="delete-account">delete-account</option>
-              <option value="update-email">update-email</option>
-              <option value="update-password">update-password</option>
             </select>
           </div>
 

diff --git a/sample/src/index.ts b/sample/src/index.ts
@@ -122,7 +122,7 @@ elements.openServiceBtn.onclick = () => {
     .value as ServiceId;
 
   if (serviceId === 'vault') {
-    const view = openServiceOptionsElms.view.options[openServiceOptionsElms.view.selectedIndex].value as
+    const view = openServiceOptionsElms.vaultView.options[openServiceOptionsElms.vaultView.selectedIndex].value as
       | 'services-list'
       | 'service-connection'
       | 'connection-setting'
@@ -163,14 +163,16 @@ elements.openServiceBtn.onclick = () => {
     }
   }
 
-  if (serviceId === 'myaccount-settings') {
-    const view = openServiceOptionsElms.view.options[openServiceOptionsElms.view.selectedIndex].value as
-      | 'authorized-applications'
-      | 'change-language'
-      | 'email-preferences'
-      | 'delete-account'
-      | 'update-email'
-      | 'update-password';
+  if (serviceId === 'myaccount') {
+    const view = openServiceOptionsElms.myAccountView.options[openServiceOptionsElms.myAccountView.selectedIndex]
+      .value as
+      | 'settings'
+      | 'settings/authorized-applications'
+      | 'settings/change-language'
+      | 'settings/email-preferences'
+      | 'settings/delete-account'
+      | 'settings/update-email'
+      | 'settings/update-password';
 
     OpenServicesConfigsOptions = { view };
   }
@@ -197,23 +199,28 @@ elements.sendLoginLinkBtn.onclick = async () => {
   sendLoginLinkBtn.disabled = false;
 };
 
-// Helper, to switch the vault options, depends on openService's serviceId value
+// Helper, to switch the options, depends on openService's serviceId value
 elements.openServiceOptionsElms.serviceId.onchange = () => {
-  const { openServiceOptionsElms, vaultOptions } = elements;
+  const { openServiceOptionsElms, pageVaultOptions, pageMyAccountOptions } = elements;
   const selectedValue = openServiceOptionsElms.serviceId.options[openServiceOptionsElms.serviceId.selectedIndex].value;
 
-  if (selectedValue === 'vault' || selectedValue === 'myaccount-settings') {
-    vaultOptions.style.display = 'block';
+  pageVaultOptions.style.display = 'none';
+  pageMyAccountOptions.style.display = 'none';
+
+  if (selectedValue === 'vault') {
+    pageVaultOptions.style.display = 'block';
+    return;
+  }
+  if (selectedValue === 'myaccount') {
+    pageMyAccountOptions.style.display = 'block';
     return;
   }
-
-  vaultOptions.style.display = 'none';
 };
 
 // Helper, To switch the options, depends on openService's view value for vault
-elements.openServiceOptionsElms.view.onchange = () => {
+elements.openServiceOptionsElms.vaultView.onchange = () => {
   const { openServiceOptionsElms } = elements;
-  const selectedValue = openServiceOptionsElms.view.options[openServiceOptionsElms.view.selectedIndex].value;
+  const selectedValue = openServiceOptionsElms.vaultView.options[openServiceOptionsElms.vaultView.selectedIndex].value;
 
   const vaultServicesElms = document.getElementsByClassName('vault-services');
   for (let indx = 0; indx < vaultServicesElms.length; indx++) {

diff --git a/src/api/__tests__/open-service.test.ts b/src/api/__tests__/open-service.test.ts
@@ -10,17 +10,32 @@ describe('api', () => {
     const open = (window.open = jest.fn());
     const clientId = 'clientId';
 
-    test('myaccount-settings', () => {
+    test('myaccount', () => {
       open.mockClear();
 
-      openService(new MtLinkSdk().storedOptions, 'myaccount-settings');
+      openService(new MtLinkSdk().storedOptions, 'myaccount');
 
       expect(open).toBeCalledTimes(1);
 
       const query = qs.stringify({
         configs: generateConfigs()
       });
-      const url = `${MY_ACCOUNT_DOMAINS.production}/settings/?${query}`;
+      const url = `${MY_ACCOUNT_DOMAINS.production}/?${query}`;
+
+      expect(open).toBeCalledWith(url, '_self', 'noreferrer');
+    });
+
+    test('myaccount/change-language', () => {
+      open.mockClear();
+
+      openService(new MtLinkSdk().storedOptions, 'myaccount', { view: 'settings/change-language' });
+
+      expect(open).toBeCalledTimes(1);
+
+      const query = qs.stringify({
+        configs: generateConfigs()
+      });
+      const url = `${MY_ACCOUNT_DOMAINS.production}/settings/change-language?${query}`;
 
       expect(open).toBeCalledWith(url, '_self', 'noreferrer');
     });
@@ -161,7 +176,7 @@ describe('api', () => {
         cobrandClientId
       });
 
-      openService(mtLinkSdk.storedOptions, 'myaccount-settings');
+      openService(mtLinkSdk.storedOptions, 'myaccount');
 
       expect(open).toBeCalledTimes(1);
 
@@ -171,7 +186,7 @@ describe('api', () => {
         locale,
         configs: generateConfigs()
       });
-      const url = `${MY_ACCOUNT_DOMAINS.production}/settings/?${query}`;
+      const url = `${MY_ACCOUNT_DOMAINS.production}/?${query}`;
 
       expect(open).toBeCalledWith(url, '_self', 'noreferrer');
     });

diff --git a/src/api/open-service.ts b/src/api/open-service.ts
@@ -28,7 +28,7 @@ export default function openService(
   }
 
   const { clientId, mode, cobrandClientId, locale } = storedOptions;
-  const { isNewTab, view, ...rest } = options;
+  const { isNewTab, view = '', ...rest } = options;
 
   const getQueryValue = (needStringify = true): string | QueryData => {
     const query: QueryData = {
@@ -90,8 +90,8 @@ export default function openService(
 
       break;
 
-    case 'myaccount-settings':
-      openWindow(`${MY_ACCOUNT_DOMAINS[mode]}/settings/${view || ''}?${getQueryValue()}`, getIsTabValue(isNewTab));
+    case 'myaccount':
+      openWindow(`${MY_ACCOUNT_DOMAINS[mode]}/${view}?${getQueryValue()}`, getIsTabValue(isNewTab));
       break;
 
     case 'link-kit':

diff --git a/src/typings.ts b/src/typings.ts
@@ -48,15 +48,7 @@ export type ConnectionSettingType = { view?: 'connection-setting'; credentialId:
 
 export type CustomerSupportType = { view?: 'customer-support' };
 
-export type MyAccountPageType = {
-  view?:
-    | 'authorized-applications'
-    | 'change-language'
-    | 'email-preferences'
-    | 'delete-account'
-    | 'update-email'
-    | 'update-password';
-};
+export type MyAccountPageType = { view?: LoginLinkTo };
 
 export type OpenServicesConfigsOptions = ConfigsOptions &
   (ServicesListType | ServiceConnectionType | ConnectionSettingType | CustomerSupportType | MyAccountPageType);
@@ -101,7 +93,7 @@ export type OnboardOptions = Omit<
   'authAction'
 >;
 
-export type ServiceId = string | 'vault' | 'myaccount-settings' | 'linkkit';
+export type ServiceId = string | 'vault' | 'myaccount' | 'linkkit';
 
 export type LoginLinkTo =
   | string