@akinon/pz-theme 2.0.37-rc.0 → 2.0.37

package/src/blocks/register-form-block.tsx

@@ -0,0 +1,362 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { signIn } from 'next-auth/react';
+import { useLocalization } from '@akinon/next/hooks';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { readToggle } from './product-block-utils';
+import { BlockRendererProps } from './block-renderer-registry';
+
+/**
+ * pz brands serialise an AuthError[] into next-auth's `error` string, but a
+ * plain string is also possible, so both shapes are handled. Kept local rather
+ * than imported from auth-form-block: that block owns its own copy and making
+ * it an export would change a shipped module's public surface.
+ */
+const readAuthError = (
+  error: string | null | undefined,
+  otpMessage: string
+): string => {
+  if (!error) return '';
+
+  try {
+    const parsed = JSON.parse(error);
+    if (!Array.isArray(parsed)) return String(error);
+
+    const messages: string[] = [];
+
+    parsed.forEach((entry) => {
+      const type = (entry as { type?: unknown })?.type;
+      const data = (entry as { data?: unknown })?.data;
+
+      // The OTP branch carries no message: superstep answers a valid
+      // registration with an `otp` error and expects the storefront to open an
+      // SMS-verification modal. This block has no modal, so the shopper is at
+      // least told what happened instead of seeing a silent failure.
+      if (type === 'otp') {
+        messages.push(otpMessage);
+        return;
+      }
+
+      if (Array.isArray(data)) {
+        data.forEach((item) => {
+          if (typeof item === 'string') {
+            messages.push(item);
+          } else if (item && typeof item === 'object') {
+            const value = (item as { value?: unknown }).value;
+            if (typeof value === 'string') messages.push(value);
+          }
+        });
+      } else if (typeof data === 'string') {
+        messages.push(data);
+      }
+    });
+
+    return messages.join(' ') || String(error);
+  } catch {
+    return String(error);
+  }
+};
+
+/**
+ * The commerce registration endpoint is reached through next-auth's credentials
+ * provider, exactly like the brand's own register view: the provider id is
+ * `default` and the url segment is selected by `formType`.
+ */
+const PROVIDER_ID = 'default';
+const FORM_TYPE = 'registration';
+
+/**
+ * Functional auth block: full registration form (name, surname, e-mail,
+ * password, optional phone, consents) submitted through the v1 register path.
+ * Behaviour is fixed (commerce sign-up); the editor owns the labels, the phone
+ * field and the consent wording.
+ * Properties: submitLabel, busyLabel, showPhone, showLabels, firstNameLabel,
+ * lastNameLabel, emailLabel, passwordLabel, phoneLabel, the matching
+ * *Placeholder keys, consentText, marketingConsentText, showMarketingConsent,
+ * consentRequiredLabel, errorLabel, otpLabel.
+ * Parts: form, field, label, input, consent, checkbox, consent-text, error,
+ * submit.
+ */
+const RegisterFormBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const submitLabel = prop('submitLabel', 'Create account');
+  // Empty on purpose: without a busy label the submit caption stays put while
+  // the request runs, which is what published blocks render today.
+  const busyLabel = prop('busyLabel', '');
+  const showPhone = readToggle(block.properties?.showPhone, currentBreakpoint, true);
+  const showLabels = readToggle(
+    block.properties?.showLabels,
+    currentBreakpoint,
+    true
+  );
+  const showMarketingConsent = readToggle(
+    block.properties?.showMarketingConsent,
+    currentBreakpoint,
+    true
+  );
+  const consentText = prop(
+    'consentText',
+    'I have read and accept the membership agreement and the privacy notice.'
+  );
+  const marketingConsentText = prop(
+    'marketingConsentText',
+    'I would like to receive campaign and marketing messages.'
+  );
+  const consentRequiredLabel = prop(
+    'consentRequiredLabel',
+    'Please accept the membership agreement to continue.'
+  );
+  const errorLabel = prop('errorLabel', 'Registration failed.');
+  const otpLabel = prop(
+    'otpLabel',
+    'A verification code was sent. Please confirm it to finish.'
+  );
+
+  const router = useRouter();
+  const { locale, defaultLocaleValue } = useLocalization();
+
+  const [values, setValues] = useState({
+    first_name: '',
+    last_name: '',
+    email: '',
+    password: '',
+    phone: ''
+  });
+  const [legalConsent, setLegalConsent] = useState(false);
+  const [marketingConsent, setMarketingConsent] = useState(false);
+  const [error, setError] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const setField =
+    (key: keyof typeof values) => (event: React.ChangeEvent<HTMLInputElement>) => {
+      const nextValue = event.target.value;
+      setValues((current) => ({ ...current, [key]: nextValue }));
+    };
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setError('');
+
+    // Submitting inside the designer would create a real commerce account.
+    if (isDesigner) return;
+
+    if (!legalConsent) {
+      setError(consentRequiredLabel);
+      return;
+    }
+
+    const payload: Record<string, string | boolean> = {
+      formType: FORM_TYPE,
+      // The credentials provider looks the locale up in Settings and throws
+      // when it is missing, so an explicit value is always sent.
+      locale: locale || defaultLocaleValue || '',
+      first_name: values.first_name,
+      last_name: values.last_name,
+      email: values.email,
+      password: values.password,
+      // Commerce requires both consent flags; one checkbox gates them because
+      // both are mandatory to register at all.
+      is_allowed: true,
+      confirm: true,
+      email_allowed: marketingConsent,
+      sms_allowed: marketingConsent,
+      call_allowed: marketingConsent,
+      whatsapp_allowed: marketingConsent
+    };
+
+    if (showPhone) {
+      // Commerce expects bare digits; the mask characters brands render around
+      // the phone input would fail its length validation.
+      payload.phone = values.phone.replace(/[^\d]/g, '');
+    }
+
+    // `permissions` is only meaningful when opted in — the brand deletes the
+    // key entirely rather than sending a falsy value.
+    if (marketingConsent) payload.permissions = 'on';
+
+    setIsSubmitting(true);
+
+    try {
+      const response = await signIn(PROVIDER_ID, {
+        redirect: false,
+        callbackUrl: '/',
+        ...payload
+      });
+
+      if (!response || response.error) {
+        setError(readAuthError(response?.error, otpLabel) || errorLabel);
+        return;
+      }
+
+      router.refresh();
+      router.push(response.url || '/');
+    } catch {
+      setError(errorLabel);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const inputStyle: React.CSSProperties = {
+    width: '100%',
+    border: '1px solid var(--register-form-border, #d1d5db)',
+    background: 'transparent',
+    color: 'inherit',
+    padding: '10px 12px',
+    outline: 'none'
+  };
+
+  const field = (
+    key: keyof typeof values,
+    label: string,
+    type: string,
+    autoComplete: string,
+    placeholder: string
+  ) => (
+    <label
+      data-register-form-field={key}
+      {...partAttrs('field')}
+      style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}
+    >
+      {/* Hiding the caption must not cost the input its accessible name, so the
+          label text moves onto aria-label instead of disappearing. */}
+      {showLabels && <span {...partAttrs('label')}>{label}</span>}
+      <input
+        type={type}
+        name={key}
+        value={values[key]}
+        onChange={setField(key)}
+        autoComplete={autoComplete}
+        placeholder={placeholder || undefined}
+        aria-label={showLabels ? undefined : label}
+        required
+        {...partAttrs('input')}
+        style={inputStyle}
+      />
+    </label>
+  );
+
+  const consent = (
+    checked: boolean,
+    onChange: (next: boolean) => void,
+    label: string,
+    name: string,
+    required: boolean
+  ) => (
+    <label
+      data-register-form-consent={name}
+      {...partAttrs('consent')}
+      style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}
+    >
+      <input
+        type="checkbox"
+        name={name}
+        checked={checked}
+        onChange={(event) => onChange(event.target.checked)}
+        required={required}
+        {...partAttrs('checkbox', { checked })}
+        style={{ marginTop: '3px' }}
+      />
+      <span {...partAttrs('consent-text')}>{label}</span>
+    </label>
+  );
+
+  return (
+    <form
+      data-register-form=""
+      {...partAttrs('form')}
+      onSubmit={submit}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--register-form-gap, 12px)'
+      }}
+    >
+      {field(
+        'first_name',
+        prop('firstNameLabel', 'First name'),
+        'text',
+        'given-name',
+        prop('firstNamePlaceholder', '')
+      )}
+      {field(
+        'last_name',
+        prop('lastNameLabel', 'Last name'),
+        'text',
+        'family-name',
+        prop('lastNamePlaceholder', '')
+      )}
+      {field(
+        'email',
+        prop('emailLabel', 'E-mail'),
+        'email',
+        'email',
+        prop('emailPlaceholder', '')
+      )}
+      {field(
+        'password',
+        prop('passwordLabel', 'Password'),
+        'password',
+        'new-password',
+        prop('passwordPlaceholder', '')
+      )}
+      {showPhone &&
+        field(
+          'phone',
+          prop('phoneLabel', 'Phone'),
+          'tel',
+          'tel',
+          prop('phonePlaceholder', '')
+        )}
+
+      {consent(legalConsent, setLegalConsent, consentText, 'is_allowed', true)}
+      {showMarketingConsent &&
+        consent(
+          marketingConsent,
+          setMarketingConsent,
+          marketingConsentText,
+          'permissions',
+          false
+        )}
+
+      {error && (
+        <div data-register-form-error="" {...partAttrs('error')} role="alert">
+          {error}
+        </div>
+      )}
+
+      <button
+        type="submit"
+        data-register-form-submit=""
+        {...partAttrs('submit', {
+          loading: isSubmitting,
+          disabled: isSubmitting
+        })}
+        disabled={isSubmitting}
+        aria-busy={isSubmitting}
+        style={{
+          padding: '12px 20px',
+          background: 'var(--register-form-cta-bg, #111827)',
+          color: 'var(--register-form-cta-color, #ffffff)',
+          border: 'none',
+          cursor: isSubmitting ? 'not-allowed' : 'pointer',
+          opacity: isSubmitting ? 0.7 : 1
+        }}
+      >
+        {isSubmitting && busyLabel ? busyLabel : submitLabel}
+      </button>
+    </form>
+  );
+};
+
+export default RegisterFormBlock;