@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;