@qite/tide-booking-component 1.4.124 → 1.4.125

package/MEMORY.md

@@ -1,97 +0,0 @@
-# TIDE-3053 — Expose payment URL in self-contained booking wizard
-
-## Goal
-
-Make the Tide PSP payment flow usable from the **self-contained** booking-wizard build (`selfcontained/booking-wizard`). Until this change the wrapper had no way to opt into payment-link generation, even though the underlying React component already supported it. Also give the embedding host page a way to **see and act on** the `paymentUrl` returned by Tide instead of being force-redirected.
-
-## Background — how the payment flow already worked in the underlying component
-
-These settings already exist on `Settings` (see [src/booking-wizard/types.ts](src/booking-wizard/types.ts)):
-
-- `generatePaymentUrl` — master switch. When true, the booking call sends `returnPaymentUrl: true` and Tide responds with a `paymentUrl` (PSP URL).
-- `skipPaymentWithAgent` — when an agent is selected, suppress the redirect anyway (B2B flow).
-
-The booking-request builder at [src/booking-wizard/features/booking/selectors.ts:321-325](src/booking-wizard/features/booking/selectors.ts:321) computes `returnPaymentUrl` from those two settings + the selected agent. The summary page at [src/booking-wizard/features/summary/summary.tsx](src/booking-wizard/features/summary/summary.tsx) then submits the booking, gets a `paymentUrl` back, and (previously) auto-redirected to it.
-
-The self-contained wrapper at [selfcontained/booking-wizard/index.tsx](selfcontained/booking-wizard/index.tsx) reads HTML attributes off the inner `<div>` and builds a `Settings` object — but it never read any payment-related attributes, so `generatePaymentUrl` defaulted to `false` and the whole chain was inert.
-
-## Changes in this branch
-
-### 1. `selfcontained/booking-wizard/index.tsx`
-
-Read three new HTML attributes from the settings element and pass them through to the `Settings` context:
-
-| Attribute              | Type                   | Meaning                                                                                                                                                      |
-| ---------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `generatePaymentUrl`   | presence-based boolean | Enables PSP payment-link generation                                                                                                                          |
-| `skipPaymentWithAgent` | presence-based boolean | Skips the payment redirect when an agent is selected                                                                                                         |
-| `paymentRedirectUrl`   | string                 | URL Tide passes to the PSP as the "return after payment" URL. If omitted, falls back to the previous default (built from `basePath` + booking query string). |
-
-### 2. `src/booking-wizard/types.ts`
-
-Added `paymentRedirectUrl?: string` to `Settings`.
-
-### 3. `src/booking-wizard/features/summary/summary.tsx`
-
-Two behavior changes (apply to both the routed and self-contained wizard builds):
-
-a. **Configurable PSP return URL.** When `settings.paymentRedirectUrl` is set, it is used verbatim as `bookRequest.payload.redirectUrl`. Otherwise the previous `${protocol}//${host}${basePath}?${bookingQueryString}` construction is used. This lets the host pass a URL that includes a `{bookingNr}` placeholder for Tide to substitute server-side (see "Open question" below).
-
-b. **`paymentUrl` is exposed via a `CustomEvent`.** When the booking response contains a `paymentUrl`, a cancelable `CustomEvent` named `tide-booking-payment-url` is dispatched on the `#tide-booking` element (or `window` as fallback) before the auto-redirect. Detail payload:
-
-```ts
-{
-  paymentUrl: string;
-  bookingNumber: string;
-}
-```
-
-The event bubbles and is cancelable. If a listener calls `e.preventDefault()`, the component will **not** auto-redirect to `paymentUrl` — the host page is then responsible for whatever happens next (open in new tab, modal, custom redirect, etc.). When nothing listens (or the listener doesn't `preventDefault`), the existing behavior is preserved: `window.location.href = paymentUrl`.
-
-## How a host page consumes this
-
-```html
-<div id="tide-booking">
-  <div
-    officeId="1"
-    apiUrl="..."
-    apiKey="..."
-    productCode="..."
-    generatePaymentUrl
-    paymentRedirectUrl="https://example.com/confirmation?bookingNr={bookingNr}"></div>
-</div>
-
-<script src="dist/bundle.js"></script>
-<script>
-  document.getElementById('tide-booking').addEventListener('tide-booking-payment-url', (e) => {
-    console.log(e.detail.paymentUrl, e.detail.bookingNumber);
-    // Option A: do nothing → component auto-redirects to e.detail.paymentUrl
-    // Option B: e.preventDefault(); window.open(e.detail.paymentUrl, '_blank'); etc.
-  });
-</script>
-```
-
-## Open question to confirm with the Tide backend team
-
-The user-confirmed behavior is: **Tide's API uses the `redirectUrl` string verbatim — it does not append `bookingNr` automatically.** In the Sitecore integration, a `{bookingNr}` (or similar) placeholder is included in the `redirectUrl` and Tide substitutes the actual booking number server-side before handing the URL to the PSP.
-
-We need confirmation of:
-
-1. The exact placeholder syntax Tide's API supports (`{bookingNr}`? `{{bookingNr}}`? something else?).
-2. Whether other tokens are supported (e.g. `{officeId}`, `{transactionId}`).
-
-The wizard already handles the return: [booking-self-contained.tsx:132](src/booking-wizard/features/booking/booking-self-contained.tsx:132) reads `bookingNr` from the URL on load and jumps to the confirmation step. So once the placeholder syntax is confirmed and the host page sends e.g. `?bookingNr={bookingNr}`, the resume flow should work end-to-end.
-
-## Not done in this PR (deliberately)
-
-- **No UI changes.** The summary spinner / "Redirecting to payment provider…" label is unchanged. There is no UI for the host to "review the URL" before redirecting — that's expected to be host-side.
-- **No end-to-end test against a real PSP-configured Tide office.** Needs verification.
-- **Search-results booking flow is untouched.** [src/search-results/components/book-packaging-entry/index.tsx:184](src/search-results/components/book-packaging-entry/index.tsx:184) still does an unconditional `window.location.href = paymentUrl`. If consistent behavior across both booking surfaces is desired, the same `CustomEvent` should be added there (it already has its own `generatePaymentUrl` flag on a separate context type).
-- **Type declaration for the custom event.** Consumers using TypeScript will currently see `e.detail` as `any` because the event isn't declared in a `WindowEventMap` augmentation. Consider adding a `.d.ts` if the host site is in TS.
-
-## Files touched
-
-- `selfcontained/booking-wizard/index.tsx`
-- `src/booking-wizard/types.ts`
-- `src/booking-wizard/features/summary/summary.tsx`
-- `MEMORY.md` (this file)

package/NEXTSTEPS.md

@@ -1,94 +0,0 @@
-# NEXTSTEPS — TIDESUPP-75 / Booking-product & wizard rework
-
-> **Delete this file when the items below are resolved.** It is a scratch handoff doc, not permanent repo documentation.
-
-Code work is complete and committed across this branch (`feature/product-component-some-rework-other-service-types`). The items below are what a human needs to do before this merges to master.
-
----
-
-## 1. Install lint-staged (one command, blocks commits if skipped)
-
-The new pre-commit hook in `.husky/pre-commit` calls `npx lint-staged`, but the package isn't yet a dependency. Pin to v15 because v16+ requires Node 20.12+ and our `.nvmrc` is 20.10.
-
-```bash
-npm install --save-dev lint-staged@^15
-```
-
-Verify by making a small commit. Expected behavior: prettier runs only on the files you changed, working tree stays clean afterwards. If it goes haywire, revert `.husky/pre-commit` and the `lint-staged` block in `package.json` from git history.
-
-## 2. End-to-end test against a real Tide office
-
-The booking-product changes (`disableRooms`, `mainIcon`, `customTranslationsUrl`) haven't been tested against the actual Tide booking API for a non-package product (course, rental, excursion). Steps:
-
-1. Pick a Tide office configured with a non-accommodation product.
-2. Configure the self-contained build in a host page (or use `selfcontained/booking-product/index.html` directly with the right API key).
-3. Set `disableRooms`, an appropriate `mainIcon` (e.g. `ui-excursion`), and `customTranslationsUrl` pointing at a customer-rebranded JSON file.
-4. Confirm:
-   - Booking submits successfully end-to-end
-   - The price reflects pax count correctly even with the room scaffolding hidden
-   - All translation overrides are visible in the rendered UI (no flash of default copy)
-
-Same exercise for the booking-wizard with `customTranslationsUrl`.
-
-## 3. Visual QA across the affected screens
-
-Click through every page in the playground (`/`, `/boeken`, `/product`, search-results pages) and confirm nothing layout-broke from the `Rooms` component changes. Particularly:
-
-- The `disableRooms` path on the product page: adults/children inputs still aligned, age-of-children selector still appears when children > 0.
-- The wizard summary and sidebar still render correctly with the `SHARED.ROOM / ROOMS` translation overrides in effect.
-
-## 4. Translation file completeness
-
-The example files at `playground/public/translations/{en-GB,nl-BE}.json` and `selfcontained/booking-product/translations/en-GB.json` only override 5–6 keys (the ones relevant for the demo). If the first real customer wants a fuller rebrand, they'll need a more complete override. Worth pre-emptively documenting the full set of overrideable keys for them — start from `src/shared/translations/en-GB.json`.
-
-## 5. Confirm `{bookingNr}` placeholder behaviour with Tide backend (TIDE-3053 follow-up)
-
-Not strictly part of this ticket, but the booking-wizard payment URL work from the previous branch is gated on this answer:
-
-> Does Tide's booking API substitute a `{bookingNr}` token (or similar) in the `redirectUrl` we send, or does it pass the URL through verbatim?
-
-If the answer is "verbatim", the wizard's existing `bookingNr`-on-return resume logic won't work for PSP-driven flows and we need a different design.
-
-## 6. Optional: extend the same `customTranslationsUrl` pattern to search-results
-
-Search-results' booking entry (`src/search-results/components/book-packaging-entry/index.tsx`) has its own `generatePaymentUrl` and unconditional `window.location.href = paymentUrl`. For consistency it could get the same `tide-booking-payment-url` CustomEvent treatment as the wizard. Small follow-up, not blocking.
-
-## 7. Items deliberately not done (carry-over for later)
-
-- **Vite migration off CRA**: discussed and explicitly deferred. Tracked separately.
-- **Icon component refactor**: the 1114-line switch statement is hard to extend. Quickest fix is to enable the existing `icons` sprite escape hatch (Icon component already supports it, line 16 just needs to read from settings context). ~15 min job.
-- **TypeScript declaration for `tide-booking-payment-url` event**: consumers see `e.detail` as `any`. A `.d.ts` augmenting `WindowEventMap` would fix it.
-- **Deep merge in `selectTranslations`**: currently a 2-level shallow merge. Sufficient for today's translation file shapes but breaks if anyone adds 3-level nesting.
-
----
-
-## File index for the reviewer
-
-### TIDESUPP-75 booking-product (already committed)
-
-- `selfcontained/booking-product/index.tsx`
-- `src/booking-product/components/product.tsx` (fetch + render gate)
-- `src/booking-product/components/rooms.tsx` (`disableRooms` branch)
-- `src/booking-product/components/header.tsx` (`mainIcon`)
-- `src/booking-product/components/{age-select,amount-input,dates,footer,list-view}.tsx` (one-line each)
-- `src/booking-product/types.ts`
-- `src/shared/utils/localization-util.ts` (`getTranslations` overload)
-- `playground/public/translations/en-GB.json` + `nl-BE.json`
-- `selfcontained/booking-product/translations/en-GB.json`
-- `playground/src/components/product-page.tsx`
-
-### Booking-wizard `customTranslationsUrl` (already committed)
-
-- `src/booking-wizard/types.ts`
-- `src/booking-wizard/features/booking/booking-self-contained.tsx`
-- `src/booking-wizard/features/booking/booking.tsx`
-- `selfcontained/booking-wizard/index.tsx`
-- `playground/src/components/booking-page.tsx`
-
-### Tooling (already committed)
-
-- `README.md`, `playground/README.md` (--legacy-peer-deps note)
-- `.prettierignore`
-- `package.json` (lint-staged config block + evaluation comment)
-- `.husky/pre-commit` (replaced with `npx lint-staged`)
-- `.gitignore` (added `.claude/`)

package/rollup.config.js

@@ -1,16 +0,0 @@
-import commonjs from '@rollup/plugin-commonjs';
-import del from 'rollup-plugin-delete';
-import json from '@rollup/plugin-json';
-import nodeResolve from '@rollup/plugin-node-resolve';
-import packageJson from './package.json';
-import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import typescript from 'rollup-plugin-typescript2';
-
-export default {
-  input: 'src/index.ts',
-  output: [
-    { file: packageJson.main, format: 'cjs', banner: '/* eslint-disable */', inlineDynamicImports: true },
-    { file: packageJson.module, format: 'esm', banner: '/* eslint-disable */', inlineDynamicImports: true }
-  ],
-  plugins: [peerDepsExternal(), json(), nodeResolve(), commonjs(), typescript(), del({ targets: ['build/*'] })]
-};

package/src/booking-product/components/age-select.tsx

@@ -1,35 +0,0 @@
-import { range } from 'lodash';
-import React, { useContext } from 'react';
-import { getTranslations } from '../../shared/utils/localization-util';
-import SettingsContext from '../settings-context';
-
-interface AgeSelectProps {
-  value?: number;
-  disabled?: boolean;
-  onChange?: (value: number) => void;
-}
-
-const AgeSelect: React.FC<AgeSelectProps> = ({ value, disabled, onChange }) => {
-  const { language, customTranslations } = useContext(SettingsContext);
-  const translations = getTranslations(language, customTranslations);
-
-  const handleChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {
-    if (onChange) {
-      onChange(event.target.selectedIndex);
-    }
-  };
-
-  return (
-    <div className="dropdown dropdown--small">
-      <select onChange={handleChange} value={value ?? 0} disabled={disabled}>
-        {range(0, 18).map((age) => (
-          <option key={age} value={age}>
-            {age} {translations.PRODUCT.YEAR}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-};
-
-export default AgeSelect;

package/src/booking-product/components/amount-input.tsx

@@ -1,51 +0,0 @@
-import React, { useContext } from 'react';
-import { getTranslations } from '../../shared/utils/localization-util';
-import SettingsContext from '../settings-context';
-import { buildClassName } from '../../shared/utils/class-util';
-import Icon from '../../shared/components/icon';
-
-interface AmountInputProps {
-  label: string;
-  value: number;
-  disabled?: boolean;
-  min?: number;
-  onChange?: (value: number) => void;
-}
-
-const AmountInput: React.FC<AmountInputProps> = ({ label, value, disabled, min, onChange }) => {
-  const { language, customTranslations } = useContext(SettingsContext);
-  const translations = getTranslations(language, customTranslations);
-
-  const handleIncreaseClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
-    if (onChange) {
-      onChange(value + 1);
-    }
-  };
-
-  const handleDecreaseClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
-    if (onChange) {
-      onChange(Math.max(value - 1, min ?? 0));
-    }
-  };
-
-  return (
-    <div className={buildClassName(['decrement-increment', disabled && 'decrement-increment--disabled'])}>
-      <label className="decrement-increment__label">{label}</label>
-      <div className="decrement-increment__ui">
-        {!disabled && (
-          <button type="button" className="button button--decrement" title={translations.INPUT.DECREASE} disabled={disabled} onClick={handleDecreaseClick}>
-            <Icon name="ui-min" />
-          </button>
-        )}
-        <span>{value}</span>
-        {!disabled && (
-          <button type="button" className="button button--increment" title={translations.INPUT.INCREASE} disabled={disabled} onClick={handleIncreaseClick}>
-            <Icon name="ui-plus" />
-          </button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default AmountInput;

package/src/booking-product/components/date-range-picker/calendar-day.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { getDate, isToday } from 'date-fns';
-import { buildClassName } from '../../../shared/utils/class-util';
-
-interface CalendarDayProps {
-  day: Date;
-  isSelected: boolean;
-  isDisabled: boolean;
-  isOutsideMonth: boolean;
-  extraClassNames?: string[];
-  onClick: (date: Date) => void;
-  onMouseOver: (date: Date) => void;
-  children?: any;
-}
-
-const CalendarDay: React.FC<CalendarDayProps> = ({ day, isSelected, isDisabled, isOutsideMonth, extraClassNames = [], children, onClick, onMouseOver }) => {
-  const handleClick = () => {
-    if (onClick && !isDisabled) {
-      onClick(day);
-    }
-  };
-
-  const handleMouseOver = () => {
-    if (onMouseOver) {
-      onMouseOver(day);
-    }
-  };
-
-  const classNames = buildClassName([
-    'calendar__day',
-    isToday(day) && 'calendar__day--today',
-    isDisabled && 'calendar__day--disabled',
-    isOutsideMonth && 'calendar__day--outside-month',
-    isSelected && 'calendar__day--selected',
-    ...extraClassNames
-  ]);
-
-  return (
-    <div className={classNames} onClick={handleClick} onMouseOver={handleMouseOver}>
-      {getDate(day).toString().padStart(2, '0')}
-      {children}
-    </div>
-  );
-};
-
-export default CalendarDay;

package/src/booking-product/components/date-range-picker/calendar.tsx

@@ -1,155 +0,0 @@
-import {
-  addWeeks,
-  eachDayOfInterval,
-  endOfMonth,
-  endOfWeek,
-  format,
-  getISODay,
-  getISOWeek,
-  getMonth,
-  getYear,
-  isSameMonth,
-  startOfMonth,
-  startOfWeek
-} from 'date-fns';
-import { chunk, isFunction, range } from 'lodash';
-import React, { useContext } from 'react';
-import { buildClassName } from '../../../shared/utils/class-util';
-import { getLocale } from '../../../shared/utils/localization-util';
-import SettingsContext from '../../settings-context';
-import CalendarDay from './calendar-day';
-import Icon from '../../../shared/components/icon';
-
-interface CalendarProps {
-  year?: number;
-  month?: number;
-  hasPreviousButton?: boolean;
-  hasNextButton?: boolean;
-  hasFixedHeight?: boolean;
-  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  disabledDaysFunction?: (date: Date) => boolean;
-  selectedDaysFunction?: (date: Date) => boolean;
-  extraClassNamesFunction?: (date: Date) => string[];
-  dayContentFunction?: (date: Date) => JSX.Element | null | undefined;
-  onDayClick?: (date: Date) => void;
-  onDayMouseOver?: (date: Date) => void;
-  onNextClick?: (year: number, month: number) => void;
-  onPreviousClick?: (year: number, month: number) => void;
-}
-
-const Calendar: React.FC<CalendarProps> = ({
-  year = getYear(new Date()),
-  month = getMonth(new Date()),
-  hasPreviousButton = true,
-  hasNextButton = true,
-  hasFixedHeight = true,
-  weekStartsOn = 1,
-  disabledDaysFunction,
-  selectedDaysFunction,
-  extraClassNamesFunction,
-  dayContentFunction,
-  onDayClick,
-  onDayMouseOver,
-  onNextClick,
-  onPreviousClick
-}) => {
-  const { language } = useContext(SettingsContext);
-
-  const locale = getLocale(language);
-  const handleDayClick = (day: Date) => {
-    if (onDayClick) {
-      onDayClick(day);
-    }
-  };
-
-  const handleDayMouseOver = (day: Date) => {
-    if (onDayMouseOver) {
-      onDayMouseOver(day);
-    }
-  };
-
-  const handleNextClick = () => {
-    const nextMonth = (month + 1) % 12;
-    const nextMonthsYear = nextMonth < month ? year + 1 : year;
-
-    if (onNextClick) {
-      onNextClick(nextMonthsYear, nextMonth);
-    }
-  };
-
-  const handlePreviousClick = () => {
-    const previousMonth = (month - 1) % 12;
-    const previousMonthsYear = previousMonth > month ? year - 1 : year;
-
-    if (onPreviousClick) {
-      onPreviousClick(previousMonthsYear, previousMonth);
-    }
-  };
-
-  const focusDate = new Date(year, month);
-  const firstDay = startOfWeek(startOfMonth(focusDate), { weekStartsOn });
-  const lastDay = hasFixedHeight ? endOfWeek(addWeeks(firstDay, 5), { weekStartsOn }) : endOfWeek(endOfMonth(focusDate), { weekStartsOn });
-  const calendarDays = eachDayOfInterval({ start: firstDay, end: lastDay });
-
-  const mapDay = (day: Date) => {
-    const isoDay = getISODay(day);
-    const isDisabled = isFunction(disabledDaysFunction) && disabledDaysFunction(day);
-    const isSelected = isFunction(selectedDaysFunction) && selectedDaysFunction(day);
-    const isOutsideMonth = !isSameMonth(day, focusDate);
-    const extraClassNames = isFunction(extraClassNamesFunction) ? extraClassNamesFunction(day) : undefined;
-
-    return (
-      <CalendarDay
-        key={`day_${isoDay}`}
-        day={day}
-        isSelected={isSelected}
-        isDisabled={isDisabled}
-        isOutsideMonth={isOutsideMonth}
-        extraClassNames={extraClassNames}
-        onClick={handleDayClick}
-        onMouseOver={handleDayMouseOver}>
-        {isFunction(dayContentFunction) ? dayContentFunction(day) : undefined}
-      </CalendarDay>
-    );
-  };
-
-  const mapWeek = (weekDays: Date[]) => {
-    if (weekDays.length === 0) {
-      return null;
-    }
-
-    const isoWeek = getISOWeek(weekDays[0]);
-
-    return (
-      <div className="calendar__week" key={`week_${isoWeek}`}>
-        {weekDays.map(mapDay)}
-      </div>
-    );
-  };
-
-  return (
-    <div className="calendar">
-      <div className="calendar__header">
-        <div className="calendar__pager">
-          <div className={buildClassName(['calendar__previous', !hasPreviousButton && 'calendar__previous--disabled'])} onClick={handlePreviousClick}>
-            <Icon name="ui-chevron" />
-          </div>
-          <div className="calendar__current-month">{format(focusDate, 'MMMM yyyy', { locale })}</div>
-          <div className={buildClassName(['calendar__next', !hasNextButton && 'calendar__next--disabled'])} onClick={handleNextClick}>
-            <Icon name="ui-chevron" />
-          </div>
-        </div>
-        <div className="calendar__day-labels">
-          {range(0, 7).map((i) => (
-            <div className="calendar__day-label" key={`day_${i}`}>
-              {format(calendarDays[i], 'EEEEEE', { locale: locale })}
-            </div>
-          ))}
-        </div>
-      </div>
-      <div className="calendar__body">{chunk(calendarDays, 7).map(mapWeek)}</div>
-    </div>
-  );
-};
-
-export default Calendar;