@qite/tide-booking-component 1.4.122 → 1.4.124

package/.claude/settings.local.json

@@ -0,0 +1,11 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm run *)",
+      "Bash(npm ci *)",
+      "Bash(git log *)",
+      "Bash(npx tsc *)",
+      "Bash(echo \"=== tsc exit: $? ===\")"
+    ]
+  }
+}

package/.husky/pre-commit

@@ -1 +1,22 @@
-npx prettier --write .
+# ──────────────────────────────────────────────────────────────────────────────
+# EVALUATION: introduced as part of TIDESUPP-75 follow-up work.
+#
+# Goal of this hook: only run prettier on the files the developer actually
+# touched, instead of `prettier --write .` over the whole repo. The old hook
+# silently rewrote unrelated files on every commit and left the working tree
+# dirty afterwards — see the long file list in the TortoiseGit commit dialog
+# that triggered this change.
+#
+# lint-staged is the standard tool for this. It also handles edge cases the
+# previous hand-rolled shell script didn't (filenames with spaces, partial
+# staging via `git add -p`, etc.). Config lives in package.json under the
+# "lint-staged" key.
+#
+# Status: needs a few real-world commits to confirm it behaves well across
+# everyone's git UI (TortoiseGit, command line, VS Code, IntelliJ). If issues
+# come up, revert this file from git history and we'll fall back to a more
+# conservative formatter pipeline.
+#
+# Requires: `npm install --save-dev lint-staged` at the repo root.
+# ──────────────────────────────────────────────────────────────────────────────
+npx lint-staged

package/.prettierignore

@@ -0,0 +1,32 @@
+# Generated / vendored
+node_modules/
+dist/
+build/
+coverage/
+
+# Lockfiles — auto-generated, will be rewritten by npm
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# Editor / OS / tool local data
+.idea/
+.vscode/
+.claude/
+.husky/_/
+
+# Binaries that prettier shouldn't touch
+*.svg
+*.ico
+*.png
+*.jpg
+*.jpeg
+*.gif
+*.webp
+*.woff
+*.woff2
+*.ttf
+*.eot
+
+# Logs
+*.log

package/.prettierrc

@@ -1,9 +1,9 @@
-{
-  "semi": true,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "printWidth": 160,
-  "trailingComma": "none",
-  "bracketSpacing": true,
-  "bracketSameLine": true
-}
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "printWidth": 160,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "bracketSameLine": true
+}

package/.vs/ProjectSettings.json

@@ -1,3 +1,3 @@
-{
-  "CurrentProjectSetting": null
-}
+{
+  "CurrentProjectSetting": null
+}

package/.vs/VSWorkspaceState.json

@@ -1,5 +1,5 @@
-{
-  "ExpandedNodes": [""],
-  "SelectedNode": "\\D:\\2.0. Qite\\Tide-Booking-Component\\tide-booking-component",
-  "PreviewInSolutionExplorer": false
-}
+{
+  "ExpandedNodes": [""],
+  "SelectedNode": "\\D:\\2.0. Qite\\Tide-Booking-Component\\tide-booking-component",
+  "PreviewInSolutionExplorer": false
+}

package/MEMORY.md

@@ -0,0 +1,97 @@
+# 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

@@ -0,0 +1,94 @@
+# 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/README.md

@@ -1,24 +1,26 @@
-# README
-
-This is the unified Tide Booking component.
-
-## Setup
-
-- Use Node version 20
-- Install node modules with "npm ci"
-- Install node modules with "npm ci" in the playground directory
-- Start playground with "npm start"
-
-## Remarks
-
-Do not forget to sync React versions when you're doing local changes and when you try to test them in a local React project (check https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react).
-If using the playground, after installing its node modules, execute the following command in the root folder `npm link ./playground/node_modules/react`
-
-## Use of the package
-
-When using booking-wizard in a gatsby v5 website do following steps
-
-- Use react v20 and react-router-dom@6
-- Import only @runtime (otherwise signalr-no-query gives an error an window)
-- Surround <BookingWizard> with a <BrowserRouter basename={basePath}> to handle the internal routing
-- Set 'skipBasePathInRouting' to true in the settings to avoid duplicate basepaths in the internal routing.
+# README
+
+This is the unified Tide Booking component.
+
+## Setup
+
+- Use Node version 20 (an `.nvmrc` is present; if you use fnm or nvm, your shell should pick it up automatically).
+- Install node modules at the repo root: `npm ci`
+- Install node modules in the playground: `cd playground && npm ci --legacy-peer-deps`
+  - The `--legacy-peer-deps` flag is required because `react-scripts@5.0.1` (CRA, end-of-life) declares peer-dep compatibility only up to TypeScript 4.x, while this repo's lockfile pins TS 5.x. The lockfile is fine; the declared constraint is stale. Without the flag npm 7+ refuses to install.
+- Start the playground: `cd playground && npm start`
+- (One-time) After installing playground node modules, run `npm link ./playground/node_modules/react` at the repo root to avoid the React duplicate-hook warning.
+
+## Remarks
+
+Do not forget to sync React versions when you're doing local changes and when you try to test them in a local React project (check https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react).
+If using the playground, after installing its node modules, execute the following command in the root folder `npm link ./playground/node_modules/react`
+
+## Use of the package
+
+When using booking-wizard in a gatsby v5 website do following steps
+
+- Use react v20 and react-router-dom@6
+- Import only @runtime (otherwise signalr-no-query gives an error an window)
+- Surround <BookingWizard> with a <BrowserRouter basename={basePath}> to handle the internal routing
+- Set 'skipBasePathInRouting' to true in the settings to avoid duplicate basepaths in the internal routing.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.122",
+  "version": "1.4.124",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",
@@ -13,6 +13,14 @@
     "format": "prettier --write .",
     "prepare": "husky"
   },
+  "//lint-staged": [
+    "EVALUATION (TIDESUPP-75 follow-up): introduced to make the pre-commit hook only format the files the developer actually touched, instead of the whole repo. The old hook (`prettier --write .` in .husky/pre-commit) silently rewrote unrelated files on every commit. lint-staged also handles partial staging (`git add -p`) correctly — the hand-rolled shell script we briefly used did not.",
+    "Status: needs a few real-world commits across everyone's git UI (TortoiseGit, CLI, VS Code, IntelliJ) before we trust it. If issues come up, revert .husky/pre-commit and this block from git history.",
+    "Goal: smaller diffs, no surprise reformats, stable working tree after commit."
+  ],
+  "lint-staged": {
+    "*": "prettier --write --ignore-unknown"
+  },
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/qitegeneral/tide-booking-component.git"
@@ -44,6 +52,7 @@
     "flat": "^5.0.2",
     "formik": "^2.2.9",
     "husky": "^9.1.7",
+    "lint-staged": "^15.5.2",
     "lodash": "^4.17.21",
     "prettier": "^2.3.2",
     "react-popper": "^2.2.5",

package/rollup.config.js

@@ -1,16 +1,16 @@
-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/*'] })]
-};
+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 +1,35 @@
-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 } = useContext(SettingsContext);
-  const translations = getTranslations(language);
-
-  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;
+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 +1,51 @@
-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 } = useContext(SettingsContext);
-  const translations = getTranslations(language);
-
-  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;
+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;