Finish merch site 2024

[scorpiontornado]

Must do

• Read cart info (Price ID / quantity of each item) from localStorage in /pages/checkout/index.tsx and send as a POST body to /pages/api/checkout_sessions.js (could be a good one for@RonanG cause he did the cart)
• Host - either move Stripe API routes to api.coopsoc.com.au, pay to host the entire website, or see if it'll work with GitHub Pages. Set up live API keys
• Upload data to live stripe account
• Fix /cart page - add and subtract don't update localStorage, so do nothing
• On load of /merch, read cart from localStorage

Should do

• Make the return page not look like garbage (just copy the style from another page)
• Mobile layout (single column /merch, make /cart legible)
• Convert all images to JPEG / compress (for load times)
• Make addToCart function update localStorage, e.g. stealing logic from goToCart (probably move to function used by both)
• If you added price ID to variants (merch.ts getAllProductsAndVariants), constructing cartWithDetails in merch.tsx goToCart / new function could avoid needing to do another find through repo.products.find
• Could also refactor to do repo.variants.foreach / repo.variants.filter then finding the corresponding cart item, given the size of each
• Buttons to go between merch/cart/checkout/
• e.g., see https://www.switchkeys.com.au/collections/lubricants/products/krytox-205g0-5ml
• Enables adding multiple different colours/sizes to the cart in a single transaction & simplifies UX
• Fix sharp image optimisation in production (currently DigitalOcean App platform, ideally would migrate to a Droplet to cut costs)
• Don't list out of stock combinations in the dropdowns, or let users know it's out of stock without having to press add to cart

Nice to have

• Item added to cart, view cart popup
• Cart icon linking to cart in the top corner of the page, so don't have to scroll right to the bottom
• Cart length pill - number next to the cart icon depicting the number of items in the cart (Cart length pill #37)
• Scale images so they're not cut off in the carousel on the /merch storefront
• Make cart persist when going merch -> cart -> merch
• Remove the update/remove buttons on /merch. Instead, make add to cart button add the value of the quantity drop-down to the cart.
• (Can just click view to cart down the bottom, or ideally a cart icon in the top right).
• This is to allow buying multiple different variants of the same item - colours/sizes etc.
• Make quantity 1 the default on /merch, could use +/- buttons rather than dropdown (steal from /cart?)
• Sync colour selection to image displayed on storefront (/merch)
• Migrate more of /checkout to reactstrap
• Make images constant width on /cart
• Make remove from cart (with no colour/size/quantity selected) remove all items of that product from the cart. Currently says "Please select a colour."