App bridge Modal Iframe APP::ERROR::INVALID_CONFIG

Al1_andre
Tourist
7 1 1

I followed the rails app Build a Shopify app with Rails, React, and App Bridge to base my app on.

I need a modal showing a datePicker... it looks simple but I cannot figure how to do ... I mean I figured out how to create a button and call a modal using appBridge Modal, but for the content it cannot be other than an Iframe. And I miss something.

I have created a route in my rails app (get "/date", to: "settings#date"), with a view called settings/date that call a react component with react_component method. Now when I open the modal I have an error AppBridgeError: APP::ERROR::INVALID_CONFIG: host must be provided

Here is my code

controller (app/controllers/settings_controller.rb)

 

 

class SettingsController < ApplicationController
  include ShopifyApp::EmbeddedApp

  def datepicker
  end
end

 

The view (app/views/settings/date.html.erb)

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://unpkg.com/@shopify/polaris@4.22.0/styles.min.css"/>
  </head>
  <body>
    <%= react_component("DateSettings") %>
  </body>
</html>

 

The component (app/javascript/components/DateSettings.js)

 

import { Page, DatePicker } from '@shopify/app-bridge/actions';

import React, { useState, useCallback } from 'react';

export default function DateSettings(date=null) {
  date = Object.keys(date).length === 0 ? new Date() : date;

  const [{ month, year }, setDate] = useState({
    month: date.getMonth(),
    year: date.getFullYear(),
  });

  const handleMonthChange = useCallback(
    (month, year) => setDate({ month, year }),
    [],
  );

  return (
    <Page>
      <DatePicker
        month={month}
        year={year}
        onChange={(change) => {
          console.log(change);
          app.dispatch(Modal.data(payload));
        }}
        onMonthChange={handleMonthChange}
        selected={{ start: date, end: date }}
      />
    </Page>
  );
}

 

Anyone can help ? If the modal call an Iframe, I must call again the whole authentication thing in the controller ?  The view must contain headers etc ? the component must be in an app ? 

0 Likes