Feat/popups v2 rules

__tests__/alert_initialization_test.js

@@ -1,7 +1,7 @@
 import { Application } from '@hotwired/stimulus'
 import Hellotext from '../src/hellotext'
 import API from '../src/api'
-import { Business, Push } from '../src/models'
+import { Business, Push, Webchat } from '../src/models'
 import AlertController from '../src/controllers/alert_controller'
 
 const html = `
@@ -129,6 +129,16 @@ describe('Smart Alert initialization', () => {
     expect(document.querySelector('article')).toBeNull()
   })
 
+  it('does not mount an alert when another widget fails to load', async () => {
+    hydrate(businessData({ webchat: { id: 'broken-webchat' } }))
+    jest.spyOn(Webchat, 'load').mockRejectedValue(new Error('Unable to load webchat'))
+
+    await expect(initialize()).rejects.toThrow('Unable to load webchat')
+
+    expect(Hellotext.alert).toBeNull()
+    expect(document.querySelector('article')).toBeNull()
+  })
+
   it('removes the old alert when reinitialized with Push disabled', async () => {
     await initialize()
     const previous = Hellotext.alert

__tests__/api/identifications_test.js

@@ -0,0 +1,39 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import IdentificationsAPI from '../../src/api/identifications'
+import Hellotext from '../../src/hellotext'
+import { Configuration } from '../../src/core'
+
+describe('IdentificationsAPI', () => {
+  beforeEach(() => {
+    Configuration.apiRoot = 'https://api.hellotext.test/v1'
+    Hellotext.business = { id: 'business-id' }
+    jest.spyOn(Hellotext, 'session', 'get').mockReturnValue('session-123')
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: jest.fn().mockResolvedValue({ status: 'completed' }),
+    })
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+    Configuration.apiRoot = 'https://api.hellotext.com/v1'
+  })
+
+  it('checks a receipt within the current business and session', async () => {
+    const response = await IdentificationsAPI.status('receipt-1')
+    const [request, options] = global.fetch.mock.calls[0]
+    const url = new URL(request)
+
+    expect(url.pathname).toBe('/v1/public/identifications/receipt-1')
+    expect(url.search).toBe('')
+    expect(options).toEqual({
+      method: 'GET',
+      headers: { ...Hellotext.headers, 'X-Hellotext-Session': 'session-123' },
+    })
+    expect(response.succeeded).toBe(true)
+  })
+})

__tests__/api/popups_test.js

@@ -48,6 +48,9 @@ describe('PopupsAPI', () => {
     expect(url.searchParams.get('locale')).toBe('es')
     expect(url.searchParams.get('device')).toBe('desktop')
     expect(global.fetch.mock.calls[0][1].headers.Authorization).toBe('Bearer business-id')
+    // Rails withholds a popup that depends on browser rules from a runtime that does not
+    // declare it can check them.
+    expect(global.fetch.mock.calls[0][1].headers['X-Hellotext-Popup-Rules']).toBe('1')
     expect(element.id).toBe('popup-widget')
     expect(Hellotext.business.setData).toHaveBeenCalledWith({ id: 'business-id' })
     expect(Hellotext.business.setLocale).toHaveBeenCalledWith('es')

__tests__/controllers/message_controller_test.js

@@ -378,6 +378,15 @@ describe('MessageController', () => {
       expect(Hellotext.track).not.toHaveBeenCalled()
     })
 
+    it('does not record cart activity before the platform confirms success', () => {
+      const recordActivity = jest.spyOn(Hellotext, 'recordActivity').mockImplementation(() => {})
+
+      controller.addToCart({ currentTarget: mockButton })
+
+      expect(recordActivity).not.toHaveBeenCalled()
+      recordActivity.mockRestore()
+    })
+
     it('saves the message UTM before dispatching the cart addition', () => {
       const originalPage = Hellotext.page
       const save = jest.fn()

__tests__/controllers/popup_controller_test.js

@@ -5,6 +5,7 @@
 import PopupController from '../../src/controllers/popup_controller'
 import PopupsAPI from '../../src/api/popups'
 import Hellotext from '../../src/hellotext'
+import { Cookies } from '../../src/models/cookies'
 
 describe('PopupController', () => {
   let controller
@@ -89,6 +90,8 @@ describe('PopupController', () => {
     controller.captureValue = { capture_id: 'capture-id' }
     controller.deviceValue = 'all'
     controller.idValue = id
+    // Before initialize(): that is where the controller builds its display rules.
+    controller.rulesValue = { lanes: [] }
     controller.initialize()
 
     return {
@@ -132,6 +135,186 @@ describe('PopupController', () => {
     document.body.innerHTML = ''
   })
 
+  // A rule may target any of the three campaign parameters. The URL the visitor is on answers
+  // for itself, and what it carried is remembered for the rest of the visit — persisted
+  // attribution, which outlives the visit by years, is never the fallback.
+  describe('UTM rules', () => {
+    const utmRule = (field, value) => ({
+      lanes: [[{ type: 'condition', field, operator: 'is', values: [value] }]],
+    })
+    const flushTimers = () => new Promise(resolve => setTimeout(resolve, 0))
+    let originalPage
+
+    // The rule has to be in place before initialize(), which is where the controller builds
+    // it. Assigning rulesValue after that leaves the controller evaluating an empty rule set,
+    // which matches every page and would let these tests pass without reading their rule.
+    const connectWith = rules => {
+      const built = buildController({ hasBubble: false })
+      controller.rulesValue = rules
+      controller.initialize()
+      controller.connect()
+
+      return built
+    }
+
+    beforeEach(() => {
+      originalPage = Hellotext.page
+      // Set, and expected to stay unread: this is the attribution the browser persisted.
+      Hellotext.page = { utmParams: { source: 'google', medium: 'cpc' } }
+      Hellotext.visitBusinessId = 'business-1'
+      Hellotext.visitCampaign = {}
+      window.sessionStorage.clear()
+    })
+
+    afterEach(() => {
+      controller?.disconnect()
+      Hellotext.page = originalPage
+      Hellotext.visitCampaign = {}
+      window.history.replaceState({}, '', '/')
+    })
+
+    it('matches a campaign the URL carries without a source or medium', () => {
+      window.history.replaceState({}, '', '/landing?utm_campaign=spring')
+
+      const { element } = connectWith(utmRule('session.utm_campaign', 'spring'))
+
+      expect(element.hidden).toBe(false)
+    })
+
+    it('ignores capitalization while keeping each value as the link wrote it', () => {
+      window.history.replaceState({}, '', '/landing?utm_source=Google&utm_medium=Paid_Social&utm_campaign=Spring')
+
+      const { element } = connectWith(utmRule('session.utm_source', 'google'))
+
+      expect(element.hidden).toBe(false)
+      expect(controller.pageContext().utm).toEqual({
+        source: 'Google',
+        medium: 'Paid_Social',
+        campaign: 'Spring',
+      })
+
+      controller.disconnect()
+      const campaign = connectWith(utmRule('session.utm_campaign', 'spring'))
+
+      expect(campaign.element.hidden).toBe(false)
+    })
+
+    it('keeps an encoded literal plus distinct from a space in campaign values', () => {
+      window.history.replaceState({}, '', '/landing?utm_campaign=Black%2BFriday')
+
+      const plus = connectWith(utmRule('session.utm_campaign', 'black+friday'))
+
+      expect(plus.element.hidden).toBe(false)
+      expect(controller.pageContext().utm).toEqual({ campaign: 'Black+Friday' })
+
+      controller.disconnect()
+      const words = connectWith(utmRule('session.utm_campaign', 'black friday'))
+
+      expect(words.element.hidden).toBe(true)
+    })
+
+    it('keeps the campaign this visit arrived with once the URL drops it', () => {
+      Hellotext.rememberVisitCampaign({ campaign: 'spring' })
+      window.history.replaceState({}, '', '/products/42')
+
+      const { element } = connectWith(utmRule('session.utm_campaign', 'spring'))
+
+      expect(element.hidden).toBe(false)
+    })
+
+    // `hello_utm` records only a complete source and medium pair and survives for years, so
+    // an old campaign must never decide a popup for a visit that arrived some other way.
+    it('never falls back to the attribution persisted for the browser', () => {
+      window.history.replaceState({}, '', '/landing')
+
+      const { element } = connectWith(utmRule('session.utm_source', 'google'))
+
+      expect(element.hidden).toBe(true)
+      expect(controller.pageContext().utm).toEqual({})
+    })
+
+    it('lets the URL replace the remembered campaign rather than merge with it', () => {
+      Hellotext.rememberVisitCampaign({ source: 'google', medium: 'cpc' })
+      window.history.replaceState({}, '', '/landing?utm_campaign=spring')
+
+      const { element } = connectWith(utmRule('session.utm_source', 'google'))
+
+      expect(element.hidden).toBe(true)
+      expect(controller.pageContext().utm).toEqual({ campaign: 'spring' })
+    })
+
+    it('ignores parameters that name no campaign', () => {
+      Hellotext.rememberVisitCampaign({ source: 'google', medium: 'cpc' })
+      window.history.replaceState({}, '', '/landing?utm_term=shoes')
+
+      const { element } = connectWith(utmRule('session.utm_source', 'google'))
+
+      expect(element.hidden).toBe(false)
+    })
+
+    it('falls back when UTM values are blank and reads campaign parameters from a hash route', () => {
+      Hellotext.rememberVisitCampaign({ source: 'Google', medium: 'CPC' })
+      window.history.replaceState({}, '', '/landing?utm_campaign=%20')
+
+      const { element } = connectWith(utmRule('session.utm_source', 'google'))
+      expect(element.hidden).toBe(false)
+
+      controller.disconnect()
+      window.history.replaceState({}, '', '/?affiliate=1#/landing?utm_campaign=spring')
+      const hashRoute = connectWith(utmRule('session.utm_source', 'google'))
+
+      expect(hashRoute.element.hidden).toBe(true)
+    })
+
+    it('prefers a document campaign over campaign parameters inside the hash route', () => {
+      window.history.replaceState(
+        {},
+        '',
+        '/?utm_source=paid#/landing?utm_campaign=spring',
+      )
+
+      const { element } = connectWith(utmRule('session.utm_source', 'paid'))
+
+      expect(element.hidden).toBe(false)
+      expect(controller.pageContext().utm).toEqual({ source: 'paid' })
+    })
+
+    it('uses the first duplicate UTM parameter without changing persisted attribution', () => {
+      const set = jest.spyOn(Cookies, 'set')
+      window.history.replaceState({}, '', '/landing?utm_source=First&utm_source=Second')
+
+      const { element } = connectWith(utmRule('session.utm_source', 'first'))
+
+      expect(element.hidden).toBe(false)
+      expect(controller.pageContext().utm).toEqual({ source: 'First' })
+      expect(set).not.toHaveBeenCalled()
+    })
+
+    it('re-reads the URL after a SPA route adds a campaign', async () => {
+      window.history.replaceState({}, '', '/landing')
+
+      const { element } = connectWith(utmRule('session.utm_source', 'newsletter'))
+      expect(element.hidden).toBe(true)
+
+      window.history.pushState({}, '', '/offer?utm_source=newsletter')
+      await flushTimers()
+
+      expect(element.hidden).toBe(false)
+    })
+  })
+
+  describe('browser detection', () => {
+    it.each([
+      ['Opera', 'Mozilla/5.0 Chrome/120.0.0.0 Safari/537.36 OPR/106.0.0.0'],
+      ['Samsung Internet', 'Mozilla/5.0 Chrome/120.0.0.0 Mobile Safari/537.36 SamsungBrowser/23.0'],
+    ])('does not classify %s as Chrome', (_browser, userAgent) => {
+      jest.spyOn(window.navigator, 'userAgent', 'get').mockReturnValue(userAgent)
+      buildController()
+
+      expect(controller.browserName()).toBeUndefined()
+    })
+  })
+
   it('shows the bubble first and opens the dialog when clicked', () => {
     const { element, bubble, dialog } = buildController()
 
@@ -309,6 +492,49 @@ describe('PopupController', () => {
     expect(controller.submitButtonTargets.every(button => !button.disabled)).toBe(true)
   })
 
+  it('returns to the step containing a field the server rejects', async () => {
+    const { emailInput, phoneInput, stepOne, stepTwo } = buildController({ hasBubble: false })
+    PopupsAPI.submit.mockResolvedValueOnce({
+      failed: true,
+      json: jest.fn().mockResolvedValue({
+        errors: [{ parameter: 'email', description: 'Email is already in use.' }],
+      }),
+    })
+
+    controller.connect()
+    emailInput.value = 'customer@example.com'
+    await controller.next()
+    phoneInput.value = '+15551234567'
+    await controller.submit()
+
+    expect(controller.stepIndex).toBe(0)
+    expect(stepOne.hidden).toBe(false)
+    expect(stepTwo.hidden).toBe(true)
+    expect(emailInput.validationMessage).toBe('Email is already in use.')
+  })
+
+  it('returns to the step associated with a rejected field outside its layout wrapper', async () => {
+    const { emailInput, phoneInput, stepOne, stepTwo } = buildController({ hasBubble: false })
+    stepOne.removeChild(emailInput)
+    controller.element.appendChild(emailInput)
+    PopupsAPI.submit.mockResolvedValueOnce({
+      failed: true,
+      json: jest.fn().mockResolvedValue({
+        errors: [{ parameter: 'email', description: 'Email is already in use.' }],
+      }),
+    })
+
+    controller.connect()
+    emailInput.value = 'customer@example.com'
+    phoneInput.value = '+15551234567'
+    controller.showStep(1)
+    await controller.submit()
+
+    expect(controller.stepIndex).toBe(0)
+    expect(stepOne.hidden).toBe(false)
+    expect(stepTwo.hidden).toBe(true)
+  })
+
   it('shows a one-minute resend cooldown and the change action for the submitted identity', async () => {
     jest.useFakeTimers()
     jest.setSystemTime(new Date('2026-08-24T12:00:00Z'))
@@ -480,6 +706,44 @@ describe('PopupController', () => {
     )
   })
 
+  it('submits a prefixed phone value in the identity and metadata fields', () => {
+    const { emailInput, phoneInput } = buildController({ hasBubble: false })
+
+    emailInput.required = false
+    phoneInput.dataset.popupPhonePrefix = '+58'
+    phoneInput.value = '04126625353'
+
+    expect(controller.submissionPayload()).toEqual(
+      expect.objectContaining({
+        phone: '+584126625353',
+        metadata: expect.objectContaining({
+          fields: expect.objectContaining({ phone: '+584126625353' }),
+          steps: expect.arrayContaining([
+            expect.objectContaining({ fields: expect.objectContaining({ phone: '+584126625353' }) }),
+          ]),
+        }),
+      }),
+    )
+  })
+
+  it('keeps an empty optional phone blank when it has a country prefix', () => {
+    const { emailInput, phoneInput } = buildController({ hasBubble: false })
+
+    phoneInput.required = false
+    phoneInput.dataset.popupPhonePrefix = '+58'
+    phoneInput.value = ''
+    emailInput.value = 'customer@example.com'
+
+    expect(controller.submissionPayload()).toEqual(
+      expect.objectContaining({
+        phone: '',
+        metadata: expect.objectContaining({
+          fields: expect.objectContaining({ phone: '' }),
+        }),
+      }),
+    )
+  })
+
   it('uses the backend delivery channel and destination in the completed step', () => {
     const { completed, emailInput, phoneInput } = buildController({ hasBubble: false })