Skip to content
This repository has been archived by the owner on Jul 10, 2023. It is now read-only.

feat: variant grid on product details and creation #366

Merged
merged 30 commits into from
Feb 21, 2022

Conversation

zakariaelas
Copy link
Contributor

What

  • adds variant grid to product details and creation

kasperkristensen and others added 6 commits February 14, 2022 16:55
* add users to settings overview

* forgot password functionality and ui update

* theme update for loginpage

* accept invite page

* reset-password page

* extended api for invites

* invite support in settings under users

* user overview ui update

* invite user ui update

* list users with query parameter to include invites

* cleanup

* cleanup

* cleanup of if/else

* removed comment

* gastby building

* removed unused code

* new login logo

* new login logo

* include package for jwt

* updates to login layout

* fix switching roles

* pr comment adjustments

* invites endpoint

* modal fix

* feedback on resend

* single email invites only

* removed comments

* add invite link to validation

* add "expired" to expired discounts

* init: tailwind config for gatsby

* added fudnamentals to tailwind theme

* feat: revamp page layout (#206)

* feat: Settings overview (#207)

* fix Remove old lyaout (#215)

* fix: revamp ts convert icons (#217)

* Feat/revamp convert icons to ts (#214)

* convert icons to typescript

* include iiconprops interface

* fix viewport

* rename interface

* add svg attributes to icons

* change to interface to type

* rename icon-interface to icon-type

* move icon type to seperate folder

* feat: Migrates to Gatsby V4 (#216)

* Feat: Revamp input field (#218)

* fix attributes on icon type (#220)

* feat: revamp buttons (#208)

* Feat: Revamp sidebar (#203)

* update elements

* add molecules for sidebar

* add organisms for sidebar

* update sidebar

* add assets for sidebar

* modal in invite

* invite modal

* modal width in tailwind

* refactor colors

* paginated sidebar

* new ui update modal

* update invite modal

* better addProps

* add radix dialog

* update modal with proptypes

* update invite modal

* pr feedback fix

* update sidebar with icons

* remove js index files

* icon update for modal and formatting

* deleted svg files

* add icon interface

* fix icons after removing svg folder

* ts conversion of icons

* rename iIconprops

* rename interface

* viewport update

* add svg attributes to interface

* adjust icons

* pr feedback

* add label to input

* remove margin from input, allow it to be the parent who organizes the inputs

* add clsx

* clsx pagination arrows

* clsx for pagination

* modal changes with clsx

* include buttons

* pr feedback

Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>

* fix button styling (#224)

* feat: Revamp searchable dropdown (#223)

* Feat: Revamp avatar (#226)

* Feat: Revamp delete prompt (#229)

* add btn danger

* delete modal and modal fix

* remove unused import

* fix button width

* pr feedback

* feat: revamp two split body (#221)

* Feat: Revamp personal settings (#227)

* initial organism

* added base styles for buttons

* added button component and styles from design system

* progress

* start work on scrolllistener for body-card

* merged revamp

* finished button component and moved it to fundamentals

* added spinner

* started ts conversion

* made loading optional

* finished layout

* fix attributes on icon type

* fix icons to ts

* finished two split pane

* fix actionable single button

* fix use of classNames

* default width for buttons being 128px

* no actions handling

* adapt body-card

* add personal settings

* convert breadcrumb to tsx

* include margin bottom by default

* deleted breadcrumb

* centered chevron

* add updates to accountcontext

* update breadcrumb import

* initial personal information

* context handling of account update

* make props for spinner optional

* file upload modal for personal information

* swap avatar for radix/react-avatar

* add img to user for sidebar team view

* add font parameter

* insert avatar instead of custom circle

* make color teal

* pr review address

Co-authored-by: Kasper <kasper@medusa-commerce.com>
Co-authored-by: olivermrbl <oliver@mrbltech.com>

* fix: update storybook (#222)

Co-authored-by: Philip Korsholm <philip.korsholm@hotmail.com>

* feat: add medusa-react (#231)

* feat: create badge component (#230)

* fix: two split pane + layout (#234)

* feat: Revamp currency settings (#228)

* feat: revamp store settings (#239)

* feat: revamp ui regions (#238)

* Fix: use value object for dropdown (#245)

* use proper values for dropdown

* remove console.log

* Feat: Revamp team settings (#232)

* initial organism

* added base styles for buttons

* added button component and styles from design system

* progress

* start work on scrolllistener for body-card

* merged revamp

* finished button component and moved it to fundamentals

* added spinner

* started ts conversion

* made loading optional

* finished layout

* fix attributes on icon type

* fix icons to ts

* finished two split pane

* fix actionable single button

* fix use of classNames

* delete modal and modal fix

* add btn danger

* body card for full width

* initial team settings

* fix button width

* initial table

* fix avatar sizing of sidebar

* add actionables to tablerow

* update table

* update old table

* adjust default color of team-member

* update tabel in users

* create badge component

* add filtering options to table

* chevron down icon

* use filtering options in users view

* add table search

* add status dot component

* make users index typescript

* add custom width to tailwind config

* finalize search

* enable full card height

* button width

* classname pruning

* searchbar toggle

* add margin between actionables

* component cleanup

* truncation of wide columns

* remove unused code from user index domain

* refactoring

* delete unused file

* cleanup

* undo old table tsx

* styling changes

* better vertical utilization

* fix filtering

* Apply suggestions from code review

Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>

* guarding against missing options

* pr fix

Co-authored-by: Kasper <kasper@medusa-commerce.com>
Co-authored-by: olivermrbl <oliver@mrbltech.com>
Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>

* feat: revamp ui return reasons (#240)

* remove unused code (#247)

* initial file upload field (#249)

* Fix:delete prompt for shipping option (#246)

* add: github actions for Chromatic (#252)

* feat: revamp textarea (#248)

* add: tooltip + stories + adapt input (#253)

* feat: DetailsCollapsible (#259)

* feat: TagInput revamped (#258)

* feat: revamp banner card (#243)

* Feat: Revamp gift card list view (#244)

* feat: Customer list overview (#265)

* feat: Customer detail overview (#267)

* Feat: Revamp date picker (and create timepicker) (#257)

* add radix/popover

* date picker checkpoint

* date picker styling

* number scroller for time picker

* move date picker to atoms

* utc formatting

* pr feedback

* update time picker

* camel case svg

* extract getDateClassname to function

* feat: Manage Gift Card  Revamped (#260)

* Feat: revamp discount list (#254)

* feat: revamp currency input (#262)

* fix: custom actionables (#275)

* feat: revamp add collection (#283)

* feat: revamp create giftcard (#266)

* feat: Revamp filter dropdown (#263)

* feat: Login page (#284)

* feat: add denominations modal (#261)

* fix: strip denominations in EditDenominationsModal from indexId (#288)

* feat: raw data component (#287)

* Feat: Revamp edit variant modal (#270)

* progress on new components

* progress

* added responsive denomination grid

* changed to molecule

* progress

* requested changes

* update

* fixed currencies

* added new component to region settings + minor fixes to settings and story

* requested changes

* checkpoint

* initial variant modal

* checkpoint

* finalize edit variant modal

* country of origin dropdown

* header margin

* initial pr review

* add value to option in variant editor

* Add variant title + options title

Co-authored-by: Kasper <kasper@medusa-commerce.com>
Co-authored-by: olivermrbl <oliver@mrbltech.com>

* feat: Orders list overview (#279)

* Feat/revamp rma request return (#273)

* progress on new components

* progress

* added responsive denomination grid

* changed to molecule

* progress

* requested changes

* update

* fixed currencies

* added new component to region settings + minor fixes to settings and story

* requested changes

* fixed story

* removed comment

* fix type

* fix merge conflicts

* initial returns modal

* update create return modal

* hotfix currency input

* remove comments and console.logs

* add shipping total

* refactor return request rma

* typescript cleanup

* receive menu

* remove unused button for selecting return reason

* add select product table

* switch to object based "toReturn" instead of array to accomodate extension with return reasons

* create sub modal functionality

* modal update for sub modal

* animations config

* layered modal

* reset screens on close

* final touches on select return reason

* pr feedback

* use hooks for request return

* upgrade admin hooks

* fix reason selection

Co-authored-by: Kasper <kasper@medusa-commerce.com>
Co-authored-by: olivermrbl <oliver@mrbltech.com>

* fix: bumps medusa-react medusa-js (#292)

* fix: bumps medusa-react medusa-js

* fix: bumps medusa-react medusa-js

* Feat: Revamp draggable row (#290)

* feat: Draft Order list overview (#291)

* fix: Removed duplicated currency pickers

* fix: BodyCard margin

* feat: revamp discount details and new (#272)

* Feat: Revamp custom gift card (#300)

* fix: currency code not part of update to region (#299)

* add login feedback (#301)

* Feat: Revamp product list (#268)

* add radix/popover

* date picker checkpoint

* date picker styling

* number scroller for time picker

* move date picker to atoms

* utc formatting

* add popover

* make "CalendarComponent" available

* refactor filter dropdown

* update import and format

* chevron up

* filter dropdown component

* tag input and naming field

* restructure filter dropdown for tag input

* styling

* open boolean

* delete file

* initial product table

* add default status

* icons

* table change

* pagination component

* add react-table

* cleanup

* product table filtering

* remove qs library

* add debounce

* make products index typescript

* fix imports

* remove console.log

* medusa-react and debounced search

* clean up

* update status indicator import

* Update src/domain/products/index.tsx

Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>

* set filters on load

* publish/unpublish

* fix pagination

* hooks for product list

* more showList to columns hook

* cleanup

* fix: product list

* fix: bump medusa

Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>
Co-authored-by: olivermrbl <oliver@mrbltech.com>
Co-authored-by: Sebastian Rindom <skrindom@gmail.com>

* Feat: Revamp rma register claim (#282)

* progress on new components

* progress

* added responsive denomination grid

* changed to molecule

* progress

* requested changes

* update

* fixed currencies

* added new component to region settings + minor fixes to settings and story

* requested changes

* fixed story

* removed comment

* fix type

* fix merge conflicts

* initial returns modal

* update create return modal

* hotfix currency input

* remove comments and console.logs

* add shipping total

* refactor return request rma

* typescript cleanup

* receive menu

* remove unused button for selecting return reason

* register swap initial

* initial claim modal

* add select product table

* switch to object based "toReturn" instead of array to accomodate extension with return reasons

* create sub modal functionality

* modal update for sub modal

* animations config

* layered modal

* reset screens on close

* final touches on select return reason

* cleanup

* products sub modal

* convert create swap modal to ts

* cleanpu

* claim rma

* convert create to tsx

* fix: pagination + spacing

* fix: selects

* initial claim return reasons

* correct claim reasons

* fix: quicker durations + images fix

* fix: rearrange parantheses

* always show dropdown in address form

* fix: country pick

Co-authored-by: Kasper <kasper@medusa-commerce.com>
Co-authored-by: Sebastian Rindom <skrindom@gmail.com>

* Fixed: typo in currencies subtitle(#298) (#303)

* feat: Order details (#277)

* Feat: Revamp RMA register swap (#278)

* progress on new components

* progress

* added responsive denomination grid

* changed to molecule

* progress

* requested changes

* update

* fixed currencies

* added new component to region settings + minor fixes to settings and story

* requested changes

* fixed story

* removed comment

* fix type

* fix merge conflicts

* initial returns modal

* update create return modal

* hotfix currency input

* remove comments and console.logs

* add shipping total

* refactor return request rma

* typescript cleanup

* receive menu

* remove unused button for selecting return reason

* register swap initial

* add select product table

* switch to object based "toReturn" instead of array to accomodate extension with return reasons

* create sub modal functionality

* modal update for sub modal

* animations config

* layered modal

* reset screens on close

* final touches on select return reason

* cleanup

* products sub modal

* convert create swap modal to ts

* cleanpu

* pr comment feedback

* cleanup

* remove quantity array from rma table

* remove tax calculations

* fix: tweaks and fixes

Co-authored-by: Kasper <kasper@medusa-commerce.com>
Co-authored-by: Sebastian Rindom <skrindom@gmail.com>

* fix: the casing in the settings card(#298) (#305)

* feat: revamp collection details (#297)

* feat: Adds Mark as Shipped modal (#294)

* fix: Bug hunt settings (typos + validation)

* fix: order discount overview (#306)

* fix: Remove sub items from sidebar

* fix: Add PageDescription to orders

* refund modal (#295)

* add radix/popover

* date picker checkpoint

* date picker styling

* number scroller for time picker

* move date picker to atoms

* utc formatting

* add popover

* make "CalendarComponent" available

* refactor filter dropdown

* update import and format

* chevron up

* filter dropdown component

* tag input and naming field

* restructure filter dropdown for tag input

* styling

* open boolean

* delete file

* initial product table

* add default status

* icons

* table change

* pagination component

* add react-table

* cleanup

* product table filtering

* remove qs library

* add debounce

* make products index typescript

* fix imports

* remove console.log

* medusa-react and debounced search

* clean up

* update status indicator import

* fix input header props

* camelCase properties of svg

* adds order table

* init work on filters

* max height and scroll

* rounded corners

* add status filters

* add poc order filters

* Adds datefilter

* Adds functional date filter

* Missing pageindex on load

* Adds initial work on order overview

* Finish first take on order overview (without timeline)

* clean up

* custom actionables

* Adds more work

* Finalizes first take on Order details overview

* Adds address modal

* init

* merged revamp

* progress

* created raw data component

* fix payment button

* finalize component

* fixed chevron icon

* added optional name

* init work on create fulfillment

* progress on table

* progress on add product

* commit changes

* progress

* progress on modal

* add country select to address modal

* add items to create fulfillment modal

* push progress

* metadata

* add metadata

* Adds create fulfillment modal

* Separate fulfillment items to own file

* adds OrderLine component

* refund modal

* attention box

* custom gift card

* Update src/domain/orders/details/refund/index.js

Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>

* pr feedback

* Revert: Currency input

* fix: current page

* fix: adds validation to currency input

Co-authored-by: olivermrbl <oliver@mrbltech.com>
Co-authored-by: Kasper <kasper@medusa-commerce.com>
Co-authored-by: Kasper <kasper@medusajs.com>
Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>
Co-authored-by: Sebastian Rindom <skrindom@gmail.com>

* Adds gift card details (#307)

* Adds use of denomination modal (#296)

* feat: revamp product overview (#285)

* add radix/popover

* date picker checkpoint

* date picker styling

* number scroller for time picker

* move date picker to atoms

* utc formatting

* add popover

* make "CalendarComponent" available

* refactor filter dropdown

* update import and format

* chevron up

* filter dropdown component

* tag input and naming field

* restructure filter dropdown for tag input

* styling

* open boolean

* delete file

* initial product table

* add default status

* icons

* table change

* pagination component

* add react-table

* cleanup

* product table filtering

* remove qs library

* add debounce

* make products index typescript

* fix imports

* remove console.log

* medusa-react and debounced search

* clean up

* update status indicator import

* Update src/domain/products/index.tsx

Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>

* set filters on load

* publish/unpublish

* fix pagination

* add: products overview

* make triggerClass and title optional

* remove ref

* rename: useProductActionables to useProductActions

* remove: console.logs

* fix: product duplicate + object-cover + refactor product table

* fix: product row props

* fix: merge conflicts

* add deleted product file

* add: set limit on view change

Co-authored-by: Philip Korsholm <philip.korsholm@hotmail.com>
Co-authored-by: Philip Korsholm <88927411+pKorsholm@users.noreply.github.com>
Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>
Co-authored-by: Sebastian Rindom <seb@medusajs.com>

* Feat/revamp timeline (#281)

* add radix/popover

* date picker checkpoint

* date picker styling

* number scroller for time picker

* move date picker to atoms

* utc formatting

* add popover

* make "CalendarComponent" available

* refactor filter dropdown

* update import and format

* chevron up

* filter dropdown component

* tag input and naming field

* restructure filter dropdown for tag input

* styling

* open boolean

* delete file

* initial product table

* add default status

* icons

* table change

* pagination component

* add react-table

* cleanup

* product table filtering

* remove qs library

* add debounce

* make products index typescript

* fix imports

* remove console.log

* medusa-react and debounced search

* clean up

* update status indicator import

* fix input header props

* camelCase properties of svg

* adds order table

* init work on filters

* max height and scroll

* rounded corners

* add status filters

* add poc order filters

* Adds datefilter

* Adds functional date filter

* Missing pageindex on load

* Adds initial work on order overview

* Finish first take on order overview (without timeline)

* clean up

* progress on events

* custom actionables

* Adds more work

* Finalizes first take on Order details overview

* Adds address modal

* exchange events

* progress on exchange

* hook change

* initial pr

* fix refetch on return canceled

* removed test page

* cleanup

* fixes styling of emoji picker (#293)

* enfore styling with important tag

* merge feat/revamp

* fix canceled return

* fix: adds expandable events + details

* fix: adds claim event with details modal

Co-authored-by: Philip Korsholm <philip.korsholm@hotmail.com>
Co-authored-by: olivermrbl <oliver@mrbltech.com>
Co-authored-by: Sebastian Rindom <skrindom@gmail.com>

* feat: revamp collections table (#304)

* Fix: placeholder on the input fields (#312)

* fix: adds pagination and filters to discounts (#310)

* fix: adds pagination and filters to discounts

* clean up

* fix: Table Pagination

Co-authored-by: olivermrbl <oliver@mrbltech.com>

* stepped modal (#308)

* Fixed: the issue of redirecting to orders page after login(#298) (#311)

* fix: Add table view header component (#314)

* adds h-full w-1/3 to timeline card (#313)

* Feat: Revamp draft order stepped modal (#309)

* rename new-order to tsx

* update components of new draft order modal

* comment out missing component which breaks build

* address form

* address form in templates

* stepped modal

* cleanup of stepped modal

* stepped screens

* fix: draft order overview and create new

Co-authored-by: Sebastian Rindom <skrindom@gmail.com>

* feat: Draft Order details (#302)

* add radix/popover

* date picker checkpoint

* date picker styling

* number scroller for time picker

* move date picker to atoms

* utc formatting

* add popover

* make "CalendarComponent" available

* refactor filter dropdown

* update import and format

* chevron up

* filter dropdown component

* tag input and naming field

* restructure filter dropdown for tag input

* styling

* open boolean

* delete file

* initial product table

* add default status

* icons

* table change

* pagination component

* add react-table

* cleanup

* product table filtering

* remove qs library

* add debounce

* make products index typescript

* fix imports

* remove console.log

* medusa-react and debounced search

* clean up

* update status indicator import

* fix input header props

* camelCase properties of svg

* adds order table

* init work on filters

* max height and scroll

* rounded corners

* add status filters

* add poc order filters

* Adds datefilter

* Adds functional date filter

* Missing pageindex on load

* Adds initial work on order overview

* Finish first take on order overview (without timeline)

* clean up

* custom actionables

* start new filtering approach

* Adds more work

* Finalizes first take on Order details overview

* Adds address modal

* Add useReducer hook to store and control state

* Adds functional search

* feat: Draft Order list

* Adds work on draft order details

* adds first take on draft order overview

* add image placeholder

* fix routing

* fix: rename detail

* fix: use order templates

Co-authored-by: Philip Korsholm <philip.korsholm@hotmail.com>
Co-authored-by: Kasper <kasper@medusa-commerce.com>
Co-authored-by: Sebastian Rindom <skrindom@gmail.com>

* fix: Store Avatar (#315)

* fix: sidebar spacing

* fix: sidebar icon size

* fix: Remove add denom from gift card index page

* fix: copy handlers

* fix: add tooltip

* fix: add resend menu

* fix: add return request modal

* fix: Update favicon

* attempt to add modals

* added modals to swap and claim

* add fulfillment modal to claims

* added items fulfilled/shipped events for claims and exchanges

* progress

* updated receive return menu for claims and swaps

* added modals

* removed aniamtion

* add refund event

* cleanup

* fix merge overwrites

* Fix/swap receive (#373)

* wip

* fix: receive swap

* fix: show correct return quantities

* fix: layered modal

Co-authored-by: Philip Korsholm <philip.korsholm@hotmail.com>
Co-authored-by: Philip Korsholm <88927411+pKorsholm@users.noreply.github.com>
Co-authored-by: zakariaelas <zakaria.elas@gmail.com>
Co-authored-by: olivermrbl <oliver@mrbltech.com>
Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>
Co-authored-by: Zakaria El Asri <33696020+zakariaelas@users.noreply.github.com>
Co-authored-by: Sebastian Rindom <seb@medusajs.com>
Co-authored-by: Sebastian Rindom <skrindom@gmail.com>
Co-authored-by: Yash Maheshwari <yashmaheshwari551@gmail.com>
* add: publish/unpublish + delete product

* add: allow discounts on product new/details
Copy link
Contributor

@olivermrbl olivermrbl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it make sense to remove the Pricing card on simple products and just force the user to use the edit variant modal? @srindom @zakariaelas

image

@olivermrbl olivermrbl added the type: feature or enhancement New feature or enhancement label Feb 15, 2022
@srindom
Copy link
Contributor

srindom commented Feb 15, 2022

Would it make sense to remove the Pricing card on simple products and just force the user to use the edit variant modal? @srindom @zakariaelas

image

Yes! I think that is a great idea - in the future we could introduce some sort of identifier that would make it more verbose that a product is in fact a simple product. I think the guessing game of saying that if there is only one variant it is a simple product might not play out too well.

Copy link
Contributor

@srindom srindom left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's kill the price section and then we are good to go! :)

Co-authored-by: fPolic <frane@medusajs.com>
@zakariaelas
Copy link
Contributor Author

sounds good guys! To re-iterate, we're getting rid of the "simple product" vs "product with variants" views, and we're just going with a more generic view which will exclude the pricing card and include the variants card (+ eveything else), is that correct? @olivermrbl @srindom

* fix: enable separate email update for order overview

* Hide modal on save, revert typing changes

* Refactor `handleUpdateAddress`

Co-authored-by: fPolic <frane@medusajs.com>
@srindom
Copy link
Contributor

srindom commented Feb 15, 2022

@zakariaelas yes that is correct - the exception, however, is when creating a new product; I think that it is pretty nice that you are not forced to come up with an option and option value when you don't need it.

Also I just spotted that when creating a product with variants there is an issue with parsing the form data:
image

This was what I had added:
image

@zakariaelas
Copy link
Contributor Author

thanks! will reproduce and fix 👍

* dropdown overflow fix

* come at me!
@zakariaelas
Copy link
Contributor Author

@srindom couldn't get to reproduce the error, but after making some changes, tried with similar inputs and worked fine (un/fortunately). Let me know if you can trigger the error again 😅

@srindom
Copy link
Contributor

srindom commented Feb 18, 2022

I found out that it happens when I edit the values in the "Variant" column of the grid; I don't think users should be allowed to do this in any case so if we can make the first column uneditable that would be great.

Specifically, I am talking about this column - let's make it a good old div:
image

While you are at it would you mind changing the way that a multi-option variant has the option values displayed so that
Blue,small -> Blue / small

image

* added ability to update products of collection

* merge develop

* added new endpoint

* updated to work with new endpoint

* fix modal

* fix add multiple products
@zakariaelas zakariaelas requested a review from srindom February 21, 2022 13:55
@zakariaelas zakariaelas force-pushed the fix/variant-grid-integration branch from f7e62e4 to 5565a8a Compare February 21, 2022 19:38
@srindom srindom merged commit d253c16 into fix/missing-product-details Feb 21, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
type: feature or enhancement New feature or enhancement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants