fansunited-frontend-components 0.0.23-RC2 → 0.0.23

package/README.md

@@ -152,7 +152,7 @@ const themeOptions: CustomThemeOptions = {
           softBg: "#042F04",
         },
         danger: {
-          softBg: "#FEE4E2",
+          softBg: "#430A0A",
           plainColor: "#F44336",
           outlinedBorder: "#F44336",
         },
@@ -267,10 +267,11 @@ import { LeadsOptions } from "fansunited-frontend-core";
 
 const leads: LeadsOptions = {
   position: "before", // "before" | "after"
-  fields: ["fullName"], // | "fullName" | "firstName" | "lastName" | "email" | "gender" | "country" | "phoneCountryCode" | "phoneNumber";
+  fields: ["fullName"], // Available: "fullName" | "firstName" | "lastName" | "email" | "gender" | "country" | "phoneCountryCode" | "phoneNumber"
   campaignId: "test-quizzes",
   campaignName: "Test Quizzes",
   phoneCountryCode: "359", // When not provided will set the phone country code from component language prop. So for example if the language is "bg" and phoneCountryCode is not provided, it will fallback to "359"
+  syncWithProfile: true, // Optional: sync form data to user profile after successful submission
 };
 
 <ClassicQuizPlay {...otherProps} leads={leads} />;
@@ -381,6 +382,7 @@ import { WidgetTemplate } from "fansunited-frontend-core";
   }}
   leads={{
     phoneCountryCode: "44",
+    syncWithProfile: true,
   }}
 />
 ```
@@ -500,11 +502,44 @@ const leads: LeadsOptions = {
   campaignId: "poll-campaign-2024",
   campaignName: "User Opinion Poll",
   phoneCountryCode: "44", // Default country code for phone fields
+  syncWithProfile: true, // Optional: sync form data to user profile after successful submission
 };
 
 <PollVote {...otherProps} leads={leads} />;
 ```
 
+#### Profile Sync
+
+When `syncWithProfile` is enabled in the leads configuration, form data will be automatically synced to the user's profile after successful submission:
+
+```tsx
+import { LeadsOptions } from "fansunited-frontend-core";
+
+const leads: LeadsOptions = {
+  position: "after",
+  fields: ["firstName", "lastName", "email", "phoneNumber", "country"],
+  campaignId: "user-profile-sync",
+  campaignName: "Profile Sync Campaign",
+  syncWithProfile: true, // Enable profile synchronization
+};
+
+<PollVote {...otherProps} leads={leads} />
+```
+
+**How it works:**
+
+- Only fields that are both **included in the form configuration** AND **have non-empty values** will be synced
+- Supported fields: `fullName`, `firstName`, `lastName`, `email`, `phoneNumber`, `phoneCountryCode`, `country`, `gender`
+- Uses the SDK profile namespace: `sdk.profile.getOwn().setName().setEmail()...update()`
+- Profile sync failures are logged but don't break the lead collection flow
+- Sync happens automatically after successful lead form submission
+
+**Name Field Priority:**
+- If `fullName` is configured and has a value, it takes priority for the profile name
+- If both `firstName` and `lastName` are configured and have values, they are combined: `"firstName lastName"`
+- If only `firstName` is configured and has a value, it becomes the profile name
+- If only `lastName` is configured and has a value, it becomes the profile name
+
 #### Examples
 
 ##### Basic Poll
@@ -540,6 +575,7 @@ import { WidgetTemplate } from "fansunited-frontend-core";
     campaignId: "poll-campaign",
     campaignName: "User Survey 2024",
     phoneCountryCode: "44",
+    syncWithProfile: true,
   }}
   themeOptions={{
     mode: "dark",
@@ -580,6 +616,7 @@ Lead collection component for capturing user information with customizable forms
 | `imagePosition`              | `"left" \| "right"`   | Image position (STANDARD template only)   |
 | `defaultImagePlaceholderUrl` | `string`              | URL for default image placeholder         |
 | `phoneCountryCode`           | `string`              | Default country code for phone fields     |
+| `syncWithProfile`            | `boolean`             | Sync form data to user profile after successful submission |
 | `onSuccessCTA`               | `OnSuccessCTADetails` | Success page call to action configuration |
 | `customFields`               | `LeadCustomField[]`   | Additional custom form fields             |
 | `consents`                   | `LeadConsent[]`       | Consent checkboxes for privacy compliance |
@@ -736,6 +773,47 @@ const onSuccessCTA: OnSuccessCTADetails = {
 <CollectLead {...otherProps} onSuccessCTA={onSuccessCTA} />;
 ```
 
+#### Profile Sync
+
+Enable automatic profile synchronization to update user profiles with form data:
+
+```tsx
+<CollectLead
+  entityId="lead-form-123"
+  sdk={sdkInstance}
+  template={WidgetTemplate.STANDARD}
+  language="en"
+  fields={["firstName", "lastName", "email", "phoneNumber", "country", "gender"]}
+  syncWithProfile={true} // Enable profile synchronization
+  labels={{
+    title: "Update Your Profile",
+    submitButtonLabel: "Save & Update Profile",
+  }}
+/>
+```
+
+**Profile Sync Features:**
+
+- **Automatic Sync**: Form data is automatically synced to the user's profile after successful submission
+- **Field Mapping**: Only configured fields with non-empty values are synced to the profile
+- **Supported Fields**: `fullName`, `firstName`, `lastName`, `email`, `phoneNumber`, `phoneCountryCode`, `country`, `gender`
+- **SDK Integration**: Uses the profile builder pattern: `sdk.profile.getOwn().setName().setEmail()...update()`
+- **Error Handling**: Profile sync failures are logged but don't prevent lead collection
+- **Optional**: Defaults to `false`, completely opt-in behavior
+
+**Name Field Handling:**
+- **Priority 1**: `fullName` (if configured and has value) → sets profile name directly
+- **Priority 2**: `firstName` + `lastName` (if both configured and have values) → combined as `"firstName lastName"`
+- **Priority 3**: `firstName` only (if configured and has value) → sets profile name
+- **Priority 4**: `lastName` only (if configured and has value) → sets profile name
+
+**Use Cases:**
+
+- User registration forms that also update profiles
+- Newsletter signups that capture additional profile information
+- Contact forms that enhance user profiles with new data
+- Profile update forms with lead tracking
+
 #### Examples
 
 ##### Basic Lead Form
@@ -763,6 +841,7 @@ import { WidgetTemplate } from "fansunited-frontend-core";
   language="en"
   fields={["fullName", "email", "phoneNumber", "country"]}
   phoneCountryCode="44"
+  syncWithProfile={true}
   customFields={[
     {
       key: "company",
@@ -946,6 +1025,7 @@ const leads: LeadsOptions = {
   campaignId: "personality-quiz-2024",
   campaignName: "Personality Assessment Campaign",
   phoneCountryCode: "1", // Default country code for phone fields
+  syncWithProfile: true, // Optional: sync form data to user profile after successful submission
 };
 
 <PersonalityQuizPlay {...otherProps} leads={leads} />;
@@ -1003,6 +1083,7 @@ import { WidgetTemplate } from "fansunited-frontend-core";
     campaignId: "personality-campaign",
     campaignName: "Personality Assessment 2024",
     phoneCountryCode: "44",
+    syncWithProfile: true,
   }}
   themeOptions={{
     mode: "dark",
@@ -1252,6 +1333,7 @@ const leads: LeadsOptions = {
   campaignId: "match-quiz-2024",
   campaignName: "Football Prediction Campaign",
   phoneCountryCode: "44", // Default country code for phone fields
+  syncWithProfile: true, // Optional: sync form data to user profile after successful submission
 };
 
 <MatchQuizPlay {...otherProps} leads={leads} />;
@@ -1296,6 +1378,7 @@ import { WidgetTemplate } from "fansunited-frontend-core";
     campaignId: "match-prediction-campaign",
     campaignName: "Football Predictions 2024",
     phoneCountryCode: "44",
+    syncWithProfile: true,
   }}
   themeOptions={{
     mode: "dark",