fansunited-frontend-components 0.0.7 → 0.0.8

package/README.md

@@ -383,6 +383,171 @@ import { WidgetTemplate } from "fansunited-frontend-core";
 />
 ```
 
+### PollVote
+
+Interactive poll voting component with real-time results, multiple choice support, and customizable templates. Perfect for engaging audiences with opinion polls, surveys, and voting campaigns.
+
+**Key Features:**
+- Single and multiple choice voting
+- Real-time vote results and percentages
+- Three responsive templates (Standard, Split, Overlay)
+- Lead collection integration
+- Authentication support
+- Vote attempt limits
+- Custom theming and branding
+
+#### Required Props
+
+| Prop       | Type                 | Description             |
+| ---------- | -------------------- | ----------------------- |
+| `entityId` | `string`             | Classic Quiz identifier |
+| `sdk`      | `FansUnitedSDKModel` | SDK instance            |
+| `template` | `WidgetTemplate`     | Layout template         |
+| `language` | `LanguageType`       | Display language        |
+
+#### Optional Props
+
+| Prop                         | Type                 | Description                                 |
+| ---------------------------- | -------------------- | ------------------------------------------- |
+| `themeOptions`               | `CustomThemeOptions` | Theme configuration                         |
+| `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
+
+```tsx
+import { WidgetTemplate, PollVoteProps } from "fansunited-frontend-core";
+
+// Standard template with optional image positioning
+const standardProps: PollVoteProps = {
+  template: WidgetTemplate.STANDARD,
+  imagePosition: "left", // or 'right'
+  // ... other props
+};
+
+// Split template - side-by-side layout
+const splitProps: PollVoteProps = {
+  template: WidgetTemplate.SPLIT,
+  // imagePosition not available for non-standard templates
+  // ... other props
+};
+
+// Overlay template - full-screen immersive experience
+const overlayProps: PollVoteProps = {
+  template: WidgetTemplate.OVERLAY,
+  // ... other props
+};
+```
+
+#### Sign in Configuration
+
+Control user authentication and voting permissions using the `userIsLoggedIn` and `signInCTA` props.
+
+```tsx
+import { SignInCTADetails } from "fansunited-frontend-core";
+
+// Custom sign-in component
+const signInCTA: SignInCTADetails = {
+  component: <CustomSignInButton />
+};
+
+// Basic sign-in with onClick handler
+const signInCTA: SignInCTADetails = {
+  defaultLabel: "Sign in to vote",
+  onClick: () => {
+    // Handle sign-in logic
+    console.log("Sign in clicked");
+  }
+};
+
+// Sign-in with URL navigation
+const signInCTA: SignInCTADetails = {
+  defaultLabel: "Login to participate",
+  url: "https://your-auth-provider.com/login",
+  target: "_blank"
+};
+
+<PollVote
+  {...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 poll requires authentication (`authRequirement: "REGISTERED"`), the sign-in screen will be displayed instead of the poll
+
+#### Lead Collection
+
+Capture user information before or after voting:
+
+```tsx
+import { LeadsOptions } from "fansunited-frontend-core";
+
+const leads: LeadsOptions = {
+  position: "before", // "before" | "after"
+  fields: ["fullName", "email"], // Available: "fullName" | "firstName" | "lastName" | "email" | "gender" | "country" | "phoneCountryCode" | "phoneNumber"
+  campaignId: "poll-campaign-2024",
+  campaignName: "User Opinion Poll",
+  phoneCountryCode: "44", // Default country code for phone fields
+};
+
+<PollVote {...otherProps} leads={leads} />;
+```
+
+#### Examples
+
+##### Basic Poll
+
+```tsx
+import { PollVote } from "fansunited-frontend-components";
+import { WidgetTemplate } from "fansunited-frontend-core";
+
+<PollVote
+  entityId="poll-123"
+  sdk={sdkInstance}
+  template={WidgetTemplate.STANDARD}
+  language="en"
+/>;
+```
+
+##### Customized Poll
+
+```tsx
+<PollVote
+  entityId="poll-123"
+  sdk={sdkInstance}
+  template={WidgetTemplate.OVERLAY}
+  language="en"
+  userIsLoggedIn={false}
+  signInCTA={{
+    defaultLabel: "Sign in to vote",
+    onClick: () => handleSignIn(),
+  }}
+  leads={{
+    position: "after",
+    fields: ["fullName", "email"],
+    campaignId: "poll-campaign",
+    campaignName: "User Survey 2024",
+    phoneCountryCode: "44",
+  }}
+  themeOptions={{
+    mode: "dark",
+  }}
+/>
+```
+
 #### Related Packages
 
 - [`fansunited-frontend-core`](https://www.npmjs.com/package/fansunited-frontend-core) - Core types and utilities

package/components.d.ts

@@ -1,4 +1,5 @@
-import { ClassicQuizPlayProps } from 'fansunited-frontend-core';
+import { ClassicQuizPlayProps, PollVoteProps } from 'fansunited-frontend-core';
 
 export declare const ClassicQuizPlay: React.FC<ClassicQuizPlayProps>;
+export declare const PollVote: React.FC<PollVoteProps>;
 //# sourceMappingURL=components.d.ts.map

package/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/components.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAIhE,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CACjC,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/components.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAI/E,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CACjC,CAAC;AAE3B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAAqB,CAAC"}