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

For Development, read here

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

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/dist/kiwin/affiliates-dashboard.umd.js"></script>
• <link rel="stylesheet" href="node_modules/@dp-websolutions/affiliates-dashboard/dist/kiwin/style.css" />
• Component and routes are available at window.AffiliatesDashboard

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

• const {AffiliatesDashboard, AffiliatesDashboardRoutes} = require('@dp-websolutions/affiliates-dashboard/kiwin')
• Import styles either with build step or with a link tag

Using import and build step

• import {AffiliatesDashboard, AffiliatesDashboardRoutes} from '@dp-websolutions/affiliates-dashboard/kiwin';
• import '@dp-websolutions/affiliates-dashboard/kiwin/style';

Create a vue app and mount it

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

import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";

const app = createApp(
  {
    template: '<affiliates-dashboard :config="config" />',
  },
  { config }
);
const router = createRouter({
  history: createWebHistory(),
  routes: AffiliatesDashboardRoutes,
});
app.use(router);
app.component("affiliates-dashboard", AffiliatesDashboard);
app.mount("#affiliates-vue-app");

<!-- 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 install
2. npm run dev
3. Go to localhost:8080 any changes will automatically reload the page