feat(flows): add date/datetime picker webview for get user data step

Author: viethungpv91

apps/builder/__tests__/date-time-picker-form-value-conversion.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, test } from "vitest"
+import { toSelectedValueIso } from "@/features/get-user-data-webview/lib/value-conversion"
+
+describe("toSelectedValueIso", () => {
+  test("returns null when no date is picked", () => {
+    expect(toSelectedValueIso(undefined, "date")).toBeNull()
+  })
+
+  test("date mode converts the picked local calendar day to UTC midnight", () => {
+    // A contact in GMT+7 picks August 21, 2026 — the picker component gives
+    // us a local Date object for that calendar day (local midnight-ish, per
+    // the vendored DateTimePicker). asIsoDate on the typed-reply path parses
+    // a bare "2026-08-21" string as UTC midnight, so the webview path must
+    // match that exactly or the stored day would shift backward for
+    // contacts east of UTC.
+    const pickedLocalDate = new Date(2026, 7, 21, 0, 0, 0) // Aug 21, 2026 local midnight
+
+    const result = toSelectedValueIso(pickedLocalDate, "date")
+
+    expect(result).toBe("2026-08-21T00:00:00.000Z")
+  })
+
+  test("date mode ignores any local time-of-day component and keeps the calendar day", () => {
+    const pickedLocalDate = new Date(2026, 7, 21, 23, 45, 0)
+
+    const result = toSelectedValueIso(pickedLocalDate, "date")
+
+    expect(result).toBe("2026-08-21T00:00:00.000Z")
+  })
+
+  test("datetime mode keeps the picked local instant as-is (ISO instant conversion)", () => {
+    const pickedLocalDate = new Date(2026, 7, 21, 14, 30, 0)
+
+    const result = toSelectedValueIso(pickedLocalDate, "datetime")
+
+    expect(result).toBe(pickedLocalDate.toISOString())
+  })
+})

apps/builder/__tests__/datetime-picker-page.test.tsx

@@ -0,0 +1,164 @@
+// @vitest-environment node
+
+import { beforeEach, describe, expect, test, vi } from "vitest"
+
+const mocks = vi.hoisted(() => ({
+  findById: vi.fn(),
+  verifyUserDataWebviewToken: vi.fn(),
+  loadServableWorkspace: vi.fn(),
+  dateTimePickerForm: vi.fn(() => null),
+}))
+
+vi.mock("next/script", () => ({
+  default: () => null,
+}))
+
+vi.mock("next-intl/server", () => ({
+  getTranslations: vi.fn(async () => (key: string) => key),
+}))
+
+vi.mock("@chatbotx.io/business", () => ({
+  workspaceService: {
+    findById: mocks.findById,
+  },
+}))
+
+vi.mock("@chatbotx.io/encryption", () => ({
+  verifyUserDataWebviewToken: mocks.verifyUserDataWebviewToken,
+}))
+
+vi.mock("@/lib/workspace/load-servable-workspace", () => ({
+  loadServableWorkspace: mocks.loadServableWorkspace,
+}))
+
+vi.mock(
+  "@/features/get-user-data-webview/components/date-time-picker-form",
+  () => ({
+    DateTimePickerForm: mocks.dateTimePickerForm,
+  }),
+)
+
+const { default: DateTimePickerPage } = await import(
+  "../src/app/extensions/datetime-picker/page"
+)
+
+const VALID_PAYLOAD = {
+  workspaceId: "workspace-1",
+  conversationId: "conversation-1",
+  contactInboxId: "contact-inbox-1",
+  contactId: "contact-1",
+  channel: "messenger",
+  flowId: "flow-1",
+  flowVersionId: "flow-version-1",
+  stepId: "step-1",
+  nodeId: "node-1",
+  challengeId: "challenge-1",
+  outputFieldId: "field-1",
+  replyFormat: "date" as const,
+  expiresAt: Date.now() + 60_000,
+}
+
+type ReactElementLike = {
+  type: unknown
+  props: { children?: unknown }
+}
+
+function isReactElementLike(value: unknown): value is ReactElementLike {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "type" in value &&
+    "props" in value
+  )
+}
+
+// The page component is never rendered by a renderer in this test (only
+// `DateTimePickerPage(...)` is invoked directly), so `DateTimePickerForm`
+// itself is never called — React.createElement just builds a plain element
+// tree. Walk that tree to find the DateTimePickerForm element and inspect
+// the props it was given, instead of asserting on the mock function call.
+function findFormElementProps(node: unknown): Record<string, unknown> | null {
+  if (!isReactElementLike(node)) {
+    return null
+  }
+  if (node.type === mocks.dateTimePickerForm) {
+    return node.props as Record<string, unknown>
+  }
+  const children = node.props.children
+  const childList = Array.isArray(children) ? children : [children]
+  for (const child of childList) {
+    const found = findFormElementProps(child)
+    if (found) {
+      return found
+    }
+  }
+  return null
+}
+
+describe("datetime picker webview page", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mocks.loadServableWorkspace.mockResolvedValue({
+      servable: true,
+      workspace: { id: "workspace-1", language: "en" },
+    })
+    mocks.findById.mockResolvedValue({ id: "workspace-1", language: "en" })
+  })
+
+  test("renders an error message when token is missing", async () => {
+    const result = await DateTimePickerPage({
+      searchParams: Promise.resolve({}),
+    })
+
+    expect(mocks.verifyUserDataWebviewToken).not.toHaveBeenCalled()
+    expect(mocks.dateTimePickerForm).not.toHaveBeenCalled()
+    expect(result).toBeTruthy()
+  })
+
+  test("renders an error message when the token fails verification", async () => {
+    mocks.verifyUserDataWebviewToken.mockRejectedValue(
+      new Error("expired token"),
+    )
+
+    await DateTimePickerPage({
+      searchParams: Promise.resolve({ token: "bad-token" }),
+    })
+
+    expect(mocks.loadServableWorkspace).not.toHaveBeenCalled()
+    expect(mocks.dateTimePickerForm).not.toHaveBeenCalled()
+  })
+
+  test("renders the picker in date mode for a valid date-format token", async () => {
+    mocks.verifyUserDataWebviewToken.mockResolvedValue({
+      ...VALID_PAYLOAD,
+      replyFormat: "date",
+    })
+
+    const result = await DateTimePickerPage({
+      searchParams: Promise.resolve({ token: "token-1" }),
+    })
+
+    expect(mocks.loadServableWorkspace).toHaveBeenCalledWith("workspace-1")
+    expect(mocks.findById).toHaveBeenCalledWith({ id: "workspace-1" })
+    expect(findFormElementProps(result)).toEqual({
+      mode: "date",
+      token: "token-1",
+    })
+  })
+
+  test("renders the picker in datetime mode for a valid datetime-format token", async () => {
+    mocks.verifyUserDataWebviewToken.mockResolvedValue({
+      ...VALID_PAYLOAD,
+      replyFormat: "datetime",
+    })
+
+    const result = await DateTimePickerPage({
+      searchParams: Promise.resolve({ token: "token-1" }),
+    })
+
+    expect(findFormElementProps(result)).toEqual({
+      mode: "datetime",
+      token: "token-1",
+    })
+  })
+})

apps/builder/__tests__/submit-date-time-action.test.ts

@@ -0,0 +1,117 @@
+// @vitest-environment node
+
+import { beforeEach, describe, expect, test, vi } from "vitest"
+
+const mocks = vi.hoisted(() => ({
+  integrationQueueAdd: vi.fn(),
+  verifyUserDataWebviewToken: vi.fn(),
+}))
+
+vi.mock("@/lib/safe-action", () => {
+  const chain: Record<string, unknown> = {}
+  chain.inputSchema = vi.fn(() => chain)
+  chain.action = vi.fn((handler: unknown) => handler)
+  return { actionClient: chain }
+})
+
+vi.mock("@chatbotx.io/encryption", () => ({
+  verifyUserDataWebviewToken: mocks.verifyUserDataWebviewToken,
+}))
+
+vi.mock("@chatbotx.io/flow-config", () => ({
+  GET_USER_DATA_WEBVIEW_SELECTION_PAYLOAD_TYPE: "getUserDataWebviewSelection",
+}))
+
+vi.mock("@chatbotx.io/worker-config", () => ({
+  IntegrationJobAction: { sendFlow: "sendFlow" },
+  integrationQueue: { add: mocks.integrationQueueAdd },
+}))
+
+const { submitDateTime, submitDateTimeRequestSchema } = await import(
+  "../src/app/extensions/datetime-picker/actions/submit-date-time.action"
+)
+
+const VALID_PAYLOAD = {
+  workspaceId: "workspace-1",
+  conversationId: "conversation-1",
+  contactInboxId: "contact-inbox-1",
+  contactId: "contact-1",
+  channel: "messenger",
+  flowId: "flow-1",
+  flowVersionId: "flow-version-1",
+  stepId: "step-1",
+  nodeId: "node-1",
+  challengeId: "challenge-1",
+  outputFieldId: "field-1",
+  replyFormat: "date",
+  expiresAt: Date.now() + 60_000,
+}
+
+describe("submitDateTimeAction", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mocks.verifyUserDataWebviewToken.mockResolvedValue(VALID_PAYLOAD)
+    mocks.integrationQueueAdd.mockResolvedValue(undefined)
+  })
+
+  test("enqueues sendFlow with the exact metadata payload from the verified token", async () => {
+    const result = await submitDateTime({
+      token: "token-1",
+      selectedValue: "2026-08-21T00:00:00.000Z",
+    })
+
+    expect(mocks.verifyUserDataWebviewToken).toHaveBeenCalledWith("token-1")
+    expect(mocks.integrationQueueAdd).toHaveBeenCalledTimes(1)
+    expect(mocks.integrationQueueAdd).toHaveBeenCalledWith("sendFlow", {
+      type: "sendFlow",
+      data: {
+        conversationId: "conversation-1",
+        contactInboxId: "contact-inbox-1",
+        flowId: "flow-1",
+        flowVersionId: "flow-version-1",
+        nodeId: "node-1",
+        startFromStepId: "step-1",
+        metadata: {
+          type: "getUserDataWebviewSelection",
+          stepId: "step-1",
+          challengeId: "challenge-1",
+          contactInboxId: "contact-inbox-1",
+          selectedValue: "2026-08-21T00:00:00.000Z",
+        },
+        origin: "channel",
+      },
+    })
+    expect(result).toEqual({ completed: true })
+  })
+
+  test("rejects a non-ISO-datetime selectedValue", () => {
+    expect(
+      submitDateTimeRequestSchema.safeParse({
+        token: "token-1",
+        selectedValue: "not-a-date",
+      }).success,
+    ).toBe(false)
+
+    expect(
+      submitDateTimeRequestSchema.safeParse({
+        token: "token-1",
+        selectedValue: "2026-08-21T00:00:00.000Z",
+      }).success,
+    ).toBe(true)
+  })
+
+  test("does not enqueue when the token fails verification (tampered/expired token)", async () => {
+    mocks.verifyUserDataWebviewToken.mockRejectedValue(
+      new Error("invalid token"),
+    )
+
+    await expect(
+      submitDateTime({
+        token: "tampered-token",
+        selectedValue: "2026-08-21T00:00:00.000Z",
+      }),
+    ).rejects.toThrow("invalid token")
+
+    expect(mocks.integrationQueueAdd).not.toHaveBeenCalled()
+  })
+})

apps/builder/messages/ar.json

@@ -2325,7 +2325,8 @@
     },
     "sendText": {
       "tiktokTitleTruncated": "عند إرفاق أزرار، يرسل TikTok أول 40 حرفًا فقط من هذه الرسالة، وسيتم قص الباقي."
-    }
+    },
+    "dataWasSaved": "تم حفظ البيانات"
   },
   "folders": {
     "heading": {
@@ -4891,6 +4892,28 @@
       "timezoneHint": "تُعرض الأوقات بتوقيت {timezone}."
     }
   },
+  "userDataWebview": {
+    "metadataTitle": "اختيار التاريخ",
+    "date": {
+      "title": "اختر تاريخًا"
+    },
+    "datetime": {
+      "title": "اختر تاريخًا ووقتًا"
+    },
+    "noSelection": "اختر تاريخًا",
+    "actions": {
+      "submit": "إرسال"
+    },
+    "success": {
+      "title": "تم حفظ البيانات",
+      "description": "يمكنك الآن إغلاق هذه العلامة."
+    },
+    "errors": {
+      "invalidTokenTitle": "هذا الرابط غير متاح.",
+      "invalidTokenDescription": "قد يكون الرابط غير صالح أو منتهي الصلاحية. يُرجى طلب رابط جديد.",
+      "submitFailed": "تعذّر إتمام هذا الطلب. يُرجى المحاولة مرة أخرى."
+    }
+  },
   "appointments": {
     "title": "المواعيد",
     "statuses": {

apps/builder/messages/da.json

@@ -2251,7 +2251,8 @@
     },
     "sendText": {
       "tiktokTitleTruncated": "Når der er tilføjet knapper, sender TikTok kun de første 40 tegn af denne besked — resten bliver klippet væk."
-    }
+    },
+    "dataWasSaved": "Data blev gemt"
   },
   "folders": {
     "heading": {
@@ -4891,6 +4892,28 @@
       "timezoneHint": "Tidspunkter vises i {timezone}."
     }
   },
+  "userDataWebview": {
+    "metadataTitle": "Vælg dato",
+    "date": {
+      "title": "Vælg en dato"
+    },
+    "datetime": {
+      "title": "Vælg en dato og et klokkeslæt"
+    },
+    "noSelection": "Vælg en dato",
+    "actions": {
+      "submit": "Send"
+    },
+    "success": {
+      "title": "Data blev gemt",
+      "description": "Du kan lukke denne fane nu."
+    },
+    "errors": {
+      "invalidTokenTitle": "Dette link er ikke tilgængeligt.",
+      "invalidTokenDescription": "Linket kan være ugyldigt eller udløbet. Bed om et nyt link.",
+      "submitFailed": "Vi kunne ikke gennemføre denne anmodning. Prøv venligst igen."
+    }
+  },
   "appointments": {
     "title": "Aftaler",
     "statuses": {