From 64034a2592ada78586dc23b63c0977a152bdc567 Mon Sep 17 00:00:00 2001
From: Bar Saar <bar@descope.com>
Date: Thu, 22 Aug 2024 12:52:19 +0300
Subject: [PATCH] chore: add style id to react sdk (#782)

## Related Issues
related https://github.com/descope/etc/issues/4875

## Related PRs
https://github.com/descope/descope-js/pull/744

## Description
- add styleId to react sdk
- add test
- add readme details

## Must

- [ ] Tests
- [ ] Documentation (if applicable)

---------

Signed-off-by: Bar Saar <bar@descope.com>
Co-authored-by: nirgur <nirgur@users.noreply.github.com>
---
 packages/sdks/react-sdk/README.md                |  5 +++++
 .../sdks/react-sdk/src/components/Descope.tsx    | 16 ++++++++++------
 packages/sdks/react-sdk/src/types.ts             |  2 ++
 .../react-sdk/test/components/Descope.test.tsx   | 10 ++++++++++
 packages/sdks/web-component/README.md            |  2 +-
 5 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/packages/sdks/react-sdk/README.md b/packages/sdks/react-sdk/README.md
index 830e61a0b..c0deb128f 100644
--- a/packages/sdks/react-sdk/README.md
+++ b/packages/sdks/react-sdk/README.md
@@ -153,6 +153,11 @@ const App = () => {
             // ...
             // logger={logger}
             // ...
+
+
+            // Use a custom style name or keep empty to use the default style.
+            // styleId="my-awesome-style"
+
         />
     )
 }
diff --git a/packages/sdks/react-sdk/src/components/Descope.tsx b/packages/sdks/react-sdk/src/components/Descope.tsx
index 67975d23b..0e82d555b 100644
--- a/packages/sdks/react-sdk/src/components/Descope.tsx
+++ b/packages/sdks/react-sdk/src/components/Descope.tsx
@@ -50,10 +50,11 @@ const DescopeWC = lazy(async () => {
       redirectUrl,
       client,
       form,
+      styleId,
       autoFocus,
       validateOnBlur,
     }) => (
-      <descope-wc
+	<descope-wc
         project-id={projectId}
         flow-id={flowId}
         base-url={baseUrl}
@@ -65,6 +66,7 @@ const DescopeWC = lazy(async () => {
         debug={debug}
         client={client}
         form={form}
+        style-id={styleId}
         redirect-url={redirectUrl}
         auto-focus={autoFocus}
         validate-on-blur={validateOnBlur}
@@ -92,6 +94,7 @@ const Descope = React.forwardRef<HTMLElement, DescopeProps>(
       autoFocus,
       validateOnBlur,
       errorTransformer,
+      styleId,
     },
     ref,
   ) => {
@@ -193,9 +196,9 @@ const Descope = React.forwardRef<HTMLElement, DescopeProps>(
        * it can be removed once this issue will be solved
        * https://bugs.chromium.org/p/chromium/issues/detail?id=1404106#c2
        */
-      <form>
-        <Suspense fallback={null}>
-          <DescopeWC
+	<form>
+		<Suspense fallback={null}>
+			<DescopeWC
             projectId={projectId}
             flowId={flowId}
             baseUrl={baseUrl}
@@ -210,14 +213,15 @@ const Descope = React.forwardRef<HTMLElement, DescopeProps>(
             telemetryKey={telemetryKey}
             redirectUrl={redirectUrl}
             autoFocus={autoFocus}
+            styleId={styleId}
             validateOnBlur={validateOnBlur}
             storeLastAuthenticatedUser={storeLastAuthenticatedUser}
             keepLastAuthenticatedUserAfterLogout={
               keepLastAuthenticatedUserAfterLogout
             }
           />
-        </Suspense>
-      </form>
+		</Suspense>
+	</form>
     );
   },
 );
diff --git a/packages/sdks/react-sdk/src/types.ts b/packages/sdks/react-sdk/src/types.ts
index 57a69bd97..69d54a8cc 100644
--- a/packages/sdks/react-sdk/src/types.ts
+++ b/packages/sdks/react-sdk/src/types.ts
@@ -88,6 +88,7 @@ export interface IContext {
   isSessionFetched: boolean;
   projectId: string;
   baseUrl?: string;
+  styleId?: string;
   baseStaticUrl?: string;
   storeLastAuthenticatedUser?: boolean;
   keepLastAuthenticatedUserAfterLogout?: boolean;
@@ -117,6 +118,7 @@ export type DescopeProps = {
   form?: Record<string, any>;
   // use to override client context in flow execution
   client?: Record<string, any>;
+  styleId?: string;
 };
 
 export type UserManagementProps = WidgetProps;
diff --git a/packages/sdks/react-sdk/test/components/Descope.test.tsx b/packages/sdks/react-sdk/test/components/Descope.test.tsx
index 58ad147ed..451e6aa04 100644
--- a/packages/sdks/react-sdk/test/components/Descope.test.tsx
+++ b/packages/sdks/react-sdk/test/components/Descope.test.tsx
@@ -252,4 +252,14 @@ describe('Descope', () => {
       );
     });
   });
+
+  it('should render web-component with style id when provided', async () => {
+    renderWithProvider(<Descope flowId="flow-1" styleId="test" />);
+    await waitFor(() => {
+      expect(document.querySelector('descope-wc')).toHaveAttribute(
+        'style-id',
+        'test',
+      );
+    });
+  });
 });
diff --git a/packages/sdks/web-component/README.md b/packages/sdks/web-component/README.md
index 5cac3bd9a..621fce31c 100644
--- a/packages/sdks/web-component/README.md
+++ b/packages/sdks/web-component/README.md
@@ -81,7 +81,7 @@ NOTE: This package is a part of a monorepo. so if you make changes in a dependen
 | storage-prefix                            | **String** - A prefix to add to the key of the local storage when persisting tokens                                                                                                                                                        | **""**        |
 | store-last-authenticated-user             | **"true"** - Stores last-authenticated user details in local storage when flow is completed</br>**"false"** - Do not store last-auth user details. Disabling this flag may cause last-authenticated user features to not function properly | **"true"**    |
 | keep-last-authenticated-user-after-logout | **"true"** - Do not clear the last authenticated user details from the browser storage after logout</br>**"false"** - Clear the last authenticated user details from the browser storage after logout                                      | **"false"**   |
-|                                           |                                                                                                                                                                                                                                            |               |
+| style-id                                  | **"String"** - Set a specific style to load rather then the default style                                                                                                                                                             | **""**        |
 
 ## Optional Properties