https://coopsoc.com.au/events

MVP:

• Get some new photos and replace the ones from like 2020
• Add 2023 charity events on

Nice-to-have:

• Expand on description
• More info on each event
• One section per event from 2023? Eg name / description / photo carousel
• Could split into past and upcoming
  • Would need info from socials
  • Already done on the charity page actually, layout is pretty good so we could just steal the React components & add the info
  • I also like the link to the Facebook events, ideally we’d be more proactive in adding that stuff to the upcoming section
  • This seems to require each event to make their own image (see the website) - could either get marketing to make canva images/posters for each event, or perhaps just use a random photo from that event?
  • Would a name of each event next to the photo help, or is the current charity system of click on photo - get modal with name, photo, description enough?
  • Need to add an image carousel to the event modals
• Merge with charity page?
  • The end user doesn’t really care if the event is for charity or not, this distinction appears to be a remnant from the 2018 CSCS merger
  • Could just move the charity info paragraph to the events page, then merge all the past and upcoming events
  • Some way to distinguish between charity events would be nice, at the very least just have “charity” in each event name. Could also have a colour or banner or logo or something on the modal for charity events
  • Where to put charity list?

The social events etc widgets are bugged

• Add 2024 execs/directors to the meet the team page - names + photos (from nominations page)
• Vertically centre left hand side of subcom (see #20)
• Split up pubs/IT from 2023 onwards

Get rid of https://coopsoc.com.au/nominations from header, and perhaps look at a way of taking down that page (until next year's nominations)

All prices are in AUD, but the checkout in /merch says "(USD)"

• Add 2023 subcom
• Add 2023 first year reps + pics
• Make title, url, header link, and page header consistent (currently "Our Team | UNSW Co-op Society", "https://coopsoc.com.au/team", "The Team", and "MEET THE TEAM", respectively
• Address team.jsx line 40: 'TODO: have this be a subpage of "About"'
• #24
• Vertically centre left-hand column of subcom section of /team in each row/portfolio (probably involves centring Subcom.jsx <div className="col-sm-8"> within the parent "row" div)

Will display after clicking "submit" on the /checkout page.

It seems fairly self-explanatory from the title. I'd like Jason or Sky to pick this one up!

Currently has a black background and dark purple text, clashing with the rest of the website

E.g. using <div className="col..."> rather than <Col ...>. See the Reactstrap docs (and perhaps the Bootstrap docs, but note much of the div-based class system can be replaced with React components).

To integrate with our backend Go API. Depends on coopsoc/merch-backend#1

Todo:

• Make checkout page (see here and here)
• Incorporate stripe payment element
• Make payment status page
• Incorporate stripe payment request button element (to add support for apple pay etc)

Ideally, UX should be something like:

1. Add to cart
2. View cart
3. (Edit cart as needed, changing quantities etc)
4. Proceed to checkout
5. Enter payment details etc
6. Place order -> sends API request to Go backend with a purchase intent
7. Display success/failure message depending on API response

We might steal Stripe's (if we use it) and make it our own, we might build a custom one, we might not even have one and just integrate it with /merch page. Absolutely no clue - it's really subject to how feasible it is to not have a payment microservice.

Perhaps add to header? Just be wary of people spam-requesting to join. Ask Sam for link if needed.

To view merch, prices, colours etc

TODO:

• Decide how to store product data - potentially a json file with an array of products, each having images, a price, colours etc
• Create store page, allowing users to browse all products
• Create page to view an individual product (display a larger photo and details etc), and add to cart

Currently only calculating right before creating a payment intent on backend.

Instead of having one item for each colour. Was attempted (unsuccessfully) before and changes were reverted.

Possible approaches:

1. One image for each item, clicking on the image changes to that colour
2. Radio buttons, one for each colour. Clicking will change the image displayed and changes a "colour" field when adding to cart/purchasing.

Descriptions are visible in TeamsData.js and rendered in HTML at coopsoc.com.au/team. However, they appear to be rendered behind each person's image, and are thus not visible.

• Fix ExecCard.jsx so the descriptions are actually show - could be done with a toggle dropdown, a popup, text overlayed onto the image when clicked etc
• Add descriptions for 2023 execs, directors, and first year reps

• https://coopsoc.com.au/publications
• Currently has first year guide, blog posts, podcast, but they’re out of date
• Also lacking the chicken coop stuff - could have a pdf viewer?
• Need to get the links to all pubs publications

Currently the codebase has both package-lock.json and yarn.lock, and running yarn install gives the following error:

warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.

I believe, we should decide if we are using Yarn or not, and remove the other file.

For the 2023 merch rollout, we used Stripe's custom payment flow with it's PaymentIntent API and Stripe’s Web Elements.

This has proven to be a nightmare, so for 2024 we're migrating to Stripe's low-code solutions for the checkout - either a Stripe-hosted page or an embedded form.

My preference would be to use an embedded form to make the experience more visually seamless for users and avoid redirects, but having a fully-functional integration that people trust is the priority (i.e., looks legit & well-tested).

We should also explore ways of making a better storefront - surely there's a solution out there already? Otherwise we could add quality-of-life improvements like #41 and #38 .

• Decide on Stripe-hosted page or embedded form
• Implement backend (see https://github.com/coopsoc/merch-backend)
• Link to existing storefront frontend
• Explore methods of improving the storefront - #41, #38, cleaner UI/UX etc
• Ensure stripe invoices contain all product info necessary for suppliers (item, size, colour, quantity)
• (To be handled elsewhere, perhaps the backend?) Write script to parse exported invoices, collate quantities and present it in a way we can send to suppliers

Trying to sell coop to people who aren't currently scholars (raising awareness for high school students, current uni students etc). Could attract more/better applicants and more sponsors. Limitation is, I doubt many

Perhaps also include more information about what coop is - short description & link to official coop page. Could put on the homepage after "A society for co-ops, by co-ops.", or under the about us page. And/or, include more info/pics about past events under "What we do" in the about us page, or create new page/subheading - would help to increase current coop engagement in events like coop olympics, coop ball etc, as well as attract new scholars/sponsors.

This is probably a sensible abstraction for what items are in the store but, we might hardcode it?

We'd prefer to avoid having to create and deploy a payment microservice to enable customers to purchase Co-op Society merchandise - primarily because we'd need to pay for the hosting of such a microservice and we'd like to avoid incurring costs wherever possible.

My proposal is we use

• Google Sheets API to store order details
• Mailjet to send invoices/receipts to customers who purchase products
• Stripe to process payments in the front-end in this way

This is NOT recommended in serious production systems as storing API keys in .env is a bad idea. If someone ever gets access to our environment variables and has malicious intentions, they can easily make a series of API calls to 'refund' transactions that never occurred; but, we're unlikely to be a target of that kind of attack.

If we don't want to go down that avenue, we'll develop a backend in whatever language you'd like and deploy it here or wherever else y'all think is a good hosting service (maybe AWS)

Currently, if pressing "continue to checkout" without entering an email, will redirect to a 404 not found page.

(Also - someone please do #23)

Replace old PDF with new one (removes the notion of a "vice president"). Can be found in All Team [Coop] chat.

Probably just a card element to display items which are available. We have similar 'matrices' of images/content in other places and we can kind of steal the idea from there too (see the team.jsx page and the card we display there?)