@qssolutions/ssas-registration-form 1.0.1 → 1.0.2

package/README.md

@@ -4,7 +4,7 @@ Reusable registration form library for SSAS scenarios, with:
 
 - React component usage (`SSASRegistrationForm`)
 - Framework-agnostic Web Component usage (`<ssas-registration-form>`)
-- Configurable theme and feature flags
+- Configurable theme, language, and feature flags
 - Built-in API integration for partner lookup, localization, and registration
 
 ## Installation
@@ -13,29 +13,24 @@ Reusable registration form library for SSAS scenarios, with:
 npm install @qssolutions/ssas-registration-form
 ```
 
-### Peer dependencies
-
-```bash
-npm install react react-dom react-hook-form @fluentui/react react-i18next i18next react-google-recaptcha
-```
+> **Peer dependencies** — `react` and `react-dom` must be installed in your project:
+> ```bash
+> npm install react react-dom
+> ```
 
 ## Quick start (React)
 
 ```tsx
 import React from 'react';
-import { SSASRegistrationForm, FormLibraryConfig } from '@qssolutions/ssas-registration-form';
+import { SSASRegistrationForm, type FormLibraryConfig } from '@qssolutions/ssas-registration-form';
 
 const config: FormLibraryConfig = {
-  partnerName: 'Microsoft',
-  apiBaseUrl: 'https://portal.selfserviceassessment.com',
+  partnerName: 'MyPartner',
   theme: {
     primaryColor: '#00BAE4',
+    backgroundColor: '#FCFCFF',
   },
-  features: {
-    enablePartnerMode: true,
-    requireTermsAcceptance: true,
-    requirePrivacyAcceptance: true,
-  },
+  languageCode: 'en',
   onSuccess: (email) => {
     console.log('Registration successful for', email);
   },
@@ -59,8 +54,12 @@ Use the browser bundle directly:
 <script>
   const form = document.getElementById('registrationForm');
   form.config = {
-    partnerName: 'Microsoft',
-    apiBaseUrl: 'https://portal.selfserviceassessment.com',
+    partnerName: 'MyPartner',
+    languageCode: 'en',
+    theme: {
+      primaryColor: '#00BAE4',
+      backgroundColor: '#FCFCFF',
+    },
     onSuccess: (email) => console.log('Success:', email),
     onError: (error) => console.error('Error:', error),
   };
@@ -73,7 +72,7 @@ Use the browser bundle directly:
 
 ## Configuration
 
-`FormLibraryConfig`:
+Full `FormLibraryConfig` reference:
 
 ```ts
 type SupportedLanguage =
@@ -81,136 +80,154 @@ type SupportedLanguage =
   | 'ar' | 'he' | 'pt-br' | 'tr' | 'id' | 'th' | 'vi' | 'pl';
 
 interface FormLibraryConfig {
-  // Required for partner-based initialization
+  // ── Required ────────────────────────────────────────────────────────────────
+
+  // Partner identifier used for lookup and domain resolution
   partnerName: string;
 
-  // Optional base URL used for initial partner lookup
-  // Default fallback: https://portal.selfserviceassessment.com
-  apiBaseUrl?: string;
+  // ── Language ────────────────────────────────────────────────────────────────
+
+  // Override the form language. Falls back to the partner's configured language,
+  // then to 'en' if neither is set.
+  languageCode?: SupportedLanguage;
+
+  // ── Theme ───────────────────────────────────────────────────────────────────
 
-  // Visual customization
   theme?: {
+    // Accent color used for buttons and interactive elements
+    // Default: resolved from partner's ColorWidget setting, falling back to #00BAE4
     primaryColor?: string;
+
+    // Page background color
+    // Default: #FCFCFF
     backgroundColor?: string;
+
     fonts?: {
+      // Default: 'Proxima Nova, sans-serif'
       family?: string;
       sizes?: {
-        heading?: number;
-        subheading?: number;
-        body?: number;
+        heading?: number;     // Default: 36
+        subheading?: number;  // Default: 18
+        body?: number;        // Default: 16
       };
     };
   };
 
-  // Inline style overrides
+  // ── Layout overrides ────────────────────────────────────────────────────────
+
+  // Inline style overrides applied on top of the default FluentUI class styles.
+  // topWrapper  — the outer centering/padding container
+  // formWrapper — the white card that wraps the form fields
   customStyles?: {
     topWrapper?: React.CSSProperties;
     formWrapper?: React.CSSProperties;
   };
 
-  // Feature flags
-  features?: {
-    enablePartnerMode?: boolean;
-    requireTermsAcceptance?: boolean;
-    requirePrivacyAcceptance?: boolean;
-  };
+  // ── Callbacks ───────────────────────────────────────────────────────────────
 
-  // Optional callbacks
-  onSubmit?: (data: IUser) => Promise<void>;
+  // Custom async email validation (receives AbortSignal for debounce cancellation)
   onValidateEmail?: (email: string, signal?: AbortSignal) => Promise<boolean>;
+
+  // Called with the registered email on successful submission
   onSuccess?: (email: string) => void;
+
+  // Called with a human-readable error message on failure
   onError?: (error: string) => void;
-  onNavigate?: (path: string) => void;
 
-  // Optional custom policy links
+  // ── Policy links ────────────────────────────────────────────────────────────
+
   termsAndConditionsUrl?: string;
   privacyNoticeUrl?: string;
 }
 ```
 
-### Default behavior
-
-- Default fonts: `Proxima Nova, sans-serif`
-- Default primary color fallback in styles: `#00BAE4`
-- Default feature flags:
-  - `enablePartnerMode: true`
-  - `requireTermsAcceptance: true`
-  - `requirePrivacyAcceptance: true`
-
-## Runtime flow
+### Defaults
 
-The component resolves runtime data in this order:
+| Option | Default |
+|---|---|
+| `languageCode` | `'en'` (or partner language if set) |
+| `theme.backgroundColor` | `'#FCFCFF'` |
+| `theme.primaryColor` | Partner's ColorWidget value → `'#00BAE4'` |
+| `theme.fonts.family` | `'Proxima Nova, sans-serif'` |
+| `theme.fonts.sizes.heading` | `36` |
+| `theme.fonts.sizes.subheading` | `18` |
+| `theme.fonts.sizes.body` | `16` |
 
-1. Fetch partner by `partnerName`
-2. Build partner-specific API base (`https://{partner.domain}`)
-3. Fetch countries, org sizes, industries, and localization
-4. Submit registration via `/user/add-from-partner`
+### Custom layout styles
 
-On submit lifecycle:
+`customStyles` lets you override the two main layout containers with plain CSS properties. These are applied as inline `style` attributes on top of the default class styles:
 
-- Success calls `onSuccess(email)`
-- Failures call `onError(message)`
-
-## Web Component event
-
-Currently emitted event:
+```ts
+customStyles: {
+  // outer container — controls padding/alignment around the form card
+  topWrapper: { padding: '20px 10%' },
 
-- `ssas-form-ready` — fired after the React form is mounted inside the custom element
+  // the white form card — controls border, radius, width, etc.
+  formWrapper: { borderRadius: 0, border: 'none', minWidth: 'unset' },
+}
+```
 
-## Build outputs
+## Runtime flow
 
-Generated in `dist/`:
+1. Fetch partner record by `partnerName`
+2. Resolve partner domain → build service base URL (`https://{partner.domain}`)
+3. In parallel: fetch countries, org sizes, industries, localization
+4. Render form
 
-- `index.js` (CJS)
-- `index.esm.js` (ESM)
-- `index.d.ts` (types)
-- `web-component.js` (IIFE)
-- `web-component.min.js` (IIFE, minified)
+**Language resolution order:** `config.languageCode` → `partner.languageCode` → `'en'`
 
-## Scripts
+**Primary color resolution order:** `config.theme.primaryColor` → partner ColorWidget setting → `#00BAE4`
 
-- `npm run build` — build library + web component bundles
-- `npm run build:lib` — build React/library bundles
-- `npm run build:webcomponent` — build browser web-component bundles
-- `npm run watch` — watch library build
-- `npm run watch:webcomponent` — watch web-component build
-- `npm run dev` — build and open example react demo on port 8080
-- `npm run dev:watch` — watch web-component bundle and serve examples
-- `npm run serve` — serve project root at `http://localhost:8080`
-- `npm run lint` — run ESLint on `src`
+## Callbacks
 
-## Example pages
+| Callback | Signature | Description |
+|---|---|---|
+| `onSuccess` | `(email: string) => void` | Fired after successful registration |
+| `onError` | `(error: string) => void` | Fired on API or validation error |
+| `onValidateEmail` | `(email, signal?) => Promise<boolean>` | Custom async email check |
 
-- `example/index.html` — vanilla web-component demo
-- `example/react-example.html` — integration-style demo page
+## Web Component events
 
-Run locally:
+| Event | Description |
+|---|---|
+| `ssas-form-ready` | Fired after the React component mounts inside the custom element |
 
-```bash
-npm install
-npm run build
-npm run serve
-```
+## Build outputs
 
-Then open:
+Generated in `dist/`:
 
-- `http://localhost:8080/example/index.html`
-- `http://localhost:8080/example/react-example.html`
+| File | Format | Description |
+|---|---|---|
+| `index.js` | CJS | Node / CommonJS consumers |
+| `index.esm.js` | ESM | Vite / Webpack 5 / modern bundlers |
+| `index.d.ts` | — | TypeScript declarations |
+| `web-component.js` | IIFE | Browser bundle (unminified) |
+| `web-component.min.js` | IIFE | Browser bundle (minified, CDN) |
 
 ## Public exports
 
-Main entry exports include:
-
-- `SSASRegistrationForm`
-- `SSASFormElement`
-- `FormLibraryConfig`, `SupportedLanguage`
-- Model types (`IUser`, `IPartnerModel`, etc.)
-- `FormModel`, `FormType`
-- `FormDataModels`
-- `ApiService`
-- `useFormConfig`
-- Style helpers (`createFormStyles`, `textFieldStyles`, `choiceGroupStyles`)
+```ts
+// Components
+export { SSASRegistrationForm } from '...'
+export { SSASFormElement } from '...'         // web component class
+
+// Config & types
+export type { FormLibraryConfig, SupportedLanguage }
+export type { IUser, IPartnerModel, IPartnerSetting, IColorWidget,
+              ICountry, IOrgSize, IIndustry, ApiResponse }
+export { FormModel, FormType }
+
+// Data & utilities
+export { FormDataModels }                     // static dropdown option sets
+export { ApiService }
+export { useFormConfig }
+
+// Style helpers
+export { createFormStyles, textFieldStyles, choiceGroupStyles,
+         dropdownStyles, comboboxStyles, checkboxStyles }
+```
 
 ## License
 
-MIT
+MIT
+

package/dist/components/LowerFormSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LowerFormSection.d.ts","sourceRoot":"","sources":["../../src/components/LowerFormSection.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAa,KAAK,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACxF,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAI/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAGrD,KAAK,qBAAqB,GAAG;IACzB,QAAQ,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;IACjC,aAAa,EAAE,OAAO,CAAC;IACvB,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IAC3B,WAAW,EAAE,oBAAoB,CAAC;IAClC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAkJtD,CAAC"}
+{"version":3,"file":"LowerFormSection.d.ts","sourceRoot":"","sources":["../../src/components/LowerFormSection.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAY,MAAM,OAAO,CAAA;AAC3C,OAAO,EAEH,KAAK,EACL,oBAAoB,EACpB,aAAa,EAChB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAI9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAMpD,KAAK,qBAAqB,GAAG;IACzB,QAAQ,EAAE,eAAe,CAAC,KAAK,CAAC,CAAA;IAChC,aAAa,EAAE,OAAO,CAAA;IACtB,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC,CAAA;IAC1B,WAAW,EAAE,oBAAoB,CAAA;IACjC,MAAM,EAAE,iBAAiB,CAAA;IACzB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,aAAa,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA8ItD,CAAA"}

package/dist/components/SSASRegistrationForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SSASRegistrationForm.d.ts","sourceRoot":"","sources":["../../src/components/SSASRegistrationForm.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAA;AAY/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAWpD,eAAO,MAAM,WAAW;;;;;CAKvB,CAAA;AAED,UAAU,yBAAyB;IAC/B,MAAM,EAAE,iBAAiB,CAAA;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA0hB9D,CAAA"}
+{"version":3,"file":"SSASRegistrationForm.d.ts","sourceRoot":"","sources":["../../src/components/SSASRegistrationForm.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAA;AAY/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAWpD,eAAO,MAAM,WAAW;;;;;CAKvB,CAAA;AAED,UAAU,yBAAyB;IAC/B,MAAM,EAAE,iBAAiB,CAAA;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA4hB9D,CAAA"}

package/dist/components/UpperFormSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UpperFormSection.d.ts","sourceRoot":"","sources":["../../src/components/UpperFormSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAmC,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACpG,OAAO,EACH,OAAO,EACP,WAAW,EACX,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,cAAc,EACd,YAAY,EACf,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,KAAK,EAAa,oBAAoB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACxF,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAKpD,KAAK,qBAAqB,GAAG;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,mBAAmB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACnE,QAAQ,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;IACjC,QAAQ,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;IACjC,WAAW,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACvC,OAAO,EAAE,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC7B,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IAC3B,OAAO,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC/B,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;IAC3B,WAAW,EAAE,oBAAoB,CAAC;IAClC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,EAAE,GAAG,CAAC;IACZ,cAAc,CAAC,EAAE,eAAe,EAAE,CAAC;IACnC,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,kBAAkB,CAAC,EAAE,eAAe,EAAE,CAAC;IACvC,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA8FtD,CAAC"}
+{"version":3,"file":"UpperFormSection.d.ts","sourceRoot":"","sources":["../../src/components/UpperFormSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAmC,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACpG,OAAO,EACH,OAAO,EACP,WAAW,EACX,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,cAAc,EACd,YAAY,EACf,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,KAAK,EAAa,oBAAoB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACxF,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAKpD,KAAK,qBAAqB,GAAG;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,mBAAmB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACnE,QAAQ,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;IACjC,QAAQ,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;IACjC,WAAW,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACvC,OAAO,EAAE,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC7B,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IAC3B,OAAO,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC/B,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;IAC3B,WAAW,EAAE,oBAAoB,CAAC;IAClC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,EAAE,GAAG,CAAC;IACZ,cAAc,CAAC,EAAE,eAAe,EAAE,CAAC;IACnC,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,kBAAkB,CAAC,EAAE,eAAe,EAAE,CAAC;IACvC,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA4FtD,CAAC"}

package/dist/index.esm.js

@@ -36,6 +36,7 @@ var FormType;
 })(FormType || (FormType = {}));
 
 const defaultConfig = {
+    languageCode: 'en',
     theme: {
         // primaryColor: '#006B83',
         backgroundColor: '#FCFCFF',
@@ -48,11 +49,6 @@ const defaultConfig = {
             },
         },
     },
-    features: {
-        enablePartnerMode: true,
-        requireTermsAcceptance: true,
-        requirePrivacyAcceptance: true,
-    },
 };
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -21523,11 +21519,11 @@ class ApiService {
     }
 }
 
-const createFormStyles = (primaryColor = '#00BAE4', fonts) => {
+const createFormStyles = (primaryColor = '#00BAE4', fonts, backgroundColor = '#FCFCFF') => {
     const fontFamily = fonts?.family || 'Proxima Nova, sans-serif';
     return mergeStyleSets({
         mainContainer: {
-            backgroundColor: '#FCFCFF',
+            backgroundColor: backgroundColor,
             fontFamily: fontFamily,
             WebkitFontSmoothing: 'antialiased',
         },
@@ -22178,14 +22174,14 @@ const UpperFormSection = ({ isRegistering, performByPartner, setPerformByPartner
         isHearAbout ? FormModel.HearAbout : false,
     ];
     return (React__default.createElement(React__default.Fragment, null,
-        config.features?.enablePartnerMode && (React__default.createElement(ChoiceGroup, { defaultSelectedKey: "ByCustomer", options: choiceGroupOptions, styles: choiceGroupStyles(isRTLContent(partnerData?.languageCode), primaryColor, config.theme?.fonts), onChange: (e, option) => {
+        React__default.createElement(ChoiceGroup, { defaultSelectedKey: "ByCustomer", options: choiceGroupOptions, styles: choiceGroupStyles(isRTLContent(partnerData?.languageCode), primaryColor, config.theme?.fonts), onChange: (e, option) => {
                 // Reset the partner fields
                 setValue(FormModel.CustomerPartnerMail, "");
                 setValue(FormModel.CustomerPartnerName, "");
                 clearErrors(FormModel.CustomerPartnerMail);
                 clearErrors(FormModel.CustomerPartnerName);
                 setPerformByPartner(option?.key === "ByPartner");
-            } })),
+            } }),
         React__default.createElement("div", { className: styles.inputFieldContainer },
             React__default.createElement(FormComponentRenderer, { formModels: formComponentList, isRegistering: isRegistering, control: control, setValue: setValue, setError: setError, clearErrors: clearErrors, errors: errors, trigger: trigger, performByPartner: performByPartner, watchFormField: watch, translation: translation, config: config, apiService: apiService, styles: styles, countryOptions: countryOptions, orgSizingOptions: orgSizingOptions, orgIndustryOptions: orgIndustryOptions, hearAboutOptions: hearAboutOptions, partnerData: partnerData, primaryColor: primaryColor }))));
 };
@@ -22306,7 +22302,8 @@ const LowerFormSection = ({ setValue, isRegistering, errors, translation, config
     const [privacyAcceptance, setPrivacyAcceptance] = useState(false);
     const primaryColor = primaryColorProp || DEFAULT_PRIMARY_COLOR;
     const recaptchaSiteKey = RECAPTCHA_DEFAULT_SITE_KEY;
-    const termsUrl = config.termsAndConditionsUrl || (partnerData ? partnerData.domain + "/terms-and-conditions" : "");
+    const termsUrl = config.termsAndConditionsUrl ||
+        (partnerData ? partnerData.domain + "/terms-and-conditions" : "");
     const privacyUrl = config.privacyNoticeUrl || translation.PrivacyStatementLink;
     const onChangeTermCheckbox = (ev, checked) => {
         if (checked) {
@@ -22340,15 +22337,13 @@ const LowerFormSection = ({ setValue, isRegistering, errors, translation, config
         else
             return defaultRender ? defaultRender() : null;
     };
-    const shouldRequireTerms = config.features?.requireTermsAcceptance !== false;
-    const shouldRequirePrivacy = config.features?.requirePrivacyAcceptance !== false;
     return (React__default.createElement("div", null,
         React__default.createElement("div", { style: { margin: "20px 0" } }, React__default.createElement(ReCAPTCHA, {
             sitekey: recaptchaSiteKey,
-            onChange: (token) => token ? setCaptcha(true) : setCaptcha(false)
+            onChange: (token) => token ? setCaptcha(true) : setCaptcha(false),
         })),
-        shouldRequirePrivacy && (React__default.createElement(SSASCheckbox, { onRenderLabel: renderCheckboxPrivacy, styles: { root: { margin: "30px 0" } }, onChange: onChangePrivacyCheckbox, disabled: isRegistering, primaryColor: primaryColor, fonts: config.theme?.fonts })),
-        shouldRequireTerms && (React__default.createElement(SSASCheckbox, { onRenderLabel: renderCheckboxTerm, styles: { root: { margin: "30px 0" } }, onChange: onChangeTermCheckbox, disabled: isRegistering, primaryColor: primaryColor, fonts: config.theme?.fonts })),
+        React__default.createElement(SSASCheckbox, { onRenderLabel: renderCheckboxPrivacy, styles: { root: { margin: "30px 0" } }, onChange: onChangePrivacyCheckbox, disabled: isRegistering, primaryColor: primaryColor, fonts: config.theme?.fonts }),
+        React__default.createElement(SSASCheckbox, { onRenderLabel: renderCheckboxTerm, styles: { root: { margin: "30px 0" } }, onChange: onChangeTermCheckbox, disabled: isRegistering, primaryColor: primaryColor, fonts: config.theme?.fonts }),
         submissionError && (React__default.createElement("div", { style: {
                 backgroundColor: "#FDE7E9",
                 border: "1px solid #DC3545",
@@ -22367,9 +22362,9 @@ const LowerFormSection = ({ setValue, isRegistering, errors, translation, config
                 root: { display: "block", width: "100%" },
             }, type: "submit", disabled: !(Object.keys(errors).length === 0 &&
                 !isRegistering &&
-                (!shouldRequireTerms || termAcceptance) &&
-                (!shouldRequirePrivacy || privacyAcceptance) &&
-                (captcha)), onRenderMenuIcon: renderLoadingIcon })));
+                termAcceptance &&
+                privacyAcceptance &&
+                captcha), onRenderMenuIcon: renderLoadingIcon })));
 };
 
 const SettingKeys = {
@@ -22391,7 +22386,7 @@ const SSASRegistrationForm = ({ config, }) => {
     const partnerApiService = useMemo(() => new ApiService(initCheckUrl), []);
     // Main service uses the partner's own domain once loaded
     const apiService = useMemo(() => new ApiService(partnerData?.domain ? new URL(`https://${partnerData?.domain}`).toString() : ""), [partnerData?.domain]);
-    const styles = useMemo(() => createFormStyles(mergedConfig.theme?.primaryColor || colorWidget?.column1, mergedConfig.theme?.fonts), [mergedConfig.theme?.primaryColor, mergedConfig.theme?.fonts, colorWidget?.column1]);
+    const styles = useMemo(() => createFormStyles(mergedConfig.theme?.primaryColor || colorWidget?.column1, mergedConfig.theme?.fonts, mergedConfig.theme?.backgroundColor), [mergedConfig.theme?.primaryColor, mergedConfig.theme?.fonts, mergedConfig.theme?.backgroundColor, colorWidget?.column1]);
     const [isRegistering, setIsRegistering] = useState(false);
     const [performByPartner, setPerformByPartner] = useState(false);
     const [finalStep, setFinalStep] = useState("");
@@ -22428,10 +22423,10 @@ const SSASRegistrationForm = ({ config, }) => {
         return LANGUAGE_OPTIONS.filter((l) => supportedLangs.includes(l.data.code));
     }, [partnerData?.supportedLanguages]);
     const defaultLanguage = useMemo(() => {
-        const currentLang = partnerData?.languageCode || "en";
+        const currentLang = mergedConfig.languageCode || partnerData?.languageCode || "en";
         return (languageOptions.find((x) => x.data.code === currentLang)?.text ||
             "English");
-    }, [partnerData?.languageCode, languageOptions]);
+    }, [mergedConfig.languageCode, partnerData?.languageCode, languageOptions]);
     const { handleSubmit, setValue, setError, control, watch, clearErrors, trigger, formState: { errors }, } = useForm({
         defaultValues: {
             orgSizingId: 1,
@@ -22522,7 +22517,7 @@ const SSASRegistrationForm = ({ config, }) => {
         // Load localization
         setIsLoadingLocalization(true);
         apiService
-            .getFormScreenLocalization(partnerData.languageCode || "en", partnerData.id, partnerData.languageCode)
+            .getFormScreenLocalization(mergedConfig.languageCode || partnerData.languageCode || "en", partnerData.id, mergedConfig.languageCode || partnerData.languageCode)
             .then((localization) => {
             setLocalizationData(localization);
         })
@@ -22664,7 +22659,7 @@ const SSASRegistrationForm = ({ config, }) => {
     if (finalStep) {
         // Default success screen
         return (React__default.createElement("div", { className: styles.mainContainer },
-            React__default.createElement("div", { className: styles.topWrapper },
+            React__default.createElement("div", { className: styles.topWrapper, style: mergedConfig.customStyles?.topWrapper },
                 React__default.createElement("div", { className: styles.finalStepContainer },
                     React__default.createElement("div", { className: styles.textBlock },
                         React__default.createElement("div", { style: {
@@ -22688,7 +22683,7 @@ const SSASRegistrationForm = ({ config, }) => {
                             } }, finalStep))))));
     }
     return (React__default.createElement("div", { className: styles.mainContainer },
-        React__default.createElement("div", { className: styles.topWrapper }, isLoadingData ? (React__default.createElement(Spinner, { label: "Loading form data...", styles: {
+        React__default.createElement("div", { className: styles.topWrapper, style: mergedConfig.customStyles?.topWrapper }, isLoadingData ? (React__default.createElement(Spinner, { label: "Loading form data...", styles: {
                 root: {
                     marginBottom: "20px",
                 },
@@ -22707,7 +22702,7 @@ const SSASRegistrationForm = ({ config, }) => {
                     fontSize: mergedConfig.theme?.fonts?.sizes
                         ?.subheading || 16,
                     lineHeight: "28px",
-                } }, "Your company is not eligible to use this form. Please contact your administrator for assistance."))) : (React__default.createElement("form", { className: styles.formWrapper, onSubmit: handleSubmit(submitForm), noValidate: true },
+                } }, "Your company is not eligible to use this form. Please contact your administrator for assistance."))) : (React__default.createElement("form", { className: styles.formWrapper, style: mergedConfig.customStyles?.formWrapper, onSubmit: handleSubmit(submitForm), noValidate: true },
             React__default.createElement("div", { style: { textAlign: "center" } },
                 React__default.createElement("div", { style: {
                         fontSize: mergedConfig.theme?.fonts?.sizes