Integrate new shop apis + bug fixes

[alvyynm]

Have you read the contributing guidelines ?

What is the purpose of your pull request?

• [X] Bug fix
• [X] New feature

Proposed changes

Resolves #228 by integrating the new shop api to the product detail page.

In addition to that, the PR introduces the following changes:

• Change single product URL to use the item's slug instead of id.
• Allow the user to view different item images by clicking on the small product images below
• Fix shop cart functionality (add to cart, remove from cart)
• Handle different API statuses appropriately in /shop and /shop/item/:slug
• Open the shopping cart when the user clicks the shopping cart icon
• Prevent user from adding more items than available stock in the selected product variant
• Fix "Maximum update depth exceeded" error in CartDrawer
• Create useDeleteAllSwag mutation hook to clear backend cart items once the user makes an order
• Clear local storage cart after successful order

(From the video below, I've noted some UI issues. I'll fix soon #230. If you notice more, let me know, and I'll add them to #230)

https://github.com/user-attachments/assets/e4080faa-162f-4bdb-994b-ea9e2a10f073

Existing issues I encountered while working with the API

• The API does seem to update the cart items, but it doesn't return anything when trying to get the cart contents (an empty array is returned instead). This means you can't view an order's details and make an order.
• A way to instantly delete all items from the cart (the UI doesn't offer this option yet)
• All images served from the API are unreachable (error 404 is returned)
• /checkout API endpoint for placing an order currently expects city to be an int (This should be a str, not an int). The API response is as follows: "Incorrect type. Expected pk value, received str."
• GET /api/cart-items/clear_cart/ returns 404 status code
• products don't have rating data
• It's not clear how a user is supposed to pay

Warning

Please read these points carefully and answer honestly with an X into all the boxes. Example : [X]

Before submitting a pull request make sure you have:

• [X] Read the guidelines for contributing.
• [ ] Wrote some tests.
• [X] Respected the linting guidelines.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
syt-web-redesign	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 15, 2024 3:34am

[alvyynm]

Hi @sonylomo, this PR is still a WIP.

[alvyynm]

@sonylomo Ready for review now. @JimmyOty I've highlighted some of the issues I've encountered with the API in my notes above, including inaccessible images.