How to open and close Shopify Polaris Modal using App-Bridge

Question

I'm using Shopify Polaris @3.4.0 and App-Bridge @1.0.3. Also used shopify-node-app as a starting.

I initialize app-bridge by passing apiKey and shopOrigin values like so:

<AppProvider apiKey={apiKey} shopOrigin={shopOrigin} 
  <Switch>
      <Route exact path='/admin' component={Dashboard} />
  </Switch>
</AppProvider>

In my Dashboard component I have a Modal component:

<Modal
   src='https://somewhere/',
   title='title',
   open={modalActive}
/>

I open the modal by setting the state to true for modalActive like so:

 this.setState({modalActive: true});

Shopify Polaris Modal uses an iframe when src is used and in that view I have a submit form. I would like to close the Modal when the form is submitted. I have tried dispatching an action to close the modal using app-bridge, but honestly I'm confused and these are all recent releases so any help is appreciated.

Might a good idea to raise an issue in the Polaris Github repo. The crew making Polaris monitor issues and they'll be the best resource to help out using it. SO at this time anyway is probably devoid of many Polaris users. — David Lazar, Jan 12 '19 at 23:07
Good point about commenting on their repo. Still keeping this open for anyone who may have an answer for me. — user3612888, Jan 12 '19 at 23:11
Where are your reading the value of `shopOrigin`? They keep referencing how to store it in their docs, but it's actually part of the iFrame src value, but I can't seem to figure out how to react it from the react code?! — SomethingOn, Oct 14 '19 at 04:48

score 0 · Answer 1 · answered Jan 17 '19 at 01:01

0

Long story short pass a function to the Modal primaryAction prop. The core of this is child to parent component state changes. So more of a ReactJS question.

answered Jan 17 '19 at 01:01

user3612888

39
4

Hey, Could you be more specific - lets say my modal was or sign up process and it completed successfully. how does the modal `primaryAction` set in the parent help? Can you post some code? – Shai Ben-Tovim Jun 10 '20 at 15:16

score 0 · Answer 2 · answered Aug 22 '20 at 17:21

Alright, had a similar issue and it's a little embarrassing to admit this but hey if it saves you a half and hour then great.

Shopify's Modal docs use active to keep the state of the externally triggered modal. But don't forget to use open as the actual prop to the <Modal> component:

<Modal
  open={active}
  ...rest of props
/>
    ...content
</Modal>

How to open and close Shopify Polaris Modal using App-Bridge

2 Answers2