Fixes #197: Redesign shop single item view

[alvyynm]

Have you read the contributing guidelines ?

What is the purpose of your pull request?

• Bug fix
• New feature

Proposed changes

This PR fixes #197.

It changes the design of a single item view from this 👇:

before-redesign.mp4

To this 👇:

single-item-redesign.mp4

Additionally, I've made some extra improvements:

• Fixed several accessibility and SEO performance issues
• Created a formatPrice utility function to display prices in the form 2,000 (or 200 if < 1000) instead of 2000.00

NOTE

• I created a dummyCartData array to use in order to redesign the cart drawer found at src/APP/components/shop/CartDrawer.jsx. I chose this approach to save time because there's an existing bug that prevents items from being added to the cart. We can prioritise bug fixing later.
• The design changes won't be visible because of an existing issue I raised ("Unexpected Application Error" thrown in the Single Item View page #205). Unless, of course, the fix I submitted in (Fixes "unexpected application error" thrown in the shop/item/itemID and shop/checkout pages #206) is merged.

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:

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

---

[vercel]

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	Jul 9, 2024 8:28am

[alvyynm]

I've noticed there's a lot of merge conflicts with the Dev branch. Some changes included in #199 touch the entire shop section of the website. And, as we discussed with @sonylomo on WhatsApp, there's also style issues especially on the homepage.

Perhaps we can reverse #199 first? I know these will be hectic to resolve for anyone working on the shop and created a branch before the PR. I've tried it and I can't tell what to keep and what to remove (Or could it be a skill issue? 😆).

What do you guys think @sonylomo @bridgitkanini @Ase020

[Ase020]

I've noticed there's a lot of merge conflicts with the Dev branch. Some changes included in #199 touch the entire shop section of the website. And, as we discussed with @sonylomo on WhatsApp, there's also style issues especially on the homepage.

Perhaps we can reverse #199 first? I know these will be hectic to resolve for anyone working on the shop and created a branch before the PR. I've tried it and I can't tell what to keep and what to remove (Or could it be a skill issue? 😆).

What do you guys think @sonylomo @bridgitkanini @Ase020

@alvyynm I've also noticed and tried to resolve the conflict on the Dev. I've seen dust there 😂. We could schedule a meeting and come up with a way on how to handle. @JimmyOty is a good DevOps engineer he could also help us with this.

[alvyynm]

@Ase020 😂 I thought it's a skill issue on my end. Well, let's wait and see what other members have to say.

[sonylomo]

LGTM 💃🏾