fansunited-frontend-components 0.0.59 → 0.0.60

package/README.md

@@ -3344,16 +3344,17 @@ import { Leaderboard } from "fansunited-frontend-components";
 
 ### Predictor
 
-Full-featured football score predictor component with a multi-tab interface for match predictions, global leaderboard, private leagues, game rules, and prizes. Designed as a season-long engagement tool for sports platforms.
+Football score predictor component with two templates: the default **multi-tab** interface (match predictions, global leaderboard, private leagues, game rules, and prizes) for a season-long engagement tool, and **`embed`** — a compact single-match card designed to sit inside an article.
 
 **Key Features:**
 
-- Multi-tab navigation: Play, Leaderboard, Private Leagues, Rules, and Prizes
+- Two templates: `"standard"` (multi-tab) and `"embed"` (single-match article card) — see [Templates](#predictor-templates)
+- Multi-tab navigation: Play, Leaderboard, Private Leagues, Rules, and Prizes (`"standard"` only)
 - Match score prediction interface with grouped matchweeks
 - Global leaderboard with paginated standings and user rank highlighting
 - Private leagues — create and join custom competitive groups
 - Consent management with required/optional consent gates before predicting
-- Customisable banners in 6 positions within the Play tab
+- Customisable banners in 6 positions within the Play tab (`"standard"` only)
 - Authentication-aware UI with configurable sign-in CTA
 - Built-in Betslip integration — renders the Betslip widget automatically via the `betslip` prop with two trigger modes
 - Custom theming and multi-language support
@@ -3368,20 +3369,77 @@ Full-featured football score predictor component with a multi-tab interface for
 
 #### Optional Props
 
-| Prop                         | Type                 | Description                                         |
-| ---------------------------- | -------------------- | --------------------------------------------------- |
-| `themeOptions`               | `CustomThemeOptions` | Theme configuration                                 |
-| `userIsLoggedIn`             | `boolean`            | Determine if the user is logged in (default: false) |
-| `signInCTA`                  | `SignInCTADetails`   | Sign in call to action button configuration         |
-| `tabs`                       | `PredictorTab[]`     | Tabs to enable (default: all tabs)                  |
-| `defaultImagePlaceholderUrl` | `string`             | Fallback image URL for the hero header              |
-| `playTabBanners`             | `PlayTabBanner[]`    | Custom banners rendered in the Play tab             |
-| `consents`                   | `ConsentDef[]`       | Consent definitions required before predicting      |
-| `matchCardBgImageUrl`        | `string`                 | Background image URL for match prediction cards                                              |
-| `betslip`                    | `PredictorBetslipConfig` | Betslip integration config. Omit to disable. See [Betslip Integration](#betslip-integration) |
+| Prop                         | Type                     | Description                                                                                     |
+| ----------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------ |
+| `template`                    | `PredictorTemplateType`  | `"standard"` (default) or `"embed"`. See [Templates](#predictor-templates)                       |
+| `embed`                       | `PredictorEmbedConfig`   | Only read when `template === "embed"`. See [Templates](#predictor-templates)                     |
+| `themeOptions`                | `CustomThemeOptions`     | Theme configuration                                                                               |
+| `userIsLoggedIn`              | `boolean`                | Determine if the user is logged in (default: false)                                               |
+| `signInCTA`                   | `SignInCTADetails`       | Sign in call to action button configuration                                                       |
+| `tabs`                        | `PredictorTab[]`         | Tabs to enable (default: all tabs). Ignored by `"embed"`                                          |
+| `defaultImagePlaceholderUrl`  | `string`                 | Fallback image shown when the template has no `image` configured. Used by both templates          |
+| `playTabBanners`              | `PlayTabBanner[]`        | Custom banners rendered in the Play tab. Ignored by `"embed"`                                     |
+| `consents`                    | `ConsentDef[]`           | Consent definitions required before predicting                                                    |
+| `matchCardBgImageUrl`         | `string`                 | Background image URL for match prediction cards. Ignored by `"embed"`                             |
+| `betslip`                     | `PredictorBetslipConfig` | Betslip integration config. Omit to disable. See [Betslip Integration](#betslip-integration)      |
+
+#### Predictor Templates
+
+```ts
+type PredictorTemplateType = "standard" | "embed";
+```
+
+| Template | Use case |
+| --- | --- |
+| `"standard"` (default) | The full multi-tab interface — Play, Leaderboard, Private Leagues, Rules, Prizes. |
+| `"embed"` | A single upcoming match rendered as a compact card, meant to be dropped inside an article. No tabs, no leaderboard. |
+
+Unlike the shared `WidgetTemplate` enum used by most other components, Predictor's `template` is a plain string union — it isn't part of the standard/split/overlay family, and `"embed"` has its own config object:
+
+```ts
+interface PredictorEmbedConfig {
+  imagePosition?: "left" | "right"; // default: "right" — description takes the other side
+  matchId?: string; // pin a specific match; otherwise the soonest upcoming match across the whole template is used
+  successMessage?: {
+    title?: string;
+    description?: string;
+    cta: OnSuccessCTADetails; // required — priority is onClick → url (no `component` support here)
+  };
+}
+```
+
+**Embed layout:** a gradient background (top to bottom, from the theme's primary color) wraps a branding/title/description block next to an optional image (position set by `imagePosition`), a white match card with team crests and centered score steppers showing the always-visible full 1X2 odds market, and a fixed-size submit button below the card. When `embed.successMessage` is configured, submitting a prediction swaps that button for the same-styled CTA button (using `successMessage.cta`) followed by a success alert with a pop-in animation; omit `successMessage` to show nothing extra after submission.
+
+```tsx
+import { Predictor } from "fansunited-frontend-components";
+import { PredictorProps } from "fansunited-frontend-core";
+
+const embedProps: PredictorProps = {
+  entityId: "predictor-template-123",
+  sdk,
+  language: "en",
+  template: "embed",
+  embed: {
+    imagePosition: "left",
+    successMessage: {
+      title: "Prediction submitted!",
+      description: "Keep playing for a chance to win amazing prizes.",
+      cta: {
+        defaultLabel: "Play Now",
+        url: "https://your-site.com/predictor",
+        target: "_blank",
+      },
+    },
+  },
+};
+
+<Predictor {...embedProps} />;
+```
 
 #### Tabs
 
+> Applies to `template="standard"` only.
+
 Configure which tabs are visible using the `tabs` prop. All tabs are enabled by default.
 
 ```tsx
@@ -3583,12 +3641,15 @@ Import types from `fansunited-frontend-core`:
 import {
   PredictorProps,
   PredictorTab,
+  PredictorTemplateType,
+  PredictorEmbedConfig,
   PredictorBetslipConfig,
   PredictorBetslipTrigger,
   PlayTabBanner,
   PlayTabBannerPosition,
   ConsentDef,
   SignInCTADetails,
+  OnSuccessCTADetails,
   CustomThemeOptions,
   LanguageType,
 } from "fansunited-frontend-core";
@@ -3722,6 +3783,33 @@ Selections are sent only when the user explicitly clicks an odds button on the p
 />
 ```
 
+##### Embed (Article)
+
+A single-match card meant to sit inside an article, instead of the full multi-tab experience. See [Predictor Templates](#predictor-templates).
+
+```tsx
+<Predictor
+  entityId="predictor-template-123"
+  sdk={sdkInstance}
+  language="en"
+  userIsLoggedIn={true}
+  template="embed"
+  embed={{
+    imagePosition: "right",
+    successMessage: {
+      title: "Prediction submitted!",
+      description: "Keep playing for a chance to win amazing prizes.",
+      cta: {
+        defaultLabel: "Play Now",
+        url: "https://your-site.com/predictor",
+        target: "_blank",
+      },
+    },
+  }}
+  themeOptions={{ mode: "light" }}
+/>
+```
+
 ---
 
 ### TopX

package/index.js

@@ -19,7 +19,7 @@ import "./chunks/PrizeCard-C4uB4BtX.js";
 import "react/jsx-runtime";
 import "react-dom";
 typeof window < "u" && (window.fansUnitedComponentsVersions = {
-  components: "0.0.59",
+  components: "0.0.60",
   core: o
 });
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fansunited-frontend-components",
-  "version": "0.0.59",
+  "version": "0.0.60",
   "description": "Various user centric components for Fans United features",
   "type": "module",
   "main": "index.js",
@@ -64,7 +64,7 @@
     }
   },
   "dependencies": {
-    "fansunited-frontend-core": "0.0.59",
+    "fansunited-frontend-core": "0.0.60",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },