<h3><strong>User Story: Cart Option</strong> </h3><p><strong>As a</strong> mobile app user,<br><strong>I want</strong> to add, remove, and manage items in my shopping cart easily,<br><strong>So that</strong> I can review my selections and proceed to checkout without hassle. </p><div style="margin-top:14px;margin-bottom:14px;"><h3><strong>Acceptance Criteria:</strong> </h3><h4> </h4><h4><strong>1️⃣ Cart Page Layout &amp; UI</strong> </h4><p>1. The cart page should display: </p><ul><li><strong>Delivery address</strong> with an option to &quot;Change&quot; it. </li><li><strong>List of cart items</strong>, each showing:
<ul><li>Product image </li><li>Product name </li><li>Price per unit </li><li>Quantity selector (+/- buttons) </li><li>Delete (trash icon) option </li> </ul> </li><li><strong>Cart Total Summary</strong>, including:
<ul><li>Subtotal amount </li><li>Shipping cost (e.g., &quot;Free&quot;) </li><li>Final total amount </li> </ul> </li><li><strong>&quot;Proceed to Checkout&quot;</strong> button for checkout navigation. </li> </ul><p>2. The page should have a <strong>back button</strong> (top left corner) to return to the previous screen. </p><p>3. A <strong>cart icon in the bottom navigation bar</strong> should be highlighted when the user is on this page. </p><div style="margin-top:14px;margin-bottom:14px;"><h4><strong>2️⃣ Functional Requirements</strong> </h4><p> </p><ol><li>&nbsp;Users should be able to <strong>increase/decrease item quantity</strong> using the (+/-) buttons. </li><li>Users should be able to <strong>remove an item</strong> by tapping the trash/delete icon. </li><li>&nbsp;If the user changes the quantity, the <strong>subtotal should update dynamically</strong>. </li><li>&nbsp;If shipping is free, it should display as <strong>&quot;Free&quot;</strong> instead of a price. </li><li>&nbsp;Clicking <strong>&quot;Change&quot; next to the delivery address</strong> should allow users to update their address. </li><li>Clicking <strong>&quot;Proceed to Checkout&quot;</strong> should take the user to the checkout page. </li><li>&nbsp;The interface should be <strong>responsive</strong> and optimized for mobile screens. </li> </ol><p> </p><h4><strong>3️⃣ Edge Cases &amp; Validations</strong> </h4><p> </p><ol><li><span>&nbsp;If an item is </span><strong>out of stock</strong><span>, display an appropriate message or disable the quantity selector.</span> </li><li>&nbsp;If a user <strong>removes all items</strong>, show an empty cart message with a &quot;Continue Shopping&quot; button. </li><li>&nbsp;If there is a <strong>minimum order value</strong> for checkout, notify the user if their total is below the threshold. </li><li>&nbsp;If the delivery address is missing, <strong>prompt the user to add one</strong> before checkout. </li><li>&nbsp;Ensure that price and availability <strong>sync with the backend in real-time</strong> to prevent outdated data. </li> </ol><p> </p><br> </div><b style="box-sizing:border-box;">Refer Figma Design:</b><span style="display:inline !important;">&nbsp;</span><span style="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 style="margin-top:14px;margin-bottom:14px;"><h3><br> </h3><div style="margin-top:14px;margin-bottom:14px;"><br> </div><br> </div><br> </div><br>