diff --git a/packages/web-component/README.md b/packages/web-component/README.md index 491a5a962..ce9513349 100644 --- a/packages/web-component/README.md +++ b/packages/web-component/README.md @@ -61,6 +61,8 @@ DESCOPE_PROJECT_ID= DESCOPE_FLOW_ID= # Optional - Descope base URL DESCOPE_BASE_URL +# Optional - Descope locale (according to the target locales configured in the flow) +DESCOPE_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 index ead49e034..002392a27 100644 --- a/packages/web-component/rollup.config.app.js +++ b/packages/web-component/rollup.config.app.js @@ -38,7 +38,8 @@ export default { contents .replace('', process.env.DESCOPE_PROJECT_ID || '') .replace('', process.env.DESCOPE_FLOW_ID || 'sign-up-or-in') - .replace('', process.env.DESCOPE_BASE_URL || ''), + .replace('', process.env.DESCOPE_BASE_URL || '') + .replace('', process.env.DESCOPE_LOCALE || ''), }), ], }; diff --git a/packages/web-component/src/app/index.html b/packages/web-component/src/app/index.html index f8341dfc5..189a7d1db 100644 --- a/packages/web-component/src/app/index.html +++ b/packages/web-component/src/app/index.html @@ -27,6 +27,7 @@ project-id="" flow-id="" base-url="" + locale="" debug="true" > diff --git a/packages/web-component/src/lib/descope-wc/BaseDescopeWc.ts b/packages/web-component/src/lib/descope-wc/BaseDescopeWc.ts index b9c40f14e..3ec260192 100644 --- 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 index 46d79c8b1..9786fc04f 100644 --- 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 = 'It works!'; @@ -2472,7 +2476,11 @@ describe('web-component', () => { startMock.mockReturnValue(generateSdkResponse()); configContent = { - targetLocales: ['de'], + flows: { + otpSignInEmail: { + targetLocales: ['de'], + }, + }, }; pageContent = 'It works!'; @@ -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();