reactioncommerce / reaction-admin

Reaction Admin

Reaction Admin

Mailchimp Open Commerce is an API-first, headless commerce platform built using Node.js, React, and GraphQL. It plays nicely with npm, Docker and Kubernetes.

This project, Open Commerce Admin, is the user interface used by administrators and shop managers.

Getting started

Follow the documentation to install Mailchimp Open Commerce with Open Commerce Quickstart for all supported operating systems.

Get involved

Contribute

⭐ If you like what you see, star us on GitHub.

Find a bug, a typo, or something that’s not documented well? We’d love for you to open an issue telling us what we can improve! This project uses semantic-release, please use their commit message format..

We love your pull requests! Check our our Good First Issue and Help Wanted tags for good issues to tackle.

Developer Certificate of Origin

We use the Developer Certificate of Origin (DCO) in lieu of a Contributor License Agreement for all contributions to Reaction Commerce open source projects. We request that contributors agree to the terms of the DCO and indicate that agreement by signing-off all commits made to Reaction Commerce projects by adding a line with your name and email address to every Git commit message contributed:

Signed-off-by: Jane Doe <[email protected]>

You can sign-off your commit automatically with Git by using git commit -s if you have your user.name and user.email set as part of your Git configuration.

We ask that you use your real full name (please no anonymous contributions or pseudonyms) and a real email address. By signing-off your commit you are certifying that you have the right to submit it under the GNU GPLv3 Licensed.

We use the Probot DCO GitHub app to check for DCO sign-offs of every commit.

If you forget to sign-off your commits, the DCO bot will remind you and give you detailed instructions for how to amend your commits to add a signature.

License

Reaction Admin is GNU GPLv3 Licensed

reaction-admin's Issues

Filter Orders by Billing or Shipping Location

Users with permissions to view orders dashboard should be able to quickly filter the list of orders by the billing or shipping location.

Users should be able to filter orders by their SHIPPING or BILLING country, region, city, or postal

If users search while a filter is active, the search should take the filter into account.

Users should be able to clear all filters easily as well (#2358)

Unshipped line items in a completed order should show estimated arrival time and date

In the order completed template, line items that have not yet been shipped should show an estimated arrival date and time. These estimates should rolled up on a shipment by shipment basis.

Show warning when payment authorization is about to expire

If an order has not been captured and there is less than (48) hours until the payment does expire, we should show a EXPIRING warning badge on both the orders list view and the order detail view.

A setting for the number of days until a payment expires should probably be rolled into each payment package.

Improve publishing workflow from the Product Grid

Right now you don't have a good way to see what's the status of all your outstanding changes. Some suggestions for improvements would be

1. Disable "Publish All" button when there are products that fail validation
2. Provide some way of seeing what's invalid about a product without having to go to the PDP
3. Allow publishing only valid products and leaving invalid ones outstanding
4. Provide an option to sort by invalid products so that if you have a long list it's easy to see the ones that require resolution

Generally I don't ever want to use bubbling up a server error as a way of doing validation. Validating data on a client is a core web-dev idea and a best practice that we should be doing everywhere.

Convert Update Password from Blaze to React

Convert the updatePassword.html and updatePassword.js panel in import/plugins/core/account/client/templates/updatePassword to React

Part of reactioncommerce/reaction#3203

This appears in the Account panel

Accounts admin - Implement change account owner flow

Expected behavior

An owner should be able to switch account owners by clicking on the current owner and go through an account owner switch flow via the action view details panel.

Design link - https://zpl.io/bPY3Xy2

Actual behavior

Currently, the way to switch an account owner is via a drop down like the other groups. B/c changing owners is a more permanent action, it should have its own flow.

Convert Profile panel to React

The panel reachable from the Account dropdown which includes the Updatepassword and CompletedOrders and address panel

Scrolling warning when scrolling through order fulfillment

Expected behavior

There should be no warnings when scrolling through Reaction's order fulfillment

Actual behavior

There is a warning related to scrolling smoothness when scrolling through order fulfillment

Steps to reproduce the behavior

• Begin to fulfill an order
• Scroll through fulfillment panel
• This DOES NOT happen every time, nor regularly, but I have seen this multiple times

Versions

Node: 9.5.0
NPM: 5.6.0
Meteor Node: 8.9.3
Meteor NPM: 5.5.1
Reaction CLI: 0.27.0
Reaction: 1.8.0
Reaction branch: release-1.8.0
Docker: 18.01.0-ce

QA

QA by @kieckhafer + @cassytaylor

Filter by shipping method

Users with permissions to view orders dashboard should be able to quickly filter the list of orders by the shipping method.

From a dropdown, users should be able to filter orders by shipping method. Ideal scenario permits users to filter by multiple shipping methods simultaneously. (e.g. select orders that are "Rush" and "Express" and see only orders with those statuses)

If users search while a filter is active, the search should take the filter into account.

Users should be able to clear all filters easily as well (#2358)

Aging orders should be labeled late or due appropiately

Orders that are have not been shipped on time should be labeled LATE, orders that should be shipped out today should be labeled DUE.

There should be an order processing time that is set for each store, and if one is not set, there should be a default (3 business days?). This is set in #2345

Orders that are due to be shipped out today should be noted with a label such as DUE.

Orders that should have been shipped out prior to today should be noted with a label such as LATE and indicate the number of days late that it is.

These labels can be done with a date check on the fly, and this probably means that we should set a ship-by date when an order is placed that is {processing-time} business days from the date the order was placed.

There should be a JOB that checks orders for late processing and if an order is LATE, should add an event to that late order noting that it is late and the date it should have shipped out.

Account admins should be able to "bulk edit" the permissions of users in their shops

Marketplace, Shop, and Affiliate shop owners and account admins (users with permissions to change other users permissions) should be able to add, remove or otherwise edit permissions of users in their shops in bulk.

Unshipped items in a completed order should show any exceptions or delays associated with the order processing

Line items that have order processing delays such as being "Backordered" should note that on the order completed page along with an expected shipping date.

Attempting to save a product without a required field should identify the field that failed

When trying to save a product that doesn't have a title, I receive a toast alert letting me know that the title is required, but the field does not get highlighted, nor does the panel open to the product edit panel when I try to save a product without a title.

The UI should identify the field that failed and open the action view panel to the correct section as it does when attempting to save an invalid field in a variant.

Server error is caused as well. We should attempt to catch this invalid product before sending it to the server.

Exception while invoking method 'revisions/publish' Error: Product Title is required
    at getErrorObject (packages/aldeed_collection2-core.js:480:15)
    at [object Object].doValidate (packages/aldeed_collection2-core.js:462:13)
    at [object Object].Mongo.Collection.(anonymous function) (packages/aldeed_collection2-core.js:214:25)
    at [object Object].Mongo.Collection.(anonymous function) [as update] (packages/dispatch_run-as-user.js:325:19)
    at [object Object].revisionsPublish (imports/plugins/core/revisions/server/methods.js:119:32)
    at packages/check.js:128:16
    at [object Object].EVp.withValue (packages/meteor.js:1134:15)
    at Object.exports.Match._failIfArgumentsAreNotAllChecked (packages/check.js:127:41)
    at maybeAuditArgumentChecks (packages/ddp-server/livedata_server.js:1765:18)
    at packages/ddp-server/livedata_server.js:719:19
    at [object Object].EVp.withValue (packages/meteor.js:1134:15)
    at packages/ddp-server/livedata_server.js:717:46
    at [object Object].EVp.withValue (packages/meteor.js:1134:15)
    at packages/ddp-server/livedata_server.js:715:46
    at [object Object]._.extend.protocol_handlers.method (packages/ddp-server/livedata_server.js:689:23)
    at packages/ddp-server/livedata_server.js:559:43
Sanitized and reported to the client as: Product Title is required [400]

Split shipments that are partially picked

Users that have permissions to fulfill an order should be able to split the shipment by clicking a "split shipment" button.

If an order is partially picked, a user that is fulfilling the order should be able to create a shipment out of the currently picked items and push the rest of the items into a separate shipment.

Splitting the order should trigger an order split event.

See the Order Fulfillment flowchart for more detail

Sortable table extends awkwardly

Expected behavior

Sortable table in orders admin panel should expand remain contained and not extend outside of the panel. It should all stay inside the table width. We can allow them to move the info inside the table to see a column that has extra data. In that case, we can let the other column hide beyond the edge of the table width.

Actual Behavior

It expands outside of the panel.

Steps to Reproduce the Behavior

Place some orders
Grab and expand one of the column headers
See that it expands outside of the width of the table.

Versions

Node: 4.5.0
NPM: 5.4.1
Meteor Node: 4.8.4
Meteor NPM: 4.6.1
Reaction CLI: 0.11.0
Reaction: 1.5.0
Reaction branch: marketplace

No way to know how many orders are present

Expected behavior

I expect to have a count of active and processing orders visible when viewing the orders list.

Actual Behavior

I would need to estimate or count the number of orders based on the number of pages and the number of results on my screen

Steps to Reproduce the Behavior

1. Place several orders
2. Visit Orders Dashboard

Versions

Node: 7.8.0
NPM: 5.0.1
Meteor Node: 4.8.4
Meteor NPM: 4.6.1
Reaction CLI: 0.11.0
Docker: 17.06.0-ce

Confusing permissions settings in dashboard

Expected behavior

Every permission setting should have a clear label

Actual Behavior

Not sure what I would be giving permissions for the two subitems for "Orders"

Steps to Reproduce the Behavior

1. Manage a user

Versions

Node: 7.10.0
NPM: 4.2.0
Meteor Node: 4.8.2
Meteor NPM: 4.5.0
Reaction CLI: 0.8.2
Reaction: 1.2.0
Reaction branch: release-1.2.0
Docker: 17.03.1-ce

Search for Accounts within Accounts screen

I thought there was an issue for this already but I can't find one, but I think the idea for Account Search was always that it would eventually be moved to the Accounts screen similar to how we moved Order Search to the order dashboard.

This probably needs design and direction but I am opening it now because it seems like we are having problems figuring out what to do with reactioncommerce/reaction#2625 and how to properly link to the account screen and it seems like this is at least the long term solution.

Accounts Admin - Clicking header should allow user to edit group

Expected behavior

When I click on the edit groups header, I should be able to edit the group in the action view detail panel. The panel should open and focus on that particular group. Designs showing clickable headers and side bar here:
https://zpl.io/bJq6ZDa

Header designs should match the design:
Remove the border
Remove the corner radius

Actual behavior

Header is not clickable

Large action view not properly implemented on accounts/permissions admin

Expected behavior

The large view accounts/permissions admin should work like the order large panel with the master and detail part of the page scrolling independently of each other. When the master part of the panel and the detail panel are both open they should both be self-contained and scroll separately. This is causing strange spacing, double lines, and floating cards.

View the orders admin panel for a model of proper implementation.

These two panels need to properly implemented for further enhancements to the UI.

Actual Behavior

Then detail panel is acting strangely with the cards floating out in space making the page feel broken. They don't scroll independently of each other and the border of the detail page doesn't extend all the way down the page.

The panels aren't working properly and are simply floating out in the middle of the panel.

Steps to Reproduce the Behavior

Navigate to accounts.
Open close and navigate through the panels and see that it's janky.

Versions

Node: 4.5.0
NPM: 5.4.1
Meteor Node: 4.8.4
Meteor NPM: 4.6.1
Reaction CLI: 0.12.0
Reaction: 1.5.0
Reaction branch: marketplace

Display mail addresses consistent in all places

Expected behavior

Mailing addresses should not contain punctuation characters according to this link: https://www.wikihow.com/Write-an-Apartment-Address , Part 3

Assuming the above reference is valid, I'd expect not to see punctuation characters in any of the addresses.

Actual behavior

Most addresses contain punctuation characters.

Steps to reproduce the behavior

• As a user, place an order.
• See the city, state and zip-code is separated by commas in different places. See screenshots below for examples:
  
  
  
  

Flat rate shipping usability

With the current UI, for newcomers it is not obvious how to enable the shipping method.

To really enable the "Flat rate" shipping, the user needs to guess that he needs to click the line in the grid with possible "Flat rate" options. Only then he can click the "Enabled" check-box within. And then he needs to "Save Changes".

Even then, this will work only if the ticket reactioncommerce/reaction#2870 was resolved or tricked.

Expected behavior

Enabling the shipping method must be intuitively clear.

Actual Behavior

The "Flat rate" shipping method was not enabled and therefore the purchase cannot be made.

Steps to Reproduce the Behavior

1. Open the settings for the "Flat Rate" shipping method.
2. Enable the "Flat Rate" shipping method.
3. As the user you think that the method was enabled and you proceed to something else.
4. The shipping method was not enabled and therefore the purchase cannot be made.

Versions

1.4.0

Add shop selector on dashboard for accounts with multi-shop access

Users with owner/admin permissions for multiple shops should be able to switch the shop context in which they are viewing the dashboard, catalog and products.

Could be a dropdown to just switch contexts, maybe next to the username dropdown.
Could also be done with expanding and collapsing panels, though that wouldn't transfer to the pdp/grid view as well.

===================
BlueStuff (A4F39B)
-------------------
Accounts
Orders
etc
===================
Red Shirts (12399A)
===================
MyShop3 (987BBC)
===================

Create Accounts dashboard UI using the GraphQL API

Summary
This ticket is for implementing an accounts dashboard utilizing the GraphQL API that we're creating.

Implementation
This implementation will need to mock the data coming from the following GraphQL queries for development and then connect to them once they are ready:

• administrators()
• groups()
• roles() (stretch goal)

This implementation will need to utilize the following GraphQL mutations to transmit data from the client to the server:

• removeUserFromGroup
• addUserToGroup
• updateGroup (stretch goal)
• createGroup (stretch goal)
• inviteShopMember (stretch goal)

The base goal for this ticket is to get the Groups and Admin Accounts lists working using the GraphQL API. The stretch goal would be to add the Add Admin user and the Edit Groups panels and have them working with the GraphQL API.

This implementation should leverage whichever state management system is chosen in reactioncommerce/reaction#3904

Acceptance Criteria

This ticket will be considered resolved once the account admin UI is usable (as described above) and uses the GraphQL API exclusively.

Keyboard navigation on dropdown components

Expected behavior

Dropdowns should be fully navigatable via the keyboard. This is a consideration for better ARIA compliance.

Actual behavior

Tabbing to a dropdown and hitting space or enter on your keyboard opens the dropdown, but you cannot tab into the dropdown until you tab through the entire app first and wrap around.

The esc key cannot be used to close the dropdown.

Cannot use the arrow keys to navigate between menu items.

Steps to reproduce the behavior

• Tab to the language dropdown and hit space
• Tab and notice your cursor moves to the next dropdown button and not into the dropdown
• Keep tabbing and you'll see your focus finally make it to the items in the open drowndown

Versions

Node: 7.2.0
NPM: 5.6.0
Meteor Node: 8.9.3
Meteor NPM: 5.5.1
Reaction CLI: 0.26.4
Reaction: 1.7.0
Reaction branch: master
Docker: 17.12.0-ce

Region/Country in Shop settings should use dropdown/selects like checkout address

Expected behavior

Whenever a value needs to be normalized we should select from a defined set of values

Actual behavior

Country and Region are both just plain text fields

Steps to reproduce the behavior

1. Login as admin
2. Go to shop settings
3. Observe that these fields are just text fields

404 error from Gravatar

Expected behavior

There should be no errors from Gravatar when using Reaction

Actual behavior

Gravatar throws a 404 when.... ??

Steps to reproduce the behavior

• WIP

Versions

Node: 9.5.0
NPM: 5.6.0
Meteor Node: 8.9.3
Meteor NPM: 5.5.1
Reaction CLI: 0.27.0
Reaction: 1.8.0
Reaction branch: release-1.8.0
Docker: 18.01.0-ce

QA

QA by @kieckhafer + @cassytaylor

Accounts admin - implement accordion editing for groups

Expected behavior

• The groups should be editable in accordion fashion vs below the table. Where it is placed now loses context for the user because the correlation between the group and it’s permissions aren’t apparent.

Closed: https://zpl.io/bJq6ZDa
Open: https://zpl.io/ad7orpV

• Also, the group name should be editable via the penicel icon button.
• The styles should match the design prototypes

Important note
Before starting let's strategize on implementation. This should be componentized using a current component or built as a new component and added to the style guide. I have design plans to use this interaction in other places in the app.**

Actual behavior

The UX is sloppy. The permissions toggles appear below the table where context is easily lost.

Shop dropdown should only show if I have/manage multiple shops

Expected behavior

The dropdown to switch between shops should only exist if I manage multiple shops.

Actual behavior

The dropdown always shows up, even if I only manage one shop and there is one item in the drop down.

Onboarding - gather dev requirements and break down into issue/milestone

In order to better onboard our users, we need to create an onboarding experience that guides them through the initial setup of a Reaction store or marketplace.

Basic requirements:

• Gather required information to spin up a store
• Allow them to skip anything we don't need to spin up a shop (see requirement 1)
• Provide a useful guided tour of Reaction to educate them on basic usage
• Encourage all required info to get a store or marketplace live (Shipping info, payment methods, tax setup, user setup)
• Encourage email opt-in to allow us to email them with further guidance on using reaction as well as educate them on Launchdoc
• Help them add their first products

We have initial designs but next steps are to gather dev requirements and break the onboarding out into issues.

Here are designs as a starting point (click right through the next 8 screens):
https://zpl.io/bzRgO8b

Link for community:
https://scene.zeplin.io/project/58af8900737c137280322bd6/screen/598bb7f304cfc364c17c5f04

Unable to filter by all shipping statuses in Admin Orders dashboard

Issue Description

I should be able to filter the Orders table by all Shipping statuses, not just some of them. At this time, the New status is not available in the dropdown.

Steps to Reproduce

1. Create one or more orders
2. Log in as an admin, and navigate to the Order processing dashboard
3. See that New is not an available option to filter Shipping Statuses by

Possible Solution

Add New as an option in the Shipping Status filter

Versions

Node: 9.5.0
NPM: 5.6.0
Meteor Node: 8.9.4
Meteor NPM: 5.6.0
Reaction CLI: 0.27.0
Reaction: 1.8.1
Reaction branch: refactor-3495-mikemurray-react16
Docker: 18.02.0-ce

Accounts admin - Toggle all permission on/off

Expected behavior

A user should be able to toggle all permissions on and all off. If possible this should be included as a property of lists (?). The interaction should match how it’s handled in localization/languages.

Design link:
https://zpl.io/ad7orpV

Actual behavior

This wasn't included in the first iteration.

Admins need a way to search for users in permissions

Expected behavior

The accounts admin should be searchable. I should be able to search by name, email, or group. Search results should filter as I type. The search in the accounts admin should be componentized and work the same as the search in the orders admin.

In terms of design, the search can look/operate much like it does in our orders admin. Designs here - https://zpl.io/bJq6ZDa

The number of results should show in the search field -
https://zpl.io/V09819o

A clear button to clear all typing should show up after the user has typed in the field but not before -
https://zpl.io/V09819o

Actual behavior

There's no way to search for users in the account admin UI.

Deprecate aldeed:meteor-autoform

Deprecate https://github.com/aldeed/meteor-autoform, all validation should be done in React components.

Expected behavior

No use of blaze templates or autoform in core code or UI components.

Test app/app designs for color blindness

App and designs should be tested for contrast and various types of color blindness for the default theme.

Color and Contrast

• Test color contrast

Test for different types of color blindness.

• Deuteranopia
• Protanopia
• Tritanopia

Accounts admin - ability to edit and reset password for a user

Expected behavior

A user with the right permissions should see a select state and be able to edit the user and send an email to send an email for them to reset their password. If possible I'd like to reuse the add admin card and change the title to edit user with the buttons changing to resend password and reset password. (this may or may not need some design work)

Actual behavior

This behavior doesn't exist.

remove Blaze wrapper around Accounts packages

Follow up to reactioncommerce/reaction#2745

Remove Blaze wrapper around accounts packages now in `/import/plugins/core/accounts

Accounts admin styling

Expected behavior

Styles should match designs.

• Tables in the master view have not been styled per the design - https://zpl.io/2vYXKvb
• Edit groups in the detail panel has not been styled according to the design - https://zpl.io/2vYXKvb
• Dropdowns have not been style per the design - https://zpl.io/bJq6ZDa
• The permissions toggle list is not styled according to the design and is missing zebra striping for legibility. - https://zpl.io/ad7orpV
• All the titles should be sentence case.

Actual behavior

Styling does not match designs.

Admins with Orders permissions should be able to track an order from the order details view

Users with permissions to view order details should be able to see all order tracking updates for any order that is subscribed to order tracking update webhooks.

This view should highlight the latest tracking update including current delivery status, location, estimated delivery date, and date and time of last update.

This view should also show all historical shipping updates for this order.

@rymorgan - I think this could be a view similar to (or perhaps integrated with and filterable) the general order history panel that we've been talking about that is perhaps similar to the collab history.

SortableTable copy is not internationalized

Expected behavior

Previous, Next, Loading..., etc. should be internationalized copy keys. All of these keys: https://github.com/reactioncommerce/reaction/blob/release-1.8.0/imports/plugins/core/ui/client/components/table/sortableTable.js#L390

Actual behavior

Steps to reproduce the behavior

1. Log into admin
2. Switch into nonEnglish language
3. Click into any panel with a sortable table, like Orders or Email.

Versions

Node: 8.2.1
NPM: 5.6.0
Meteor Node: 8.9.3
Meteor NPM: 5.5.1
Reaction CLI: 0.27.0
Reaction: 1.8.0
Reaction branch: release-1.8.0
Docker: 17.09.0-ce

Browser: http://whatismybrowser.com/w/KE449ZE

QA

QA by @willopez + @machikoyasuda

possible solution for interactive email builder to replace current email templates UI

Just discovered https://github.com/unroll-io/react-email-editor

I think this could be a great interface to add for editing email templates within the app instead of having to manually edit html files or raw html content in a basic textarea input. You can save/load the contents as a JSON object and there's a method to output the final HTML. I haven't tried it yet, but there are a lot of good samples to check out.

Accounts admin- fix button placement

Expected behavior

Primary action buttons should be on the right and secondary action buttons should be spaced to their left. (not all the way across or left aligned.) This should all flip for right/left languages.

Actual behavior

Buttons are columns spaced across the details panel.

Order managers should be able to print invoices / pick sheets in bulk

Users with permission to view and process orders should be able to print invoices for all selected orders.

These invoices should be consecutively displayed ready for print in a single document with page breaks between each order.

Once the print document is generated, the orders should all have an "Invoice Printed" event added to their order history. (There can, and should, be multiple invoice printed events if the invoice is printed multiple times)

Any orders that have a "New" status or status that comes before "Printed" should be progressed to the "Printed" state. Any orders that have a more advanced status should not be regressed.

See: #2325 for how to select orders for bulk processing.

Users should be able to clear all active order filters in one click

Users that have permissions to view and filter orders should be able to clear any active order filtering in one click.

After clearing existing filters, the order list should be reset to the default list of orders and sorting.

[PDP] Allow Reordering of Options

Unless I'm mistaken (which is possible), if I want to control the order that options display I have no way to do that? So I can't get these Shoe size to display in numerical order for example.

ReactionAlerts re-write to React

Reaction Alerts need to be converted to React to be used in the new React components.

E.g. in the React-ified product grid reactioncommerce/reaction#2402, an alert needs to be rendered on a product when it's cloned. That's not currently possible as the Alerts are in Blaze, and they can't be rendered in the React component.

Add UI to select featured image

Allow admin users to select a featured image for use on the product grid. The selection will otherwise be automatic, like it is now, if one or more is not manually selected.

Short list of tasks:

1. Add a star/heart toggle button to each media item
2. That button changes priority or sets a boolean on that images metadata
3. Products publications should then prioritize featured images, if they do not already.
4. Allow the featured image to be changed from the grid settings for an item. (another ticket?)

Bulk capturing of payments should cater for risk evaluation

From the description in this issue reactioncommerce/reaction#2322,

Orders with a high risk evaluation should require the order manager to acknowledge that the order is a high risk order before they may capture the payment.

orders that have elevated or high risk evaluation should prompt the order manager to confirm that they want to proceed to capture the payment.

This behavior is being implemented here reactioncommerce/reaction#2744, but this only caters for a single order at a time.

This should be extended to cater for bulk capturing of payments. i.e. when capturing payments in bulk and several orders have a risk evaluation of elevated or high, the order manager should get an alert to confirm that they want to proceed to bulk capture the payments.

Date picker for orders admin should be full screen or somehow more easily selectable.

Expected behavior

On mobile, the date picker is awkward/hard to use.

Actual Behavior

One idea for a solution is to make the date picker a modal or full-screen menu.

Convert Shop settings panel to React

Related to reactioncommerce/reaction#2198

Convert Shop settings panel to React using the Form component

As part of the conversion, should also left align the Invite Owner Formwhich is currently centered and inconsistent with the other panels.