094-discounts-passes-wallet.rst (5526B)
1 DD 94: Discounts & Passes Wallet UI 2 ################################### 3 4 Summary 5 ======= 6 7 This document describes the design and behavior of all wallet screens related to discounts and passes. It defines a unified 8 way to present, manage, and display these entities across the wallet, including their states, structure, and visual representation. 9 10 Motivation 11 ========== 12 13 Merchants can provide users with discounts or passes that apply to specific products or services. The wallet must support: 14 15 * Clear presentation of available discounts and passes 16 * Ability for users to review and apply them during checkout 17 * Overview of all owned items, including: 18 19 - Currently active 20 - Not yet active (future validity) 21 - Available for use 22 23 A consistent design ensures users can easily understand what benefits they have, when they can use them, and how they 24 affect their purchases. 25 26 27 Requirements 28 ============ 29 30 - The wallet must provide separate pages for discounts and passes. 31 - Discounts and passes must be grouped into two tabs: 32 33 * Available: active items and items valid in the future. 34 * Expired: expired, redeemed, or used items. 35 36 - Each discount and pass must be displayed as a card with consistent layout and styling. 37 - Cards must show the item name, description, merchant information, validity information, and quantity badge when applicable. 38 - Active items must be visually distinguished from future items. 39 - Future items must clearly show when they become valid. 40 - Expired items must clearly show their full validity period. 41 - Redeemed discounts must provide a link to the related order details page. 42 - Used passes must provide a link to related orders when applicable. 43 - The quantity badge must be hidden when the user owns only one item of the same type. 44 - The order details page must show discounts and passes that are applied to the current order. 45 - The order details page must show discounts and passes that the user will receive after completing the purchase. 46 - The review order section must be expandable and collapsed by default. 47 - Payment options must clearly indicate the selected option. 48 - The UI must use existing theme colors. 49 50 Proposed Solution 51 ================= 52 53 Discounts & Passes Pages 54 ------------------------ 55 56 Available 57 ~~~~~~~~~ 58 59 .. list-table:: 60 :widths: 50 50 61 62 * - .. image:: wallet-designs/discounts-page.png 63 :width: 100% 64 65 - .. image:: wallet-designs/passes-page.png 66 :width: 100% 67 68 Inside card next information is displayed: 69 70 - Name of the discount or pass 71 - Description 72 - For discount card: "Redeemable at:" with the merchant name. For pass card: "Provided by:" with the merchant name. 73 - Validity section: 74 75 * For active items: "Valid until" with the expiration date. Background color is SecondaryContainer. Text color is onSecondaryContainer. 76 * For future items: "Valid from" with the start date. 77 - 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. 78 79 * For active items: badge background color is Primary. Text color is onPrimary. 80 * For future items: badge background color is SurfaceVariant. Text color is onSurfaceVariant. 81 82 Expired 83 ~~~~~~~ 84 85 .. list-table:: 86 :widths: 50 50 87 88 * - .. image:: wallet-designs/discounts-page-ex.png 89 :width: 100% 90 91 - .. image:: wallet-designs/passes-page-ex.png 92 :width: 100% 93 94 Inside card next information is displayed: 95 96 - Name of the discount or pass 97 - Description 98 - For discount card: 99 100 * Redeemed: "Redeemable at" + merchant name + "on" + redeemed date. Text button with ``primary color`` "View order" with the link to the order details page. 101 * Not redeemed: "Was redeemable at:" with the merchant name. 102 103 - For pass card: 104 105 * "Provided by:" with the merchant name. 106 * For used pass show text button Primary color "View orders" with the link to the orders list. 107 108 - Validity section: "Validity period" and date range. 109 - 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. 110 111 112 113 114 Order details page 115 ------------------ 116 .. image:: wallet-designs/order-discounts-passes-uncollapsed.png 117 :width: 50% 118 119 On this page next information is displayed: 120 121 - Merchant logo 122 - Merchant name 123 - Merchant address 124 - "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: 125 126 * Order summary 127 * List of products with: 128 129 - Picture (if available at least for one product) 130 - Name 131 - Description (if present and different from order name) 132 - Quantity with unit name 133 - Price per unit 134 - Total price, calculated as ``(product price * quantity)`` and currency code 135 136 - "Payment options" section. Chosen option has ``primary color`` border, primary button "Confirm payment" and ``primaryContainer`` background for list of discounts/passes. For each option next information is displayed: 137 138 * Price 139 * "Spend now:" section with the list of discounts and passes applied to the order. 140 * "Get with your purchase:" section with the list of discounts and passes that will be added to the wallet after the order is completed. 141 142 Test Plan 143 ========= 144 145 146 Definition of Done 147 ================== 148 149 Alternatives 150 ============ 151 Instead of blurring the "Review order" section, we could use fade out effect for collapsed section. 152 153 Drawbacks 154 ========= 155 156 Discussion / Q&A 157 ================ 158