Info Page Management

Welcome to Fans United Info Pages Management Widget. The widget allows staff members with sufficient permissions to create and manage info pages. You can use this widget as it is and embed it in your platform, or you can use the Management Panel to create info pages. Info Pages support multiple content types (TEXT, HTML, JSON) and custom game configurations including Pick-the-Pair, Chance Game, and Memory Game. With successful installation, you can create, edit, and manage Info Pages with rich content and interactive features.

Installation and usage

The easiest way to use fansunited-widget-info-pages is to install it from npm as follows:

npm install fansunited-widget-info-pages

or:

yarn add fansunited-widget-info-pages

Here is an example how you can integrate Fans United Info Pages Management Widget:

import 'fansunited-widget-info-pages/style.css';
import { InfoPageManager } from 'fansunited-widget-info-pages';

const App = () => {
  return (
    <InfoPageManager
      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-info-pages-management/style.css';

N.B: If you are using an entry point for importing all your stylings, you need to import fansunited-widget-info-pages/style.css there as well

Easy translation in every language. For more information check our Translation heading.

Props

type InfoPageManagerProps = {
  fansUnitedApiKey: string;
  fansUnitedClientId: string;
  fansUnitedLanguage?: string;
  fansUnitedEnvironment?: string;
  sportal365Project?: string;
  sportal365Infrastructure?: 'shared' | 'betway';
  labels?: LabelsModel;
  hideSignOutButton?: boolean;
};

Fans United Info Pages 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 and production. 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 Info Pages 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 Info Pages 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-info-pages/style.css';
import { InfoPageManager } from 'fansunited-widget-info-pages';

const labels = {
  userNotFound: 'User not found. Please try again.',
  noInfoPagesFound: "No info pages were found. You can create an info page by clicking the button 'Create'",
  create: 'Create',
  signOut: 'Sign out',
  infoPages: 'Info Pages',
  mainDescription: 'Use this interface to manage your Info Pages and customize your Info Pages configuration.',
  itemsPerPage: 'Items per page',
  back: 'Back',
  manageTitle: 'Manage Info Page',
  manageDescription: 'Using this form, you can manage Info Page.',
  title: 'Title',
  description: 'Description',
  subtitle: 'Subtitle',
  configuration: 'Configuration',
  id: 'ID',
  type: 'Type',
  contentType: 'Content Type',
  text: 'Text',
  html: 'HTML',
  json: 'JSON',
  content: 'Content',
  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',
  branding: 'Branding',
  brandingTemplateLabel: 'Select branding',
  brandingTemplatePlaceholder: 'Choose existing branding',
  colors: 'Colors',
  urls: 'URLs',
  labels: 'Labels',
  context: 'Context',
  language: 'Language',
  languageDescription: 'Select the language for this info page.',
  typeDescription: 'Select the type for this info page.',
  // Game configuration labels
  chanceGame: 'Chance Game',
  pickThePair: 'Pick the Pair',
  memoryGame: 'Memory Game',
  selectionMode: 'Selection Mode',
  alwaysWin: 'Always Win',
  fairRandom: 'Fair Random',
  weightedByProbability: 'Weighted by Probability',
  segments: 'Segments',
  pairs: 'Pairs',
  cards: 'Cards',
  timeLimit: 'Time Limit',
  timeLimitSeconds: 'Time Limit (seconds)',
  successThreshold: 'Success Threshold',
  displayOrder: 'Display Order',
  leftColumn: 'Left Column',
  rightColumn: 'Right Column',
  // Messages
  createInfoPageMessage: 'You have successfully created an info page.',
  editInfoPageMessage: 'You have successfully edited an info page.',
  cloneInfoPageMessage: 'You have successfully cloned an info page.',
  deleteInfoPageMessage: 'You have successfully deleted an info page.',
  createInfoPageErrorMessage: 'There was a problem with creating the info page. Please try again.',
  editInfoPageErrorMessage: 'There was a problem with editing the info page. Please try again.',
  infoPagesErrorMessage: 'There was a problem retrieving information about the info pages.',
  updateConfigurationMessage: 'Configuration updated successfully.',
  updateConfigurationErrorMessage: 'There was a problem updating the configuration. Please try again.',
};

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

Here is all information about LabelsModel:

Core Labels

Key	Description	Default Value
`userNotFound`	On login screen when client gives invalid information about email or password.	User not found. Please try again.
`clientFeaturesNotFoundMessage`	Error message when client features cannot be fetched.	There was a problem fetching configuration. Please try again.
`signOut`	Used as label on sign out button.	Sign out
`mainDescription`	Main description for the widget.	Use this interface to manage your Info Pages and customize your Info Pages configuration.
`infoPages`	Label for Info Pages.	Info Pages
`create`	Used as label on create button.	Create
`noInfoPagesFound`	When there are no created info pages for specific client, this message will appear on screen.	No info pages were found. You can create a game by clicking the button 'Create'
`itemsPerPage`	Label for items per page filter.	Items per page
`back`	Label for back button (left arrow positioned on top-right corner).	Back
`manageTitle`	Title on managing screen.	Manage Info Page
`manageDescription`	Description on managing screen.	Using this form, you can manage Info Page.

Form Labels

Key	Description	Default Value
`title`	Label for title input.	Title
`description`	Label for description input field.	Description
`subtitle`	Label for subtitle input.	Subtitle
`configuration`	Label for configuration accordion.	Configuration
`id`	Label for ID input field.	ID
`name`	Label for name input.	Name
`label`	Label for label input.	Label
`type`	Label for type select.	Type
`typeDescription`	Description for type select.	Select the type for this info page.
`content`	Label for content input.	Content
`contentType`	Label for content type select.	Content Type
`text`	Label for TEXT content type option.	Text
`html`	Label for HTML content type option.	HTML
`json`	Label for JSON content type option.	JSON
`selectContentTypeDescription`	Description for content type select.	Select the content type for your info page.
`htmlContent`	Label for HTML content editor.	HTML Content
`jsonContent`	Label for JSON content editor.	JSON Content
`professionalHtmlEditorDescription`	Description for HTML editor.	Use this professional HTML editor to create rich content.
`professionalJsonEditorDescription`	Description for JSON editor.	Use this professional JSON editor to configure your content.
`language`	Label for language select.	Language
`languageDescription`	Description for language select.	Select the language for this info page.
`formView`	Label for form view tab.	Form View
`jsonView`	Label for JSON view tab.	JSON View
`labelsConfiguration`	Label for labels configuration.	Labels Configuration
`labelsConfigurationDescription`	Description for labels configuration.	Configure custom labels for your info page.
`error`	Label for error state.	Error
`jsonConfiguration`	Label for JSON configuration.	JSON Configuration
`configurationWillBeReset`	Warning message for configuration reset.	Configuration will be reset
`changingInfoPageTypeWarning`	Warning when changing info page type.	Changing the info page type will reset the configuration. Are you sure you want to continue?

Image Management Labels

Key	Description	Default Value
`images`	Title for images container.	Images
`mainImage`	Title for main image.	Main
`coverImage`	Title for cover image.	Cover
`mobileImage`	Title for mobile image.	Mobile
`uploadImage`	Label for upload button in images accordion.	Upload Image
`sportal365Images`	Label for sportal365 images button.	Sportal365 Images
`search`	Label for search button.	Search
`searchImage`	Placeholder for input search in sportal365.	Search image
`hideFilters`	Label for hide filters for sportal365 images hyperlink.	Hide filters
`showFilters`	Label for show filters for sportal365 images hyperlink.	Show filters
`hideMoreImages`	Label for hide more images hyperlink.	Hide more images
`showMoreImages`	Label for show more images hyperlink.	Show more images
`addImages`	Label for toggle button to show images.	Add images
`fromDate`	Label for from date filter.	From Date
`toDate`	Label for to date filter.	To Date
`clearImage`	Tooltip for clear image button.	Clear image
`copyUrl`	Tooltip for copy url image button.	Copy URL
`viewImage`	Tooltip for view image button.	View image
`cropImage`	Tooltip for crop image button.	Crop image
`aspectRatio`	Label for aspect ratio select.	Aspect ratio
`crop`	Label for crop button.	Crop
`reset`	Label for reset button.	Reset

Game Configuration Labels

Key	Description	Default Value
`chanceGame`	Label for Chance Game type.	Chance Game
`pickThePair`	Label for Pick the Pair game type.	Pick the Pair
`memoryGame`	Label for Memory Game type.	Memory Game
`selectionMode`	Label for selection mode.	Selection Mode
`mode`	Label for mode select.	Mode
`casual`	Label for casual mode.	Casual
`challenge`	Label for challenge mode.	Challenge
`alwaysWin`	Label for always win mode.	Always Win
`fairRandom`	Label for fair random mode.	Fair Random
`weightedByProbability`	Label for weighted mode.	Weighted by Probability
`segments`	Label for segments.	Segments
`pairs`	Label for pairs.	Pairs
`cards`	Label for cards.	Cards
`timeLimitSeconds`	Label for time limit in seconds.	Time Limit (seconds)
`successThreshold`	Label for success threshold.	Success Threshold
`displayOrder`	Label for display order.	Display Order
`leftColumnOptionsDisplayOrder`	Label for left column options display order.	Left Column Options Display Order
`rightColumnOptionsDisplayOrder`	Label for right column options display order.	Right Column Options Display Order
`optionA`	Label for option A.	Option A
`optionB`	Label for option B.	Option B
`winning`	Label for winning toggle.	Winning
`weight`	Label for weight input.	Weight
`resultDisplay`	Label for result display.	Result Display
`resultTitle`	Label for result title.	Result Title
`resultDescription`	Label for result description.	Result Description
`callToActionButtons`	Label for call to action buttons.	Call to Action Buttons
`addPrimaryCta`	Label for add primary CTA button.	Add Primary CTA
`primaryCta`	Label for primary CTA.	Primary CTA
`addSecondaryCta`	Label for add secondary CTA button.	Add Secondary CTA
`secondaryCta`	Label for secondary CTA.	Secondary CTA
`buttonLabel`	Label for button label input.	Button Label
`buttonLink`	Label for button link input.	Button Link
`segmentNumber`	Label for segment number.	Segment #
`pairNumber`	Label for pair number.	Pair #
`cardNumber`	Label for card number.	Card #
`alwaysWinDescription`	Description for always win mode.	In this mode, users will always win.
`fairDescription`	Description for fair random mode.	In this mode, each segment has an equal chance of being selected.
`weightedDescription`	Description for weighted mode.	In this mode, segments are selected based on their weight/probability.
`resultDisplayDescription`	Description for result display.	Configure how the result is displayed to the user.
`segmentLabelDescription`	Description for segment label.	Enter a label for this segment.
`winningDescription`	Description for winning toggle.	Mark this segment as a winning segment.
`weightDescription`	Description for weight input.	Set the weight/probability for this segment.
`casualModeDescription`	Description for casual mode.	In casual mode, users can match pairs at their own pace.
`challengeModeDescription`	Description for challenge mode.	In challenge mode, users must complete within a time limit.
`timeLimitDescription`	Description for time limit.	Set the time limit in seconds for completing the game.
`successThresholdDescription`	Description for success threshold.	Set the minimum number of correct pairs needed to win.
`displayOrderDescription`	Description for display order.	Configure the display order of options.
`leftColumnDescription`	Description for left column.	Configure options for the left column.
`rightColumnDescription`	Description for right column.	Configure options for the right column.

Branding Labels

Key	Description	Default Value
`branding`	Label for branding accordion.	Branding
`brandingTemplateLabel`	Label for branding menu selection.	Select branding
`brandingTemplatePlaceholder`	Placeholder for branding menu selection.	Choose existing branding
`colors`	Label for colors tab in branding accordion.	Colors
`urls`	Label for urls tab in branding accordion.	URLs
`mainLogo`	Label for main logo input in branding accordion.	Main Logo
`mobileLogo`	Label for mobile logo input in branding accordion.	Mobile logo
`backgroundImage`	Label for background image input in branding accordion.	Background image
`mobileBackgroundImage`	Label for mobile background image input in branding accordion.	Mobile background image
`additionalImage`	Label for additional image input in branding accordion.	Additional image
`primaryColor`	Label for primary color input in branding accordion.	Primary color
`secondaryColor`	Label for secondary color input in branding accordion.	Secondary color
`contentColor`	Label for content color input in branding accordion.	Content color
`backgroundColor`	Label for background color input in branding accordion.	Background color
`borderColor`	Label for border color input in branding accordion.	Border color
`additionalColor`	Label for additional color input in branding accordion.	Additional color
`primaryUrl`	Label for primary url input in branding accordion.	Primary URL
`secondaryUrl`	Label for secondary url input in branding accordion.	Secondary URL
`privacyPolicyUrl`	Label for privacy policy url input in branding accordion.	Privacy policy URL
`termsAndConditionsUrl`	Label for terms and conditions url input in branding accordion.	Terms and conditions URL
`additionalUrl`	Label for additional url input in branding accordion.	Additional URL

Action Labels

Key	Description	Default Value
`previous`	Label for previous button.	Previous
`next`	Label for next button.	Next
`edit`	Used as a tooltip on edit button.	Edit
`clone`	Used as label on clone button.	Clone
`close`	Label for close button.	Close
`save`	Label for save button.	Save
`add`	Label for add button.	Add
`remove`	Label for remove button.	Remove
`delete`	Label for delete button.	Delete
`cancel`	Label for cancel button.	Cancel
`continue`	Label for continue button.	Continue
`format`	Label for format button.	Format
`minify`	Label for minify button.	Minify
`pageNo`	Label for pagination.	Page No

Context and Tags Labels

Key	Description	Default Value
`context`	Label for context accordion.	Context
`tags`	Label for tags.	Tags
`campaign`	Label for campaign.	Campaign
`contextEntityTag`	Label for context entity tag.	Context Entity Tag
`typeContextTagNamePlaceholder`	Placeholder for context tag name.	Type context tag name
`labels`	Label for labels accordion.	Labels
`keyDynamicFields`	Label for key input in dynamic fields.	Key
`valueDynamicFields`	Label for value input in dynamic fields.	Value

Message Labels

Key	Description	Default Value
`urlCopiedToClipboardMessage`	Toast info message when image URL is copied.	URL copied to clipboard
`imageDeletedMessage`	Toast info message when image is deleted.	Image deleted
`imageResetMessage`	Toast info message when image size is restored.	The initial size of the image has been restored
`uploadingImageMessage`	Toast success message when uploading image to bucket.	You have successfully uploaded image
`generateSignedInUrlErrorMessage`	Toast 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
`uploadingImageErrorMessage`	Toast error message when uploading image to bucket.	There was a problem with uploading image to bucket. Please try again
`encryptingImageErrorMessage`	Toast 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
`searchSportal365ImagesErrorMessage`	Toast error message when searching images from Sportal 365 API.	There was a problem with searching images from Sportal 365 API. Please try again
`provideTitleInfoPageErrorMessage`	Toast error message when no title is provided.	You need to provide a title to your info page!
`infoPagesErrorMessage`	Toast error message when request for fetching info pages fails.	There was a problem retrieving information about the info pages.
`createInfoPageMessage`	When creating an info page displaying a toast successful message.	You have successfully created an info page.
`editInfoPageMessage`	When editing an info page displaying a toast successful message.	You have successfully edited an info page.
`createInfoPageErrorMessage`	When creating an info page displaying a toast error message.	There was a problem with creating the info page. Please try again.
`editInfoPageErrorMessage`	When editing an info page displaying a toast error message.	There was a problem with editing the info page. Please try again.
`cloneInfoPageMessage`	When cloning an info page displaying a toast successful message.	You have successfully cloned an info page.
`deleteInfoPageMessage`	When deleting an info page displaying a toast successful message.	You have successfully deleted an info page.
`deleteInfoPageErrorMessage`	When deleting an info page displaying a toast error message.	There was a problem with deleting the info page. Please try again.
`updateConfigurationMessage`	When updating configuration displaying a toast successful message.	Configuration updated successfully.
`updateConfigurationErrorMessage`	When updating configuration displaying a toast error message.	There was a problem updating the configuration. Please try again.
`requiredFieldValidationMessage`	Common error toast validation message when main required field is missing.	The following field is required:
`getFootballEntitiesErrorMessage`	Error message when fetching football entities fails.	There was a problem fetching football entities. Please try again.
`invalidJsonFormat`	Error message for invalid JSON format.	Invalid JSON format
`failedToSerializeConfiguration`	Error message when configuration serialization fails.	Failed to serialize configuration
`invalidJsonFormatFixBeforeSwitching`	Error message when switching views with invalid JSON.	Invalid JSON format. Please fix before switching views.
`youMustHaveAtLeast2Pairs`	Error message for insufficient pairs.	You must have at least 2 pairs
`defineCardsForMemoryGame`	Error message for missing cards.	Please define cards for the memory game
`defineMatchingPairsForGame`	Error message for missing pairs.	Please define matching pairs for the game
`noCardsAddedYet`	Info message when no cards are added.	No cards added yet
`cannotMinifyInvalidJson`	Error message when trying to minify invalid JSON.	Cannot minify invalid JSON

Validation Error Messages

Key	Description	Default Value
`bodyConfiguration`	Label for body configuration.	Body configuration
`invalidJsonFormatInBodyConfiguration`	Validation error for invalid JSON in body.	Invalid JSON format in body configuration
`modeIsRequiredInConfiguration`	Validation error for missing mode.	Mode is required in configuration
`modeMustBeCasualOrChallenge`	Validation error for invalid mode value.	Mode must be 'casual' or 'challenge'
`pairsArrayIsRequiredInConfiguration`	Validation error for missing pairs array.	Pairs array is required in configuration
`atLeast2PairsAreRequired`	Validation error for insufficient pairs.	At least 2 pairs are required
`pairIdIsRequired`	Validation error for missing pair ID.	Pair ID is required
`pairOptionAIsRequired`	Validation error for missing option A.	Pair option A is required
`pairOptionATitleIsRequired`	Validation error for missing option A title.	Pair option A title is required
`pairOptionBIsRequired`	Validation error for missing option B.	Pair option B is required
`pairOptionBTitleIsRequired`	Validation error for missing option B title.	Pair option B title is required
`modeMustBeWinFairOrWeighted`	Validation error for invalid selection mode.	Mode must be 'win', 'fair', or 'weighted'
`segmentsArrayIsRequiredInConfiguration`	Validation error for missing segments array.	Segments array is required in configuration
`atLeast2SegmentsAreRequired`	Validation error for insufficient segments.	At least 2 segments are required
`segmentIdIsRequired`	Validation error for missing segment ID.	Segment ID is required
`segmentLabelIsRequired`	Validation error for missing segment label.	Segment label is required
`segmentResultsIsRequired`	Validation error for missing segment results.	Segment results is required
`segmentResultsTitleIsRequired`	Validation error for missing segment results title.	Segment results title is required
`timeLimitIsRequiredInConfiguration`	Validation error for missing time limit.	Time limit is required in configuration
`timeLimitMustBe0OrGreater`	Validation error for invalid time limit value.	Time limit must be 0 or greater
`cardsArrayIsRequiredInConfiguration`	Validation error for missing cards array.	Cards array is required in configuration
`atLeast2CardsAreRequired`	Validation error for insufficient cards.	At least 2 cards are required
`cardIdIsRequired`	Validation error for missing card ID.	Card ID is required
`cardTitleIsRequired`	Validation error for missing card title.	Card title is required
`labelIsRequiredAndCannotBeEmpty`	Validation error for empty label.	Label is required and cannot be empty

Miscellaneous Labels

Key	Description	Default Value
`timeFormat`	Time format for displaying dates. Widget uses dayjs as a date dependency.	DD.MM.YYYY, HH:mm
`creationDate`	Label for creation date column.	Created at
`actions`	Label for actions column.	Actions
`sort`	Label for sort select.	Sort
`ascending`	Label for ascending option.	Ascending
`descending`	Label for descending option.	Descending
`updateConfiguration`	Label for update configuration button.	Update Configuration
`widgetEmbedCodeTitle`	Title for widget embed code section.	Widget Embed Code
`copyToClipboard`	Label for copy to clipboard button.	Copy to Clipboard
`divElementTextInfo`	Info text for div element.	Div Element Text Info
`widgetEmbedCodeNotAvailable`	Message when widget embed code is not available.	Widget embed code not available
`copiedToClipboard`	Message when content is copied to clipboard.	Copied to clipboard
`layoutTemplate`	Label for layout template.	Layout Template
`layoutTemplateDescription`	Description for layout template.	Select the layout template for your info page.
`imagePosition`	Label for image position.	Image Position
`imagePositionDescription`	Description for image position.	Select the position of the image in your info page.
`deleteInfoPageTitle`	Title for delete info page modal.	Delete Info Page
`deleteInfoPageDescription`	Description for delete info page modal.	Are you sure you want to delete this info page?
`cloneInfoPageTitle`	Title for clone info page modal.	Clone Info Page
`types`	Label for types configuration.	Types
`configureTypesDescription`	Description for types configuration.	Configure the types for your Info Pages. Types are used to categorize your Info Pages.
`typeNumber`	Label for type number.	Type #