fansunited-widget-top-x v2.10.0

Top X Management Widget

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 successful installation, 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 Joy UI which is based on headless unstyle react components. 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;
	sportal365Project?: string;
	sportal365Infrastructure?: 'shared' | 'betway';
	labels?: LabelsModel;
	hideSignOutButton?: boolean;
};

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), Romanian (ro), Greek (el), Slovak (sk), Serbian (sr) and Hungarian (hu). 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 .

• hideSignOutButton - The prop is used to hide the sign out button which is positioned on the top right corner on the main screen of the widget.

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.',
    clientFeaturesNotFoundMessage: "There was a problem fetching client's configuration. Please check again your API key and client ID. For more information contact Fans United staff.",
    featureDisabled: 'Feature disabled!',
    noPermissionMessage: 'You have no permission for this feature!',
    tryAgainButton: 'Try again',
    noGamesFound: "No games were found. You can create a game by clicking the button 'Create'",
    create: 'Create',
    signOut: 'Sign out',
    manageWinners: 'Manage winners for Top X game with name',
    name: 'Name',
    status: 'Status',
    participants: 'Participants',
    creationDate: 'Created at',
    acceptUntil: 'Accept Until',
    actions: 'Actions',
    pending: 'Pending',
    settled: 'Settled',
    live: 'Live',
    open: 'Open',
    canceled: 'Canceled',
    closed: 'Closed',
    predictions: 'Predictions',
    showDetails: 'Show details',
    noStandingsAvailable: 'No standings available',
    close: 'Close',
    predictionBy: 'Prediction by',
    noMatchesAvailable: 'No matches available',
    matches: 'Matches',
    market: 'Market',
    prediction: 'Prediction',
    dates: 'Dates',
    createdAt: 'Created at',
    updatedAt: 'Updated at',
    noPredictionAvailable: 'No prediction available',
    void: 'Void',
    branding: 'Branding',
    configuration: 'Configuration',
    match: 'Match',
    outcome: 'Outcome',
    settledAt: 'Settled at',
    resettledAt: 'Resettled at',
    filters: 'Filters',
    fromDate: 'From date',
    toDate: 'To date',
    nicknameAndName: 'Nickname & Name',
    edit: 'Edit',
    clone: 'Clone',
    standings: 'Standings',
    reports: 'Reports',
    performanceByDay: 'Performance by day',
    participations: 'Participations',
    timeFormat: 'DD.MM.YYYY, HH:mm',
    previous: 'Previous',
    next: 'Next',
    id: 'ID',
    title: 'Title',
    description: 'Description',
    matchSelection: 'Match selection',
    matchSelectionDescription: 'Select a number of matches to include in your game.',
    gameMarket: 'Game market',
    gameMarketDescription: 'Determine how your game is being scored by choosing your market. Keep in mind that you can edit the market option only the game is in PENDING status.',
    marketCorrectScore: 'Correct score',
    marketCorrectScoreAdvanced: 'Advanced correct score',
    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 same golden goal, the user who placed their predictions earlier will be in front. When disabled the current game's leaderboard behavior 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.",
    rules: 'Rules',
    adContent: 'Ad content',
    adContentPlaceholder: 'Paste HTML here...',
    flags: 'Flags',
    flagsPlaceholder: 'Type your flag and hit enter',
    repeatedValueMessage: 'You have entered a repeated value. Please enter a different one.',
    related: 'Related',
    games: 'Games',
    templates: 'Templates',
    labelsHeading: 'Labels',
    customFields: 'Custom fields',
    keyDynamicFields: 'Key',
    valueDynamicFields: 'Value',
    add: 'Add',
    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 SHOULD NOT be empty.',
    removeMatch: 'Remove match',
    back: 'Back',
    loadMore: 'Load more',
    exportButton: 'Export',
    position: 'Position',
    points: 'Points',
    winnersDescription: 'Describe the winners...',
    note: 'Note',
    tags: 'Tags',
    tagsPlaceholder: 'Provide tags for the winner...',
    save: 'Save',
    preview: 'Preview',
    clearWinner: 'Clear winner',
    csvModalTitle: 'Enter how many users should be exported',
    csvModalDescription: '',
    csvModalPlaceholder: 'Export the first X users...',
    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',
    fixtures: 'Fixtures',
    orderByPlaceholder: 'Order by',
    kickoffAscending: 'Kick-off Ascending',
    kickoffDescending: 'Kick-off Descending',
    minimumFixturesAre: 'The minimum fixtures are',
    maximumFixturesAre: 'The maximum fixtures are',
    searchMatches: 'Search matches',
    matchAddedToFixturesMessage: "added to 'Fixtures'",
    matchRemovedFromFixturesMessage: "removed from 'Fixtures'",
    schedule: 'Schedule',
    createScheduledTaskMessage: 'You have successfully created scheduled task',
    createScheduledTaskErrorMessage: 'An error occurred while creating scheduled task. Please try again later',
    updateScheduledTaskMessage: 'You have successfully updated scheduled task',
    updateScheduledTaskErrorMessage: 'An error occurred while updating scheduled task. Please try again later',
    deleteScheduledTaskMessage: 'You have successfully deleted scheduled task',
    deleteScheduledTaskErrorMessage: 'An error occurred while deleting scheduled task. Please try again later',
    useLegacyScheduleOpenAt: 'Use legacy schedule open at',
	useLegacyScheduleOpenAtDescription: 'This functionality will be deprecated on the 1st of April 2025. Please use the new scheduler functionality above.',
    scheduleOpenAt: 'Schedule open at',
    changeStatusTo: 'Change status to:',
    at: 'At:',
    deleteScheduledTaskModalTitle: 'Delete scheduled task',
    deleteScheduledTaskModalParagraph: 'Are you sure you want to delete the following scheduled task: ',
    scheduledTaskNotAvailable: 'To configure scheduled tasks you need to edit your game',
    competitionsSelectionPlaceholder: 'Search for competitions by their name',
    teamsSelectionPlaceholder: 'Search for teams by their name',
    colors: 'Colors',
    primaryColor: 'Primary color',
    secondaryColor: 'Secondary color',
    contentColor: 'Content color',
    backgroundColor: 'Background color',
    borderColor: 'Border color',
    additionalColor: 'Additional color',
    urls: 'URLs',
    primaryUrl: 'Primary URL',
    secondaryUrl: 'Secondary URL',
    privacyPolicyUrl: 'Privacy policy URL',
    termsAndConditionsUrl: 'Terms and conditions URL',
    additionalUrl: 'Additional URL',
    mainLogo: 'Main Logo',
    mobileLogo: 'Mobile logo',
    backgroundImage: 'Background image',
    mobileBackgroundImage: 'Mobile background image',
    additionalImage: 'Additional image',
    hideMoreImages: 'Hide more images',
    showMoreImages: 'Show more images',
    images: 'Images',
    mainImage: 'Main',
    coverImage: 'Cover',
    mobileImage: 'Mobile',
    uploadImage: 'Upload Image',
    sportal365Images: 'Sportal365 Images',
    search: 'Search',
    searchImage: 'Search image',
    hideFilters: 'Hide filters',
    showFilters: 'Show filters',
    manageGameTitle: 'Manage Top X Game',
    manageGameDescription: 'Using this form, you can manage Top X games. Choose the most interesting individual matches, set scoring rules, scheduling, customize branding options, and much more.',
    cloneGameTitle: 'Clone Top X Game',
    delete: 'Delete',
    excludedProfiles: 'Excluded profiles',
    excludedProfilesPlaceholder: 'Search for a profile by their name or nickname',
    searchProfilesErrorMessage: 'There was a problem searching for profiles',
    searchTeamsErrorMessage: 'There was a problem searching for teams',
    searchCompetitionsErrorMessage: 'There was a problem searching for competitions',
    clearImage: 'Clear image',
    copyUrl: 'Copy URL',
    viewImage: 'View image',
    cropImage: 'Crop image',
    aspectRatio: 'Aspect ratio',
    crop: 'Crop',
    reset: 'Reset',
    notVerified: 'Not verified',
    correct: 'Correct',
    partiallyCorrect: 'Partially correct',
    incorrect: 'Incorrect',
    correctNumberOfFixtures: 'You have set the correct number of fixtures',
    sortOrder: 'Sort order',
    ascending: 'Ascending',
    descending: 'Descending',
    itemsPerPage: 'Items per page',
    pageNo: 'Page No',
    manageWinnersActionLabel: 'Manage winners',
    stats: 'Stats',
    configureWinners: 'Configure Winners',
    additionalInformation: 'Additional information',
    exportAllUsers: "Export all users",
    exportAllUsersLeads: "Export all users leads",
    usersLeadsExportMessage: "All users leads have been exported successfully",
    usersLeadsExportErrorMessage: "There was a problem with exporting all users leads. Please try again",
	usersExportMessage: "All users have been exported successfully",
	usersExportErrorMessage: "There was a problem with exporting users. Please try again"
    createGameMessage: 'You have successfully created a game.',
    editGameMessage: 'You have successfully edited a game.',
    minFixturesMessage: 'There is a requirement how many minimum fixtures you need to provide for the game and it is:',
    maxFixturesMessage: 'There is a requirement how many maximum fixtures you can provide for the game and it is:',
    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.',
    positionAndWinnerRequiredMessage: 'Position and winner are required!',
    sameChosenWinnerMessage: 'You have selected same winners. Each winner has to be unique!',
    winnersErrorMessage: 'There was a problem with fetching information about game winners. Please try again.',
    createWinnersMessage: 'You have successfully created winners for the game.',
    createWinnersErrorMessage: 'There was a problem with creating winners for the game. Please try again.',
    editWinnersMessage: 'You have successfully edited winners for the game.',
    editWinnersErrorMessage: 'There was a problem with editing winners for the game. Please try again.',
    dynamicFieldsKeysValidationMessage: 'Only lowercase, numbers and underscore are accepted as keys',
    gameByIdErrorMessage: 'There was a problem retrieving full information about the game.',
    gamesErrorMessage: 'There was a problem retrieving information about the games.',
    uploadingImageMessage: 'You have successfully uploaded image',
    generateSignedInUrlErrorMessage: 'There was a problem generating signed in URL to store the image in bucket. Please try again',
    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',
    userGamePredictionErrorMessage: "There was a problem with fetching user's game prediction. Please try again",
    getMatchesErrorMessage: 'An error occurred while fetching the matches. Please try again.',
    urlCopiedToClipboardMessage: 'URL copied to clipboard',
    imageDeletedMessage: 'Image deleted',
    imageResetMessage: 'The initial size of the image has been restored',
    provideTitleGameErrorMessage: 'You need to provide a title to your game!',
    matchesNotPartOfCompetitionsWhitelistErrorMessage: 'Provided matches are not part of competitions whitelist. To change that you will need to go to our Management Portal -> Features -> Top X and update your competitions whitelist.',
    noProfileInformationAvailableMessage: 'There is no profile information available',
    gameParticipationsReportErrorMessage: 'There was a problem with fetching information about game participation. Please try again',
    type: 'Type',
    relationship: 'Relationship',
    entity: 'Entity',
    relatedEntitiesErrorMessage: 'There was a problem with fetching entities for related. Please try again'
};

const  App = () => {
return (
<TopXManager
	fansUnitedApiKey={'your-api-key'}
	fansUnitedClientId={'your-client-id'}
	labels={labels}/>
);
}

Here is all information about LabelsModel: