fansunited-frontend-components 0.0.4 → 0.0.5

package/README.md

@@ -31,7 +31,7 @@ const App: React.FC = () => {
     entityId: "your-quiz-id",
     sdk,
     template: WidgetTemplate.STANDARD, // Also SPLIT and OVERLAY templates are available
-    language: "en", // "bg" | "en" | "ro" | "pt" | "sr" | "fr" | "de" | "it" | "fr-be" | "fr" | "pl" | "pt" | "pt-br"
+    language: "en", // "bg" | "en" | "ro" | "pt" | "sr" | "fr" | "de" | "it" | "fr-be" | "fr" | "pl" | "pt" | "pt-br" | "sk
   };
 
   return (
@@ -62,13 +62,15 @@ Interactive quiz component with multiple templates and customization options.
 
 #### Optional Props
 
-| Prop                         | Type                 | Description                             |
-| ---------------------------- | -------------------- | --------------------------------------- |
-| `themeOptions`               | `CustomThemeOptions` | Theme configuration                     |
-| `showAnswerExplanations`     | `boolean`            | Show explanations after quiz completion |
-| `leads`                      | `LeadsOptions`       | Lead collection settings                |
-| `imagePosition`              | `"left" \| "right"`  | Image position (STANDARD template only) |
-| `defaultImagePlaceholderUrl` | `string`             | URL for default image placeholder       |
+| Prop                         | Type                 | Description                                 |
+| ---------------------------- | -------------------- | ------------------------------------------- |
+| `themeOptions`               | `CustomThemeOptions` | Theme configuration                         |
+| `showAnswerExplanations`     | `boolean`            | Show explanations after quiz completion     |
+| `leads`                      | `LeadsOptions`       | Lead collection settings                    |
+| `imagePosition`              | `"left" \| "right"`  | Image position (STANDARD template only)     |
+| `defaultImagePlaceholderUrl` | `string`             | URL for default image placeholder           |
+| `userIsLoggedIn`             | `boolean`            | Determine if the user is logged in          |
+| `signInCTA`                  | `SignInCTADetails`   | Sign in call to action button configuration |
 
 #### Templates
 
@@ -272,6 +274,52 @@ const leads: LeadsOptions = {
 <ClassicQuizPlay {...otherProps} leads={leads} />;
 ```
 
+#### Sign in Configuration
+
+Control user authentication and sign-in behavior using the `userIsLoggedIn` and `signInCTA` props.
+
+```tsx
+import { SignInCTADetails } from "fansunited-frontend-core";
+
+// Basic sign-in with onClick handler
+const signInCTA: SignInCTADetails = {
+  defaultLabel: "Sign In",
+  onClick: () => {
+    // Handle sign-in logic
+    console.log("Sign in clicked");
+  }
+};
+
+// Sign-in with URL navigation
+const signInCTA: SignInCTADetails = {
+  defaultLabel: "Login",
+  url: "https://your-auth-provider.com/login",
+  target: "_blank" // or "_self"
+};
+
+// Custom sign-in component
+const signInCTA: SignInCTADetails = {
+  component: <CustomSignInButton />
+};
+
+<ClassicQuizPlay
+  {...otherProps}
+  userIsLoggedIn={false}
+  signInCTA={signInCTA}
+/>
+```
+
+**Sign-in Priority Order:**
+
+1. **Custom Component** - If `signInCTA.component` is provided, it will be rendered
+2. **Click Handler** - If `signInCTA.onClick` is provided, a button with the handler will be rendered
+3. **URL Navigation** - If `signInCTA.url` is provided, a button will be rendered and clicking will navigate to the URL
+4. **Disabled** - If no `signInCTA` is provided, a disabled button will be shown
+
+**Behavior:**
+
+- When `userIsLoggedIn` is `false` and the quiz requires authentication (`authRequirement: "REGISTERED"`), the sign-in screen will be displayed instead of the quiz
+
 #### TypeScript Support
 
 This package is built with TypeScript and provides full type definitions. Import types from `fansunited-frontend-core`: