npm package: @frontend-sdk/loyaltylion
Description: LoyaltyLion integration for Shogun Frontend.
Author: Shogun
Latest version: 0.28.1

# LoyaltyLion

LoyaltyLion integration for Shogun Frontend.

Power your ecommerce growth by building a better understanding of what will drive longer-lasting relationships and use those insights to create a loyalty program as unique as your brand.

<table>
  <tbody>
    <tr>
      <td>⚠️</td>
      <td>This package runs on Shogun Frontend and is in customer Beta. It might not currently support all ecommerce platforms or cover all use cases.</td>
    </tr>
  </tbody>
</table>

[LoyaltyLion website →](https://loyaltylion.com/)

## Installation

`yarn add @frontend-sdk/loyaltylion`

or

`npm install @frontend-sdk/loyaltylion`

## Initial setup

1. Send your LoyaltyLion _Site Token_ and LoyaltyLion _Secret_ to integrations@getshogun.com via [One Time Secret](https://onetimesecret.com/). These will be used on our backend for customer authentication.

2. In Shogun Frontend, call the `useLoyaltyLion` hook at the top level, so that the script is injected only once, and all LoyaltyLion components can utilize it. This hook injects and initializes the LoyaltyLion script.

```jsx
import { useLoyaltyLion } from '@frontend-sdk/loyaltylion'
import { useCustomerState } from 'frontend-customer'
import { useRouter } from 'frontend-router'

const App = () => {
  const { id, email, isLoggedIn } = useCustomerState()
  const customer = { id, email, isLoggedIn }
  const router = useRouter()

  useLoyaltyLion(loyaltyLionSiteToken, customer, router)
}
```

### How to find required values

You can find your LoyaltyLion _Site Token_ and LoyaltyLion _Secret_ [here](https://app.loyaltylion.com/go/manage/settings).

To find this page manually: log in to https://app.loyaltylion.com > click on "Manage" in the top nav bar > scroll down to the "Configurations" section in the left nav bar and click "Settings" > scroll down to the bottom of the page to see your token and secret.

## Limitations

### Not supported

- The [free product seamless](https://help.loyaltylion.com/en/articles/1965660-reward-free-product-seamless) and [in-cart rewards](https://developers.loyaltylion.com/docs/features/in-cart-rewards) LoyaltyLion components are **not** supported, and must not be present in your LoyaltyLion admin portal.

### Partially supported

- The [free product voucher](https://help.loyaltylion.com/en/articles/1965659-rewards-free-product-voucher) and [product discount voucher](https://help.loyaltylion.com/en/articles/1965658-reward-product-discount-voucher) redemption LoyaltyLion components try to add a product directly to the cart. This action is **not** supported and fails silently. One possible workaround is to use CSS to apply `display: none` to the parts of the LoyaltyLion component that mention adding directly to the cart. See LoyaltyLion's [CSS customization guide](https://developers.loyaltylion.com/sdk#customisation).

- The [referee welcome modal](https://developers.loyaltylion.com/sdk/components/referee-welcome-modal) has a button to automatically "apply discount". This action is **not** supported. The customer must manually enter the code at checkout. Again, a possible workaround is to use CSS to hide the button.

- To use LoyaltyLion's [custom rewards](https://help.loyaltylion.com/en/articles/1965661-reward-custom-reward), your developers will need to set up a custom webhook.

- Rewards are not automatically added to cart upon redemption. To redeem voucher rewards, customers must manually input the voucher code into the discount code input on the checkout page.

## LoyaltyLion Components

**Prerequisite**: Make sure you've followed the steps in [initial setup](#initial-setup) above.

Go to your LoyaltyLion admin portal to activate and customize the LoyaltyLion components you'd like to use.

Each LoyaltyLion component will provide you with a string of HTML. E.g. `<div data-lion-component-name></div>`.

Paste the provided HTML into the Shogun Frontend section where you'd like the LoyaltyLion component to appear. Note that some HTML code may need to be manually converted to JSX to work properly. E.g. The `<input>` tag in HTML is written as `<input />` in JSX.

Call the `useLoyaltyLionRefresh` hook from the Shogun Frontend section. This will be invoked once upon React component mount, and is required for the LoyaltyLion component to properly render upon client side navigation to that page.

### Loyalty Page

In your LoyaltyLion admin portal, navigate to https://app.loyaltylion.com/sites/YourLoyaltyLionSiteId/manage/design/app-integrated (Manage > Customize > Loyalty Page), customize as you like, and set to `visible`.

In Shogun Frontend, create a new section and page, and paste the following snippet.

```html
<div data-lion-integrated-page></div>
```

**Note**: Make sure this is the only element with a `data-lion...` attribute on this page.

Source: https://help.loyaltylion.com/en/articles/4385100-loyalty-page

#### Example

```jsx
import { useLoyaltyLionRefresh } from '@frontend-sdk/loyaltylion'

export const LoyaltyPage = () => {
  useLoyaltyLionRefresh()

  return (
    <>
      <div data-lion-integrated-page></div>
    </>
  )
}
```

### Other LoyaltyLion Components

A full list of LoyaltyLion's components and their code snippets can be found [here](https://developers.loyaltylion.com/sdk). There are components that are embeddable in the page, and others that are rendered in a modal. All will follow the same general format of pasting the provided HTML into Shogun Frontend. All require `useLoyaltyLionRefresh` to be called within that section to properly render upon client-side navigation.

Some LoyaltyLion components are partially supported or not supported at all. See [Limitations](#limitations) for more detail.

## Resources

[LoyaltyLion Help Centre](https://help.loyaltylion.com/)