Configuration Management

Welcome to Fans United Configuration Management Widget. The widget allows staff members with sufficient permissions to update their different configurations. You can use this widget as it is and embed it in your platform, or you can use the Management Panel to manage your configuration. With successful installation, you can manage your language, cache TTL and football assets configurations.

Installation and usage

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

npm  install  fansunited-widget-client-configuration

or:

yarn  add  fansunited-widget-client-configuration

Here is an example how you can integrate Fans United Classic Quiz Management Widget:

import { ConfigurationManager } from  'fansunited-widget-client-configuration';

const  App = () => {
return (
<ConfigurationManager
	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.
Easy translation in every language. For more information check our Translation heading.

Props

type ConfigurationManagerProps = {
	fansUnitedApiKey: string;
	fansUnitedClientId: string;
	fansUnitedLanguage?: string;
	fansUnitedEnvironment?: string;
	labels?: LabelsModel;
	hideSignOutButton?: boolean;
};

Fans United Classic Quiz 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, watg and yolo. 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.
hideSignOutButton - By default on the top right corner of the widget will be displayed a sign out button. To hide that button set this prop to true.

Translation

You can easily translate Fans United Configuration 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 { ConfigurationManager } from  'fansunited-widget-client-configuration';

const labels = {
	clientConfigErrorMessage: "There was a problem fetching client's configuration. Please try again",
	userNotFound: 'User not found. Please try again',
	language: 'Language',
	profilePreferences: 'Profile Preferences',
	cacheTTL: 'Cache TTL',
	footballAssets: 'Football Assets',
	soon: 'Soon',
	update: 'Update Configuration',
	configTitle: 'Configure Fans United',
	configDescription: 'Customize different features of Fans United',
	defaultLanguage: 'Default language',
	defaultLanguageHelperText: 'What is the default language of your content? This field, if different from English, would be used in our translation tools.',
	availableLanguages: 'Available languages',
	availableLanguagesHelperText: 'In case your project is multi-lingual, select the available languages for your app.',
	translationRules: 'Translation rules',
	translationRulesHelperText: 'Select the default status when a game is automatically translated.',
	gameStatus: 'Game status',
	active: 'Active',
	inactive: 'Inactive',
	updateConfigMessage: 'You have successfully updated Language configuration',
	updateConfigErrorMessage: 'There was a problem updating configuration. Please try again',
	categories: 'Categories',
	delete: 'Delete',
	id: 'ID',
	name: 'Name',
	addCategory: 'Add Category',
	preferences: preferences: 'Preferences',
	addPreference: 'Add Preference',
	selectCategories: 'Select categories for new preference',
	uniqueCategoriesIdErrorMessage: `Categories' IDs must be unique!`,
	uniquePreferencesIdErrorMessage: `Preferences' IDs must be unique!`
};

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

Here is all information about LabelsModel:

Key	Description	Default Value
`clientConfigErrorMessage`	Toast error message when fetching client configuration fails.	There was a problem fetching client's configuration. Please try again
`userNotFound`	On login screen when client gives invalid information about email or password.	User not found. Please try again
`language`	Label for language tab.	Language
`profilePreferences`	Label for profile preferences tab.	Profile Preferences
`cacheTTL`	Label for cache TTL tab.	Cache TTL
`footballAssets`	Label for football assets tab.	Football Assets
`soon`	Label for soon chip on tabs.	Soon
`update`	Label for management button.	Update Configuration
`configTitle`	Title of the management screen.	Configure Fans United
`configDescription`	Description of the management screen.	Customize different features of Fans United
`defaultLanguage`	Label for default language select.	Default language
`defaultLanguageHelperText`	Description for default language select.	What is the default language of your content? This field, if different from English, would be used in our translation tools.
`availableLanguages`	Label for available languages group container.	Available languages
`availableLanguagesHelperText`	Description for available languages container.	In case your project is multi-lingual, select the available languages for your app.
`translationRules`	Label for translation rules table.	Translation rules
`translationRulesHelperText`	Description for translation rules table.	Select the default status when a game is automatically translated.
`gameStatus`	Label for column in translation rules table.	Game status
`active`	Label for status option.	Active
`inactive`	Label for status option.	Inactive
`updateConfigMessage`	Toast success message when updating client configuration.	You have successfully updated Language configuration
`updateConfigErrorMessage`	Toast error message when updating client configuration fails.	There was a problem updating configuration. Please try again
`categories`	Title for categories section in profile preferences	Categories
`delete`	Tooltip for chip delete button	Delete
`id`	ID input title	ID
`name`	Name input title	Name
`addCategory`	Add new category button title	Add Category
`preferences`	Title for preferences section in profile preferences	Preferences
`addPreference`	Add new preference button title	Add Preference
`selectCategories`	Info text for selecting categories for new preference creation	Select categories for new preference
`uniqueCategoriesIdErrorMessage`	Error validation message when new category added doesn't have unique ID	Categories' IDs must be unique!
`uniquePreferencesIdErrorMessage`	Error validation message when new preference added doesn't have unique ID	Preferences' IDs must be unique!