npm package: @lightspeed/react-retail-eject-link
Description: React Link component to link from an embedded iframe app
Latest version: 1.0.13

# `@lightspeed/react-retail-eject-link`

[![npm version](https://badge.fury.io/js/%40lightspeed%2Freact-retail-eject-link.svg)](https://badge.fury.io/js/%40lightspeed%2Freact-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.

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

2. Consume the component:

```jsx
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](https://github.com/merchantos/webPOS/blob/master/assets/js/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:

```tsx
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;
```