094-discounts-passes-wallet.rst (5725B)
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 117 .. list-table:: 118 :widths: 50 50 119 120 * - .. image:: wallet-designs/order-discounts-passes.png 121 :width: 100% 122 123 - .. image:: wallet-designs/order-discounts-passes-uncollapsed.png 124 :width: 100% 125 126 On this page next information is displayed: 127 128 - Merchant logo 129 - Merchant name 130 - "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: 131 132 * Order summary 133 * List of products with: 134 135 - Picture 136 - Name 137 - Description 138 - Quantity with unit name 139 - Price, calculated as ``(product price * quantity)`` and currency code 140 141 - "Payment options" section. Chosen option has ``primary color`` border and primary button "Confirm payment". For each option next information is displayed: 142 143 * Price 144 * "Spend now:" section with the list of discounts and passes applied to the order. 145 * "Get with your purchase:" section with the list of discounts and passes that will be added to the wallet after the order is completed. 146 147 Test Plan 148 ========= 149 150 (If this DD concerns a new or changed feature, describe how it can be tested.) 151 152 Definition of Done 153 ================== 154 155 (Only applicable to design documents that describe a new feature. While the 156 DoD is not satisfied yet, a user-facing feature **must** be behind a feature 157 flag or dev-mode flag.) 158 159 Alternatives 160 ============ 161 162 Drawbacks 163 ========= 164 165 Discussion / Q&A 166 ================ 167 168 (This should be filled in with results from discussions on mailing lists / personal communication.)