@lightspeed/react-retail-eject-link

Introduction

React component which encapsulates the logic of ejecting from an iframe-embedded webapp and routing to a Retail view. It works both for the react-router (new) and gui_defs (legacy) routes.

Quick Start

1. Install the dependency in your webapp.

yarn add @lightspeed/react-retail-eject-link

2. Consume the component:

import React from 'react';
import RetailEjectLink from '@lightspeed/react-retail-eject-link';

class MyPage extends React.Component {
  render() {
    return (
      <div>
        {/* The `href` attribute is applied to the child `a` tag */}
        <RetailEjectLink href="/url/in/retail">
          <a>Go to purchases</a>
        </RetailEjectLink>

        {/* The `href` attribute is forcibly applied to the child `TextLink` component because of the `passHref` prop */}
        <RetailEjectLink href="/url/in/retail" passHref={true}>
          <TextLink>Go to purchases</TextLink>
        </RetailEjectLink>

        {/* The `onClick` of the child component will still execute prior to the route action */}
        <RetailEjectLink href="/url/in/retail">
          <button onClick={() => track('purchasesClicked')}>Go to purchases with tracking</button>
        </RetailEjectLink>

        {/* The `type` of the link can be specified (`navigateToContent` | `openUrl` | `pageRouterGoTo`(default) ). This `type` prop will then be used in Retail (see https://github.com/merchantos/webPOS/blob/master/assets/js/iframe.js). */}
        <RetailEjectLink
          href="/?form_name=listing&amp;name=purchase.listings.purchases&amp;shop_id=1"
          type="navigateToContent"
        >
          <a>Go to purchases with tracking</a>
        </RetailEjectLink>

        {/* [TO BE DEPRECATED, use `type="navigateToContent"` instead] For those pesky `gui_defs` routes pass the `isGuiDefs` prop so they get parsed correctly */}
        <RetailEjectLink
          href="/?form_name=listing&amp;name=purchase.listings.purchases&amp;shop_id=1"
          isGuiDefs={true}
        >
          <a>Go to purchases</a>
        </RetailEjectLink>
      </div>
    );
  }
}

3. Or use the programmatic way by calling the retailEjectLinkPostMessage function to post a message to the parent window:

The function receives an object with the following keys:

Param	Type	Required	Default	Description
href	string	Yes		URL in Retail.
type	LinkType	No	'pageRouterGoTo'	The type of the link can be specified (navigateToContent, openUrl, pageRouterGoTo). This type prop will then be used in Retail's iframe.js.
isGuiDefs	boolean	No	false	@deprecated Force type on isGuiDefs to be navigateToContent. Use type instead.

For example, using to retailEjectLinkPostMessage to redirect users to Retail after data querying:

import React from 'react';
import { retailEjectLinkPostMessage } from '.';

const ValidationComponent: React.FC = () => {
  const dataComingFromApi = {
    data: {
      validationStatus: 'completed',
    },
  };

  React.useEffect(
    () => {
      const {
        data: { validationStatus },
      } = dataComingFromApi;

      if (validationStatus === 'completed') {
        retailEjectLinkPostMessage({ href: 'url/in/retail' });
      }
    },
    [dataComingFromApi],
  );

  return <p>Validating. Please, wait...</p>;
};

export default ValidationComponent;