@flamingo-stack/openframe-frontend-core 0.0.595 → 0.0.596-2034.5670.1

package/src/components/ui/benefit-card.tsx

@@ -18,24 +18,24 @@ export const BenefitCard: React.FC<BenefitCardProps> = ({
   variant = 'default',
   className = '',
 }) => {
-  const getBaseStyles = (cardVariant: string) => {
-    const gap = cardVariant === 'auth-figma' ? 'gap-4' : 'gap-2';
-    return `flex ${gap} items-start justify-start relative`;
-  };
+  // Direction and cross-axis alignment only — every other per-variant value
+  // (including `gap`, which used to hide in a ternary here) lives in
+  // `variantStyles` so one variant is one place.
+  const baseStyles = 'flex items-start justify-start relative';
 
   const variantStyles = {
     default: {
-      container: 'bg-ods-bg p-2 md:p-4',
+      container: 'gap-2 bg-ods-bg p-2 md:p-4',
       title: 'font-body font-bold text-body-md md:text-body-lg text-ods-text-primary',
       description: 'font-body font-medium text-body-sm md:text-body-md text-ods-text-secondary',
     },
     dark: {
-      container: 'bg-transparent p-0 shadow-[0px_48px_80px_0px_rgba(0,0,0,0.24)]',
+      container: 'gap-2 bg-transparent p-0 shadow-[0px_48px_80px_0px_rgba(0,0,0,0.24)]',
       title: 'font-mono font-semibold text-heading-4 leading-[40px] text-ods-text-primary tracking-[-0.64px]',
       description: 'font-body font-medium text-body-lg leading-6 text-ods-text-tertiary',
     },
     'auth-figma': {
-      container: 'bg-transparent p-6',
+      container: 'gap-4 bg-transparent p-6',
       title: 'text-h3 text-ods-text-primary tracking-[-0.36px]',
       description: 'text-h4 text-ods-text-secondary',
     },
@@ -44,7 +44,7 @@ export const BenefitCard: React.FC<BenefitCardProps> = ({
   const styles = variantStyles[variant];
 
   return (
-    <div className={cn(getBaseStyles(variant), styles.container, className)}>
+    <div className={cn(baseStyles, styles.container, className)}>
       {icon && <div>{icon}</div>}
       <div className="flex min-w-0 flex-1 flex-col gap-1">
         <h3 className={cn(styles.title)}>{title}</h3>
@@ -93,8 +93,29 @@ export const BenefitCardGrid: React.FC<BenefitCardGridProps> = ({ children, clas
             !isInLastRow && 'border-b md:border-b lg:border-b-0',
             index < 2 && 'lg:border-b-0',
           );
+        } else if (columns === 3) {
+          // 3 columns lay out 1-up / 2-up / 3-up, so the row a card sits in
+          // differs per breakpoint and a single rule cannot describe it. The
+          // old shared 2-3 branch assumed one row and, at `md` (grid-cols-2),
+          // gave card 1 a trailing `md:border-r` while suppressing the divider
+          // between the two rows.
+          const isLastInMdRow = (index + 1) % 2 === 0;
+          const isInLastMdRow = index >= totalItems - (totalItems % 2 === 0 ? 2 : 1);
+          const isLastInLgRow = (index + 1) % 3 === 0;
+          const isInLastLgRow = index >= totalItems - (totalItems % 3 === 0 ? 3 : totalItems % 3);
+          borderClass = cn(
+            'border-ods-border',
+            !isLastItem && 'border-b',
+            isInLastMdRow && 'md:border-b-0',
+            !isLastInMdRow && !isLastItem && 'md:border-r',
+            isLastInMdRow && 'md:border-r-0',
+            isInLastLgRow && 'lg:border-b-0',
+            !isInLastMdRow && !isInLastLgRow && 'lg:border-b',
+            !isLastInLgRow && !isLastItem && 'lg:border-r',
+            isLastInLgRow && 'lg:border-r-0',
+          );
         } else {
-          // Original 2-3 column logic
+          // 2 columns: a flex row, so one rule genuinely does describe it.
           borderClass = isLastItem ? 'border-b-0' : 'border-b md:border-b-0 md:border-r border-ods-border';
         }
 

package/src/schemas/meeting-booking-schema.ts

@@ -225,7 +225,15 @@ export function isValidBcp47Locale(locale: string): boolean {
  * in the visitor's local time) — this schema is the ONLY place a
  * client-supplied zone is accepted; the availability path is UTC-pinned.
  */
-export function makeBookingSchema(formFields: MeetingFormField[], legalConsent: MeetingLegalConsent | null) {
+function buildBookingSchema<TStart extends z.ZodTypeAny, TDuration extends z.ZodTypeAny, TZone extends z.ZodTypeAny>(
+  formFields: MeetingFormField[],
+  legalConsent: MeetingLegalConsent | null,
+  // Passed IN rather than switched on a boolean: a `deferSlot: boolean`
+  // parameter cannot be narrowed at type level, so every ternary inside would
+  // infer a union and widen `startTimeMs`/`durationMs` to `number | null |
+  // undefined` for BOTH schemas — including the server's wire type.
+  slot: { startTimeMs: TStart; durationMs: TDuration; timezone: TZone },
+) {
   const answers: Record<string, z.ZodTypeAny> = {};
   for (const field of formFields) {
     if (!isSupportedFormField(field)) continue; // unsupported types are fail-closed at render time
@@ -276,12 +284,12 @@ export function makeBookingSchema(formFields: MeetingFormField[], legalConsent:
     z
       .object({
         meetingId: z.string().min(1),
-        startTimeMs: z.number().int().positive(),
-        durationMs: z.number().int().positive(),
+        startTimeMs: slot.startTimeMs,
+        durationMs: slot.durationMs,
         firstName: z.string().min(1, { message: 'First name is required' }).max(255),
         lastName: z.string().min(1, { message: 'Last name is required' }).max(255),
         email: z.string().email({ message: 'Please enter a valid email address' }).max(255),
-        timezone: z.string().refine(isValidIanaTimezone, { message: 'Invalid timezone' }),
+        timezone: slot.timezone,
         locale: z.string().refine(isValidBcp47Locale, { message: 'Invalid locale' }).optional(),
         // Plain `.optional()` (no `.default()`) so zod's input and output types
         // match — react-hook-form's zodResolver needs them identical, and the
@@ -311,4 +319,50 @@ export function makeBookingSchema(formFields: MeetingFormField[], legalConsent:
   );
 }
 
+/**
+ * The STRICT schema — the wire contract. The server rebuilds it from the link's
+ * own fetched metadata and validates every booking against it; a slot and a
+ * duration are not optional on anything that reaches HubSpot.
+ */
+export function makeBookingSchema(formFields: MeetingFormField[], legalConsent: MeetingLegalConsent | null) {
+  return buildBookingSchema(formFields, legalConsent, {
+    startTimeMs: z.number().int().positive(),
+    durationMs: z.number().int().positive(),
+    timezone: z.string().refine(isValidIanaTimezone, { message: 'Invalid timezone' }),
+  });
+}
+
+/**
+ * The DEFERRED schema — same fields, with the slot/duration/timezone triple
+ * relaxed. `flow="details-first"` collects answers BEFORE a slot exists, so the
+ * form validates against this and the parent re-attaches the authoritative
+ * values at POST time.
+ *
+ * Two named exports over one private builder rather than an overload or an
+ * options flag: `MeetingBookingPayload` is `z.infer<ReturnType<...>>`, and
+ * either of those alternatives would widen `startTimeMs`/`durationMs` to
+ * `number | undefined` for EVERY consumer — including the server's
+ * `durationsMs.includes(data.durationMs)`.
+ */
+export function makeDeferredBookingSchema(formFields: MeetingFormField[], legalConsent: MeetingLegalConsent | null) {
+  // `.nullish()`, not `.optional()`: the widget passes these straight into
+  // `defaultValues`, and details-first has `timezone === null` on the server
+  // render and the first client render (zone resolution is post-hydration).
+  // Accepting only `undefined` would reject a field with no rendered control
+  // and no FieldWrapper — the submit button silently dead, type-check clean.
+  return buildBookingSchema(formFields, legalConsent, {
+    startTimeMs: z.number().int().positive().nullish(),
+    durationMs: z.number().int().positive().nullish(),
+    timezone: z.string().refine(isValidIanaTimezone, { message: 'Invalid timezone' }).nullish(),
+  });
+}
+
+/** The wire payload. Pinned to the STRICT builder — see above. */
 export type MeetingBookingPayload = z.infer<ReturnType<typeof makeBookingSchema>>;
+
+/**
+ * The form's value type, used as the `useForm` generic in BOTH flows: a relaxed
+ * resolver is not assignable to `Resolver<MeetingBookingPayload>`, and mixing
+ * the two survives only on TS's bivariant method-parameter check.
+ */
+export type BookingFormValues = z.infer<ReturnType<typeof makeDeferredBookingSchema>>;

package/src/types/tmcg.ts

@@ -106,5 +106,3 @@ export const TMCG_ROLE_DISPLAY_NAMES: Record<string, string> = {
   [TMCG_ROLES.SPEAKER]: 'Speaker',
   [TMCG_ROLES.MENTOR]: 'Mentor',
 };
-
-

package/src/utils/format.ts

@@ -184,7 +184,7 @@ export interface NameInitialsOptions {
 export function nameInitials(
   name: string | null | undefined,
   fallback: string = 'E',
-  options: NameInitialsOptions = {}
+  options: NameInitialsOptions = {},
 ): string {
   const { maxLetters = 2, pick: mode = 'all' } = options;
   const source = typeof name === 'string' ? name.trim() : '';