@akinon/pz-theme 2.0.83-rc.0 → 2.0.84-beta.0

package/src/blocks/auth-step-title-block.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import React from 'react';
+
+import { useActiveAuthStep } from '../auth/auth-flow-bus';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import { DesignerPlaceholder } from './product-block-utils';
+
+/**
+ * The title of the step an auth flow is showing.
+ *
+ * A drawer that walks a shopper through several steps has ONE close button and
+ * ONE title row — the row is a sibling of the steps, so it renders once — but
+ * the title changes with the step. Authoring the title inside each step cannot
+ * produce that row, and repeating the close button in every step is not a
+ * shared button. So the step carries its own title, the flow says which step is
+ * up, and this block renders that title wherever the design puts it.
+ *
+ * Properties: tag, fallbackTitle.
+ * Parts: root.
+ */
+const AuthStepTitleBlock = ({
+  block,
+  isDesigner = false,
+  currentBreakpoint = 'desktop'
+}: BlockRendererProps) => {
+  const activeStep = useActiveAuthStep();
+
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    ).trim();
+
+  /**
+   * A heading by default: this is the drawer's title, and a shopper on a screen
+   * reader navigating by headings is exactly who needs it to be one.
+   */
+  const tag = prop('tag', 'h2');
+  const fallbackTitle = prop('fallbackTitle', '');
+  const title = activeStep?.title || fallbackTitle;
+
+  // Outside a flow there is no step to name, and inside one a step may simply
+  // not carry a title yet. Either way a shopper must not see an empty heading —
+  // but the canvas has to say what the block is waiting for, or dropping it
+  // looks like nothing happened.
+  if (!title) {
+    if (!isDesigner) return null;
+
+    return (
+      <DesignerPlaceholder
+        label={
+          activeStep
+            ? 'Step title (give this step a Title)'
+            : 'Step title (put this inside an Auth Flow)'
+        }
+      />
+    );
+  }
+
+  const Tag = (
+    ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div'].includes(tag)
+      ? tag
+      : 'h2'
+  ) as keyof React.JSX.IntrinsicElements;
+
+  return (
+    <Tag
+      data-auth-step-title=""
+      // Fills its block wrapper; see the note in auth-step-block.tsx.
+      className="w-full"
+      data-auth-step-key={activeStep?.key || undefined}
+      {...partAttrs('root')}
+      style={{ margin: 0 }}
+    >
+      {title}
+    </Tag>
+  );
+};
+
+export default AuthStepTitleBlock;

package/src/blocks/block-renderer-registry.tsx

@@ -74,6 +74,15 @@ import CountdownBlock from './countdown-block';
 import RegisterFormBlock from './register-form-block';
 import ForgotPasswordBlock from './forgot-password-block';
 import OauthButtonsBlock from './oauth-buttons-block';
+import OtpFormBlock from './otp-form-block';
+import AuthFlowBlock from './auth-flow-block';
+import AuthStepBlock from './auth-step-block';
+import AuthStepTitleBlock from './auth-step-title-block';
+import AuthErrorBlock from './auth-error-block';
+import AuthConsentBlock from './auth-consent-block';
+import AuthFieldBlock from './auth-field-block';
+import OtpPhaseBlock from './otp-phase-block';
+import OtpCodeInputBlock from './otp-code-input-block';
 import StoreLocatorBlock from './store-locator-block';
 import FaqAccordionBlock from './faq-accordion-block';
 import ShareBlock from './share-block';
@@ -210,6 +219,15 @@ blockRendererRegistry.register('countdown', CountdownBlock);
 blockRendererRegistry.register('register-form', RegisterFormBlock);
 blockRendererRegistry.register('forgot-password', ForgotPasswordBlock);
 blockRendererRegistry.register('oauth-buttons', OauthButtonsBlock);
+blockRendererRegistry.register('otp-form', OtpFormBlock);
+blockRendererRegistry.register('auth-flow', AuthFlowBlock);
+blockRendererRegistry.register('auth-step', AuthStepBlock);
+blockRendererRegistry.register('auth-step-title', AuthStepTitleBlock);
+blockRendererRegistry.register('auth-error', AuthErrorBlock);
+blockRendererRegistry.register('auth-consent', AuthConsentBlock);
+blockRendererRegistry.register('auth-field', AuthFieldBlock);
+blockRendererRegistry.register('otp-phase', OtpPhaseBlock);
+blockRendererRegistry.register('otp-code-input', OtpCodeInputBlock);
 blockRendererRegistry.register('store-locator', StoreLocatorBlock);
 blockRendererRegistry.register('faq-accordion', FaqAccordionBlock);
 blockRendererRegistry.register('share', ShareBlock);

package/src/blocks/button-block.tsx

@@ -6,10 +6,13 @@ import { useEmailSubscriptionMutation } from '@akinon/next/data/client/misc';
 import { Modal } from '@akinon/next/components/modal';
 import {
   colorToRgba,
+  getInnerRootInlineStyles,
   getResponsiveValue,
+  partAttrs,
   resolveThemeCssVariables
 } from '../utils';
 import { useBlockAction } from '../hooks/use-block-action';
+import { useFormSubmitState } from '../auth/form-submit-bus';
 import { BlockRendererProps } from './block-renderer-registry';
 import { useThemeSettingsContext } from '../theme-settings-context';
 
@@ -20,6 +23,7 @@ const ButtonBlock = ({
 }: BlockRendererProps) => {
   const themeSettings = useThemeSettingsContext();
   const action = useBlockAction(block, { currentBreakpoint, isDesigner });
+
   const { locale } = useLocalization();
   const [emailSubscription] = useEmailSubscriptionMutation();
   const [feedbackModal, setFeedbackModal] = useState({
@@ -123,6 +127,23 @@ const ButtonBlock = ({
         )
       : 'button';
 
+  /**
+   * Detached submit. Names the auth form (its "Form HTML ID") this button
+   * submits through the native `form` attribute — which is what lets a CTA
+   * live in a pinned bottom bar while the fields stay in the flow above.
+   * Forces the <button> branch: an anchor cannot submit anything.
+   */
+  const submitFormId = String(
+    getResponsiveValue(block.properties?.submitFormId, currentBreakpoint, '')
+  ).trim();
+  /**
+   * A detached CTA is a real submit button and has to behave like one while the
+   * form it drives is working: staying bright and clickable through a request
+   * is what makes a shopper press it twice. An empty id costs no subscription,
+   * so this is safe to read unconditionally — as a hook must be.
+   */
+  const isSubmittedFormBusy = useFormSubmitState(submitFormId);
+
   const iconUrl = block.properties?.icon
     ? String(getResponsiveValue(block.properties.icon, currentBreakpoint, ''))
     : '';
@@ -326,13 +347,38 @@ const ButtonBlock = ({
 
   const buttonStyles = getButtonStyles();
 
+  /**
+   * The generated stylesheet writes this block's root styles against THIS
+   * element (`data-part="root"` — see INNER_ROOT_BLOCK_TYPES), so whatever the
+   * sheet can express must not be inlined as well. Inlining it was applying
+   * every padding twice, once on the designer wrapper and once here, and an
+   * inline declaration also outranks the media query and the `:hover` the same
+   * sheet emits for this element. What stays inline is only what a stylesheet
+   * cannot say: a theme token, and a colour with text-opacity folded in.
+   */
+  const sheetCannotSay = getInnerRootInlineStyles(
+    block.styles as Record<string, unknown> | undefined,
+    themeSettings,
+    currentBreakpoint,
+    block.rowStyleKeys
+  );
+  const inlineFromStyles = Object.fromEntries(
+    Object.entries(buttonStyles).filter(([key]) => key in sheetCannotSay)
+  ) as React.CSSProperties;
+
   const finalStyles: React.CSSProperties = {
     textDecoration: 'none',
-    display: showIcon ? 'inline-flex' : buttonStyles.display || 'inline-block',
+    // Only as a fallback: an authored display now comes from the sheet, and an
+    // inline one would beat it.
+    display: showIcon
+      ? 'inline-flex'
+      : 'display' in buttonStyles
+        ? undefined
+        : 'inline-block',
     alignItems: showIcon ? 'center' : undefined,
     justifyContent: showIcon ? 'center' : undefined,
     gap: showIcon ? iconGap : undefined,
-    ...buttonStyles
+    ...inlineFromStyles
   };
 
   const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -388,6 +434,10 @@ const ButtonBlock = ({
       return;
     }
 
+    // Detached submit: the browser fires the named form's submit event
+    // natively; nothing here may preventDefault it or reroute the click.
+    if (submitFormId) return;
+
     /**
      * An authored action wins over the href.
      *
@@ -402,10 +452,6 @@ const ButtonBlock = ({
       return;
     }
 
-    if (tag === 'button' && buttonType === 'submit') {
-      e.preventDefault();
-    }
-
     if (tag !== 'button' || buttonType !== 'submit') {
       return;
     }
@@ -415,12 +461,23 @@ const ButtonBlock = ({
       '[data-newsletter-signup="true"]'
     ) as HTMLElement | null;
 
+    /**
+     * Outside a newsletter section the click is left alone, so a submit
+     * button inside a real <form> — an auth form composed of blocks — submits
+     * it natively. The blanket `preventDefault` that used to run here made
+     * every composed submit button inert, and nothing said why.
+     */
     if (!newsletterContainer) {
       return;
     }
 
+    // The newsletter section posts through fetch below, so the native submit
+    // must not also navigate.
+    e.preventDefault();
+
     const rawEndpoint =
-      newsletterContainer.getAttribute('data-newsletter-endpoint')?.trim() || '';
+      newsletterContainer.getAttribute('data-newsletter-endpoint')?.trim() ||
+      '';
     if (!rawEndpoint) {
       return;
     }
@@ -431,8 +488,8 @@ const ButtonBlock = ({
       rawEndpoint.startsWith('https://')
         ? rawEndpoint
         : rawEndpoint.startsWith('/')
-        ? `/api/client${rawEndpoint}`
-        : `/api/client/${rawEndpoint}`;
+          ? `/api/client${rawEndpoint}`
+          : `/api/client/${rawEndpoint}`;
 
     const isEmailSubscriptionEndpoint =
       rawEndpoint.includes('email-subscription') ||
@@ -559,7 +616,19 @@ const ButtonBlock = ({
     </>
   );
 
-  const feedbackModalElement = (
+  /**
+   * Mounted only while it has something to say.
+   *
+   * The commerce `Modal` writes `document.body.style.overflow` from an effect
+   * that runs on MOUNT, open or closed, and a closed one draws nothing — so a
+   * composition full of buttons was a composition full of components each
+   * handing the page its scrolling back. A button appearing inside an open
+   * overlay (a step of an auth flow arriving in a drawer) therefore unfroze the
+   * page behind it. `useOverlay`'s lock defends itself against writers like this
+   * now, but a closed dialog nobody can see has no business touching the page
+   * at all.
+   */
+  const feedbackModalElement = feedbackModal.open ? (
     <Modal
       portalId={`newsletter-feedback-modal-${block.id}`}
       open={feedbackModal.open}
@@ -577,13 +646,21 @@ const ButtonBlock = ({
         {feedbackModal.message}
       </div>
     </Modal>
-  );
+  ) : null;
 
-  if (tag === 'button') {
+  if (tag === 'button' || submitFormId) {
     return (
       <>
         <button
-          type={buttonType}
+          type={submitFormId ? 'submit' : buttonType}
+          form={submitFormId || undefined}
+          disabled={isSubmittedFormBusy || undefined}
+          aria-busy={isSubmittedFormBusy || undefined}
+          // `data-part="root"`: the generated stylesheet routes this block's
+          // root styles HERE instead of onto the designer wrapper, so padding
+          // and border land once, on the element the shopper actually clicks —
+          // not once on the wrapper and again inline (which doubled them).
+          {...partAttrs('root')}
           style={finalStyles}
           onClick={handleClick}
           {...action.ariaProps}
@@ -601,6 +678,7 @@ const ButtonBlock = ({
         href={url}
         target={target}
         rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+        {...partAttrs('root')}
         style={finalStyles}
         onClick={handleClick}
         {...action.ariaProps}