commit a74d9b0106082bcb6c4c1c78d1b6ccd64e9ade0a
parent 3d0eaaca9052d94d0112cf80391d4ea9d709d024
Author: Vlada Svirsh <svirv1@bfh.ch>
Date: Mon, 4 May 2026 20:32:36 +0200
#11115 dd94 discounts and passes
Diffstat:
3 files changed, 59 insertions(+), 4 deletions(-)
diff --git a/design-documents/094-discounts-passes-wallet.rst b/design-documents/094-discounts-passes-wallet.rst
@@ -25,6 +25,29 @@ affect their purchases.
Requirements
============
+Requirements
+============
+
+- The wallet must provide separate pages for discounts and passes.
+- Discounts and passes must be grouped into two tabs:
+
+ * Available: active items and items valid in the future.
+ * Expired: expired, redeemed, or used items.
+
+- Each discount and pass must be displayed as a card with consistent layout and styling.
+- Cards must show the item name, description, merchant information, validity information, and quantity badge when applicable.
+- Active items must be visually distinguished from future items.
+- Future items must clearly show when they become valid.
+- Expired items must clearly show their full validity period.
+- Redeemed discounts must provide a link to the related order details page.
+- Used passes must provide a link to related orders when applicable.
+- The quantity badge must be hidden when the user owns only one item of the same type.
+- The order details page must show discounts and passes that are applied to the current order.
+- The order details page must show discounts and passes that the user will receive after completing the purchase.
+- The review order section must be expandable and collapsed by default.
+- Payment options must clearly indicate the selected option.
+- The UI must use existing theme colors.
+
Proposed Solution
=================
@@ -75,7 +98,7 @@ Inside card next information is displayed:
- Description
- For discount card:
- * Redeemed: "Redeemable at" + merchant name + "on" + redeemed date. Text button Primary color "View order" with the link to the order details page.
+ * Redeemed: "Redeemable at" + merchant name + "on" + redeemed date. Text button with ``primary color`` "View order" with the link to the order details page.
* Not redeemed: "Was redeemable at:" with the merchant name.
- For pass card:
@@ -87,6 +110,41 @@ Inside card next information is displayed:
- Badge used to indicate number of items of the same type. If only one item of the same type is owned, the badge is not shown.
+
+
+Order details page
+------------------
+
+.. list-table::
+ :widths: 50 50
+
+ * - .. image:: wallet-designs/order-discounts-passes.png
+ :width: 100%
+
+ - .. image:: wallet-designs/order-discounts-passes-uncollapsed.png
+ :width: 100%
+
+On this page next information is displayed:
+
+- Merchant logo
+- Merchant name
+- "Review order" section collapsed by default. Linear blur is applied to give a hint to user what is inside this section. When user clicks on "Review order" section, the section expands and blur is removed. In this section next information is displayed:
+
+ * Order summary
+ * List of products with:
+
+ - Picture
+ - Name
+ - Description
+ - Quantity with unit name
+ - Price, calculated as ``(product price * quantity)`` and currency code
+
+- "Payment options" section. Chosen option has ``primary color`` border and primary button "Confirm payment". For each option next information is displayed:
+
+ * Price
+ * "Spend now:" section with the list of discounts and passes applied to the order.
+ * "Get with your purchase:" section with the list of discounts and passes that will be added to the wallet after the order is completed.
+
Test Plan
=========
@@ -109,6 +167,3 @@ Discussion / Q&A
================
(This should be filled in with results from discussions on mailing lists / personal communication.)
-Got it — here’s a **design document–style description** aligned with your previous DD format and written for implementation.
-
----
diff --git a/design-documents/wallet-designs/order-discounts-passes-uncollapsed.png b/design-documents/wallet-designs/order-discounts-passes-uncollapsed.png
Binary files differ.
diff --git a/design-documents/wallet-designs/order-discounts-passes.png b/design-documents/wallet-designs/order-discounts-passes.png
Binary files differ.
