@akinon/pz-theme 2.0.95-rc.0 → 2.0.95-rc.1

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

@@ -1,16 +1,17 @@
 'use client';
 
-import React, { useContext, useState } from 'react';
+import React, { useContext, useRef, useState } from 'react';
 import NextLink from 'next/link';
-import { useRouter } from 'next/navigation';
-import { signIn } from 'next-auth/react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { signIn, useSession } from 'next-auth/react';
 import { useLocalization } from '@akinon/next/hooks';
-import { getResponsiveValue, partAttrs } from '../utils';
+import { getResponsiveValue, partAttrs, resolveOption } from '../utils';
 import {
   AuthFieldErrors,
   AuthFieldErrorsProvider,
   clearAuthFieldError,
-  collectAuthFieldErrors
+  collectAuthFieldErrors,
+  focusFirstAuthFieldError
 } from '../auth/auth-field-errors';
 import {
   clearFormSubmitState,
@@ -20,61 +21,58 @@ import {
   AuthFormErrorProvider,
   containsAuthErrorBlock
 } from '../auth/form-error-context';
+import {
+  AuthFormStateProvider,
+  AuthFormStateValue,
+  showsInFormState
+} from '../auth/form-state-context';
 import { emitCommerceEvent } from '../utils/analytics';
 import { readToggle } from './product-block-utils';
 import { closeAllModals } from '../overlays/overlay-bus';
+import {
+  useHostModalCloser,
+  useModalHostId
+} from '../overlays/modal-host-context';
 import {
   AuthFlowIdContext,
   resolveAuthStepTarget,
   setAuthStep
 } from '../auth/auth-flow-bus';
 import { renderComposedChildren } from './render-composed-children';
+import {
+  authFormMessage,
+  readAuthError,
+  splitByKnownFields
+} from '../auth/read-auth-error';
+import {
+  AUTH_AFTER_SIGN_IN_MODES,
+  AuthAfterSignIn,
+  resolveAuthDestination,
+  resolveSignedInDestination
+} from '../auth/auth-destination';
+import {
+  AuthCaptchaApi,
+  AuthCaptchaHost,
+  AuthCaptchaSlot,
+  containsCaptchaBlock
+} from '../auth/auth-captcha';
 import { BlockRendererProps } from './block-renderer-registry';
 
-/**
- * Extracts a readable message out of the next-auth error string. pz brands
- * serialise an AuthError[] into `error`, but a plain string is also possible,
- * so both shapes are handled.
- */
-const readAuthError = (error?: string | null): string => {
-  if (!error) return '';
-
-  try {
-    const parsed = JSON.parse(error);
-
-    if (!Array.isArray(parsed)) return String(error);
-
-    const messages: string[] = [];
-
-    parsed.forEach((entry) => {
-      const data = (entry as { data?: unknown })?.data;
-
-      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);
-  }
-};
-
 /**
  * Names a composed field must not take, because the form and next-auth already
  * mean something by them. A local copy of the register form's set, kept local
  * for the same reason `readAuthError` is: making it an export would change a
  * shipped module's public surface.
  */
+/**
+ * What a form does for a shopper who is already signed in. Named here rather
+ * than in `auth-destination.ts` because it is a rendering decision, not a
+ * destination one — the register form and the OTP form read the same list.
+ */
+export const WHEN_SIGNED_IN_MODES = ['form', 'message', 'redirect'] as const;
+
+export type WhenSignedIn = (typeof WHEN_SIGNED_IN_MODES)[number];
+
 const RESERVED_SUBMIT_KEYS = new Set([
   'formType',
   'locale',
@@ -155,10 +153,56 @@ const AuthFormBlock = ({
       getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
     );
 
+  /**
+   * The modal this form is inside, if any. Read before the destination is
+   * resolved, because it decides that destination's default: a sign-in inside
+   * a drawer is a detour from the page the shopper is on, so `stay` is right
+   * there and `fixed` — the historical push — is right on a page.
+   */
+  const hostModalId = useModalHostId();
+  /**
+   * Whether finishing closes the modal this form is inside. On here because a
+   * sign-in leaves nothing to read; the forms whose success state IS the point
+   * ("check your inbox") default to off. See `useHostModalCloser`.
+   */
+  const closeHostModalOnSuccess = readToggle(
+    block.properties?.closeHostModalOnSuccess,
+    currentBreakpoint,
+    true
+  );
+  const closeHostModal = useHostModalCloser(closeHostModalOnSuccess);
+
   const rawMode = prop('mode', 'login');
   const mode = rawMode === 'register' ? 'register' : 'login';
   const providerId = prop('providerId', 'default');
   const callbackUrl = prop('callbackUrl', '/');
+  /**
+   * Where a finished sign-in leaves the shopper. `fixed` is the historical
+   * answer and stays the default, so no published composition moves; a drawer
+   * wants `stay` and a login PAGE wants `return`. See `auth/auth-destination`.
+   */
+  const afterSignIn = resolveOption<AuthAfterSignIn>(
+    block.properties?.afterSignIn,
+    currentBreakpoint,
+    'fixed',
+    AUTH_AFTER_SIGN_IN_MODES as unknown as AuthAfterSignIn[]
+  );
+  /**
+   * What a shopper who is ALREADY signed in sees here.
+   *
+   * `form` is what shipped, and it is a dead end: a back button after signing
+   * in, a bookmarked /auth or a second tab shows a member a login form, and
+   * re-submitting it re-authenticates a live session. `message` says so;
+   * `redirect` takes them where they were going.
+   */
+  const whenSignedIn = resolveOption<WhenSignedIn>(
+    block.properties?.whenSignedIn,
+    currentBreakpoint,
+    'form',
+    WHEN_SIGNED_IN_MODES as unknown as WhenSignedIn[]
+  );
+  const signedInLabel = prop('signedInLabel', 'You are already signed in.');
+  const signedInHref = prop('signedInHref', '/account');
   const submitLabel = prop(
     'submitLabel',
     mode === 'register' ? 'Create account' : 'Log in'
@@ -167,6 +211,31 @@ const AuthFormBlock = ({
   // the request is in flight, which is what every published block does today.
   const busyLabel = prop('busyLabel', '');
   const errorLabel = prop('errorLabel', 'Authentication failed.');
+  /**
+   * What the shopper is told when commerce escalates to a captcha after too
+   * many attempts. Nothing in this theme can ANSWER the challenge yet, so the
+   * least this can do is name it — the alternative, which shipped, was the
+   * literal `[{"type":"captcha"}]` in the error slot.
+   */
+  const captchaLabel = prop(
+    'captchaLabel',
+    'Please complete the security check and try again.'
+  );
+  /**
+   * Whether this form offers the security check commerce escalates to.
+   *
+   * Off by default, and not because the challenge is optional: `useCaptcha`
+   * fetches the site key on mount, and a storefront whose commerce never
+   * escalates should not pay a request per auth form for a widget it will
+   * never show. A brand that IS abuse-protected turns it on once, places a
+   * Captcha block where the challenge should appear (or lets the form draw it
+   * above the submit), and composed login stops dead-ending.
+   */
+  const showCaptcha = readToggle(
+    block.properties?.showCaptcha,
+    currentBreakpoint,
+    false
+  );
   const showLabels = readToggle(
     block.properties?.showLabels,
     currentBreakpoint,
@@ -188,9 +257,16 @@ const AuthFormBlock = ({
    * Empty keeps the URL, so every published form behaves as before.
    */
   const forgotPasswordStepTarget = prop('forgotPasswordStepTarget', '').trim();
+  /**
+   * `register`, not `registration`: the credentials provider resolves the
+   * endpoint as `user[formType]` and the core url map has only `register`, so
+   * the old default POSTed the sign-up to `${commerceUrl}undefined`. A brand
+   * whose own provider names the segment differently still says so here — that
+   * is what the property is for.
+   */
   const formType =
     mode === 'register'
-      ? prop('registerFormType', 'registration')
+      ? prop('registerFormType', 'register')
       : prop('loginFormType', 'login');
   // Off by default: a form on a plain auth page must not start closing modals
   // it does not live in. Compositions inside a drawer turn it on so a login
@@ -222,6 +298,25 @@ const AuthFormBlock = ({
   );
 
   const router = useRouter();
+  const search = useSearchParams();
+  const pathname = usePathname();
+  const { status } = useSession();
+  /**
+   * `loading` counts as a guest on purpose. The opposite — withholding the
+   * form until the session is known — shows every shopper an empty panel for
+   * the first client render; this way the worst case is a member seeing the
+   * form for a beat, which is the state they are being moved out of anyway.
+   */
+  const isSignedIn = status === 'authenticated' && !isDesigner;
+  const destination = resolveAuthDestination({
+    mode: afterSignIn,
+    authored: callbackUrl,
+    search,
+    // A sign-in inside a drawer is a detour: a destination that names nowhere
+    // in particular means there is nowhere to go. An authored one still wins.
+    inModal: Boolean(hostModalId),
+    pathname
+  });
   const { locale, defaultLocaleValue } = useLocalization();
   const contextFlowId = useContext(AuthFlowIdContext);
   const forgotPasswordStep = resolveAuthStepTarget(
@@ -239,6 +334,16 @@ const AuthFormBlock = ({
   // Per FIELD, as opposed to `error` above, which is what the auth backend
   // answered about the attempt as a whole.
   const [fieldErrors, setFieldErrors] = useState<AuthFieldErrors>({});
+  /**
+   * The security check's api, kept in a ref rather than in state: the form
+   * reads `validated` and `validate` at SUBMIT time, and re-rendering the
+   * whole form every time the widget changes its mind would be a re-render for
+   * nothing. `AuthCaptchaHost` pushes it here.
+   */
+  const captchaRef = useRef<AuthCaptchaApi | null>(null);
+  const holdCaptchaApi = React.useCallback((api: AuthCaptchaApi) => {
+    captchaRef.current = api;
+  }, []);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const setField = (key: keyof typeof values) => (
@@ -280,6 +385,31 @@ const AuthFormBlock = ({
     return () => clearFormSubmitState(formHtmlId);
   }, [formHtmlId, isSubmitting]);
 
+  /**
+   * A shopper who is already signed in, taken where they were going.
+   *
+   * `replace`, not `push`: the login screen is not a place to come back to
+   * with the browser's Back button — that is precisely the loop that shows a
+   * member a login form again.
+   */
+  React.useEffect(() => {
+    if (!isSignedIn || whenSignedIn !== 'redirect') return;
+
+    router.replace(resolveSignedInDestination(signedInHref, search));
+  }, [isSignedIn, whenSignedIn, signedInHref, router, search]);
+
+  /**
+   * The form's contents, wrapped so a Captcha block (or the form's own slot)
+   * can reach the challenge — and left exactly as they were when the form does
+   * not offer one, which is every published composition.
+   */
+  const withCaptcha = (contents: React.ReactNode) =>
+    showCaptcha ? (
+      <AuthCaptchaHost onApi={holdCaptchaApi}>{contents}</AuthCaptchaHost>
+    ) : (
+      contents
+    );
+
   const handleInput = (event: React.FormEvent<HTMLFormElement>) => {
     const target = event.target as { name?: string } | null;
 
@@ -294,6 +424,18 @@ const AuthFormBlock = ({
 
     if (isDesigner || isSubmitting) return;
 
+    /**
+     * A live session must not be re-authenticated. Enforced whatever the
+     * `whenSignedIn` policy is: a composition left on `form` still has a form
+     * on screen, and submitting it would swap one valid session for another
+     * for no reason — with the shopper's password on the wire again.
+     */
+    if (isSignedIn) {
+      setError(signedInLabel);
+
+      return;
+    }
+
     // Before anything is sent: the form carries `noValidate`, so nothing else
     // is going to stop an empty submit, and nothing else would have told the
     // shopper WHICH field is the problem.
@@ -347,12 +489,53 @@ const AuthFormBlock = ({
     setIsSubmitting(true);
 
     try {
-      const response = await signIn(providerId, {
-        // After the payload: these decide whether next-auth answers at all.
-        ...payload,
-        redirect: false,
-        callbackUrl
-      });
+      /**
+       * One attempt. Called twice at most: a captcha escalation is answered
+       * and the same body is sent again, which is what the brands' own views
+       * do — the shopper solved the challenge, so asking them to press the
+       * button a second time would be the storefront's failure, not theirs.
+       */
+      const attempt = (solvedNow?: boolean) =>
+        signIn(providerId, {
+          // Sent only while the form offers a challenge, so a storefront
+          // without one keeps posting exactly the body it posts today.
+          ...(showCaptcha
+            ? {
+                captchaValidated:
+                  solvedNow ?? captchaRef.current?.validated ?? false
+              }
+            : null),
+          // After the payload: these decide whether next-auth answers at all.
+          ...payload,
+          redirect: false,
+          callbackUrl
+        });
+
+      let response = await attempt();
+      let reading = splitByKnownFields(
+        readAuthError(signInErrorDetail(response), { captcha: captchaLabel }),
+        form
+      );
+
+      if (reading.hasCaptchaChallenge && showCaptcha) {
+        // `validate` reveals the widget and resolves false the first time;
+        // once the shopper has solved it the hook validates the answer and
+        // resolves true, and only then is there any point in retrying.
+        const solved = await captchaRef.current?.validate();
+
+        if (solved) {
+          // `true`, not the ref: what `validate` just resolved IS the answer, and
+          // the ref only catches up on the host's next render — which may not
+          // have happened by the time this retry goes out.
+          response = await attempt(true);
+          reading = splitByKnownFields(
+            readAuthError(signInErrorDetail(response), {
+              captcha: captchaLabel
+            }),
+            form
+          );
+        }
+      }
 
       if (!response || response.error) {
         const errorDetail = signInErrorDetail(response);
@@ -368,7 +551,18 @@ const AuthFormBlock = ({
           });
         }
 
-        setError(readAuthError(errorDetail) || errorLabel);
+        // Field-level refusals ("no account with this e-mail") go under the
+        // field, the way client-side validation already does; only what
+        // belongs to the form as a whole stays above it.
+        //
+        // `reading` is the same refusal `main` read with `readAuthError`, only
+        // already split by field — `splitByKnownFields` wraps that very call
+        // above, and `authFormMessage` keeps `errorLabel` as its fallback. So
+        // the message a shopper sees is unchanged for a form-level refusal and
+        // moves under the field for one that names a field.
+        setFieldErrors((current) => ({ ...current, ...reading.fieldMessages }));
+        focusFirstAuthFieldError(form, reading.fieldMessages);
+        setError(authFormMessage(reading, errorLabel));
 
         return;
       }
@@ -382,9 +576,38 @@ const AuthFormBlock = ({
         emitCommerceEvent('login', { method: providerId });
       }
 
+      /**
+       * The surface this form finished inside.
+       *
+       * Closing the modal it is IN is the default because it is never a
+       * surprise: a shopper who signed in inside the drawer is done with the
+       * drawer. `closeModalsOnSuccess` keeps its own, wider meaning — close
+       * EVERY open modal — for a composition that authored it, which is what a
+       * form nested two overlays deep needs.
+       *
+       * The live GANT drawer is why the default had to change: its OTP form has
+       * the toggle on and its login and register forms do not, so signing in
+       * with an e-mail left the drawer covering the page.
+       */
+      /**
+       * Both, not either: a composition that ticked the legacy toggle asked
+       * for "every open modal", and the wide close is a superset — so the
+       * narrow one runs unconditionally and simply finds nothing left to do.
+       * Sequencing them the other way round (an `else`) would have left every
+       * already-published drawer on the wide branch forever, which is the one
+       * behaviour this family exists to stop.
+       */
       if (closeModalsOnSuccess) closeAllModals();
+      closeHostModal();
+
+      // The new session has to reach the page either way; in `stay` mode this
+      // refresh IS the whole navigation.
       router.refresh();
-      router.push(callbackUrl);
+
+      // Our own resolved path rather than next-auth's echo of it: the response
+      // url is whatever we handed in, and this one has been through the
+      // same-origin check. `null` is `stay` — there is nowhere to go.
+      if (destination) router.push(destination);
     } catch {
       setError(errorLabel);
     } finally {
@@ -517,9 +740,33 @@ const AuthFormBlock = ({
    * be embedding the storefront — and every copy was a place a new message
    * field had to be remembered.
    */
+  /**
+   * What the composition's Form State containers read.
+   *
+   * A sign-in has no success SCREEN — it is in, and the page moves on — so the
+   * screen here is always the form itself; what a composition can scope to is
+   * the submission running and the refusal, which is what a "signing you in…"
+   * panel and a designed error box need.
+   */
+  const formStateValue: AuthFormStateValue = {
+    screen: 'form',
+    busy: isSubmitting,
+    hasError: Boolean(error)
+  };
+
   const renderChildren = () =>
     renderComposedChildren({
-      blocks: childBlocks,
+      // A child that is not a state container is shared chrome and always
+      // shows; see `auth/form-state-context.tsx`.
+      blocks: childBlocks.filter((childBlock) =>
+        showsInFormState({
+          block: childBlock,
+          state: formStateValue,
+          isDesigner,
+          selectedBlockId,
+          currentBreakpoint
+        })
+      ),
       placeholderId,
       sectionId,
       isDesigner,
@@ -527,6 +774,25 @@ const AuthFormBlock = ({
       currentBreakpoint
     });
 
+  /**
+   * Told, rather than shown a form they cannot use. The `redirect` policy has
+   * this too, for the beat before the navigation lands — and for a shopper
+   * whose browser refuses it.
+   */
+  if (isSignedIn && whenSignedIn !== 'form') {
+    return (
+      <div
+        data-auth-form=""
+        className="w-full"
+        data-auth-form-state="signed-in"
+        {...partAttrs('signed-in')}
+        role="status"
+      >
+        {signedInLabel}
+      </div>
+    );
+  }
+
   if (isComposed) {
     /**
      * The composed form: children carry the fields (native inputs named by
@@ -535,9 +801,14 @@ const AuthFormBlock = ({
      * the designer wires their own CTA.
      */
     const errorIsAuthored = containsAuthErrorBlock(childBlocks);
+    // The form draws the widget only when the composition did not place a
+    // Captcha block — same relationship the built-in error line has with a
+    // Form Error block.
+    const captchaIsAuthored = containsCaptchaBlock(childBlocks);
 
     return (
       <AuthFormErrorProvider value={error}>
+        <AuthFormStateProvider value={formStateValue}>
         <AuthFieldErrorsProvider value={fieldErrors}>
           <form
             id={formHtmlId || undefined}
@@ -559,7 +830,13 @@ const AuthFormBlock = ({
               gap: 'var(--auth-form-gap, 12px)'
             }}
           >
-            {renderChildren()}
+            {withCaptcha(
+              <>
+                {renderChildren()}
+
+                {!captchaIsAuthored && <AuthCaptchaSlot />}
+              </>
+            )}
 
             {forgotPasswordControl}
 
@@ -595,6 +872,7 @@ const AuthFormBlock = ({
             )}
           </form>
         </AuthFieldErrorsProvider>
+        </AuthFormStateProvider>
       </AuthFormErrorProvider>
     );
   }
@@ -655,6 +933,11 @@ const AuthFormBlock = ({
 
       {forgotPasswordControl}
 
+      {/* A childless form has nowhere for a Captcha block to be, so it draws
+          the challenge itself — above its own submit, where the brands' own
+          views put it. */}
+      {withCaptcha(<AuthCaptchaSlot />)}
+
       {error && (
         <div data-auth-form-error="" {...partAttrs('error')} role="alert">
           {error}

package/src/blocks/auth-success-block.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import React from 'react';
+
+import { useAuthFormSuccess } from '../auth/form-success-context';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import { DesignerPlaceholder } from './product-block-utils';
+
+/**
+ * The confirmation the form around this block finished with.
+ *
+ * The success twin of the Form Error block, and the reason it exists is the
+ * same complaint: "the success message is not something I can manage". It was
+ * a node the form drew itself, reachable only as a style part — a brand could
+ * recolour "a reset link is on its way" and could not put an icon beside it, a
+ * heading above it, or the sentence anywhere other than where the form chose.
+ *
+ * As a block it is ordinary content, so everything a design wants AROUND the
+ * confirmation is an ordinary sibling. Placing it also keeps the composition on
+ * screen in the forms whose success state would otherwise replace it — which is
+ * the point: a block inside a form that has been swapped out draws nothing.
+ * When the whole screen should change instead, the form's Step After Success is
+ * still the tool for that, and it needs no block at all.
+ *
+ * Empty until the form has finished, so a shopper never sees a reserved gap. In
+ * the canvas it draws `previewMessage` instead, so the state can be dressed
+ * without having to reach it for real.
+ *
+ * Properties: previewMessage.
+ * Parts: root.
+ */
+const AuthSuccessBlock = ({
+  block,
+  isDesigner = false,
+  currentBreakpoint = 'desktop'
+}: BlockRendererProps) => {
+  const message = useAuthFormSuccess();
+
+  const previewMessage = String(
+    getResponsiveValue(
+      block.properties?.previewMessage,
+      currentBreakpoint,
+      'Done. Check your inbox.'
+    )
+  ).trim();
+
+  // The canvas shows the state being styled; a storefront shows nothing until
+  // the form has actually finished. An author who empties the preview text gets
+  // the placeholder rather than an invisible block they cannot select.
+  const shown = message || (isDesigner ? previewMessage : '');
+
+  if (!shown) {
+    if (!isDesigner) return null;
+
+    return (
+      <DesignerPlaceholder label="Form success (shown once the form finishes)" />
+    );
+  }
+
+  return (
+    <div
+      data-auth-success=""
+      // Fills its block wrapper; see the note in auth-step-block.tsx.
+      className="w-full"
+      // Only the live message is announced. `role="status"` on the canvas
+      // preview would have a designer's screen reader read a confirmation for
+      // something that has not happened.
+      role={message ? 'status' : undefined}
+      data-auth-success-state={message ? 'success' : 'preview'}
+      {...partAttrs('root')}
+      // No inline colour, unlike its error twin: that block sets one because
+      // the auth forms paint their message through a variable a brand may
+      // already have set, while a confirmation has never had a colour of its
+      // own. So this line inherits the composition's text colour, and the
+      // block's own Text Color — emitted `!important` as every part style is —
+      // is what overrides it.
+      style={{ margin: 0 }}
+    >
+      {shown}
+    </div>
+  );
+};
+
+export default AuthSuccessBlock;

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

@@ -79,10 +79,14 @@ 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 AuthSuccessBlock from './auth-success-block';
+import FormStateBlock from './form-state-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 CaptchaBlock from './captcha-block';
+import ResetPasswordBlock from './reset-password-block';
 import StoreLocatorBlock from './store-locator-block';
 import FaqAccordionBlock from './faq-accordion-block';
 import ShareBlock from './share-block';
@@ -224,10 +228,14 @@ blockRendererRegistry.register('auth-flow', AuthFlowBlock);
 blockRendererRegistry.register('auth-step', AuthStepBlock);
 blockRendererRegistry.register('auth-step-title', AuthStepTitleBlock);
 blockRendererRegistry.register('auth-error', AuthErrorBlock);
+blockRendererRegistry.register('auth-success', AuthSuccessBlock);
+blockRendererRegistry.register('form-state', FormStateBlock);
 blockRendererRegistry.register('auth-consent', AuthConsentBlock);
 blockRendererRegistry.register('auth-field', AuthFieldBlock);
 blockRendererRegistry.register('otp-phase', OtpPhaseBlock);
 blockRendererRegistry.register('otp-code-input', OtpCodeInputBlock);
+blockRendererRegistry.register('captcha', CaptchaBlock);
+blockRendererRegistry.register('reset-password', ResetPasswordBlock);
 blockRendererRegistry.register('store-locator', StoreLocatorBlock);
 blockRendererRegistry.register('faq-accordion', FaqAccordionBlock);
 blockRendererRegistry.register('share', ShareBlock);