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

package/src/blocks/otp-phase-block.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import React from 'react';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { renderComposedChildren } from './render-composed-children';
+import { BlockRendererProps } from './block-renderer-registry';
+import { DesignerPlaceholder } from './product-block-utils';
+
+/**
+ * One half of an SMS verification, as a named wrapper whose contents are
+ * authored as CHILD blocks: the number entry, or the code entry.
+ *
+ * Deliberately shaped like `auth-step`, and for the same reason — the phase
+ * itself decides nothing about visibility. The OTP FORM renders only the phase
+ * it is in, exactly as an auth flow renders only its active step; dropped
+ * anywhere else a phase is just a labelled column whose children always show.
+ * That is what keeps a phase dressable on its own.
+ *
+ * Properties: phaseKey.
+ * Parts: phase.
+ */
+const OtpPhaseBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  isDesigner = false,
+  selectedBlockId,
+  currentBreakpoint = 'desktop'
+}: BlockRendererProps) => {
+  const phaseKey = String(
+    getResponsiveValue(block.properties?.phaseKey, currentBreakpoint, '')
+  ).trim();
+
+  const childBlocks = (block.blocks || [])
+    .filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
+    .sort((a, b) => (a.order || 0) - (b.order || 0));
+
+  // An empty phase renders nothing a shopper could see; in the canvas it has to
+  // say what it is waiting for, or adding one looks like nothing happened.
+  if (childBlocks.length === 0 && !isDesigner) return null;
+
+  return (
+    <div
+      data-otp-phase=""
+      // Fills its block wrapper; see the note in auth-step-block.tsx.
+      className="w-full"
+      data-otp-phase-key={phaseKey || undefined}
+      {...partAttrs('phase')}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--otp-phase-gap, 12px)'
+      }}
+    >
+      {childBlocks.length === 0 ? (
+        <DesignerPlaceholder label="OTP phase (drop its content here)" />
+      ) : (
+        renderComposedChildren({
+          blocks: childBlocks,
+          placeholderId,
+          sectionId,
+          isDesigner,
+          selectedBlockId,
+          currentBreakpoint
+        })
+      )}
+    </div>
+  );
+};
+
+export default OtpPhaseBlock;