@djangocfg/layouts 2.1.476 → 2.1.478

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.476",
+  "version": "2.1.478",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -89,12 +89,12 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/analytics": "^2.1.476",
-    "@djangocfg/api": "^2.1.476",
-    "@djangocfg/centrifugo": "^2.1.476",
-    "@djangocfg/devtools": "^2.1.476",
-    "@djangocfg/i18n": "^2.1.476",
-    "@djangocfg/ui-core": "^2.1.476",
+    "@djangocfg/analytics": "^2.1.478",
+    "@djangocfg/api": "^2.1.478",
+    "@djangocfg/centrifugo": "^2.1.478",
+    "@djangocfg/devtools": "^2.1.478",
+    "@djangocfg/i18n": "^2.1.478",
+    "@djangocfg/ui-core": "^2.1.478",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -124,14 +124,14 @@
     "uuid": "^11.1.1"
   },
   "devDependencies": {
-    "@djangocfg/analytics": "^2.1.476",
-    "@djangocfg/api": "^2.1.476",
-    "@djangocfg/centrifugo": "^2.1.476",
-    "@djangocfg/devtools": "^2.1.476",
-    "@djangocfg/i18n": "^2.1.476",
-    "@djangocfg/typescript-config": "^2.1.476",
-    "@djangocfg/ui-core": "^2.1.476",
-    "@djangocfg/ui-tools": "^2.1.476",
+    "@djangocfg/analytics": "^2.1.478",
+    "@djangocfg/api": "^2.1.478",
+    "@djangocfg/centrifugo": "^2.1.478",
+    "@djangocfg/devtools": "^2.1.478",
+    "@djangocfg/i18n": "^2.1.478",
+    "@djangocfg/typescript-config": "^2.1.478",
+    "@djangocfg/ui-core": "^2.1.478",
+    "@djangocfg/ui-tools": "^2.1.478",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

package/src/layouts/AuthLayout/components/steps/IdentifierStep.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import { Github } from 'lucide-react';
-import React, { memo, useMemo } from 'react';
+import React, { memo, useEffect, useMemo, useRef } from 'react';
 
 import { useGithubAuth } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
-import { Input } from '@djangocfg/ui-core/components';
+import { Checkbox, Input } from '@djangocfg/ui-core/components';
 
 import { useAuthLayoutContext } from '../../AuthLayout';
 import { useAuthFormContext } from '../../context';
@@ -47,11 +47,40 @@ function IdentifierStepRaw() {
     privacyUrl,
     enableGithubAuth,
     sourceUrl,
+    marketingConsent,
+    marketingConsentConfig,
     setIdentifier,
+    setMarketingConsent,
     setError,
     handleIdentifierSubmit,
   } = useAuthFormContext();
 
+  // Derived consent values — computed before the JSX return.
+  const consentEnabled = Boolean(marketingConsentConfig?.enabled);
+  const consentChecked = marketingConsent === true;
+  const consentDefaultChecked = marketingConsentConfig?.defaultChecked;
+
+  // Once the user toggles the checkbox, no default may overwrite their choice.
+  const consentTouchedRef = useRef(false);
+
+  // Default checked-state resolution: explicit `defaultChecked` (typically the
+  // server-decided consent policy) wins; the timezone heuristic is only the
+  // fallback while it is undefined (policy loading/unavailable). The policy
+  // usually arrives async after mount, so a late explicit default still
+  // replaces the fallback — but never a user's own choice.
+  useEffect(() => {
+    if (!consentEnabled || consentTouchedRef.current) return;
+    if (consentDefaultChecked !== undefined) {
+      if (marketingConsent !== consentDefaultChecked) setMarketingConsent(consentDefaultChecked);
+      return;
+    }
+    if (marketingConsent !== null) return;
+    // Jurisdiction heuristic v1: European timezones default to UNCHECKED
+    // (opt-in regimes), everywhere else defaults to checked.
+    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone ?? '';
+    setMarketingConsent(!timeZone.startsWith('Europe/'));
+  }, [consentEnabled, consentDefaultChecked, marketingConsent, setMarketingConsent]);
+
   // Translations
   const t = useAppT();
   const content = useMemo(() => ({
@@ -95,6 +124,24 @@ function IdentifierStepRaw() {
           className="auth-input"
         />
 
+        {consentEnabled && (
+          <label className="auth-marketing-consent">
+            <Checkbox
+              checked={consentChecked}
+              onCheckedChange={(checked) => {
+                consentTouchedRef.current = true;
+                setMarketingConsent(checked === true);
+              }}
+              disabled={isLoading}
+              className="auth-marketing-consent-checkbox"
+            />
+            {/* Label copy comes from the consuming app — no product wording here. */}
+            <span className="auth-marketing-consent-label">
+              {marketingConsentConfig?.label}
+            </span>
+          </label>
+        )}
+
         <AuthError message={error} />
 
         <AuthButton

package/src/layouts/AuthLayout/context.tsx

@@ -27,6 +27,7 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
   enableGithubAuth = false,
   logo,
   redirectUrl,
+  marketingConsent,
   onIdentifierSuccess,
   onOTPSuccess,
   onError,
@@ -44,6 +45,10 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
     sourceUrl,
     redirectUrl,
     requireTermsAcceptance,
+    // Presence of this option is what makes the OTP request carry consent fields.
+    marketingConsent: marketingConsent?.enabled
+      ? { disclosureVersion: marketingConsent.disclosureVersion }
+      : undefined,
   });
 
   const value: AuthFormContextType = useMemo(
@@ -57,6 +62,8 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
       enableGithubAuth,
       logo,
       redirectUrl,
+      // Renamed: `marketingConsent` (the name) is the checkbox STATE from the form hook.
+      marketingConsentConfig: marketingConsent,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
@@ -68,6 +75,7 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
       enableGithubAuth,
       logo,
       redirectUrl,
+      marketingConsent,
     ]
   );
 

package/src/layouts/AuthLayout/styles/auth.css

@@ -404,6 +404,30 @@
   color: var(--foreground);
 }
 
+/* ===== MARKETING CONSENT (opt-in checkbox on the identifier step) ===== */
+
+.auth-marketing-consent {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  text-align: left;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  user-select: none;
+}
+
+.auth-marketing-consent-checkbox {
+  flex-shrink: 0;
+  /* Optically align the box with the first line of the label copy. */
+  margin-top: 0.0625rem;
+}
+
+.auth-marketing-consent-label {
+  cursor: pointer;
+}
+
 /* ===== REMEMBER ME ===== */
 
 .auth-remember {

package/src/layouts/AuthLayout/types.ts

@@ -29,6 +29,27 @@ export type { AuthBackgroundConfig, AuthShellVariant, AuthShellContextValue } fr
 // Layout Config — UI-specific configuration for AuthLayout
 // ─────────────────────────────────────────────────────────────────────────────
 
+/**
+ * Marketing-consent checkbox on the identifier step.
+ *
+ * The label copy comes from the consuming app (its own i18n) — the shared
+ * packages ship no product-specific wording.
+ */
+export interface AuthMarketingConsentConfig {
+  /** Render the checkbox and send consent fields with the OTP request. */
+  enabled: boolean;
+  /** Version tag of the disclosure copy, sent as `consent_disclosure_version`. */
+  disclosureVersion: string;
+  /** Checkbox label — arrives from the app, not from @djangocfg/i18n. */
+  label: React.ReactNode;
+  /**
+   * Explicit default checked-state (e.g. server-decided from the consent
+   * policy endpoint). Wins over the built-in timezone heuristic, which
+   * remains the fallback while this is undefined (policy loading/failed).
+   */
+  defaultChecked?: boolean;
+}
+
 export interface AuthLayoutConfig {
   /** Support page URL */
   supportUrl?: string;
@@ -45,13 +66,20 @@ export interface AuthLayoutConfig {
   logo?: React.ReactNode;
   /** URL to redirect after successful auth (default: /dashboard) */
   redirectUrl?: string;
+  /** Optional marketing-consent checkbox on the identifier step. Absent ⇒ no checkbox, OTP body unchanged. */
+  marketingConsent?: AuthMarketingConsentConfig;
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Context — form state + layout config merged for step components
 // ─────────────────────────────────────────────────────────────────────────────
 
-export interface AuthFormContextType extends AuthFormReturn, AuthLayoutConfig {}
+// `marketingConsent` is omitted from the config side of the merge: the name is
+// taken by the checkbox *state* (boolean | null) from AuthFormReturn, so the
+// prop object is re-exposed as `marketingConsentConfig`.
+export interface AuthFormContextType extends AuthFormReturn, Omit<AuthLayoutConfig, 'marketingConsent'> {
+  marketingConsentConfig?: AuthMarketingConsentConfig;
+}
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Component Props

package/src/testing/MockAuthFormProvider.tsx

@@ -57,6 +57,7 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
   enableGithubAuth = false,
   logo,
   redirectUrl = '/dashboard',
+  marketingConsent: marketingConsentConfig,
 
   // Initial state
   step: initialStep = 'identifier',
@@ -80,6 +81,7 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
   const [otp, setOtp] = useState(initialOtp);
   const [isLoading, setIsLoading] = useState(initialLoading);
   const [acceptedTerms, setAcceptedTerms] = useState(initialAcceptedTerms);
+  const [marketingConsent, setMarketingConsent] = useState<boolean | null>(null);
   const [error, setError] = useState(initialError);
   const [twoFactorSessionId, setTwoFactorSessionId] = useState<string | null>(initialTwoFactorSessionId);
   const [shouldPrompt2FA, setShouldPrompt2FA] = useState(initialShouldPrompt2FA);
@@ -101,6 +103,7 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
       otp,
       isLoading,
       acceptedTerms,
+      marketingConsent,
       step,
       error,
       twoFactorSessionId,
@@ -116,6 +119,7 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
       setIdentifier,
       setOtp,
       setAcceptedTerms,
+      setMarketingConsent,
       setError,
       clearError: () => setError(''),
       setStep,
@@ -159,12 +163,14 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
       enableGithubAuth,
       logo,
       redirectUrl,
+      marketingConsentConfig,
     };
   }, [
     identifier,
     otp,
     isLoading,
     acceptedTerms,
+    marketingConsent,
     step,
     error,
     twoFactorSessionId,
@@ -183,6 +189,7 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
     enableGithubAuth,
     logo,
     redirectUrl,
+    marketingConsentConfig,
   ]);
 
   return <AuthFormContext.Provider value={value}>{children}</AuthFormContext.Provider>;