<div><b>Acceptance Criteria for Checkout Page</b><br> </div><div><b><br></b> </div><div><h3 style="font-weight:bold;"><strong>1️⃣ Checkout Page Layout &amp; UI</strong> </h3><p style="font-weight:bold;">&nbsp;1.The checkout page should display: </p><ul style=""><li style="">Delivery method selection (Home Delivery / Pickup). </li><li style="">Shipping Address section, allowing users to:
<ul><li>Select an existing address. </li><li>Add a new address (+ Add Address). </li><li>Edit, delete, or set an address as default via the options menu. </li> </ul> </li><li style="">Order Summary, showing:
<ul><li>List of items with product name, image, price, and quantity selector. </li><li>Subtotal, shipping cost, and final total. </li> </ul> </li><li style="">Coupon Code section with an input field and an &quot;Apply Coupon&quot; button. </li><li style="">Payment Method selection with radio buttons. </li><li style="">Proceed Order button for order confirmation. </li> </ul><p style=""><span style="font-weight:bold;">2. </span>The page should have a consistent design, ensuring clear readability and touch-friendly elements. </p><h3 style="font-weight:bold;"><strong>2️⃣ Functional Requirements</strong> </h3><p style="font-weight:bold;">&nbsp;Users should be able to: </p><ul style=""><li style="">Select between Home Delivery or Pickup as the delivery method. </li><li style="">Choose an existing shipping address or add a new one. </li><li style="">Use the options menu (⋮) to edit, delete, or set default shipping/billing addresses. </li><li style="">Apply a valid coupon code, and see the discount reflected in the total amount. </li><li style="">Choose a payment method before proceeding. </li><li style="">Click &quot;Proceed Order&quot; to finalize the purchase and navigate to the order confirmation page. </li> </ul><p style="font-weight:bold;">The <strong>total amount should update dynamically</strong> when: </p><ul style=""><li style="">Items are added/removed. </li><li style="">A coupon code is applied. </li><li style="">The shipping method changes. </li> </ul><p style="">&nbsp;If an address is not selected, prompt the user to add/select an address before proceeding. </p><p style="">&nbsp;The &quot;Proceed Order&quot; button should be disabled until a payment method is selected. </p><h3 style="font-weight:bold;"><strong>3️⃣ Edge Cases &amp; Validations</strong> </h3><p style="font-weight:bold;"><strong>Address Selection &amp; Validation:</strong> </p><ul style=""><li style="">If no address is selected, show an error message like <em style="">&quot;Please select a shipping address.&quot;</em> </li><li style="">If the selected address is incomplete, prompt the user to update it. </li> </ul><p style="font-weight:bold;"><strong>Coupon Code Handling:</strong> </p><ul style=""><li style="">If an invalid/expired coupon is entered, show an error message like <em style="">&quot;Invalid coupon code.&quot;</em> </li><li style="">If a valid coupon is applied, update the total amount dynamically. </li><li style="">Ensure only one coupon code can be applied per order (unless stacking is allowed). </li> </ul><p style="font-weight:bold;"><strong>Payment Validation:</strong> </p><ul style=""><li style="">If no payment method is selected, show an error message like <em style="">&quot;Please select a payment method.&quot;</em> </li><li style="">Ensure secure transaction processing before order confirmation. </li> </ul><p style="font-weight:bold;"><strong>Stock Availability Check:</strong> </p><ul style=""><li style="">If an item goes out of stock before placing the order, show a message like <em style="">&quot;One or more items in your cart are no longer available.&quot;</em> </li> </ul><p style="font-weight:bold;"><strong>Session Handling:</strong> </p><ul style=""><li style="">If the user closes the app, the checkout page should retain the selected options upon reopening. </li> </ul><b style="font-weight:bold;box-sizing:border-box;">Refer Figma Design:</b><span style="font-weight:400;display:inline !important;">&nbsp;</span><span style="font-weight:400;box-sizing:border-box;"><a href="https://www.figma.com/proto/myyf6wXN6Tr5uTYDgCrI10/cleaning-service?page-id=331:5195&amp;node-id=1660-540&amp;p=f&amp;viewport=367%2c370%2c0.3&amp;t=26ZuN96jwOXu2hFt-1&amp;scaling=scale-down&amp;content-scaling=fixed&amp;starting-point-node-id=2939:3873" rel="noreferrer noopener" target=_blank title="https://www.figma.com/proto/myyf6wxn6tr5utydgcri10/cleaning-service?page-id=331%3a5195&amp;node-id=1660-540&amp;p=f&amp;viewport=367%2c370%2c0.3&amp;t=26zun96jwoxu2hft-1&amp;scaling=scale-down&amp;content-scaling=fixed&amp;starting-point-node-id=2939%3a3873" style="box-sizing:border-box;text-decoration:underline;cursor:pointer;">https://www.figma.com/proto/myyf6wXN6Tr5uTYDgCrI10/cleaning-service?page-id=331%3A5195&amp;node-id=1660-540&amp;p=f&amp;viewport=367%2C370%2C0.3&amp;t=26ZuN96jwOXu2hFt-1&amp;scaling=scale-down&amp;content-scaling=fixed&amp;starting-point-node-id=2939%3A3873</a></span><br> </div>