search

Shopify / shopify-app-bridge

https://shopify.dev/docs/api/app-bridge
85 stars 9 forks source link

Using NavigationMenu after app charge confirmation does page reload #155

Open kaarelss opened 1 year ago

kaarelss commented 1 year ago

Describe the bug

App bridge does page reload when using any path from NavigationMenu component after app charge is confirmed and redirected back to app.

To Reproduce

Steps to reproduce the behaviour:

  1. Create a new Shopify bootstrap application, following your own tutorial: https://github.com/Shopify/shopify-app-template-ruby/blob/main/README.md

  2. Create new rails controller charge_controller.rb

    
class ChargeController < AuthenticatedController

def create
charge = ShopifyAPI::RecurringApplicationCharge.new(session: ShopifyAPI::Context.active_session)

shop = ShopifyAPI::Context.active_session.shop
admin_url = "#{shop}/admin"
host = Base64.strict_encode64(admin_url).to_s.strip

return_url = root_url(shop: shop)
return_url = "#{return_url}&host=#{host}"

charge.name = "Test Charge"
charge.trial_days = 0
charge.price = 20
charge.return_url = return_url
charge.test = true

charge.save!

admin_redirect_path = charge.confirmation_url.to_s.sub(/.*\/admin/, "")

render(json: { success: true, error: nil, admin_redirect_path: admin_redirect_path }, status: 200)
end

end

4. Add new path in the `routes.rb`

... get "/api/charge/create", to: "charge#create" ...

5. Add charge apply method in `index.js`

import { Redirect } from '@shopify/app-bridge/actions'; import { TitleBar, useAppBridge } from '@shopify/app-bridge-react'; import { NavLink } from 'react-router-dom'; import { useAuthenticatedFetch } from '../hooks/index.js'; ... export default function HomePage() { const app_bridge = useAppBridge(); const redirect = Redirect.create(app_bridge); const fetch = useAuthenticatedFetch();

const handleCharge = async () => { const response = await fetch("/api/charge/create"); const response_json = await response.json();

if (response.ok) {
  redirect.dispatch(Redirect.Action.ADMIN_PATH, response_json["admin_redirect_path"]);
}

}

return (

... ... ``` 6. Click on `Apply` in App Charge section and approve the charge. 7. When redirected back to home, click any of the `NavigationMenu` paths and see that page is reloaded. One thing we noticed is that app name in the admin URL is changed from: `https://excelify-karlis.myshopify.com/admin/apps/matrixify-karlis/` to: `https://excelify-karlis.myshopify.com/admin/apps/e639fee65dfdd0b436a3492f56e18972/` where app name is changed to some ID. What is interesting that if you take this URL with the ID and paste in a new browser tab, then the `NavigationMenu` is also not working correctly and doing page reloads. See the following video showing how it behaves: https://youtu.be/RYzU1mYl0T8 Here is additional issue that we sometimes get when using `NavigationMenu` - https://youtu.be/Ff6TffJVYbo ### Expected behaviour `NavigationMenu` should always work without page reloads. ## Contextual information ### Packages and versions List the relevant packages you’re using, and their versions. For example: - `@shopify/app-bridge` @ `^3.3.2` - `@shopify/app-bridge-react` @ `^3.3.2` - `@shopify/app-bridge-utils` @ `^3.3.2` - `@shopify/polaris` @ `^9.11.0` - `react-router-dom` @ `^6.3.0` ## Platform - OS: MacOS - OS Version: 12.5.1 - App: Chrome @itissible/matrixify
MitchLillie commented 1 year ago

Hi @kaarelss! Thank you for this extremely detailed bug report, it's a huge help.

This issue is actually even deeper than what you mentioned. Anytime an app is loaded via the apiKey (which is exactly what's happening after you redirect back from the recurring charge page), when a user clicks on a navigation item, the iframe will do a full reload. As you correctly noticed, this is because the navigation menu is using only the app handle in its links, whereas the app is capable of being loaded via either api key or app handle.

This is a known issue, and we are actively prioritizing a fix. That fix will involve only ever loading apps via their app handle (and redirecting if they try to use the api key). This issue should be fixed by that work. We'll keep you updated here with any progress.

kaarelss commented 1 year ago

Hi @MitchLillie. Thank you and your team for looking into this.

marisveide commented 1 year ago

By the way - we started to receive additional client complaints that the side-menu does not change any iframe page - basically this what is visible in this video: https://youtu.be/Ff6TffJVYbo So it looks like it's happening more for others as well.

The Merchant browser is: Chrome, Version 106.0.5249.119 (Official Build) (x86_64)

MitchLillie commented 1 year ago

@marisveide Yes--that's a separate but known issue, a fix for which should be in ASAP