Andy/store item page #94
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Size toggle styling implemented On selected text goes blue On hover border goes blue
Made a temporary edit to the title of the page that displays the current size selected as testing
Got text color to change depending on if in stock or not (is currently hard coded, not synced to backend) Button animation still exists, need to make it flat Text changes based on if in stock or not Still need to do styling for button if item is out of stock
Updated button theming to change based on if in stock or not A size is now not selected by default, message requesting user to select a size added.
From last update, where made it possible for size to be undefined.
Price now displays. No discount display yet TODO: Modify size buttons to be dynamic depending on how many options there are.
TODO: Might be a good idea to change the "add to cart" message depending on if you have reached lifetime limits
Changed add to cart text to be always white Fixed bug where optionless items would have "please select a size" as an option.
Also moved capitalization function to utils and removed comments
…rship-portal-ui-v2 into andy/StoreItemPage
alexzhang1618
approved these changes
Feb 15, 2024
Also added comment for business logic behind maxCanBuy
|
This should not be a dropdown tbh because there's no reason to list every number when it can get arbitrarily large- it should be a numeric input field that provides an error message if the input is invalid. We should open a separate issue for this fix before merging this since it's not a quick change
|
|
From the perspective of not over complicating components and isolating a single purpose to each one, I think it would make a lot more sense for the Add to Cart button to never change its text. instead, there should be a Boolean prop passed in whether to disable (grey out) the action or not. The error should be explained on the page itself in the spot where it says "You can buy up to 1 of this item" because right now that text is misleading saying you can buy 1 but it's actually out of stock
|
|
For whatever reason, it seems like a lot of images that have been uploaded to the store historically have a transparent region in the png. We should account for this by adjusting the design in some way with a border or shadow to highlight the image in separation from the page
|
farisashai
reviewed
Feb 17, 2024
|
I think we're all aware of this last point but we also need an issue for the add to cart button to open a modal that lets the user confirm adding the item to the actual cart, however Raymond decides to implement that |
SheepTester
added a commit
that referenced
this pull request
Feb 20, 2024
* Rough outline of SizeSelector * Created a file to represent the item page * Edited config file to be nested under "Store" header * Size Toggle V1, Styling Only Size toggle styling implemented On selected text goes blue On hover border goes blue * State of SizeToggle now passed up to the item page Made a temporary edit to the title of the page that displays the current size selected as testing * Updated styling of size selector to match Figma https://www.figma.com/file/cgbeW6vrqgxW0i1vpbUn1C/Store-(Redesign-2023)?type=design&node-id=2028-16321&mode=design&t=nbIfHwdT8aeDdhsd-0 * Part 1 of AddCartButton styling Got text color to change depending on if in stock or not (is currently hard coded, not synced to backend) Button animation still exists, need to make it flat Text changes based on if in stock or not Still need to do styling for button if item is out of stock * Out of Stock Button and "Please Select Size" Updated button theming to change based on if in stock or not A size is now not selected by default, message requesting user to select a size added. * Fixed issue with AddCartButton props breaking From last update, where made it possible for size to be undefined. * Began formatting for item header and item page * Store Component now linked to API, price added Price now displays. No discount display yet TODO: Modify size buttons to be dynamic depending on how many options there are. * Size Selection Buttons Now Dynamically Generated * Buy ability based on lifetime/monthly limits, added item picture TODO: Might be a good idea to change the "add to cart" message depending on if you have reached lifetime limits * Cleaned up some old comments * Moved Navbar to top of page * Resolved linting error (unused var) * Update src/styles/pages/store/item.module.scss Co-authored-by: Faris Ashai <[email protected]> * Update src/styles/pages/store/item.module.scss Co-authored-by: Faris Ashai <[email protected]> * Update src/styles/pages/store/item.module.scss Co-authored-by: Faris Ashai <[email protected]> * Update src/lib/api/StoreAPI.ts Co-authored-by: Faris Ashai <[email protected]> * Resolved merge error with calendar And API type error * Minor package changes * Fix package.json * Make compatible with multiple store gallery images No carousel yet, uses default photo as photo shown * Moved item header to be above sizing buttons * Centered the body of the item page. * Fixed merge error by updating name of file path * Update src/styles/pages/store/item.module.scss Co-authored-by: Faris Ashai <[email protected]> * Update src/pages/store/item/[uuid].tsx Co-authored-by: Sean <[email protected]> * Update src/pages/store/item/[uuid].tsx Co-authored-by: Sean <[email protected]> * Update src/pages/store/item/[uuid].tsx Co-authored-by: Sean <[email protected]> * Update .vscode/settings.json Co-authored-by: Faris Ashai <[email protected]> * Update src/styles/pages/store/item.module.scss Co-authored-by: Faris Ashai <[email protected]> * Update src/components/store/AddCartButton/index.tsx Co-authored-by: Faris Ashai <[email protected]> * Addressed PR comments, Add to Cart button behavior edit Updated Add to Cart button to also say "remove from cart" Quantity Selector now disappear if you can't add to cart or size is not selected. Add to Cart button disappear if a size is not selected. Removed various comments Removed useEffect * Updated diamond component in Item Header Diamond component displays cost * Add To Cart button disappears when UserPurchaseLimit reached * AddCartButton maxCanBuy saftey checks and styling Added an option for 0 quantity if user has reached purchase limit * Renamed styling files, AddToCart Button Behavior Change Add To Cart button now displays when user has reached purchase limit, but is greyed out and cannot be clicked * Added border back to disabled AddToCart Button * Added border back to cart button, cleaned up unused vars * Hid toggle when maxCanBuy = 1 Also lifted quantity of items up to uuid.tsx * Removed unused comments * Removed eslint disable lines * Removed title attribute from buy button #94 (comment) * Removed trailing spaces from button text #94 (comment) * Hide price when size is not selected Also removed mounted checks from `SizeSelector` importing only types from UUID * Added back other types accidently deleted from last commit * Delete blue-diamond.svg * Basic mobile formatting implemented Still need to sync it with Figma * Add edit buttons to store page * Copy event edit page for store item edit page * item details form * Set item collection, preview store as member * Add create buttons to storefront page * Collection edit page * API for creating/deleting store item photos/options * Fix making changes to collections * Fixed image clipping issue, reduced image gap on mobile * Removed vertical scrollbar from mobile view Used scrollbar hide, may need to look into why is actually overflowing later. * Removed unnecessary CSS * item options table * Add multiple options * fix type error * Rename store/collections.module.scss to be consistent with other changes in PR * Fix duplicate `getCollection` definitions * Make API .d.ts files normal TypeScript files so it actually reports errors * Upload photos * Enforce limits * PermissionService.allUserTypes is no longer a function * Make edit and create button components and add them to collection page * Add edit button to item page, show 404 when item/collection DNE * Show hidden/archived icons * Make the edit forms look nicer * Fixed a linting error with the options dropdown * Shrunk some UI items for mobile version of site * Set upper limit on quantity of items can buy * Deleted unnecessary comments * Update src/components/store/SizeSelector/index.tsx Co-authored-by: Sean <[email protected]> * Fixed various linting errors, removed comments Also updated gaps * Decreased font size of dropdown text * fix item cards' edit button * Overengineered Draggable component * drag handle design adjustments * Some input validation * Save preview as member option in cookie rather than URL * My JavaScript is too future for Vercel 😔 * Make design look more acceptable on mobile * New styling changes to adjust spacing IN PROGRESS * Locked width of description and fixed line breaks Also adjusted title/paragraph sizes and weight Also centered the webpage * Title now properly wraps with very long titles Also deleted some unused styling classes Also adjusted one column width threshold. * Made padding a little bigger for right column Also fixed bug where price would cause an extra gap in object header, even when not visible * Removed in stock / out of stock messages Also bumped the "add to cart" button up a little bit * @media now uses the media breakpoint variables * Renamed variables and adjusted white space behavior * Update src/components/store/AddCartButton/index.tsx Co-authored-by: Faris Ashai <[email protected]> * Update src/components/store/AddCartButton/style.module.scss Co-authored-by: Sean <[email protected]> * Fixed some gap inconsistencies * Update settings.json * Update settings.json * Made SizeSelector title change based on metadata * Fixed bug where add to cart button no longer worked Was due to comparison for current option not being properly updated with new system (needed a `.value`) Also made image container always square. * Condensed imports in `uuid`, removed "Remove from Cart" text Note that clicking "Add to Cart" again removes item from cart. * Fuss with store component imports to avoid dependency cycles * Flatten profile/edit.module.scss * Replace all `condition && jsx` with `condition ? jsx : null` to conform with style guide Per #124 (comment) * Update placeholder text for name; fix going back after creating item going to create page The collection/item title placeholder text has been made more relevant After creating an item, it redirects you to the edit page so when you click back, it doesn't go to an empty create item form anymore. Same with collection * Restructure details form component files * Quantity -> Quantity available in table, redirect to public page after creating item/collection, fix admin buttons on mobile * Before attempting to remove currOption I think I can collapse it into selectedOption * rename cookie type PREVIEW -> USER_PREVIEW_ENABLED * Made the "please select an option" text to show key value So instead of always saying "size" or "option" it will show "color" if the options are colors * Add discount and out of stock to item card * canManageStore -> storeAdminVisible * Update src/components/store/AddCartButton/style.module.scss Co-authored-by: Sean <[email protected]> * Refactor store api stuff to manager, options table to component * Changed AddCartButton to CartOptionsGroup Also various small bug fixes from PR - Made the options `input` tags not selectable - Removed unecessary CSS * Removed unnecessary properties, simplified CSS * Refactor all managers to use `reportError` * Change Manage Store Merchandise button to View Merch Store when preview is checked * Debugging cookie desync issue * how about collection page * Change service worker strategy to network first This fixes the admin preview store as member cookie being out of sync, but it also means slower page loads for the user * Require that monthlyLimit <= lifetimeLimit * Minor code quality adjustments from store item PR * Fix store slider scrollbars in Chrome 121+ * Only disable caching for store pages Also change `withAccessType` to use an options object so it's more clear what the parameters do * Handle showing error toasts in Cropper * export scss variable to default collection color * minor nitfixes * Move `reportError` out of admin store manager to make error handling more clear * make spacing of code look more consistent * Revert back to global NetworkFirst, remove `disableCaching` --------- Co-authored-by: Andrew Smithwick <[email protected]> Co-authored-by: Faris Ashai <[email protected]> Co-authored-by: Alex Zhang <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Info
Closes #56
Description
What changes did you make? List all distinct problems that this PR addresses. Explain any relevant
motivation or context.
Create the store item page at /store/item/[item-uuid] based on these figma designs (check the 'ready for dev' sections).
Requires #54.
Encompasses
To Do:
Changes
src\pages\store\item\[uuid].tsxType of Change
expected)
linting/formatting)
workflows)
Testing
I have tested that my changes fully resolve the linked issue ...
Checklist
src/libfunctions and commented hard to understand areasanywhere else.
Screenshots
Please include a screenshot of your Cypress testing suite passing successfully.
If you made any visual changes to the website, please include relevant screenshots below.
