Vouchers

📸 Vouchers List

Manage discount vouchers for the organization and global campaigns. The table lists Voucher (name and type), Code as a copyable badge, Scope, Discount, Min order, Validity window, Per-user limit, and Status, each column sortable, with a View action and a per-row overflow menu. Search, refresh, Create Voucher, and row-count and pagination controls complete the screen. Route: /vouchers

📸 Vouchers List — Empty State

Before any voucher exists the table shows a No vouchers yet empty state, inviting the first voucher to be created to offer discounts on bookings, with Create Voucher and Refresh actions.

📸 Vouchers List — Row Actions

The per-row overflow menu offers Edit voucher and Delete voucher, the latter styled in red as a destructive action.

📸 Delete Voucher Confirmation

Delete voucher from the overflow menu opens a Caution modal naming the voucher and warning that the action cannot be undone. Close cancels, and Delete removes the voucher.

📸 Voucher Details

Voucher configuration, status, and usage details. The header shows the voucher name with its status badges — Active, voucher type, scope, and discount type — the voucher ID with a copy action, and the code itself with its own copy control.

Four tiles summarise Discount (applied to the eligible booking total), Redemptions against any hard limit, the Per-User Limit, and the Min Order. Validity & Redemption shows the active window as a progress bar with the days remaining and the campaign length; Scope & Reach reports Scope, Eligible spaces, and Voucher type; and Other details repeats the discount type, discount value, and per-user limit. Route: /vouchers/:id

Create Voucher

📸 Step 1: Basics

Step 1 of the three-step Create Voucher wizard (Basics, Discount & limits, Schedule & preview). Voucher identity takes a required Name shown in admin views, and the code itself, which is assembled from an optional Prefix, the required Code guests will enter, and an optional Postfix — the resulting Full Code is previewed live beneath. An optional Description holds internal reference notes. Route: /vouchers/create

📸 Step 2: Discount and Limits

Step 2 sets the discount and its limits. Discount configuration takes the Scope — org-scoped or platform-wide — the Discount Type, and the Discount Value, with a percentage discount constrained to between 1% and 100%.

Usage limits control how many times the voucher can be redeemed: Max Redemptions (left empty for unlimited), a Min Order Amount setting the minimum booking value required, and a Per-User Limit.

📸 Step 3: Schedule and Preview

Step 3 sets the active window and any discount cap. Validity period is required; Max Discount Amount is an optional ceiling on a percentage discount, left empty for no extra cap. A Standard voucher toggle marks it as a standard promotional voucher, with advanced types such as gift card and referral noted as coming later.

A Live Preview panel alongside mirrors the fields the booking app will show — the voucher name and discount type, the code with a copy control, and tiles for Discount, Validity, Per-user limit, and Min order — so the voucher can be sanity-checked before Create Voucher commits it.

Edit Voucher

📸 Step 1: Basics

Step 1 of the Edit Voucher wizard, pre-filled with the voucher’s current values. Name, Prefix, Postfix, and Description can all be changed, but the Code itself is locked — the field is disabled and the helper text states that the code cannot be changed when editing. Route: /vouchers/:id/edit

📸 Step 2: Discount and Limits

Step 2 allows the Discount Type, Discount Value, Max Redemptions, Min Order Amount, and Per-User Limit to be updated. Scope is locked when editing, with the helper text confirming that scope cannot be changed.

📸 Step 3: Schedule and Preview

Step 3 updates the Validity period, Max Discount Amount, and the Standard voucher toggle, with the same Live Preview alongside. Save Changes commits the update.