1.0.11 • Published 2 years ago
@lightspeed/react-retail-eject-link v1.0.11
@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
- Install the dependency in your webapp.
yarn add @lightspeed/react-retail-eject-link
- 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&name=purchase.listings.purchases&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&name=purchase.listings.purchases&shop_id=1"
isGuiDefs={true}
>
<a>Go to purchases</a>
</RetailEjectLink>
</div>
);
}
}
- 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;
1.0.11
2 years ago
1.0.7
2 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago
0.4.3
4 years ago
0.4.2
5 years ago
0.4.1
5 years ago
0.4.0
5 years ago
0.3.0
5 years ago
0.2.7
5 years ago
0.2.6
5 years ago
0.2.5
5 years ago
0.2.4
5 years ago
0.2.3
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago