@dp-websolutions/affiliates-dashboard

Affiliates dashboard

This repository contains the code of a Vue app bundled as an installable plugin from npm.

RFC

https://docs.google.com/document/d/18z9dX3NaaV23x8_qmUBRTKj3vsL_LRTeaoF2wWeelYk/edit#

Installation

npm install @dp-websolutions/affiliates-dashboard vue vue-router tailwindcss

Usage

This module exports a function that receives a config object and it will return a new vue app.

Import the module

You can load this module in different ways:

Load the script directly into a page

• <script src="node_modules/@dp-websolutions/affiliates-dashboard/affiliates-dashboard.umd.js"></script>
• window.AffiliatesDashboard

In a compilation step, that will later generate a javascript bundle and loaded into a page

• const AffiliatesDashboard = require('@dp-websolutions/affiliates-dashboard')

Using import

• import AffiliatesDashboard from '@dp-websolutions/affiliates-dashboard'

Create and mount the app

After importing the module, we can create and mount the app.

const app = AffiliatesDashboard({}); // See below the required configuration

app.mount("#affiliates-dashboard");

<!-- The app will render here -->
<div id="affiliates-dashboard"></div>

Required config

The configuration object passed to this component should provide the following:

platform

type: string
Default: ''
Options: 'jemlit' 'kiwin'

Tell which platform is loading the dashboard

locale

type: string
Default: en

Will use this value to select the right translations.

affiliateBonus

type: float
Default: 0

This is the percentage of bonus that the affiliate gets every time another user makes a purchase using their referral code.

followerBonus

type: float
Default: 0

This is the percentage of bonus that users get on top of their purchase every time they user a referral code.

referralBaseUrl

type: string
Default: ''
Example: 'https://jemlit.com/r/' 'https://kiwin.io/r/'

This is the url that points to the affiliates dashboard or referral page

endpoints

type: object
Default: {}

key, value list of api endpoints.

endpoints.setNickname

type: string
Example: 'https://jemlit.com/api/affiliates/nickname'

endpoints.me

type: string
Example: 'https://jemlit.com/api/affiliates/me'

endpoints.createClaim

type: string
Example: 'https://jemlit.com/api/affiliates/claim'

endpoints.getClaim

type: string
Example: 'https://jemlit.com/api/affiliates/claim'

endpoints.referralsHistory

type: string
Example: 'https://jemlit.com/api/affiliates/history/referrals'

endpoints.transactionsHistory

type: string
Example: 'https://jemlit.com/api/affiliates/history/transactions'

translations

type: object
Default: {}
Example:

translations: {
  affiliates_landing: {
    'cta-authenticated': 'Set the nickname & Start!',
    'cta-visitor': 'Start now!'
  },
  affiliates_dashboard: {
    referrals: 'You have :count referrals'
  }
}

key, value list of translated texts

assets

type: object
Default: {}
Example:

assets: {
  logo: 'https://..../logo.png'
}

Development

To develop locally, clone the repository and run the following commands from within the directory

1. npm run install
2. npm run dev
3. Go to localhost:8080 any changes will automatically reload the page