search

Shopify / shopify-app-bridge

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

Rails flash notices don't work when redirecting to home screen #203

Open Nikita2k opened 1 year ago

Nikita2k commented 1 year ago

Describe the bug

I'm trying to implement in app payments with AppBridge v2. My embedded app layout is the same as in shopify_app gem (code) with no AppBridge init and flash logic in the plain JS

home/index.html.erb

...
  <body>
    <div id="root" data-api-key="<%= @api_key %>" data-shop-host="<%= @host %>" data-shop-origin="<%= @shop_origin %>" data-notice="<%= flash[:notice] if !flash.empty? %>"></div>
    <script type="text/javascript" src="javascripts/admin.min.js?25"></script>
  </body>
...

admin.min.js

...
const config = {apiKey:props.apiKey, host: props.shopHost};
const toastMarkup = props.notice ? (
  <Toast content={props.notice} />
) : null;  
...
<Provider config={config} router={router}>
{toastMarkup}
 ...
</Provider>
...

For RecurringApplicationCharge I provide return URL with shop and host, which I received upon app loading. Once I confirm the charge I redirect customer to the home page with:

redirect_to "/?shop=#{params[:shopOrigin]}&host=#{params[:shopHost]}", flash: {notice: "Subscription Activated"}

Expected behaviour

Flash notice is rendered, home page is loaded once

Actual behaviour

Flash notice is not shown/shown briefly since page is loaded multiple times:

Started GET "/?shop=my-store.myshopify.com&host=YWRtaW4uc2hvcmUvaW5zdGFzZWVuLXRlc3Qtc3RvcmU" for 99.149.251.36 at 2023-05-08 23:44:36 -0700
Cannot render console from 99.149.251.36! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by HomeController#index as HTML
  Parameters: {"shop"=>"my-store.myshopify.com", "host"=>"YWRtaW4uc2hvcmUvaW5zdGFzZWVuLXRlc3Qtc3RvcmU"}
  Shop Load (0.2ms)  SELECT "shops".* FROM "shops" WHERE "shops"."shopify_domain" = ? LIMIT ?  [["shopify_domain", "my-store.myshopify.com"], ["LIMIT", 1]]
-----> index flash notice: Successfully checked in
-----> params: {"shop"=>"my-store.myshopify.com", "host"=>"YWRtaW4uc2hvcmUvaW5zdGFzZWVuLXRlc3Qtc3RvcmU", "controller"=>"home", "action"=>"index"}
  Rendering home/index.html.erb within layouts/embedded_app
  Shop Load (0.1ms)  SELECT "shops".* FROM "shops" WHERE "shops"."shopify_domain" = ? ORDER BY "shops"."id" ASC LIMIT ?  [["shopify_domain", "my-store.myshopify.com"], ["LIMIT", 1]]
  Rendered home/index.html.erb within layouts/embedded_app (Duration: 0.7ms | Allocations: 488)
  Rendered layouts/_flash_messages.html.erb (Duration: 0.2ms | Allocations: 132)
Completed 200 OK in 13ms (Views: 11.7ms | ActiveRecord: 0.2ms | Allocations: 33396)

Started GET "/?embedded=1&hmac=a1333b6b2227c7291c14fafc266d2d061f672f3883f23b5d23e8a34439bb4afa&host=YWRtaW4uc2hvcmUvaW5zdGFzZWVuLXRlc3Qtc3RvcmU&locale=en&session=9c5f29066f661524f819f7216fa0305b4c2d6c0639a575a38a4ce2d07f712fa7&shop=my-store.myshopify.com&timestamp=1683614680" for 99.149.251.36 at 2023-05-08 23:44:41 -0700
Cannot render console from 99.149.251.36! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by HomeController#index as HTML
  Parameters: {"embedded"=>"1", "hmac"=>"a1333b6b2227c7291c14fafc266d2d061f672f3883f23b5d23e8a34439bb4afa", "host"=>"YWRtaW4uc2hvcmUvaW5zdGFzZWVuLXRlc3Qtc3RvcmU", "locale"=>"en", "session"=>"9c5f29066f661524f819f7216fa0305b4c2d6c0639a575a38a4ce2d07f712fa7", "shop"=>"my-store.myshopify.com", "timestamp"=>"1683614680"}
  Shop Load (0.1ms)  SELECT "shops".* FROM "shops" WHERE "shops"."shopify_domain" = ? LIMIT ?  [["shopify_domain", "my-store.myshopify.com"], ["LIMIT", 1]]
-----> index flash notice:
-----> params: {"embedded"=>"1", "hmac"=>"a1333b6b2227c7291c14fafc266d2d061f672f3883f23b5d23e8a34439bb4afa", "host"=>"YWRtaW4uc2hvcmUvaW5zdGFzZWVuLXRlc3Qtc3RvcmU", "locale"=>"en", "session"=>"9c5f29066f661524f819f7216fa0305b4c2d6c0639a575a38a4ce2d07f712fa7", "shop"=>"my-store.myshopify.com", "timestamp"=>"1683614680", "controller"=>"home", "action"=>"index"}
  Rendering home/index.html.erb within layouts/embedded_app
  Shop Load (0.1ms)  SELECT "shops".* FROM "shops" WHERE "shops"."shopify_domain" = ? ORDER BY "shops"."id" ASC LIMIT ?  [["shopify_domain", "my-store.myshopify.com"], ["LIMIT", 1]]
  Rendered home/index.html.erb within layouts/embedded_app (Duration: 0.8ms | Allocations: 487)
  Rendered layouts/_flash_messages.html.erb (Duration: 0.2ms | Allocations: 127)
Completed 200 OK in 14ms (Views: 12.1ms | ActiveRecord: 0.2ms | Allocations: 33182)

Started GET "/?embedded=1&hmac=8ec4d014feeac09773200c9c4dbc7fc6faad5da950bcb73b13501910ffe3ef92&host=YWRtaW4uc2hvcmUvaW5zdGFzZWVuLXRlc3Qtc3RvcmU&locale=en&prefetch=1&session=9c5f29066f661524f819f7216fa0305b4c2d6c0639a575a38a4ce2d07f712fa7&shop=my-store.myshopify.com&timestamp=1683614680" for 99.149.251.36 at 2023-05-08 23:44:43 -0700
Cannot render console from 99.149.251.36! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by HomeController#index as HTML
  Parameters: {"embedded"=>"1", "hmac"=>"8ec4d014feeac09773200c9c4dbc7fc6faad5da950bcb73b13501910ffe3ef92", "host"=>"YWRtaW4uc2hvcmUvaW5zdGFzZWVuLXRlc3Qtc3RvcmU", "locale"=>"en", "prefetch"=>"1", "session"=>"9c5f29066f661524f819f7216fa0305b4c2d6c0639a575a38a4ce2d07f712fa7", "shop"=>"my-store.myshopify.com", "timestamp"=>"1683614680"}
  Shop Load (0.1ms)  SELECT "shops".* FROM "shops" WHERE "shops"."shopify_domain" = ? LIMIT ?  [["shopify_domain", "my-store.myshopify.com"], ["LIMIT", 1]]
-----> index flash notice:
-----> params: {"embedded"=>"1", "hmac"=>"8ec4d014feeac09773200c9c4dbc7fc6faad5da950bcb73b13501910ffe3ef92", "host"=>"YWRtaW4uc2hvcmUvaW5zdGFzZWVuLXRlc3Qtc3RvcmU", "locale"=>"en", "prefetch"=>"1", "session"=>"9c5f29066f661524f819f7216fa0305b4c2d6c0639a575a38a4ce2d07f712fa7", "shop"=>"my-store.myshopify.com", "timestamp"=>"1683614680", "controller"=>"home", "action"=>"index"}
  Rendering home/index.html.erb within layouts/embedded_app
  Shop Load (0.1ms)  SELECT "shops".* FROM "shops" WHERE "shops"."shopify_domain" = ? ORDER BY "shops"."id" ASC LIMIT ?  [["shopify_domain", "my-store.myshopify.com"], ["LIMIT", 1]]
  Rendered home/index.html.erb within layouts/embedded_app (Duration: 0.6ms | Allocations: 496)
  Rendered layouts/_flash_messages.html.erb (Duration: 0.2ms | Allocations: 128)
Completed 200 OK in 14ms (Views: 12.6ms | ActiveRecord: 0.2ms | Allocations: 33354)

As you can see upon initial loading I provide shop & host, however the page is reloaded twice with embedded=1 and different hmacs

I understand why flash is no longer available (the page is reloaded after rendering), I don't really understand if flash is ok to use when doing embedded app with Polaris / AppBridge. What am I doing wrong?

To Reproduce

Steps to reproduce the behaviour:

  1. Launch the app from the admin panel sidebar
  2. Observer more than one http request to main controller

Contextual information

Packages and versions

List the relevant packages you’re using, and their versions. For example:

geetfun commented 1 year ago

I can confirm I'm experiencing a similar problem.

The flash object seems to be "lost" on these redirects.

paulorivera27 commented 1 year ago

Same issue here.. not able to render the flash.