xprops undefined

[jbpadilha]

Hello

I'm facing an issue with xprops passed down to a Zoid using a cross-domain. For some reason xprops has not been passed down. Does anyone have any thought ? It all relies inside the same domain.

Zoid Component:

import * as zoid from 'zoid/dist/zoid.frameworks';
import { PUBLISHER_URL } from '../config/config';

const ZoidComponent = zoid.create({
  tag: 'Trips-Publisher',
  url: getUrl(),
  containerTemplate: function containerTemplate({ doc, uid, frame, prerenderFrame }) {
    const container = doc.createElement('div');
    container.id = uid;
    frame.style.width = '-webkit-fill-available';
    frame.style.minWidth = '750px';
    frame.style.minHeight = '200px';
    frame.style.height = 'calc(90vh - 10px)';
    container.appendChild(frame);
    prerenderFrame.style.display = 'none';
    container.appendChild(prerenderFrame);
    return container;
  },
  prerenderTemplate: function containerTemplate({ doc }) {
    const html = doc.createElement('html');
    const p = doc.createElement('p');
    p.innerText = 'Please wait while the trips publisher loads...';
    html.appendChild(p);
    return html;
  },
  props: {
    bookingId: {
      type: 'string',
      required: true
    },
    openModal: {
      type: 'boolean'
    },
    handleCloseModal: {
      type: 'function'
    }
  }
});
export default ZoidComponent;

Calling the Component passing Paramenters

function App({ config = defaultConfig.toString() }: { config: string }): ReactElement {
  const parsedConfig: Config = JSON.parse(config);
  const [openModal, setOpenModal] = useState(false);

  useEffect(() => {
    const open = parsedConfig && parsedConfig.openModal === 'true';
    setOpenModal(open);
  }, [parsedConfig]);

  const handleCloseModal = () => {
    const callBack = parsedConfig.handleClose;
    if (callBack) {
      window.Function(callBack)();
    }
    setOpenModal(!openModal);
  }
  const ZoidReactComponent = ZoidComponent.driver('react', {
    React,
    ReactDOM
  });
  return (
    <div className="App">
      <header className="App-header">
        {parsedConfig && parsedConfig.openModal !== undefined && parsedConfig.bookingId && (
          <ZoidReactComponent bookingId={parsedConfig.bookingId} openModal={openModal} handleCloseModal={handleCloseModal} />  
        )}
      </header>
    </div>
  );
}

App.propTypes = {
  config: PropTypes.string
};


export default App;

Another Domain Business logic receiving the Props:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './react_dates_overrides.css';
import './config/i18next';
import 'typeface-roboto';
import 'react-dates/initialize';

import './config/moment';

import * as serviceWorker from './registerServiceWorker';
import ZoidComponent from './components/Integration/ZoidComponent';
import Main from './App';

import { initializeGA } from './config/googleAnalytics';
import AppProvider from './AppProvider';

initializeGA();

if (ZoidComponent) {
  // Initialization for Zoid Library
}
ReactDOM.render(
  <AppProvider>
    <Main {...window.xprops} />
  </AppProvider>,
  document.getElementById('root')
);

App.js

const App = ({ classes }) => {
  const WrappedIntegration = () => <Integration {...window.xprops} />;
  // eslint-disable-next-line no-console
  console.log('MAIN: window.xprops:', window.xprops);
  const oktaAuth = new OktaAuth(getOktaConfig());
  return (
    <BrowserRouter>
      <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
        <Suspense
          fallback={
            <div className={classes.loading}>
              <Typography>Please wait ...</Typography>
            </div>
          }
        >
          <Switch>
            <SecureRoute name="Integration" exact path={INTEGRATION} component={WrappedIntegration} />
            <SecureRoute
              name="IntegrationTest"
              exact
              path={INTEGRATION_TEST}
              component={IntegrationTest}
            />
            <Route exact path={INTEGRATION_CALLBACK} component={LoginCallBack} />
            <PrivateRoute path="/" key="app" component={Main} />
            <PublicRoute render={() => <Redirect to={LOGIN_ROUTE} />} />
          </Switch>
        </Suspense>
      </Security>
    </BrowserRouter>
  );
};

export default compose(
  withStyles(styles),
  DragDropContext(HTML5Backend)
)(App);

Integration.js

function Integration({
  classes,
  bookingIdPassed,
  getTokenByOktaToken,
  handleCloseModal,
  refreshApp,
  checkSession,
  auth,
  showError,
  ...props
}) {
  const { authState } = useOktaAuth();
  const history = useHistory();
  // eslint-disable-next-line no-console
  console.log('props:', props);
  // eslint-disable-next-line no-unused-vars
  const [xprops, setXProps] = useState(window.xprops);

  // SHOWING window.props passing by
  // eslint-disable-next-line no-console
  console.log('xprops:', window.xprops);
  return (<div>/div>);
  }

[dagjaneiro]

I'm having the same issue. I believe it's a bug introduced in 9.0.80, it started happening to me since I upgraded. It works fine for me with version 9.0.78.

Edit: I'm also using the same domain.

[jbpadilha]

I solved the issue changing the domains. But I was wondering if it could work in the same domain.

[bluepnume]

Hi @dagjaneiro thanks for the report. Do you have a url where we can repro the issue?

[dagjaneiro]

Unfortunately, I don't, but my setup looks like this:

Host app (React)

import * as zoid from 'zoid/dist/zoid.frameworks';

const EmberAppComponent = zoid
  .create({
    tag: 'ember-app',
    url: () => {
      const { pathname, search } = window.location;
      return `${environment.EMBER_APP_URL}${pathname}${search}`;
    },
    dimensions: {
      width: '100%',
      height: '100%',
    },
    autoResize: {
      height: true,
      width: true,
      element: 'main',
    },
  })
  .driver('react', {
    React,
    ReactDOM,
  });

Iframe app (Ember)

import * as zoid from 'zoid/dist/zoid.frameworks'

zoid.create({
  tag: 'ember-app',
});

// This is always false on the latest version
if (window.xprops) {
  this.isEmbedded = true;
}

[UsAndRufus]

Trying to update Zoid to 10.x from 9.0.78 and this is still an issue. It starts in 9.0.80.