Improve admin UX (journey) when managing payment methods

[RachL]

Description

Today when a procuder or hub want to add or edit a new payment method, they go through this path:

1. Log in
2. Go to the settings in the enterprise menu:
   
3. Then on "manage payment methods" :
   
4. There they are on a page accessible also by the super admin :
   

This is why from this page there is no other way to go back on "settings" than redoing steps 1 to 3.

The purpose of this story is to enable a shortcut:

When they saved their changes they have a "back to payment method list" button.

The idea is that this button doesn't go back to /admin/payment_methods from where they need to do step 1 to 3 again, but go back directly to step 3 which is /admin/enterprises/enteprisename/edit#/payment_methods

As a super admin, the button would still redirect to /admin/payment_methods

For more perspective, there are some useful feedback in this discussion: #3728

Acceptance Criteria

1. Logged in as an enterprise manager I can go back on my payment settings after adding or editing a payment method
2. Logged in as a super admin, the current behaviour should not change.

[RachL]

@luisramos0 writing up the issue I realized that the payment method list is also shared with the super admin, so my idea to put back the right menu for super admin does not work even with this.

Do you think this could be a good first issue?

[luisramos0]

yeah, interesting UX problem. this is part of the "backoffice UX" project...

it's not an easy fix.
we need to store the original enterprise from where the user came from, so that when the "back to list" is clicked, the correct enterprise is shown (user can have multiple enterprises). and because user will potential jump between list of methods and create and edit pages, this value can be lost...
it will have to be a url parameter that stores this info as the user navigates through the methods.
It's kind of easy to get it done, the challenge is to do it without messing up the code...
I dont think it's a good first issue.

[RachL]

@luisramos0 thanks for the feedback, this is quite interesting( we have the same problem for shipping methods btw). The previous page the user is on has the enterprise name inside the URL admin/enterprises/enteprisename/edit#/payment_methods (because it is part of the left menu for the user). So what you say is that we can go from the "shop preferences" menu to this page but not from the create and update a payment method page easily?

[luisramos0]

yes, we will need to store that information somewhere and use it when the user clicks "go back"

[sauloperez]

We will try it as a papercut taking @luisramos0 's feedback into account

[mkllnk]

I'm not sure this is a papercut. This needs a bit more UX design

If we change the Back button to go to the enterprise, there is no way to reach the payment list overview. Is that good? The overview tells you for each payment method which enterprise is associated with it. If we don't need that feature, it's okay, the payment methods tab of an enterprise is also listing all payment methods.

I find the Manage link confusing. It's not clear what you manage there and it's the same as the Enterprises link in the menu, right?

You can already go back to the enterprise by selecting it in the Hubs pane on the right. It doesn't go straight to the payment methods though. Changing that would be very easy.

If selecting the enterprise there is the right way to go back, then we wouldn't need the other back button. Just removing it could help people find the way back to their enterprise. That's also very easy.

Possible implementation

In order to make any back button go back to the enterprise we came from, we need the reference to that enterprise as Luis mentioned. My best idea is to change the URL:

Old:

• /admin/payment_methods/new
• /admin/payment_methods/5/edit

New:

• /admin/enterprises/enterprise-1/payment_methods/new
• /admin/enterprises/enterprise-1/payment_methods/5/edit

On the enterprise creation screen, we can then select the enterprise we came from even if there are other enterprises. We can have the back button going in the right direction as well.

/admin/payment_methods would be unavailable for enterprise users. The only access would be by super admin and we could discuss removing that page.

[mkllnk]

I also looked into the code we need to edit for this. It's a Spree controller which needs a lot of work. It's not easy to add this functionality.

[mkllnk]

Just in case another dev wants to work on this, I started a new spec: https://github.com/mkllnk/openfoodnetwork/pull/new/3728-payment-method-navigation

[RachL]

If we change the Back button to go to the enterprise, there is no way to reach the payment list overview. Is that good?

Yes I don't think the users are looking at this regularly. Worse case they need to edit a payment method to see on how many enterprise this payment method is used. But that's only for multi-shops hubs.

[mkllnk]

I stopped working on this but I just wanted to share the spec that I wrote in case someone else wants to pick it up.

spec/features/admin/enterprise_payment_methods_spec.rb

# frozen_string_literal: true

require "spec_helper"

describe "Managing payment methods of an enterprise", js: true do
  include AuthenticationWorkflow
  include WebHelper

  let(:enterprise) { create(:distributor_enterprise, owner: user) }
  let(:user) { create_enterprise_user }

  it "I can create a payment method" do
    quick_login_as user
    visit "#{edit_admin_enterprise_path(enterprise)}#payment_methods"
    expect(page).to have_content "You don't have any payment methods yet."
    click_link "Create One Now"

    fill_in "payment_method_name", with: "Cheque payment method"

    check "payment_method_distributor_ids_#{enterprise.id}"
    click_button "Create"

    expect(flash_message).to eq("Payment Method has been successfully created!")

    click_link "Back To Payment Methods List"
    # TODO
  end
end

[kirstenalarsen]

I think there might be a pretty simple solution to this

• change the link that is 'under' the arrow next to the enterprise name to go to the Payment Methods tab? (https://openfoodnetwork.org.au/admin/enterprises/warrenbayne-farm-collective/edit#/payment_methods) or shipping methods if you are on the shipping methods page
• change the arrow into a button or something that makes it more obvious it exists and can be used to go straight back into that enterprise's settings