fansunited-widget-client-configuration 1.3.0 → 1.5.0

package/README.md

@@ -48,6 +48,8 @@ type ConfigurationManagerProps = {
 	fansUnitedEnvironment?: string;
 	labels?: LabelsModel;
 	hideSignOutButton?: boolean;
+	sportal365Project?: string;
+	sportal365Infrastructure?: 'shared' | 'betway';
 };
 ```
 
@@ -61,6 +63,10 @@ Fans United Classic Quiz Management Widget depends on [Fans United JS SDK](https
 
 - `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.
 
+-  `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 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:
@@ -71,6 +77,7 @@ 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',
+	signOut: 'Sign Out',
 	language: 'Language',
 	profilePreferences: 'Profile Preferences',
 	cacheTTL: 'Cache TTL',
@@ -79,6 +86,7 @@ const labels = {
 	update: 'Update Configuration',
 	configTitle: 'Configure Fans United',
 	configDescription: 'Customize different features of Fans United',
+	configLanguageTitle: 'Language Configuration',
 	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',
@@ -95,16 +103,41 @@ const labels = {
 	id: 'ID',
 	name: 'Name',
 	addCategory: 'Add Category',
-	preferences: preferences: 'Preferences',
+	preferences: 'Preferences',
 	addPreference: 'Add Preference',
 	selectCategories: 'Select categories for new preference',
 	uniqueCategoriesIdErrorMessage: `Categories' IDs must be unique!`,
-	uniquePreferencesIdErrorMessage: `Preferences' IDs must be unique!`
+	uniquePreferencesIdErrorMessage: `Preferences' IDs must be unique!`,
+	uploadImage: 'Upload Image',
+	sportal365Images: 'Sportal365 Images',
+	search: 'Search',
+	clearImage: 'Clear image',
+	copyUrl: 'Copy URL',
+	viewImage: 'View image',
+	cropImage: 'Crop image',
+	aspectRatio: 'Aspect ratio',
+	crop: 'Crop',
+	reset: 'Reset',
+	urlCopiedToClipboardMessage: 'URL copied to clipboard',
+	imageDeletedMessage: 'Image deleted',
+	imageResetMessage: 'The initial size of the image has been restored',
+	fromDate: 'From Date',
+	toDate: 'To Date',
+	uploadingImageMessage: 'You have successfully uploaded image',
+	uploadingImageErrorMessage: 'There was a problem with uploading image to bucket. Please try again',
+	generateSignedInUrlErrorMessage: 'There was a problem generating signed in URL to store the image in bucket. Please try again',
+	encryptingImageErrorMessage: 'There was a problem with encrypting image before uploading it to bucket. Please try again',
+	searchImage: 'Search image',
+	hideFilters: 'Hide filters',
+	showFilters: 'Show filters',
+	searchSportal365ImagesErrorMessage: 'There was a problem with searching images from Sportal 365 API. Please try again',
+	previous: 'Previous',
+	next: 'Next'
 };
 
 const  App = () => {
 return (
-<ClassicQuizManager
+<ConfigurationManager
 	fansUnitedApiKey={'your-api-key'}
 	fansUnitedClientId={'your-client-id'}
 	labels={labels}/>
@@ -118,6 +151,7 @@ Here is all information about **`LabelsModel`**:
 | :-------------: |:-------------:| :-----:|
 | `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 |
+| `signOut` | Label for sign out button. | Sign Out |
 | `language` | Label for language tab. | Language |
 | `profilePreferences` | Label for profile preferences tab. | Profile Preferences |
 | `cacheTTL` | Label for cache TTL tab. | Cache TTL |
@@ -126,6 +160,7 @@ Here is all information about **`LabelsModel`**:
 | `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 |
+| `configLanguageTitle` | Title for language configuration section. | Language Configuration |
 | `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 |
@@ -146,4 +181,53 @@ Here is all information about **`LabelsModel`**:
 | `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! |
+| `uniquePreferencesIdErrorMessage` | Error validation message when new preference added doesn't have unique ID | Preferences' IDs must be unique! |
+| `uploadImage` | Label for upload image tab in image upload card | Upload Image |
+| `sportal365Images` | Label for Sportal365 images tab in image upload card | Sportal365 Images |
+| `search` | Label for search button | Search |
+| `clearImage` | Label for clear image button | Clear image |
+| `copyUrl` | Label for copy URL button | Copy URL |
+| `viewImage` | Label for view image button | View image |
+| `cropImage` | Label for crop image button | Crop image |
+| `aspectRatio` | Label for aspect ratio input | Aspect ratio |
+| `crop` | Label for crop button in crop modal | Crop |
+| `reset` | Label for reset button in crop modal | Reset |
+| `urlCopiedToClipboardMessage` | Toast success message when URL is copied to clipboard | URL copied to clipboard |
+| `imageDeletedMessage` | Toast success message when image is deleted | Image deleted |
+| `imageResetMessage` | Toast success message when image is reset to initial size | The initial size of the image has been restored |
+| `fromDate` | Label for from date filter in Sportal365 images | From Date |
+| `toDate` | Label for to date filter in Sportal365 images | To Date |
+| `uploadingImageMessage` | Toast success message when image is uploaded | You have successfully uploaded image |
+| `uploadingImageErrorMessage` | Toast error message when uploading image fails | There was a problem with uploading image to bucket. Please try again |
+| `generateSignedInUrlErrorMessage` | Toast error message when generating signed URL fails | There was a problem generating signed in URL to store the image in bucket. Please try again |
+| `encryptingImageErrorMessage` | Toast error message when encrypting image fails | There was a problem with encrypting image before uploading it to bucket. Please try again |
+| `searchImage` | Placeholder for search image input | Search image |
+| `hideFilters` | Label for hide filters button in Sportal365 images | Hide filters |
+| `showFilters` | Label for show filters button in Sportal365 images | Show filters |
+| `searchSportal365ImagesErrorMessage` | Toast error message when searching Sportal365 images fails | There was a problem with searching images from Sportal 365 API. Please try again |
+| `previous` | Label for previous page button in Sportal365 images pagination | Previous |
+| `next` | Label for next page button in Sportal365 images pagination | Next |
+
+## Changelog
+
+### 1.5.0 - 2025-12-23
+
+- **Added:**
+  - New card container in miscellaneous configuration general settings for rules display
+  - Integration with Sportal365 Images API for image search and selection
+
+- **Improved:**
+  - Default image configuration now supports multiple input methods (URL input or image upload)
+  - Clients can choose between legacy URL input behavior or new image upload functionality
+
+### 1.4.0 - 2025-11-29
+
+- **Added:**
+  - User-Centric Widgets configuration management tab with full CRUD operations
+  - Multi-tab configuration form with 6 sections: General, Firebase, Theme Options, Leads, Miscellaneous, and Legacy
+  - Raw JSON mode toggle for advanced configuration editing
+  - Integrated color pickers for theme customization
+  - Support for light and dark mode color schemes
+  - Customizable spacing scales, typography, border sizes, and border radius values
+  - Lead form configuration with field management and country code selection
+  - Firebase integration settings configuration

package/components/Main.d.ts

@@ -7,6 +7,8 @@ type MainProps = {
     fansUnitedEnvironment?: string;
     labels?: LabelsModel;
     hideSignOutButton?: boolean;
+    sportal365Project?: string;
+    sportal365Infrastructure?: 'shared' | 'betway';
 };
 declare const Main: React.FC<MainProps>;
 export default Main;

package/components/Tabs/UserCentricWidgets/ConfigurationForm.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+interface ClientApiKey {
+    value: string;
+    label: string;
+}
+interface ConfigurationFormProps {
+    title: string;
+    description: string;
+    config: any;
+    clientApiKeys: ClientApiKey[];
+    onTitleChange: (value: string) => void;
+    onDescriptionChange: (value: string) => void;
+    onConfigChange: (config: any) => void;
+    onClose: () => void;
+    onSave: () => void;
+    isSubmitting: boolean;
+    isEditing: boolean;
+}
+declare const ConfigurationForm: React.FC<ConfigurationFormProps>;
+export default ConfigurationForm;

package/components/Tabs/UserCentricWidgets/LeadsConfiguration.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+interface LeadsConfigurationProps {
+    config: any;
+    onConfigChange: (path: string[], value: any) => void;
+    getConfigValue: (path: string[], defaultValue?: any) => any;
+}
+declare const LeadsConfiguration: React.FC<LeadsConfigurationProps>;
+export default LeadsConfiguration;

package/components/Tabs/UserCentricWidgets/LegacyConfiguration.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+interface LegacyConfigurationProps {
+    config: any;
+    onConfigChange: (path: string[], value: any) => void;
+    getConfigValue: (path: string[], defaultValue?: any) => any;
+}
+declare const LegacyConfiguration: React.FC<LegacyConfigurationProps>;
+export default LegacyConfiguration;

package/components/Tabs/UserCentricWidgets/MiscConfiguration.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface MiscConfigurationProps {
+    onConfigChange: (path: string[], value: any) => void;
+    getConfigValue: (path: string[], defaultValue?: any) => any;
+}
+declare const MiscConfiguration: React.FC<MiscConfigurationProps>;
+export default MiscConfiguration;

package/components/Tabs/UserCentricWidgets/ThemeOptionsConfiguration.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface ThemeOptionsConfigurationProps {
+    onConfigChange: (path: string[], value: any) => void;
+    getConfigValue: (path: string[], defaultValue?: any) => any;
+}
+declare const ThemeOptionsConfiguration: React.FC<ThemeOptionsConfigurationProps>;
+export default ThemeOptionsConfiguration;

package/components/Tabs/UserCentricWidgets/UserCentricWidgets.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const UserCentricWidgets: React.FC;
+export default UserCentricWidgets;

package/components/Tabs/UserCentricWidgets/defaultThemeOptions.d.ts

@@ -0,0 +1,182 @@
+declare const defaultThemeOptions: {
+    mode: string;
+    spacingScale: {
+        '3xs': string;
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+    colorSchemes: {
+        light: {
+            palette: {
+                success: {
+                    plainColor: string;
+                    outlinedBorder: string;
+                };
+                danger: {
+                    softBg: string;
+                    plainColor: string;
+                    outlinedBorder: string;
+                };
+                primary: {
+                    plainColor: string;
+                    outlinedBorder: string;
+                    onPrimary: string;
+                    primaryContainer: string;
+                };
+                warning: {
+                    softBg: string;
+                    plainColor: string;
+                };
+                neutral: {
+                    softBg: string;
+                    solidBg: string;
+                    solidColor: string;
+                    plainActiveBg: string;
+                    outlinedBorder: string;
+                    outlinedColor: string;
+                    outlinedHoverBg: string;
+                    plainHoverBg: string;
+                    plainHoverColor: string;
+                    plainColor: string;
+                    solidHoverBg: string;
+                };
+                background: {
+                    surface: string;
+                    popup: string;
+                };
+            };
+            textPrimary: string;
+            textSecondary: string;
+            textColor: string;
+            textDisabled: string;
+            surface: string;
+            onSurface: string;
+            surfaceVariant: string;
+            surfaceTintDim: string;
+            surfaceInverse: string;
+            outlineEnabledBorder: string;
+            secondaryContainer: string;
+        };
+        dark: {
+            palette: {
+                primary: {
+                    plainColor: string;
+                    outlinedBorder: string;
+                    onPrimary: string;
+                    primaryContainer: string;
+                };
+                success: {
+                    plainColor: string;
+                    outlinedBorder: string;
+                };
+                danger: {
+                    softBg: string;
+                    plainColor: string;
+                    outlinedBorder: string;
+                };
+                warning: {
+                    softBg: string;
+                    plainColor: string;
+                };
+                neutral: {
+                    softBg: string;
+                    solidBg: string;
+                    solidColor: string;
+                    plainActiveBg: string;
+                    outlinedBorder: string;
+                    outlinedColor: string;
+                    outlinedHoverBg: string;
+                    plainHoverBg: string;
+                    plainHoverColor: string;
+                    plainColor: string;
+                    solidHoverBg: string;
+                };
+                background: {
+                    surface: string;
+                    popup: string;
+                };
+            };
+            textPrimary: string;
+            textSecondary: string;
+            textColor: string;
+            textDisabled: string;
+            surface: string;
+            onSurface: string;
+            surfaceVariant: string;
+            surfaceTintDim: string;
+            surfaceInverse: string;
+            outlineEnabledBorder: string;
+            secondaryContainer: string;
+        };
+    };
+    customFontFamily: {
+        light: {
+            primary: string;
+            secondary: string;
+        };
+        dark: {
+            primary: string;
+            secondary: string;
+        };
+    };
+    customRadius: {
+        light: {
+            none: string;
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            full: string;
+        };
+        dark: {
+            none: string;
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            full: string;
+        };
+    };
+    border: {
+        light: {
+            size: string;
+        };
+        dark: {
+            size: string;
+        };
+    };
+    imageBackgroundGradient: {
+        light: {
+            standard: string;
+            split: string;
+        };
+        dark: {
+            standard: string;
+            split: string;
+            overlay: string;
+        };
+    };
+    customBreakpoints: {
+        values: {
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+            xxl: number;
+        };
+    };
+};
+export default defaultThemeOptions;