feat: reorder feature

[ArthurTriis1]

What's the purpose of this pull request?

This PR implements the "Reorder" button feature in the My Account order details page, allowing customers to quickly add all items from a previous order back to their cart with a single click. This improves the shopping experience by reducing friction when customers want to repurchase items they've bought before.

How it works?

The feature consists of:

1. Reorder Button Component (MyAccountReorderButton): A dedicated button component displayed in the order details header that triggers the reorder action. The button is styled as outlined by default and filled on hover, and is hidden on mobile devices.

2. Reorder Hook (useReorder): A custom hook that handles the reorder logic:

   • Extracts all items from the order's delivery options
   • Converts order items to the format required by the checkout API (IStoreOffer[])
   • Uses the validateCart GraphQL mutation to add items to the cart
   • The mutation automatically handles cart synchronization (replacing existing items with the reordered items)
   • Updates the local cart store with the validated cart response
   • Redirects the user to the checkout page after successfully adding items

3. Integration Points:

   • The reorder button is displayed in the order details header alongside other order actions
   • A "Reorder" option is also available in the MyAccountOrderActions dropdown menu
   • Both trigger the same useReorder hook

4. Cart Synchronization: When the user already has items in their cart, the validateCart mutation handles the synchronization by replacing all existing cart items with the reordered items from the order.

5. Redirect to Checkout: After successfully adding items to the cart, users are automatically redirected to the checkout page using the redirectToCheckout utility function, which handles both development and production environments.

How to test it?

1. Navigate to My Account > Orders
2. Open any completed order details page
3. Verify that the "Reorder" button is visible in the order header (desktop/tablet only)
4. Click the "Reorder" button
5. Verify that:
   • All items from the order are added to the cart
   • If there were existing items in the cart, they are replaced by the reordered items
   • The user is redirected to the checkout page
   • The cart displays the correct items and quantities
6. Test the "Reorder" option in the dropdown menu (three dots icon) - it should work the same way
7. Test on mobile - the reorder button should be hidden, but the dropdown option should still be available
8. Test with an empty cart and with a cart that already has items

Starters Deploy Preview

References

• Figma Design: https://www.figma.com/design/Jyt5kWamjkdPC8xMfeuWfR/My-Account?node-id=5005-80468&p=f&t=lJwhSHXsKzeNhdUS-0
• Task: B2BTEAM-2988
• Checkout API Documentation: Used validateCart mutation to add items to the cart
• Related components:
  • MyAccountOrderDetails - Main order details page
  • MyAccountReorderButton - Reorder button component
  • MyAccountOrderActions - Order actions dropdown
  • useReorder - Reorder functionality hook
  • redirectToCheckout - Checkout redirection utility

Screenshots

Checklist

PR Title and Commit Messages

• PR title and commit messages follow the Conventional Commits specification
  • Available prefixes: feat, fix, chore, docs, style, refactor, ci and test

PR Description

• Added a label according to the PR goal - breaking change, bug, contributing, performance, documentation..

Dependencies

• Committed the pnpm-lock.yaml file when there were changes to the packages

Documentation

• PR description
• For documentation changes, ping @Mariana-Caetano to review and update (Or submit a doc request)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.