Top X management
Welcome to Fans United Top X Management Widget. The widget allows staff members with sufficient permissions to create new games/editions. You can use this widget as it is and embed it in your platform, or you can use the Management Panel to create games. Top X is a game where users must predict a specified number of correct scores for a prize. With successfull installiation, you can create and edit a Top X game or see the report about specific game.
Installation and usage
The easiest way to use fansunited-widget-top-x-management is to install it from npm as follows:
npm install fansunited-widget-top-x
or:
yarn add fansunited-widget-top-x
Here is an example how you can integrate Fans United Top X Management Widget:
import 'fansunited-widget-top-x/style.css';
import { TopXManager } from 'fansunited-widget-top-x';
const App = () => {
return (
<TopXManager
fansUnitedApiKey={'your-api-key'}
fansUnitedClientId={'your-client-id'} />
);
}
Notes
-
The widget is bundled as a React component and its usage is as simple as the above example
-
Don't worry about your project's CSS. The widget's styling is done with Tailwind CSS and all classes are prefixed to avoid collisions with your existing CSS. This means that the widget's CSS will NOT affect yours. One important thing is that you need to import
style.css
file from package folder:
import 'fansunited-widget-top-x/style.css';
N.B: If you are using an entry point for importing all your stylings, you need to import fansunited-widget-top-x/style.css
there as well
- Easy translation in every language. For more information check our Translation heading.
Props
type TopXManagerProps = {
fansUnitedApiKey: string;
fansUnitedClientId: string;
fansUnitedLanguage?: string;
fansUnitedEnvironment?: string;
labels?: LabelsModel;
sportal365Project?: string;
sportal365Infrastructure?: 'shared' | 'betway';
};
Fans United Top X Management Widget depends on Fans United JS SDK and Fans United Client API. Thats why fansUnitedApiKey
and fansUnitedClientId
are required. They will be provided to you from Fans United team. For other optional props here is some information:
-
fansUnitedLanguage
- for our sports APIs FansUnited platform supports different languages. For now they are Bulgarian (bg), English (en) and Romanian (ro). If no value given it will be set to English (en). -
fansUnitedEnvironment
- You can run the widget in the following environments: staging, production and watg. If no value given it will be set to production (prod). -
labels
- you can easily translate all labels, UI messages, descriptions, placeholders and etc. with this prop. By default, Fans United Match Quiz Management Widget is available in English so if no value is given, the widget will be translated in English. -
sportal365Project
- The Sportal365 project. Used as a request header when communicating with Sportal365 APIs. -
sportal365Infrastructure
- The Sportal365 infrastructure. Used to determine what authorization should be used when communicating with Sportal365 APIs. If no value given (when sportal365Project props is provided) it will be set to shared .
Translation
You can easily translate Fans United Top X Management Widget in your language! You just need to pass an object to labels
prop with concrete keys and values and that's it! Here's an example how you can do it:
import 'fansunited-widget-top-x/style.css';
import { TopXManager } from 'fansunited-widget-top-x';
const labels = {
userNotFound: 'User not found. Please try again.',
clientConfigErrorMessage: "There was a problem fetching client's configuration. Please check again your API key and client ID. For more information contact Fans United staff.",
noGamesFound: "No games were found. You can create a game by clicking the button 'Create game'",
createEdition: 'Create game',
signOut: 'Sign out',
name: 'Name',
status: 'Status',
participants: 'Participants',
creationDate: 'Created at',
acceptUntil: 'Accept Until',
actions: 'Actions',
upcoming: 'Upcoming',
inProgress: 'In progress',
finished: 'Finished',
pending: 'Pending',
settled: 'Settled',
live: 'Live',
open: 'Open',
canceled: 'Canceled',
closed: 'Closed',
edit: 'Edit',
report: 'Report',
timeFormat: 'DD-MM-YYYY, HH:mm',
previous: 'Previous',
next: 'Next',
id: "ID",
namePlaceholder: 'Please provide a name for your Top X edition.',
description: 'Description',
descriptionPlaceholder: 'Please describe your game.',
matchSelection: 'Match selection',
matchSelectionDescription: 'Select a number of matches to include in your game.',
matchNumber: 'Match Number',
selectTeamPlaceholder: 'Type your team...',
selectTeamNoTeamFound: 'No Team Found',
selectTeamNoMatchesFound: 'No matches were found',
gameStatus: 'Game status',
createGameStatusDescription: 'The provided choices are PENDING and OPEN. Keep in mind that if you choose OPEN you can NOT edit your game.',
editGameStatusDescription: 'The provided choices are PENDING, OPEN and CANCELED. Keep in mind that if you choose OPEN you can NOT edit your game anymore and if you choose CANCELED the game will be canceled.',
timeTiebreaker: 'Time tiebreaker',
timeTiebreakerDescription: "When enabled the game's leaderboard will have a classic user ranking (1,2,3). In case of same points and golden goal, the user who placed their predictions eariler will be infront. When disabled the current game's leaderboard behavour is used - the golden goal tiebreaker is used and when 2 or more people have the same golden goal, the ranking will be 1,1,3,4,5,5,7,8.",
enabled: 'Enabled',
disabled: 'Disabled',
rules: 'Rules',
rulesDescription: 'Describe your rules for participating in the game.',
adContent: 'Ad content',
adContentDescription: 'Place your ad content in the game.',
flags: 'Flags',
flagsPlaceholder: 'Type your flag and hit enter',
repeatedValueMessage: 'You have entered a repeated value. Please enter a different one.',
images: "Images",
mainImage: "Main",
coverImage: "Cover",
mobileImage: "Mobile",
imagePlaceholder: "Paste your image as valid URL or as relative path",
related: "Related",
relatedDescription: "Choose which games or templates you wish to be related to this game.",
games: "Games",
gamesPlaceholder: "Select which games (TOP_X and MATCH_QUIZ) are related to this game",
templates: "Templates",
templatesPlaceholder: "Select which templates are related to this game",
cutoffTime: 'Cutoff time',
cutoffTimeDescriptionOnCreate: 'Predictions will be accepted until this time. If not provided it will be automatically generated 15 minutes from the first match played.',
cutoffTimeDescriptionOnEdit: "Predictions will be accepted until this time. Keep in mind that this field SHOUT NOT be empty.",
addFixture: 'Add fixture',
removeFixture: 'Remove fixture',
back: 'Back',
loadMore: "Load more",
exportButton: "Export",
reportFor: 'Report for',
position: 'Position',
points: 'Points',
gameNotSettledMessage: 'Not all matches have been played and therefore no points awarded yet. Please come back after the matches finish to see the leaderboard.',
csvModalTitle: 'Enter how many users should be exported',
csvModalDescription: 'Download a .csv file with the first 100 number of users.',
csvModalPlaceholder: 'Export the first X users...',
cancel: 'Cancel',
csvModalDownloadButton: 'Download as CSV file',
csvModalValidationMessage: 'Input value has to be an integer number between 1 and 100',
csvModalErrorMessage: "There was a problem with fetching game's report data",
clear: 'Clear',
loadingMessage: 'Loading...',
createGameMessage: 'You have successfully created a game.',
editGameMessage: 'You have successfully edited a game.',
clearCutoffMessage: 'You have cleared your cutoff time.',
minFixturesMessage: 'There is a requirement how many minimum fixtures you need to provide to create/update game and it is:',
sameChosenMatchMessage: 'Some of selected matches are repeating',
invalidCutoffTimeMessage: 'Some of the provided matches start before cutoff time. Please choose cutoff time that is before the earliest match kickoff time.',
createGameErrorMessage: 'There was a problem with creating the game. Please try again.',
editGameErrorMessage: 'There was a problem with editing the game. Please try again.',
leaderboardErrorMessage: 'There was a problem with displaying leaderboard. Please try again.',
gamePredictionsErrorMessage: 'There was a problem with getting predictions for users. Please try again.',
manageWinners: 'Manage winners',
winners: 'Winners',
title: 'Title',
addWinner: 'Add winner',
removeWinner: 'Remove winner',
winnersDescription: 'Describe the winners...',
winner: 'Winner',
winnerDescription: 'Select the winner of the game',
insertWinners: 'Insert winners',
insertWinnersDescription: 'Type information about each winner of the game.',
note: 'Note',
notePlaceholder: 'Provide some note for the winner...',
tags: 'Tags',
tagsPlaceholder: 'Provide tags for the winner...',
save: 'Save',
preview: 'Preview',
gameWinnersErrorMessage: 'There was a problem with fetching information about game winners. Please try again.',
createGameWinnersMessage: 'You have successfully created winners for the game.',
createGameWinnersErrorMessage: 'There was a problem with creating winners for the game. Please try again.',
editGameWinnersMessage: 'You have successfully edited winners for the game.',
editGameWinnersErrorMessage: 'There was a problem with editing winners for the game. Please try again.',
gameNoSetWinnersMessage: 'No winners are set for this game.',
leaderboardNotAvailable: 'No leaderboard is available for this game.',
positionAndWinnerRequiredMessage: 'Position and winner are required!',
sameChosenWinnerMessage: 'You have selected same winners. Each winner has to be unique!',
gameMarket: 'Game market',
gameMarketDescription: `The available choices are CORRECT_SCORE and CORRECT_SCORE_ADVANCED. Keep in mind that you can edit the market option only when the game is in PENDING status.`,
marketCorrectScore: 'Correct score',
marketCorrectScoreAdvanced: 'Advanced correct score',
relatedEntitiesErrorMessage: "There was a problem with fetching entities. Please try again.",
labelsHeading: 'Labels',
customFields: 'Custom fields',
dynamicFieldsDescription: 'You can create your custom records for easier way to connect your game.',
keyDynamicFields: 'Key',
valueDynamicFields: 'Value',
addRecord: 'Add record',
dynamicFieldsKeysErrorMessage: 'Only lowercase letters, numbers and underscore are accepted as keys!',
gameByIdErrorMessage: 'There was a problem retrieving full information about the game.',
generateSignedInUrlErrorMessage: 'There was a problem generating signed in URL to store the image in bucket. Please try again',
uploadingImageMessage: 'You have successfully uploaded image',
uploadingImageErrorMessage: 'There was a problem with uploading image to bucket. Please try again',
encryptingImageErrorMessage: 'There was a problem with encrypting image before uploading it to bucket. Please try again',
searchSportal365ImagesErrorMessage: 'There was a problem with searching images from Sportal 365 API. Please try again',
searchImage: 'Search image',
clearFromToFilterSportal365ImagesMessage: 'You have cleared from/to filter for Sportal365 search images',
hideFilters: 'Hide filters',
showFilters: 'Show filters',
dateFromTo: 'Date from/to',
dateFromToPlaceholder: 'Select Date...',
noImagesFound: 'No images found'
};
const App = () => {
return (
<TopXManager
fansUnitedApiKey={'your-api-key'}
fansUnitedClientId={'your-client-id'}
labels={labels}/>
);
}
Here is all information about LabelsModel
:
Key | Description | Default Value |
---|---|---|
userNotFound | On login screen when client gives invalid information about email or password. | User not found. Please try again. |
clientConfigErrorMessage | react-toastify error message when client is providing invalid value to fansUnitedApiKey or fansUnitedClientId prop. | There was a problem fetching client's configuration. Please check again your API key and client ID. For more information contact Fans United staff. |
noGamesFound | When there are no created games for specific client, this message will appear on screen. | No games were found. You can create a game by clicking the button 'Create game'. |
createEdition | Used as label on create button and as a title on screen when creating a game. | Create game |
signOut | Used as label on sign out button. | Sign out |
manageWinners | Used as label in Winners screen heading. | Manage winners |
name | Label for name of a game | Name |
status | Displayed in header of list of games. Status of a game | Status |
participants | Displayed in header of list of games. Count of users who have participated in the game | Participants |
creationDate | Displayed in header of list of games. Date of created game in same format as given for timeFormat prop | Created at |
acceptUntil | Displayed in header of list of games. Date of predictions cutoff in same format as given for timeFormat prop | Accept until |
actions | Displayed in header of list of games. Two icon buttons with different actions. | Actions |
upcoming | Status of match for fixture | Upcoming |
inProgress | Status of match for fixture | In progress |
finished | Status of match for fixture | Finished |
pending | Status for specific game. | Pending |
settled | Status for specific game. | Settled |
live | Status for specific game. | Live |
open | Status for specific game. | Open |
canceled | Status for specific game. | Canceled |
closed | Status for specific game. | Closed |
edit | Used as label on edit button, as a title on screen when editing a game and as a placeholder for icon button edit. | Edit |
report | Placeholder for icon button report. | Report |
winners | Placeholder for icon button winners. | Winners |
timeFormat | Timeformat for displaying dates. Widgets uses dayjs as a date dependency. | DD.MM.YYYY, HH:mm |
previous | Label for pagination button. | Previous |
next | Label for pagination button. | Next |
id | Label for ID read only input field. | ID |
namePlaceholder | Placeholder/desciption about input field for game name when creating/editing a game. | Please provide a name for your Top X edition. |
title | Label in Winners screen heading | Title |
description | Title for desciption input field when creating/editing a game. | Description |
descriptionPlaceholder | Placeholder/desciption about input field for game description when creating/editing a game. | Please describe your game. |
matchSelection | Title for match selection section | Match selection |
matchSelectionDescription | Description about match selection section | Select a number of matches to include in your game. |
matchNumber | Title when you are adding a fixture | Match Number |
selectTeamPlaceholder | Placeholder for option search input field | Type your team... |
selectTeamNoTeamFound | When you insert a name of a team that does not support your competition scope given by your features in Client API | No Team Found |
selectTeamNoMatchesFound | When you choose a team from your search result, but it next 5 matches does not support your competition scope given by your features in Client API | No matches were found |
gameMarket | Title for choosing a game market. | Game market |
gameMarketDescription | Description about game market. | The available choices are CORRECT_SCORE and CORRECT_SCORE_ADVANCED. Keep in mind that you can edit the market option only when the game is in PENDING status. |
marketCorrectScore | Label for market correct score. | Correct score |
marketCorrectScoreAdvanced | Label for market correct score advanced. | Advanced correct score |
gameStatus | Title for choosing a game status. | Game status |
createGameStatusDescription | Description about choosing a game status.This will be displayed when you CREATE a game! | The provided choices are PENDING and OPEN. Keep in mind that if you choose OPEN you can NOT edit your game. |
editGameStatusDescription | Description about choosing a game status.This will be displayed when you EDIT a game! | The provided choices are PENDING, OPEN and CANCELED. Keep in mind that if you choose OPEN you can NOT edit your game anymore and if you choose CANCELED the game will be canceled. |
timeTiebreaker | Title for choosing a time tiebreaker option. | Time tiebreaker |
timeTiebreakerDescription | Description for choosing a time tiebreaker option. | When enabled the game's leaderboard will have a classic user ranking (1,2,3). In case of same points and golden goal, the user who placed their predictions eariler will be infront. When disabled the current game's leaderboard behavour is used - the golden goal tiebreaker is used and when 2 or more people have the same golden goal, the ranking will be 1,1,3,4,5,5,7,8. |
enabled | Value for enabled option for time tiebreaker. | Enabled |
disabled | Value for disabled option for time tiebreaker. | Disabled |
rules | Title for choosing game rules. | Rules |
rulesDescription | Description for choosing game rules. | Describe your rules for participating in the game. |
adContent | Title for game's ad content. | Ad content |
adContentDescription | Description for game's ad content. | Place your ad content in the game. |
flags | Title for choosing game flags. | Flags |
flagsPlaceholder | Placeholder on input field for game flags | Type your flag and hit enter |
repeatedValueMessage | react-toastify warning message when client submits same flag. | You have entered a repeated value. Please enter a different one. |
images | Title for images container. | Images |
mainImage | Title for main image. | Main |
coverImage | Title for cover image. | Cover |
mobileImage | Title for mobile image. | Mobile |
imagePlaceholder | Placeholder for image inputs. | Paste your image as valid URL or as relative path |
related | Title for related container. | Related |
relatedDescription | Description for related container. | Choose which games or templates you wish to be related to this game. |
labelsHeading | Title for labels container. | Labels |
customFields | Title for custom fields container. | Custom fields |
dynamicFieldsDescription | Description about labels and custom fields. | You can create your custom records for easier way to connect your game. |
keyDynamicFields | Label for key input. | Key |
valueDynamicFields | Label for value input. | Value |
addRecord | Tooltip for add button in labels and custom fields containers. | Add record |
games | Title for games select. | Games |
gamesPlaceholder | Placeholder for games select input. | Select which games (TOP_X and MATCH_QUIZ) are related to this game |
templates | Title for templates select. | Templates |
templatesPlaceholder | Placeholder for templates select input. | Select which templates are related to this game |
cutoffTime | Title for choosing a cutoff time for game. | Cutoff time |
cutoffTimeDescriptionOnCreate | Description about choosing a cutoff time for creating game. | Predictions will be accepted until this time. If not provided it will be automatically generated 15 minutes from the first match played. |
cutoffTimeDescriptionOnEdit | Description about choosing a cutoff time for editing game. | Predictions will be accepted until this time. Keep in mind that this field SHOUT NOT be empty. |
scheduleOpenAt | Title for choosing a scheduler to open a game. | Schedule open at |
scheduleOpenAtDescription | Description about choosing a scheduler to open a game. | When provided game's status will automatically set from PENDING to OPEN. Keep in mind that the latest time option is 75 minutes before first match kickoff. |
editGame | Used as label on create button and as a title on screen when editing a game. | Edit game |
addFixture | Label for add button. Add button is displayed when you have fixtures less than your maxFixtures provided by your features from Client API | Add fixture |
addWinner | Label for add button. This add button is displayed on Winners screen. | Add winner |
removeFixture | Label for remove button. Remove button is displayed always on your fixture. | Remove fixture |
removeFixture | Label for remove button. Remove button is displayed on your winner. | Remove winner |
back | Tooltip content for back button (left arrow positioned on top-right corner). You can go back when you create/edit a game or when you visit report screen. | Back |
loadMore | Label for Load More button. It is displayed when you choose the team for who you will be displayed next matches. | Load More |
reportFor | Label positioned on top left side of the screen. Part of Report screen title. | Report for |
position | Label in header's report table | Position |
points | Label in header's report table | Points |
winnersDescription | Description for winners description | Describe the winners... |
winner | Title of card and label for the single winner input | Winner |
winnerDescription | Description for the single winner | Select the winner of the game |
insertWinners | Heading for the single winner container | Insert winners |
insertWinnersDescription | Description for the single winner container | Type information about each winner of the game. |
note | Label for note input | Note |
notePlaceholder | Placeholder for note input | Provide some note for the winner... |
tags | Label for tags input | Tags |
tagsPlaceholder | Placeholder for tags input | Provide tags for the winner... |
save | Label for save button | Save |
preview | Heading for the preview container | Preview |
gameNotSettledMessage | Model message when client clicks on report button for game that is NOT settled. | Not all matches have been played and therefore no points awarded yet. Please come back after the matches finish to see the leaderboard. |
exportButton | Label for button to open export modal screen on Report screen. | Export |
csvModalTitle | Title of the export modal. | Enter how many users should be exported |
csvModalDescription | Description of the export modal. | Download a .csv file with the first 100 number of users. |
csvModalPlaceholder | Placeholder for input on export modal. | Export the first X users... |
cancel | Label for cancel button to exit export modal. | Cancel |
csvModalDownloadButton | Label for button to download report as CSV file. Keep in mind that this label is uppercase. | Download as CSV file |
csvModalValidationMessage | Error message when invalid value is provided in input. | Input value has to be an integer number between 1 and 100 |
csvModalErrorMessage | Error message when exporting leaderboard as CSV file. | There was a problem with fetching game's report data |
clear | Tooltip for clearing button (circled X). Button clears current choosen game cuttof time. | Clear |
searchImage | Label for search image input | Search image |
hideFilters | Label for hyperlink to hide filters for image search | Hide filters |
showFilters | Label for hyperlink to show filters for image search | Show filters |
dateFromTo | Label for date from/to filter for image search | Date from/to |
dateFromToPlaceholder | Placeholder for input date from/to filter for image search | Select Date... |
noImagesFound | Paragraph whe no images were found | No images found |
loadingMessage | When creating/editing a game label on button will be displayed as loading message. | Loading... |
createGameMessage | When creating a game displaying a react-toastify successful message for created game. | You have successfully created a game. |
editGameMessage | When editing a game displaying a react-toastify successful message for edited game. | You have successfully edited a game. |
clearCutoffMessage | When clearing a cutoff time for a game displaying a react-toastify informational message for cleared input field about cutoff time for game | You have cleared your cutoff time. |
clearSchedulerMessage | When clearing schedule open at for a game displaying a react-toastify informational message for cleared input field about schedule open at for game | You have cleared your schedule open at. |
minFixturesMessage | When creating/editing a game displaying a react-toastify warning message about minimum fixtures. | There is a requirement how many minimum fixtures you need to provide to create/update game and it is: |
sameChosenMatchMessage | When creating/editing a game displaying a react-toastify warning message about same chosen match for different fixtures. | Some of selected matches are repeating |
invalidCutoffTimeMessage | When creating/editing a game displaying a react-toastify warning message about invalid cutoff time for game. | Some of the provided matches start before cutoff time. Please choose cutoff time that is before the earliest match kickoff time. |
fillCutoffTimeEditGameMessage | When editing a game displaying a react-toastify warning message about unprovided cutoff time. | You need to provide a cutoff time to update the game! |
createGameErrorMessage | When creating a game displaying a react-toastify error message. | There was a problem with creating the game. Please try again. |
editGameErrorMessage | When editing a game displaying a react-toastify error message. | There was a problem with editing the game. Please try again. |
leaderboardErrorMessage | When editing a game displaying a react-toastify error message. | There was a problem with displaying leaderboard. Please try again. |
gamePredictionsErrorMessage | When editing a game displaying a react-toastify error message. | There was a problem with getting predictions for users. Please try again. |
leaderboardNotAvailable | When setting winners for game and there is no leaderboard available. This is heading message that appears in winner container. | No leaderboard is available for this game. |
gameNoSetWinnersMessage | When winners are set for the first time this message will appear in the preview block. | No winners are set for this game. |
positionAndWinnerRequiredMessage | When managing winners for a game displaying a react-toastify validation error message. | Position and winner are required! |
sameChosenWinnerMessage | When managing winners for a game displaying a react-toastify validation error message. | You have selected same winners. Each winner has to be unique! |
gameWinnersErrorMessage | When fetching winners for a game displaying a react-toastify error message. | There was a problem with fetching information about game winners. Please try again. |
createGameWinnersMessage | When creating winners for a game displaying a react-toastify success message. | You have successfully created winners for the game. |
createGameWinnersErrorMessage | When creating winners for a game displaying a react-toastify error message. | There was a problem with creating winners for the game. Please try again. |
editGameWinnersMessage | When editing winners for a game displaying a react-toastify success message. | You have successfully edited winners for the game. |
editGameWinnersErrorMessage | When editing winners for a game displaying a react-toastify error message. | There was a problem with editing winners for the game. Please try again. |
relatedEntitiesErrorMessage | When creating or editing a game displaying a react-toastify error message when the request fails for fetching related entities. | There was a problem with fetching entities. Please try again. |
dynamicFieldsKeysValidationMessage | Warning react-toastify message when provided keys are invalid. | Only lowercase letters, numbers and underscore are accepted as keys! |
gameByIdErrorMessage | When editing a game displaying a react-toastify error message when request fails for retrieving full information about the game. | There was a problem retrieving full information about the game. |
generateSignedInUrlErrorMessage | react-toastify error message when trying to receive a signed in URL. | There was a problem generating signed in URL to store the image in bucket. Please try again |
uploadingImageMessage | react-toastify success message when uploading image to bucket | You have successfully uploaded image |
uploadingImageErrorMessage | react-toastify error message when uploading image to bucket | There was a problem with uploading image to bucket. Please try again |
encryptingImageErrorMessage | react-toastify error message when encrypting image before uploading it to bucket | There was a problem with encrypting image before uploading it to bucket. Please try again |
clearFromToFilterSportal365ImagesMessage | react-toastify info message when clearing date from/to filter | You have cleared from/to filter for Sportal365 search images |
searchSportal365ImagesErrorMessage | react-toastify error message when searching images from Sportal 365 API | There was a problem with searching images from Sportal 365 API. Please try again |
Updated 8 months ago