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

package/src/blocks/otp-code-input-block.tsx

@@ -0,0 +1,180 @@
+'use client';
+
+import React from 'react';
+import { partAttrs } from '../utils';
+import { readToggle } from './product-block-utils';
+import { useOtpForm } from '../auth/otp-form-context';
+import { BlockRendererProps } from './block-renderer-registry';
+
+/**
+ * The code boxes of an SMS verification, as a block of its own.
+ *
+ * The one piece of a composed OTP form that cannot be a dumb child: a box has
+ * to write into the ONE code the form verifies, and the caret has to walk to
+ * the next empty box as digits arrive. So the boxes stay together in one block
+ * and read the form through `useOtpForm` — everything else about the phase (the
+ * copy, the CTA, the resend) is an ordinary block the designer arranges.
+ *
+ * Standalone it draws the same row, disabled: a designer dropping it on a page
+ * sees what it is instead of nothing, and there is no code to collect there.
+ * How many boxes that preview shows is not worth a setting — the number that
+ * matters is the length the form verifies, and the form owns it — so the row
+ * outside a form is a fixed `STANDALONE_BOXES` wide. The editor used to offer a
+ * box count here, which inside a form (where the block lives) could only sit at
+ * a value the canvas ignored; authors read that as the setting being broken.
+ *
+ * Properties: showCountdown.
+ * Parts: row, box, countdown.
+ */
+const RING_RADIUS = 16;
+
+/** The disabled preview's width, when there is no form to take it from. */
+const STANDALONE_BOXES = 6;
+
+const OtpCodeInputBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const form = useOtpForm();
+  /**
+   * The row's own handles on its boxes. The form is handed the same elements
+   * (it walks the caret forward as digits arrive), but stepping BACK on a
+   * Backspace is the row's own business and needs no round trip through it.
+   */
+  const boxesRef = React.useRef<Array<HTMLInputElement | null>>([]);
+
+  const showCountdown = readToggle(
+    block.properties?.showCountdown,
+    currentBreakpoint,
+    true
+  );
+
+  const codeLength = form?.codeLength ?? STANDALONE_BOXES;
+  const code = form?.code ?? '';
+  const secondsLeft = form?.secondsLeft ?? 0;
+  const timerSeconds = form?.timerSeconds ?? 0;
+  const inDesigner = form?.isDesigner ?? isDesigner;
+
+  // In the canvas the ring shows a full circle rather than a live count: there
+  // is no send to count down from, and an empty ring reads as a bug.
+  const displayedSeconds = inDesigner ? timerSeconds : secondsLeft;
+  const countdownRatio =
+    timerSeconds > 0 ? Math.max(0, displayedSeconds / timerSeconds) : 0;
+  const ringCircumference = 2 * Math.PI * RING_RADIUS;
+
+  const countdown =
+    showCountdown && timerSeconds > 0 && (inDesigner || secondsLeft > 0) ? (
+      <span
+        data-otp-code-countdown=""
+        {...partAttrs('countdown')}
+        aria-hidden="true"
+        style={{ display: 'inline-flex', flexShrink: 0 }}
+      >
+        <svg width="40" height="40" viewBox="0 0 40 40" role="presentation">
+          <circle
+            cx="20"
+            cy="20"
+            r={RING_RADIUS}
+            fill="none"
+            stroke="var(--otp-form-ring-track, #e5e7eb)"
+            strokeWidth="3"
+          />
+          <circle
+            cx="20"
+            cy="20"
+            r={RING_RADIUS}
+            fill="none"
+            stroke="var(--otp-form-ring, #111827)"
+            strokeWidth="3"
+            strokeLinecap="round"
+            strokeDasharray={ringCircumference}
+            strokeDashoffset={ringCircumference * (1 - countdownRatio)}
+            transform="rotate(-90 20 20)"
+          />
+          <text
+            x="20"
+            y="24"
+            textAnchor="middle"
+            fontSize="12"
+            fill="currentColor"
+          >
+            {displayedSeconds}
+          </text>
+        </svg>
+      </span>
+    ) : null;
+
+  return (
+    <div
+      data-otp-code=""
+      {...partAttrs('row')}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 'var(--otp-form-code-gap, 8px)'
+      }}
+    >
+      {countdown}
+
+      {Array.from({ length: codeLength }, (_, index) => (
+        <input
+          key={index}
+          ref={(element) => {
+            boxesRef.current[index] = element;
+            form?.registerCodeInput(index, element);
+          }}
+          type="text"
+          inputMode="numeric"
+          autoComplete={index === 0 ? 'one-time-code' : 'off'}
+          aria-label={`${index + 1} / ${codeLength}`}
+          // No name on purpose: the code is read from the form's own state, and
+          // a named box would put half a code into the submitted payload.
+          // A blank stands for a box the shopper skipped; it draws empty.
+          value={(code[index] ?? '').trim()}
+          disabled={!form}
+          // The box the digit was typed in, not the end of the code: a row of
+          // boxes has to let a shopper go back and fix one.
+          onChange={(event) =>
+            form?.setDigitAt(index, event.target.value.replace(/\D/g, ''))
+          }
+          onKeyDown={(event) => {
+            if (event.key === 'Backspace') {
+              event.preventDefault();
+
+              // Empty this box, or step back into the one before it when this
+              // one is already empty — what every code row does.
+              const digit = (code[index] ?? '').trim();
+
+              if (digit) {
+                form?.clearDigitAt(index);
+              } else if (index > 0) {
+                form?.clearDigitAt(index - 1);
+                boxesRef.current[index - 1]?.focus();
+              }
+            }
+          }}
+          onPaste={(event) => {
+            event.preventDefault();
+            form?.appendDigits(
+              event.clipboardData.getData('text').replace(/\D/g, '')
+            );
+          }}
+          {...partAttrs('box')}
+          style={{
+            width: '40px',
+            height: '48px',
+            textAlign: 'center',
+            fontSize: '18px',
+            border: '1px solid var(--otp-form-border, #d1d5db)',
+            background: 'transparent',
+            color: 'inherit',
+            outline: 'none'
+          }}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default OtpCodeInputBlock;