feat: flow config locales usage (#231)

descope · Aug 6, 2023 · 963c95f · 963c95f
1 parent 9d11e8c
commit 963c95f
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 10 deletions.
diff --git a/packages/web-component/README.md b/packages/web-component/README.md
@@ -61,6 +61,8 @@ DESCOPE_PROJECT_ID=<project-id>
 DESCOPE_FLOW_ID=<flow-id>
 # Optional - Descope base URL
 DESCOPE_BASE_URL
+# Optional - Descope locale (according to the target locales configured in the flow)
+DESCOPE_LOCALE=<locale>
 ```
 
 1. Run the sample `pnpm run start`
@@ -107,7 +109,9 @@ Usage example:
 
 ```javascript
 const descopeWcEle = document.getElementsByTagName('descope-wc')[0];
-descopeWcEle.addEventListener('error', (e) => alert(`Error! - ${e.detail.errorMessage}`));
+descopeWcEle.addEventListener('error', (e) =>
+  alert(`Error! - ${e.detail.errorMessage}`)
+);
 ```
 
 ### `success` - Fired when the flow is completed successfully. The event detail contains the flow result.
@@ -116,5 +120,7 @@ Usage example:
 
 ```javascript
 const descopeWcEle = document.getElementsByTagName('descope-wc')[0];
-descopeWcEle.addEventListener('success', (e) => alert(`Success! - ${JSON.stringify(e.detail)}`));
+descopeWcEle.addEventListener('success', (e) =>
+  alert(`Success! - ${JSON.stringify(e.detail)}`)
+);
 ```
diff --git a/packages/web-component/rollup.config.app.js b/packages/web-component/rollup.config.app.js
@@ -38,7 +38,8 @@ export default {
         contents
           .replace('<project-id>', process.env.DESCOPE_PROJECT_ID || '')
           .replace('<flow-id>', process.env.DESCOPE_FLOW_ID || 'sign-up-or-in')
-          .replace('<base-url>', process.env.DESCOPE_BASE_URL || ''),
+          .replace('<base-url>', process.env.DESCOPE_BASE_URL || '')
+          .replace('<locale>', process.env.DESCOPE_LOCALE || ''),
     }),
   ],
 };
diff --git a/packages/web-component/src/app/index.html b/packages/web-component/src/app/index.html
@@ -27,6 +27,7 @@
         project-id="<project-id>"
         flow-id="<flow-id>"
         base-url="<base-url>"
+        locale="<locale>"
         debug="true"
       ></descope-wc>
     </div>

diff --git a/packages/web-component/src/lib/descope-wc/BaseDescopeWc.ts b/packages/web-component/src/lib/descope-wc/BaseDescopeWc.ts
@@ -357,8 +357,8 @@ class BaseDescopeWc extends HTMLElement {
   }
 
   async getTargetLocales() {
-    const { projectConfig } = await this.#getConfig();
-    return (projectConfig?.targetLocales || []).map((locale: string) =>
+    const flowConfig = await this.getFlowConfig();
+    return (flowConfig?.targetLocales || []).map((locale: string) =>
       locale.toLowerCase()
     );
   }

diff --git a/packages/web-component/test/descope-wc.test.ts b/packages/web-component/test/descope-wc.test.ts
@@ -2433,7 +2433,11 @@ describe('web-component', () => {
       startMock.mockReturnValue(generateSdkResponse());
 
       configContent = {
-        targetLocales: ['en-US'],
+        flows: {
+          otpSignInEmail: {
+            targetLocales: ['en-US'],
+          },
+        },
       };
 
       pageContent = '<input id="email"></input><span>It works!</span>';
@@ -2472,7 +2476,11 @@ describe('web-component', () => {
       startMock.mockReturnValue(generateSdkResponse());
 
       configContent = {
-        targetLocales: ['de'],
+        flows: {
+          otpSignInEmail: {
+            targetLocales: ['de'],
+          },
+        },
       };
 
       pageContent = '<input id="email"></input><span>It works!</span>';
@@ -2511,7 +2519,11 @@ describe('web-component', () => {
       startMock.mockReturnValue(generateSdkResponse());
 
       configContent = {
-        targetLocales: ['en-US'],
+        flows: {
+          otpSignInEmail: {
+            targetLocales: ['en-US'],
+          },
+        },
       };
 
       Object.defineProperty(navigator, 'language', {
@@ -2560,7 +2572,11 @@ describe('web-component', () => {
       startMock.mockReturnValue(generateSdkResponse());
 
       configContent = {
-        targetLocales: ['de'],
+        flows: {
+          otpSignInEmail: {
+            targetLocales: ['de'],
+          },
+        },
       };
 
       Object.defineProperty(navigator, 'language', {
@@ -2609,7 +2625,11 @@ describe('web-component', () => {
       startMock.mockReturnValue(generateSdkResponse());
 
       configContent = {
-        targetLocales: ['en-US'],
+        flows: {
+          otpSignInEmail: {
+            targetLocales: ['en-US'],
+          },
+        },
       };
 
       const fn = fetchMock.getMockImplementation();